From b4d09a09d2a8ffc939e97f8b400ff94a64d13eb7 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期一, 04 三月 2024 17:46:01 +0800
Subject: [PATCH] 优化用户管理页面表单填写界面选择设备功能，车间重新选择后重置选择设备

---
 src/views/WorkshopSignage.vue |   35 ++++++++++++++++++++++++++++++-----
 1 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index 7505af1..c803017 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -23,11 +23,11 @@
 
           <a-col :span="7" class="device-status-info">
             <!--<a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info"-->
-                     <!--@click="handleScreenDevive(item)">-->
-              <!--<div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>-->
-              <!--<div class="status-square" :style="{ backgroundColor: item.color }"></div>-->
-              <!--&lt;!&ndash;<a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox>&ndash;&gt;-->
-              <!--<div>{{getDeviceNumberByStatus(item.value) }}</div>-->
+            <!--@click="handleScreenDevive(item)">-->
+            <!--<div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>-->
+            <!--<div class="status-square" :style="{ backgroundColor: item.color }"></div>-->
+            <!--&lt;!&ndash;<a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox>&ndash;&gt;-->
+            <!--<div>{{getDeviceNumberByStatus(item.value) }}</div>-->
             <!--</a-space>-->
             <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
               <div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>
@@ -42,6 +42,8 @@
       <!--鎷栨嫿璁惧鍖哄煙-->
       <div class="content-container" ref="deviceContainerRef" style="overflow: auto">
         <img :src="imgSrc" width="1920" height="900">
+        <div class="guideline guidelineX" :style="{top:guidelineXTop+'px',display:showGuideline}"></div>
+        <div class="guideline guidelineY" :style="{left:guidelineYLeft+'px',display:showGuideline}"></div>
         <VueDragResize
           v-for="(item, index) in deviceList"
           :key="item.equipmentId"
@@ -59,6 +61,7 @@
           :isDraggable="isDraggable"
           :isResizable="isResizable"
           :stickSize="6"
+          @deactivated="showGuideline = 'none'"
         >
           <div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }"
                @click="openDetail(item)">
@@ -127,6 +130,9 @@
         timingAcquisition: null, // 瀹氭椂鍒锋柊鏄惁寮�鍚�
         parentH: 5000,//鐖剁骇楂樺害
         parentW: 1920,//鐖剁骇瀹藉害
+        showGuideline: 'none',
+        guidelineXTop: 0,
+        guidelineYLeft: 0,
         deviceList: [
           // {
           //   equipmentId: '123213213123232',// 璁惧ID
@@ -283,10 +289,13 @@
         // } else {
         //   this.deviceList[index].fontSize = 12
         // }
+        this.showGuideline = 'block'
         this.deviceList[index].vw = newRect.width
         this.deviceList[index].vh = newRect.height
         this.deviceList[index].coordinateTop = newRect.top
         this.deviceList[index].coordinateLeft = newRect.left
+        this.guidelineXTop = newRect.top + newRect.height / 2
+        this.guidelineYLeft = newRect.left + newRect.width / 2
       },
 
       /**
@@ -492,6 +501,22 @@
       width: 100%;
       background-repeat: no-repeat;
       background-size: 100% 100%;
+      position: relative;
+
+      .guideline{
+        position: absolute;
+        border: 1px dashed #ccc;
+      }
+
+      .guidelineX {
+        width: 1920px;
+        left: 0;
+      }
+
+      .guidelineY {
+        top: 0;
+        height: 900px;
+      }
 
       .single-device {
         position: absolute;

--
Gitblit v1.9.3