1、首页 （1）设备级看板单击设备效率统计仪表盘图标跳转至统计分析页面并根据唯一编号筛选页面对应数据 （2）设备级看板点击设备班次按钮跳转至工作日历页...

zhuzhuanzhuan

2024-04-18 28189102d735bfc2c41720d1ef292bd9024b49f2

1、首页
（1）设备级看板单击设备效率统计仪表盘图标跳转至统计分析页面并根据唯一编号筛选页面对应数据
（2）设备级看板点击设备班次按钮跳转至工作日历页面并根据设备编号筛选页面对应数据
（3）增加所有层级看板图表数据加载动画
（4）公司级以及分厂级看板利用率胶囊以及上月OEE车间单柱图表轴线刻度最大值采用动态设置方式而非固定100%
（5）工段级看板上月OEE单柱图表轴线刻度最大值采用动态设置方式而非固定100%
（6）工段级看板单击前7天利用率图表跳转至统计分析页面并根据唯一编号筛选页面对应数据
（7）工段级看板单击上月OEE图表跳转至设备综合效率分析页面并根据唯一编号筛选页面对应数据
2、调整全局导航栏页签间距，以便能在不超出导航栏的情况下同时放置更多页面页签

 src/api/signage.js

@@ -29,6 +29,12 @@
  getEquipmentDayUtilizationStatisticsApi: productionCode => getAction('/mdc/home/equipmentDayUtilizationStatistics', { productionCode }),
  // 上个月各设备OEE统计
  getEquipmentOEEMonthStatisticsApi: productionCode => getAction('/mdc/home/equipmentOEEMonthStatistics', { productionCode }),
  // 设备效率仪表盘
  getEquipmentEfficiencyStatisticsApi: productionCode => getAction('/mdc/home/equipmentEfficiencyStatistics', { productionCode })
  // 工段级设备效率仪表盘
  getEquipmentEfficiencyStatisticsApi: productionCode => getAction('/mdc/home/equipmentEfficiencyStatistics', { productionCode }),
  // 设备级整年度利用率折线图
  getEquipmentAnnualEfficiencyStatisticsApi: equipmentId => getAction('/mdc/home/equipmentAnnualEfficiencyStatistics', { equipmentId }),
  // 工段级设备效率仪表盘
  getEquipmentLevelEfficiencyStatisticsApi: equipmentId => getAction('/mdc/home/equipmentLevelEfficiencyStatistics', { equipmentId }),
  // 设备级设备列表
  getEquipmentListApi: productionCode => getAction('/mdc/home/equipmentList', { productionCode })
}

 src/components/layouts/TabLayout.vue

@@ -433,7 +433,7 @@

    &.ant-tabs-card .ant-tabs-tab {

      padding: 0 24px !important;
      padding: 0 20px 0 12px !important;
      background-color: white !important;
      margin-right: 10px !important;


 src/views/dashboard/Analysis.vue

@@ -1,5 +1,6 @@
<template>
  <Component :is="currentSignage" :userType="userType" :productionCode="productionCode"
             :workshopSectionProductionCode="workshopSectionProductionCode"
             @switchToNextSignage="switchToNextSignage" @backToLastSignage="backToLastSignage">
  </Component>
</template>

 src/views/dashboard/BranchFactorySignage.vue

@@ -110,20 +110,7 @@
        nextNextMonthMaintenancePlanNum: 0,
        twoMaintenanceChartData: [['-', '-', '-']],
        barChart: '',
        barChartData: [
          {
            'value': '34',
            'name': '401一工段',
            'productionCode': '4215215621',
            'productionId': '1729761410329280513'
          },
          {
            'value': '77',
            'name': '401二工段',
            'productionCode': '8563354643',
            'productionId': '1729783206308302849'
          }
        ],
        barChartData: [],
        doubleBarChart: '',
        doubleBarChartData: {},
        maintenanceConfig: {},
@@ -132,13 +119,14 @@
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.drawCharts()
      this.getChartDataByApi()
      this.drawProblemChart()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      /* 调用接口获取图表数据汇总方法 */
      getChartDataByApi() {
        this.getRunningStateDataByApi()
        this.getEfficiencyDataByApi()
@@ -146,12 +134,19 @@
        this.getWarrantyMalfunctionDataByApi()
        this.getMonthMaintenanceNumByApi()
        this.getTwoMaintenanceChartDataByApi()
        // this.getBarChartDataByApi()
        this.getBarChartDataByApi()
        this.getDoubleBarChartDataByApi()
      },

      /* 调用接口获取设备运行状态 */
      getRunningStateDataByApi() {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        this.runningStateChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
          .then(res => {
            if (res.success) this.runningStateData = res.result.list
@@ -161,6 +156,13 @@

      /* 调用接口获取设备利用率 */
      getEfficiencyDataByApi() {
        this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
        this.efficiencyChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentUtilizationStatisticsApi(this.productionCode)
          .then(res => {
            if (res.success) this.efficiencyData = res.result
@@ -170,9 +172,16 @@

      /* 调用接口获取技术状态 */
      getTechConditionDataByApi() {
        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
        this.techConditionChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentTechnologyStatusListApi(this.productionCode)
          .then(res => {
            if (res.success) {
            if (res.success && res.result) {
              this.techConditionData = [
                { value: res.result[0].qualifiedCount, name: '合格' },
                { value: res.result[0].disabledCount, name: '禁用' },
@@ -185,9 +194,16 @@

      /* 调用接口获取设备报修故障 */
      getWarrantyMalfunctionDataByApi() {
        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
        this.warrantyMalfunctionChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getReportRepairEquipmentListApi(this.productionCode)
          .then(res => {
            if (res.success) {
            if (res.success && res.result) {
              this.warrantyMalfunctionData = [
                { value: res.result[0].failurTotalCount, name: '报修' },
                { value: res.result[0].stopCount, name: '停机' },
@@ -229,6 +245,13 @@

      /* 调用接口获取设备OEE统计 */
      getBarChartDataByApi() {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        this.barChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentOEEStatistics(this.productionCode)
          .then(res => {
            if (res.success) this.barChartData = res.result
@@ -238,6 +261,13 @@

      /* 调用接口获取设备OEE和利用率对比 */
      getDoubleBarChartDataByApi() {
        this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
        this.doubleBarChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentMonthStatisticsApi(this.productionCode)
          .then(res => {
            if (res.success) this.doubleBarChartData = res.result
@@ -245,21 +275,8 @@
          })
      },

      /* 绘制图表汇总方法 */
      drawCharts() {
        this.drawRunningStateChart()
        this.drawEfficiencyChart()
        this.drawTechConditionChart()
        this.drawWarrantyMalfunctionChart()
        this.drawMaintenanceChart()
        this.drawBarChart()
        this.drawDoubleBarChart()
        this.drawProblemChart()
      },

      /* 绘制设备运行状态玫瑰饼图 */
      drawRunningStateChart(productionId) {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
@@ -336,6 +353,7 @@
          ]
        }
        this.runningStateChart.setOption(option, true)
        this.runningStateChart.hideLoading()

        this.runningStateChart.on('click', params => {
          console.log('params', params)
@@ -348,7 +366,6 @@

      /* 绘制设备利用率胶囊图 */
      drawEfficiencyChart() {
        this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
        const data = this.efficiencyData
        const colorArray = [
          {
@@ -379,7 +396,13 @@
            bottom: '#F7B7A0'
          }
        ]
        const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
        const defaultData = []
        const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value
        let yAxisMax
        if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0，则将背景默认值设置为1
        else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值，思路为数据最大值最接近的能被5整除的数字
        const yAxisInterval = yAxisMax / 5 // 同时将刻度值分成5份
        data.forEach(item => defaultData.push(yAxisMax))
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
@@ -422,6 +445,9 @@
              }
            },
            show: true,
            min: 0,
            max: 'dataMax',
            interval: yAxisInterval,
            type: 'value',
            axisTick: {
              show: false
@@ -537,6 +563,7 @@
        }
        option.title.text = `${moment().format('M月D日')}利用率`
        this.efficiencyChart.setOption(option, true)
        this.efficiencyChart.hideLoading()

        this.efficiencyChart.on('click', params => {
          // 点击触发的为柱状体，除此除外是标题
@@ -565,7 +592,6 @@

      /* 绘制技术状态饼图 */
      drawTechConditionChart() {
        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
        const option = {
          height: 300,
          title: {
@@ -640,11 +666,11 @@
          ]
        }
        this.techConditionChart.setOption(option, true)
        this.techConditionChart.hideLoading()
      },

      /* 绘制设备报修故障饼图 */
      drawWarrantyMalfunctionChart() {
        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
        const option = {
          height: 300,
          title: {
@@ -719,6 +745,7 @@
          ]
        }
        this.warrantyMalfunctionChart.setOption(option, true)
        this.warrantyMalfunctionChart.hideLoading()
      },

      /* 绘制车间保养滚动表 */
@@ -739,8 +766,13 @@

      /* 绘制单柱图 */
      drawBarChart() {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
        const defaultData = []
        const dataMax = +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value
        let yAxisMax
        if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0，则将背景默认值设置为1
        else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值，思路为数据最大值最接近的能被5整除的数字
        const yAxisInterval = yAxisMax / 5 // 同时将刻度值分成5份
        this.barChartData.forEach(item => defaultData.push(yAxisMax))
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
@@ -801,7 +833,9 @@
          }],
          yAxis: [{
            name: '%',
            max: 100,
            min: 0,
            max: yAxisMax,
            interval: yAxisInterval,
            axisLabel: {
              formatter: '{value}',
              color: '#e2e9ff'
@@ -857,6 +891,7 @@
        }
        option.title.text = moment().subtract(1, 'months').format('M月') + `OEE车间`
        this.barChart.setOption(option, true)
        this.barChart.hideLoading()

        this.barChart.on('click', params => {
          console.log('params', params)
@@ -874,7 +909,6 @@

      /* 绘制双柱图 */
      drawDoubleBarChart() {
        this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
        const option = {
          color: ['#409EFF', '#0FC61A'],
          tooltip: {
@@ -1017,6 +1051,7 @@
          ]
        }
        this.doubleBarChart.setOption(option, true)
        this.doubleBarChart.hideLoading()
      },

      /* 绘制问题滚动表 */

 src/views/dashboard/EquipmentSignage.vue

@@ -21,9 +21,10 @@
              <th>设备编号</th>
              <th>型号</th>
            </tr>
            <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)">
            <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)"
                :style="{backgroundColor:equipmentId===item.equipmentId?'#1D94D4':''}">
              <td>{{item.equipmentId}}</td>
              <td>{{item.equipmentType}}</td>
              <td>{{item.equipmentModel}}</td>
            </tr>
          </table>
        </div>
@@ -122,7 +123,7 @@
            </div>

            <div style="display: flex;justify-content: space-evenly;font-size: 20px;padding: 0 50px">
              <div v-for="(item,index) in buttonList" :key="index" @click="click(item)"
              <div v-for="(item,index) in buttonList" :key="index" @click="navigateToPage(item)"
                   style="width: 200px;height: 70px;margin: 0 10px;cursor: pointer">
                <dv-decoration-11>{{item.label}}</dv-decoration-11>
              </div>
@@ -186,63 +187,18 @@
        type: String,
        default: ''
      },
      workshopSectionProductionCode: {
        type: String,
        default: ''
      },
      userType: {
        type: Number
      }
    },
    data() {
      return {
        equipmentId: '2140223',
        equipmentList: [
          {
            equipmentId: '2140223',
            equipmentType: 'CV4160'
          },
          {
            equipmentId: '2140224',
            equipmentType: 'CV4161'
          },
          {
            equipmentId: '2140225',
            equipmentType: 'CV4162'
          },
          {
            equipmentId: '2140226',
            equipmentType: 'CV4163'
          },
          {
            equipmentId: '2140227',
            equipmentType: 'CV4164'
          },
          {
            equipmentId: '2140227',
            equipmentType: 'CV4165'
          },
          {
            equipmentId: '2140228',
            equipmentType: 'CV4166'
          },
          {
            equipmentId: '2140229',
            equipmentType: 'CV4167'
          },
          {
            equipmentId: '2140230',
            equipmentType: 'CV4168'
          },
          {
            equipmentId: '2140231',
            equipmentType: 'CV4169'
          },
          {
            equipmentId: '2140232',
            equipmentType: 'CV4170'
          },
          {
            equipmentId: '2140233',
            equipmentType: 'CV4171'
          }
        ],
        equipmentId: '',
        equipmentList: [],
        equipmentInfo: {
          equipmentId: '2511563154',
          ABCSymbol: '3312321421',
@@ -268,7 +224,8 @@
            label: '报修'
          },
          {
            label: '设备班次'
            label: '设备班次',
            pageName: 'mdc-base-DeviceCalendar'
          }
        ],
        lineChart: '',
@@ -277,41 +234,114 @@
        gaugeChart2: '',
        gaugeChart3: '',
        gaugeChart4: '',
        gaugeChartData1: [],
        gaugeChartData2: [],
        gaugeChartData3: [],
        gaugeChartData4: []
        gaugeChartData: {
          utilizationRate: 0,
          startRate: 0,
          openRate: 0,
          overallEquipmentEfficiency: 0
        },
        hideLoadingDelayTime: 500
      }
    },
    created() {
      console.log('触发重新创建')
      this.equipmentId = this.productionCode
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.drawCharts()
      this.getChartDataByApi()
      this.getEquipmentListByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      selectEquipment(record) {
        this.equipmentId = record.equipmentId
      },

      click(record) {
        window.alert(record.label)
      getEquipmentListByApi() {
        // 首页一进入即设备级或工段级时，workshopSectionProductionCode为空，默认查询第一个车间中第一个工段下的设备列表
        signageApi.getEquipmentListApi(this.workshopSectionProductionCode)
          .then(res => {
            if (res.success) {
              this.equipmentList = res.result
              if (!this.productionCode && this.equipmentList.length > 0) this.equipmentId = this.equipmentList[0].equipmentId
            }
          })
          .finally(() => {
            // 此处为保证equipmentId正常赋值后再调用接口获取图表数据（异步）
            this.getChartDataByApi()
          })
      },

      getChartDataByApi() {

        this.getGaugeChartDataByApi()
        this.getLineChartDataByApi()
      },

      /* 绘制图表汇总方法 */
      drawCharts() {
        this.drawGaugeChart()
        this.drawLineChart()
      selectEquipment(record) {
        if (record.equipmentId === this.equipmentId) return
        this.equipmentId = record.equipmentId
        this.getChartDataByApi()
      },

      navigateToPage(record) {
        if (record.pageName) {
          this.$router.push({
            name: record.pageName,
            params: { equipmentId: this.equipmentId }
          })
        }
      },

      /* 调用接口获取设备效率统计 */
      getGaugeChartDataByApi() {
        this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
        this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
        this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
        this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
        this.gaugeChart1.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        this.gaugeChart2.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        this.gaugeChart3.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        this.gaugeChart4.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })

        signageApi.getEquipmentLevelEfficiencyStatisticsApi(this.equipmentId)
          .then(res => {
            if (res.success) this.gaugeChartData = res.result
            this.drawGaugeChart()
          })
      },

      /* 调用接口获取整年度利用率 */
      getLineChartDataByApi() {
        this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
        this.lineChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })

        signageApi.getEquipmentAnnualEfficiencyStatisticsApi(this.equipmentId)
          .then(res => {
            if (res.success) this.lineChartData = res.result
            this.drawLineChart()
          })
      },

      /* 绘制仪表盘图表 */
@@ -408,61 +438,112 @@

      /* 绘制利用率仪表盘图表 */
      drawGaugeChart1(opt) {
        this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + '利用率'
        option.series[0].name = '利用率'
        option.series[0].data = [56]
        option.series[0].data = [this.gaugeChartData.utilizationRate]
        this.gaugeChart1.setOption(option, true)
        setTimeout(() => this.gaugeChart1.hideLoading(), this.hideLoadingDelayTime)

        this.gaugeChart1.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: {
                isEquipment: true,
                productionId: this.equipmentId,
                tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
              }
            })
          }
        })
      },

      /* 绘制开动率仪表盘图表 */
      drawGaugeChart2(opt) {
        this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + '开动率'
        option.series[0].name = '开动率'
        option.series[0].data = [23]
        option.series[0].data = [this.gaugeChartData.startRate]
        this.gaugeChart2.setOption(option, true)
        setTimeout(() => this.gaugeChart2.hideLoading(), this.hideLoadingDelayTime)

        this.gaugeChart2.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: {
                isEquipment: true,
                productionId: this.equipmentId,
                tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
              }
            })
          }
        })
      },

      /* 绘制开机率仪表盘图表 */
      drawGaugeChart3(opt) {
        this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + '开机率'
        option.series[0].name = '开机率'
        option.series[0].data = [44]
        option.series[0].data = [this.gaugeChartData.openRate]
        this.gaugeChart3.setOption(option, true)
        setTimeout(() => this.gaugeChart3.hideLoading(), this.hideLoadingDelayTime)

        this.gaugeChart3.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: {
                isEquipment: true,
                productionId: this.equipmentId,
                tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
              }
            })
          }
        })
      },

      /* 绘制OEE仪表盘图表 */
      drawGaugeChart4(opt) {
        this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'months').format('M月') + `OEE`
        option.series[0].name = 'OEE'
        option.series[0].data = [78]
        option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
        this.gaugeChart4.setOption(option, true)
        setTimeout(() => this.gaugeChart4.hideLoading(), this.hideLoadingDelayTime)

        this.gaugeChart4.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-OEEAnalysis',
              params: { isEquipment: true, productionId: this.equipmentId }
            })
          }
        })
      },

      /* 绘制折线图 */
      drawLineChart() {
        this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
        const newData = {
          xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          xAxis: this.lineChartData.dateList,
          yAxis: [
            {
              name: '利用率',
              value: [20, 60, 50, 60, 20, 50, 60, 70, 23, 40, 60, 70]
              value: this.lineChartData.dataList.map(item => item.utilizationRate)
            },
            {
              name: '开动率',
              value: [23, 60, 44, 40, 74, 80, 60, 90, 70, 40, 70, 40]
              value: this.lineChartData.dataList.map(item => item.startRate)
            },
            {
              name: 'OEE',
              value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
              value: this.lineChartData.dataList.map(item => item.overallEquipmentEfficiency)
            }
          ],
          yAxisName: '整年度利用率(%)'
@@ -574,6 +655,7 @@
              type: 'value',
              position: 'right',
              splitNumber: 5,
              max: 100,
              axisLabel: {
                show: true,
                color: '#fff'
@@ -598,6 +680,7 @@
          series: seriesData
        }
        this.lineChart.setOption(option, true)
        setTimeout(() => this.lineChart.hideLoading(), this.hideLoadingDelayTime)
      },

      /**

 src/views/dashboard/IndexSignage.vue

@@ -106,32 +106,7 @@
        nextNextMonthMaintenancePlanNum: 0,
        twoMaintenanceChartData: [['-', '-', '-']],
        barChart: '',
        barChartData: [
          {
            'value': '32',
            'name': '401',
            'productionCode': '125487318',
            'productionId': '1729419336207761409'
          },
          {
            'value': '23',
            'name': '406',
            'productionCode': '4212152142',
            'productionId': '1729419361201618945'
          },
          {
            'value': '11',
            'name': '407',
            'productionCode': '321321345',
            'productionId': '1729419381665628161'
          },
          {
            'value': '44',
            'name': '408',
            'productionCode': '536341343',
            'productionId': '1729670118396067842'
          }
        ],
        barChartData: [],
        doubleBarChart: '',
        doubleBarChartData: {},
        efficiencyChartConfig: {},
@@ -141,13 +116,14 @@
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.drawCharts()
      this.getChartDataByApi()
      this.drawProblemChart()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      /* 调用接口获取图表数据汇总方法 */
      getChartDataByApi() {
        this.getRunningStateDataByApi()
        this.getEfficiencyDataByApi()
@@ -155,12 +131,19 @@
        this.getWarrantyMalfunctionDataByApi()
        this.getMonthMaintenanceNumByApi()
        this.getTwoMaintenanceChartDataByApi()
        // this.getBarChartDataByApi()
        this.getBarChartDataByApi()
        this.getDoubleBarChartDataByApi()
      },

      /* 调用接口获取设备运行状态 */
      getRunningStateDataByApi() {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        this.runningStateChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentStatusStatisticsApi()
          .then(res => {
            if (res.success) this.runningStateData = res.result.list
@@ -170,6 +153,13 @@

      /* 调用接口获取设备利用率 */
      getEfficiencyDataByApi() {
        this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
        this.efficiencyChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentUtilizationStatisticsApi()
          .then(res => {
            if (res.success) this.efficiencyData = res.result
@@ -179,9 +169,16 @@

      /* 调用接口获取技术状态 */
      getTechConditionDataByApi() {
        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
        this.techConditionChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentTechnologyStatusListApi()
          .then(res => {
            if (res.success) {
            if (res.success && res.result) {
              this.techConditionData = [
                { value: res.result[0].qualifiedCount, name: '合格' },
                { value: res.result[0].disabledCount, name: '禁用' },
@@ -194,9 +191,16 @@

      /* 调用接口获取设备报修故障 */
      getWarrantyMalfunctionDataByApi() {
        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
        this.warrantyMalfunctionChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getReportRepairEquipmentListApi()
          .then(res => {
            if (res.success) {
            if (res.success && res.result) {
              this.warrantyMalfunctionData = [
                { value: res.result[0].failurTotalCount, name: '报修' },
                { value: res.result[0].stopCount, name: '停机' },
@@ -238,6 +242,13 @@

      /* 调用接口获取设备OEE统计 */
      getBarChartDataByApi() {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        this.barChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentOEEStatistics()
          .then(res => {
            if (res.success) this.barChartData = res.result
@@ -247,6 +258,13 @@

      /* 调用接口获取设备OEE和利用率对比 */
      getDoubleBarChartDataByApi() {
        this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
        this.doubleBarChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentMonthStatisticsApi()
          .then(res => {
            if (res.success) this.doubleBarChartData = res.result
@@ -254,21 +272,8 @@
          })
      },

      /* 绘制图表汇总方法 */
      drawCharts() {
        this.drawRunningStateChart()
        this.drawEfficiencyChart()
        this.drawTechConditionChart()
        this.drawWarrantyMalfunctionChart()
        this.drawMaintenanceChart()
        this.drawBarChart()
        this.drawDoubleBarChart()
        this.drawProblemChart()
      },

      /* 绘制设备运行状态玫瑰饼图 */
      drawRunningStateChart(productionId) {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        const option = {
          height: 300,
          title: {
@@ -346,6 +351,7 @@
          ]
        }
        this.runningStateChart.setOption(option, true)
        this.runningStateChart.hideLoading()

        this.runningStateChart.on('click', params => {
          this.$router.push({
@@ -357,7 +363,6 @@

      /* 绘制设备利用率胶囊图 */
      drawEfficiencyChart() {
        this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
        const data = this.efficiencyData
        const colorArray = [
          {
@@ -388,7 +393,13 @@
            bottom: '#F7B7A0'
          }
        ]
        const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
        const defaultData = []
        const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value
        let yAxisMax
        if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0，则将背景默认值设置为1
        else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值，思路为数据最大值最接近的能被5整除的数字
        const yAxisInterval = yAxisMax / 5 // 同时将刻度值分成5份
        data.forEach(item => defaultData.push(yAxisMax))
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
@@ -431,6 +442,9 @@
              }
            },
            show: true,
            min: 0,
            max: 'dataMax',
            interval: yAxisInterval,
            type: 'value',
            axisTick: {
              show: false
@@ -546,7 +560,7 @@
        }
        option.title.text = `${moment().format('M月D日')}利用率`
        this.efficiencyChart.setOption(option, true)

        this.efficiencyChart.hideLoading()
        this.efficiencyChart.on('click', params => {
          // 点击触发的为柱状体，除此除外是标题
          if (params.componentType === 'series') {
@@ -576,7 +590,6 @@

      /* 绘制技术状态饼图 */
      drawTechConditionChart() {
        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
        const option = {
          height: 300,
          title: {
@@ -651,11 +664,11 @@
          ]
        }
        this.techConditionChart.setOption(option, true)
        this.techConditionChart.hideLoading()
      },

      /* 绘制设备报修故障饼图 */
      drawWarrantyMalfunctionChart() {
        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
        const option = {
          height: 300,
          title: {
@@ -730,6 +743,7 @@
          ]
        }
        this.warrantyMalfunctionChart.setOption(option, true)
        this.warrantyMalfunctionChart.hideLoading()
      },

      /* 绘制车间保养滚动表 */
@@ -749,8 +763,13 @@

      /* 绘制单柱图 */
      drawBarChart() {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
        const defaultData = []
        const dataMax = +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value
        let yAxisMax
        if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0，则将背景默认值设置为1
        else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值，思路为数据最大值最接近的能被5整除的数字
        const yAxisInterval = yAxisMax / 5 // 同时将刻度值分成5份
        this.barChartData.forEach(item => defaultData.push(yAxisMax))
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
@@ -812,7 +831,9 @@
          }],
          yAxis: [{
            name: '%',
            max: 100,
            min: 0,
            max: yAxisMax,
            interval: yAxisInterval,
            axisLabel: {
              formatter: '{value}',
              color: '#e2e9ff'
@@ -868,6 +889,7 @@
        }
        option.title.text = moment().subtract(1, 'months').format('M月') + `OEE车间`
        this.barChart.setOption(option, true)
        this.barChart.hideLoading()

        this.barChart.on('click', params => {
          console.log('params', params)
@@ -886,7 +908,6 @@

      /* 绘制双柱图 */
      drawDoubleBarChart() {
        this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
        const option = {
          color: ['#409EFF', '#0FC61A'],
          tooltip: {
@@ -1032,6 +1053,7 @@
          ]
        }
        this.doubleBarChart.setOption(option, true)
        this.doubleBarChart.hideLoading()
      },

      /* 绘制问题滚动表 */

 src/views/dashboard/WorkshopSectionSignage.vue

@@ -73,19 +73,21 @@
      <div style="width: 38%" class="middle-col">
        <dv-border-box-9 style="padding: 15px">
          <div id="running_state_chart" style="width:100%;height: 400px;"></div>
          <div id="line_chart" style="width:100%;height: 400px;"></div>
          <div id="first7DaysEfficiency_chart" style="width:100%;height: 400px;"></div>
        </dv-border-box-9>
      </div>

      <div style="width: 30%" class="right-col">
        <dv-border-box-9 style="padding: 15px">
          <a-form layout="inline"
                  @keyup.enter.native="$emit('switchToNextSignage', { signageName: 'Equipment', productionCode: equipmentId })">
                  @keyup.enter.native="switchToEquipmentSignage">
            <a-form-item label="设备编号">
              <a-auto-complete
                v-model="equipmentId"
                @select="handleSelectChange"
                placeholder="回车键查询"
                :allowClear="true"
                :filter-option="filterOption"
                :dataSource="first7DaysEfficiencyData.mdcEquipmentList.map(item=>item.equipmentId)"
                size="large"
              />
            </a-form-item>
@@ -145,8 +147,11 @@
        maintenanceOverdueNum: 0,
        nextMonthMaintenancePlanNum: 0,
        nextNextMonthMaintenancePlanNum: 0,
        lineChart: '',
        lineChartData: {},
        first7DaysEfficiencyChart: '',
        first7DaysEfficiencyData: {
          dataList: [],
          mdcEquipmentList: []
        },
        gaugeChart1: '',
        gaugeChart2: '',
        gaugeChart3: '',
@@ -164,30 +169,37 @@
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.drawCharts()
      this.getChartDataByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
      if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
      if (this.lineChartCarouselTime) clearInterval(this.lineChartCarouselTime)
      if (this.first7DaysEfficiencyChartCarouselTime) clearInterval(this.first7DaysEfficiencyChartCarouselTime)
    },
    methods: {
      /* 调用接口获取图表数据汇总方法 */
      getChartDataByApi() {
        this.getTechConditionDataByApi()
        this.getWarrantyMalfunctionDataByApi()
        this.getRunningStateDataByApi()
        this.getMonthMaintenanceNumByApi()
        this.getLineChartDataByApi()
        this.getFirst7DaysEfficiencyDataByApi()
        this.getGaugeChartDataByApi()
        this.getBarChartDataByApi()
      },

      /* 调用接口获取技术状态 */
      getTechConditionDataByApi() {
        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
        this.techConditionChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentTechnologyStatusListApi(this.productionCode)
          .then(res => {
            if (res.success) {
            if (res.success && res.result) {
              this.techConditionData = [
                { value: res.result[0].qualifiedCount, name: '合格' },
                { value: res.result[0].disabledCount, name: '禁用' },
@@ -200,9 +212,16 @@

      /* 调用接口获取设备报修故障 */
      getWarrantyMalfunctionDataByApi() {
        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
        this.warrantyMalfunctionChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getReportRepairEquipmentListApi(this.productionCode)
          .then(res => {
            if (res.success) {
            if (res.success && res.result) {
              this.warrantyMalfunctionData = [
                { value: res.result[0].failurTotalCount, name: '报修' },
                { value: res.result[0].stopCount, name: '停机' },
@@ -235,6 +254,13 @@

      /* 调用接口获取设备运行状态 */
      getRunningStateDataByApi() {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        this.runningStateChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
          .then(res => {
            if (res.success) this.runningStateData = res.result.list
@@ -243,26 +269,67 @@
      },

      /* 调用接口获取前7天利用率 */
      getLineChartDataByApi() {
      getFirst7DaysEfficiencyDataByApi() {
        this.first7DaysEfficiencyChart = this.$echarts.init(document.getElementById('first7DaysEfficiency_chart'))
        this.first7DaysEfficiencyChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentDayUtilizationStatisticsApi(this.productionCode)
          .then(res => {
            if (res.success) this.lineChartData = res.result
            this.drawLineChart()
            if (res.success) this.first7DaysEfficiencyData = res.result
            this.drawFirst7DaysEfficiencyDataChart()
          })
      },

      /* 调用接口获取设备效率统计 */
      getGaugeChartDataByApi() {
        this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
        this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
        this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
        this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
        this.gaugeChart1.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        this.gaugeChart2.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        this.gaugeChart3.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        this.gaugeChart4.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentEfficiencyStatisticsApi(this.productionCode)
          .then(res => {
            console.log('res=', res)
            if (res.success) this.gaugeChartData = res.result
            this.drawGaugeChart(res.result.productionId)
            this.drawGaugeChart()
          })
      },

      /* 调用接口获取上月OEE */
      getBarChartDataByApi() {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        this.barChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentOEEMonthStatisticsApi(this.productionCode)
          .then(res => {
            if (res.success) {
@@ -277,18 +344,8 @@
          })
      },

      /* 绘制图表汇总方法 */
      drawCharts() {
        this.drawRunningStateChart()
        this.drawTechConditionChart()
        this.drawWarrantyMalfunctionChart()
        this.drawGaugeChart()
        this.drawBarChart()
      },

      /* 绘制技术状态饼图 */
      drawTechConditionChart() {
        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
@@ -362,11 +419,11 @@
          ]
        }
        this.techConditionChart.setOption(option, true)
        this.techConditionChart.hideLoading()
      },

      /* 绘制设备报修故障饼图 */
      drawWarrantyMalfunctionChart() {
        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
@@ -440,11 +497,11 @@
          ]
        }
        this.warrantyMalfunctionChart.setOption(option, true)
        this.warrantyMalfunctionChart.hideLoading()
      },

      /* 绘制设备运行状态玫瑰饼图 */
      drawRunningStateChart(productionId) {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
@@ -520,6 +577,7 @@
          ]
        }
        this.runningStateChart.setOption(option, true)
        this.runningStateChart.hideLoading()

        this.runningStateChart.on('click', params => {
          this.$router.push({
@@ -529,35 +587,35 @@
        })
      },

      /* 绘制折线图 */
      drawLineChart() {
        this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
        this.lineChartData.equipmentIdList.forEach(item => {
          if (!this.lineChartData.dataList.map(item => item.equipmentId).includes(item)) {
      /* 绘制前7天利用率柱图 */
      drawFirst7DaysEfficiencyDataChart() {
        this.first7DaysEfficiencyData.mdcEquipmentList.forEach(item => {
          if (!this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId).includes(item)) {
            const equipmentIdObj = {
              equipmentId: item,
              equipmentId: item.equipmentId,
              equipmentName: item.equipmentName,
              openRate: 0,
              startRate: 0,
              utilizationRate: 0
            }
            this.lineChartData.dataList.push(equipmentIdObj)
            this.first7DaysEfficiencyData.dataList.push(equipmentIdObj)
          }
        })
        const equipmentIdList = this.lineChartData.dataList.map(item => item.equipmentId)
        const equipmentIdList = this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId)
        const newData = {
          xAxis: equipmentIdList,
          yAxis: [
            {
              name: '利用率',
              value: this.lineChartData.dataList.map(item => item.utilizationRate)
              value: this.first7DaysEfficiencyData.dataList.map(item => item.utilizationRate)
            },
            {
              name: '开动率',
              value: this.lineChartData.dataList.map(item => item.startRate)
              value: this.first7DaysEfficiencyData.dataList.map(item => item.startRate)
            },
            {
              name: '开机率',
              value: this.lineChartData.dataList.map(item => item.openRate)
              value: this.first7DaysEfficiencyData.dataList.map(item => item.openRate)
            }
          ],
          yAxisName: '前7天利用率(%)'
@@ -569,7 +627,7 @@
        seriesData = newData.yAxis.map((item1, index1) => {
          return {
            name: item1.name,
            type: 'line',
            type: 'bar',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
@@ -577,6 +635,9 @@
            },
            lineStyle: {
              width: 2
            },
            markPoint: {
              show: true
            },
            yAxisIndex: 1,
            data: item1.value // 折线图的数据
@@ -618,7 +679,6 @@
            }
          },
          xAxis: {
            triggerEvent: true,
            data: newData.xAxis || [],
            axisLabel: {
              interval: 0,
@@ -669,6 +729,7 @@
              type: 'value',
              position: 'right',
              splitNumber: 5,
              max: 100,
              axisLabel: {
                show: true,
                color: '#fff'
@@ -696,17 +757,40 @@
            startValue: 0, // 从头开始。
            endValue: 6 // 一次性展示几个
          }
          // toolbox: {
          //   show: true,
          //   feature: {
          //     mark: { show: true },
          //     magicType: { show: true, type: ['line', 'bar'] },
          //     restore: { show: true },
          //     saveAsImage: { show: true, name: '前7天利用率统计图', pixelRatio: 1 }
          //   }
          // }
        }
        this.lineChart.setOption(option, true)
        this.first7DaysEfficiencyChart.setOption(option, true)
        this.first7DaysEfficiencyChart.hideLoading()

        if (this.lineChartData.equipmentIdList.length <= 7) return
        this.lineChartCarouselTime = setInterval(() => {
        this.first7DaysEfficiencyChart.on('click', params => {
          this.$router.push({
            name: 'mdc-base-StatisticsChart',
            params: {
              isEquipment: true,
              productionId: params.name,
              tierName: this.first7DaysEfficiencyData.dataList.find(item => item.equipmentId === params.name).equipmentName
            }
          })
        })


        // 设备列表大于7个时开启自动轮播
        if (this.first7DaysEfficiencyData.mdcEquipmentList.length <= 7) return
        this.first7DaysEfficiencyChartCarouselTime = setInterval(() => {
          newData.xAxis.push(newData.xAxis.shift())
          newData.yAxis.forEach(item => item.value.push(item.value.shift()))
          this.$nextTick(() => {
            this.lineChart.setOption(option, true)
            this.first7DaysEfficiencyChart.setOption(option, true)
          })
        }, 3000)
        }, 30000)
      },

      /* 绘制仪表盘图表 */
@@ -804,12 +888,12 @@

      /* 绘制利用率仪表盘图表 */
      drawGaugeChart1(opt) {
        this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + `利用率`
        option.series[0].name = '利用率'
        option.series[0].data = [this.gaugeChartData.utilizationRate]
        this.gaugeChart1.setOption(option, true)
        this.gaugeChart1.hideLoading()

        this.gaugeChart1.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -834,6 +918,7 @@
        option.series[0].name = '开动率'
        option.series[0].data = [this.gaugeChartData.startRate]
        this.gaugeChart2.setOption(option, true)
        this.gaugeChart2.hideLoading()

        this.gaugeChart2.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -858,6 +943,7 @@
        option.series[0].name = '开机率'
        option.series[0].data = [this.gaugeChartData.openRate]
        this.gaugeChart3.setOption(option, true)
        this.gaugeChart3.hideLoading()

        this.gaugeChart3.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -882,17 +968,14 @@
        option.series[0].name = 'OEE'
        option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
        this.gaugeChart4.setOption(option, true)
        this.gaugeChart4.hideLoading()

        this.gaugeChart4.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: {
                isEquipment: false,
                productionId: this.gaugeChartData.productionId,
                tierName: this.gaugeChartData.productionName
              }
              name: 'mdc-base-OEEAnalysis',
              params: { isEquipment: false, productionId: this.gaugeChartData.productionId }
            })
          }
        })
@@ -900,7 +983,6 @@

      /* 绘制单柱图 */
      drawBarChart() {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        const xAisData = this.barChartData.map(item => item.name)
        const option = {
          height: 260,
@@ -960,7 +1042,7 @@
            }],
          yAxis: [
            {
              // name: '数量',
              name: '%',
              // nameLocation: 'middle',
              // nameGap: 30, // x轴name与横坐标轴线的间距
              position: 'left',
@@ -1024,7 +1106,17 @@
        }
        option.title.text = `${moment().subtract(1, 'months').format('M')}月OEE`
        this.barChart.setOption(option, true)
        this.barChart.hideLoading()

        this.barChart.on('click', params => {
          const productionId = params.name
          this.$router.push({
            name: 'mdc-base-OEEAnalysis',
            params: { isEquipment: true, productionId }
          })
        })

        // 设备列表大于6个时开启自动轮播
        if (this.barChartData.length <= 6) return
        this.barChartCarouselTime = setInterval(() => {
          this.barChartData.push(this.barChartData.shift())
@@ -1035,15 +1127,31 @@
        }, 3000)
      },

      handleSelectChange(value) {
        this.equipmentId = value
      },

      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },

      switchToEquipmentSignage() {
        if (this.equipmentId) {
          this.$emit('switchToNextSignage', {
            signageName: 'Equipment',
            productionCode: this.equipmentId
          })
        }
      },

      /**
       * 窗口尺寸变化时触发
       * 调整图表尺寸以适应分辨率
       */
      handleWindowResize() {
        if (this.techConditionChart) this.techConditionChart.resize()
        if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
        if (this.runningStateChart) this.runningStateChart.resize()
        if (this.lineChart) this.lineChart.resize()
        if (this.first7DaysEfficiencyChart) this.first7DaysEfficiencyChart.resize()
        if (this.gaugeChart1) this.gaugeChart1.resize()
        if (this.gaugeChart2) this.gaugeChart2.resize()
        if (this.gaugeChart3) this.gaugeChart3.resize()
@@ -1128,6 +1236,10 @@
    color: #fff;
  }

  /deep/ .ant-select {
    color: #fff;
  }

  /deep/ .ant-input {
    border: 1px solid #689ACA;
    color: #fff;

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

@@ -609,10 +609,14 @@
            const { isEquipment, productionId, tierName } = this.$route.params
            // 判断是否是从看板跳转过来，productionId 存在则为从看板跳转
            if (productionId) {
              _this.$set(this.queryParam, 'tierName', tierName)
              // 判断是否点击的是设备层级
              if (!isEquipment) _this.$set(this.queryParams, 'parentId', productionId)
              else _this.$set(this.queryParams, 'equipmentId', productionId)
              if (!isEquipment) {
                _this.$set(this.queryParams, 'parentId', productionId)
                _this.$set(this.queryParam, 'tierName', tierName)
              } else {
                _this.$set(this.queryParams, 'equipmentId', productionId)
                _this.$set(this.queryParam, 'tierName', productionId + '/' + tierName)
              }
            } else {
              if (res.result[0]) {
                _this.$set(this.queryParam, 'tierName', res.result[0].title)

 src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue

@@ -1,43 +1,43 @@
<template>
  <div class="deviceCalendar_list">
      <!-- 查询区域 -->
      <div>
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24" style="width: 100%">
              <a-col :md="6" :sm="6">
                <a-form-item label="时间">
                  <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/>
                </a-form-item>
              </a-col>
              <a-col :md="2" :sm="2" :xs="2">
                <a-space>
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">配置</a-button>
                </a-space>
              </a-col>
              <!--<a-col :md="2" :sm="2" :xs="2">-->
                <!--<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
              <!--</a-col>-->
              <!--<a-col :md="2" :sm="2">-->
                <!--&lt;!&ndash;//沈飞&ndash;&gt;-->
                <!--<a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">配置</a-button>-->
    <!-- 查询区域 -->
    <div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24" style="width: 100%">
            <a-col :md="6" :sm="6">
              <a-form-item label="时间">
                <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="2" :xs="2">
              <a-space>
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">配置</a-button>
              </a-space>
            </a-col>
            <!--<a-col :md="2" :sm="2" :xs="2">-->
            <!--<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
            <!--</a-col>-->
            <!--<a-col :md="2" :sm="2">-->
            <!--&lt;!&ndash;//沈飞&ndash;&gt;-->
            <!--<a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">配置</a-button>-->

                <!--&lt;!&ndash;<a-button type="primary" @click="handleAdd" icon="plus">配置</a-button>&ndash;&gt;-->
              <!--</a-col>-->
            <!--&lt;!&ndash;<a-button type="primary" @click="handleAdd" icon="plus">配置</a-button>&ndash;&gt;-->
            <!--</a-col>-->


            </a-row>
          </a-form>
        </div>
          </a-row>
        </a-form>
      </div>
    </div>

      <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList">
        <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
                 size="middle" rowKey="id" :columns="columns"
                 @change="handleTableChange"  class="ant-table-striped"
                 :dataSource="dataSource" :pagination="ipagination"
                 :loading="loading"  :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
    <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList">
      <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
               size="middle" rowKey="id" :columns="columns"
               @change="handleTableChange" class="ant-table-striped"
               :dataSource="dataSource" :pagination="ipagination"
               :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
          <span slot="action"
                slot-scope="text, record">
            <a-popconfirm
@@ -47,19 +47,19 @@
                  <a>删除</a>
                </a-popconfirm>
          </span>
          <span slot="isDaySpan" slot-scope="text, record">
        <span slot="isDaySpan" slot-scope="text, record">
           <span v-if="text == 'true'">是</span>
           <span v-if="text == 'false'">否</span>
         </span>
        </a-table>
      </div>
      <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model>
      </a-table>
    </div>
    <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model>
  </div>
</template>

<script>
  import moment from 'moment'
  import { filterObj } from '@/utils/util';
  import { filterObj } from '@/utils/util'
  import { putAction, getAction } from '@/api/manage'
  import DeviceCalendarModel from './DeviceCalendarModel'
  import DeviceCalendarAdd from './DeviceCalendarAdd'
@@ -70,23 +70,23 @@

  export default {
    name: 'DeviceCalendarList',
    components: { DeviceCalendarModel,DeviceCalendarAdd ,DeviceCalendarListModel},
    components: { DeviceCalendarModel, DeviceCalendarAdd, DeviceCalendarListModel },
    mixins: [JeecgListMixin],
    data() {
      return {
        dates:[],
        dates: [],
        yearAndMonth: {},
        identifying: [],
        queryParam: {},
        disableMixinCreated: true,
        scrollY:465,
        scrollY: 465,
        /* 分页参数 */
        ipagination:{
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
@@ -97,98 +97,101 @@
            title: '日期',
            align: 'center',
            dataIndex: 'effectiveDate',
            width:100,
            width: 100
          },
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId',
            width:150
            width: 150
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentName',
            width:150
            width: 150
          },
          {
            title: '班制',
            align: 'center',
            dataIndex: 'shiftName',
            width:150
            width: 150
          },
          {
            title: '班次',
            align: 'center',
            dataIndex: 'shiftSubName',
            width:150
            width: 150
          },
          {
            title: '开始时间',
            align: 'center',
            dataIndex: 'startDate',
            width:140
            width: 140
          },
          {
            title: '结束时间',
            align: 'center',
            dataIndex: 'endDate',
            width:140
            width: 140
          },
          {
            title: '是否跨天',
            align: 'center',
            dataIndex: 'isDaySpan',
            scopedSlots: { customRender: 'isDaySpan' },
            width:100
            width: 100
          },
          {
            title: '开始休息时间',
            align: 'center',
            dataIndex: 'sleepStartDate',
            width:140
            width: 140
          },
          {
            title: '结束休息时间',
            align: 'center',
            dataIndex: 'sleepEndDate',
            width:140
            width: 140
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            align: 'center',
            width: 100,
            scopedSlots: { customRender: 'action' },
            fixed:'right'
            fixed: 'right'
          }
        ],
        checkedList: ['lyl'],
        dataList: [],
        url: {
          list: '/mdc/mdcDeviceCalendar/list',
          delete:'/mdc/mdcDeviceCalendar/delete'
          delete: '/mdc/mdcDeviceCalendar/delete'
        }
      }
    },
    props: { node: {}, Type:'' },
    props: { node: {}, Type: '' },
    created() {
      const { equipmentId } = this.$route.params
      if (equipmentId) this.queryParam.equipmentId = equipmentId

      this.dates = [moment().subtract('days', 0), 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.queryParam.typeTree = '1'
      this.loadData()
    },
    mounted(){
      window.addEventListener('resize',this.handleWindowResize)
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.handleWindowResize()
    },
    beforeDestroy(){
      window.removeEventListener('resize',this.handleWindowResize)
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    watch: {
      Type(valmath){
        this.dataList = [];
      Type(valmath) {
        this.dataList = []
        this.queryParam.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
@@ -196,7 +199,7 @@
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId != null) {
            this.queryParam.equipmentId = val.equipmentId
            this.queryParam.parentId = " "
            this.queryParam.parentId = ' '
            this.ipagination.current = 1
            this.loadData()
          } else {
@@ -221,41 +224,40 @@
        this.loadData()
      },
      loadData(arg) {
        this.dataSource = [];
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
        this.dataSource = []
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
          this.ipagination.current = 1
        }

        var params = this.getQueryParams();//查询条件
        var params = this.getQueryParams()//查询条件

        if(!params){
          return false;
        if (!params) {
          return false
        }
        params.startTime = this.queryParam.startTime;
        params.endTime = this.queryParam.endTime;
        params.parentId = this.queryParam.parentId;
        params.equipmentId = this.queryParam.equipmentId;
        params.orderByName = "ascend";
        this.loading = true;
        params.startTime = this.queryParam.startTime
        params.endTime = this.queryParam.endTime
        params.parentId = this.queryParam.parentId
        params.equipmentId = this.queryParam.equipmentId
        params.orderByName = 'ascend'
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            // console.log(res)
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------

            this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            this.dataSource = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
@@ -265,51 +267,55 @@
      handleAdd() {
        let record = {}
        if (JSON.stringify(this.node) != '{}') {
            record = { equipmentId: this.node.equipmentId, equmentName: this.node.equipmentName }
          record = { equipmentId: this.node.equipmentId, equmentName: this.node.equipmentName }
        }
        this.$refs.modalForm.add(record)
        this.$refs.modalForm.title = '设备工作日历配置'
        this.$refs.modalForm.disableSubmit = false
      },

      handleWindowResize(){
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2)
      handleWindowResize() {
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0, -2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2)
        this.scrollY = boxHeight - tableHeadHeight - 50
      }
    }
  }
</script>
<style scoped>
  .deviceCalendar_list{
  .deviceCalendar_list {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

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

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .deviceCalendar_list{
      height: 664px!important;

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .deviceCalendar_list {
      height: 664px !important;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .deviceCalendar_list{
      height: 565px!important;

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

  @media screen and (max-width: 1280px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }