车间智慧看板页面新增定时刷新功能

zhaowei

昨天 54d11f9a2f395e021486e6a31912616274b3feda

 src/views/mdc/base/modules/WorkshopSignage/UtilizationRateRankChart.vue

@@ -15,7 +15,6 @@
      }
    },
    mounted() {
      this.getUtilizationRateRankByApi()
      window.addEventListener('resize', this.handleWindowSizeChange)
    },
    methods: {
@@ -68,7 +67,7 @@
          }
        ]
        const defaultData = []
        const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value
        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整除的数字
@@ -118,98 +117,102 @@
              show: false
            }
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            triggerEvent: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: '14',
                fontWeight: 'bolder'
              },
              formatter: function(value) {
                return `${data.find(item => item.name === value).name}`
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: data.map(item => item.name)
          }, {
            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
                  }]
          yAxis: [
            {
              type: 'category',
              inverse: true,
              triggerEvent: true,
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: '14',
                  fontWeight: 'bolder'
                },
                formatter: function(value) {
                  return `${data.find(item => item.name === value).name}`
                }
              }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              data: data.map(item => item.name)
            },
            barWidth: 12,
            data: data
          },
            {
              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: {
                borderRadius: 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',
@@ -218,7 +221,7 @@
              data: defaultData,
              itemStyle: {
                color: '#11294d',
                barBorderRadius: 100
                borderRadius: 100
              }
            }
          ]
@@ -240,8 +243,4 @@
      }
    }
  }
</script>

<style scoped lang="less">

</style>
</script>