添加新页面

zhuzhuanzhuan

2023-09-27 f685e04a997df8112975d3ec7bc9521687aff83d

添加新页面

 public/static/¼Ó¹¤ÊýÁ¿¹ÜÀí.xls

Binary files differ

 public/static/¼Æ»®Í£»ú¹ÜÀí.xls

Binary files differ

 public/static/·Ç¼Æ»®Í£»ú¹ÜÀí.xls

Binary files differ

 src/views/TestWorkshop.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,180 @@
<template>
  <dv-full-screen-container class="full-screen-container">
    <header class="page-header">
      æµ‹è¯•è½¦é—´
      <div class="header-right">
        <a-button type="primary" icon="save" size="large" @click="saveDevicePositionByApi">保存位置</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'}" @mousedown="handleMouseDown" :id="item.equipmentId">
        <img :src="item.equipmentImageUrl" draggable="false">
        <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>
    </dv-border-box-8>
  </dv-full-screen-container>
</template>

<script>
  export default {
    data() {
      return {
        mouseX: 0, // é¼ æ ‡åœ¨å…ƒç´ å†…çš„X坐标
        mouseY: 0, // é¼ æ ‡åœ¨å…ƒç´ å†…çš„Y坐标,
        dragging: false, //是否在拖拽中
        left: 0, // å…ƒç´ å·¦ä¸Šè§’距离父容器左侧的距离
        top: 0, // å…ƒç´ å·¦ä¸Šè§’距离父容器顶部的距离,
        elementId: '',// è¢«æ‹–拽元素的id属性值
        deviceList: [
          {
            equipmentId: '123213213123232',
            equipmentStatus: 0,
            equipmentImageUrl: require('../assets/8.png'),
            top: 200,
            left: 100,
            status: 1
          },
          {
            equipmentId: '512346789561232',
            equipmentStatus: 0,
            equipmentImageUrl: require('../assets/8.png'),
            top: 500,
            left: 753,
            status: 0
          },
          {
            equipmentId: '64746965647653',
            equipmentStatus: 0,
            equipmentImageUrl: require('../assets/8.png'),
            top: 300,
            left: 860,
            status: 2
          },
          {
            equipmentId: '33548976965462',
            equipmentStatus: 0,
            equipmentImageUrl: require('../assets/8.png'),
            top: 100,
            left: 380,
            status: 3
          },
          {
            equipmentId: '85484913549253',
            equipmentStatus: 0,
            equipmentImageUrl: require('../assets/8.png'),
            top: 200,
            left: 1500,
            status: 2
          }
        ]
      }
    },
    methods: {
      /**
       * æ‹–拽对象鼠标按键按下事件
       * @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)
      },
      /**
       * æ–‡æ¡£å¯¹è±¡é¼ æ ‡ç§»åŠ¨äº‹ä»¶
       * @param event
       */
      handleMouseMove(event) {
        if (this.dragging) {
          const deltaX = event.clientX - this.mouseX
          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
            }
          })
          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(){

      }
    },
    mounted() {
      // ç¦æ­¢ç”¨æˆ·é€‰ä¸­å†…容
      document.onselectstart = () => false
    }
  }
</script>

<style scoped lang="less">
  .full-screen-container {
    background-image: url('../assets/Bj.jpg');
    color: #fff;
    width: 100vw;
    height: 100vh;
    position: relative;
    .page-header {
      font-size: 50px;
      text-align: center;
      position: relative;
      .header-right{
        position: absolute;
        right: 200px;
        top: 0;
      }
    }
    .content-container {
      .single-device {
        position: absolute;
        border: 1px solid transparent;
        padding: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        &:active {
          border: 1px solid #00b3ff;
        }
        .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>