feature/险峰大屏

src/utils/setBigScreen.ts

@@ -0,0 +1,11 @@
+const bigScreenObj = {
+  scale: 0,
+  proportion: 0,
+};
+//比例控制边框
+const height = 811;
+function getBorder() {
+  window.innerHeight;
+}
+
+export default NProgress;

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

@@ -1,48 +1,156 @@
 <template>
   <div class="screen-container">
     <common-header title="工位任务分布" />
-    <TransitionGroup name="list" tag="ul" class="screen-content">
-      <li v-for="(item, index) in showdatas" :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
+      style="
+        width: 100vw;
+        height: 92vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+      "
+    >
+      <dv-border-box1
+        ref="borderRef"
+        style="width: 66.6%; height: 66.6%; position: absolute"
+        :style="{ transform: 'scale(' + 1.5 + ')' }"
+      />
+    </div> -->
+    <div 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 class="box">
-              <div style="display: flex; align-items: center">
-                <!-- <span class="com-num">{{ item.num }}</span> -->
-                <dv-digital-flop
-                  :config="completeNumConfigs[index]"
-                  class="flop"
-                />
-                <span class="plan-num">/</span>
-                <dv-digital-flop :config="taskNumConfigs[index]" class="flop" />
+          </div>
+        </div>
+      </TransitionGroup>
+      <TransitionGroup 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 class="desc">完成数量 / 计划数量</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 class="right-chart">
-            <dv-water-level-pond
-              :config="{
-                data: [setPondNumber(item.rate)],
-                shape: 'round',
-              }"
-              :key="sum1"
-              style="width: 16vh; height: 16vh"
-            />
+        </div>
+      </TransitionGroup>
+      <TransitionGroup 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]"
+                    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>
-      </li>
-    </TransitionGroup>
+      </TransitionGroup>
+    </div>
   </div>
 </template>
 
@@ -51,7 +159,6 @@ import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
 import TitleHeader from "@/views/report/statistics/screens/titleHeader.vue";
 import { getStationTaskInfo } from "@/api/bigScreen";
 const fontSize = ref(0);
-
 const setPondNumber = (str) => {
   const number = Number(str).toFixed(2);
   if (number == 1) {
@@ -69,27 +176,38 @@ const setFontSize = () => {
   fontSize.value = (window.innerHeight / 100) * 4;
 };
 const datas = ref([]);
-const showdatas = ref([]);
+const showdatas1 = ref([]);
+const showdatas2 = ref([]);
+const showdatas3 = ref([]);
 const getData = async () => {
   const { data } = await getStationTaskInfo();
-  datas.value = [...data, ...data];
+  datas.value = [...data];
 };
 const interval1 = ref(null);
 const sum1 = ref(1);
-const setShowDatas = async (time, num) => {
+const setShowDatas = async (time) => {
   if (datas.value.length > 9) {
-    sum1.value = num;
     const dataA = JSON.parse(JSON.stringify(datas.value));
-    showdatas.value = dataA.splice(0, num);
-    setNumber(2000);
+    showdatas1.value = dataA.splice(0, 3);
+    showdatas2.value = dataA.splice(3, 3);
+    showdatas3.value = dataA.splice(6, 3);
+    setNumber(1750);
     interval1.value = setInterval(async () => {
-      await showdatas.value.push(datas.value[sum1.value % datas.value.length]);
-      showdatas.value.splice(0, 1);
+      showdatas1.value.push(datas.value[sum1.value + (2 % datas.value.length)]);
+      showdatas2.value.push(datas.value[sum1.value + (5 % datas.value.length)]);
+      showdatas3.value.push(datas.value[sum1.value + (9 % datas.value.length)]);
+      showdatas1.value.splice(0, 1);
+      showdatas2.value.splice(0, 1);
+      showdatas3.value.splice(0, 1);
       setNumber(0);
       sum1.value = sum1.value + 1;
     }, time);
   } else {
-    showdatas.value = datas.value.value;
+    const dataA = JSON.parse(JSON.stringify(datas.value));
+    showdatas1.value = dataA.splice(0, 3);
+    showdatas2.value = dataA.splice(3, 3);
+    showdatas3.value = dataA.splice(6, 3);
+    setNumber(1750);
   }
 };
 const completeNumConfigs = ref([
@@ -220,10 +338,18 @@ const setTimeOutFnc = (array, num, time) => {
   }, time);
 };
 const setNumber = (time) => {
-  showdatas.value.forEach((item, index) => {
+  showdatas1.value.forEach((item, index) => {
     setTimeOutFnc(completeNumConfigs.value[index], item.completeNum, time);
     setTimeOutFnc(taskNumConfigs.value[index], item.taskNum, time);
   });
+  showdatas2.value.forEach((item, index) => {
+    setTimeOutFnc(completeNumConfigs.value[index + 3], item.completeNum, time);
+    setTimeOutFnc(taskNumConfigs.value[index + 3], item.taskNum, time);
+  });
+  showdatas3.value.forEach((item, index) => {
+    setTimeOutFnc(completeNumConfigs.value[index + 6], item.completeNum, time);
+    setTimeOutFnc(taskNumConfigs.value[index + 6], item.taskNum, time);
+  });
 };
 onUnmounted(() => {
   if (interval1.value) {
@@ -233,29 +359,66 @@ onUnmounted(() => {
 onMounted(async () => {
   setFontSize();
   await getData();
-  setShowDatas(10000, 9);
+  setShowDatas(15000);
 });
 </script>
 
 <style lang="scss" scoped>
-.list-move,
-.list-enter-active {
+//动画配置
+.list1-move,
+.list1-enter-active {
+  transition: all 0.75s ease;
+}
+.list1-leave-active {
   transition: all 2s ease;
 }
-.list-leave-active {
+.list1-enter-from {
+  transform: translateX(80vw);
+}
+.list1-leave-to {
+  opacity: 0;
+  transform: translateX(-40vw);
+}
+.list1-leave-active {
+  position: absolute;
+}
+.list2-move,
+.list2-enter-active {
+  transition: all 1.25s ease;
+}
+.list2-leave-active {
   transition: all 2s ease;
 }
-.list-enter-from {
+.list2-enter-from {
+  transform: translateX(60vw);
+}
+.list2-leave-to {
+  opacity: 0;
+  height: 0;
+  transform: translateY(-40vh);
+}
+.list2-leave-active {
+  position: absolute;
+}
+.list3-move,
+.list3-enter-active {
+  transition: all 1.75s ease;
+}
+.list3-leave-active {
+  transition: all 2s ease;
+}
+.list3-enter-from {
   transform: translateX(40vw);
 }
-.list-leave-to {
+.list3-leave-to {
   opacity: 0;
   height: 0;
-  transform: translateX(-40vw);
+  transform: translateX(40vw);
 }
-.list-leave-active {
+.list3-leave-active {
   position: absolute;
 }
+//动画配置--
 :deep(.dv-water-pond-level) {
   text {
     font-size: 4vh;
@@ -276,19 +439,26 @@ onMounted(async () => {
   font-size: 4vh;
 }
 .screen-content {
-  height: 88vh;
+  height: 84vh;
   margin-top: 2vh;
-  padding: 0 2vh;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
+  padding: 0 2vh;
+  .rowbox {
+    width: 32vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+  }
   .grid-item {
     height: 100%;
     display: flex;
     flex-direction: column;
     background: rgba(0, 0, 0, 0.5);
     border-radius: 2vh;
-    padding: 2vh;
+    padding: 2vh 1vh;
     width: 31vw;
     height: 25vh;