大屏bug修改

src/views/report/statistics/screens/tasks/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div :key="viewKey" class="screen-container">
+  <div
+    :key="viewKey"
+    class="screen-container"
+    @click.stop="animationState = !animationState"
+  >
     <common-header title="工位任务分布/防静电监控" />
     <!-- <div
       style="
@@ -17,7 +21,7 @@
         :style="{ transform: 'scale(' + 1.5 + ')' }"
       />
     </div> -->
-    <div class="screen-content">
+    <div v-if="animationState" class="screen-content">
       <!-- <TransitionGroup class="rowbox" name="list1" tag="ul">
         <div v-for="(item, index) in showdatas1" :key="item" class="grid-item">
           <title-header :title="item.stationName" />
@@ -113,12 +117,12 @@
               <div class="box">
                 <div style="display: flex; align-items: center">
                   <dv-digital-flop
-                    :config="completeNumConfigs[index + 3]"
+                    :config="completeNumConfigs[index]"
                     class="flop"
                   />
                   <span class="plan-num">/</span>
                   <dv-digital-flop
-                    :config="taskNumConfigs[index + 3]"
+                    :config="taskNumConfigs[index]"
                     class="flop"
                   />
                 </div>
@@ -183,6 +187,172 @@
         </div>
       </TransitionGroup>
     </div>
+    <div v-else class="screen-content">
+      <!-- <TransitionGroup class="rowbox" name="list1" tag="ul">
+        <div v-for="(item, index) in showdatas1" :key="item" class="grid-item">
+          <title-header :title="item.stationName" />
+          <div class="grid-bottom">
+            <div class="left-info">
+              <div
+                class="box"
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                "
+              >
+                <div class="title">{{ item.materialName }}</div>
+                <div class="code">{{ item.materialModel }}</div>
+              </div>
+              <div class="box">
+                <div style="display: flex; align-items: center">
+                  <dv-digital-flop
+                    :config="completeNumConfigs[index]"
+                    class="flop"
+                  />
+                  <span class="plan-num">/</span>
+                  <dv-digital-flop
+                    :config="taskNumConfigs[index]"
+                    class="flop"
+                  />
+                </div>
+                <div class="desc">完成数量 / 计划数量</div>
+              </div>
+            </div>
+            <div class="right-chart">
+              <dv-water-level-pond
+                :config="{
+                  data: [setPondNumber(item.rate)],
+                  shape: 'round',
+                }"
+                :key="sum1"
+                style="width: 16vh; height: 16vh"
+              />
+            </div>
+          </div>
+        </div>
+      </TransitionGroup> -->
+      <div class="rowbox itemBackgroud" name="list1" tag="ul">
+        <title-header :title="'防静电监控'" />
+        <div class="chartsCarouselBox">
+          <div class="carouselHeader tableStyle">
+            <div class="left center1Text">工位名称</div>
+            <div class="right center1Text">状态</div>
+          </div>
+          <div class="carouselBody">
+            <div name="list" tag="ul">
+              <li
+                class="carouselItem tableStyle"
+                :key="item"
+                v-for="item in showData1"
+              >
+                <div class="left infoBackgroud centerText textComent">
+                  {{ item.stationName }}
+                </div>
+                <div
+                  :class="{
+                    outline: item.state === '离线',
+                    error: item.state === '故障',
+                  }"
+                  class="right infoBackgroud centerText textComent"
+                  style="font-weight: bolder"
+                >
+                  {{ item.state }}
+                </div>
+              </li>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rowbox" name="list2" tag="ul">
+        <div v-for="(item, index) in showdatas2" :key="item" class="grid-item">
+          <title-header :title="item.stationName" />
+          <div class="grid-bottom">
+            <div class="left-info">
+              <div
+                class="box"
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                "
+              >
+                <div class="title">{{ item.materialName }}</div>
+                <div class="code">{{ item.materialModel }}</div>
+              </div>
+              <div class="box">
+                <div style="display: flex; align-items: center">
+                  <dv-digital-flop
+                    :config="completeNumConfigs[index]"
+                    class="flop"
+                  />
+                  <span class="plan-num">/</span>
+                  <dv-digital-flop
+                    :config="taskNumConfigs[index]"
+                    class="flop"
+                  />
+                </div>
+                <div class="desc">完成数量 / 计划数量</div>
+              </div>
+            </div>
+            <div class="right-chart">
+              <dv-water-level-pond
+                :config="{
+                  data: [setPondNumber(item.rate)],
+                  shape: 'round',
+                }"
+                :key="sum1"
+                style="width: 16vh; height: 16vh"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rowbox" name="list3" tag="ul">
+        <div v-for="(item, index) in showdatas3" :key="item" class="grid-item">
+          <title-header :title="item.stationName" />
+          <div class="grid-bottom">
+            <div class="left-info">
+              <div
+                class="box"
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                "
+              >
+                <div class="title">{{ item.materialName }}</div>
+                <div class="code">{{ item.materialModel }}</div>
+              </div>
+              <div class="box">
+                <div style="display: flex; align-items: center">
+                  <dv-digital-flop
+                    :config="completeNumConfigs[index + 3]"
+                    class="flop"
+                  />
+                  <span class="plan-num">/</span>
+                  <dv-digital-flop
+                    :config="taskNumConfigs[index + 3]"
+                    class="flop"
+                  />
+                </div>
+                <div class="desc">完成数量 / 计划数量</div>
+              </div>
+            </div>
+            <div class="right-chart">
+              <dv-water-level-pond
+                :config="{
+                  data: [setPondNumber(item.rate)],
+                  shape: 'round',
+                }"
+                :key="sum1"
+                style="width: 16vh; height: 16vh"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -190,6 +360,7 @@
 import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
 import TitleHeader from "@/views/report/statistics/screens/titleHeader.vue";
 import { getStationTaskInfo, getStationState } from "@/api/bigScreen";
+const animationState = ref(true);
 const showData1 = ref([]);
 const fontSize = ref(0);
 const setPondNumber = (str) => {
@@ -314,24 +485,6 @@ const completeNumConfigs = ref([
       fontSize: fontSize,
     },
   },
-  {
-    number: [0],
-    style: {
-      fontSize: fontSize,
-    },
-  },
-  {
-    number: [0],
-    style: {
-      fontSize: fontSize,
-    },
-  },
-  {
-    number: [0],
-    style: {
-      fontSize: fontSize,
-    },
-  },
 ]);
 
 const taskNumConfigs = ref([
@@ -413,16 +566,12 @@ const setNumber = (time) => {
   // }
   if (showdatas2.value.length > 0) {
     showdatas2.value.forEach((item, index) => {
-      setTimeOutFnc(
-        completeNumConfigs.value[index + 3],
-        item.completeNum,
-        time
-      );
-      setTimeOutFnc(taskNumConfigs.value[index + 3], item.taskNum, time);
+      setTimeOutFnc(completeNumConfigs.value[index], item.completeNum, time);
+      setTimeOutFnc(taskNumConfigs.value[index], item.taskNum, time);
     });
   }
   if (showdatas3.value.length > 0) {
-    showdatas2.value.forEach((item, index) => {
+    showdatas3.value.forEach((item, index) => {
       setTimeOutFnc(
         completeNumConfigs.value[index + 3],
         item.completeNum,