Merge branch 'master' of http://117.34.109.166:18448/r/vue_mdc_430 into dev...

qushaowei

2024-03-22 86fe08ff297b2f92e927a90bea7cd6906da61bea

 src/views/dashboard/IndexSignage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1063 @@
<template>
  <div class="page-container">
    <!--<div class="page-title">-->
    <!--<slot name="index_signage_nav"></slot>-->
    <!--&lt;!&ndash;<dv-decoration-11 class="workshop-nav" v-for="item in workshopList">&ndash;&gt;-->
    <!--&lt;!&ndash;{{item.workshopName}}&ndash;&gt;-->
    <!--&lt;!&ndash;</dv-decoration-11>&ndash;&gt;-->
    <!--</div>-->
    <div class="content-container">
      <div style="width: 25%" class="left-col">
        <dv-border-box-9 style="padding: 30px 20px">
          <!--<div class="first-title">M D C å…¥ ç½‘ æ€» æ•° : 6 0 3 å°</div>-->
          <div id="running_state_chart" style="width:100%;height: 300px;margin-top: 10px"></div>
          <!--<div class="second-title">设备利用率</div>-->
          <!--<dv-capsule-chart :config="efficiencyChartConfig" style="width:100%;height:460px"/>-->
          <div id="efficiency_chart" style="width: 100%;height: 465px"></div>
        </dv-border-box-9>
      </div>
      <div style="width: 42%" class="middle-col">
        <dv-border-box-9 style="padding: 30px 20px">
          <!--<div class="first-title">设 å¤‡ å° è´¦ æ€» æ•° : 1 0 2 2 å°</div>-->
          <div style="display: flex">
            <div id="tech_condition_chart" style="width:50%;height: 330px;margin-top: 10px"></div>
            <div id="warranty_malfunction_chart" style="width:50%;height: 330px;margin-top: 10px"></div>
          </div>
          <div class="support-plan-container">
            <!--<div v-for="item in supportPlanList" class="support-plan-item"-->
            <!--:style="{background:item.background}">-->
            <!--<div>{{item.label}}</div>-->
            <!--<div class="plan-value-container">-->
            <!--<div class="plan-value">{{item.value}}</div>-->
            <!--<div>台</div>-->
            <!--</div>-->
            <!--</div>-->
            <div class="support-plan-item" style="background:#719D8E">
              <div>本月三保计划</div>
              <div class="plan-value-container">
                <div class="plan-value">{{thisMonthMaintenancePlanNum}}</div>
                <div>台</div>
              </div>
            </div>
            <div class="support-plan-item" style="background:#409EFF">
              <div>本月完成</div>
              <div class="plan-value-container">
                <div class="plan-value">{{thisMonthMaintenanceRealNum}}</div>
                <div>台</div>
              </div>
            </div>
            <div class="support-plan-item" style="background:#A8985D">
              <div>下月三保计划</div>
              <div class="plan-value-container">
                <div class="plan-value">{{nextMonthMaintenancePlanNum}}</div>
                <div>台</div>
              </div>
            </div>
            <div class="support-plan-item" style="background:#58D9F9">
              <div>下下月三保计划</div>
              <div class="plan-value-container">
                <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</div>
                <div>台</div>
              </div>
            </div>
          </div>
          <div style="padding: 0 55px;margin-top: 10px">
            <dv-scroll-board :config="maintenanceConfig" style="width:100%;height:220px"/>
          </div>
        </dv-border-box-9>
      </div>
      <div style="width: 32%">
        <dv-border-box-9>
          <div id="bar_chart" style="width:100%;height: 290px;"></div>
          <div id="double_bar_chart" style="width:100%;height: 285px;"></div>
          <div style="padding: 0 20px;margin-top: 10px">
            <dv-scroll-board :config="problemConfig" style="width:100%;height:220px"/>
          </div>
        </dv-border-box-9>
      </div>
    </div>
  </div>
</template>

<script>
  import signageApi from '@/api/signage'

  export default {
    name: 'IndexSignage',
    data() {
      return {
        runningStateChart: '',
        runningStateData: [
          { value: '0', name: '关机' },
          { value: '0', name: '报警' },
          { value: '0', name: '待机' },
          { value: '0', name: '运行' }
        ],
        efficiencyChart: '',
        efficiencyData: [],
        techConditionChart: '',
        techConditionData: [
          { value: '0', name: '合格' },
          { value: '0', name: '禁用' },
          { value: '0', name: '限用' }
        ],
        warrantyMalfunctionChart: '',
        warrantyMalfunctionData: [
          { value: '12', name: '报修' },
          { value: '10', name: '停机' },
          { value: '8', name: '运行' }
        ],
        thisMonthMaintenancePlanNum: 0,
        thisMonthMaintenanceRealNum: 0,
        nextMonthMaintenancePlanNum: 0,
        nextNextMonthMaintenancePlanNum: 0,
        twoMaintenanceChartData: [['-', '-', '-']],
        barChart: '',
        barChartData: [],
        doubleBarChart: '',
        doubleBarChartData: {},
        efficiencyChartConfig: {},
        maintenanceConfig: {},
        problemConfig: {}
      }
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.drawCharts()
      this.getChartDataByApi()
    },
    activated() {
      console.log('触发activated')
      this.handleWindowResize()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      getChartDataByApi() {
        this.getRunningStateDataByApi()
        this.getEfficiencyDataByApi()
        this.getTechConditionDataByApi()
        this.getWarrantyMalfunctionDataByApi()
        this.getMonthMaintenanceNumByApi()
        this.getTwoMaintenanceChartDataByApi()
        this.getBarChartDataByApi()
        this.getDoubleBarChartDataByApi()
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–设备运行状态 */
      getRunningStateDataByApi() {
        signageApi.getEquipmentStatusStatisticsApi()
          .then(res => {
            if (res.success) this.runningStateData = res.result
            this.drawRunningStateChart()
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–设备利用率 */
      getEfficiencyDataByApi() {
        signageApi.getEquipmentUtilizationStatisticsApi()
          .then(res => {
            if (res.success) this.efficiencyData = res.result
            this.drawEfficiencyChart()
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–技术状态 */
      getTechConditionDataByApi() {
        signageApi.getEquipmentTechnologyStatusListApi()
          .then(res => {
            if (res.success) {
              this.techConditionData = [
                { value: res.result[0].qualifiedCount, name: '合格' },
                { value: res.result[0].disabledCount, name: '禁用' },
                { value: res.result[0].limitedUseCount, name: '限用' }
              ]
            }
            this.drawTechConditionChart()
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–设备报修故障 */
      getWarrantyMalfunctionDataByApi() {
        signageApi.getReportRepairEquipmentListApi()
          .then(res => {
            if (res.success) {
              this.warrantyMalfunctionData = [
                { value: res.result[0].failurTotalCount, name: '报修' },
                { value: res.result[0].stopCount, name: '停机' },
                { value: res.result[0].noStopCount, name: '运行' }
              ]
            }
            this.drawWarrantyMalfunctionChart()
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–三保计划 */
      getMonthMaintenanceNumByApi() {
        signageApi.getThisMonthMaintenanceListApi()
          .then(res => {
            if (res.success && res.result) this.thisMonthMaintenancePlanNum = res.result[0].totalCount
          })
        signageApi.getThisMonthMaintenanceFinishListApi()
          .then(res => {
            if (res.success && res.result) this.thisMonthMaintenanceRealNum = res.result[0].totalCount
          })
        signageApi.getNextMonthMaintenanceList()
          .then(res => {
            if (res.success && res.result) this.nextMonthMaintenancePlanNum = res.result[0].totalCount
          })
        signageApi.getNextNextMonthMaintenanceListApi()
          .then(res => {
            if (res.success && res.result) this.nextNextMonthMaintenancePlanNum = res.result[0].totalCount
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–二保计划 */
      getTwoMaintenanceChartDataByApi() {
        signageApi.getTwoMaintenancePlanListApi()
          .then(res => {
            if (res.success && res.result) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content])
            this.drawMaintenanceChart()
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–设备OEE统计 */
      getBarChartDataByApi() {
        signageApi.getEquipmentOEEStatistics()
          .then(res => {
            if (res.success) this.barChartData = res.result
            this.drawBarChart()
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–设备OEE和利用率对比 */
      getDoubleBarChartDataByApi() {
        signageApi.getEquipmentMonthStatisticsApi()
          .then(res => {
            if (res.success) this.doubleBarChartData = res.result
            this.drawDoubleBarChart()
          })
      },

      /* ç»˜åˆ¶å›¾è¡¨æ±‡æ€»æ–¹æ³• */
      drawCharts() {
        this.drawRunningStateChart()
        this.drawEfficiencyChart()
        this.drawTechConditionChart()
        this.drawWarrantyMalfunctionChart()
        this.drawMaintenanceChart()
        this.drawBarChart()
        this.drawDoubleBarChart()
        this.drawProblemChart()
      },

      /* ç»˜åˆ¶è®¾å¤‡è¿è¡ŒçŠ¶æ€çŽ«ç‘°é¥¼å›¾ */
      drawRunningStateChart() {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        const option = {
          height: 300,
          title: {
            show: true, // æ˜¯å¦æ˜¾ç¤ºæ ‡é¢˜ï¼Œé»˜è®¤ä¸ºtrue
            text: '设备运行状态统计', // ä¸»æ ‡é¢˜æ–‡æœ¬
            x: 'center', // æ ‡é¢˜æ°´å¹³å®‰æ”¾ä½ç½®ï¼Œå¯é€‰å€¼ä¸º'left'、'center'、'right'或具体的水平坐标值
            y: 'top', // æ ‡é¢˜åž‚直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
            textStyle: {
              // ä¸»æ ‡é¢˜æ–‡æœ¬æ ·å¼
              fontSize: 18,
              fontWeight: 'normal',
              color: '#00A8AC'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              if (params.name !== '') {
                return `${params.name}:${params.value}(${params.percent}%)`
              }
            }
          },
          legend: {
            top: 25,
            left: 0,
            orient: 'vertical',
            right: '10%',
            // bottom: "0",
            itemWidth: 14,
            itemHeight: 14,
            icon: 'roundRect',
            itemGap: 15,
            textStyle: {
              color: 'inherit',
              fontSize: 14,
              padding: [0, 0, 0, 0]
            },
            data: ['关机', '报警', '待机', '运行']
          },
          grid: {
            containLabel: true
          },
          series: [
            {
              type: 'pie',
              roseType: 'angle', // çŽ«ç‘°å›¾
              // selectedMode: "single",
              radius: ['40%', '55%'],
              center: ['50%', '60%'],
              color: [
                '#686869',
                '#AA6349',
                '#968A5E',
                '#5D975D'
              ],
              label: {
                position: 'outside',
                show: true,
                color: 'inherit',
                // textBorderColor: 'inherit',
                // textBorderWidth: 1,
                fontSize: 16,
                formatter: function(params) {
                  if (params.name !== '') {
                    return `${params.name}:${params.value}`
                  }
                }
              },
              labelLine: {
                show: true,
                length2: 10,
                length: 10
              },
              data: this.runningStateData
            }
          ]
        }
        this.runningStateChart.setOption(option, true)
      },

      /* ç»˜åˆ¶è®¾å¤‡åˆ©ç”¨çŽ‡èƒ¶å›Šå›¾ */
      drawEfficiencyChart() {
        this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
        const data = this.efficiencyData
        const colorArray = [
          {
            top: '#61927F',
            bottom: '#61927F'
          }, {
            top: '#629480',
            bottom: '#629480'
          },
          {
            top: '#66DFE2',
            bottom: '#66DFE2'
          }, {
            top: '#9FE6B8',
            bottom: '#9FE6B8'
          },
          {
            top: '#FEDA5B',
            bottom: '#FEDA5B'
          },
          {
            top: '#FF9F7F',
            bottom: '#FF9F7F'
          },
          {
            top: '#F87091',
            bottom: '#F87091'
          }
        ]
        const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
        const option = {
          title: {
            show: true, // æ˜¯å¦æ˜¾ç¤ºæ ‡é¢˜ï¼Œé»˜è®¤ä¸ºtrue
            text: '设备利用率', // ä¸»æ ‡é¢˜æ–‡æœ¬
            x: 'left', // æ ‡é¢˜æ°´å¹³å®‰æ”¾ä½ç½®ï¼Œå¯é€‰å€¼ä¸º'left'、'center'、'right'或具体的水平坐标值
            y: 'top', // æ ‡é¢˜åž‚直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
            textStyle: {
              // ä¸»æ ‡é¢˜æ–‡æœ¬æ ·å¼
              fontSize: 18,
              fontWeight: 'normal',
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '0%',
            top: '6%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },
            formatter: function(params) {
              return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' +
                '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color.colorStops[params[0].dataIndex].color + '"></span>' + params[0].seriesName + ' : ' + params[0].value + '%'
            }
          },
          xAxis: {
            name: '单位',
            nameTextStyle: {
              color: '#fff'
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: '#fff'
              }
            },
            show: true,
            type: 'value',
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            triggerEvent: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#d9e7fa',
                fontSize: '14',
                fontWeight: 'bolder'
              },
              formatter: function(value) {
                return `${data.find(item => item.productionCode === value).name}`
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: data.map(item => item.productionCode)
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontSize: '14'
              },
              formatter: function(value) {
                return `${value}%`
              }
            },
            data: data
          }],
          series: [{
            name: '利用率',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              barBorderRadius: 100,
              color: function(params) {
                let num = colorArray.length
                return {
                  type: 'linear',
                  colorStops: [{
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }]
                }
              }
            },
            barWidth: 12,
            data: data
          },
            {
              name: '背景',
              type: 'bar',
              barWidth: 12,
              barGap: '-100%',
              data: defaultData,
              itemStyle: {
                color: '#11294d',
                barBorderRadius: 100
              }
            }
          ]
        }
        this.efficiencyChart.setOption(option, true)

        this.efficiencyChart.on('click', params => {

          // ç‚¹å‡»è§¦å‘的为柱状体，除此除外是标题
          if (params.componentType === 'series') {
            console.log('seriesParams===========', params)
          } else {
            console.log('yAxisParams===========', params)
            this.$emit('switchToBranchFactory', params.value)
          }
        })
      },

      /* ç»˜åˆ¶æŠ€æœ¯çŠ¶æ€é¥¼å›¾ */
      drawTechConditionChart() {
        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
        const option = {
          height: 300,
          title: {
            show: true, // æ˜¯å¦æ˜¾ç¤ºæ ‡é¢˜ï¼Œé»˜è®¤ä¸ºtrue
            text: '技术状态', // ä¸»æ ‡é¢˜æ–‡æœ¬
            x: 'center', // æ ‡é¢˜æ°´å¹³å®‰æ”¾ä½ç½®ï¼Œå¯é€‰å€¼ä¸º'left'、'center'、'right'或具体的水平坐标值
            y: 'top', // æ ‡é¢˜åž‚直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
            textStyle: {
              // ä¸»æ ‡é¢˜æ–‡æœ¬æ ·å¼
              fontSize: 18,
              fontWeight: 'normal',
              color: '#00A8AC'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              if (params.name !== '') {
                return `${params.name}:${params.value}(${params.percent}%)`
              }
            }
          },
          legend: {
            top: 25,
            orient: 'vertical',
            right: 0,
            // bottom: "0",
            itemWidth: 14,
            itemHeight: 14,
            icon: 'roundRect',
            itemGap: 15,
            textStyle: {
              color: 'inherit',
              fontSize: 14,
              padding: [0, 0, 0, 0]
            },
            data: ['合格', '禁用', '限用']
          },
          grid: {
            containLabel: true
          },
          series: [
            {
              type: 'pie',
              // selectedMode: "single",
              radius: ['33%', '45%'],
              center: ['45%', '60%'],
              color: [
                '#0AA012',
                '#237E48',
                '#757160'
              ],
              label: {
                position: 'outside',
                show: true,
                color: 'inherit',
                // textBorderColor: 'inherit',
                // textBorderWidth: 1,
                fontSize: 16,
                formatter: function(params) {
                  if (params.name !== '') {
                    return `${params.name}:${params.value}`
                  }
                }
              },
              labelLine: {
                show: true,
                length2: 10,
                length: 10
              },
              data: this.techConditionData
            }
          ]
        }
        this.techConditionChart.setOption(option, true)
      },

      /* ç»˜åˆ¶è®¾å¤‡æŠ¥ä¿®æ•…障饼图 */
      drawWarrantyMalfunctionChart() {
        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
        const option = {
          height: 300,
          title: {
            show: true, // æ˜¯å¦æ˜¾ç¤ºæ ‡é¢˜ï¼Œé»˜è®¤ä¸ºtrue
            text: '设备报修故障', // ä¸»æ ‡é¢˜æ–‡æœ¬
            x: 'center', // æ ‡é¢˜æ°´å¹³å®‰æ”¾ä½ç½®ï¼Œå¯é€‰å€¼ä¸º'left'、'center'、'right'或具体的水平坐标值
            y: 'top', // æ ‡é¢˜åž‚直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
            textStyle: {
              // ä¸»æ ‡é¢˜æ–‡æœ¬æ ·å¼
              fontSize: 18,
              fontWeight: 'normal',
              color: '#00A8AC'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              if (params.name !== '') {
                return `${params.name}:${params.value}(${params.percent}%)`
              }
            }
          },
          legend: {
            top: 25,
            orient: 'vertical',
            right: 0,
            // bottom: "0",
            itemWidth: 14,
            itemHeight: 14,
            icon: 'roundRect',
            itemGap: 15,
            textStyle: {
              color: 'inherit',
              fontSize: 14,
              padding: [0, 0, 0, 0]
            },
            data: ['报修', '停机', '运行']
          },
          grid: {
            containLabel: true
          },
          series: [
            {
              type: 'pie',
              // selectedMode: "single",
              radius: ['33%', '45%'],
              center: ['45%', '60%'],
              color: [
                '#00CED1',
                '#B85B38',
                '#A8985D'
              ],
              label: {
                position: 'outside',
                show: true,
                color: 'inherit',
                // textBorderColor: 'inherit',
                // textBorderWidth: 1,
                fontSize: 16,
                formatter: function(params) {
                  if (params.name !== '') {
                    return `${params.name}:${params.value}`
                  }
                }
              },
              labelLine: {
                show: true,
                length2: 10,
                length: 10
              },
              data: this.warrantyMalfunctionData
            }
          ]
        }
        this.warrantyMalfunctionChart.setOption(option, true)
      },

      /* ç»˜åˆ¶è½¦é—´ä¿å…»æ»šåŠ¨è¡¨ */
      drawMaintenanceChart() {
        this.maintenanceConfig = {
          indexHeader: '序号',
          header: ['车间', '日期', '内容'],
          headerBGC: '#266C86',
          data: this.twoMaintenanceChartData,
          index: true,
          columnWidth: [100],
          align: ['center', 'center', 'center', 'center']
        }
      },

      /* ç»˜åˆ¶å•æŸ±å›¾ */
      drawBarChart() {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        const option = {
          height: 190,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            // backgroundColor: 'rgba(9, 24, 48, 0.5)',
            borderColor: 'rgba(75, 253, 238, 0.4)',
            textStyle: {
              // color: '#CFE3FC'
            },
            borderWidth: 1
          },
          grid: {
            top: '15%',
            left: '10%'
          },
          xAxis: [{
            name: 'OEE车间',
            nameLocation: 'middle',
            nameGap: 30, // xè½´name与横坐标轴线的间距
            type: 'category',
            data: this.barChartData.map(item => item.name),
            axisLine: {
              lineStyle: {
                color: '#FFFFFF'
              }
            },
            axisLabel: {
              margin: 10,
              color: '#e2e9ff',
              textStyle: {
                fontSize: 12
              }
            },
            axisTick: {
              show: false
            }
          }],
          yAxis: [{
            name: '数量',
            nameLocation: 'middle',
            nameGap: 30, // xè½´name与横坐标轴线的间距
            axisLabel: {
              formatter: '{value}',
              color: '#e2e9ff'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#FFFFFF'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.12)'
              }
            }
          }],
          series: [{
            type: 'bar',
            data: this.barChartData,
            barWidth: '50%',
            itemStyle: {
              color: '#7DB17F'
            },
            label: {
              show: true,
              lineHeight: 10,
              formatter: params => {
                if (+params.value === 0) return ''
                else return params.value
              },
              position: 'inside',
              textStyle: {
                color: '#fff',
                fontSize: 18
              }
            }
          }]
        }
        this.barChart.setOption(option, true)
      },

      /* ç»˜åˆ¶åŒæŸ±å›¾ */
      drawDoubleBarChart() {
        this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
        const option = {
          height: 220,
          color: ['#4992FF', '#4DC0B1'],
          tooltip: {
            confine: true,
            formatter: function(params) {
              return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
                '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + params.seriesName + ' : ' + params.value + '%'
            }
          },
          grid: {
            left: '5%',
            right: '4%',
            bottom: '10%',
            top: '20%',
            containLabel: true
          },
          legend: {
            icon: 'roundRect',
            orient: 'horizontal',
            left: 'center',
            itemWidth: 14,
            itemHeight: 14,
            formatter: ['{a|{name}}'].join('\n'),
            textStyle: {
              fontSize: 14,
              color: '#6A93B9',
              height: 8,
              rich: {
                a: {
                  verticalAlign: 'bottom'
                }
              }
            },
            data: ['OEE', '利用率']
          },
          xAxis: {
            type: 'category',
            data: this.doubleBarChartData.dateList,
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.45)'
              }
            },
            axisLabel: {
              fontSize: 12,
              color: '#6A93B9'
            },
            axisTick: {
              show: false
            }
          },
          yAxis: [{
            name: '%',
            type: 'value',
            min: 0,
            minInterval: 1,
            splitArea: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.15)'
                // type: 'dashed', // dotted è™šçº¿
              }
            },
            axisLabel: {
              fontSize: 12,
              color: '#6A93B9',
              fontFamily: 'Bebas'
            }
          }, {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              formatter: '{value}%', // å³ä¾§Y轴文字显示
              fontFamily: 'Bebas',
              color: '#6A93B9'
            },
            splitArea: {
              show: false
            }
          }],
          series: [{
            type: 'bar',
            barWidth: 15,
            itemStyle: { barBorderRadius: [3, 3, 0, 0] },
            name: 'OEE',
            data: this.doubleBarChartData.oeeList,
            label: {
              show: true,
              lineHeight: 10,
              formatter: params => {
                if (+params.value === 0) return ''
                else return params.value
              },
              position: 'inside',
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            }
          }, {
            type: 'bar',
            barWidth: 15,
            itemStyle: { barBorderRadius: [3, 3, 0, 0] },
            name: '利用率',
            data: this.doubleBarChartData.utilizationList,
            label: {
              show: true,
              lineHeight: 10,
              formatter: params => {
                if (+params.value === 0) return ''
                else return params.value
              },
              position: 'inside',
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            }
          }
          ]
        }
        this.doubleBarChart.setOption(option, true)
      },

      /* ç»˜åˆ¶é—®é¢˜æ»šåŠ¨è¡¨ */
      drawProblemChart() {
        this.problemConfig = {
          indexHeader: '序号',
          header: ['时间', '问题内容'],
          headerBGC: '#83B883',
          oddRowBGC: '#556955',
          evenRowBGC: '#556955',
          data: [
            ['2024å¹´3月23号', '大家注意安全问题'],
            ['2024å¹´3月23号', '大家注意安全问题'],
            ['2024å¹´3月23号', '大家注意安全问题'],
            ['2024å¹´3月23号', '大家注意安全问题'],
            ['2024å¹´3月23号', '大家注意安全问题'],
            ['2024å¹´3月23号', '大家注意安全问题'],
            ['2024å¹´3月23号', '大家注意安全问题'],
            ['2024å¹´3月23号', '大家注意安全问题'],
            ['2024å¹´3月23号', '大家注意安全问题'],
            ['2024å¹´3月23号', '大家注意安全问题']
          ],
          index: true,
          columnWidth: [100],
          align: ['center']
        }
      },

      /**
       * çª—口尺寸变化时触发
       * è°ƒæ•´å›¾è¡¨å°ºå¯¸ä»¥é€‚应分辨率
       */
      handleWindowResize() {
        if (this.runningStateChart) this.runningStateChart.resize()
        if (this.efficiencyChart) this.efficiencyChart.resize()
        if (this.techConditionChart) this.techConditionChart.resize()
        if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
        if (this.barChart) this.barChart.resize()
        if (this.doubleBarChart) this.doubleBarChart.resize()
      }
    }
  }
</script>

<style lang="less" scoped>
  .page-container {
    .page-title {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      color: #fff;
      margin-bottom: 10px;

      .workshop-nav {
        width: 120px;
        height: 40px;
        font-size: 12px;
        cursor: pointer;
      }
    }

    .content-container {
      padding-top: 5px;
      display: flex;
      justify-content: space-between;

      .left-col {
        .first-title {
          color: #00A8AC;
          font-size: 20px;
          text-align: center;
          font-weight: bold;
        }
      }

      .middle-col {
        .first-title {
          color: #00A8AC;
          font-size: 20px;
          text-align: center;
          font-weight: bold;
        }

        .support-plan-container {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          color: #fff;
          padding: 0 40px;

          .support-plan-item {
            border-radius: 3px;
            width: 45%;
            padding: 5px 20px;
            font-size: 20px;
            margin-bottom: 10px;

            .plan-value-container {
              display: flex;
              justify-content: center;
              align-items: center;

              .plan-value {
                font-size: 35px;
                margin-right: 20px;
              }
            }
          }
        }
      }
    }
  }

  /deep/ .dv-scroll-board .header {
    height: 35px;
  }
</style>