1、调整车间看板页面设备编号背景色随设备状态变化 2、调整车间看板页面设备编号与设备图片之间的距离 3、调整车间看板页面布局方式，将左侧图表区域宽度固...

zhaowei

2025-03-10 4dda1f6c996b493477dd7e48714b87e84e25063c

1、调整车间看板页面设备编号背景色随设备状态变化
2、调整车间看板页面设备编号与设备图片之间的距离
3、调整车间看板页面布局方式，将左侧图表区域宽度固定，若内容超出屏幕则增加横向滚动条

 src/views/mdc/base/WorkshopSignage.vue

@@ -169,7 +169,6 @@

<style lang="less">
  .full-screen {
    width: 100%;
    height: 1080px;
    background-color: #000;
    display: flex;
@@ -181,12 +180,15 @@
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      /*justify-content: space-between;*/
      align-items: center;
      overflow: auto;
      flex-wrap: nowrap;

      .left-col {
        flex: 1;
        width: 412px;
        flex-shrink: 0;
        /*flex: 1;*/
        height: 100%;
        display: flex;
        padding: 0.5%;
@@ -234,95 +236,14 @@

      .right-col {
        position: relative;
        flex-shrink: 0;
        width: 1500px;
        height: 1080px;
        height: 100%;
        /*background-image: url("../../../assets/WorskhopSignage/103.png");*/
        background-color: #000;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;

        .single-device {
          position: absolute;
          border: 1px solid transparent;
          padding: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          cursor: default;

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

          .device-status {
            width: 100%;
            height: 100%;
            display: flex;
            -webkit-align-items: flex-end;
            -moz-align-items: flex-end;
            -ms-align-items: flex-end;

            .device-image {
              background-size: 100% 100%;
              background-repeat: no-repeat;
              width: 100%;
              height: 100%;
              position: relative;
              margin-bottom: 10px;

              .status-image {
                position: absolute;
                top: 25%;
                left: 25%;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                width: 50%;
                height: 50%;
              }
            }
          }

          & > div:last-child {
            color: #fff;
            font-weight: bold;
            font-size: 0.6vw;
          }
        }

        .guideline {
          position: absolute;
          border: 1px dashed #fff;
        }

        .guidelineX {
          width: 9999px;
          left: 0;
        }

        .guidelineY {
          top: 0;
          height: 9999px;
        }

        form {
          position: absolute;
          right: 0;
          bottom: 0.5%;

          label {
            color: #fff;
          }

          .ant-switch {
            background-color: #999;
          }

          .ant-switch-checked {
            background-color: #1890FF;
          }
        }
      }
    }
  }

 src/views/mdc/base/modules/WorkshopSignage/DeviceDragLayout.vue

@@ -31,7 +31,7 @@
            ></div>
          </div>
        </div>
        <div :style="{backgroundColor:item.equipmentStatus!==0?'#f00':''}">{{ item.equipmentId }}</div>
        <div :style="{backgroundColor:item.equipmentStatus!==0?'#f00':'rgba(0,0,0,.4)'}">{{ item.equipmentId }}</div>
      </div>
    </VueDragResize>

@@ -56,156 +56,185 @@
</template>

<script>
  import signageApi from '@/api/signage'
  import VueDragResize from 'vue-drag-resize'
import signageApi from '@/api/signage'
import VueDragResize from 'vue-drag-resize'

  export default {
    name: 'DeviceDragLayout',
    components: {
      VueDragResize
export default {
  name: 'DeviceDragLayout',
  components: {
    VueDragResize
  },
  props: {
    currentProductionId: {
      type: String
    },
    props: {
      currentProductionId: {
        type: String
      },
      getImgView: {
        type: Function
      },
      equipmentStatusList: {
        type: Array
      }
    getImgView: {
      type: Function
    },
    data() {
      return {
        deviceList: [],
        isShowGuideline: false,
        guidelineXTop: 0,
        guidelineYLeft: 0,
        isSwitchChecked: false,
        isHasResizeOrDragDevice: false
      }
    equipmentStatusList: {
      type: Array
    }
  },
  data() {
    return {
      deviceList: [],
      isShowGuideline: false,
      guidelineXTop: 0,
      guidelineYLeft: 0,
      isSwitchChecked: false,
      isHasResizeOrDragDevice: false
    }
  },
  created() {
    if (!this.currentProductionId) return
    this.getDeviceListByApi()
  },
  methods: {
    // 通过车间Id调用接口获取设备信息列表
    getDeviceListByApi() {
      const that = this
      signageApi.getDeviceListInWorkshopSignagePageApi(that.currentProductionId)
        .then((res) => {
          if (res.success && res.result && res.result.length > 0) that.deviceList = res.result
        })
    },
    created() {
      if (!this.currentProductionId) return
      this.getDeviceListByApi()
    },
    methods: {
      // 通过车间Id调用接口获取设备信息列表
      getDeviceListByApi() {
        const that = this
        signageApi.getDeviceListInWorkshopSignagePageApi(that.currentProductionId)
          .then((res) => {
            if (res.success && res.result && res.result.length > 0) that.deviceList = res.result
          })
      },

      handleSwitchChange(checked) {
        console.log('checked--------', checked)
        this.$emit('handleTimeIntervalForShortOpen', checked)
      },
    handleSwitchChange(checked) {
      console.log('checked--------', checked)
      this.$emit('handleTimeIntervalForShortOpen', checked)
    },

      /**
       * 设备拖拽或缩放时触发事件
       * @param newRect 拖拽或缩放后的尺寸及距离
       * @param index 拖拽设备在数组中的下标
       */
      resize(newRect, index) {
        this.isShowGuideline = true
        // 当设备缩放或拖拽后禁用switch组件并开放保存按钮功能（避免无效请求）
        if (!this.isHasResizeOrDragDevice) {
          if (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.isHasResizeOrDragDevice = true
          }
    /**
     * 设备拖拽或缩放时触发事件
     * @param newRect 拖拽或缩放后的尺寸及距离
     * @param index 拖拽设备在数组中的下标
     */
    resize(newRect, index) {
      this.isShowGuideline = true
      // 当设备缩放或拖拽后禁用switch组件并开放保存按钮功能（避免无效请求）
      if (!this.isHasResizeOrDragDevice) {
        if (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.isHasResizeOrDragDevice = true
        }
        // this.isHasResizeOrDragDevice = true
        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
      },

      // 点击保存按钮调用接口保存拖拽后的位置与设备图标尺寸
      saveDevicePositionAndSizeByApi() {
        const that = this
        signageApi.saveDevicePositionAndSizeApi(that.deviceList)
          .then((res) => {
            if (!res.success) return
            that.$notification.success({
              message: '消息',
              description: res.message
            })
            that.isSwitchChecked = that.isHasResizeOrDragDevice = false
            that.getDeviceListByApi(that.currentProductionId)
          })
      },

      /**
       * 获取当前设备状态图片
       * @param oporation 状态码
       * @returns {any} 设备状态图片资源
       */
      getCurrentDeviceStatusImage(oporation) {
        const currentStatus = this.equipmentStatusList.find(item => item.value.includes(oporation))
        return currentStatus.statusImage
      }
      // this.isHasResizeOrDragDevice = true
      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
    },

    // 点击保存按钮调用接口保存拖拽后的位置与设备图标尺寸
    saveDevicePositionAndSizeByApi() {
      const that = this
      signageApi.saveDevicePositionAndSizeApi(that.deviceList)
        .then((res) => {
          if (!res.success) return
          that.$notification.success({
            message: '消息',
            description: res.message
          })
          that.isSwitchChecked = that.isHasResizeOrDragDevice = false
          that.getDeviceListByApi(that.currentProductionId)
        })
    },

    /**
     * 获取当前设备状态图片
     * @param oporation 状态码
     * @returns {any} 设备状态图片资源
     */
    getCurrentDeviceStatusImage(oporation) {
      const currentStatus = this.equipmentStatusList.find(item => item.value.includes(oporation))
      return currentStatus.statusImage
    }
  }
}
</script>

<style scoped lang="less">
  .single-device {
    position: absolute;
    border: 1px solid transparent;
    padding: 10px;

.single-device {
  position: absolute;
  border: 1px solid transparent;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: default;

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

  .device-status {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: default;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    -ms-align-items: flex-end;

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

    .device-status {
    .device-image {
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      display: flex;
      -webkit-align-items: flex-end;
      -moz-align-items: flex-end;
      -ms-align-items: flex-end;
      position: relative;
      margin-bottom: 2px;

      .status-image {
        position: absolute;
        top: 25%;
        left: 25%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 10px;
        height: 80%;
        margin-right: 5px;
      }

      .device-image {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        width: 50%;
        height: 50%;
      }
    }
  }

  .guideline {
    position: absolute;
    border: 1px dashed #ccc;
  & > div:last-child {
    color: #fff;
    font-weight: bold;
    font-size: 0.6vw;
  }
}

.guideline {
  position: absolute;
  border: 1px dashed #fff;
}

.guidelineX {
  width: 9999px;
  left: 0;
}

.guidelineY {
  top: 0;
  height: 9999px;
}

form {
  position: absolute;
  right: 0;
  bottom: 0.5%;

  /deep/.ant-form-item-label > label{
    color: #fff;
  }

  .guidelineX {
    width: 9999px;
    left: 0;
  .ant-switch {
    background-color: #999;
  }

  .guidelineY {
    top: 0;
    height: 9999px;
  .ant-switch-checked {
    background-color: #1890FF;
  }
}
</style>