<script setup lang="ts">
|
import { ref, onMounted, onUnmounted } from "vue";
|
import { currentGET } from "@/api";
|
import CountUp from "@/components/count-up";
|
|
|
// const getData = () => {
|
// currentGET("leftTop").then((res) => {
|
// console.log(res);
|
// if (res.success) {
|
// state.alarmNum = res.data.alarmNum;
|
// state.offlineNum = res.data.offlineNum;
|
// state.onlineNum = res.data.onlineNum;
|
// state.totalNum = res.data.totalNum;
|
// }
|
// });
|
// };
|
interface dataType {
|
// 近3年交通事故指数
|
targetOneName: string,
|
targetOneValue: number | string,
|
targetOneUnit: string,
|
targetOneStatus: number,
|
targetOneCompareValue: number | string,
|
// 立案
|
targetTwoName: string,
|
targetTwoValue: number | string,
|
targetTwoUnit: string,
|
targetTwoStatus: number,
|
targetTwoCompareValue: number | string,
|
// 受伤人数
|
targetThreeName: string,
|
targetThreeValue: number | string,
|
targetThreeUnit: string,
|
targetThreeStatus: number,
|
targetThreeCompareValue: number | string,
|
// 死亡人数
|
targetFourName: string,
|
targetFourValue: number | string,
|
targetFourUnit: string,
|
targetFourStatus: number,
|
targetFourCompareValue: number | string,
|
|
}
|
const dataInfo = ref(<dataType>{});
|
|
const getData = () => {
|
currentGET("leftTop").then((res) => {
|
console.log(res);
|
if (res.code === 200) {
|
dataInfo.value = res.data;
|
}
|
});
|
}
|
const step = 5000;
|
let timer: any = null;
|
|
const loop = () => {
|
// 立即请求一次
|
getData();
|
timer = setInterval(() => {
|
getData();
|
}, step);
|
}
|
|
const stopLoop = () => {
|
clearInterval(timer);
|
}
|
|
|
|
onMounted(() => {
|
// loop();
|
getData();
|
|
});
|
|
onUnmounted(() => {
|
stopLoop();
|
})
|
|
</script>
|
|
<template>
|
<ul class="user_Overview flex">
|
<li class="user_Overview-item">
|
<div class="user_Overview_nums allnum">
|
<div class="user_Overview_nums_img">
|
<img src="@/assets/img/sgjb.png" />
|
</div>
|
<div class="user_Overview_nums_img_p">
|
<p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ dataInfo.targetOneValue }}</span> <span
|
class="user_Overview_nums_img_p_num_nan">{{ dataInfo.targetOneUnit }}</span><span
|
class="user_Overview_nums_img_p_num_ss"
|
:class="{ 'user_Overview_nums_img_p_num_ss_d': dataInfo.targetOneStatus === 2 }">
|
{{ dataInfo.targetOneStatus === 1 ? '↑' : '↓' }}
|
{{ dataInfo.targetOneCompareValue }}%</span></p>
|
<p class="info-lable">{{ dataInfo.targetOneName }}</p>
|
</div>
|
<!-- <CountUp :endVal="state.totalNum" :duration="duration" />-->
|
</div>
|
<!-- <p>总设备数1</p>-->
|
</li>
|
<li class="user_Overview-item">
|
<div class="user_Overview_nums online">
|
<div class="user_Overview_nums_img">
|
<img src="@/assets/img/la.png" />
|
</div>
|
<div class="user_Overview_nums_img_p">
|
<p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ dataInfo.targetTwoValue }}</span> <span
|
class="user_Overview_nums_img_p_num_nan">{{ dataInfo.targetTwoUnit }}</span><span
|
class="user_Overview_nums_img_p_num_ss"
|
:class="{ 'user_Overview_nums_img_p_num_ss_d': dataInfo.targetTwoStatus === 2 }">
|
{{ dataInfo.targetTwoStatus === 1 ? '↑' : '↓' }}
|
{{ dataInfo.targetTwoCompareValue }}%</span></p>
|
<p class="info-lable">{{ dataInfo.targetTwoName }}</p>
|
</div>
|
|
<!-- <CountUp :endVal="state.onlineNum" :duration="duration" />-->
|
</div>
|
<!-- <p>在线数</p>-->
|
</li>
|
<li class="user_Overview-item">
|
<div class="user_Overview_nums offline">
|
<div class="user_Overview_nums_img">
|
<img src="@/assets/img/ssrs.png" />
|
</div>
|
<div class="user_Overview_nums_img_p">
|
<p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ dataInfo.targetThreeValue }}</span> <span
|
class="user_Overview_nums_img_p_num_nan">{{ dataInfo.targetThreeUnit }}</span><span
|
class="user_Overview_nums_img_p_num_ss"
|
:class="{ 'user_Overview_nums_img_p_num_ss_d': dataInfo.targetThreeStatus === 2 }">
|
{{ dataInfo.targetThreeStatus === 1 ? '↑' : '↓' }}
|
{{ dataInfo.targetThreeCompareValue }}%</span></p>
|
<p class="info-lable">{{ dataInfo.targetThreeName }}</p>
|
</div>
|
|
<!-- <CountUp :endVal="state.offlineNum" :duration="duration" />-->
|
</div>
|
<!-- <p>掉线数</p>-->
|
</li>
|
<li class="user_Overview-item">
|
<div class="user_Overview_nums laramnum">
|
<div class="user_Overview_nums_img">
|
<img src="@/assets/img/swrs.png" />
|
</div>
|
<div class="user_Overview_nums_img_p">
|
<p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ dataInfo.targetFourValue }}</span> <span
|
class="user_Overview_nums_img_p_num_nan">{{ dataInfo.targetFourUnit }}</span><span
|
class="user_Overview_nums_img_p_num_ss"
|
:class="{ 'user_Overview_nums_img_p_num_ss_d': dataInfo.targetFourStatus === 2 }">
|
{{ dataInfo.targetFourStatus === 1 ? '↑' : '↓' }}
|
{{ dataInfo.targetFourCompareValue }}%</span></p>
|
<p class="info-lable">{{ dataInfo.targetFourName }}</p>
|
</div>
|
|
<!-- <CountUp :endVal="state.alarmNum" :duration="duration" />-->
|
</div>
|
<!-- <p>告警次数</p>-->
|
</li>
|
</ul>
|
</template>
|
|
<style scoped lang="scss">
|
.user_Overview-item {
|
background-color: rgba(17, 34, 58, 0.6);
|
|
}
|
|
.left-top {
|
width: 100%;
|
height: 100%;
|
}
|
|
.user_Overview {
|
li {
|
flex: 1;
|
margin: 0 20px;
|
padding: 15px 0;
|
border: 1px solid #29466A;
|
|
p {
|
text-align: left;
|
//height: 16px;
|
font-size: 16px;
|
}
|
|
&:first-of-type {
|
margin-left: 0;
|
}
|
|
&:last-of-type {
|
margin-right: 0;
|
}
|
|
.user_Overview_nums {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
//width: auto;
|
//height: 100px;
|
text-align: center;
|
//line-height: 100px;
|
font-size: 22px;
|
//margin: 50px auto 30px;
|
//margin-top: 30px;
|
background-size: cover;
|
background-position: center center;
|
position: relative;
|
|
// &::before {
|
// content: "";
|
// position: absolute;
|
// width: 100%;
|
// height: 100%;
|
// top: 0;
|
// left: 0;
|
// }
|
|
&.bgdonghua::before {
|
animation: rotating 14s linear infinite;
|
}
|
}
|
|
.user_Overview_nums_img {
|
//background-color: floralwhite;
|
//padding: 6px;
|
border-radius: 8px;
|
width: 72px;
|
}
|
|
.user_Overview_nums_img_p {
|
//display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
align-items: flex-start;
|
//height: 90px;
|
//line-height: 40px;
|
margin-left: 10px;
|
|
.user_Overview_nums_img_p_numt {
|
color: #0071F8;
|
font-size: 25px;
|
font-weight: 800;
|
|
.user_Overview_nums_img_p_num_nan {
|
font-size: 14px;
|
color: #fff;
|
}
|
|
.user_Overview_nums_img_p_num_ss {
|
font-size: 14px;
|
color: #D44233;
|
}
|
}
|
|
.user_Overview_nums_img_p_num {
|
color: #F96FF8;
|
font-size: 25px;
|
font-weight: 800;
|
|
.user_Overview_nums_img_p_num_nan {
|
font-size: 14px;
|
color: #fff;
|
}
|
|
.user_Overview_nums_img_p_num_ss {
|
font-size: 14px;
|
color: #D44233;
|
}
|
}
|
|
.user_Overview_nums_img_p_nums {
|
color: #FE3146;
|
font-size: 25px;
|
font-weight: 800;
|
|
.user_Overview_nums_img_p_num_nan {
|
font-size: 14px;
|
color: #fff;
|
}
|
|
.user_Overview_nums_img_p_num_ss {
|
font-size: 14px;
|
color: #D44233;
|
}
|
|
.user_Overview_nums_img_p_num_ss_d {
|
font-size: 14px;
|
color: #22db69;
|
}
|
}
|
|
.user_Overview_nums_img_p_numf {
|
color: #EA7039;
|
font-size: 25px;
|
font-weight: 800;
|
|
.user_Overview_nums_img_p_num_nan {
|
font-size: 14px;
|
color: #fff;
|
}
|
|
.user_Overview_nums_img_p_num_ss {
|
font-size: 14px;
|
color: #D44233;
|
}
|
}
|
}
|
|
.allnum {
|
//background-image: url("@/assets/img/bbiao.png");
|
//&::before {
|
// background-image: url("@/assets/img/left_top_lan.png");
|
//}
|
}
|
|
.online {
|
//&::before {
|
// background-image: url("@/assets/img/left_top_lv.png");
|
//}
|
}
|
|
.offline {
|
//&::before {
|
// background-image: url("@/assets/img/left_top_huang.png");
|
//}
|
}
|
|
.laramnum {
|
//&::before {
|
// background-image: url("@/assets/img/left_top_hong.png");
|
//}
|
}
|
}
|
}
|
|
.info-num {
|
font-family: 'PangMenZhengDao';
|
}
|
|
.info-lable {
|
font-family: 'PingFang SC';
|
}
|
</style>
|
