WCS设备监控

liulijun

19 小时以前 5270308151082506e0e6df2c72d278d2976ec860

 ÏîÄ¿´úÂë/WCS/WCSClient/src/views/LineInfo.vue

@@ -1,100 +1,42 @@
<template>
   <div :class="update()" :style="{ left: left, top: top, marginBottom: 0 + 'px', marginTop: 0 + 'px' }"
   <div :class="update" :style="{ left: left, top: top, marginBottom: 0 + 'px', marginTop: 15 + 'px' }"
      @click="mouseClick" v-loading.fullscreen.lock="fullscreenLoading">
      <img v-if="imgType === '2'" src="../../public/lines.png" />
      <img v-if="imgType === '1'" src="../../public/lines2.png" />
      <label v-if="equipNo" class="equip-no">{{ equipNo }}</label>
   </div>
   <el-dialog v-model="dialogVisible" title="输送线信息查看" :before-close="handleClose">
      <el-form ref="$form" :model="lineItemInfo" label-position="left" label-width="100px" size="medium">
         <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
            <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
               <el-form-item label="设备编号：">
                  <j-el-description :value="equipNo" type="primary" ellipsis></j-el-description>
               </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
               <el-form-item label="是否有盘:">
                  <j-el-description :value="lineItemInfo.inStock" type="primary" ellipsis></j-el-description>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
            <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
               <el-form-item label="任务号:">
                  <j-el-description :value="lineItemInfo.taskNumm" type="primary" ellipsis></j-el-description>
               </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
               <el-form-item label="报警代码：">
                  <j-el-description :value="lineItemInfo.alarm" type="primary" ellipsis></j-el-description>
               </el-form-item>
            </el-col>
         </el-row>

      </el-form><el-divider />
      <h4 style="margin-bottom: 20px;">手动操作</h4>
      <el-form ref="form" :model="form" label-width="100px">
         <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
            <el-col :span="16" :offset="0" :push="0" :pull="0" tag="div">
               <el-form-item label="ä»»  åŠ¡  å‘½  ä»¤" prop="TargetAddress">
                  <el-select size="large" v-model="form.TaskType" placeholder="请选择任务命令">
                     <el-option label="入库" value="1" />
                     <el-option label="出库" value="2" />
                  </el-select>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
            <el-col :span="16" :offset="0" :push="0" :pull="0" tag="div">
               <el-form-item label="下一目标地址:">
                  <el-input size="large" v-model="form.TargetAddress" placeholder="请输入下一目标地址" />
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <el-divider />
      <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
         <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
            <el-button type="primary" size="small" plain @click="SendCommand">
               <i class="el-icon-check">发送命令</i>
            </el-button>
         </el-col>
         <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
            <el-button type="warning" size="small" plain @click="ConveyorLineReset">
               <i class="el-icon-check">复位</i>
            </el-button>

         </el-col>
         <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
            <el-button type="danger" size="small" plain @click="ConveyorLineEmergencyStop">
               <i class="el-icon-check">停止</i>
            </el-button>
         </el-col>
         <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
            <el-button type="danger" size="small" plain @click="ConveyorLineReturn">
               <i class="el-icon-check">退回</i>
            </el-button>
         </el-col>
         <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
            <el-button type="danger" size="small" plain @click="ConveyorLineCancel">
               <i class="el-icon-check">取消任务</i>
            </el-button>
         </el-col>
         <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
            <el-button type="danger" size="small" plain @click="ConveyorLineInitialize">
               <i class="el-icon-check">工位初始化</i>
            </el-button>
         </el-col>
      </el-row>
      <template #footer>
         <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
               ç¡®è®¤
            </el-button>
   <el-dialog v-model="dialogVisible" :before-close="handleClose" width="520px" class="modern-dialog">
      <div class="dialog-header">
         <h3 class="dialog-title">输送线信息</h3>
      </div>
      <div class="dialog-content">
         <div class="info-list">
            <div class="info-item">
               <span class="item-label">设备编号</span>
               <span class="item-value">{{ equipNo || '无' }}</span>
            </div>
            <div class="info-item">
               <span class="item-label">任务号</span>
               <span class="item-value">{{ ConveyorLineInfo.TaskNum || '无' }}</span>
            </div>
            <div class="info-item">
               <span class="item-label">是否有盘</span>
               <span class="item-value">{{ ConveyorLineInfo.HasGoods || '无' }}</span>
            </div>
            <div class="info-item">
               <span class="item-label">托盘条码</span>
               <span class="item-value">{{ ConveyorLineInfo.PalletCode || '无' }}</span>
            </div>
            <div class="info-item">
               <span class="item-label">状态</span>
               <span :class="['item-value', statusClass]">{{ ConveyorLineInfo.Status || '无' }}</span>
            </div>
            <div class="info-item">
               <span class="item-label">命令</span>
               <span class="item-value">{{ ConveyorLineInfo.Command || '无' }}</span>
            </div>
         </div>
      </template>
      </div>
   </el-dialog>
</template>

@@ -140,143 +82,288 @@
         left: "500px",
         top: "400px",
         dialogVisible: false,
         lineItemInfo: {
            inStock: "",
            taskNum: "",
            alarm: "",
         fullscreenLoading: false,
         timer1: null,
         hasGoods: false,
         isAlarm: false,
         ConveyorLineInfo: {
            TaskNum: "",
            HasGoods: "",
            Status: "",
            Command: "",
            PalletCode: "",
         },
         form: {
            TaskType: "",
            TargetAddress: "",
            DeviceCode: "",
         },
         Map: {
         Command: {
            0: "无命令",
            1: "非就绪（不执行下发命令）",
            2: "取货站台工位就绪（有料）",
            3: "放货站台工位就绪（无料）",
            4: "放货站台工位就绪（有料）",
            5: "扫码工位就绪",
            6: "任务工位就绪",
            7: "申请料框",
            8: "料框到位",
            9: "执行命令中"
         },
         Status: {
            0: "脱机中",
            1: "手动待机",
            2: "自动待机",
            3: "设备运行",
            4: "设备故障"
         }
      },
      };
   },
   mounted() {
      const axisX = (this.positionX - 1) * 40 + 100;
      const axisX = (this.positionX - 1) * 60 + 100;
      const axisY = (this.positionY - 1) + 50;
      this.$nextTick(() => {
         this.left = `${axisX}px`;
         this.top = `${axisY}px`;
      });
      // å¯åŠ¨å®šæ—¶å™¨ï¼Œæ¯ç§’更新一次数据
      this.timer1 = setInterval(() => {
         this.updateAlarmStatus();
      }, 1000);
   },
   beforeUnmount() {
      // æ¸…除定时器
      if (this.timer1) {
         clearInterval(this.timer1);
         this.timer1 = null;
      }
   },
   watch: {
      '$root.conveyorLineDetails': {
         handler() {
            this.updateAlarmStatus();
         },
         deep: true,
         immediate: true
      }
   },
   methods: {
      updateAlarmStatus() {
         const equipNoStr = String(this.equipNo);
         if (this.$root.conveyorLineDetails && this.$root.conveyorLineDetails[equipNoStr]) {
            const rawData = this.$root.conveyorLineDetails[equipNoStr];
            this.hasGoods = rawData.inStock === '是' || false;
            // ä½¿ç”¨Home.vue中已经计算好的isAlarm值，或者根据状态判断
            this.isAlarm = rawData.isAlarm || (rawData.status === 4) || false;
            // å®žæ—¶æ›´æ–°å¯¹è¯æ¡†ä¸­çš„数据
            this.ConveyorLineInfo = {
               TaskNum: rawData.taskNum || rawData.TaskNum || '无',
               HasGoods: (rawData.taskNum && rawData.taskNum !== '无' && rawData.taskNum !== '0') ? '是' : '否',
               Status: rawData.status || rawData.Status || '无',
               Command: rawData.command || rawData.Command || '无',
               PalletCode: rawData.palletCode || rawData.PalletCode || '无',
            };
            // å°†å‘½ä»¤ä»£ç è½¬æ¢ä¸ºå¯¹åº”的中文描述
            if (this.ConveyorLineInfo.Command !== '' && this.ConveyorLineInfo.Command !== '无') {
               const commandCode = parseInt(this.ConveyorLineInfo.Command);
               if (!isNaN(commandCode) && this.Map.Command && this.Map.Command[commandCode] !== undefined) {
                  this.ConveyorLineInfo.Command = this.Map.Command[commandCode];
               }
            }
            // å°†çŠ¶æ€ä»£ç è½¬æ¢ä¸ºå¯¹åº”的中文描述
            if (this.ConveyorLineInfo.Status !== '' && this.ConveyorLineInfo.Status !== '无') {
               const statusCode = parseInt(this.ConveyorLineInfo.Status);
               if (!isNaN(statusCode) && this.Map.Status && this.Map.Status[statusCode] !== undefined) {
                  this.ConveyorLineInfo.Status = this.Map.Status[statusCode];
               }
            }
         } else {
            this.hasGoods = false;
            this.isAlarm = false;
         }
      },
      mouseClick() {
         this.fullscreenLoading = true;
         this.dialogVisible = true;
         // å¤„理点击事件
         this.http.post("api/DeviceInfo/GetConveyorLineInfo?DeviceChildCode=" + this.equipNo, null, "")
            .then((x) => {
               if (x.status) {
                  this.lineItemInfo = x.data;
               } else {
                  this.$message({
                     type: "error",
                     message: x.message,
                  });
               }
            });
         // ä»Žå…¨å±€å˜é‡ä¸­èŽ·å–输送线详细信息
         if (this.$root.conveyorLineDetails && this.$root.conveyorLineDetails[this.equipNo]) {
            // å…ˆèŽ·å–原始数据
            const rawData = this.$root.conveyorLineDetails[this.equipNo];

            // å¤åˆ¶æ•°æ®åˆ°ConveyorLineInfo（模板中绑定的对象）
            this.ConveyorLineInfo = {
               TaskNum: rawData.taskNum || rawData.TaskNum || '无',
               HasGoods: (rawData.taskNum && rawData.taskNum !== '无' && rawData.taskNum !== '0') ? '是' : '否',
               Status: rawData.status || rawData.Status || '无',
               Command: rawData.command || rawData.Command || '无',
               PalletCode: rawData.palletCode || rawData.PalletCode || '无',
            };

            // å°†å‘½ä»¤ä»£ç è½¬æ¢ä¸ºå¯¹åº”的中文描述
            if (this.ConveyorLineInfo.Command !== '' && this.ConveyorLineInfo.Command !== '无') {
               const commandCode = parseInt(this.ConveyorLineInfo.Command);
               if (!isNaN(commandCode) && this.Map.Command && this.Map.Command[commandCode] !== undefined) {
                  this.ConveyorLineInfo.Command = this.Map.Command[commandCode];
               }
            }

            // å°†çŠ¶æ€ä»£ç è½¬æ¢ä¸ºå¯¹åº”的中文描述
            if (this.ConveyorLineInfo.Status !== '' && this.ConveyorLineInfo.Status !== '无') {
               const statusCode = parseInt(this.ConveyorLineInfo.Status);
               if (!isNaN(statusCode) && this.Map.Status && this.Map.Status[statusCode] !== undefined) {
                  this.ConveyorLineInfo.Status = this.Map.Status[statusCode];
               }
            }

            // å°†æŠ¥è­¦ä»£ç è½¬æ¢ä¸ºå¯¹åº”的中文描述
            if (rawData.alarm !== '' && rawData.alarm !== '无') {
               const alarmCode = parseInt(rawData.alarm);
               if (!isNaN(alarmCode) && this.Map.ErrorCode && this.Map.ErrorCode[alarmCode] !== undefined) {
                  this.ConveyorLineInfo.Alarm = this.Map.ErrorCode[alarmCode];
               }
            }
         } else {
            // å¦‚果没有数据，使用默认值
            this.ConveyorLineInfo = {
               TaskNum: '',
               HasGoods: '',
               Status: '',
               Command: '',
               PalletCode: '',
            };
         }
         this.fullscreenLoading = false;
      },
      handleClose() {
         this.dialogVisible = false;
         this.fullscreenLoading = false;
      },

      SendCommand() {
         this.fullscreenLoading = true;
         this.form.DeviceCode=this.equipNo;
         this.http.post("api/DeviceInfo/ConveyorLineHandTask" ,this.form)
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      }, 
      ConveyorLineReset() {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/ConveyorLineReset?DeviceChildCode=" + this.equipNo, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
      // SendCommand() {
      //    this.fullscreenLoading = true;
      //    this.form.DeviceCode=this.equipNo;
      //    this.http.post("api/DeviceInfo/ConveyorLineHandTask" ,this.form)
      //       .then((x) => {
      //          if (!x.status) {
      //             this.$message.error(x.message);
      //          } else {
      //             this.$Message.success(x.message);
      //          }
      //       })
      //       .finally(() => {
      //          this.fullscreenLoading = false;
      //       });
      // }, 
      // ConveyorLineReset() {
      //    this.fullscreenLoading = true;
      //    this.http.post("api/DeviceInfo/ConveyorLineReset?DeviceChildCode=" + this.equipNo, null, "")
      //       .then((x) => {
      //          if (!x.status) {
      //             this.$message.error(x.message);
      //          } else {
      //             this.$Message.success(x.message);

               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
      ConveyorLineEmergencyStop() {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/ConveyorLineEmergencyStop?DeviceChildCode=" + this.equipNo, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
      //          }
      //       })
      //       .finally(() => {
      //          this.fullscreenLoading = false;
      //       });
      // },
      // ConveyorLineEmergencyStop() {
      //    this.fullscreenLoading = true;
      //    this.http.post("api/DeviceInfo/ConveyorLineEmergencyStop?DeviceChildCode=" + this.equipNo, null, "")
      //       .then((x) => {
      //          if (!x.status) {
      //             this.$message.error(x.message);
      //          } else {
      //             this.$Message.success(x.message);

               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      }, 
      ConveyorLineReturn() {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/ConveyorLineReturn?DeviceChildCode=" + this.equipNo, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
      ConveyorLineCancel() {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/ConveyorLineCancel?DeviceChildCode=" + this.equipNo, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
      ConveyorLineInitialize() {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/ConveyorLineInitialize?DeviceChildCode=" + this.equipNo, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
      update() {
         return !this.condition ? 'custom-img' : 'custom-img-color'
      },
      //          }
      //       })
      //       .finally(() => {
      //          this.fullscreenLoading = false;
      //       });
      // }, 
      // ConveyorLineReturn() {
      //    this.fullscreenLoading = true;
      //    this.http.post("api/DeviceInfo/ConveyorLineReturn?DeviceChildCode=" + this.equipNo, null, "")
      //       .then((x) => {
      //          if (!x.status) {
      //             this.$message.error(x.message);
      //          } else {
      //             this.$Message.success(x.message);
      //          }
      //       })
      //       .finally(() => {
      //          this.fullscreenLoading = false;
      //       });
      // },
      // ConveyorLineCancel() {
      //    this.fullscreenLoading = true;
      //    this.http.post("api/DeviceInfo/ConveyorLineCancel?DeviceChildCode=" + this.equipNo, null, "")
      //       .then((x) => {
      //          if (!x.status) {
      //             this.$message.error(x.message);
      //          } else {
      //             this.$Message.success(x.message);
      //          }
      //       })
      //       .finally(() => {
      //          this.fullscreenLoading = false;
      //       });
      // },
      // ConveyorLineInitialize() {
      //    this.fullscreenLoading = true;
      //    this.http.post("api/DeviceInfo/ConveyorLineInitialize?DeviceChildCode=" + this.equipNo, null, "")
      //       .then((x) => {
      //          if (!x.status) {
      //             this.$message.error(x.message);
      //          } else {
      //             this.$Message.success(x.message);
      //          }
      //       })
      //       .finally(() => {
      //          this.fullscreenLoading = false;
      //       });
      //},
      startTimer() {
         // å¼€å¯å®šæ—¶å™¨ï¼Œæ¯3秒执行一次
         this.timer1 = setInterval(() => {
            update();
         }, 500);
            this.updateAlarmStatus();
         }, 1000);
      },
   },
   computed: {
      update() {
         if (this.isAlarm) {
            return 'custom-img-alarm';
         }
         // ä½¿ç”¨ä¸­æ–‡çŠ¶æ€å€¼åˆ¤æ–­
         const statusText = this.ConveyorLineInfo.Status;
         // çŠ¶æ€ä¸ºæ‰‹åŠ¨å¾…机时，无论有无盘都显示蓝色
         if (statusText === '手动待机') {
            return 'custom-img-blue';
         }
         // çŠ¶æ€ä¸ºè‡ªåŠ¨å¾…机或设备运行且有盘时显示绿色
         if ((statusText === '自动待机' || statusText === '设备运行') && (this.hasGoods || this.ConveyorLineInfo.HasGoods === '是')) {
            return 'custom-img-color';
         }
         return 'custom-img';
      },
      statusClass() {
         const statusText = this.ConveyorLineInfo.Status;
         if (statusText === '手动待机') {
            return 'status-blue';
         } else if (statusText === '自动待机' || statusText === '设备运行') {
            return 'status-green';
         } else if (statusText === '设备故障') {
            return 'status-red';
         }
         return '';
      }
   }
});
</script>

@@ -295,6 +382,42 @@
   text-align: center;
}

.custom-img-alarm {
   position: relative;
   display: inline-block;
   background-color: #ff0000;
   color: white;
   text-align: center;
}

.custom-img-blue {
   position: relative;
   display: inline-block;
   background-color: #409eff;
   color: white;
   text-align: center;
}

.custom-img-blue img {
   width: 80px;
   height: 50px;
}

.custom-img-alarm img {
   width: 80px;
   height: 50px;
}

.custom-img img {
   width: 80px;
   height: 50px;
}

.custom-img-color img {
   width: 80px;
   height: 50px;
}

/* .custom-img-color::before {
  content: "";
  position: absolute;
@@ -307,19 +430,117 @@
} */

.custom-img img {
   width: 40px;
   height: 40px;
   width: 80px;
   height: 50px;
}

.custom-img-color img {
   width: 40px;
   height: 40px;
   width: 80px;
   height: 50px;
}

.equip-no {
   position: absolute;
   top: 15px;
   font-size: 12px;
   margin-left: -35px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 25px;
   text-align: center;
   width: 100%;
}

.modern-dialog {
   border-radius: 16px !important;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modern-dialog .el-dialog__header {
   display: none;
}

.modern-dialog .el-dialog__body {
   padding: 0;
   margin: 0;
}

.dialog-header {
   background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
   padding: 20px 24px;
   text-align: center;
}

.dialog-title {
   color: #fff;
   font-size: 18px;
   font-weight: 600;
   margin: 0;
   letter-spacing: 2px;
}

.dialog-content {
   padding: 28px;
   background: #f8fafc;
   display: flex;
   justify-content: center;
}

.info-list {
   width: 100%;
   max-width: 420px;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.info-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   transition: all 0.3s ease;
}

.info-item:hover {
   transform: translateX(4px);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.item-label {
   font-size: 14px;
   color: #6b7280;
   font-weight: 500;
   min-width: 80px;
   text-align: left;
}

.item-value {
   font-size: 15px;
   color: #1f2937;
   font-weight: 500;
   text-align: right;
   flex: 1;
   margin-left: 20px;
   word-break: break-all;
   padding-left: 20px;
   border-left: 1px solid #e5e7eb;
}

.status-blue {
   color: #409eff !important;
   font-weight: 600;
}

.status-green {
   color: #67c23a !important;
   font-weight: 600;
}

.status-red {
   color: #f56c6c !important;
   font-weight: 600;
}
</style>