src/views/dashboard/IndexSignage.vue
@@ -87,7 +87,7 @@
          { value: '0', name: '运行' }
        ],
        efficiencyChart: '',
        efficiencyData:[],
        efficiencyData: [],
        techConditionChart: '',
        techConditionData: [
          { value: '0', name: '合格' },
@@ -106,7 +106,32 @@
        nextNextMonthMaintenancePlanNum: 0,
        twoMaintenanceChartData: [['-', '-', '-']],
        barChart: '',
        barChartData: [],
        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'
          }
        ],
        doubleBarChart: '',
        doubleBarChartData: {},
        efficiencyChartConfig: {},
@@ -130,7 +155,7 @@
        this.getWarrantyMalfunctionDataByApi()
        this.getMonthMaintenanceNumByApi()
        this.getTwoMaintenanceChartDataByApi()
        this.getBarChartDataByApi()
        // this.getBarChartDataByApi()
        this.getDoubleBarChartDataByApi()
      },
@@ -725,10 +750,11 @@
      /* 绘制单柱图 */
      drawBarChart() {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
        const option = {
          title: {
            show: true, // 是否显示标题,默认为true
            text: 'OEE车间', // 主标题文本
            text: '', // 主标题文本
            x: 'center', // 标题水平安放位置,可选值为'left'、'center'、'right'或具体的水平坐标值
            y: 'top', // 标题垂直安放位置,可选值为'top'、'bottom'、'center'或具体的垂直坐标值
            textStyle: {
@@ -742,6 +768,10 @@
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            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 + '"></span>' + ' OEE: ' + params[0].value + '%'
            },
            // backgroundColor: 'rgba(9, 24, 48, 0.5)',
            borderColor: 'rgba(75, 253, 238, 0.4)',
@@ -759,7 +789,7 @@
            nameLocation: 'middle',
            nameGap: 40, // x轴name与横坐标轴线的间距
            type: 'category',
            data: this.barChartData.map(item => item.name),
            data: this.barChartData.map(item => item.productionId),
            axisLine: {
              lineStyle: {
                color: '#FFFFFF'
@@ -770,7 +800,10 @@
              interval: 0, // 坐标轴刻度标签的显示间隔,在类目轴中有效;默认会采用标签不重叠的策略间隔显示标签;可以设置成0强制显示所有标签;如果设置为1,表示『隔一个标签显示一个标签』,如果值为2,表示隔两个标签显示一个标签,以此类推。
              rotate: this.barChartData.length >= 6 ? -30 : 0, // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠;旋转的角度从-90度到90度
              inside: false, // 刻度标签是否朝内,默认朝外
              margin: 6 // 刻度标签与轴线之间的距离
              margin: 6, // 刻度标签与轴线之间的距离
              formatter: value => {
                return `${this.barChartData.find(item => item.productionId === value).name}`
              }
            },
            axisTick: {
              show: true,
@@ -778,9 +811,8 @@
            }
          }],
          yAxis: [{
            name: '数量',
            nameLocation: 'middle',
            nameGap: 30, // x轴name与横坐标轴线的间距
            name: '%',
            max: 100,
            axisLabel: {
              formatter: '{value}',
              color: '#e2e9ff'
@@ -808,7 +840,7 @@
            itemStyle: {
              color: '#55D6A5'
            },
            showBackground: true,
            zlevel: 1,
            label: {
              show: true,
              lineHeight: 10,
@@ -822,9 +854,34 @@
                fontSize: 18
              }
            }
          }]
          },
            {
              name: '背景',
              type: 'bar',
              barWidth: '15%',
              barGap: '-100%',
              data: defaultData,
              itemStyle: {
                color: '#11294d'
              }
            }]
        }
        option.title.text = moment().subtract(1, 'months').format('M月') + `OEE车间`
        this.barChart.setOption(option, true)
        this.barChart.on('click', params => {
          console.log('params', params)
          let productionId
          // 点击的是柱体的值,否则点击的为柱体背景阴影
          if (params.seriesIndex === 0) productionId = params.data.productionId
          else productionId = params.name
          console.log('productionId', productionId)
          this.$router.push({
            name: 'mdc-base-OEEAnalysis',
            params: { isEquipment: false, productionId }
          })
        })
      },
      /* 绘制双柱图 */