问题项修改

“linengliang”

2024-03-12 ddd7e6f6c57c2f39305e94a74650e28bbf31f9e7

 src/views/WorkshopSignage.vue

@@ -2,7 +2,7 @@
  <dv-full-screen-container class="full-screen-container">
    <header class="page-header" :style="{height: pageHeaderHeight+'px'}">
      {{ workshopDetails.workshopName }}
      <div class="header-left" v-has="'home:saveDevicePositionAndSize'">
      <div class="header-left" v-has="'home:saveDevicePositionAndSize'" v-if="!isFullScreen">
        <a-space>
          <span v-if="!isSwitchChecked">开启功能</span>
          <span v-else>关闭功能</span>
@@ -36,7 +36,8 @@
          :y="item.coordinateTop"
          v-on:resizing="resize($event, index)"
          v-on:dragging="resize($event, index)"
          :parentLimitation="true"
          :parentLimitation="parentLimitation"
          :parentH="parentH"
          :minw="70"
          :minh="70"
          :isDraggable="isDraggable"
@@ -103,15 +104,12 @@
    data() {
      return {
        pageHeaderHeight: 80,// 页头高度
        taskBarHeight: window.screen.height - window.screen.availHeight,// 屏幕底部任务栏高度
        utilsBarHeight: window.outerHeight - window.innerHeight,// 浏览器工具栏高度
        normalPageHeight: 0,
        fullScreenPageHeight: 0,
        workshopDetails: {}, //  车间详细信息,
        isDraggable: false, // 是否开启拖拽
        isResizable: false, // 是否开启缩放
        isSwitchChecked: false, // 是否开启功能
        timingAcquisition: null, // 定时刷新是否开启
        parentH: 5000,//父级高度
        deviceList: [
          // {
          //   equipmentId: '123213213123232',// 设备ID
@@ -146,7 +144,9 @@
            color: '#FF0000'
          }
        ],// 设备状态指示灯列表，
        isFullscreen: false
        windowHeight: null,// 当前浏览器可视区域高度（（不包括工具栏、书签、底部任务栏），进入页面时计算一次，除非重新加载页面否则浏览器可视区域高度则不发生改变
        isFullScreen: false,// 进入看板页面时是否为全屏模式，不包括正常模式进入后切换为全屏模式
        parentLimitation: false// 拖拽区域是否限制在父元素区域内
      }
    },
    watch: {
@@ -191,14 +191,9 @@
            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.windowHeight - this.pageHeaderHeight) + 'px'
          this.parentH = this.windowHeight - this.pageHeaderHeight
          this.parentLimitation = true // 在父元素高度设置后再设置限制拖拽区域，不这样有概率导致父元素高度未设置就限制拖拽
        })
      },

@@ -285,7 +280,6 @@
      openDetail(item) {
        if (!this.isSwitchChecked) {
          if (item.equipmentStatus == 0) {
            // this.$message.warn("设备处于关机状态！");
            this.$message.warning('设备处于关机状态！')
            return false
          }
@@ -299,64 +293,38 @@
        }
      },

      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
        }
      /**
       * 浏览器尺寸发生改变时触发
       */
      handleWindowSizeChange() {
        this.isFullScreen = !this.isFullScreen
        if (!this.isFullScreen) location.reload() // 如果为全屏模式，则在切换模式时重新加载页面以重新获取浏览器可视区域高度
      }

    },
    created() {
      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() {
      // 禁止用户选中内容
      document.onselectstart = () => false

      this.windowHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight

      // 判断浏览器可视区域高度是否等于分辨率，若相等则表示进入时浏览器为全屏模式
      if (this.windowHeight === screen.height) this.isFullScreen = true

      window.addEventListener('resize', this.handleWindowSizeChange)
    },
    beforeDestroy() {
      // 确保销毁定时器、事件及回收资源
      clearInterval(this.timingAcquisition)
      this.timingAcquisition = null
      // window.removeEventListener('resize', this.onResize)
    }
  }
</script>
@@ -375,7 +343,7 @@
      .header-left {
        width: 450px;
        position: absolute;
        left: 0px;
        left: 0;
        top: 35px;
        display: flex;
        justify-content: space-evenly;
@@ -394,10 +362,6 @@
        justify-content: space-between;

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

          .status-square {
            width: 14px;
@@ -411,8 +375,6 @@

    .content-container {
      width: 100%;
      /*height: calc(100% - 200px);*/
      /*height: 100%;*/
      background-repeat: no-repeat;
      background-size: 100% 100%;

@@ -434,7 +396,9 @@
          width: 100%;
          height: 100%;
          display: flex;
          align-items: end;
          -webkit-align-items: flex-end;
          -moz-align-items: flex-end;
          -ms-align-items: flex-end;

          .status-image {
            background-size: 100% 100%;