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

zhuzhuanzhuan

2024-05-15 b00ebd6ccb2acb975437af523f00e1f3ea881305

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

 src/api/signage.js

@@ -44,5 +44,7 @@
  // 设备级获取操作证信息
  getOperationCertificateApi: () => getAction('/eam/calibrationOrder/getOperationCertificate'),
  // 设备级设备信息和维护信息
  getEquipmentInfoApi: equipmentNum => getAction('/eam/calibrationOrder/getAreaEquipmentList', { equipmentNum })
  getEquipmentInfoApi: equipmentNum => getAction('/eam/calibrationOrder/getAreaEquipmentList', { equipmentNum }),
  // 根据不同类型获取仪表盘对应颜色区间
  getGaugeColorByTypeApi: type => getAction('/mdc/MdcUtilizationRate/getSectionByType', { type })
}

 src/views/dashboard/EquipmentSignage.vue

@@ -534,11 +534,21 @@
      /* 绘制利用率仪表盘图表 */
      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)
        setTimeout(() => this.gaugeChart1.hideLoading(), this.hideLoadingDelayTime)

        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)
            setTimeout(() => this.gaugeChart1.hideLoading(), this.hideLoadingDelayTime)
          })

        this.gaugeChart1.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -558,11 +568,21 @@
      /* 绘制开动率仪表盘图表 */
      drawGaugeChart2(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.startRate]
        this.gaugeChart2.setOption(option, true)
        setTimeout(() => this.gaugeChart2.hideLoading(), this.hideLoadingDelayTime)

        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.startRate]
            this.gaugeChart2.setOption(option, true)
            setTimeout(() => this.gaugeChart2.hideLoading(), this.hideLoadingDelayTime)
          })

        this.gaugeChart2.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -582,11 +602,21 @@
      /* 绘制开机率仪表盘图表 */
      drawGaugeChart3(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.openRate]
        this.gaugeChart3.setOption(option, true)
        setTimeout(() => this.gaugeChart3.hideLoading(), this.hideLoadingDelayTime)

        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.openRate]
            this.gaugeChart3.setOption(option, true)
            setTimeout(() => this.gaugeChart3.hideLoading(), this.hideLoadingDelayTime)
          })

        this.gaugeChart3.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -606,11 +636,21 @@
      /* 绘制OEE仪表盘图表 */
      drawGaugeChart4(opt) {
        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)
        setTimeout(() => this.gaugeChart4.hideLoading(), this.hideLoadingDelayTime)

        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)
            setTimeout(() => this.gaugeChart4.hideLoading(), this.hideLoadingDelayTime)
          })

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

 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: {