lcw
This commit is contained in:
250
src/views/home/model/WarningDistrict.vue
Normal file
250
src/views/home/model/WarningDistrict.vue
Normal file
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">预警地域统计</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<!-- 滚动容器 -->
|
||||
<div class="scroll-container" @mouseenter="mEnter" @mouseleave="mLeave">
|
||||
<div class="scroll-wrapper" :style="{ transform: `translateY(-${scrollTop}px)` }">
|
||||
<ul ref="scrollItemBox" class="scroll-content">
|
||||
<!-- 数据项 -->
|
||||
<li v-for="(item, index) in dataList" :key="`first-${index}`" class="warning-item">
|
||||
<div class="rank-number"> {{ `${index >= 10 ? index : '0' + (index + 1)}` }}</div>
|
||||
<div class="bar">
|
||||
<div class="qymc">{{ item.name }}</div>
|
||||
<div class="jutz">
|
||||
<div class="jutf">
|
||||
<div class="jutf-bar" :style="{ width: item.bfb }"></div>
|
||||
</div>
|
||||
<div class="numbers">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- 复制的数据项用于无缝滚动 -->
|
||||
<li v-for="(item, index) in dataList" :key="`first-${index}`" class="warning-item">
|
||||
<div class="rank-number">
|
||||
{{ `${index >= 10 ? index : '0' + (index + 1)}` }}</div>
|
||||
<div class="bar">
|
||||
<div class="qymc">{{ item.name }}</div>
|
||||
<div class="jutz">
|
||||
<div class="jutf">
|
||||
<div class="jutf-bar" :style="{ width: item.bfb }"></div>
|
||||
</div>
|
||||
<div class="numbers">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { tbYjxxGetBmtj } from '@/api/yj'
|
||||
// 滚动相关变量
|
||||
const scrollTop = ref(0); // 列表滚动高度
|
||||
const speed = ref(60); // 滚动速度
|
||||
const copyHtml = ref(''); // 复制的HTML内容
|
||||
const scrollItemBox = ref(null); // 滚动项容器引用
|
||||
let timer = null;
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
// 初始化滚动
|
||||
initScroll();
|
||||
});
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化滚动
|
||||
function initScroll() {
|
||||
setTimeout(() => {
|
||||
if (scrollItemBox.value) {
|
||||
copyHtml.value = scrollItemBox.value.innerHTML;
|
||||
startScroll();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
const dataList = ref([])
|
||||
// 鼠标移入停止滚动
|
||||
function mEnter() {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标移出继续滚动
|
||||
function mLeave() {
|
||||
startScroll();
|
||||
}
|
||||
const gettbYjxxGetBmtj = () => {
|
||||
tbYjxxGetBmtj({}).then(res => {
|
||||
const total = res.reduce((acc, cur) => acc + Number(cur.sl), 0);
|
||||
dataList.value = res.map(item => {
|
||||
let bfb = total > 0 ? item.sl / total * 100 : 0
|
||||
if (bfb > 100) {
|
||||
bfb = 100
|
||||
}
|
||||
return {
|
||||
value: item.sl,
|
||||
name: item.ssbmmc,
|
||||
bfb: bfb + '%'
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
gettbYjxxGetBmtj()
|
||||
// 开始滚动
|
||||
function startScroll() {
|
||||
if (timer) return;
|
||||
timer = setInterval(() => {
|
||||
scrollTop.value++;
|
||||
// 获取需要滚动的盒子的高度
|
||||
if (scrollItemBox.value) {
|
||||
const scrollHeight = scrollItemBox.value.offsetHeight / 2; // 因为有两份相同数据
|
||||
// 当滚动高度大于等于盒子高度时，从头开始滚动
|
||||
if (scrollTop.value >= scrollHeight) {
|
||||
scrollTop.value = 0;
|
||||
}
|
||||
}
|
||||
}, speed.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.zdryBox {
|
||||
background: #052249;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
|
||||
// 滚动容器样式
|
||||
.scroll-container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: rgba(8, 42, 85, 0.5);
|
||||
// padding: 10px;
|
||||
}
|
||||
|
||||
// 滚动包装器
|
||||
.scroll-wrapper {
|
||||
width: 100%;
|
||||
transition: transform 0s linear;
|
||||
}
|
||||
|
||||
// 滚动内容样式
|
||||
.scroll-content {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 警告列表项样式
|
||||
.warning-item {
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding: 5px 10px;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
background: linear-gradient(90deg, rgba(10, 45, 90, 0.8), rgba(15, 50, 100, 0.5));
|
||||
border-left: 3px solid transparent;
|
||||
border-radius: 6px;
|
||||
// transition: all 0.3s ease;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
// // 排名1-3的特殊样式
|
||||
// &:nth-child(1),
|
||||
// &:nth-child(11) {
|
||||
// border-left-color: #FFD700; // 金色
|
||||
// background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(15, 50, 100, 0.5));
|
||||
// }
|
||||
|
||||
// &:nth-child(2),
|
||||
// &:nth-child(12) {
|
||||
// border-left-color: #C0C0C0; // 银色
|
||||
// background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), rgba(15, 50, 100, 0.5));
|
||||
// }
|
||||
|
||||
// &:nth-child(3),
|
||||
// &:nth-child(13) {
|
||||
// border-left-color: #CD7F32; // 铜色
|
||||
// background: linear-gradient(90deg, rgba(205, 127, 50, 0.15), rgba(15, 50, 100, 0.5));
|
||||
// }
|
||||
}
|
||||
|
||||
// 排名数字样式
|
||||
.rank-number {
|
||||
width: 40px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
font-family: "YSBTH";
|
||||
overflow: hidden;
|
||||
background: url('~@/assets/images/tmd.png') no-repeat center center;
|
||||
// background-image: url('~@/assets/images/tmd.png') center center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bar {
|
||||
flex: 1;
|
||||
|
||||
.qymc {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.jutz {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.jutf {
|
||||
height: 10px;
|
||||
flex: 1;
|
||||
background-color: rgba(0, 108, 151, 0.165);
|
||||
|
||||
.jutf-bar {
|
||||
background: linear-gradient(0deg, #fddb92 0%, #d1fdff 100%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.numbers {
|
||||
font-family: "YSBTH";
|
||||
width: 55px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user