调整车间层级看板设备运行状态统计图表内外圈直径

zhuzhuanzhuan

2024-03-28 15a9f1b16ae150eda723592917878c3c524d2e72

 src/views/dashboard/BranchFactorySignage.vue

@@ -118,28 +118,6 @@
        barChartData: [],
        doubleBarChart: '',
        doubleBarChartData: {},
        supportPlanList: [
          {
            label: '本月三保计划',
            value: 299,
            background: '#719D8E'
          },
          {
            label: '本月完成',
            value: 229,
            background: '#409EFF'
          },
          {
            label: '下月三保计划',
            value: 319,
            background: '#A8985D'
          },
          {
            label: '下下月三保计划',
            value: 329,
            background: '#58D9F9'
          }
        ],
        maintenanceConfig: {},
        problemConfig: {}
      }
@@ -148,10 +126,6 @@
      window.addEventListener('resize', this.handleWindowResize)
      this.drawCharts()
      this.getChartDataByApi()
    },
    activated() {
      console.log('触发activated')
      this.handleWindowResize()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
@@ -172,8 +146,8 @@
      getRunningStateDataByApi() {
        signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
          .then(res => {
            if (res.success) this.runningStateData = res.result
            this.drawRunningStateChart()
            if (res.success) this.runningStateData = res.result.list
            this.drawRunningStateChart(res.result.producitonId)
          })
      },

@@ -276,10 +250,9 @@
      },

      /* 绘制设备运行状态玫瑰饼图 */
      drawRunningStateChart() {
      drawRunningStateChart(productionId) {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        const option = {
          height: 300,
          title: {
            show: true, // 是否显示标题，默认为true
            text: '设备运行状态统计', // 主标题文本
@@ -325,8 +298,8 @@
              type: 'pie',
              roseType: 'angle', // 玫瑰图
              // selectedMode: "single",
              radius: ['60%', '80%'],
              center: ['50%', '60%'],
              radius: ['40%', '60%'],
              center: ['53%', '50%'],
              color: [
                '#686869',
                '#AA6349',
@@ -356,6 +329,14 @@
          ]
        }
        this.runningStateChart.setOption(option, true)

        this.runningStateChart.on('click', params => {
          console.log('params', params)
          this.$router.push({
            name: 'mdc-base-DeviceBaseInfo',
            params: { signageData: params.data, productionId }
          })
        })
      },

      /* 绘制设备利用率胶囊图 */
@@ -549,11 +530,15 @@
        this.efficiencyChart.setOption(option, true)

        this.efficiencyChart.on('click', params => {

          // 点击触发的为柱状体，除此除外是标题
          if (params.componentType === 'series') {
            console.log('seriesParams===========', params)

            const productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId
            const tierName = this.efficiencyData.find(item => item.productionCode === params.name).name
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: { isEquipment: false, productionId, tierName }
            })
          } else {
            console.log('yAxisParams===========', params)
            this.$emit('switchToNextSignage', { signageName: 'WorkshopSection', productionCode: params.value })