设备管理首页按照需求进行样式开发

zhaowei

2 天以前 d78dad29ee493b68dd6ac2e34df08431685c3734

设备管理首页按照需求进行样式开发

 src/api/signage.js

@@ -1,6 +1,7 @@
import { getAction, deleteAction, putAction, postAction, httpAction } from '@/api/manage'

export default {
  /* MDC */
  // èŽ·å–所有车间信息
  getAllWorkShop: id => getAction('/mdc/home/getAllWorkShop', {}),
  // æ ¹æ®ç”¨æˆ·ID获取用户信息
@@ -15,4 +16,14 @@
  getEquipmentOEEStatistics: productionId => getAction('/mdc/home/equipmentOEEStatistics', { productionId }),
  // è®¾å¤‡OEE和利用率对比
  getEquipmentMonthStatisticsApi: productionId => getAction('/mdc/home/equipmentMonthStatistics', { productionId }),

  /* EAM */
  // æŠ€æœ¯çŠ¶æ€
  getEquipmentTechnologyStatusApi: () => getAction('/equipment/home/getEquipmentTechnologyStatusList'),
  // æ•…障报修
  getReportRepairEquipmentApi: () => getAction('/equipment/home/getReportRepairEquipmentList'),
  // ä¸‰ä¿è®¡åˆ’
  getThirdMaintenancePlanApi: () => getAction('/equipment/home/getThirdGuaranteesPlan'),
  // äºŒä¿è®¡åˆ’
  getSecondMaintenancePlanApi: () => getAction('/equipment/home/getSecondGuaranteesPlan')
}

 src/views/dashboard/Analysis.vue

@@ -3,10 +3,9 @@
             :userType="userType"
             :productionCode="productionCode"
             :workshopSectionProductionCode="workshopSectionProductionCode"
             v-if="[1,2,3,4].includes(userType)"
             >
             v-if="userType&&userType!==0">
  </Component>
  <div v-else>  <!-- ä¸Žç»„件渲染互斥 -->
  <div v-else-if="userType===0">  <!-- ä¸Žç»„件渲染互斥 -->
    <img src="@/assets/index.png" style="width: 100%;height: 785px">
  </div>
</template>
@@ -15,12 +14,14 @@
  import signageApi from '@/api/signage'
  import MdcManagerSignage from './mdcIndex/MdcManagerSignage.vue'
  import DncManagerSignage from './dncIndex/DncManagerSignage.vue'
  import EamManagerSignage from './eamIndex/EamManagerSignage.vue'

  export default {
    name: "Analysis",
    name: 'Analysis',
    components: {
      MdcManagerSignage,
      DncManagerSignage
      DncManagerSignage,
      EamManagerSignage
    },
    data() {
      return {
@@ -28,7 +29,7 @@
        productionCode: '',
        branchFactoryProductionCode: '',
        workshopSectionProductionCode: '',
        userType: '',
        userType: ''
      }
    },
    created() {
@@ -61,10 +62,10 @@
                //dnc
                this.currentSignage = 'DncManagerSignage'
                break
              // case 4:
              //   //设备管理
              //   this.currentSignage = 'IndexSignage'
              //   break
              case 4:
                //设备管理
                this.currentSignage = 'EamManagerSignage'
                break
              default:
                this.currentSignage = ''
                break
@@ -83,14 +84,14 @@

</script>
<style lang="less" scoped>
/deep/ .back-nav {
  width: 100px;
  height: 30px;
  color: #fff;
  position: absolute;
  top: 15px;
  left: 10px;
  cursor: pointer;
  z-index: 9999
}
  /deep/ .back-nav {
    width: 100px;
    height: 30px;
    color: #fff;
    position: absolute;
    top: 15px;
    left: 10px;
    cursor: pointer;
    z-index: 9999
  }
</style>

 src/views/dashboard/TodoList.vue

@@ -1,24 +1,12 @@
<template>
  <div>
    <a-spin :spinning="loading">
      <div class="todo-container">
        <el-dropdown
          v-for="(item, index) in todoList"
          :key="index"
          class="todo-item"
          @click.native="handelDetail(item)"
        >
          <span class="todo-title" >{{ item.description }}</span>
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <el-dropdown-item @click.native="handelDetail(item)">执行/审批</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
          <div class="todo-info">
            <div class="todo-node">{{ item.name }}</div>
            <div class="todo-time">{{ item.createTime }}</div>
          </div>
        </el-dropdown>
      </div>
    </a-spin>
  <a-list :dataSource="todoList" :loading="loading" class="list-container">
    <a-list-item slot="renderItem" slot-scope="item,index" style="cursor: pointer"
                 @click.native="handelDetail(item)">
      <a-list-item-meta :description="item.description">
        <span slot="title" style="font-weight: bold">{{item.category_dictText}}</span>
      </a-list-item-meta>
      <div style="text-align: right">{{item.name}}<br/>{{item.createTime}}</div>
    </a-list-item>

    <AssignFileStreamHandle
      ref='modalFormApproval'
@@ -136,507 +124,448 @@
      :selectShenpiData='selectEquipmentSealUpData'
      @searchReset='searchReset'
    ></AssignEquipmentFileStreamHandle>
  </div>
  </a-list>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mixinDevice } from '@/utils/mixin'
import lossBoundHandle from '@views/flowable/workflow/lossBound/lossBoundHandle.vue'
import stocktakingBoundHandle from '@views/flowable/workflow/stocktakingBound/stocktakingBoundHandle.vue'
import AssignFileStreamHandle from '@views/flowable/workflow/assignFileStream/AssignFileStreamHandle.vue'
import DispatchFileHandle from '@views/flowable/workflow/dispatchFile/DispatchFileHandle.vue'
import DispatchFileBachHandleStyle from '@views/flowable/workflow/dispatchFile/DispatchFileBachHandleStyle#Drawer.vue'
import WeekMaintenanceBatchApprovalModal
  from '@views/flowable/workflow/weekMaintenance/WeekMaintenanceBatchApprovalModal.vue'
import InspectionOrderBatchHandle from '@views/flowable/workflow/InspectionOrder/InspectionOrderBatchHandle.vue'
import JDictSelectTag from '@comp/dict/JDictSelectTag.vue'
import WeekMaintenanceApprovalModal from '@views/flowable/workflow/weekMaintenance/WeekMaintenanceApprovalModal.vue'
import RepairOrderApprovalModal from '@views/flowable/workflow/repairOrder/RepairOrderApprovalModal.vue'
import InspectionOrderHandle from '@views/flowable/workflow/InspectionOrder/InspectionOrderHandle.vue'
import EquipmentLeanOutApprovalModal from '@views/flowable/workflow/leanOut/EquipmentLeanOutApprovalModal.vue'
import EquipmentReturnApprovalModal from '@views/flowable/workflow/leanOut/EquipmentReturnApprovalModal.vue'
import SecondMaintenanceApprovalModal
  from '@views/flowable/workflow/secondMaintenance/SecondMaintenanceApprovalModal.vue'
import ThirdMaintenanceApprovalModal from '@views/flowable/workflow/thirdMaintenance/ThirdMaintenanceApprovalModal.vue'
import OutBoundOrderHandle from '@views/flowable/workflow/outBoundOrder/OutBoundOrderHandle.vue'
import EquipmentSealUpApprovalModal from '@views/flowable/workflow/sealUp/EquipmentSealUpApprovalModal.vue'
import InboundOrderHandle from '@views/flowable/workflow/inboundOrder/InboundOrderHandle.vue'
import EquipmentTransferApprovalModal from '@views/flowable/workflow/transfer/EquipmentTransferApprovalModal.vue'
import EquipmentScrapApprovalModal from '@views/flowable/workflow/scrap/EquipmentScrapApprovalModal.vue'
import SparePartApplyHandle from '@views/flowable/workflow/sparePartApply/SparePartApplyHandle.vue'
import StandardizedProcessHandle from '@views/flowable/workflow/standardizedProcess/StandardizedProcessHandle.vue'
import GuideCardBatchHandle from '@views/flowable/workflow/guideCardBatch/GuideCardBatchHandle.vue'
import AssignEquipmentFileStreamHandle
  from '@views/flowable/workflow/assignEquipmentFileStream/AssignEquipmentFileStreamHandle.vue'
import { getAction } from '@api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { mixinDevice } from '@/utils/mixin'
  import lossBoundHandle from '@views/flowable/workflow/lossBound/lossBoundHandle.vue'
  import stocktakingBoundHandle from '@views/flowable/workflow/stocktakingBound/stocktakingBoundHandle.vue'
  import AssignFileStreamHandle from '@views/flowable/workflow/assignFileStream/AssignFileStreamHandle.vue'
  import DispatchFileHandle from '@views/flowable/workflow/dispatchFile/DispatchFileHandle.vue'
  import DispatchFileBachHandleStyle from '@views/flowable/workflow/dispatchFile/DispatchFileBachHandleStyle#Drawer.vue'
  import WeekMaintenanceBatchApprovalModal
    from '@views/flowable/workflow/weekMaintenance/WeekMaintenanceBatchApprovalModal.vue'
  import InspectionOrderBatchHandle from '@views/flowable/workflow/InspectionOrder/InspectionOrderBatchHandle.vue'
  import JDictSelectTag from '@comp/dict/JDictSelectTag.vue'
  import WeekMaintenanceApprovalModal from '@views/flowable/workflow/weekMaintenance/WeekMaintenanceApprovalModal.vue'
  import RepairOrderApprovalModal from '@views/flowable/workflow/repairOrder/RepairOrderApprovalModal.vue'
  import InspectionOrderHandle from '@views/flowable/workflow/InspectionOrder/InspectionOrderHandle.vue'
  import EquipmentLeanOutApprovalModal from '@views/flowable/workflow/leanOut/EquipmentLeanOutApprovalModal.vue'
  import EquipmentReturnApprovalModal from '@views/flowable/workflow/leanOut/EquipmentReturnApprovalModal.vue'
  import SecondMaintenanceApprovalModal
    from '@views/flowable/workflow/secondMaintenance/SecondMaintenanceApprovalModal.vue'
  import ThirdMaintenanceApprovalModal
    from '@views/flowable/workflow/thirdMaintenance/ThirdMaintenanceApprovalModal.vue'
  import OutBoundOrderHandle from '@views/flowable/workflow/outBoundOrder/OutBoundOrderHandle.vue'
  import EquipmentSealUpApprovalModal from '@views/flowable/workflow/sealUp/EquipmentSealUpApprovalModal.vue'
  import InboundOrderHandle from '@views/flowable/workflow/inboundOrder/InboundOrderHandle.vue'
  import EquipmentTransferApprovalModal from '@views/flowable/workflow/transfer/EquipmentTransferApprovalModal.vue'
  import EquipmentScrapApprovalModal from '@views/flowable/workflow/scrap/EquipmentScrapApprovalModal.vue'
  import SparePartApplyHandle from '@views/flowable/workflow/sparePartApply/SparePartApplyHandle.vue'
  import StandardizedProcessHandle from '@views/flowable/workflow/standardizedProcess/StandardizedProcessHandle.vue'
  import GuideCardBatchHandle from '@views/flowable/workflow/guideCardBatch/GuideCardBatchHandle.vue'
  import AssignEquipmentFileStreamHandle
    from '@views/flowable/workflow/assignEquipmentFileStream/AssignEquipmentFileStreamHandle.vue'
  import { getAction } from '@api/manage'

export default {
  name: "TodoList",
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    lossBoundHandle,
    stocktakingBoundHandle,
    AssignFileStreamHandle,
    DispatchFileHandle,
    DispatchFileBachHandleStyle,
    WeekMaintenanceBatchApprovalModal,
    InspectionOrderBatchHandle,
    JDictSelectTag,
    WeekMaintenanceApprovalModal,
    RepairOrderApprovalModal,
    InspectionOrderHandle,
    EquipmentLeanOutApprovalModal,
    EquipmentReturnApprovalModal,
    SecondMaintenanceApprovalModal,
    ThirdMaintenanceApprovalModal,
    OutBoundOrderHandle,
    EquipmentSealUpApprovalModal,
    InboundOrderHandle,
    EquipmentTransferApprovalModal,
    EquipmentScrapApprovalModal,
    SparePartApplyHandle,
    StandardizedProcessHandle,
    GuideCardBatchHandle,
    AssignEquipmentFileStreamHandle
  },
  props: {
    // æ·»åŠ é»˜è®¤åˆ†ç±»å±žæ€§
    defaultCategories: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      todoList: [],
      url: {
        list: '/assign/flow/toTaskBySelf',
        isSameNode: '/assign/flow/isSameNode'
  export default {
    name: 'TodoList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      lossBoundHandle,
      stocktakingBoundHandle,
      AssignFileStreamHandle,
      DispatchFileHandle,
      DispatchFileBachHandleStyle,
      WeekMaintenanceBatchApprovalModal,
      InspectionOrderBatchHandle,
      JDictSelectTag,
      WeekMaintenanceApprovalModal,
      RepairOrderApprovalModal,
      InspectionOrderHandle,
      EquipmentLeanOutApprovalModal,
      EquipmentReturnApprovalModal,
      SecondMaintenanceApprovalModal,
      ThirdMaintenanceApprovalModal,
      OutBoundOrderHandle,
      EquipmentSealUpApprovalModal,
      InboundOrderHandle,
      EquipmentTransferApprovalModal,
      EquipmentScrapApprovalModal,
      SparePartApplyHandle,
      StandardizedProcessHandle,
      GuideCardBatchHandle,
      AssignEquipmentFileStreamHandle
    },
    props: {
      // æ·»åŠ é»˜è®¤åˆ†ç±»å±žæ€§
      defaultCategories: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        todoList: [],
        url: {
          list: '/assign/flow/toTaskBySelf',
          isSameNode: '/assign/flow/isSameNode'
        },
        dictOptions: {},
        selectShenpiData: {},
        selectDispatchFileXqData: {},
        selectInspectionOrderData: {},
        selectWeekMaintenanceData: {},
        selectSecondMaintenanceData: {},
        selectThirdMaintenanceData: {},
        selectBachData: {},
        selectRepairOrderData: {},
        selectOutBoundOrderData: {},
        selectLossBoundOrderData: {},
        selectStocktakingBoundOrderData: {},
        selectInboundOrderData: {},
        selectSparePartApplyData: {},
        selectGuideCardData: {},
        selectEquipmentAssignProductData: {},
        selectEquipmentSealUpData: {},
        //业务信息ID
        dataId: undefined,
        loading: false,
        disableMixinCreated: true
      }
    },

    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      },
      dictOptions: {},
      selectShenpiData: {},
      selectDispatchFileXqData: {},
      selectInspectionOrderData: {},
      selectWeekMaintenanceData: {},
      selectSecondMaintenanceData: {},
      selectThirdMaintenanceData: {},
      selectBachData: {},
      selectRepairOrderData: {},
      selectOutBoundOrderData: {},
      selectLossBoundOrderData: {},
      selectStocktakingBoundOrderData: {},
      selectInboundOrderData: {},
      selectSparePartApplyData: {},
      selectGuideCardData: {},
      selectEquipmentAssignProductData: {},
      selectEquipmentSealUpData: {},
      //业务信息ID
      dataId: undefined,
      loading: false,
      disableMixinCreated: true
    };
  },

  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      getTableColumnsTotalWidth() {
        return this.columns.reduce((total, item) => total + item.width, 0)
      }
    },
    getTableColumnsTotalWidth() {
      return this.columns.reduce((total, item) => total + item.width, 0)
    }
  },

  methods: {
    loadData(arg) {

      this.todoList = []

      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
        this.ipagination.page = 1
        this.ipagination.pageSize = 50
      }
      this.queryParam.categoryList = this.defaultCategories;
      // å°è£…查询条件
      let formData = {
        pageNo: arg,
        pageSize: this.ipagination.pageSize,
        categoryList: this.queryParam.categoryList
      }
      this.loading = true
      getAction(this.url.list, formData).then((res) => {
        if (res.success) {
          // console.log(res)
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.todoList = res.result.records || res.result
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          if (this.selectedRowKeys.length > 0) this.selectedRowKeys = this.selectionRows = []
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        } else {
          this.$message.warning(res.message)
    methods: {
      loadData(arg) {
        this.todoList = []
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
          this.ipagination.page = 1
          this.ipagination.pageSize = 50
        }
      }).finally(() => {
        this.loading = false
      })
    },

    handelDetail(item, index) {
      console.log('点击了详情')
      console.log('item----->', item)
      console.log('index----->', index)
      let processType = this.splitAprocessType(item.category)
      console.log('processType--->', processType)
      switch (processType) {
        case 'drApproval':
          this.handDrDetial(item)
          break
        case 'ggApproval':
          this.handDispatchFileDetial(item)
          break
        case 'ncFileSettingProcessApproval':
          this.handStandardizedDetial(item)
          break
        case 'sbdjApproval':
          this.handInspectionOrder(item)
          break
        case 'WEEK_MAINTENANCE':
          this.handleWeekMaintenance(item)
          break
        case 'eam_repair':
          this.handleRepairOrder(item)
          break
        case 'equipment_lean_out':
          this.handleEquipmentLeanOut(item)
          break
        case 'equipment_return':
          this.handleEquipmentReturn(item)
          break
        case 'second_maintenance':
          this.handleSecondMaintenance(item)
          break
        case 'third_maintenance':
          this.handleThirdMaintenance(item)
          break
        case 'toolOutStorageApproval':
          this.handleToolOutStorageApproval(item)
          break
        case 'toolsStocktakingBoundApproval':
          this.handleToolStocktakingApproval(item)
          break
        case 'toolsLossApproval':
          this.handleToolLossApproval(item)
          break
        case 'equipment_seal_up':
          this.handleEquipmentSealUp(item)
          break
        case 'equipment_unseal':
          this.handleEquipmentUnSeal(item)
          break
        case 'toolInStorageApproval':
          this.handleToolInStorage(item)
          break
        case 'equipment_transfer':
          this.handleEquipmentTransfer(item)
          break
        case 'equipment_scrap':
          this.handleEquipmentScrap(item)
          break
        case 'spare_part_apply':
          this.handleSparePartApplyApproval(item)
          break
        case 'programConfirmApproval':
          this.handleGuideCardApproval(item)
          break
        case 'equipmentAssignProductApproval':
          this.handleEquipmentAssignProductApproval(item)
          break
        default:
          alert('没找到该流程')
      }
    },

    batchHandle() {
      const categorySet = new Set(this.selectionRows.map(item => item.category))
      const nameSet = new Set(this.selectionRows.map(item => item.name))
      if (categorySet.size !== 1 || nameSet.size !== 1) {
        this.$notification.info({
          message: '消息',
          description: '请选择同一流程分类下的同一当前节点'
        })
        return
      }

      if (categorySet.has('eam_repair')) {
        this.$notification.info({
          message: '消息',
          description: '设备维修流程无法批量处理'
        })
        return
      }

      if (categorySet.has('sbdjApproval')) {
        this.$refs.inspectionOrderBatchHandleRef.visible = true
        this.$refs.inspectionOrderBatchHandleRef.title = this.selectionRows[0].name
        this.$refs.inspectionOrderBatchHandleRef.getAllApproveData(this.selectionRows[0])
        this.$refs.inspectionOrderBatchHandleRef.getBasicInformation(this.selectionRows[0])
      } else if (categorySet.has('WEEK_MAINTENANCE')) {
        this.$refs.weenMaintenanceBatchApprovalModalRef.handleDetail(this.selectionRows[0])
        this.$refs.weenMaintenanceBatchApprovalModalRef.title = this.selectionRows[0].name
      } else if (categorySet.has('ggApproval')) {
        let ids = ''
        for (let a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ','
        this.queryParam.categoryList = this.defaultCategories
        // å°è£…查询条件
        let formData = {
          pageNo: arg,
          pageSize: this.ipagination.pageSize,
          categoryList: this.queryParam.categoryList
        }
        getAction(this.url.isSameNode + '?taskIds=' + ids).then((res) => {
        this.loading = true
        getAction(this.url.list, formData).then((res) => {
          if (res.success) {
            let taskDefKey = res.result
            this.selectBachData.taskIds = ids
            this.selectBachData.taskDefKey = taskDefKey
            this.$refs.modalFormDispatchFileBatch.title = '批量处理'
            this.$refs.modalFormDispatchFileBatch.edit(this.selectBachData)
            this.$refs.modalFormDispatchFileBatch.disableSubmit = false
            // console.log(res)
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.todoList = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            if (this.selectedRowKeys.length > 0) this.selectedRowKeys = this.selectionRows = []
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$notification.warning({
              message: '消息',
              description: res.message
            })
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
      },

    splitAprocessType(title) {
      let parts = title.split('：') // æ³¨æ„å†’号是全角字符，使用对应的字进行分割
      let result = parts[0]
      return result
    },
    //DNC-指派NC程序至设备
    handDrDetial(item) {
      this.selectShenpiData = item
      this.$refs.modalFormApproval.clearTableSource()
      this.$refs.modalFormApproval.getAllApproveData(item)
    },
    //DNC-NC程序签派
    handDispatchFileDetial(item) {
      console.log('item----->', item)
      this.selectDispatchFileXqData = item
      this.$refs.modalFormDispatchFileXq.clearTableSource()
      this.$refs.modalFormDispatchFileXq.getAllApproveData(item)
    },
    //DNC-定型审批页面
    handStandardizedDetial(item) {
      this.selectDispatchFileXqData = item
      this.$refs.StandardizedProcessHandle.clearTableSource()
      this.$refs.StandardizedProcessHandle.getAllApproveData(item)
    },
      handelDetail(item) {
        let processType = this.splitAprocessType(item.category)
        console.log('processType--->', processType)
        switch (processType) {
          case 'drApproval':
            this.handDrDetial(item)
            break
          case 'ggApproval':
            this.handDispatchFileDetial(item)
            break
          case 'ncFileSettingProcessApproval':
            this.handStandardizedDetial(item)
            break
          case 'sbdjApproval':
            this.handInspectionOrder(item)
            break
          case 'WEEK_MAINTENANCE':
            this.handleWeekMaintenance(item)
            break
          case 'eam_repair':
            this.handleRepairOrder(item)
            break
          case 'equipment_lean_out':
            this.handleEquipmentLeanOut(item)
            break
          case 'equipment_return':
            this.handleEquipmentReturn(item)
            break
          case 'second_maintenance':
            this.handleSecondMaintenance(item)
            break
          case 'third_maintenance':
            this.handleThirdMaintenance(item)
            break
          case 'toolOutStorageApproval':
            this.handleToolOutStorageApproval(item)
            break
          case 'toolsStocktakingBoundApproval':
            this.handleToolStocktakingApproval(item)
            break
          case 'toolsLossApproval':
            this.handleToolLossApproval(item)
            break
          case 'equipment_seal_up':
            this.handleEquipmentSealUp(item)
            break
          case 'equipment_unseal':
            this.handleEquipmentUnSeal(item)
            break
          case 'toolInStorageApproval':
            this.handleToolInStorage(item)
            break
          case 'equipment_transfer':
            this.handleEquipmentTransfer(item)
            break
          case 'equipment_scrap':
            this.handleEquipmentScrap(item)
            break
          case 'spare_part_apply':
            this.handleSparePartApplyApproval(item)
            break
          case 'programConfirmApproval':
            this.handleGuideCardApproval(item)
            break
          case 'equipmentAssignProductApproval':
            this.handleEquipmentAssignProductApproval(item)
            break
          default:
            alert('没找到该流程')
        }
      },

    handInspectionOrder(record) {
      console.log('record----->', record)
      this.selectInspectionOrderData = Object.assign({}, record)
      this.$refs.modalFormInspectionOrder.visible = true
      this.$refs.modalFormInspectionOrder.title = record.name
      this.$refs.modalFormInspectionOrder.getAllApproveData(record)
      this.$refs.modalFormInspectionOrder.getBasicInformation(record)
    },
      batchHandle() {
        const categorySet = new Set(this.selectionRows.map(item => item.category))
        const nameSet = new Set(this.selectionRows.map(item => item.name))
        if (categorySet.size !== 1 || nameSet.size !== 1) {
          this.$notification.info({
            message: '消息',
            description: '请选择同一流程分类下的同一当前节点'
          })
          return
        }

    handleWeekMaintenance(item) {
      if (item && item.dataId) {
        this.selectWeekMaintenanceData = Object.assign({}, item)
        this.$refs.weekMaintenanceApprovalModal.handleDetail(item)
        this.$refs.weekMaintenanceApprovalModal.title = item.name
        this.$refs.weekMaintenanceApprovalModal.disableSubmit = false
      }
    },
        if (categorySet.has('eam_repair')) {
          this.$notification.info({
            message: '消息',
            description: '设备维修流程无法批量处理'
          })
          return
        }

    /**
     * ç‚¹å‡»è®¾å¤‡ç»´ä¿®åˆ†ç±»æµç¨‹è¯¦æƒ…时触发
     * @param record
     */
    handleRepairOrder(record) {
      this.selectRepairOrderData = Object.assign({}, record)
      this.$refs.repairOrderApprovalModal.visible = true
      this.$refs.repairOrderApprovalModal.title = record.name
      this.$refs.repairOrderApprovalModal.getAllApproveData(record)
      this.$refs.repairOrderApprovalModal.getBasicInformation(record)
    },
    handleEquipmentLeanOut(item) {
      this.$refs.equipmentLeanOutApprovalModelRef.visible = true
      this.$refs.equipmentLeanOutApprovalModelRef.title = item.name
      this.$refs.equipmentLeanOutApprovalModelRef.handleDetail(item)
      this.$refs.equipmentLeanOutApprovalModelRef.disableSubmit = false
    },
    handleEquipmentReturn(item) {
      this.$refs.equipmentReturnApprovalModelRef.visible = true
      this.$refs.equipmentReturnApprovalModelRef.title = item.name
      this.$refs.equipmentReturnApprovalModelRef.handleDetail(item)
      this.$refs.equipmentReturnApprovalModelRef.disableSubmit = false
    },
    handleSecondMaintenance(item) {
      if (item && item.dataId) {
        this.selectSecondMaintenanceData = Object.assign({}, item)
        this.$refs.secondMaintenanceApprovalModal.handleDetail(item)
        this.$refs.secondMaintenanceApprovalModal.title = item.name
        this.$refs.secondMaintenanceApprovalModal.disableSubmit = false
      }
    },
    handleThirdMaintenance(item) {
      if (item && item.dataId) {
        this.selectThirdMaintenanceData = Object.assign({}, item)
        this.$refs.thirdMaintenanceApprovalModal.handleDetail(item)
        this.$refs.thirdMaintenanceApprovalModal.title = item.name
        this.$refs.thirdMaintenanceApprovalModal.disableSubmit = false
      }
    },
    handleToolOutStorageApproval(item) {
      if (item && item.dataId) {
        this.selectOutBoundOrderData = Object.assign({}, item)
        this.$refs.outBoundOrderHandle.auditVisible = true
        this.$refs.outBoundOrderHandle.clearTableSource()
        this.$refs.outBoundOrderHandle.getAllApproveData(item)
      }
    },
    handleToolStocktakingApproval(item) {
      if (item && item.dataId) {
        this.selectStocktakingBoundOrderData = Object.assign({}, item)
        this.$refs.stocktakingBoundHandle.auditVisible = true
        this.$refs.stocktakingBoundHandle.clearTableSource()
        this.$refs.stocktakingBoundHandle.getAllApproveData(item)
      }
    },
    handleToolLossApproval(item) {
      if (item && item.dataId) {
        this.selectLossBoundOrderData = Object.assign({}, item)
        this.$refs.lossBoundHandle.auditVisible = true
        this.$refs.lossBoundHandle.clearTableSource()
        this.$refs.lossBoundHandle.getAllApproveData(item)
      }
    },
        if (categorySet.has('sbdjApproval')) {
          this.$refs.inspectionOrderBatchHandleRef.visible = true
          this.$refs.inspectionOrderBatchHandleRef.title = this.selectionRows[0].name
          this.$refs.inspectionOrderBatchHandleRef.getAllApproveData(this.selectionRows[0])
          this.$refs.inspectionOrderBatchHandleRef.getBasicInformation(this.selectionRows[0])
        } else if (categorySet.has('WEEK_MAINTENANCE')) {
          this.$refs.weenMaintenanceBatchApprovalModalRef.handleDetail(this.selectionRows[0])
          this.$refs.weenMaintenanceBatchApprovalModalRef.title = this.selectionRows[0].name
        } else if (categorySet.has('ggApproval')) {
          let ids = ''
          for (let a = 0; a < this.selectedRowKeys.length; a++) {
            ids += this.selectedRowKeys[a] + ','
          }
          getAction(this.url.isSameNode + '?taskIds=' + ids).then((res) => {
            if (res.success) {
              let taskDefKey = res.result
              this.selectBachData.taskIds = ids
              this.selectBachData.taskDefKey = taskDefKey
              this.$refs.modalFormDispatchFileBatch.title = '批量处理'
              this.$refs.modalFormDispatchFileBatch.edit(this.selectBachData)
              this.$refs.modalFormDispatchFileBatch.disableSubmit = false
            } else {
              this.$notification.warning({
                message: '消息',
                description: res.message
              })
            }
          })
        }
      },

    handleEquipmentSealUp(item) {
      this.$refs.equipmentSealUpApprovalModelRef.visible = true
      this.$refs.equipmentSealUpApprovalModelRef.title = item.name
      this.$refs.equipmentSealUpApprovalModelRef.handleDetail(item)
      this.$refs.equipmentSealUpApprovalModelRef.disableSubmit = false
    },
      splitAprocessType(title) {
        let parts = title.split('：') // æ³¨æ„å†’号是全角字符，使用对应的字进行分割
        let result = parts[0]
        return result
      },
      //DNC-指派NC程序至设备
      handDrDetial(item) {
        this.selectShenpiData = item
        this.$refs.modalFormApproval.clearTableSource()
        this.$refs.modalFormApproval.getAllApproveData(item)
      },
      //DNC-NC程序签派
      handDispatchFileDetial(item) {
        console.log('item----->', item)
        this.selectDispatchFileXqData = item
        this.$refs.modalFormDispatchFileXq.clearTableSource()
        this.$refs.modalFormDispatchFileXq.getAllApproveData(item)
      },
      //DNC-定型审批页面
      handStandardizedDetial(item) {
        this.selectDispatchFileXqData = item
        this.$refs.StandardizedProcessHandle.clearTableSource()
        this.$refs.StandardizedProcessHandle.getAllApproveData(item)
      },

    handleEquipmentUnSeal(item) {
      this.$refs.equipmentSealUpApprovalModelRef.visible = true
      this.$refs.equipmentSealUpApprovalModelRef.title = item.name
      this.$refs.equipmentSealUpApprovalModelRef.handleDetail(item)
      this.$refs.equipmentSealUpApprovalModelRef.disableSubmit = false
    },
    handleToolInStorage(item) {
      if (item && item.dataId) {
        this.selectInboundOrderData = Object.assign({}, item)
        this.$refs.inboundOrderApprovalModal.auditVisible = true
        this.$refs.inboundOrderApprovalModal.clearTableSource()
        this.$refs.inboundOrderApprovalModal.getAllApproveData(item)
      handInspectionOrder(record) {
        console.log('record----->', record)
        this.selectInspectionOrderData = Object.assign({}, record)
        this.$refs.modalFormInspectionOrder.visible = true
        this.$refs.modalFormInspectionOrder.title = record.name
        this.$refs.modalFormInspectionOrder.getAllApproveData(record)
        this.$refs.modalFormInspectionOrder.getBasicInformation(record)
      },

      handleWeekMaintenance(item) {
        if (item && item.dataId) {
          this.selectWeekMaintenanceData = Object.assign({}, item)
          this.$refs.weekMaintenanceApprovalModal.handleDetail(item)
          this.$refs.weekMaintenanceApprovalModal.title = item.name
          this.$refs.weekMaintenanceApprovalModal.disableSubmit = false
        }
      },

      /**
       * ç‚¹å‡»è®¾å¤‡ç»´ä¿®åˆ†ç±»æµç¨‹è¯¦æƒ…时触发
       * @param record
       */
      handleRepairOrder(record) {
        this.selectRepairOrderData = Object.assign({}, record)
        this.$refs.repairOrderApprovalModal.visible = true
        this.$refs.repairOrderApprovalModal.title = record.name
        this.$refs.repairOrderApprovalModal.getAllApproveData(record)
        this.$refs.repairOrderApprovalModal.getBasicInformation(record)
      },
      handleEquipmentLeanOut(item) {
        this.$refs.equipmentLeanOutApprovalModelRef.visible = true
        this.$refs.equipmentLeanOutApprovalModelRef.title = item.name
        this.$refs.equipmentLeanOutApprovalModelRef.handleDetail(item)
        this.$refs.equipmentLeanOutApprovalModelRef.disableSubmit = false
      },
      handleEquipmentReturn(item) {
        this.$refs.equipmentReturnApprovalModelRef.visible = true
        this.$refs.equipmentReturnApprovalModelRef.title = item.name
        this.$refs.equipmentReturnApprovalModelRef.handleDetail(item)
        this.$refs.equipmentReturnApprovalModelRef.disableSubmit = false
      },
      handleSecondMaintenance(item) {
        if (item && item.dataId) {
          this.selectSecondMaintenanceData = Object.assign({}, item)
          this.$refs.secondMaintenanceApprovalModal.handleDetail(item)
          this.$refs.secondMaintenanceApprovalModal.title = item.name
          this.$refs.secondMaintenanceApprovalModal.disableSubmit = false
        }
      },
      handleThirdMaintenance(item) {
        if (item && item.dataId) {
          this.selectThirdMaintenanceData = Object.assign({}, item)
          this.$refs.thirdMaintenanceApprovalModal.handleDetail(item)
          this.$refs.thirdMaintenanceApprovalModal.title = item.name
          this.$refs.thirdMaintenanceApprovalModal.disableSubmit = false
        }
      },
      handleToolOutStorageApproval(item) {
        if (item && item.dataId) {
          this.selectOutBoundOrderData = Object.assign({}, item)
          this.$refs.outBoundOrderHandle.auditVisible = true
          this.$refs.outBoundOrderHandle.clearTableSource()
          this.$refs.outBoundOrderHandle.getAllApproveData(item)
        }
      },
      handleToolStocktakingApproval(item) {
        if (item && item.dataId) {
          this.selectStocktakingBoundOrderData = Object.assign({}, item)
          this.$refs.stocktakingBoundHandle.auditVisible = true
          this.$refs.stocktakingBoundHandle.clearTableSource()
          this.$refs.stocktakingBoundHandle.getAllApproveData(item)
        }
      },
      handleToolLossApproval(item) {
        if (item && item.dataId) {
          this.selectLossBoundOrderData = Object.assign({}, item)
          this.$refs.lossBoundHandle.auditVisible = true
          this.$refs.lossBoundHandle.clearTableSource()
          this.$refs.lossBoundHandle.getAllApproveData(item)
        }
      },

      handleEquipmentSealUp(item) {
        this.$refs.equipmentSealUpApprovalModelRef.visible = true
        this.$refs.equipmentSealUpApprovalModelRef.title = item.name
        this.$refs.equipmentSealUpApprovalModelRef.handleDetail(item)
        this.$refs.equipmentSealUpApprovalModelRef.disableSubmit = false
      },

      handleEquipmentUnSeal(item) {
        this.$refs.equipmentSealUpApprovalModelRef.visible = true
        this.$refs.equipmentSealUpApprovalModelRef.title = item.name
        this.$refs.equipmentSealUpApprovalModelRef.handleDetail(item)
        this.$refs.equipmentSealUpApprovalModelRef.disableSubmit = false
      },
      handleToolInStorage(item) {
        if (item && item.dataId) {
          this.selectInboundOrderData = Object.assign({}, item)
          this.$refs.inboundOrderApprovalModal.auditVisible = true
          this.$refs.inboundOrderApprovalModal.clearTableSource()
          this.$refs.inboundOrderApprovalModal.getAllApproveData(item)
        }
      },
      handleEquipmentTransfer(item) {
        this.$refs.equipmentTransferApprovalModelRef.visible = true
        this.$refs.equipmentTransferApprovalModelRef.title = item.name
        this.$refs.equipmentTransferApprovalModelRef.handleDetail(item)
        this.$refs.equipmentTransferApprovalModelRef.disableSubmit = false
      },
      handleEquipmentScrap(item) {
        this.$refs.equipmentScrapApprovalModelRef.visible = true
        this.$refs.equipmentScrapApprovalModelRef.title = item.name
        this.$refs.equipmentScrapApprovalModelRef.handleDetail(item)
        this.$refs.equipmentScrapApprovalModelRef.disableSubmit = false
      },
      handleSparePartApplyApproval(item) {
        if (item && item.dataId) {
          debugger
          this.selectSparePartApplyData = Object.assign({}, item)
          this.$refs.sparePartApplyModal.auditVisible = true
          this.$refs.sparePartApplyModal.clearTableSource()
          this.$refs.sparePartApplyModal.getAllApproveData(item)
        }
      },
      //DNC-程序确认表流程
      handleGuideCardApproval(item) {
        console.log('item----->', item)
        this.selectGuideCardData = item
        this.$refs.guideCardBatchHandle.clearTableSource()
        this.$refs.guideCardBatchHandle.getAllApproveData(item)
      },
      //DNC-设备结构树指派产品结构树
      handleEquipmentAssignProductApproval(item) {
        console.log('item----->', item)
        this.selectEquipmentSealUpData = item
        this.$refs.assignEquipmentFileStreamHandle.clearTableSource()
        this.$refs.assignEquipmentFileStreamHandle.getAllApproveData(item)
      }
    },
    handleEquipmentTransfer(item) {
      this.$refs.equipmentTransferApprovalModelRef.visible = true
      this.$refs.equipmentTransferApprovalModelRef.title = item.name
      this.$refs.equipmentTransferApprovalModelRef.handleDetail(item)
      this.$refs.equipmentTransferApprovalModelRef.disableSubmit = false
    },
    handleEquipmentScrap(item) {
      this.$refs.equipmentScrapApprovalModelRef.visible = true
      this.$refs.equipmentScrapApprovalModelRef.title = item.name
      this.$refs.equipmentScrapApprovalModelRef.handleDetail(item)
      this.$refs.equipmentScrapApprovalModelRef.disableSubmit = false
    },
    handleSparePartApplyApproval(item) {
      if (item && item.dataId) {
        debugger
        this.selectSparePartApplyData = Object.assign({}, item)
        this.$refs.sparePartApplyModal.auditVisible = true
        this.$refs.sparePartApplyModal.clearTableSource()
        this.$refs.sparePartApplyModal.getAllApproveData(item)
      }
    },
    //DNC-程序确认表流程
    handleGuideCardApproval(item) {
      console.log('item----->', item)
      this.selectGuideCardData = item
      this.$refs.guideCardBatchHandle.clearTableSource()
      this.$refs.guideCardBatchHandle.getAllApproveData(item)
    },
    //DNC-设备结构树指派产品结构树
    handleEquipmentAssignProductApproval(item) {
      console.log('item----->', item)
      this.selectEquipmentSealUpData = item
      this.$refs.assignEquipmentFileStreamHandle.clearTableSource()
      this.$refs.assignEquipmentFileStreamHandle.getAllApproveData(item)
    }
  }
};
</script>
<style scoped>
.todo-container {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  /* æ–°å¢žï¼šè®¾ç½®å®¹å™¨æœ€å¤§é«˜åº¦ï¼ˆå¯æ ¹æ®é¡µé¢å¸ƒå±€è°ƒæ•´ï¼Œå¦‚500px/80vh） */
  max-height: 100vh;
  /* æ–°å¢žï¼šåž‚直方向溢出时显示滚动条，水平方向溢出隐藏（避免布局错乱） */
  overflow-y: auto;
  overflow-x: hidden;
  /* å¯é€‰ï¼šæ·»åŠ æ»šåŠ¨æ¡æ ·å¼ä¼˜åŒ–（适配Chrome/Safari，可选） */
  &::-webkit-scrollbar {
    width: 6px; /* æ»šåŠ¨æ¡å®½åº¦ */
<style scoped lang="less">
  .list-container {
    height: 100%;
    /deep/ .ant-spin-nested-loading, /deep/ .ant-spin-container {
      height: 100%;
    }
  }
  &::-webkit-scrollbar-thumb {
    background-color: #e5e7eb; /* æ»šåŠ¨æ¡æ»‘块颜色 */
    border-radius: 3px; /* æ»šåŠ¨æ¡åœ†è§’ */
  }
  &::-webkit-scrollbar-track {
    background-color: #f9fafb; /* æ»šåŠ¨æ¡è½¨é“颜色 */
  }
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  position: relative;
  min-width: 300px;
  box-sizing: border-box;
  cursor: pointer;
}
.todo-title {
  flex: 1;
  margin-right: 100px;
  font-size: 14px;

}
.todo-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 120px;
  font-size: 12px;
}
.todo-node {
  margin-bottom: 5px;
  white-space: nowrap;
}
.el-dropdown {
  width: 100%;
}
.el-dropdown-menu {
  min-width: 200px;
  align-items: center;
}
</style>

 src/views/dashboard/dncIndex/DncManagerSignage.vue

@@ -77,7 +77,7 @@
}
.home-container {
  display: flex;
  min-height: 100vh;
  height: 100vh;
  padding: 5px;
  box-sizing: border-box;
  gap: 16px;

 src/views/dashboard/eamIndex/EamManagerSignage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,435 @@
<template>
  <div class="outer-container">
    <div class="left-container">
      <a-card title="技术状态">
        <a-spin class="spinning-container" :spinning="spinning1">
          <div id="tech_condition_chart" style="width:100%;height: 100%;"></div>
        </a-spin>
      </a-card>

      <a-card title="设备报修故障">
        <a-spin class="spinning-container" :spinning="spinning2">
          <div id="warranty_malfunction_chart" style="width:100%;height: 100%;"></div>
        </a-spin>
      </a-card>
    </div>


    <div class="right-container">
      <div class="right-top-container">
        <a-card title="三保计划">
          <div class="support-plan-container">
            <div v-for="(item,index) in maintenanceEleList" :key="index" class="support-plan-item">
              <div>{{item.planTime}}</div>
              <div class="plan-value-container">
                <div class="plan-value">{{$data.thirdMaintenanceParams[item.planValueLabel]}}</div>
                <div>台</div>
              </div>
            </div>
          </div>
        </a-card>
        <a-card title="二保计划">
          <div class="support-plan-container">
            <div v-for="(item,index) in maintenanceEleList" :key="index" class="support-plan-item">
              <div>{{item.planTime}}</div>
              <div class="plan-value-container">
                <div class="plan-value">{{$data.secondMaintenanceParams[item.planValueLabel]}}</div>
                <div>台</div>
              </div>
            </div>
          </div>
        </a-card>
      </div>

      <a-card title="我的待办" class="right-bottom-container">
        <a slot="extra" href="#" @click="$router.push('/flowable/workflow/FlowTodo')">更多</a>

        <todo-list ref="todoList"
                   :defaultCategories="['equipment_transfer','equipment_scrap','spare_part_apply','equipment_seal_up','equipment_unseal','equipment_return','sbdjApproval','eam_repair','equipment_lean_out','second_maintenance','third_maintenance']"
        />
      </a-card>
    </div>
  </div>
</template>

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

  export default {
    name: 'EamManagerSignage',
    components: { TodoList },
    data() {
      return {
        spinning1: false,
        spinning2: false,
        techConditionChart: '',
        warrantyMalfunctionChart: '',
        thirdMaintenanceParams: {
          thisMonthMaintenancePlanNum: 0,
          thisMonthMaintenanceRealNum: 0,
          nextMonthMaintenancePlanNum: 0,
          maintenanceOverdueNum: 0
        },
        secondMaintenanceParams: {
          thisMonthMaintenancePlanNum: 0,
          thisMonthMaintenanceRealNum: 0,
          nextMonthMaintenancePlanNum: 0,
          maintenanceOverdueNum: 0
        },
        maintenanceEleList: [
          {
            planTime: '本月计划',
            planValueLabel: 'thisMonthMaintenancePlanNum',
            backgroundColor: '#719D8E',
            code: 'bysbzs'
          },
          {
            planTime: '本月完成',
            planValueLabel: 'thisMonthMaintenanceRealNum',
            backgroundColor: '#409EFF',
            code: 'bwc'
          },
          {
            planTime: '下月计划',
            planValueLabel: 'nextMonthMaintenancePlanNum',
            backgroundColor: '#A8985D',
            code: 'xysb'
          },
          {
            planTime: '超期',
            planValueLabel: 'maintenanceOverdueNum',
            backgroundColor: '#E86A6A',
            code: ''
          }
        ]
      }
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.getChartDataByApi()
      this.$refs.todoList.loadData(1)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      /* è°ƒç”¨æŽ¥å£èŽ·å–图表数据汇总方法 */
      getChartDataByApi() {
        this.getTechConditionDataByApi()
        this.getWarrantyMalfunctionDataByApi()
        this.getThirdMaintenanceConditionByApi()
        this.getSecondMaintenanceConditionByApi()
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–技术状态 */
      getTechConditionDataByApi() {
        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
        this.spinning1 = true
        signageApi.getEquipmentTechnologyStatusApi()
          .then(res => {
            if (res.success && res.result) {
              this.techConditionData = [
                {
                  value: res.result.length > 0 ? res.result[0].qualifiedCount : 0,
                  name: '合格'
                },
                {
                  value: res.result.length > 0 ? res.result[0].limitedUseCount : 0,
                  name: '限用'
                },
                {
                  value: res.result.length > 0 ? res.result[0].disabledCount : 0,
                  name: '禁用'
                }
              ]
              this.drawTechConditionChart()
            }
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–故障报修 */
      getWarrantyMalfunctionDataByApi() {
        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
        this.spinning2 = true
        signageApi.getReportRepairEquipmentApi()
          .then(res => {
            if (res.success && res.result) {
              this.warrantyMalfunctionData = [
                {
                  value: res.result.length > 0 ? res.result[0].noStopCount : 0,
                  name: '运行'
                },
                {
                  value: res.result.length > 0 ? res.result[0].failurTotalCount : 0,
                  name: '报修'
                },
                {
                  value: res.result.length > 0 ? res.result[0].stopCount : 0,
                  name: '停机'
                }
              ]
              this.drawWarrantyMalfunctionChart()
            }
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–三保情况 */
      getThirdMaintenanceConditionByApi() {
        signageApi.getThirdMaintenancePlanApi()
          .then(res => {
            if (res.success && res.result) {
              this.thirdMaintenanceParams.thisMonthMaintenancePlanNum = res.result.thisMonthCount
              this.thirdMaintenanceParams.thisMonthMaintenanceRealNum = res.result.thisMonthFinishCount
              this.thirdMaintenanceParams.nextMonthMaintenancePlanNum = res.result.nextMonthCount
              this.thirdMaintenanceParams.maintenanceOverdueNum = res.result.thisMonthOverdueCount
            }
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–二保情况 */
      getSecondMaintenanceConditionByApi() {
        signageApi.getSecondMaintenancePlanApi()
          .then(res => {
            if (res.success && res.result) {
              this.secondMaintenanceParams.thisMonthMaintenancePlanNum = res.result.thisMonthCount
              this.secondMaintenanceParams.thisMonthMaintenanceRealNum = res.result.thisMonthFinishCount
              this.secondMaintenanceParams.nextMonthMaintenancePlanNum = res.result.nextMonthCount
              this.secondMaintenanceParams.maintenanceOverdueNum = res.result.thisMonthOverdueCount
            }
          })
      },

      /* ç»˜åˆ¶æŠ€æœ¯çŠ¶æ€é¥¼å›¾ */
      drawTechConditionChart() {
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
                '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}（${params.percent}%）`
            }
          },
          legend: {
            bottom: 0,
            right: 'center',
            itemWidth: 14,
            itemHeight: 14,
            itemGap: 15,
            textStyle: {
              color: 'inherit',
              fontSize: 14
            },
            data: ['合格', '限用', '禁用']
          },
          grid: {
            containLabel: true
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '55%'],
              center: ['50%', '40%'],
              color: [
                '#4DC794',
                '#3DB1F6',
                '#F76E6D'
              ],
              label: {
                position: 'outside',
                show: true,
                color: 'inherit',
                fontSize: 16,
                formatter: function(params) {
                  if (params.name !== '') {
                    return `${params.name}:${params.value}`
                  }
                }
              },
              labelLine: {
                show: true,
                length2: 15,
                length: 15,
                lineStyle: {
                  color: 'rgba(0,0,0,.45)'
                }
              },
              data: this.techConditionData
            }
          ]
        }
        this.techConditionChart.setOption(option, true)
        this.spinning1 = false
      },

      /* ç»˜åˆ¶è®¾å¤‡æŠ¥ä¿®æ•…障饼图 */
      drawWarrantyMalfunctionChart() {
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
                '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}（${params.percent}%）`
            }
          },
          legend: {
            bottom: 0,
            right: 'center',
            itemWidth: 14,
            itemHeight: 14,
            itemGap: 15,
            textStyle: {
              color: 'inherit',
              fontSize: 14
            },
            data: ['运行', '报修', '停机']
          },
          grid: {
            containLabel: true
          },
          series: {
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '40%'],
            color: [
              '#4DC794',
              '#3DB1F6',
              '#F76E6D'
            ],
            label: {
              position: 'outside',
              show: true,
              color: 'inherit',
              fontSize: 16,
              formatter: function(params) {
                if (params.name !== '') {
                  return `${params.name}:${params.value}`
                }
              }
            },
            labelLine: {
              show: true,
              length2: 15,
              length: 15
            },
            data: this.warrantyMalfunctionData
          }
        }
        this.warrantyMalfunctionChart.setOption(option, true)
        this.spinning2 = false
      },

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

<style scoped lang="less">
  @container-margin: 10px;

  .outer-container {
    display: flex;
    justify-content: space-between;
    height: 100vh;

    .left-container {
      width: 30%;
      height: 100%;
      margin-right: @container-margin;

      & > div:first-child {
        margin-bottom: @container-margin;
      }

      /deep/ .ant-card {
        height: calc(100% / 2 - (@container-margin / 2));
        display: flex;
        flex-direction: column;

        .ant-card-body {
          flex: 1;
        }
      }
    }

    .right-container {
      width: 70%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .right-top-container {
        display: flex;
        margin-bottom: @container-margin;

        /deep/ .ant-card {
          flex: 1;

          &:first-child {
            margin-right: @container-margin;
          }
          .ant-card-body {
            padding: 0;
          }
        }

        .support-plan-container {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;

          .support-plan-item {
            border-radius: 3px;
            width: calc(100% / 2);
            padding: 25px;
            text-align: center;
            border-left: 1px solid #e8e8e8;
            border-bottom: 1px solid #e8e8e8;

            .plan-value-container {
              margin-top: 5px;
              display: flex;
              justify-content: center;
              align-items: center;

              .plan-value {
                margin-right: 10px;
                font-size: 30px;
              }
            }
          }
        }
      }

      .right-bottom-container {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        & ::-webkit-scrollbar {
          width: 6px; /* æ»šåŠ¨æ¡å®½åº¦ */
        }

        /deep/ .ant-card-body {
          padding: 6px 24px 12px;
          flex: 1;
          overflow: auto;
        }
      }
    }
  }

  .spinning-container {
    height: 100%;
    /deep/ .ant-spin-container {
      height: 100%;
    }
  }
</style>