1、车间看板页面修改设备详情弹窗触发条件由悬浮改为单击 2、大屏车间管理页面增加有关设备编号字体颜色各项功能，由用户自行设置

zhuzhuanzhuan

2023-11-17 623c691a3cbf09fc0fe68bfa50d9354d12a3da77

1、车间看板页面修改设备详情弹窗触发条件由悬浮改为单击
2、大屏车间管理页面增加有关设备编号字体颜色各项功能，由用户自行设置

 src/views/WorkshopSignage.vue

@@ -37,7 +37,7 @@
          :stickSize="6"
        >
          <div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }"
               @mouseenter="openDetail(item)">
               @click="openDetail(item)">
            <div class="device-status">
              <div
                v-if="item.equipmentStatus == 2 || item.equipmentStatus == 1"
@@ -64,7 +64,8 @@
                class="device-image"
              ></div>
            </div>
            <div class="device-id" :style="{ fontSize: item.fontSize + 'px' }">
            <div class="device-id" id="deviceId"
                 :style="{ fontSize: item.fontSize + 'px',color:workshopDetails.equipmentIdColor }">
              {{ item.equipmentId }}
            </div>
          </div>
@@ -183,6 +184,8 @@
          this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(
            this.workshopDetails.backgroundImage
          )})`


        })
      },

@@ -327,9 +330,8 @@
    }

    .content-container {
      position: relative;
      width: 100%;
      height: 100%;
      height: calc(100% - 80px);
      background-repeat: no-repeat;
      background-size: 100% 100%;


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

@@ -1343,7 +1343,7 @@
      handleCancel() {
        this.$emit('close')
        this.visible = false
        this.modalNode.removeEventListener('mouseleave', this.closeModal)
        // this.modalNode.removeEventListener('mouseleave', this.closeModal)
        if(this.modalTimer){
          clearInterval(this.modalTimer)
          this.modalTimer = null
@@ -1390,11 +1390,11 @@
      },

      getModalNode() {
        console.log(document.querySelector('.ant-modal-content'))
        this.modalNode = document.querySelector('.ant-modal-content')
        this.timeout = setTimeout(() => {
          this.modalNode.addEventListener('mouseleave', this.closeModal)
        }, 100)
        // console.log(document.querySelector('.ant-modal-content'))
        // this.modalNode = document.querySelector('.ant-modal-content')
        // this.timeout = setTimeout(() => {
        //   this.modalNode.addEventListener('mouseleave', this.closeModal)
        // }, 100)
      },

      closeModal() {

 src/views/system/WorkshopSignageManagement.vue

@@ -230,6 +230,11 @@
          scopedSlots: { customRender: 'backgroundImage' },
        },
        {
          title: '设备编号颜色',
          dataIndex: 'equipmentIdColor',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',

 src/views/system/modules/WorkshopModal.vue

@@ -18,6 +18,9 @@
        <a-form-model-item label="车间背景图" required prop="backgroundImage">
          <j-image-upload class="avatar-uploader" text="上传" v-model="model.backgroundImage"></j-image-upload>
        </a-form-model-item>
        <a-form-model-item label="设备编号颜色">
          <a-input type="color" v-model="model.equipmentIdColor"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
@@ -28,6 +31,7 @@

  export default {
    name: 'WorkshopModal',
    components: {},
    data() {
      return {
        title: '操作',
@@ -49,7 +53,7 @@
            { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' },
            { validator: this.validateRoleCode }
          ],
          backgroundImage:[
          backgroundImage: [
            { required: true, message: '请上传车间背景图!' }
          ]
        }