新增大屏车间管理页面并基本实现基础功能（除车间删除与批量删除与查询）

zhuzhuanzhuan

2023-10-12 36ca71eaff11519ef34eb6e4fb192f24bf3bf47c

 src/views/WorkshopSignage.vue

@@ -3,43 +3,25 @@
    <header class="page-header">
      {{getWorkshopName}}
      <div class="header-right">
        <a-button type="primary" icon="save" size="large" @click="saveDevicePositionByApi">保存位置</a-button>
        <a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi"
                  v-has="'home:saveDevicePositionAndSize'">保存位置
        </a-button>
      </div>
    </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>-->
      <!--<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"
                     :minw="100"
                     :minh="100"
                     :id="item.equipmentId"

                     :stickSize="6"
      >
        <div class="single-device"
             :style="{width: + item.vw+ 'px',height:+item.vh+'px'}">
             :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>
@@ -50,21 +32,20 @@
            <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>
              :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>
      </VueDragResize>
      <div class="device-status-info">
        <div v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
          <div>{{item.label}}</div>
          <div class="status-square" :style="{backgroundColor:item.color}"></div>
          <div>{{getDeviceNumberByStatus(item.value)}}</div>
        </div>
      </div>
    </dv-border-box-8>
  </dv-full-screen-container>
</template>
@@ -78,31 +59,26 @@
    },
    data() {
      return {
        mouseX: 0, // 鼠标在元素内的X坐标
        mouseY: 0, // 鼠标在元素内的Y坐标,
        dragging: false, //是否在拖拽中
        elementId: '',// 被拖拽元素的id属性值
        elementWidth: '',
        elementHeight: '',
        // 设备信息列表
        deviceList: [
          {
            equipmentId: '123213213123232',
            equipmentImageUrl: require('@/assets/8.png'),
            top: 200,
            left: 100,
            vw: 175,
            vh: 135,
            fontSize: 20,
            status: 1
            equipmentId: '123213213123232',// 设备ID
            equipmentImageUrl: require('@/assets/8.png'), // 设备图片
            top: 200, // 拖拽元素距盒子顶距离
            left: 100, // 拖拽元素距盒子左侧距离
            vw: 100,  // 缩放元素宽度
            vh: 100, // 缩放元素高度
            fontSize: 12, // 缩放元素字体大小
            status: 1 // 设备状态 0:待机 1:报警 2:关机 3:运行
          },
          {
            equipmentId: '512346789561232',
            equipmentImageUrl: require('@/assets/8.png'),
            top: 500,
            left: 753,
            vw: 175,
            vh: 135,
            fontSize: 20,
            vw: 100,
            vh: 100,
            fontSize: 12,
            status: 0
          },
          {
@@ -110,9 +86,9 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 300,
            left: 860,
            vw: 175,
            vh: 135,
            fontSize: 20,
            vw: 100,
            vh: 100,
            fontSize: 12,
            status: 2
          },
          {
@@ -120,9 +96,9 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 100,
            left: 380,
            vw: 175,
            vh: 135,
            fontSize: 20,
            vw: 100,
            vh: 100,
            fontSize: 12,
            status: 3
          },
          {
@@ -130,10 +106,33 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 200,
            left: 1500,
            vw: 175,
            vh: 135,
            fontSize: 20,
            vw: 100,
            vh: 100,
            fontSize: 12,
            status: 2
          }
        ],
        // 设备状态指示灯列表
        deviceStatusList: [
          {
            label: '关机',
            value: 2,
            color: '#A8A8A8'
          },
          {
            label: '待机',
            value: 0,
            color: '#FFFF00'
          },
          {
            label: '运行',
            value: 3,
            color: '#00EE00'
          },
          {
            label: '报警',
            value: 1,
            color: '#FF0000'
          }
        ]
      }
@@ -156,74 +155,16 @@
    },
    methods: {
      /**
       * 通过车间Id调用接口获取设备列表
       * 通过车间Id调用接口获取设备信息列表
       * @param workshopId 车间Id
       */
      getDeviceListByApi(workshopId) {
        console.log('车间Id', workshopId)
      },
      /**
       * 拖拽对象鼠标按键按下事件
       * @param event
       * 点击保存按钮调用接口保存拖拽后的位置与设备图标尺寸
       */
      handleMouseDown(event) {
        this.dragging = true
        this.mouseX = event.clientX
        this.mouseY = event.clientY
        this.elementId = event.currentTarget.id
        this.top = event.currentTarget.offsetTop
        this.left = event.currentTarget.offsetLeft
        document.addEventListener('mousemove', this.handleMouseMove)
        document.addEventListener('mouseup', this.handleMouseUp)
        this.elementWidth = +event.currentTarget.style.width.replace('px', '')
        this.elementHeight = +event.currentTarget.style.height.replace('px', '')
      },
      /**
       * 文档对象鼠标移动事件
       * @param event
       */
      handleMouseMove(event) {
        if (this.dragging) {
          // x方向鼠标偏移量
          const deltaX = event.clientX - this.mouseX
          // y方向鼠标偏移量
          const deltaY = event.clientY - this.mouseY
          this.left += deltaX
          this.top += deltaY
          this.deviceList.forEach(item => {
            if (item.equipmentId === this.elementId) {
              item.top = this.top
              item.left = this.left
              // 限制拖拽超出区域(缩放浏览器窗口后距四周距离出现问题)
              if (item.top < 0) {
                item.top = 0
              } else if (item.top + this.elementHeight + 80 > window.innerHeight) {
                item.top = window.innerHeight - this.elementHeight
              }
              if (item.left < 0) {
                item.left = 0
              } else if (item.left + this.elementWidth > window.innerWidth) {
                item.left = window.innerWidth - this.elementWidth
              }
            }
          })
          this.mouseX = event.clientX
          this.mouseY = event.clientY
        }
      },
      /**
       * 文档对象鼠标按键弹起事件
       * @param event
       */
      handleMouseUp(event) {
        this.dragging = false
        document.removeEventListener('mousemove', this.handleMouseMove)
        document.removeEventListener('mouseup', this.handleMouseUp)
      },
      /**
       * 点击保存按钮调用接口保存拖拽后的位置
       */
      saveDevicePositionByApi() {
      saveDevicePositionAndSizeByApi() {
        console.log('保存位置')
      },
      /**
@@ -233,15 +174,27 @@
       */
      resize(newRect, index) {
        console.log('newRect', newRect)
        if (newRect.width > 200) {
          this.deviceList[index].fontSize = newRect.width / 10
        if (newRect.width > 100) {
          if (newRect.width / newRect.height < 2) {
            this.deviceList[index].fontSize = newRect.width / 10
          } else {
            this.deviceList[index].fontSize = newRect.height / 5
          }
        } else {
          this.deviceList[index].fontSize = 20
          this.deviceList[index].fontSize = 12
        }
        this.deviceList[index].top = newRect.top
        this.deviceList[index].left = newRect.left
        this.deviceList[index].vw = newRect.width
        this.deviceList[index].vh = newRect.height
        this.deviceList[index].top = newRect.top
        this.deviceList[index].left = newRect.left
      },
      /**
       * 根据设备状态值获取对应设备数量
       * @param value 设备状态值
       * @returns {number} 设备数量
       */
      getDeviceNumberByStatus(value) {
        return this.deviceList.filter(item => item.status === value).length
      }
    },
    mounted() {
@@ -267,6 +220,7 @@
      font-size: 50px;
      text-align: center;
      position: relative;

      .header-right {
        position: absolute;
        right: 200px;
@@ -276,6 +230,31 @@

    .content-container {
      position: relative;

      .device-status-info {
        width: 400px;
        position: absolute;
        top: 5px;
        right: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .single-status-info {
          width: 60px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .status-square {
            width: 14px;
            height: 14px;
            border: 1px solid #fff;
            border-radius: 2px;
          }
        }
      }

      .single-device {
        position: absolute;
        border: 1px solid transparent;
@@ -285,20 +264,24 @@
        align-items: center;
        justify-content: space-between;
        cursor: default;

        &:active {
          border: 1px solid #1890ff;
        }

        .device-status {
          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;
@@ -306,22 +289,8 @@
            height: 100%;
          }
        }
        .device-id {
          /*font-size: 20px;*/
        }
        /*.device-info {*/
        /*width: 100%;*/
        /*display: flex;*/
        /*align-items: center;*/
        /*justify-content: space-between;*/
        /*.status-square {*/
        /*width: 14px;*/
        /*height: 14px;*/
        /*border: 1px solid #fff;*/
        /*border-radius: 2px;*/
        /*}*/
        /*}*/
      }

    }
  }
</style>