1、车间看板页面非全屏模式下使图纸盒子占满底部，而不是被屏幕任务栏遮盖 2、报警分析页面调整右侧表格以及图表布局，调整表格合计持续字段展示格式为时分秒...

zhuzhuanzhuan

2023-11-27 237b5f107cf9fab2a6b730f1a036dbdcbfb63498

1、车间看板页面非全屏模式下使图纸盒子占满底部，而不是被屏幕任务栏遮盖
2、报警分析页面调整右侧表格以及图表布局，调整表格合计持续字段展示格式为时分秒
3.大屏车间管理页面选择已有设备窗口弹出方式由模态窗改为右侧抽屉

 src/views/WorkshopSignage.vue

@@ -1,6 +1,6 @@
<template>
  <dv-full-screen-container class="full-screen-container">
    <header class="page-header">
    <header class="page-header" :style="{height: pageHeaderHeight+'px'}">
      {{ workshopDetails.workshopName }}
      <div class="header-left" v-has="'home:saveDevicePositionAndSize'">
        <a-space>
@@ -77,7 +77,6 @@
            </div>
          </div>
        </VueDragResize>

      </div>
    </dv-border-box-8>

@@ -103,6 +102,11 @@
    },
    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, // 是否开启缩放
@@ -141,7 +145,8 @@
            value: 22,
            color: '#FF0000'
          }
        ] // 设备状态指示灯列表
        ],// 设备状态指示灯列表，
        isFullscreen: false
      }
    },
    watch: {
@@ -186,7 +191,14 @@
            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
          }
        })
      },

@@ -285,6 +297,35 @@
          //   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
        }
      }

    },
@@ -293,15 +334,29 @@
        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
    },
    beforeDestroy() {
      // 确保销毁定时器及回收资源
      // 确保销毁定时器、事件及回收资源
      clearInterval(this.timingAcquisition)
      this.timingAcquisition = null
      // window.removeEventListener('resize', this.onResize)
    }
  }
</script>
@@ -313,7 +368,6 @@
    color: #fff;

    .page-header {
      height: 80px;
      font-size: 50px;
      text-align: center;
      position: relative;
@@ -357,10 +411,10 @@

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


      .single-device {
        position: absolute;
@@ -380,8 +434,7 @@
          width: 100%;
          height: 100%;
          display: flex;
          align-items:end ;

          align-items: end;

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

 src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue

@@ -19,7 +19,7 @@
      </div>
      <div id="DeviceList">
        <div class="openRateTrendDg">
          <div id="Efficiency" class="container" style="margin-top: 20px;">
          <div id="Efficiency" class="container">
            <div class="table2">
              <table class="dataContent table" border="1" cellspacing="0" cellpadding="0"
                     style="white-space: nowrap;text-align: left;">
@@ -31,7 +31,7 @@
                    出现次数
                  </th>
                  <th class="thgu dong3 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">
                    合计持续时间（秒）
                    合计持续时间
                  </th>
                  <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">
                    报警信息
@@ -45,7 +45,8 @@
                <tr class="mathData" v-for="(item, index) in dataList" @click="TableDraw(index,item)">
                  <td class="tdgu  kaitou">{{item.alarmCode}}</td>
                  <td class="tdgu1  kaitou">{{item.count}}</td>
                  <td class="tdgu2 kaitou">{{item.timeCount}}</td>
                  <td class="tdgu2 kaitou">{{getFormattedTime(item.timeCount)}}
                  <!--<td class="tdgu2 kaitou">{{item.timeCount}}</td>-->
                  <td class="tdgu3 kaitou">{{item.alarmContent}}</td>
                  <!--<template v-for="(tableHead, index) in item.dataList">-->
                  <!--<td :style="{background:tableHead.color }">{{tableHead.utilizationRate | numFilter}}</td>-->
@@ -56,7 +57,7 @@
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 60%;display: flex;">
        <div style="width: 100%;height: 55%;display: flex;">
          <div id="MdcEquipmentWarningPie" style="height: 100%;width: 35%;"></div>
          <div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div>
        </div>
@@ -429,6 +430,14 @@
          ]
        }
        equipmentWarningLine.setOption(equipmentWarningLineOption, true)
      },

      getFormattedTime(seconds){
        var hours = Math.floor(seconds / 3600);
        var minutes = Math.floor((seconds % 3600) / 60);
        var secs = seconds % 60;

        return `${hours}小时 ${minutes}分 ${secs}秒`
      }
    }
  }
@@ -591,28 +600,28 @@

  @media screen and (min-width: 1920px) {
    #Efficiency {
      height: 337px !important;
      height: 258px !important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    #Efficiency {
      height: 337px !important;
      height: 258px !important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    #Efficiency {
      height: 190px !important;
      height: 160px !important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    #Efficiency {
      height: 90px !important;
      height: 60px !important;
      overflow: scroll;
    }
  }

 src/views/system/WorkshopSignageManagement.vue

@@ -416,7 +416,7 @@
              if (res.success) {
                that.$message.success(res.message)
                that.loadData2()
                that.onClearSelected()
                that.onClearSelected2()
              } else {
                that.$message.warning(res.message)
              }
@@ -459,6 +459,7 @@
        this.$refs.selectUserModal.selectedRowKeys = []
        this.$refs.selectUserModal.selectedRows = []
        this.$refs.selectUserModal.checkedKeys = []
        this.$refs.selectUserModal.expandAll()
      }
    },


 src/views/system/modules/SelectDeviceModal.vue

@@ -1,12 +1,11 @@
<template>
  <div>
    <a-modal
    <a-drawer
      :title="title"
      :visible="visible"
      width="650"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
      centered
      @close="handleCancel"
    >

      <!--&lt;!&ndash; 查询区域 &ndash;&gt;-->
@@ -52,47 +51,41 @@
          <a-form-item label="车间层级：">
            <a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys"
                    :treeData="treeDataSource" checkable @check="onCheck" v-model="checkedKeys"
                    :autoExpandParent="autoExpandParent" @expand="onExpand">
                    @expand="onExpand">
            </a-tree>
          </a-form-item>
        </a-form>

      </a-spin>

      <template slot="footer">
        <div>
          <div>
            <a-dropdown
              style="float: left"
              :trigger="['click']"
              placement="topCenter"
            >
              <a-menu slot="overlay">
                <a-menu-item key="1" @click="expandAll">展开所有</a-menu-item>
                <a-menu-item key="2" @click="closeAll">合并所有</a-menu-item>
                <a-menu-item key="3" @click="refreshTree">刷新</a-menu-item>
              </a-menu>
              <a-button>
                树操作
                <a-icon type="up"/>
              </a-button>
            </a-dropdown>
          </div>
          <a-space>
            <a-button
              @click="handleCancel"
            >关闭
            </a-button>
            <a-button
              @click="handleOk"
              type="primary"
            >确定
            </a-button>
          </a-space>
        </div>
      </template>

    </a-modal>
      <div class="drawer-bottom-button">
        <a-dropdown
          style="float: left"
          :trigger="['click']"
          placement="topCenter"
        >
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="expandAll">展开所有</a-menu-item>
            <a-menu-item key="2" @click="closeAll">合并所有</a-menu-item>
            <a-menu-item key="3" @click="refreshTree">刷新</a-menu-item>
          </a-menu>
          <a-button>
            树操作
            <a-icon type="up"/>
          </a-button>
        </a-dropdown>
        <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
          <a-button style="margin-right: .8rem">关闭</a-button>
        </a-popconfirm>
        <a-button
          @click="handleOk"
          type="primary"
        >确定
        </a-button>
      </div>

    </a-drawer>
  </div>
</template>

@@ -133,8 +126,6 @@
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
        },
        dataList: [],
        autoExpandParent: true,
        checkStrictly: true,
        allTreeKeys: [],
        visible: false,
        dataSource: []
@@ -401,7 +392,7 @@
    overflow-y: hidden
  }

  .drawer-bootom-button {
  .drawer-bottom-button {
    position: absolute;
    bottom: 0;
    width: 100%;