1、优化部分页面布局问题 2、完善车间看板设备缩放以及拖拽功能

zhuzhuanzhuan

2023-10-10 de0d853f5d199389508054e330340995d9da858b

 src/views/WorkshopSignage.vue

@@ -8,39 +8,79 @@
    </header>

    <dv-border-box-8 class="content-container">
      <div v-for="item in deviceList" :key="item.equipmentId" class="single-device"
           :style="{top:item.top+'px',left:item.left+'px',height:'135px',width:'175px'}" @mousedown="handleMouseDown"
           :id="item.equipmentId">
        <div class="device-status">
          <img v-if="item.status==0" src="@/assets/yellow.png" draggable="false">
          <img v-if="item.status==1" src="@/assets/red.png" draggable="false">
          <img v-if="item.status==2" src="@/assets/gray.png" draggable="false">
          <img v-if="item.status==3" src="@/assets/green.png" draggable="false">
          <img :src="item.equipmentImageUrl" draggable="false">
      <!--<div v-for="item in deviceList" :key="item.equipmentId" class="single-device"-->
      <!--:style="{top:item.top+'px',left:item.left+'px',height:'135px',width:'175px'}" @mousedown="handleMouseDown"-->
      <!--:id="item.equipmentId">-->
      <!--<div class="device-status">-->
      <!--<img v-if="item.status==0" src="@/assets/yellow.png" draggable="false">-->
      <!--<img v-if="item.status==1" src="@/assets/red.png" draggable="false">-->
      <!--<img v-if="item.status==2" src="@/assets/gray.png" draggable="false">-->
      <!--<img v-if="item.status==3" src="@/assets/green.png" draggable="false">-->
      <!--<img :src="item.equipmentImageUrl" draggable="false">-->
      <!--</div>-->
      <!--<div class="device-id">{{item.equipmentId}}</div>-->
      <!--&lt;!&ndash;<div draggable="false" class="device-info">&ndash;&gt;-->
      <!--&lt;!&ndash;<div v-if="item.status==0" class="status-square" style="background-color: gray"></div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div v-if="item.status==1" class="status-square" style="background-color: red"></div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div v-if="item.status==2" class="status-square" style="background-color: green"></div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div class="device-id">{{item.equipmentId}}</div>&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--</div>-->
      <VueDragResize v-for="(item,index) in deviceList" :key="item.equipmentId" :w="item.vw"
                     :h="item.vh" :x="item.left" :y="item.top"
                     v-on:resizing="resize($event,index)"
                     v-on:dragging="resize($event,index)"
                     :parentLimitation="true"
                     :minw="175"
                     :minh="135"
                     :id="item.equipmentId"

      >
        <div class="single-device"
             :style="{width: + item.vw+ 'px',height:+item.vh+'px'}">
          <div class="device-status">
            <div v-if="item.status==0"
                 :style="{backgroundImage:`url(${require('@/assets/yellow.png')})`}" class="status-image"></div>
            <div v-if="item.status==1" :style="{backgroundImage:`url(${require('@/assets/red.png')})`}"
                 class="status-image"></div>
            <div v-if="item.status==2" :style="{backgroundImage:`url(${require('@/assets/gray.png')})`}"
                 class="status-image"></div>
            <div v-if="item.status==3" :style="{backgroundImage:`url(${require('@/assets/green.png')})`}"
                 class="status-image"></div>
            <div
              :style="{backgroundImage:`url(${item.equipmentImageUrl})`}"
              class="device-image"></div>
          </div>
          <div class="device-id" :style="{fontSize: item.fontSize+'px'}">
            {{item.equipmentId}}
          </div>
          <!--<div draggable="false" class="device-info">-->
          <!--<div v-if="item.status==0" class="status-square" style="background-color: gray"></div>-->
          <!--<div v-if="item.status==1" class="status-square" style="background-color: red"></div>-->
          <!--<div v-if="item.status==2" class="status-square" style="background-color: green"></div>-->
          <!--<div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>-->
          <!--<div class="device-id">{{item.equipmentId}}</div>-->
          <!--</div>-->
        </div>
        <div class="device-id">{{item.equipmentId}}</div>
        <!--<div draggable="false" class="device-info">-->
        <!--<div v-if="item.status==0" class="status-square" style="background-color: gray"></div>-->
        <!--<div v-if="item.status==1" class="status-square" style="background-color: red"></div>-->
        <!--<div v-if="item.status==2" class="status-square" style="background-color: green"></div>-->
        <!--<div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>-->
        <!--<div class="device-id">{{item.equipmentId}}</div>-->
        <!--</div>-->
      </div>
      <!--<div style="width: 175px;height: 135px;background-color: red;position: absolute;top: 200px;left: 100px"></div>-->
      </VueDragResize>
    </dv-border-box-8>
  </dv-full-screen-container>
</template>

<script>
  import VueDragResize from 'vue-drag-resize'

  export default {
    components: {
      VueDragResize
    },
    data() {
      return {
        mouseX: 0, // 鼠标在元素内的X坐标
        mouseY: 0, // 鼠标在元素内的Y坐标,
        dragging: false, //是否在拖拽中
        left: 0, // 元素左上角距离父容器左侧的距离
        top: 0, // 元素左上角距离父容器顶部的距离,
        elementId: '',// 被拖拽元素的id属性值
        elementWidth: '',
        elementHeight: '',
@@ -50,6 +90,9 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 200,
            left: 100,
            vw: 175,
            vh: 135,
            fontSize: 20,
            status: 1
          },
          {
@@ -57,6 +100,9 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 500,
            left: 753,
            vw: 175,
            vh: 135,
            fontSize: 20,
            status: 0
          },
          {
@@ -64,6 +110,9 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 300,
            left: 860,
            vw: 175,
            vh: 135,
            fontSize: 20,
            status: 2
          },
          {
@@ -71,6 +120,9 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 100,
            left: 380,
            vw: 175,
            vh: 135,
            fontSize: 20,
            status: 3
          },
          {
@@ -78,6 +130,9 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 200,
            left: 1500,
            vw: 175,
            vh: 135,
            fontSize: 20,
            status: 2
          }
        ]
@@ -143,7 +198,7 @@
              if (item.top < 0) {
                item.top = 0
              } else if (item.top + this.elementHeight + 80 > window.innerHeight) {
                item.top = window.innerHeight- this.elementHeight
                item.top = window.innerHeight - this.elementHeight
              }
              if (item.left < 0) {
                item.left = 0
@@ -170,7 +225,23 @@
       */
      saveDevicePositionByApi() {
        console.log('保存位置')

      },
      /**
       * 设备拖拽或缩放时触发事件
       * @param newRect 拖拽或缩放后的尺寸及距离
       * @param index 拖拽设备在数组中的下标
       */
      resize(newRect, index) {
        console.log('newRect', newRect)
        if (newRect.width > 200) {
          this.deviceList[index].fontSize = newRect.width / 10
        } else {
          this.deviceList[index].fontSize = 20
        }
        this.deviceList[index].top = newRect.top
        this.deviceList[index].left = newRect.left
        this.deviceList[index].vw = newRect.width
        this.deviceList[index].vh = newRect.height
      }
    },
    mounted() {
@@ -215,15 +286,28 @@
        justify-content: space-between;
        cursor: default;
        &:active {
          border: 1px solid #00b3ff;
          border: 1px solid #1890ff;
        }
        .device-status {
          width: 145px;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          .status-image {
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 45px;
            margin-right: 10px;
          }
          .device-image {
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
          }
        }
        .device-id {
          font-size: 20px;
          /*font-size: 20px;*/
        }
        /*.device-info {*/
        /*width: 100%;*/