420项目： 1、大屏车间管理页面新增及编辑时随意输入车间名称调整为选择已有车间 2、增加车间看板拖拽及缩放功能权限功能 3、实现车间看板设备状态数量...

zhaowei

2025-03-04 be590d48f66806716c990bdce18d0ed90bf18797

 src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue

@@ -2,21 +2,36 @@
  <div style="flex:1;display: flex;">
    <div class="chart-container" :id="chartContainerId"></div>
    <div class="equipment-state-container">
      <div>设备总数：{{equipmentList.length}}台</div>
      <div>大修、项修数量：{{getEquipmentMaintainCount}}台</div>
      <div v-for="(item,index) in equipmentStateList" :key="index">
        <img :src="item.imageColor"><span>{{item.label}}：{{getEquipmentStateCount(item.value)}}台</span>
      <div>设备总数：{{equipmentStatusCountObj.equipmentCount}}台</div>
      <div>大修、项修数量：{{equipmentStatusCountObj.repairCount}}台</div>
      <div>
        <img :src="getStatusImageAndLabel('正常运行','statusImage')"><span>{{getStatusImageAndLabel('正常运行','label')}}：{{equipmentStatusCountObj.runCount}}台</span>
      </div>
      <div>
        <img :src="getStatusImageAndLabel('待机','statusImage')"><span>{{getStatusImageAndLabel('待机','label')}}：{{equipmentStatusCountObj.waitCount}}台</span>
      </div>
      <div>
        <img :src="getStatusImageAndLabel('报警','statusImage')"><span>{{getStatusImageAndLabel('报警','label')}}：{{equipmentStatusCountObj.errorCount}}台</span>
      </div>
      <div>
        <img :src="getStatusImageAndLabel('关机','statusImage')"><span>{{getStatusImageAndLabel('关机','label')}}：{{equipmentStatusCountObj.closeCount}}台</span>

      </div>
    </div>
  </div>
</template>

<script>
  import signageApi from '@/api/signage'

  export default {
    name: 'WorkshopDeviceOverview',
    components: {},
    props: {
      equipmentList: {
      currentProductionId: {
        type: String
      },
      equipmentStatusList: {
        type: Array
      },
      toDecimal2NoZero: {
@@ -27,153 +42,40 @@
      return {
        chartContainer: null,
        chartContainerId: 'left-col-chart1',
        equipmentStateList: [
          {
            label: '正常运行',
            value: [3, 23],
            imageColor: require('@/assets/WorskhopSignage/stateImg_green.gif')
          },
          {
            label: '待机',
            value: [1, 2],
            imageColor: require('@/assets/WorskhopSignage/stateImg_yellow.gif')
          },
          {
            label: '报警',
            value: [22],
            imageColor: require('@/assets/WorskhopSignage/stateImg_red.gif')
          },
          {
            label: '关机',
            value: [null, 0],
            imageColor: require('@/assets/WorskhopSignage/stateImg_gray.gif')
          }
        ]
      }
    },
    computed: {
      /* 获取设备大修、项修数量 */
      getEquipmentMaintainCount() {
        return this.equipmentList.filter(item => item.maintainType === 2).length
        equipmentStatusCountObj: {}
      }
    },
    mounted() {
      this.getChartDataByApi()
      window.addEventListener('resize', this.handleWindowResize)
      if (!this.currentProductionId) return
      this.getDeviceStatusCountByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      getDeviceStatusCountByApi() {
        const that = this
        signageApi.getDeviceStatusCountApi(that.currentProductionId)
          .then(res => {
            if (!res.success) return
            that.equipmentStatusCountObj = res.result
            this.getChartDataByApi()
          })
      },

      getChartDataByApi() {
        this.chartContainer = this.$echarts.init(document.getElementById(this.chartContainerId))
        this.initChart()
      },

      initChart() {
        const data = [
          {
            'number': '20102',
            'name': '2-D整体机匣',
            'count': 7,
            'planCount': 14,
            'rateCount': 0.5000
          },
          {
            'number': '20103',
            'name': '3-D燃烧室机匣',
            'count': 3,
            'planCount': 9,
            'rateCount': 0.3333
          },
          {
            'number': '20104',
            'name': '4-D焊接机匣工段',
            'count': 11,
            'planCount': 28,
            'rateCount': 0.3929
          },
          {
            'number': '20105',
            'name': '5-D CRIC单元',
            'count': 2,
            'planCount': 15,
            'rateCount': 0.1333
          },
          {
            'number': '20106',
            'name': '6-D风扇单元',
            'count': 6,
            'planCount': 15,
            'rateCount': 0.4000
          },
          {
            'number': '20107',
            'name': '7-D涡轮机匣',
            'count': 6,
            'planCount': 17,
            'rateCount': 0.3529
          },
          {
            'number': '20109',
            'name': '9-D钳工单元',
            'count': 2,
            'planCount': 18,
            'rateCount': 0.1111
          },
          {
            'number': null,
            'name': '总任务',
            'count': 37,
            'planCount': 116,
            'rateCount': 0.3190
          }
        ]
        let yAxisData1, yAxisData2, completionNum
        const formatterData = [
          {
            value: '', name: '完成量', itemStyle: { normal: { color: '#00923f' } },
            label: {
              normal: {
                show: true,
                fontSize: '70%',
                position: 'inside',
                formatter: function() {
                  return completionNum + '%'
                }
              }
            }
          },
          {
            value: '', name: '任务量',
            itemStyle: { normal: { color: '#e67817' } },
            label: {
              normal: {
                show: false
              }
            }
          }
        ]
        const yAxisData1 = this.toDecimal2NoZero((this.equipmentStatusCountObj.runCount / this.equipmentStatusCountObj.equipmentCount) * 100)
        const yAxisData2 = 100 - yAxisData1
        const runNum = yAxisData1
        const option = {
          legend: {
            show: false,
            bottom: 5,
            textStyle: {
              color: '#fff',
              fontSize: '70%'
            },
            itemWidth: 12,
            itemHeight: 8,
            selectedMode: false,
            formatter: function(name) {
              var target
              for (var i = 0, l = formatterData.length; i < l; i++) {
                if (formatterData[i].name == name) {
                  target = formatterData[i].value
                }
              }
              return name + '  ' + target
            }
            show: false
          },
          series: [
            {
@@ -184,33 +86,31 @@
              hoverAnimation: false,
              data: [
                {
                  value: 0, name: '完成量', itemStyle: { normal: { color: '#00923f' } },
                  value: 0,
                  name: '运行量',
                  itemStyle: { color: '#00923f' },
                  label: {
                    normal: {
                      show: true,
                      fontSize: '70%',
                      position: 'inside',
                      textBorderWidth: 0,
                      formatter: function() {
                        return completionNum + '%'
                      }
                    show: true,
                    fontSize: '70%',
                    color: '#fff',
                    position: 'inside',
                    textBorderWidth: 0,
                    formatter: function() {
                      return runNum + '%'
                    }
                  }
                },
                {
                  value: 100, name: '任务量',
                  itemStyle: { normal: { color: '#e67817' } },
                  value: 100,
                  name: '设备量',
                  itemStyle: { color: '#e67817' },
                  label: {
                    normal: {
                      show: false
                    }
                    show: false
                  }
                }
              ],
              labelLine: {
                normal: {
                  show: false
                }
                show: false
              },
              itemStyle: {
                emphasis: {
@@ -222,15 +122,6 @@
            }
          ]
        }
        data.forEach(item => {
          if (item.name === '总任务' && item.rateCount !== null) {
            yAxisData1 = this.toDecimal2NoZero(item.rateCount * 100)
            yAxisData2 = 100 - this.toDecimal2NoZero(item.rateCount * 100)
            completionNum = yAxisData1
            formatterData[0].value = item.count
            formatterData[1].value = item.planCount
          }
        })
        option.series[0].data[0].value = yAxisData1
        option.series[0].data[1].value = yAxisData2
        this.chartContainer.setOption(option, true)
@@ -248,6 +139,10 @@
        return stateCount
      },

      getStatusImageAndLabel(label, property) {
        return this.equipmentStatusList.find(item => item.label === label)[property]
      },

      /**
       * 窗口尺寸变化时触发
       * 调整图表尺寸以适应分辨率