1、首页 （1）设备级看板单击设备效率统计仪表盘图标跳转至统计分析页面并根据唯一编号筛选页面对应数据 （2）设备级看板点击设备班次按钮跳转至工作日历页...

zhuzhuanzhuan

2024-04-18 28189102d735bfc2c41720d1ef292bd9024b49f2

 src/views/dashboard/EquipmentSignage.vue

@@ -21,9 +21,10 @@
              <th>设备编号</th>
              <th>型号</th>
            </tr>
            <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)">
            <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)"
                :style="{backgroundColor:equipmentId===item.equipmentId?'#1D94D4':''}">
              <td>{{item.equipmentId}}</td>
              <td>{{item.equipmentType}}</td>
              <td>{{item.equipmentModel}}</td>
            </tr>
          </table>
        </div>
@@ -122,7 +123,7 @@
            </div>

            <div style="display: flex;justify-content: space-evenly;font-size: 20px;padding: 0 50px">
              <div v-for="(item,index) in buttonList" :key="index" @click="click(item)"
              <div v-for="(item,index) in buttonList" :key="index" @click="navigateToPage(item)"
                   style="width: 200px;height: 70px;margin: 0 10px;cursor: pointer">
                <dv-decoration-11>{{item.label}}</dv-decoration-11>
              </div>
@@ -186,63 +187,18 @@
        type: String,
        default: ''
      },
      workshopSectionProductionCode: {
        type: String,
        default: ''
      },
      userType: {
        type: Number
      }
    },
    data() {
      return {
        equipmentId: '2140223',
        equipmentList: [
          {
            equipmentId: '2140223',
            equipmentType: 'CV4160'
          },
          {
            equipmentId: '2140224',
            equipmentType: 'CV4161'
          },
          {
            equipmentId: '2140225',
            equipmentType: 'CV4162'
          },
          {
            equipmentId: '2140226',
            equipmentType: 'CV4163'
          },
          {
            equipmentId: '2140227',
            equipmentType: 'CV4164'
          },
          {
            equipmentId: '2140227',
            equipmentType: 'CV4165'
          },
          {
            equipmentId: '2140228',
            equipmentType: 'CV4166'
          },
          {
            equipmentId: '2140229',
            equipmentType: 'CV4167'
          },
          {
            equipmentId: '2140230',
            equipmentType: 'CV4168'
          },
          {
            equipmentId: '2140231',
            equipmentType: 'CV4169'
          },
          {
            equipmentId: '2140232',
            equipmentType: 'CV4170'
          },
          {
            equipmentId: '2140233',
            equipmentType: 'CV4171'
          }
        ],
        equipmentId: '',
        equipmentList: [],
        equipmentInfo: {
          equipmentId: '2511563154',
          ABCSymbol: '3312321421',
@@ -268,7 +224,8 @@
            label: '报修'
          },
          {
            label: '设备班次'
            label: '设备班次',
            pageName: 'mdc-base-DeviceCalendar'
          }
        ],
        lineChart: '',
@@ -277,41 +234,114 @@
        gaugeChart2: '',
        gaugeChart3: '',
        gaugeChart4: '',
        gaugeChartData1: [],
        gaugeChartData2: [],
        gaugeChartData3: [],
        gaugeChartData4: []
        gaugeChartData: {
          utilizationRate: 0,
          startRate: 0,
          openRate: 0,
          overallEquipmentEfficiency: 0
        },
        hideLoadingDelayTime: 500
      }
    },
    created() {
      console.log('触发重新创建')
      this.equipmentId = this.productionCode
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.drawCharts()
      this.getChartDataByApi()
      this.getEquipmentListByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      selectEquipment(record) {
        this.equipmentId = record.equipmentId
      },

      click(record) {
        window.alert(record.label)
      getEquipmentListByApi() {
        // 首页一进入即设备级或工段级时，workshopSectionProductionCode为空，默认查询第一个车间中第一个工段下的设备列表
        signageApi.getEquipmentListApi(this.workshopSectionProductionCode)
          .then(res => {
            if (res.success) {
              this.equipmentList = res.result
              if (!this.productionCode && this.equipmentList.length > 0) this.equipmentId = this.equipmentList[0].equipmentId
            }
          })
          .finally(() => {
            // 此处为保证equipmentId正常赋值后再调用接口获取图表数据（异步）
            this.getChartDataByApi()
          })
      },

      getChartDataByApi() {

        this.getGaugeChartDataByApi()
        this.getLineChartDataByApi()
      },

      /* 绘制图表汇总方法 */
      drawCharts() {
        this.drawGaugeChart()
        this.drawLineChart()
      selectEquipment(record) {
        if (record.equipmentId === this.equipmentId) return
        this.equipmentId = record.equipmentId
        this.getChartDataByApi()
      },

      navigateToPage(record) {
        if (record.pageName) {
          this.$router.push({
            name: record.pageName,
            params: { equipmentId: this.equipmentId }
          })
        }
      },

      /* 调用接口获取设备效率统计 */
      getGaugeChartDataByApi() {
        this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
        this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
        this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
        this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
        this.gaugeChart1.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        this.gaugeChart2.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        this.gaugeChart3.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        this.gaugeChart4.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })

        signageApi.getEquipmentLevelEfficiencyStatisticsApi(this.equipmentId)
          .then(res => {
            if (res.success) this.gaugeChartData = res.result
            this.drawGaugeChart()
          })
      },

      /* 调用接口获取整年度利用率 */
      getLineChartDataByApi() {
        this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
        this.lineChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })

        signageApi.getEquipmentAnnualEfficiencyStatisticsApi(this.equipmentId)
          .then(res => {
            if (res.success) this.lineChartData = res.result
            this.drawLineChart()
          })
      },

      /* 绘制仪表盘图表 */
@@ -408,61 +438,112 @@

      /* 绘制利用率仪表盘图表 */
      drawGaugeChart1(opt) {
        this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + '利用率'
        option.series[0].name = '利用率'
        option.series[0].data = [56]
        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
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: {
                isEquipment: true,
                productionId: this.equipmentId,
                tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
              }
            })
          }
        })
      },

      /* 绘制开动率仪表盘图表 */
      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 = [23]
        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
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: {
                isEquipment: true,
                productionId: this.equipmentId,
                tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
              }
            })
          }
        })
      },

      /* 绘制开机率仪表盘图表 */
      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 = [44]
        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
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: {
                isEquipment: true,
                productionId: this.equipmentId,
                tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
              }
            })
          }
        })
      },

      /* 绘制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 = [78]
        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
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-OEEAnalysis',
              params: { isEquipment: true, productionId: this.equipmentId }
            })
          }
        })
      },

      /* 绘制折线图 */
      drawLineChart() {
        this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
        const newData = {
          xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          xAxis: this.lineChartData.dateList,
          yAxis: [
            {
              name: '利用率',
              value: [20, 60, 50, 60, 20, 50, 60, 70, 23, 40, 60, 70]
              value: this.lineChartData.dataList.map(item => item.utilizationRate)
            },
            {
              name: '开动率',
              value: [23, 60, 44, 40, 74, 80, 60, 90, 70, 40, 70, 40]
              value: this.lineChartData.dataList.map(item => item.startRate)
            },
            {
              name: 'OEE',
              value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
              value: this.lineChartData.dataList.map(item => item.overallEquipmentEfficiency)
            }
          ],
          yAxisName: '整年度利用率(%)'
@@ -574,6 +655,7 @@
              type: 'value',
              position: 'right',
              splitNumber: 5,
              max: 100,
              axisLabel: {
                show: true,
                color: '#fff'
@@ -598,6 +680,7 @@
          series: seriesData
        }
        this.lineChart.setOption(option, true)
        setTimeout(() => this.lineChart.hideLoading(), this.hideLoadingDelayTime)
      },

      /**