1、新增车间看板页面、大屏车间入口及大屏车间管理页面 2、新增vue-drag-resize和dataV插件

zhaowei

2025-02-27 7f76d4b5d52d9f6ae65c429fe26faf3a7f730dba

1、新增车间看板页面、大屏车间入口及大屏车间管理页面
2、新增vue-drag-resize和dataV插件

 package-lock.json

ÎļþÌ«´ó

 package.json

@@ -12,6 +12,7 @@
  "dependencies": {
    "@antv/data-set": "^0.11.4",
    "@jeecg/antd-online-mini": "3.4.3-beta2",
    "@jiaminghi/data-view": "^2.10.0",
    "@tinymce/tinymce-vue": "2.1.0",
    "@toast-ui/editor": "^2.1.2",
    "ant-design-vue": "^1.7.2",
@@ -37,6 +38,7 @@
    "vue-area-linkage": "^5.1.0",
    "vue-calendar-component": "^2.8.2",
    "vue-cropper": "^0.5.4",
    "vue-drag-resize": "^1.5.4",
    "vue-i18n": "^8.7.0",
    "vue-loader": "^15.7.0",
    "vue-ls": "^3.2.0",
@@ -58,13 +60,13 @@
    "@vue/cli-service": "^3.3.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "7.2.3",
    "compression-webpack-plugin": "^3.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.1.0",
    "html-webpack-plugin": "^4.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "vue-template-compiler": "^2.6.10",
    "html-webpack-plugin": "^4.2.0",
    "compression-webpack-plugin": "^3.1.0"
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,

 src/api/signage.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,30 @@
import { getAction, deleteAction, putAction, postAction, httpAction } from '@/api/manage'

export default {
  // é¦–页获取大屏入口车间列表
  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),
}

 src/assets/WorskhopSignage/103.png

 src/assets/WorskhopSignage/default.png

 src/assets/WorskhopSignage/stateImg_gray.gif

 src/assets/WorskhopSignage/stateImg_green.gif

 src/assets/WorskhopSignage/stateImg_red.gif

 src/assets/WorskhopSignage/stateImg_yellow.gif

 src/assets/WorskhopSignage/workshop_bg.png

 src/config/router.config.js

@@ -49,7 +49,7 @@
        path: 'alteration',
        name: 'alteration',
        component: () => import(/* webpackChunkName: "user" */ '@/views/user/alteration/Alteration')
      },
      }
    ]
  },
  {
@@ -63,7 +63,7 @@
        path: 'login',
        name: 'oauth2-app-login',
        component: () => import(/* webpackChunkName: "oauth2-app.login" */ '@/views/user/oauth2/OAuth2Login')
      },
      }
    ]
  },

@@ -80,12 +80,12 @@
    ]
  },
  {
    path:'/DncWorkshopSignage/:id',
    component:()=>import('@/views/mdc/base/DncWorkshopSignage.vue')
    path: '/WorkshopSignage/:id',
    component: () => import('@/views/mdc/base/WorkshopSignage.vue')
  },
  {
    path: '/404',
    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
  },
  }

]

 src/main.js

@@ -51,11 +51,16 @@
import { rules } from '@/utils/rules'
import * as echarts from 'echarts'

import VueDragResize from "vue-drag-resize"
import dataV from '@jiaminghi/data-view'
Vue.component('vue-drag-resize', VueDragResize)

Vue.prototype.$echarts = echarts
Vue.prototype.rules = rules
Vue.config.productionTip = false
Vue.use(Storage, config.storageOptions)
Vue.use(Antd)
Vue.use(dataV)
Vue.use(VueAxios, router)
Vue.use(Viser)
Vue.use(hasPermission)

 src/views/mdc/base/WorkshopSignage.vue

ÎļþÃû´Ó src/views/mdc/base/DncWorkshopSignage.vue ÐÞ¸Ä
@@ -1,77 +1,115 @@
<template>
  <div class="full-screen">
    <div class="container">
      <!--左侧图表区域-->
      <div class="left-col">
        <div class="col-content">
          <div class="content-title">一厂当月任务完成百分比</div>
          <div style="flex:1;display: flex;">
            <div class="chart-container" id="left-col-chart1"></div>
            <div class="equipment-state-container">
              <div>设备总数：{{equipmentList.length}}台</div>
              <div>大修、项修数量：{{getEquipmentMaintainCount}}台</div>
              <div>设备开动率：{{getEquipmentOpenRate}}</div>
              <div v-for="(item,index) in equipmentStateList" :key="index">
                <img :src="item.imageColor"><span>{{item.label}}：{{getEquipmentStateCount(item.value)}}台</span>
              </div>
            </div>
          </div>
          <div class="server-status">服务器状态：<span :style="{color:getServerStatusTextColor,fontWeight:'bold'}">{{this.serverStatus}}</span>
          </div>
          <div class="content-title">{{workshopDetails.workshopName}}#设备情况</div>
          <workshop-device-overview :equipmentList="equipmentList" :toDecimal2NoZero="toDecimal2NoZero"/>
        </div>
        <div class="col-content">
          <div class="content-title">当月零件任务完成进度</div>
          <div class="chart-container" id="left-col-chart2"></div>
          <div class="content-title">设备月利用率趋势</div>
          <month-utilization-rate-trend :toDecimal2NoZero="toDecimal2NoZero"/>
        </div>
        <div class="col-content">
          <div class="content-title">当日设备任务完成进度</div>
          <div class="chart-container" id="left-col-chart3"></div>
          <div class="content-title">设备周利用率趋势</div>
          <week-utilization-rate-trend :toDecimal2NoZero="toDecimal2NoZero"/>
        </div>
        <div class="col-content">
          <div class="content-title">当日产品概况</div>
          <div class="chart-container" id="left-col-chart4"></div>
        </div>
      </div>
      <div class="middle-col">
        <div class="navigate-container">
          <div class="navigate-item" v-for="(item,index) in navigateList" :key="index">
            <img :src="item.imageSrc" @click="navigateTo(item)">
          </div>
        </div>
      </div>
      <div class="right-col">
        <div class="col-content">
          <div class="content-title">今日概况</div>
          <div class="chart-container" id="right-col-chart1"></div>
          <div class="content-footer-container">
            <div class="content-footer">重点设备利用率：{{this.keyEquipmentEfficiency}}</div>
            <div class="content-footer">正常设备利用率：{{this.commonEquipmentEfficiency}}</div>
          </div>
        </div>
        <div class="col-content">
          <div class="content-title">工段设备利用率变化趋势</div>
          <div class="chart-container" id="right-col-chart2"></div>
        </div>
        <div class="col-content">
          <div class="content-title">昨日设备利用率</div>
          <div class="chart-container" id="right-col-chart3"></div>
          <div class="content-title">设备日利用率趋势</div>
          <day-utilization-rate-trend :toDecimal2NoZero="toDecimal2NoZero"/>
        </div>
        <div class="col-content">
          <div class="content-title">设备报警信息</div>
          <div class="chart-container" id="right-col-chart4"></div>
          <device-alarm-info/>
        </div>
      </div>

      <!--右侧拖拽区域-->
      <div class="right-col">
        <VueDragResize
          v-for="(item, index) in deviceList"
          :key="item.equipmentId"
          :w="item.vw"
          :h="item.vh"
          :x="item.coordinateLeft"
          :y="item.coordinateTop"
          v-on:resizing="resize($event, index)"
          v-on:dragging="resize($event, index)"
          :parentLimitation="true"
          :parentH="1065"
          :parentW="1500"
          :minw="70"
          :minh="70"
          :isDraggable="isSwitchChecked"
          :isResizable="isSwitchChecked"
          :stickSize="6"
          @deactivated="isShowGuideline = false"
        >
          <div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }">
            <div class="device-status">
              <div
                :style="{ backgroundImage: `url(${getImgView(item.equipmentImage) || require('@/assets/WorskhopSignage/default.png')})` }"
                class="device-image"
              >
                <div
                  :style="{ backgroundImage: `url(${getCurrentDeviceStatusImage(item.equipmentStatus)})` }"
                  class="status-image"
                ></div>
              </div>
            </div>
            <div
              :style="{ color:workshopDetails.equipmentIdColor?workshopDetails.equipmentIdColor:'#fff',fontWeight:'bold'}">
              {{ 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">
          <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>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import VueDragResize from 'vue-drag-resize'
  import { getFileAccessHttpUrl } from '@/api/manage'
  import signageApi from '@/api/signage'
  import WorkshopDeviceOverview from './modules/WorkshopSignage/WorkshopDeviceOverview'
  import WeekUtilizationRateTrend from './modules/WorkshopSignage/WeekUtilizationRateTrend'
  import DayUtilizationRateTrend from './modules/WorkshopSignage/DayUtilizationRateTrend'
  import MonthUtilizationRateTrend from './modules/WorkshopSignage/MonthUtilizationRateTrend'
  import DeviceAlarmInfo from './modules/WorkshopSignage/DeviceAlarmInfo'

  export default {
    name: 'DncWorkshopSignage',
    components: {},
    name: 'WorkshopSignage',
    components: {
      DeviceAlarmInfo,
      MonthUtilizationRateTrend,
      DayUtilizationRateTrend,
      WeekUtilizationRateTrend,
      WorkshopDeviceOverview,
      VueDragResize
    },
    data() {
      return {
        workshopDetails: {}, //  è½¦é—´è¯¦ç»†ä¿¡æ¯,
        equipmentList: [
          {
            'equipmentID': '04ZX001',
@@ -3901,2027 +3939,173 @@
            'productCount': null
          }
        ],
        equipmentStateList: [
        equipmentStatusList: [
          {
            label: '正常运行',
            value: [3, 23],
            imageColor: require('@/assets/image/stateImg_green.gif')
            statusImage: require('@/assets/WorskhopSignage/stateImg_green.gif')
          },
          {
            label: '待机',
            value: [1, 2],
            imageColor: require('@/assets/image/stateImg_yellow.gif')
            statusImage: require('@/assets/WorskhopSignage/stateImg_yellow.gif')
          },
          {
            label: '报警',
            value: [22],
            imageColor: require('@/assets/image/stateImg_red.gif')
            statusImage: require('@/assets/WorskhopSignage/stateImg_red.gif')
          },
          {
            label: '关机',
            value: [null, 0],
            imageColor: require('@/assets/image/stateImg_gray.gif')
            statusImage: require('@/assets/WorskhopSignage/stateImg_gray.gif')
          }
        ],
        serverStatus: '正常',
        leftColChart1: '',
        leftColChart2: '',
        rightColChart1: '',
        navigateList: [
        deviceList: [
          {
            label: '151A',
            navigateMethod: 0,
            navigateUrl: '1712001819515367426',
            imageSrc: require('../../../assets/image/MDC_151A.png')
            equipmentId: '105843145',
            equipmentStatus: 3,
            equipmentImage: '',
            vw: 112,
            vh: 142,
            coordinateLeft: 500,
            coordinateTop: 800
          },
          {
            label: 'VR',
            navigateMethod: 1,
            navigateUrl: 'mdc/vr',
            imageSrc: require('../../../assets/image/VR_a.png')
            equipmentId: '42342152',
            equipmentStatus: 2,
            equipmentImage: '',
            vw: 112,
            vh: 232,
            coordinateLeft: 400,
            coordinateTop: 100
          },
          {
            label: 'MDC',
            navigateMethod: 1,
            navigateUrl: 'mdc/mdc',
            imageSrc: require('../../../assets/image/MDC_a.png')
            equipmentId: '5646434',
            equipmentStatus: 22,
            equipmentImage: '',
            vw: 231,
            vh: 121,
            coordinateLeft: 200,
            coordinateTop: 500
          },
          {
            label: 'MES',
            navigateMethod: 1,
            navigateUrl: 'mdc/mes',
            imageSrc: require('../../../assets/image/MES_a.png')
            equipmentId: '213125643',
            equipmentStatus: 0,
            equipmentImage: '',
            vw: 233,
            vh: 213,
            coordinateLeft: 600,
            coordinateTop: 300
          }
        ],
        keyEquipmentEfficiency: '',
        commonEquipmentEfficiency: '',
        rightColChart2: '',
        rightColChart3: ''
        isShowGuideline: false,
        guidelineXTop: 0,
        guidelineYLeft: 0,
        isSwitchChecked: false,
        isHasResizeOrDragDevice: false
      }
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.getChartDataByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    filters: {},
    computed: {
      /* èŽ·å–设备大修、项修数量 */
      getEquipmentMaintainCount() {
        return this.equipmentList.filter(item => item.maintainType === 2).length
      },
      /* èŽ·å–设备开动率 */
      getEquipmentOpenRate() {
        const equipmentCount = this.equipmentList.length
        const equipmentShutDownCount = this.equipmentList.filter(item => item.oporation === null || item.oporation == 0).length
        return this.toDecimal2NoZero(((equipmentCount - equipmentShutDownCount) / equipmentCount * 100)) + '%'
      },

      getServerStatusTextColor() {
        if (this.serverStatus === '正常') {
          return '#53da53'
        } else {
          return '#f00'
        }
      if (this.$route.params.id) {
        this.getDeviceListByApi(this.$route.params.id)
        this.getWorkshopDetailsByApi(this.$route.params.id)
      }
    },
    methods: {
      getEquipmentStateCount(value) {
        let stateCount = 0
        this.equipmentList.forEach(item => {
          if (value.includes(item.oporation)) stateCount++
      /**
       * é€šè¿‡è½¦é—´Id调用接口获取设备信息列表
       * @param id è½¦é—´Id
       */
      getDeviceListByApi(id) {
        signageApi.getDeviceListInWorkshopSignagePageApi(id).then((res) => {
          if (res.result && res.result.length > 0) {
            this.deviceList = res.result
          }
        })
        return stateCount
      },

      getServerStatusByApi() {

      /**
       * é€šè¿‡è½¦é—´Id调用接口获取车间详细信息
       * @param id è½¦é—´Id
       */
      getWorkshopDetailsByApi(id) {
        signageApi.getWorkshopDetailByWorkshopIdApi(id).then((res) => {
          if (!res.success) return
          this.workshopDetails = res.result ? res.result : {}
          let workshopDrawingArea = document.querySelector('.right-col')
          workshopDrawingArea.style.backgroundImage = `url(${this.getImgView(this.workshopDetails.backgroundImage)})`
        })
      },

      getChartDataByApi() {
        this.getLeftColChart1DataByApi()
        // this.getLeftColChart2DataByApi()
        this.getRightColChart1DataByApi()
        this.getRightColChart2DataByApi()
        this.getRightColChart3DataByApi()
      },

      getLeftColChart1DataByApi() {
        this.leftColChart1 = this.$echarts.init(document.getElementById('left-col-chart1'))
        this.drawLeftColChart1()
      },

      getRightColChart1DataByApi() {
        this.rightColChart1 = this.$echarts.init(document.getElementById('right-col-chart1'))
        this.drawRightColChart1()
      },

      getRightColChart2DataByApi() {
        this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2'))
        this.drawRightColChart2()
      },

      getRightColChart3DataByApi() {
        this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3'))
        this.drawRightColChart3()
      },

      /* ç»˜åˆ¶å·¦ä¾§ç¬¬ä¸€ä¸ªå›¾è¡¨ */
      drawLeftColChart1() {
        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
      /**
       * è®¾å¤‡æ‹–拽或缩放时触发事件
       * @param newRect æ‹–拽或缩放后的尺寸及距离
       * @param index æ‹–拽设备在数组中的下标
       */
      resize(newRect, index) {
        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
            console.log('newRect------', newRect)
          }
        ]
        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 option = {
          legend: {
            show: true,
            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
            }
          },
          series: [
            {
              name: '类目',
              type: 'pie',
              radius: '60%',
              center: ['50%', '40%'],
              hoverAnimation: false,
              data: [
                {
                  value: 0, name: '完成量', itemStyle: { normal: { color: '#00923f' } },
                  label: {
                    normal: {
                      show: true,
                      fontSize: '70%',
                      position: 'inside',
                      textBorderWidth: 0,
                      formatter: function() {
                        return completionNum + '%'
                      }
                    }
                  }
                },
                {
                  value: 100, name: '任务量',
                  itemStyle: { normal: { color: '#e67817' } },
                  label: {
                    normal: {
                      show: false
                    }
                  }
                }
              ],
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        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.leftColChart1.setOption(option, 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
      },

      /* ç»˜åˆ¶å³ä¾§ç¬¬ä¸€ä¸ªå›¾è¡¨ */
      drawRightColChart1() {
        const data = [
          {
            'number': null,
            'name': '利用率',
            'count': 0.0000,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': null,
            'name': '开机率',
            'count': 0.0000,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': null,
            'name': '重点设备利用率',
            'count': 0.0000,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': null,
            'name': '正常设备利用率',
            'count': 0.0000,
            'planCount': null,
            'rateCount': null
          }
        ]
        const yAxisData = []
        const option = {
          radar: {
            center: ['50%', '55%'],
            indicator: [{
              name: '设备利用率',
              num: '',
              max: 100
            }, {
              name: '设备开机率',
              num: '',
              max: 100
            }, {
              name: '计划完成率',
              num: '',
              max: 100
            }],
            radius: '60%',
            splitNumber: 1,
            shape: 'circle',
            nameGap: 10,
            name: {
              textStyle: {
                color: '#fff',
                fontSize: '65%'
              },
              formatter: function(value, indicator) {
                return value + ' ' + indicator.num + '%'

              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgb(90,177,239)',
                type: 'dotted',
                width: 2
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(90,177,239)',
                type: 'dotted'
              }
            },
            zlevel: 23
          },
          series: [
            {
              type: 'pie',
              center: ['50%', '55%'],
              radius: ['70%', '65%'],
              hoverAnimation: false,
              label: {
                normal: {
                  position: 'center'
                }
              },
              data: [{
                value: 1000,
                tooltip: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: 'rgba(30,177,239,0.6)'
                  }
                }
              }]
            },

            {
              name: '数据显示',
              type: 'radar',
              lineStyle: {
                normal: {
                  width: 0.1,
                  opacity: 0.1
                }
              },
              data: [
                [0, 0, 0]
              ],
              symbolSize: 8,
              itemStyle: {
                color: '#ffc000',
                borderColor: '#ffc000'
              },
              areaStyle: {
                normal: {
                  color: 'rgba(90,177,239,0.8)',
                  opacity: 0.85
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'top',
                  formatter: '{c}%'
                }
              },
              zlevel: 21
            }

          ]
        }
        data.forEach((item, index) => {
          if (item.name == '重点设备利用率') {
            this.keyEquipmentEfficiency = (item.count * 100) > 100 ? 100 : ((item.count * 100).toFixed(2)) + '%'
          } else if (item.name == '正常设备利用率') {
            this.commonEquipmentEfficiency = (item.count * 100) > 100 ? 100 : ((item.count * 100).toFixed(2)) + '%'
          } else {
            yAxisData.push(parseFloat((item.count * 100) > 100 ? 100 : ((item.count * 100).toFixed(2))))
            option.radar.indicator[index].num = (item.count * 100) > 100 ? 100 : ((item.count * 100).toFixed(2))
      /**
       * ç‚¹å‡»ä¿å­˜æŒ‰é’®è°ƒç”¨æŽ¥å£ä¿å­˜æ‹–拽后的位置与设备图标尺寸
       */
      saveDevicePositionAndSizeByApi() {
        signageApi.saveDevicePositionAndSizeApi(this.deviceList).then((res) => {
          if (res.code === 200) {
            this.$notification.success({
              message: '消息',
              description: res.message
            })
            this.isSwitchChecked = this.isHasResizeOrDragDevice = false
            this.getDeviceListByApi(this.$route.params.id)
          }
        })
        const data2 = { 'number': null, 'name': '完成率', 'count': 0.6523, 'planCount': null, 'rateCount': null }
        yAxisData.push(parseFloat((data2.count * 100) > 100 ? 100 : ((data2.count * 100).toFixed(2))))
        option.radar.indicator[2].num = (data2.count * 100) > 100 ? 100 : ((data2.count * 100).toFixed(2))
        option.series[1].data[0] = yAxisData
        this.rightColChart1.setOption(option, true)
      },

      /* ç»˜åˆ¶å³ä¾§ç¬¬äºŒä¸ªå›¾è¡¨ */
      drawRightColChart2() {
        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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.1333,
                '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.1333,
                '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.1333,
                '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.1333,
                '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.1333,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                '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.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': 'A_6',
            'beltlineName': '6-D风扇单元',
            'fullName': '6-D风扇单元',
            'list': [
              {
                'code': '000000014837',
                'factoryID': 'A',
                'beltlineID': 'A_6',
                'beltlineName': '6-D风扇单元',
                'dayTime': '2023-09-28',
                'lineRate': 0.0667,
                'processingLong': 5760.0000,
                'openingLong': 5760.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014826',
                'factoryID': 'A',
                'beltlineID': 'A_6',
                'beltlineName': '6-D风扇单元',
                'dayTime': '2023-09-29',
                'lineRate': 0.0667,
                'processingLong': 5760.0000,
                'openingLong': 5760.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014815',
                'factoryID': 'A',
                'beltlineID': 'A_6',
                'beltlineName': '6-D风扇单元',
                'dayTime': '2023-09-30',
                'lineRate': 0.0667,
                'processingLong': 5760.0000,
                'openingLong': 5760.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014804',
                'factoryID': 'A',
                'beltlineID': 'A_6',
                'beltlineName': '6-D风扇单元',
                'dayTime': '2023-10-01',
                'lineRate': 0.0667,
                'processingLong': 5760.0000,
                'openingLong': 5760.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014793',
                'factoryID': 'A',
                'beltlineID': 'A_6',
                'beltlineName': '6-D风扇单元',
                'dayTime': '2023-10-02',
                'lineRate': 0.0667,
                'processingLong': 5760.0000,
                'openingLong': 5760.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014782',
                'factoryID': 'A',
                'beltlineID': 'A_6',
                'beltlineName': '6-D风扇单元',
                'dayTime': '2023-10-03',
                'lineRate': 0.0667,
                'processingLong': 5760.0000,
                'openingLong': 5760.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014771',
                'factoryID': 'A',
                'beltlineID': 'A_6',
                'beltlineName': '6-D风扇单元',
                'dayTime': '2023-10-04',
                'lineRate': 0.0667,
                'processingLong': 5760.0000,
                'openingLong': 5760.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': 'A_7',
            'beltlineName': '7-D涡轮机匣',
            'fullName': '7-D涡轮机匣单元',
            'list': [
              {
                'code': '000000014838',
                'factoryID': 'A',
                'beltlineID': 'A_7',
                'beltlineName': '7-D涡轮机匣',
                'dayTime': '2023-09-28',
                'lineRate': null,
                'processingLong': null,
                'openingLong': null,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014827',
                'factoryID': 'A',
                'beltlineID': 'A_7',
                'beltlineName': '7-D涡轮机匣',
                'dayTime': '2023-09-29',
                'lineRate': null,
                'processingLong': null,
                'openingLong': null,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014816',
                'factoryID': 'A',
                'beltlineID': 'A_7',
                'beltlineName': '7-D涡轮机匣',
                'dayTime': '2023-09-30',
                'lineRate': null,
                'processingLong': null,
                'openingLong': null,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014805',
                'factoryID': 'A',
                'beltlineID': 'A_7',
                'beltlineName': '7-D涡轮机匣',
                'dayTime': '2023-10-01',
                'lineRate': null,
                'processingLong': null,
                'openingLong': null,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014794',
                'factoryID': 'A',
                'beltlineID': 'A_7',
                'beltlineName': '7-D涡轮机匣',
                'dayTime': '2023-10-02',
                'lineRate': null,
                'processingLong': null,
                'openingLong': null,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014783',
                'factoryID': 'A',
                'beltlineID': 'A_7',
                'beltlineName': '7-D涡轮机匣',
                'dayTime': '2023-10-03',
                'lineRate': null,
                'processingLong': null,
                'openingLong': null,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014772',
                'factoryID': 'A',
                'beltlineID': 'A_7',
                'beltlineName': '7-D涡轮机匣',
                'dayTime': '2023-10-04',
                'lineRate': null,
                'processingLong': null,
                'openingLong': null,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': 'A_8',
            'beltlineName': '8-D科研工段',
            'fullName': '8-D科研工段',
            'list': [
              {
                'code': '000000014839',
                'factoryID': 'A',
                'beltlineID': 'A_8',
                'beltlineName': '8-D科研工段',
                'dayTime': '2023-09-28',
                'lineRate': 0.2000,
                'processingLong': 17280.0000,
                'openingLong': 17280.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014828',
                'factoryID': 'A',
                'beltlineID': 'A_8',
                'beltlineName': '8-D科研工段',
                'dayTime': '2023-09-29',
                'lineRate': 0.2000,
                'processingLong': 17280.0000,
                'openingLong': 17280.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014817',
                'factoryID': 'A',
                'beltlineID': 'A_8',
                'beltlineName': '8-D科研工段',
                'dayTime': '2023-09-30',
                'lineRate': 0.2000,
                'processingLong': 17280.0000,
                'openingLong': 17280.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014806',
                'factoryID': 'A',
                'beltlineID': 'A_8',
                'beltlineName': '8-D科研工段',
                'dayTime': '2023-10-01',
                'lineRate': 0.2000,
                'processingLong': 17280.0000,
                'openingLong': 17280.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014795',
                'factoryID': 'A',
                'beltlineID': 'A_8',
                'beltlineName': '8-D科研工段',
                'dayTime': '2023-10-02',
                'lineRate': 0.2000,
                'processingLong': 17280.0000,
                'openingLong': 17280.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014784',
                'factoryID': 'A',
                'beltlineID': 'A_8',
                'beltlineName': '8-D科研工段',
                'dayTime': '2023-10-03',
                'lineRate': 0.2000,
                'processingLong': 17280.0000,
                'openingLong': 17280.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014773',
                'factoryID': 'A',
                'beltlineID': 'A_8',
                'beltlineName': '8-D科研工段',
                'dayTime': '2023-10-04',
                'lineRate': 0.2000,
                'processingLong': 17280.0000,
                'openingLong': 17280.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': 'A_9',
            'beltlineName': '生产室',
            'fullName': '生产室',
            'list': [
              {
                'code': '000000014840',
                'factoryID': 'A',
                'beltlineID': 'A_9',
                'beltlineName': '生产室',
                'dayTime': '2023-09-28',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014829',
                'factoryID': 'A',
                'beltlineID': 'A_9',
                'beltlineName': '生产室',
                'dayTime': '2023-09-29',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014818',
                'factoryID': 'A',
                'beltlineID': 'A_9',
                'beltlineName': '生产室',
                'dayTime': '2023-09-30',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014807',
                'factoryID': 'A',
                'beltlineID': 'A_9',
                'beltlineName': '生产室',
                'dayTime': '2023-10-01',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014796',
                'factoryID': 'A',
                'beltlineID': 'A_9',
                'beltlineName': '生产室',
                'dayTime': '2023-10-02',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014785',
                'factoryID': 'A',
                'beltlineID': 'A_9',
                'beltlineName': '生产室',
                'dayTime': '2023-10-03',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014774',
                'factoryID': 'A',
                'beltlineID': 'A_9',
                'beltlineName': '生产室',
                'dayTime': '2023-10-04',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              }
            ]
          },
          {
            'beltlineID': 'A_10',
            'beltlineName': 'JD-2军品机加',
            'fullName': 'JD-2军品机加',
            'list': [
              {
                'code': '000000014832',
                'factoryID': 'A',
                'beltlineID': 'A_10',
                'beltlineName': 'JD-2军品机加',
                'dayTime': '2023-09-28',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014821',
                'factoryID': 'A',
                'beltlineID': 'A_10',
                'beltlineName': 'JD-2军品机加',
                'dayTime': '2023-09-29',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014810',
                'factoryID': 'A',
                'beltlineID': 'A_10',
                'beltlineName': 'JD-2军品机加',
                'dayTime': '2023-09-30',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014799',
                'factoryID': 'A',
                'beltlineID': 'A_10',
                'beltlineName': 'JD-2军品机加',
                'dayTime': '2023-10-01',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014788',
                'factoryID': 'A',
                'beltlineID': 'A_10',
                'beltlineName': 'JD-2军品机加',
                'dayTime': '2023-10-02',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014777',
                'factoryID': 'A',
                'beltlineID': 'A_10',
                'beltlineName': 'JD-2军品机加',
                'dayTime': '2023-10-03',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:01'
              },
              {
                'code': '000000014766',
                'factoryID': 'A',
                'beltlineID': 'A_10',
                'beltlineName': 'JD-2军品机加',
                'dayTime': '2023-10-04',
                'lineRate': 0.0000,
                'processingLong': 0.0000,
                'openingLong': 0.0000,
                'collectDate': '2023-10-05 00:25:00'
              }
            ]
          },
          {
            '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'
              }
            ]
          }
        ]
        const seriesArr = []
        const xAxisData = []
        const option = {
          color: ['#538dd6', '#ffff01', '#0bae8d', '#e26c0a', '#F6E1BE', '#7030a0', '#0ad0bb', '#FF9297', '#A40035'],
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: '60%'
            }
          },
          legend: {
            //type:'scroll',
            show: false,
            width: '100%',
            height: 8,
            itemWidth: 12,
            itemGap: 5,
            itemHeight: 10,
            textStyle: {
              fontSize: '0%',
              color: '#fff'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          'dataZoom': [

            {
              'type': 'inside',
              'show': true,
              'xAxisIndex': [
                0
              ],
              'start': 0,
              'end': 100
            }
          ],
          xAxis: {
            type: 'category',
            name: '',
            // min:-35,
            // boundaryGap: false,
            data: [],
            axisLabel: {
              color: '#fff',
              rotate: 45,
              fontSize: '55%'
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '',
            axisLabel: {
              formatter: '{value} %',
              color: '#fff',
              fontSize: '70%'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              show: false
            }
          },
          series: []
        }
        data.forEach(item1 => {
          const dataArr = []
          item1.list.forEach(item2 => {
            dataArr.push({
              value: this.toDecimal2NoZero(item2.lineRate * 100),
              hostType: (item2.dayTime == null ? '' : item2.dayTime)
            })
            xAxisData.push(item2.dayTime == null ? '' : item2.dayTime.slice(5))
          })
          if (item1.beltlineName == '总厂') {
            seriesArr.push({
              name: item1.beltlineName,
              type: 'line',
              lineStyle: { width: 4, color: '#9cff45' },
              itemStyle: { color: '#50ff45' },
              symbol: 'circle',
              data: dataArr
            })
          } else {
            seriesArr.push({
              name: item1.fullName,
              type: 'line',
              lineStyle: { width: 2 },
              symbol: 'circle',
              data: dataArr
            })
          }
        })
        option.xAxis.data = Array.from(new Set(xAxisData))
        option.series = seriesArr
        this.rightColChart2.setOption(option, true)
      },

      /* ç»˜åˆ¶å³ä¾§ç¬¬ä¸‰ä¸ªå›¾è¡¨ */
      drawRightColChart3() {
        const data = [
          {
            'number': 'A_1',
            'name': '1-D特种工艺',
            'count': 0.0000,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_2',
            'name': '2-D整体机匣',
            'count': 0.0000,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_3',
            'name': '3-D燃烧室机匣',
            'count': 0.0000,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_4',
            'name': '4-D焊接机匣工段',
            'count': 0.1333,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_5',
            'name': '5-D CRIC单元',
            'count': 0.0000,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_6',
            'name': '6-D风扇单元',
            'count': 0.0667,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_7',
            'name': '7-D涡轮机匣',
            'count': 0,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_8',
            'name': '8-D科研工段',
            'count': 0.2000,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_9',
            'name': '生产室',
            'count': 0.0000,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_10',
            'name': 'JD-2军品机加',
            'count': 0.0000,
            'planCount': null,
            'rateCount': null
          }
        ]
        const xAxisData = []
        const seriesData = []
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}%`
          },
          legend: {
            show: false,
            data: [],
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {    //图例文字的样式
              //fontSize:14,
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '-3%',
            top: '5%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                color: '#fff',
                rotate: 45,
                fontSize: '55%'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              data: [],
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                formatter: '{value} %',
                color: '#fff',
                fontSize: '70%'
              },
              splitLine: {
                lineStyle: {
                  color: '#626262'
                }
              }
            }
          ],
          dataZoom: [
            {
              type: 'inside',
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 100
            }
          ],
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [1, 2],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}%',
                backgroundColor: '#4fb327',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 5
              },
              //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: '#bbbcff'},
                                    {offset: 1, color: '#04078e'}
                                ]
                            )*/, 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]
                  }
                },
                emphasis: {
                  barBorderRadius: 13,
                  shadowBlur: 18,
                  shadowColor: 'rgba(218,170, 58, 0.8)'
                }
              }
            }
          ]
        }
        data.forEach(item => {
          if (item.number != 'A_9') {
            xAxisData.push(item.name == null ? '' : item.name)
            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)
            })
          }
        })
        option.xAxis[0].data = xAxisData
        option.series[0].data = seriesData
        this.rightColChart3.setOption(option, true)
      },

      //保留两位小数
      toDecimal2NoZero(x) {
        const f = Math.round(x * 100) / 100
        const s = f.toString()
        return s
      },

      navigateTo(record) {
        if (!record.navigateMethod) {
          this.$router.push(`/DncWorkshopSignage/${record.navigateUrl}`)
        } else {
          const url = this.$router.resolve(`${record.navigateUrl}/${id}`).href
          window.open(url, '_blank')
        }
        return f.toString()
      },

      /**
       * çª—口尺寸变化时触发
       * è°ƒæ•´å›¾è¡¨å°ºå¯¸ä»¥é€‚应分辨率
       * å›¾ç‰‡é¢„览
       * @param text å›¾ç‰‡åœ°å€
       */
      handleWindowResize() {
        if (this.leftColChart1) this.leftColChart1.resize()
        if (this.rightColChart1) this.rightColChart1.resize()
        if (this.rightColChart2) this.rightColChart2.resize()
        if (this.rightColChart3) this.rightColChart3.resize()
      getImgView(text) {
        if (text && text.indexOf(',') > 0) {
          text = text.substring(0, text.indexOf(','))
        }
        return getFileAccessHttpUrl(text)
      },

      getCurrentDeviceStatusImage(status) {
        const currentStatus = this.equipmentStatusList.find(item => item.value.includes(status))
        return currentStatus.statusImage
      }
    }
  }
</script>

<style lang="less" scoped>
<style lang="less">
  .full-screen {
    width: 100%;
    height: 100%;
    height: 1080px;
    background-color: #000;
    display: flex;
    justify-content: center;
@@ -5934,34 +4118,10 @@
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: auto;

      .middle-col {
        position: relative;
        width: 67%;
        height: 100%;
        border: 0.1vw solid #0104AB;
        background-image: url("../../../assets/workshopLayout3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .navigate-container {
          position: absolute;
          top: 1.5%;
          left: 1%;

          .navigate-item {
            margin-top: 6%;

            img {
              width: 28%;
              cursor: pointer;
            }
          }
        }
      }

      .left-col, .right-col {
        width: 16%;
      .left-col {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
@@ -5969,15 +4129,15 @@

        .col-content {
          width: 100%;
          height: 24.25%;
          border: 0.1vw solid #0104AB;
          height: 19.5%;
          border: 0.1vw solid #666;
          color: #fff;
          display: flex;
          flex-direction: column;

          .content-title {
            font-size: 0.9vw;
            padding-left: 5%;
            padding: 1% 5%;
          }

          .content-footer-container {
@@ -6003,24 +4163,93 @@
              height: 100% !important;
            }
          }
        }
      }

          .equipment-state-container {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            width: 50%;
            font-size: 0.6vw;
      .right-col {
        position: relative;
        width: 1500px;
        height: 1065px;
        margin-left: 0.5%;
        /*background-image: url("../../../assets/WorskhopSignage/103.png");*/
        background-color: #000;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;

            img {
              width: 10%;
              margin-right: 5%;
            }
        .single-device {
          position: absolute;
          border: 1px solid transparent;
          padding: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          cursor: default;

          &:active {
            border: 1px solid #1890ff;
          }

          .server-status {
            font-size: 0.8vw;
            padding-left: 10%;
            height: 12%;
          .device-status {
            width: 100%;
            height: 100%;
            display: flex;
            -webkit-align-items: flex-end;
            -moz-align-items: flex-end;
            -ms-align-items: flex-end;

            .device-image {
              background-size: 100% 100%;
              background-repeat: no-repeat;
              width: 100%;
              height: 100%;
              position: relative;
              margin-bottom: 10px;

              .status-image {
                position: absolute;
                top: 25%;
                left: 25%;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                width: 50%;
                height: 50%;
              }
            }
          }
        }

        .guideline {
          position: absolute;
          border: 1px dashed #fff;
        }

        .guidelineX {
          width: 9999px;
          left: 0;
        }

        .guidelineY {
          top: 0;
          height: 9999px;
        }

        form {
          position: absolute;
          right: 0;
          bottom: 0;

          label {
            color: #fff;
          }

          .ant-switch {
            background-color: #999;
          }

          .ant-switch-checked {
            background-color: #1890FF;
          }
        }
      }

 src/views/mdc/base/WorkshopSignageEntrance.vue

ÎļþÃû´Ó src/views/mdc/base/SignageEntrance_420.vue ÐÞ¸Ä
@@ -7,15 +7,14 @@
        <div class="workshop-name" @click="navigateToWorkshopSignage(item.id)">{{item.workshopName}}</div>
      </a-list-item>
    </a-list>

  </div>
</template>

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

  export default {
    name: 'SignageEntrance_420',
    name: 'WorkshopSignageEntrance',
    data() {
      return {
        indexStyle: 1,
@@ -31,14 +30,14 @@
       * @param id è½¦é—´Id
       */
      navigateToWorkshopSignage(id) {
        const url = this.$router.resolve(`/DncWorkshopSignage/${id}`).href
        const url = this.$router.resolve(`/WorkshopSignage/${id}`).href
        window.open(url, '_blank')
      },
      /**
       * èŽ·å–车间列表
       */
      getWorkshopListByApi() {
        api.getWorkshopListInHomePageApi().then(res => {
        signageApi.getWorkshopListInHomePageApi().then(res => {
          console.log('res', res)
          if (res.result && res.result.length > 0) {
            this.workshopList = res.result

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,498 @@
<template>
  <div class="chart-container" :id="chartContainerId"></div>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    name: 'DayUtilizationRateTrend',
    components: {},
    props: {
      toDecimal2NoZero: {
        type: Function
      }
    },
    data() {
      return {
        chartContainer: null,
        chartContainerId: 'left-col-chart4'
      }
    },
    mounted() {
      this.getChartDataByApi()
      window.addEventListener('resize', this.handleWindowResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      getChartDataByApi() {
        this.chartContainer = this.$echarts.init(document.getElementById(this.chartContainerId))
        this.initChart()
      },

      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 = []
        const seriesData = []
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}%`
          },
          legend: {
            show: false,
            data: [],
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {    //图例文字的样式
              //fontSize:14,
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '-3%',
            top: '5%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                color: '#fff',
                rotate: 45,
                fontSize: '55%'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              data: [],
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                formatter: '{value} %',
                color: '#fff',
                fontSize: '70%'
              },
              splitLine: {
                lineStyle: {
                  color: '#626262'
                }
              }
            }
          ],
          dataZoom: [
            {
              type: 'inside',
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 100
            }
          ],
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [1, 2],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}%',
                backgroundColor: '#4fb327',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 5
              },
              //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]
                  }
                },
                emphasis: {
                  barBorderRadius: 13,
                  shadowBlur: 18,
                  shadowColor: 'rgba(218,170, 58, 0.8)'
                }
              }
            }
          ]
        }
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          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)
          })
        })
        option.xAxis[0].data = xAxisData
        option.series[0].data = seriesData
        this.chartContainer.setOption(option, true)
      },

      /**
       * çª—口尺寸变化时触发
       * è°ƒæ•´å›¾è¡¨å°ºå¯¸ä»¥é€‚应分辨率
       */
      handleWindowResize() {
        if (this.chartContainer) this.chartContainer.resize()
      }
    }
  }
</script>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,52 @@
<template>
  <dv-scroll-board :config="config"/>
</template>

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

  export default {
    name: 'DeviceAlarmInfo',
    components: {},
    data() {
      return {
        config: {},
        dataSource: []
      }
    },
    mounted() {
      this.getDeviceAlarmInfoByApi()
    },
    methods: {
      getDeviceAlarmInfoByApi() {
        const that = this
        that.initChart()
        // signageApi.getWorkshopAlarmInfoApi()
        //   .then(res => {
        //     if (res.success) {
        //       that.dataSource = res.result
        //       that.initChart()
        //     }
        //   })
      },

      initChart() {
        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']],
          rowNum: 2,
          index: false,
          // columnWidth: [300, 300],
          align: ['center', 'center', 'center']
        }
      }
    }
  }
</script>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,149 @@
<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"
      :w="item.vw"
      :h="item.vh"
      :x="item.coordinateLeft"
      :y="item.coordinateTop"
      v-on:resizing="resize($event, index)"
      v-on:dragging="resize($event, index)"
      :parentLimitation="true"
      :parentH="1065"
      :parentW="1500"
      :minw="70"
      :minh="70"
      :isDraggable="true"
      :isResizable="true"
      :stickSize="6"
      @deactivated="showGuideline = 'none'"
    >
      <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')})` }"
            class="device-image"
          ></div>
        </div>
        <div
          :style="{ color:workshopDetails.equipmentIdColor?workshopDetails.equipmentIdColor:'#fff',marginTop:'10px' }">
          {{ item.equipmentId }}
        </div>
      </div>
    </VueDragResize>
  </div>
</template>

<script>
  export default {
    name: 'DeviceDragLayout',
    components: {},
    props: {
      deviceList: {
        type: Array
      }
    },
    data() {
      return {
        showGuideline: 'none',
        guidelineXTop: 0,
        guidelineYLeft: 0
      }
    },
    methods: {
      /**
       * è®¾å¤‡æ‹–拽或缩放时触发事件
       * @param newRect æ‹–拽或缩放后的尺寸及距离
       * @param index æ‹–拽设备在数组中的下标
       */
      resize(newRect, index) {
        this.showGuideline = 'block'
        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
      }
    }
  }
</script>

<style scoped lang="less">
  .single-device {
    position: absolute;
    border: 1px solid transparent;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: default;

    &:active {
      border: 1px solid #1890ff;
    }

    .device-status {
      width: 100%;
      height: 100%;
      display: flex;
      -webkit-align-items: flex-end;
      -moz-align-items: flex-end;
      -ms-align-items: flex-end;

      .status-image {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 10px;
        height: 80%;
        margin-right: 5px;
      }

      .device-image {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
      }
    }
  }

  .guideline {
    position: absolute;
    border: 1px dashed #ccc;
  }

  .guidelineX {
    width: 9999px;
    left: 0;
  }

  .guidelineY {
    top: 0;
    height: 9999px;
  }
</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,718 @@
<template>
  <div class="chart-container" :id="chartContainerId"></div>
</template>

<script>
  export default {
    name: 'MonthUtilizationRateTrend',
    components: {},
    props: {
      toDecimal2NoZero: {
        type: Function
      }
    },
    data() {
      return {
        chartContainer: null,
        chartContainerId: 'left-col-chart2'
      }
    },
    mounted() {
      this.getChartDataByApi()
      window.addEventListener('resize', this.handleWindowResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      getChartDataByApi() {
        this.chartContainer = this.$echarts.init(document.getElementById(this.chartContainerId))
        this.initChart()
      },

      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'
              }
            ]
          }
        ]
        const seriesArr = []
        const xAxisData = []
        const option = {
          color: ['#538dd6', '#ffff01', '#0bae8d', '#e26c0a', '#F6E1BE', '#7030a0', '#0ad0bb', '#FF9297', '#A40035'],
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: '60%'
            }
          },
          legend: {
            //type:'scroll',
            show: false,
            width: '100%',
            height: 8,
            itemWidth: 12,
            itemGap: 5,
            itemHeight: 10,
            textStyle: {
              fontSize: '0%',
              color: '#fff'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          'dataZoom': [

            {
              'type': 'inside',
              'show': true,
              'xAxisIndex': [
                0
              ],
              'start': 0,
              'end': 100
            }
          ],
          xAxis: {
            type: 'category',
            name: '',
            // min:-35,
            // boundaryGap: false,
            data: [],
            axisLabel: {
              color: '#fff',
              rotate: 45,
              fontSize: '55%'
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '',
            axisLabel: {
              formatter: '{value} %',
              color: '#fff',
              fontSize: '70%'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              show: false
            }
          },
          series: []
        }
        data.forEach(item1 => {
          const dataArr = []
          item1.list.forEach(item2 => {
            dataArr.push({
              value: this.toDecimal2NoZero(item2.lineRate * 100),
              hostType: (item2.dayTime == null ? '' : item2.dayTime)
            })
            xAxisData.push(item2.dayTime == null ? '' : item2.dayTime)
          })
          if (item1.beltlineName == '总厂') {
            seriesArr.push({
              name: item1.beltlineName,
              type: 'line',
              lineStyle: { width: 4, color: '#9cff45' },
              itemStyle: { color: '#50ff45' },
              symbol: 'circle',
              data: dataArr
            })
          } else {
            seriesArr.push({
              name: item1.fullName,
              type: 'line',
              lineStyle: { width: 2 },
              symbol: 'circle',
              data: dataArr
            })
          }
        })
        option.xAxis.data = Array.from(new Set(xAxisData))
        option.series = seriesArr
        console.log(Array.from(new Set(xAxisData)))
        console.log(seriesArr)
        this.chartContainer.setOption(option, true)
      },

      /**
       * çª—口尺寸变化时触发
       * è°ƒæ•´å›¾è¡¨å°ºå¯¸ä»¥é€‚应分辨率
       */
      handleWindowResize() {
        if (this.chartContainer) this.chartContainer.resize()
      }
    }
  }
</script>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,661 @@
<template>
  <div class="chart-container" :id="chartContainerId"></div>
</template>

<script>
  export default {
    name: 'WeekUtilizationRateTrend',
    components: {},
    props: {
      toDecimal2NoZero: {
        type: Function
      }
    },
    data() {
      return {
        chartContainer: null,
        chartContainerId: 'left-col-chart3'
      }
    },
    mounted() {
      this.getChartDataByApi()
      window.addEventListener('resize', this.handleWindowResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      getChartDataByApi() {
        this.chartContainer = this.$echarts.init(document.getElementById(this.chartContainerId))
        this.initChart()
      },

      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'
              }
            ]
          }
        ]
        const seriesArr = []
        const xAxisData = []
        const option = {
          color: ['#538dd6', '#ffff01', '#0bae8d', '#e26c0a', '#F6E1BE', '#7030a0', '#0ad0bb', '#FF9297', '#A40035'],
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: '60%'
            }
          },
          legend: {
            //type:'scroll',
            show: false,
            width: '100%',
            height: 8,
            itemWidth: 12,
            itemGap: 5,
            itemHeight: 10,
            textStyle: {
              fontSize: '0%',
              color: '#fff'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          'dataZoom': [

            {
              'type': 'inside',
              'show': true,
              'xAxisIndex': [
                0
              ],
              'start': 0,
              'end': 100
            }
          ],
          xAxis: {
            type: 'category',
            name: '',
            // min:-35,
            // boundaryGap: false,
            data: [],
            axisLabel: {
              color: '#fff',
              rotate: 45,
              fontSize: '55%'
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '',
            axisLabel: {
              formatter: '{value} %',
              color: '#fff',
              fontSize: '70%'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              show: false
            }
          },
          series: []
        }
        data.forEach(item1 => {
          const dataArr = []
          item1.list.forEach(item2 => {
            dataArr.push({
              value: this.toDecimal2NoZero(item2.lineRate * 100),
              hostType: (item2.dayTime == null ? '' : item2.dayTime)
            })
            xAxisData.push(item2.dayTime == null ? '' : item2.dayTime.slice(5))
          })
          if (item1.beltlineName == '总厂') {
            seriesArr.push({
              name: item1.beltlineName,
              type: 'line',
              lineStyle: { width: 4, color: '#9cff45' },
              itemStyle: { color: '#50ff45' },
              symbol: 'circle',
              data: dataArr
            })
          } else {
            seriesArr.push({
              name: item1.fullName,
              type: 'line',
              lineStyle: { width: 2 },
              symbol: 'circle',
              data: dataArr
            })
          }
        })
        option.xAxis.data = Array.from(new Set(xAxisData))
        option.series = seriesArr
        this.chartContainer.setOption(option, true)
      },

      /**
       * çª—口尺寸变化时触发
       * è°ƒæ•´å›¾è¡¨å°ºå¯¸ä»¥é€‚应分辨率
       */
      handleWindowResize() {
        if (this.chartContainer) this.chartContainer.resize()
      }
    }
  }
</script>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,275 @@
<template>
  <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>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'WorkshopDeviceOverview',
    components: {},
    props: {
      equipmentList: {
        type: Array
      },
      toDecimal2NoZero: {
        type: Function
      }
    },
    data() {
      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
      }
    },
    mounted() {
      this.getChartDataByApi()
      window.addEventListener('resize', this.handleWindowResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      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 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
            }
          },
          series: [
            {
              name: '类目',
              type: 'pie',
              radius: '60%',
              center: ['50%', '50%'],
              hoverAnimation: false,
              data: [
                {
                  value: 0, name: '完成量', itemStyle: { normal: { color: '#00923f' } },
                  label: {
                    normal: {
                      show: true,
                      fontSize: '70%',
                      position: 'inside',
                      textBorderWidth: 0,
                      formatter: function() {
                        return completionNum + '%'
                      }
                    }
                  }
                },
                {
                  value: 100, name: '任务量',
                  itemStyle: { normal: { color: '#e67817' } },
                  label: {
                    normal: {
                      show: false
                    }
                  }
                }
              ],
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        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)
      },

      /**
       * èŽ·å–对应状态的设备数量
       * @param value çŠ¶æ€ç é›†åˆ
       */
      getEquipmentStateCount(value) {
        let stateCount = 0
        this.equipmentList.forEach(item => {
          if (value.includes(item.oporation)) stateCount++
        })
        return stateCount
      },

      /**
       * çª—口尺寸变化时触发
       * è°ƒæ•´å›¾è¡¨å°ºå¯¸ä»¥é€‚应分辨率
       */
      handleWindowResize() {
        if (this.chartContainer) this.chartContainer.resize()
      }
    }
  }
</script>

<style lang="less">
  .equipment-state-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 50%;
    font-size: 0.6vw;

    img {
      width: 10%;
      margin-right: 5%;
    }
  }
</style>

 src/views/system/WorkshopSignageManagement.vue

@@ -9,7 +9,7 @@
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item label="车间名称" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19}">
                  <a-input placeholder="" v-model="queryParam.workshopName"></a-input>
                  <a-input placeholder="请输入车间名称" v-model="queryParam.workshopName"></a-input>
                </a-form-item>
              </a-col>
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
@@ -85,7 +85,7 @@
            <a-row :gutter="24">
              <a-col :md="12" :sm="12">
                <a-form-item label="统一编码">
                  <a-input placeholder="" v-model="queryParam2.equipmentId"></a-input>
                  <a-input placeholder="请输入统一编码" v-model="queryParam2.equipmentId"></a-input>
                </a-form-item>
              </a-col>
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
@@ -232,11 +232,11 @@
          align: 'center',
          scopedSlots: { customRender: 'backgroundImage' },
        },
        {
          title: '设备编号颜色',
          dataIndex: 'equipmentIdColor',
          align: 'center',
        },
        // {
        //   title: '设备编号颜色',
        //   dataIndex: 'equipmentIdColor',
        //   align: 'center',
        // },
        {
          title: '操作',
          dataIndex: 'action',

 src/views/system/modules/WorkshopModal.vue

@@ -18,9 +18,9 @@
        <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-form-model-item>
        <!--<a-form-model-item label="设备编号颜色">-->
          <!--<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"/>
        </a-form-model-item>