src/assets/terminal/login-bg.jpg

 src/mixins/JeecgListMixin.js

@@ -380,6 +380,7 @@
          this.loadData()
        } else {
          // this.$message.error(`${info.file.name} ${info.file.response.message}.`);
          this.loading = false
          this.$notification.error({
            message:'消息',
            description:`${info.file.name} ${info.file.response.message}.`

 src/views/dnc/base/OperatorLogin.vue

@@ -46,10 +46,6 @@

          <a-button type="primary" size="large" block :loading="loading" @click="handleLogin">登录</a-button>
        </a-form-model>
        <!--<div class="footer">-->
        <!--<a @click="handleRegister">注册账号</a>-->
        <!--<a @click="handleForget">忘记密码</a>-->
        <!--</div>-->
      </a-card>
    </div>
  </div>
@@ -192,13 +188,6 @@
          callback()
        }
      }

      // handleRegister() {
      //   this.$router.push('/register')
      // },
      // handleForget() {
      //   this.$message.info('请联系管理员重置密码')
      // }
    }
  }
</script>
@@ -210,7 +199,7 @@
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url('../../../assets/operator-login-bg.png') no-repeat center;
    url('../../../assets/terminal/login-bg.jpg') no-repeat center;
    background-size: cover;

    .login-container {

 src/views/eam/maintenance/EamSecondMaintenanceOrderList.vue

@@ -208,8 +208,14 @@

          <template v-else>
            <a @click="handleDetail(record)">详情</a>
            <a-divider type="vertical" />
            <a @click="handlePrint(record)">打印</a>
            <a-divider
              type="vertical"
              v-if="record.maintenanceStatus === 'COMPLETE'"
            />
            <a
              v-if="record.maintenanceStatus === 'COMPLETE'"
              @click="handlePrint(record)"
            >打印</a>
          </template>

        </span>

 src/views/mdc/base/ContrastiveAnalysis.vue

@@ -1,6 +1,6 @@
<template>
  <a-card :bordered="false">
    <div style="width: 100%; height: 100%;overflow: hidden">
    <div>
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
@@ -13,7 +13,8 @@
          </a-tabs>
        </a-col>
        <a-col :md="24-5" :sm="24">
          <ComparativeAnalysisMain  ref="ComparativeAnalysisMain" :nodeTree='selectEquement'  :nodePeople='selectPeople' :Type="slectTypeTree"></ComparativeAnalysisMain>
          <ComparativeAnalysisMain ref="ComparativeAnalysisMain" :nodeTree='selectEquipment' :nodePeople='selectPeople'
                                   :Type="selectTypeTree"/>
        </a-col>
      </a-row>
    </div>
@@ -24,10 +25,11 @@
  import BaseTree from '../common/BaseTree'
  import ComparativeAnalysisMain from './modules/comparativeAnalysis/ComparativeAnalysisMain'
  import DepartTree from './modules/DepartList/DepartListTree/DepartTree'
  import {mapActions} from 'vuex'
  import { mapActions } from 'vuex'

  export default {
    name: 'comparativeAnalysis',
    components:{
    components: {
      BaseTree,
      ComparativeAnalysisMain,
      DepartTree
@@ -35,15 +37,11 @@
    data() {
      return {
        activeKey: '1',
        description: '设备信息',
        selectEquementId: '',
        selectEquement: {},
        selectPeople:{},
        slectTypeTree: '',
        url: {
          equipmentStatistics: '/mdc/equipment/equipmentStatistics'
        },
        isDepartType:'',
        selectEquipmentId: '',
        selectEquipment: {},
        selectPeople: {},
        selectTypeTree: '',
        isDepartType: ''
      }
    },
    created() {
@@ -56,31 +54,26 @@
          if (res.success) {
            this.isDepartType = res.result[0].value
          } else {
            // this.$message.warn(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
              message: '消息',
              description: res.message
            })
          }
        }).finally(() =>{
        }).finally(() => {
        })
      },
      tabChange(val) {
        // console.log(val)
        this.activeKey = val
        this.slectTypeTree = val
        this.selectTypeTree = val
      },
      /*      changeSelection(val) {
              this.selectEquementId = val
              this.$refs.DeviceRepairList.pQuery(val)
            },*/
      changeSelectionNode(val) {
        this.selectEquement = val
        this.slectTypeTree = '1'
        this.selectEquipment = val
        this.selectTypeTree = '1'
      },
      changeSelectionNodedd(val) {
        this.selectPeople = val
        this.slectTypeTree = '2'
        this.selectTypeTree = '2'
      }
    }
  }

 src/views/mdc/base/EfficiencyPunchReport.vue

@@ -5,23 +5,23 @@
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <a-col :xl="4" :lg="5" :md="6" :sm="24">
            <a-form-item label="记录时间">
              <a-date-picker format="YYYY-MM-DD" :allowClear="false" v-model="queryParam.theDate"
                             @change="dateParamChange"></a-date-picker>
              <a-date-picker value-format="YYYYMMDD" :allowClear="false" v-model="queryParam.theDate"
                             style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <a-col :xl="4" :lg="5" :md="6" :sm="24">
            <a-form-item label="班次">
              <j-dict-select-tag v-model="queryParam.shiftSchedule" dictCode="shift_schedule"
                                 placeholder="请选择班次"></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-space>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="info" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
              <a-button type="info" @click="searchReset" icon="reload">重置</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
@@ -30,7 +30,6 @@
    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
      <a-button type="primary" icon="download" @click="handleExportXls('设备打卡率报表')">导出</a-button>

    </div>

    <!-- table区域-begin -->
@@ -59,158 +58,107 @@
      </a-table>
    </div>
    <!-- table区域-end -->
    <efficiency-punch-report-modal ref="modalForm" @ok="modalFormOk"></efficiency-punch-report-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
  import moment from 'moment'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import EfficiencyPunchReportModal from '@views/mdc/base/modules/EfficiencyPunchReport/EfficiencyPunchReportModal.vue'

export default {
  name: 'EfficiencyPunchReport',
  mixins: [JeecgListMixin],
  components: {
    EfficiencyPunchReportModal
  },
  data() {
    return {
      queryParam: {
        theDate: this.formatDate(new Date(new Date().setDate(new Date().getDate() - 1))), // é»˜è®¤è®¾ç½®ä¸ºæ˜¨å¤©
        shiftSchedule: ''
      },

      dataSource: [], // ç¡®ä¿åˆå§‹åŒ–为空数组
      description: '设备打卡率',
      // è¡¨å¤´
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
  export default {
    name: 'EfficiencyPunchReport',
    mixins: [JeecgListMixin],
    data() {
      return {
        queryParam: {
          theDate: moment().add(-1, 'days').format('YYYYMMDD') // é»˜è®¤è®¾ç½®ä¸ºæ˜¨å¤©
        },

        {
          title: '记录时间',
          align: 'center',
          dataIndex: 'theDate'
        },
        {
          title: '班次',
          align: 'center',
          dataIndex: 'shiftSchedule_dictText'
        },

        {
          title: '早班上班打卡设备数量',
          align: 'center',
          dataIndex: 'mornShiftInNum'
        },
        {
          title: '早下班打卡设备数量',
          align: 'center',
          dataIndex: 'mornShiftOutNum'
        },
        {
          title: '晚班上班打卡设备数量',
          align: 'center',
          dataIndex: 'evenShiftInNum'
        },
        {
          title: '晚班下班打卡设备数量',
          align: 'center',
          dataIndex: 'evenShiftOutNum'
        },
        {
          title: '设备总数',
          align: 'center',
          dataIndex: 'deviceCountNum'
        },
        {
          title: '早班上班打卡率(%)',
          align: 'center',
          dataIndex: 'mornShiftInRate'
        },
        {
          title: '早班下班打卡率(%)',
          align: 'center',
          dataIndex: 'mornShiftOutRate'

        },
        {
          title: '晚班上班打卡率(%)',
          align: 'center',
          dataIndex: 'evenShiftInRate',
          customRender: (text) => {
            if (text !== null && text !== undefined) {
              return parseFloat(text).toFixed(2);
        description: '设备打卡率',
        // è¡¨å¤´
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
            return text;
          },
          {
            title: '记录时间',
            align: 'center',
            dataIndex: 'theDate'
          },
          {
            title: '班次',
            align: 'center',
            dataIndex: 'shiftSchedule_dictText'
          },
          {
            title: '早班上班打卡设备数量',
            align: 'center',
            dataIndex: 'mornShiftInNum'
          },
          {
            title: '早下班打卡设备数量',
            align: 'center',
            dataIndex: 'mornShiftOutNum'
          },
          {
            title: '晚班上班打卡设备数量',
            align: 'center',
            dataIndex: 'evenShiftInNum'
          },
          {
            title: '晚班下班打卡设备数量',
            align: 'center',
            dataIndex: 'evenShiftOutNum'
          },
          {
            title: '设备总数',
            align: 'center',
            dataIndex: 'deviceCountNum'
          },
          {
            title: '早班上班打卡率(%)',
            align: 'center',
            dataIndex: 'mornShiftInRate'
          },
          {
            title: '早班下班打卡率(%)',
            align: 'center',
            dataIndex: 'mornShiftOutRate'
          },
          {
            title: '晚班上班打卡率(%)',
            align: 'center',
            dataIndex: 'evenShiftInRate',
            customRender: (text) => {
              if (text !== null && text !== undefined) {
                return parseFloat(text).toFixed(2)
              }
              return text
            }
          },
          {
            title: '晚班下班打卡率(%)',
            align: 'center',
            dataIndex: 'evenShiftOutRate'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        },
        {
          title: '晚班下班打卡率(%)',
          align: 'center',
          dataIndex: 'evenShiftOutRate'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/mdcEquipmentPunchRate/queryPageList',
        exportXlsUrl: '/mdcEquipmentPunchRate/exportXls'
      }
    }
  },
  methods: {
    searchQuery() {
      if (this.queryParam.theDate) {
        // ç¡®ä¿ queryParam.recordDate æ˜¯ä¸€ä¸ªæœ‰æ•ˆçš„ Date å¯¹è±¡
        const date = new Date(this.queryParam.recordDate)
        if (!isNaN(date.getTime())) { // æ£€æŸ¥æ˜¯å¦ä¸ºæœ‰æ•ˆæ—¥æœŸ
          const formattedDate = this.formatDate(date)
          this.queryParam.theDate = formattedDate
          console.log('Formatted theDate:', this.queryParam.theDate) // éªŒè¯æ ¼å¼
        } else {
          console.error('Invalid date format')
        ],
        url: {
          list: '/mdcEquipmentPunchRate/queryPageList',
          exportXlsUrl: '/mdcEquipmentPunchRate/exportXls'
        }
      }

      this.loadData()
    },

    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}${month}${day}`
    },

    dateParamChange(value) {
      // value æ˜¯ä¸€ä¸ªæ—¶åˆ»å¯¹è±¡ï¼ˆmoment object），需要转换为 Date å¯¹è±¡
      if (value) {
        const date = value.toDate() // è½¬æ¢ä¸º Date å¯¹è±¡
        const formattedDate = this.formatDate(date)
        this.queryParam.theDate = formattedDate
      } else {
        this.queryParam.theDate = null
      }
    }

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
</script>

 src/views/mdc/base/equipmentAvailCompare.vue

@@ -38,14 +38,9 @@
    data() {
      return {
        activeKey: '1',
        description: '设备信息',
        selectEquipmentId: '',
        selectEquipment: {},
        selectPeople: {},
        selectTypeTree: '',
        url: {
          equipmentStatistics: '/mdc/equipment/equipmentStatistics'
        },
        isDepartType: ''
      }
    },
@@ -64,7 +59,6 @@
              description: res.message
            })
          }
        }).finally(() => {
        })
      },
      tabChange(val) {

 src/views/mdc/base/equipmentDayAvail.vue

@@ -1,22 +1,20 @@
<template>
  <a-card :bordered="false">
    <div style="width: 100%; height: 100%;overflow: hidden">
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
            <a-tab-pane v-if="isDepartType == 0" key="2" tab="部门层级">
              <depart-tree @getCurrSelectedDD="changeSelectionNodedd"></depart-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="24-5" :sm="24">
          <equipment-day-avail-main  ref="equipmentDayAvailMain" :nodeTree='selectEquipment'  :nodePeople='selectPeople' :Type="selectTypeTree"></equipment-day-avail-main>
        </a-col>
      </a-row>
    </div>
    <a-row type="flex" :gutter="16">
      <a-col :md="5">
        <a-tabs :activeKey="activeKey" @change="tabChange">
          <a-tab-pane key="1" tab="车间层级" force-render>
            <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
          </a-tab-pane>
          <a-tab-pane v-if="isDepartType == 0" key="2" tab="部门层级">
            <depart-tree @getCurrSelectedDD="changeSelectionNodedd"></depart-tree>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="24-5" :sm="24">
        <equipment-day-avail-main  ref="equipmentDayAvailMain" :nodeTree='selectEquipment'  :nodePeople='selectPeople' :Type="selectTypeTree"></equipment-day-avail-main>
      </a-col>
    </a-row>
  </a-card>
</template>

@@ -36,14 +34,9 @@
    data() {
      return {
        activeKey: '1',
        description: '设备信息',
        selectEquipmentId: '',
        selectEquipment: {},
        selectPeople:{},
        selectTypeTree: '',
        url: {
          equipmentStatistics: '/mdc/equipment/equipmentStatistics'
        },
        isDepartType:'',
      }
    },
@@ -57,17 +50,14 @@
          if (res.success) {
            this.isDepartType = res.result[0].value
          } else {
            // this.$message.warn(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        }).finally(() =>{
        })
      },
      tabChange(val) {
        // console.log(val)
        this.activeKey = val
        this.selectTypeTree = val
      },
@@ -81,8 +71,4 @@
      }
    }
  }
</script>

<style scoped>

</style>
</script>

 src/views/mdc/base/modules/EfficiencyPunchReport/EfficiencyPunchReportModal.vue

ÎļþÒÑɾ³ý

 src/views/mdc/base/modules/EquipmentAvailCompare/EquipmentAvailCompareMain.vue

@@ -1,49 +1,44 @@
<template>
  <a-spin :spinning="loading">
    <div :bordered="false" class="device_list">
      <div class="com_box">
        <!-- æŸ¥è¯¢åŒºåŸŸ -->
        <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="4" :sm="4">
                <a-form-item label="设备编号">
                  <a-input placeholder="输入设备编号查询" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="4">
                <a-form-item label="设备名称">
                  <a-input placeholder="输入设备名称查询" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="5" :xs="5">
                <a-form-item label="时间">
                  <a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD" :allow-clear="false"/>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="6" :xs="6">
                <a-form-item label="时间段">
                  <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart" :allow-clear="false"/>
                  è‡³
                  <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd" :allow-clear="false"/>
                </a-form-item>
              </a-col>
              <a-col :md="2" :sm="3" :xs="3">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- table区域-begin -->
        <div id="DeviceList">
          <div style="padding: 5px;width: 100%;height: 100%">
            <div style="width: 100%;height: 100%" id="dayAvailBar"></div>
          </div>
        </div>
        <!-- table区域-end -->
      </div>
  <div class="device_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="4" :sm="4">
            <a-form-item label="设备编号">
              <a-input placeholder="输入设备编号查询" readOnly v-model="queryParams.equipmentId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="5">
            <a-form-item label="设备名称">
              <a-input placeholder="输入设备名称查询" readOnly v-model="queryParams.equipmentName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6" :xs="6">
            <a-form-item label="时间">
              <a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD" :allow-clear="false"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6" :xs="6">
            <a-form-item label="时间段">
              <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart"
                             :allow-clear="false"/>
              è‡³
              <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd"
                             :allow-clear="false"/>
            </a-form-item>
          </a-col>
          <a-col :md="2" :sm="3" :xs="3">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-spin>

    <a-spin :spinning="spinning">
      <div style="width: 100%;height: 100%" id="dayAvailBar"></div>
    </a-spin>
  </div>
</template>

<script>
@@ -51,77 +46,65 @@
  import { getAction } from '@/api/manage'

  export default {
    name: 'equipmentAvailCompareMain',
    name: 'EquipmentAvailCompareMain',
    props: { nodeTree: '', Type: '', nodePeople: '' },
    data() {
      return {
        activeKey: '1',
        typeTree: '',
        typeParent: 1,
        typeEquipment: 1,
        spaceTime: [],
        usingRates: [],
        dates: [],
        readOnly: true,
        queryParam: {},
        queryParams: {},
        queryParamEquip: {},
        queryParamPeople: {},
        url: {
          dayUtilizationRateContrast: '/mdc/efficiencyReport/dayUtilizationRateContrast',
          getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid',
          getEquipmentByDepPid: '/mdc/mdcEquipment/getEquipmentByDepPid'
        },
        AnalysisList: {},
        loading: false
        spinning: false
      }
    },
    watch: {
      Type(valmath) {
        this.dataList = []
        this.queryParams.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
      nodeTree(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId) {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = ''
            this.queryParams.equipmentId = val.equipmentId
            this.queryParams.equipmentName = val.equipmentName
            this.queryParamEquip.equipmentId = val.equipmentId
            this.searchQuery()
          } else {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = val.key
            this.queryParams.equipmentId = ''
            this.initEquipment(val.key)
          }

        }
      },
      nodePeople(val) {
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId) {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = ''
            this.queryParams.equipmentId = val.equipmentId
            this.queryParamEquip.equipmentId = val.equipmentId
            this.searchQuery()
          } else {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = val.key
            this.queryParams.equipmentId = ''
            this.initEquipmentDep(val.key)
          }

        }
      }
    },
    methods: {
      drawTu() {
        let dayAvailBar = this.$echarts.init(document.getElementById('dayAvailBar'), 'macarons')
        //dayAvailLine = echarts.init(document.getElementById('dayAvailLine'));
        let dayAvailBarOption = {
          title: {
            text: '设备日利用率图',
@@ -186,37 +169,25 @@
      moment,
      onChangeStart(time, timeString) {
        this.queryParam.startTime = timeString
        // console.log(time, timeString);
      },
      onChangeEnd(time, timeString) {
        this.queryParam.endTime = timeString
        // console.log(time, timeString);
      },
      disabledDate(current) {
        //Can not slect days before today and today
        return current && current > moment().subtract('days', 1)
      },
      dataChange(val) {
        if (val) this.queryParam.dateTime = val.format('YYYYMMDD')
      },
      handleChange(value) {
        this.queryParam.timeType = value
        // console.log(this.queryParam.timeType)
      },
      tabChange(val) {
        this.activeKey = val
      },
      dateParamChange(v1, v2) {
        // console.log(v1,v2)
        this.queryParam.startDate = v2[0]
        this.queryParam.endDate = v2[1]
        // console.log(v2[0],v2[1])
      },
      loadAnalysis() {
        this.loading = true
        this.spaceTime = []
        this.usingRates = []
        this.spinning = true
        getAction(this.url.dayUtilizationRateContrast, this.queryParam).then(res => {
          if (res.success) {
            this.spaceTime.push(res.result.dataList)
            this.spaceTime = res.result.dateList
            for (let i = 0; i < res.result.dayRateDto.length; i++) {
              this.usingRates.push(res.result.dayRateDto[i].utilizationRate)
            }
@@ -225,7 +196,7 @@
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
          this.spinning = false
        })
      },
      numFilter(value) {
@@ -236,118 +207,12 @@
        }
      },
      searchQuery() {
        this.loading = true
        this.spaceTime = []
        this.usingRates = []
        if (this.queryParams.typeTree == '1') {
          this.queryParams.parentId = this.queryParamEquip.parentId
          // this.queryParams.equipmentId =  this.queryParamEquip.equipmentId

        } else {
          this.queryParams.parentId = this.queryParamEquip.parentId
          // this.queryParams.equipmentId = ""
        }
        this.AnalysisList = []
        this.queryParams.parentId = this.queryParamEquip.parentId
        //获取查询条件
        this.queryParam.parentId = this.queryParams.parentId
        this.queryParam.equipmentId = this.queryParams.equipmentId
        this.queryParam.typeTree = this.queryParams.typeTree
        getAction(this.url.dayUtilizationRateContrast, this.queryParam).then((res) => {
          if (res.success) {
            this.spaceTime = res.result.dateList
            for (let i = 0; i < res.result.dayRateDto.length; i++) {
              // res.result[i].useRateDayShift = this.numFilter(res.result[i].useRateDayShift)
              this.usingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate))
            }
            this.drawTu()
          } else {
            // this.$message.warning(res.message)
            this.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        }).finally(() => {
          this.loading = false
        })
      },
      searchReset() {
        this.loading = true
        this.spaceTime = []
        this.usingRates = []
        if (this.queryParams.typeTree == '1') {
          this.typeTree = this.queryParams.typeTree
          this.typeParent = this.queryParams.parentId
          this.typeEquipment = this.queryParams.equipmentId
          this.queryParams = {}
          this.queryParam = {}
          this.queryParams.typeTree = this.typeTree
          this.queryParams.parentId = this.typeParent
          if (this.queryParams.parentId != '') {
            this.queryParams.equipmentId = ''
            this.initEquipment()
          } else {
            if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) {
              this.queryParams.equipmentId = this.typeEquipment
            } else {
              this.queryParams.equipmentId = this.queryParamEquip.equipmentId
            }
          }
          getAction(this.url.dayUtilizationRateContrast, this.queryParams).then((res) => {
            if (res.success) {
              this.spaceTime = res.result.dateList
              for (let i = 0; i < res.result.dayRateDto.length; i++) {
                this.usingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate))
              }
              this.drawTu()
            } else {
              // this.$message.warning(res.message)
              this.$notification.warning({
                message: '消息',
                description: res.message
              })
            }
          }).finally(() => {
            this.loading = false
          })
        } else {
          this.typeTree = this.queryParams.typeTree
          this.typeParent = this.queryParams.parentId
          this.typeEquipment = this.queryParams.equipmentId
          this.queryParams = {}
          this.queryParam = {}
          this.dates = []
          this.queryParams.typeTree = this.typeTree
          this.queryParams.parentId = this.typeParent
          if (this.queryParams.parentId != '') {
            this.queryParams.equipmentId = ''
            this.initEquipment()
          } else {
            if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) {
              this.queryParams.equipmentId = this.typeEquipment
            } else {
              this.queryParams.equipmentId = this.queryParamEquip.equipmentId
            }
          }
          getAction(this.url.dayUtilizationRateContrast, this.queryParams).then((res) => {
            if (res.success) {
              this.spaceTime = res.result.dateList
              for (let i = 0; i < res.result.dayRateDto.length; i++) {
                this.usingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate))
              }
              this.drawTu()
            } else {
              // this.$message.warning(res.message)
              this.$notification.warning({
                message: '消息',
                description: res.message
              })
            }
          }).finally(() => {
            this.loading = false
          })
        }

        this.loadAnalysis()
      },
      initEquipment(id) {
        let _this = this
@@ -361,16 +226,13 @@
              _this.searchQuery()
            } else {
              this.queryParams = {}
              // this.queryList()
              this.equipment = {}
              // _this.$message.warning('请联系管理员，开放设备权限！')
              _this.$notification.warning({
                message: '消息',
                description: '请联系管理员，开放设备权限！'
              })
            }
          } else {
            // this.$message.warning(res.message)
            _this.$notification.warning({
              message: '消息',
              description: res.message
@@ -390,9 +252,7 @@
              _this.searchQuery()
            } else {
              this.queryParams = {}
              // this.queryList()
              this.equipment = {}
              // _this.$message.warning('请联系管理员，开放设备权限！')
              _this.$notification.warning({
                message: '消息',
                description: '请联系管理员，开放设备权限！'
@@ -415,67 +275,52 @@
      this.queryParam.startTime = '00:00'
      this.queryParam.endTime = '08:00'
      this.queryParams.typeTree = '1'

    },
    mounted() {
      this.initEquipment()
    }
    },
  }
</script>

<style lang="less" scoped>
  /*@import '~@assets/less/common.less';*/
  .device_list {
    display: flex;
    flex-direction: column;

    /deep/ .ant-spin-nested-loading {
      flex: 1;

      .ant-spin-container {
        height: 100%;
      }
    }
  }

  @media screen and (min-width: 1920px) {
    .device_list {
      height: 811px !important;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .device_list {
      height: 811px !important;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .device_list {
      height: 663px !important;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .device_list {
      height: 564px !important;
      overflow: auto;
    }
  }

  @media screen and (max-width: 1280px) {
    .device_list {
      height: 564px !important;
      overflow: auto;
    }
  }

  /deep/ .ant-card-body {
    height: 100% !important;
  }

  .device_list .com_box {
    display: flex !important;
    height: 100% !important;
    flex-direction: column !important;
  }

  .device_list .table-page-search-wrapper {
    height: 6% !important;
  }

  .device_list #DeviceList {
    height: 90% !important;
  }
</style>

 src/views/mdc/base/modules/EquipmentDayAvail/EquipmentDayAvailMain.vue

@@ -1,63 +1,57 @@
<template>
  <a-spin :spinning="loading">
    <div :bordered="false" class="device_list">
      <div class="com_box">
        <!-- æŸ¥è¯¢åŒºåŸŸ -->
        <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="4" :sm="4">
                <a-form-item label="设备编号">
                  <a-input placeholder="输入设备编号查询" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="4">
                <a-form-item label="设备名称">
                  <a-input placeholder="输入设备名称查询" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="4" :xs="4">
                <a-form-item label="日期">
                  <a-date-picker v-model="queryParam.dateTime" :disabledDate="disabledDate" format='YYYYMMDD' :allow-clear="false"
                                 @change="dataChange"/>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="4" :xs="4">
                <a-form-item label="间隔">
                  <a-select default-value="2" style="width: 140px" v-model="queryParam.timeType">
                    <a-select-option :value="2">
                      2
                    </a-select-option>
                    <a-select-option :value="3">
                      3
                    </a-select-option>
                    <a-select-option :value="4">
                      4
                    </a-select-option>
                    <a-select-option :value="6">
                      6
                    </a-select-option>
                  </a-select>
                  å°æ—¶
                </a-form-item>
              </a-col>
              <a-col :md="3" :sm="3" :xs="3">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- table区域-begin -->
        <div id="DeviceList">

          <div style="padding: 5px;width: 100%;height: 100%">
            <div style="width: 100%;height: 100%" id="dayAvailBar"></div>
          </div>
        </div>
        <!-- table区域-end -->
      </div>
  <div class="device_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style=" background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="4" :sm="4">
            <a-form-item label="设备编号">
              <a-input placeholder="输入设备编号查询" readOnly v-model="queryParams.equipmentId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="5">
            <a-form-item label="设备名称">
              <a-input placeholder="输入设备名称查询" readOnly v-model="queryParams.equipmentName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="4" :xs="4">
            <a-form-item label="日期">
              <a-date-picker v-model="queryParam.dateTime" :disabledDate="disabledDate" :allow-clear="false"
                             value-format="YYYYMMDD"/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="4" :xs="4">
            <a-form-item label="间隔">
              <a-select default-value="2" v-model="queryParam.timeType">
                <a-select-option :value="2">
                  2
                </a-select-option>
                <a-select-option :value="3">
                  3
                </a-select-option>
                <a-select-option :value="4">
                  4
                </a-select-option>
                <a-select-option :value="6">
                  6
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="1" :sm="1" :xs="1">
            <a-form-item label="">小时</a-form-item>
          </a-col>
          <a-col :md="3" :sm="3" :xs="3">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-spin>

    <a-spin :spinning="spinning">
      <div style="width: 100%;height: 100%" id="dayAvailBar"></div>
    </a-spin>
  </div>
</template>

<script>
@@ -65,84 +59,62 @@
  import { getAction } from '@/api/manage'

  export default {
    name: 'equipmentDayAvailMain',
    components: {
    },
    name: 'EquipmentDayAvailMain',
    props: { nodeTree: '', Type: '', nodePeople: '' },
    data() {
      return {
        activeKey: '1',
        typeTree: '',
        typeParent: 1,
        typeEquipment: 1,
        spaceTime: [],
        useingRates: [],
        dates: [],
        xianshi: '',
        readOnly: true,
        usingRates: [],
        queryParam: {
          dateTime: undefined,
          timeType: '2'
        },
        queryParams: {},
        queryParamEquip: {},
        queryParamPeople: {},
        dataStartsoucre: [],
        url: {
          comparativeAnalysis: '/mdc/efficiencyReport/comparativeAnalysis',
          dayUtilizationRate: '/mdc/efficiencyReport/dayUtilizationRate',
          getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid',
          getEquipmentByDepPid: '/mdc/mdcEquipment/getEquipmentByDepPid'
        },
        AnalysisList: {},
        loading: false
        spinning: false
      }
    },
    watch: {
      Type(valmath) {
        this.dataList = []
        this.queryParams.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
      nodeTree(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId) {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = ''
            this.queryParams.equipmentId = val.equipmentId
            this.queryParams.equipmentName = val.equipmentName
            console.log('XXXval=', val)
            this.queryParamEquip.equipmentId = val.equipmentId
            this.searchQuery()
          } else {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = val.key
            this.queryParams.equipmentId = ''
            this.initEquipment(val.key)
          }

        }
      },
      nodePeople(val) {
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId) {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = ''
            this.queryParams.equipmentId = val.equipmentId
            this.queryParamEquip.equipmentId = val.equipmentId
            this.searchQuery()
          } else {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = val.key
            this.queryParams.equipmentId = ''
            this.initEquipmentDep(val.key)
          }

        }
      }
    },
    methods: {
      moment,
      drawTu() {
        let dayAvailBar = this.$echarts.init(document.getElementById('dayAvailBar'), 'macarons')
        let dayAvailBarOption = {
@@ -194,7 +166,7 @@
                  color: '#4169E1'
                }
              },
              data: this.useingRates,
              data: this.usingRates,
              markPoint: {
                data: [
                  { type: 'max', name: '最大值', symbolSize: 70 },
@@ -205,34 +177,22 @@
          ]
        }
        dayAvailBar.setOption(dayAvailBarOption)

        window.addEventListener('resize', () => dayAvailBar.resize())
      },
      disabledDate(current) {
        //Can not slect days before today and today
        return current && current > moment().subtract('days', 1)
      },
      dataChange(val) {
        this.queryParam.dateTime = val.format('YYYYMMDD')
      },
      handleChange(value) {
        this.queryParam.timeType = value
        // console.log(this.queryParam.timeType)
      },
      tabChange(val) {
        this.activeKey = val
      },
      dateParamChange(v1, v2) {
        // console.log(v1,v2)
        this.queryParam.startTime = v2[0]
        this.queryParam.endTime = v2[1]
        // console.log(v2[0],v2[1])
      },
      loadAnalysis() {
        this.loading = true
        this.spaceTime = []
        this.usingRates = []
        this.spinning = true
        getAction(this.url.dayUtilizationRate, this.queryParam).then(res => {
          if (res.success) {
            this.spaceTime.push(res.result.dataList)
            this.spaceTime = res.result.dateList
            for (var i = 0; i < res.result.dayRateDto.length; i++) {
              this.useingRates.push(res.result.dayRateDto[i].utilizationRate)
              this.usingRates.push(res.result.dayRateDto[i].utilizationRate)
            }
            this.drawTu()
          } else {
@@ -242,7 +202,7 @@
            })
          }
        }).finally(() => {
          this.loading = false
          this.spinning = false
        })
      },
      numFilter(value) {
@@ -253,44 +213,16 @@
        }
      },
      searchQuery() {
        if (this.queryParam.dateTime) {
          this.loading = true
          this.spaceTime = []
          this.useingRates = []
          if (this.queryParams.typeTree == '1') {
            this.queryParams.parentId = this.queryParamEquip.parentId
            // this.queryParams.equipmentId =  this.queryParamEquip.equipmentId
          } else {
            this.queryParams.parentId = this.queryParamEquip.parentId
            // this.queryParams.equipmentId = ""
          }
          this.AnalysisList = []
          //获取查询条件
          this.queryParam.parentId = this.queryParams.parentId
          this.queryParam.equipmentId = this.queryParams.equipmentId
          this.queryParam.typeTree = this.queryParams.typeTree
          getAction(this.url.dayUtilizationRate, this.queryParam).then((res) => {
            if (res.success) {
              this.spaceTime = res.result.dateList
              for (var i = 0; i < res.result.dayRateDto.length; i++) {
                this.useingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate))
              }
              this.drawTu()
            } else {
              this.$notification.warning({
                message: '消息',
                description: res.message
              })
            }
          }).finally(() => {
            this.loading = false
          })
        if (this.queryParams.typeTree == '1') {
          this.queryParams.parentId = this.queryParamEquip.parentId
        } else {
          this.$notification.warning({
            message: '消息',
            description: '请选择时间'
          })
          this.queryParams.parentId = this.queryParamEquip.parentId
        }
        //获取查询条件
        this.queryParam.parentId = this.queryParams.parentId
        this.queryParam.equipmentId = this.queryParams.equipmentId
        this.queryParam.typeTree = this.queryParams.typeTree
        this.loadAnalysis()
      },
      initEquipment(id) {
        let _this = this
@@ -347,75 +279,54 @@
      }
    },
    created() {
      let collectTime = moment(moment().add(-1, 'd'), 'YYYY-MM-DD')
      this.queryParams.collectTime = collectTime
      this.queryParam.dateTime = this.queryParams.collectTime.format('YYYYMMDD')
      this.queryParam.dateTime = moment().add(-1, 'd').format('YYYYMMDD')
      this.queryParams.typeTree = '1'
      this.initEquipment()

    }
  }
</script>

<style lang="less" scoped>
  /*@import '~@assets/less/common.less';*/
  .device_list {
    display: flex;
    flex-direction: column;

    /deep/ .ant-spin-nested-loading {
      flex: 1;

      .ant-spin-container {
        height: 100%;
      }
    }
  }

  @media screen and (min-width: 1920px) {
    .device_list {
      height: 811px !important;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .device_list {
      height: 811px !important;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .device_list {
      height: 663px !important;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .device_list {
      height: 564px !important;
      overflow: auto;
    }
  }

  @media screen and (max-width: 1280px) {
    .device_list {
      height: 564px !important;
      overflow: auto;
    }
  }

  /*.device_list{*/
  /*display: flex;*/
  /*}*/
  /*.device_list .table-page-search-wrapper{*/
  /**/
  /*}*/
  /deep/ .ant-card-body {
    height: 100% !important;
  }

  .device_list .com_box {
    display: flex !important;
    height: 100% !important;
    flex-direction: column !important;
  }

  .device_list .table-page-search-wrapper {
    height: 6% !important;
  }

  .device_list #DeviceList {
    height: 90% !important;
  }
</style>

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

@@ -27,7 +27,7 @@
    </div>

    <a-spin :spinning="spinning">
      <!--开机率-->
      <!--利用率-->
      <div class="PowerOnRate  Line-box">
        <div class="title">
          <div class="circle"></div>
@@ -38,7 +38,7 @@
          <div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
        </div>
      </div>
      <!--利用率和开动率-->
      <!--开机率和开动率-->
      <div class="UtilizationStartup">
        <div class="Utilization Line-box">
          <div class="title">
@@ -634,13 +634,13 @@
  }

  #StatisticsLegend .PowerOnRate {
    flex: 1;
    height: 50%;
    margin-bottom: 15px;
    background-color: #fff;
  }

  #StatisticsLegend .UtilizationStartup {
    flex: 1;
    height: 50%;
    display: flex;
  }

@@ -690,7 +690,7 @@
  }

  .PowerOnRate-box .PowerOnRate-right {
    flex: 1;
    width: 75%;
  }

  .Utilization-box {

 src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue

@@ -1,51 +1,52 @@
<template>
    <div class="comparative_Bar" style="width: 100%;height: 900px;display: flex;flex-direction: column;overflow: scroll">
      <div id="compAnalBar1" style="flex: 1;"></div>
      <div id="compAnalBar2" style="flex: 1;"></div>
    </div>
  <div style="height: 100%;overflow: auto">
    <div id="compAnalBar1" style="height: 400px"></div>
    <div id="compAnalBar2" style="height: 400px"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    name: 'comparativeAnalysisBar',
    props:{
      dataList:''
    props: {
      dataList: ''

    },
    data(){
      return{
        OpenCloseList:[],
        openRate:[],
        utilizationRate:[],
        openLong:[],
        closeLong:[],
        equipmentList:[]
    data() {
      return {
        OpenCloseList: [],
        openRate: [],
        utilizationRate: [],
        openLong: [],
        closeLong: [],
        equipmentList: []
      }
    },
    created(){
    created() {

    },
    watch:{
      dataList(val){
    watch: {
      dataList(val) {
        this.OpenCloseList = val
        this.drawTu()
      },
      }
    },
    mounted() {
      this.drawTu()
    },
    methods:{
      drawTu(){
       let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons');
       let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons');
       let compAnalBarOption1 = {
    methods: {
      drawTu() {
        let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons')
        let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons')
        let compAnalBarOption1 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: "shadow",
              type: 'shadow',
              textStyle: {
                color: "#fff"
                color: '#fff'
              }

            }
@@ -60,48 +61,42 @@
            data: ['开机率', '利用率']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true,name:'设备运行效率对比分析图'}
            show: true,
            feature: {
              mark: { show: true },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true, name: '设备运行效率对比分析图' }
            }
          },
          calculable: true,
          grid: {
            borderWidth: 0,
            top: 110,
            bottom: 95,
            bottom: 110,
            textStyle: {
              color: "#fff"
              color: '#fff'
            }
          },
          xAxis: [
            {
              type: 'category',
              splitLine: {
                "show": false
                'show': false
              },
              axisTick: {
                "show": false
                'show': false
              },
              splitArea: {
                show: false
              },
              boundaryGap : true,
              axisLabel : {
                interval : 0,
                rotate : 0,
              boundaryGap: true,
              axisLabel: {
                interval: 0,
                rotate: 45,
                show: true,
                wigth:20,
                splitNumber: 8,
                textStyle: {
                  fontFamily: "微软雅黑",
                  fontSize: 12
                }
              },
              data : [0]
              data: [0]
            }
          ],
          yAxis: [
@@ -137,14 +132,14 @@
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: "#d3dee5"
              color: '#d3dee5'
            },
            textStyle: {
              color: "#fff"
              color: '#fff'
            },
            borderColor: "#90979c"
            borderColor: '#90979c'
          }, {
            type: "inside",
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
@@ -160,274 +155,80 @@
                normal: {
                  color: function(params) {
                    let colorList = [
                      ["#6496e9","#6bded3"],
                      // ["#849db8","#b4b8cc"],
                      // ["#4fe1c5","#4ecee1"],
                      // // ["#9978fa","#88a1fa"],
                      // ["#ffbb65","#fdc68b"],
                    ];
                    // return colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex];
                    return new echarts.graphic.LinearGradient(0,0,0,1,[{
                      offset:0,
                      color:'#6496e9'
                      ['#6496e9', '#6bded3']
                    ]
                    let colorItem = colorList[params.dataIndex]
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#6496e9'
                    },
                      {
                        offset:1,
                        color:"#6bded3"
                      }],false)
                        offset: 1,
                        color: '#6bded3'
                      }], false)
                  },
                  barBorderRadius: [5, 5, 0, 0],
                  barBorderRadius: [5, 5, 0, 0]
                }
              },
              data: [0],
              // barCategoryGap: '20%',
              // barGap : '-10%',
              markPoint : {
                data : [
                  {type : 'max', name: '最大值',symbolSize:70},
                  {type : 'min', name: '最小值',symbolSize:70}
              markPoint: {
                data: [
                  { type: 'max', name: '最大值', symbolSize: 70 },
                  { type: 'min', name: '最小值', symbolSize: 70 }
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            },
            {
              name: '利用率',
              type: 'bar',
              //barWidth: 30,
              barWidth: 25,
              // barCategoryGap: '20%',
              // barGap : '-10%',
              itemStyle: {
                normal: {
                  color: function(params) {
                    let colorList = [
                      // ["#6496e9","#6bded3"],
                      // ["#849db8","#b4b8cc"],
                      ["#4fe1c5","#4ecee1"],
                      // ["#9978fa","#88a1fa"],
                      // ["#ffbb65","#fdc68b"],
                    ];
                      ['#4fe1c5', '#4ecee1']
                    ]
                    // return colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex];
                    return new echarts.graphic.LinearGradient(0,0,0,1,[{
                      offset:0,
                      color:"#4fe1c5"
                    let colorItem = colorList[params.dataIndex]
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#4fe1c5'
                    },
                      {
                        offset:1,
                        color:"#4ecee1"
                      }],false)
                        offset: 1,
                        color: '#4ecee1'
                      }], false)
                  },
                  barBorderRadius: [5, 5, 0, 0],
                  barBorderRadius: [5, 5, 0, 0]
                }
              },
              data: [0],
              markPoint : {
                data : [
                  {type : 'max', name: '最大值',symbolSize:70},
                  {type : 'min', name: '最小值',symbolSize:70}
              markPoint: {
                data: [
                  { type: 'max', name: '最大值', symbolSize: 70 },
                  { type: 'min', name: '最小值', symbolSize: 70 }
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            }
          ]
        };
       // let compAnalBarOption2 = {
       //    tooltip: {
       //      trigger: 'axis',
       //      axisPointer: {
       //        type: "shadow",
       //        textStyle: {
       //          color: "#fff"
       //        }
       //
       //      }
       //    },
       //    legend: {
       //      x: '4%',
       //      top: '11%',
       //      textStyle: {
       //        color: '#90979c'
       //      },
       //      data: ['开机时间', '关机时间'],
       //      color:['#6496e9','#b4b8cc']
       //    },
       //    toolbox: {
       //      show : true,
       //      feature : {
       //        mark : {show: true},
       //        magicType : {show: true, type: ['line', 'bar']},
       //        restore : {show: true},
       //        saveAsImage : {show: true,name:'设备运行时间对比分析图'}
       //      }
       //    },
       //    calculable: true,
       //    grid: {
       //      borderWidth: 0,
       //      top: 110,
       //      bottom: 95,
       //      textStyle: {
       //        color: "#fff"
       //      }
       //    },
       //    xAxis: [
       //      {
       //        type: 'category',
       //        splitLine: {
       //          "show": false
       //        },
       //        axisTick: {
       //          "show": false
       //        },
       //        splitArea: {
       //          show: false
       //        },
       //        boundaryGap : true,
       //        axisLabel : {
       //          interval : 0,
       //          rotate : 0,
       //          show: true,
       //          wigth:20,
       //          splitNumber: 8,
       //          textStyle: {
       //            fontFamily: "微软雅黑",
       //            fontSize: 12
       //          }
       //        },
       //        data : [0]
       //      }
       //    ],
       //    yAxis: [
       //      {
       //        type: 'value',
       //        splitLine: {
       //          show: false
       //        },
       //        axisLine: {
       //          lineStyle: {
       //            color: '#90979c'
       //          }
       //        },
       //        axisTick: {
       //          show: false
       //        },
       //        axisLabel: {
       //          interval: 0
       //
       //        },
       //        splitArea: {
       //          show: false
       //        }
       //      }
       //    ],
       //    dataZoom: [{
       //      show: true,
       //      height: 30,
       //      xAxisIndex: [0],
       //      bottom: 30,
       //      start: 0,
       //      end: 100,
       //      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
       //      handleSize: '110%',
       //      handleStyle: {
       //        color: "#d3dee5"
       //      },
       //      textStyle: {
       //        color: "#fff"
       //      },
       //      borderColor: "#90979c"
       //    }, {
       //      type: "inside",
       //      show: true,
       //      height: 15,
       //      start: 1,
       //      end: 35
       //    }],
       //    series: [
       //      {
       //        name: '开机时间',
       //        type: 'bar',
       //        //barWidth: 30,
       //        barWidth: 25,
       //        // stack: 'sum',
       //        // barCategoryGap: '20%',
       //        itemStyle: {
       //          normal: {
       //            color: function(params) {
       //              let colorList = [
       //                ["#6496e9","#6bded3"],
       //                // ["#849db8","#b4b8cc"],
       //                // ["#4fe1c5","#4ecee1"],
       //                // // ["#9978fa","#88a1fa"],
       //                // ["#ffbb65","#fdc68b"],
       //              ];
       //              // return colorList[params.dataIndex];
       //              let colorItem = colorList[params.dataIndex];
       //              return new echarts.graphic.LinearGradient(0,0,0,1,[{
       //                offset:0,
       //                color:'#6496e9'
       //              },
       //                {
       //                  offset:1,
       //                  color:"#6bded3"
       //                }],false)
       //            },
       //            barBorderRadius: [5, 5, 0, 0],
       //          }
       //        },
       //        data: [0]
       //      },
       //      {
       //        name: '关机时间',
       //        type: 'bar',
       //        //barWidth: 30,
       //        barWidth: 25,
       //        // stack: 'sum',
       //        // barCategoryGap: '20%',
       //        itemStyle: {
       //          normal: {
       //            color: function(params) {
       //              let colorList = [
       //                // ["#6496e9","#6bded3"],
       //                ["#849db8","#b4b8cc"],
       //                // ["#4fe1c5","#4ecee1"],
       //                // // ["#9978fa","#88a1fa"],
       //                // ["#ffbb65","#fdc68b"],
       //              ];
       //              // return colorList[params.dataIndex];
       //              let colorItem = colorList[params.dataIndex];
       //              return new echarts.graphic.LinearGradient(0,0,0,1,[{
       //                offset:0,
       //                color:'#849db8'
       //              },
       //                {
       //                  offset:1,
       //                  color:"#b4b8cc"
       //                }],false)
       //            },
       //            barBorderRadius: [5, 5, 0, 0],
       //          }
       //        },
       //        data: [0]
       //      }
       //    ]
       //  };
        }
        let compAnalBarOption2 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: "shadow",
              type: 'shadow',
              textStyle: {
                color: "#fff"
                color: '#fff'
              }

            }
@@ -438,52 +239,46 @@
            textStyle: {
              color: '#90979c'
            },
            color:['#6496e9','#b4b8cc'],
            color: ['#6496e9', '#b4b8cc'],
            data: ['开机时间', '关机时间']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true,name:'设备运行效率对比分析图'}
            show: true,
            feature: {
              mark: { show: true },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true, name: '设备运行效率对比分析图' }
            }
          },
          calculable: true,
          grid: {
            borderWidth: 0,
            top: 110,
            bottom: 95,
            bottom: 110,
            textStyle: {
              color: "#fff"
              color: '#fff'
            }
          },
          xAxis: [
            {
              type: 'category',
              splitLine: {
                "show": false
                'show': false
              },
              axisTick: {
                "show": false
                'show': false
              },
              splitArea: {
                show: false
              },
              boundaryGap : true,
              axisLabel : {
                interval : 0,
                rotate : 0,
              boundaryGap: true,
              axisLabel: {
                interval: 0,
                rotate: 45,
                show: true,
                wigth:20,
                splitNumber: 8,
                textStyle: {
                  fontFamily: "微软雅黑",
                  fontSize: 12
                }
              },
              data : [0]
              data: [0]
            }
          ],
          yAxis: [
@@ -519,14 +314,14 @@
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: "#d3dee5"
              color: '#d3dee5'
            },
            textStyle: {
              color: "#fff"
              color: '#fff'
            },
            borderColor: "#90979c"
            borderColor: '#90979c'
          }, {
            type: "inside",
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
@@ -542,100 +337,84 @@
                normal: {
                  color: function(params) {
                    let colorList = [
                      ["#6496e9","#6bded3"],
                      // ["#849db8","#b4b8cc"],
                      // ["#4fe1c5","#4ecee1"],
                      // // ["#9978fa","#88a1fa"],
                      // ["#ffbb65","#fdc68b"],
                    ];
                    // return colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex];
                    return new echarts.graphic.LinearGradient(0,0,0,1,[{
                      offset:0,
                      color:'#6496e9'
                      ['#6496e9', '#6bded3']
                    ]
                    let colorItem = colorList[params.dataIndex]
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#6496e9'
                    },
                      {
                        offset:1,
                        color:"#6bded3"
                      }],false)
                        offset: 1,
                        color: '#6bded3'
                      }], false)
                  },
                  barBorderRadius: [5, 5, 0, 0],
                  barBorderRadius: [5, 5, 0, 0]
                }
              },
              data: [0],
              // barCategoryGap: '20%',
              // barGap : '-10%',
              markPoint : {
                data : [
                  {type : 'max', name: '最大值',symbolSize:70},
                  {type : 'min', name: '最小值',symbolSize:70}
              markPoint: {
                data: [
                  { type: 'max', name: '最大值', symbolSize: 70 },
                  { type: 'min', name: '最小值', symbolSize: 70 }
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            },
            {
              name: '关机时间',
              type: 'bar',
              //barWidth: 30,
              barWidth: 25,
              // barCategoryGap: '20%',
              // barGap : '-10%',
              itemStyle: {
                normal: {
                  color: function(params) {
                    let colorList = [
                      // ["#6496e9","#6bded3"],
                      ["#849db8","#b4b8cc"],
                      // ["#4fe1c5","#4ecee1"],
                      // ["#9978fa","#88a1fa"],
                      // ["#ffbb65","#fdc68b"],
                    ];
                    // return colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex];
                    return new echarts.graphic.LinearGradient(0,0,0,1,[{
                      offset:0,
                      color:"#849db8"
                      ['#849db8', '#b4b8cc']
                    ]
                    let colorItem = colorList[params.dataIndex]
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#849db8'
                    },
                      {
                        offset:1,
                        color:"#b4b8cc"
                      }],false)
                        offset: 1,
                        color: '#b4b8cc'
                      }], false)
                  },
                  barBorderRadius: [5, 5, 0, 0],
                  barBorderRadius: [5, 5, 0, 0]
                }
              },
              data: [0],
              markPoint : {
                data : [
                  {type : 'max', name: '最大值',symbolSize:70},
                  {type : 'min', name: '最小值',symbolSize:70}
              markPoint: {
                data: [
                  { type: 'max', name: '最大值', symbolSize: 70 },
                  { type: 'min', name: '最小值', symbolSize: 70 }
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            }
          ]
        };
        if(this.OpenCloseList != null){
        }
        if (this.OpenCloseList != null) {
          this.equipmentList = []
          this.openRate =[]
          this.utilizationRate =[]
          this.openRate = []
          this.utilizationRate = []
          this.openLong = []
          this.closeLong = []
          for(var i = 0;i<this.OpenCloseList.length;i++){
              this.equipmentList.push(this.OpenCloseList[i].equipmentId)
              this.openRate.push((this.OpenCloseList[i].openRate*100).toFixed(2))
              // (this.openRate * 100).toFixed(2)
              this.utilizationRate.push((this.OpenCloseList[i].utilizationRate*100).toFixed(2))
              this.openLong.push(this.OpenCloseList[i].openLong)
              this.closeLong.push(this.OpenCloseList[i].closeLong)
          for (var i = 0; i < this.OpenCloseList.length; i++) {
            this.equipmentList.push(this.OpenCloseList[i].equipmentId)
            this.openRate.push((this.OpenCloseList[i].openRate * 100).toFixed(2))
            this.utilizationRate.push((this.OpenCloseList[i].utilizationRate * 100).toFixed(2))
            this.openLong.push(this.OpenCloseList[i].openLong)
            this.closeLong.push(this.OpenCloseList[i].closeLong)
          }
          compAnalBarOption1.xAxis[0].data = this.equipmentList
          compAnalBarOption1.series[0].data = this.openRate
@@ -643,12 +422,9 @@
          compAnalBarOption2.xAxis[0].data = this.equipmentList
          compAnalBarOption2.series[0].data = this.openLong
          compAnalBarOption2.series[1].data = this.closeLong
          compAnalBar1.setOption(compAnalBarOption1);
          compAnalBar2.setOption(compAnalBarOption2);
        }else{
          compAnalBar1.setOption(compAnalBarOption1);
          compAnalBar2.setOption(compAnalBarOption2);
        }
        compAnalBar1.setOption(compAnalBarOption1)
        compAnalBar2.setOption(compAnalBarOption2)
        window.addEventListener('resize', function() {
          compAnalBar1.resize()
          compAnalBar2.resize()
@@ -656,8 +432,4 @@
      }
    }
  }
</script>

<style scoped>

</style>
</script>

 src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue

@@ -1,9 +1,9 @@
<template>
  <div class="comparative_Gauge" style="width: 100%;height: 700px;display: flex;flex-direction: column;overflow: scroll">
    <div style="flex: 1;text-align:center;display: flex;flex-direction: column">
      <h3 style="height: 18px;margin: 0 auto;">利用率 Top 5</h3>
  <div class="outer-container">
    <div>
      <h3 style="margin: 0 auto;">利用率 Top 5</h3>

      <div style="flex: 1;display: flex;">
      <div style="flex: 1;display: flex">
        <div id="top1Gauge" class="div-inline"></div>
        <div id="top2Gauge" class="div-inline"></div>
        <div id="top3Gauge" class="div-inline"></div>
@@ -11,10 +11,11 @@
        <div id="top5Gauge" class="div-inline"></div>
      </div>
    </div>
    <div style="flex: 1;text-align:center;display: flex;flex-direction: column">
      <h3 style="height: 18px; margin: 0 auto;">利用率 Last 5</h3>

      <div style="flex: 1;display: flex;">
    <div>
      <h3 style="margin: 0 auto;">利用率 Last 5</h3>

      <div style="flex: 1;display: flex">
        <div id="last1Gauge" class="div-inline"></div>
        <div id="last2Gauge" class="div-inline"></div>
        <div id="last3Gauge" class="div-inline"></div>
@@ -26,80 +27,79 @@
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'comparativeAnalysisGauge',
    props:{dataList:''},
    data(){
      return{
        utilizationRateTopOne:0,
        utilizationRateTopOneEquipment:0,
        utilizationRateTopTwo:0,
        utilizationRateTopTwoEquipment:0,
        utilizationRateTopThree:0,
        utilizationRateTopThreeEquipment:0,
        utilizationRateTopFour:0,
        utilizationRateTopFourEquipment:0,
        utilizationRateTopFive:0,
        utilizationRateTopFiveEquipment:0,
        utilizationRateLastOne:0,
        utilizationRateLastOneEquipment:0,
        utilizationRateLastTwo:0,
        utilizationRateLastTwoEquipment:0,
        utilizationRateLastThree:0,
        utilizationRateLastThreeEquipment:0,
        utilizationRateLastFour:0,
        utilizationRateLastFourEquipment:0,
        utilizationRateLastFive:0,
        utilizationRateLastFiveEquipment:0,
        TopLastList:[]
    props: { dataList: '' },
    data() {
      return {
        utilizationRateTopOne: 0,
        utilizationRateTopOneEquipment: 0,
        utilizationRateTopTwo: 0,
        utilizationRateTopTwoEquipment: 0,
        utilizationRateTopThree: 0,
        utilizationRateTopThreeEquipment: 0,
        utilizationRateTopFour: 0,
        utilizationRateTopFourEquipment: 0,
        utilizationRateTopFive: 0,
        utilizationRateTopFiveEquipment: 0,
        utilizationRateLastOne: 0,
        utilizationRateLastOneEquipment: 0,
        utilizationRateLastTwo: 0,
        utilizationRateLastTwoEquipment: 0,
        utilizationRateLastThree: 0,
        utilizationRateLastThreeEquipment: 0,
        utilizationRateLastFour: 0,
        utilizationRateLastFourEquipment: 0,
        utilizationRateLastFive: 0,
        utilizationRateLastFiveEquipment: 0,
        TopLastList: []
      }
    },
    watch:{
      dataList(val){
        console.log(val);
    watch: {
      dataList(val) {
        console.log(val)
        this.TopLastList = val
        this.draw()
      },
      }
    },
    mounted(){
      this.draw();
    mounted() {
      this.draw()
    },
    methods:{
      draw(){
       let gaugeTopChart1 = this.$echarts.init(document.getElementById('top1Gauge'),'macarons');
       let gaugeTopChart2 = this.$echarts.init(document.getElementById('top2Gauge'),'macarons');
       let gaugeTopChart3 = this.$echarts.init(document.getElementById('top3Gauge'),'macarons');
       let gaugeTopChart4 = this.$echarts.init(document.getElementById('top4Gauge'),'macarons');
       let gaugeTopChart5 = this.$echarts.init(document.getElementById('top5Gauge'),'macarons');
       let gaugeLastChart1 = this.$echarts.init(document.getElementById('last1Gauge'),'macarons');
       let gaugeLastChart2 = this.$echarts.init(document.getElementById('last2Gauge'),'macarons');
        let gaugeLastChart3 = this.$echarts.init(document.getElementById('last3Gauge'),'macarons');
        let gaugeLastChart4 = this.$echarts.init(document.getElementById('last4Gauge'),'macarons');
        let gaugeLastChart5 = this.$echarts.init(document.getElementById('last5Gauge'),'macarons');
    methods: {
      draw() {
        let gaugeTopChart1 = this.$echarts.init(document.getElementById('top1Gauge'), 'macarons')
        let gaugeTopChart2 = this.$echarts.init(document.getElementById('top2Gauge'), 'macarons')
        let gaugeTopChart3 = this.$echarts.init(document.getElementById('top3Gauge'), 'macarons')
        let gaugeTopChart4 = this.$echarts.init(document.getElementById('top4Gauge'), 'macarons')
        let gaugeTopChart5 = this.$echarts.init(document.getElementById('top5Gauge'), 'macarons')
        let gaugeLastChart1 = this.$echarts.init(document.getElementById('last1Gauge'), 'macarons')
        let gaugeLastChart2 = this.$echarts.init(document.getElementById('last2Gauge'), 'macarons')
        let gaugeLastChart3 = this.$echarts.init(document.getElementById('last3Gauge'), 'macarons')
        let gaugeLastChart4 = this.$echarts.init(document.getElementById('last4Gauge'), 'macarons')
        let gaugeLastChart5 = this.$echarts.init(document.getElementById('last5Gauge'), 'macarons')
        let gaugeTopOption1 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP1'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'TOP1'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'TOP1',
              type:'gauge',
              name: 'TOP1',
              type: 'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                length: 12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
@@ -111,57 +111,57 @@
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                length: 30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        let  gaugeTopOption2 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP2'
        }
        let gaugeTopOption2 = {
          title: {
            x: 'center',
            y: 'bottom',
            text: 'TOP2'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'TOP2',
              type:'gauge',
              name: 'TOP2',
              type: 'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                length: 12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
@@ -173,57 +173,57 @@
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                length: 30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeTopOption3 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP3'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'TOP3'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'TOP3',
              type:'gauge',
              name: 'TOP3',
              type: 'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                length: 12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
@@ -235,57 +235,57 @@
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                length: 30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeTopOption4 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP4'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'TOP4'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'TOP4',
              type:'gauge',
              name: 'TOP4',
              type: 'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                length: 12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
@@ -297,57 +297,57 @@
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                length: 30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeTopOption5 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP5'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'TOP5'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'TOP5',
              type:'gauge',
              name: 'TOP5',
              type: 'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                length: 12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
@@ -359,57 +359,57 @@
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                length: 30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeLessOption1 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST1'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'LAST1'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'LAST1',
              type:'gauge',
              name: 'LAST1',
              type: 'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                length: 12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
@@ -421,57 +421,57 @@
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                length: 30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeLessOption2 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST2'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'LAST2'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'LAST2',
              type:'gauge',
              name: 'LAST2',
              type: 'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                length: 12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
@@ -483,57 +483,57 @@
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                length: 30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeLessOption3 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST3'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'LAST3'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'LAST3',
              type:'gauge',
              name: 'LAST3',
              type: 'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                length: 12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
@@ -545,57 +545,57 @@
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                length: 30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeLessOption4 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST4'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'LAST4'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'LAST4',
              type:'gauge',
              name: 'LAST4',
              type: 'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                length: 12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
@@ -607,57 +607,57 @@
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                length: 30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeLessOption5 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST5'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'LAST5'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'LAST5',
              type:'gauge',
              name: 'LAST5',
              type: 'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                length: 12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
@@ -669,148 +669,148 @@
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                length: 30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        if(this.TopLastList != null){
            this.utilizationRateTopOne=0
            this.utilizationRateTopOneEquipment = 'TOP1'
            this.utilizationRateTopTwo=0
            this.utilizationRateTopTwoEquipment = 'TOP2'
            this.utilizationRateTopThree=0
            this.utilizationRateTopThreeEquipment = 'TOP3'
            this.utilizationRateTopFour =0
            this.utilizationRateTopFourEquipment = 'TOP4'
            this.utilizationRateTopFive=0
            this.utilizationRateTopFiveEquipment = 'TOP5'
            this.utilizationRateLastOne=0
            this.utilizationRateLastOneEquipment = 'LAST1'
            this.utilizationRateLastTwo=0
            this.utilizationRateLastTwoEquipment = 'LAST2'
            this.utilizationRateLastThree=0
            this.utilizationRateLastThreeEquipment = 'LAST3'
            this.utilizationRateLastFour=0
            this.utilizationRateLastFourEquipment = 'LAST4'
            this.utilizationRateLastFive=0
            this.utilizationRateLastFiveEquipment = 'LAST5'
          if(this.TopLastList.tops){
            for(var i = 0;i<this.TopLastList.tops.length;i++){
              if(i == 0){
                this.utilizationRateTopOneEquipment=this.TopLastList.tops[0].equipmentId
                this.utilizationRateTopOne=this.TopLastList.tops[0].utilizationRate
              }else if(i == 1){
                this.utilizationRateTopTwoEquipment=this.TopLastList.tops[1].equipmentId
                this.utilizationRateTopTwo=this.TopLastList.tops[1].utilizationRate
              }else if(i == 2){
                this.utilizationRateTopThreeEquipment=this.TopLastList.tops[2].equipmentId
                this.utilizationRateTopThree=this.TopLastList.tops[2].utilizationRate
              }else if(i == 3){
                this.utilizationRateTopFourEquipment=this.TopLastList.tops[3].equipmentId
                this.utilizationRateTopFour=this.TopLastList.tops[3].utilizationRate
              }else if(i == 4){
                this.utilizationRateTopFiveEquipment=this.TopLastList.tops[4].equipmentId
                this.utilizationRateTopFive=this.TopLastList.tops[4].utilizationRate
        }
        if (this.TopLastList != null) {
          this.utilizationRateTopOne = 0
          this.utilizationRateTopOneEquipment = 'TOP1'
          this.utilizationRateTopTwo = 0
          this.utilizationRateTopTwoEquipment = 'TOP2'
          this.utilizationRateTopThree = 0
          this.utilizationRateTopThreeEquipment = 'TOP3'
          this.utilizationRateTopFour = 0
          this.utilizationRateTopFourEquipment = 'TOP4'
          this.utilizationRateTopFive = 0
          this.utilizationRateTopFiveEquipment = 'TOP5'
          this.utilizationRateLastOne = 0
          this.utilizationRateLastOneEquipment = 'LAST1'
          this.utilizationRateLastTwo = 0
          this.utilizationRateLastTwoEquipment = 'LAST2'
          this.utilizationRateLastThree = 0
          this.utilizationRateLastThreeEquipment = 'LAST3'
          this.utilizationRateLastFour = 0
          this.utilizationRateLastFourEquipment = 'LAST4'
          this.utilizationRateLastFive = 0
          this.utilizationRateLastFiveEquipment = 'LAST5'
          if (this.TopLastList.tops) {
            for (var i = 0; i < this.TopLastList.tops.length; i++) {
              if (i == 0) {
                this.utilizationRateTopOneEquipment = this.TopLastList.tops[0].equipmentId
                this.utilizationRateTopOne = this.TopLastList.tops[0].utilizationRate
              } else if (i == 1) {
                this.utilizationRateTopTwoEquipment = this.TopLastList.tops[1].equipmentId
                this.utilizationRateTopTwo = this.TopLastList.tops[1].utilizationRate
              } else if (i == 2) {
                this.utilizationRateTopThreeEquipment = this.TopLastList.tops[2].equipmentId
                this.utilizationRateTopThree = this.TopLastList.tops[2].utilizationRate
              } else if (i == 3) {
                this.utilizationRateTopFourEquipment = this.TopLastList.tops[3].equipmentId
                this.utilizationRateTopFour = this.TopLastList.tops[3].utilizationRate
              } else if (i == 4) {
                this.utilizationRateTopFiveEquipment = this.TopLastList.tops[4].equipmentId
                this.utilizationRateTopFive = this.TopLastList.tops[4].utilizationRate
              }
            }
          }
          if(this.TopLastList.lasts){
            for(var j = 0;j<this.TopLastList.lasts.length;j++){
              if(j == 0){
                this.utilizationRateLastOneEquipment=this.TopLastList.lasts[0].equipmentId
                this.utilizationRateLastOne=this.TopLastList.lasts[0].utilizationRate
              }else if(j == 1){
                this.utilizationRateLastTwoEquipment=this.TopLastList.lasts[1].equipmentId
                this.utilizationRateLastTwo=this.TopLastList.lasts[1].utilizationRate
              }else if(j == 2){
                this.utilizationRateLastThreeEquipment=this.TopLastList.lasts[2].equipmentId
                this.utilizationRateLastThree=this.TopLastList.lasts[2].utilizationRate
              }else if(j == 3){
                this.utilizationRateLastFourEquipment=this.TopLastList.lasts[3].equipmentId
                this.utilizationRateLastFour=this.TopLastList.lasts[3].utilizationRate
              }else if(j == 4){
                this.utilizationRateLastFiveEquipment=this.TopLastList.lasts[4].equipmentId
                this.utilizationRateLastFive=this.TopLastList.lasts[4].utilizationRate
          if (this.TopLastList.lasts) {
            for (var j = 0; j < this.TopLastList.lasts.length; j++) {
              if (j == 0) {
                this.utilizationRateLastOneEquipment = this.TopLastList.lasts[0].equipmentId
                this.utilizationRateLastOne = this.TopLastList.lasts[0].utilizationRate
              } else if (j == 1) {
                this.utilizationRateLastTwoEquipment = this.TopLastList.lasts[1].equipmentId
                this.utilizationRateLastTwo = this.TopLastList.lasts[1].utilizationRate
              } else if (j == 2) {
                this.utilizationRateLastThreeEquipment = this.TopLastList.lasts[2].equipmentId
                this.utilizationRateLastThree = this.TopLastList.lasts[2].utilizationRate
              } else if (j == 3) {
                this.utilizationRateLastFourEquipment = this.TopLastList.lasts[3].equipmentId
                this.utilizationRateLastFour = this.TopLastList.lasts[3].utilizationRate
              } else if (j == 4) {
                this.utilizationRateLastFiveEquipment = this.TopLastList.lasts[4].equipmentId
                this.utilizationRateLastFive = this.TopLastList.lasts[4].utilizationRate
              }
            }
          }
          gaugeTopOption1.title.text = this.utilizationRateTopOneEquipment
          gaugeTopOption1.series[0].data = [{value : (this.utilizationRateTopOne * 100).toFixed(2), name : '利用率'}];
          gaugeTopOption1.series[0].data = [{ value: (this.utilizationRateTopOne * 100).toFixed(2), name: '利用率' }]
          gaugeTopOption2.title.text = this.utilizationRateTopTwoEquipment
          gaugeTopOption2.series[0].data = [{value : (this.utilizationRateTopTwo * 100).toFixed(2), name : '利用率'}];
          gaugeTopOption2.series[0].data = [{ value: (this.utilizationRateTopTwo * 100).toFixed(2), name: '利用率' }]
          gaugeTopOption3.title.text = this.utilizationRateTopThreeEquipment
          gaugeTopOption3.series[0].data = [{value : (this.utilizationRateTopThree * 100).toFixed(2), name : '利用率'}];
          gaugeTopOption3.series[0].data = [{ value: (this.utilizationRateTopThree * 100).toFixed(2), name: '利用率' }]
          gaugeTopOption4.title.text = this.utilizationRateTopFourEquipment
          gaugeTopOption4.series[0].data = [{value : (this.utilizationRateTopFour * 100).toFixed(2), name : '利用率'}];
          gaugeTopOption4.series[0].data = [{ value: (this.utilizationRateTopFour * 100).toFixed(2), name: '利用率' }]
          gaugeTopOption5.title.text = this.utilizationRateTopFiveEquipment
          gaugeTopOption5.series[0].data = [{value : (this.utilizationRateTopFive * 100).toFixed(2), name : '利用率'}];
          gaugeTopOption5.series[0].data = [{ value: (this.utilizationRateTopFive * 100).toFixed(2), name: '利用率' }]

          gaugeLessOption1.title.text = this.utilizationRateLastOneEquipment
          gaugeLessOption1.series[0].data = [{value : (this.utilizationRateLastOne * 100).toFixed(2), name : '利用率'}];
          gaugeLessOption1.series[0].data = [{ value: (this.utilizationRateLastOne * 100).toFixed(2), name: '利用率' }]
          gaugeLessOption2.title.text = this.utilizationRateLastTwoEquipment
          gaugeLessOption2.series[0].data = [{value : (this.utilizationRateLastTwo * 100).toFixed(2), name : '利用率'}];
          gaugeLessOption2.series[0].data = [{ value: (this.utilizationRateLastTwo * 100).toFixed(2), name: '利用率' }]
          gaugeLessOption3.title.text = this.utilizationRateLastThreeEquipment
          gaugeLessOption3.series[0].data = [{value : (this.utilizationRateLastThree * 100).toFixed(2), name : '利用率'}];
          gaugeLessOption3.series[0].data = [{ value: (this.utilizationRateLastThree * 100).toFixed(2), name: '利用率' }]
          gaugeLessOption4.title.text = this.utilizationRateLastFourEquipment
          gaugeLessOption4.series[0].data = [{value : (this.utilizationRateLastFour * 100).toFixed(2), name : '利用率'}];
          gaugeLessOption4.series[0].data = [{ value: (this.utilizationRateLastFour * 100).toFixed(2), name: '利用率' }]
          gaugeLessOption5.title.text = this.utilizationRateLastFiveEquipment
          gaugeLessOption5.series[0].data = [{value : (this.utilizationRateLastFive * 100).toFixed(2), name : '利用率'}];
          gaugeTopChart1.setOption(gaugeTopOption1);
          gaugeTopChart2.setOption(gaugeTopOption2);
          gaugeTopChart3.setOption(gaugeTopOption3);
          gaugeTopChart4.setOption(gaugeTopOption4);
          gaugeTopChart5.setOption(gaugeTopOption5);
          gaugeLastChart1.setOption(gaugeLessOption1);
          gaugeLastChart2.setOption(gaugeLessOption2);
          gaugeLastChart3.setOption(gaugeLessOption3);
          gaugeLastChart4.setOption(gaugeLessOption4);
          gaugeLastChart5.setOption(gaugeLessOption5);
        }else{
          gaugeTopChart1.setOption(gaugeTopOption1);
          gaugeTopChart2.setOption(gaugeTopOption2);
          gaugeTopChart3.setOption(gaugeTopOption3);
          gaugeTopChart4.setOption(gaugeTopOption4);
          gaugeTopChart5.setOption(gaugeTopOption5);
          gaugeLastChart1.setOption(gaugeLessOption1);
          gaugeLastChart2.setOption(gaugeLessOption2);
          gaugeLastChart3.setOption(gaugeLessOption3);
          gaugeLastChart4.setOption(gaugeLessOption4);
          gaugeLastChart5.setOption(gaugeLessOption5);
          gaugeLessOption5.series[0].data = [{ value: (this.utilizationRateLastFive * 100).toFixed(2), name: '利用率' }]
          gaugeTopChart1.setOption(gaugeTopOption1)
          gaugeTopChart2.setOption(gaugeTopOption2)
          gaugeTopChart3.setOption(gaugeTopOption3)
          gaugeTopChart4.setOption(gaugeTopOption4)
          gaugeTopChart5.setOption(gaugeTopOption5)
          gaugeLastChart1.setOption(gaugeLessOption1)
          gaugeLastChart2.setOption(gaugeLessOption2)
          gaugeLastChart3.setOption(gaugeLessOption3)
          gaugeLastChart4.setOption(gaugeLessOption4)
          gaugeLastChart5.setOption(gaugeLessOption5)
        } else {
          gaugeTopChart1.setOption(gaugeTopOption1)
          gaugeTopChart2.setOption(gaugeTopOption2)
          gaugeTopChart3.setOption(gaugeTopOption3)
          gaugeTopChart4.setOption(gaugeTopOption4)
          gaugeTopChart5.setOption(gaugeTopOption5)
          gaugeLastChart1.setOption(gaugeLessOption1)
          gaugeLastChart2.setOption(gaugeLessOption2)
          gaugeLastChart3.setOption(gaugeLessOption3)
          gaugeLastChart4.setOption(gaugeLessOption4)
          gaugeLastChart5.setOption(gaugeLessOption5)
        }
        gaugeTopChart1.setOption(gaugeTopOption1);
        gaugeTopChart2.setOption(gaugeTopOption2);
        gaugeTopChart3.setOption(gaugeTopOption3);
        gaugeTopChart4.setOption(gaugeTopOption4);
        gaugeTopChart5.setOption(gaugeTopOption5);
        gaugeLastChart1.setOption(gaugeLessOption1);
        gaugeLastChart2.setOption(gaugeLessOption2);
        gaugeLastChart3.setOption(gaugeLessOption3);
        gaugeLastChart4.setOption(gaugeLessOption4);
        gaugeLastChart5.setOption(gaugeLessOption5);
        gaugeTopChart1.setOption(gaugeTopOption1)
        gaugeTopChart2.setOption(gaugeTopOption2)
        gaugeTopChart3.setOption(gaugeTopOption3)
        gaugeTopChart4.setOption(gaugeTopOption4)
        gaugeTopChart5.setOption(gaugeTopOption5)
        gaugeLastChart1.setOption(gaugeLessOption1)
        gaugeLastChart2.setOption(gaugeLessOption2)
        gaugeLastChart3.setOption(gaugeLessOption3)
        gaugeLastChart4.setOption(gaugeLessOption4)
        gaugeLastChart5.setOption(gaugeLessOption5)
        window.addEventListener('resize', function() {
          gaugeTopChart1.resize()
          gaugeTopChart2.resize()
@@ -829,8 +829,20 @@
  }
</script>

<style scoped>
  .div-inline{
    flex: 1;
<style lang="less" scoped>
  .outer-container {
    height: 100%;
    overflow: auto;

    > div {
      height: 320px;
      display: flex;
      flex-direction: column
    }

    .div-inline {
      width: 20%;
      height: 100%;
    }
  }
</style>

 src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue

@@ -1,101 +1,81 @@
<template>
  <div :bordered="false" class="device_list">
    <div class="com_box">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->
      <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">
              <a-form-item label="设备">
                <a-input-search :readOnly="true" v-model="queryParam.equipmentId" @search="deviceSearch" @click="deviceSearch"
                                placeholder='请选择设备'/>
              </a-form-item>
            </a-col>
  <div class="device_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="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">
            <a-form-item label="设备">
              <a-input-search readOnly v-model="queryParam.equipmentId" @search="deviceSearch"
                              @click="deviceSearch"
                              placeholder='请选择设备'/>
            </a-form-item>
          </a-col>

            <a-col :md="5" :sm="5">
              <a-form-item label="驱动类型">
                <a-auto-complete
                  v-model="queryParam.driveType"
                  :data-source="driveTypeList"
                  placeholder="驱动类型"
                  :filter-option="filterOption"
                  :allowClear="true"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="时间">
                <a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD" :allow-clear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="3" :sm="3" :xs="3">
              <a-space>
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- table区域-begin -->
      <div id="DeviceList">
        <a-tabs :activeKey="activeKey" @change="tabChange" tabPosition="top">
          <a-tab-pane key="1" tab="图形">
            <ComparativeAnalysisBar ref="AnalysisBar" :dataList='AnalysisBarList'></ComparativeAnalysisBar>
          </a-tab-pane>
          <a-tab-pane key="2" tab="仪表" forceRender>
            <ComparativeAnalysisGauge ref="AnalysisGauge" :dataList="AnalysisGauge"></ComparativeAnalysisGauge>
          </a-tab-pane>
          <a-tab-pane key="3" tab="饼图" forceRender>
            <ComparativeAnalysisPie ref="AnalysisPie" :dataList="AnalysisPie"></ComparativeAnalysisPie>
          </a-tab-pane>
        </a-tabs>
      </div>
      <!-- table区域-end -->
          <a-col :md="5" :sm="5">
            <a-form-item label="驱动类型">
              <a-auto-complete
                v-model="queryParam.driveType"
                :data-source="driveTypeList"
                placeholder="驱动类型"
                :filter-option="filterOption"
                :allowClear="true"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6" :xs="6">
            <a-form-item label="时间">
              <a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD" :allow-clear="false"/>
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="3" :xs="3">
            <a-space>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <SelectDeviceDrawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"></SelectDeviceDrawer>
    <a-spin :spinning="spinning">
      <a-tabs tabPosition="top" id="custom-tabs">
        <a-tab-pane key="1" tab="图形">
          <ComparativeAnalysisBar ref="AnalysisBar" :dataList='AnalysisBarList'/>
        </a-tab-pane>
        <a-tab-pane key="2" tab="仪表" forceRender>
          <ComparativeAnalysisGauge ref="AnalysisGauge" :dataList="AnalysisGauge"/>
        </a-tab-pane>
        <a-tab-pane key="3" tab="饼图" forceRender>
          <ComparativeAnalysisPie ref="AnalysisPie" :dataList="AnalysisPie"/>
        </a-tab-pane>
      </a-tabs>
    </a-spin>

    <SelectDeviceDrawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
  </div>
</template>

<script>
  import moment from 'moment'
  import $ from 'jquery'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import JDate from '../../../../../components/jeecg/JDate'
  import {
    requestPut,
    deleteAction,
    getAction
  } from '@/api/manage'
  import { getAction } from '@/api/manage'
  import api from '@/api/mdc'
  import ComparativeAnalysisBar from './ComparativeAnalysisBar'
  import ComparativeAnalysisGauge from './ComparativeAnalysisGauge'
  import ComparativeAnalysisPie from './ComparativeAnalysisPie'
  import '@/components/table2excel/table2excel'
  import JInput from '@/components/jeecg/JInput'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import Tooltip from 'ant-design-vue/es/tooltip'
  import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
  import api from '@/api/mdc'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer.vue'

  export default {
    name: 'ComparativeAnalysisMain',
    components: {
      Tooltip,
      ComparativeAnalysisBar,
      ComparativeAnalysisGauge,
      ComparativeAnalysisPie,
      JDictSelectTag,
      JInput,
      JDate,
      JEllipsis,
      SelectDeviceDrawer
    },
    props: { nodeTree: '', Type: '', nodePeople: '' },
    data() {
      return {
        activeKey: '1',
        typeTree: '',
        typeParent: 1,
        typeEquipment: 1,
@@ -103,38 +83,31 @@
        AnalysisGauge: [],
        AnalysisPie: [],
        dates: [],
        xianshi: '',
        readOnly: true,
        queryParam: {
          equipmentId: ''
        },
        queryParams: {},
        queryParamEquip: {},
        queryParamPeople: {},
        dataStartsoucre: [],
        url: {
          comparativeAnalysis: '/mdc/efficiencyReport/comparativeAnalysis'
        },
        AnalysisList: {},
        driveTypeList: []
        driveTypeList: [],
        spinning: false
      }
    },
    watch: {
      Type(valmath) {
        this.dataList = []
        this.queryParams.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
      nodeTree(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId) {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = ''
            // this.queryParams.equipmentId = val.equipmentId
            this.queryParam.equipmentId = val.equipmentId
            this.queryParamEquip.equipmentId = val.equipmentId
          } else {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = val.key
            this.queryParams.equipmentId = ''
          }
@@ -144,12 +117,10 @@
      nodePeople(val) {
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId) {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = ''
            this.queryParams.equipmentId = val.equipmentId
            this.queryParamEquip.equipmentId = val.equipmentId
          } else {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = val.key
            this.queryParams.equipmentId = ''
          }
@@ -157,19 +128,29 @@
        }
      }
    },
    created() {
      this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)]
      this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
      this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
      this.queryParam.typeTree = '1'
      this.loadAnalysis()
      this.getDriveTypeByApi()
    },
    mounted() {
      const tabsBar = document.querySelector('#custom-tabs .ant-tabs-bar')
      const tabsContent = document.querySelector('#custom-tabs .ant-tabs-content')
      const tabsBarHeight = window.getComputedStyle(tabsBar).height
      const tabsBarMarginBottom = window.getComputedStyle(tabsBar).marginBottom
      tabsContent.style.height = `calc(100% - ${tabsBarHeight} - ${tabsBarMarginBottom})`
    },
    methods: {
      tabChange(val) {
        this.activeKey = val
      },

      dateParamChange(v1, v2) {
        // console.log(v1,v2)
        this.queryParam.startTime = v2[0]
        this.queryParam.endTime = v2[1]
        console.log(v2[0], v2[1])
      },

      loadAnalysis() {
        this.spinning = true
        getAction(this.url.comparativeAnalysis, this.queryParam).then(res => {
          if (res.success) {
            this.AnalysisList = res.result
@@ -180,7 +161,7 @@
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
          this.spinning = false
        })
      },

@@ -191,32 +172,14 @@
        this.AnalysisPie = []
        if (this.queryParams.typeTree == '1') {
          this.queryParams.parentId = this.queryParamEquip.parentId
          // this.queryParams.equipmentId =  this.queryParamEquip.equipmentId
        } else {
          this.queryParams.parentId = this.queryParamEquip.parentId
          // this.queryParams.equipmentId = ""
        }
        this.AnalysisList = []
        //获取查询条件
        this.queryParam.parentId = this.queryParams.parentId
        // this.queryParam.equipmentId = this.queryParams.equipmentId
        this.queryParam.typeTree = this.queryParams.typeTree
        getAction(this.url.comparativeAnalysis, this.queryParam).then((res) => {
          if (res.success) {
            this.AnalysisList = res.result
            this.AnalysisBarList = res.result.graphics
            this.AnalysisGauge = res.result.meters
            this.AnalysisPie.push(res.result.pieCharts)
          } else {
            // this.$message.warning(res.message)
            this.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        }).finally(() => {
          this.loading = false
        })
        this.loadAnalysis()
      },

      searchReset() {
@@ -246,21 +209,6 @@
              this.queryParams.equipmentId = this.queryParamEquip.equipmentId
            }
          }
          getAction(this.url.comparativeAnalysis, this.queryParams).then((res) => {
            if (res.success) {
              this.AnalysisList = res.result
              this.AnalysisBarList = res.result.graphics
              this.AnalysisGauge = res.result.meters
              this.AnalysisPie.push(res.result.pieCharts)
            } else {
              this.$notification.warning({
                message: '消息',
                description: res.message
              })
            }
          }).finally(() => {
            this.loading = false
          })
        } else {
          this.typeTree = this.queryParams.typeTree
          this.typeParent = this.queryParams.parentId
@@ -283,22 +231,8 @@
              this.queryParams.equipmentId = this.queryParamEquip.equipmentId
            }
          }
          getAction(this.url.comparativeAnalysis, this.queryParams).then((res) => {
            if (res.success) {
              this.AnalysisList = res.result
              this.AnalysisBarList = res.result.graphics
              this.AnalysisGauge = res.result.meters
              this.AnalysisPie.push(res.result.pieCharts)
            } else {
              this.$notification.warning({
                message: '消息',
                description: res.message
              })
            }
          }).finally(() => {
            this.loading = false
          })
        }
        this.loadAnalysis()
      },

      /**
@@ -334,81 +268,60 @@
       * @param data å·²é€‰æ‹©çš„设备
       */
      selectOK(data) {
        console.log('data=', data)
        this.queryParam.equipmentId = data.join(',')
        console.log('queryParam', this.queryParam.equipmentId)
      }
    },
    created() {
      this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)]
      this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
      this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
      this.queryParam.typeTree = '1'
      this.loadAnalysis()
      this.getDriveTypeByApi()
    }
  }
</script>

<style lang="less" scoped>
  /*@import '~@assets/less/common.less';*/
  .device_list {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /deep/ .ant-spin-nested-loading {
      flex: 1;
      overflow: hidden;

      .ant-spin-container {
        height: 100%;

        .ant-tabs {
          height: 100%;
          overflow: hidden;
        }
      }
    }
  }

  @media screen and (min-width: 1920px) {
    .device_list {
      height: 811px !important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .device_list {
      height: 811px !important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .device_list {
      height: 663px !important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .device_list {
      height: 564px !important;
      overflow: scroll;
    }
  }

  @media screen and (max-width: 1280px) {
    .device_list {
      height: 564px !important;
      overflow: scroll;
    }
  }

  /*.device_list{*/
  /*display: flex;*/
  /*}*/
  /*.device_list .table-page-search-wrapper{*/
  /**/
  /*}*/
  /deep/ .ant-card-body {
    height: 100% !important;
  }

  .device_list .com_box {
    display: flex !important;
    height: 100% !important;
    flex-direction: column !important;
  }

  .device_list .table-page-search-wrapper {
    height: 6% !important;
  }

  .device_list #DeviceList {
    height: 90% !important;
  }
</style>

 src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisPie.vue

@@ -1,49 +1,44 @@
<template>
  <div class="comparative_pie" style="width: 100%;height: 600px;display: flex;overflow: scroll">
    <div id="compAnalPie1" style="flex: 1;"></div>
    <div id="compAnalPie2" style="flex: 1;"></div>
  <div style="display: flex;height: 100%;overflow: auto">
    <div id="compAnalPie1" style="width:50%;height:600px"></div>
    <div id="compAnalPie2" style="width:50%;height:600px"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'conparativeAnalysisPie',
    props:{ dataList:''},
    data(){
      return{
        closeRate:0,
        openRate:0,
        usedRate:0,
        waitRate:0,
        RateList:[]
    name: 'comparativeAnalysisPie',
    props: { dataList: '' },
    data() {
      return {
        closeRate: 0,
        openRate: 0,
        usedRate: 0,
        waitRate: 0,
        RateList: []
      }
    },
    created(){

    },
    watch:{
      dataList(val){
    watch: {
      dataList(val) {
        this.RateList = val
        console.log(val)
        this.drawTu()
      },
      }
    },
    mounted() {
      this.drawTu()
    },
    methods:{
      drawTu(){
       let pieCompChart1 = this.$echarts.init(document.getElementById('compAnalPie1'),'macarons');
       let pieCompChart2 = this.$echarts.init(document.getElementById('compAnalPie2'),'macarons');
       let pieCompChartOption1 = {
    methods: {
      drawTu() {
        let pieCompChart1 = this.$echarts.init(document.getElementById('compAnalPie1'), 'macarons')
        let pieCompChart2 = this.$echarts.init(document.getElementById('compAnalPie2'), 'macarons')
        let pieCompChartOption1 = {
          title: {
            x: 'center',
            subtext: '开机效率'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
@@ -59,8 +54,8 @@
            center: ['55%', '55%'],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#4169E1', '#A8A8A8'];
                color: function(params) {
                  var colorList = ['#4169E1', '#A8A8A8']
                  return colorList[params.dataIndex]
                },
                label: {
@@ -70,18 +65,18 @@
                }
              }
            },
            data: [{value: 0, name: '开机率'},
              {value: 0, name: '关机率'}]
            data: [{ value: 0, name: '开机率' },
              { value: 0, name: '关机率' }]
          }]
        };
       let pieCompChartOption2 = {
        }
        let pieCompChartOption2 = {
          title: {
            x: 'center',
            subtext: '运行效率'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
@@ -97,8 +92,8 @@
            center: ['55%', '55%'],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#00ee00', '#FCCE10', '#A8A8A8'];
                color: function(params) {
                  var colorList = ['#00ee00', '#FCCE10', '#A8A8A8']
                  return colorList[params.dataIndex]
                },
                label: {
@@ -108,37 +103,46 @@
                }
              }
            },
            data: [{value: 0, name: '加工率'},
              {value: 0, name: '待机率'},
              {value: 0, name: '关机率'}]
            data: [{ value: 0, name: '加工率' },
              { value: 0, name: '待机率' },
              { value: 0, name: '关机率' }]
          }]
        };
        if(this.RateList != null){
          this.closeRate =[]
          this.openRate =[]
        }
        if (this.RateList != null) {
          this.closeRate = []
          this.openRate = []
          this.usedRate = []
          this.waitRate = []
          if(this.RateList.length>0){
            this.closeRate=this.RateList[0].closeRate
            this.openRate=this.RateList[0].openRate
            this.usedRate=this.RateList[0].processRate
            this.waitRate=this.RateList[0].waitRate
            pieCompChartOption1.series[0].data = [{value:(this.openRate * 100).toFixed(2), name:'开机率'},{value:(this.closeRate * 100).toFixed(2), name:'关机率'}];
            pieCompChartOption2.series[0].data = [{value:(this.usedRate * 100).toFixed(2), name:'加工率'},{value:(this.waitRate * 100).toFixed(2), name:'待机率'},{value:(this.closeRate * 100).toFixed(2), name:'关机率'}];
            pieCompChart1.setOption(pieCompChartOption1);
            pieCompChart2.setOption(pieCompChartOption2);
          }else{
            pieCompChart1.setOption(pieCompChartOption1);
            pieCompChart2.setOption(pieCompChartOption2);
          if (this.RateList.length > 0) {
            this.closeRate = this.RateList[0].closeRate
            this.openRate = this.RateList[0].openRate
            this.usedRate = this.RateList[0].processRate
            this.waitRate = this.RateList[0].waitRate
            pieCompChartOption1.series[0].data = [{
              value: (this.openRate * 100).toFixed(2),
              name: '开机率'
            }, { value: (this.closeRate * 100).toFixed(2), name: '关机率' }]
            pieCompChartOption2.series[0].data = [{
              value: (this.usedRate * 100).toFixed(2),
              name: '加工率'
            }, { value: (this.waitRate * 100).toFixed(2), name: '待机率' }, {
              value: (this.closeRate * 100).toFixed(2),
              name: '关机率'
            }]
            pieCompChart1.setOption(pieCompChartOption1)
            pieCompChart2.setOption(pieCompChartOption2)
          } else {
            pieCompChart1.setOption(pieCompChartOption1)
            pieCompChart2.setOption(pieCompChartOption2)
          }

        }else{
          pieCompChart1.setOption(pieCompChartOption1);
          pieCompChart2.setOption(pieCompChartOption2);
        } else {
          pieCompChart1.setOption(pieCompChartOption1)
          pieCompChart2.setOption(pieCompChartOption2)
        }

        pieCompChart1.setOption(pieCompChartOption1);
        pieCompChart2.setOption(pieCompChartOption2);
        pieCompChart1.setOption(pieCompChartOption1)
        pieCompChart2.setOption(pieCompChartOption2)
        window.addEventListener('resize', function() {
          pieCompChart1.resize()
          pieCompChart2.resize()
@@ -146,8 +150,4 @@
      }
    }
  }
</script>

<style scoped>

</style>
</script>

 src/views/mdc/base/modules/shift/ShiftInfo.vue

@@ -2,7 +2,7 @@
  <div class="shift_info">
    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
      <a-button type="primary" v-if="Object.keys(shiftSystemRow).length>0" @click="handleAdd" icon="plus">配置</a-button>
      <a-button type="primary" :disabled="Object.keys(shiftSystemRow).length===0" @click="handleAdd" icon="plus">配置</a-button>
    </div>
    <!-- table区域-begin -->
    <div style="width: 100%;flex: 1;overflow: auto">

 src/views/mdc/base/modules/shift/ShiftSystem.vue

@@ -6,7 +6,7 @@
    </div>
    <!-- table区域-begin -->
    <div style="flex: 1;overflow: auto">
      <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns"
      <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :customRow="customRow"
               :dataSource="dataSource" :pagination="false" :loading="loading"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}">
         <span
@@ -21,7 +21,7 @@
          slot-scope="text, record"
        >
            <span v-if="text == 'true'">是</span>
            <span v-else-if="text == 'false'" >否</span>
            <span v-else-if="text == 'false'">否</span>
            <span v-else-if="text == null">否</span>
         </span>
        <span
@@ -45,7 +45,7 @@
              <a-menu-item v-if="record.shiftStatus == 1">
                <a key="3" @click="handleStatus(record.id,0)">停用</a>
              </a-menu-item>
               <a-menu-item >
               <a-menu-item>
                <a key="4" @click="handleDelete(record.id)">删除</a>
              </a-menu-item>
            </a-menu>
@@ -54,18 +54,14 @@
      </a-table>
    </div>

    <shift-system-model ref="modalForm" @ok="modalFormOk"></shift-system-model>
    <shift-system-model ref="modalForm" @ok="loadData"></shift-system-model>
  </div>
</template>

<script>
  import qs from 'qs'
  import {
    requestPut, putAction, deleteAction,postAction
  } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import { putAction, deleteAction, postAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import ShiftSystemModel from './ShiftSystemModel'

  export default {
@@ -76,15 +72,7 @@
    },
    data() {
      return {
        statusName: '',
        disabled: true,
        disableMixinCreated: false,
        url: {
          list: '/mdc/mdcMdcShift/queryPageList',
          changeStatus: '/mdc/mdcMdcShift/changeStatus',
          deleteBatch:'/mdc/mdcMdcShift/deleteShift',
          changeDefaultShift: '/mdc/mdcMdcShift/changeDefaultShift'
        },
        columns: [
          {
            title: '班制',
@@ -109,7 +97,13 @@
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ]
        ],
        url: {
          list: '/mdc/mdcMdcShift/queryPageList',
          changeStatus: '/mdc/mdcMdcShift/changeStatus',
          deleteBatch: '/mdc/mdcMdcShift/deleteShift',
          changeDefaultShift: '/mdc/mdcMdcShift/changeDefaultShift'
        }
      }
    },
    methods: {
@@ -118,15 +112,15 @@
        putAction(this.url.changeStatus, { id: id, status: status }).then((res) => {
          if (res.success) {
            _this.$notification.success({
              message:'消息',
              description:res.message
              message: '消息',
              description: res.message
            })
            _this.loadData()
          } else {
            _this.$notification.warning({
              message:'消息',
              description:res.message
            });
              message: '消息',
              description: res.message
            })
          }
        })
      },
@@ -135,46 +129,46 @@
        this.$refs.modalForm.title = '班制配置'
        this.$refs.modalForm.disableSubmit = false
      },
      handleDefault:function(record){
        postAction(this.url.changeDefaultShift,qs.stringify({id:record.id})).then((res) =>{
            if(res.success){
              // this.$message.success(res.message);
              this.$notification.success({
                message:'消息',
                description:res.message
              });
              this.loadData()
            }else{
              // this.$message.success(res.message);
              this.$notification.warning({
                message:'消息',
                description:res.message
              });
            }
      handleDefault: function(record) {
        postAction(this.url.changeDefaultShift, qs.stringify({ id: record.id })).then((res) => {
          if (res.success) {
            // this.$message.success(res.message);
            this.$notification.success({
              message: '消息',
              description: res.message
            })
            this.loadData()
          } else {
            // this.$message.success(res.message);
            this.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        })
      },
      handleDelete: function(record){
        if(!this.url.deleteBatch){
          this.$message.error("请设置url.delete属性!")
      handleDelete: function(record) {
        if (!this.url.deleteBatch) {
          this.$message.error('请设置url.delete属性!')
          return
        }
        var that = this;
        deleteAction(that.url.deleteBatch, {id: record}).then((res) => {
        var that = this
        deleteAction(that.url.deleteBatch, { id: record }).then((res) => {
          if (res.success) {
            // that.$message.success(res.message);
            that.$notification.success({
              message:'消息',
              description:res.message
            });
            that.loadData();
              message: '消息',
              description: res.message
            })
            that.loadData()
          } else {
            // that.$message.warning(res.message);
            that.$notification.warning({
              message:'消息',
              description:res.message
            });
              message: '消息',
              description: res.message
            })
          }
        });
        })
      },
      handleEdit(record) {
        this.$refs.modalForm.edit(record)
@@ -183,47 +177,61 @@

      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
        this.selectedRowKeys = selectedRowKeys
        this.selectionRows = selectionRows
        this.$emit('selectionShiftRow', this.selectionRows[0])
      },
    },
    created() {
    }

      customRow(record) {
        return {
          style: {
            cursor: 'pointer'
          },
          on: {
            click: () => {
              this.onSelectChange([record.id], [record])
            }
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .shift_system{
  .shift_system {
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 1920px){
    .shift_system{
      height: 748px!important;
  @media screen and (min-width: 1920px) {
    .shift_system {
      height: 748px !important;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .shift_system{
      height: 748px!important;

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .shift_system {
      height: 748px !important;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .shift_system{
      height: 600px!important;

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .shift_system {
      height: 600px !important;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .shift_system{
      height: 501px!important;

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .shift_system {
      height: 501px !important;
    }
  }
  @media screen and (max-width: 1280px){
    .shift_system{
      height: 501px!important;

  @media screen and (max-width: 1280px) {
    .shift_system {
      height: 501px !important;
    }
  }
</style>