1、新增点击设备运行状态图标跳转至设备监控页面并根据状态及当前层级筛选页面对应数据 2、新增点击设备利用率的横向柱状图跳转至统计分析页面并根据所点击层...

zhuzhuanzhuan

2024-03-28 a144a18ab582fd3a8c945cba60bc364dbe7f31e8

 src/views/dashboard/BranchFactorySignage.vue

@@ -8,6 +8,9 @@
    <!--</div>-->
    <div class="content-container">
      <div style="width: 25%" class="left-col">
        <div class="back-nav" @click="$emit('backToLastSignage','Index')" v-if="userType===4">
          <dv-decoration-7>上一级</dv-decoration-7>
        </div>
        <dv-border-box-9 style="padding: 40px 20px 0">
          <!--<div class="first-title">M D C 入 网 总 数 : 6 0 3 台</div>-->
          <div id="running_state_chart" style="width:100%;height: 400px;"></div>
@@ -78,6 +81,9 @@
      productionCode: {
        type: String,
        default: ''
      },
      userType: {
        type: Number
      }
    },
    data() {
@@ -112,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: {}
      }
@@ -142,10 +126,6 @@
      window.addEventListener('resize', this.handleWindowResize)
      this.drawCharts()
      this.getChartDataByApi()
    },
    activated() {
      console.log('触发activated')
      this.handleWindowResize()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
@@ -166,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)
          })
      },

@@ -270,7 +250,7 @@
      },

      /* 绘制设备运行状态玫瑰饼图 */
      drawRunningStateChart() {
      drawRunningStateChart(productionId) {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        const option = {
          height: 300,
@@ -350,6 +330,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 }
          })
        })
      },

      /* 绘制设备利用率胶囊图 */
@@ -543,14 +531,18 @@
        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('switchToBranchFactory', params.value)
            this.$emit('switchToNextSignage', { signageName: 'WorkshopSection', productionCode: params.value })
          }
        })
      },
@@ -752,7 +744,7 @@
          xAxis: [{
            name: 'OEE车间',
            nameLocation: 'middle',
            nameGap: 30, // x轴name与横坐标轴线的间距
            nameGap: 40, // x轴name与横坐标轴线的间距
            type: 'category',
            data: this.barChartData.map(item => item.name),
            axisLine: {
@@ -761,11 +753,11 @@
              }
            },
            axisLabel: {
              margin: 10,
              color: '#e2e9ff',
              textStyle: {
                fontSize: 12
              }
              show: true, // 是否显示刻度标签，默认显示
              interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              rotate: this.barChartData.length >= 5 ? -30 : 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
              inside: false, // 刻度标签是否朝内，默认朝外
              margin: 6 // 刻度标签与轴线之间的距离
            },
            axisTick: {
              show: false
@@ -1017,6 +1009,17 @@
      justify-content: space-between;

      .left-col {
        .back-nav {
          width: 100px;
          height: 30px;
          color: #eee;
          position: absolute;
          top: 25px;
          left: 25px;
          cursor: pointer;
          z-index: 9999
        }

        .first-title {
          color: #00A8AC;
          font-size: 20px;