1、统计分析和统计图表、对比分析和利用率走势分析、利用率分段分析和报警分析页面新增筛选条件保持跟TEEP页面一致 2、全局中重要程度的筛选方式由多选改...

zhaowei

2025-03-07 3a73cd63039981d1f7cd324afea8f14f37738467

 src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue

@@ -2,20 +2,98 @@
  <div id="StatisticsLegend"
       style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
    <!-- 查询区域 -->
    <div style="width: 100%; height: 44px; background-color: #fff" class="table-page-search-wrapper">
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="5" :sm="5" :xs="5">
            <a-form-item label="名称">
              <a-input placeholder="输入设备名称查询" :readOnly="readOnly" v-model="queryParam.tierName"></a-input>
              <a-input placeholder="输入设备名称查询" readOnly v-model="queryParam.tierName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="4" :xs="4">
          <a-col :md="5" :sm="5">
            <a-form-item label="设备类型">
              <a-select
                :value="queryParams.equipmentType"
                mode="multiple"
                placeholder="请选择设备类型"
                allow-clear
                :maxTagCount="1"
                @change="selectChange($event,'equipmentType')"
              >
                <a-select-option v-for="(item,index) in equipmentTypeList" :value="item.value" :key="index">
                  {{item.label}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="7">
            <a-form-item label="驱动类型">
              <a-select
                :value="queryParams.driveType"
                mode="multiple"
                placeholder="请选择驱动类型"
                allow-clear
                :maxTagCount="1"
                @change="selectChange($event,'driveType')"
              >
                <a-select-option v-for="(item,index) in driveTypeList" :value="item.value" :key="index">
                  {{item.label}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="5" :xs="5">
            <a-form-item label="日期">
              <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD'
                             @change="dataChange" :allowClear="false"/>
                             @change="handleDateChange" :allowClear="false" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :md="2" :sm="2">
            <a
              @click="toggleSearchStatus=!toggleSearchStatus"
              @selectstart="$event.preventDefault()"
              style="display: inline-block;height: 32px;line-height: 32px"
            >
              {{ toggleSearchStatus ? '收起' : '展开' }}
              <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
            </a>
          </a-col>
        </a-row>

        <a-row :gutter="24" v-if="toggleSearchStatus">
          <a-col :md="5" :sm="5" :xs="5">
            <a-form-item label="设备级别">
              <a-select
                :value="queryParams.deviceLevel"
                mode="multiple"
                placeholder="请选择设备级别"
                allow-clear
                :maxTagCount="1"
                @change="selectChange($event,'deviceLevel')"
              >
                <a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index">
                  {{item.label}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="5" :sm="5" :xs="5">
            <a-form-item label="重要程度">
              <a-select
                v-model="queryParams.deviceImportanceLevel"
                placeholder="请选择设备重要程度"
                allow-clear
              >
                <a-select-option v-for="(item,index) in device_importance_level_list" :value="item.value" :key="index">
                  {{item.label}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :md="2" :sm="2" :xs="2">
            <a-space>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
@@ -92,16 +170,15 @@
<script>
  import moment from 'moment'
  import { putAction, getAction } from '@/api/manage'
  import $ from 'jquery'
  import * as echarts from 'echarts'
  import api from '@/api/mdc'
  import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'

  export default {
    name: 'StatisticsLegend',
    props: { equip: {} },
    data() {
      return {
        readOnly: true,
        showday: true,
        StatCharOpeningRate: 0,
        StatCharUsedRate: 0,
        StatCharUsedopeningRate: 0,
@@ -114,16 +191,23 @@
        StartupHeight: 0,
        quip: {},
        dates: [],
        equipmentTypeList: [],
        driveTypeList: [],
        device_level_list: [],
        device_importance_level_list: [],
        queryParam: {},
        queryParams: {
          equipmentType: [],
          driveType: [],
          deviceLevel: [],
          collectTime: undefined
        },
        shiftSubList: [],
        shiftList: [],
        toggleSearchStatus: false,
        url: {
          getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
          dayStatisticalRate: '/mdc/efficiencyReport/dayStatisticalRate',
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction',
          queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
        }
      }
    },
@@ -132,23 +216,71 @@
      this.queryParams.collectTime = moment().add(-1, 'd').format('YYYY-MM-DD')
      this.queryParams.dateTime = moment().add(-1, 'd').format('YYYYMMDD')
      this.initEquipmentNode()
      this.queryGroup()
      this.getDriveTypeByApi()
      this.initDictData('device_level')
      this.initDictData('device_importance_level')
    },

    methods: {
      disabledDate(current) {
        //Can not slect days before today and today
        return current && current > moment().subtract('days', 1)
      queryGroup() {
        getAction(this.url.queryEquipmentType).then(res => {
          if (res.success) {
            this.equipmentTypeList = res.result.map(item => {
              return {
                label: item.equipmentTypeName,
                value: item.equipmentTypeName
              }
            })
          } else {
            this.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        })
      },
      //把秒计算成对应的时分秒的函数
      getTime(time) {
        //转换为时分秒
        let h = Math.round(time / 60 / 60)
        h = h < 10 ? '0' + h : h
        //作为返回值返回
        // console.log(h);
        return h

      // 调用接口获取控制系统类型
      getDriveTypeByApi() {
        api.getDriveTypeApi().then((res) => {
          if (res.success) this.driveTypeList = res.result
        })
      },
      moment,

      initDictData(dictCode) {
        // //优先从缓存中读取字典配置
        if (getDictItemsFromCache(dictCode)) {
          this[dictCode + '_list'] = getDictItemsFromCache(dictCode)
          return
        }
        //根据字典Code, 初始化字典数组
        ajaxGetDictItems(dictCode, null).then((res) => {
          if (res.success) {
            this[dictCode + '_list'] = res.result
            return
          }
        })
      },

      queryStatistical(queryParams) {
        getAction(this.url.dayStatisticalRate, queryParams).then(res => {
          if (res.success) {
            this.StatCharOpeningRate = res.result.openRate
            this.StatCharUsedRate = res.result.utilizationRate
            this.UtilizationHeight = res.result.openRate
            this.StatCharUsedopeningRate = res.result.usedOpenRate
            this.StartupHeight = res.result.usedOpenRate
            this.openingLong = this.getTime(res.result.openLong)
            this.waitingLong = this.getTime(res.result.waitLong)
            this.processLong = this.getTime(res.result.processLong)
            this.closedLong = this.getTime(res.result.closeLong)
            this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong)
            this.draw()
          }
        })
      },

      draw() {
        //利用率
        //饼图
@@ -579,29 +711,18 @@
        }
        StartupLine.setOption(StartupLine_option)
      },
      queryStatistical() {
        getAction(this.url.dayStatisticalRate, this.queryParams).then(res => {
          if (res.success) {
            this.StatCharOpeningRate = res.result.openRate
            this.StatCharUsedRate = res.result.utilizationRate
            this.UtilizationHeight = res.result.openRate
            this.StatCharUsedopeningRate = res.result.usedOpenRate
            this.StartupHeight = res.result.usedOpenRate
            this.openingLong = this.getTime(res.result.openLong)
            this.waitingLong = this.getTime(res.result.waitLong)
            this.processLong = this.getTime(res.result.processLong)
            this.closedLong = this.getTime(res.result.closeLong)
            this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong)
            this.draw()
          }
        })

      selectChange(value, key) {
        this.queryParams[key] = value
      },
      dataChange(val) {

      handleDateChange(val) {
        if (val) {
          this.queryParams.dateTime = val.format('YYYYMMDD')
          this.queryParams.collectTime = val.format('YYYY-MM-DD')
        }
      },

      initEquipmentNode() {
        let _this = this
        getAction(this.url.getBaseTree).then((res) => {
@@ -623,7 +744,7 @@
                _this.$set(this.queryParams, 'parentId', res.result[0].key)
              }
            }
            this.queryStatistical()
            this.queryStatistical(this.queryParams)
          } else {
            this.$notification.warning({
              message: '消息',
@@ -635,16 +756,45 @@
          this.cardLoading = false
        })
      },

      searchReset() {
        this.queryParam = {}
        this.queryParams = {
          equipmentType: [],
          driveType: [],
          deviceLevel: [],
          collectTime: moment().add(-1, 'd').format('YYYY-MM-DD'),
          dateTime: moment().add(-1, 'd').format('YYYYMMDD')
        }
        this.initEquipmentNode()
      },

      searchQuery() {
        this.queryStatistical()
        const queryParams = Object.assign({}, this.queryParams)

        Object.keys(queryParams).forEach(item => {
          if (Array.isArray(queryParams[item])) {
            queryParams[item] = queryParams[item].join()
            // 此处为保证接口参数不多余，可省略
            if (queryParams[item].length === 0) delete queryParams[item]
          }
        })
        this.queryStatistical(queryParams)
      },

      disabledDate(current) {
        //Can not slect days before today and today
        return current && current > moment().subtract('days', 1)
      },

      //把秒计算成对应的时分秒的函数
      getTime(time) {
        //转换为时分秒
        let h = Math.round(time / 60 / 60)
        h = h < 10 ? '0' + h : h
        //作为返回值返回
        // console.log(h);
        return h
      }
    },
    watch: {