1、总控车间看板与分控车间看板完成布局100% 2、设备报警报表模块下所有页面完成页面布局及相关功能 3、设备电流负载模块下所有页面完成页面布局及相关功能

zhaowei

2024-07-19 a612ae6b31a4b95731fd032bb68533a93de4887e

1、总控车间看板与分控车间看板完成布局100%
2、设备报警报表模块下所有页面完成页面布局及相关功能
3、设备电流负载模块下所有页面完成页面布局及相关功能

 src/api/mdc.js

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

 src/assets/1 Line.jpg

 src/assets/image/logo.jpg

 src/assets/yt_background.jpg

 src/config/router.config.js

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

 src/views/mdc/base/EfficiencyReport.vue

@@ -7,9 +7,6 @@
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
            <a-tab-pane v-if="isDepartType == 0" key="2" tab="部门层级">,
              <depart-tree @getCurrSelectedDD="changeSelectionNodedd"></depart-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="19">
@@ -27,14 +24,11 @@
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BaseTree from '../common/BaseTree'
  import EfficiencyList from './modules/efficiencyReport/EfficiencyList'
  import DepartTree from './modules/DepartList/DepartListTree/DepartTree'
  import { mapActions } from 'vuex'

  export default {
    name: 'efficiencyReport',
    components: {
      BaseTree,
      DepartTree,
      EfficiencyList
    },
    data() {
@@ -48,27 +42,9 @@
        url: {
          equipmentStatistics: '/mdc/equipment/equipmentStatistics'
        },
        isDepartType: ''
      }
    },
    created() {
      this.queryTreeData()
    },
    methods: {
      ...mapActions(['QueryDepartTree']),
      queryTreeData() {
        this.QueryDepartTree().then(res => {
          if (res.success) {
            this.isDepartType = res.result[0].value
          } else {
            this.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        }).finally(() => {
        })
      },
      tabChange(val) {
        this.activeKey = val
        this.selectTypeTree = val

 src/views/mdc/base/EfficiencyShiftReport.vue

@@ -7,12 +7,8 @@
           <a-tab-pane key="1" tab="车间层级" force-render>
             <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
           </a-tab-pane>
           <a-tab-pane v-if="isDepartType == 0" key="2" tab="部门层级">
             <depart-tree  @getCurrSelectedDD="changeSelectionNodedd"></depart-tree>
           </a-tab-pane>
         </a-tabs>
       </a-col>

        <a-col :md="19">
          <efficiencyShift-list ref="deviceList" :nodeTree='selectEquipment' :nodePeople='selectPeople' :Type="selectTypeTree"/>
        </a-col>
@@ -27,13 +23,10 @@
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BaseTree from '../common/BaseTree'
  import EfficiencyShiftList from './modules/efficiencyShiftReport/EfficiencyShiftList'
  import DepartTree from './modules/DepartList/DepartListTree/DepartTree'
  import {mapActions} from 'vuex'
  export default {
    name: 'EfficiencyShiftReport',
    components: {
      BaseTree,
      DepartTree,
      EfficiencyShiftList
    },
    data() {
@@ -47,28 +40,9 @@
        url: {
          equipmentStatistics: '/mdc/equipment/equipmentStatistics'
        },
        isDepartType:'',
      }
    },
    created() {
      this.queryTreeData()
    },
    methods: {
      ...mapActions(['QueryDepartTree']),
      queryTreeData() {
        this.QueryDepartTree().then(res => {
          if (res.success) {
            this.isDepartType = res.result[0].value
          } else {
            // this.$message.warn(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        }).finally(() =>{
        })
      },
      tabChange(val) {
        // console.log(val);
        this.activeKey = val

 src/views/mdc/base/EquipCurrentLoadContrastReport.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,57 @@
<template>
  <div style="width: 100%; height: 100%;">
    <a-card :bordered="false">
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="19">
          <EquipCurrentLoadContrastReportList :node='selectEquipment' :Type="selectTypeTree"/>
        </a-col>
      </a-row>
    </a-card>
  </div>

</template>

<script>
  import { putAction, getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BaseTree from '../common/BaseTree'
  import EquipCurrentLoadContrastReportList from './modules/EquipCurrentLoadContrastReport/EquipCurrentLoadContrastReportList'

  export default {
    name: 'EquipCurrentLoadContrastReport',
    components: {
      BaseTree,
      EquipCurrentLoadContrastReportList
    },
    data() {
      return {
        activeKey: '1',
        selectEquipmentId: '',
        selectEquipment: {},
        selectTypeTree: '',
      }
    },
    methods: {
      tabChange(val) {
        this.activeKey = val
        this.selectTypeTree = val
      },
      changeSelectionNode(val) {
        this.selectEquipment = val
        this.selectTypeTree = '1'
      },
      changeSelectionNodedd(val) {
        this.selectPeople = val
        this.selectTypeTree = '2'
      }
    }

  }
</script>

 src/views/mdc/base/EquipmentAlarmNumberRetrieval.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,62 @@
<template>
  <div style="width: 100%; height: 100%;">
    <a-card :bordered="false">
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="19">
          <EquipmentAlarmNumberRetrievalList :node='selectEquipment' :Type="selectTypeTree"/>
        </a-col>
      </a-row>
    </a-card>
  </div>

</template>

<script>
  import { putAction, getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BaseTree from '../common/BaseTree'
  import EquipmentAlarmNumberRetrievalList from './modules/EquipmentAlarmNumberRetrieval/EquipmentAlarmNumberRetrievalList.vue'

  export default {
    name: 'EquipmentAlarmNumberRetrieval',
    components: {
      BaseTree,
      EquipmentAlarmNumberRetrievalList
    },
    data() {
      return {
        activeKey: '1',
        description: '设备信息',
        selectEquipmentId: '',
        selectEquipment: {},
        selectPeople: {},
        selectTypeTree: '',
        url: {
          equipmentStatistics: '/mdc/equipment/equipmentStatistics'
        },
      }
    },
    methods: {
      tabChange(val) {
        this.activeKey = val
        this.selectTypeTree = val
      },
      changeSelectionNode(val) {
        this.selectEquipment = val
        this.selectTypeTree = '1'
      },
      changeSelectionNodedd(val) {
        this.selectPeople = val
        this.selectTypeTree = '2'
      }
    }

  }
</script>

 src/views/mdc/base/EquipmentAlarmRetrieval.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,57 @@
<template>
  <div style="width: 100%; height: 100%;">
    <a-card :bordered="false">
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="19">
          <EquipmentAlarmRetrievalList :node='selectEquipment' :Type="selectTypeTree"/>
        </a-col>
      </a-row>
    </a-card>
  </div>

</template>

<script>
  import { putAction, getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BaseTree from '../common/BaseTree'
  import EquipmentAlarmRetrievalList from './modules/EquipmentAlarmRetrieval/EquipmentAlarmRetrievalList.vue'

  export default {
    name: 'EquipmentAlarmRetrieval',
    components: {
      BaseTree,
      EquipmentAlarmRetrievalList
    },
    data() {
      return {
        activeKey: '1',
        selectEquipmentId: '',
        selectEquipment: {},
        selectTypeTree: '',
      }
    },
    methods: {
      tabChange(val) {
        this.activeKey = val
        this.selectTypeTree = val
      },
      changeSelectionNode(val) {
        this.selectEquipment = val
        this.selectTypeTree = '1'
      },
      changeSelectionNodedd(val) {
        this.selectPeople = val
        this.selectTypeTree = '2'
      }
    }

  }
</script>

 src/views/mdc/base/EquipmentAlarmSort.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,62 @@
<template>
  <div style="width: 100%; height: 100%;">
    <a-card :bordered="false">
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="19">
          <EquipmentAlarmSortList :node='selectEquipment' :Type="selectTypeTree"/>
        </a-col>
      </a-row>
    </a-card>
  </div>

</template>

<script>
  import { putAction, getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BaseTree from '../common/BaseTree'
  import EquipmentAlarmSortList from './modules/EquipmentAlarmSort/EquipmentAlarmSortList.vue'

  export default {
    name: 'EquipmentAlarmSort',
    components: {
      BaseTree,
      EquipmentAlarmSortList
    },
    data() {
      return {
        activeKey: '1',
        description: '设备信息',
        selectEquipmentId: '',
        selectEquipment: {},
        selectPeople: {},
        selectTypeTree: '',
        url: {
          equipmentStatistics: '/mdc/equipment/equipmentStatistics'
        }
      }
    },
    methods: {
      tabChange(val) {
        this.activeKey = val
        this.selectTypeTree = val
      },
      changeSelectionNode(val) {
        this.selectEquipment = val
        this.selectTypeTree = '1'
      },
      changeSelectionNodedd(val) {
        this.selectPeople = val
        this.selectTypeTree = '2'
      }
    }

  }
</script>

 src/views/mdc/base/EquipmentCurrentReport.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,57 @@
<template>
  <div style="width: 100%; height: 100%;">
    <a-card :bordered="false">
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="19">
          <EquipmentCurrentReportList :node='selectEquipment' :Type="selectTypeTree"/>
        </a-col>
      </a-row>
    </a-card>
  </div>

</template>

<script>
  import { putAction, getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BaseTree from '../common/BaseTree'
  import EquipmentCurrentReportList from './modules/EquipmentCurrentReport/EquipmentCurrentReportList.vue'

  export default {
    name: 'EquipmentCurrentReport',
    components: {
      BaseTree,
      EquipmentCurrentReportList
    },
    data() {
      return {
        activeKey: '1',
        selectEquipmentId: '',
        selectEquipment: {},
        selectTypeTree: '',
      }
    },
    methods: {
      tabChange(val) {
        this.activeKey = val
        this.selectTypeTree = val
      },
      changeSelectionNode(val) {
        this.selectEquipment = val
        this.selectTypeTree = '1'
      },
      changeSelectionNodedd(val) {
        this.selectPeople = val
        this.selectTypeTree = '2'
      }
    }

  }
</script>

 src/views/mdc/base/EquipmentLoadReport.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,57 @@
<template>
  <div style="width: 100%; height: 100%;">
    <a-card :bordered="false">
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="19">
          <EquipmentLoadReportList :node='selectEquipment' :Type="selectTypeTree"/>
        </a-col>
      </a-row>
    </a-card>
  </div>

</template>

<script>
  import { putAction, getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BaseTree from '../common/BaseTree'
  import EquipmentLoadReportList from './modules/EquipmentLoadReport/EquipmentLoadReportList'

  export default {
    name: 'EquipmentLoadReport',
    components: {
      BaseTree,
      EquipmentLoadReportList
    },
    data() {
      return {
        activeKey: '1',
        selectEquipmentId: '',
        selectEquipment: {},
        selectTypeTree: ''
      }
    },
    methods: {
      tabChange(val) {
        this.activeKey = val
        this.selectTypeTree = val
      },
      changeSelectionNode(val) {
        this.selectEquipment = val
        this.selectTypeTree = '1'
      },
      changeSelectionNodedd(val) {
        this.selectPeople = val
        this.selectTypeTree = '2'
      }
    }

  }
</script>

 src/views/mdc/base/MasterControlWorkshopSignage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,2402 @@
<template>
  <div class="full-screen">
    <div class="container">
      <div class="left-col">
        <div class="col-content">
          <div class="content-title">昨日概况</div>
          <div class="chart-container" id="left-col-chart1"></div>
        </div>
        <div class="col-content">
          <div class="content-title">今日生产进度(件)</div>
          <div class="chart-container" id="left-col-chart2"></div>
        </div>
        <div class="col-content">
          <div class="content-title">今日产品合格率(%)</div>
          <div class="chart-container" id="left-col-chart3"></div>
        </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="page-title">

          <div style="position: relative">
            <img src="../../../assets/image/logo.jpg">
            ä¸€æ‹–大拖装配厂
          </div>
          <div>数字化车间智能管理系统</div>
        </div>
        <div class="workshop-bg">
          <div class="navigate-container" style="left: 5%;">
            <div @click="navigateTo(item)" v-for="(item,index) in navigateList" :key="index" class="navigate-item">
              <template v-if="index<5">
                <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-index">{{index+1}}</div>
                <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-label">
                  {{item.label}}
                </div>
              </template>
            </div>
          </div>
          <div class="navigate-container" style="bottom:5%;right: 5%;">
            <div @click="navigateTo(item)" v-for="(item,index) in navigateList" :key="index" class="navigate-item">
              <template v-if="index>=5">
                <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-index">{{index+1}}</div>
                <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-label">
                  {{item.label}}
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="switch-container">
          <div @click="activeIndex=index" class="switch-item" v-for="(item,index) in switchList" :key="index"
               :style="{backgroundColor:activeIndex===index?'#848284':'#6B6D6B',color:activeIndex==index?'#27A2DB':'#000'}">
            {{item.label}}
          </div>
        </div>
      </div>
      <div class="right-col">
        <div class="col-content">
          <div class="chart-container" id="right-col-chart1"></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>
        <div class="col-content">
          <div class="content-title">月设备利用率(%)</div>
          <div class="chart-container" id="right-col-chart4"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    name: 'MasterControlWorkshopSignage',
    components: {},
    data() {
      return {
        activeIndex: 0,
        firstEnterDevicePixelRatio: null,
        currentDevicePixelRatio: null,
        leftColChart1: '',
        leftColChart2: '',
        leftColChart3: '',
        leftColChart4: '',
        navigateList: [
          {
            label: '1024后箱加工线',
            id: '1',
            backgroundColor: '#0000FF'
          },
          {
            label: '1024前箱加工线',
            id: '2',
            backgroundColor: '#FF8E00'
          },
          {
            label: '前托架加工线',
            id: '3',
            backgroundColor: '#DE1439'
          },
          {
            label: '80传动壳体加工线',
            id: '4',
            backgroundColor: '#006500'
          },
          {
            label: '80减速器壳体加工线',
            id: '5',
            backgroundColor: '#0000FF'
          },
          {
            label: '箱体加工线',
            id: '6',
            backgroundColor: '#FF8E00'
          },
          {
            label: '差速器轴承座加工线',
            id: '7',
            backgroundColor: '#DE1439'
          },
          {
            label: '制动器活塞加工线',
            id: '8',
            backgroundColor: '#006500'
          },
          {
            label: '中小件加工线',
            id: '9',
            backgroundColor: '#0000FF'
          }
        ],
        switchList: [
          {
            label: 'MES',
            index: 0
          },
          {
            label: '刀具管理',
            index: 1
          },
          {
            label: '故障',
            index: 2
          },
          {
            label: '3D',
            index: 3
          },
          {
            label: '安防',
            index: 4
          }
        ],
        rightColChart1: '',
        rightColChart2: '',
        rightColChart3: '',
        rightColChart4: '',
        rightColChart4CarouselTime: null
      }
    },
    mounted() {
      this.firstEnterDevicePixelRatio = window.devicePixelRatio
      window.addEventListener('resize', this.handleWindowResize)
      this.getChartDataByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
      if (this.rightColChart4CarouselTime) clearInterval(this.rightColChart4CarouselTime)
    },
    methods: {
      getChartDataByApi() {
        this.getLeftColChart1DataByApi()
        this.getLeftColChart2DataByApi()
        this.getLeftColChart3DataByApi()
        this.getLeftColChart4DataByApi()
        // this.getRightColChart1DataByApi()
        this.getRightColChart2DataByApi()
        this.getRightColChart3DataByApi()
        this.getRightColChart4DataByApi()
      },

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

      getLeftColChart2DataByApi() {
        this.leftColChart2 = this.$echarts.init(document.getElementById('left-col-chart2'))
        this.drawLeftColChart2()
      },

      getLeftColChart3DataByApi() {
        this.leftColChart3 = this.$echarts.init(document.getElementById('left-col-chart3'))
        this.drawLeftColChart3()
      },

      getLeftColChart4DataByApi() {
        this.leftColChart4 = this.$echarts.init(document.getElementById('left-col-chart4'))
        this.drawLeftColChart4()
      },

      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()
      },

      getRightColChart4DataByApi() {
        this.rightColChart4 = this.$echarts.init(document.getElementById('right-col-chart4'))
        this.drawRightColChart4()
      },

      /* ç»˜åˆ¶å·¦ä¾§ç¬¬ä¸€ä¸ªå›¾è¡¨ */
      drawLeftColChart1() {
        const data = [
          {
            'number': null,
            'name': '产品合格率',
            'count': 1,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': null,
            'name': '设备利用率',
            'count': 0.89,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': null,
            'name': '计划完成率',
            'count': 0.95,
            '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: '75%',
              splitNumber: 1,
              shape: 'circle',
              nameGap: 10,
              name: {
                textStyle: {
                  color: '#fff',
                  fontSize: '65%'
                }
              },
              splitArea: {
                areaStyle: {
                  color: ['transparent']//环型之间默认是间隔色分开，这里不用间隔色
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#00007D',
                  type: 'solid',
                  width: 2
                }
              },
              axisLine: {
                show: true
              }
            },
            {
              center: ['50%', '55%'],
              indicator: [{
                name: '产品合格率',
                num: '',
                max: 100
              }, {
                name: '设备利用率',
                num: '',
                max: 100
              }, {
                name: '计划完成率',
                num: '',
                max: 100
              }],
              radius: '85%',
              splitNumber: 1,
              shape: 'circle',
              nameGap: 10,
              name: {
                textStyle: {
                  color: '#fff',
                  fontSize: '65%'
                },
                formatter: function(value, indicator) {
                  return value + ' ' + indicator.num + '%'
                }
              },
              splitArea: {
                areaStyle: {
                  color: ['transparent']//环型之间默认是间隔色分开，这里不用间隔色
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#00007D',
                  type: 'solid',
                  width: 2
                }
              },
              axisLine: {
                show: false
              },
              zlevel: 1
            }
          ],
          series: [
            {
              type: 'radar',
              lineStyle: {
                width: 0.1,
                opacity: 0.1
              },
              data: [
                [0, 0, 0]
              ],
              symbolSize: 8,
              itemStyle: {
                color: '#FBD200'
              },
              areaStyle: {
                color: '#84CFEF',
                opacity: 0.85
              },
              label: {
                show: false,
                position: 'top',
                formatter: '{c}%'
              },
              zlevel: 99
            }

          ]
        }
        data.forEach((item, index) => {
          yAxisData.push(parseFloat(item.count * 100 > 100 ? 100 : item.count * 100))
          option.radar[1].indicator[index].num = item.count * 100 > 100 ? 100 : item.count * 100
        })
        option.series[0].data[0] = yAxisData
        this.leftColChart1.setOption(option, true)
      },

      /* ç»˜åˆ¶å·¦ä¾§ç¬¬äºŒä¸ªå›¾è¡¨ */
      drawLeftColChart2() {
        const data1 = [
          {
            'number': 'A_1',
            'name': '前箱前',
            'count': 190
          },
          {
            'number': 'A_2',
            'name': '1024后箱',
            'count': 180
          },
          {
            'number': 'A_3',
            'name': '差速器',
            'count': 200
          },
          {
            'number': 'A_4',
            'name': '轴承座',
            'count': 100
          },
          {
            'number': 'A_5',
            'name': '80减',
            'count': 200
          },
          {
            'number': 'A_6',
            'name': '80ä¼ ',
            'count': 90
          },
          {
            'number': 'A_7',
            'name': '1024前',
            'count': 200
          }
        ]
        const data2 = [
          {
            'number': 'A_1',
            'name': '前箱前',
            'count': 165
          },
          {
            'number': 'A_2',
            'name': '1024后箱',
            'count': 166
          },
          {
            'number': 'A_3',
            'name': '差速器',
            'count': 167
          },
          {
            'number': 'A_4',
            'name': '轴承座',
            'count': 90
          },
          {
            'number': 'A_5',
            'name': '80减',
            'count': 100
          },
          {
            'number': 'A_6',
            'name': '80ä¼ ',
            'count': 55
          },
          {
            'number': 'A_7',
            'name': '1024前',
            'count': 171
          }
        ]
        const xAxisData = []
        const seriesData1 = []
        const seriesData2 = []
        data1.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData1.push({
            value: item.count == null ? '' : item.count,
            hostType: (item.number == null ? '' : item.number)
          })
        })
        data2.forEach(item => {
          seriesData2.push({
            value: item.count == null ? '' : item.count,
            hostType: (item.number == null ? '' : item.number)
          })
        })
        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: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '35%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: 10,
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 1, 0,
                  [

                    { offset: 0, color: '#4A7DBD' },
                    { offset: 1, color: '#31557B' }
                  ]
                ),
                emphasis: {
                  barBorderRadius: 13,
                  shadowBlur: 18,
                  shadowColor: 'rgba(218,170, 58, 0.8)'
                }
              }
            },
            {
              name: '利用率',
              type: 'bar',
              barWidth: '35%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: 10,
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 1, 0,
                  [
                    { offset: 0, color: '#BD4D4A' },
                    { offset: 1, color: '#7B3031' }
                  ]
                ),
                emphasis: {
                  barBorderRadius: 13,
                  shadowBlur: 18,
                  shadowColor: 'rgba(218,170, 58, 0.8)'
                }
              }
            }
          ]
        }
        option.xAxis.data = xAxisData
        option.series[0].data = seriesData1
        option.series[1].data = seriesData2
        this.leftColChart2.setOption(option, true)
      },

      /* ç»˜åˆ¶å·¦ä¾§ç¬¬ä¸‰ä¸ªå›¾è¡¨ */
      drawLeftColChart3() {
        const data = [
          {
            'number': 'A_1',
            'name': '前箱',
            'count': 0.94,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_2',
            'name': '后箱',
            'count': 0.93,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_3',
            'name': '差速器',
            'count': 0.92,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_4',
            'name': '轴承座',
            'count': 0.91,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_5',
            'name': '80减',
            'count': 0.9,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_6',
            'name': '80ä¼ ',
            'count': 0.89,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_7',
            'name': '1024前',
            'count': 0.88,
            'planCount': null,
            'rateCount': null
          }
        ]
        const xAxisData = []
        const seriesData = []
        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)
          })
        })
        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: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  const colorList = [
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [

                        { offset: 0, color: '#4A7DBD' },
                        { offset: 1, color: '#31557B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#BD4D4A' },
                        { offset: 1, color: '#7B3031' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#94AF52' },
                        { offset: 1, color: '#637A39' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#7B61A4' },
                        { offset: 1, color: '#52416B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#4AAAC6' },
                        { offset: 1, color: '#29697B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#F79642' },
                        { offset: 1, color: '#9C5D29' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [

                        { offset: 0, color: '#4A7DBD' },
                        { offset: 1, color: '#31557B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#BD4D4A' },
                        { offset: 1, color: '#7B3031' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#94AF52' },
                        { offset: 1, color: '#637A39' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#7B61A4' },
                        { offset: 1, color: '#52416B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#4AAAC6' },
                        { offset: 1, color: '#29697B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#F79642' },
                        { offset: 1, color: '#9C5D29' }
                      ]
                    )
                  ]
                  return colorList[params.dataIndex]
                  // build a color map as your need.

                  //return colorList[params.dataIndex]
                },
                emphasis: {
                  barBorderRadius: 13,
                  shadowBlur: 18,
                  shadowColor: 'rgba(218,170, 58, 0.8)'
                }
              }
            }
          ]
        }
        option.xAxis.data = xAxisData
        option.series[0].data = seriesData
        this.leftColChart3.setOption(option, true)
      },

      /* ç»˜åˆ¶å·¦ä¾§ç¬¬å››ä¸ªå›¾è¡¨ */
      drawLeftColChart4() {
        const data = [
          {
            'number': 'A_1',
            'name': '前箱班',
            'count': 54,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_2',
            'name': '后箱班',
            'count': 55,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_3',
            'name': '80传班',
            'count': 56,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_4',
            'name': '80减班',
            'count': 57,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_5',
            'name': '托架班',
            'count': 58,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_6',
            'name': '轴承底座班',
            'count': 59,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_7',
            'name': '差速器班',
            'count': 90,
            'planCount': null,
            'rateCount': null
          }
        ]
        const xAxisData = []
        const seriesData = []
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData.push({
            value: item.count == null ? '' : item.count,
            hostType: (item.number == null ? '' : item.number)
          })
        })
        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: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              interval: 0,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  const colorList = [
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [

                        { offset: 0, color: '#4A7DBD' },
                        { offset: 1, color: '#31557B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#BD4D4A' },
                        { offset: 1, color: '#7B3031' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#94AF52' },
                        { offset: 1, color: '#637A39' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#7B61A4' },
                        { offset: 1, color: '#52416B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#4AAAC6' },
                        { offset: 1, color: '#29697B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#F79642' },
                        { offset: 1, color: '#9C5D29' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [

                        { offset: 0, color: '#4A7DBD' },
                        { offset: 1, color: '#31557B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#BD4D4A' },
                        { offset: 1, color: '#7B3031' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#94AF52' },
                        { offset: 1, color: '#637A39' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#7B61A4' },
                        { offset: 1, color: '#52416B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#4AAAC6' },
                        { offset: 1, color: '#29697B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#F79642' },
                        { offset: 1, color: '#9C5D29' }
                      ]
                    )
                  ]
                  return colorList[params.dataIndex]
                  // build a color map as your need.

                  //return colorList[params.dataIndex]
                },
                emphasis: {
                  barBorderRadius: 13,
                  shadowBlur: 18,
                  shadowColor: 'rgba(218,170, 58, 0.8)'
                }
              }
            }
          ]
        }
        option.xAxis.data = xAxisData
        option.series[0].data = seriesData
        this.leftColChart4.setOption(option, true)
      },

      /* ç»˜åˆ¶å³ä¾§ç¬¬ä¸€ä¸ªå›¾è¡¨ */
      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))
          }
        })
        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 = [
          {
            'number': 'A_1',
            'name': '东曼',
            'count': 0.94,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_2',
            'name': '西曼',
            'count': 0.93,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_3',
            'name': '东德',
            'count': 0.92,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_4',
            'name': '西德',
            'count': 0.91,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_5',
            'name': 'BW1',
            'count': 0.9,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_6',
            'name': 'BW2',
            'count': 0.89,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_7',
            'name': '森二',
            'count': 0.88,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_8',
            'name': '森一',
            'count': 0.87,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_9',
            'name': '森三',
            'count': 0.86,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_10',
            'name': '森四',
            'count': 0.85,
            'planCount': null,
            'rateCount': null
          }
        ]
        const xAxisData = []
        const seriesData = []
        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)
          })
        })
        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: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  const colorList = [
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [

                        { offset: 0, color: '#4A7DBD' },
                        { offset: 1, color: '#31557B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#BD4D4A' },
                        { offset: 1, color: '#7B3031' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#94AF52' },
                        { offset: 1, color: '#637A39' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#7B61A4' },
                        { offset: 1, color: '#52416B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#4AAAC6' },
                        { offset: 1, color: '#29697B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#F79642' },
                        { offset: 1, color: '#9C5D29' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [

                        { offset: 0, color: '#4A7DBD' },
                        { offset: 1, color: '#31557B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#BD4D4A' },
                        { offset: 1, color: '#7B3031' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#94AF52' },
                        { offset: 1, color: '#637A39' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#7B61A4' },
                        { offset: 1, color: '#52416B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#4AAAC6' },
                        { offset: 1, color: '#29697B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#F79642' },
                        { offset: 1, color: '#9C5D29' }
                      ]
                    )
                  ]
                  return colorList[params.dataIndex]
                  // build a color map as your need.

                  //return colorList[params.dataIndex]
                },
                emphasis: {
                  barBorderRadius: 13,
                  shadowBlur: 18,
                  shadowColor: 'rgba(218,170, 58, 0.8)'
                }
              }
            }
          ]
        }
        option.xAxis.data = xAxisData
        option.series[0].data = seriesData
        this.rightColChart2.setOption(option, true)
      },

      /* ç»˜åˆ¶å³ä¾§ç¬¬ä¸‰ä¸ªå›¾è¡¨ */
      drawRightColChart3() {
        const data = [
          {
            'number': 'A_1',
            'name': '东曼',
            'count': 0.94,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_2',
            'name': '西曼',
            'count': 0.93,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_3',
            'name': '东德',
            'count': 0.92,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_4',
            'name': '西德',
            'count': 0.91,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_5',
            'name': 'BW1',
            'count': 0.9,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_6',
            'name': 'BW2',
            'count': 0.89,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_7',
            'name': '森二',
            'count': 0.88,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_8',
            'name': '森一',
            'count': 0.87,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_9',
            'name': '森三',
            'count': 0.86,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_10',
            'name': '森四',
            'count': 0.85,
            'planCount': null,
            'rateCount': null
          }
        ]
        const xAxisData = []
        const seriesData = []
        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)
          })
        })
        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: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },

          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  const colorList = [
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [

                        { offset: 0, color: '#4A7DBD' },
                        { offset: 1, color: '#31557B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#BD4D4A' },
                        { offset: 1, color: '#7B3031' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#94AF52' },
                        { offset: 1, color: '#637A39' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#7B61A4' },
                        { offset: 1, color: '#52416B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#4AAAC6' },
                        { offset: 1, color: '#29697B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#F79642' },
                        { offset: 1, color: '#9C5D29' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [

                        { offset: 0, color: '#4A7DBD' },
                        { offset: 1, color: '#31557B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#BD4D4A' },
                        { offset: 1, color: '#7B3031' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#94AF52' },
                        { offset: 1, color: '#637A39' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#7B61A4' },
                        { offset: 1, color: '#52416B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#4AAAC6' },
                        { offset: 1, color: '#29697B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#F79642' },
                        { offset: 1, color: '#9C5D29' }
                      ]
                    )
                  ]
                  return colorList[params.dataIndex]
                  // build a color map as your need.

                  //return colorList[params.dataIndex]
                },
                emphasis: {
                  barBorderRadius: 13,
                  shadowBlur: 18,
                  shadowColor: 'rgba(218,170, 58, 0.8)'
                }
              }
            }
          ]
        }
        option.xAxis.data = xAxisData
        option.series[0].data = seriesData
        this.rightColChart3.setOption(option, true)
      },

      /* ç»˜åˆ¶å³ä¾§ç¬¬å››ä¸ªå›¾è¡¨ */
      drawRightColChart4() {
        const data = [
          {
            'number': 'A_1',
            'name': '07-01',
            'count': 0.887
          },
          {
            'number': 'A_2',
            'name': '07-02',
            'count': 0.885
          },
          {
            'number': 'A_3',
            'name': '07-03',
            'count': 0.885
          },
          {
            'number': 'A_4',
            'name': '07-04',
            'count': 0.884
          },
          {
            'number': 'A_5',
            'name': '07-05',
            'count': 0.783
          },
          {
            'number': 'A_6',
            'name': '07-06',
            'count': 0.882
          },
          {
            'number': 'A_7',
            'name': '07-07',
            'count': 0.881
          },
          {
            'number': 'A_8',
            'name': '07-08',
            'count': 0.88
          },
          {
            'number': 'A_9',
            'name': '07-09',
            'count': 0.779
          },
          {
            'number': 'A_10',
            'name': '07-10',
            'count': 0.808
          },
          {
            'number': 'A_11',
            'name': '07-11',
            'count': 0.887
          },
          {
            'number': 'A_12',
            'name': '07-12',
            'count': 0.885
          },
          {
            'number': 'A_13',
            'name': '07-13',
            'count': 0.885
          },
          {
            'number': 'A_14',
            'name': '07-14',
            'count': 0.884
          },
          {
            'number': 'A_15',
            'name': '07-15',
            'count': 0.783
          },
          {
            'number': 'A_16',
            'name': '07-16',
            'count': 0.882
          },
          {
            'number': 'A_17',
            'name': '07-17',
            'count': 0.881
          },
          {
            'number': 'A_18',
            'name': '07-18',
            'count': 0.88
          },
          {
            'number': 'A_19',
            'name': '07-19',
            'count': 0.779
          },
          {
            'number': 'A_20',
            'name': '07-20',
            'count': 0.808
          },
          {
            'number': 'A_21',
            'name': '07-21',
            'count': 0.887
          },
          {
            'number': 'A_22',
            'name': '07-22',
            'count': 0.885
          },
          {
            'number': 'A_23',
            'name': '07-23',
            'count': 0.885
          },
          {
            'number': 'A_24',
            'name': '07-24',
            'count': 0.884
          },
          {
            'number': 'A_25',
            'name': '07-25',
            'count': 0.783
          },
          {
            'number': 'A_26',
            'name': '07-26',
            'count': 0.882
          },
          {
            'number': 'A_27',
            'name': '07-27',
            'count': 0.881
          },
          {
            'number': 'A_28',
            'name': '07-28',
            'count': 0.88
          },
          {
            'number': 'A_29',
            'name': '07-29',
            'count': 0.779
          },
          {
            'number': 'A_30',
            'name': '07-30',
            'count': 0.808
          }
        ]
        const xAxisData = []
        const seriesData = []
        const colorList = [
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [

              { offset: 0, color: '#4A7DBD' },
              { offset: 1, color: '#31557B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#BD4D4A' },
              { offset: 1, color: '#7B3031' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#94AF52' },
              { offset: 1, color: '#637A39' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#7B61A4' },
              { offset: 1, color: '#52416B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#4AAAC6' },
              { offset: 1, color: '#29697B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#F79642' },
              { offset: 1, color: '#9C5D29' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [

              { offset: 0, color: '#4A7DBD' },
              { offset: 1, color: '#31557B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#BD4D4A' },
              { offset: 1, color: '#7B3031' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#94AF52' },
              { offset: 1, color: '#637A39' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#7B61A4' },
              { offset: 1, color: '#52416B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#4AAAC6' },
              { offset: 1, color: '#29697B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#F79642' },
              { offset: 1, color: '#9C5D29' }
            ]
          )
        ]
        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)
          })
        })
        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: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              margin: 15,
              fontSize: '55%',
              interval: 1
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },
          dataZoom: [
            {
              show: false,
              startValue: 0, // ä»Žå¤´å¼€å§‹ã€‚
              endValue: 9 // ä¸€æ¬¡æ€§å±•ç¤ºå‡ ä¸ª
            }
          ],
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: 12,
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  return colorList[params.dataIndex]
                  // build a color map as your need.

                  //return colorList[params.dataIndex]
                },
                emphasis: {
                  barBorderRadius: 13,
                  shadowBlur: 18,
                  shadowColor: 'rgba(218,170, 58, 0.8)'
                }
              }
            }
          ]
        }
        option.xAxis.data = xAxisData
        option.series[0].data = seriesData
        this.rightColChart4.setOption(option, true)

        this.rightColChart4CarouselTime = setInterval(() => {
          xAxisData.push(xAxisData.shift())
          seriesData.push(seriesData.shift())
          colorList.push(colorList.shift())
          this.$nextTick(() => {
            this.rightColChart4.setOption(option, true)
          })
        }, 3000)
      },

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

      navigateTo(record) {
        const url = this.$router.resolve(`/SubControlWorkshopSignage/${record.id}`).href
        window.open(url, '_blank')
      },

      /**
       * çª—口尺寸变化时触发
       * è°ƒæ•´å›¾è¡¨å°ºå¯¸ä»¥é€‚应分辨率
       */
      handleWindowResize() {
        // æŽ§åˆ¶æµè§ˆå™¨ç¼©æ”¾åŠŸèƒ½ï¼Œä½¿åŠŸèƒ½è°ƒæ•´çš„分辨率仅朝着图表最合适分辨率靠近
        if (this.firstEnterDevicePixelRatio > 1 && ((window.devicePixelRatio > this.firstEnterDevicePixelRatio) || window.devicePixelRatio < 1)) return
        if (this.firstEnterDevicePixelRatio < 1 && ((window.devicePixelRatio < this.firstEnterDevicePixelRatio) || window.devicePixelRatio > 1)) return
        if (this.firstEnterDevicePixelRatio > 1 && this.currentDevicePixelRatio && window.devicePixelRatio > this.currentDevicePixelRatio) return
        if (this.firstEnterDevicePixelRatio < 1 && this.currentDevicePixelRatio && window.devicePixelRatio < this.currentDevicePixelRatio) return
        if (this.firstEnterDevicePixelRatio === 1) return
        if (this.currentDevicePixelRatio === 1) return

        if (this.leftColChart1) this.leftColChart1.resize()
        if (this.leftColChart2) this.leftColChart2.resize()
        if (this.leftColChart3) this.leftColChart3.resize()
        if (this.leftColChart4) this.leftColChart4.resize()
        if (this.rightColChart1) this.rightColChart1.resize()
        if (this.rightColChart2) this.rightColChart2.resize()
        if (this.rightColChart3) this.rightColChart3.resize()
        if (this.rightColChart4) this.rightColChart4.resize()

        this.currentDevicePixelRatio = window.devicePixelRatio
      }
    }
  }
</script>

<style lang="less" scoped>
  .full-screen {
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: '微软雅黑';
    cursor: default;

    .container {
      width: 99%;
      height: 99%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .middle-col {
        position: relative;
        width: 55%;
        height: 100%;
        /*border: 0.1vw solid #0104AB;*/
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .page-title {
          color: #fff;
          font-weight: bold;
          font-size: 3.5vw;
          text-align: center;

          img {
            position: absolute;
            width: 12%;
            left: 12%;
          }
        }

        .workshop-bg {
          position: relative;
          height: 60%;
          background-image: url("../../../assets/yt_background.jpg");
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .navigate-container {
            color: #FFDEB7;
            font-size: 0.9vw;
            position: absolute;

            .navigate-item {
              display: flex;
              margin-bottom: 0.4vw;
              cursor: pointer;

              .navigate-item-index {
                padding: 0.3vw 0.4vw;
              }

              .navigate-item-label {
                padding: 0.3vw 0.4vw;
                margin-left: 0.4vw;
                flex: 1;
              }
            }
          }
        }

        .switch-container {
          display: flex;
          justify-content: center;

          .switch-item {
            font-size: 1.5vw;
            padding: 1.3vw 0;
            flex: 1;
            text-align: center;
            cursor: pointer;
          }
        }
      }

      .left-col, .right-col {
        width: 22%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

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

          .content-title {
            font-size: 1vw;
            color: #ABA778;
          }

          .chart-container {
            flex: 1;

            /deep/ div:first-child {
              width: 100% !important;
              height: 100% !important;
            }

            /deep/ canvas {
              width: 100% !important;
              height: 100% !important;
            }
          }
        }
      }
    }
  }
</style>

 src/views/mdc/base/SignageEntrance.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,50 @@
<template>
  <div class="page-container">
    <button @click="navigateToWorkshopSignage">跳转</button>
  </div>
</template>

<script>

  export default {
    name: 'SignageEntrance',
    data() {
      return {

      }
    },
    created() {
      this.getWorkshopListByApi()
    },
    methods: {
      /**
       * é€šè¿‡è½¦é—´Id跳转至相应车间大屏看板
       * @param id è½¦é—´Id
       */
      navigateToWorkshopSignage(id) {
        const url = this.$router.resolve(`/MasterControlWorkshopSignage`).href
        window.open(url, '_blank')
      },
    }
  }
</script>

<style lang="less" scoped>
  .page-container {
    padding: 30px 30px 0;

    .workshop-name {
      width: 100%;
      background: #fff;
      padding: 55px 0;
      border-radius: 20px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 30px;
      cursor: pointer;
    }
  }

</style>

 src/views/mdc/base/SubControlWorkshopSignage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,455 @@
<template>
  <div class="full-screen">

    <div class="page-title">
      <div style="margin-right: 10vw">{{$route.params.id}}#</div>
      <div>{{getSubControlSignageName}}</div>
    </div>

    <table class="plan-table">
      <thead>
      <tr style="position: relative">
        <td colspan="17">
          <span style="position: absolute;left: 10%">
            <span class="current-date">{{getCurrentYear}}</span>å¹´
            <span class="current-date">{{getCurrentMonth}}</span>月
            <span class="current-date">{{getCurrentDay}}</span>日
          </span>
          <span>当日生产计划</span>
          <span style="position: absolute;right:40%;color: #f00">{{getTotalPlanQuantity}}</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">机床ID</td>
        <td colspan="2">名称</td>
        <td colspan="2">零件号</td>
        <td colspan="2">零件名称</td>
        <td>计划量</td>
        <td>完成量</td>
        <td>合格量</td>
        <td>合格率</td>
        <td colspan="2">工序号</td>
        <td colspan="2">工单号</td>
        <td>班组</td>
      </tr>
      </thead>

      <tbody>
      <tr v-for="(item,index) in todayProductionPlanList" :key="index">
        <td colspan="2">{{item.machineId}}</td>
        <td colspan="2">{{item.productionName}}</td>
        <a-tooltip :destroyTooltipOnHide="true" placement="topRight" @mouseenter="mouseEnterItem">
          <template slot="title">
            <span style="font-size: 1vw">{{item.partCode}}</span>
          </template>
          <td colspan="2">{{item.partCode}}</td>
        </a-tooltip>
        <td colspan="2">{{item.partName}}</td>
        <td>{{item.planQuantity}}</td>
        <td>{{item.finishedQuantity}}</td>
        <td>{{item.qualifiedQuantity}}</td>
        <td>{{item.finishedQuantity?(item.qualifiedQuantity/item.finishedQuantity)*100+'%':''}}</td>
        <td colspan="2">{{item.processNum}}</td>
        <td colspan="2">{{item.orderNum}}</td>
        <td>{{item.groupName}}</td>
      </tr>
      </tbody>
    </table>

    <div class="line-bg"></div>

    <div class="bottom-container">

      <div class="alarm-container">
        <div class="alarm-title">报警信息</div>
        <div class="alarm-content"></div>
      </div>

      <table class="manage-table">
        <tr class="table-head">
          <td rowspan="9" style="width: 3vw">
            <div class="table-title">刀具寿命管理</div>
          </td>
          <td></td>
          <td v-for="(item,index) in toolLife.brandList" :key="index" colspan="2">{{item}}</td>
        </tr>

        <template v-for="(listItem,listIndex) in toolLife.lifeList">
          <tr>
            <td style="width: 7vw">额定寿命</td>
            <template v-for="(item,index) in listItem">
              <td rowspan="2" style="width: 2.5vw">{{item.period}}</td>
              <td style="width: 5vw">{{item.ratedLife}}</td>
            </template>
          </tr>

          <tr>
            <td>当前寿命</td>
            <template v-for="(item,index) in listItem">
              <td :style="{backgroundColor:getToolCurrentLifeDataBgColor(item)}">{{item.currentLife}}</td>
            </template>
          </tr>
        </template>
      </table>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'SubControlWorkshopSignage',
    components: {},
    data() {
      return {
        todayProductionPlanList: [
          {
            machineId: '5899-8060',
            productionName: '桁架',
            partCode: '1204-1.38d.185-1-5351-SD',
            partName: '后传动箱壳体',
            planQuantity: 9,
            finishedQuantity: 7,
            qualifiedQuantity: 7,
            processNum: '35',
            orderNum: '2407093503002',
            groupName: '80箱体班'
          },
          {
            machineId: '5899-8060',
            productionName: '桁架',
            partCode: 'LY1104-3-38C-105',
            partName: '传动箱壳体',
            planQuantity: 21,
            finishedQuantity: 13,
            qualifiedQuantity: 13,
            processNum: '35',
            orderNum: '2407093503003',
            groupName: '80箱体班'
          },
          {
            machineId: '5899-8060',
            productionName: '桁架',
            partCode: '1204-1.38D.185-1',
            partName: '后传动箱壳体',
            planQuantity: 9,
            finishedQuantity: 0,
            qualifiedQuantity: 0,
            processNum: '35',
            orderNum: '2407103501002',
            groupName: '80箱体班'
          }
        ],
        toolLife: {
          brandList: ['北齐二', '铱 é•', '森 äº”', '东 æ›¼', '西 æ›¼', '西 å¾·', '东 å¾·'],
          lifeList: [
            [
              {
                period: 'T3',
                ratedLife: 987,
                currentLife: 976
              },
              {
                period: 'T3',
                ratedLife: 999,
                currentLife: 864
              },
              {
                period: 'T5',
                ratedLife: 879,
                currentLife: 657
              },
              {
                period: 'T10',
                ratedLife: 984,
                currentLife: 795
              },
              {
                period: 'T7',
                ratedLife: 954,
                currentLife: 756
              },
              {
                period: 'T4',
                ratedLife: 1080,
                currentLife: 785
              },
              {
                period: 'T7',
                ratedLife: 1504,
                currentLife: 1274
              }
            ],
            [
              {
                period: 'T1',
                ratedLife: 786,
                currentLife: 686
              },
              {
                period: 'T1',
                ratedLife: 934,
                currentLife: 854
              },
              {
                period: 'T8',
                ratedLife: 799,
                currentLife: 486
              },
              {
                period: 'T2',
                ratedLife: 982,
                currentLife: 765
              },
              {
                period: 'T4',
                ratedLife: 982,
                currentLife: 752
              },
              {
                period: 'T8',
                ratedLife: 1020,
                currentLife: 580
              },
              {
                period: 'T8',
                ratedLife: 1086,
                currentLife: 1075
              }
            ],
            [
              {
                period: 'T2',
                ratedLife: 654,
                currentLife: 465
              },
              {
                period: 'T5',
                ratedLife: 1087,
                currentLife: 796
              },
              {
                period: 'T4',
                ratedLife: 764,
                currentLife: 423
              },
              {
                period: 'T3',
                ratedLife: 1090,
                currentLife: 756
              },
              {
                period: 'T8',
                ratedLife: 954,
                currentLife: 513
              },
              {
                period: 'T2',
                ratedLife: 775,
                currentLife: 575
              },
              {
                period: 'T5',
                ratedLife: 1216,
                currentLife: 752
              }
            ],
            [
              {
                period: 'T6',
                ratedLife: 756,
                currentLife: 355
              },
              {
                period: 'T9',
                ratedLife: 984,
                currentLife: 763
              },
              {
                period: 'T3',
                ratedLife: 385,
                currentLife: 264
              },
              {
                period: 'T4',
                ratedLife: 952,
                currentLife: 752
              },
              {
                period: 'T3',
                ratedLife: 454,
                currentLife: 246
              },
              {
                period: 'T9',
                ratedLife: 635,
                currentLife: 255
              },
              {
                period: 'T9',
                ratedLife: 1300,
                currentLife: 670
              }
            ]
          ]
        }
      }
    },
    computed: {
      getSubControlSignageName() {
        let subControlSignageName = ''
        switch (+this.$route.params.id) {
          case 1:
            subControlSignageName = '1024后箱加工线'
            break
          case 2:
            subControlSignageName = '1024前箱加工线'
            break
          case 3:
            subControlSignageName = '前托架加工线'
            break
          case 4:
            subControlSignageName = '80传动壳加工线'
            break
          case 5:
            subControlSignageName = '80减速器壳体加工线'
            break
          case 6:
            subControlSignageName = '箱体加工线'
            break
          case 7:
            subControlSignageName = '差速器轴承座加工线'
            break
          case 8:
            subControlSignageName = '制动器活塞加工线'
            break
          case 9:
            subControlSignageName = '中小件加工线'
            break
        }
        return subControlSignageName
      },
      getCurrentYear() {
        return moment().format('YYYY')
      },
      getCurrentMonth() {
        return moment().format('MM')
      },
      getCurrentDay() {
        return moment().format('DD')
      },
      getTotalPlanQuantity() {
        return this.todayProductionPlanList.reduce((sum, item) => sum + item.planQuantity, 0)
      }
    },
    methods: {
      getToolCurrentLifeDataBgColor(record) {
        if (record.currentLife / record.ratedLife > 0.8) {
          return '#FF9A10'
        } else {
          return '#218A21'
        }
      },

      mouseEnterItem(e) {
        if (e.target.clientWidth >= e.target.scrollWidth) {
          e.target.style.pointerEvents = 'none' // é˜»æ­¢é¼ æ ‡äº‹ä»¶    pointer-events å±žæ€§ç”¨äºŽè®¾ç½®å…ƒç´ æ˜¯å¦å¯¹é¼ æ ‡äº‹ä»¶åšå‡ºååº”。
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .full-screen {
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
    font-weight: lighter;
    padding: 0 1vw 0.5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: default;

    table {
      td {
        border: 0.1vw solid #fff;
      }
    }

    .page-title {
      display: flex;
      justify-content: center;
      font-size: 2.5vw;
    }

    .plan-table {
      width: 100%;
      font-size: 1.2vw;
      table-layout: fixed;

      td {
        height: 2.2vw;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        .current-date {
          color: #f00;
          display: inline-block;
          margin: 0 2vw;
        }
      }
    }

    .line-bg {
      height: 30%;
      background-image: url("../../../assets/1 Line.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .bottom-container {
      flex: 1;
      display: flex;
      justify-content: space-between;

      .alarm-container {
        width: 35%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .alarm-title {
          font-size: 1.2vw;
          background-color: #639AFF;
        }
        .alarm-content {
          flex: 1;
          background-color: #8C8A8C;
        }
      }

      .manage-table {
        width: 64%;
        font-size: 1vw;
        text-align: center;

        .table-head {
          height: 3vw;
          background-color: #639AFF;

          .table-title {
            writing-mode: vertical-lr;
            font-size: 1.8vw;
          }
        }
      }

    }
  }
</style>

 src/views/mdc/base/modules/EquipCurrentLoadContrastReport/EquipCurrentLoadContrastReportList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,370 @@
<template>
  <div class="deviceCalendar_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24" style="width: 100%">
            <a-col :md="4" :sm="4">
              <a-form-item label="è½´">
                <a-select v-model="queryParam.axistype" placeholder="请选择对应轴" allow-clear>
                  <a-select-option v-for="(item,index) in axisList" :key="index" :value="item.name">{{item.value}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="4">
              <a-form-item label="开始时间">
                <a-date-picker @change="startTimeParamChange" v-model="startDate" :allowClear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="4">
              <a-form-item label="结束时间">
                <a-date-picker @change="endTimeParamChange" v-model="endDate" :allowClear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="2" :xs="2">
              <a-space>
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>

    <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList"></div>
  </div>
</template>

<script>
  import moment from 'moment'
  import { putAction, getAction } from '@/api/manage'
  import mdc from '@/api/mdc'

  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'

  export default {
    name: 'EquipCurrentLoadContrastReportList',
    components: {},
    mixins: [JeecgListMixin],
    data() {
      return {
        disableMixinCreated: true,
        startDate: null,
        endDate: null,
        axisList: [
          {
            name: 1,
            value: 'X'
          },
          {
            name: 2,
            value: 'Y'
          },
          {
            name: 3,
            value: 'Z'
          },
          {
            name: 4,
            value: 'A'
          },
          {
            name: 5,
            value: 'B'
          }
        ],
        queryParam: {},
        lineChart: '',
        lineChartData: []
      }
    },
    props: { node: {}, Type: '' },
    created() {
      this.searchReset()
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.handleWindowResize()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    watch: {
      Type(valmath) {
        this.dataList = []
        this.queryParam.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
      node(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId != null) {
            this.queryParam.equipmentId = val.equipmentId
            this.queryParam.parentId = ' '
            this.ipagination.current = 1
            this.getChartDataByApi()
          } else {
            this.lineChartData = []
            this.drawLineChart()
            this.$notification.info({
              message: '消息',
              description: '请选择具体设备'
            })
          }
        }
      }
    },
    methods: {
      startTimeParamChange(v1, v2) {
        this.queryParam.startDate = v2
      },
      endTimeParamChange(v1, v2) {
        this.queryParam.endDate = v2
      },
      searchQuery() {
        this.getChartDataByApi()
      },
      searchReset() {
        this.startDate = moment().subtract('day', 7)
        this.endDate = moment().subtract('day', 1)
        this.queryParam = {
          startDate: this.startDate.format('YYYY-MM-DD'),
          endDate: this.endDate.format('YYYY-MM-DD')
        }
        this.getChartDataByApi()
      },

      getChartDataByApi() {
        const params = Object.assign({}, this.queryParam)

        mdc.getEquipCurrentLoadContrastChartDataApi(params)
          .then(res => {
            console.log('res', res)
            if (res.success) {
              this.lineChartData = res.result
              if (!this.lineChartData || this.lineChartData.length === 0) {
                this.$notification.info({
                  message: '消息',
                  description: '无数据'
                })
              }
            } else {
              this.$notification.warning({
                message: '消息',
                description: res.message
              })
            }
            this.drawLineChart()
          })

      },

      drawLineChart() {
        this.lineChart = this.$echarts.init(document.getElementById('DeviceList'))
        const newData = {
          xAxis: this.lineChartData.map(item => item.dayDate),
          yAxis: [
            {
              name: '电流',
              value: this.lineChartData.map(item => item.electricvalue)
            },
            {
              name: '负载',
              value: this.lineChartData.map(item => item.spindleload)
            }
          ],
          yAxisName: '设备电流负载对比'
        }
        let legendData = []
        let seriesData = []
        let colorArr = ['#4DC7C9', '#A5F10D', '#09B3F6']
        legendData = newData.yAxis.map((item) => item.name)
        seriesData = newData.yAxis.map((item1, index1) => {
          return {
            name: item1.name,
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: colorArr[index1]
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'inherit'
              }
            },
            lineStyle: {
              width: 2
            },
            yAxisIndex: 1,
            data: item1.value // æŠ˜çº¿å›¾çš„数据
          }
        })
        const option = {
          grid: {
            containLabel: true,
            bottom: '1%',
            top: '1%',
            left: '1%',
            right: '1%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(params) {
              let result = ''
              params.forEach((item, index) => {
                let dom = `<span style="display:inline-block;width:10px;height:10px;border-radius:100px;margin-right:5px;background:${item.color}"></span>${item.seriesName}：${item.value}%`
                if (index === 0) {
                  result = `<span style="font-weight:bolder;">${item.name}</span>`
                }
                result += '<br />' + dom
              })
              return result
            }
          },
          legend: {
            top: 'top',
            right: 20,
            data: legendData,
            itemGap: 10,
            textStyle: {
              fontSize: 14,
              color: '#000'
            }
          },
          xAxis: {
            triggerEvent: true,
            data: newData.xAxis || [],
            axisLabel: {
              interval: 0,
              show: true,
              fontSize: 14,
              color: '#1B93CD'
              // rotate: -30,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#1B93CD'
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: [
            {
              name: newData.yAxisName,
              nameTextStyle: {
                color: '#1AD8DE',
                fontSize: 18,
                padding: [0, 0, 0, 120]
              },
              nameGap: 25,
              type: 'value',
              position: 'left',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#000'
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#000'
                }
              }
            },
            {
              type: 'value',
              position: 'left',
              splitNumber: 5,
              max: 100,
              axisLabel: {
                show: true,
                color: '#1B93CD',
                fontSize: 14
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#1B93CD'
                }
              },
              axisTick: {
                show: true
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#1B93CD'
                }
              }
            }
          ],
          series: seriesData
        }
        this.lineChart.setOption(option, true)
      },

      handleWindowResize() {
        if (this.lineChart) this.lineChart.resize()
      }
    }
  }
</script>
<style scoped>
  .deviceCalendar_list {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .deviceCalendar_list {
      height: 664px !important;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }

  @media screen and (max-width: 1280px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }

  .ant-table-striped /deep/ .table-striped td {
    background-color: #fafafa;
  }
</style>

 src/views/mdc/base/modules/EquipmentAlarmNumberRetrieval/EquipmentAlarmNumberRetrievalList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,272 @@
<template>
  <div class="deviceCalendar_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24" style="width: 100%">
            <a-col :md="5" :sm="5">
              <a-form-item label="报警号">
                <a-input v-model="queryParam.alarmNo" placeholder="请输入报警号"/>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="5">
              <a-form-item label="开始时间">
                <a-date-picker show-time @change="startTimeParamChange" v-model="startTime" :allowClear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="5">
              <a-form-item label="结束时间">
                <a-date-picker show-time @change="endTimeParamChange" v-model="endTime" :allowClear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="2" :xs="2">
              <a-space>
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
                <a-button type="primary" icon="download" @click="handleExportXls('设备报警号检索报表')">导出</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>

    <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList">
      <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
               size="middle" rowKey="rowIndex" :columns="columns"
               @change="handleTableChange" class="ant-table-striped"
               :dataSource="dataSource" :pagination="ipagination"
               :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"/>

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

<script>
  import moment from 'moment'
  import { putAction, getAction } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'

  export default {
    name: 'EquipmentAlarmNumberRetrievalList',
    components: {},
    mixins: [JeecgListMixin],
    data() {
      return {
        disableMixinCreated: true,
        startTime: null,
        endTime: null,
        queryParam: {},
        scrollY: 465,
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId',
            width: 150
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentName',
            width: 150
          },
          {
            title: '日期',
            align: 'center',
            dataIndex: 'collecttime',
            width: 150
          },
          {
            title: '报警编号',
            align: 'center',
            dataIndex: 'alarmNo',
            width: 150
          },
          {
            title: '报警描述',
            align: 'center',
            dataIndex: 'alarmContent',
            width: 500
          }
        ],
        dataList: [],
        url: {
          list: '/mdc/equipmentAlarm/list',
          exportXlsUrl: '/mdc/equipmentAlarm/exportXls'
        }
      }
    },
    props: { node: {}, Type: '' },
    created() {
      this.startTime = moment().startOf('day')
      this.endTime = moment()
      this.queryParam.startTime = this.startTime.format('YYYY-MM-DD HH:mm:ss')
      this.queryParam.endTime = this.endTime.format('YYYY-MM-DD HH:mm:ss')
      this.queryParam.typeTree = '1'
      this.loadData()
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.handleWindowResize()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    watch: {
      Type(valmath) {
        this.dataList = []
        this.queryParam.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
      node(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId != null) {
            this.queryParam.equipmentId = val.equipmentId
            this.queryParam.parentId = ' '
            this.ipagination.current = 1
            this.loadData()
          } else {
            this.queryParam.parentId = val.key
            this.queryParam.equipmentId = null
            this.ipagination.current = 1
            this.loadData()
          }
        }
      }
    },
    methods: {
      startTimeParamChange(v1, v2) {
        this.queryParam.startTime = v2
      },
      endTimeParamChange(v1, v2) {
        this.queryParam.endTime = v2
      },
      searchQuery() {
        const dateDiff = this.endTime.diff(this.startTime, 'day')
        if (dateDiff <= 7) {
          this.loadData()
        } else {
          this.$notification.info({
            message: '消息',
            description: '最多只能选择7天'
          })
        }
      },
      searchReset() {
        this.startTime = moment().startOf('day')
        this.endTime = moment()
        this.queryParam = {
          startTime: this.startTime.format('YYYY-MM-DD HH:mm:ss'),
          endTime: this.endTime.format('YYYY-MM-DD HH:mm:ss')
        }
        this.loadData()
      },
      loadData(arg) {
        this.dataSource = []
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }

        var params = this.getQueryParams()//查询条件

        if (!params) {
          return false
        }
        params.typeTree = '1'
        params.startTime = this.queryParam.startTime
        params.endTime = this.queryParam.endTime
        params.parentId = this.queryParam.parentId
        params.equipmentId = this.queryParam.equipmentId
        params.orderByName = 'ascend'
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            // console.log(res)
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------

            this.dataSource = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$notification.warning({
              message: '消息',
              description:res.message
            })
          }
        }).finally(() => {
          this.loading = false
        })
      },

      handleWindowResize() {
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0, -2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2)
        this.scrollY = boxHeight - tableHeadHeight - 50
      }
    }
  }
</script>
<style scoped>
  .deviceCalendar_list {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .deviceCalendar_list {
      height: 664px !important;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }

  @media screen and (max-width: 1280px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }

  .ant-table-striped /deep/ .table-striped td {
    background-color: #fafafa;
  }
</style>

 src/views/mdc/base/modules/EquipmentAlarmRetrieval/EquipmentAlarmRetrievalList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,267 @@
<template>
  <div class="deviceCalendar_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24" style="width: 100%">
            <a-col :md="5" :sm="5">
              <a-form-item label="开始时间">
                <a-date-picker show-time @change="startTimeParamChange" v-model="startTime" :allowClear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="5">
              <a-form-item label="结束时间">
                <a-date-picker show-time @change="endTimeParamChange" v-model="endTime" :allowClear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="2" :xs="2">
              <a-space>
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
                <a-button type="primary" icon="download" @click="handleExportXls('设备报警检索报表')">导出</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>

    <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList">
      <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
               size="middle" rowKey="rowIndex" :columns="columns"
               @change="handleTableChange" class="ant-table-striped"
               :dataSource="dataSource" :pagination="ipagination"
               :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"/>

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

<script>
  import moment from 'moment'
  import { putAction, getAction } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'

  export default {
    name: 'EquipmentAlarmRetrievalList',
    components: {},
    mixins: [JeecgListMixin],
    data() {
      return {
        disableMixinCreated: true,
        startTime: null,
        endTime: null,
        queryParam: {},
        scrollY: 465,
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId',
            width: 150
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentName',
            width: 150
          },
          {
            title: '日期',
            align: 'center',
            dataIndex: 'collecttime',
            width: 150
          },
          {
            title: '报警编号',
            align: 'center',
            dataIndex: 'alarmNo',
            width: 150
          },
          {
            title: '报警描述',
            align: 'center',
            dataIndex: 'alarmContent',
            width: 500
          }
        ],
        dataList: [],
        url: {
          list: '/mdc/equipmentAlarm/list',
          exportXlsUrl: '/mdc/equipmentAlarm/exportXls'
        }
      }
    },
    props: { node: {}, Type: '' },
    created() {
      this.startTime = moment().startOf('day')
      this.endTime = moment()
      this.queryParam.startTime = this.startTime.format('YYYY-MM-DD HH:mm:ss')
      this.queryParam.endTime = this.endTime.format('YYYY-MM-DD HH:mm:ss')
      this.queryParam.typeTree = '1'
      this.loadData()
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.handleWindowResize()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    watch: {
      Type(valmath) {
        this.dataList = []
        this.queryParam.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
      node(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId != null) {
            this.queryParam.equipmentId = val.equipmentId
            this.queryParam.parentId = ' '
            this.ipagination.current = 1
            this.loadData()
          } else {
            this.queryParam.parentId = val.key
            this.queryParam.equipmentId = null
            this.ipagination.current = 1
            this.loadData()
          }
        }
      }
    },
    methods: {
      startTimeParamChange(v1, v2) {
        this.queryParam.startTime = v2
      },
      endTimeParamChange(v1, v2) {
        this.queryParam.endTime = v2
      },
      searchQuery() {
        const dateDiff = this.endTime.diff(this.startTime, 'day')
        if (dateDiff <= 7) {
          this.loadData()
        } else {
          this.$notification.info({
            message: '消息',
            description: '最多只能选择7天'
          })
        }
      },
      searchReset() {
        this.startTime = moment().startOf('day')
        this.endTime = moment()
        this.queryParam = {
          startTime: this.startTime.format('YYYY-MM-DD HH:mm:ss'),
          endTime: this.endTime.format('YYYY-MM-DD HH:mm:ss')
        }
        this.loadData()
      },
      loadData(arg) {
        this.dataSource = []
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }

        var params = this.getQueryParams()//查询条件

        if (!params) {
          return false
        }
        params.typeTree = '1'
        params.startTime = this.queryParam.startTime
        params.endTime = this.queryParam.endTime
        params.parentId = this.queryParam.parentId
        params.equipmentId = this.queryParam.equipmentId
        params.orderByName = 'ascend'
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            // console.log(res)
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------

            this.dataSource = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$notification.warning({
              message: '消息',
              description:res.message
            })
          }
        }).finally(() => {
          this.loading = false
        })
      },

      handleWindowResize() {
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0, -2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2)
        this.scrollY = boxHeight - tableHeadHeight - 50
      }
    }
  }
</script>
<style scoped>
  .deviceCalendar_list {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .deviceCalendar_list {
      height: 664px !important;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }

  @media screen and (max-width: 1280px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }

  .ant-table-striped /deep/ .table-striped td {
    background-color: #fafafa;
  }
</style>

 src/views/mdc/base/modules/EquipmentAlarmSort/EquipmentAlarmSortList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,269 @@
<template>
  <div class="deviceCalendar_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24" style="width: 100%">
            <a-col :md="5" :sm="5">
              <a-form-item label="开始时间">
                <a-date-picker show-time @change="startTimeParamChange" v-model="startTime" :allowClear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="5">
              <a-form-item label="结束时间">
                <a-date-picker show-time @change="endTimeParamChange" v-model="endTime" :allowClear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="2" :xs="2">
              <a-space>
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
                <a-button type="primary" icon="download" @click="handleExportXls('设备报警排序报表')">导出</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>

    <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList">
      <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
               size="middle" rowKey="rowIndex" :columns="columns"
               @change="handleTableChange" class="ant-table-striped"
               :dataSource="dataSource" :pagination="ipagination"
               :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"/>

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

<script>
  import moment from 'moment'
  import { putAction, getAction } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'

  export default {
    name: 'EquipmentAlarmSortList',
    components: {},
    mixins: [JeecgListMixin],
    data() {
      return {
        disableMixinCreated: true,
        startTime: null,
        endTime: null,
        queryParam: {},
        scrollY: 465,
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId',
            width: 150
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentName',
            width: 150
          },
          {
            title: '日期',
            align: 'center',
            dataIndex: 'collecttime',
            width: 150
          },
          {
            title: '报警编号',
            align: 'center',
            dataIndex: 'alarmNo',
            width: 150
          },
          {
            title: '报警描述',
            align: 'center',
            dataIndex: 'alarmContent',
            width: 500
          }
        ],
        dataList: [],
        url: {
          list: '/mdc/equipmentAlarm/list',
          exportXlsUrl: '/mdc/equipmentAlarm/exportXls'
        }
      }
    },
    props: { node: {}, Type: '' },
    created() {
      this.startTime = moment().startOf('day')
      this.endTime = moment()
      this.queryParam.startTime = this.startTime.format('YYYY-MM-DD HH:mm:ss')
      this.queryParam.endTime = this.endTime.format('YYYY-MM-DD HH:mm:ss')
      this.queryParam.typeTree = '1'
      this.loadData()
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.handleWindowResize()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    watch: {
      Type(valmath) {
        this.dataList = []
        this.queryParam.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
      node(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId != null) {
            this.queryParam.equipmentId = val.equipmentId
            this.queryParam.parentId = ' '
            this.ipagination.current = 1
            this.loadData()
          } else {
            this.queryParam.parentId = val.key
            this.queryParam.equipmentId = null
            this.ipagination.current = 1
            this.loadData()
          }
        }
      }
    },
    methods: {
      startTimeParamChange(v1, v2) {
        this.queryParam.startTime = v2
      },
      endTimeParamChange(v1, v2) {
        this.queryParam.endTime = v2
      },
      searchQuery() {
        const dateDiff = this.endTime.diff(this.startTime, 'day')
        if (dateDiff <= 7) {
          this.loadData()
        } else {
          this.$notification.info({
            message: '消息',
            description: '最多只能选择7天'
          })
        }
      },
      searchReset() {
        this.startTime = moment().startOf('day')
        this.endTime = moment()
        this.queryParam = {
          startTime: this.startTime.format('YYYY-MM-DD HH:mm:ss'),
          endTime: this.endTime.format('YYYY-MM-DD HH:mm:ss'),
          sortFlag: true
        }
        this.loadData()
      },
      loadData(arg) {
        this.dataSource = []
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }

        var params = this.getQueryParams()//查询条件

        if (!params) {
          return false
        }
        params.typeTree = '1'
        params.startTime = this.queryParam.startTime
        params.endTime = this.queryParam.endTime
        params.parentId = this.queryParam.parentId
        params.equipmentId = this.queryParam.equipmentId
        params.orderByName = 'ascend'
        params.sortFlag = true
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            // console.log(res)
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------

            this.dataSource = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$notification.warning({
              message: '消息',
              description:res.message
            })
          }
        }).finally(() => {
          this.loading = false
        })
      },

      handleWindowResize() {
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0, -2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2)
        this.scrollY = boxHeight - tableHeadHeight - 50
      }
    }
  }
</script>
<style scoped>
  .deviceCalendar_list {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .deviceCalendar_list {
      height: 664px !important;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }

  @media screen and (max-width: 1280px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }

  .ant-table-striped /deep/ .table-striped td {
    background-color: #fafafa;
  }
</style>

 src/views/mdc/base/modules/EquipmentCurrentReport/EquipmentCurrentReportList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,295 @@
<template>
  <div class="deviceCalendar_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24" style="width: 100%">
            <a-col :md="4" :sm="4">
              <a-form-item label="è½´">
                <a-select v-model="queryParam.axistype" placeholder="请选择对应轴" allow-clear>
                  <a-select-option v-for="(item,index) in axisList" :key="index" :value="item.name">{{item.value}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="4">
              <a-form-item label="日期">
                <a-date-picker @change="dateParamChange" v-model="createDate" :disabledDate="disabledDate"
                               :allowClear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="2" :xs="2">
              <a-space>
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
                <a-button type="primary" icon="download" @click="handleExportXls('设备电流报表')">导出</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>

    <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList">
      <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
               size="middle" rowKey="id" :columns="columns"
               @change="handleTableChange" class="ant-table-striped"
               :dataSource="dataSource" :pagination="ipagination"
               :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
        <template slot="axistype" slot-scope="text, record">
          {{getAxisNameByType(record.axistype)}}
        </template>
      </a-table>

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

<script>
  import moment from 'moment'
  import { putAction, getAction } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'

  export default {
    name: 'EquipmentCurrentReportList',
    components: {},
    mixins: [JeecgListMixin],
    data() {
      return {
        disableMixinCreated: true,
        createDate: null,
        axisList: [
          {
            'name': 1,
            'value': 'X'
          },
          {
            'name': 2,
            'value': 'Y'
          },
          {
            'name': 3,
            'value': 'Z'
          },
          {
            'name': 4,
            'value': 'A'
          },
          {
            'name': 5,
            'value': 'B'
          }
        ],
        queryParam: {},
        scrollY: 465,
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentname',
            width: 150
          },
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentid',
            width: 150
          },
          {
            title: 'è½´',
            align: 'center',
            dataIndex: 'axistype',
            width: 150,
            scopedSlots: { customRender: 'axistype' }
          },
          {
            title: '最大电流',
            align: 'center',
            dataIndex: 'electricvalue',
            width: 150
          },
          {
            title: '坐标值',
            align: 'center',
            dataIndex: 'axisvalue',
            width: 150
          },
          {
            title: '主轴转速',
            align: 'center',
            dataIndex: 'spindlespeed',
            width: 150
          },
          {
            title: '时间',
            align: 'center',
            dataIndex: 'createdate',
            width: 150
          }
        ],
        dataList: [],
        url: {
          list: '/mdc/equipmentElectricStatistical/list',
          exportXlsUrl: '/mdc/equipmentElectricStatistical/exportXls'
        }
      }
    },
    props: { node: {}, Type: '' },
    created() {
      this.searchReset()
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.handleWindowResize()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    watch: {
      Type(valmath) {
        this.dataList = []
        this.queryParam.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
      node(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId != null) {
            this.queryParam.equipmentId = val.equipmentId
            this.queryParam.parentId = ' '
            this.ipagination.current = 1
            this.loadData()
          } else {
            this.queryParam.parentId = val.key
            this.queryParam.equipmentId = null
            this.ipagination.current = 1
            this.loadData()
          }
        }
      }
    },
    methods: {
      getAxisNameByType(type) {
        return this.axisList.find(item => item.name === type).value
      },
      dateParamChange(v1, v2) {
        this.queryParam.createDate = v2
      },
      disabledDate(current) {
        return current > moment().startOf('day')
      },
      searchQuery() {
        this.loadData()
      },
      searchReset() {
        this.createDate = moment().subtract('day', 1)
        this.queryParam = {
          createDate: this.createDate.format('YYYY-MM-DD')
        }
        this.loadData()
      },
      loadData(arg) {
        this.dataSource = []
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }

        var params = this.getQueryParams()//查询条件

        if (!params) {
          return false
        }
        params.typeTree = '1'
        params.parentId = this.queryParam.parentId
        params.equipmentId = this.queryParam.equipmentId
        params.orderByName = 'ascend'
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            // console.log(res)
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------

            this.dataSource = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$notification.warning({
              message: '消息',
              description:res.message
            })
          }
        }).finally(() => {
          this.loading = false
        })
      },

      handleWindowResize() {
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0, -2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2)
        this.scrollY = boxHeight - tableHeadHeight - 50
      }
    }
  }
</script>
<style scoped>
  .deviceCalendar_list {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .deviceCalendar_list {
      height: 664px !important;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }

  @media screen and (max-width: 1280px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }

  .ant-table-striped /deep/ .table-striped td {
    background-color: #fafafa;
  }
</style>

 src/views/mdc/base/modules/EquipmentLoadReport/EquipmentLoadReportList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,297 @@
<template>
  <div class="deviceCalendar_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24" style="width: 100%">
            <a-col :md="4" :sm="4">
              <a-form-item label="日期">
                <a-date-picker @change="dateParamChange" v-model="createDate" :disabledDate="disabledDate"
                               :allowClear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="2" :xs="2">
              <a-space>
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
                <a-button type="primary" icon="download" @click="handleExportXls('设备负载报表')">导出</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>

    <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList">
      <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
               size="middle" rowKey="id" :columns="columns"
               @change="handleTableChange" class="ant-table-striped"
               :dataSource="dataSource" :pagination="ipagination"
               :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"/>

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

<script>
  import moment from 'moment'
  import { putAction, getAction } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'

  export default {
    name: 'EquipmentLoadReportList',
    components: {},
    mixins: [JeecgListMixin],
    data() {
      return {
        disableMixinCreated: true,
        createDate: null,
        axisList: [
          {
            'name': 1,
            'value': 'X'
          },
          {
            'name': 2,
            'value': 'Y'
          },
          {
            'name': 3,
            'value': 'Z'
          },
          {
            'name': 4,
            'value': 'A'
          },
          {
            'name': 5,
            'value': 'B'
          }
        ],
        queryParam: {},
        scrollY: 465,
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentname',
            width: 150
          },
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentid',
            width: 150
          },
          {
            title: 'X坐标值',
            align: 'center',
            dataIndex: 'axisx',
            width: 100
          },
          {
            title: 'Y坐标值',
            align: 'center',
            dataIndex: 'axisy',
            width: 100
          },
          {
            title: 'Z坐标值',
            align: 'center',
            dataIndex: 'axisz',
            width: 100
          },
          {
            title: 'A坐标值',
            align: 'center',
            dataIndex: 'axisa',
            width: 100
          },
          {
            title: 'B坐标值',
            align: 'center',
            dataIndex: 'axisb',
            width: 100
          },
          {
            title: '最大负载',
            align: 'center',
            dataIndex: 'spindleload',
            width: 150
          },
          {
            title: '主轴转速',
            align: 'center',
            dataIndex: 'spindlespeed',
            width: 150
          },
          {
            title: '时间',
            align: 'center',
            dataIndex: 'createdate',
            width: 150
          },
        ],
        dataList: [],
        url: {
          list: '/mdc/equipmentSpindleStatistical/list',
          exportXlsUrl: '/mdc/equipmentSpindleStatistical/exportXls'
        }
      }
    },
    props: { node: {}, Type: '' },
    created() {
      this.searchReset()
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.handleWindowResize()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    watch: {
      Type(valmath) {
        this.dataList = []
        this.queryParam.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
      node(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId != null) {
            this.queryParam.equipmentId = val.equipmentId
            this.queryParam.parentId = ' '
            this.ipagination.current = 1
            this.loadData()
          } else {
            this.queryParam.parentId = val.key
            this.queryParam.equipmentId = null
            this.ipagination.current = 1
            this.loadData()
          }
        }
      }
    },
    methods: {
      dateParamChange(v1, v2) {
        this.queryParam.createDate = v2
      },
      disabledDate(current) {
        return current > moment().startOf('day')
      },
      searchQuery() {
        this.loadData()
      },
      searchReset() {
        this.createDate = moment().subtract('day', 1)
        this.queryParam = {
          createDate: this.createDate.format('YYYY-MM-DD')
        }
        this.loadData()
      },
      loadData(arg) {
        this.dataSource = []
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }

        var params = this.getQueryParams()//查询条件

        if (!params) {
          return false
        }
        params.typeTree = '1'
        params.parentId = this.queryParam.parentId
        params.equipmentId = this.queryParam.equipmentId
        params.orderByName = 'ascend'
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            // console.log(res)
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------

            this.dataSource = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$notification.warning({
              message: '消息',
              description:res.message
            })
          }
        }).finally(() => {
          this.loading = false
        })
      },

      handleWindowResize() {
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0, -2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2)
        this.scrollY = boxHeight - tableHeadHeight - 50
      }
    }
  }
</script>
<style scoped>
  .deviceCalendar_list {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .deviceCalendar_list {
      height: 664px !important;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }

  @media screen and (max-width: 1280px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }

  .ant-table-striped /deep/ .table-striped td {
    background-color: #fafafa;
  }
</style>