大屏

src/components/ShowScroll/index.vue

@@ -20,15 +20,19 @@ const max = ref(0);
 const scrollContainer = ref(null);
 const innerRefs = ref(null);
 const setActive = () => {
-  console.log(props.scrollRef, "11");
-  max.value = innerRefs.value.clientHeight;
-  // inputSlider();
+  if (innerRefs.value.clientHeight > props.scrollRef.wrapRef.clientHeight) {
+    max.value =
+      innerRefs.value.clientHeight - props.scrollRef.wrapRef.clientHeight + 20;
+    inputSlider();
+  }
 };
 const inputSlider = () => {
   const scrollAmountPerSecond = window.innerHeight * 0.07; // 每秒滚动的距离
   const totalScrollDistance = max.value; // 内容的总高度
   const duration = (totalScrollDistance / scrollAmountPerSecond) * 1000; // 动画总时长（毫秒）
+
   let startTime;
+
   function animate(time) {
     if (!startTime) startTime = time;
     const elapsed = time - startTime;
@@ -36,7 +40,6 @@ const inputSlider = () => {
     // 计算当前位置
     const progress = Math.min(elapsed / duration, 1);
     now.value = progress * totalScrollDistance;
-
     props.scrollRef.setScrollTop(now.value);
 
     if (progress < 1) {
@@ -44,14 +47,15 @@ const inputSlider = () => {
     } else {
       now.value = 0; // 动画结束后重置位置
       props.scrollRef.setScrollTop(now.value);
+
+      // 重置起始时间并重新开始动画
+      startTime = time;
       requestAnimationFrame(animate);
     }
   }
-  setTimeout(() => {
-    requestAnimationFrame(animate);
-  }, 6000);
-};
 
+  requestAnimationFrame(animate); // 启动动画
+};
 nextTick(() => {
   scrollContainer.value = props.scrollRef;
   innerRefs.value = props.innerRef;

src/views/base/craftManagement/route/components/bottomTable.vue

@@ -52,7 +52,7 @@
     </el-dialog>
   </div>
 </template>
-<script  setup>
+<script setup>
 import { ref, getCurrentInstance } from "vue";
 import { useCrud } from "@/hooks/userCrud";
 import { getTableConfig } from "./configs";
@@ -64,7 +64,7 @@ import {
   getRouteMaxVersion,
   addBatch,
   addEsopBatch,
-  addCheckBatch
+  addCheckBatch,
 } from "@/api/craft/process/index";
 import SingleUpload from "@/components/Upload/SingleUpload.vue";
 
@@ -137,7 +137,7 @@ const startCreat = () => {
         commonTableRef.value?.mergeOption({
           searchShow: bomVersion.value ? false : true,
           selection: true,
-          reserveSelection : true,
+          reserveSelection: true,
         });
       });
     });
@@ -147,7 +147,7 @@ const startCreat = () => {
       commonTableRef.value?.startSelect();
       commonTableRef.value?.mergeOption({
         selection: true,
-        reserveSelection : true,
+        reserveSelection: true,
       });
     });
   } else if (props.tableType === "ESOP") {
@@ -159,7 +159,7 @@ const startCreat = () => {
       });
       commonTableRef.value?.mergeOption({
         selection: true,
-        reserveSelection : true,
+        reserveSelection: true,
       });
     });
   } else {
@@ -178,7 +178,6 @@ const onSortChange = () => {
   });
 };
 
-
 // ============公共弹窗table选择相关，物料采集等使用===============
 const commonTableRef = ref({});
 const commonTableType = ref("MARTERIAL_BOM");
@@ -192,17 +191,17 @@ const esopList = ref([]);
 const checkItem = ref({});
 const checkList = ref([]);
 const onSelectedFinish = (itemValue) => {
-  if(Object.keys(itemValue).length==0){
+  if (Object.keys(itemValue).length == 0) {
     return false;
   }
   itemRecordList.value = [];
-  itemRecord.value.itemRecordList=[];
+  itemRecord.value.itemRecordList = [];
   checkList.value = [];
   checkItem.value.checkList = [];
   esopItem.value.esopList = [];
   esopList.value = [];
   if (props.tableType === "wuliaocaiji") {
-    itemValue?.forEach((item,index)=>{
+    itemValue?.forEach((item, index) => {
       const recordItem = ref({});
       recordItem.value.itemName = item.bomMaterialName;
       recordItem.value.itemCode = item.bomMaterialCode;
@@ -214,27 +213,23 @@ const onSelectedFinish = (itemValue) => {
       recordItem.value.unit = item.unit;
       recordItem.value.isTrace = 1;
       itemRecordList.value.push(recordItem.value);
-      }
-
-    );
+    });
     itemRecord.value.operationId = route.params.id;
     itemRecord.value.itemRecordList = Array.from(itemRecordList.value);
-    addBatch(itemRecord.value).then(
-      (data)=>{
-        if(data.code=="200"){
-          dataList();
-          ElMessage({
-            message: data.msg,
-            type: "success",
-          });
-        }else {
-          ElMessage({
-            message: data.msg,
-            type: "error",
-          });
-        }
+    addBatch(itemRecord.value).then((data) => {
+      if (data.code == "200") {
+        dataList();
+        ElMessage({
+          message: data.msg,
+          type: "success",
+        });
+      } else {
+        ElMessage({
+          message: data.msg,
+          type: "error",
+        });
       }
-    )
+    });
     //form.value.unit = itemValue.unit;
   } else if (props.tableType === "dianjian") {
     /*form.value.checkName = itemValue.checkName;
@@ -244,43 +239,37 @@ const onSelectedFinish = (itemValue) => {
     form.value.upper = itemValue.upper;
     form.value.lower = itemValue.lower;
     form.value.unit = itemValue.unit;*/
-    itemValue?.forEach((item,index)=>{
-        const recordItem = ref({});
-        recordItem.value.operationId = route.params.id;
-        recordItem.value.checkName = item.checkName;
-        recordItem.value.checkCode = item.checkCode;
-        recordItem.value.content = item.content;
-        recordItem.value.standard = item.standard;
-        recordItem.value.upper = item.upper;
-        recordItem.value.lower = item.lower;
-        recordItem.value.unit = item.unit;
-        checkList.value.push(recordItem.value);
-      }
-
-    );
+    itemValue?.forEach((item, index) => {
+      const recordItem = ref({});
+      recordItem.value.operationId = route.params.id;
+      recordItem.value.checkName = item.checkName;
+      recordItem.value.checkCode = item.checkCode;
+      recordItem.value.content = item.content;
+      recordItem.value.standard = item.standard;
+      recordItem.value.upper = item.upper;
+      recordItem.value.lower = item.lower;
+      recordItem.value.unit = item.unit;
+      checkList.value.push(recordItem.value);
+    });
     checkItem.value.operationId = route.params.id;
     checkItem.value.checkList = Array.from(checkList.value);
-    addCheckBatch(checkItem.value).then(
-      (data)=>{
-
-        if(data.code=="200"){
-          dataList();
-          commonTableRef.value?.mergeOption({
-            reserveSelection : false,
-          });
-          ElMessage({
-            message: data.msg,
-            type: "success",
-          });
-        }else {
-          ElMessage({
-            message: data.msg,
-            type: "error",
-          });
-        }
+    addCheckBatch(checkItem.value).then((data) => {
+      if (data.code == "200") {
+        dataList();
+        commonTableRef.value?.mergeOption({
+          reserveSelection: false,
+        });
+        ElMessage({
+          message: data.msg,
+          type: "success",
+        });
+      } else {
+        ElMessage({
+          message: data.msg,
+          type: "error",
+        });
       }
-    )
-
+    });
   } else if (props.tableType === "ESOP") {
     /*form.value.filePath = itemValue.pdfPath;
     pdfPath.value = import.meta.env.VITE_APP_UPLOAD_URL + itemValue.pdfPath;
@@ -288,37 +277,33 @@ const onSelectedFinish = (itemValue) => {
     form.value.recordVersion = itemValue.drawingVersion;
     form.value.sortNum = itemValue.sort;
     form.value.title = itemValue.drawingTitle;*/
-    itemValue?.forEach((item,index)=>{
-        const recordItem = ref({});
-        recordItem.value.operationId = route.params.id;
-        recordItem.value.filePath = item.pdfPath;
-        recordItem.value.showAppointPageNum = 1;
-        recordItem.value.drawingCode = item.drawingCode;
-        recordItem.value.recordVersion = item.drawingVersion;
-        recordItem.value.sortNum = item.sort;
-        recordItem.value.title = item.drawingTitle;
-        esopList.value.push(recordItem.value);
-      }
-
-    );
+    itemValue?.forEach((item, index) => {
+      const recordItem = ref({});
+      recordItem.value.operationId = route.params.id;
+      recordItem.value.filePath = item.pdfPath;
+      recordItem.value.showAppointPageNum = 1;
+      recordItem.value.drawingCode = item.drawingCode;
+      recordItem.value.recordVersion = item.drawingVersion;
+      recordItem.value.sortNum = item.sort;
+      recordItem.value.title = item.drawingTitle;
+      esopList.value.push(recordItem.value);
+    });
     esopItem.value.operationId = route.params.id;
     esopItem.value.esopList = Array.from(esopList.value);
-    addEsopBatch(esopItem.value).then(
-      (data)=>{
-        if(data.code=="200"){
-          dataList();
-          ElMessage({
-            message: data.msg,
-            type: "success",
-          });
-        }else {
-          ElMessage({
-            message: data.msg,
-            type: "error",
-          });
-        }
+    addEsopBatch(esopItem.value).then((data) => {
+      if (data.code == "200") {
+        dataList();
+        ElMessage({
+          message: data.msg,
+          type: "success",
+        });
+      } else {
+        ElMessage({
+          message: data.msg,
+          type: "error",
+        });
       }
-    )
+    });
   }
 };
 

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

@@ -42,12 +42,12 @@
           </div>
         </div>
         <ShowScroll
-          :ref="(el) => ShowScrollRef.push(el)"
-          :scrollRef="scrollbarRef"
-          :innerRef="innerRef"
+          ref="ShowScrollRef1"
+          :scrollRef="scrollbarRef1"
+          :innerRef="innerRef1"
         >
-          <el-scrollbar ref="scrollbarRef" class="scrollbar">
-            <div ref="innerRef">
+          <el-scrollbar ref="scrollbarRef1" class="scrollbar">
+            <div ref="innerRef1">
               <div
                 class="infoItem"
                 v-for="(item, index) in taskRateArray"
@@ -66,57 +66,63 @@
         <Middle3D class="item" />
         <div class="item">
           <TitleHeaderB title="自动化设备状态" />
-          <el-scrollbar class="scrollbar">
-            <div class="infoContent">
-              <div
-                class="deviceInfo"
-                v-for="(item, index) in deviceArray"
-                :key="index"
-              >
-                <div class="img">
-                  <el-image
-                    :src="`/images/${getRandomLetter()}.png`"
-                    class="img"
-                  />
-                  <div
-                    class="imgbg"
-                    :class="{
-                      outlinebg: item.state == '离线',
-                      errorbg: item.state == '故障',
-                    }"
-                  ></div>
-                </div>
-                <div class="info">
-                  <div class="info1">{{ item.deviceName }}</div>
-                  <div class="info2">
-                    <div class="text2">
-                      今日稼动
-                      <span class="nums">{{ item.utilizationRate }}</span>
-                    </div>
-                    |
-                    <div class="text2">
-                      总稼动
-                      <span class="nums" style="color: white">{{
-                        item.totalRate
-                      }}</span>
-                    </div>
-                  </div>
-                  <div class="info3">
-                    <div class="ip">IP:{{ item.ip }}</div>
+          <ShowScroll
+            ref="ShowScrollRef2"
+            :scrollRef="scrollbarRef2"
+            :innerRef="innerRef2"
+          >
+            <el-scrollbar ref="scrollbarRef2" class="scrollbar">
+              <div ref="innerRef2" class="infoContent">
+                <div
+                  class="deviceInfo"
+                  v-for="(item, index) in deviceArray"
+                  :key="index"
+                >
+                  <div class="img">
+                    <el-image
+                      :src="`/images/${getRandomLetter()}.png`"
+                      class="img"
+                    />
                     <div
-                      class="infoState"
+                      class="imgbg"
                       :class="{
-                        red: item.state == '故障',
-                        white: item.state == '离线',
+                        outlinebg: item.state == '离线',
+                        errorbg: item.state == '故障',
                       }"
-                    >
-                      {{ item.state }}
+                    ></div>
+                  </div>
+                  <div class="info">
+                    <div class="info1">{{ item.deviceName }}</div>
+                    <div class="info2">
+                      <div class="text2">
+                        今日稼动
+                        <span class="nums">{{ item.utilizationRate }}</span>
+                      </div>
+                      |
+                      <div class="text2">
+                        总稼动
+                        <span class="nums" style="color: white">{{
+                          item.totalRate
+                        }}</span>
+                      </div>
+                    </div>
+                    <div class="info3">
+                      <div class="ip">IP:{{ item.ip }}</div>
+                      <div
+                        class="infoState"
+                        :class="{
+                          red: item.state == '故障',
+                          white: item.state == '离线',
+                        }"
+                      >
+                        {{ item.state }}
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </el-scrollbar>
+            </el-scrollbar>
+          </ShowScroll>
         </div>
         <div class="item">
           <TitleHeaderB title="不合格情况" />
@@ -135,19 +141,31 @@
               <div class="rightItem1">完成率</div>
             </div>
           </div>
-          <el-scrollbar class="scrollbar" style="height: 53vh">
-            <div
-              class="infoItem"
-              v-for="(item, index) in materialArray"
-              :key="index"
+          <ShowScroll
+            ref="ShowScrollRef3"
+            :scrollRef="scrollbarRef3"
+            :innerRef="innerRef3"
+          >
+            <el-scrollbar
+              class="scrollbar"
+              ref="scrollbarRef3"
+              style="height: 53vh"
             >
-              <div class="leftItem1 textComent itembg">
-                {{ item.materialName }}
+              <div ref="innerRef3">
+                <div
+                  class="infoItem"
+                  v-for="(item, index) in materialArray"
+                  :key="index"
+                >
+                  <div class="leftItem1 textComent itembg">
+                    {{ item.materialName }}
+                  </div>
+                  <div class="midItem1 itembg">{{ item.planNum }}</div>
+                  <div class="rightItem1 itembg">{{ item.dayRate }}</div>
+                </div>
               </div>
-              <div class="midItem1 itembg">{{ item.planNum }}</div>
-              <div class="rightItem1 itembg">{{ item.dayRate }}</div>
-            </div>
-          </el-scrollbar>
+            </el-scrollbar>
+          </ShowScroll>
         </div>
         <div class="bottom">
           <TitleHeaderB title="今日报故" />
@@ -157,20 +175,32 @@
               <div class="rightItem">报故数量</div>
             </div>
           </div>
-          <el-scrollbar class="scrollbar" style="height: 20vh">
-            <div
-              class="infoItem"
-              v-for="(item, index) in todayErrorArray"
-              :key="index"
+          <ShowScroll
+            ref="ShowScrollRef4"
+            :scrollRef="scrollbarRef4"
+            :innerRef="innerRef4"
+          >
+            <el-scrollbar
+              ref="scrollbarRef4"
+              class="scrollbar"
+              style="height: 20vh"
             >
-              <div class="leftItem textComent itembg">
-                {{ item.materialName }}
-              </div>
-              <div class="rightItem itembg" style="color: #db4848">
-                {{ item.unqualifiedNum }}
+              <div ref="innerRef4">
+                <div
+                  class="infoItem"
+                  v-for="(item, index) in todayErrorArray"
+                  :key="index"
+                >
+                  <div class="leftItem textComent itembg">
+                    {{ item.materialName }}
+                  </div>
+                  <div class="rightItem itembg" style="color: #db4848">
+                    {{ item.unqualifiedNum }}
+                  </div>
+                </div>
               </div>
-            </div>
-          </el-scrollbar>
+            </el-scrollbar>
+          </ShowScroll>
         </div>
       </div>
     </div>
@@ -193,9 +223,18 @@ import {
 import Middle3D from "./middle3D.vue";
 import moment from "moment";
 const fontSize = ref(0);
-const scrollbarRef = ref(null);
-const ShowScrollRef = ref([]);
-const innerRef = ref(null);
+const scrollbarRef1 = ref(null);
+const ShowScrollRef1 = ref(null);
+const innerRef1 = ref(null);
+const scrollbarRef2 = ref(null);
+const ShowScrollRef2 = ref(null);
+const innerRef2 = ref(null);
+const scrollbarRef3 = ref(null);
+const ShowScrollRef3 = ref(null);
+const innerRef3 = ref(null);
+const scrollbarRef4 = ref(null);
+const ShowScrollRef4 = ref(null);
+const innerRef4 = ref(null);
 const setFontSize = () => {
   fontSize.value = (window.innerHeight / 100) * 1.55;
 };
@@ -222,23 +261,35 @@ const taskRateArray = ref([]);
 const getRateArray = async () => {
   const { data } = await getTaskRate();
   taskRateArray.value = data;
+  nextTick(() => {
+    ShowScrollRef1.value.setActive();
+  });
 };
 const deviceArray = ref([]);
 //获取设备列表
 const getDevice = async () => {
   const { data } = await getDeviceList();
   deviceArray.value = data;
+  nextTick(() => {
+    ShowScrollRef2.value.setActive();
+  });
 };
 const materialArray = ref([]);
 const getMaterialArray = async () => {
   const { data } = await getMaterialRate();
   materialArray.value = data;
+  nextTick(() => {
+    ShowScrollRef3.value.setActive();
+  });
 };
 //今日报故
 const todayErrorArray = ref([]);
 const getTodayErrorArray = async () => {
   const { data } = await getTodayError();
   todayErrorArray.value = data;
+  nextTick(() => {
+    ShowScrollRef4.value.setActive();
+  });
 };
 const option1 = {
   xAxis: {
@@ -346,11 +397,6 @@ onMounted(async () => {
     charts2.value.resize();
   });
 });
-nextTick(() => {
-  ShowScrollRef.value.forEach((el) => {
-    el.setActive();
-  });
-});
 </script>
 
 <style lang="scss" scoped>
@@ -533,7 +579,7 @@ nextTick(() => {
                 color: white;
                 padding-right: 1vw;
                 .text2 {
-                  font-size: 1.7vh;
+                  font-size: 1.5vh;
                   .nums {
                     color: #0ae0ff;
                     font-weight: 600;