1、调整单柱图x轴标题显示方式由每隔一个显示改为全显示（保证水平完整放置需旋转标题） 2、新增从分厂级看板返回公司级看板功能 3、按照新需求完成客户工...

zhuzhuanzhuan

2024-03-26 913f86badcc805bac79b9f2350f52eafcba86291

1、调整单柱图x轴标题显示方式由每隔一个显示改为全显示（保证水平完整放置需旋转标题）
2、新增从分厂级看板返回公司级看板功能
3、按照新需求完成客户工段主管层进入后页面所有布局30%

 src/views/dashboard/Analysis.vue

@@ -1,9 +1,9 @@
<template>
  <Component :is="currentSignage" :productionCode="productionCode" @switchToBranchFactory="switchToBranchFactory">
    <template #back_nav>
      <dv-decoration-11 class="back-nav" v-if="userType===4">
        <div @click="backToLastSignage">返回上一级</div>
      </dv-decoration-11>
      <div class="back-nav" @click="backToLastSignage" v-if="userType===4">
        <dv-decoration-7>上一级</dv-decoration-7>
      </div>
    </template>
  </Component>
</template>
@@ -12,12 +12,14 @@
  import signageApi from '@/api/signage'
  import IndexSignage from './IndexSignage.vue'
  import BranchFactorySignage from './BranchFactorySignage.vue'
  import WorkshopSectionSignage from './WorkshopSectionSignage.vue'

  export default {
    name: 'Analysis',
    components: {
      IndexSignage,
      BranchFactorySignage
      BranchFactorySignage,
      WorkshopSectionSignage
    },
    data() {
      return {
@@ -37,13 +39,12 @@
        signageApi.getUserByIdApi(id)
          .then(res => {
            this.userType = res.userType
            console.log('触发判断', this.userType)
            switch (this.userType) {
              case 1:
                this.currentSignage = ''
                break
              case 2:
                this.currentSignage = 'BranchFactorySignage'
                this.currentSignage = 'WorkshopSectionSignage'
                break
              case 3:
                this.currentSignage = 'BranchFactorySignage'
@@ -73,5 +74,14 @@
</script>

<style lang="less" scoped>

  .back-nav {
    width: 100px;
    height: 30px;
    color: #ccc;
    position: absolute;
    top: 25px;
    left: 25px;
    cursor: pointer;
    z-index: 9999
  }
</style>

 src/views/dashboard/BranchFactorySignage.vue

@@ -8,6 +8,7 @@
    <!--</div>-->
    <div class="content-container">
      <div style="width: 25%" class="left-col">
        <slot name="back_nav"></slot>
        <dv-border-box-9 style="padding: 40px 20px 0">
          <!--<div class="first-title">M D C å…¥ ç½‘ æ€» æ•° : 6 0 3 å°</div>-->
          <div id="running_state_chart" style="width:100%;height: 400px;"></div>
@@ -752,7 +753,7 @@
          xAxis: [{
            name: 'OEE车间',
            nameLocation: 'middle',
            nameGap: 30, // xè½´name与横坐标轴线的间距
            nameGap: 40, // xè½´name与横坐标轴线的间距
            type: 'category',
            data: this.barChartData.map(item => item.name),
            axisLine: {
@@ -761,11 +762,11 @@
              }
            },
            axisLabel: {
              margin: 10,
              color: '#e2e9ff',
              textStyle: {
                fontSize: 12
              }
              show: true, // æ˜¯å¦æ˜¾ç¤ºåˆ»åº¦æ ‡ç­¾ï¼Œé»˜è®¤æ˜¾ç¤º
              interval: 0, // åæ ‡è½´åˆ»åº¦æ ‡ç­¾çš„显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              rotate: this.barChartData.length >= 5 ? -30 : 0, // åˆ»åº¦æ ‡ç­¾æ—‹è½¬çš„角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
              inside: false, // åˆ»åº¦æ ‡ç­¾æ˜¯å¦æœå†…，默认朝外
              margin: 6 // åˆ»åº¦æ ‡ç­¾ä¸Žè½´çº¿ä¹‹é—´çš„距离
            },
            axisTick: {
              show: false

 src/views/dashboard/IndexSignage.vue

@@ -734,7 +734,7 @@
          xAxis: [{
            name: 'OEE车间',
            nameLocation: 'middle',
            nameGap: 30, // xè½´name与横坐标轴线的间距
            nameGap: 40, // xè½´name与横坐标轴线的间距
            type: 'category',
            data: this.barChartData.map(item => item.name),
            axisLine: {
@@ -743,11 +743,11 @@
              }
            },
            axisLabel: {
              margin: 10,
              color: '#e2e9ff',
              textStyle: {
                fontSize: 12
              }
              show: true, // æ˜¯å¦æ˜¾ç¤ºåˆ»åº¦æ ‡ç­¾ï¼Œé»˜è®¤æ˜¾ç¤º
              interval: 0, // åæ ‡è½´åˆ»åº¦æ ‡ç­¾çš„显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              rotate: this.barChartData.length >= 5 ? -30 : 0, // åˆ»åº¦æ ‡ç­¾æ—‹è½¬çš„角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
              inside: false, // åˆ»åº¦æ ‡ç­¾æ˜¯å¦æœå†…，默认朝外
              margin: 6 // åˆ»åº¦æ ‡ç­¾ä¸Žè½´çº¿ä¹‹é—´çš„距离
            },
            axisTick: {
              show: false
@@ -970,7 +970,7 @@
            // ['-', '-']
          ],
          index: true,
          columnWidth: [100,300,300],
          columnWidth: [100, 300, 300],
          align: ['center']
        }
      },

 src/views/dashboard/WorkshopSectionSignage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,983 @@
<template>
  <div class="page-container">
    <div class="content-container">
      <div style="width: 30%" class="left-col">
        <slot name="back_nav"></slot>
        <dv-border-box-9 style="padding: 15px">
          <div id="tech_condition_chart" style="width:100%;height: 230px;"></div>
          <div id="warranty_malfunction_chart" style="width:100%;height: 230px;"></div>
          <div style="display: flex;">

            <div style="flex:0.5;display: flex;flex-direction:column;align-items: center">
              <dv-decoration-11 style="width:90%;height:60px;color: #ccc;font-size: 20px">三保计划</dv-decoration-11>
              <div class="support-plan-container">
                <div class="support-plan-item" style="background:#67C23A">
                  <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:#E6A23C">
                  <div>延期</div>
                  <div class="plan-value-container">
                    <div class="plan-value">{{nextMonthMaintenancePlanNum}}</div>
                    <div>台</div>
                  </div>
                </div>
                <div class="support-plan-item" style="background:#F56C6C">
                  <div>超期</div>
                  <div class="plan-value-container">
                    <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</div>
                    <div>台</div>
                  </div>
                </div>
                <div class="support-plan-item" style="background:#719D8E">
                  <div>下月计划</div>
                  <div class="plan-value-container">
                    <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</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>

            <div style="flex:0.5;display: flex;justify-content: center">
              <dv-decoration-11 style="width:90%;height:60px;color: #ccc;font-size: 20px">二保计划</dv-decoration-11>
            </div>
          </div>
        </dv-border-box-9>
      </div>

      <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>
        </dv-border-box-9>
      </div>
      <div style="width: 30%">
        <dv-border-box-9 style="padding: 30px 0">
          <div id="bar_chart" style="width:100%;height: 250px;"></div>
          <div id="double_bar_chart" style="width:100%;height: 300px;"></div>
          <div style="padding: 0 20px;">
            <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: 'WorkshopSectionSignage',
    props: {
      productionCode: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        runningStateChart: '',
        runningStateData: [
          { value: '0', name: '关机' },
          { value: '0', name: '报警' },
          { value: '0', name: '待机' },
          { value: '0', name: '运行' }
        ],
        techConditionChart: '',
        techConditionData: [
          { value: '0', name: '合格' },
          { value: '0', name: '禁用' },
          { value: '0', name: '限用' }
        ],
        warrantyMalfunctionChart: '',
        warrantyMalfunctionData: [
          { value: '0', name: '报修' },
          { value: '0', name: '停机' },
          { value: '0', name: '运行' }
        ],
        thisMonthMaintenancePlanNum: 0,
        thisMonthMaintenanceRealNum: 0,
        nextMonthMaintenancePlanNum: 0,
        nextNextMonthMaintenancePlanNum: 0,
        lineChart: '',
        lineChartData: [],
        barChart: '',
        barChartData: [],
        doubleBarChart: '',
        doubleBarChartData: {},
        supportPlanList: [
          {
            label: '本月三保计划',
            value: 299,
            background: '#719D8E'
          },
          {
            label: '本月完成',
            value: 229,
            background: '#409EFF'
          },
          {
            label: '下月三保计划',
            value: 319,
            background: '#A8985D'
          },
          {
            label: '下下月三保计划',
            value: 329,
            background: '#58D9F9'
          }
        ],
        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: {
      backToLastSignage() {
        console.log('触发上一级')
      },

      getChartDataByApi() {
        this.getTechConditionDataByApi()
        this.getWarrantyMalfunctionDataByApi()
        this.getRunningStateDataByApi()
        this.getMonthMaintenanceNumByApi()
        this.getBarChartDataByApi()
        this.getDoubleBarChartDataByApi()
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–技术状态 */
      getTechConditionDataByApi() {
        signageApi.getEquipmentTechnologyStatusListApi(this.productionCode)
          .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(this.productionCode)
          .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()
          })
      },

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

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

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

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

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

      /* ç»˜åˆ¶æŠ€æœ¯çŠ¶æ€é¥¼å›¾ */
      drawTechConditionChart() {
        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
        const option = {
          title: {
            show: true, // æ˜¯å¦æ˜¾ç¤ºæ ‡é¢˜ï¼Œé»˜è®¤ä¸ºtrue
            text: '技术状态', // ä¸»æ ‡é¢˜æ–‡æœ¬
            x: 'left', // æ ‡é¢˜æ°´å¹³å®‰æ”¾ä½ç½®ï¼Œå¯é€‰å€¼ä¸º'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: 'bottom',
            orient: 'horizontal',
            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: ['30%', '50%'],
              center: ['50%', '50%'],
              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: 15,
                length: 15
              },
              data: this.techConditionData
            }
          ]
        }
        this.techConditionChart.setOption(option, true)
      },

      /* ç»˜åˆ¶è®¾å¤‡æŠ¥ä¿®æ•…障饼图 */
      drawWarrantyMalfunctionChart() {
        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
        const option = {
          title: {
            show: true, // æ˜¯å¦æ˜¾ç¤ºæ ‡é¢˜ï¼Œé»˜è®¤ä¸ºtrue
            text: '设备报修故障', // ä¸»æ ‡é¢˜æ–‡æœ¬
            x: 'left', // æ ‡é¢˜æ°´å¹³å®‰æ”¾ä½ç½®ï¼Œå¯é€‰å€¼ä¸º'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: 'bottom',
            orient: 'horizontal',
            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: ['30%', '50%'],
              center: ['50%', '50%'],
              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: 15,
                length: 15
              },
              data: this.warrantyMalfunctionData
            }
          ]
        }
        this.warrantyMalfunctionChart.setOption(option, true)
      },

      /* ç»˜åˆ¶è®¾å¤‡è¿è¡ŒçŠ¶æ€çŽ«ç‘°é¥¼å›¾ */
      drawRunningStateChart() {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        const option = {
          title: {
            show: true, // æ˜¯å¦æ˜¾ç¤ºæ ‡é¢˜ï¼Œé»˜è®¤ä¸ºtrue
            text: '设备状态', // ä¸»æ ‡é¢˜æ–‡æœ¬
            x: 'left', // æ ‡é¢˜æ°´å¹³å®‰æ”¾ä½ç½®ï¼Œå¯é€‰å€¼ä¸º'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: 'bottom',
            orient: 'horizontal',
            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',
              roseType: 'angle', // çŽ«ç‘°å›¾
              // selectedMode: "single",
              radius: ['30%', '70%'],
              center: ['50%', '50%'],
              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)
      },

      /* ç»˜åˆ¶æŠ˜çº¿å›¾ */
      drawLineChart() {
        this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
        const newData = {
          xAxis: ['2640221', '2640223', '2640224', '2640225', '2640226', '2640227', '2640228', '2640229', '12640220', '12640221', '12640222'],
          yAxis: [
            {
              name: '利用率',
              value: [20, 60, 55, 36, 52, 52, 63, 78, 23, 42, 65]
            },
            {
              name: '开动率',
              value: [23, 63, 44, 40, 74, 80, 60, 90, 70, 40, 70]
            },
            {
              name: '开机率',
              value: [90, 70, 40, 70, 80, 65, 73, 60, 70, 90, 40]
            }
          ],
          yAxisName: '前7天利用率'
        }
        let legendData = []
        let seriesData = []
        let colorArr = ['#09F39E', '#A5F10D', '#09B3F6']
        legendData = newData.yAxis.map((item) => item.name)
        seriesData = newData.yAxis.map((item1, index1) => {
          return {
            name: item1.name,
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: colorArr[index1]
            },
            lineStyle: {
              width: 2
            },
            yAxisIndex: 1,
            data: item1.value // æŠ˜çº¿å›¾çš„数据
          }
        })

        const option = {
          grid: {
            containLabel: true,
            bottom: '1%',
            top: '15%',
            left: '2%',
            right: '1%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            top: 20,
            right: 'center',
            data: legendData,
            itemGap: 10,
            textStyle: {
              fontSize: 16,
              color: '#ccc'
            }
          },
          xAxis: {
            triggerEvent: true,
            data: newData.xAxis || [],
            axisLabel: {
              interval: 1,
              show: true,
              fontSize: 12,
              color: '#50729A',
              // rotate: -30,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#50729A'
              }
            },
            axisTick: {
              show: true,
              alignWithLabel:true,
            }
          },
          yAxis: [
            {
              name: newData.yAxisName,
              nameTextStyle: {
                color: '#00A8AC',
                fontSize: 18,
                padding: [0, 0, 0, 80]
              },
              type: 'value',
              position: 'left',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#50729A'
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#3E4A82'
                }
              }
            },
            {
              type: 'value',
              position: 'right',
              splitNumber: 5,
              axisLabel: {
                show: true,
                fontSize: 16,
                color: '#50729A'
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#50729A'
                }
              },
              axisTick: {
                show: true
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#3E4A82'
                }
              }
            }
          ],
          series: seriesData
        }
        this.lineChart.setOption(option, true)

      },

      /* ç»˜åˆ¶å•æŸ±å›¾ */
      drawBarChart() {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        const option = {
          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: '15%',
            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 = {
          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: [],
          index: true,
          columnWidth: [100, 300, 300],
          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 {
        .support-plan-container {
          width: 100%;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          color: #fff;
          padding-top: 5px;

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

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

              .plan-value {
                margin-right: 20px;
                font-size: 30px;
                color: #EAC910;
              }
            }
          }
        }
      }

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

      }
    }
  }

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