1、利用率分段分析页面增加导出功能，默认进入页面的计算时间段修改为00:00至23:59 2、设备管理页面增加设备属性的维护（普通、重点）同时TEEP...

zhaowei

2025-05-15 d7a8405c0f57f8947f971b798d3e4713a8d1800f

 src/views/mdc/base/WorkshopSignage.vue

@@ -5,7 +5,8 @@
      <div class="left-col">
        <div class="col-content">
          <div class="content-title">{{workshopDetails.workshopName}}#设备情况</div>
          <workshop-device-overview :currentProductionId="currentProductionId"
          <workshop-device-overview ref="workshopDeviceOverviewRef" :workshopName="workshopDetails.workshopName"
                                    :currentProductionId="currentProductionId"
                                    :equipmentStatusList="equipmentStatusList" :toDecimal2NoZero="toDecimal2NoZero"/>
        </div>
        <div class="col-content">
@@ -15,22 +16,25 @@
        </div>
        <div class="col-content">
          <div class="content-title">设备周利用率趋势</div>
          <week-utilization-rate-trend :currentProductionId="currentProductionId" :toDecimal2NoZero="toDecimal2NoZero"/>
          <week-utilization-rate-trend ref="weekRateTrendRef" :currentProductionId="currentProductionId"
                                       :toDecimal2NoZero="toDecimal2NoZero"/>
        </div>
        <div class="col-content">
          <div class="content-title">设备日利用率趋势</div>
          <day-utilization-rate-trend :currentProductionId="currentProductionId" :toDecimal2NoZero="toDecimal2NoZero"/>
          <day-utilization-rate-trend ref="dayRateTrendRef" :currentProductionId="currentProductionId"
                                      :toDecimal2NoZero="toDecimal2NoZero"/>
        </div>
        <div class="col-content">
          <div class="content-title">设备报警信息</div>
          <device-alarm-info/>
          <device-alarm-info ref="deviceAlarmInfoRef" :currentProductionId="currentProductionId"/>
        </div>
      </div>

      <!--右侧拖拽区域-->
      <div class="right-col">
        <device-drag-layout :currentProductionId="currentProductionId" :equipmentStatusList="equipmentStatusList"
                            :getImgView="getImgView"/>
        <device-drag-layout ref="deviceDragLayoutRef" :currentProductionId="currentProductionId"
                            :equipmentStatusList="equipmentStatusList"
                            :getImgView="getImgView" @handleTimeIntervalForShortOpen="handleTimeIntervalForShortOpen"/>
      </div>
    </div>
  </div>
@@ -54,7 +58,7 @@
      MonthUtilizationRateTrend,
      DayUtilizationRateTrend,
      WeekUtilizationRateTrend,
      WorkshopDeviceOverview,
      WorkshopDeviceOverview
    },
    data() {
      return {
@@ -82,20 +86,37 @@
            statusImage: require('@/assets/WorskhopSignage/stateImg_gray.gif')
          }
        ],
        deviceList: [],
        isShowGuideline: false,
        guidelineXTop: 0,
        guidelineYLeft: 0,
        isSwitchChecked: false,
        isHasResizeOrDragDevice: false
        timeIntervalForShortTime: null,
        timeIntervalForLongTime: null
      }
    },
    created() {
      if (!this.$route.params.productionId) return
      // 在此处获取路由参数是为了传递参数给子组件，若放在mounted中则无法传递给子组件
      this.currentProductionId = this.$route.params.productionId
    },
    mounted() {
      if (!this.$route.params.productionId) return
      // 在mounted中该调用此方法是为了获取dom元素
      this.getWorkshopDetailsByApi()

      this.timeIntervalForShortTime = setInterval(() => {
        this.$refs.workshopDeviceOverviewRef.getDeviceStatusCountByApi()
        this.$refs.deviceAlarmInfoRef.getDeviceAlarmInfoByApi()
        this.$refs.deviceDragLayoutRef.getDeviceListByApi()
      }, 1000 * 60)

      this.timeIntervalForLongTime = setInterval(() => {
        this.$refs.weekRateTrendRef.getChartDataByApi()
        this.$refs.dayRateTrendRef.getChartDataByApi()
      }, 1000 * 60 * 60)
    },
    beforeDestroy() {
      if (this.timeIntervalForShortTime || this.timeIntervalForLongTime) {
        clearInterval(this.timeIntervalForShortTime)
        clearInterval(this.timeIntervalForLongTime)
        this.timeIntervalForShortTime = this.timeIntervalForLongTime = null
      }
    },
    methods: {
      // 通过车间Id调用接口获取车间详细信息
@@ -107,6 +128,24 @@
          let workshopDrawingArea = document.querySelector('.right-col')
          workshopDrawingArea.style.backgroundImage = `url(${this.getImgView(that.workshopDetails.backgroundImage)})`
        })
      },

      /**
       * 控制短期定时任务开启与关闭
       * @param checked 右下角功能switch开关状态
       */
      handleTimeIntervalForShortOpen(checked) {
        if (checked) {
          clearInterval(this.timeIntervalForShortTime)
          this.timeIntervalForShortTime = null
          console.log('暂停计时器', this.timeIntervalForShortTime)
        } else {
          this.timeIntervalForShortTime = setInterval(() => {
            this.$refs.workshopDeviceOverviewRef.getDeviceStatusCountByApi()
            this.$refs.deviceAlarmInfoRef.getDeviceAlarmInfoByApi()
            this.$refs.deviceDragLayoutRef.getDeviceListByApi()
          }, 1000 * 60)
        }
      },

      // 保留两位小数
@@ -131,7 +170,6 @@

<style lang="less">
  .full-screen {
    width: 100%;
    height: 1080px;
    background-color: #000;
    display: flex;
@@ -143,12 +181,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%;
@@ -168,15 +209,15 @@
            padding: 1% 5%;
          }

          .content-footer-container {
            height: 25%;
          /*.content-footer-container {*/
          /*height: 25%;*/

            .content-footer {
              font-size: 0.7vw;
              padding-left: 5%;
              height: 40%;
            }
          }
          /*.content-footer {*/
          /*font-size: 0.7vw;*/
          /*padding-left: 5%;*/
          /*height: 40%;*/
          /*}*/
          /*}*/

          .chart-container {
            flex: 1;
@@ -196,95 +237,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;
          }
        }
      }
    }
  }