Merge branch 'xf_dev' of http://maven.jgiot.com:7012/jiaxiaoqiang/JG-ADMIN-TEMP into xf_dev

src/views/report/statistics/screens/repertoryStatistic/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 class="screen-content">
       <div class="chartsCarouselBox itemBackgroud">
@@ -10,7 +14,7 @@
           <div class="a2 center1Text">出库数量</div>
           <div class="a2 center1Text">库存预警</div>
         </div>
-        <div class="carouselBody">
+        <div v-if="animationState" class="carouselBody">
           <TransitionGroup name="list" tag="ul">
             <li
               class="carouselItem tableStyle"
@@ -45,6 +49,41 @@
             </li>
           </TransitionGroup>
         </div>
+        <div v-else class="carouselBody">
+          <div name="list" tag="ul">
+            <li
+              class="carouselItem tableStyle"
+              :key="item"
+              style="height: 9.6vh"
+              v-for="item in showDatas"
+            >
+              <div class="a1 infoBackgroud centerText textComent">
+                {{ item.materialName }}
+              </div>
+              <div class="a2 infoBackgroud centerText textComent">
+                {{ item.allNum }}
+              </div>
+              <div
+                class="a2 infoBackgroud centerText textComent"
+                style="font-weight: bolder"
+              >
+                {{ item.inNum }}
+              </div>
+              <div
+                class="a2 infoBackgroud centerText textComent"
+                style="font-weight: bolder"
+              >
+                {{ item.outNum }}
+              </div>
+              <div
+                class="a2 infoBackgroud centerText textComent"
+                style="font-weight: bolder"
+              >
+                {{ item.warningNum }}
+              </div>
+            </li>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -54,6 +93,7 @@
 import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
 import { getLineSideStock, getOffLineInfo } from "@/api/bigScreen";
 import { useTimeInterval } from "@/hooks/timeInterval";
+const animationState = ref(true);
 const viewKey = ref(false);
 const checkFullscreen = () => {
   viewKey.value = !viewKey.value;

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,194 @@
         </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">
+                  <span class="flopStatic" style="color: rgb(58, 223, 195)">{{
+                    completeNumConfigs[index].number[0]
+                  }}</span>
+                  <span class="plan-num">/</span>
+                  <span class="flopStatic" style="color: white">{{
+                    taskNumConfigs[index].number[0]
+                  }}</span>
+                </div>
+                <div class="desc">完成数量 / 计划数量</div>
+              </div>
+            </div>
+            <div class="right-chart">
+              <div
+                :config="{
+                  data: [setPondNumber(item.rate)],
+                  shape: 'round',
+                }"
+                :key="sum1"
+                style="
+                  width: 16vh;
+                  height: 16vh;
+                  border: 0.6vh solid #24d4de;
+                  border-radius: 8vh;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  color: #24d4de;
+                  font-size: 4vh;
+                  font-weight: bolder;
+                "
+              >
+                {{ setPondNumber(item.rate) }}%
+              </div>
+            </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">
+                  <span class="flopStatic" style="color: rgb(58, 223, 195)">{{
+                    completeNumConfigs[index + 3].number[0]
+                  }}</span>
+                  <span class="plan-num">/</span>
+                  <span class="flopStatic" style="color: white">{{
+                    taskNumConfigs[index + 3].number[0]
+                  }}</span>
+                </div>
+                <div class="desc">完成数量 / 计划数量</div>
+              </div>
+            </div>
+            <div class="right-chart">
+              <div
+                :config="{
+                  data: [setPondNumber(item.rate)],
+                  shape: 'round',
+                }"
+                :key="sum1"
+                style="
+                  width: 16vh;
+                  height: 16vh;
+                  border: 0.6vh solid #24d4de;
+                  border-radius: 8vh;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  color: #24d4de;
+                  font-size: 4vh;
+                  font-weight: bolder;
+                "
+              >
+                {{ setPondNumber(item.rate) }}%
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -190,6 +382,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 +507,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 +588,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,
@@ -623,6 +794,10 @@ onUnmounted(() => {
   display: block;
   font-size: 4vh;
 }
+.flopStatic {
+  font-size: 4vh;
+  margin: 0 3.5vh;
+}
 .screen-content {
   height: 84vh;
   margin-top: 2vh;