首页车间级和设备级看板仪表盘图表根据不同类型设置不同仪表盘颜色以及数值范围

zhuzhuanzhuan

2024-05-15 b00ebd6ccb2acb975437af523f00e1f3ea881305

 src/views/dashboard/WorkshopSectionSignage.vue

@@ -805,7 +805,7 @@
              // 主标题文本样式
              fontSize: 18,
              fontWeight: 'normal',
              color: '#1AD8DE',
              color: '#1AD8DE'
            }
          },
          tooltip: {
@@ -859,8 +859,8 @@
                lineStyle: { // 属性lineStyle控制线条样式
                  color: [ //表盘颜色
                    [0.3, '#F56436'],//0-30%处的颜色
                    [0.7, '#FFFF40'],//30%-60%处的颜色
                    [1, '#0FC61A']//90%-100%处的颜色
                    [0.6, '#FFFF40'],//30%-60%处的颜色
                    [1, '#0FC61A']//60%-100%处的颜色
                  ],
                  width: 15//表盘宽度
                }
@@ -888,11 +888,22 @@
      /* 绘制利用率仪表盘图表 */
      drawGaugeChart1(opt) {
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + `利用率`
        option.series[0].name = '利用率'
        option.series[0].data = [this.gaugeChartData.utilizationRate]
        this.gaugeChart1.setOption(option, true)
        this.gaugeChart1.hideLoading()

        signageApi.getGaugeColorByTypeApi('lyl')
          .then(res => {
            if (res.success) {
              const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
              option.series[0].axisLine.lineStyle.color = colorRange
            }
          })
          .finally(() => {
            option.title.text = moment().subtract(1, 'days').format('M月D日') + `利用率`
            option.series[0].name = '利用率'
            option.series[0].data = [this.gaugeChartData.utilizationRate]
            this.gaugeChart1.setOption(option, true)
            this.gaugeChart1.hideLoading()
          })


        this.gaugeChart1.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -911,13 +922,22 @@

      /* 绘制开动率仪表盘图表 */
      drawGaugeChart2(opt) {
        this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + '开动率'
        option.series[0].name = '开动率'
        option.series[0].data = [this.gaugeChartData.startRate]
        this.gaugeChart2.setOption(option, true)
        this.gaugeChart2.hideLoading()

        signageApi.getGaugeColorByTypeApi('kdl')
          .then(res => {
            if (res.success) {
              const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
              option.series[0].axisLine.lineStyle.color = colorRange
            }
          })
          .finally(() => {
            option.title.text = moment().subtract(1, 'days').format('M月D日') + '开动率'
            option.series[0].name = '开动率'
            option.series[0].data = [this.gaugeChartData.startRate]
            this.gaugeChart2.setOption(option, true)
            this.gaugeChart2.hideLoading()
          })

        this.gaugeChart2.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -936,13 +956,22 @@

      /* 绘制开机率仪表盘图表 */
      drawGaugeChart3(opt) {
        this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + '开机率'
        option.series[0].name = '开机率'
        option.series[0].data = [this.gaugeChartData.openRate]
        this.gaugeChart3.setOption(option, true)
        this.gaugeChart3.hideLoading()

        signageApi.getGaugeColorByTypeApi('kdl')
          .then(res => {
            if (res.success) {
              const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
              option.series[0].axisLine.lineStyle.color = colorRange
            }
          })
          .finally(() => {
            option.title.text = moment().subtract(1, 'days').format('M月D日') + '开机率'
            option.series[0].name = '开机率'
            option.series[0].data = [this.gaugeChartData.openRate]
            this.gaugeChart3.setOption(option, true)
            this.gaugeChart3.hideLoading()
          })

        this.gaugeChart3.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -961,13 +990,22 @@

      /* 绘制OEE仪表盘图表 */
      drawGaugeChart4(opt) {
        this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'months').format('M月') + `OEE`
        option.series[0].name = 'OEE'
        option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
        this.gaugeChart4.setOption(option, true)
        this.gaugeChart4.hideLoading()

        signageApi.getGaugeColorByTypeApi('lyl')
          .then(res => {
            if (res.success) {
              const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
              option.series[0].axisLine.lineStyle.color = colorRange
            }
          })
          .finally(() => {
            option.title.text = moment().subtract(1, 'months').format('M月') + `OEE`
            option.series[0].name = 'OEE'
            option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
            this.gaugeChart4.setOption(option, true)
            this.gaugeChart4.hideLoading()
          })

        this.gaugeChart4.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -994,7 +1032,7 @@
              // 主标题文本样式
              fontSize: 18,
              fontWeight: 'normal',
              color: '#1AD8DE',
              color: '#1AD8DE'
            }
          },
          tooltip: {