1、根页面网站标题由统计分析调整为MDC智慧车间 2、车间看板页面优化代码，去除冗余代码，试图解决新增车间后设备无法自由拖拽问题（未在现场调试，本地调...

zhuzhuanzhuan

2023-12-26 8c168889e5ef37b4d334827108615e762511c622

1、根页面网站标题由统计分析调整为MDC智慧车间
2、车间看板页面优化代码，去除冗余代码，试图解决新增车间后设备无法自由拖拽问题（未在现场调试，本地调试无问题）
3、车间看板页面全屏模式进入车间后车间背景图无法正常计算高度
4、车间看板与设备监控页面设备详情弹窗调整数据过长则省略的判定条件
5、首页优化布局方式，实现响应式布局

 public/index.html

@@ -5,7 +5,7 @@
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>统计分析</title>
  <title>MDC智慧车间</title>
  <link rel="icon" href="<%= BASE_URL %>lxzn.png">
  <script src="<%= BASE_URL %>cdn/babel-polyfill/polyfill_7_2_5.js"></script>
  <style>

 src/views/WorkshopSignage.vue

@@ -145,8 +145,7 @@
            value: 22,
            color: '#FF0000'
          }
        ],// 设备状态指示灯列表，
        isFullscreen: false
        ]// 设备状态指示灯列表，
      }
    },
    watch: {
@@ -190,15 +189,7 @@
          this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(
            this.workshopDetails.backgroundImage
          )})`

          this.fullScreenPageHeight = `calc(100% - ${this.pageHeaderHeight}px)`
          this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)`

          if (this.isFullscreen) {
            this.$refs.deviceContainerRef.style.height = this.fullScreenPageHeight
          } else {
            this.$refs.deviceContainerRef.style.height = this.normalPageHeight
          }
          this.$refs.deviceContainerRef.style.height = this.normalPageHeight
        })
      },

@@ -297,56 +288,15 @@
          //   setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0)
          // },1000*10)
        }
      },

      onResize() {
        // 利用屏幕分辨率和window对象的内高度来判断兼容IE
        let winFlag = window.innerHeight === window.screen.height
        // 利用window全屏标识来判断 -- IE无效
        let isFull = window.fullScreen || document.webkitIsFullScreen

        if (isFull === undefined) {
          this.isFullscreen = winFlag
        } else {
          this.isFullscreen = winFlag || isFull
        }
        console.log(winFlag)  // true全屏   false不是全屏
        console.log('任务栏高度', this.taskBarHeight)
        console.log('工具栏高度', this.utilsBarHeight)

        //全屏则图纸盒子可视高度减去页头高度，正常窗口则减去页头、屏幕底部任务栏以及浏览器工具栏高度
        if (winFlag) {
          console.log('触发全屏')
          this.$refs.deviceContainerRef.style.height = this.fullScreenPageHeight

        } else {
          console.log('关闭全屏')
          // 如果刷新页面重新加载后默认处于全屏模式，则工具栏高度为负数，因此需要退出全屏模式时重置工具栏高度
          this.utilsBarHeight = window.outerHeight - window.innerHeight
          this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)`
          this.$refs.deviceContainerRef.style.height = this.normalPageHeight
        }
      }

    },
    created() {
      if (this.utilsBarHeight > 0) this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)`
      else this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - 87px)`
      if (this.$route.params.id) {
        this.getDeviceListByApi(this.$route.params.id)
        this.getWorkshopDetailsByApi(this.$route.params.id)
      }


      let winFlag = window.innerHeight === window.screen.height
      // 利用window全屏标识来判断 -- IE无效
      let isFull = window.fullScreen || document.webkitIsFullScreen

      if (isFull === undefined) {
        this.isFullscreen = winFlag
      } else {
        this.isFullscreen = winFlag || isFull
      }

      // window.addEventListener('resize', this.onResize)
    },
    mounted() {
      // 禁止用户选中内容
@@ -356,7 +306,6 @@
      // 确保销毁定时器、事件及回收资源
      clearInterval(this.timingAcquisition)
      this.timingAcquisition = null
      // window.removeEventListener('resize', this.onResize)
    }
  }
</script>

 src/views/dashboard/Analysis.vue

@@ -1,5 +1,5 @@
<template>
  <div class="page-container" style="width: 100%">
  <div class="page-container">
    <!--<index-chart v-if="indexStyle==1"></index-chart>-->
    <!--<index-bdc v-if="indexStyle==2"></index-bdc>-->
    <!--<index-task v-if="indexStyle==3"></index-task>-->
@@ -11,14 +11,15 @@
    <!--&lt;!&ndash;<a-radio :value="3">任务表格</a-radio>&ndash;&gt;-->
    <!--&lt;!&ndash;</a-radio-group>&ndash;&gt;-->
    <!--</div>-->
    <!--<a-button type="primary" size="large" v-for="item in workshopList" :key="item.workshopId"-->
    <!--@click="navigateToWorkshopSignage(item.id)">{{item.workshopName}}-->
    <!--</a-button>-->

    <a-card v-for="item in workshopList" :key="item.workshopId"
            @click="navigateToWorkshopSignage(item.id)" class="workshop-entrance">
      {{item.workshopName}}
    </a-card>
    <a-list
      :grid="{ gutter: [{xs: 0, sm: 24, md: 24, lg: 56, xl: 64, xxl: 80},20], xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }"
      :data-source="workshopList">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <div class="workshop-name" @click="navigateToWorkshopSignage(item.id)">{{item.workshopName}}</div>
      </a-list-item>
    </a-list>

  </div>
</template>

@@ -70,21 +71,20 @@

<style lang="less" scoped>
  .page-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 30px 30px 0;

    .workshop-entrance {
      font-size: 30px;
      background-color: #fff;
      width: 300px;
      height: 140px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 30px 38px;
      cursor: pointer;
    .workshop-name {
      width: 100%;
      background: #fff;
      padding: 55px 0;
      border-radius: 20px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 30px;
      cursor: pointer;
    }
  }

</style>

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

@@ -237,16 +237,13 @@
                  :key="item.id"
                  :label="item.chineseName"
                >
                  <a-popover v-if="item.value&&item.value.length>18">
                    <template slot="content">
                  <a-tooltip @mouseenter="mouseEnterItem">
                    <template slot="title">
                      {{item.value}}
                    </template>
                    {{item.value}}
                  </a-popover>
                    <div class="description-item-class">{{item.value}}</div>
                  </a-tooltip>

                  <template v-else>
                    {{item.value}}
                  </template>
                </a-descriptions-item>

              </a-descriptions>
@@ -1423,6 +1420,13 @@

      closeModal() {
        this.handleCancel()
      },

      mouseEnterItem(e){
        console.log(e, e.target, e.target.clientWidth, e.target.scrollWidth)
        if (e.target.clientWidth >= e.target.scrollWidth) {
          e.target.style.pointerEvents = 'none' // 阻止鼠标事件    pointer-events 属性用于设置元素是否对鼠标事件做出反应。
        }
      }
    },
    beforeDestroy() {
@@ -1571,6 +1575,10 @@
  {
    width: 130px;
    overflow: hidden;
  }

  .description-item-class{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

 src/views/mdc/base/modules/deviceBaseInfo/EqumentDetaiModel.vue

@@ -237,16 +237,13 @@
                  :key="item.id"
                  :label="item.chineseName"
                >
                  <a-popover v-if="item.value&&item.value.length>18">
                    <template slot="content">
                  <a-tooltip @mouseenter="mouseEnterItem">
                    <template slot="title">
                      {{item.value}}
                    </template>
                    {{item.value}}
                  </a-popover>
                    <div class="description-item-class">{{item.value}}</div>
                  </a-tooltip>

                  <template v-else>
                    {{item.value}}
                  </template>
                </a-descriptions-item>

              </a-descriptions>
@@ -1425,6 +1422,13 @@
          }
        })

      },

      mouseEnterItem(e){
        console.log(e, e.target, e.target.clientWidth, e.target.scrollWidth)
        if (e.target.clientWidth >= e.target.scrollWidth) {
          e.target.style.pointerEvents = 'none' // 阻止鼠标事件    pointer-events 属性用于设置元素是否对鼠标事件做出反应。
        }
      }
    },
    beforeDestroy(){
@@ -1560,6 +1564,10 @@
  {
    width: 130px;
    overflow: hidden;
  }

  .description-item-class{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }