From 8f38cbf36743746bde6997cef3998eadc6e95e10 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期二, 07 一月 2025 18:16:00 +0800
Subject: [PATCH] 核算重构
---
src/views/screen/index.vue | 283 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 185 insertions(+), 98 deletions(-)
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index a36e321..e612b3d 100644
--- a/src/views/screen/index.vue
+++ b/src/views/screen/index.vue
@@ -1,9 +1,9 @@
<template>
- <div class="container" ref="contaner">
+ <div class="container" style="font-size: 0.75vw" ref="contaner">
<header>
+ <i @click="returnPath" class="el-icon-s-home" style="color: #00b4ff;position: absolute;font-size: 24px;left: 98%;top: 15%"></i>
<img src="@/assets/images/header-bg.png"/>
</header>
-
<div class="main-contaner">
<div class="data-statistics-content">
<img src="@/assets/images/workOrder-title.png" class="title"/>
@@ -44,7 +44,9 @@
</div>
<div class="map-container" ref="isMap">
- <mapApp @clickMap="getDeptId" :geoCoordinates=scoreData></mapApp>
+ <img src="@/assets/map/texture/rotating-point2.png" alt="Rotating Image" class="rotating-image">
+ <img src="@/assets/map/texture/rotatingAperture.png" alt="Rotating Image" class="rotating-image-in">
+ <mapApp @clickMap="getDeptId" :geoCoordinates=scoreData :platformData = platformData></mapApp>
<div class="btn-container">
<img src="@/assets/images/btn-bg.png" class="bg-img"/>
<div class="btn-list" v-model="activerBtnType">
@@ -69,8 +71,10 @@
/>
<ul>
<li v-for="(item, index) in facilityData.video" :key="index">
- <div class="value">{{ item.value ? item.value : "-" }}</div>
- <div class="title">{{ item.title }}</div>
+ <div style="font-size: 0.75vw" class="value">
+ <animate-number from="0" :to="item.value" :key="item.value"></animate-number>
+ </div>
+ <div style="font-size: 0.75vw" class="title">{{ item.title }}</div>
</li>
</ul>
</div>
@@ -81,8 +85,9 @@
/>
<ul>
<li v-for="(item, index) in facilityData.car" :key="index">
- <div class="value">{{ item.value ? item.value : "-" }}</div>
- <div class="title">{{ item.title }}</div>
+<!-- <div class="value">{{ item.value ? item.value : "-" }}</div>-->
+ <div style="font-size: 0.75vw" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
+ <div style="font-size: 0.75vw" class="title">{{ item.title }}</div>
</li>
</ul>
</div>
@@ -96,8 +101,9 @@
v-for="(item, index) in facilityData.face"
:key="index"
>
- <div class="value">{{ item.value ? item.value : "-" }}</div>
- <div class="title">{{ item.title }}</div>
+<!-- <div class="value">{{ item.value ? item.value : "-" }}</div>-->
+ <div style="font-size: 0.75vw" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
+ <div style="font-size: 0.75vw" class="title">{{ item.title }}</div>
</li>
</ul>
</div>
@@ -108,9 +114,9 @@
<div class="normal-statistics-content">
<ul class="list-title-container">
<li>鍦板尯</li>
- <li>瑙嗛璁惧</li>
- <li>杞﹁締璁惧</li>
- <li>浜鸿劯璁惧</li>
+ <li>瑙嗛</li>
+ <li>杞﹁締</li>
+ <li>浜鸿劯</li>
</ul>
<div class="list-content">
<div class="list-content-to is-scroll-bar">
@@ -120,9 +126,12 @@
:key="index"
>
<li class="name">{{ item.area }}</li>
- <li>{{ item.videoRate ? item.videoRate + '%' : '--' }}</li>
- <li>{{ item.carRate ? item.carRate + '%' : '--' }}</li>
- <li>{{ item.faceRate ? item.faceRate + '%' : '--' }}</li>
+ <li><animate-number from="0" :to="item.videoRate" :key="item.videoRate"></animate-number>%</li>
+ <li><animate-number from="0" :to="item.carRate" :key="item.carRate"></animate-number>%</li>
+ <li><animate-number from="0" :to="item.faceRate" :key="item.faceRate"></animate-number>%</li>
+ <!-- <li>{{ item.videoRate ? item.videoRate + '%' : '--' }}</li>-->
+<!-- <li>{{ item.carRate ? item.carRate + '%' : '--' }}</li>-->
+<!-- <li>{{ item.faceRate ? item.faceRate + '%' : '--' }}</li>-->
</ul>
</div>
</div>
@@ -145,7 +154,7 @@
>
<div class="proportion">
<img src="@/assets/images/face-num-bg.png"/>
- <div class="value">{{ item.value }}%</div>
+ <div class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number>%</div>
</div>
<div class="title">{{ item.name }}</div>
</div>
@@ -158,7 +167,7 @@
:key="index"
>
<div class="video-data">
- <div class="proportion">{{ item.value }}%</div>
+ <div class="proportion"><animate-number from="0" :to="item.value" :key="item.value"></animate-number>%</div>
</div>
<div class="item-video-title">{{ item.name }}</div>
</div>
@@ -171,7 +180,7 @@
:key="index"
:style="item.style"
>
- {{ item.name }} <span>{{ item.value }}%</span>
+ {{ item.name }} <span><animate-number from="0" :to="item.value" :key="item.value"></animate-number>%</span>
</div>
</div>
</div>
@@ -183,7 +192,7 @@
<script>
import itemSubheading from '../screen/components/subheading.vue' // 鐜舰缁熻鍥�
import lineChart from '../screen/components/lineChart.vue' // 鎶樼嚎缁熻鍥�
-import mapApp from '../screen/components/map.vue' // 鍦板浘
+import mapApp from '../screen/components/map3.vue' // 鍦板浘
import {
getDepartmentData,
getDeviceData,
@@ -193,7 +202,8 @@
checkFace,
checkCar,
checkVideo,
- checkScore
+ checkScore,
+ getPlatform
} from "@/api/newpage";
export default {
@@ -203,55 +213,64 @@
return {
deptList: [],
deptId: '',
+ intervalId: null, // 鐢ㄤ簬瀛樺偍瀹氭椂鍣ㄧ殑ID
carList: [],
videoList: [],
faceList: [],
workOrderData: [],
workOrderRegion: [],
+ platformData: null,
scoreData: {
- 鑷祦浜曞尯: [
- {
- value: 0,
- name: '寰楀垎'
- }
- ],
- 楂樻柊鍖�: [
- {
- value: 0,
- name: '寰楀垎'
- }
- ],
- 澶у畨鍖�: [
- {
- value: 0,
- name: '寰楀垎'
- }
- ],
- 娌挎哗鍖�: [
- {
- value: 0,
- name: '寰楀垎'
- }
- ],
- 璐′簳鍖�: [
- {
- value: 0,
- name: '寰楀垎'
- }
- ],
- 鑽ｅ幙: [
- {
- value: 0,
- name: '寰楀垎'
- }
- ],
- 瀵岄『鍘�: [
- {
- value: 0,
- name: '寰楀垎'
- }
- ]
- },
+ 鑷祦浜曞尯: [
+ {
+ video: 0,
+ car: 0,
+ face: 0
+ },
+ ],
+ 楂樻柊鍖�: [
+ {
+ video: 0,
+ car: 0,
+ face: 0
+ },
+ ],
+ 澶у畨鍖�: [
+ {
+ video: 0,
+ car: 0,
+ face: 0
+ },
+ ],
+ 娌挎哗鍖�: [
+ {
+ video: 0,
+ car: 0,
+ face: 0
+ },
+ ],
+ 璐′簳鍖�: [
+ {
+ video: 0,
+ car: 0,
+ face: 0
+ },
+ ],
+ 鑽ｅ幙: [
+ {
+ video: 0,
+ car: 0,
+ face: 0
+ },
+ ],
+ 瀵岄『鍘�: [
+ {
+ video: 0,
+ car: 0,
+ face: 0
+ },
+ ]
+ },
// 璁惧鏁版嵁
facilityData: {
video: [],
@@ -297,8 +316,16 @@
})
.catch((err) => {
});
- // 鏌ヨ鏁版嵁
this.getData();
+ // 鏌ヨ鏁版嵁
+ this.intervalId = setInterval(this.getData, 3600000); //涓�灏忔椂涓�娆�
+ },
+ beforeDestroy() {
+ // 缁勪欢閿�姣佸墠娓呴櫎瀹氭椂鍣紝闃叉鍐呭瓨娉勬紡
+ if (this.intervalId) {
+ clearInterval(this.intervalId);
+ this.intervalId = null;
+ }
},
methods: {
getDeptId(deptName) {
@@ -355,8 +382,16 @@
});
checkScore(this.activerBtnType, this.deptId)
.then((res) => {
- if(res.data && Object.keys(res.data).length > 0){
+ if (res.data && Object.keys(res.data).length > 0) {
this.scoreData = res.data;
+ }
+ })
+ .catch((err) => {
+ });
+ getPlatform(this.activerBtnType, this.deptId)
+ .then((res) => {
+ if (res.data && Object.keys(res.data).length > 0) {
+ this.platformData = res.data;
}
})
.catch((err) => {
@@ -368,7 +403,10 @@
tabChange(id) {
this.activerBtnType = id
this.getData();
- }
+ },
+ // formatter: function (num) {
+ // return num.toFixed(2)
+ // },
},
watch: {
workOrderData() {
@@ -384,16 +422,15 @@
item1.value1 = this.workOrderData.doneNum
item1.value2 = this.workOrderData.totalNum - this.workOrderData.doneNum
item1.color = '#5cff9a'
- item1.title = '宸插鐞嗗伐鍗曟暟'
+ item1.title = '宸插鐞�'
this.statistics.push(item1)
let item2 = {value1: 0, value2: 0, title: "", color: ""}
item2.value1 = this.workOrderData.todoNum
item2.value2 = this.workOrderData.totalNum - this.workOrderData.todoNum
item2.color = '#ff7b72'
- item2.title = '鏈鐞嗗伐鍗曟暟'
+ item2.title = '鏈鐞�'
this.statistics.push(item2)
- console.log( this.statistics)
},
videoData() {
@@ -904,6 +941,8 @@
background-repeat: no-repeat;
display: flex;
flex-direction: column;
+ //justify-content: center;
+ //align-items: center;
.item-facility-icon {
margin: 0 auto;
@@ -921,8 +960,9 @@
flex-direction: column;
justify-content: space-around;
text-align: center;
- font-size: 14px;
list-style-type: none;
+ //font-size: 14px;
+ //padding-left: 0;
li:nth-child(1) {
.value {
@@ -964,6 +1004,7 @@
display: flex;
flex-direction: column;
height: 0;
+ //overflow: hidden;
.title {
width: 100%;
@@ -977,7 +1018,7 @@
position: relative;
border-bottom: 1px solid #3e97e4;
border-right: 1px solid #3e97e4;
- padding: 4% 4% 4% 0;
+ padding: 0 4% 4% 0;
box-sizing: border-box;
height: 0;
@@ -1004,8 +1045,11 @@
.list-title-container {
width: 100%;
- height: 45px;
- line-height: 45px;
+ //height: 45px;
+ //margin: 4px 0 0 0;
+ //line-height: 45px;
+ height: 4.17vh;
+ line-height: 4.17vh;
list-style-type: none;
display: flex;
flex-direction: row;
@@ -1038,7 +1082,7 @@
li {
width: 25%;
text-align: center;
- font-size: 14px;
+ font-size: 0.75vw;
color: #00e6f4;
flex-shrink: 0;
flex-grow: 0;
@@ -1078,8 +1122,9 @@
.list-content-to {
height: 100%;
- overflow-y: auto;
+ overflow-y: hidden;
overflow-x: hidden;
+ //padding: 10px 0;
}
.item-list {
@@ -1088,19 +1133,23 @@
align-items: center;
list-style-type: none;
border-bottom: 1px dashed #223654;
+ margin: 7px 0;
li {
width: 25%;
text-align: center;
- font-size: 14px;
+ //font-size: 14px;
+ font-size: 0.72916667vw !important;
color: #dcf8ff;
flex-shrink: 0;
flex-grow: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- height: 44px;
- line-height: 44px;
+ //height: 28px;
+ //line-height: 28px;
+ height: 2.59vh;
+ line-height: 2.59vh;
}
.name {
@@ -1183,7 +1232,8 @@
}
.footer-container {
- height: 220px;
+ //height: 220px;
+ height: 24.15vh;
box-sizing: border-box;
position: relative;
background-image: url("../../assets/images/footer-bg.png");
@@ -1209,19 +1259,10 @@
position: relative;
background-image: url("../../assets/images/face-bg.png");
- background-size: 500px 200px;
+ //background-size: 500px 200px;
+ background-size: 26.04166vw auto;
background-position: center;
background-repeat: no-repeat;
-
- // .face-bj-img {
- // position: absolute;
- // left: 50%;
- // top: 50%;
- // transform: translate(-50%, -50%);
- // width: 83.1946755%;
- // display: block;
- // z-index: 2;
- // }
.item-face-container {
position: absolute;
@@ -1229,7 +1270,8 @@
width: 22.296173%;
.proportion {
- width: 50px;
+ //width: 50px;
+ width: 2.60416vw;
margin: 0 auto;
color: #00eaff;
text-shadow: 2px 2px 4px #152944;
@@ -1245,13 +1287,14 @@
left: 50%;
top: 53%;
transform: translate(-50%, -50%);
- font-size: 14px;
+ //font-size: 14px;
}
}
.title {
text-align: center;
- font-size: 12px;
+ //font-size: 12px;
+ font-size: 0.625vw;
color: #dcf8ff;
white-space: nowrap; /* 涓嶆崲琛� */
overflow: hidden; /* 闅愯棌瓒呭嚭鐨勫唴瀹� */
@@ -1263,7 +1306,8 @@
.car-container {
position: relative;
background-image: url("../../assets/images/car-bg2.png");
- background-size: 500px 200px;
+ //background-size: 500px 200px;
+ background-size: 26.04166vw auto;
background-position: center;
background-repeat: no-repeat;
@@ -1281,9 +1325,10 @@
background-image: url("../../assets/images/item-car-bg.png");
background-size: 100% 100%;
color: #dcf8ff;
- font-size: 12px;
+ //font-size: 12px;
line-height: 26px;
padding: 0 15px;
+ font-size: 0.625vw;
position: absolute;
z-index: 5;
@@ -1331,7 +1376,8 @@
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
- font-size: 20px;
+ //font-size: 20px;
+ font-size: 1.04166vw;
font-weight: bold;
color: #00fcff;
text-shadow: 2px 2px 4px #152944;
@@ -1341,10 +1387,13 @@
.item-video-title {
text-align: center;
color: #dcf8ff;
- height: 32px;
- font-size: 13px;
+ //height: 32px;
+ //font-size: 13px;
+ //flex-shrink: 0;
+ //flex-grow: 0;
flex-shrink: 0;
flex-grow: 0;
+ height: 3.51851vh;
display: -webkit-box;
-webkit-line-clamp: 2; /* 鏄剧ず鐨勮鏁� */
-webkit-box-orient: vertical;
@@ -1373,4 +1422,42 @@
border-radius: 0;
background-color: #0d172c;
}
+
+@keyframes rotateImage {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes rotateCounterClockwise {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(-360deg); /* 娉ㄦ剰杩欓噷鏄�-360deg锛岃〃绀洪�嗘椂閽堟棆杞� */
+ }
+}
+
+.rotating-image {
+ width: 50vw;
+ height: 50vw;
+ position: absolute;
+ top: calc(50% - 24vw);
+ left: calc(50% - 24vw);
+ transform: skewX(-5deg) skewY(-10deg);
+ animation: rotateImage 36s linear infinite;
+}
+
+.rotating-image-in {
+ width: 47.5vw;
+ height: 47.5vw;
+ position: absolute;
+ top: calc(50% - 22.5vw);
+ left: calc(50% - 22.5vw);
+ animation: rotateCounterClockwise 48s linear infinite;
+}
+
</style>
--
Gitblit v1.8.0