From 0da5ee3189dd5eedd5404ee3c1a783442b69645c Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期三, 18 九月 2024 03:09:18 +0800
Subject: [PATCH] 大屏背景+数字动态+返回后台

---
 src/views/screen/index.vue |   71 ++++++++++++++++++++++++++++++-----
 1 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index a36e321..0f5f718 100644
--- a/src/views/screen/index.vue
+++ b/src/views/screen/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container" 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,6 +44,8 @@
       </div>
 
       <div class="map-container" ref="isMap">
+        <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></mapApp>
         <div class="btn-container">
           <img src="@/assets/images/btn-bg.png" class="bg-img"/>
@@ -69,7 +71,9 @@
               />
               <ul>
                 <li v-for="(item, index) in facilityData.video" :key="index">
-                  <div class="value">{{ item.value ? item.value : "-" }}</div>
+                  <div class="value">
+                    <animate-number from="0" :to="item.value" :key="item.value"></animate-number>
+                  </div>
                   <div class="title">{{ item.title }}</div>
                 </li>
               </ul>
@@ -81,7 +85,8 @@
               />
               <ul>
                 <li v-for="(item, index) in facilityData.car" :key="index">
-                  <div class="value">{{ item.value ? item.value : "-" }}</div>
+<!--                  <div class="value">{{ item.value ? item.value : "-" }}</div>-->
+                  <div class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
                   <div class="title">{{ item.title }}</div>
                 </li>
               </ul>
@@ -96,7 +101,8 @@
                   v-for="(item, index) in facilityData.face"
                   :key="index"
                 >
-                  <div class="value">{{ item.value ? item.value : "-" }}</div>
+<!--                  <div class="value">{{ item.value ? item.value : "-" }}</div>-->
+                  <div class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
                   <div class="title">{{ item.title }}</div>
                 </li>
               </ul>
@@ -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 + '%' : '&#45;&#45;' }}</li>-->
+<!--                  <li>{{ item.carRate ? item.carRate + '%' : '&#45;&#45;' }}</li>-->
+<!--                  <li>{{ item.faceRate ? item.faceRate + '%' : '&#45;&#45;' }}</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>
@@ -368,7 +377,10 @@
     tabChange(id) {
       this.activerBtnType = id
       this.getData();
-    }
+    },
+    // formatter: function (num) {
+    //   return num.toFixed(2)
+    // },
   },
   watch: {
     workOrderData() {
@@ -1373,4 +1385,41 @@
   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: 900px;
+  height: 900px;
+  position: absolute;
+  top: calc(50% - 450px);
+  left: calc(50% - 450px);
+  transform: skewX(-5deg) skewY(-10deg);
+  animation: rotateImage 36s linear infinite;
+}
+
+.rotating-image-in {
+  width: 850px;
+  height: 850px;
+  position: absolute;
+  top: calc(50% - 425px);
+  left: calc(50% - 425px);
+  animation: rotateCounterClockwise 48s linear infinite;
+}
 </style>

--
Gitblit v1.8.0