mdc首页车间级看板调整样式及功能

zhaowei

昨天 26358d4a0cfa9706bc265249e5f7136f134d6f01

 src/views/dashboard/IndexSignage.vue

@@ -160,8 +160,7 @@
        this.runningStateChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: 'rgba(0, 0, 0, .45)',
          maskColor: 'transparent' // 遮罩层
          textColor: 'rgba(0, 0, 0, .45)'
        })
        signageApi.getEquipmentStatusStatisticsApi()
          .then(res => {
@@ -180,8 +179,7 @@
        this.efficiencyChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: 'rgba(0, 0, 0, .45)',
          maskColor: 'transparent' // 遮罩层
          textColor: 'rgba(0, 0, 0, .45)'
        })
        signageApi.getEquipmentUtilizationStatisticsApi()
          .then(res => {
@@ -199,14 +197,12 @@
        this.techConditionChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: 'rgba(0, 0, 0, .45)',
          maskColor: 'transparent' // 遮罩层
          textColor: 'rgba(0, 0, 0, .45)'
        })
        this.warrantyMalfunctionChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: 'rgba(0, 0, 0, .45)',
          maskColor: 'transparent' // 遮罩层
          textColor: 'rgba(0, 0, 0, .45)'
        })
        signageApi.getEquipmentTechnologyStatusAndReportRepairEquipmentListApi()
          .then(res => {
@@ -281,8 +277,7 @@
        this.barChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: 'rgba(0, 0, 0, .45)',
          maskColor: 'transparent' // 遮罩层
          textColor: 'rgba(0, 0, 0, .45)'
        })
        signageApi.getEquipmentOEEStatistics()
          .then(res => {
@@ -299,8 +294,7 @@
        this.doubleBarChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: 'rgba(0, 0, 0, .45)',
          maskColor: 'transparent' // 遮罩层
          textColor: 'rgba(0, 0, 0, .45)'
        })
        signageApi.getEquipmentMonthStatisticsApi()
          .then(res => {
@@ -413,6 +407,7 @@

      /* 绘制设备利用率胶囊图 */
      drawEfficiencyChart() {
        const data = this.efficiencyData
        const colorArray = [
          {
            top: '#EA967B',
@@ -431,14 +426,11 @@
            bottom: '#8DCCEF'
          }
        ]
        const data = this.efficiencyData
        const defaultData = []
        const dataMax = data.length > 0 ? +data.sort((x, y) => +y.value - +x.value)[0].value : 0
        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
@@ -482,7 +474,7 @@
            },
            show: true,
            min: 0,
            max: 'dataMax',
            max: dataMax,
            interval: yAxisInterval,
            type: 'value',
            axisTick: {
@@ -795,14 +787,6 @@

      /* 绘制单柱图 */
      drawBarChart() {
        const defaultData = []
        const dataMax = this.barChartData.length > 0 ? +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value : 0
        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))
        console.log('bar', this.barChartData)
        let barTopColor = ['#EA967B', '#62AC75', '#32ACBF', '#7196CE']
        let barBottomColor = ['#F8E18B', '#A8D07C', '#7BCAC5', '#8DCCEF']
        const option = {
@@ -1061,47 +1045,49 @@
                show: false
              }
            }],
          series: [{
            type: 'bar',
            barWidth: 20,
            barGap: '0%',
            itemStyle: { barBorderRadius: 4 },
            name: 'OEE',
            data: this.doubleBarChartData.oeeList,
            label: {
              show: true,
              lineHeight: 10,
              formatter: params => {
                if (+params.value === 0) return ''
                else return params.value
              },
              position: 'top',
              textStyle: {
                color: 'rgba(0,0,0,.45)',
                fontSize: 10
          series: [
            {
              type: 'bar',
              barWidth: 20,
              barGap: '0%',
              itemStyle: { barBorderRadius: 4 },
              name: 'OEE',
              data: this.doubleBarChartData.oeeList,
              label: {
                show: true,
                lineHeight: 10,
                formatter: params => {
                  if (+params.value === 0) return ''
                  else return params.value
                },
                position: 'top',
                textStyle: {
                  color: 'rgba(0,0,0,.45)',
                  fontSize: 10
                }
              }
            },
            {
              type: 'bar',
              barWidth: 20,
              barGap: '0%',
              itemStyle: { barBorderRadius: 4 },
              name: 'TEEP',
              data: this.doubleBarChartData.utilizationList,
              label: {
                show: true,
                lineHeight: 10,
                formatter: params => {
                  if (+params.value === 0) return ''
                  else return params.value
                },
                position: 'inside',
                textStyle: {
                  color: 'rgba(0,0,0,.45)',
                  fontSize: 10
                }
              }
            }
          }, {
            type: 'bar',
            barWidth: 20,
            barGap: '0%',
            itemStyle: { barBorderRadius: 4 },
            name: 'TEEP',
            data: this.doubleBarChartData.utilizationList,
            label: {
              show: true,
              lineHeight: 10,
              formatter: params => {
                if (+params.value === 0) return ''
                else return params.value
              },
              position: 'inside',
              textStyle: {
                color: 'rgba(0,0,0,.45)',
                fontSize: 10
              }
            }
          }
          ]
        }
        this.doubleBarChart.setOption(option, true)