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;