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

zhaowei

2025-03-04 be590d48f66806716c990bdce18d0ed90bf18797

420项目：
1、大屏车间管理页面新增及编辑时随意输入车间名称调整为选择已有车间
2、增加车间看板拖拽及缩放功能权限功能
3、实现车间看板设备状态数量及图表数据由后台驱动
4、车间看板页面月、周、日利用率图表数据由后台驱动
5、车间看板页面报警信息列表数据由后台驱动
6、车间看板页面调整右侧设备状态判定，同时加入异常状态展示（设备编号背景色变为红色）

 src/api/mdc.js

@@ -3,33 +3,6 @@
export default {
  // èŽ·å–控制系统类型
  getDriveTypeApi: () => getAction('/mdc/mdcDriveTypeParamConfig/getDriveParamOptions'),
  // -------------------------------------车间看板页面--------------------------------------------
  // é¦–页获取大屏入口车间列表
  getWorkshopListInHomePageApi: () => getAction('/mdc/mdcWorkshopInfo/getWorkshopList'),
  // æ ¹æ®è½¦é—´id查询设备列表
  getDeviceListByWorkshopIdApi: params => getAction('/mdc/mdcWorkshopInfo/workshopEquipmentList', params),
  // æ ¹æ®è½¦é—´id查询车间详细信息
  getWorkshopDetailByWorkshopIdApi: id => getAction('/mdc/mdcWorkshopInfo/queryById', { id }),
  // æ ¹æ®è½¦é—´id查询大屏信息
  getDeviceListInWorkshopSignagePageApi: workshopId => getAction('/mdc/mdcWorkshopInfo/getBigScreenInfo', { workshopId }),
  // ä¿å­˜å¤§å±è½¦é—´è®¾å¤‡åæ ‡å¤§å°ä¿¡æ¯
  saveDevicePositionAndSizeApi: params => putAction('/mdc/mdcWorkshopInfo/saveEquipmentCoordinate', params),
  // æŸ¥è¯¢è½¦é—´åˆ—表
  getWorkshopListApi: params => getAction('/mdc/mdcWorkshopInfo/list', params),
  // æ–°å¢žè½¦é—´ä¿¡æ¯
  addWorkshopApi: params => postAction('/mdc/mdcWorkshopInfo/add', params),
  // ç¼–辑车间信息
  editWorkshopApi: params => putAction('/mdc/mdcWorkshopInfo/edit', params),
  // åˆ é™¤å•ä¸ªè½¦é—´ä¿¡æ¯
  deleteSingleWorkshopApi: id => deleteAction('/mdc/mdcWorkshopInfo/delete', { id }),
  // æ‰¹é‡åˆ é™¤è½¦é—´ä¿¡æ¯
  deleteBatchWorkshopApi: ids => deleteAction('/mdc/mdcWorkshopInfo/deleteBatch', { ids }),
  // æ–°å¢žå¤§å±è½¦é—´å’Œè®¾å¤‡å…³ç³»
  addDeviceInWorkshopApi: params => postAction('/mdc/mdcWorkshopInfo/addWorkshopEquipment', params),
  // åˆ é™¤å•ä¸ªå¤§å±è½¦é—´å’Œè®¾å¤‡å…³ç³»
  deleteSingleDeviceInWorkshopApi: params => deleteAction('/mdc/mdcWorkshopInfo/deleteWorkshopEquipment', params),
  // æ‰¹é‡åˆ é™¤å¤§å±è½¦é—´å’Œè®¾å¤‡å…³ç³»
  deleteBatchDeviceInWorkshopApi: params => deleteAction('/mdc/mdcWorkshopInfo/deleteWorkshopEquipmentBatch', params),
  // -------------------------------------设备参数阈值管理页面--------------------------------------------
  // æ ¹æ®é©±åŠ¨ç±»åž‹èŽ·å–参数
  getParamListByDriveTypeApi: controlSystemType => getAction(`/mdc/mdcDriveTypeParamConfig/getDriveParamOptionsByType?controlSystemType=${controlSystemType}`),

 src/api/signage.js

@@ -3,28 +3,26 @@
export default {
  // é¦–页获取大屏入口车间列表
  getWorkshopListInHomePageApi: () => getAction('/mdc/mdcWorkshopInfo/getWorkshopList'),
  // æ ¹æ®è½¦é—´id查询设备列表
  getDeviceListByWorkshopIdApi: params => getAction('/mdc/mdcWorkshopInfo/workshopEquipmentList', params),
  // æ ¹æ®è½¦é—´id查询车间详细信息
  getWorkshopDetailByWorkshopIdApi: id => getAction('/mdc/mdcWorkshopInfo/queryById', { id }),
  getWorkshopDetailByWorkshopIdApi: productionId => getAction('/mdc/mdcWorkshopInfo/queryByProductionId', { productionId }),
  // æ ¹æ®è½¦é—´id查询大屏信息
  getDeviceListInWorkshopSignagePageApi: workshopId => getAction('/mdc/mdcWorkshopInfo/getBigScreenInfo', { workshopId }),
  getDeviceListInWorkshopSignagePageApi: productionId => getAction('/mdc/mdcWorkshopInfo/getBigScreenInfo', { productionId }),
  // æ ¹æ®è½¦é—´id查询当前车间所有设备的状态数量
  getDeviceStatusCountApi: productionId => getAction('/mdc/largeScreen/equipmentStatusOverview', { productionId }),
  // æ ¹æ®è½¦é—´id查询当前车间 æœˆ åˆ©ç”¨çŽ‡è¶‹åŠ¿
  getMonthUtilizationRateApi: productionId => getAction('/mdc/largeScreen/monthUtilizationTendency', { productionId }),
  // æ ¹æ®è½¦é—´id查询当前车间 å‘¨ åˆ©ç”¨çŽ‡è¶‹åŠ¿
  getWeekUtilizationRateApi: productionId => getAction('/mdc/largeScreen/weekUtilizationTendency', { productionId }),
  // æ ¹æ®è½¦é—´id查询当前车间 æ—¥ åˆ©ç”¨çŽ‡è¶‹åŠ¿
  getDayUtilizationRateApi: productionId => getAction('/mdc/largeScreen/dayUtilizationTendency', { productionId }),
  // æ ¹æ®è½¦é—´id查询当前车间设备报警信息
  getWorkshopAlarmInfoApi: productionId => getAction('/mdc/largeScreen/getAlarmInfo', { productionId }),
  // ä¿å­˜å¤§å±è½¦é—´è®¾å¤‡åæ ‡å¤§å°ä¿¡æ¯
  saveDevicePositionAndSizeApi: params => putAction('/mdc/mdcWorkshopInfo/saveEquipmentCoordinate', params),
  // æŸ¥è¯¢è½¦é—´åˆ—表
  getWorkshopListApi: params => getAction('/mdc/mdcWorkshopInfo/list', params),
  // æ–°å¢žè½¦é—´ä¿¡æ¯
  addWorkshopApi: params => postAction('/mdc/mdcWorkshopInfo/add', params),
  // ç¼–辑车间信息
  editWorkshopApi: params => putAction('/mdc/mdcWorkshopInfo/edit', params),
  // åˆ é™¤å•ä¸ªè½¦é—´ä¿¡æ¯
  deleteSingleWorkshopApi: id => deleteAction('/mdc/mdcWorkshopInfo/delete', { id }),
  // æ‰¹é‡åˆ é™¤è½¦é—´ä¿¡æ¯
  deleteBatchWorkshopApi: ids => deleteAction('/mdc/mdcWorkshopInfo/deleteBatch', { ids }),
  // æ–°å¢žå¤§å±è½¦é—´å’Œè®¾å¤‡å…³ç³»
  addDeviceInWorkshopApi: params => postAction('/mdc/mdcWorkshopInfo/addWorkshopEquipment', params),
  // åˆ é™¤å•ä¸ªå¤§å±è½¦é—´å’Œè®¾å¤‡å…³ç³»
  deleteSingleDeviceInWorkshopApi: params => deleteAction('/mdc/mdcWorkshopInfo/deleteWorkshopEquipment', params),
  // æ‰¹é‡åˆ é™¤å¤§å±è½¦é—´å’Œè®¾å¤‡å…³ç³»
  deleteBatchDeviceInWorkshopApi: params => deleteAction('/mdc/mdcWorkshopInfo/deleteWorkshopEquipmentBatch', params),
  // èŽ·å–二级车间信息
  getWorkshopListApi: () => getAction('/mdc/mdcWorkshopInfo/getProductionList')
}

 src/assets/WorskhopSignage/workshop_bg.png

Binary files differ

 src/config/router.config.js

@@ -80,7 +80,7 @@
    ]
  },
  {
    path: '/WorkshopSignage/:id',
    path: '/WorkshopSignage/:productionId',
    component: () => import('@/views/mdc/base/WorkshopSignage.vue')
  },
  {

 src/views/mdc/base/WorkshopSignage.vue

ÎļþÌ«´ó

 src/views/mdc/base/WorkshopSignageEntrance.vue

@@ -4,7 +4,7 @@
      :grid="{ gutter: [{xs: 0, sm: 24, md: 24, lg: 56, xl: 64, xxl: 80},20], xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }"
      :data-source="workshopList">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <div class="workshop-name" @click="navigateToWorkshopSignage(item.id)">{{item.workshopName}}</div>
        <div class="workshop-name" @click="navigateToWorkshopSignage(item.productionId)">{{item.workshopName}}</div>
      </a-list-item>
    </a-list>
  </div>
@@ -27,10 +27,10 @@
    methods: {
      /**
       * é€šè¿‡è½¦é—´Id跳转至相应车间大屏看板
       * @param id è½¦é—´Id
       * @param productionId è½¦é—´Id
       */
      navigateToWorkshopSignage(id) {
        const url = this.$router.resolve(`/WorkshopSignage/${id}`).href
      navigateToWorkshopSignage(productionId) {
        const url = this.$router.resolve(`/WorkshopSignage/${productionId}`).href
        window.open(url, '_blank')
      },
      /**

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

@@ -4,11 +4,15 @@

<script>
  import * as echarts from 'echarts'
  import signageApi from '@/api/signage'

  export default {
    name: 'DayUtilizationRateTrend',
    components: {},
    props: {
      currentProductionId: {
        type: String
      },
      toDecimal2NoZero: {
        type: Function
      }
@@ -20,57 +24,26 @@
      }
    },
    mounted() {
      this.getChartDataByApi()
      window.addEventListener('resize', this.handleWindowResize)
      if (!this.currentProductionId) return
      this.getChartDataByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      getChartDataByApi() {
        const that = this
        this.chartContainer = this.$echarts.init(document.getElementById(this.chartContainerId))
        this.initChart()
        signageApi.getDayUtilizationRateApi(this.currentProductionId)
          .then(res => {
            console.log('res==========', res)
            if (!res.success) return
            that.initChart(res.result)
          })
      },

      initChart() {
        const data = [
          {
            'number': 'A_1',
            'name': '1-D特种工艺',
            'count': 0.4452,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_2',
            'name': '2-D整体机匣',
            'count': 0.7642,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_3',
            'name': '3-D燃烧室机匣',
            'count': 0.4523,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_4',
            'name': '4-D焊接机匣工段',
            'count': 0.6987,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_5',
            'name': '5-D CRIC单元',
            'count': 0.8924,
            'planCount': null,
            'rateCount': null
          },
        ]
        const xAxisData = []
      initChart(dataObj) {
        const seriesData = []
        const option = {
          tooltip: {
@@ -164,306 +137,9 @@
              },
              //barCategoryGap:'180%',
              itemStyle: {
                normal: {
                  barBorderRadius: '',
                  color: function(params) {
                    const colorList = [
                      //1-D特种工艺单元
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#9cc4f6' },
                          { offset: 1, color: '#538dd6' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ffffa2' },
                          { offset: 1, color: '#ffff01' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#97fcc5' },
                          { offset: 1, color: '#0bae8d' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ffbc85' },
                          { offset: 1, color: '#e26c0a' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#fb78ba' },
                          { offset: 1, color: '#8f0149' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //环件单元
                          { offset: 0, color: '#d297ff' },
                          { offset: 1, color: '#7030a0' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ffe491' },
                          { offset: 1, color: '#8f6c00' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ffb6b9' },
                          { offset: 1, color: '#fd4c53' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#92cbba' },
                          { offset: 1, color: '#18a387' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ff5b62' },
                          { offset: 1, color: '#a02100' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#b5d5e3' },
                          { offset: 1, color: '#1b8bd0' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //中小机匣单元
                          { offset: 0, color: '#ebd3ff' },
                          { offset: 1, color: '#e889ff' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#D69123' },
                          { offset: 1, color: '#a16900' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //低压导向
                          { offset: 0, color: '#d588c8' },
                          { offset: 1, color: '#9545AE' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //低压叶片 1 4
                          { offset: 0, color: '#97abd6' },
                          { offset: 1, color: '#6268b2' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#d7dab2' },
                          { offset: 1, color: '#b8aa15' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#e9c9b0' },
                          { offset: 1, color: '#D9646A' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#a4e3d6' },
                          { offset: 1, color: '#01A55E' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [

                          { offset: 0, color: '#2052b1' },
                          { offset: 1, color: '#002b73' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //盘件单元
                          { offset: 0, color: '#3e71e2' },
                          { offset: 1, color: '#0042c8' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //结构件单元
                          { offset: 0, color: '#99d6cf' },
                          { offset: 1, color: '#21bf90' }
                        ]
                      )
                      , new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //  7-D
                          { offset: 0, color: '#99d6cf' },
                          { offset: 1, color: '#0ad0bb' }
                        ]
                      )
                      , new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#FF9297' },
                          { offset: 1, color: '#FF9297' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#fb78ba' },
                          { offset: 1, color: '#ff77dc' }
                        ]
                      ),
                      //一厂
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#9cc4f6' },
                          { offset: 1, color: '#538dd6' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ffffa2' },
                          { offset: 1, color: '#ffff01' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#0bae8d' },
                          { offset: 1, color: '#0bae8d' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ffbc85' },
                          { offset: 1, color: '#e26c0a' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#97abd6' },
                          { offset: 1, color: '#842cb2' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#99d6cf' },
                          { offset: 1, color: '#0ad0bb' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#FF9297' },
                          { offset: 1, color: '#FF9297' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#fb78ba' },
                          { offset: 1, color: '#ff77dc' }
                        ]
                      )
                    ]
                    if (params.name == '1-D特种工艺' || params.name == '压气机一' || params.name == '1-D特种工艺单元') {
                      return colorList[24]
                    }
                    if (params.name == '2-D整体机匣' || params.name == '2-D整体机匣单元') {
                      return colorList[25]
                    }
                    if (params.name == '3-D燃烧室机匣' || params.name == '燃烧室机匣' || params.name == '3-D压气机机匣单元' || params.name == '3-D压气机机匣') {
                      return colorList[26]
                    }
                    if (params.name == '4-D焊接机匣工段' || params.name == '三工段' || params.name == '支架小环件单元' || params.name == '4-D焊接机匣单元') {
                      return colorList[27]
                    }
                    if (params.name == '5-D CRIC单元' || params.name == '10-D部件装配单元') {
                      return colorList[4]
                    }
                    if (params.name == '6-D风扇单元' || params.name == '6-D风扇机匣单元') {
                      return colorList[28]
                    }
                    if (params.name == '7-D涡轮机匣' || params.name == '7-D涡轮机匣单元') {
                      return colorList[29]
                    }
                    if (params.name == '8-D科研工段' || params.name == '科研工段' || params.name == '8-D科研单元') {
                      return colorList[30]
                    }
                    if (params.name == '10-D部件装配' || params.name == '10-D部件装配单元') {
                      return colorList[31]
                    }
                    if (params.name == 'JD-2军品机加' || params.name == '军品机加工段' || params.name == '四工段') {
                      return colorList[8]
                    }
                    if (params.name == '10-D生产室' || params.name == 'IGV叶片') {
                      return colorList[9]
                    }

                    if (params.name == '五工段') {
                      return colorList[10]
                    }
                    if (params.name == '六工段' || params.name == '中小机匣单元') {
                      return colorList[11]
                    }
                    if (params.name == '涡轮叶片') {
                      return colorList[12]
                    }
                    if (params.name == '低压导向') {
                      return colorList[13]
                    }
                    if (params.name == '低压叶片') {
                      return colorList[14]
                    }
                    if (params.name == '导向叶片') {
                      return colorList[15]
                    }
                    if (params.name == '压气机二') {
                      return colorList[16]
                    }
                    if (params.name == '整流一') {
                      return colorList[17]
                    }
                    if (params.name == '整流二') {
                      return colorList[19]
                    }
                    if (params.name == '一工段' || params.name == '盘件单元') {
                      return colorList[19]
                    }
                    if (params.name == '二工段' || params.name == '结构件单元') {
                      return colorList[20]
                    }
                    if (params.name == '七工段' || params.name == '环件单元') {
                      return colorList[5]
                    }
                    // build a color map as your need.

                    //return colorList[params.dataIndex]
                  }
                color: params => {
                  const colorList = ['#538dd6', '#ffff01', '#0bae8d', '#e26c0a', '#F6E1BE', '#7030a0', '#0ad0bb', '#FF9297', '#A40035']
                  return colorList[params.dataIndex]
                },
                emphasis: {
                  barBorderRadius: 13,
@@ -474,14 +150,13 @@
            }
          ]
        }
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
        dataObj.dataList.forEach(item => {
          seriesData.push({
            value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))),
            hostType: (item.number == null ? '' : item.number)
            value: item.utilizationRate,
            hostType: (item.productionName ? item.productionName : '')
          })
        })
        option.xAxis[0].data = xAxisData
        option.xAxis[0].data = dataObj.productionList
        option.series[0].data = seriesData
        this.chartContainer.setOption(option, true)
      },

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

@@ -10,8 +10,7 @@
    components: {},
    data() {
      return {
        config: {},
        dataSource: []
        config: {}
      }
    },
    mounted() {
@@ -21,26 +20,24 @@
      getDeviceAlarmInfoByApi() {
        const that = this
        that.initChart()
        // signageApi.getWorkshopAlarmInfoApi()
        //   .then(res => {
        //     if (res.success) {
        //       that.dataSource = res.result
        //       that.initChart()
        //     }
        //   })
        signageApi.getWorkshopAlarmInfoApi()
          .then(res => {
            if (!res.success) return
            that.initChart(res.result)
          })
      },

      initChart() {
      initChart(dataSource = []) {
        this.config = {
          // indexHeader: '序号',
          header: ['设备编号', '报警时间', '报警号'],
          headerBGC: '#333',
          oddRowBGC: 'transparent',
          evenRowBGC: 'transparent',
          // data: this.dataSource.map(item => {
          //   return [item.equipmentId, item.collectTime, item.alarm]
          // }),
          data: [['516313', 'AASDASD', 'ASDADA'], ['ASDSA', '213ASD', '1651ZS'], ['DSXC42', 'SD5846', '2316SD'], ['dasd13', '213asd', '21558xc'], ['dasads522', 'dsa4812', 'asd233'], ['123124', 'zxc32695', '42352s']],
          data: dataSource.map(item => {
            return [item.equipmentId, item.collectTime, item.alarmNo]
          }),
          // data: [['516313', 'AASDASD', 'ASDADA'], ['ASDSA', '213ASD', '1651ZS'], ['DSXC42', 'SD5846', '2316SD'], ['dasd13', '213asd', '21558xc'], ['dasads522', 'dsa4812', 'asd233'], ['123124', 'zxc32695', '42352s']],
          rowNum: 2,
          index: false,
          // columnWidth: [300, 300],

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

@@ -1,7 +1,5 @@
<template>
  <div>
    <div class="guideline guidelineX" :style="{top:guidelineXTop+'px',display:showGuideline}"></div>
    <div class="guideline guidelineY" :style="{left:guidelineYLeft+'px',display:showGuideline}"></div>
    <VueDragResize
      v-for="(item, index) in deviceList"
      :key="item.equipmentId"
@@ -16,77 +14,135 @@
      :parentW="1500"
      :minw="70"
      :minh="70"
      :isDraggable="true"
      :isResizable="true"
      :isDraggable="isSwitchChecked"
      :isResizable="isSwitchChecked"
      :stickSize="6"
      @deactivated="showGuideline = 'none'"
      @deactivated="isShowGuideline = false"
    >
      <div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }">
        <div class="device-status">
          <div
            v-if="item.equipmentStatus == 2 || item.equipmentStatus == 1"
            :style="{ backgroundImage: `url(${require('@/assets/yellow.png')})` }"
            class="status-image"
          ></div>
          <div
            v-if="item.equipmentStatus == 22"
            :style="{ backgroundImage: `url(${require('@/assets/red.png')})` }"
            class="status-image"
          ></div>
          <div
            v-if="item.equipmentStatus == 0"
            :style="{ backgroundImage: `url(${require('@/assets/gray.png')})` }"
            class="status-image"
          ></div>
          <div
            v-if="item.equipmentStatus == 3"
            :style="{ backgroundImage: `url(${require('@/assets/green.png')})` }"
            class="status-image"
          ></div>
          <div
            :style="{ backgroundImage: `url(${getImgView(item.equipmentImage) || require('@/assets/default.png')})` }"
            :style="{ backgroundImage: `url(${getImgView(item.equipmentImage) || require('@/assets/WorskhopSignage/default.png')})` }"
            class="device-image"
          ></div>
          >
            <div
              :style="{ backgroundImage: `url(${getCurrentDeviceStatusImage(item.oporation)})` }"
              class="status-image"
            ></div>
          </div>
        </div>
        <div
          :style="{ color:workshopDetails.equipmentIdColor?workshopDetails.equipmentIdColor:'#fff',marginTop:'10px' }">
          {{ item.equipmentId }}
        </div>
        <div :style="{backgroundColor:item.equipmentStatus!==0?'#f00':''}">{{ item.equipmentId }}</div>
      </div>
    </VueDragResize>

    <template v-if="isShowGuideline">
      <div class="guideline guidelineX" :style="{top:guidelineXTop+'px'}"></div>
      <div class="guideline guidelineY" :style="{left:guidelineYLeft+'px'}"></div>
    </template>

    <a-form layout="inline" v-has="'isCanDragAndResize'">
      <a-form-item label="功能开关">
        <a-switch checked-children="开" un-checked-children="关" v-model="isSwitchChecked"
                  :disabled="isHasResizeOrDragDevice"/>
      </a-form-item>

      <a-form-item label="保存坐标">
        <a-button type="primary" icon="save" @click="saveDevicePositionAndSizeByApi"
                  :disabled="!isHasResizeOrDragDevice">保存
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  import signageApi from '@/api/signage'
  import VueDragResize from 'vue-drag-resize'

  export default {
    name: 'DeviceDragLayout',
    components: {},
    components: {
      VueDragResize
    },
    props: {
      deviceList: {
      currentProductionId: {
        type: String
      },
      getImgView: {
        type: Function
      },
      equipmentStatusList: {
        type: Array
      }
    },
    data() {
      return {
        showGuideline: 'none',
        deviceList: [],
        isShowGuideline: false,
        guidelineXTop: 0,
        guidelineYLeft: 0
        guidelineYLeft: 0,
        isSwitchChecked: false,
        isHasResizeOrDragDevice: false
      }
    },
    created() {
      if (!this.currentProductionId) return
      this.getDeviceListByApi()
    },
    methods: {
      // é€šè¿‡è½¦é—´Id调用接口获取设备信息列表
      getDeviceListByApi() {
        const that = this
        signageApi.getDeviceListInWorkshopSignagePageApi(that.currentProductionId).then((res) => {
          if (res.success && res.result && res.result.length > 0) that.deviceList = res.result
        })
      },

      /**
       * è®¾å¤‡æ‹–拽或缩放时触发事件
       * @param newRect æ‹–拽或缩放后的尺寸及距离
       * @param index æ‹–拽设备在数组中的下标
       */
      resize(newRect, index) {
        this.showGuideline = 'block'
        this.isShowGuideline = true
        // å½“设备缩放或拖拽后禁用switch组件并开放保存按钮功能（避免无效请求）
        if (!this.isHasResizeOrDragDevice) {
          if (this.deviceList[index].vw !== newRect.width || this.deviceList[index].vh !== newRect.height || this.deviceList[index].coordinateTop !== newRect.top || this.deviceList[index].coordinateLeft !== newRect.left) {
            this.isHasResizeOrDragDevice = true
          }
        }
        // this.isHasResizeOrDragDevice = true
        this.deviceList[index].vw = newRect.width
        this.deviceList[index].vh = newRect.height
        this.deviceList[index].coordinateTop = newRect.top
        this.deviceList[index].coordinateLeft = newRect.left
        this.guidelineXTop = newRect.top + newRect.height / 2
        this.guidelineYLeft = newRect.left + newRect.width / 2
      },

      // ç‚¹å‡»ä¿å­˜æŒ‰é’®è°ƒç”¨æŽ¥å£ä¿å­˜æ‹–拽后的位置与设备图标尺寸
      saveDevicePositionAndSizeByApi() {
        const that = this
        signageApi.saveDevicePositionAndSizeApi(that.deviceList)
          .then((res) => {
            if (!res.success) return
            that.$notification.success({
              message: '消息',
              description: res.message
            })
            that.isSwitchChecked = that.isHasResizeOrDragDevice = false
            that.getDeviceListByApi(that.currentProductionId)
          })
      },

      /**
       * èŽ·å–当前设备状态图片
       * @param oporation çŠ¶æ€ç 
       * @returns {any} è®¾å¤‡çŠ¶æ€å›¾ç‰‡èµ„源
       */
      getCurrentDeviceStatusImage(oporation) {
        const currentStatus = this.equipmentStatusList.find(item => item.value.includes(oporation))
        return currentStatus.statusImage
      }
    }
  }

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

@@ -3,10 +3,15 @@
</template>

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

  export default {
    name: 'MonthUtilizationRateTrend',
    components: {},
    props: {
      currentProductionId: {
        type: String
      },
      toDecimal2NoZero: {
        type: Function
      }
@@ -18,582 +23,26 @@
      }
    },
    mounted() {
      this.getChartDataByApi()
      window.addEventListener('resize', this.handleWindowResize)
      if (!this.currentProductionId) return
      this.getChartDataByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      getChartDataByApi() {
        const that = this
        this.chartContainer = this.$echarts.init(document.getElementById(this.chartContainerId))
        this.initChart()
        signageApi.getMonthUtilizationRateApi(this.currentProductionId)
          .then(res => {
            if (!res.success) return
            that.initChart(res.result)
          })
      },

      initChart() {
        const data = [
          {
            'beltlineID': 'A_1',
            'beltlineName': '1-D特种工艺',
            'fullName': '1-D特种工艺单元',
            'list': [
              {
                'code': '000000014831',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '1月',
                'lineRate': 0.2456,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014820',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '2月',
                'lineRate': 0.3452,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014809',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '3月',
                'lineRate': 0.2453,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014798',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '4月',
                'lineRate': 0.5623,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014787',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '5月',
                'lineRate': 0.3254,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014776',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '6月',
                'lineRate': 0.7456,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014765',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '7月',
                'lineRate': 0.5389,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:00'
              },
              {
                'code': '000000014809',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '8月',
                'lineRate': 0.2453,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014798',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '9月',
                'lineRate': 0.5623,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014787',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '10月',
                'lineRate': 0.3254,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014776',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '11月',
                'lineRate': 0.7456,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014765',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '12月',
                'lineRate': 0.5389,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:00'
              }
            ]
          },
          {
            'beltlineID': 'A_2',
            'beltlineName': '2-D整体机匣',
            'fullName': '2-D整体机匣单元',
            'list': [
              {
                'code': '000000014833',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '1月',
                'lineRate': 0.5234,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014822',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '2月',
                'lineRate': 0.63465,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014811',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '3月',
                'lineRate': 0.6747,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014800',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '4月',
                'lineRate': 0.8675,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014789',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '5月',
                'lineRate': 0.9774,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014778',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '6月',
                'lineRate': 0.5637,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014767',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '7月',
                'lineRate': 0.8565,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': 'A_3',
            'beltlineName': '3-D燃烧室机匣',
            'fullName': '3-D燃烧室机匣单元',
            'list': [
              {
                'code': '000000014834',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '1月',
                'lineRate': 0.6573,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014823',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '2月',
                'lineRate': 0.7567,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014812',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '3月',
                'lineRate': 0.8532,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014801',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '4月',
                'lineRate': 0.4352,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014790',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '5月',
                'lineRate': 0.3456,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014779',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '6月',
                'lineRate': 0.1356,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014768',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '7月',
                'lineRate': 0.5346,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': 'A_4',
            'beltlineName': '4-D焊接机匣工段',
            'fullName': '4-D焊接机匣工段',
            'list': [
              {
                'code': '000000014835',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '1月',
                'lineRate': 0.1333,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014824',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '2月',
                'lineRate': 0.5234,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014813',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '3月',
                'lineRate': 0.5631,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014802',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '4月',
                'lineRate': 0.2345,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014791',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '5月',
                'lineRate': 0.1333,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014780',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '6月',
                'lineRate': 0.3215,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014769',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '7月',
                'lineRate': 0.4122,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': 'A_5',
            'beltlineName': '5-D CRIC单元',
            'fullName': '5-D CRIC单元',
            'list': [
              {
                'code': '000000014836',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '1月',
                'lineRate': 0.4234,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014825',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '2月',
                'lineRate': 0.1213,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014814',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '3月',
                'lineRate': 0.1245,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014803',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '4月',
                'lineRate': 0.2467,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014792',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '5月',
                'lineRate': 0.1579,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014781',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '6月',
                'lineRate': 0.6757,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014770',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '7月',
                'lineRate': 0.4563,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': '总厂',
            'beltlineName': '总厂',
            'fullName': null,
            'list': [
              {
                'code': '000000014841',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '1月',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014830',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '2月',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014819',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '3月',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014808',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '4月',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014797',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '5月',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014786',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '6月',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014775',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '7月',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          }
        ]
      initChart(dataObj) {
        const seriesArr = []
        const xAxisData = []
        const option = {
          color: ['#538dd6', '#ffff01', '#0bae8d', '#e26c0a', '#F6E1BE', '#7030a0', '#0ad0bb', '#FF9297', '#A40035'],
          tooltip: {
@@ -671,18 +120,17 @@
          },
          series: []
        }
        data.forEach(item1 => {
        dataObj.dataList.forEach(item1 => {
          const dataArr = []
          item1.list.forEach(item2 => {
          item1.utilizationRateList.forEach(item2 => {
            dataArr.push({
              value: this.toDecimal2NoZero(item2.lineRate * 100),
              hostType: (item2.dayTime == null ? '' : item2.dayTime)
              value: item2.utilizationRate,
              hostType: (item2.date ? item2.date : '')
            })
            xAxisData.push(item2.dayTime == null ? '' : item2.dayTime)
          })
          if (item1.beltlineName == '总厂') {
          if (item1.productionName == '总厂') {
            seriesArr.push({
              name: item1.beltlineName,
              name: item1.productionName,
              type: 'line',
              lineStyle: { width: 4, color: '#9cff45' },
              itemStyle: { color: '#50ff45' },
@@ -691,7 +139,7 @@
            })
          } else {
            seriesArr.push({
              name: item1.fullName,
              name: item1.productionName,
              type: 'line',
              lineStyle: { width: 2 },
              symbol: 'circle',
@@ -699,10 +147,8 @@
            })
          }
        })
        option.xAxis.data = Array.from(new Set(xAxisData))
        option.xAxis.data = dataObj.dateList
        option.series = seriesArr
        console.log(Array.from(new Set(xAxisData)))
        console.log(seriesArr)
        this.chartContainer.setOption(option, true)
      },


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

@@ -3,10 +3,15 @@
</template>

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

  export default {
    name: 'WeekUtilizationRateTrend',
    components: {},
    props: {
      currentProductionId: {
        type: String
      },
      toDecimal2NoZero: {
        type: Function
      }
@@ -18,525 +23,25 @@
      }
    },
    mounted() {
      this.getChartDataByApi()
      window.addEventListener('resize', this.handleWindowResize)
      if (!this.currentProductionId) return
      this.getChartDataByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      getChartDataByApi() {
        const that = this
        this.chartContainer = this.$echarts.init(document.getElementById(this.chartContainerId))
        this.initChart()
        signageApi.getWeekUtilizationRateApi(this.currentProductionId)
          .then(res => {
            if (!res.success) return
            that.initChart(res.result)
          })
      },

      initChart() {
        const data = [
          {
            'beltlineID': 'A_1',
            'beltlineName': '1-D特种工艺',
            'fullName': '1-D特种工艺单元',
            'list': [
              {
                'code': '000000014831',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '2023-09-28',
                'lineRate': 0.2456,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014820',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '2023-09-29',
                'lineRate': 0.3452,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014809',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '2023-09-30',
                'lineRate': 0.2453,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014798',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '2023-10-01',
                'lineRate': 0.5623,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014787',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '2023-10-02',
                'lineRate': 0.3254,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014776',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '2023-10-03',
                'lineRate': 0.7456,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014765',
                'factoryID': 'A',
                'beltlineID': 'A_1',
                'beltlineName': '1-D特种工艺',
                'dayTime': '2023-10-04',
                'lineRate': 0.5389,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:00'
              }
            ]
          },
          {
            'beltlineID': 'A_2',
            'beltlineName': '2-D整体机匣',
            'fullName': '2-D整体机匣单元',
            'list': [
              {
                'code': '000000014833',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '2023-09-28',
                'lineRate': 0.5234,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014822',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '2023-09-29',
                'lineRate': 0.63465,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014811',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '2023-09-30',
                'lineRate': 0.6747,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014800',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '2023-10-01',
                'lineRate': 0.8675,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014789',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '2023-10-02',
                'lineRate': 0.9774,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014778',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '2023-10-03',
                'lineRate': 0.5637,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014767',
                'factoryID': 'A',
                'beltlineID': 'A_2',
                'beltlineName': '2-D整体机匣',
                'dayTime': '2023-10-04',
                'lineRate': 0.8565,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': 'A_3',
            'beltlineName': '3-D燃烧室机匣',
            'fullName': '3-D燃烧室机匣单元',
            'list': [
              {
                'code': '000000014834',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '2023-09-28',
                'lineRate': 0.6573,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014823',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '2023-09-29',
                'lineRate': 0.7567,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014812',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '2023-09-30',
                'lineRate': 0.8532,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014801',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '2023-10-01',
                'lineRate': 0.4352,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014790',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '2023-10-02',
                'lineRate': 0.3456,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014779',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '2023-10-03',
                'lineRate': 0.1356,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014768',
                'factoryID': 'A',
                'beltlineID': 'A_3',
                'beltlineName': '3-D燃烧室机匣',
                'dayTime': '2023-10-04',
                'lineRate': 0.5346,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': 'A_4',
            'beltlineName': '4-D焊接机匣工段',
            'fullName': '4-D焊接机匣工段',
            'list': [
              {
                'code': '000000014835',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '2023-09-28',
                'lineRate': 0.1333,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014824',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '2023-09-29',
                'lineRate': 0.5234,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014813',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '2023-09-30',
                'lineRate': 0.5631,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014802',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '2023-10-01',
                'lineRate': 0.2345,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014791',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '2023-10-02',
                'lineRate': 0.1333,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014780',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '2023-10-03',
                'lineRate': 0.3215,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014769',
                'factoryID': 'A',
                'beltlineID': 'A_4',
                'beltlineName': '4-D焊接机匣工段',
                'dayTime': '2023-10-04',
                'lineRate': 0.4122,
                'processingLong': 11520.0000,
                'openingLong': 11520.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': 'A_5',
            'beltlineName': '5-D CRIC单元',
            'fullName': '5-D CRIC单元',
            'list': [
              {
                'code': '000000014836',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '2023-09-28',
                'lineRate': 0.4234,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014825',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '2023-09-29',
                'lineRate': 0.1213,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014814',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '2023-09-30',
                'lineRate': 0.1245,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014803',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '2023-10-01',
                'lineRate': 0.2467,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014792',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '2023-10-02',
                'lineRate': 0.1579,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014781',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '2023-10-03',
                'lineRate': 0.6757,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014770',
                'factoryID': 'A',
                'beltlineID': 'A_5',
                'beltlineName': '5-D CRIC单元',
                'dayTime': '2023-10-04',
                'lineRate': 0.4563,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': '总厂',
            'beltlineName': '总厂',
            'fullName': null,
            'list': [
              {
                'code': '000000014841',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '2023-09-28',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014830',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '2023-09-29',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014819',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '2023-09-30',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014808',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '2023-10-01',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014797',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '2023-10-02',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014786',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '2023-10-03',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014775',
                'factoryID': 'A',
                'beltlineID': '总厂',
                'beltlineName': '总厂',
                'dayTime': '2023-10-04',
                'lineRate': 0.0400,
                'processingLong': 3456.0000,
                'openingLong': 3456.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          }
        ]
      initChart(dataObj) {
        const seriesArr = []
        const xAxisData = []
        const option = {
@@ -616,18 +121,17 @@
          },
          series: []
        }
        data.forEach(item1 => {
        dataObj.dataList.forEach(item1 => {
          const dataArr = []
          item1.list.forEach(item2 => {
          item1.utilizationRateList.forEach(item2 => {
            dataArr.push({
              value: this.toDecimal2NoZero(item2.lineRate * 100),
              hostType: (item2.dayTime == null ? '' : item2.dayTime)
              value: item2.utilizationRate,
              hostType: (item2.date ? item2.date : '')
            })
            xAxisData.push(item2.dayTime == null ? '' : item2.dayTime.slice(5))
          })
          if (item1.beltlineName == '总厂') {
          if (item1.productionName == '总厂') {
            seriesArr.push({
              name: item1.beltlineName,
              name: item1.productionName,
              type: 'line',
              lineStyle: { width: 4, color: '#9cff45' },
              itemStyle: { color: '#50ff45' },
@@ -636,7 +140,7 @@
            })
          } else {
            seriesArr.push({
              name: item1.fullName,
              name: item1.productionName,
              type: 'line',
              lineStyle: { width: 2 },
              symbol: 'circle',
@@ -644,7 +148,7 @@
            })
          }
        })
        option.xAxis.data = Array.from(new Set(xAxisData))
        option.xAxis.data = dataObj.dateList
        option.series = seriesArr
        this.chartContainer.setOption(option, true)
      },

 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]
      },

      /**
       * çª—口尺寸变化时触发
       * è°ƒæ•´å›¾è¡¨å°ºå¯¸ä»¥é€‚应分辨率

 src/views/system/WorkshopSignageManagement.vue

@@ -148,7 +148,7 @@
      </a-card>
    </a-col>
    <!-- è¡¨å•åŒºåŸŸ -->
    <workshop-modal ref="modalForm" @ok="modalFormOk"></workshop-modal>
    <workshop-modal ref="modalForm" @ok="modalFormOk" :workshopList="workshopList"></workshop-modal>
    <!--新增车间-->
    <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'添加已有设备'"></select-device-drawer>
    <!--已有设备-->
@@ -161,6 +161,7 @@
import WorkshopModal from './modules/WorkshopModal'
import { filterObj } from '@/utils/util'
import moment from 'moment'
import signageApi from '@/api/signage'

export default {
  name: 'WorkshopSignageManagement',
@@ -179,6 +180,7 @@
      queryParam1: {},
      queryParam2: {},
      dataSource1: [],
      workshopList:[],
      dataSource2: [],
      ipagination1: {
        current: 1,
@@ -294,7 +296,18 @@
      return this.selectedRowKeys1.length === 0 ? 0 : 12
    },
  },
  created(){
     this.getWorkshopListByApi()
  },
  methods: {
    getWorkshopListByApi(){
      const that=this
      signageApi.getWorkshopListApi()
        .then(res=>{
          if(res.success)that.workshopList = res.result
        })
    },

    onSelectChange2(selectedRowKeys, selectionRows) {
      this.selectedRowKeys2 = selectedRowKeys
      this.selectionRows2 = selectionRows

 src/views/system/modules/WorkshopModal.vue

@@ -12,14 +12,19 @@

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" v-bind="layout" :model="model" :rules="validatorRules">
        <a-form-model-item label="车间名称" required prop="workshopName">
          <a-input v-model="model.workshopName" placeholder="请输入车间名称"/>
        <a-form-model-item label="车间名称" required prop="productionId">
          <!--<a-input v-model="model.workshopName" placeholder="请输入车间名称"/>-->
          <a-select v-model="model.productionId" placeholder="请选择车间" @change="handleSelectChange">
            <a-select-option v-for="item in workshopList" :key="item.id">
              {{item.productionName}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="车间背景图" required prop="backgroundImage">
          <j-image-upload class="avatar-uploader" text="上传" v-model="model.backgroundImage"></j-image-upload>
        </a-form-model-item>
        <!--<a-form-model-item label="设备编号颜色">-->
          <!--<a-input type="color" v-model="model.equipmentIdColor"></a-input>-->
        <!--<a-input type="color" v-model="model.equipmentIdColor"></a-input>-->
        <!--</a-form-model-item>-->
        <a-form-model-item label="授权标识">
          <a-input placeholder="请输入授权标识" v-model="model.perms"/>
@@ -30,11 +35,16 @@
</template>

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

  export default {
    name: 'WorkshopModal',
    components: {},
    props: {
      workshopList: {
        type: Array
      }
    },
    data() {
      return {
        title: '操作',
@@ -47,15 +57,7 @@
        },
        confirmLoading: false,
        validatorRules: {
          workshopName: [
            { required: true, message: '请输入车间名称!' },
            { min: 2, max: 30, message: '长度在 2 åˆ° 30 ä¸ªå­—符', trigger: 'blur' }
          ],
          id: [
            { required: true, message: '请输入车间编号!' },
            { min: 0, max: 64, message: '长度不超过 64 ä¸ªå­—符', trigger: 'blur' },
            { validator: this.validateRoleCode }
          ],
          workshopName: [{ required: true, message: '请选择车间!' }],
          backgroundImage: [
            { required: true, message: '请上传车间背景图!' }
          ]
@@ -80,10 +82,9 @@
          this.isEdit = false
        }
      },
      close() {
        this.$refs.form.clearValidate()
        this.$emit('close')
        this.visible = false
      handleSelectChange(value) {
        const workshopItem = this.workshopList.find(item => item.id === value)
        this.model.workshopName = workshopItem.productionName
      },
      handleOk() {
        const that = this
@@ -95,23 +96,23 @@
            let obj
            if (!this.isEdit) {
              console.log('触发新增')
              obj = api.addWorkshopApi(this.model)
              obj = signageApi.addWorkshopApi(this.model)
            } else {
              console.log('触发修改')
              obj = api.editWorkshopApi(this.model)
              obj = signageApi.editWorkshopApi(this.model)
            }
            obj.then((res) => {
              if (res.success) {
                that.$notification.success({
                  message:'消息',
                  description:res.message
                });
                  message: '消息',
                  description: res.message
                })
                that.$emit('ok')
              } else {
                that.$notification.warning({
                  message:'消息',
                  description:res.message
                });
                  message: '消息',
                  description: res.message
                })
              }
            }).finally(() => {
              that.confirmLoading = false
@@ -125,12 +126,10 @@
      handleCancel() {
        this.close()
      },
      validateRoleCode(rule, value, callback) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback('车间编号不可输入汉字!')
        } else {
          callback()
        }
      close() {
        this.$refs.form.clearValidate()
        this.$emit('close')
        this.visible = false
      }
    }
  }