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

zhuzhuanzhuan

2024-04-18 28189102d735bfc2c41720d1ef292bd9024b49f2

 src/views/dashboard/WorkshopSectionSignage.vue

@@ -73,19 +73,21 @@
      <div style="width: 38%" class="middle-col">
        <dv-border-box-9 style="padding: 15px">
          <div id="running_state_chart" style="width:100%;height: 400px;"></div>
          <div id="line_chart" style="width:100%;height: 400px;"></div>
          <div id="first7DaysEfficiency_chart" style="width:100%;height: 400px;"></div>
        </dv-border-box-9>
      </div>

      <div style="width: 30%" class="right-col">
        <dv-border-box-9 style="padding: 15px">
          <a-form layout="inline"
                  @keyup.enter.native="$emit('switchToNextSignage', { signageName: 'Equipment', productionCode: equipmentId })">
                  @keyup.enter.native="switchToEquipmentSignage">
            <a-form-item label="设备编号">
              <a-auto-complete
                v-model="equipmentId"
                @select="handleSelectChange"
                placeholder="回车键查询"
                :allowClear="true"
                :filter-option="filterOption"
                :dataSource="first7DaysEfficiencyData.mdcEquipmentList.map(item=>item.equipmentId)"
                size="large"
              />
            </a-form-item>
@@ -145,8 +147,11 @@
        maintenanceOverdueNum: 0,
        nextMonthMaintenancePlanNum: 0,
        nextNextMonthMaintenancePlanNum: 0,
        lineChart: '',
        lineChartData: {},
        first7DaysEfficiencyChart: '',
        first7DaysEfficiencyData: {
          dataList: [],
          mdcEquipmentList: []
        },
        gaugeChart1: '',
        gaugeChart2: '',
        gaugeChart3: '',
@@ -164,30 +169,37 @@
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.drawCharts()
      this.getChartDataByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
      if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
      if (this.lineChartCarouselTime) clearInterval(this.lineChartCarouselTime)
      if (this.first7DaysEfficiencyChartCarouselTime) clearInterval(this.first7DaysEfficiencyChartCarouselTime)
    },
    methods: {
      /* 调用接口获取图表数据汇总方法 */
      getChartDataByApi() {
        this.getTechConditionDataByApi()
        this.getWarrantyMalfunctionDataByApi()
        this.getRunningStateDataByApi()
        this.getMonthMaintenanceNumByApi()
        this.getLineChartDataByApi()
        this.getFirst7DaysEfficiencyDataByApi()
        this.getGaugeChartDataByApi()
        this.getBarChartDataByApi()
      },

      /* 调用接口获取技术状态 */
      getTechConditionDataByApi() {
        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
        this.techConditionChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentTechnologyStatusListApi(this.productionCode)
          .then(res => {
            if (res.success) {
            if (res.success && res.result) {
              this.techConditionData = [
                { value: res.result[0].qualifiedCount, name: '合格' },
                { value: res.result[0].disabledCount, name: '禁用' },
@@ -200,9 +212,16 @@

      /* 调用接口获取设备报修故障 */
      getWarrantyMalfunctionDataByApi() {
        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
        this.warrantyMalfunctionChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getReportRepairEquipmentListApi(this.productionCode)
          .then(res => {
            if (res.success) {
            if (res.success && res.result) {
              this.warrantyMalfunctionData = [
                { value: res.result[0].failurTotalCount, name: '报修' },
                { value: res.result[0].stopCount, name: '停机' },
@@ -235,6 +254,13 @@

      /* 调用接口获取设备运行状态 */
      getRunningStateDataByApi() {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        this.runningStateChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
          .then(res => {
            if (res.success) this.runningStateData = res.result.list
@@ -243,26 +269,67 @@
      },

      /* 调用接口获取前7天利用率 */
      getLineChartDataByApi() {
      getFirst7DaysEfficiencyDataByApi() {
        this.first7DaysEfficiencyChart = this.$echarts.init(document.getElementById('first7DaysEfficiency_chart'))
        this.first7DaysEfficiencyChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentDayUtilizationStatisticsApi(this.productionCode)
          .then(res => {
            if (res.success) this.lineChartData = res.result
            this.drawLineChart()
            if (res.success) this.first7DaysEfficiencyData = res.result
            this.drawFirst7DaysEfficiencyDataChart()
          })
      },

      /* 调用接口获取设备效率统计 */
      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.getEquipmentEfficiencyStatisticsApi(this.productionCode)
          .then(res => {
            console.log('res=', res)
            if (res.success) this.gaugeChartData = res.result
            this.drawGaugeChart(res.result.productionId)
            this.drawGaugeChart()
          })
      },

      /* 调用接口获取上月OEE */
      getBarChartDataByApi() {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        this.barChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        signageApi.getEquipmentOEEMonthStatisticsApi(this.productionCode)
          .then(res => {
            if (res.success) {
@@ -277,18 +344,8 @@
          })
      },

      /* 绘制图表汇总方法 */
      drawCharts() {
        this.drawRunningStateChart()
        this.drawTechConditionChart()
        this.drawWarrantyMalfunctionChart()
        this.drawGaugeChart()
        this.drawBarChart()
      },

      /* 绘制技术状态饼图 */
      drawTechConditionChart() {
        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
@@ -362,11 +419,11 @@
          ]
        }
        this.techConditionChart.setOption(option, true)
        this.techConditionChart.hideLoading()
      },

      /* 绘制设备报修故障饼图 */
      drawWarrantyMalfunctionChart() {
        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
@@ -440,11 +497,11 @@
          ]
        }
        this.warrantyMalfunctionChart.setOption(option, true)
        this.warrantyMalfunctionChart.hideLoading()
      },

      /* 绘制设备运行状态玫瑰饼图 */
      drawRunningStateChart(productionId) {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
@@ -520,6 +577,7 @@
          ]
        }
        this.runningStateChart.setOption(option, true)
        this.runningStateChart.hideLoading()

        this.runningStateChart.on('click', params => {
          this.$router.push({
@@ -529,35 +587,35 @@
        })
      },

      /* 绘制折线图 */
      drawLineChart() {
        this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
        this.lineChartData.equipmentIdList.forEach(item => {
          if (!this.lineChartData.dataList.map(item => item.equipmentId).includes(item)) {
      /* 绘制前7天利用率柱图 */
      drawFirst7DaysEfficiencyDataChart() {
        this.first7DaysEfficiencyData.mdcEquipmentList.forEach(item => {
          if (!this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId).includes(item)) {
            const equipmentIdObj = {
              equipmentId: item,
              equipmentId: item.equipmentId,
              equipmentName: item.equipmentName,
              openRate: 0,
              startRate: 0,
              utilizationRate: 0
            }
            this.lineChartData.dataList.push(equipmentIdObj)
            this.first7DaysEfficiencyData.dataList.push(equipmentIdObj)
          }
        })
        const equipmentIdList = this.lineChartData.dataList.map(item => item.equipmentId)
        const equipmentIdList = this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId)
        const newData = {
          xAxis: equipmentIdList,
          yAxis: [
            {
              name: '利用率',
              value: this.lineChartData.dataList.map(item => item.utilizationRate)
              value: this.first7DaysEfficiencyData.dataList.map(item => item.utilizationRate)
            },
            {
              name: '开动率',
              value: this.lineChartData.dataList.map(item => item.startRate)
              value: this.first7DaysEfficiencyData.dataList.map(item => item.startRate)
            },
            {
              name: '开机率',
              value: this.lineChartData.dataList.map(item => item.openRate)
              value: this.first7DaysEfficiencyData.dataList.map(item => item.openRate)
            }
          ],
          yAxisName: '前7天利用率(%)'
@@ -569,7 +627,7 @@
        seriesData = newData.yAxis.map((item1, index1) => {
          return {
            name: item1.name,
            type: 'line',
            type: 'bar',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
@@ -577,6 +635,9 @@
            },
            lineStyle: {
              width: 2
            },
            markPoint: {
              show: true
            },
            yAxisIndex: 1,
            data: item1.value // 折线图的数据
@@ -618,7 +679,6 @@
            }
          },
          xAxis: {
            triggerEvent: true,
            data: newData.xAxis || [],
            axisLabel: {
              interval: 0,
@@ -669,6 +729,7 @@
              type: 'value',
              position: 'right',
              splitNumber: 5,
              max: 100,
              axisLabel: {
                show: true,
                color: '#fff'
@@ -696,17 +757,40 @@
            startValue: 0, // 从头开始。
            endValue: 6 // 一次性展示几个
          }
          // toolbox: {
          //   show: true,
          //   feature: {
          //     mark: { show: true },
          //     magicType: { show: true, type: ['line', 'bar'] },
          //     restore: { show: true },
          //     saveAsImage: { show: true, name: '前7天利用率统计图', pixelRatio: 1 }
          //   }
          // }
        }
        this.lineChart.setOption(option, true)
        this.first7DaysEfficiencyChart.setOption(option, true)
        this.first7DaysEfficiencyChart.hideLoading()

        if (this.lineChartData.equipmentIdList.length <= 7) return
        this.lineChartCarouselTime = setInterval(() => {
        this.first7DaysEfficiencyChart.on('click', params => {
          this.$router.push({
            name: 'mdc-base-StatisticsChart',
            params: {
              isEquipment: true,
              productionId: params.name,
              tierName: this.first7DaysEfficiencyData.dataList.find(item => item.equipmentId === params.name).equipmentName
            }
          })
        })


        // 设备列表大于7个时开启自动轮播
        if (this.first7DaysEfficiencyData.mdcEquipmentList.length <= 7) return
        this.first7DaysEfficiencyChartCarouselTime = setInterval(() => {
          newData.xAxis.push(newData.xAxis.shift())
          newData.yAxis.forEach(item => item.value.push(item.value.shift()))
          this.$nextTick(() => {
            this.lineChart.setOption(option, true)
            this.first7DaysEfficiencyChart.setOption(option, true)
          })
        }, 3000)
        }, 30000)
      },

      /* 绘制仪表盘图表 */
@@ -804,12 +888,12 @@

      /* 绘制利用率仪表盘图表 */
      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 = [this.gaugeChartData.utilizationRate]
        this.gaugeChart1.setOption(option, true)
        this.gaugeChart1.hideLoading()

        this.gaugeChart1.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -834,6 +918,7 @@
        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
@@ -858,6 +943,7 @@
        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
@@ -882,17 +968,14 @@
        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
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: {
                isEquipment: false,
                productionId: this.gaugeChartData.productionId,
                tierName: this.gaugeChartData.productionName
              }
              name: 'mdc-base-OEEAnalysis',
              params: { isEquipment: false, productionId: this.gaugeChartData.productionId }
            })
          }
        })
@@ -900,7 +983,6 @@

      /* 绘制单柱图 */
      drawBarChart() {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        const xAisData = this.barChartData.map(item => item.name)
        const option = {
          height: 260,
@@ -960,7 +1042,7 @@
            }],
          yAxis: [
            {
              // name: '数量',
              name: '%',
              // nameLocation: 'middle',
              // nameGap: 30, // x轴name与横坐标轴线的间距
              position: 'left',
@@ -1024,7 +1106,17 @@
        }
        option.title.text = `${moment().subtract(1, 'months').format('M')}月OEE`
        this.barChart.setOption(option, true)
        this.barChart.hideLoading()

        this.barChart.on('click', params => {
          const productionId = params.name
          this.$router.push({
            name: 'mdc-base-OEEAnalysis',
            params: { isEquipment: true, productionId }
          })
        })

        // 设备列表大于6个时开启自动轮播
        if (this.barChartData.length <= 6) return
        this.barChartCarouselTime = setInterval(() => {
          this.barChartData.push(this.barChartData.shift())
@@ -1035,15 +1127,31 @@
        }, 3000)
      },

      handleSelectChange(value) {
        this.equipmentId = value
      },

      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },

      switchToEquipmentSignage() {
        if (this.equipmentId) {
          this.$emit('switchToNextSignage', {
            signageName: 'Equipment',
            productionCode: this.equipmentId
          })
        }
      },

      /**
       * 窗口尺寸变化时触发
       * 调整图表尺寸以适应分辨率
       */
      handleWindowResize() {
        if (this.techConditionChart) this.techConditionChart.resize()
        if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
        if (this.runningStateChart) this.runningStateChart.resize()
        if (this.lineChart) this.lineChart.resize()
        if (this.first7DaysEfficiencyChart) this.first7DaysEfficiencyChart.resize()
        if (this.gaugeChart1) this.gaugeChart1.resize()
        if (this.gaugeChart2) this.gaugeChart2.resize()
        if (this.gaugeChart3) this.gaugeChart3.resize()
@@ -1128,6 +1236,10 @@
    color: #fff;
  }

  /deep/ .ant-select {
    color: #fff;
  }

  /deep/ .ant-input {
    border: 1px solid #689ACA;
    color: #fff;