From 5270308151082506e0e6df2c72d278d2976ec860 Mon Sep 17 00:00:00 2001
From: liulijun <liulijun@hnkhzn.com>
Date: 星期三, 29 四月 2026 10:28:58 +0800
Subject: [PATCH] WCS设备监控

---
 项目代码/WCS/WCSClient/src/views/LineComponent.vue |  701 ++++++++++++++++++++++++++++++++++++---------------------
 1 files changed, 442 insertions(+), 259 deletions(-)

diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WCSClient/src/views/LineComponent.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WCSClient/src/views/LineComponent.vue"
index 3faff30..b6a3e7c 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WCSClient/src/views/LineComponent.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WCSClient/src/views/LineComponent.vue"
@@ -1,17 +1,9 @@
 <template>
   <div>
-    <el-row>
-      <template v-for="item in 32" :key="item">
-        <el-col :span="0.9">
-          <span class="image-text"></span>
-          <img src="../../public/璐ф灦.jpeg" />
-        </el-col>
-      </template>
-    </el-row>
     <el-row style="padding-bottom: 5px;">
-      <template v-for="item in 32" :key="item">
-        <el-col :span="0.9">
-          <span class="image-text"></span>
+      <template v-for="item in columnCount" :key="item">
+        <el-col :span="columnWidth">
+          <span class="image-text">{{ 91-item }}</span>
           <img src="../../public/璐ф灦.jpeg" />
         </el-col>
       </template>
@@ -19,146 +11,57 @@
   </div>
   <div class="line-container">
     <div class="line"></div>
-    <!-- <div class="dot" :style="{ right: dotPosition + 'px' }" ref="childDot" @click="mouseClick"></div> -->
-    <div :class="update()"
-      :style="{ transform: `translateX(${StackerCrane.CurrentColumn < 33 ? StackerCrane.CurrentColumn * 30 - 59 : 0}px)` }"
+    <div :class="update()" :style="{ transform: `translateX(${calculateDotPosition()}px)` }"
       ref="childDot" @click="mouseClick"></div>
   </div>
   <div>
     <el-row style="padding-top: 5px;">
-      <template v-for="item in 32" :key="item">
-        <el-col :span="0.9">
-          <span class="image-text"></span>
+      <template v-for="item in columnCount" :key="item">
+        <el-col :span="columnWidth">
+          <span class="image-text">{{ 91-item }}</span>
           <img src="../../public/璐ф灦.jpeg" />
         </el-col>
       </template>
-    </el-row>
-    <el-row style="padding-bottom: 5px;">
-      <template v-for="item in 32" :key="item">
-        <el-col :span="0.9">
-          <span class="image-text"></span>
-          <img src="../../public/璐ф灦.jpeg" />
-        </el-col>
-      </template>
+      <div style="margin-top: 60px;"></div>
     </el-row>
   </div>
 
-  <el-dialog v-model="dialogVisible" title="鍫嗗灈鏈轰俊鎭煡鐪�" :before-close="handleClose">
-    <el-form ref="$form" :model="StackerCrane" label-position="left" label-width="120px" 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="StackerCrane.DeviceName" 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="StackerCrane.Fault" 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="StackerCrane.Automatic" 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="StackerCrane.CurrentTaskNum" 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" style="margin-bottom: 10px;">
-        <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
-          <el-form-item label="浣滀笟鐘舵��:">
-            <j-el-description :value="StackerCrane.Running" 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="StackerCrane.CurrentRow + '-' + StackerCrane.CurrentLayer + '-' + StackerCrane.CurrentColumn "
-              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" style="margin-bottom: 10px;">
-        <el-col :span="24" :offset="0" :push="0" :pull="0" tag="div">
-          <el-form-item label="鎶ヨ淇℃伅:">
-            <j-el-description :value="StackerCrane.StackerAlarm" type="primary" ellipsis></j-el-description>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-divider />
-      <h4 style="margin-bottom: 20px;">鎵嬪姩鎿嶄綔</h4>
-      <el-form ref="form" :model="form" label-width="90px">
-        <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="17" />
-                <el-option label="鍑哄簱" value="18" />
-                <el-option label="绉诲簱" value="20" />
-                <el-option label="鍙栬揣" value="24" />
-                <el-option label="鏀捐揣" value="48" />
-              </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.SourceAddress" style="width: 800px" placeholder="璇疯緭鍏ヨ捣鐐硅鍒楀眰" />
-            </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" style="width: 800px" 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="5" :offset="0" :push="0" :pull="0" tag="div">
-          <el-button type="primary" size="small" plain @click="start">
-            <i class="el-icon-check">鍚姩</i>
-          </el-button>
-
-        </el-col>
-        <el-col :span="5" :offset="0" :push="0" :pull="0" tag="div">
-          <el-button type="warning" size="small" plain @click="reset">
-            <i class="el-icon-check">澶嶄綅</i>
-          </el-button>
-        </el-col>
-        <el-col :span="5" :offset="0" :push="0" :pull="0" tag="div">
-          <el-button type="danger" size="small" plain @click="disconnected">
-            <i class="el-icon-check">涓柇</i>
-          </el-button>
-        </el-col>
-        <el-col :span="5" :offset="0" :push="0" :pull="0" tag="div">
-          <el-button type="danger" size="small" plain @click="emergencyStop">
-            <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="StackerRecall">
-            <i class="el-icon-check">鍙洖</i>
-          </el-button>
-        </el-col>
-      </el-row>
-    </el-form>
-    <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">{{ yL_DB.R_PP_Status || '鏃�' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="item-label">璁惧鐘舵��</span>
+          <span :class="['item-value', statusClass]">{{ yL_DB.YL_Status || '鏃�' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="item-label">宸ヤ綔妯″紡</span>
+          <span :class="['item-value', autoStatusClass]">{{ yL_DB.YL_AutoStatus || '鏃�' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="item-label">浠诲姟鍙�</span>
+          <span class="item-value">{{ yL_DB.YL_TaskNum || '鏃�' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="item-label">浣滀笟鐘舵��</span>
+          <span class="item-value">{{ yL_DB.YL_WorkStatus || '鏃�' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="item-label">褰撳墠琛屽垪灞�</span>
+          <span class="item-value">{{ yL_DB.YL_Row + '-' + yL_DB.YL_Column + '-' + yL_DB.YL_Layer || '鏃�' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="item-label">鎶ヨ淇℃伅</span>
+          <span class="item-value">{{ yL_DB.StackerAlarm || '鏃�' }}</span>
+        </div>
       </div>
-    </template>
+    </div>
   </el-dialog>
 </template>
 
@@ -171,20 +74,45 @@
   },
   data() {
     return {
+      YLDBMap: {
+        YL_Status: {
+          0: "涓嶅湪绾�",
+          1: "鍦ㄧ嚎",
+          2: "鎬ュ仠",
+          3: "鏈煡",
+        },
+        YL_AutoStatus: {
+          1: "鍗婅嚜鍔�",
+          2: "鍗曟",
+          3: "鑷姩",
+          4: "鎵嬪姩",
+          5: "鑴辨満",
+        },
+        YL_WorkStatus: {
+          1: "寰呭懡",
+          2: "鍙栬揣瀹屾垚",
+          3: "鍙栬揣涓�",
+          5: "鏀捐揣涓�",
+          6: "浠诲姟鎵ц閿欒",
+          7: "鏈煡",
+          9: "浠诲姟瀹屾垚",
+        },
+      },
       x: 0, // 鍒濆x鍊�
-      url: "api/Equipment/GetStackerInfoByNo",
       dialogVisible: false,
-      StackerCrane: {
-        Automatic: "",
-        Fault: "",
-        CurrentLayer: "1",
-        CurrentRow: "1",
-        CurrentColumn: "1",
-        CurrentTaskNum: "",
-        Running: "",
-        DeviceName: "",
-        DeviceCode: "",
-        StackerAlarm:"",
+      timer1: null,
+      yL_DB: {
+        R_PP_Status: "",
+        YL_Status: "",
+        YL_AutoStatus: "",
+        YL_TaskNum: "",
+        YL_WorkStatus: "",
+        YL_WorkType: "",
+        YL_Row: "",
+        YL_Column: "",
+        YL_Layer: "",
+        StackerAlarm: "",
+        CurrentColumn: "1"
       },
       form: {
         TaskType: "",
@@ -194,6 +122,7 @@
       },
     };
   },
+
   props: {
     equipNo: {
       type: String,
@@ -204,33 +133,194 @@
     dotPosition() {
       return this.x;
     },
+    // 鍒楁暟锛氬師鏂欏簱90鍒�
+    columnCount() {
+      return 90;
+    },
+    // 鍒楀锛氭牴鎹�90鍒楄绠�
+    columnWidth() {
+      return 24 / 90;
+    },
+    // 姣忓垪鐨勫疄闄呭搴︼紙鍍忕礌锛�
+    pixelPerColumn() {
+      return 30;
+    },
+    // 浠撳簱鏈�澶у垪鏁�
+    maxColumn() {
+      return 90;
+    },
+    // 璁惧鐘舵�佹枃瀛楅鑹�
+    statusClass() {
+      const status = this.yL_DB.YL_Status;
+      if (status === '涓嶅湪绾�') {
+        return 'status-red';
+      } else if (status === '鍦ㄧ嚎') {
+        return 'status-green';
+      }
+      return '';
+    },
+    // 宸ヤ綔妯″紡鏂囧瓧棰滆壊
+    autoStatusClass() {
+      const status = this.yL_DB.YL_AutoStatus;
+      if (status === '鑷姩' || status === '鍗婅嚜鍔�') {
+        return 'status-green';
+      } else if (status === '鎵嬪姩') {
+        return 'status-blue';
+      } else if (status === '鑴辨満') {
+        return 'status-red';
+      }
+      return '';
+    }
   },
   mounted() {
-    this.moveDot(this.x);
+    // 鍒濆鍖栨椂浼犻�掔┖瀵硅薄锛岄伩鍏嶇被鍨嬩笉鍖归厤閿欒
+    this.moveDot({});
+    // 鍚姩瀹氭椂鍣紝姣忕鏇存柊涓�娆℃暟鎹�
+    this.timer1 = setInterval(() => {
+      this.updateData();
+    }, 1000);
+  },
+  beforeUnmount() {
+    // 娓呴櫎瀹氭椂鍣�
+    if (this.timer1) {
+      clearInterval(this.timer1);
+      this.timer1 = null;
+    }
+  },
+  watch: {
+    '$root.stackerData': {
+      handler() {
+        this.updateData();
+      },
+      deep: true
+    }
   },
   methods: {
+    updateData() {
+      const equipNoStr = String(this.equipNo);
+      if (this.$root.stackerData && this.$root.stackerData[equipNoStr]) {
+        const stackerData = this.$root.stackerData[equipNoStr];
+        this.moveDot(stackerData);
+      }
+    },
+    // 璁$畻鎸囩ず鍣ㄤ綅缃�
+    calculateDotPosition() {
+      // 鏈敹鍒颁俊鎭垨CurrentColumn涓�0锛屾寚绀哄櫒鍦ㄥ闈�
+      if (!this.yL_DB.CurrentColumn || this.yL_DB.CurrentColumn == "0") {
+        return -30; // 鏄剧ず鍦ㄨ揣浣嶅尯鍩熷乏渚у闈�
+      }
+
+      // 璁$畻鎸囩ず鍣ㄤ綅缃紝纭繚涓庡搴斿垪瀵归綈
+      const currentColumn = parseInt(this.yL_DB.CurrentColumn);
+      
+      // 瀹為檯璐т綅瀹藉害锛堝浘鐗囧搴︼級
+      const columnWidth = 30; // 璐т綅鍥剧墖瀹藉害涓�30px
+      const dotWidth = 25; // 鎸囩ず鍣ㄥ搴︿负25px
+      
+      // 鐢变簬鍒楀彿鏄粠鍙冲埌宸﹂�掑噺鏄剧ず鐨勶紝闇�瑕佽绠楀疄闄呯储寮�
+      // 渚嬪锛氱90鍒楀湪鏈�宸﹁竟锛岀1鍒楀湪鏈�鍙宠竟
+      // 妯℃澘涓樉绀虹殑鍒楀彿鏄� 91-item锛屾墍浠ョ1涓猠l-col鏄剧ず90锛岀90涓猠l-col鏄剧ず1
+      // 褰撳墠鍒楀彿涓篶urrentColumn锛屽搴旂殑绱㈠紩涓� maxColumn - currentColumn
+      const actualIndex = this.maxColumn - currentColumn;
+      
+      // 璁$畻浣嶇疆锛�
+      // (瀹為檯绱㈠紩 * 璐т綅瀹藉害) = 璇ュ垪鐨勮捣濮嬩綅缃�
+      // + (璐т綅瀹藉害 / 2) = 璇ュ垪鐨勪腑蹇冧綅缃�
+      // - (鎸囩ず鍣ㄥ搴� / 2) = 灏嗘寚绀哄櫒涓績涓庡垪涓績瀵归綈
+      const position = actualIndex * columnWidth + (columnWidth / 2) - (dotWidth / 2);
+      
+      // 璋冭瘯淇℃伅
+      console.log('褰撳墠鍒�:', currentColumn, '瀹為檯绱㈠紩:', actualIndex);
+      console.log('璐т綅瀹藉害:', columnWidth, '鎸囩ず鍣ㄥ搴�:', dotWidth);
+      console.log('璁$畻浣嶇疆:', position);
+      
+      return position;
+    },
+
     moveDot(x) {
-      this.StackerCrane.Automatic = x.Automatic == null ? "鏁呴殰" : x.Automatic;
-      this.StackerCrane.Fault = x.Fault == null ? "鏁呴殰" : x.Fault;
-      this.StackerCrane.Running = x.Running == null ? "鏁呴殰" : x.Running;
-      this.StackerCrane.CurrentColumn = x.CurrentColumn == undefined ? 1 : x.CurrentColumn;
-      this.StackerCrane.CurrentLayer = x.CurrentLayer == undefined ? 1 : x.CurrentLayer;
-      this.StackerCrane.LevelPoint = x.LevelPoint;
-      this.StackerCrane.DeviceName = x.DeviceName;
-      this.StackerCrane.CurrentTaskNum = x.CurrentTaskNum;
-      this.StackerCrane.StackerAlarm = x.StackerAlarm;
-      this.form.DeviceCode = x.DeviceCode;
+      // 鏄犲皠宸ヤ綔妯″紡
+      const autoStatusCode = x.YL_AutoStatus;
+      if (autoStatusCode !== undefined) {
+        this.yL_DB.YL_AutoStatus = this.YLDBMap.YL_AutoStatus[autoStatusCode] || autoStatusCode;
+      } else {
+        this.yL_DB.YL_AutoStatus = "鏃�";
+      }
+
+      // 鏄犲皠璁惧鐘舵��
+      const statusCode = parseInt(x.YL_Status);
+      if (!isNaN(statusCode)) {
+        this.yL_DB.YL_Status = this.YLDBMap.YL_Status[statusCode] || statusCode.toString();
+      } else {
+        this.yL_DB.YL_Status = "鏃�";
+      }
+
+      // 鏄犲皠宸ヤ綔鐘舵��
+      const workStatusCode = x.YL_WorkStatus;
+      if (workStatusCode !== undefined) {
+        this.yL_DB.YL_WorkStatus = this.YLDBMap.YL_WorkStatus[workStatusCode] || workStatusCode;
+      } else {
+        this.yL_DB.YL_WorkStatus = "鏃�";
+      }
+
+      // 鍏朵粬鏁版嵁璧嬪��
+      this.yL_DB.R_PP_Status = x.DeviceCode || "鏃�";
+      this.yL_DB.YL_WorkType = x.YL_WorkType || "鏃�";
+      this.yL_DB.YL_TaskNum = x.YL_TaskNum || "鏃�";
+      
+      // 澶勭悊琛屽彿
+      const rowValue = parseInt(x.YL_Row);
+      this.yL_DB.YL_Row = (!isNaN(rowValue) && rowValue > 0) ? rowValue.toString() : "0";
+
+      // 鏍规嵁灏忚揣浣嶅彿璁$畻鍒楀彿
+      // 鐩存帴浣跨敤鍘熷灏忚揣浣嶅彿
+      const smallColumn = parseInt(x.YL_Column);
+      let displayColumn;
+      if (!isNaN(smallColumn) && smallColumn > 0) {
+        // 鐩存帴浣跨敤灏忚揣浣嶅彿锛屼笉杩涜杞崲
+        displayColumn = smallColumn;
+      } else {
+        // 娌℃湁鏀跺埌淇℃伅锛屾寚绀哄櫒鍦ㄥ闈�
+        displayColumn = 0;
+      }
+
+      // 澶勭悊鍒楀彿
+      this.yL_DB.YL_Column = (!isNaN(smallColumn) && smallColumn > 0) ? smallColumn.toString() : "0";
+      
+      // 澶勭悊灞傚彿
+      const layerValue = parseInt(x.YL_Layer);
+      this.yL_DB.YL_Layer = (!isNaN(layerValue) && layerValue > 0) ? layerValue.toString() : "0";
+      // 澶勭悊鍚庣鏂板弬鏁帮紝鏄剧ず鍒版姤璀︿俊鎭腑
+      this.yL_DB.StackerAlarm = x.StackerAlarm || "鏃�";
+      this.yL_DB.CurrentColumn = displayColumn.toString();
+
+      this.form.DeviceCode = x.DeviceCode || "";
     },
     update() {
-      if (this.StackerCrane.Automatic == "鑱旀満妯″紡" && this.StackerCrane.Fault != "鏁呴殰" && this.StackerCrane.Running == "寰呮満") {
+      // 鑾峰彇StackerAlarm鐨勫�硷紝杞崲涓哄瓧绗︿覆杩涜姣旇緝
+      const alarmValue = String(this.yL_DB.StackerAlarm).trim();
+      // 褰揝tackerAlarm瀛楁鐨勫�间笉涓�0鎴栫┖鏃讹紝灏辨晠闅滄姤璀︼紙鏄剧ず绾㈣壊锛�
+      if (alarmValue !== '' && alarmValue !== '0' && alarmValue !== '鏃�') {
+        return 'dot-Fault ';
+      }
+      if (this.yL_DB.YL_Status == "鍦ㄧ嚎" && (this.yL_DB.YL_AutoStatus == "鑷姩" || this.yL_DB.YL_AutoStatus == "鍗婅嚜鍔�")) {
         return 'dot-Automatic ';
       }
-      else if (this.StackerCrane.Automatic == "鑱旀満妯″紡" && this.StackerCrane.Fault != "鏁呴殰" && this.StackerCrane.Running == "杩愯涓�") {
+      else if (this.yL_DB.YL_Status == "鍦ㄧ嚎" && this.yL_DB.YL_AutoStatus == "鎵嬪姩") {
         return 'dot-Running ';
-      } else if (this.StackerCrane.Fault == "鏁呴殰") {
-        return 'dot-Fault ';
       } else {
         return 'dot-Fault ';
+      }
+    },
+    status() { 
+      const statusText = this.ConveyorLineInfo.YL_Status;
+      if (statusText === '鎵嬪姩') {
+        return 'custom-img-blue';
+      } else if (statusText === '鑷姩') {
+        return 'custom-img-green';
+      } else if (statusText === '鑴辨満') {
+        return 'custom-img-red';
+      } else {
+        return '';
       }
     },
     mouseClick() {
@@ -238,85 +328,85 @@
       this.dialogVisible = true;
       this.fullscreenLoading = false;
     },
-    start() {
-      this.fullscreenLoading = true;
-      this.http.post("api/DeviceInfo/StackerHandTask", this.form)
-        .then((x) => {
-          if (!x.status) {
-            this.$message.error(x.message);
-          } else {
-            this.$Message.success("鍫嗗灈鏈哄懡浠ゅ凡涓嬪彂");
-            // $vue.success("鎴愬姛.");
-            this.show = false;
-            $vue.refresh();
-          }
-        })
-        .finally(() => {
-          this.fullscreenLoading = false;
-        });
-    }, reset() {
-      this.fullscreenLoading = true;
-      this.http.post("api/DeviceInfo/StackerReset?DeviceCode=" + this.form.DeviceCode)
-        .then((x) => {
-          if (!x.status) {
-            this.$message.error(x.message);
-          } else {
-            this.$Message.success("澶嶄綅鎴愬姛");
-            // $vue.success("鎴愬姛.");
-            this.show = false;
-            $vue.refresh();
-          }
-        })
-        .finally(() => {
-          this.fullscreenLoading = false;
-        });
-    },
-    
-    emergencyStop() {
-      this.fullscreenLoading = true;
-      this.http.post("api/DeviceInfo/StackerEmergencyStop?DeviceCode=" + this.form.DeviceCode)
-        .then((x) => {
-          if (!x.status) {
-            this.$message.error(x.message);
-          } else {
-            this.$Message.success("鎬ュ仠宸叉寜涓�");
-            // $vue.success("鎴愬姛.");
-            // this.show = false;
-            // $vue.refresh();
-          }
-        })
-        .finally(() => {
-          this.fullscreenLoading = false;
-        });
-    },
-    disconnected() {
-      this.fullscreenLoading = true;
-      this.http.post("api/DeviceInfo/StackerDisconnected?DeviceCode=" + this.form.DeviceCode)
-        .then((x) => {
-          if (!x.status) {
-            this.$message.error(x.message);
-          } else {
-            this.$Message.success("涓柇鍫嗗灈鏈轰换鍔�");
-          }
-        })
-        .finally(() => {
-          this.fullscreenLoading = false;
-        });
-    },
-    StackerRecall() {
-      this.fullscreenLoading = true;
-      this.http.post("api/DeviceInfo/StackerRecall?DeviceCode=" + this.form.DeviceCode)
-        .then((x) => {
-          if (!x.status) {
-            this.$message.error(x.message);
-          } else {
-            this.$Message.success("鍙洖鍫嗗灈鏈�");
-          }
-        })
-        .finally(() => {
-          this.fullscreenLoading = false;
-        });
-    }
+    // start() {
+    //   this.fullscreenLoading = true;
+    //   this.http.post("api/DeviceInfo/StackerHandTask", this.form)
+    //     .then((x) => {
+    //       if (!x.status) {
+    //         this.$message.error(x.message);
+    //       } else {
+    //         this.$Message.success("鍫嗗灈鏈哄懡浠ゅ凡涓嬪彂");
+    //         // $vue.success("鎴愬姛.");
+    //         this.show = false;
+    //         $vue.refresh();
+    //       }
+    //     })
+    //     .finally(() => {
+    //       this.fullscreenLoading = false;
+    //     });
+    // }, reset() {
+    //   this.fullscreenLoading = true;
+    //   this.http.post("api/DeviceInfo/StackerReset?DeviceCode=" + this.form.DeviceCode)
+    //     .then((x) => {
+    //       if (!x.status) {
+    //         this.$message.error(x.message);
+    //       } else {
+    //         this.$Message.success("澶嶄綅鎴愬姛");
+    //         // $vue.success("鎴愬姛.");
+    //         this.show = false;
+    //         $vue.refresh();
+    //       }
+    //     })
+    //     .finally(() => {
+    //       this.fullscreenLoading = false;
+    //     });
+    // },
+
+    // emergencyStop() {
+    //   this.fullscreenLoading = true;
+    //   this.http.post("api/DeviceInfo/StackerEmergencyStop?DeviceCode=" + this.form.DeviceCode)
+    //     .then((x) => {
+    //       if (!x.status) {
+    //         this.$message.error(x.message);
+    //       } else {
+    //         this.$Message.success("鎬ュ仠宸叉寜涓�");
+    //         // $vue.success("鎴愬姛.");
+    //         // this.show = false;
+    //         // $vue.refresh();
+    //       }
+    //     })
+    //     .finally(() => {
+    //       this.fullscreenLoading = false;
+    //     });
+    // },
+    // disconnected() {
+    //   this.fullscreenLoading = true;
+    //   this.http.post("api/DeviceInfo/StackerDisconnected?DeviceCode=" + this.form.DeviceCode)
+    //     .then((x) => {
+    //       if (!x.status) {
+    //         this.$message.error(x.message);
+    //       } else {
+    //         this.$Message.success("涓柇鍫嗗灈鏈轰换鍔�");
+    //       }
+    //     })
+    //     .finally(() => {
+    //       this.fullscreenLoading = false;
+    //     });
+    // },
+    // StackerRecall() {
+    //   this.fullscreenLoading = true;
+    //   this.http.post("api/DeviceInfo/StackerRecall?DeviceCode=" + this.form.DeviceCode)
+    //     .then((x) => {
+    //       if (!x.status) {
+    //         this.$message.error(x.message);
+    //       } else {
+    //         this.$Message.success("鍙洖鍫嗗灈鏈�");
+    //       }
+    //     })
+    //     .finally(() => {
+    //       this.fullscreenLoading = false;
+    //     });
+    // }
   },
 };
 </script>
@@ -324,9 +414,10 @@
 <style scoped>
 .line-container {
   position: relative;
-  height: 20px;
+  height: 25px;
   background-color: #ecf5ff;
-  width: 960px;
+  width: 2720px;
+  /* 90鍒� * 30px姣忓垪 */
 }
 
 .line {
@@ -334,13 +425,13 @@
   top: 0;
   left: 0;
   right: 0;
-  height: 1px;
+  height: 0px;
   background-color: #a0cfff;
 }
 
 .dot-Running {
   position: absolute;
-  top: -5px;
+  top: 0px;
   width: 25px;
   height: 25px;
   border-radius: 50%;
@@ -356,7 +447,7 @@
 
 .dot-Automatic {
   position: absolute;
-  top: -5px;
+  top: 0px;
   width: 25px;
   height: 25px;
   border-radius: 50%;
@@ -372,7 +463,7 @@
 
 .dot-Fault {
   position: absolute;
-  top: -5px;
+  top: 0px;
   width: 25px;
   height: 25px;
   border-radius: 50%;
@@ -388,19 +479,111 @@
 
 img {
   width: 30px;
-  height: 25px;
+  height: 30px;
 }
 
 .image-text {
   position: absolute;
   top: 5px;
-  /* left: 10px;  */
-  color: white;
-  /* 鏂囧瓧棰滆壊 */
+  color: #000000;
   font-size: 12px;
-  /* 瀛楀彿澶у皬 */
   font-weight: bold;
-  /* 瀛椾綋绮楃粏 */
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
   margin-left: 5px;
 }
-</style>
+
+.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>
\ No newline at end of file

--
Gitblit v1.9.3