优化功能

wangxinhui

9 分钟以前 37051424de7c4a97132fbb06e45df594790aabf9

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

@@ -1,893 +1,342 @@
<template>
   <div class="title">
      <el-row :gutter="20" style="height:85%">
         <el-col :span="8">
            <span style="position: relative; top: 100px;left: 30px;">
               <h4>一楼设备监控</h4>
            </span>
            <el-row :gutter="20" style="height:1000px">
               <el-col :span="8">
                  <div>
                     <div v-for="(group, index) in groupedLines(linescopy7)" :key="index">
                        <div class="positionY-group">
                           <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex"
                              :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX"
                              :positionY="line.positionY" :condition="line.condition"
                              url="api/Equipment/GetLineInfoByNo" />
                        </div>
                     </div>
                     <div style="margin-top: 118px;"></div>
                     <div v-for="(group, index) in groupedLines(linescopy8)" :key="index">
                        <div class="positionY-group">
                           <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex"
                              :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX"
                              :positionY="line.positionY" :condition="line.condition"
                              url="api/Equipment/GetLineInfoByNo" />
                        </div>
                     </div>
                     <div style="margin-top: 115px;"></div>
                     <div v-for="(group, index) in groupedLines(linescopy9)" :key="index">
                        <div class="positionY-group">
                           <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex"
                              :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX"
                              :positionY="line.positionY" :condition="line.condition"
                              url="api/Equipment/GetLineInfoByNo" />
                        </div>
                     </div>
                     <div style="margin-top: 112px;"></div>
                     <div v-for="(group, index) in groupedLines(linescopy10)" :key="index">
                        <div class="positionY-group">
                           <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex"
                              :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX"
                              :positionY="line.positionY" :condition="line.condition" />
                        </div>
                     </div>
                     <div style="margin-top: 109px;"></div>
                     <div v-for="(group, index) in groupedLines(linescopy11)" :key="index">
                        <div class="positionY-group">
                           <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex"
                              :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX"
                              :positionY="line.positionY" :condition="line.condition" />
                        </div>
                     </div>
                     <div style="margin-top: 107px;"></div>
                     <div v-for="(group, index) in groupedLines(linescopy12)" :key="index">
                        <div class="positionY-group">
                           <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex"
                              :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX"
                              :positionY="line.positionY" :condition="line.condition" />
                        </div>
                     </div>
                  </div>
               </el-col>

               <el-col :span="8">
                  <div>
                     <div v-for="(group, index) in groupedLines(linescopy1)" :key="index">
                        <div class="positionY-group">
                           <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex"
                              :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX"
                              :positionY="line.positionY" :condition="line.condition"
                              url="api/Equipment/GetLineInfoByNo" />
                        </div>
                     </div>
                     <div style="margin-top: 108px;"></div>
                     <div v-for="(group, index) in groupedLines(linescopy2)" :key="index">
                        <div class="positionY-group">
                           <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex"
                              :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX"
                              :positionY="line.positionY" :condition="line.condition"
                              url="api/Equipment/GetLineInfoByNo" />
                        </div>
                     </div>
                     <div style="margin-top: 58px;"></div>
                     <div v-for="(group, index) in groupedLines(linescopy3)" :key="index">
                        <div class="positionY-group">
                           <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex"
                              :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX"
                              :positionY="line.positionY" :condition="line.condition"
                              url="api/Equipment/GetLineInfoByNo" />
                        </div>
                     </div>
                     <div style="margin-top: 58px;"></div>
                     <div v-for="(group, index) in groupedLines(linescopy4)" :key="index">
                        <div class="positionY-group">
                           <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex"
                              :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX"
                              :positionY="line.positionY" :condition="line.condition" />
                        </div>
                     </div>
                     <div style="margin-top: 115px;"></div>
                     <div v-for="(group, index) in groupedLines(linescopy5)" :key="index">
                        <div class="positionY-group">
                           <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex"
                              :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX"
                              :positionY="line.positionY" :condition="line.condition" />
                        </div>
                     </div>
                     <div style="margin-top: 115px;"></div>
                     <div v-for="(group, index) in groupedLines(linescopy6)" :key="index">
                        <div class="positionY-group">
                           <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex"
                              :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX"
                              :positionY="line.positionY" :condition="line.condition" />
                        </div>
                     </div>
                  </div>
               </el-col>
            </el-row>

         </el-col>
         <el-col :span="8">
            <!-- å †åž›æœº -->
            <div style="position: relative; top: 50px;">
               <div class="stackerDiv">
                  <div class="stackDivName">一号堆垛机</div>
                  <LineComponent :x="xValue1" ref="stacker1" :equipNo="SC01"></LineComponent>
               </div>
               <el-divider></el-divider>
               <div class="stackerDiv">
                  <div class="stackDivName">二号堆垛机</div>
                  <LineComponent :x="xValue2" ref="stacker2" :equipNo="SC02"></LineComponent>
               </div>
               <el-divider></el-divider>
               <div class="stackerDiv">
                  <div class="stackDivName">三号堆垛机</div>
                  <LineComponent :x="xValue3" ref="stacker3" :equipNo="SC03"></LineComponent>
               </div>
               <el-divider></el-divider>
               <div class="stackerDiv">
                  <div class="stackDivName">四号堆垛机</div>
                  <LineComponent :x="xValue4" ref="stacker4" :equipNo="SC04"></LineComponent>
               </div>
               <el-divider></el-divider>
               <div class="stackerDiv">
                  <div class="stackDivName">五号堆垛机</div>
                  <LineComponent :x="xValue5" ref="stacker5" :equipNo="SC05"></LineComponent>
               </div>
               <el-divider></el-divider>
               <div class="stackerDiv">
                  <div class="stackDivName">六号堆垛机</div>
                  <LineComponent :x="xValue6" ref="stacker6" :equipNo="SC06"></LineComponent>
               </div>
            </div>
         </el-col>
      </el-row>
		

   </div>

</template>

<script>
import { onMounted, ref, reactive } from "vue";
import LineInfo from "./LineInfo.vue";
import LineInfoCopy from "./LineInfocopy.vue";
import LineComponent from './LineComponent.vue';
import JElDescription from "./JElDescription";
import { useWebSocket } from '@/uitils/websocket';

export default {
   data() {
      return {
         ws: null,          // WebSocket实例
         messages: [],      // æ¶ˆæ¯åˆ—表
         status: {         // è¿žæŽ¥çŠ¶æ€
            isConnected: false,
            error: null
         },
         linescopy1: [
            {
               equipNo: "1005",
               imgType: "1",
               positionX: 0.6,
               positionY: 8,
               condition: false,
            },
            {
               equipNo: "1006",
               imgType: "1",
               positionX: 0.6,
               positionY: 8,
               condition: false,
            },

            {
               equipNo: "1007",
               imgType: "1",
               positionX: 0.6,
               positionY: 20,
               condition: false,
            },
            {
               equipNo: "1008",
               imgType: "1",
               positionX: 0.6,
               positionY: 20,
               condition: false,
            }
         ],
         linescopy2: [
            {
               equipNo: "1009",
               imgType: "1",
               positionX: 0.6,
               positionY: 8,
               condition: false,
            },
            {
               equipNo: "1010",
               imgType: "1",
               positionX: 0.6,
               positionY: 8,
               condition: false,
            },

            {
               equipNo: "1011",
               imgType: "1",
               positionX: 0.6,
               positionY: 20,
               condition: false,
            },
            {
               equipNo: "1025",
               imgType: "1",
               positionX: 0.6,
               positionY: 21,
               condition: false,
            },
            {
               equipNo: "1012",
               imgType: "1",
               positionX: 0.6,
               positionY: 20,
               condition: false,
            }
         ],
         linescopy3: [
            {
               equipNo: "1017",
               imgType: "1",
               positionX: 0.6,
               positionY: 8,
               condition: false,
            },
            {
               equipNo: "1018",
               imgType: "1",
               positionX: 0.6,
               positionY: 8,
               condition: false,
            },

            {
               equipNo: "1019",
               imgType: "1",
               positionX: 0.6,
               positionY: 20,
               condition: false,
            },
            {
               equipNo: "1026",
               imgType: "1",
               positionX: 0.6,
               positionY: 21,
               condition: false,
            },
            {
               equipNo: "1020",
               imgType: "1",
               positionX: 0.6,
               positionY: 20,
               condition: false,
            }
         ],
         linescopy4: [
            {
               equipNo: "1021",
               imgType: "1",
               positionX: 0.6,
               positionY: 8,
               condition: false,
            },
            {
               equipNo: "1022",
               imgType: "1",
               positionX: 0.6,
               positionY: 8,
               condition: false,
            },

            {
               equipNo: "1023",
               imgType: "1",
               positionX: 0.6,
               positionY: 20,
               condition: false,
            },
            {
               equipNo: "1024",
               imgType: "1",
               positionX: 0.6,
               positionY: 20,
               condition: false,
            }
         ],
         linescopy5: [
            {
               equipNo: "1031",
               imgType: "1",
               positionX: 0.6,
               positionY: 8,
               condition: false,
            },
            {
               equipNo: "1032",
               imgType: "1",
               positionX: 0.6,
               positionY: 8,
               condition: false,
            },

            {
               equipNo: "1033",
               imgType: "1",
               positionX: 0.6,
               positionY: 20,
               condition: false,
            },
            {
               equipNo: "1034",
               imgType: "1",
               positionX: 0.6,
               positionY: 20,
               condition: false,
            }
         ],
         linescopy6: [
            {
               equipNo: "1035",
               imgType: "1",
               positionX: 0.6,
               positionY: 8,
               condition: false,
            },
            {
               equipNo: "1036",
               imgType: "1",
               positionX: 0.6,
               positionY: 8,
               condition: false,
            },

            {
               equipNo: "1037",
               imgType: "1",
               positionX: 0.6,
               positionY: 20,
               condition: false,
            },
            {
               equipNo: "1038",
               imgType: "1",
               positionX: 0.6,
               positionY: 20,
               condition: false,
            }
         ],
         linescopy7: [
            {
               equipNo: "1001",
               imgType: "1",
               positionX: 5,
               positionY: 8,
               condition: false,
            },
            {
               equipNo: "1002",
               imgType: "1",
               positionX: 5,
               positionY: 8,
               condition: false,
            },

            {
               equipNo: "1003",
               imgType: "1",
               positionX: 5,
               positionY: 20,
               condition: false,
            },
            {
               equipNo: "1004",
               imgType: "1",
               positionX: 5,
               positionY: 20,
               condition: false,
            },
         ],
         linescopy8: [
            {
               equipNo: "1039",
               imgType: "1",
               positionX: 6,
               positionY: 8,
               condition: false,
            },
            {
               equipNo: "1040",
               imgType: "1",
               positionX: 6,
               positionY: 16,
               condition: false,
            },
         ],
         linescopy9: [
            {
               equipNo: "1013",
               imgType: "1",
               positionX: 6,
               positionY: 8,
               condition: false,
            },
            {
               equipNo: "1014",
               imgType: "1",
               positionX: 6,
               positionY: 16,
               condition: false,
            },
         ],
         linescopy10: [
            {
               equipNo: "1015",
               imgType: "1",
               positionX: 6,
               positionY: 8,
               condition: false,
            },
            {
               equipNo: "1016",
               imgType: "1",
               positionX: 6,
               positionY: 16,
               condition: false,
            },
         ],
         linescopy11: [
            {
               equipNo: "1027",
               imgType: "1",
               positionX: 6,
               positionY: 8,
               condition: false,
            },
            {
               equipNo: "1028",
               imgType: "1",
               positionX: 6,
               positionY: 16,
               condition: false,
            },

         ],
         linescopy12: [
            {
               equipNo: "1029",
               imgType: "1",
               positionX: 6,
               positionY: 8,
               condition: false,
            },
            {
               equipNo: "1030",
               imgType: "1",
               positionX: 6,
               positionY: 16,
               condition: false,
            },
         ],
   <div class="container">
     <div class="content-wrapper">
      <!-- æŽ§åˆ¶é¢æ¿åŒºåŸŸ -->
        <!-- <div class="form-group">
         <label>区域：</label>
         <el-select
           size="mini"
           filterable
           v-model="Area.shelf_code"
           placeholder="请选择"
           class="full-width"
         >
           <el-option
            v-for="item in slectData"
            :value="item.shelf_code"
            :label="item.house_name"
            :key="item.house_name"
           ></el-option>
         </el-select>
        </div> -->
  
        <div class="form-group">
         <div style="display:flex;flex-direction: column;">	
         <h4>货位排</h4>
         <el-select
           size="mini"
           @change="SCChange"
           v-model="Area.tunnel"
           placeholder="请选择排"
           class="full-width"
         >
           <el-option
            v-for="item in scList"
            :value="item"
            :label="'第'+item+'排'"
            :key="item"
           ></el-option>
         </el-select>
         <el-button type="success" class="refresh-btn" @click="GetViewData">
         åˆ·æ–°
        </el-button>
         </div>
         
         StackerCrane: {
            Automatic: "",
            Fault: "",
            CurrentLayer: "",
            CurrentRow: "1",
            CurrentColumn: "",
            CurrentTaskNum: "",
            Running: "",
            DeviceName: "",
            DeviceCOde: "",
            StackerAlarm: "",
         },
         RGVFirst: false,
         RGVSecond: false,
         RGVThird: false,
         xValue1: 0,
         xValue2: 0,
         xValue3: 0,
         xValue4: 0,
         xValue5: 0,
         xValue6: 0,
         timer1: null, // å®šæ—¶å™¨å˜é‡
         timer2: null, // å®šæ—¶å™¨å˜é‡
         RGV01: {
            Automatic: "",
            Fault: "",
            LevelPoint: 0,
            CurrentTaskNum: "",
            Running: "",
            DeviceName: "",
            DeviceCode: "RGV01",
            Alarm: "",
         },
         RGV02: {
            Automatic: "",
            Fault: "",
            LevelPoint: 1280,
            CurrentTaskNum: "",
            Running: "",
            DeviceName: "",
            DeviceCode: "RGV02",
            Alarm: "",
         },
         RGV03: {
            Automatic: "",
            Fault: "",
            LevelPoint: 0,
            CurrentTaskNum: "",
            Running: "",
            DeviceName: "",
            DeviceCode: "RGV03",
            Alarm: "",
         },
         formRGV: {
            TaskType: "",
            SourceAddress: "",
            TargetAddress: "",
            DeviceCode: "",
         },
      };
   },
   components: {
      LineInfoCopy,
      LineInfo,
      LineComponent,
      JElDescription,
   },
   methods: {
      groupedLines(linescopy) {
         const groups = {};
         linescopy.forEach((line) => {
            const positionY = line.positionY;
            if (!groups[positionY]) {
               groups[positionY] = {
                  positionY,
                  lines: [],
               };
            }
            groups[positionY].lines.push(line);
         });
         return Object.values(groups);
      },
      mouseClickRGVFirst() {
         this.fullscreenLoading = true;
         this.RGVFirst = true;
         this.fullscreenLoading = false;
      },
      mouseClickSecond() {
         this.fullscreenLoading = true;
         this.RGVSecond = true;
         this.fullscreenLoading = false;
      },
      mouseClickThird() {
         this.fullscreenLoading = true;
         this.RGVThird = true;
         this.fullscreenLoading = false;
      },
      SendCommand(x) {
         this.fullscreenLoading = true;
         this.formRGV.DeviceCode = x;
         this.http.post("api/DeviceInfo/RGVHandTask", this.formRGV)
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
                  $vue.refresh();
               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
      RGVReset(x) {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/RGVReset?DeviceCode=" + x, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);

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

               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
      RGVPause(x) {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/RGVPause?DeviceCode=" + x, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
      RGVCancel(x) {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/RGVCancel?DeviceCode=" + x, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
      RGVInitialize(x) {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/RGVInitialize?DeviceCode=" + x, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
        <div class="legend-section" style="margin-left: 20px;">
         <h4>说明</h4>
         <div class="legend-grid">
           <div
            class="legend-item"
            v-for="item in infoMsg"
            :key="item.bgcolor"
           >
            <span
              class="color-box"
              :style="{ 'background-color': item.bgcolor }"
            ></span>
            <span class="legend-label">{{ item.msg }}</span>
           </div>
         </div>
        </div>
        </div>
     </div>
     <!-- è´§ä½å±•ç¤ºåŒºåŸŸ -->
      <div class="location-view">
        <div
         class="layer-container"
         v-for="(item,index) in locationData"
         :key="index"
        >
         <h3 class="layer-title">第{{ item.layer }}层</h3>
         <div class="row" >
           <div
            class="location-cell"
            :style="{ 'background-color': GetBgColor(column) }"
            v-for="(column,index) in item.locationObj" :key="index"
            @mouseenter="showTooltip(column, $event)"
            @mouseleave="hideTooltip"
           >
            {{ column.row }}-{{ column.column }}-{{ column.layer }}
           </div>
         </div>
        </div>
      </div>
      <!-- æ‚¬æµ®æç¤ºæ¡† -->
      <div
        v-if="showTooltipFlag"
        class="location-tooltip"
        :style="{
         left: tooltipPosition.x + 'px',
         top: tooltipPosition.y + 'px',
        }"
      >
        <div v-if="currentLocation">
         <p><strong>货位号:</strong>{{ currentLocation.locationCode }}</p>
         <p><strong>料箱号:</strong>{{ currentLocation.barCode ? currentLocation.barCode :"无料箱" }}</p>
         <p>
           <strong>排列层:</strong> {{ currentLocation.row }}排{{
            currentLocation.column
           }}列{{ currentLocation.layer }}层
         </p>
         <p><strong>状态:</strong> {{ getStatusText(currentLocation) }}</p>
         <!-- <p>
           <strong>禁用:</strong>
           {{ currentLocation.location_lock == 3 ? "是" : "否" }}
         </p> -->
         <!-- <p v-if="currentLocation.location_state > 0">
           <strong>物料编码:</strong>
           {{ currentLocation.material_code || "无" }}
         </p>
         <p v-if="currentLocation.location_state > 0">
           <strong>数量:</strong> {{ currentLocation.quantity || "无" }}
         </p> -->
        </div>
      </div>
   </div>
  </template>
  
  <script>
  import { ElButton } from "element-plus";
import { el } from 'element-plus/es/locale';
  
  export default {
   data() {
     return {
      slectData: [],
      scList: [],
      Area: { house_name: "", tunnel: "", shelf_code: "" },
      mian_height: "",
      infoMsg: [
        { bgcolor: "lightgreen", msg: "空闲", state: 0 },
        { bgcolor: "orange", msg: "有货", state: 100 },
        { bgcolor: "#2BB3D5", msg: "锁定", state: 1 },
      ],
      locationData: [],
      showTooltipFlag: false,
      currentLocation: null,
      tooltipPosition: { x: 0, y: 0 },
     };
   },
   computed: {

     GetBgColor() {
      return (col) => {
           var bgColor = "";
           //优先显示禁用状态
           if (col.location_lock > 0) {
             this.infoMsg.forEach((el) => {
               if (el.state === col.location_lock) {
                  bgColor = el.bgcolor;
               }
            });
         }
         else{
            return "lightgreen";
         }			
           return bgColor;
      };
     },
   },
   methods: {
     GetViewData() {
      var _this = this;
      this.http
        .post("/api/LocationInfo/GetLocationStatus?row=" + _this.Area.tunnel, {}, "查询中")
        .then((x) => {
         _this.locationData = x.data;
        });
     },
     // åˆ‡æ¢æŽ’
     SCChange() {
      this.GetViewData();
     },
     showTooltip(location, event) {
      this.currentLocation = location;
      this.showTooltipFlag = true;
  
      // è®¾ç½®æç¤ºæ¡†ä½ç½®ï¼Œç¨å¾®åç§»é¿å…é®æŒ¡é¼ æ ‡
      this.tooltipPosition = {
        x: event.clientX + 10,
        y: event.clientY + 10,
      };
     },
  
     hideTooltip() {
      this.showTooltipFlag = false;
      this.currentLocation = null;
     },
  
     getStatusText(location) {
      // if (location.location_lock === 3) return "禁用";
      if (location.location_lock === 0) return "空闲";
      if (location.location_lock === 1) return "锁定";
      if (location.location_lock === 100) return "有货";
      // if (location.location_state > 0 && location.location_state < 100)
      //   return "锁定";
      return "其他";
     },
   },
   mounted() {
     var mainHeight = document.getElementById("vol-main");
     this.mian_height = mainHeight.offsetHeight - 40 + "px";
     var _this = this;
     //加载下拉选项
     this.http.post("/api/LocationInfo/GetRow", {}, "查询中").then((x) => {
      //加载第一个区域，第一排
      // _this.Area.shelf_code = _this.slectData[0].shelf_code;
      _this.scList = x.data;
      _this.Area.tunnel = _this.scList[0];
      _this.GetViewData();
     });
   },
   created() {

      this.ws = new WebSocket('ws://localhost:9260/');
    
    this.ws.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        console.log('收到消息:', data);
        // å¤„理消息...
      } catch (e) {
        console.error('消息解析失败', e);
      }
    };
      const stackerComponentsMap = {
         "SC01": 'stacker1',
         "SC02": 'stacker2',
         "SC03": 'stacker3',
         "SC04": 'stacker4',
         "SC05": 'stacker5',
         "SC06": 'stacker6',
      };
      // const componentKey = stackerComponentsMap[data.R_PP_Status];
      // if (componentKey) {
      //    this.StackerCrane.Automatic = data;
      //    this.StackerCrane.Fault = data;
      //    this.StackerCrane.Running = data;
      //    this.StackerCrane.CurrentColumn = data;
      //    this.StackerCrane.CurrentLayer = data;
      //    this.StackerCrane.LevelPoint = data;
      //    this.StackerCrane.DeviceName = data;
      //    this.StackerCrane.DeviceCode = data;
      //    this.StackerCrane.CurrentTaskNum = data;
      //    this.StackerCrane.StackerAlarm = data;

      //    this.$nextTick(() => {
      //       this.$refs[componentKey].moveDot(this.StackerCrane);
      //    });
      // }
      const stationMap = {
         "SC011F": this.linescopy1,
         "SC021F": this.linescopy2,
         "SC031F": this.linescopy3,
         "SC041F": this.linescopy4,
         "SC051F": this.linescopy5,
         "SC061F": this.linescopy6,
         "SC071F": this.linescopy7,
         "SC081F": this.linescopy8,
         "SC091F": this.linescopy9,
         "SC101F": this.linescopy10,
         "SC111F": this.linescopy11,
         "SC121F": this.linescopy12,
         "SC012F": this.linescopy13,
         "SC022F": this.linescopy13,
         "SC032F": this.linescopy13,
         "SC042F": this.linescopy13,
         "SC052F": this.linescopy13,
         "SC062F": this.linescopy13,
         "SC072F": this.linescopy13,
         "SC082F": this.linescopy14,
      };

      // var station = eventData.stationChildCode;
      // if (stationMap[eventData.roadway]) {
      //    stationMap[eventData.roadway].forEach((line) => {
      //       if (line.equipNo === station) {
      //          line.condition = eventData.inStock;
      //       }
      //    })
      // }
   },
};
</script>

<style scoped>
/* .positionY-group {
  margin-bottom: 10px;
} */
.title {
   height: 1800px;
}

.cardWidth {
   components: { ElButton },
  };
  </script>
  
  <style scoped>
  .container {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.cardWidthrow {
   height: 00%;
   width: 100%;
   /* margin-top: 10px; */
   box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.divider {
   top: 50px;
}

.layerSize {
   position: absolute;
   top: 100px;
   left: 30px;
   color: fuchsi
}

.stackerDiv {
   border: 1px solid rgba(0, 195, 255, 0.822);
   width: 980px;
   padding-left: 3px;
}

.stackDivName {
   padding: 10px;
  }
  
  .header {
   text-align: center;
   color: rgba(0, 195, 255, 0.822);
   margin-bottom: 12px;
}

.dot-Running {
   position: absolute;
   top: -5px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: #409eff;
   transition: transform 0.3s ease;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 9px;
   margin-bottom: 20px;
  }
  
  .title {
   font-size: 20px;
   font-weight: bold;
   color: white;
}

.dot-Automatic {
   position: absolute;
   top: -5px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: #0df705;
   transition: transform 0.3s ease;
   margin: 0;
  }
  
  .content-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 9px;
   font-weight: bold;
   color: white;
}

.dot-Fault {
   position: absolute;
   top: -5px;
   width: 20px;
   height: 20px;
   /* right:0px; */
   border-radius: 50%;
   background-color: #f80410;
   transition: transform 0.3s ease;
   flex: 1;
   min-height: 0;
   padding: 10px;
  }
  
  
  
  .full-width {
   width: 100%;
  }
  
  .refresh-btn {
   margin-top: 10px;
   width: 35%;
  }
  
  
  .legend-section h4 {
   margin-bottom: 10px;
  }
  
  .legend-grid {
   display: flex;
   justify-content: center;
   grid-template-columns: 1fr;
   gap: 8px;
  }
  
  .legend-item {
   display: flex;
   align-items: center;
   font-size: 9px;
   font-weight: bold;
   color: white;
}


.line-container {
   position: relative;
   height: 1280px;
   background-color: #ecf5ff;
  }
  
  .color-box {
   display: inline-block;
   width: 20px;
   top: 30px;
   left: 200px
}

.RGVline {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background-color: #a0cfff;
}

.line {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background-color: #a0cfff;
}

.line-containerThird {
   position: absolute;
   height: 20px;
   background-color: #ecf5ff;
   width: 1330px;
   /* margin-top:180px; */
   top: 180px;

   left: 300px;
}

.lineThird {
   /* position: absolute; */
   height: 1px;
   /* margin-top:180px; */
   background-color: #a0cfff;
}</style>
   margin-right: 8px;
   border-radius: 3px;
  }
  
  .legend-label {
   font-size: 13px;
  }
  
  .location-view {
   flex: 1;
   overflow: auto;
   padding: 10px;
   background-color: white;
   border-radius: 4px;
  }
  
  .layer-container {
   margin-bottom: 25px;
  }
  
  .layer-title {
   margin: 0 0 10px 0;
   font-size: 16px;
   color: #333;
  }
  
  .row {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 8px;
   cursor: pointer;
  }
  
  .location-cell {
   width: 66px;
   height: 38px;
   margin: 3px;
   text-align: center;
   font-size: 14px;
   border-radius: 3px;
   line-height: 38px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .location-tooltip {
   position: fixed;
   z-index: 9999;
   background-color: white;
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 10px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   pointer-events: none;
   max-width: 250px;
  }
  
  .location-tooltip p {
   margin: 5px 0;
   font-size: 13px;
   line-height: 1.4;
  }
  
  .location-tooltip strong {
   display: inline-block;
   width: 70px;
   color: #666;
  }
  .form-group{
   display: flex;
  }
  </style>