Bladeren bron

慧眼看板调整--增加自动切换线别

xiaost 2 maanden geleden
bovenliggende
commit
27eb6f6ebf
3 gewijzigde bestanden met toevoegingen van 283 en 48 verwijderingen
  1. 90 14
      src/views/assembly/index.vue
  2. 90 14
      src/views/package/index.vue
  3. 103 20
      src/views/smt/index.vue

+ 90 - 14
src/views/assembly/index.vue

@@ -52,7 +52,7 @@
                   <el-dropdown-item ><router-link to="package"> 包装车间 </router-link></el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
-              <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
+              <el-select v-model="linecode" class="dropdown" @change ="handleLineChange" style="width: 150px">
                 <el-option
                     v-for="item in linedata"
                     :key="item.LI_CODE"
@@ -143,13 +143,19 @@ export default {
   data() {
     return {
       timing: null,
+      lineTimer: null, // 新增:产线切换定时器
       loading: true,
       dateDay: null,
       dateYear: null,
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decorationColor: ['#568aea', '#000000'],
-      isShow: false
+      isShow: false,
+      linedata: [], // 产线数据
+      linecode: '', // 当前选中的产线
+      currentLineIndex: 0, // 当前产线索引
+      countdown: 60, // 倒计时
+      countdownTimer: null // 倒计时定时器
     }
   },
   components: {
@@ -171,6 +177,8 @@ export default {
   },
   beforeDestroy() {
     clearInterval(this.timing)
+    clearInterval(this.lineTimer) // 清除产线切换定时器
+    clearInterval(this.countdownTimer) // 清除倒计时定时器
     clearInterval(this.intervalId)
   },
   methods: {
@@ -184,35 +192,103 @@ export default {
     cancelLoading() {
       setTimeout(() => {
         this.loading = false
-      }, 5000)
+      }, 2000)
     },
-    handleBlur(val) {
-      sessionStorage.setItem('li_code', val);
-      this.$cookie.set("AS_LI_CODE", val, {
-        expires: 30,
-      });
-      location.reload();
+    handleLineChange(val) {
+      this.switchToLine(val);
     },
+
+    // 切换到指定产线
+    switchToLine(lineCode) {
+      const index = this.linedata.findIndex(item => item.LI_CODE === lineCode);
+      if (index !== -1) {
+        this.currentLineIndex = index;
+        this.linecode = lineCode;
+        sessionStorage.setItem('li_code', lineCode);
+        this.$cookie.set("AS_LI_CODE", lineCode, {
+          expires: 30,
+        });
+
+        // 重新加载页面数据
+        location.reload();
+      }
+    },
+
+    // 切换到下一产线
+    switchToNextLine() {
+      if (this.linedata.length === 0) return;
+      this.currentLineIndex = (this.currentLineIndex + 1) % this.linedata.length;
+      const nextLine = this.linedata[this.currentLineIndex];
+      this.switchToLine(nextLine.LI_CODE);
+    },
+
+    // 启动产线自动切换
+    startLineAutoSwitch() {
+      // 先清除之前的定时器
+      if (this.lineTimer) {
+        clearInterval(this.lineTimer);
+      }
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+      }
+
+      // 重置倒计时
+      this.countdown = 60;
+
+      // 启动倒计时
+      this.countdownTimer = setInterval(() => {
+        this.countdown--;
+        if (this.countdown <= 0) {
+          this.countdown = 60; // 重置倒计时
+          this.switchToNextLine();
+        }
+      }, 1000);
+
+      // 启动产线切换定时器(备用,确保切换)
+      this.lineTimer = setInterval(() => {
+        this.switchToNextLine();
+      }, 60000); // 60秒
+    },
+
+    // 获取产线数据
     getLines() {
       this.$http.get("kanban/getLinesByWorkCenter.action?wccode=103").then(
           (res) => {
             if (res.data.linedata) {
               const data = res.data.linedata;
+              this.linedata = data;
+
+              // 确定当前产线
+              let targetLineCode = '';
               if (this.$cookie.get("AS_LI_CODE") && data.some(item => item.LI_CODE === this.$cookie.get("AS_LI_CODE"))) {
-                sessionStorage.setItem('li_code', this.$cookie.get("AS_LI_CODE"));
+                targetLineCode = this.$cookie.get("AS_LI_CODE");
               } else {
-                sessionStorage.setItem('li_code', data[0].LI_CODE);
+                targetLineCode = data[0].LI_CODE;
                 this.$cookie.set("AS_LI_CODE", data[0].LI_CODE, {
                   expires: 30,
                 });
               }
-              this.linedata = data;
+
+              // 设置当前索引
+              const index = data.findIndex(item => item.LI_CODE === targetLineCode);
+              this.currentLineIndex = index !== -1 ? index : 0;
+
+              sessionStorage.setItem('li_code', targetLineCode);
+              this.linecode = targetLineCode;
+
+              // 数据加载完成后启动自动切换
+              setTimeout(() => {
+                this.startLineAutoSwitch();
+              }, 1000);
             } else {
               sessionStorage.setItem('li_code', '');
+              this.linedata = [];
+              this.linecode = '';
             }
-            this.linecode = sessionStorage.getItem("li_code");
           }, (result) => {
-            console.error(result)
+            console.error(result);
+            this.linedata = [];
+            this.linecode = '';
           });
     }
   },

+ 90 - 14
src/views/package/index.vue

@@ -52,7 +52,7 @@
                   <el-dropdown-item ><router-link to="assembly"> 组装车间 </router-link></el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
-              <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
+              <el-select v-model="linecode" class="dropdown" @change ="handleLineChange" style="width: 150px">
                 <el-option
                     v-for="item in linedata"
                     :key="item.LI_CODE"
@@ -143,13 +143,19 @@ export default {
   data() {
     return {
       timing: null,
+      lineTimer: null, // 新增:产线切换定时器
       loading: true,
       dateDay: null,
       dateYear: null,
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decorationColor: ['#568aea', '#000000'],
-      isShow: false
+      isShow: false,
+      linedata: [], // 产线数据
+      linecode: '', // 当前选中的产线
+      currentLineIndex: 0, // 当前产线索引
+      countdown: 60, // 倒计时
+      countdownTimer: null // 倒计时定时器
     }
   },
   components: {
@@ -171,6 +177,8 @@ export default {
   },
   beforeDestroy() {
     clearInterval(this.timing)
+    clearInterval(this.lineTimer) // 清除产线切换定时器
+    clearInterval(this.countdownTimer) // 清除倒计时定时器
     clearInterval(this.intervalId)
   },
   methods: {
@@ -184,35 +192,103 @@ export default {
     cancelLoading() {
       setTimeout(() => {
         this.loading = false
-      }, 5000)
+      }, 2000)
     },
-    handleBlur(val) {
-      sessionStorage.setItem('li_code', val);
-      this.$cookie.set("PC_LI_CODE", val, {
-        expires: 30,
-      });
-      location.reload();
+    handleLineChange(val) {
+      this.switchToLine(val);
     },
+
+    // 切换到指定产线
+    switchToLine(lineCode) {
+      const index = this.linedata.findIndex(item => item.LI_CODE === lineCode);
+      if (index !== -1) {
+        this.currentLineIndex = index;
+        this.linecode = lineCode;
+        sessionStorage.setItem('li_code', lineCode);
+        this.$cookie.set("PC_LI_CODE", lineCode, {
+          expires: 30,
+        });
+
+        // 重新加载页面数据
+        location.reload();
+      }
+    },
+
+    // 切换到下一产线
+    switchToNextLine() {
+      if (this.linedata.length === 0) return;
+      this.currentLineIndex = (this.currentLineIndex + 1) % this.linedata.length;
+      const nextLine = this.linedata[this.currentLineIndex];
+      this.switchToLine(nextLine.LI_CODE);
+    },
+
+    // 启动产线自动切换
+    startLineAutoSwitch() {
+      // 先清除之前的定时器
+      if (this.lineTimer) {
+        clearInterval(this.lineTimer);
+      }
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+      }
+
+      // 重置倒计时
+      this.countdown = 60;
+
+      // 启动倒计时
+      this.countdownTimer = setInterval(() => {
+        this.countdown--;
+        if (this.countdown <= 0) {
+          this.countdown = 60; // 重置倒计时
+          this.switchToNextLine();
+        }
+      }, 1000);
+
+      // 启动产线切换定时器(备用,确保切换)
+      this.lineTimer = setInterval(() => {
+        this.switchToNextLine();
+      }, 60000); // 60秒
+    },
+
+    // 获取产线数据
     getLines() {
       this.$http.get("kanban/getLinesByWorkCenter.action?wccode=104").then(
           (res) => {
             if (res.data.linedata) {
               const data = res.data.linedata;
+              this.linedata = data;
+
+              // 确定当前产线
+              let targetLineCode = '';
               if (this.$cookie.get("PC_LI_CODE") && data.some(item => item.LI_CODE === this.$cookie.get("PC_LI_CODE"))) {
-                sessionStorage.setItem('li_code', this.$cookie.get("PC_LI_CODE"));
+                targetLineCode = this.$cookie.get("PC_LI_CODE");
               } else {
-                sessionStorage.setItem('li_code', data[0].LI_CODE);
+                targetLineCode = data[0].LI_CODE;
                 this.$cookie.set("PC_LI_CODE", data[0].LI_CODE, {
                   expires: 30,
                 });
               }
-              this.linedata = data;
+
+              // 设置当前索引
+              const index = data.findIndex(item => item.LI_CODE === targetLineCode);
+              this.currentLineIndex = index !== -1 ? index : 0;
+
+              sessionStorage.setItem('li_code', targetLineCode);
+              this.linecode = targetLineCode;
+
+              // 数据加载完成后启动自动切换
+              setTimeout(() => {
+                this.startLineAutoSwitch();
+              }, 1000);
             } else {
               sessionStorage.setItem('li_code', '');
+              this.linedata = [];
+              this.linecode = '';
             }
-            this.linecode = sessionStorage.getItem("li_code");
           }, (result) => {
-            console.error(result)
+            console.error(result);
+            this.linedata = [];
+            this.linecode = '';
           });
     }
   },

+ 103 - 20
src/views/smt/index.vue

@@ -37,7 +37,6 @@
           </div>
           <div class="d-flex aside-width">
             <div class="react-right bg-color-r mr-3">
-              <!-- <span class="text ">设备运行分析</span>-->
               <span class="text" @click="fullScreen" ref="fullScreen">全屏</span>
               <span class="text" @click="exitFullScreen" ref="exitFullScreen"  style="display: none">退出全屏</span>
             </div>
@@ -52,7 +51,7 @@
                   <el-dropdown-item ><router-link to="package"> 包装车间 </router-link></el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
-              <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
+              <el-select v-model="linecode" class="dropdown" @change ="handleLineChange" style="width: 150px">
                 <el-option
                     v-for="item in linedata"
                     :key="item.LI_CODE"
@@ -62,6 +61,9 @@
               </el-select>
               <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
               <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
+<!--              <span class="text" style="margin-left: 20px; color: #ffeb3b;">
+                {{ currentLineIndex + 1 }}/{{ linedata.length }} ({{ countdown }}s)
+              </span>-->
             </div>
           </div>
         </div>
@@ -143,13 +145,19 @@ export default {
   data() {
     return {
       timing: null,
+      lineTimer: null, // 新增:产线切换定时器
       loading: true,
       dateDay: null,
       dateYear: null,
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decorationColor: ['#568aea', '#000000'],
-      isShow: false
+      isShow: false,
+      linedata: [], // 产线数据
+      linecode: '', // 当前选中的产线
+      currentLineIndex: 0, // 当前产线索引
+      countdown: 60, // 倒计时
+      countdownTimer: null // 倒计时定时器
     }
   },
   components: {
@@ -171,6 +179,8 @@ export default {
   },
   beforeDestroy() {
     clearInterval(this.timing)
+    clearInterval(this.lineTimer) // 清除产线切换定时器
+    clearInterval(this.countdownTimer) // 清除倒计时定时器
     clearInterval(this.intervalId)
   },
   methods: {
@@ -184,41 +194,107 @@ export default {
     cancelLoading() {
       setTimeout(() => {
         this.loading = false
-      }, 5000)
+      }, 2000)
     },
-    handleBlur(val) {
-      sessionStorage.setItem('li_code', val);
-      this.$cookie.set("SMT_LI_CODE", val, {
-        expires: 30,
-      });
-      location.reload();
+    handleLineChange(val) {
+      this.switchToLine(val);
     },
+
+    // 切换到指定产线
+    switchToLine(lineCode) {
+      const index = this.linedata.findIndex(item => item.LI_CODE === lineCode);
+      if (index !== -1) {
+        this.currentLineIndex = index;
+        this.linecode = lineCode;
+        sessionStorage.setItem('li_code', lineCode);
+        this.$cookie.set("SMT_LI_CODE", lineCode, {
+          expires: 30,
+        });
+
+        // 重新加载页面数据
+        location.reload();
+      }
+    },
+
+    // 切换到下一产线
+    switchToNextLine() {
+      if (this.linedata.length === 0) return;
+      this.currentLineIndex = (this.currentLineIndex + 1) % this.linedata.length;
+      const nextLine = this.linedata[this.currentLineIndex];
+      this.switchToLine(nextLine.LI_CODE);
+    },
+
+    // 启动产线自动切换
+    startLineAutoSwitch() {
+      // 先清除之前的定时器
+      if (this.lineTimer) {
+        clearInterval(this.lineTimer);
+      }
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+      }
+
+      // 重置倒计时
+      this.countdown = 60;
+
+      // 启动倒计时
+      this.countdownTimer = setInterval(() => {
+        this.countdown--;
+        if (this.countdown <= 0) {
+          this.countdown = 60; // 重置倒计时
+          this.switchToNextLine();
+        }
+      }, 1000);
+
+      // 启动产线切换定时器(备用,确保切换)
+      this.lineTimer = setInterval(() => {
+        this.switchToNextLine();
+      }, 60000); // 60秒
+    },
+
+    // 获取产线数据
     getLines() {
       this.$http.get("kanban/getLinesByWorkCenter.action?wccode=100").then(
           (res) => {
             if (res.data.linedata) {
               const data = res.data.linedata;
+              this.linedata = data;
+
+              // 确定当前产线
+              let targetLineCode = '';
               if (this.$cookie.get("SMT_LI_CODE") && data.some(item => item.LI_CODE === this.$cookie.get("SMT_LI_CODE"))) {
-                sessionStorage.setItem('li_code', this.$cookie.get("SMT_LI_CODE"));
+                targetLineCode = this.$cookie.get("SMT_LI_CODE");
               } else {
-                sessionStorage.setItem('li_code', data[0].LI_CODE);
+                targetLineCode = data[0].LI_CODE;
                 this.$cookie.set("SMT_LI_CODE", data[0].LI_CODE, {
                   expires: 30,
                 });
               }
-              this.linedata = data;
+
+              // 设置当前索引
+              const index = data.findIndex(item => item.LI_CODE === targetLineCode);
+              this.currentLineIndex = index !== -1 ? index : 0;
+
+              sessionStorage.setItem('li_code', targetLineCode);
+              this.linecode = targetLineCode;
+
+              // 数据加载完成后启动自动切换
+              setTimeout(() => {
+                this.startLineAutoSwitch();
+              }, 1000);
             } else {
               sessionStorage.setItem('li_code', '');
+              this.linedata = [];
+              this.linecode = '';
             }
-            this.linecode = sessionStorage.getItem("li_code");
           }, (result) => {
-            console.error(result)
+            console.error(result);
+            this.linedata = [];
+            this.linecode = '';
           });
     }
   },
 }
-
-
 </script>
 
 <style lang="scss" scoped>
@@ -230,8 +306,6 @@ export default {
   transform: skewX(45deg);
 
   ::v-deep .el-select-dropdown {
-    /* // 若不将下拉框的背景颜色设置为:transparent,那么做不出来半透明的效果;
-    // 因为其最终的显示为:下拉框有一个背景颜色且下拉框的字体有一个背景颜色,重叠后的效果展示; */
     border: 1px solid #0f1325;
     background: #04308D !important;
   }
@@ -269,4 +343,13 @@ export default {
     background-color: rgba(0, 225, 219, 0.690196078431373);
   }
 }
-</style>
+
+// 添加倒计时样式
+.text {
+  &.countdown {
+    color: #ffeb3b;
+    font-weight: bold;
+    margin-left: 20px;
+  }
+}
+</style>