From 2599e052377b665651fa4c6e052ca8ae58b81098 Mon Sep 17 00:00:00 2001 From: Lius <Lius2225@163.com> Date: 星期一, 25 八月 2025 15:52:03 +0800 Subject: [PATCH] mdc模块更新 --- src/assets/orange.png | 0 src/views/mdc/base/EquipmentStandbyShutDown.vue | 121 src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue | 383 - src/views/mdc/base/MdcWorkshopSignage.vue | 237 src/views/mdc/base/equipmentAvailCompare.vue | 6 src/views/mdc/base/modules/EquipmentDayAvail/EquipmentDayAvailMain.vue | 334 - src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue | 526 - src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisPie.vue | 128 src/views/mdc/base/modules/mdcParameter/MdcParameterModal.vue | 131 src/views/mdc/base/modules/DeviceLog/LogInfo.vue | 435 - src/views/mdc/base/modules/DeviceLog/AlarmLogList.vue | 63 src/views/mdc/base/EfficiencyPunchReport.vue | 164 src/views/mdc/base/modules/alarmManager/alarmManagerEdit.vue | 2 src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue | 11 src/views/mdc/base/DeviceLog.vue | 2 src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue | 1091 ++-- src/views/mdc/base/DeviceBaseInfo.vue | 180 src/views/mdc/base/OEEAnalysis.vue | 82 src/views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownList.vue | 221 + src/views/mdc/base/modules/PartsMatchingManagement/PartsMatchingList.vue | 321 + src/views/mdc/base/modules/alarmManager/alarmManagerForm.vue | 2 src/views/mdc/base/modules/DeviceLog/FaultLogList.vue | 125 src/views/mdc/base/modules/OEEAnalysis/ComputeOeeModal.vue | 86 src/views/mdc/base/modules/EquipmentAvailCompare/EquipmentAvailCompareMain.vue | 292 - src/views/mdc/base/MdcEquipmentTypeList.vue | 33 src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue | 452 - src/views/mdc/base/StatisticsChart.vue | 36 src/views/mdc/base/StatisticalAnalysis.vue | 38 src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue | 1047 ++-- src/views/mdc/base/DeviceParamThresholdManagement.vue | 2 src/views/mdc/base/PartsMatchingManagement.vue | 82 src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue | 732 +- src/views/mdc/base/modules/PartsMatchingManagement/PartsMatchingForm.vue | 189 src/views/mdc/base/modules/PartsMatchingManagement/PartsMatchingModal.vue | 64 src/views/mdc/base/modules/EquipmentShutDownReasonList/EquipmentShutDownReasonModal.vue | 159 src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue | 68 src/views/mdc/base/modules/DeviceLog/WorkHistoryModel.vue | 321 src/views/mdc/base/EquipmentList.vue | 15 src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue | 739 +-- src/views/mdc/base/EquipmentShutDownReasonList.vue | 170 src/views/mdc/base/AlarmManager.vue | 88 src/views/mdc/base/modules/DeviceBaseInfo/EquipmentDetailModal.vue | 558 +- src/views/mdc/base/MdcParameterList.vue | 173 src/views/mdc/base/modules/DeviceParamThresholdManagement/ParamThresholdModal.vue | 3 src/views/mdc/base/modules/DeviceLog/LogList.vue | 78 src/views/system/ProductionManager.vue | 38 src/views/mdc/base/modules/DeviceBaseInfo/EquipmentList.vue | 185 src/views/mdc/base/modules/shift/ShiftInfo.vue | 2 src/views/mdc/base/modules/EquipmentList/DeviceListModal.vue | 205 src/views/mdc/base/modules/DeviceBaseInfo/EquipmentLayout.vue | 147 src/views/mdc/base/ContrastiveAnalysis.vue | 45 src/views/mdc/base/modules/EquipmentList/UserModal.vue | 496 - src/views/system/UserList.vue | 146 src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue | 306 + src/views/system/DepartList.vue | 10 src/views/mdc/base/equipmentDayAvail.vue | 46 src/views/mdc/base/modules/DeviceLog/WorkChartModel.vue | 175 src/views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownModal.vue | 389 + src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue | 97 src/views/mdc/base/modules/deviceCalendar/DeviceCalendarModel.vue | 31 src/views/mdc/base/modules/shift/ShiftSystem.vue | 156 src/views/mdc/base/modules/DeviceLog/WorkLogList.vue | 136 62 files changed, 6,582 insertions(+), 6,018 deletions(-) diff --git a/src/assets/orange.png b/src/assets/orange.png new file mode 100644 index 0000000..02b4076 --- /dev/null +++ b/src/assets/orange.png Binary files differ diff --git a/src/views/mdc/base/AlarmManager.vue b/src/views/mdc/base/AlarmManager.vue index 04620a2..675f512 100644 --- a/src/views/mdc/base/AlarmManager.vue +++ b/src/views/mdc/base/AlarmManager.vue @@ -7,32 +7,6 @@ @keyup.enter.native="searchQuery" > <a-row :gutter="24"> - <!--<a-col--> - <!--:xl="4"--> - <!--:lg="4"--> - <!--:md="4"--> - <!--:sm="24"--> - <!-->--> - <!--<a-form-item label="璁惧缂栧彿">--> - <!--<a-input--> - <!--placeholder="璇疯緭鍏ヨ澶囩紪鍙�"--> - <!--v-model="queryParam.equipmentId"--> - <!--></a-input>--> - <!--</a-form-item>--> - <!--</a-col>--> - <!--<a-col--> - <!--:xl="4"--> - <!--:lg="4"--> - <!--:md="4"--> - <!--:sm="24"--> - <!-->--> - <!--<a-form-item label="璁惧鍚嶇О">--> - <!--<a-input--> - <!--placeholder="璇疯緭鍏ヨ澶囧悕绉�"--> - <!--v-model="queryParam.equipmentName"--> - <!--></a-input>--> - <!--</a-form-item>--> - <!--</a-col>--> <a-col :xl="6" :lg="7" @@ -40,11 +14,6 @@ :sm="24" > <a-form-item label="鎺у埗绯荤粺绫诲瀷"> - <!--<j-dict-select-tag--> - <!--placeholder="璇烽�夋嫨鎺у埗绯荤粺绫诲瀷"--> - <!--v-model="queryParam.driveType"--> - <!--dictCode="mdc_driveType"--> - <!--/>--> <a-auto-complete v-model="queryParam.driveType" :data-source="driveTypeList" @@ -102,13 +71,6 @@ icon="reload" style="margin-left: 8px" >閲嶇疆</a-button> - <!--<a--> - <!--@click="handleToggleSearch"--> - <!--style="margin-left: 8px"--> - <!-->--> - <!--{{ toggleSearchStatus ? '鏀惰捣' : '灞曞紑' }}--> - <!--<a-icon :type="toggleSearchStatus ? 'up' : 'down'" />--> - <!--</a>--> </span> </a-col> </a-row> @@ -123,24 +85,6 @@ type="primary" icon="plus" >鏂板</a-button> - <!--<a-button--> - <!--@click="handleAdd"--> - <!--type="primary"--> - <!--icon="plus"--> - <!-->璁惧鏂板</a-button>--> - <!--<a-upload--> - <!--name="file"--> - <!--:showUploadList="false"--> - <!--:multiple="false"--> - <!--:headers="tokenHeader"--> - <!--:action="importExcelUrl"--> - <!--@change="handleImportExcel"--> - <!-->--> - <!--<a-button--> - <!--type="primary"--> - <!--icon="import"--> - <!-->瀵煎叆</a-button>--> - <!--</a-upload>--> <a-dropdown v-if="selectedRowKeys.length > 0"> <a-menu slot="overlay"> <a-menu-item @@ -202,18 +146,15 @@ </a-table> </div> - <!--<alarm-manager-modal ref="modalForm" @ok="modalFormOk"></alarm-manager-modal>--> <alarm-manager-form ref="modalFormType" @ok="modalFormOk" :driveTypeList="driveTypeList" :filterOption="filterOption"></alarm-manager-form> <alarm-manager-edit ref="modalFormEdit" @ok="modalFormOk"></alarm-manager-edit> </a-card> </template> <script> - import '@/assets/less/TableExpand.less' import { mixinDevice } from '@/utils/mixin' import { JeecgListMixin } from '@/mixins/JeecgListMixin' - // import MdcDriveTypeParamConfigModal from './modules/mdcDriveTypeParamConfig/MdcDriveTypeParamConfigModal' import AlarmManagerModal from './modules/alarmManager/alarmManagerModal' import AlarmManagerForm from './modules/alarmManager/alarmManagerForm' import AlarmManagerEdit from './modules/alarmManager/alarmManagerEdit' @@ -255,29 +196,15 @@ return parseInt(index) + 1; } }, - // { - // title: '璁惧缂栧彿', - // align: "center", - // // sorter: true, - // dataIndex: 'equipmentId' - // }, - // { - // title: '璁惧鍚嶇О', - // align: "center", - // // sorter: true, - // dataIndex: 'equipmentName' - // }, { title: '鎶ヨ鍙�', align: "center", - // sorter: true, dataIndex: 'alarmCode', width:400 }, { title: '鎶ヨ鍐呭', align: "center", - // sorter: true, dataIndex: 'alarmContent', width:400 }, @@ -285,22 +212,14 @@ { title: '璁惧椹卞姩绫诲瀷', align: "center", - // sorter: true, dataIndex: 'driveType', width:400 }, - // { - // title: '鏄惁杩囨护', - // align: "center", - // dataIndex: 'isUse', - // customRender: (text) => (text ? filterMultiDictText(this.dictOptions['isUse'], text) : ''), - // }, { dataIndex:'isUse_dictText', title: '鏄惁鍚敤', align: "center", width:380 - // dictCode:'alarm_is_use' }, { title: '鎿嶄綔', @@ -328,11 +247,6 @@ this.getSuperFieldList(); this.getDriveTypeByApi() }, - computed: { - // importExcelUrl: function () { - // return `${window._CONFIG['domianURL']}${this.url.importExcelUrl}`; - // }, - }, methods: { handleEdit: function (record) { this.$refs.modalFormEdit.edit(record); @@ -343,8 +257,6 @@ this.$refs.modalFormType.add(); this.$refs.modalFormType.title = "鏂板"; this.$refs.modalFormType.disableSubmit = false - }, - initDictConfig() { }, getSuperFieldList() { let fieldList = []; diff --git a/src/views/mdc/base/ContrastiveAnalysis.vue b/src/views/mdc/base/ContrastiveAnalysis.vue index 5688466..96dbcf8 100644 --- a/src/views/mdc/base/ContrastiveAnalysis.vue +++ b/src/views/mdc/base/ContrastiveAnalysis.vue @@ -1,6 +1,6 @@ <template> <a-card :bordered="false"> - <div style="width: 100%; height: 100%;overflow: hidden"> + <div> <a-row type="flex" :gutter="16"> <a-col :md="5"> <a-tabs :activeKey="activeKey" @change="tabChange"> @@ -13,7 +13,8 @@ </a-tabs> </a-col> <a-col :md="24-5" :sm="24"> - <ComparativeAnalysisMain ref="ComparativeAnalysisMain" :nodeTree='selectEquement' :nodePeople='selectPeople' :Type="slectTypeTree"></ComparativeAnalysisMain> + <ComparativeAnalysisMain ref="ComparativeAnalysisMain" :nodeTree='selectEquipment' :nodePeople='selectPeople' + :Type="selectTypeTree"/> </a-col> </a-row> </div> @@ -24,10 +25,11 @@ import BaseTree from '../common/BaseTree' import ComparativeAnalysisMain from './modules/comparativeAnalysis/ComparativeAnalysisMain' import DepartTree from './modules/DepartList/DepartListTree/DepartTree' - import {mapActions} from 'vuex' + import { mapActions } from 'vuex' + export default { name: 'comparativeAnalysis', - components:{ + components: { BaseTree, ComparativeAnalysisMain, DepartTree @@ -35,15 +37,11 @@ data() { return { activeKey: '1', - description: '璁惧淇℃伅', - selectEquementId: '', - selectEquement: {}, - selectPeople:{}, - slectTypeTree: '', - url: { - equipmentStatistics: '/mdc/equipment/equipmentStatistics' - }, - isDepartType:'', + selectEquipmentId: '', + selectEquipment: {}, + selectPeople: {}, + selectTypeTree: '', + isDepartType: '' } }, created() { @@ -56,31 +54,26 @@ if (res.success) { this.isDepartType = res.result[0].value } else { - // this.$message.warn(res.message) this.$notification.warning({ - message:'娑堟伅', - description:res.message - }); + message: '娑堟伅', + description: res.message + }) } - }).finally(() =>{ + }).finally(() => { }) }, tabChange(val) { // console.log(val) this.activeKey = val - this.slectTypeTree = val + this.selectTypeTree = val }, - /* changeSelection(val) { - this.selectEquementId = val - this.$refs.DeviceRepairList.pQuery(val) - },*/ changeSelectionNode(val) { - this.selectEquement = val - this.slectTypeTree = '1' + this.selectEquipment = val + this.selectTypeTree = '1' }, changeSelectionNodedd(val) { this.selectPeople = val - this.slectTypeTree = '2' + this.selectTypeTree = '2' } } } diff --git a/src/views/mdc/base/DeviceBaseInfo.vue b/src/views/mdc/base/DeviceBaseInfo.vue index 908c680..15f550c 100644 --- a/src/views/mdc/base/DeviceBaseInfo.vue +++ b/src/views/mdc/base/DeviceBaseInfo.vue @@ -1,4 +1,4 @@ -4<template> +<template> <a-card :bordered="false"> <a-row type="flex" :gutter="16"> <a-col :md="5" :sm="24"> @@ -7,39 +7,29 @@ <a-col :md="24-5" :sm="24"> <div class="device-status-info"> <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info"> - <template v-if="item.value!=99"> - <div>{{ item.label }}</div> - <div class="status-square" :style="{ backgroundColor: item.color }"></div> - <div>{{getDeviceNumberByStatus(item.value) }}</div> - </template> - <template v-else> - <div>{{ item.label }}</div> - <div>{{getDeviceNumberByStatus(item.value) }}</div> - </template> + <div>{{ item.label }}</div> + <div v-if="item.value!=99" class="status-square" :style="{ backgroundColor: item.color }"></div> + <div>{{getDeviceNumberByStatus(item.value) }}</div> </a-space> </div> <div> <a-tabs default-active-key="1"> <a-tab-pane key="1" tab="甯冨眬鍥�"> - <equipment-layout :dataList="dataList" :equipmentId="selectEquipmentId" - :node="selectEquipment"></equipment-layout> + <equipment-layout :dataList="dataList" :equipmentId="selectEquipmentId" :node="selectEquipment"/> </a-tab-pane> <a-tab-pane key="2" tab="鍒楄〃" force-render> - <equipment-list :dataSource="dataList" @editEquipmentStatus="editEquipmentStatus"></equipment-list> + <equipment-list :dataSource="dataList"/> </a-tab-pane> </a-tabs> </div> </a-col> </a-row> - - </a-card> </template> <script> - import { putAction, getAction } from '@/api/manage' - import { JeecgListMixin } from '@/mixins/JeecgListMixin' + import { getAction } from '@/api/manage' import BaseTree from '../common/BaseTree' import EquipmentLayout from './modules/DeviceBaseInfo/EquipmentLayout' import EquipmentList from './modules/DeviceBaseInfo/EquipmentList' @@ -58,14 +48,8 @@ selectEquipment: {}, equipmentStatisticsInfo: {}, dataList: [], - standbyNumber: 0, - offNumber: 0, - warningNumber: 0, - workNumber: 0, - allNumber: 0, url: { - list: '/mdc/mdcEquipment/queryEquipmentMonitorList', - updateEquipmentStatus: '/mdc/mdcEquipment/updateEquipmentStatus' + list: '/mdc/mdcEquipment/queryEquipmentMonitorList' }, param: {}, timer: null, @@ -91,9 +75,9 @@ color: '#FF0000' }, { - label: '寮傚父', - value: 33, - color: '#FFA200' + label: '鏁呴殰', + value: 5, + color: '#C11900' }, { label: '鎬绘暟', @@ -109,67 +93,44 @@ }, methods: { equipmentStatistics(param, resopnse = { key: false }) { - getAction(this.url.list, param).then((res) => { - this.dataList = [] - if (res.success) { - if (res.result.length != 0) { - this.standbyNumber = 0 - this.offNumber = 0 - this.warningNumber = 0 - this.workNumber = 0 - this.allNumber = 0 - this.dataList = res.result - this.allNumber = this.dataList.length - if (resopnse.key) { - this.$notification.success({ - key: 'equipmentStatus', + getAction(this.url.list, param) + .then((res) => { + this.dataList = [] + if (res.success) { + if (res.result.length != 0) { + this.dataList = res.result + if (resopnse.key) { + this.$notification.success({ + key: 'equipmentStatus', + message: '娑堟伅', + description: resopnse.message + }) + } + + // 绛涢�変粠杞︽澘璺宠浆杩囨潵鐨勯渶姹傛暟鎹� + const { signageData } = this.$route.params + console.log('signageData', signageData) + if (!signageData) return + else this.filterDataList(signageData) + } else { + this.$notification.warning({ message: '娑堟伅', - description: resopnse.message + description: '姝よ溅闂翠笅闈㈡棤璁惧锛侊紒' }) } - for (let i = 0; i < this.dataList.length; i++) { - let item = this.dataList[i] - switch (item.oporationDict) { - case '寰呮満' : - this.standbyNumber = this.standbyNumber + 1 - break - case '杩愯' : - this.workNumber = this.workNumber + 1 - break - case '鍏虫満' : - this.offNumber = this.offNumber + 1 - break - case '鎶ヨ' : - this.warningNumber = this.warningNumber + 1 - break - default: - break - } - } - - // 绛涢�変粠杞︽澘璺宠浆杩囨潵鐨勯渶姹傛暟鎹� - const { signageData } = this.$route.params - console.log('signageData', signageData) - if (!signageData) return - else this.filterDataList(signageData) - } else { + } + else { this.$notification.warning({ message: '娑堟伅', - description: '姝よ溅闂翠笅闈㈡棤璁惧锛侊紒' + description: res.message }) } - } else { - this.$notification.warning({ - message: '娑堟伅', - description: res.message - }) - } - }) + }) }, /** * 绛涢�夋弧瓒充粠鐪嬫澘璺宠浆杩囨潵鏃剁殑鏉′欢鐨勬暟鎹� - * @param record + * @param signageData */ filterDataList(signageData) { this.dataList = this.dataList.filter(item => item.oporationDict === signageData.name) @@ -182,49 +143,12 @@ this.selectEquipment = val.equipmentId clearInterval(this.timer) this.timer = null - if (!val.equipmentId) { - this.param.key = val.key - this.equipmentStatistics(this.param) - this.timer = setInterval(() => { - setTimeout(this.equipmentStatistics(this.param), 0) - }, 1000 * 10) - } else { - this.param.key = val.parentId - this.equipmentStatistics(this.param) - this.timer = setInterval(() => { - setTimeout(this.equipmentStatistics(this.param), 0) - }, 1000 * 10) - } - }, - - /** - * 鍗曞嚮鐘舵�佸弽棣堝悗瑙﹀彂 - * @param record - */ - editEquipmentStatus(record) { - const _this = this - this.$notification.info({ - key: 'equipmentStatus', - message: '娑堟伅', - description: '鍙嶉涓�...' - }) - getAction(this.url.updateEquipmentStatus, { id: record.id }) - .then(res => { - if (res.success) { - _this.equipmentStatistics(this.param, { key: true, message: res.message }) - } else { - this.$notification.warning({ - message: '娑堟伅', - description: res.message - }) - } - }) - .catch(err => { - this.$notification.error({ - message: '娑堟伅', - description: err.message - }) - }) + if (!val.equipmentId) this.param.key = val.key + else this.param.key = val.parentId + this.equipmentStatistics(this.param) + this.timer = setInterval(() => { + setTimeout(this.equipmentStatistics(this.param), 0) + }, 1000 * 10) }, /** @@ -269,22 +193,6 @@ display: inline-block; width: 15px; height: 15px; - } - - .equipMessage table td .equipShutdown { - background-color: #808080; - } - - .equipMessage table td .standbyNumber { - background-color: #ffbf37; - } - - .equipMessage table td .equipRun { - background-color: #19FE01; - } - - .equipMessage table td .equipAlarm { - background-color: #FD0008; } .device-status-info { diff --git a/src/views/mdc/base/DeviceLog.vue b/src/views/mdc/base/DeviceLog.vue index 45817e3..303d4fe 100644 --- a/src/views/mdc/base/DeviceLog.vue +++ b/src/views/mdc/base/DeviceLog.vue @@ -6,7 +6,7 @@ <base-tree @getCurrSelected="changeSelectionNode"></base-tree> </a-col> <a-col :md="24-5" :sm="24"> - <log-info :equipment="selectEquipment"></log-info> + <log-info :equipment="selectEquipment" @initEquipment="changeSelectionNode"></log-info> </a-col> </a-row> </div> diff --git a/src/views/mdc/base/DeviceParamThresholdManagement.vue b/src/views/mdc/base/DeviceParamThresholdManagement.vue index 2ed2a2d..b331e95 100644 --- a/src/views/mdc/base/DeviceParamThresholdManagement.vue +++ b/src/views/mdc/base/DeviceParamThresholdManagement.vue @@ -40,7 +40,7 @@ <!-- 鎿嶄綔鎸夐挳鍖哄煙 --> <div class="table-operator" style="border-top: 5px"> - <a-button @click="handleAdd" type="primary" icon="plus">娣诲姞鍙傛暟闃堝��</a-button> + <a-button @click="handleAdd" type="primary" icon="plus">鏂板</a-button> <a-dropdown v-if="selectedRowKeys.length > 0"> <a-menu slot="overlay" @click="handleMenuClick"> <a-menu-item key="1"> diff --git a/src/views/mdc/base/EfficiencyPunchReport.vue b/src/views/mdc/base/EfficiencyPunchReport.vue new file mode 100644 index 0000000..a67850d --- /dev/null +++ b/src/views/mdc/base/EfficiencyPunchReport.vue @@ -0,0 +1,164 @@ +<template> + <a-card :bordered="false"> + + <!-- 鏌ヨ鍖哄煙 --> + <div class="table-page-search-wrapper"> + <a-form layout="inline" @keyup.enter.native="searchQuery"> + <a-row :gutter="24"> + <a-col :xl="4" :lg="5" :md="6" :sm="24"> + <a-form-item label="璁板綍鏃堕棿"> + <a-date-picker value-format="YYYYMMDD" :allowClear="false" v-model="queryParam.theDate" + style="width: 100%"/> + </a-form-item> + </a-col> + <a-col :xl="4" :lg="5" :md="6" :sm="24"> + <a-form-item label="鐝"> + <j-dict-select-tag v-model="queryParam.shiftSchedule" dictCode="shift_schedule" + placeholder="璇烽�夋嫨鐝"></j-dict-select-tag> + </a-form-item> + </a-col> + <a-col :xl="6" :lg="7" :md="8" :sm="24"> + <a-space> + <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> + <a-button type="info" @click="searchReset" icon="reload">閲嶇疆</a-button> + </a-space> + </a-col> + </a-row> + </a-form> + </div> + + <!-- 鎿嶄綔鎸夐挳鍖哄煙 --> + <div class="table-operator"> + <a-button type="primary" icon="download" @click="handleExportXls('璁惧鎵撳崱鐜囨姤琛�')">瀵煎嚭</a-button> + </div> + + <!-- table鍖哄煙-begin --> + <div> + <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;"> + <i class="anticon anticon-info-circle ant-alert-icon"></i> 宸查�夋嫨 <a + style="font-weight: 600">{{ selectedRowKeys.length }}</a>椤� + <a style="margin-left: 24px" @click="onClearSelected">娓呯┖</a> + </div> + + <a-table + ref="table" + size="middle" + bordered + rowKey="id" + :columns="columns" + :dataSource="dataSource" + :pagination="ipagination" + :loading="loading" + class="j-table-force-nowrap" + @change="handleTableChange"> + + <span slot="action" slot-scope="text, record"> + <a @click="handleDetail(record)">璇︽儏</a> + </span> + </a-table> + </div> + <!-- table鍖哄煙-end --> + </a-card> +</template> + +<script> + import moment from 'moment' + import { JeecgListMixin } from '@/mixins/JeecgListMixin' + + export default { + name: 'EfficiencyPunchReport', + mixins: [JeecgListMixin], + data() { + return { + queryParam: { + theDate: moment().add(-1, 'days').format('YYYYMMDD') // 榛樿璁剧疆涓烘槰澶� + }, + description: '璁惧鎵撳崱鐜�', + // 琛ㄥご + columns: [ + { + title: '#', + dataIndex: '', + key: 'rowIndex', + width: 60, + align: 'center', + customRender: function(t, r, index) { + return parseInt(index) + 1 + } + }, + { + title: '璁板綍鏃堕棿', + align: 'center', + dataIndex: 'theDate' + }, + { + title: '鐝', + align: 'center', + dataIndex: 'shiftSchedule_dictText' + }, + { + title: '鏃╃彮涓婄彮鎵撳崱璁惧鏁伴噺', + align: 'center', + dataIndex: 'mornShiftInNum' + }, + { + title: '鏃╀笅鐝墦鍗¤澶囨暟閲�', + align: 'center', + dataIndex: 'mornShiftOutNum' + }, + { + title: '鏅氱彮涓婄彮鎵撳崱璁惧鏁伴噺', + align: 'center', + dataIndex: 'evenShiftInNum' + }, + { + title: '鏅氱彮涓嬬彮鎵撳崱璁惧鏁伴噺', + align: 'center', + dataIndex: 'evenShiftOutNum' + }, + { + title: '璁惧鎬绘暟', + align: 'center', + dataIndex: 'deviceCountNum' + }, + { + title: '鏃╃彮涓婄彮鎵撳崱鐜�(%)', + align: 'center', + dataIndex: 'mornShiftInRate' + }, + { + title: '鏃╃彮涓嬬彮鎵撳崱鐜�(%)', + align: 'center', + dataIndex: 'mornShiftOutRate' + }, + { + title: '鏅氱彮涓婄彮鎵撳崱鐜�(%)', + align: 'center', + dataIndex: 'evenShiftInRate', + customRender: (text) => { + if (text !== null && text !== undefined) { + return parseFloat(text).toFixed(2) + } + return text + } + }, + { + title: '鏅氱彮涓嬬彮鎵撳崱鐜�(%)', + align: 'center', + dataIndex: 'evenShiftOutRate' + }, + { + title: '鎿嶄綔', + dataIndex: 'action', + align: 'center', + scopedSlots: { customRender: 'action' } + } + ], + url: { + list: '/mdcEquipmentPunchRate/queryPageList', + exportXlsUrl: '/mdcEquipmentPunchRate/exportXls' + } + } + }, + } +</script> \ No newline at end of file diff --git a/src/views/mdc/base/EquipmentList.vue b/src/views/mdc/base/EquipmentList.vue index 6cc55f5..9abfd7a 100644 --- a/src/views/mdc/base/EquipmentList.vue +++ b/src/views/mdc/base/EquipmentList.vue @@ -27,20 +27,6 @@ </a-col> <a-col :md="4" :sm="4"> - <a-form-item label="璁惧绾у埆"> - <j-dict-select-tag placeholder="璇烽�夋嫨璁惧绾у埆" dictCode="device_level" v-model="queryParam.deviceLevel" - allow-clear/> - </a-form-item> - </a-col> - - <a-col :md="4" :sm="4"> - <a-form-item label="璁惧绉嶇被"> - <j-dict-select-tag placeholder="璇烽�夋嫨璁惧绉嶇被" dictCode="device_category" v-model="queryParam.deviceCategory" - allow-clear/> - </a-form-item> - </a-col> - - <a-col :md="4" :sm="4"> <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">閲嶇疆</a-button> </a-col> @@ -77,7 +63,6 @@ <a-table ref="table" bordered - size="middle" rowKey="id" :scroll="{x:'max-content',y:465}" :columns="columns" diff --git a/src/views/mdc/base/EquipmentShutDownReasonList.vue b/src/views/mdc/base/EquipmentShutDownReasonList.vue new file mode 100644 index 0000000..897ce83 --- /dev/null +++ b/src/views/mdc/base/EquipmentShutDownReasonList.vue @@ -0,0 +1,170 @@ +<template> + <a-card :bordered="false"> + <!-- 鏌ヨ鍖哄煙 --> + <div class="table-page-search-wrapper"> + <a-form layout="inline" @keyup.enter.native="searchQuery"> + <a-row :gutter="24"> + <a-col :md="4" :sm="4"> + <a-form-item label="鍋滄満绫诲瀷"> + <a-radio-group v-model="queryParam.downtimeType" placeholder="璇烽�夋嫨鍋滄満绫诲瀷" @change="searchQuery"> + <a-radio :value="0">璁″垝鍋滄満</a-radio> + <a-radio :value="1">闈炶鍒掑仠鏈�</a-radio> + </a-radio-group> + </a-form-item> + </a-col> + + <a-col :md="5" :sm="5"> + <a-form-item label="鍋滄満鍘熷洜鎻忚堪"> + <a-input v-model="queryParam.downtimeDescription" placeholder="璇疯緭鍏ュ仠鏈哄師鍥�"/> + </a-form-item> + </a-col> + + <a-col :md="4" :sm="4"> + <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 class="table-operator"> + <a-button @click="handleAdd" type="primary" icon="plus">鏂板</a-button> + <a-dropdown v-if="selectedRowKeys.length > 0"> + <a-menu slot="overlay" @click="handleMenuClick"> + <a-menu-item key="1"> + <a-icon type="delete" @click="batchDel"/> + 鍒犻櫎 + </a-menu-item> + </a-menu> + <a-button style="margin-left: 8px"> + 鎵归噺鎿嶄綔 + <a-icon type="down"/> + </a-button> + </a-dropdown> + </div> + + <!-- table鍖哄煙-begin --> + <div> + <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;"> + <i class="anticon anticon-info-circle ant-alert-icon"></i>宸查�夋嫨 <a style="font-weight: 600">{{ + selectedRowKeys.length + }}</a>椤� + <a style="margin-left: 24px" @click="onClearSelected">娓呯┖</a> + </div> + + <a-table + ref="table" + bordered + size="middle" + rowKey="id" + :scroll="{x:'max-content',y:600}" + :columns="columns" + :dataSource="dataSource" + :pagination="ipagination" + :loading="loading" + :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" + @change="handleTableChange"> + <template slot="downtimeType" slot-scope="text"> + {{ text === 0 ? '璁″垝鍋滄満' : '闈炶鍒掑仠鏈�' }} + </template> + + <template slot="action" slot-scope="text, record"> + <a @click="handleEdit(record)">缂栬緫</a> + + <a-divider type="vertical"/> + + <a-popconfirm title="纭畾鍒犻櫎鍚�?" @confirm="() => handleDelete(record.id)"> + <a>鍒犻櫎</a> + </a-popconfirm> + </template> + </a-table> + </div> + <!-- table鍖哄煙-end --> + + <EquipmentShutDownReasonModal ref="modalForm" @ok="modalFormOk"/> + </a-card> +</template> + +<script> +import { JeecgListMixin } from '@/mixins/JeecgListMixin' +import EquipmentShutDownReasonModal from '@views/mdc/base/modules/EquipmentShutDownReasonList/EquipmentShutDownReasonModal.vue' + +export default { + name: 'EquipmentShutDownReasonList', + mixins: [JeecgListMixin], + components: { + EquipmentShutDownReasonModal + }, + data() { + return { + queryParam: {}, + /* 鍒嗛〉鍙傛暟 */ + ipagination: { + current: 1, + pageSize: 30, + pageSizeOptions: ['30', '50', '100'], + showTotal: (total, range) => { + return range[0] + '-' + range[1] + ' 鍏�' + total + '鏉�' + }, + showQuickJumper: true, + showSizeChanger: true, + total: 0 + }, + columns: [ + { + title: '#', + dataIndex: '', + key: 'rowIndex', + width: 60, + align: 'center', + customRender: function(t, r, index) { + return parseInt(index) + 1 + } + }, + { + title: '鍋滄満鍘熷洜', + align: 'center', + width: 350, + dataIndex: 'downtimeDescription' + }, + { + title: '鍋滄満绫诲瀷', + align: 'center', + scopedSlots: { customRender: 'downtimeType' }, + dataIndex: 'downtimeType', + width: 350 + }, + { + title: '澶囨敞', + align: 'center', + dataIndex: 'remark', + width: 350 + }, + { + title: '鎿嶄綔', + dataIndex: 'action', + scopedSlots: { customRender: 'action' }, + align: 'center', + width: 150 + } + ], + url: { + list: '/mdc/mdcDowntimeReason/list', + delete: '/mdc/mdcDowntimeReason/delete', + deleteBatch: '/mdc/mdcDowntimeReason/deleteBatch' + } + } + }, + methods: { + handleMenuClick(e) { + if (e.key == 1) { + this.batchDel() + } + } + } + +} +</script> \ No newline at end of file diff --git a/src/views/mdc/base/EquipmentStandbyShutDown.vue b/src/views/mdc/base/EquipmentStandbyShutDown.vue new file mode 100644 index 0000000..a7c4b3d --- /dev/null +++ b/src/views/mdc/base/EquipmentStandbyShutDown.vue @@ -0,0 +1,121 @@ +<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-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"> + <EquipmentStandbyShutdownList :node='selectedEquipment' :Type="selectedTypeTree"/> + </a-col> + </a-row> + </a-card> + </div> + +</template> + +<script> +import BaseTree from '../common/BaseTree' +import DepartTree from './modules/DepartList/DepartListTree/DepartTree' +import { mapActions } from 'vuex' +import EquipmentStandbyShutdownList + from '@views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownList.vue' + +export default { + name: 'EquipmentStandbyShutDown', + components: { + EquipmentStandbyShutdownList, + BaseTree, + DepartTree + }, + data() { + return { + activeKey: '1', + selectedEquipment: {}, + selectedTypeTree: '', + 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 + }) + } + }) + }, + + tabChange(val) { + this.activeKey = val + this.selectedTypeTree = val + }, + changeSelectionNode(val) { + this.selectedEquipment = val + this.selectedTypeTree = '1' + }, + changeSelectionNodedd(val) { + this.selectedEquipment = val + this.selectedTypeTree = '2' + } + } + +} +</script> +<style scoped> +@import '~@assets/less/common.less'; + +.equipMessage { + width: 100%; + height: 10%; +} + +.equipMessage table { + width: 60%; + height: 100%; + line-height: 50%; +} + +.equipMessage table td { + text-align: center; +} + +.equipMessage table td span { + display: inline-block; + width: 15px; + height: 15px; +} + +.equipMessage table td .equipShutdown { + background-color: #808080; +} + +.equipMessage table td .equipStandby { + background-color: #ffbf37; +} + +.equipMessage table td .equipRun { + background-color: #19FE01; +} + +.equipMessage table td .equipAlarm { + background-color: #FD0008; +} +</style> \ No newline at end of file diff --git a/src/views/mdc/base/MdcEquipmentTypeList.vue b/src/views/mdc/base/MdcEquipmentTypeList.vue index 3f6577e..19f15f2 100644 --- a/src/views/mdc/base/MdcEquipmentTypeList.vue +++ b/src/views/mdc/base/MdcEquipmentTypeList.vue @@ -13,10 +13,6 @@ <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">閲嶇疆</a-button> - <!--<a @click="handleToggleSearch" style="margin-left: 8px">--> - <!--{{ toggleSearchStatus ? '鏀惰捣' : '灞曞紑' }}--> - <!--<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>--> - <!--</a>--> </span> </a-col> </a-row> @@ -27,12 +23,6 @@ <!-- 鎿嶄綔鎸夐挳鍖哄煙 --> <div class="table-operator"> <a-button @click="handleAdd" type="primary" icon="plus">鏂板</a-button> - <!--<a-button type="primary" icon="download" @click="handleExportXls('璁惧绫诲瀷')">瀵煎嚭</a-button>--> - <!--<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">--> - <!--<a-button type="primary" icon="import">瀵煎叆</a-button>--> - <!--</a-upload>--> - <!-- 楂樼骇鏌ヨ鍖哄煙 --> - <!--<j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>--> <a-dropdown v-if="selectedRowKeys.length > 0"> <a-menu slot="overlay"> <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>鍒犻櫎</a-menu-item> @@ -62,25 +52,9 @@ @change="handleTableChange" :scroll="{x:'max-content',y:465}" > - - <template slot="htmlSlot" slot-scope="text"> - <div v-html="text"></div> - </template> <template slot="imgSlot" slot-scope="text,record"> <span v-if="!text" style="font-size: 12px;font-style: italic;">鏃犲浘鐗�</span> - <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/> - </template> - <template slot="fileSlot" slot-scope="text"> - <span v-if="!text" style="font-size: 12px;font-style: italic;">鏃犳枃浠�</span> - <a-button - v-else - :ghost="true" - type="primary" - icon="download" - size="small" - @click="downloadFile(text)"> - 涓嬭浇 - </a-button> + <img v-else :src="getImgView(text)" :preview="record.id" height="20" alt="" style="max-width:80px;"/> </template> <span slot="action" slot-scope="text, record"> @@ -101,7 +75,6 @@ </a-menu> </a-dropdown> </span> - </a-table> </div> @@ -192,7 +165,7 @@ } }, created() { - this.$set(this.dictOptions, 'equipmentTypeStates', [{text:'鏄�',value:'Y'},{text:'鍚�',value:'N'}]) + this.$set(this.dictOptions, 'equipmentTypeStates', [{text:'鍚敤',value:'Y'},{text:'鍏抽棴',value:'N'}]) this.getSuperFieldList(); }, computed: { @@ -201,8 +174,6 @@ }, }, methods: { - initDictConfig(){ - }, getSuperFieldList(){ let fieldList=[]; fieldList.push({type:'string',value:'equipmentTypeName',text:'璁惧绫诲瀷鍚嶇О',dictCode:''}) diff --git a/src/views/mdc/base/MdcParameterList.vue b/src/views/mdc/base/MdcParameterList.vue new file mode 100644 index 0000000..a936f8e --- /dev/null +++ b/src/views/mdc/base/MdcParameterList.vue @@ -0,0 +1,173 @@ +<template> + <a-card :bordered="false"> + + <!-- 鏌ヨ鍖哄煙 --> + <div class="table-page-search-wrapper"> + <a-form layout="inline" @keyup.enter.native="searchQuery"> + <a-row :gutter="24"> + <a-col :xl="6" :lg="7" :md="8" :sm="24"> + <a-form-item label="鍙傛暟缂栫爜"> + <j-input placeholder="璇疯緭鍏ュ弬鏁扮紪鐮�" v-model="queryParam.code"></j-input> + </a-form-item> + </a-col> + <a-col :xl="6" :lg="7" :md="8" :sm="24"> + <a-form-item label="鍙傛暟鍚嶇О"> + <j-input placeholder="璇疯緭鍏ュ弬鏁板悕绉�" v-model="queryParam.name"></j-input> + </a-form-item> + </a-col> + <a-col :xl="6" :lg="7" :md="8" :sm="24"> + <a-form-item label="鍙傛暟绫诲瀷"> + <a-select v-model="queryParam.type" placeholder="璇烽�夋嫨鍙傛暟绫诲瀷"> + <a-select-option :key=true>鍏紡</a-select-option> + <a-select-option :key=false>鍩烘湰鍙傛暟</a-select-option> + </a-select> + </a-form-item> + </a-col> + <a-col :xl="6" :lg="7" :md="8" :sm="24"> + <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> + <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> + <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">閲嶇疆</a-button> + </span> + </a-col> + </a-row> + </a-form> + </div> + + <!-- 鎿嶄綔鎸夐挳鍖哄煙 --> + <div class="table-operator"> + <a-button @click="handleAdd" type="primary" icon="plus">鏂板</a-button> + <a-dropdown v-if="selectedRowKeys.length > 0"> + <a-menu slot="overlay"> + <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>鍒犻櫎</a-menu-item> + </a-menu> + <a-button style="margin-left: 8px"> 鎵归噺鎿嶄綔 <a-icon type="down" /></a-button> + </a-dropdown> + </div> + + <!-- table鍖哄煙-begin --> + <div> + <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;"> + <i class="anticon anticon-info-circle ant-alert-icon"></i> 宸查�夋嫨 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>椤� + <a style="margin-left: 24px" @click="onClearSelected">娓呯┖</a> + </div> + + <a-table + ref="table" + size="middle" + bordered + rowKey="id" + :columns="columns" + :dataSource="dataSource" + :pagination="ipagination" + :loading="loading" + class="j-table-force-nowrap" + :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" + @change="handleTableChange"> + + <span slot="action" slot-scope="text, record"> + <a @click="handleEdit(record)">缂栬緫</a> + + <a-divider type="vertical" /> + + <a-popconfirm title="纭畾鍒犻櫎鍚�?" @confirm="() => handleDelete(record.id)"> + <a>鍒犻櫎</a> + </a-popconfirm> + </span> + + </a-table> + </div> + <!-- table鍖哄煙-end --> + + <!-- 琛ㄥ崟鍖哄煙 --> + <mdcParameter-modal ref="modalForm" @ok="modalFormOk"></mdcParameter-modal> + </a-card> +</template> + +<script> + import '@/assets/less/TableExpand.less' + import MdcParameterModal from './modules/mdcParameter/MdcParameterModal' + import { JeecgListMixin } from '@/mixins/JeecgListMixin' + + export default { + name: "MdcParameterList", + mixins:[JeecgListMixin], + components: { + MdcParameterModal + }, + data () { + return { + description: 'mdc绠楁硶鍏紡绠$悊椤甸潰', + // 琛ㄥご + columns: [ + { + title: '#', + dataIndex: '', + key:'rowIndex', + width:60, + align:"center", + customRender:function (t,r,index) { + return parseInt(index)+1; + } + }, + { + title: '鍙傛暟缂栫爜', + align:"center", + dataIndex: 'code' + }, + { + title: '鍙傛暟鍚嶇О', + align:"center", + dataIndex: 'name' + }, + { + title: '鍙傛暟鎻忚堪', + align:"center", + dataIndex: 'description' + }, + { + title: '鍙傛暟鍊�', + align:"center", + dataIndex: 'value' + }, + { + title: '鍙傛暟绫诲瀷', + align:"center", + dataIndex: 'type', + customRender: (text) => { + return text ? '鍏紡' : '鍩烘湰鍙傛暟'; + } + }, + { + title: '澶囨敞', + align:"center", + dataIndex: 'remark' + }, + { + title: '鎿嶄綔', + dataIndex: 'action', + align:"center", + scopedSlots: { customRender: 'action' }, + } + ], + url: { + list: "/mdc/mdcParameter/list", + delete: "/mdc/mdcParameter/delete", + deleteBatch: "/mdc/mdcParameter/deleteBatch", + exportXlsUrl: "mdc/mdcParameter/exportXls", + importExcelUrl: "mdc/mdcParameter/importExcel", + }, + } + }, + computed: { + importExcelUrl: function(){ + return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`; + } + }, + methods: { + + } + } +</script> +<style scoped> + @import '~@assets/less/common.less'; +</style> \ No newline at end of file diff --git a/src/views/mdc/base/MdcWorkshopSignage.vue b/src/views/mdc/base/MdcWorkshopSignage.vue index 3a90188..21b8bc5 100644 --- a/src/views/mdc/base/MdcWorkshopSignage.vue +++ b/src/views/mdc/base/MdcWorkshopSignage.vue @@ -6,8 +6,7 @@ <a-row style="height: 100%"> <a-col :span="7" class="header-left"> <a-space> - <span v-if="!isSwitchChecked">寮�鍚姛鑳�</span> - <span v-else>鍏抽棴鍔熻兘</span> + <span>鍔熻兘寮�鍏�</span> <a-switch checked-children="寮�" un-checked-children="鍏�" @@ -22,17 +21,9 @@ <a-col :span="10" class="workshop-name">{{ workshopDetails.workshopName }}</a-col> <a-col :span="7" class="device-status-info"> - <!--<a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info"--> - <!--@click="handleScreenDevive(item)">--> - <!--<div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>--> - <!--<div class="status-square" :style="{ backgroundColor: item.color }"></div>--> - <!--<!–<a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox>–>--> - <!--<div>{{getDeviceNumberByStatus(item.value) }}</div>--> - <!--</a-space>--> <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info"> <div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div> <div class="status-square" :style="{ backgroundColor: item.color }"></div> - <!--<a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox>--> <div>{{getDeviceNumberByStatus(item.value) }}</div> </a-space> </a-col> @@ -67,32 +58,15 @@ @click="openDetail(item)"> <div class="device-status"> <div - v-if="item.equipmentStatus == 2 || item.equipmentStatus == 1" - :style="{ backgroundImage: `url(${require('@/assets/yellow.png')})` }" + :style="{ backgroundImage: `url(${getStatusImgUrl(item.equipmentStatus)})` }" class="status-image" ></div> <div - v-if="item.equipmentStatus == 22" - :style="{ backgroundImage: `url(${require('@/assets/red.png')})` }" - class="status-image" - ></div> - <div - v-if="item.equipmentStatus == 0" - :style="{ backgroundImage: `url(${require('@/assets/gray.png')})` }" - class="status-image" - ></div> - <div - v-if="item.equipmentStatus == 3" - :style="{ backgroundImage: `url(${require('@/assets/green.png')})` }" - class="status-image" - ></div> - <div - :style="{ backgroundImage: `url(${getImgView(item.equipmentImage)})` }" + :style="{ backgroundImage: `url(${getImgEquipmentView(item.equipmentImage)})` }" class="device-image" ></div> </div> - <div class="device-id" id="deviceId" - :style="{ color:workshopDetails.equipmentIdColor }"> + <div :style="{ color:workshopDetails.equipmentIdColor }"> {{ item.equipmentId }} </div> </div> @@ -108,7 +82,7 @@ import VueDragResize from 'vue-drag-resize' import api from '@/api/mdc' import { getFileAccessHttpUrl } from '@/api/manage' - import EquipmentDetailModal from './modules/WorkshopSignage/EquipmentDetailModal' + import EquipmentDetailModal from './modules/DeviceBaseInfo/EquipmentDetailModal.vue' import { message } from 'ant-design-vue' message.config({ @@ -133,48 +107,32 @@ showGuideline: 'none', guidelineXTop: 0, guidelineYLeft: 0, - deviceList: [ - // { - // equipmentId: '123213213123232',// 璁惧ID - // equipmentImage: require('@/assets/8.png'), // 璁惧鍥剧墖 - // coordinateTop: 200, // 鎷栨嫿鍏冪礌璺濈洅瀛愰《璺濈 - // coordinateLeft: 100, // 鎷栨嫿鍏冪礌璺濈洅瀛愬乏渚ц窛绂� - // vw: 100, // 缂╂斁鍏冪礌瀹藉害 - // vh: 100, // 缂╂斁鍏冪礌楂樺害 - // equipmentStatus: 1 // 璁惧鐘舵�� 0:鍏虫満 22:鎶ヨ 2:寰呮満 3:杩愯 寮�鏈�:1锛堟病鏈夊洓鑹茬伅鏍囪瘑褰掍负寰呮満锛� - // } - ], // 璁惧淇℃伅鍒楄〃 - deviceList_copy: [], + deviceList: [], // 璁惧淇℃伅鍒楄〃 deviceStatusList: [ - // { - // label: '鍏ㄩ儴', - // value: 99, - // color: '#fff', - // checked: true - // }, { label: '鍏虫満', value: 0, - color: '#A8A8A8', - checked: false + color: '#A8A8A8' }, { label: '寰呮満', value: 2, - color: '#FFFF00', - checked: false + color: '#FFFF00' }, { label: '杩愯', value: 3, - color: '#00EE00', - checked: false + color: '#00EE00' }, { label: '鎶ヨ', value: 22, - color: '#FF0000', - checked: false + color: '#FF0000' + }, + { + label: '鏁呴殰', + value: 5, + color: '#C11900' } ],// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛� windowHeight: null,// 褰撳墠娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴︼紙锛堜笉鍖呮嫭宸ュ叿鏍忋�佷功绛俱�佸簳閮ㄤ换鍔℃爮锛� @@ -207,11 +165,9 @@ * @param id 杞﹂棿Id */ getDeviceListByApi(id) { - console.log('閲嶆柊鍒锋柊') api.getDeviceListInWorkshopSignagePageApi(id).then((res) => { if (res.result && res.result.length > 0) { this.deviceList = res.result - this.deviceList_copy = res.result } }) }, @@ -223,12 +179,8 @@ getWorkshopDetailsByApi(id) { api.getWorkshopDetailByWorkshopIdApi(id).then((res) => { this.workshopDetails = res.result - // this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView( - // this.workshopDetails.backgroundImage - // )})` this.imgSrc = this.getImgView(this.workshopDetails.backgroundImage) this.$refs.deviceContainerRef.style.height = (this.windowHeight - this.pageHeaderHeight) + 'px' - // this.parentH = this.windowHeight - this.pageHeaderHeight this.parentH = 900 this.parentLimitation = true // 鍦ㄧ埗鍏冪礌楂樺害璁剧疆鍚庡啀璁剧疆闄愬埗鎷栨嫿鍖哄煙锛屼笉杩欐牱鏈夋鐜囧鑷寸埗鍏冪礌楂樺害鏈缃氨闄愬埗鎷栨嫿 }) @@ -241,6 +193,20 @@ getImgView(text) { if (text && text.indexOf(',') > 0) { text = text.substring(0, text.indexOf(',')) + } + return getFileAccessHttpUrl(text) + }, + /** + * 璁惧鍥剧墖棰勮 + * @param text 鍥剧墖鍦板潃 + */ + getImgEquipmentView(text) { + if (text && text.indexOf(',') > 0) { + text = text.substring(0, text.indexOf(',')) + } + + if (text == null || text == '') { + return require('../../../assets/default.png') } return getFileAccessHttpUrl(text) }, @@ -280,15 +246,6 @@ * @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍� */ resize(newRect, index) { - // if (newRect.width > 100) { - // if (newRect.width / newRect.height < 2) { - // this.deviceList[index].fontSize = newRect.width / 10 - // } else { - // this.deviceList[index].fontSize = newRect.height / 5 - // } - // } else { - // this.deviceList[index].fontSize = 12 - // } this.showGuideline = 'block' this.deviceList[index].vw = newRect.width this.deviceList[index].vh = newRect.height @@ -304,8 +261,8 @@ * @returns {number} 璁惧鏁伴噺 */ getDeviceNumberByStatus(value) { - if (value === 99) return this.deviceList_copy.length - return this.deviceList_copy.filter((item) => item.equipmentStatus === value).length + if (value === 99) return this.deviceList.length + return this.deviceList.filter((item) => item.equipmentStatus === value).length }, /** @@ -318,19 +275,38 @@ this.isDraggable = !this.isDraggable }, - openDetail(item) { + /** + * 寮�鍚姛鑳借Е鍙戜簨浠� + * @param record 鐐瑰嚮鐨勮澶囦俊鎭� + */ + openDetail(record) { if (!this.isSwitchChecked) { - if (item.equipmentStatus == 0) { + if (record.equipmentStatus == 0) { this.$message.warning('璁惧澶勪簬鍏虫満鐘舵�侊紒') return false } - console.log(item) - console.log(this.$refs.EquipmentDetailModal) - this.$refs.EquipmentDetailModal.initData(item.equId) - this.$refs.EquipmentDetailModal.timerModel(item.equId) - // this.equipMessageTimer = setInterval(() => { - // setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0) - // },1000*10) + this.$refs.EquipmentDetailModal.initData(record.equId) + this.$refs.EquipmentDetailModal.timerModel(record.equId) + } + }, + + /** + * 鏍规嵁璁惧鐘舵�佸�艰幏鍙栧搴斾笁鑹茬伅鍥剧墖鍦板潃 + * @param imgStatus 璁惧鐘舵�佸�� + */ + getStatusImgUrl(imgStatus) { + switch (imgStatus) { + case 1: + case 2: + return require('@/assets/yellow.png') + case 3: + return require('@/assets/green.png') + case 22: + return require('@/assets/red.png') + case 5: + return require('@/assets/orange.png') + default: + return require('@/assets/gray.png') } }, @@ -338,87 +314,11 @@ * 娴忚鍣ㄥ昂瀵稿彂鐢熸敼鍙樻椂瑙﹀彂 */ handleWindowSizeChange() { - // this.isFullScreen = !this.isFullScreen - // if (!this.isFullScreen) location.reload() // 濡傛灉涓哄叏灞忔ā寮忥紝鍒欏湪鍒囨崲妯″紡鏃堕噸鏂板姞杞介〉闈互閲嶆柊鑾峰彇娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴� const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight - // this.parentH = 99999 - // const scaleRate = windowHeight / this.windowHeight - // this.windowHeight = windowHeight this.$refs.deviceContainerRef.style.height = (windowHeight - this.pageHeaderHeight) + 'px' - // const timer = setTimeout(() => { - // this.deviceList.forEach(item => { - // item.coordinateTop = item.coordinateTop * scaleRate - // item.vh = item.vh * scaleRate - // console.log('vh', item.vh) - // }) - // this.parentH = windowHeight - this.pageHeaderHeight - // console.log('changeDeviceList', this.deviceList) - // }, 500) - // console.log('scaleRate', scaleRate) - }, - - checkboxChange(obj) { - //闇�瑕佸垽鏂槸鍚﹀紑鍚姛鑳斤紝鐩殑鏄负浜嗗叧闂畾鏃跺櫒閬垮厤绛涢�夊悗璁惧琚畾鏃跺埛鏂扮殑鏂拌澶囪鐩� - if (this.isOperatingDevice) { - obj.checked = !obj.checked - if (obj.value !== 99) { - if (obj.checked) this.checkedStatusCount++ - else this.checkedStatusCount-- - } - - if (obj.value == 99) { - this.deviceStatusList.forEach(item => { - if (item.value !== obj.value) item.checked = obj.checked - }) - if (obj.checked) { - this.deviceList = this.deviceList_copy - this.checkedStatusCount = this.deviceStatusList.length - 1 - } else { - this.deviceList = [] - this.checkedStatusCount = 0 - } - } else { - this.deviceStatusList.forEach(item => { - if (item.value === 99) { - if (this.checkedStatusCount !== this.deviceStatusList.length - 1 || this.checkedStatusCount === 0) item.checked = false - if (this.checkedStatusCount === this.deviceStatusList.length - 1) item.checked = true - } - }) - if (obj.checked) { - this.deviceList.push(...this.deviceList_copy.filter(item => item.equipmentStatus === obj.value)) - } else { - this.deviceList = this.deviceList.filter(item => item.equipmentStatus !== obj.value) - } - } - } else { - this.$notification.warning({ - message: '娑堟伅', - description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛岀瓫閫�' - }) - } - }, - - handleScreenDevive(obj) { - //闇�瑕佸垽鏂槸鍚﹀紑鍚姛鑳斤紝鐩殑鏄负浜嗗叧闂畾鏃跺櫒閬垮厤绛涢�夊悗璁惧琚畾鏃跺埛鏂扮殑鏂拌澶囪鐩� - if (this.isOperatingDevice) { - obj.checked = true - this.deviceList = this.deviceList_copy - this.deviceStatusList.forEach(item => { - if (item.value !== obj.value) item.checked = false - }) - - if (obj.value == 99) this.deviceList = this.deviceList_copy - else this.deviceList = this.deviceList.filter(item => item.equipmentStatus === obj.value) - - } else { - this.$notification.warning({ - message: '娑堟伅', - description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛岀瓫閫�' - }) - } } }, created() { @@ -437,9 +337,6 @@ document.documentElement.clientHeight || document.body.clientHeight - // 鍒ゆ柇娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴︽槸鍚︾瓑浜庡垎杈ㄧ巼锛岃嫢鐩哥瓑鍒欒〃绀鸿繘鍏ユ椂娴忚鍣ㄤ负鍏ㄥ睆妯″紡 - // if (this.windowHeight === screen.height) this.isFullScreen = true - window.addEventListener('resize', this.handleWindowSizeChange) }, beforeDestroy() { @@ -457,10 +354,6 @@ color: #fff; .page-header { - /*font-size: 50px;*/ - /*text-align: center;*/ - /*position: relative;*/ - .header-left { height: 100%; display: flex; @@ -485,7 +378,6 @@ .single-status-info { margin: 10px; - cursor: pointer; .status-square { width: 14px; @@ -526,11 +418,7 @@ flex-direction: column; align-items: center; justify-content: space-between; - cursor: default; - - &:active { - border: 1px solid #1890ff; - } + cursor: pointer; .device-status { width: 100%; @@ -557,10 +445,5 @@ } } } - } - - /deep/ .ant-checkbox-inner { - background-color: transparent; - border-color: #fff; } </style> \ No newline at end of file diff --git a/src/views/mdc/base/OEEAnalysis.vue b/src/views/mdc/base/OEEAnalysis.vue new file mode 100644 index 0000000..28654a1 --- /dev/null +++ b/src/views/mdc/base/OEEAnalysis.vue @@ -0,0 +1,82 @@ +<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-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"> + <OEEAnalysisList :nodePeople='selectPeople' :nodeTree='selectEquipment' :Type="selectTypeTree"/> + </a-col> + </a-row> + </a-card> + </div> + +</template> + +<script> + import { JeecgListMixin } from '@/mixins/JeecgListMixin' + import BaseTree from '../common/BaseTree' + import OEEAnalysisList from './modules/OEEAnalysis/OEEAnalysisList' + import DepartTree from './modules/DepartList/DepartListTree/DepartTree' + import { mapActions } from 'vuex' + + export default { + name: 'OEEAnalysis', + components: { + BaseTree, + DepartTree, + OEEAnalysisList + }, + data() { + return { + activeKey: '1', + selectEquipmentId: '', + selectEquipment: {}, + selectPeople: {}, + selectTypeTree: '', + 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) { + this.activeKey = val + this.selectTypeTree = val + }, + changeSelectionNode(val) { + this.selectEquipment = val + this.selectTypeTree = '1' + }, + changeSelectionNodedd(val) { + this.selectPeople = val + this.selectTypeTree = '2' + } + } + + } +</script> \ No newline at end of file diff --git a/src/views/mdc/base/PartsMatchingManagement.vue b/src/views/mdc/base/PartsMatchingManagement.vue new file mode 100644 index 0000000..c5f50a5 --- /dev/null +++ b/src/views/mdc/base/PartsMatchingManagement.vue @@ -0,0 +1,82 @@ +<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-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"> + <PartsMatchingList :nodePeople='selectPeople' :nodeTree='selectEquipment' :Type="selectTypeTree"/> + </a-col> + </a-row> + </a-card> + </div> + +</template> + +<script> + import { JeecgListMixin } from '@/mixins/JeecgListMixin' + import BaseTree from '../common/BaseTree' + import PartsMatchingList from './modules/PartsMatchingManagement/PartsMatchingList' + import DepartTree from './modules/DepartList/DepartListTree/DepartTree' + import { mapActions } from 'vuex' + + export default { + name: 'PartsMatchingManagement', + components: { + BaseTree, + DepartTree, + PartsMatchingList + }, + data() { + return { + activeKey: '1', + selectEquipmentId: '', + selectEquipment: {}, + selectPeople: {}, + selectTypeTree: '', + 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) { + this.activeKey = val + this.selectTypeTree = val + }, + changeSelectionNode(val) { + this.selectEquipment = val + this.selectTypeTree = '1' + }, + changeSelectionNodedd(val) { + this.selectPeople = val + this.selectTypeTree = '2' + } + } + + } +</script> \ No newline at end of file diff --git a/src/views/mdc/base/StatisticalAnalysis.vue b/src/views/mdc/base/StatisticalAnalysis.vue index c5b8308..72da186 100644 --- a/src/views/mdc/base/StatisticalAnalysis.vue +++ b/src/views/mdc/base/StatisticalAnalysis.vue @@ -1,45 +1,35 @@ <template> <a-card :bordered="false"> - <div style="width: 100%; height: 100%;overflow: hidden"> - <a-row type="flex" :gutter="16"> - <a-col :md="5" :sm="24"> - <base-tree @getCurrSelected="changeSelectionNode"></base-tree> - </a-col> - <a-col :md="24-5" :sm="24"> - <statistical-analysis-main :equip="selectEquementnode"></statistical-analysis-main> - </a-col> - </a-row> - </div> + <a-row type="flex" :gutter="16"> + <a-col :md="5" :sm="24"> + <base-tree @getCurrSelected="changeSelectionNode"></base-tree> + </a-col> + <a-col :md="24-5" :sm="24"> + <statistical-analysis-main :equip="selectEquipmentNode"></statistical-analysis-main> + </a-col> + </a-row> </a-card> </template> <script> import BaseTree from '../common/BaseTree' import StatisticalAnalysisMain from './modules/StatisticalAnalysis/StatisticalAnalysisMain' + export default { name: 'StatisticalAnalysis', - components:{ + components: { BaseTree, StatisticalAnalysisMain }, data() { return { - description: '璁惧淇℃伅', - selectEquementnode:{}, - equipmentStatisticsInfo:{}, - url:{ - equipmentStatistics:"/mdc/equipment/equipmentStatistics" - } + selectEquipmentNode: {} } }, methods: { - changeSelectionNode(val){ - this.selectEquementnode = val + changeSelectionNode(val) { + this.selectEquipmentNode = val } } } -</script> - -<style scoped> - -</style> \ No newline at end of file +</script> \ No newline at end of file diff --git a/src/views/mdc/base/StatisticsChart.vue b/src/views/mdc/base/StatisticsChart.vue index ddea5ef..e8523aa 100644 --- a/src/views/mdc/base/StatisticsChart.vue +++ b/src/views/mdc/base/StatisticsChart.vue @@ -1,45 +1,35 @@ <template> <a-card :bordered="false"> - <div style="width: 100%; height: 100%;overflow: hidden"> - <a-row type="flex" :gutter="16"> - <a-col :md="5" :sm="24"> - <base-tree @getCurrSelected="changeSelectionNode"></base-tree> - </a-col> - <a-col :md="24-5" :sm="24"> - <statistics-legend :equip="selectEquementnode"></statistics-legend> - </a-col> - </a-row> - </div> + <a-row type="flex" :gutter="16"> + <a-col :md="5" :sm="24"> + <base-tree @getCurrSelected="changeSelectionNode"></base-tree> + </a-col> + <a-col :md="24-5" :sm="24"> + <statistics-legend :equip="selectEquipmentNode"></statistics-legend> + </a-col> + </a-row> </a-card> </template> <script> import BaseTree from '../common/BaseTree' import StatisticsLegend from './modules/StatisticsChart/StatisticsLegend' + export default { name: 'StatisticsChart', - components:{ + components: { BaseTree, StatisticsLegend }, data() { return { - description: '璁惧淇℃伅', - selectEquementnode:{}, - equipmentStatisticsInfo:{}, - url:{ - equipmentStatistics:"/mdc/equipment/equipmentStatistics" - } + selectEquipmentNode: {} } }, methods: { - changeSelectionNode(val){ - this.selectEquementnode = val + changeSelectionNode(val) { + this.selectEquipmentNode = val } } } </script> - -<style scoped> - -</style> \ No newline at end of file diff --git a/src/views/mdc/base/equipmentAvailCompare.vue b/src/views/mdc/base/equipmentAvailCompare.vue index 53ec061..d05b04a 100644 --- a/src/views/mdc/base/equipmentAvailCompare.vue +++ b/src/views/mdc/base/equipmentAvailCompare.vue @@ -38,14 +38,9 @@ data() { return { activeKey: '1', - description: '璁惧淇℃伅', - selectEquipmentId: '', selectEquipment: {}, selectPeople: {}, selectTypeTree: '', - url: { - equipmentStatistics: '/mdc/equipment/equipmentStatistics' - }, isDepartType: '' } }, @@ -64,7 +59,6 @@ description: res.message }) } - }).finally(() => { }) }, tabChange(val) { diff --git a/src/views/mdc/base/equipmentDayAvail.vue b/src/views/mdc/base/equipmentDayAvail.vue index 02baad8..ef21734 100644 --- a/src/views/mdc/base/equipmentDayAvail.vue +++ b/src/views/mdc/base/equipmentDayAvail.vue @@ -1,22 +1,20 @@ <template> <a-card :bordered="false"> - <div style="width: 100%; height: 100%;overflow: hidden"> - <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-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="24-5" :sm="24"> - <equipment-day-avail-main ref="equipmentDayAvailMain" :nodeTree='selectEquipment' :nodePeople='selectPeople' :Type="selectTypeTree"></equipment-day-avail-main> - </a-col> - </a-row> - </div> + <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-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="24-5" :sm="24"> + <equipment-day-avail-main ref="equipmentDayAvailMain" :nodeTree='selectEquipment' :nodePeople='selectPeople' :Type="selectTypeTree"></equipment-day-avail-main> + </a-col> + </a-row> </a-card> </template> @@ -36,14 +34,9 @@ data() { return { activeKey: '1', - description: '璁惧淇℃伅', - selectEquipmentId: '', selectEquipment: {}, selectPeople:{}, selectTypeTree: '', - url: { - equipmentStatistics: '/mdc/equipment/equipmentStatistics' - }, isDepartType:'', } }, @@ -57,17 +50,14 @@ 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 this.selectTypeTree = val }, @@ -81,8 +71,4 @@ } } } -</script> - -<style scoped> - -</style> \ No newline at end of file +</script> \ No newline at end of file diff --git a/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentDetailModal.vue b/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentDetailModal.vue index 55cc8a3..92c9192 100644 --- a/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentDetailModal.vue +++ b/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentDetailModal.vue @@ -1,8 +1,7 @@ <template> <div ref="wrap"> <a-modal - :title="title" - width="70%" + width="90%" :visible="visible" :getContainer="() => this.$refs.wrap" @cancel="handleCancel" @@ -74,6 +73,7 @@ </div> </td> </tr> + <tr> <td colspan="5"> <a-descriptions @@ -84,29 +84,29 @@ <a-descriptions-item label="璁惧鍚嶇О">{{resultData.equipmentName}}</a-descriptions-item> <a-descriptions-item label="IP鍦板潃">{{resultData.equipmentIp}}</a-descriptions-item> <a-descriptions-item label="绔彛鍙�">{{resultData.dataPort}}</a-descriptions-item> - <a-descriptions-item label="绯荤粺鐗堟湰鍙�">{{resultData.systemVersion}}</a-descriptions-item> + <!-- <a-descriptions-item label="绯荤粺鐗堟湰鍙�">{{resultData.systemVersion}}</a-descriptions-item>--> <a-descriptions-item label="椹卞姩绫诲瀷">{{resultData.driveType}}</a-descriptions-item> <a-descriptions-item label="璁惧鍨嬪彿">{{resultData.equipmentModel}}</a-descriptions-item> <a-descriptions-item label="璁惧绫诲瀷">{{resultData.equipmentType}}</a-descriptions-item> - <a-descriptions-item label="璁惧鍔熺巼">{{resultData.devicePower}}</a-descriptions-item> + <!-- <a-descriptions-item label="璁惧鍔熺巼">{{resultData.devicePower}}</a-descriptions-item>--> <a-descriptions-item label="鏈夋晥杞存暟">{{resultData.validAxis}}</a-descriptions-item> <a-descriptions-item label="鏈�澶ц酱鏁�">{{resultData.maxAxis}}</a-descriptions-item> <a-descriptions-item label="澶囨敞">{{resultData.remark}}</a-descriptions-item> </a-descriptions> + <!---鏁版嵁婧愯皟鏁� 鍔ㄦ�佸睍绀� 杩愯鏁版嵁----> <a-descriptions title="杩愯鏁版嵁" - v-show="mdcDriveTypeParamConfigList != null" - v-if="driverType != 'PLC'" + v-if="runData&&runData.length>0&&resultData.driveType != 'PLC'" :column="4" class="operationData" > <a-descriptions-item - v-for="(item,id) in mdcDriveTypeParamConfigList " - :key="id" + v-for="(item,id) in runData" + :key="item.id" :label="item.key" > <a-tooltip @mouseenter="mouseEnterItem"> @@ -120,6 +120,23 @@ </a-descriptions> + <a-descriptions + title="鍧愭爣淇℃伅" + v-if="xyzList != null" + :column="5" + > + <a-descriptions-item label="鏈哄簥鍧愭爣X">{{xyzList.xmachine}}</a-descriptions-item> + <a-descriptions-item label="Y">{{xyzList.ymachine}}</a-descriptions-item> + <a-descriptions-item label="Z">{{xyzList.zmachine}}</a-descriptions-item> + <a-descriptions-item label="A">{{xyzList.amachine}}</a-descriptions-item> + <a-descriptions-item label="B">{{xyzList.bmachine}}</a-descriptions-item> + <a-descriptions-item label="缁濆鍧愭爣X">{{xyzList.xabsolute}}</a-descriptions-item> + <a-descriptions-item label="Y">{{xyzList.yabsolute}}</a-descriptions-item> + <a-descriptions-item label="Z">{{xyzList.zabsolute}}</a-descriptions-item> + <a-descriptions-item label="A">{{xyzList.aabsolute}}</a-descriptions-item> + <a-descriptions-item label="B">{{xyzList.babsolute}}</a-descriptions-item> + </a-descriptions> + </td> </tr> </table> @@ -129,7 +146,8 @@ :style="{ marginRight: '8px' }" @click="handleCancel" style="color: #1191b0;" - >鍏抽棴</a-button> + >鍏抽棴 + </a-button> </template> </a-modal> </div> @@ -148,29 +166,28 @@ props: {}, data() { return { - mdcDriveTypeParamConfigList: [], - xyzAliasesList: [], - title: '', + runData: [], + // xyzAliasesList: [], //涓昏酱鍊嶇巼 - spindlebeilv: 1, + spindlebeilv: null, //杩涚粰鍊嶇巼 - feedbeilv: 1, + feedbeilv: null, // 涓昏酱璐熻嵎 - spindleload: 1, + spindleload: null, //蹇�熻繘缁欏�嶇巼 - rapidfeed: 1, + rapidfeed: null, visible: false, resultData: {}, - driverType: '', - deviceTypeDict: '', url: { mdcEquipmentDetailedInfo: '/mdc/mdcEquipment/mdcEquipmentDetailedInfo' }, - modalTimer:null, - ee:" " + modalTimer: null, + xyzList: null } }, - mounted() { + beforeDestroy() { + clearInterval(this.modalTimer) + this.modalTimer = null }, methods: { drawLine() { @@ -180,12 +197,12 @@ let mdcEquiMoniGauge1 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge1'), 'macarons') let mdcEquiMoniGaugeOption1 = { tooltip: { - formatter: "{a} <br/>{b} : {c}%" + formatter: '{a} <br/>{b} : {c}%' }, series: [{ - name: "澶栭儴绾�", - type: "gauge", + name: '澶栭儴绾�', + type: 'gauge', radius: '65%', // 鍔ㄦ�� startAngle: 225, endAngle: -45, @@ -198,19 +215,19 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { - show: false, + show: false }, detail: { show: false }, title: { //鏍囬 - show: false, + show: false } }, { @@ -227,26 +244,26 @@ lineStyle: { color: [ [1, 'rgba(0,0,0,0)'] - ], + ] } }, //浠〃鐩樿酱绾� axisLabel: { show: true, color: '#31F3FF', fontSize: 10, // 鍔ㄦ�� - distance: -20, // 鍔ㄦ�� + distance: -20 // 鍔ㄦ�� }, //鍒诲害鏍囩銆� axisTick: { - show: false, + show: false }, //鍒诲害鏍峰紡 splitLine: { - show: false, - }, + show: false + } }, { - name: "鍐呴儴瀹界嚎鏉�", - type: "gauge", + name: '鍐呴儴瀹界嚎鏉�', + type: 'gauge', radius: '55%', startAngle: 225, endAngle: -45, @@ -259,24 +276,24 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { - show: false, + show: false }, detail: { show: false }, title: { - show: false, + show: false } }, { - name: "鍐呴儴缁嗙嚎鏉�", - type: "gauge", + name: '鍐呴儴缁嗙嚎鏉�', + type: 'gauge', radius: '40%', startAngle: 225, endAngle: -45, @@ -289,24 +306,24 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { - show: false, + show: false }, detail: { show: false }, title: { - show: false, + show: false } }, { - name: "闂撮殧鏉″舰", - type: "gauge", + name: '闂撮殧鏉″舰', + type: 'gauge', radius: '52.5%', z: 4, splitNumber: 35, @@ -318,7 +335,7 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { show: false, @@ -336,12 +353,12 @@ show: false }, title: { - show: false, + show: false } }, { - name: "鏁版嵁", - type: "gauge", + name: '鏁版嵁', + type: 'gauge', radius: '52.5%', z: 3, startAngle: 225, @@ -360,10 +377,10 @@ show: false }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { show: false @@ -377,8 +394,8 @@ pointer: { show: true, width: 3, - itemStyle:{ - color:'#fff', + itemStyle: { + color: '#fff' } }, data: [{ @@ -388,60 +405,60 @@ }, // 鍐呭渾 { - "name": '鍐呭渾鐜�', - "type": 'pie', - "radius": ['4%', '2%'], - "hoverAnimation": false, + 'name': '鍐呭渾鐜�', + 'type': 'pie', + 'radius': ['4%', '2%'], + 'hoverAnimation': false, tooltip: { show: false }, - cursor: "default", - "labelLine": { - "normal": { - "show": false + cursor: 'default', + 'labelLine': { + 'normal': { + 'show': false } }, itemStyle: { color: '#fff' }, animation: false, - "data": [1] + 'data': [1] }, // 鍐呭渾 { - "name": '鍐呭渾鐜�2', - "type": 'pie', - "radius": '2%', - "hoverAnimation": false, - cursor: "default", + 'name': '鍐呭渾鐜�2', + 'type': 'pie', + 'radius': '2%', + 'hoverAnimation': false, + cursor: 'default', tooltip: { show: false }, - "labelLine": { - "normal": { - "show": false + 'labelLine': { + 'normal': { + 'show': false } }, itemStyle: { color: '#31F3FF' }, animation: false, - "data": [1] - }, + 'data': [1] + } ] - }; + } mdcEquiMoniGauge1.setOption(mdcEquiMoniGaugeOption1) } if (_this.feedbeilv) { let mdcEquiMoniGauge2 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge2'), 'macarons') let mdcEquiMoniGaugeOption2 = { tooltip: { - formatter: "{a} <br/>{b} : {c}%" + formatter: '{a} <br/>{b} : {c}%' }, series: [{ - name: "澶栭儴绾�", - type: "gauge", + name: '澶栭儴绾�', + type: 'gauge', radius: '65%', // 鍔ㄦ�� startAngle: 225, endAngle: -45, @@ -454,19 +471,19 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { - show: false, + show: false }, detail: { show: false }, title: { //鏍囬 - show: false, + show: false } }, { @@ -483,26 +500,26 @@ lineStyle: { color: [ [1, 'rgba(0,0,0,0)'] - ], + ] } }, //浠〃鐩樿酱绾� axisLabel: { show: true, color: '#31F3FF', fontSize: 10, // 鍔ㄦ�� - distance: -20, // 鍔ㄦ�� + distance: -20 // 鍔ㄦ�� }, //鍒诲害鏍囩銆� axisTick: { - show: false, + show: false }, //鍒诲害鏍峰紡 splitLine: { - show: false, - }, + show: false + } }, { - name: "鍐呴儴瀹界嚎鏉�", - type: "gauge", + name: '鍐呴儴瀹界嚎鏉�', + type: 'gauge', radius: '55%', startAngle: 225, endAngle: -45, @@ -515,24 +532,24 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { - show: false, + show: false }, detail: { show: false }, title: { - show: false, + show: false } }, { - name: "鍐呴儴缁嗙嚎鏉�", - type: "gauge", + name: '鍐呴儴缁嗙嚎鏉�', + type: 'gauge', radius: '40%', startAngle: 225, endAngle: -45, @@ -545,24 +562,24 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { - show: false, + show: false }, detail: { show: false }, title: { - show: false, + show: false } }, { - name: "闂撮殧鏉″舰", - type: "gauge", + name: '闂撮殧鏉″舰', + type: 'gauge', radius: '52.5%', z: 4, splitNumber: 35, @@ -574,7 +591,7 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { show: false, @@ -592,12 +609,12 @@ show: false }, title: { - show: false, + show: false } }, { - name: "鏁版嵁", - type: "gauge", + name: '鏁版嵁', + type: 'gauge', radius: '52.5%', z: 3, startAngle: 225, @@ -616,10 +633,10 @@ show: false }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { show: false @@ -633,8 +650,8 @@ pointer: { show: true, width: 3, - itemStyle:{ - color:'#fff' + itemStyle: { + color: '#fff' } }, data: [{ @@ -644,60 +661,60 @@ }, // 鍐呭渾 { - "name": '鍐呭渾鐜�', - "type": 'pie', - "radius": ['4%', '2%'], - "hoverAnimation": false, + 'name': '鍐呭渾鐜�', + 'type': 'pie', + 'radius': ['4%', '2%'], + 'hoverAnimation': false, tooltip: { show: false }, - cursor: "default", - "labelLine": { - "normal": { - "show": false + cursor: 'default', + 'labelLine': { + 'normal': { + 'show': false } }, itemStyle: { color: '#fff' }, animation: false, - "data": [1] + 'data': [1] }, // 鍐呭渾 { - "name": '鍐呭渾鐜�2', - "type": 'pie', - "radius": '2%', - "hoverAnimation": false, - cursor: "default", + 'name': '鍐呭渾鐜�2', + 'type': 'pie', + 'radius': '2%', + 'hoverAnimation': false, + cursor: 'default', tooltip: { show: false }, - "labelLine": { - "normal": { - "show": false + 'labelLine': { + 'normal': { + 'show': false } }, itemStyle: { color: '#31F3FF' }, animation: false, - "data": [1] - }, + 'data': [1] + } ] - }; + } mdcEquiMoniGauge2.setOption(mdcEquiMoniGaugeOption2) } if (_this.spindleload) { let mdcEquiMoniGauge3 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge3'), 'macarons') let mdcEquiMoniGaugeOption3 = { tooltip: { - formatter: "{a} <br/>{b} : {c}%" + formatter: '{a} <br/>{b} : {c}%' }, series: [{ - name: "澶栭儴绾�", - type: "gauge", + name: '澶栭儴绾�', + type: 'gauge', radius: '65%', // 鍔ㄦ�� startAngle: 225, endAngle: -45, @@ -710,19 +727,19 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { - show: false, + show: false }, detail: { show: false }, title: { //鏍囬 - show: false, + show: false } }, { @@ -739,26 +756,26 @@ lineStyle: { color: [ [1, 'rgba(0,0,0,0)'] - ], + ] } }, //浠〃鐩樿酱绾� axisLabel: { show: true, color: '#31F3FF', fontSize: 10, // 鍔ㄦ�� - distance: -20, // 鍔ㄦ�� + distance: -20 // 鍔ㄦ�� }, //鍒诲害鏍囩銆� axisTick: { - show: false, + show: false }, //鍒诲害鏍峰紡 splitLine: { - show: false, - }, + show: false + } }, { - name: "鍐呴儴瀹界嚎鏉�", - type: "gauge", + name: '鍐呴儴瀹界嚎鏉�', + type: 'gauge', radius: '55%', startAngle: 225, endAngle: -45, @@ -771,24 +788,24 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { - show: false, + show: false }, detail: { show: false }, title: { - show: false, + show: false } }, { - name: "鍐呴儴缁嗙嚎鏉�", - type: "gauge", + name: '鍐呴儴缁嗙嚎鏉�', + type: 'gauge', radius: '40%', startAngle: 225, endAngle: -45, @@ -801,24 +818,24 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { - show: false, + show: false }, detail: { show: false }, title: { - show: false, + show: false } }, { - name: "闂撮殧鏉″舰", - type: "gauge", + name: '闂撮殧鏉″舰', + type: 'gauge', radius: '52.5%', z: 4, splitNumber: 35, @@ -830,7 +847,7 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { show: false, @@ -848,12 +865,12 @@ show: false }, title: { - show: false, + show: false } }, { - name: "鏁版嵁", - type: "gauge", + name: '鏁版嵁', + type: 'gauge', radius: '52.5%', z: 3, startAngle: 225, @@ -872,10 +889,10 @@ show: false }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { show: false @@ -889,8 +906,8 @@ pointer: { show: true, width: 3, - itemStyle:{ - color:'#fff' + itemStyle: { + color: '#fff' } }, data: [{ @@ -900,60 +917,60 @@ }, // 鍐呭渾 { - "name": '鍐呭渾鐜�', - "type": 'pie', - "radius": ['4%', '2%'], - "hoverAnimation": false, + 'name': '鍐呭渾鐜�', + 'type': 'pie', + 'radius': ['4%', '2%'], + 'hoverAnimation': false, tooltip: { show: false }, - cursor: "default", - "labelLine": { - "normal": { - "show": false + cursor: 'default', + 'labelLine': { + 'normal': { + 'show': false } }, itemStyle: { color: '#fff' }, animation: false, - "data": [1] + 'data': [1] }, // 鍐呭渾 { - "name": '鍐呭渾鐜�2', - "type": 'pie', - "radius": '2%', - "hoverAnimation": false, - cursor: "default", + 'name': '鍐呭渾鐜�2', + 'type': 'pie', + 'radius': '2%', + 'hoverAnimation': false, + cursor: 'default', tooltip: { show: false }, - "labelLine": { - "normal": { - "show": false + 'labelLine': { + 'normal': { + 'show': false } }, itemStyle: { color: '#31F3FF' }, animation: false, - "data": [1] - }, + 'data': [1] + } ] - }; + } mdcEquiMoniGauge3.setOption(mdcEquiMoniGaugeOption3) } if (_this.rapidfeed) { let mdcEquiMoniGauge4 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge4'), 'macarons') let mdcEquiMoniGaugeOption4 = { tooltip: { - formatter: "{a} <br/>{b} : {c}%" + formatter: '{a} <br/>{b} : {c}%' }, series: [{ - name: "澶栭儴绾�", - type: "gauge", + name: '澶栭儴绾�', + type: 'gauge', radius: '65%', // 鍔ㄦ�� startAngle: 225, endAngle: -45, @@ -966,19 +983,19 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { - show: false, + show: false }, detail: { show: false }, title: { //鏍囬 - show: false, + show: false } }, { @@ -995,26 +1012,26 @@ lineStyle: { color: [ [1, 'rgba(0,0,0,0)'] - ], + ] } }, //浠〃鐩樿酱绾� axisLabel: { show: true, color: '#31F3FF', fontSize: 10, // 鍔ㄦ�� - distance: -20, // 鍔ㄦ�� + distance: -20 // 鍔ㄦ�� }, //鍒诲害鏍囩銆� axisTick: { - show: false, + show: false }, //鍒诲害鏍峰紡 splitLine: { - show: false, - }, + show: false + } }, { - name: "鍐呴儴瀹界嚎鏉�", - type: "gauge", + name: '鍐呴儴瀹界嚎鏉�', + type: 'gauge', radius: '55%', startAngle: 225, endAngle: -45, @@ -1027,24 +1044,24 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { - show: false, + show: false }, detail: { show: false }, title: { - show: false, + show: false } }, { - name: "鍐呴儴缁嗙嚎鏉�", - type: "gauge", + name: '鍐呴儴缁嗙嚎鏉�', + type: 'gauge', radius: '40%', startAngle: 225, endAngle: -45, @@ -1057,24 +1074,24 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { - show: false, + show: false }, detail: { show: false }, title: { - show: false, + show: false } }, { - name: "闂撮殧鏉″舰", - type: "gauge", + name: '闂撮殧鏉″舰', + type: 'gauge', radius: '52.5%', z: 4, splitNumber: 35, @@ -1086,7 +1103,7 @@ } }, axisLabel: { - show: false, + show: false }, axisTick: { show: false, @@ -1104,12 +1121,12 @@ show: false }, title: { - show: false, + show: false } }, { - name: "鏁版嵁", - type: "gauge", + name: '鏁版嵁', + type: 'gauge', radius: '52.5%', z: 3, startAngle: 225, @@ -1128,10 +1145,10 @@ show: false }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { show: false @@ -1145,8 +1162,8 @@ pointer: { show: true, width: 3, - itemStyle:{ - color:'#fff' + itemStyle: { + color: '#fff' } }, data: [{ @@ -1156,110 +1173,111 @@ }, // 鍐呭渾 { - "name": '鍐呭渾鐜�', - "type": 'pie', - "radius": ['4%', '2%'], - "hoverAnimation": false, + 'name': '鍐呭渾鐜�', + 'type': 'pie', + 'radius': ['4%', '2%'], + 'hoverAnimation': false, tooltip: { show: false }, - cursor: "default", - "labelLine": { - "normal": { - "show": false + cursor: 'default', + 'labelLine': { + 'normal': { + 'show': false } }, itemStyle: { color: '#fff' }, animation: false, - "data": [1] + 'data': [1] }, // 鍐呭渾 { - "name": '鍐呭渾鐜�2', - "type": 'pie', - "radius": '2%', - "hoverAnimation": false, - cursor: "default", + 'name': '鍐呭渾鐜�2', + 'type': 'pie', + 'radius': '2%', + 'hoverAnimation': false, + cursor: 'default', tooltip: { show: false }, - "labelLine": { - "normal": { - "show": false + 'labelLine': { + 'normal': { + 'show': false } }, itemStyle: { color: '#31F3FF' }, animation: false, - "data": [1] - }, + 'data': [1] + } ] - }; + } mdcEquiMoniGauge4.setOption(mdcEquiMoniGaugeOption4) } }, - close() { this.$emit('close') this.visible = false - clearInterval(this.modalTimer); + clearInterval(this.modalTimer) this.modalTimer = null }, - handleCancel() { this.close() - clearInterval(this.modalTimer); + clearInterval(this.modalTimer) this.modalTimer = null }, - - timerModel(id){ - this.ee = id + timerModel(id) { this.modalTimer = setInterval(() => { - setTimeout( this.initData(this.ee),0) - },1000*4) + setTimeout(this.initData(id), 0) + }, 1000 * 4) }, initData(id) { let _this = this this.visible = true - // _this.drawLine() getAction(this.url.mdcEquipmentDetailedInfo, { id: id }).then((res) => { if (res.success) { _this.resultData = res.result.equipment - _this.driverType = res.result.driveType _this.spindlebeilv = res.result.spindlebeilv _this.feedbeilv = res.result.feedbeilv _this.spindleload = res.result.spindleload - _this.rapidfeed = res.result.rapidfeed; - _this.mdcDriveTypeParamConfigList = res.result.runData; - // _this.xyzAliasesList = res.result.xyzAliasesList; + _this.rapidfeed = res.result.rapidfeed + _this.runData = res.result.runData + _this.xyzList = res.result.xyzList + + // _this.xyzAliasesList = res.result.xyzAliasesList this.$nextTick(() => { _this.drawLine() }) } else { - // _this.$message.warn(res.message) _this.$notification.warning({ - message:'娑堟伅', - description:res.message - }); + message: '娑堟伅', + description: res.message + }) } }) }, - mouseEnterItem(e){ + resetData() { + this.resultData = {} + this.spindlebeilv = null + this.feedbeilv = null + this.spindleload = null + this.rapidfeed = null + this.runData = [] + this.xyzList = null + }, + + mouseEnterItem(e) { console.log(e, e.target, e.target.clientWidth, e.target.scrollWidth) if (e.target.clientWidth >= e.target.scrollWidth) { e.target.style.pointerEvents = 'none' // 闃绘榧犳爣浜嬩欢 pointer-events 灞炴�х敤浜庤缃厓绱犳槸鍚﹀榧犳爣浜嬩欢鍋氬嚭鍙嶅簲銆� } } - }, - beforeDestroy(){ - clearInterval(this.modalTimer); - this.modalTimer = null } } </script> @@ -1268,6 +1286,7 @@ body { overflow-y: hidden !important; } + .full-modal { .ant-modal { top: 0; @@ -1285,51 +1304,63 @@ flex: 1; } } + /deep/ .ant-modal-content { background-color: #312c2c; opacity: 0.9; } + /deep/ .ant-modal-close { color: #1191b0; font-size: 24px; } + /deep/ .ant-modal-close-x { font-size: 24px; } + /deep/ .ant-modal-footer { border-top: none; } + /deep/ .ant-descriptions { border: 1px solid #16738d; margin: 10px 0; } + /deep/ .ant-descriptions-title { color: #fff; padding: 10px; margin-bottom: 0; } + /deep/ .ant-descriptions-view { padding: 0 20px; } + /deep/ .ant-descriptions-view .ant-descriptions-row .ant-descriptions-item { padding-bottom: 5px; } + /deep/ .ant-descriptions-item-colon { color: #fff; width: 5.1vw; } + /deep/ .ant-descriptions-item-content { color: #fff; border: 1px solid #4bcfc8; padding: 0 10px; width: auto; min-width: 130px; + /*max-width: 300px;*/ height: 25px; } .mdcEquipMon { color: #fff; } + fieldset { border: 1px solid #16738d; padding: 17px; @@ -1372,19 +1403,18 @@ margin-bottom: 0px; } - /deep/ .ant-descriptions-item-label{ + /deep/ .ant-descriptions-item-label { width: 6.7vw; text-align: right; margin-right: 10px; } - /deep/ .operationData .ant-descriptions-item-content - { + /deep/ .operationData .ant-descriptions-item-content { width: 130px; overflow: hidden; } - .description-item-class{ + .description-item-class { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentLayout.vue b/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentLayout.vue index f8099d1..08fee08 100644 --- a/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentLayout.vue +++ b/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentLayout.vue @@ -2,13 +2,14 @@ <a-card :bordered="false"> <div class="containerequip"> <div class="container_content"> - <div class="contnet" v-for="(item,index) in dataList" :key="index" :class="node == item.equipmentId ? 'addclass' : '' "> + <div class="contnet" v-for="(item,index) in dataList" :key="index" + :class="node == item.equipmentId ? 'addClass' : '' "> - <div class="content_equipment" @click="openDetail(item)"> + <div style="cursor: pointer" @click="openDetail(item)"> <div class="equipment_box"> <div> <img style="width: 11%;" :src="getStatusImgUrl(item.oporation)" alt=""> - <img class="orange" :src="getImgUrl(item.equipmentTypePictures)"> + <img class="deviceImage" :src="getImgUrl(item.equipmentTypePictures)"> </div> </div> </div> @@ -24,7 +25,7 @@ <script> import EquipmentDetailModal from './EquipmentDetailModal' - import {getFileAccessHttpUrl} from '@/api/manage'; + import { getFileAccessHttpUrl } from '@/api/manage' import { getAction } from '@/api/manage' @@ -32,128 +33,96 @@ export default { name: 'EquipmentLayout', components: { EquipmentDetailModal }, - props: { dataList: { + props: { + dataList: { type: Array, required: true, default: [] - }, equipmentId: '' , - node:''}, - data() { - return { - equipMessageTimer:'' - } - }, - created() { - }, - mounted() { - + }, + node: '' }, methods: { - getImgUrl(img){ - if(img == null || img ==''){ - return require("../../../../../assets/default.png"); + getImgUrl(img) { + if (img == null || img == '') { + return require('../../../../../assets/default.png') } return getFileAccessHttpUrl(img) }, - getStatusImgUrl(imgStaus){ - if(imgStaus == 1){ - return require("../../../../../assets/yellow.png"); - }else if(imgStaus == 2){ - return require("../../../../../assets/yellow.png"); - }else if(imgStaus == 3){ - return require("../../../../../assets/green.png"); - }else if(imgStaus ==22){ - return require("../../../../../assets/red.png"); - }else if(imgStaus ==0){ - return require("../../../../../assets/gray.png"); - }else{ - return require("../../../../../assets/gray.png"); + getStatusImgUrl(imgStatus) { + switch (imgStatus) { + case 1: + case 2: + return require('@/assets/yellow.png') + case 3: + return require('@/assets/green.png') + case 22: + return require('@/assets/red.png') + case 5: + return require('@/assets/orange.png') + default: + return require('@/assets/gray.png') } - }, - getBackgroundUrl(imgurl){ - return require("../../../../../assets/"+imgurl+".gif"); }, openDetail(item) { - if(item.oporation == 0){ - // this.$message.warn("璁惧澶勪簬鍏虫満鐘舵�侊紒"); + if (item.oporation == 0) { this.$notification.warning({ - message:'娑堟伅', - description:"璁惧澶勪簬鍏虫満鐘舵�侊紒" - }); - return false; + message: '娑堟伅', + description: '璁惧澶勪簬鍏虫満鐘舵�侊紒' + }) + return false } - console.log(item); - this.$refs.equipmentDetailModal.initData(item.id); - this.$refs.equipmentDetailModal.timerModel(item.id); - // this.equipMessageTimer = setInterval(() => { - // setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0) - // },1000*10) + this.$refs.equipmentDetailModal.resetData() + this.$refs.equipmentDetailModal.initData(item.id) + this.$refs.equipmentDetailModal.timerModel(item.id) } - }, - beforeDestroy(){ - // clearInterval(this.equipMessageTimer); - // this.equipMessageTimer = null } } </script> <style scoped> - .gray{ - background-image: url("../../../../../assets/gray.gif"); + .deviceImage { -webkit-background-size: 100% 100%; background-size: 100% 100%; background-repeat: no-repeat; } - .green{ - background-image: url("../../../../../assets/green.gif"); - -webkit-background-size: 100% 100%; - background-size: 100% 100%; - background-repeat: no-repeat; - } - .red{ - background-image: url("../../../../../assets/red.gif"); - -webkit-background-size: 100% 100%; - background-size: 100% 100%; - background-repeat: no-repeat; - } - .orange{ - /*background-image: url("../../../../../assets/orange.gif");*/ - -webkit-background-size: 100% 100%; - background-size: 100% 100%; - background-repeat: no-repeat; - } - .equipment_box img{ + + .equipment_box img { width: 45%; } - .containerequip{ + .containerequip { overflow: auto; } - @media screen and (min-width: 1920px){ - .containerequip{ - height: 640px!important; + @media screen and (min-width: 1920px) { + .containerequip { + height: 640px !important; } } - @media screen and (min-width: 1680px) and (max-width: 1920px){ - .containerequip{ - height: 640px!important; + + @media screen and (min-width: 1680px) and (max-width: 1920px) { + .containerequip { + height: 640px !important; } } - @media screen and (min-width: 1400px) and (max-width: 1680px){ - .containerequip{ - height: 493px!important; + + @media screen and (min-width: 1400px) and (max-width: 1680px) { + .containerequip { + height: 493px !important; } } - @media screen and (min-width: 1280px) and (max-width: 1400px){ - .containerequip{ - height: 493px!important; + + @media screen and (min-width: 1280px) and (max-width: 1400px) { + .containerequip { + height: 493px !important; } } - @media screen and (max-width: 1280px){ - .containerequip{ - height: 394px!important; + + @media screen and (max-width: 1280px) { + .containerequip { + height: 394px !important; } } + .container_content { width: 100%; position: relative; @@ -170,7 +139,7 @@ padding-top: 5%; } - .addclass p { + .addClass p { border-bottom: 2px solid #e957ff; } </style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentList.vue b/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentList.vue index 07795c1..ef2bb0a 100644 --- a/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentList.vue +++ b/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentList.vue @@ -1,84 +1,9 @@ <template> <a-card :bordered="false" style="display: flex;flex-direction: column"> - <!-- 鏌ヨ鍖哄煙 --> - <!--<div class="table-page-search-wrapper">--> - <!--<a-form layout="inline" @keyup.enter.native="searchQuery">--> - <!--<a-row :gutter="24">--> - <!--<a-col :md="7" :sm="7">--> - <!--<a-form-item label="璁惧鍚嶇О">--> - <!--<a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" v-model="queryParam.equipmentName"></a-input>--> - <!--</a-form-item>--> - <!--</a-col>--> - <!--<a-col :md="7" :sm="7">--> - <!--<a-form-item label="鐘舵��">--> - <!--<a-select v-model="queryParam.status" placeholder="璇烽�夋嫨">--> - <!--<a-select-option value="">璇烽�夋嫨</a-select-option>--> - <!--<a-select-option value="0">鍏虫満</a-select-option>--> - <!--<a-select-option value="2">寰呮満</a-select-option>--> - <!--<a-select-option value="3">杩愯</a-select-option>--> - <!--<a-select-option value="22">鎶ヨ</a-select-option>--> - <!--</a-select>--> - <!--</a-form-item>--> - <!--</a-col>--> - <!--<a-col :md="3" :sm="3">--> - <!--<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">--> - <!--<a @click="handleToggleSearch" style="margin-left: 8px">--> - <!--{{ toggleSearchStatus ? '鏀惰捣' : '灞曞紑' }}--> - <!--<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>--> - <!--</a>--> - <!--</span>--> - <!--</a-col>--> - <!--</a-row>--> - <!--<a-row :gutter="24">--> - <!--<template v-if="toggleSearchStatus">--> - <!--<a-col :md="12" :sm="12">--> - <!--<a-form-item label="閲囬泦鏃堕棿">--> - <!--<a-range-picker @change="dateParamChange" v-model="dates"/>--> - <!--</a-form-item>--> - <!--</a-col>--> - <!--</template>--> - - <!--</a-row>--> - <!--</a-form>--> - <!--</div>--> - <!-- 鎿嶄綔鎸夐挳鍖哄煙 --> - <!--<div class="table-operator" style="border-top: 5px">--> - <!--<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>--> - <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">閲嶇疆</a-button>--> - <!--</div>--> - <div class="equipmentList" id="DeviceList"> - <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">--> - <!--<i class="anticon anticon-info-circle ant-alert-icon"></i>宸查�夋嫨 <a style="font-weight: 600">{{--> - <!--selectedRowKeys.length }}</a>椤� --> - <!--<a style="margin-left: 24px" @click="onClearSelected">娓呯┖</a>--> - <!--</div>--> - <a-table ref="table" bordered size="middle" rowKey="equipmentId" :columns="columns" :dataSource="dataSource" - :pagination="false" :loading="loading" :scroll="{x:'max-content',y:scrollY}"> - <template slot="equipmentId" slot-scope="text, record"> - <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div> - </template> - <template slot="equipmentName" slot-scope="text, record"> - <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div> - </template> - <template slot="oporationDict" slot-scope="text, record"> - <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div> - </template> - <template slot="equipmentStatus" slot-scope="text"> - <div :style="{color:text!==0?'#f00':null}">{{text===0?'姝e父':'寮傚父'}}</div> - </template> - <template slot="collecttime" slot-scope="text, record"> - <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div> - </template> - <template slot="action" slot-scope="text, record"> - <a-popconfirm title="纭畾鍙嶉鍚�?" @confirm="$emit('editEquipmentStatus',record)" v-has="'deiveBaseInfo:responseStatus'"> - <a>鐘舵�佸弽棣�</a> - </a-popconfirm> - </template> - </a-table> - + :pagination="false" :loading="loading" :scroll="{x:'max-content',y:scrollY}"/> </div> </a-card> </template> @@ -88,112 +13,98 @@ export default { name: 'EquipmentLayout', - components: { }, + components: {}, data() { return { - loading:false, - url: { - - }, + loading: false, + url: {}, columns: [ { title: '璁惧ID', - align: "center", + align: 'center', dataIndex: 'equipmentId', - scopedSlots: {customRender: 'equipmentId'}, - width:210 + width: 210 }, { title: '璁惧鍚嶇О', - align: "center", + align: 'center', dataIndex: 'equipmentName', - scopedSlots: {customRender: 'equipmentName'}, - width:300 + width: 300 }, { title: '鐘舵��', - align: "center", + align: 'center', dataIndex: 'oporationDict', - scopedSlots: {customRender: 'oporationDict'}, - width:200 - }, - { - title: '璁惧寮傚父', - align: "center", - dataIndex: 'equipmentStatus', - scopedSlots: {customRender: 'equipmentStatus'}, - width:200 + width: 200 }, { title: '閲囬泦鏃堕棿', - align: "center", + align: 'center', dataIndex: 'collecttime', - defaultSortOrder:'descend', - sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1}, - scopedSlots: {customRender: 'collecttime'}, - width:350 - }, - { - title: '鎿嶄綔', - dataIndex: 'action', - scopedSlots: {customRender: 'action'}, - align: "center", - width: 150, - fixed:'right' + defaultSortOrder: 'descend', + sorter: (a, b) => { + return a.collecttime > b.collecttime ? 1 : -1 + }, + width: 350 } ], - scrollY:465, + scrollY: 465 } }, - props: { dataSource: { + props: { + dataSource: { type: Array, required: true, default: [] - } }, - watch: { + } }, + watch: {}, methods: { - 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) + 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 - }, + } }, - mounted(){ - window.addEventListener('resize',this.handleWindowResize) + mounted() { + window.addEventListener('resize', this.handleWindowResize) this.handleWindowResize() - }, + } } </script> <style scoped> - .equipmentList{ + .equipmentList { flex: 1; overflow: hidden; } - @media screen and (min-width: 1920px){ - .equipmentList{ - height: 640px!important; + @media screen and (min-width: 1920px) { + .equipmentList { + height: 640px !important; } } - @media screen and (min-width: 1680px) and (max-width: 1920px){ - .equipmentList{ - height: 640px!important; + + @media screen and (min-width: 1680px) and (max-width: 1920px) { + .equipmentList { + height: 640px !important; } } - @media screen and (min-width: 1400px) and (max-width: 1680px){ - .equipmentList{ - height: 493px!important; + + @media screen and (min-width: 1400px) and (max-width: 1680px) { + .equipmentList { + height: 493px !important; } } - @media screen and (min-width: 1280px) and (max-width: 1400px){ - .equipmentList{ - height: 493px!important; + + @media screen and (min-width: 1280px) and (max-width: 1400px) { + .equipmentList { + height: 493px !important; } } - @media screen and (max-width: 1280px){ - .equipmentList{ - height: 394px!important; + + @media screen and (max-width: 1280px) { + .equipmentList { + height: 394px !important; } } diff --git a/src/views/mdc/base/modules/DeviceLog/AlarmLogList.vue b/src/views/mdc/base/modules/DeviceLog/AlarmLogList.vue index 4aa3935..f510ee4 100644 --- a/src/views/mdc/base/modules/DeviceLog/AlarmLogList.vue +++ b/src/views/mdc/base/modules/DeviceLog/AlarmLogList.vue @@ -1,42 +1,27 @@ <template> - <a-card :bordered="false"> - <!-- table鍖哄煙-begin --> - <div class="table_alarmLogist"> - <a-table ref="table" bordered size="middle" :rowKey="(record,index)=>{return index}" :columns="columns" - :dataSource="dataList" :pagination="false" :loading="loadingwarnStatus"> - <template slot="status" slot-scope="status"> - <div v-if="status == '3' || status == '23'" style="color: #00ee00;width: 100%; height: 100%;">杩愯</div> - <div v-else-if="status == '1' || status == '2'" style="color: #ffea91;width: 100%; height: 100%;">寰呮満</div> - <div v-else-if="status == '0'" style="color: #A8A8A8;width: 100%; height: 100%;">鍏虫満</div> - <div v-else-if="status == '22'" style="color: red;width: 100%; height: 100%;">鎶ヨ</div> - </template> - </a-table> - </div> - </a-card> + <div class="table_alarmLogist"> + <a-table ref="table" bordered size="middle" :rowKey="(record,index)=>{return index}" :columns="columns" + :dataSource="dataList" :pagination="false" :loading="loading"> + <template slot="status" slot-scope="status"> + <div v-if="status == '3' || status == '23'" style="color: #00ee00;width: 100%; height: 100%;">杩愯</div> + <div v-else-if="status == '1' || status == '2'" style="color: #ffea91;width: 100%; height: 100%;">寰呮満</div> + <div v-else-if="status == '0'" style="color: #A8A8A8;width: 100%; height: 100%;">鍏虫満</div> + <div v-else-if="status == '22'" style="color: red;width: 100%; height: 100%;">鎶ヨ</div> + </template> + </a-table> + </div> </template> <script> - import JDictSelectTag from '@/components/dict/JDictSelectTag' - - import JInput from '@/components/jeecg/JInput' - import JEllipsis from '@/components/jeecg/JEllipsis' - import Tooltip from 'ant-design-vue/es/tooltip' - export default { name: 'AlarmLogList', - components: { - Tooltip, - JDictSelectTag, - JInput, - JEllipsis - }, props: { dataList: { type: Array, required: true, default: [] }, - loadingwarnStatus:{ + loading:{ type:Boolean, default: false } @@ -55,22 +40,17 @@ title: '鎶ヨ鏃堕棿', align: 'center', dataIndex: 'startTime', - // defaultSortOrder:'descend', - // sorter: (a, b) => {return a.startTime>b.startTime?1:-1} }, { title: '缁撴潫鏃堕棿', align: 'center', dataIndex: 'endTime', - // defaultSortOrder:'descend', - // sorter: (a, b) => {return a.endTime>b.endTime?1:-1} }, { title: '鎸佺画鏃堕棿', align: 'center', dataIndex: 'duration', customRender:(t,r,index) =>{ - // console.log(t) var ss = parseInt(t) if(ss>=3600){ // 鏍规嵁绉掓暟杞崲鎴愬搴旂殑鏃跺垎绉� @@ -91,13 +71,6 @@ return hour + '灏忔椂' + min + '鍒�' + sec + '绉�' } } - // if(sec == '00'){ - // return hour + '灏忔椂' + min + '鍒�' - // } - // if(min == '00' && sec == '00'){ - // return hour + '灏忔椂' - // } - // return hour + '灏忔椂' + min + '鍒�' + sec + '绉�' }else if(60<ss && ss<3600){ const min1 = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60) @@ -108,8 +81,6 @@ return sec2 + '绉�' } } - // defaultSortOrder:'descend', - // sorter: (a, b) => {return a.duration>b.duration?1:-1} }, { title: '鎶ヨ鍙�', @@ -137,31 +108,31 @@ @media screen and (min-width: 1920px){ .table_alarmLogist{ height: 417px!important; - overflow: scroll; + overflow: auto; } } @media screen and (min-width: 1680px) and (max-width: 1920px){ .table_alarmLogist{ height: 417px!important; - overflow: scroll; + overflow: auto; } } @media screen and (min-width: 1400px) and (max-width: 1680px){ .table_alarmLogist{ height: 266px!important; - overflow: scroll; + overflow: auto; } } @media screen and (min-width: 1280px) and (max-width: 1400px){ .table_alarmLogist{ height: 360px!important; - overflow: scroll; + overflow: auto; } } @media screen and (max-width: 1280px){ .table_alarmLogist{ height: 170px!important; - overflow: scroll; + overflow: auto; } } </style> diff --git a/src/views/mdc/base/modules/DeviceLog/FaultLogList.vue b/src/views/mdc/base/modules/DeviceLog/FaultLogList.vue new file mode 100644 index 0000000..68657a4 --- /dev/null +++ b/src/views/mdc/base/modules/DeviceLog/FaultLogList.vue @@ -0,0 +1,125 @@ +<template> + <div class="table_alarmLogist"> + <a-table ref="table" bordered size="middle" :rowKey="(record,index)=>{return index}" :columns="columns" + :dataSource="dataList" :pagination="false" :loading="loading"> + <template slot="status" slot-scope="status"> + <div v-if="status == '25'" style="color: #C11900;width: 100%; height: 100%;">鏁呴殰</div> + </template> + </a-table> + </div> +</template> + +<script> + export default { + name: 'FaultLogList', + props: { + dataList: { + type: Array, + required: true, + default: [] + }, + loading: { + type: Boolean, + default: false + } + }, + data() { + return { + disabled: true, + columns: [ + { + title: '鐘舵��', + align: 'center', + dataIndex: 'status', + scopedSlots: { customRender: 'status' } + }, + { + title: '鏁呴殰鏃堕棿', + align: 'center', + dataIndex: 'startTime' + }, + { + title: '缁撴潫鏃堕棿', + align: 'center', + dataIndex: 'endTime' + }, + { + title: '鎸佺画鏃堕棿', + align: 'center', + dataIndex: 'duration', + customRender: (t, r, index) => { + var ss = parseInt(t) + if (ss >= 3600) { + // 鏍规嵁绉掓暟杞崲鎴愬搴旂殑鏃跺垎绉� + const hour = parseInt(ss / 3600) < 10 ? '0' + parseInt(ss / 3600) : parseInt(ss / 3600) + const min = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60) + const sec = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60) + if (min == '00') { + if (sec == '00') { + return hour + '灏忔椂' + } else { + return hour + '灏忔椂' + sec + '绉�' + } + + } else { + if (sec == '00') { + return hour + '灏忔椂' + min + '鍒�' + } else { + return hour + '灏忔椂' + min + '鍒�' + sec + '绉�' + } + } + + } else if (60 < ss && ss < 3600) { + const min1 = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60) + const sec1 = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60) + return min1 + '鍒�' + sec1 + '绉�' + } else { + const sec2 = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60) + return sec2 + '绉�' + } + } + }, + ] + } + } + } +</script> + +<style lang="less" scoped> + @import '~@assets/less/common.less'; + + @media screen and (min-width: 1920px) { + .table_alarmLogist { + height: 417px !important; + overflow: auto; + } + } + + @media screen and (min-width: 1680px) and (max-width: 1920px) { + .table_alarmLogist { + height: 417px !important; + overflow: auto; + } + } + + @media screen and (min-width: 1400px) and (max-width: 1680px) { + .table_alarmLogist { + height: 266px !important; + overflow: auto; + } + } + + @media screen and (min-width: 1280px) and (max-width: 1400px) { + .table_alarmLogist { + height: 360px !important; + overflow: auto; + } + } + + @media screen and (max-width: 1280px) { + .table_alarmLogist { + height: 170px !important; + overflow: auto; + } + } +</style> diff --git a/src/views/mdc/base/modules/DeviceLog/LogInfo.vue b/src/views/mdc/base/modules/DeviceLog/LogInfo.vue index da70e00..051eadd 100644 --- a/src/views/mdc/base/modules/DeviceLog/LogInfo.vue +++ b/src/views/mdc/base/modules/DeviceLog/LogInfo.vue @@ -6,18 +6,18 @@ <a-row :gutter="24"> <a-col :md="4" :sm="4"> <a-form-item label="璁惧缂栧彿"> - <a-input placeholder="璇烽�夋嫨璁惧" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input> + <a-input placeholder="璇烽�夋嫨璁惧" readOnly v-model="queryParams.equipmentId"></a-input> </a-form-item> </a-col> <a-col :md="6" :sm="6"> <a-form-item label="璁惧鍚嶇О"> - <a-input placeholder="璇烽�夋嫨璁惧" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input> + <a-input placeholder="璇烽�夋嫨璁惧" readOnly v-model="queryParams.equipmentName"></a-input> </a-form-item> </a-col> <a-col :md="4" :sm="4"> <a-form-item label="鏃ユ湡"> - <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" @change="dataChange" - format='YYYY-MM-DD'/> + <a-date-picker v-model="queryParams.collectTimeStr" :disabledDate="disabledDate" + value-format='YYYY-MM-DD'/> </a-form-item> </a-col> <a-col :md="2" :sm="2" :xs="2"> @@ -29,131 +29,94 @@ </a-row> </a-form> </div> - <div style="width: 100%;height: 180px;border: none;" align="center"> - <table cellpadding="0" cellspacing="0" width="100%"> - <tr> - <td> - <table width="100%"> - <tr style="word-break: keep-all;"> - <td align="right"><a id="btnMdcLogWline" href="#"> - <div style="padding-top: 15px;" @click="openWorkChart"> - <img src="../../../../../assets/image/linechart.png" alt=""> - <p>宸ヤ綔鏇茬嚎</p> - </div> - </a></td> - <td width="100%" height="100%"> - <table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0"> - <tr> - <td style="word-break: keep-all;" align="left"> - <div - style="width: 100%; height: 62px;border: 1px solid;border-color: #9d9d9d;position: relative;overflow: hidden"> - <div class="mdcLogShowOne" - :style='{display: "inline-block",width:item.dateProportion, height: "100%"}' - v-for="item in normal"> - <span v-if="item.status == 0" - :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#A8A8A8",position:"absolute",top:"0"}'></span> - <span v-if="item.status == 1" - :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span> - <span v-if="item.status == 2" - :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span> - <span v-if="item.status == 3" - :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",top:"0"}'></span> - <span v-if="item.status == 23" - :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",bottom:"0"}'></span> - </div> - <div v-if="item.status == 22" style="z-index: 999;" - :style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}' - v-for="item in waring"> + + <div> + <div class="equipment-status-container"> + <a href="#" @click="openWorkChart"> + <img src="@/assets/image/linechart.png" alt=""> + <div>宸ヤ綔鏇茬嚎</div> + </a> + + <div> + <div :style='{display: "inline-block",width:item.dateProportion, height: "100%"}' v-for="item in normal"> + <span v-if="item.status == 0" + :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#A8A8A8",position:"absolute",top:"0"}'></span> + <span v-if="item.status == 1" + :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span> + <span v-if="item.status == 2" + :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span> + <span v-if="item.status == 3" + :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",top:"0"}'></span> + <span v-if="item.status == 23" + :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",bottom:"0"}'></span> + </div> + <div v-if="item.status == 22" + :style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}' + v-for="item in warning"> <span :style='{display: "inline-block",width:"100%", left:0, height: "68%", background: "#FD0008",position:"absolute",bottom:"0"}'></span> - </div> - </div> - </td> - </tr> - </table> - </td> - <td align="left"><a id="btnMdcLogBar" href="#"> - <div style="padding-top: 15px;" @click="openHistoryChart"> - <img src="../../../../../assets/image/Histogram.png" alt=""> - <p>鍘嗗彶璁板綍</p> - </div> - </a></td> - </tr> - <tr> - <td align="right">0</td> - <td width="100%"> - <table width="100%;" cellpadding="0" cellspacing="0"> - <tr align="right" style="word-break: keep-all;"> - <td>02:00</td> - <td>04:00</td> - <td>06:00</td> - <td>08:00</td> - <td>10:00</td> - <td>12:00</td> - <td>14:00</td> - <td>16:00</td> - <td>18:00</td> - <td>20:00</td> - <td>22:00</td> - <td>24:00</td> - </tr> - </table> - </td> - <td></td> - </tr> - </table> - </td> - </tr> - <tr> - <td> - <table width="400px;" align="center" style="margin-top: 20px;"> - <tr> - <td align="right"><a id="btnMdcLogPreviousDay" style="margin-right:15px"> - <img @click="dataBefore" src="../../../../../assets/image/left.png" alt=""> - </a></td> - <td align="right">鍏虫満</td> - <td align="left"> - <div style="width: 15px;height: 15px;background-color: #A8A8A8;position: static;"/> - </td> - <td align="right">寰呮満</td> - <td align="left"> - <div style="width: 15px;height: 15px;background-color: #ffea91"/> - </td> - <td align="right">杩愯</td> - <td align="left"> - <div style="width: 15px;height: 15px;background-color: #00ee00"/> - </td> - <td align="right">鎶ヨ</td> - <td align="left"> - <div style="width: 15px;height: 15px;background-color: red"/> - </td> - <td><a id="btnMdcLogAfterDay" style="margin-left:20px"> - <img @click="dataAfter" src="../../../../../assets/image/right.png" alt=""> - </a></td> - </tr> - </table> - </td> - </tr> - </table> + </div> + <div v-if="item.status == 25" + :style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}' + v-for="item in fault"> + <span + :style='{display: "inline-block",width:"100%", left:0, height: "50%", background: "#C11900",position:"absolute",bottom:"0"}'></span> + </div> + </div> + + <a href="#" @click="openHistoryChart"> + <img src="@/assets/image/Histogram.png" alt=""> + <div>鍘嗗彶璁板綍</div> + </a> + </div> + + <div class="time-container"> + <div>0</div> + <div> + <div v-for="item in 12">{{('0'+item*2).slice(-2)}}:00</div> + </div> + <div></div> + </div> + + <a-space class="date-change-container"> + <img @click="dataBefore" src="@/assets/image/left.png" alt=""> + <span>鍏虫満</span> + <div style="background-color: #A8A8A8"/> + <span>寰呮満</span> + <div style="background-color: #ffea91"/> + <span>杩愯</span> + <div style="background-color: #00ee00"/> + <span>鎶ヨ</span> + <div style="background-color: #f00"/> + <span>鏁呴殰</span> + <div style="background-color: #C11900"/> + <img @click="dataAfter" src="@/assets/image/right.png" alt=""> + </a-space> </div> - <div id="mdcLogTabs" class="mdcLogTabs-title" style="width: 100%;"> + + <div id="mdcLogTabs" class="mdcLogTabs-title"> <div> - <a-tabs :activeKey="activeKey" @change="tabChange"> + <a-tabs> <a-tab-pane key="1" tab="璁惧鏃ュ織" force-render> - <log-list :dataList='normalList' ref="logList" :loadingequip='loadingStatus'></log-list> + <log-list :dataList='normalList' :loading='loading'/> </a-tab-pane> <a-tab-pane key="2" tab="杩愯鏃ュ織"> - <work-log-list :dataList='runList' ref="workLogList" :loadingrun="loadingRunStatus"></work-log-list> + <work-log-list :dataList='runList' :loading="loading"/> </a-tab-pane> <a-tab-pane key="3" tab="鎶ヨ鏃ュ織"> - <alarm-log-list :dataList='waringList' ref="alarmLogList" :loadingwarn="loadingWarnStatus"></alarm-log-list> + <alarm-log-list :dataList='warningList' :loading="loading"/> + </a-tab-pane> + <a-tab-pane key="4" tab="鏁呴殰鏃ュ織"> + <fault-log-list :dataList='faultList' :loading="loading"/> </a-tab-pane> </a-tabs> </div> </div> + <work-chart-model ref="workChartModel" :collectTime="this.queryParams.collectTime" - :equipment="this.equipment"></work-chart-model> - <work-history-model ref="workHistoryModel"></work-history-model> + :equipment="equipment"/> + + <work-history-model ref="workHistoryModel"/> </div> </template> @@ -163,12 +126,14 @@ import LogList from './LogList' import WorkLogList from './WorkLogList' import AlarmLogList from './AlarmLogList' + import FaultLogList from './FaultLogList' import WorkChartModel from './WorkChartModel' import WorkHistoryModel from './WorkHistoryModel' import { getAction } from '@/api/manage' export default { - components: { + components: { + FaultLogList, LogList, WorkLogList, AlarmLogList, @@ -178,101 +143,82 @@ props: { equipment: {} }, data() { return { - readOnly: true, - defaultId: '', - defaultName: '', - middleTime: '', queryParam: {}, queryParams: { - collectTime: undefined + collectTimeStr: moment().format('YYYY-MM-DD') }, - loadingStatus: false, - loadingRunStatus: false, - loadingWarnStatus: false, + loading: false, normal: [], - waring: [], + warning: [], + fault: [], normalList: [], - waringList: [], + warningList: [], + faultList: [], runList: [], - activeKey: '1', - equipment: {}, url: { - getBaseTree: '/mdc/mdcequipment/loadTree', getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid', list: '/mdc/mdcEquipmentRunningSection/logList' - }, - ProStartId: '' + } } }, methods: { - tabChange(val) { - this.activeKey = val - }, disabledDate(current) { return current && current > moment().subtract('days', 0) }, queryChart() { - // this.normal = [] - // this.waring = [] - this.loadingStatus = true - this.loadingRunStatus = true - this.loadingWarnStatus = true - getAction(this.url.list, this.queryParams).then((res) => { - this.normalList = [] - this.waringList = [] - this.runList = [] - this.loadingStatus = false - this.loadingRunStatus = false - this.loadingWarnStatus = false - this.normal = [] - this.waring = [] - if (res.success) { - if (res.result != null) { - for (let i = 0; i < res.result.length; i++) { - this.normalList.push(res.result[i]) - if ('22' == res.result[i].status) { - this.waringList.push(res.result[i]) + this.loading = true + this.normalList = [] + this.warningList = [] + this.runList = [] + this.faultList = [] + this.normal = [] + this.warning = [] + this.fault = [] + getAction(this.url.list, this.queryParams) + .then((res) => { + if (res.success) { + if (res.result != null) { + for (let i = 0; i < res.result.length; i++) { + this.normalList.push(res.result[i]) res.result[i].dateProportion = res.result[i].duration / 86400 * 100 + '%' - let leftTmp = (moment(res.result[i].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400 - res.result[i].left = leftTmp / 86400 * 100 + '%' - this.waring.push(res.result[i]) - - } else if ('3' == res.result[i].status) { - this.runList.push(res.result[i]) - res.result[i].dateProportion = res.result[i].duration / 86400 * 100 + '%' - this.normal.push(res.result[i]) - } else { - res.result[i].dateProportion = res.result[i].duration / 86400 * 100 + '%' - this.normal.push(res.result[i]) + if ('22' == res.result[i].status) { + let leftTmp = (moment(res.result[i].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400 + res.result[i].left = leftTmp / 86400 * 100 + '%' + this.warning.push(res.result[i]) + this.warningList.push(res.result[i]) + } else if ('25' == res.result[i].status) { + let leftTmp = (moment(res.result[i].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400 + res.result[i].left = leftTmp / 86400 * 100 + '%' + this.faultList.push(res.result[i]) + this.fault.push(res.result[i]) + } else if ('3' == res.result[i].status) { + this.runList.push(res.result[i]) + this.normal.push(res.result[i]) + } else { + this.normal.push(res.result[i]) + } } } } - } - }).finally(() => { - this.loading = false - this.cardLoading = false - }) - }, - dataChange(val) { - this.queryParams.collectTime = val - this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD') + }) + .finally(() => { + this.loading = false + }) }, searchQuery() { - // console.log(this.queryParams.collectTime) - this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD') if (!this.queryParams.equipmentId || !this.queryParams.equipmentName) { this.$notification.warning({ message: '娑堟伅', - description: '璇烽�夋嫨璁惧' + description: '璇烽�夋嫨璁惧杩涜鏌ヨ' }) - return false + return } this.queryChart() }, searchReset() { this.queryParams = { - collectTime : moment() - } + collectTimeStr: moment().format('YYYY-MM-DD') + } this.equipment = {} this.queryChart() }, @@ -282,12 +228,13 @@ message: '娑堟伅', description: '璇烽�夋嫨璁惧杩涜鏌ヨ' }) - } else { - // 鍒ゆ柇鏄惁鐐瑰嚮璁惧鏃ュ織琛ㄦ牸琛岀殑鏁版嵁锛屾鏃朵负鐐瑰嚮琛ㄦ牸鏁版嵁涓篺alse - this.$refs.workChartModel.isClicklogListRow = false - this.$refs.workChartModel.add(this.equipment) - this.$refs.workChartModel.title = '宸ヤ綔鏇茬嚎' + return } + + // 鍒ゆ柇鏄惁鐐瑰嚮璁惧鏃ュ織琛ㄦ牸琛岀殑鏁版嵁锛屾鏃朵负鐐瑰嚮琛ㄦ牸鏁版嵁涓篺alse + this.$refs.workChartModel.isClicklogListRow = false + this.$refs.workChartModel.add(this.equipment) + this.$refs.workChartModel.title = '宸ヤ綔鏇茬嚎' }, openHistoryChart() { if (!this.equipment.equipmentId) { @@ -295,27 +242,26 @@ message: '娑堟伅', description: '璇烽�夋嫨璁惧杩涜鏌ヨ' }) - } else { - this.$refs.workHistoryModel.add(this.equipment) - this.$refs.workHistoryModel.title = '鍘嗗彶鏃ュ織' + return } + this.$refs.workHistoryModel.add(this.equipment) + this.$refs.workHistoryModel.title = '鍘嗗彶鏃ュ織' }, dataBefore() { - this.queryParams.collectTime = moment(this.queryParams.collectTime.add(-1, 'd'), 'YYYY-MM-DD') + this.queryParams.collectTimeStr = moment(this.queryParams.collectTimeStr).add(-1, 'd').format('YYYY-MM-DD') this.searchQuery() }, dataAfter() { - if ((this.queryParams.collectTime).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) { + if (moment(this.queryParams.collectTimeStr).isSame(moment(), 'd')) { this.$notification.warning({ message: '娑堟伅', description: '璇烽�夋嫨浠婂ぉ浠ュ強浠婂ぉ涔嬪墠鐨勬棩鏈燂紒锛�' }) - } else { - this.queryParams.collectTime = moment(this.queryParams.collectTime.add(1, 'd'), 'YYYY-MM-DD') - this.searchQuery() + return } - + this.queryParams.collectTimeStr = moment(this.queryParams.collectTimeStr).add(1, 'd').format('YYYY-MM-DD') + this.searchQuery() }, initEquipment(id) { let _this = this @@ -324,11 +270,10 @@ if (res.result != null) { _this.$set(this.queryParams, 'equipmentName', res.result.equipmentName) _this.$set(this.queryParams, 'equipmentId', res.result.equipmentId) - _this.equipment = res.result - _this.searchQuery() + _this.$emit('initEquipment', res.result) } else { - this.queryParams = {} - this.equipment = {} + _this.queryParams = {} + _this.$emit('initEquipment', {}) _this.$notification.warning({ message: '娑堟伅', description: '璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒' @@ -345,8 +290,6 @@ } }, created() { - this.queryParams.collectTime = moment() - this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD') this.initEquipment() }, watch: { @@ -354,7 +297,6 @@ if (val && val.equipmentId) { this.$set(this.queryParams, 'equipmentName', val.equipmentName) this.$set(this.queryParams, 'equipmentId', val.equipmentId) - this.equipment = val this.searchQuery() } else { this.initEquipment(val.key) @@ -364,48 +306,65 @@ } </script> -<style scoped="scoped"> - .mdcLogTabs-title { +<style scoped="scoped" lang="less"> + @image-container-width: 58px; + + .equipment-status-container { display: flex; - width: 100%; + + > a { + display: inline-block; + text-align: center; + width: @image-container-width + } + + > div { + height: 62px; + border: 1px solid #9d9d9d; + position: relative; + overflow: hidden; + flex: 1 + } } - .mdcLogTabs-title > div { - margin: 2px 5px; - width: 100%; - color: #000; - font-weight: 600; - padding: 3px; - border-radius: 5px; - } - - .btnMdcLogSearch { - position: relative; - margin-left: 10px; - } - - .btnMdcLogSearch .btnMdcLogSearchZi { - position: absolute; - left: 3px; - } - - .btnMdcLogSearch input { - padding-left: 23px; - border-radius: 5px; - outline: none; - color: #000; - border: 1px solid #000; - } - - #mdcLogShow { + .time-container { display: flex; + align-items: center; + + > div:not(:nth-child(2)) { + width: @image-container-width; + text-align: right; + } + + > div:nth-child(2) { + width: calc(100% - @image-container-width * 2); + display: flex; + + div { + width: calc(100% / 12); + text-align: right; + } + } } - #mdcLogShow > div { - flex: 1; - } + .date-change-container { + display: flex; + align-items: center; + justify-content: center; + margin-top: 20px; - /*.mdcLogShowOne{*/ - /*position: absolute;*/ - /*}*/ + /deep/ .ant-space-item { + display: flex; + align-items: center; + + > div { + width: 15px; + height: 15px; + } + } + + img { + cursor: pointer; + } + } </style> diff --git a/src/views/mdc/base/modules/DeviceLog/LogList.vue b/src/views/mdc/base/modules/DeviceLog/LogList.vue index 4888611..6a5292b 100644 --- a/src/views/mdc/base/modules/DeviceLog/LogList.vue +++ b/src/views/mdc/base/modules/DeviceLog/LogList.vue @@ -1,52 +1,31 @@ <template> - <a-card :bordered="false"> - <!-- table鍖哄煙-begin --> - <div class="table_logList"> - <a-table ref="table" bordered size="middle" :rowKey="(record,index)=>{return index}" :columns="columns" - :dataSource="dataList" :pagination="ipagination" :loading="loadingequip" @change="handleTableChange" - :customRow="rowClick"> - <template slot="status" slot-scope="status"> - <div v-if="status == '3' || status == '23'" style="color: #00ee00;width: 100%; height: 100%;">杩愯</div> - <div v-else-if="status == '1' || status == '2'" style="color: #ffea91;width: 100%; height: 100%;">寰呮満</div> - <div v-else-if="status == '0'" style="color: #A8A8A8;width: 100%; height: 100%;">鍏虫満</div> - <div v-else-if="status == '22'" style="color: red;width: 100%; height: 100%;">鎶ヨ</div> - </template> - </a-table> - </div> - </a-card> + <div class="table_logList"> + <a-table ref="table" bordered :rowKey="(record,index)=>{return index}" :columns="columns" + :dataSource="dataList" :pagination="ipagination" :loading="loading" @change="handleTableChange" + :customRow="rowClick"> + <template slot="status" slot-scope="status"> + <div v-if="status == '3' || status == '23'" style="color: #00ee00;width: 100%; height: 100%;">杩愯</div> + <div v-else-if="status == '1' || status == '2'" style="color: #ffea91;width: 100%; height: 100%;">寰呮満</div> + <div v-else-if="status == '0'" style="color: #A8A8A8;width: 100%; height: 100%;">鍏虫満</div> + <div v-else-if="status == '22'" style="color: red;width: 100%; height: 100%;">鎶ヨ</div> + <div v-else-if="status == '25'" style="color: #C11900;width: 100%; height: 100%;">鏁呴殰</div> + </template> + </a-table> + </div> </template> <script> - import JDictSelectTag from '@/components/dict/JDictSelectTag' - import { - requestPut, - deleteAction - } from '@/api/manage' - - import JInput from '@/components/jeecg/JInput' - import JEllipsis from '@/components/jeecg/JEllipsis' - import Tooltip from 'ant-design-vue/es/tooltip' - import { - JeecgListMixin - } from '@/mixins/JeecgListMixin' import moment from 'moment' export default { name: 'LogList', - mixins: [JeecgListMixin], - components: { - Tooltip, - JDictSelectTag, - JInput, - JEllipsis - }, props: { dataList: { type: Array, required: true, default: [] }, - loadingequip: { + loading: { type: Boolean, default: false } @@ -54,10 +33,6 @@ watch: {}, data() { return { - statusName: '', - disabled: true, - disableMixinCreated: true, - loading: false, ipagination: { current: 1, pageSize: 100, @@ -116,14 +91,6 @@ return hour + '灏忔椂' + min + '鍒�' + sec + '绉�' } } - // if(sec == '00'){ - // return hour + '灏忔椂' + min + '鍒�' - // } - // if(min == '00' && sec == '00'){ - // return hour + '灏忔椂' - // } - // return hour + '灏忔椂' + min + '鍒�' + sec + '绉�' - } else if (60 < ss && ss < 3600) { const min1 = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60) const sec1 = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60) @@ -153,7 +120,6 @@ this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc' } this.ipagination = pagination - // this.loadData(); }, /** * 缁欒澶囨棩蹇楄〃鏍间腑鐨勮娣诲姞鐐瑰嚮浜嬩欢 @@ -162,6 +128,9 @@ */ rowClick(record) { return { + style: { + cursor: 'pointer' + }, on: { click: () => { // 鍏虫満鐘舵�佽澶囨棩蹇椾笉寮瑰嚭宸ヤ綔鏇茬嚎 @@ -175,10 +144,7 @@ } } } - }, - created() { } - } </script> @@ -188,35 +154,35 @@ @media screen and (min-width: 1920px) { .table_logList { height: 417px !important; - overflow: scroll; + overflow: auto; } } @media screen and (min-width: 1680px) and (max-width: 1920px) { .table_logList { height: 417px !important; - overflow: scroll; + overflow: auto; } } @media screen and (min-width: 1400px) and (max-width: 1680px) { .table_logList { height: 266px !important; - overflow: scroll; + overflow: auto; } } @media screen and (min-width: 1280px) and (max-width: 1400px) { .table_logList { height: 360px !important; - overflow: scroll; + overflow: auto; } } @media screen and (max-width: 1280px) { .table_logList { height: 170px !important; - overflow: scroll; + overflow: auto; } } </style> diff --git a/src/views/mdc/base/modules/DeviceLog/WorkChartModel.vue b/src/views/mdc/base/modules/DeviceLog/WorkChartModel.vue index 864753c..4159410 100644 --- a/src/views/mdc/base/modules/DeviceLog/WorkChartModel.vue +++ b/src/views/mdc/base/modules/DeviceLog/WorkChartModel.vue @@ -4,67 +4,63 @@ :footer="null" :visible="visible" @cancel="handleCancel" cancelText="鍏抽棴"> <div> - <div> - <a-row :gutter="24"> - <a-col :span="6"> - <a-form-item label="璁惧缂栧彿" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input> - </a-form-item> - </a-col> - <a-col :span="6"> - <a-form-item label="鏃ユ湡" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-date-picker v-model="queryParams.paramDate" :disabledDate="disabledDate" format='YYYY-MM-DD'/> - </a-form-item> - </a-col> - <a-col :span="6"> - <a-form-item label="閲囨牱鍛ㄦ湡" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-input-number v-model="queryParams.period"/> - </a-form-item> - </a-col> - </a-row> - <a-row :gutter="24"> - <a-col :span="6"> - <a-form-item label="璁惧鍚嶇О" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input> - </a-form-item> + <a-row :gutter="24"> + <a-col :span="6"> + <a-form-item label="璁惧缂栧彿" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input> + </a-form-item> + </a-col> + <a-col :span="6"> + <a-form-item label="鏃ユ湡" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-date-picker v-model="queryParams.paramDate" :disabledDate="disabledDate" format='YYYY-MM-DD'/> + </a-form-item> + </a-col> + <a-col :span="6"> + <a-form-item label="閲囨牱鍛ㄦ湡" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-input-number v-model="queryParams.period"/> + </a-form-item> + </a-col> + </a-row> + <a-row :gutter="24"> + <a-col :span="6"> + <a-form-item label="璁惧鍚嶇О" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input> + </a-form-item> + </a-col> + <a-col :span="6"> + <a-form-item label="鏃堕棿" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <div class="params_time"> + <a-time-picker :open="stratOpen" format="HH:mm" @openChange="timeHandleChange('start')" + v-model="queryParams.start"> + <a-button slot="addon" size="small" type="primary" @click="timeHandleClose('start')"> + 纭畾 + </a-button> + </a-time-picker> + <a-time-picker :open="endOpen" format="HH:mm" @openChange="timeHandleChange('end')" + v-model="queryParams.end"> + <a-button slot="addon" size="small" type="primary" @click="timeHandleClose('end')"> + 纭畾 + </a-button> + </a-time-picker> + </div> + </a-form-item> + </a-col> + <a-col :span="4"> + <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> + </a-col> + </a-row> - </a-col> - <a-col :span="10"> - <a-form-item label="鏃堕棿" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <div class="params_time"> - <a-time-picker :open="stratOpen" format="HH:mm" @openChange="timeHandleChange('start')" - v-model="queryParams.start"> - <a-button slot="addon" size="small" type="primary" @click="timeHandleClose('start')"> - 纭畾 - </a-button> - </a-time-picker> - <a-time-picker :open="endOpen" format="HH:mm" @openChange="timeHandleChange('end')" - v-model="queryParams.end"> - <a-button slot="addon" size="small" type="primary" @click="timeHandleClose('end')"> - 纭畾 - </a-button> - </a-time-picker> - </div> - </a-form-item> - </a-col> - <a-col :span="4"> - <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> - </a-col> - </a-row> - - </div> - <div class="checkboxgroup"> - <p>缁熻鍙傛暟</p> - <div class="checkboxgroup_con"> - <a-checkbox-group name="checkboxgroup" :value="option" :options="plainOptions" @change="checkboxOnChange"/> - </div> - </div> - - - <a-spin :spinning="spinning"> - <div id="workChart" style="width:85%;height: 500px;"/> - </a-spin> </div> + <div class="checkboxgroup"> + <p>缁熻鍙傛暟</p> + <div class="checkboxgroup_con"> + <a-checkbox-group name="checkboxgroup" :value="option" :options="plainOptions" @change="checkboxOnChange"/> + </div> + </div> + + <a-spin :spinning="spinning"> + <div id="workChart" style="width:85%;height: 500px;"/> + </a-spin> </a-modal> </div> </template> @@ -312,8 +308,8 @@ boundaryGap: [0, '15%'], axisLine: { show: true, - lineStyle:{ - color:'#5470C6' + lineStyle: { + color: '#5470C6' } } }, @@ -325,8 +321,8 @@ boundaryGap: [0, '15%'], axisLine: { show: true, - lineStyle:{ - color:'#91CC75' + lineStyle: { + color: '#91CC75' } } }, @@ -338,8 +334,8 @@ boundaryGap: [0, '15%'], axisLine: { show: true, - lineStyle:{ - color:'#FAC858' + lineStyle: { + color: '#FAC858' } } } @@ -376,7 +372,7 @@ temp.push(item) } } - console.log('temp',temp) + console.log('temp', temp) getAction(this.url.workChart, param).then((res) => { if (JSON.stringify(res.result) == '[]' || res.result == null) { // this.$message.warning('鏃犳暟鎹紒') @@ -428,8 +424,8 @@ result.push(line) } - console.log('result===========',result) - console.log('legend=============',lengenddata) + console.log('result===========', result) + console.log('legend=============', lengenddata) // option.yAxis = Yarr; option.series = result option.legend = lengenddata @@ -476,51 +472,8 @@ } } - /deep/ .ant-modal { - /*background-color: #000;*/ - /*color: #fff;*/ - } - - /deep/ .ant-modal-header { - /*background-color: #000;*/ - } - - /deep/ .ant-modal-title { - /*color: #fff;*/ - } - - /deep/ .ant-modal-close { - color: #1191b0; - font-size: 24px; - } - /deep/ .ant-modal-content { - /*background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.27) 100%);*/ - /*background: -webkit-gradient(linear, left left, right right, color-stop(0%, rgba(0, 0, 0, 0.66)), color-stop(100%, rgba(0, 0, 0, 0.4)));*/ - /*background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ - /*background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ - /*background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ - /*background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ - /*background-color: #000;*/ - /*color: #fff;*/ position: relative; - } - - /deep/ .ant-modal-header { - /*border-bottom: none!important;*/ - } - - /deep/ .ant-checkbox-wrapper { - /*color: #fff;*/ - } - - /deep/ .ant-form-item-label label { - /*color: #fff;*/ - } - - /deep/ .ant-btn { - /*position: absolute;*/ - } .checkboxgroup { diff --git a/src/views/mdc/base/modules/DeviceLog/WorkHistoryModel.vue b/src/views/mdc/base/modules/DeviceLog/WorkHistoryModel.vue index 44f7cef..a5682c5 100644 --- a/src/views/mdc/base/modules/DeviceLog/WorkHistoryModel.vue +++ b/src/views/mdc/base/modules/DeviceLog/WorkHistoryModel.vue @@ -1,166 +1,167 @@ <template> <div ref="workHistory"> - <a-modal :title="title" width="80%" :getContainer="() => this.$refs.workHistory" wrap-class-name="full-modal" :visible="visible" - @cancel="handleCancel" cancelText="鍏抽棴" :footer="null"> - <div> - <div class="his_params"> - <a-form layout="inline"> - <a-form-item label="璁惧缂栧彿"> - <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="true" v-model="queryParams.equipmentId"></a-input> - </a-form-item> - <a-form-item label="璁惧鍚嶇О"> - <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="true" v-model="queryParams.equipmentName"></a-input> - </a-form-item> - <a-form-item label="鏃ユ湡"> - <a-range-picker v-model="dates" :disabledDate="disabledDate" @change="dateParamChange" format='YYYY-MM-DD'/> - </a-form-item> - <a-button type="primary" @click="queryCharts" icon="search">鏌ヨ</a-button> - </a-form> - </div> - <div style="width: 100%;border: none;" align="center"> - <table cellpadding="0" cellspacing="0" width="100%"> - <tr> - <td> - <table width="100%"> - <tr style="word-break: keep-all;"> - <td width="100%" height="100%"> - <table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0" style="border-collapse:separate; border-spacing:10px;"> - <tr v-for="info in listInfo" > - <td align="left">{{info.date}}</td> - <td style="word-break: keep-all;" align="left"> - <div - style="width: 100%; height: 62px;border: 1px solid;border-color: #9d9d9d;position: relative"> - <div class="mdcLogShowOne" - :style='{display: "inline-block",width:item.dateProportion, height: "100%"}' - v-for="item in info.value.normal"> + <a-modal :title="title" width="80%" :getContainer="() => this.$refs.workHistory" wrap-class-name="full-modal" + :visible="visible" + @cancel="handleCancel" cancelText="鍏抽棴" :footer="null"> + <div> + <div class="his_params"> + <a-form layout="inline"> + <a-form-item label="璁惧缂栧彿"> + <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="true" v-model="queryParams.equipmentId"></a-input> + </a-form-item> + <a-form-item label="璁惧鍚嶇О"> + <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="true" v-model="queryParams.equipmentName"></a-input> + </a-form-item> + <a-form-item label="鏃ユ湡"> + <a-range-picker v-model="dates" :disabledDate="disabledDate" @change="dateParamChange" + format='YYYY-MM-DD'/> + </a-form-item> + <a-button type="primary" @click="queryCharts" icon="search">鏌ヨ</a-button> + </a-form> + </div> + <div style="width: 100%;border: none;" align="center"> + <table cellpadding="0" cellspacing="0" width="100%"> + <tr> + <td> + <table width="100%"> + <tr style="word-break: keep-all;"> + <td width="100%" height="100%"> + <table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0" + style="border-collapse:separate; border-spacing:10px;"> + <tr v-for="info in listInfo"> + <td align="left">{{info.date}}</td> + <td style="word-break: keep-all;" align="left"> + <div + style="width: 100%; height: 62px;border: 1px solid;border-color: #9d9d9d;position: relative"> + <div class="mdcLogShowOne" + :style='{display: "inline-block",width:item.dateProportion, height: "100%"}' + v-for="item in info.value.normal"> <span v-if="item.status == 0" :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#A8A8A8",position:"absolute",top:"0"}'></span> - <span v-if="item.status == 1" - :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span> - <span v-if="item.status == 2" - :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span> - <span v-if="item.status == 3" - :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",top:"0"}'></span> - <span v-if="item.status == 23" - :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",bottom:"0"}'></span> - </div> - <div style="z-index: 999;" - :style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}' - v-for="item in info.value.waring"> + <span v-if="item.status == 1" + :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span> + <span v-if="item.status == 2" + :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span> + <span v-if="item.status == 3" + :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",top:"0"}'></span> + <span v-if="item.status == 23" + :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",bottom:"0"}'></span> + </div> + <div style="z-index: 999;" + :style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}' + v-for="item in info.value.waring"> <span :style='{display: "inline-block",width:"100%", left:0, height: "68%", background: "#FD0008",position:"absolute",bottom:"0"}'></span> + </div> + <div style="z-index: 1000;" + :style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}' + v-for="item in info.value.fault"> + <span + :style='{display: "inline-block",width:"100%", left:0, height: "50%", background: "#C11900",position:"absolute",bottom:"0"}'></span> + </div> </div> - </div> - </td> - </tr> - <tr> - <td align="right">0</td> - <td width="95%"> - <table width="100%;" cellpadding="0" cellspacing="0"> - <tr align="right" style="word-break: keep-all;"> - <td>02:00</td> - <td>04:00</td> - <td>06:00</td> - <td>08:00</td> - <td>10:00</td> - <td>12:00</td> - <td>14:00</td> - <td>16:00</td> - <td>18:00</td> - <td>20:00</td> - <td>22:00</td> - <td>24:00</td> - </tr> - </table> - </td> - </tr> - </table> - </td> - </tr> - </table> - </td> - </tr> + </td> + </tr> + <tr> + <td align="right">0</td> + <td width="95%"> + <table width="100%;" cellpadding="0" cellspacing="0"> + <tr align="right" style="word-break: keep-all;"> + <td>02:00</td> + <td>04:00</td> + <td>06:00</td> + <td>08:00</td> + <td>10:00</td> + <td>12:00</td> + <td>14:00</td> + <td>16:00</td> + <td>18:00</td> + <td>20:00</td> + <td>22:00</td> + <td>24:00</td> + </tr> + </table> + </td> + </tr> + </table> + </td> + </tr> + </table> + </td> + </tr> - </table> + </table> + </div> </div> - </div> - </a-modal> + </a-modal> </div> </template> <script> import moment from 'moment' - import * as echarts from 'echarts' - import { - getAction, - postAction - } from '@/api/manage' - import { - duplicateCheck - } from '@/api/api' + import { getAction } from '@/api/manage' export default { name: 'WorkHistoryModel', - components: {}, - props: { waring:[],}, data() { return { title: '', listInfo: [], dates: [], - node: {}, - - stratOpen: false, - endOpen: false, visible: false, - show: false, queryParams: {}, url: { logCharts: '/mdc/mdcEquipmentRunningSection/logCharts' } } }, - mounted() { - }, methods: { - disabledDate(current){ - return current && current > moment().subtract('days', 1); + disabledDate(current) { + return current && current > moment().subtract('days', 1) }, queryCharts() { let _this = this - getAction(this.url.logCharts, this.queryParams).then((res) => { - if (res.success) { - for (let i = 0; i < res.result.length; i++) { - let tmp = res.result[i].value - // console.log(tmp) - if (tmp) { - if (tmp.normal) { - for (let k = 0; k < tmp.normal.length; k++) { - tmp.normal[k].dateProportion = tmp.normal[k].duration / 86400 * 100 + '%' - // let leftTmp = (moment(tmp.normal[i].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400 - // tmp.normal[i].left = leftTmp / 86400 * 100 + '%' + this.listInfo = [] + getAction(this.url.logCharts, this.queryParams) + .then((res) => { + if (res.success) { + for (let i = 0; i < res.result.length; i++) { + let tmp = res.result[i].value + if (tmp) { + if (tmp.normal) { + for (let k = 0; k < tmp.normal.length; k++) { + tmp.normal[k].dateProportion = tmp.normal[k].duration / 86400 * 100 + '%' + } + } else { + tmp.normal = [] } - } else { - tmp.normal = [] - } - if (tmp.waring) { - // console.log("娴嬭瘯鍒ゆ柇") - for (let j = 0; j < tmp.waring.length; j++) { - tmp.waring[j].dateProportion = tmp.waring[j].duration / 86400 * 100 + '%' - let leftTmp = (moment(tmp.waring[j].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400 - tmp.waring[j].left = leftTmp / 86400 * 100 + '%' + if (tmp.waring) { + for (let j = 0; j < tmp.waring.length; j++) { + tmp.waring[j].dateProportion = tmp.waring[j].duration / 86400 * 100 + '%' + let leftTmp = (moment(tmp.waring[j].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400 + tmp.waring[j].left = leftTmp / 86400 * 100 + '%' + } + } else { + tmp.waring = [] } - } else { - tmp.waring = [] + if (tmp.fault) { + for (let j = 0; j < tmp.fault.length; j++) { + tmp.fault[j].dateProportion = tmp.fault[j].duration / 86400 * 100 + '%' + let leftTmp = (moment(tmp.fault[j].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400 + tmp.fault[j].left = leftTmp / 86400 * 100 + '%' + } + } else { + tmp.fault = [] + } } - } else { - res.result[i].value = { normal: [], waring: [] } + else { + res.result[i].value = { normal: [], waring: [], fault: [] } + } } + _this.listInfo = res.result } - _this.listInfo = res.result - } - }) + }) }, dateParamChange(v1, v2) { this.queryParams.startTime = v2[0] @@ -169,7 +170,6 @@ add(node) { let _this = this this.visible = true - this.node = node this.queryParams = { equipmentId: node.equipmentId, equipmentName: node.equipmentName @@ -183,79 +183,8 @@ }, handleCancel() { this.visible = false - }, - close() { - this.visible = false - this.show = false } } } </script> -<style scoped lang="less"> - .full-modal { - .ant-modal { - max-width: 100%; - top: 0; - padding-bottom: 0; - margin: 0; - } - .ant-modal-content { - display: flex; - flex-direction: column; - height: calc(100vh); - } - .ant-modal-body { - flex: 1; - } - } - /deep/ .ant-modal{ - /*background-color: #000;*/ - /*color: #fff;*/ - } - /deep/ .ant-modal-header{ - /*background-color: #000;*/ - } - /deep/ .ant-modal-title{ - /*color: #fff;*/ - } - /deep/ .ant-modal-close{ - color: #1191b0; - font-size: 24px; - } - /deep/ .ant-modal-content{ - /*background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.27) 100%);*/ - /*background: -webkit-gradient(linear, left left, right right, color-stop(0%, rgba(0, 0, 0, 0.66)), color-stop(100%, rgba(0, 0, 0, 0.4)));*/ - /*background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ - /*background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ - /*background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ - /*background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ - /*background-color: #000;*/ - /*color: #fff;*/ - position: relative; - } - /deep/ .ant-modal-header{ - /*border-bottom: none!important;*/ - } - /deep/ .ant-form-item-label label{ - /*color: #fff;*/ - } - /*.ant-btn {*/ - /*padding: 0 10px;*/ - /*margin-left: 3px;*/ - /*}*/ - - /*.ant-form-item-control {*/ - /*line-height: 0px;*/ - /*}*/ - - /*!** 涓昏〃鍗曡闂磋窛 *!*/ - /*.ant-form .ant-form-item {*/ - /*margin-bottom: 10px;*/ - /*}*/ - - /*!** Tab椤甸潰琛岄棿璺� *!*/ - /*.ant-tabs-content .ant-form-item {*/ - /*margin-bottom: 0px;*/ - /*}*/ -</style> diff --git a/src/views/mdc/base/modules/DeviceLog/WorkLogList.vue b/src/views/mdc/base/modules/DeviceLog/WorkLogList.vue index badd7f4..2d4e1f2 100644 --- a/src/views/mdc/base/modules/DeviceLog/WorkLogList.vue +++ b/src/views/mdc/base/modules/DeviceLog/WorkLogList.vue @@ -1,46 +1,28 @@ <template> - <a-card :bordered="false"> - <!-- table鍖哄煙-begin --> - <div class="table_workLogist"> - <a-table ref="table" bordered size="middle" :rowKey="(record,index)=>{return index}" :columns="columns" - :dataSource="dataList" :pagination="false" :loading="loadingrunStatus"> - <template slot="status" slot-scope="status"> - <div v-if="status == '3' || status == '23'" style="color: #00ee00;width: 100%; height: 100%;">杩愯</div> - <div v-else-if="status == '1' || status == '2'" style="color: #ffea91;width: 100%; height: 100%;">寰呮満</div> - <div v-else-if="status == '0'" style="color: #A8A8A8;width: 100%; height: 100%;">鍏虫満</div> - <div v-else-if="status == '22'" style="color: red;width: 100%; height: 100%;">鎶ヨ</div> - </template> - </a-table> - </div> - </a-card> + <div class="table_workLogist"> + <a-table ref="table" bordered :rowKey="(record,index)=>{return index}" :columns="columns" + :dataSource="dataList" :pagination="false" :loading="loading"> + <template slot="status" slot-scope="status"> + <div v-if="status == '3' || status == '23'" style="color: #00ee00;width: 100%; height: 100%;">杩愯</div> + <div v-else-if="status == '1' || status == '2'" style="color: #ffea91;width: 100%; height: 100%;">寰呮満</div> + <div v-else-if="status == '0'" style="color: #A8A8A8;width: 100%; height: 100%;">鍏虫満</div> + <div v-else-if="status == '22'" style="color: red;width: 100%; height: 100%;">鎶ヨ</div> + </template> + </a-table> + </div> </template> <script> - import JDictSelectTag from '@/components/dict/JDictSelectTag' - import { - requestPut, - deleteAction - } from '@/api/manage' - import JInput from '@/components/jeecg/JInput' - import JEllipsis from '@/components/jeecg/JEllipsis' - import Tooltip from 'ant-design-vue/es/tooltip' - export default { name: 'WorkLogList', - components: { - Tooltip, - JDictSelectTag, - JInput, - JEllipsis - }, props: { dataList: { type: Array, required: true, default: [] }, - loadingrunStatus:{ - type:Boolean, + loading: { + type: Boolean, default: false } }, @@ -58,62 +40,47 @@ { title: '寮�濮嬫椂闂�', align: 'center', - dataIndex: 'startTime', - // defaultSortOrder:'descend', - // sorter: (a, b) => {return a.startTime>b.startTime?1:-1} + dataIndex: 'startTime' }, { title: '缁撴潫鏃堕棿', align: 'center', - dataIndex: 'endTime', - // defaultSortOrder:'descend', - // sorter: (a, b) => {return a.endTime>b.endTime?1:-1} + dataIndex: 'endTime' }, { title: '鎸佺画鏃堕棿', align: 'center', dataIndex: 'duration', - customRender:(t,r,index) =>{ - // console.log(t) + customRender: (t, r, index) => { var ss = parseInt(t) - if(ss>=3600){ + if (ss >= 3600) { // 鏍规嵁绉掓暟杞崲鎴愬搴旂殑鏃跺垎绉� const hour = parseInt(ss / 3600) < 10 ? '0' + parseInt(ss / 3600) : parseInt(ss / 3600) const min = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60) const sec = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60) - if(min == '00') { - if(sec == '00'){ + if (min == '00') { + if (sec == '00') { return hour + '灏忔椂' - }else{ - return hour + '灏忔椂'+ sec + '绉�' + } else { + return hour + '灏忔椂' + sec + '绉�' } - }else{ - if(sec == '00') { + } else { + if (sec == '00') { return hour + '灏忔椂' + min + '鍒�' - }else{ + } else { return hour + '灏忔椂' + min + '鍒�' + sec + '绉�' } } - // if(sec == '00'){ - // return hour + '灏忔椂' + min + '鍒�' - // } - // if(min == '00' && sec == '00'){ - // return hour + '灏忔椂' - // } - // return hour + '灏忔椂' + min + '鍒�' + sec + '绉�' - - }else if(60<ss && ss<3600){ + } else if (60 < ss && ss < 3600) { const min1 = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60) const sec1 = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60) - return min1 + '鍒�' + sec1 + "绉�" - }else{ + return min1 + '鍒�' + sec1 + '绉�' + } else { const sec2 = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60) return sec2 + '绉�' } } - // defaultSortOrder:'descend', - // sorter: (a, b) => {return a.duration>b.duration?1:-1} }, { title: '绋嬪簭鍙�', @@ -122,44 +89,43 @@ } ] } - }, - methods: {}, - created() { } - } </script> <style lang="less" scoped> - @import '~@assets/less/common.less'; - @media screen and (min-width: 1920px){ - .table_workLogist{ - height: 417px!important; - overflow: scroll; + @media screen and (min-width: 1920px) { + .table_workLogist { + height: 417px !important; + overflow: auto; } } - @media screen and (min-width: 1680px) and (max-width: 1920px){ - .table_workLogist{ - height: 417px!important; - overflow: scroll; + + @media screen and (min-width: 1680px) and (max-width: 1920px) { + .table_workLogist { + height: 417px !important; + overflow: auto; } } - @media screen and (min-width: 1400px) and (max-width: 1680px){ - .table_workLogist{ - height: 266px!important; - overflow: scroll; + + @media screen and (min-width: 1400px) and (max-width: 1680px) { + .table_workLogist { + height: 266px !important; + overflow: auto; } } - @media screen and (min-width: 1280px) and (max-width: 1400px){ - .table_workLogist{ - height: 360px!important; - overflow: scroll; + + @media screen and (min-width: 1280px) and (max-width: 1400px) { + .table_workLogist { + height: 360px !important; + overflow: auto; } } - @media screen and (max-width: 1280px){ - .table_workLogist{ - height: 170px!important; - overflow: scroll; + + @media screen and (max-width: 1280px) { + .table_workLogist { + height: 170px !important; + overflow: auto; } } </style> diff --git a/src/views/mdc/base/modules/DeviceParamThresholdManagement/ParamThresholdModal.vue b/src/views/mdc/base/modules/DeviceParamThresholdManagement/ParamThresholdModal.vue index 73e9c7c..f0bd60b 100644 --- a/src/views/mdc/base/modules/DeviceParamThresholdManagement/ParamThresholdModal.vue +++ b/src/views/mdc/base/modules/DeviceParamThresholdManagement/ParamThresholdModal.vue @@ -144,7 +144,7 @@ minThreshold: '', maxThreshold: '' } - console.log('driveType',this.driveTypeList) + console.log('driveType', this.driveTypeList) this.handleDriveTypeChange(this.driveTypeList[0]) this.$nextTick(() => { this.form.setFieldsValue(pick(this.model, 'controlSystemType', 'chineseName', 'minThreshold', 'maxThreshold')) @@ -226,6 +226,7 @@ * @param value 椹卞姩鍙傛暟绫诲瀷閫変腑椤� */ handleDriveTypeChange(value) { + this.paramList = [] api.getParamListByDriveTypeApi(value) .then(res => { if (res.success) { diff --git a/src/views/mdc/base/modules/EquipmentAvailCompare/EquipmentAvailCompareMain.vue b/src/views/mdc/base/modules/EquipmentAvailCompare/EquipmentAvailCompareMain.vue index 33a362c..7bc1596 100644 --- a/src/views/mdc/base/modules/EquipmentAvailCompare/EquipmentAvailCompareMain.vue +++ b/src/views/mdc/base/modules/EquipmentAvailCompare/EquipmentAvailCompareMain.vue @@ -1,49 +1,44 @@ <template> - <a-spin :spinning="loading"> - <div :bordered="false" class="device_list"> - <div class="com_box"> - <!-- 鏌ヨ鍖哄煙 --> - <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper"> - <a-form layout="inline" @keyup.enter.native="searchQuery"> - <a-row :gutter="24"> - <a-col :md="4" :sm="4"> - <a-form-item label="璁惧缂栧彿"> - <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input> - </a-form-item> - </a-col> - <a-col :md="4" :sm="4"> - <a-form-item label="璁惧鍚嶇О"> - <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input> - </a-form-item> - </a-col> - <a-col :md="5" :sm="5" :xs="5"> - <a-form-item label="鏃堕棿"> - <a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD"/> - </a-form-item> - </a-col> - <a-col :md="6" :sm="6" :xs="6"> - <a-form-item label="鏃堕棿娈�"> - <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart"/> - 鑷� - <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd"/> - </a-form-item> - </a-col> - <a-col :md="2" :sm="3" :xs="3"> - <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> - </a-col> - </a-row> - </a-form> - </div> - <!-- table鍖哄煙-begin --> - <div id="DeviceList"> - <div style="padding: 5px;width: 100%;height: 100%"> - <div style="width: 100%;height: 100%" id="dayAvailBar"></div> - </div> - </div> - <!-- table鍖哄煙-end --> - </div> + <div class="device_list"> + <!-- 鏌ヨ鍖哄煙 --> + <div style="background-color: #fff" class="table-page-search-wrapper"> + <a-form layout="inline" @keyup.enter.native="searchQuery"> + <a-row :gutter="24"> + <a-col :md="4" :sm="4"> + <a-form-item label="璁惧缂栧彿"> + <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" readOnly v-model="queryParams.equipmentId"></a-input> + </a-form-item> + </a-col> + <a-col :md="5" :sm="5"> + <a-form-item label="璁惧鍚嶇О"> + <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" readOnly v-model="queryParams.equipmentName"></a-input> + </a-form-item> + </a-col> + <a-col :md="6" :sm="6" :xs="6"> + <a-form-item label="鏃堕棿"> + <a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD" :allow-clear="false"/> + </a-form-item> + </a-col> + <a-col :md="6" :sm="6" :xs="6"> + <a-form-item label="鏃堕棿娈�"> + <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart" + :allow-clear="false"/> + 鑷� + <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd" + :allow-clear="false"/> + </a-form-item> + </a-col> + <a-col :md="2" :sm="3" :xs="3"> + <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> + </a-col> + </a-row> + </a-form> </div> - </a-spin> + + <a-spin :spinning="spinning"> + <div style="width: 100%;height: 100%" id="dayAvailBar"></div> + </a-spin> + </div> </template> <script> @@ -51,77 +46,65 @@ import { getAction } from '@/api/manage' export default { - name: 'equipmentAvailCompareMain', + name: 'EquipmentAvailCompareMain', props: { nodeTree: '', Type: '', nodePeople: '' }, data() { return { - activeKey: '1', typeTree: '', typeParent: 1, typeEquipment: 1, spaceTime: [], usingRates: [], dates: [], - readOnly: true, queryParam: {}, queryParams: {}, queryParamEquip: {}, - queryParamPeople: {}, url: { dayUtilizationRateContrast: '/mdc/efficiencyReport/dayUtilizationRateContrast', getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid', getEquipmentByDepPid: '/mdc/mdcEquipment/getEquipmentByDepPid' }, - AnalysisList: {}, - loading: false + spinning: false } }, watch: { Type(valmath) { this.dataList = [] this.queryParams.typeTree = valmath - // console.log(this.queryParams.typeTree) }, nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 if (JSON.stringify(val) != '{}') { if (val.equipmentId) { - // this.$set(this.queryParam, 'tierName', val.title) this.queryParamEquip.parentId = '' this.queryParams.equipmentId = val.equipmentId this.queryParams.equipmentName = val.equipmentName this.queryParamEquip.equipmentId = val.equipmentId this.searchQuery() } else { - // this.$set(this.queryParam, 'tierName', val.title) this.queryParamEquip.parentId = val.key this.queryParams.equipmentId = '' this.initEquipment(val.key) } - } }, nodePeople(val) { if (JSON.stringify(val) != '{}') { if (val.equipmentId) { - // this.$set(this.queryParam, 'tierName', val.title) this.queryParamEquip.parentId = '' this.queryParams.equipmentId = val.equipmentId this.queryParamEquip.equipmentId = val.equipmentId this.searchQuery() } else { - // this.$set(this.queryParam, 'tierName', val.title) this.queryParamEquip.parentId = val.key this.queryParams.equipmentId = '' this.initEquipmentDep(val.key) } - } } }, methods: { drawTu() { let dayAvailBar = this.$echarts.init(document.getElementById('dayAvailBar'), 'macarons') - //dayAvailLine = echarts.init(document.getElementById('dayAvailLine')); let dayAvailBarOption = { title: { text: '璁惧鏃ュ埄鐢ㄧ巼鍥�', @@ -186,37 +169,25 @@ moment, onChangeStart(time, timeString) { this.queryParam.startTime = timeString - // console.log(time, timeString); }, onChangeEnd(time, timeString) { this.queryParam.endTime = timeString - // console.log(time, timeString); }, disabledDate(current) { //Can not slect days before today and today return current && current > moment().subtract('days', 1) }, - dataChange(val) { - if (val) this.queryParam.dateTime = val.format('YYYYMMDD') - }, - handleChange(value) { - this.queryParam.timeType = value - // console.log(this.queryParam.timeType) - }, - tabChange(val) { - this.activeKey = val - }, dateParamChange(v1, v2) { - // console.log(v1,v2) this.queryParam.startDate = v2[0] this.queryParam.endDate = v2[1] - // console.log(v2[0],v2[1]) }, loadAnalysis() { - this.loading = true + this.spaceTime = [] + this.usingRates = [] + this.spinning = true getAction(this.url.dayUtilizationRateContrast, this.queryParam).then(res => { if (res.success) { - this.spaceTime.push(res.result.dataList) + this.spaceTime = res.result.dateList for (let i = 0; i < res.result.dayRateDto.length; i++) { this.usingRates.push(res.result.dayRateDto[i].utilizationRate) } @@ -225,7 +196,7 @@ this.$message.warning(res.message) } }).finally(() => { - this.loading = false + this.spinning = false }) }, numFilter(value) { @@ -236,125 +207,12 @@ } }, searchQuery() { - if (this.queryParam.startTime && this.queryParam.endTime && this.dates && this.dates.length > 0) { - this.loading = true - this.spaceTime = [] - this.usingRates = [] - if (this.queryParams.typeTree == '1') { - this.queryParams.parentId = this.queryParamEquip.parentId - // this.queryParams.equipmentId = this.queryParamEquip.equipmentId - - } else { - this.queryParams.parentId = this.queryParamEquip.parentId - // this.queryParams.equipmentId = "" - } - this.AnalysisList = [] - //鑾峰彇鏌ヨ鏉′欢 - this.queryParam.parentId = this.queryParams.parentId - this.queryParam.equipmentId = this.queryParams.equipmentId - this.queryParam.typeTree = this.queryParams.typeTree - getAction(this.url.dayUtilizationRateContrast, this.queryParam).then((res) => { - if (res.success) { - this.spaceTime = res.result.dateList - for (let i = 0; i < res.result.dayRateDto.length; i++) { - // res.result[i].useRateDayShift = this.numFilter(res.result[i].useRateDayShift) - this.usingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate)) - } - this.drawTu() - } else { - // this.$message.warning(res.message) - this.$notification.warning({ - message: '娑堟伅', - description: res.message - }) - } - }).finally(() => { - this.loading = false - }) - } else { - this.$notification.warning({ - message: '娑堟伅', - description: '璇烽�夋嫨鏃堕棿鎴栨椂闂存' - }) - } - }, - searchReset() { - this.loading = true - this.spaceTime = [] - this.usingRates = [] - if (this.queryParams.typeTree == '1') { - this.typeTree = this.queryParams.typeTree - this.typeParent = this.queryParams.parentId - this.typeEquipment = this.queryParams.equipmentId - this.queryParams = {} - this.queryParam = {} - this.queryParams.typeTree = this.typeTree - this.queryParams.parentId = this.typeParent - if (this.queryParams.parentId != '') { - this.queryParams.equipmentId = '' - this.initEquipment() - } else { - if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) { - this.queryParams.equipmentId = this.typeEquipment - } else { - this.queryParams.equipmentId = this.queryParamEquip.equipmentId - } - } - getAction(this.url.dayUtilizationRateContrast, this.queryParams).then((res) => { - if (res.success) { - this.spaceTime = res.result.dateList - for (let i = 0; i < res.result.dayRateDto.length; i++) { - this.usingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate)) - } - this.drawTu() - } else { - // this.$message.warning(res.message) - this.$notification.warning({ - message: '娑堟伅', - description: res.message - }) - } - }).finally(() => { - this.loading = false - }) - } else { - this.typeTree = this.queryParams.typeTree - this.typeParent = this.queryParams.parentId - this.typeEquipment = this.queryParams.equipmentId - this.queryParams = {} - this.queryParam = {} - this.dates = [] - this.queryParams.typeTree = this.typeTree - this.queryParams.parentId = this.typeParent - if (this.queryParams.parentId != '') { - this.queryParams.equipmentId = '' - this.initEquipment() - } else { - if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) { - this.queryParams.equipmentId = this.typeEquipment - } else { - this.queryParams.equipmentId = this.queryParamEquip.equipmentId - } - } - getAction(this.url.dayUtilizationRateContrast, this.queryParams).then((res) => { - if (res.success) { - this.spaceTime = res.result.dateList - for (let i = 0; i < res.result.dayRateDto.length; i++) { - this.usingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate)) - } - this.drawTu() - } else { - // this.$message.warning(res.message) - this.$notification.warning({ - message: '娑堟伅', - description: res.message - }) - } - }).finally(() => { - this.loading = false - }) - } - + this.queryParams.parentId = this.queryParamEquip.parentId + //鑾峰彇鏌ヨ鏉′欢 + this.queryParam.parentId = this.queryParams.parentId + this.queryParam.equipmentId = this.queryParams.equipmentId + this.queryParam.typeTree = this.queryParams.typeTree + this.loadAnalysis() }, initEquipment(id) { let _this = this @@ -368,16 +226,13 @@ _this.searchQuery() } else { this.queryParams = {} - // this.queryList() this.equipment = {} - // _this.$message.warning('璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒') _this.$notification.warning({ message: '娑堟伅', description: '璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒' }) } } else { - // this.$message.warning(res.message) _this.$notification.warning({ message: '娑堟伅', description: res.message @@ -397,9 +252,7 @@ _this.searchQuery() } else { this.queryParams = {} - // this.queryList() this.equipment = {} - // _this.$message.warning('璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒') _this.$notification.warning({ message: '娑堟伅', description: '璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒' @@ -422,67 +275,52 @@ this.queryParam.startTime = '00:00' this.queryParam.endTime = '08:00' this.queryParams.typeTree = '1' - - }, - mounted() { this.initEquipment() - } + }, } </script> <style lang="less" scoped> - /*@import '~@assets/less/common.less';*/ + .device_list { + display: flex; + flex-direction: column; + + /deep/ .ant-spin-nested-loading { + flex: 1; + + .ant-spin-container { + height: 100%; + } + } + } @media screen and (min-width: 1920px) { .device_list { height: 811px !important; - overflow: auto; } } @media screen and (min-width: 1680px) and (max-width: 1920px) { .device_list { height: 811px !important; - overflow: auto; } } @media screen and (min-width: 1400px) and (max-width: 1680px) { .device_list { height: 663px !important; - overflow: auto; } } @media screen and (min-width: 1280px) and (max-width: 1400px) { .device_list { height: 564px !important; - overflow: auto; } } @media screen and (max-width: 1280px) { .device_list { height: 564px !important; - overflow: auto; } - } - - /deep/ .ant-card-body { - height: 100% !important; - } - - .device_list .com_box { - display: flex !important; - height: 100% !important; - flex-direction: column !important; - } - - .device_list .table-page-search-wrapper { - height: 6% !important; - } - - .device_list #DeviceList { - height: 90% !important; } </style> diff --git a/src/views/mdc/base/modules/EquipmentDayAvail/EquipmentDayAvailMain.vue b/src/views/mdc/base/modules/EquipmentDayAvail/EquipmentDayAvailMain.vue index d291654..accff3c 100644 --- a/src/views/mdc/base/modules/EquipmentDayAvail/EquipmentDayAvailMain.vue +++ b/src/views/mdc/base/modules/EquipmentDayAvail/EquipmentDayAvailMain.vue @@ -1,63 +1,57 @@ <template> - <a-spin :spinning="loading"> - <div :bordered="false" class="device_list"> - <div class="com_box"> - <!-- 鏌ヨ鍖哄煙 --> - <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper"> - <a-form layout="inline" @keyup.enter.native="searchQuery"> - <a-row :gutter="24"> - <a-col :md="4" :sm="4"> - <a-form-item label="璁惧缂栧彿"> - <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input> - </a-form-item> - </a-col> - <a-col :md="4" :sm="4"> - <a-form-item label="璁惧鍚嶇О"> - <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input> - </a-form-item> - </a-col> - <a-col :md="4" :sm="4" :xs="4"> - <a-form-item label="鏃ユ湡"> - <a-date-picker v-model="queryParam.dateTime" :disabledDate="disabledDate" format='YYYYMMDD' - @change="dataChange"/> - </a-form-item> - </a-col> - <a-col :md="4" :sm="4" :xs="4"> - <a-form-item label="闂撮殧"> - <a-select default-value="2" style="width: 140px" v-model="queryParam.timeType"> - <a-select-option :value="2"> - 2 - </a-select-option> - <a-select-option :value="3"> - 3 - </a-select-option> - <a-select-option :value="4"> - 4 - </a-select-option> - <a-select-option :value="6"> - 6 - </a-select-option> - </a-select> - 灏忔椂 - </a-form-item> - </a-col> - <a-col :md="3" :sm="3" :xs="3"> - <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> - </a-col> - </a-row> - </a-form> - </div> - <!-- table鍖哄煙-begin --> - <div id="DeviceList"> - - <div style="padding: 5px;width: 100%;height: 100%"> - <div style="width: 100%;height: 100%" id="dayAvailBar"></div> - </div> - </div> - <!-- table鍖哄煙-end --> - </div> + <div class="device_list"> + <!-- 鏌ヨ鍖哄煙 --> + <div style=" background-color: #fff" class="table-page-search-wrapper"> + <a-form layout="inline" @keyup.enter.native="searchQuery"> + <a-row :gutter="24"> + <a-col :md="4" :sm="4"> + <a-form-item label="璁惧缂栧彿"> + <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" readOnly v-model="queryParams.equipmentId"></a-input> + </a-form-item> + </a-col> + <a-col :md="5" :sm="5"> + <a-form-item label="璁惧鍚嶇О"> + <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" readOnly v-model="queryParams.equipmentName"></a-input> + </a-form-item> + </a-col> + <a-col :md="4" :sm="4" :xs="4"> + <a-form-item label="鏃ユ湡"> + <a-date-picker v-model="queryParam.dateTime" :disabledDate="disabledDate" :allow-clear="false" + value-format="YYYYMMDD"/> + </a-form-item> + </a-col> + <a-col :md="4" :sm="4" :xs="4"> + <a-form-item label="闂撮殧"> + <a-select default-value="2" v-model="queryParam.timeType"> + <a-select-option :value="2"> + 2 + </a-select-option> + <a-select-option :value="3"> + 3 + </a-select-option> + <a-select-option :value="4"> + 4 + </a-select-option> + <a-select-option :value="6"> + 6 + </a-select-option> + </a-select> + </a-form-item> + </a-col> + <a-col :md="1" :sm="1" :xs="1"> + <a-form-item label="">灏忔椂</a-form-item> + </a-col> + <a-col :md="3" :sm="3" :xs="3"> + <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> + </a-col> + </a-row> + </a-form> </div> - </a-spin> + + <a-spin :spinning="spinning"> + <div style="width: 100%;height: 100%" id="dayAvailBar"></div> + </a-spin> + </div> </template> <script> @@ -65,84 +59,62 @@ import { getAction } from '@/api/manage' export default { - name: 'equipmentDayAvailMain', - components: { - }, + name: 'EquipmentDayAvailMain', props: { nodeTree: '', Type: '', nodePeople: '' }, data() { return { - activeKey: '1', - typeTree: '', - typeParent: 1, - typeEquipment: 1, spaceTime: [], - useingRates: [], - dates: [], - xianshi: '', - readOnly: true, + usingRates: [], queryParam: { dateTime: undefined, timeType: '2' }, queryParams: {}, queryParamEquip: {}, - queryParamPeople: {}, - dataStartsoucre: [], url: { - comparativeAnalysis: '/mdc/efficiencyReport/comparativeAnalysis', dayUtilizationRate: '/mdc/efficiencyReport/dayUtilizationRate', getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid', getEquipmentByDepPid: '/mdc/mdcEquipment/getEquipmentByDepPid' }, - AnalysisList: {}, - loading: false + spinning: false } }, watch: { Type(valmath) { this.dataList = [] this.queryParams.typeTree = valmath - // console.log(this.queryParams.typeTree) }, nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 if (JSON.stringify(val) != '{}') { if (val.equipmentId) { - // this.$set(this.queryParam, 'tierName', val.title) this.queryParamEquip.parentId = '' this.queryParams.equipmentId = val.equipmentId this.queryParams.equipmentName = val.equipmentName - console.log('XXXval=', val) this.queryParamEquip.equipmentId = val.equipmentId this.searchQuery() } else { - // this.$set(this.queryParam, 'tierName', val.title) this.queryParamEquip.parentId = val.key this.queryParams.equipmentId = '' this.initEquipment(val.key) } - } }, nodePeople(val) { if (JSON.stringify(val) != '{}') { if (val.equipmentId) { - // this.$set(this.queryParam, 'tierName', val.title) this.queryParamEquip.parentId = '' this.queryParams.equipmentId = val.equipmentId this.queryParamEquip.equipmentId = val.equipmentId this.searchQuery() } else { - // this.$set(this.queryParam, 'tierName', val.title) this.queryParamEquip.parentId = val.key this.queryParams.equipmentId = '' this.initEquipmentDep(val.key) } - } } }, methods: { - moment, drawTu() { let dayAvailBar = this.$echarts.init(document.getElementById('dayAvailBar'), 'macarons') let dayAvailBarOption = { @@ -194,7 +166,7 @@ color: '#4169E1' } }, - data: this.useingRates, + data: this.usingRates, markPoint: { data: [ { type: 'max', name: '鏈�澶у��', symbolSize: 70 }, @@ -205,34 +177,22 @@ ] } dayAvailBar.setOption(dayAvailBarOption) + + window.addEventListener('resize', () => dayAvailBar.resize()) }, disabledDate(current) { //Can not slect days before today and today return current && current > moment().subtract('days', 1) }, - dataChange(val) { - this.queryParam.dateTime = val.format('YYYYMMDD') - }, - handleChange(value) { - this.queryParam.timeType = value - // console.log(this.queryParam.timeType) - }, - tabChange(val) { - this.activeKey = val - }, - dateParamChange(v1, v2) { - // console.log(v1,v2) - this.queryParam.startTime = v2[0] - this.queryParam.endTime = v2[1] - // console.log(v2[0],v2[1]) - }, loadAnalysis() { - this.loading = true + this.spaceTime = [] + this.usingRates = [] + this.spinning = true getAction(this.url.dayUtilizationRate, this.queryParam).then(res => { if (res.success) { - this.spaceTime.push(res.result.dataList) + this.spaceTime = res.result.dateList for (var i = 0; i < res.result.dayRateDto.length; i++) { - this.useingRates.push(res.result.dayRateDto[i].utilizationRate) + this.usingRates.push(res.result.dayRateDto[i].utilizationRate) } this.drawTu() } else { @@ -242,7 +202,7 @@ }) } }).finally(() => { - this.loading = false + this.spinning = false }) }, numFilter(value) { @@ -253,119 +213,16 @@ } }, searchQuery() { - if (this.queryParam.dateTime) { - this.loading = true - this.spaceTime = [] - this.useingRates = [] - if (this.queryParams.typeTree == '1') { - this.queryParams.parentId = this.queryParamEquip.parentId - // this.queryParams.equipmentId = this.queryParamEquip.equipmentId - } else { - this.queryParams.parentId = this.queryParamEquip.parentId - // this.queryParams.equipmentId = "" - } - this.AnalysisList = [] - //鑾峰彇鏌ヨ鏉′欢 - this.queryParam.parentId = this.queryParams.parentId - this.queryParam.equipmentId = this.queryParams.equipmentId - this.queryParam.typeTree = this.queryParams.typeTree - getAction(this.url.dayUtilizationRate, this.queryParam).then((res) => { - if (res.success) { - this.spaceTime = res.result.dateList - for (var i = 0; i < res.result.dayRateDto.length; i++) { - this.useingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate)) - } - this.drawTu() - } else { - this.$notification.warning({ - message: '娑堟伅', - description: res.message - }) - } - }).finally(() => { - this.loading = false - }) - } else { - this.$notification.warning({ - message: '娑堟伅', - description: '璇烽�夋嫨鏃堕棿' - }) - } - }, - searchReset() { - this.spaceTime = [] - this.useingRates = [] if (this.queryParams.typeTree == '1') { - this.typeTree = this.queryParams.typeTree - this.typeParent = this.queryParams.parentId - this.typeEquipment = this.queryParams.equipmentId - this.queryParams = {} - this.queryParam = {} - this.queryParams.typeTree = this.typeTree - this.queryParams.parentId = this.typeParent - if (this.queryParams.parentId != '') { - this.queryParams.equipmentId = '' - this.initEquipment() - } else { - if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) { - this.queryParams.equipmentId = this.typeEquipment - } else { - this.queryParams.equipmentId = this.queryParamEquip.equipmentId - } - } - getAction(this.url.dayUtilizationRate, this.queryParams).then((res) => { - if (res.success) { - this.spaceTime = res.result.dateList - for (var i = 0; i < res.result.dayRateDto.length; i++) { - this.useingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate)) - } - this.drawTu() - } else { - this.$notification.warning({ - message: '娑堟伅', - description: res.message - }) - } - }).finally(() => { - this.loading = false - }) + this.queryParams.parentId = this.queryParamEquip.parentId } else { - this.typeTree = this.queryParams.typeTree - this.typeParent = this.queryParams.parentId - this.typeEquipment = this.queryParams.equipmentId - this.queryParams = {} - this.queryParam = {} - this.dates = [] - this.queryParams.typeTree = this.typeTree - this.queryParams.parentId = this.typeParent - if (this.queryParams.parentId != '') { - this.queryParams.equipmentId = '' - this.initEquipment() - } else { - if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) { - this.queryParams.equipmentId = this.typeEquipment - } else { - this.queryParams.equipmentId = this.queryParamEquip.equipmentId - } - } - getAction(this.url.dayUtilizationRate, this.queryParams).then((res) => { - if (res.success) { - this.spaceTime = res.result.dateList - for (var i = 0; i < res.result.dayRateDto.length; i++) { - this.useingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate)) - } - this.drawTu() - } else { - this.$notification.warning({ - message: '娑堟伅', - description: res.message - }) - } - }).finally(() => { - this.loading = false - }) + this.queryParams.parentId = this.queryParamEquip.parentId } - + //鑾峰彇鏌ヨ鏉′欢 + this.queryParam.parentId = this.queryParams.parentId + this.queryParam.equipmentId = this.queryParams.equipmentId + this.queryParam.typeTree = this.queryParams.typeTree + this.loadAnalysis() }, initEquipment(id) { let _this = this @@ -422,77 +279,54 @@ } }, created() { - let collectTime = moment(moment().add(-1, 'd'), 'YYYY-MM-DD') - - this.queryParams.collectTime = collectTime - - this.queryParam.dateTime = this.queryParams.collectTime.format('YYYYMMDD') + this.queryParam.dateTime = moment().add(-1, 'd').format('YYYYMMDD') this.queryParams.typeTree = '1' this.initEquipment() - } } </script> <style lang="less" scoped> - /*@import '~@assets/less/common.less';*/ + .device_list { + display: flex; + flex-direction: column; + + /deep/ .ant-spin-nested-loading { + flex: 1; + + .ant-spin-container { + height: 100%; + } + } + } @media screen and (min-width: 1920px) { .device_list { height: 811px !important; - overflow: auto; } } @media screen and (min-width: 1680px) and (max-width: 1920px) { .device_list { height: 811px !important; - overflow: auto; } } @media screen and (min-width: 1400px) and (max-width: 1680px) { .device_list { height: 663px !important; - overflow: auto; } } @media screen and (min-width: 1280px) and (max-width: 1400px) { .device_list { height: 564px !important; - overflow: auto; } } @media screen and (max-width: 1280px) { .device_list { height: 564px !important; - overflow: auto; } - } - - /*.device_list{*/ - /*display: flex;*/ - /*}*/ - /*.device_list .table-page-search-wrapper{*/ - /**/ - /*}*/ - /deep/ .ant-card-body { - height: 100% !important; - } - - .device_list .com_box { - display: flex !important; - height: 100% !important; - flex-direction: column !important; - } - - .device_list .table-page-search-wrapper { - height: 6% !important; - } - - .device_list #DeviceList { - height: 90% !important; } </style> diff --git a/src/views/mdc/base/modules/EquipmentList/DeviceListModal.vue b/src/views/mdc/base/modules/EquipmentList/DeviceListModal.vue index f799bac..0e5a69c 100644 --- a/src/views/mdc/base/modules/EquipmentList/DeviceListModal.vue +++ b/src/views/mdc/base/modules/EquipmentList/DeviceListModal.vue @@ -6,13 +6,13 @@ <div class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter="24"> - <a-col :md="7" :sm="7"> + <a-col :md="9" :sm="9"> <a-form-item label="缁熶竴缂栫爜"> <a-input placeholder="璇疯緭鍏ョ粺涓�缂栫爜妫�绱�" v-model="queryParam.equipmentid"></a-input> </a-form-item> </a-col> - <a-col :md="7" :sm="7"> + <a-col :md="9" :sm="9"> <a-form-item label="璁惧鍚嶇О"> <a-input placeholder="璇疯緭鍏ヨ澶囧悕绉版绱�" v-model="queryParam.equipmentname"></a-input> </a-form-item> @@ -21,7 +21,7 @@ <a-col :md="3" :sm="3"> <a-space> <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> - <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">閲嶇疆</a-button> + <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button> </a-space> </a-col> </a-row> @@ -30,8 +30,8 @@ <!-- table鍖哄煙-begin --> <div> - <a-table ref="table" size="middle" bordered rowKey="id" :scroll="{聽 y: 300聽}" :columns="columns" - :dataSource="dataSource" :pagination="ipagination" :loading="loading" + <a-table bordered rowKey="equipmentid" :scroll="{聽 y: 300聽}" :columns="columns" + :dataSource="dataSource" :pagination="ipagination" :loading="loading" :customRow="customRow" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio'}" @change="handleTableChange"> </a-table> @@ -42,215 +42,106 @@ </template> <script> - import { - ajaxGetSelectItems - } from '@/api/api' - import JDictSelectTag from '@/components/dict/JDictSelectTag' - import { - deleteAction, - requestPut, - getAction - } from '@/api/manage' - import { - JeecgListMixin - } from '@/mixins/JeecgListMixin' - import JInput from '@/components/jeecg/JInput' - import JEllipsis from '@/components/jeecg/JEllipsis' - import Tooltip from 'ant-design-vue/es/tooltip' - import JDate from '@/components/jeecg/JDate' - import moment from 'moment' - import { filterObj } from '@/utils/util'; + import { getAction } from '@/api/manage' + import { JeecgListMixin } from '@/mixins/JeecgListMixin' export default { name: 'DeviceListModel', mixins: [JeecgListMixin], - components: { - JDictSelectTag, - JEllipsis, - JInput, - Tooltip, - JDate - }, - props: { - status: { - type: Number, - default: 1 - } - }, data() { return { - title:'', + title: '', visible: false, disableMixinCreated: true, - queryParam: {}, - columns: [{ - title: '缁熶竴缂栫爜', - align: 'center', - dataIndex: 'equipmentid', - }, + columns: [ + { + title: '缁熶竴缂栫爜', + align: 'center', + dataIndex: 'equipmentid' + }, { title: '璁惧鍚嶇О', align: 'center', - dataIndex: 'equipmentname', + dataIndex: 'equipmentname' }, { title: '璁惧鍨嬪彿', align: 'center', - dataIndex: 'equipmentmodel', + dataIndex: 'equipmentmodel' }, - // { - // title: '璁惧绫诲瀷', - // align: 'center', - // dataIndex: 'equipmentType', - // }, { title: '鏈哄簥IP', align: 'center', - dataIndex: 'equipmentip', + dataIndex: 'equipmentip' }, { title: '椹卞姩绫诲瀷', align: 'center', - dataIndex: 'drivetype', + dataIndex: 'drivetype' }, { title: '绔彛', align: 'center', - dataIndex: 'dataport', + dataIndex: 'dataport' }, { title: '鏁版帶绯荤粺', align: 'center', - dataIndex: 'controlsystem', + dataIndex: 'controlsystem' } ], - url: { - list: '/mdc/equipment/list', + /* 鎺掑簭鍙傛暟 */ + isorter: { + column: '', + order: '' }, - + url: { + list: '/mdc/equipment/list' + } } - }, - created() { - }, methods: { openPage() { this.visible = true this.onClearSelected() - this.dataSource = []; - // this.queryParam = { - // status: this.status - // }; - this.loadData(); + this.dataSource = [] + this.loadData() }, - getQueryParams() { - //鑾峰彇鏌ヨ鏉′欢 - let sqp = {} - if(this.superQueryParams){ - sqp['superQueryParams']=encodeURI(this.superQueryParams) - sqp['superQueryMatchType'] = this.superQueryMatchType - } - var param = Object.assign(sqp, this.queryParam); - // param.field = this.getQueryField(); - param.pageNo = this.ipagination.current; - param.pageSize = this.ipagination.pageSize; - //鑾峰彇鐢ㄦ埛瀹氬埗鐨勫弬鏁板睘鎬� - // if (this.getCustomQueryParams) { - // param = this.getCustomQueryParams(param); - // if(!param){ - // return false; - // } - // } - return filterObj(param); - }, - loadData(arg) { - if(!this.url.list){ - this.$message.error("璇疯缃畊rl.list灞炴��!") - return - } - //鍔犺浇鏁版嵁 鑻ヤ紶鍏ュ弬鏁�1鍒欏姞杞界涓�椤电殑鍐呭 - if (arg === 1) { - this.ipagination.current = 1; - } - var params = this.getQueryParams();//鏌ヨ鏉′欢 - - if(!params){ - return false; - } - - 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; + /** + * 鑷畾涔夎〃鏍艰 + * @param record 琛ㄦ牸琛屼俊鎭� + * @returns {{style: {cursor: string}, on: {click: on.click}}} + */ + customRow(record) { + return { + style: { + cursor: 'pointer' + }, + on: { + click: () => { + this.onSelectChange([record.equipmentid], [record]) } - //update-end---author:zhangyafei Date:20201118 for锛氶�傞厤涓嶅垎椤电殑鏁版嵁鍒楄〃------------ - }else{ - // this.$message.warning(res.message) - this.$notification.warning({ - message:'娑堟伅', - description:res.message - }); } - }).finally(() => { - this.loading = false - }) + } }, - getQueryField() { - //TODO 瀛楁鏉冮檺鎺у埗 - // var str = ""; - // this.columns.forEach(function (value) { - // str += value.dataIndex +"," ; - // }); - // return str; - }, - modalFormOk(val) { - // 鏂板/淇敼 鎴愬姛鏃讹紝閲嶈浇鍒楄〃 - this.loadData(); - this.selectedRowKeys = [val.id]; - }, - searchQuery() { - this.loadData(); - this.onClearSelected() - }, - searchReset() { - this.queryParam = {} - this.loadData(); - this.onClearSelected() - }, + close() { this.$emit('close') this.visible = false }, + handleCancel() { this.close() }, + handleOk() { this.$emit('sendSelectionRows', this.selectionRows[0]) this.close() - }, - }, + } + } } </script> <style> @import '~@assets/less/common.less'; - - .frozenRowClass { - color: #c9c9c9; - } - - .success { - color: green; - } - - .error { - color: red; - } </style> diff --git a/src/views/mdc/base/modules/EquipmentList/UserModal.vue b/src/views/mdc/base/modules/EquipmentList/UserModal.vue index 802ba97..aafd50d 100644 --- a/src/views/mdc/base/modules/EquipmentList/UserModal.vue +++ b/src/views/mdc/base/modules/EquipmentList/UserModal.vue @@ -2,35 +2,26 @@ <a-modal :title="title" :maskClosable="true" - :width="drawerWidth" + :width="modalWidth" @cancel="visible=false" :visible="visible" :footer="null" + centered style="height: 100%;overflow: auto;padding-bottom: 53px;"> - <template slot="title"> - <div style="width: 100%;"> - <span>{{ title }}</span> - <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right"> - <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button> - </span> - </div> - - </template> - <a-spin :spinning="confirmLoading"> - <a-form-model ref="form" :form="form" :model="model" :rules="validatorRules"> + <a-form-model ref="form" :form="form" :model="model" :rules="validatorRules" :labelCol="labelCol" + :wrapperCol="wrapperCol"> <a-row :gutter="24"> <a-col :span="12"> - <a-form-model-item label="缁熶竴缂栫爜" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentId"> - <a-input-search :readOnly="true" - v-model="model.equipmentId" - :disabled="disSearch" @search="deviceSearch" enter-button placeholder='璇烽�夋嫨缁熶竴缂栫爜' /> + <a-form-model-item label="缁熶竴缂栫爜" prop="equipmentId"> + <a-input-search v-model="model.equipmentId" :disabled="disableSubmit" @search="deviceSearch" enter-button + placeholder='璇烽�夋嫨缁熶竴缂栫爜'/> </a-form-model-item> </a-col> <a-col :span="12"> - <a-form-model-item label="璁惧鍚嶇О" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-input :disabled="disSearch" :readOnly="disableSubmit" allow-clear placeholder="璇疯緭鍏ヨ澶囧悕绉�" + <a-form-model-item label="璁惧鍚嶇О"> + <a-input :disabled="disableSubmit" allow-clear placeholder="璇疯緭鍏ヨ澶囧悕绉�" v-model="model.equipmentName"/> </a-form-model-item> </a-col> @@ -38,48 +29,53 @@ <a-row :gutter="24"> <a-col :span="12"> - <a-form-model-item v-if="isDepartType == 0" label="閮ㄩ棬鍒嗛厤" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled"> - <j-select-equipment-depart :disabled="disableSubmit" v-model="model.selectedDeparts" :multi="false" @back="backDepartInfo" :backDepart="true" :treeOpera="true"></j-select-equipment-depart> + <a-form-model-item v-if="isDepartType == 0" label="閮ㄩ棬鍒嗛厤" + v-show="!departDisabled"> + <j-select-equipment-depart :disabled="disableSubmit" v-model="model.selectedDeparts" :multi="false" + @back="backDepartInfo" :backDepart="true" + :treeOpera="true"></j-select-equipment-depart> </a-form-model-item> - <a-form-model-item v-if="isDepartType == -1" label="璁惧绫诲瀷" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-select :disabled="disableSubmit" :readOnly="disableSubmit" placeholder="璇烽�夋嫨璁惧绫诲瀷" + <a-form-model-item v-if="isDepartType == -1" label="璁惧绫诲瀷"> + <a-select :disabled="disableSubmit" placeholder="璇烽�夋嫨璁惧绫诲瀷" allow-clear :triggerChange="true" v-model="model.equipmentType"> - <a-select-option v-for='item in selectList' :key='item.id' :value='item.equipmentTypeName'> + <a-select-option v-for='item in equipmentTypeList' :key='item.id' :value='item.equipmentTypeName'> {{item.equipmentTypeName}} </a-select-option> </a-select> </a-form-model-item> </a-col> <a-col :span="12"> - <a-form-model-item label="杞﹂棿鍒嗛厤" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!productionDisabled" ref="selectedProduction" prop="selectedProduction"> - <!--<j-select-equipment-production v-decorator="['selectedProduction',{rules:[{required:true,message:'璇烽�夋嫨杞﹂棿!'}]}]" :multi="false" @back="backProductionInfo" :backProduction="true" :treeProductOpera="true"></j-select-equipment-production>--> - <j-select-equipment-production :disabled="disableSubmit" v-model="model.selectedProduction" :multi="false" @back="backProductionInfo" :backProduction="true" :treeProductOpera="true"></j-select-equipment-production> + <a-form-model-item label="杞﹂棿鍒嗛厤" v-show="!productionDisabled" + ref="selectedProduction" prop="selectedProduction"> + <j-select-equipment-production :disabled="disableSubmit" v-model="model.selectedProduction" :multi="false" + @back="backProductionInfo" :backProduction="true" :allowClear="false" + :treeProductOpera="true"></j-select-equipment-production> </a-form-model-item> </a-col> </a-row> <a-row :gutter="24"> <a-col :span="12"> - <a-form-model-item v-if="isDepartType == -1" label="绯荤粺鐗堟湰鍙�" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-input :disabled="disableSubmit" :readOnly="disableSubmit" allow-clear placeholder="璇疯緭鍏ョ郴缁熺増鏈彿" + <a-form-model-item v-if="isDepartType == -1" label="绯荤粺鐗堟湰鍙�"> + <a-input :disabled="disableSubmit" allow-clear placeholder="璇疯緭鍏ョ郴缁熺増鏈彿" v-model="model.systemVersion"/> </a-form-model-item> - <a-form-model-item v-if="isDepartType == 0" label="璁惧绫诲瀷" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-select :disabled="disableSubmit" :readOnly="disableSubmit" placeholder="璇烽�夋嫨璁惧绫诲瀷" - :triggerChange="true" - v-model="model.equipmentType"> - <a-select-option v-for='item in selectList' :key='item.id' :value='item.equipmentTypeName'> - {{item.equipmentTypeName}} - </a-select-option> - </a-select> + <a-form-model-item v-if="isDepartType == 0" label="璁惧绫诲瀷"> + <a-select :disabled="disableSubmit" placeholder="璇烽�夋嫨璁惧绫诲瀷" + :triggerChange="true" + v-model="model.equipmentType"> + <a-select-option v-for='item in equipmentTypeList' :key='item.id' :value='item.equipmentTypeName'> + {{item.equipmentTypeName}} + </a-select-option> + </a-select> </a-form-model-item> </a-col> <a-col :span="12"> - <a-form-model-item label="璁惧鍔熺巼(kw)" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-input :disabled="disableSubmit" :readOnly="disableSubmit" allow-clear placeholder="璇疯緭鍏ヨ澶囧姛鐜�" + <a-form-model-item label="璁惧鍔熺巼(kw)"> + <a-input :disabled="disableSubmit" allow-clear placeholder="璇疯緭鍏ヨ澶囧姛鐜�" v-model="model.devicePower"/> </a-form-model-item> </a-col> @@ -87,14 +83,14 @@ <a-row :gutter="24"> <a-col :span="12"> - <a-form-model-item label="鏈哄簥IP" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-input :disabled="true" :readOnly="disableSubmit" placeholder="璇疯緭鍏ユ満搴奍P" + <a-form-model-item label="鏈哄簥IP"> + <a-input :disabled="true" placeholder="璇疯緭鍏ユ満搴奍P" v-model="model.equipmentIp"/> </a-form-model-item> </a-col> <a-col :span="12"> - <a-form-model-item label="鏈哄簥绔彛" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-input :disabled="true" :readOnly="disableSubmit" placeholder="璇疯緭鍏ユ満搴婄鍙�" + <a-form-model-item label="鏈哄簥绔彛"> + <a-input :disabled="true" placeholder="璇疯緭鍏ユ満搴婄鍙�" v-model="model.dataPort"/> </a-form-model-item> </a-col> @@ -102,15 +98,15 @@ <a-row :gutter="24"> <a-col :span="12"> - <a-form-model-item label="椹卞姩绫诲瀷" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <j-dict-select-tag :disabled="true" :readOnly="disableSubmit" placeholder="璇烽�夋嫨椹卞姩绫诲瀷" + <a-form-model-item label="椹卞姩绫诲瀷"> + <j-dict-select-tag :disabled="true" placeholder="璇烽�夋嫨椹卞姩绫诲瀷" :triggerChange="true" dictCode="mdc_driveType" - v-model="model.driveType" allow-clear/> + v-model="model.driveType"/> </a-form-model-item> </a-col> <a-col :span="12"> - <a-form-model-item label="璁惧鍨嬪彿" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-input :disabled="true" :readOnly="disableSubmit" allow-clear placeholder="璇疯緭鍏ヨ澶囧瀷鍙�" + <a-form-model-item label="璁惧鍨嬪彿"> + <a-input :disabled="true" allow-clear placeholder="璇疯緭鍏ヨ澶囧瀷鍙�" v-model="model.equipmentModel"/> </a-form-model-item> </a-col> @@ -118,25 +114,13 @@ <a-row :gutter="24"> <a-col :span="12"> - <a-form-model-item label="绯荤粺绫诲瀷" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <j-dict-select-tag placeholder="璇烽�夋嫨绯荤粺绫诲瀷" :triggerChange="true" dictCode="system_type" v-model="model.systemType" allow-clear/> + <a-form-model-item label="绯荤粺绫诲瀷"> + <j-dict-select-tag placeholder="璇烽�夋嫨绯荤粺绫诲瀷" :triggerChange="true" dictCode="system_type" + :disabled="disableSubmit" v-model="model.systemType"/> </a-form-model-item> </a-col> <a-col :span="12"> - <a-form-model-item label="璁惧绾у埆" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <j-dict-select-tag placeholder="璇烽�夋嫨璁惧绾у埆" dictCode="device_level" v-model="model.deviceLevel" allow-clear/> - </a-form-model-item> - </a-col> - </a-row> - - <a-row :gutter="24"> - <a-col :span="12"> - <a-form-model-item label="璁惧绉嶇被" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <j-dict-select-tag placeholder="璇烽�夋嫨璁惧绉嶇被" dictCode="device_category" v-model="model.deviceCategory" allow-clear/> - </a-form-model-item> - </a-col> - <a-col :span="12"> - <a-form-model-item label="鎺掑簭" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-form-model-item label="鎺掑簭"> <a-input :disabled="disableSubmit" :readOnly="disableSubmit" placeholder="璇疯緭鍏ユ帓搴�" v-model="model.sortNo" style="width: 100%"/> </a-form-model-item> @@ -145,16 +129,15 @@ <a-row :gutter="24"> <a-col :span='12'> - <a-form-model-item v-if="isDepartType == 0" label="绯荤粺鐗堟湰鍙�" :labelCol="labelCol" :wrapperCol="wrapperCol"> - <a-input :disabled="disableSubmit" :readOnly="disableSubmit" allow-clear placeholder="璇疯緭鍏ョ郴缁熺増鏈彿" - v-model="model.systemVersion"/> + <a-form-model-item label="璁惧鍥剧墖"> + <j-image-upload v-model="model.equipmentImage" :disabled="disableSubmit"/> </a-form-model-item> </a-col> </a-row> <a-row :gutter="24"> <a-col :span="24"> - <a-form-model-item :labelCol="{span:3}" :wrapperCol="{span:21}" label="澶囨敞"> + <a-form-model-item :labelCol="labelColLong" :wrapperCol="wrapperColLong" label="澶囨敞"> <a-textarea :disabled="disableSubmit" :readOnly="disableSubmit" placeholder="璇疯緭鍏ュ娉�" v-model="model.remark"/> </a-form-model-item> @@ -177,119 +160,81 @@ <script> import pick from 'lodash.pick' - import moment from 'moment' - import Vue from 'vue' - import { ACCESS_TOKEN } from "@/store/mutation-types" import { getAction } from '@/api/manage' - import { addEquipment,editEquipment} from '@/api/api' - import { disabledAuthFilter } from "@/utils/authFilter" - import { duplicateCheck } from '@/api/api' + import { addEquipment, editEquipment } from '@/api/api' import JSelectEquipmentProduction from '../../../../../components/jeecgbiz/JSelectEquipmentProduction' - import JSelectProduction from '../../../../../components/jeecgbiz/JSelectProduction' import DeviceListModel from './DeviceListModal' import JSelectEquipmentDepart from '../../../../../components/jeecgbiz/JSelectEquipmentDepart' - import {mapActions} from 'vuex' + import { mapActions } from 'vuex' + export default { - name: "UserModal", + name: 'UserModal', components: { - JSelectProduction, JSelectEquipmentDepart, JSelectEquipmentProduction, DeviceListModel }, - data () { + data() { return { - disSearch:false, departDisabled: false, //鏄惁鏄垜鐨勯儴闂ㄨ皟鐢ㄨ椤甸潰 productionDisabled: false, //鏄惁鏄垜鐨勮溅闂磋皟鐢ㄨ椤甸潰 roleDisabled: false, //鏄惁鏄鑹茬淮鎶よ皟鐢ㄨ椤甸潰 - modalWidth:800, - drawerWidth:700, - modalToggleFlag:true, - confirmDirty: false, - userId:"", //淇濆瓨鐢ㄦ埛id - // disableSubmit:false, + modalWidth: 900, + userId: '', //淇濆瓨鐢ㄦ埛id disableSubmit: true, - dateFormat:"YYYY-MM-DD", form: this.$form.createForm(this), - - validatorRules:{ - // equipmentId: [{required: false, message: '璇烽�夋嫨璁惧缂栧彿!'}, {validator: this.validatequipmentId}], - equipmentId: - [ - { - required: true, message: '璇烽�夋嫨璁惧缂栧彿!' - }, - // { - // validator: this.validatequipmentId - // } - ], - // trigger: 'blur' // 瑙﹀彂鏂瑰紡 - - selectedProduction: - [ - { - required:true,message: '璇烽�夋嫨杞﹂棿' - } - ] - + validatorRules: { + equipmentId: [{ required: true, message: '璇烽�夋嫨璁惧缂栧彿!', trigger: 'change' }], + selectedProduction: [{ required: true, message: '璇烽�夋嫨杞﹂棿' }] }, - departIdShow:false, - title:"鎿嶄綔", + departIdShow: false, + title: '鎿嶄綔', visible: false, model: { - equipmentId: "", - equipmentName: "", - equipmentModel: "", - equipmentIp: "", - dataPort: "", - driveType: "", - systemType: "", - deviceLevel: "", - deviceCategory: "" + equipmentId: '', + equipmentName: '', + equipmentModel: '', + equipmentIp: '', + dataPort: '', + driveType: '', + systemType: '', + deviceLevel: '', + deviceCategory: '' }, labelCol: { xs: { span: 24 }, - sm: { span: 8 }, + sm: { span: 8 } }, wrapperCol: { xs: { span: 24 }, - sm: { span: 15 }, + sm: { span: 14 } }, - uploadLoading:false, + labelColLong: { + xs: { span: 24 }, + sm: { span: 4 } + }, + wrapperColLong: { + xs: { span: 24 }, + sm: { span: 19 } + }, confirmLoading: false, - headers:{}, url: { - fileUpload: window._CONFIG['domianURL']+"/sys/common/upload", - userWithDepart: "/mdc/mdcEquipment/equipmentDepartList", // 寮曞叆涓烘寚瀹氱敤鎴锋煡鐪嬮儴闂ㄤ俊鎭渶瑕佺殑url + userWithDepart: '/mdc/mdcEquipment/equipmentDepartList', // 寮曞叆涓烘寚瀹氱敤鎴锋煡鐪嬮儴闂ㄤ俊鎭渶瑕佺殑url //寮曞叆涓烘寚瀹氱敤鎴锋煡鐪嬭溅闂翠俊鎭渶瑕佺殑url userProductionList: '/mdc/mdcEquipment/equipmentProductionList', - userId:"/sys/user/generateUserId", // 寮曞叆鐢熸垚娣诲姞鐢ㄦ埛鎯呭喌涓嬬殑url - syncUserByUserName:"/act/process/extActProcess/doSyncUserByUserName",//鍚屾鐢ㄦ埛鍒板伐浣滄祦 - queryTenantList: '/sys/tenant/queryList', - check:'/sys/duplicate/check', - queryEquipmentType:'/mdc/mdcEquipmentType/queryEquipmentType' + syncUserByUserName: '/act/process/extActProcess/doSyncUserByUserName',//鍚屾鐢ㄦ埛鍒板伐浣滄祦 + check: '/sys/duplicate/check', + queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType' }, - tenantsOptions: [], - rolesOptions:[], - nextDepartOptions:[], - nextProductionOptions:[], - selectList:[], - isDepartType:'' + nextDepartOptions: [], + nextProductionOptions: [], + equipmentTypeList: [], + isDepartType: '' } }, - created () { - const token = Vue.ls.get(ACCESS_TOKEN); - this.headers = {"X-Access-Token":token} + created() { this.queryGroup() this.queryTreeData() - // this.initRoleList() - // this.initTenantList() - }, - computed:{ - uploadAction:function () { - return this.url.fileUpload; - } }, methods: { ...mapActions(['QueryDepartTree']), @@ -298,44 +243,37 @@ if (res.success) { this.isDepartType = res.result[0].value } else { - // this.$message.warn(res.message) this.$notification.warning({ - message:'娑堟伅', - description:res.message - }); + message: '娑堟伅', + description: res.message + }) } - }).finally(() =>{ }) }, queryGroup() { getAction(this.url.queryEquipmentType).then(res => { if (res.success) { - this.selectList = res.result - // this.selectList = res.result.map((item, index, arr) => { - // return { label: item.id, value: item.equipmentTypeName + '' } - // }) + this.equipmentTypeList = res.result } else { - // this.$message.warning(res.message) this.$notification.warning({ - message:'娑堟伅', - description:res.message - }); + message: '娑堟伅', + description: res.message + }) } }).finally(() => { this.loading = false }) }, getDeviceRows(val) { - console.log(val) - if(val.equipmentid ){ + if (val.equipmentid) { this.model.equipmentId = val.equipmentid this.model.equipmentName = val.equipmentname - this.model.equipmentModel = val.equipmentmodel - this.model.equipmentIp = val.equipmentip - this.model.dataPort = val.dataport - this.model.driveType = val.drivetype - this.model.controlSystem = val.controlsystem - this.model.saveTableName = val.savetablename + this.model.equipmentModel = val.equipmentmodel + this.model.equipmentIp = val.equipmentip + this.model.dataPort = val.dataport + this.model.driveType = val.drivetype + this.model.controlSystem = val.controlsystem + this.model.saveTableName = val.savetablename } }, @@ -344,63 +282,56 @@ this.$refs.deviceListModel.title = '閫夋嫨璁惧' this.$refs.deviceListModel.disableSubmit = false }, - add () { - this.refresh(); - this.edit({activitiSync:'1',userIdentity:1,equipmentId:"",equipmentName:"",equipmentModel:"",equipmentIp:'',dataPort:"",driveType:"",controlSystem:"",saveTableName:""}); + add() { + this.refresh() + this.edit({ + activitiSync: '1', + userIdentity: 1, + equipmentId: '', + equipmentName: '', + equipmentModel: '', + equipmentIp: '', + dataPort: '', + driveType: '', + controlSystem: '', + saveTableName: '' + }) }, - edit (record) { - let that = this; - that.visible = true; + edit(record) { + let that = this + that.visible = true //鏍规嵁灞忓箷瀹藉害鑷�傚簲鎶藉眽瀹藉害 - this.resetScreenSize(); + this.resetScreenSize() - // that.userId = record.id; - // console.log(record) - that.model = Object.assign({}, record); - // that.model = Object.assign({},{selectedroles:'',selectedProduction:''}, record); - // this.model = Object.assign({}, record) + that.model = Object.assign({}, record) this.$nextTick(() => { this.form.setFieldsValue(pick(that.model, 'selectedDeparts', 'selectedProduction', 'equipmentId', 'equipmentName', 'equipmentModel', 'equipmentType', 'equipmentIp', 'dataPort', - 'driveType', 'sortNo', 'remark','systemVersion','devicePower','controlSystem','saveTableName')) + 'driveType', 'sortNo', 'remark', 'systemVersion', 'devicePower', 'controlSystem', 'saveTableName')) }) - if(record.hasOwnProperty("id")){ - // that.getUserRoles(record.id); - that.getUserDeparts(record.id); + if (record.hasOwnProperty('id')) { + that.getUserDeparts(record.id) } - // console.log('that.model=',that.model) - }, - isDisabledAuth(code){ - return disabledAuthFilter(code); - }, - //绐楀彛鏈�澶у寲鍒囨崲 - toggleScreen(){ - if(this.modalToggleFlag){ - this.modalWidth = window.innerWidth; - }else{ - this.modalWidth = 800; - } - this.modalToggleFlag = !this.modalToggleFlag; }, // 鏍规嵁灞忓箷鍙樺寲,璁剧疆鎶藉眽灏哄 - resetScreenSize(){ - let screenWidth = document.body.clientWidth; - if(screenWidth < 500){ - this.drawerWidth = screenWidth; - }else{ - this.drawerWidth = 700; + resetScreenSize() { + let screenWidth = document.body.clientWidth + if (screenWidth < 900) { + this.modalWidth = screenWidth + } else { + this.modalWidth = 900 } }, - getUserDeparts(userid){ - let that = this; + getUserDeparts(userid) { + let that = this //閮ㄩ棬鐨剈rl - getAction(that.url.userWithDepart,{equipmentId:userid}).then((res)=>{ - if(res.success){ + getAction(that.url.userWithDepart, { equipmentId: userid }).then((res) => { + if (res.success) { // console.log(res.result) - let departOptions=[]; - let selectDepartKeys=[] + let departOptions = [] + let selectDepartKeys = [] for (let i = 0; i < res.result.length; i++) { - selectDepartKeys.push(res.result[i].key); + selectDepartKeys.push(res.result[i].key) //鏂板璐熻矗閮ㄩ棬閫夋嫨涓嬫媺妗� departOptions.push({ value: res.result[i].key, @@ -408,22 +339,19 @@ }) } - that.model.selectedDeparts = selectDepartKeys.join(",") - // that.model.selectedProduction = selectDepartKeys.join(",") - - that.nextDepartOptions=departOptions; - // console.log('that.nextDepartOptions=',that.nextDepartOptions) + that.model.selectedDeparts = selectDepartKeys.join(',') + that.nextDepartOptions = departOptions } }) - getAction(that.url.userProductionList,{equipmentId:userid}).then((res)=>{ - if(res.success){ + getAction(that.url.userProductionList, { equipmentId: userid }).then((res) => { + if (res.success) { // console.log(res.result) - let ProductionOptions=[]; - let selectProductKeys=[] + let ProductionOptions = [] + let selectProductKeys = [] // console.log(res.result) for (let i = 0; i < res.result.length; i++) { - selectProductKeys.push(res.result[i].key); + selectProductKeys.push(res.result[i].key) //鏂板璐熻矗閮ㄩ棬閫夋嫨涓嬫媺妗� ProductionOptions.push({ value: res.result[i].key, @@ -431,116 +359,96 @@ }) } - that.model.selectedProduction = selectProductKeys.join(",") + that.model.selectedProduction = selectProductKeys.join(',') - that.nextProductionOptions=ProductionOptions; - // console.log('that.nextProductionOptions=',that.nextProductionOptions) + that.nextProductionOptions = ProductionOptions } }) //杞﹂棿鐨剈rl }, backDepartInfo(info) { - // console.log(info) - this.model.departIds = this.model.selectedDeparts; - this.nextDepartOptions = info.map((item,index,arr)=>{ - let c = {label:item.text, value: item.value+""} - return c; + this.model.departIds = this.model.selectedDeparts + this.nextDepartOptions = info.map((item, index, arr) => { + let c = { label: item.text, value: item.value + '' } + return c }) }, backProductionInfo(info) { - // console.log(info) - this.model.productionIds = this.model.selectedProduction; - this.nextProductionOptions = info.map((item,index,arr)=>{ - let c = {label:item.text, value: item.value+""} - return c; + this.model.productionIds = this.model.selectedProduction + this.nextProductionOptions = info.map((item, index, arr) => { + let c = { label: item.text, value: item.value + '' } + return c }) }, - refresh () { - this.userId="" - this.nextDepartOptions=[]; - this.nextProductionOptions = []; - this.departIdShow=false; - }, - close () { - this.$emit('close'); - this.visible = false; - this.disableSubmit = false; - this.nextDepartOptions=[]; + refresh() { + this.userId = '' + this.nextDepartOptions = [] this.nextProductionOptions = [] - this.departIdShow=false; - // this.$refs.form.resetFields(); + this.departIdShow = false }, - moment, - handleSubmit () { - const that = this; + close() { + this.$emit('close') + this.visible = false + this.disableSubmit = false + this.nextDepartOptions = [] + this.nextProductionOptions = [] + this.departIdShow = false + }, + handleSubmit() { + const that = this // 瑙﹀彂琛ㄥ崟楠岃瘉 this.$refs.form.validate(valid => { if (valid) { - that.confirmLoading = true; - //濡傛灉鏄笂绾ф嫨浼犲叆departIds,鍚﹀垯涓虹┖ - // if(this.model.userIdentity!==2){ - // this.model.departIds=""; - // } - let obj; - if(!this.model.id){ - this.model.id = this.userId; - obj=addEquipment(this.model); - }else{ - obj=editEquipment(this.model,{ - id: this.model.id - }); + that.confirmLoading = true + let obj + if (!this.model.id) { + this.model.id = this.userId + obj = addEquipment(this.model) + } else { + obj = editEquipment(this.model, { + id: this.model.id + }) } - obj.then((res)=>{ - if(res.success){ + obj.then((res) => { + if (res.success) { that.$notification.success({ - message:'娑堟伅', - description:res.message - }); - that.$emit('ok'); - }else{ + message: '娑堟伅', + description: res.message + }) + that.$emit('ok') + } else { that.$notification.warning({ - message:'娑堟伅', - description:res.message - }); + message: '娑堟伅', + description: res.message + }) } }).finally(() => { - that.confirmLoading = false; - that.close(); + that.confirmLoading = false + that.close() }) - }else{ - return false; + } else { + return false } }) - }, - - handleConfirmBlur(e) { - const value = e.target.value; - this.confirmDirty = this.confirmDirty || !!value - }, - identityChange(e){ - if(e.target.value===1){ - this.departIdShow=false; - }else{ - this.departIdShow=true; - } }, /** * 缂栬緫鎴栨煡鐪嬭鎯呮暟鎹椂娓呴櫎鎶藉眽琛ㄥ崟楠岃瘉 */ - removeValidate(){ + removeValidate() { this.$refs.form.clearValidate() } - }, + } } </script> <style scoped> .avatar-uploader > .ant-upload { - width:104px; - height:104px; + width: 104px; + height: 104px; } + .ant-upload-select-picture-card i { font-size: 49px; color: #999; @@ -551,9 +459,9 @@ color: #666; } - .ant-table-tbody .ant-table-row td{ - padding-top:10px; - padding-bottom:10px; + .ant-table-tbody .ant-table-row td { + padding-top: 10px; + padding-bottom: 10px; } .drawer-bottom-button { @@ -567,4 +475,4 @@ background: #fff; border-radius: 0 0 2px 2px; } -</style> \ No newline at end of file +</style> diff --git a/src/views/mdc/base/modules/EquipmentShutDownReasonList/EquipmentShutDownReasonModal.vue b/src/views/mdc/base/modules/EquipmentShutDownReasonList/EquipmentShutDownReasonModal.vue new file mode 100644 index 0000000..0b09b50 --- /dev/null +++ b/src/views/mdc/base/modules/EquipmentShutDownReasonList/EquipmentShutDownReasonModal.vue @@ -0,0 +1,159 @@ +<template> + <a-modal + :title="title" + :maskClosable="true" + :width="modalWidth" + @cancel="handleCancel" + :visible="visible"> + <a-spin :spinning="confirmLoading"> + <a-form-model ref="form" :form="form" :model="model" :rules="validatorRules" :labelCol="labelColLong" + :wrapperCol="wrapperColLong"> + <a-row :gutter="24"> + <a-col :span="24"> + <a-form-model-item prop="downtimeType" label="鍋滄満绫诲瀷"> +<!-- <a-select v-model="model.downtimeType" placeholder="璇烽�夋嫨鍋滄満绫诲瀷">--> +<!-- <a-select-option :key="0">璁″垝鍋滄満</a-select-option>--> +<!-- <a-select-option :key="1">闈炶鍒掑仠鏈�</a-select-option>--> +<!-- </a-select>--> + <a-radio-group v-model="model.downtimeType" placeholder="璇烽�夋嫨鍋滄満绫诲瀷"> + <a-radio :value="0">璁″垝鍋滄満</a-radio> + <a-radio :value="1">闈炶鍒掑仠鏈�</a-radio> + </a-radio-group> + </a-form-model-item> + </a-col> + </a-row> + + <a-row :gutter="24"> + <a-col :span="24"> + <a-form-model-item prop="downtimeDescription" label="鍋滄満鍘熷洜"> + <a-input v-model="model.downtimeDescription" placeholder="璇疯緭鍏ュ仠鏈哄師鍥�"/> + </a-form-model-item> + </a-col> + </a-row> + + <a-row :gutter="24"> + <a-col :span="24"> + <a-form-model-item label="澶囨敞"> + <a-textarea v-model="model.remark" placeholder="璇疯緭鍏ュ娉�"/> + </a-form-model-item> + </a-col> + </a-row> + </a-form-model> + </a-spin> + + <template slot="footer"> + <a-space> + <a-button @click="handleCancel">鍙栨秷</a-button> + <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">鎻愪氦</a-button> + </a-space> + </template> + + </a-modal> + +</template> + +<script> +import { postAction } from '@/api/manage' + +export default { + name: 'EquipmentCloseReasonModal', + components: {}, + data() { + return { + modalWidth: 500, + form: this.$form.createForm(this), + validatorRules: { + downtimeType: [ + { + required: true, message: '璇烽�夋嫨鍋滄満绫诲瀷' + } + ], + downtimeDescription: [ + { + required: true, message: '璇疯緭鍏ュ仠鏈哄師鍥�' + } + ] + }, + title: '鎿嶄綔', + visible: false, + model: {}, + labelColLong: { + xs: { span: 24 }, + sm: { span: 6 } + }, + wrapperColLong: { + xs: { span: 24 }, + sm: { span: 17 } + }, + confirmLoading: false, + url: { + add: '/mdc/mdcDowntimeReason/add', + edit: '/mdc/mdcDowntimeReason/edit' + } + } + }, + methods: { + add() { + this.model = {} + this.visible = true + }, + + edit(record) { + this.model = Object.assign({}, record) + this.visible = true + }, + + handleSubmit() { + const that = this + // 瑙﹀彂琛ㄥ崟楠岃瘉 + this.$refs.form.validate(valid => { + if (valid) { + that.confirmLoading = true + let apiUrl + if (!this.model.id) { + apiUrl = that.url.add + } else { + apiUrl = that.url.edit + } + postAction(apiUrl, that.model) + .then((res) => { + if (res.success) { + that.$notification.success({ + message: '娑堟伅', + description: res.message + }) + that.$emit('ok') + that.handleCancel() + } else { + that.$notification.warning({ + message: '娑堟伅', + description: res.message + }) + } + }) + .finally(() => { + that.confirmLoading = false + }) + } else { + return false + } + }) + }, + + handleCancel() { + this.visible = false + this.removeValidate() + }, + + // 鍏抽棴寮圭獥鏃舵竻妤氳〃鍗曟牎楠� + removeValidate() { + if (this.$refs.form) this.$refs.form.clearValidate() + } + } + +} +</script> + +<style scoped> + +</style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownList.vue b/src/views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownList.vue new file mode 100644 index 0000000..bbbc17b --- /dev/null +++ b/src/views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownList.vue @@ -0,0 +1,221 @@ +<template> + <div class="page-container"> + <!-- 鏌ヨ鍖哄煙 --> + <div> + <div class="table-page-search-wrapper"> + <a-form layout="inline" @keyup.enter.native="searchQuery"> + <a-row :gutter="24"> + <a-col :md="4" :sm="4"> + <a-form-item label="鍋滄満鏃ユ湡"> + <a-date-picker placeholder="璇烽�夋嫨鍋滄満鏃ユ湡" value-format="YYYY-MM-DD" style="width: 100%" + v-model="queryParam.theDate" :allow-clear="false"/> + </a-form-item> + </a-col> + + <a-col :md="4" :sm="4" :xs="4"> + <a-space> + <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> + <a-button @click="searchReset" icon="reload">閲嶇疆</a-button> + </a-space> + </a-col> + </a-row> + </a-form> + </div> + </div> + + <!-- 鎿嶄綔鎸夐挳鍖哄煙 --> + <div class="table-operator"> + <a-button @click="handleAdd" type="primary" icon="plus">鏂板</a-button> + </div> + + <div style="overflow: hidden;width: 100%;flex: 1" id="DeviceList"> + <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}" + size="middle" rowKey="id" :columns="columns" + @change="handleTableChange" + :dataSource="dataSource" :pagination="ipagination" + :loading="loading"> + <template slot="downtimeType" slot-scope="text"> + {{ text !== null ? text === 0 ? '璁″垝鍋滄満' : '闈炶鍒掑仠鏈�' : '' }} + </template> + + <template slot="action" slot-scope="text, record"> + <a @click="handleEdit(record)">缂栬緫</a> + + <a-divider type="vertical"/> + + <a-popconfirm title="纭畾鍒犻櫎鍚�?" @confirm="() => handleDelete(record.id)"> + <a>鍒犻櫎</a> + </a-popconfirm> + </template> + </a-table> + </div> + + <EquipmentStandbyShutdownModal ref="modalForm" @ok="modalFormOk"/> + </div> +</template> + +<script> + import moment from 'moment' + import { JeecgListMixin } from '@/mixins/JeecgListMixin' + import EquipmentStandbyShutdownModal + from '@views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownModal.vue' + + export default { + name: 'EquipmentStandbyShutdownList', + components: { EquipmentStandbyShutdownModal }, + mixins: [JeecgListMixin], + data() { + return { + disableMixinCreated: true, + scrollY: 465, + queryParam: { + theDate: moment().subtract('days', 1).format('YYYY-MM-DD') + }, + columns: [ + { + title: '#', + dataIndex: '', + key: 'rowIndex', + width: 60, + align: 'center', + customRender: function(t, r, index) { + return parseInt(index) + 1 + } + }, + { + title: '璁惧缂栧彿', + align: 'center', + dataIndex: 'equipmentId', + width: 200 + }, + { + title: '璁惧鍚嶇О', + align: 'center', + dataIndex: 'equipmentName', + width: 200 + }, + { + title: '鍋滄満绫诲瀷', + align: 'center', + dataIndex: 'downtimeType', + scopedSlots: { customRender: 'downtimeType' }, + width: 150 + }, + { + title: '鍋滄満鍘熷洜', + align: 'center', + dataIndex: 'downtimeDescription', + width: 200 + }, + { + title: '鍋滄満鏃ユ湡', + align: 'center', + dataIndex: 'theDate', + width: 150 + }, + { + title: '鍋滄満鏃堕暱(min)', + align: 'center', + dataIndex: 'downLong', + width: 150 + }, + { + title: '澶囨敞', + align: 'center', + dataIndex: 'remark' + }, + { + title: '鎿嶄綔', + dataIndex: 'action', + align: 'center', + width: 150, + scopedSlots: { customRender: 'action' }, + fixed: 'right' + } + ], + url: { + list: '/mdc/mdcDowntime/list', + delete: '/mdc/mdcDowntime/delete' + } + } + }, + props: { node: {}, Type: '' }, + created() { + this.queryParam.typeTree = '1' + this.loadData() + }, + mounted() { + window.addEventListener('resize', this.handleWindowResize) + this.handleWindowResize() + }, + beforeDestroy() { + window.removeEventListener('resize', this.handleWindowResize) + }, + watch: { + Type(valmath) { + this.queryParam.typeTree = valmath + }, + node(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 + if (JSON.stringify(val) != '{}') { + if (val.equipmentId != null) { + this.queryParam.equipmentId = val.equipmentId + this.queryParam.parentId = '' + } else { + this.queryParam.parentId = val.key + this.queryParam.equipmentId = '' + } + this.loadData(1) + } + } + }, + methods: { + searchReset() { + this.queryParam = { theDate: moment().subtract('days', 1).format('YYYY-MM-DD') } + this.loadData(1) + }, + + 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> + .page-container { + overflow: hidden; + display: flex; + flex-direction: column; + } + + @media screen and (min-width: 1920px) { + .page-container { + height: 812px !important; + } + } + + @media screen and (min-width: 1680px) and (max-width: 1920px) { + .page-container { + height: 812px !important; + } + } + + @media screen and (min-width: 1400px) and (max-width: 1680px) { + .page-container { + height: 664px !important; + } + } + + @media screen and (min-width: 1280px) and (max-width: 1400px) { + .page-container { + height: 565px !important; + } + } + + @media screen and (max-width: 1280px) { + .page-container { + height: 565px !important; + } + } +</style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownModal.vue b/src/views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownModal.vue new file mode 100644 index 0000000..4a88cd5 --- /dev/null +++ b/src/views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownModal.vue @@ -0,0 +1,389 @@ +<template> + <a-modal :title="title" :width="900" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" + @cancel="handleCancel" cancelText="鍏抽棴"> + <a-spin :spinning="spinning"> + <a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelColLong" + :wrapperCol="wrapperColLong"> + <a-row :gutter="24"> + <a-col :span="24"> + <a-form-model-item label="璁惧缁�" prop="equipmentIds"> + <a-input-search readOnly v-model="model.equipmentIds" @search="deviceSearch" enter-button + placeholder="璇烽�夋嫨璁惧" /> + </a-form-model-item> + </a-col> + </a-row> + + <a-row :gutter="24"> + <a-col :span="24"> + <a-form-model-item label="鍋滄満绫诲瀷" prop="downtimeType"> + <a-radio-group v-model="model.downtimeType" placeholder="璇烽�夋嫨鍋滄満绫诲瀷" + @change="handleDowntimeTypeChange"> + <a-radio :value="0">璁″垝鍋滄満</a-radio> + <a-radio :value="1">闈炶鍒掑仠鏈�</a-radio> + </a-radio-group> + </a-form-model-item> + </a-col> + + </a-row> + + <a-row :gutter="24"> + <a-col :span="24"> + <a-form-model-item label="鍋滄満鍘熷洜" prop="reasonId"> + <a-select v-model="model.reasonId" placeholder="璇烽�夋嫨鍋滄満鍘熷洜"> + <a-select-option v-for="item in downtimeDescriptionList" :key="item.id"> + {{ item.downtimeDescription }} + </a-select-option> + </a-select> + </a-form-model-item> + </a-col> + </a-row> + + <a-row :gutter="24"> + <a-col :span="24"> + <a-form-model-item v-if="title === '缂栬緫'" label="鍋滄満鏃ユ湡" prop="theDate"> + <a-date-picker :disabled="true" v-model="model.theDate" placeholder="璇烽�夋嫨鍋滄満鏃ユ湡" + value-format="YYYY-MM-DD" + style="width: 100%" /> + </a-form-model-item> + + <a-form-item v-if="title === '鏂板'" label="鍋滄満鏃ユ湡" :labelCol="labelColLong" :wrapperCol="wrapperColLong"> + <div class="mainBox"> + <Calendar + v-on:choseDay="clickDay" + :markDate="shiData" + :agoDayHide="value" + ></Calendar> + </div> + </a-form-item> + </a-col> + </a-row> + + <a-row :gutter="24"> + <a-col :span="24"> + <a-form-model-item label="鍋滄満鏃堕暱(min)" prop="downLong"> + <a-input-number v-model="model.downLong" :min="1" :max="1440" :step="1" :precision="0" + placeholder="璇疯緭鍏ュ仠鏈烘椂闀�(min)" + style="width: 100%" /> + </a-form-model-item> + </a-col> + </a-row> + + <a-row :gutter="24"> + <a-col :span="24"> + <a-form-model-item label="澶囨敞"> + <a-textarea v-model="model.remark" placeholder="璇疯緭鍏ュ娉�" /> + </a-form-model-item> + </a-col> + </a-row> + </a-form-model> + </a-spin> + + <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'閫夋嫨璁惧'" /> + </a-modal> +</template> + +<script> +import Calendar from 'vue-calendar-component' +import { getAction, postAction } from '@api/manage' +import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer' + +export default { + name: 'EquipmentStandbyShutdownModal', + components: { SelectDeviceDrawer, Calendar }, + props: {}, + data() { + return { + title: '', + visible: false, + value: '', + model: {}, + equipmentList: [], + downtimeDescriptionList: [], + labelColLong: { + xs: { span: 24 }, + sm: { span: 6 } + }, + wrapperColLong: { + xs: { span: 24 }, + sm: { span: 16 } + }, + confirmLoading: false, + spinning: false, + disableSelectDevice: false, + validatorRules: { + equipmentIds: [ + { required: true, message: '璇烽�夋嫨璁惧', trigger: 'change' } + ], + downtimeType: [ + { required: true, message: '璇烽�夋嫨鍋滄満绫诲瀷' } + ], + reasonId: [ + { required: true, message: '璇烽�夋嫨鍋滄満鍘熷洜' } + ], + theDate: [ + { required: true, message: '璇烽�夋嫨鍋滄満鏃ユ湡' } + ], + downLong: [ + { required: true, message: '璇疯緭鍏ュ仠鏈烘椂闀�(min)' } + ] + }, + url: { + add: '/mdc/mdcDowntime/add', + edit: '/mdc/mdcDowntime/edit', + getDowntimeDescriptionListByDowntimeType: '/mdc/mdcDowntimeReason/downtimeReasonList' + }, + shiData: [], + sendDte: [] + } + }, + methods: { + add() { + this.resetSelect() + this.edit({ + downtimeType: 0 + }) + }, + + edit(record) { + this.model = Object.assign({}, record, { equipmentIds: record.equipmentId }) + this.getDowntimeDescriptionListByApi() + if (this.model.downtimeType === null) { + delete this.model.downtimeType + delete this.model.reasonId + } + this.visible = true + }, + + // 鍋滄満绫诲瀷鍊煎彂鐢熸敼鍙樻椂瑙﹀彂娓呯┖鍋滄満鍘熷洜骞堕噸鏂拌幏鍙栧搴斿仠鏈虹被鍨嬬殑鍋滄満鍘熷洜鍒楄〃 + handleDowntimeTypeChange() { + if (this.model.reasonId) delete this.model.reasonId + this.removeValidate() + this.getDowntimeDescriptionListByApi() + }, + + // 璋冪敤鎺ュ彛鑾峰彇鍋滄満鍘熷洜鍒楄〃 + getDowntimeDescriptionListByApi() { + const that = this + this.downtimeDescriptionList = [] + this.spinning = true + getAction(this.url.getDowntimeDescriptionListByDowntimeType, { downtimeType: this.model.downtimeType }) + .then(res => { + if (res.success) that.downtimeDescriptionList = res.result + }) + .finally(() => { + that.spinning = false + }) + }, + + handleOk() { + const that = this + // 瑙﹀彂琛ㄥ崟楠岃瘉 + this.$refs.form.validate(valid => { + if (valid) { + that.confirmLoading = that.spinning = true + let url + if (!that.model.id) { + url = that.url.add + } else { + url = that.url.edit + } + that.model.dateList = this.sendDte + if (that.model.dateList && that.model.dateList.length > 0) { + postAction(url, that.model) + .then((res) => { + if (res.success) { + that.$notification.success({ + message: '娑堟伅', + description: res.message + }) + that.$emit('ok') + that.handleCancel() + } else { + that.$notification.warning({ + message: '娑堟伅', + description: res.message + }) + } + }) + .finally(() => { + that.confirmLoading = that.spinning = false + }) + } else { + that.confirmLoading = false + that.$notification.warning({ + message: '娑堟伅', + description: '璇烽�夋嫨鐢熸晥鏃堕棿!' + }) + } + } + }) + }, + + deviceSearch() { + this.$refs.selectDeviceDrawer.visible = true + this.$refs.selectDeviceDrawer.selectedRowKeys = [] + this.$refs.selectDeviceDrawer.selectedRows = [] + this.$refs.selectDeviceDrawer.checkedKeys = this.model.equipmentIds ? this.model.equipmentIds.split(',') : [] + }, + + /** + * 閫夋嫨宸叉湁璁惧鍚庣偣鍑荤‘瀹氭椂瑙﹀彂 + * @param data 宸查�夋嫨鐨勮澶� + */ + selectOK(data) { + this.$set(this.model, 'equipmentIds', data.join(',')) + if (this.model.equipmentIds) this.$refs.form.clearValidate('equipmentIds') + }, + + handleCancel() { + this.visible = false + this.removeValidate() + }, + // 鍏抽棴寮圭獥鏃舵竻妤氳〃鍗曟牎楠� + removeValidate() { + if (this.$refs.form) this.$refs.form.clearValidate() + }, + resetSelect() {//閲嶇疆閫変腑鐨勬棩鏈� + this.selectDate = [] + this.shiData = [] + this.sendDte = [] + }, + fun(obj) { + console.log(obj) + if (obj) { + if (obj = obj.split('/')) { + var timShi = obj[1] + var timFen = obj[2] + if (timShi < 10) { + timShi = '0' + timShi + } + if (timFen < 10) { + timFen = '0' + timFen + } + var dd = (obj[0] + timShi + timFen) + return dd + } + } + }, + clickDay(today) {//閫変腑鏃ユ湡 + let existDate = this.selectDate + let isExist = true + for (var i = 0; i < existDate.length; i++) { + if (existDate[i].date === today) { + this.selectDate.splice(i, 1) + this.shiData.splice(i, 1) + this.sendDte.splice(i, 1) + isExist = false + } + } + if (isExist) {//褰撳墠鏃ユ湡瀛樺湪绉婚櫎 + let tempDate = { date: today, className: 'mark1' } + // let ddd = this.fun(today) + let ddd = today + let ccc = this.fun(today) + this.selectDate.push(tempDate) + this.shiData.push(ddd) + this.sendDte.push(ccc) + } + } + } +} +</script> + +<style scoped lang="less"> +/deep/ .ant-modal-close { + color: #1191b0; + font-size: 24px; +} + +/deep/ .ant-modal-close-x { + font-size: 24px; +} + +.ant-btn { + padding: 0 10px; + margin-left: 3px; +} + +.ant-form-item-control { + line-height: 0px; +} + +/** 涓昏〃鍗曡闂磋窛 */ +.ant-form .ant-form-item { + margin-bottom: 10px; +} + +/** Tab椤甸潰琛岄棿璺� */ +.ant-tabs-content .ant-form-item { + margin-bottom: 0px; +} + +/deep/ .mark1 { + color: white !important; + background-color: #1890ff !important; + border-radius: 50%; +} + +/deep/ .mainBox .wh_content_all { + background-color: #ffffff; + border: 1px silver solid; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +/deep/ .mainBox .wh_content_all .wh_jiantou1 { + border-top: 2px solid #000000; + border-left: 2px solid #000000; +} + +/deep/ .mainBox .wh_content_all .wh_jiantou2 { + border-top: 2px solid #000000; + border-right: 2px solid #000000; +} + +/deep/ .mainBox .wh_content_all .wh_top_changge li { + color: black; +} + +/deep/ .mainBox .wh_content_all .wh_content_item { + margin-top: 5px; +} + +/deep/ .mainBox .wh_content_all .wh_content_item .wh_top_tag { + color: #000000; +} + +/deep/ .mainBox .wh_content_all .wh_content_item .wh_item_date { + color: #000000; +} + +/deep/ .mainBox .wh_content_all .wh_content_item .wh_item_date:hover { + color: #1890ff; + border: 1px solid #1890ff; + border-radius: 50%; +} + +/deep/ .mainBox .wh_content_all .wh_content_item .wh_other_dayhide { + color: #bfbfbf !important; +} + +/deep/ .mainBox .wh_content_all .wh_content_item .wh_want_dayhide { + color: #bfbfbf !important; +} + +/deep/ .mainBox .wh_content_all .wh_content_item .wh_chose_day { + background: #ffffff; + color: #000000; +} + +/deep/ .mainBox .wh_content_all .wh_content_item .wh_isMark { + color: #ffffff; + background-color: blue; +} + +</style> + + + diff --git a/src/views/mdc/base/modules/OEEAnalysis/ComputeOeeModal.vue b/src/views/mdc/base/modules/OEEAnalysis/ComputeOeeModal.vue new file mode 100644 index 0000000..91e11fb --- /dev/null +++ b/src/views/mdc/base/modules/OEEAnalysis/ComputeOeeModal.vue @@ -0,0 +1,86 @@ +<template> + <j-modal title="璁$畻OEE" :visible="visible" :width="550" @cancel="handleModalClose" @ok="handleComputeOee" + :maskClosable="false" :confirmLoading="confirmLoading"> + <a-form-model :model="model" :labelCol="labelColLong" :wrapperCol="wrapperColLong"> + <a-row> + <a-col :span="24"> + <a-form-model-item label="鏃ユ湡"> + <a-range-picker v-model="dates" style="width: 100%" value-format="YYYY-MM-DD" + @change="dateParamChange" :allow-clear="false"/> + </a-form-model-item> + </a-col> + </a-row> + </a-form-model> + </j-modal> +</template> + +<script> + import mdcApi from '@/api/mdc' + + export default { + name: 'ComputeOeeModal', + components: {}, + data() { + return { + visible: false, + model: {}, + dates: [], + confirmLoading: false, + labelColLong: { + xs: { span: 24 }, + sm: { span: 3 } + }, + wrapperColLong: { + xs: { span: 24 }, + sm: { span: 21 } + } + } + }, + methods: { + handleComputeOee() { + if (this.dates.length === 0) { + this.$notification.warning({ + message: '娑堟伅', + description: '璇烽�夋嫨鏃堕棿' + }) + return + } + this.confirmLoading = true + const that = this + mdcApi.computeOeeApi(this.model) + .then(res => { + if (res.success) { + that.$notification.success({ + message: '娑堟伅', + description: res.message + }) + that.handleModalClose() + } else { + that.$notification.error({ + message: '娑堟伅', + description: '璁$畻澶辫触' + }) + } + }) + .finally(() => { + that.confirmLoading = false + }) + }, + + dateParamChange(value1, value2) { + this.model.startTime = value2[0] + this.model.endTime = value2[1] + }, + + handleModalClose() { + this.visible = false + this.model = {} + this.dates = [] + } + } + } +</script> + +<style scoped> + +</style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue new file mode 100644 index 0000000..4137bac --- /dev/null +++ b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue @@ -0,0 +1,306 @@ +<template> + <div class="device_list"> + <!-- 鏌ヨ鍖哄煙 --> + <div class="table-page-search-wrapper"> + <a-form layout="inline" @keyup.enter.native="searchQuery"> + <a-row :gutter="24"> + <a-col :xl="6" :lg="7" :md="8" :sm="24"> + <a-form-item label="璁惧缂栧彿"> + <a-input placeholder="璇疯緭鍏ヨ澶囩紪鍙�" v-model="queryParam.equipmentId"/> + </a-form-item> + </a-col> + <a-col :xl="6" :lg="7" :md="8" :sm="24"> + <a-form-item label="鏃ユ湡"> + <a-range-picker v-model="dates" style="width: 100%" @change="dateParamChange"></a-range-picker> + </a-form-item> + </a-col> + <a-col :xl="6" :lg="7" :md="8" :sm="24"> + <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> + <!-- 鏌ヨ鍖哄煙-END --> + + <!-- 鎿嶄綔鎸夐挳鍖哄煙 --> + <div class="table-operator"> + <a-button type="primary" icon="download" @click="handleExportXls('OEE')">瀵煎嚭</a-button> + <a-button type="primary" icon="edit" @click="handleComputeModalOpen">璁$畻</a-button> + </div> + + <!-- table鍖哄煙-begin --> + <div id="DeviceList" style="flex: 1;overflow: hidden"> + <a-table + ref="table" + size="middle" + :scroll="{x:'max-content',y:scrollY}" + bordered + rowKey="id" + :columns="columns" + :dataSource="dataSource" + :pagination="ipagination" + :loading="loading" + @change="handleTableChange" + > + <template slot="percent" slot-scope="text"> + {{text+'%'}} + </template> + </a-table> + </div> + + <ComputeOeeModal ref="computeOeeModalRef"/> + </div> +</template> + +<script> + import moment from 'moment' + import { JeecgListMixin } from '@/mixins/JeecgListMixin' + import ComputeOeeModal from './ComputeOeeModal' + + export default { + name: 'OEEAnalysisList', + mixins: [JeecgListMixin], + components: { ComputeOeeModal }, + props: { nodeTree: '', Type: '', nodePeople: '' }, + data() { + return { + description: 'OEE椤甸潰', + disableMixinCreated: true, + /* 鍒嗛〉鍙傛暟 */ + ipagination: { + current: 1, + pageSize: 30, + pageSizeOptions: ['30', '50', '100'], + showTotal: (total, range) => { + return range[0] + '-' + range[1] + ' 鍏�' + total + '鏉�' + }, + showQuickJumper: true, + showSizeChanger: true, + total: 0 + }, + dates: [moment().subtract(1, 'day'), moment()], + queryParam: {}, + // 琛ㄥご + columns: [ + { + title: '#', + dataIndex: '', + key: 'rowIndex', + width: 60, + align: 'center', + customRender: function(t, r, index) { + return parseInt(index) + 1 + } + }, + { + title: '璁惧缂栧彿', + align: 'center', + dataIndex: 'equipmentId', + width: 230 + }, + { + title: '鏃ユ湡', + align: 'center', + dataIndex: 'theDate', + width: 150 + }, + { + title: '鏃ュ巻宸ヤ綔鏃堕棿(min)', + align: 'center', + dataIndex: 'calendarLong', + width: 150 + }, + { + title: '璁″垝鍋滄満鏃堕棿(min)', + align: 'center', + dataIndex: 'planCloseLong', + width: 150 + }, + { + title: '璐熻嵎鏃堕棿(min)', + align: 'center', + dataIndex: 'loadLong', + width: 150 + }, + { + title: '闈炶鍒掑仠鏈烘椂闂�(min)', + align: 'center', + dataIndex: 'noplanCloseLong', + width: 150 + }, + { + title: '寮�鍔ㄦ椂闂�(min)', + align: 'center', + dataIndex: 'actuateLong', + width: 150 + }, + { + title: '鏃堕棿寮�鍔ㄧ巼', + align: 'center', + dataIndex: 'timeActuationRate', + width: 150, + scopedSlots: { customRender: 'percent' } + }, + { + title: '鏈夋晥杩愯鏃堕棿(min)', + align: 'center', + dataIndex: 'effectiveRunLong', + width: 150 + }, + { + title: '鎬ц兘寮�鍔ㄧ巼', + align: 'center', + dataIndex: 'performanceRate', + width: 150, + scopedSlots: { customRender: 'percent' } + }, + { + title: '鍔犲伐闆朵欢鏁伴噺', + align: 'center', + dataIndex: 'processCount', + width: 150 + }, + { + title: '鍚堟牸闆朵欢鏁伴噺', + align: 'center', + dataIndex: 'passCount', + width: 150 + }, + { + title: '涓�娆″悎鏍肩巼', + align: 'center', + dataIndex: 'passRate', + width: 150, + scopedSlots: { customRender: 'percent' } + }, + { + title: 'OEE', + align: 'center', + dataIndex: 'oee', + width: 150, + scopedSlots: { customRender: 'percent' } + } + ], + scrollY: 465, + url: { + list: '/mdc/mdcOeeInfo/list', + exportXlsUrl: '/mdc/mdcOeeInfo/exportXls' + } + } + }, + watch: { + Type(valmath) { + this.dataList = [] + this.queryParam.typeTree = valmath + // console.log(this.queryParam.typeTree) + }, + nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 + if (JSON.stringify(val) != '{}') { + if (val.equipmentId) { + this.queryParam.parentId = '' + this.queryParam.equipmentId = val.equipmentId + } else { + this.queryParam.parentId = val.key + this.queryParam.equipmentId = '' + } + this.searchQuery() + } + }, + nodePeople(val) { + if (JSON.stringify(val) != '{}') { + if (val.equipmentId) { + this.queryParam.parentId = '' + this.queryParam.equipmentId = val.equipmentId + } else { + this.queryParam.parentId = val.key + this.queryParam.equipmentId = '' + } + this.searchQuery() + } + } + }, + methods: { + handleComputeModalOpen() { + this.$refs.computeOeeModalRef.visible = true + }, + + dateParamChange(v1, v2) { + this.queryParam.startTime = v2[0] + this.queryParam.endTime = v2[1] + this.dates = [v1[0], v1[1]] + }, + + searchReset() { + this.dates = [moment().subtract(1, 'day'), moment()] + this.queryParam = { + startTime: this.dates[0].format('YYYY-MM-DD'), + endTime: this.dates[1].format('YYYY-MM-DD') + } + this.loadData(1) + }, + + /** + * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙� + */ + 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 + } + }, + created() { + this.queryParam.startTime = this.dates[0].format('YYYY-MM-DD') + this.queryParam.endTime = this.dates[1].format('YYYY-MM-DD') + this.loadData() + }, + mounted() { + window.addEventListener('resize', this.handleWindowResize) + this.handleWindowResize() + }, + beforeDestroy() { + window.removeEventListener('resize', this.handleWindowResize) + } + } +</script> +<style scoped> + @import '~@assets/less/common.less'; + + .device_list { + display: flex; + flex-direction: column; + overflow: hidden; + } + + @media screen and (min-width: 1920px) { + .device_list { + height: 811px !important; + } + } + + @media screen and (min-width: 1680px) and (max-width: 1920px) { + .device_list { + height: 811px !important; + } + } + + @media screen and (min-width: 1400px) and (max-width: 1680px) { + .device_list { + height: 663px !important; + } + } + + @media screen and (min-width: 1280px) and (max-width: 1400px) { + .device_list { + height: 564px !important; + } + } + + @media screen and (max-width: 1280px) { + .device_list { + height: 564px !important; + } + } +</style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/PartsMatchingManagement/PartsMatchingForm.vue b/src/views/mdc/base/modules/PartsMatchingManagement/PartsMatchingForm.vue new file mode 100644 index 0000000..a66a14f --- /dev/null +++ b/src/views/mdc/base/modules/PartsMatchingManagement/PartsMatchingForm.vue @@ -0,0 +1,189 @@ +<template> + <a-spin :spinning="confirmLoading"> + <j-form-container :disabled="formDisabled"> + <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail"> + <a-row> + <a-col :span="24"> + <a-form-model-item label="璁惧缁�" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentIds"> + <a-input-search :readOnly="true" v-model="model.equipmentIds" @click="deviceSearch" + @search="deviceSearch" :disabled="disableSelectDevice" enter-button + placeholder="璇烽�夋嫨璁惧"></a-input-search> + </a-form-model-item> + </a-col> + <a-col :span="24"> + <a-form-model-item label="闆朵欢鍙�" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="partId"> + <a-input placeholder="璇疯緭鍏ラ浂浠跺彿" v-model="model.partId" allowClear/> + </a-form-model-item> + </a-col> + <a-col :span="24"> + <a-form-model-item label="鏍囧噯鍔犲伐宸ユ椂(min)" :labelCol="labelCol" :wrapperCol="wrapperCol" + prop="standardProcessLong"> + <a-input-number :min="0" placeholder="璇疯緭鍏ユ爣鍑嗗姞宸ュ伐鏃�(min)" v-model="model.standardProcessLong" + @change="inputNumberChange"/> + </a-form-model-item> + </a-col> + <a-col :span="24"> + <a-form-model-item label="鍔犲伐闆朵欢鏁伴噺" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processCount"> + <a-input-number :min="0" v-model="model.processCount" placeholder="璇疯緭鍏ュ姞宸ラ浂浠舵暟閲�" + @change="inputNumberChange"></a-input-number> + </a-form-model-item> + </a-col> + <a-col :span="24"> + <a-form-model-item label="鍚堟牸闆朵欢鏁伴噺" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="passCount"> + <a-input-number :min="0" v-model="model.passCount" placeholder="璇疯緭鍏ュ悎鏍奸浂浠舵暟閲�"></a-input-number> + </a-form-model-item> + </a-col> + <a-col :span="24"> + <a-form-model-item label="鍔犲伐鎬绘椂闀�" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-input v-model="model.totalProcessLong" placeholder="鍔犲伐闆朵欢鏁伴噺 X 鏍囧噯鍔犲伐宸ユ椂" readOnly></a-input> + </a-form-model-item> + </a-col> + <a-col :span="24"> + <a-form-model-item label="鏃ユ湡" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="theDate"> + <a-date-picker v-model="model.theDate" :disabled="disabled" format="YYYY-MM-DD" :allow-clear="false" + value-format="YYYY-MM-DD" style="width: 100%"></a-date-picker> + </a-form-model-item> + </a-col> + </a-row> + </a-form-model> + </j-form-container> + + <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'閫夋嫨璁惧'"/> + </a-spin> +</template> + +<script> + import { httpAction, getAction } from '@/api/manage' + import SelectDeviceDrawer from '@/views/system/modules/SelectDeviceDrawer' + + export default { + name: 'PartsMatchingForm', + components: { SelectDeviceDrawer }, + props: { + //琛ㄥ崟绂佺敤 + disabled: { + type: Boolean, + default: false, + required: false + }, + disableSelectDevice: { + type: Boolean, + default: false + } + }, + data() { + return { + model: { + passCount: 0 + }, + labelCol: { + xs: { span: 24 }, + sm: { span: 5 } + }, + wrapperCol: { + xs: { span: 24 }, + sm: { span: 16 } + }, + confirmLoading: false, + validatorRules: { + equipmentIds: [ + { required: true, message: '璇烽�夋嫨璁惧!', trigger: 'change' } + ], + partId: [ + { required: true, message: '璇疯緭鍏ラ浂浠跺彿!' } + ], + standardProcessLong: [ + { required: true, message: '璇疯緭鍏ユ爣鍑嗗姞宸ュ伐鏃�(min)!' } + ], + processCount: [ + { required: true, message: '璇疯緭鍏ュ姞宸ラ浂浠舵暟閲�!' } + ], + passCount: [ + { required: true, message: '璇疯緭鍏ュ悎鏍奸浂浠舵暟閲�!' } + ], + theDate: [ + { required: true, message: '璇烽�夋嫨鏃ユ湡!' } + ] + }, + url: { + add: '/mdc/mdcPartProcessInfo/add', + edit: '/mdc/mdcPartProcessInfo/edit' + } + } + }, + computed: { + formDisabled() { + return this.disabled + } + }, + created() { + //澶囦唤model鍘熷鍊� + this.modelDefault = JSON.parse(JSON.stringify(this.model)) + }, + methods: { + add() { + this.edit(this.modelDefault) + }, + edit(record) { + this.model = Object.assign({}, { equipmentIds: record.equipmentId }, record) + this.visible = true + }, + inputNumberChange() { + if (this.model.standardProcessLong && this.model.processCount) { + this.model.totalProcessLong = this.model.standardProcessLong * this.model.processCount + } + }, + submitForm() { + const that = this + // 瑙﹀彂琛ㄥ崟楠岃瘉 + this.$refs.form.validate(valid => { + if (valid) { + that.confirmLoading = true + let httpUrl = '' + let method = 'post' + if (!this.model.id) { + httpUrl += this.url.add + } else { + httpUrl += this.url.edit + } + httpAction(httpUrl, this.model, method).then((res) => { + if (res.success) { + that.$notification.success({ + message: '娑堟伅', + description: res.message + }) + that.$emit('ok') + } else { + that.$notification.warning({ + message: '娑堟伅', + description: res.message + }) + } + }).finally(() => { + that.confirmLoading = false + }) + } + + }) + }, + deviceSearch() { + this.$refs.selectDeviceDrawer.visible = true + this.$refs.selectDeviceDrawer.selectedRowKeys = [] + this.$refs.selectDeviceDrawer.selectedRows = [] + this.$refs.selectDeviceDrawer.checkedKeys = this.model.equipmentIds ? this.model.equipmentIds.split(',') : [] + }, + /** + * 閫夋嫨宸叉湁璁惧鍚庣偣鍑荤‘瀹氭椂瑙﹀彂 + * @param data 宸查�夋嫨鐨勮澶� + */ + selectOK(data) { + this.$set(this.model, 'equipmentIds', data.join(',')) + } + } + } +</script> +<style scoped lang="less"> + /deep/ .ant-input-number { + width: 100% !important; + } +</style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/PartsMatchingManagement/PartsMatchingList.vue b/src/views/mdc/base/modules/PartsMatchingManagement/PartsMatchingList.vue new file mode 100644 index 0000000..39c9988 --- /dev/null +++ b/src/views/mdc/base/modules/PartsMatchingManagement/PartsMatchingList.vue @@ -0,0 +1,321 @@ +<template> + <div class="device_list"> + <!-- 鏌ヨ鍖哄煙 --> + <div class="table-page-search-wrapper"> + <a-form layout="inline" @keyup.enter.native="searchQuery"> + <a-row :gutter="24"> + <a-col :xl="6" :lg="7" :md="8" :sm="24"> + <a-form-item label="璁惧缂栧彿"> + <a-input placeholder="璇疯緭鍏ヨ澶囩紪鍙�" v-model="queryParam.equipmentId"/> + </a-form-item> + </a-col> + <a-col :xl="6" :lg="7" :md="8" :sm="24"> + <a-form-item label="闆朵欢鍙�"> + <a-input placeholder="璇疯緭鍏ラ浂浠跺彿" v-model="queryParam.partId" allowClear/> + </a-form-item> + </a-col> + <a-col :xl="6" :lg="7" :md="8" :sm="24"> + <a-form-item label="鏃ユ湡"> + <a-range-picker v-model="dates" style="width: 100%" @change="dateParamChange"></a-range-picker> + </a-form-item> + </a-col> + <a-col :xl="6" :lg="7" :md="8" :sm="24"> + <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> + <!-- 鏌ヨ鍖哄煙-END --> + + <!-- 鎿嶄綔鎸夐挳鍖哄煙 --> + <div class="table-operator"> + <a-button @click="handleAdd" type="primary" icon="plus">鏂板</a-button> + <a-button type="primary" icon="download" @click="importTemplate('闆朵欢鍔犲伐绠$悊')">瀵煎叆妯℃澘</a-button> + <a-button type="primary" icon="download" @click="handleExportXls('闆朵欢鍔犲伐绠$悊')">瀵煎嚭</a-button> + <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" + @change="handleImportExcel"> + <a-button type="primary" icon="import">瀵煎叆</a-button> + </a-upload> + + <a-dropdown v-if="selectedRowKeys.length > 0"> + <a-menu slot="overlay"> + <a-menu-item key="1" @click="batchDel"> + <a-icon type="delete"/> + 鍒犻櫎 + </a-menu-item> + </a-menu> + <a-button style="margin-left: 8px"> 鎵归噺鎿嶄綔 + <a-icon type="down"/> + </a-button> + </a-dropdown> + </div> + + <!-- table鍖哄煙-begin --> + <div id="DeviceList" style="flex: 1;overflow: hidden"> + <a-table + ref="table" + size="middle" + :scroll="{x:'max-content',y:scrollY}" + bordered + rowKey="id" + :columns="columns" + :dataSource="dataSource" + :pagination="ipagination" + :loading="loading" + :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" + class="j-table-force-nowrap" + @change="handleTableChange"> + + <span slot="action" slot-scope="text, record"> + <a @click="handleEdit(record)">缂栬緫</a> + + <a-divider type="vertical"/> + <a-dropdown> + <a class="ant-dropdown-link">鏇村 <a-icon type="down"/></a> + <a-menu slot="overlay"> + <a-menu-item> + <a @click="handleDetail(record)">璇︽儏</a> + </a-menu-item> + <a-menu-item> + <a-popconfirm title="纭畾鍒犻櫎鍚�?" @confirm="() => handleDelete(record.id)"> + <a>鍒犻櫎</a> + </a-popconfirm> + </a-menu-item> + </a-menu> + </a-dropdown> + </span> + + </a-table> + </div> + + <PartsMatchingModal ref="modalForm" @ok="modalFormOk"/> + </div> +</template> + +<script> + import moment from 'moment' + import { JeecgListMixin } from '@/mixins/JeecgListMixin' + import PartsMatchingModal from './PartsMatchingModal' + + export default { + name: 'PartsMatchingList', + mixins: [JeecgListMixin], + components: { + PartsMatchingModal + }, + props: { nodeTree: '', Type: '', nodePeople: '' }, + data() { + return { + description: 'partsMatching绠$悊椤甸潰', + /* 鍒嗛〉鍙傛暟 */ + ipagination: { + current: 1, + pageSize: 30, + pageSizeOptions: ['30', '50', '100'], + showTotal: (total, range) => { + return range[0] + '-' + range[1] + ' 鍏�' + total + '鏉�' + }, + showQuickJumper: true, + showSizeChanger: true, + total: 0 + }, + queryParam: {}, + disableMixinCreated: true, + dates: [moment().subtract(1, 'day'), moment()], + // 琛ㄥご + columns: [ + { + title: '#', + dataIndex: '', + key: 'rowIndex', + width: 60, + align: 'center', + customRender: function(t, r, index) { + return parseInt(index) + 1 + } + }, + { + title: '鏃ユ湡', + align: 'center', + dataIndex: 'theDate', + width: 200 + }, + { + title: '璁惧缂栧彿', + align: 'center', + dataIndex: 'equipmentId', + width: 230 + }, + { + title: '闆朵欢鍙�', + align: 'center', + dataIndex: 'partId', + width: 150 + }, + { + title: '鏍囧噯鍔犲伐宸ユ椂(min)', + align: 'center', + dataIndex: 'standardProcessLong', + width: 150 + }, + { + title: '鍔犲伐闆朵欢鏁伴噺', + align: 'center', + dataIndex: 'processCount', + width: 150 + }, + { + title: '鍚堟牸闆朵欢鏁伴噺', + align: 'center', + dataIndex: 'passCount', + width: 150 + }, + { + title: '鍔犲伐鎬绘椂闀�', + align: 'center', + dataIndex: 'totalProcessLong', + width: 150 + }, + { + title: '鎿嶄綔', + dataIndex: 'action', + align: 'center', + fixed: 'right', + width: 150, + scopedSlots: { customRender: 'action' } + } + ], + scrollY: 465, + url: { + list: '/mdc/mdcPartProcessInfo/list', + delete: '/mdc/mdcPartProcessInfo/delete', + deleteBatch: '/mdc/mdcPartProcessInfo/deleteBatch', + exportXlsUrl: '/mdc/mdcPartProcessInfo/exportXls', + importExcelUrl: '/mdc/mdcPartProcessInfo/importExcel' + } + } + }, + watch: { + Type(valmath) { + this.dataList = [] + this.queryParam.typeTree = valmath + // console.log(this.queryParam.typeTree) + }, + nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 + if (JSON.stringify(val) != '{}') { + if (val.equipmentId) { + this.queryParam.parentId = '' + this.queryParam.equipmentId = val.equipmentId + } else { + this.queryParam.parentId = val.key + this.queryParam.equipmentId = '' + } + this.searchQuery() + } + }, + nodePeople(val) { + if (JSON.stringify(val) != '{}') { + if (val.equipmentId) { + this.queryParam.parentId = '' + this.queryParam.equipmentId = val.equipmentId + } else { + this.queryParam.parentId = val.key + this.queryParam.equipmentId = '' + } + this.searchQuery() + } + } + }, + computed: { + importExcelUrl: function() { + return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}` + } + }, + methods: { + dateParamChange(v1, v2) { + this.queryParam.startTime = v2[0] + this.queryParam.endTime = v2[1] + this.dates = [v1[0], v1[1]] + }, + importTemplate(fileName) { + var a = document.createElement('a') + a.href = `/static/${fileName}.xls` + a.download = `${fileName}.xls` + a.style.display = 'none' + document.body.appendChild(a) + a.click() + a.remove() + }, + searchReset() { + this.dates = [moment().subtract(1, 'day'), moment()] + this.queryParam = { + startTime: this.dates[0].format('YYYY-MM-DD'), + endTime: this.dates[1].format('YYYY-MM-DD') + } + this.loadData(1) + }, + /** + * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙� + */ + 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 + } + }, + created() { + this.queryParam.startTime = this.dates[0].format('YYYY-MM-DD') + this.queryParam.endTime = this.dates[1].format('YYYY-MM-DD') + this.loadData() + }, + mounted() { + window.addEventListener('resize', this.handleWindowResize) + this.handleWindowResize() + }, + beforeDestroy() { + window.removeEventListener('resize', this.handleWindowResize) + } + } +</script> +<style scoped> + @import '~@assets/less/common.less'; + + .device_list { + display: flex; + flex-direction: column; + overflow: hidden; + } + + @media screen and (min-width: 1920px) { + .device_list { + height: 811px !important; + } + } + + @media screen and (min-width: 1680px) and (max-width: 1920px) { + .device_list { + height: 811px !important; + } + } + + @media screen and (min-width: 1400px) and (max-width: 1680px) { + .device_list { + height: 663px !important; + } + } + + @media screen and (min-width: 1280px) and (max-width: 1400px) { + .device_list { + height: 564px !important; + } + } + + @media screen and (max-width: 1280px) { + .device_list { + height: 564px !important; + } + } +</style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/PartsMatchingManagement/PartsMatchingModal.vue b/src/views/mdc/base/modules/PartsMatchingManagement/PartsMatchingModal.vue new file mode 100644 index 0000000..704d338 --- /dev/null +++ b/src/views/mdc/base/modules/PartsMatchingManagement/PartsMatchingModal.vue @@ -0,0 +1,64 @@ +<template> + <j-modal + :title="title" + :width="width" + :visible="visible" + switchFullscreen + @ok="handleOk" + :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" + @cancel="handleCancel" + cancelText="鍏抽棴"> + <PartsMatchingForm ref="realForm" @ok="submitCallback" :disabled="disableSubmit" + :disableSelectDevice="disableSelectDevice"/> + </j-modal> +</template> + +<script> + import PartsMatchingForm from './PartsMatchingForm' + + export default { + name: 'PartsMatchingModal', + components: { + PartsMatchingForm + }, + data() { + return { + title: '', + width: 800, + visible: false, + disableSubmit: false, + disableSelectDevice: false + } + }, + methods: { + add() { + this.visible = true + this.disableSelectDevice = false + this.$nextTick(() => { + this.$refs.realForm.add() + }) + }, + edit(record) { + this.visible = true + this.disableSelectDevice = true + this.$nextTick(() => { + this.$refs.realForm.edit(record) + }) + }, + close() { + this.$emit('close') + this.visible = false + }, + handleOk() { + this.$refs.realForm.submitForm() + }, + submitCallback() { + this.$emit('ok') + this.visible = false + }, + handleCancel() { + this.close() + } + } + } +</script> \ No newline at end of file diff --git a/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue b/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue index 6185aa3..a75c8ea 100644 --- a/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue +++ b/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue @@ -1,17 +1,19 @@ <template> - <div id="StatisticsLegend" style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4"> + <div id="StatisticsLegend" + style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4"> <!-- 鏌ヨ鍖哄煙 --> <div style="width: 100%; height: 44px; background-color: #fff" class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter="24"> <a-col :md="5" :sm="5" :xs="5"> <a-form-item label="鍚嶇О"> - <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParam.tierName"></a-input> + <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" readOnly v-model="queryParam.tierName"></a-input> </a-form-item> </a-col> <a-col :md="4" :sm="4" :xs="4"> <a-form-item label="鏃ユ湡"> - <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD' @change="dataChange" :allowClear="false"/> + <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD' + @change="dateChange" :allowClear="false"/> </a-form-item> </a-col> <a-col :md="2" :sm="2" :xs="2"> @@ -23,134 +25,135 @@ </a-row> </a-form> </div> - <!--寮�鏈虹巼--> - <div class="PowerOnRate Line-box"> - <!--<div class="title">--> - <!--<div class="circle"></div>--> - <!--<div class="text">鍒╃敤鐜�</div>--> - <!--</div>--> - <div class="PowerOnRate-box box-bottom"> - <!--<div class="PowerOnRate-left" ref="PowerOnRatePie" id="PowerOnRatePie"></div>--> - <div class="PowerOnRate_text" style="width: 8%;"> - <p>寮�鏈虹巼</p> - <p>{{UtilizationHeight}}%</p> - <p>鍒╃敤鐜�</p> - <p>{{StatCharUsedRate}}%</p> - </div> - <div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div> - <div class="PowerOnRate_text" style="width: 8%"> - <table width="85px;" align="center"> - <tr> - <td align="right"><div style="width: 15px;height: 15px;background-color: #6496e9;position: static;"/></td> - <td align="left">寮�鏈�</td> - </tr> - <tr> - <td align="right"><div style="width: 15px;height: 15px;background-color: #A8A8A8;position: static;"/></td> - <td align="left">鍏虫満</td> - </tr> - <tr> - <td align="right"><div style="width: 15px;height: 15px;background-color: #4ecee1"/></td> - <td align="left">杩愯</td> - </tr> - <tr> - <td align="right"><div style="width: 15px;height: 15px;background-color: #FCCE10"/></td> - <td align="left">寰呮満</td> - </tr> - </table> + + <a-spin :spinning="spinning"> + <!--寮�鏈虹巼--> + <div class="PowerOnRate Line-box"> + <div class="PowerOnRate-box box-bottom"> + <div class="PowerOnRate_text" style="width: 8%;"> + <p>寮�鏈虹巼</p> + <p>{{UtilizationHeight}}%</p> + <p>鍒╃敤鐜�</p> + <p>{{StatCharUsedRate}}%</p> + </div> + <div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div> + <div class="PowerOnRate_text" style="width: 8%"> + <table width="85px;" align="center"> + <tr> + <td align="right"> + <div style="width: 15px;height: 15px;background-color: #6496e9;position: static;"/> + </td> + <td align="left">寮�鏈�</td> + </tr> + <tr> + <td align="right"> + <div style="width: 15px;height: 15px;background-color: #A8A8A8;position: static;"/> + </td> + <td align="left">鍏虫満</td> + </tr> + <tr> + <td align="right"> + <div style="width: 15px;height: 15px;background-color: #4ecee1"/> + </td> + <td align="left">杩愯</td> + </tr> + <tr> + <td align="right"> + <div style="width: 15px;height: 15px;background-color: #FCCE10"/> + </td> + <td align="left">寰呮満</td> + </tr> + </table> + </div> </div> </div> - </div> - <!--鍒╃敤鐜囧拰寮�鍔ㄧ巼--> - <div class="UtilizationStartup"> - <div class="Utilization Line-box"> - <div class="title"> - <!--<div class="circle"></div>--> - <!--<div class="text"></div>--> + <!--鍒╃敤鐜囧拰寮�鍔ㄧ巼--> + <div class="UtilizationStartup"> + <div class="Utilization Line-box"> + <div class="title"> + </div> + <div class="Utilization-box box-bottom"> + <div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div> + </div> </div> - <div class="Utilization-box box-bottom"> - <div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div> + <div class="Startup Line-box"> + <div class="title"> + </div> + <div class="Startup-box box-bottom"> + <div class="Startup-right" ref="StartupLine" id="StartupLine"></div> + </div> </div> </div> - <div class="Startup Line-box"> - <div class="title"> - <!--<div class="circle"></div>--> - <!--<div class="text"></div>--> - </div> - <div class="Startup-box box-bottom"> - <div class="Startup-right" ref="StartupLine" id="StartupLine"></div> - </div> - </div> - </div> + </a-spin> </div> </template> <script> import moment from 'moment' import { putAction, getAction } from '@/api/manage' - import $ from 'jquery' - import * as echarts from 'echarts' + import * as eCharts from 'echarts' + export default { name: 'StatisticalAnalysisMain', props: { equip: {} }, - data(){ - return{ - readOnly:true, - showday:true, - StatCharOpeningRate:0, - StatCharUsedRate:0, - StatCharUsedopeningRate:0, - openingLong:0, - waitingLong:0, - processLong:0, - closedLong:0, - totalLong:0, - UtilizationHeight:0, - StartupHeight:0, - quip:{}, + data() { + return { + StatCharOpeningRate: 0, + StatCharUsedRate: 0, + StatCharUsedOpeningRate: 0, + openingLong: 0, + waitingLong: 0, + processLong: 0, + closedLong: 0, + totalLong: 0, + UtilizationHeight: 0, + StartupHeight: 0, + PowerOnRateLine: null, + UtilizationLine: null, + StartupLine: null, dates: [], queryParam: {}, - queryParams:{ - collectTime:null, + queryParams: { + collectTime: null }, - shiftSubList: [], - shiftList: [], + spinning: false, url: { - getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid', - dayStatisticalRate:'/mdc/efficiencyReport/dayStatisticalRate', - getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction', - }, + dayStatisticalRate: '/mdc/efficiencyReport/dayStatisticalRate', + getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction' + } } }, - created(){ - // let collectTime = moment(moment().add(-1,'d'),'YYYY-MM-DD'); - this.queryParams.collectTime = moment().add(-1,'d').format('YYYY-MM-DD') - this.queryParams.dateTime = moment().add(-1,'d').format('YYYYMMDD') + created() { + this.queryParams.collectTime = moment().add(-1, 'd').format('YYYY-MM-DD') + this.queryParams.dateTime = moment().add(-1, 'd').format('YYYYMMDD') this.initEquipmentNode() - // this.queryStatistical(); - // this.getTime(37800); }, - - methods:{ - disabledDate(current){ - //Can not slect days before today and today - return current && current > moment().subtract('days', 1); + mounted() { + window.addEventListener('resize', this.handleWindowResize) + }, + beforeDestroy() { + window.addEventListener('resize', this.handleWindowResize) + }, + methods: { + disabledDate(current) { + //Can not select days before today and today + return current && current > moment().subtract('days', 1) }, //鎶婄璁$畻鎴愬搴旂殑鏃跺垎绉掔殑鍑芥暟 - getTime(time){ + getTime(time) { //杞崲涓烘椂鍒嗙 let h = Math.round(time / 60 / 60) - h = h <10 ? '0' + h : h + h = h < 10 ? '0' + h : h //浣滀负杩斿洖鍊艰繑鍥� // console.log(h); - return h; + return h }, - moment, - draw(){ + draw() { //寮�濮嬫椂闂碶鍏虫満鏃堕棿\杩愯鏃堕棿\寰呮満鏃堕棿 - let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons'); + this.PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons') let PowerOnRateLine_option = { - tooltip:{ - trigger: 'axis', + tooltip: { + trigger: 'axis' }, grid: { left: '3%', @@ -159,162 +162,100 @@ top: 60, containLabel: true }, - // toolbox: { - // show : true, - // padding: 15, - // feature : { - // saveAsImage : {show: true,title:'淇濆瓨鍥剧墖',name :'璁惧鏁堢巼缁熻鎶ヨ〃'} - // } - // }, - xAxis :{ - type : 'category', - data:['寮�鏈烘椂闀�','鍏虫満鏃堕暱','杩愯鏃堕暱','寰呮満鏃堕暱'], - axisLabel:{ //鍧愭爣杞村瓧浣撻鑹� - textStyle:{ + xAxis: { + type: 'category', + data: ['寮�鏈烘椂闀�', '鍏虫満鏃堕暱', '杩愯鏃堕暱', '寰呮満鏃堕暱'], + axisLabel: { //鍧愭爣杞村瓧浣撻鑹� + textStyle: { color: '#000' } }, - axisLine:{ - lineStyle:{ - color:"#e5e5e5" + axisLine: { + lineStyle: { + color: '#e5e5e5' } }, - axisTick:{ //y杞村埢搴︾嚎 - show:false + axisTick: { //y杞村埢搴︾嚎 + show: false }, - splitLine:{ //缃戞牸 - show: false, + splitLine: { //缃戞牸 + show: false }, - boundaryGap: true, + boundaryGap: true }, - yAxis :{ + yAxis: { name: '鏃堕棿/灏忔椂', - type : 'value', - axisLabel:{ //鍧愭爣杞村瓧浣撻鑹� - textStyle:{ + type: 'value', + axisLabel: { //鍧愭爣杞村瓧浣撻鑹� + textStyle: { color: '#000' } }, - axisLine:{ - show:false, + axisLine: { + show: false }, - axisTick:{ //y杞村埢搴︾嚎 - show:false + axisTick: { //y杞村埢搴︾嚎 + show: false }, - splitLine:{ //缃戞牸 + splitLine: { //缃戞牸 show: true, - color:'#dadde4', - lineStyle:{ - type:"dashed" + color: '#dadde4', + lineStyle: { + type: 'dashed' } } }, - series:[ - // { - // name:'鏇茬嚎', - // type: 'line', - // smooth:true, - // symbol: 'circle', - // symbolSize: 8, - // label:{ - // show:true, - // position:"top", - // textStyle:{ - // color:'#000', - // }, - // formatter:"鏃堕暱锛歿c}H" - // }, - // itemStyle: { - // color: "rgb(87, 120, 225)", - // borderColor: "#fff", - // borderWidth: 2, - // shadowColor: 'rgba(0, 0, 0, .3)', - // }, - // lineStyle: { - // normal: { - // color:"rgb(87, 120, 225)", - // shadowColor: 'rgba(87, 120, 225, .4)', - // shadowBlur: 8, - // shadowOffsetY: 10, - // shadowOffsetX: 0, - // }, - // }, - // areaStyle: { - // normal: { - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - // offset: 0, - // color: 'rgba(87, 120, 225, .6)' - // }, { - // offset: 1, - // color: 'rgba(87, 120, 225, .3)' - // }]), - // } - // }, - // data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong], - // }, + series: [ { - name:'鏌辩姸鍥�', + name: '', type: 'bar', - data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong], - // data:[22,3,4,5], + data: [this.openingLong, this.closedLong, this.processLong, this.waitingLong], barWidth: 25, - label:{ - show:true, - position:"top", - textStyle:{ - color:'#000', + label: { + show: true, + position: 'top', + textStyle: { + color: '#000' }, - // formatter:"鏃堕暱锛歿c}H", - formatter:params=>{ - const value=String(params.value) - return value.length==2&&value[0]==='0'?`鏃堕暱锛�${value.slice(1)}H`:`鏃堕暱锛�${value}H` + formatter: params => { + const value = String(params.value) + return value.length == 2 && value[0] === '0' ? `鏃堕暱锛�${value.slice(1)}H` : `鏃堕暱锛�${value}H` } }, itemStyle: { normal: { color: function(params) { let colorList = [ - ["#6496e9","#6bded3"], - ["#849db8","#b4b8cc"], - ["#4fe1c5","#4ecee1"], - // ["#9978fa","#88a1fa"], - ["#ffbb65","#fdc68b"], - ]; - // return colorList[params.dataIndex]; - let colorItem = colorList[params.dataIndex]; - return new echarts.graphic.LinearGradient(0,0,0,1,[{ - offset:0, - color:colorItem[0] + ['#6496e9', '#6bded3'], + ['#849db8', '#b4b8cc'], + ['#4fe1c5', '#4ecee1'], + ['#ffbb65', '#fdc68b'] + ] + let colorItem = colorList[params.dataIndex] + return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: colorItem[0] }, { - offset:1, - color:colorItem[1] - }],false) + offset: 1, + color: colorItem[1] + }], false) }, - barBorderRadius: [5, 5, 0, 0], + barBorderRadius: [5, 5, 0, 0] } - }, + } }] } - PowerOnRateLine.setOption(PowerOnRateLine_option); + this.PowerOnRateLine.setOption(PowerOnRateLine_option) + //寮�鏈烘椂闂碶鍏虫満鏃堕棿 - let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons'); - let statChartPieOption1 = { - // title: { - // x: 'left', - // subtext: '寮�鏈烘晥鐜�', - // textStyle: { - // color: '#268e80', - // fontSize: 20, - // - // }, - // }, + this.UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons') + let statChartPieOption1 = { tooltip: { trigger: 'item', - // formatter: "{a} <br/>{b} : {c} ({d}%)"锛� - formatter:params=>{ - const value=String(params.value) - return value.length==2&&value[0]==='0'?`${params.seriesName}<br/>${params.name}锛�${value.slice(1)}H锛�${params.percent}%锛塦:`${params.seriesName}<br/>${params.name}锛�${value}H锛�${params.percent}%锛塦 + formatter: params => { + const value = String(params.value) + return value.length == 2 && value[0] === '0' ? `${params.seriesName}<br/>${params.name}锛�${value.slice(1)}H锛�${params.percent}%锛塦 : `${params.seriesName}<br/>${params.name}锛�${value}H锛�${params.percent}%锛塦 } }, legend: { @@ -328,44 +269,36 @@ name: '寮�鏈烘晥鐜�', type: 'pie', radius: '70%', - /*center: ['55%', '55%'],*/ itemStyle: { normal: { - color: function (params) { - let colorList = [ '#6496e9','#849db8']; + color: function(params) { + let colorList = ['#6496e9', '#849db8'] return colorList[params.dataIndex] }, label: { show: true, position: 'top', - // formatter: '{b}\n{c}', - // formatter:params=>String(params.value).length==2?params.name+String(params.value).slice(1):params.name+String(params.value) - formatter:params=>{ - const value=String(params.value) - return value.length==2&&value[0]==='0'?params.name+' '+value.slice(1)+'H':params.name+' '+value+'H' + formatter: params => { + const value = String(params.value) + return value.length == 2 && value[0] === '0' ? params.name + ' ' + value.slice(1) + 'H' : params.name + ' ' + value + 'H' } } } }, - data: [{value: this.openingLong, name: '寮�鏈烘椂闂�'}, - {value: this.closedLong, name: '鍏虫満鏃堕棿'}] + data: [{ value: this.openingLong, name: '寮�鏈烘椂闂�' }, + { value: this.closedLong, name: '鍏虫満鏃堕棿' }] }] - }; - UtilizationLine.setOption(statChartPieOption1); + } + this.UtilizationLine.setOption(statChartPieOption1) //杩愯鏃堕棿\寰呮満鏃堕棿 - let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons'); + this.StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons') let statChartPieOption2 = { - // title: { - // x: 'left', - // subtext: '杩愯鏁堢巼' - // }, tooltip: { trigger: 'item', - // formatter: "{a} <br/>{b} : {c} ({d}%)", - formatter:params=>{ - const value=String(params.value) - return value.length==2&&value[0]==='0'?`${params.seriesName}<br/>${params.name}锛�${value.slice(1)}H锛�${params.percent}%锛塦:`${params.seriesName}<br/>${params.name}锛�${value}H锛�${params.percent}%锛塦 + formatter: params => { + const value = String(params.value) + return value.length == 2 && value[0] === '0' ? `${params.seriesName}<br/>${params.name}锛�${value.slice(1)}H锛�${params.percent}%锛塦 : `${params.seriesName}<br/>${params.name}锛�${value}H锛�${params.percent}%锛塦 } }, legend: { @@ -381,101 +314,91 @@ radius: '70%', itemStyle: { normal: { - color: function (params) { - var colorList = ['#4ecee1', '#FCCE10']; + color: function(params) { + var colorList = ['#4ecee1', '#FCCE10'] return colorList[params.dataIndex] }, label: { show: true, position: 'top', - // formatter: '{b}\n{c}', - formatter:params=>{ - const value=String(params.value) - return value.length==2&&value[0]==='0'?params.name+' '+value.slice(1)+'H':params.name+' '+value+'H' + formatter: params => { + const value = String(params.value) + return value.length == 2 && value[0] === '0' ? params.name + ' ' + value.slice(1) + 'H' : params.name + ' ' + value + 'H' } } } }, - data: [{value: this.processLong, name: '杩愯鏃堕棿'}, - {value: this.waitingLong, name: '寰呮満鏃堕棿'}] + data: [{ value: this.processLong, name: '杩愯鏃堕棿' }, + { value: this.waitingLong, name: '寰呮満鏃堕棿' }] }] - }; - StartupLine.setOption(statChartPieOption2); + } + this.StartupLine.setOption(statChartPieOption2) }, - queryStatistical(){ - getAction(this.url.dayStatisticalRate,this.queryParams).then(res =>{ - if(res.success) { - // console.log(res); - this.StatCharOpeningRate = res.result.openRate; - //鍒╃敤鐜� - this.StatCharUsedRate = res.result.utilizationRate; - //寮�鏈虹巼 - this.UtilizationHeight = res.result.openRate; - this.StatCharUsedopeningRate = res.result.StartupHeight; - this.StartupHeight = res.result.StartupHeight; - this.openingLong = this.getTime(res.result.openLong) - this.waitingLong = this.getTime(res.result.waitLong); - this.processLong = this.getTime(res.result.processLong); - this.closedLong = this.getTime(res.result.closeLong); - this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong); - this.draw(); - } - }) + queryStatistical() { + this.spinning = true + getAction(this.url.dayStatisticalRate, this.queryParams) + .then(res => { + if (res.success) { + this.StatCharOpeningRate = res.result.openRate + //鍒╃敤鐜� + this.StatCharUsedRate = res.result.utilizationRate + //寮�鏈虹巼 + this.UtilizationHeight = res.result.openRate + this.StatCharUsedOpeningRate = res.result.StartupHeight + this.StartupHeight = res.result.StartupHeight + this.openingLong = this.getTime(res.result.openLong) + this.waitingLong = this.getTime(res.result.waitLong) + this.processLong = this.getTime(res.result.processLong) + this.closedLong = this.getTime(res.result.closeLong) + this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong) + this.draw() + } + }) + .finally(() => { + this.spinning = false + }) }, - dataChange(val) { - this.queryParam.collectTime1 = ""; - if(val){ + dateChange(val) { + this.queryParam.collectTime1 = '' + if (val) { this.queryParams.dateTime = val.format('YYYYMMDD') - this.queryParams.collectTime = val.format('YYYY-MM-DD'); + this.queryParams.collectTime = val.format('YYYY-MM-DD') } }, initEquipmentNode() { + this.spinning = true let _this = this getAction(this.url.getBaseTree).then((res) => { if (res.success) { - if(res.result[0]){ + if (res.result[0]) { _this.$set(this.queryParam, 'tierName', res.result[0].title) _this.$set(this.queryParams, 'parentId', res.result[0].key) } - // console.log(res.result[0].entity.tierName) _this.queryStatistical() } else { - // this.$message.warn(res.message) this.$notification.warning({ - message:'娑堟伅', - description:res.message - }); + message: '娑堟伅', + description: res.message + }) } - }).finally(() => { - this.loading = false - this.cardLoading = false }) - // getAction(this.url.getEquipmentByPid, { pid: id }).then((res) => { - // if (res.success) { - // if (res.result) { - // _this.$set(this.queryParam, 'tierName', res.result.tierName) - // _this.$set(this.queryParam, 'equipmentId', res.result.equipmentId) - // // _this.quip = res.result - // _this.searchQuery() - // } else { - // _this.$message.warning('璇烽厤缃澶囷紒') - // } - // } - // }) }, searchReset() { this.queryParam = {} this.queryParams = { - collectTime:moment().add(-1,'d').format('YYYY-MM-DD'), - dateTime:moment().add(-1,'d').format('YYYYMMDD') + collectTime: moment().add(-1, 'd').format('YYYY-MM-DD'), + dateTime: moment().add(-1, 'd').format('YYYYMMDD') } this.initEquipmentNode() - // this.dates = [] - // this.queryStatistical() - // this.onClearSelected() }, - searchQuery(){ - this.queryStatistical(); + searchQuery() { + this.queryStatistical() + }, + + handleWindowResize() { + if (this.PowerOnRateLine) this.PowerOnRateLine.resize() + if (this.UtilizationLine) this.UtilizationLine.resize() + if (this.StartupLine) this.StartupLine.resize() } }, watch: { @@ -485,7 +408,7 @@ this.$set(this.queryParam, 'equipmentId', val.equipmentId) this.queryParams.parentId = '' this.queryParams.equipmentId = val.equipmentId - }else{ + } else { this.queryParams.parentId = val.key this.queryParams.equipmentId = '' this.$set(this.queryParam, 'tierName', val.title) @@ -496,86 +419,99 @@ } </script> -<style scoped> - .charContent{ +<style scoped lang="less"> + @media screen and (min-width: 1920px) { + #StatisticsLegend { + height: 748px !important; + overflow: scroll; + } + } + + @media screen and (min-width: 1680px) and (max-width: 1920px) { + #StatisticsLegend { + height: 748px !important; + overflow: scroll; + } + } + + @media screen and (min-width: 1400px) and (max-width: 1680px) { + #StatisticsLegend { + height: 600px !important; + overflow: scroll; + } + } + + @media screen and (min-width: 1280px) and (max-width: 1400px) { + #StatisticsLegend { + height: 501px !important; + overflow: scroll; + } + } + + @media screen and (max-width: 1280px) { + #StatisticsLegend { + height: 501px !important; + overflow: scroll; + } + } + + /deep/ .ant-spin-nested-loading { + flex: 1; display: flex; - } - @media screen and (min-width: 1920px){ - #StatisticsLegend{ - height: 748px!important; - overflow: scroll; + flex-direction: column; + + .ant-spin-container { + flex: 1; + display: flex; + flex-direction: column; + } + + .ant-spin-blur { + opacity: 1; } } - @media screen and (min-width: 1680px) and (max-width: 1920px){ - #StatisticsLegend{ - height: 748px!important; - overflow: scroll; - } - } - @media screen and (min-width: 1400px) and (max-width: 1680px){ - #StatisticsLegend{ - height: 600px!important; - overflow: scroll; - } - } - @media screen and (min-width: 1280px) and (max-width: 1400px){ - #StatisticsLegend{ - height: 501px!important; - overflow: scroll; - } - } - @media screen and (max-width: 1280px){ - #StatisticsLegend{ - height: 501px!important; - overflow: scroll; - } - } - #StatisticsLegend .PowerOnRate{ + + #StatisticsLegend .PowerOnRate { flex: 1; margin-bottom: 15px; background-color: #fff; } - #StatisticsLegend .UtilizationStartup{ + + #StatisticsLegend .UtilizationStartup { flex: 1; display: flex; } - #StatisticsLegend .UtilizationStartup>div{ + + #StatisticsLegend .UtilizationStartup > div { flex: 1; background-color: #fff; } - #StatisticsLegend .UtilizationStartup .Utilization{ + + #StatisticsLegend .UtilizationStartup .Utilization { margin-right: 15px; } - .title{ + + .title { display: flex; align-items: center; padding-left: 15px; padding-top: 5px; } - .title .circle{ - width: 15px; - height: 15px; - background-color: #7282ec; - border-radius: 100%; - margin-right: 10px; - } - .title .text{ - font-size: 2vh; - } - .Line-box{ + + .Line-box { display: flex; flex-direction: column; } - .Line-box .box-bottom{ + + .Line-box .box-bottom { flex: 1; } - .PowerOnRate-box{ + + .PowerOnRate-box { display: flex; } - .PowerOnRate-box .PowerOnRate-left{ - width: 25%; - } - .PowerOnRate-box .PowerOnRate_text{ + + .PowerOnRate-box .PowerOnRate_text { width: 10%; display: flex; flex-direction: column; @@ -583,89 +519,24 @@ justify-content: center; font-weight: 800; } - .PowerOnRate-box .PowerOnRate-right{ - flex: 1; - } - .Utilization-box{ - display: flex; - } - .Utilization-box .Utilization-left{ - width: 25%; - } - .Utilization-box .Utilization-right{ - flex: 1; - } - .Startup-box{ - display: flex; - } - .Startup-box .Startup-left{ - width: 25%; - } - .Startup-box .Startup-right{ - flex: 1; - } - .left{ - display: flex; - align-items: center; - } - .left .left-box{ - width: 65%; - height: 60%; - margin: 0 auto; - overflow: hidden; - border-radius: 8px; - /*border: 6px solid red;*/ - /*!*background-color: yellow;*!*/ - /*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/ + .PowerOnRate-box .PowerOnRate-right { + flex: 1; } - .left-box-con{ - width: 100%; - height: 100%; - position: relative; - text-align: center; - border: 6px solid red; - /*background-color: yellow;*/ - border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1; - } - .left .left-box .Rate-box-kong{ - width: 100%; - background: -moz-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%); - background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%,#b5dec2), color-stop(100%,#f4f5ba)); - background: -webkit-linear-gradient(bottom, #b5dec2 0%,#f4f5ba 100%); - background: -o-linear-gradient(bottom, #b5dec2 0%,#f4f5ba 100%); - background: -ms-linear-gradient(bottom, #b5dec2 0%,#f4f5ba 100%); - background: linear-gradient(to top, #b5dec2 0%,#f4f5ba 100%); - } - .left .left-box .Rate-box{ - position: absolute; - text-align: center; - bottom: 0; - width: 100%; - height: 89%; - /*background-color: green;*/ - background: -moz-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%); - background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%,#06a8f8), color-stop(100%,#2bf3c7)); - background: -webkit-linear-gradient(bottom, #06a8f8 0%,#2bf3c7 100%); - background: -o-linear-gradient(bottom, #06a8f8 0%,#2bf3c7 100%); - background: -ms-linear-gradient(bottom, #06a8f8 0%,#2bf3c7 100%); - background: linear-gradient(to top, #06a8f8 0%,#2bf3c7 100%); - } - .left .left-box .Rate-box p{ - position: absolute; - bottom: 0; - color: #fff; - width: 100%; - text-align: center; - } - .con-left{ + + .Utilization-box { display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: space-around; - align-items: center; } - .con-left>span{ + + .Utilization-box .Utilization-right { + flex: 1; + } + + .Startup-box { + display: flex; + } + + .Startup-box .Startup-right { flex: 1; } </style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue index 7cb1658..2af7c5d 100644 --- a/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue +++ b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue @@ -1,13 +1,13 @@ <template> <div id="StatisticsLegend" - style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4"> + style="overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4"> <!-- 鏌ヨ鍖哄煙 --> - <div style="width: 100%; height: 44px; background-color: #fff" class="table-page-search-wrapper"> + <div style=" background-color: #fff" class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter="24"> <a-col :md="5" :sm="5" :xs="5"> <a-form-item label="鍚嶇О"> - <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParam.tierName"></a-input> + <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" readOnly v-model="queryParam.tierName"></a-input> </a-form-item> </a-col> <a-col :md="4" :sm="4" :xs="4"> @@ -25,86 +25,86 @@ </a-row> </a-form> </div> - <!--寮�鏈虹巼--> - <div class="PowerOnRate Line-box"> - <div class="title"> - <div class="circle"></div> - <div class="text">鍒╃敤鐜�</div> - </div> - <div class="PowerOnRate-box box-bottom"> - <div class="PowerOnRate-left" ref="PowerOnRatePie" id="PowerOnRatePie"></div> - <div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div> - </div> - </div> - <!--鍒╃敤鐜囧拰寮�鍔ㄧ巼--> - <div class="UtilizationStartup"> - <div class="Utilization Line-box"> - <div class="title"> - <div class="circle"></div> - <div class="text">寮�鏈虹巼</div> - </div> - <div class="Utilization-box box-bottom"> - <div class="Utilization-left left"> - <div class="left-box"> - <div class="left-box-con"> - <div class="Rate-box-kong" :style="{height:100-UtilizationHeight+'%'}"></div> - <div class="Rate-box" :style="{height:UtilizationHeight+'%'}"> - <p class="Rate-box-text"> - <span ref="UtilizationRate">{{UtilizationHeight}}%</span> - <br> - 寮�鏈虹巼 - </p> - </div> - </div> - </div> - </div> - <div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div> - </div> - </div> - <div class="Startup Line-box"> - <div class="title"> - <div class="circle"></div> - <div class="text">寮�鍔ㄧ巼</div> - </div> - <div class="Startup-box box-bottom"> - <div class="Startup-left left" ref="StartupRate"> - <div class="left-box"> - <div class="left-box-con"> - <div class="Rate-box-kong" :style="{height:100-StartupHeight+'%'}"></div> - <div class="Rate-box" :style="{height:StartupHeight+'%'}"> - <p class="Rate-box-text"> - <span>{{StatCharUsedopeningRate}}%</span> - <br> - 寮�鍔ㄧ巼 - </p> - </div> - </div> - </div> - </div> - <div class="Startup-right" ref="StartupLine" id="StartupLine"></div> + <a-spin :spinning="spinning"> + <!--鍒╃敤鐜�--> + <div class="PowerOnRate Line-box"> + <div class="title"> + <div class="circle"></div> + <div class="text">鍒╃敤鐜�</div> + </div> + <div class="PowerOnRate-box box-bottom"> + <div class="PowerOnRate-left" ref="PowerOnRatePie" id="PowerOnRatePie"></div> + <div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div> </div> </div> - </div> + <!--寮�鏈虹巼鍜屽紑鍔ㄧ巼--> + <div class="UtilizationStartup"> + <div class="Utilization Line-box"> + <div class="title"> + <div class="circle"></div> + <div class="text">寮�鏈虹巼</div> + </div> + <div class="Utilization-box box-bottom"> + <div class="Utilization-left left"> + <div class="left-box"> + <div class="left-box-con"> + <div class="Rate-box-kong" :style="{height:100-UtilizationHeight+'%'}"></div> + <div class="Rate-box" :style="{height:UtilizationHeight+'%'}"> + <p class="Rate-box-text"> + <span ref="UtilizationRate">{{UtilizationHeight}}%</span> + <br> + 寮�鏈虹巼 + </p> + </div> + </div> + </div> + </div> + <div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div> + </div> + </div> + <div class="Startup Line-box"> + <div class="title"> + <div class="circle"></div> + <div class="text">寮�鍔ㄧ巼</div> + </div> + <div class="Startup-box box-bottom"> + <div class="Startup-left left" ref="StartupRate"> + <div class="left-box"> + <div class="left-box-con"> + <div class="Rate-box-kong" :style="{height:100-StartupHeight+'%'}"></div> + <div class="Rate-box" :style="{height:StartupHeight+'%'}"> + <p class="Rate-box-text"> + <span>{{StatCharUsedOpeningRate}}%</span> + <br> + 寮�鍔ㄧ巼 + </p> + </div> + </div> + + </div> + </div> + <div class="Startup-right" ref="StartupLine" id="StartupLine"></div> + </div> + </div> + </div> + </a-spin> </div> </template> <script> import moment from 'moment' - import { putAction, getAction } from '@/api/manage' - import $ from 'jquery' - import * as echarts from 'echarts' + import { getAction } from '@/api/manage' + import * as eCharts from 'echarts' export default { name: 'StatisticsLegend', props: { equip: {} }, data() { return { - readOnly: true, - showday: true, StatCharOpeningRate: 0, StatCharUsedRate: 0, - StatCharUsedopeningRate: 0, + StatCharUsedOpeningRate: 0, openingLong: 0, waitingLong: 0, processLong: 0, @@ -112,16 +112,17 @@ totalLong: 0, UtilizationHeight: 0, StartupHeight: 0, - quip: {}, dates: [], queryParam: {}, queryParams: { collectTime: undefined }, - shiftSubList: [], - shiftList: [], + PowerOnRatePie: null, + PowerOnRateLine: null, + UtilizationLine: null, + StartupLine: null, + spinning: false, url: { - getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid', dayStatisticalRate: '/mdc/efficiencyReport/dayStatisticalRate', getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction' } @@ -133,7 +134,12 @@ this.queryParams.dateTime = moment().add(-1, 'd').format('YYYYMMDD') this.initEquipmentNode() }, - + mounted() { + window.addEventListener('resize', this.handleWindowResize) + }, + beforeDestroy() { + window.addEventListener('resize', this.handleWindowResize) + }, methods: { disabledDate(current) { //Can not slect days before today and today @@ -148,11 +154,10 @@ // console.log(h); return h }, - moment, draw() { //鍒╃敤鐜� //楗煎浘 - let PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons') + this.PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons') let PowerOnRatePie_option = { // color: ["#3859fa", '#ccc'], title: { @@ -187,7 +192,7 @@ data: [{ value: 100, itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + color: new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#88a8fd' }, @@ -207,8 +212,8 @@ } ] } - PowerOnRatePie.setOption(PowerOnRatePie_option) - let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons') + this.PowerOnRatePie.setOption(PowerOnRatePie_option) + this.PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons') let PowerOnRateLine_option = { tooltip: { trigger: 'axis' @@ -219,38 +224,6 @@ bottom: '3%', top: 60, containLabel: true - }, - legend: { - // selected:{ - // "鏇茬嚎":false, - // }, - top: '0', - right: '10', - //璁剧疆鍗曢�夊閫夋ā寮� - // selectedMode:'single', - icon: 'pin', - data: [ - // { - // name:'鏇茬嚎', - // textStyle:{ - // padding:4, - // color:'#e957ff', - // // borderWidth:1, - // fontSize:16, - // // borderColor:'#50E6D7' - // } - // }, - { - name: '鏌辩姸鍥�', - textStyle: { - padding: 4, - fontSize: 16, - color: '#9996f8' - // borderWidth:1, - // borderColor:'#50E6D7' - } - } - ] }, xAxis: { type: 'category', @@ -296,53 +269,10 @@ } }, series: [ - // { - // name:'鏇茬嚎', - // type: 'line', - // smooth:true, - // symbol: 'circle', - // symbolSize: 8, - // label:{ - // show:true, - // position:"top", - // textStyle:{ - // color:'#000', - // }, - // formatter:"鏃堕暱锛歿c}H" - // }, - // itemStyle: { - // color: "rgb(87, 120, 225)", - // borderColor: "#fff", - // borderWidth: 2, - // shadowColor: 'rgba(0, 0, 0, .3)', - // }, - // lineStyle: { - // normal: { - // color:"rgb(87, 120, 225)", - // shadowColor: 'rgba(87, 120, 225, .4)', - // shadowBlur: 8, - // shadowOffsetY: 10, - // shadowOffsetX: 0, - // }, - // }, - // areaStyle: { - // normal: { - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - // offset: 0, - // color: 'rgba(87, 120, 225, .6)' - // }, { - // offset: 1, - // color: 'rgba(87, 120, 225, .3)' - // }]), - // } - // }, - // data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong], - // }, { - name: '鏌辩姸鍥�', + name: '', type: 'bar', data: [this.openingLong, this.closedLong, this.processLong, this.waitingLong], - // data:[22,3,5,6], barWidth: 25, label: { show: true, @@ -350,7 +280,6 @@ textStyle: { color: '#000' }, - // formatter:"鏃堕暱锛歿c}H", formatter: params => { const value = String(params.value) return value.length == 2 && value[0] === '0' ? `鏃堕暱锛�${value.slice(1)}H` : `鏃堕暱锛�${value}H` @@ -363,12 +292,10 @@ ['#6496e9', '#6bded3'], ['#849db8', '#b4b8cc'], ['#4fe1c5', '#4ecee1'], - // ["#9978fa","#88a1fa"], ['#ffbb65', '#fdc68b'] ] - // return colorList[params.dataIndex]; let colorItem = colorList[params.dataIndex] - return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorItem[0] }, @@ -382,9 +309,9 @@ } }] } - PowerOnRateLine.setOption(PowerOnRateLine_option) + this.PowerOnRateLine.setOption(PowerOnRateLine_option) //寮�鏈虹巼 - let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons') + this.UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons') let UtilizationLine_option = { tooltip: { trigger: 'axis', @@ -402,15 +329,12 @@ type: 'category', data: ['寮�鏈烘椂闀�', '鎬绘椂闀�'], axisLine: { - lineStyle: { - // color: 'rgba(70, 196, 255, .8)' - } + lineStyle: {} }, axisTick: { show: false }, axisLabel: { - // color: 'rgba(111, 132, 189, 1)', textStyle: { fontSize: 14 } @@ -419,12 +343,9 @@ yAxis: [{ type: 'value', name: '鏃堕棿/灏忔椂', - nameTextStyle: { - // color: 'rgba(111, 132, 189, 1)' - }, + nameTextStyle: {}, axisLabel: { formatter: '{value}' - // color: 'rgba(111, 132, 189, 1)', }, axisTick: { show: false @@ -434,16 +355,13 @@ show: false }, splitLine: { - lineStyle: { - // color: 'rgba(70, 196, 255, .3)' - } + lineStyle: {} } }], series: [ { type: 'bar', data: [this.openingLong, this.totalLong], - // data:[22,22], barWidth: 25, label: { show: true, @@ -451,7 +369,6 @@ textStyle: { color: '#000' }, - // formatter:"鏃堕暱锛歿c}H", formatter: params => { const value = String(params.value) return value.length == 2 && value[0] === '0' ? `鏃堕暱锛�${value.slice(1)}H` : `鏃堕暱锛�${value}H` @@ -464,9 +381,8 @@ ['#6496e9', '#6bded3'], ['#9978fa', '#88a1fa'] ] - // return colorList[params.dataIndex]; let colorItem = colorList[params.dataIndex] - return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorItem[0] }, @@ -480,9 +396,9 @@ } }] } - UtilizationLine.setOption(UtilizationLine_option) + this.UtilizationLine.setOption(UtilizationLine_option) //寮�鍔ㄧ巼 - let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons') + this.StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons') let StartupLine_option = { tooltip: { trigger: 'axis', @@ -500,15 +416,12 @@ type: 'category', data: ['杩愯鏃堕暱', '寮�鏈烘椂闀�'], axisLine: { - lineStyle: { - // color: 'rgba(70, 196, 255, .8)' - } + lineStyle: {} }, axisTick: { show: false }, axisLabel: { - // color: 'rgba(111, 132, 189, 1)', textStyle: { fontSize: 14 } @@ -517,12 +430,9 @@ yAxis: [{ type: 'value', name: '鏃堕棿/灏忔椂', - nameTextStyle: { - // color: 'rgba(111, 132, 189, 1)' - }, + nameTextStyle: {}, axisLabel: { formatter: '{value}' - // color: 'rgba(111, 132, 189, 1)', }, axisTick: { show: false @@ -532,15 +442,12 @@ show: false }, splitLine: { - lineStyle: { - // color: 'rgba(70, 196, 255, .3)' - } + lineStyle: {} } }], series: [{ type: 'bar', data: [this.processLong, this.openingLong], - // data:[22,22], barWidth: 25, label: { show: true, @@ -548,7 +455,6 @@ textStyle: { color: '#000' }, - // formatter:"鏃堕暱锛歿c}H", formatter: params => { const value = String(params.value) return value.length == 2 && value[0] === '0' ? `鏃堕暱锛�${value.slice(1)}H` : `鏃堕暱锛�${value}H` @@ -561,9 +467,8 @@ ['#4fe1c5', '#4ecee1'], ['#6496e9', '#6bded3'] ] - // return colorList[params.dataIndex]; let colorItem = colorList[params.dataIndex] - return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorItem[0] }, @@ -577,24 +482,29 @@ } }] } - StartupLine.setOption(StartupLine_option) + this.StartupLine.setOption(StartupLine_option) }, queryStatistical() { - getAction(this.url.dayStatisticalRate, this.queryParams).then(res => { - if (res.success) { - this.StatCharOpeningRate = res.result.openRate - this.StatCharUsedRate = res.result.utilizationRate - this.UtilizationHeight = res.result.openRate - this.StatCharUsedopeningRate = res.result.usedOpenRate - this.StartupHeight = res.result.usedOpenRate - this.openingLong = this.getTime(res.result.openLong) - this.waitingLong = this.getTime(res.result.waitLong) - this.processLong = this.getTime(res.result.processLong) - this.closedLong = this.getTime(res.result.closeLong) - this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong) - this.draw() - } - }) + this.spinning = true + getAction(this.url.dayStatisticalRate, this.queryParams) + .then(res => { + if (res.success) { + this.StatCharOpeningRate = res.result.openRate + this.StatCharUsedRate = res.result.utilizationRate + this.UtilizationHeight = res.result.openRate + this.StatCharUsedOpeningRate = res.result.usedOpenRate + this.StartupHeight = res.result.usedOpenRate + this.openingLong = this.getTime(res.result.openLong) + this.waitingLong = this.getTime(res.result.waitLong) + this.processLong = this.getTime(res.result.processLong) + this.closedLong = this.getTime(res.result.closeLong) + this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong) + this.draw() + } + }) + .finally(() => { + this.spinning = false + }) }, dataChange(val) { if (val) { @@ -604,6 +514,7 @@ }, initEquipmentNode() { let _this = this + this.spinning = true getAction(this.url.getBaseTree).then((res) => { if (res.success) { const { isEquipment, productionId, tierName } = this.$route.params @@ -630,9 +541,6 @@ description: res.message }) } - }).finally(() => { - this.loading = false - this.cardLoading = false }) }, searchReset() { @@ -645,11 +553,17 @@ }, searchQuery() { this.queryStatistical() + }, + + handleWindowResize() { + if (this.PowerOnRatePie) this.PowerOnRatePie.resize() + if (this.PowerOnRateLine) this.PowerOnRateLine.resize() + if (this.UtilizationLine) this.UtilizationLine.resize() + if (this.StartupLine) this.StartupLine.resize() } }, watch: { equip(val) { - // console.log(val); if (val && val.equipmentId) { this.$set(this.queryParam, 'tierName', val.title) this.$set(this.queryParam, 'equipmentId', val.equipmentId) @@ -662,17 +576,12 @@ } this.searchQuery() } - // this.searchQuery(); } } </script> -<style scoped> - .charContent { - display: flex; - } - +<style scoped lang="less"> @media screen and (min-width: 1920px) { #StatisticsLegend { height: 748px !important; @@ -708,14 +617,30 @@ } } - #StatisticsLegend .PowerOnRate { + /deep/ .ant-spin-nested-loading { flex: 1; + display: flex; + flex-direction: column; + + .ant-spin-container { + flex: 1; + display: flex; + flex-direction: column; + } + + .ant-spin-blur { + opacity: 1; + } + } + + #StatisticsLegend .PowerOnRate { + height: 50%; margin-bottom: 15px; background-color: #fff; } #StatisticsLegend .UtilizationStartup { - flex: 1; + height: 50%; display: flex; } @@ -765,7 +690,7 @@ } .PowerOnRate-box .PowerOnRate-right { - flex: 1; + width: 75%; } .Utilization-box { @@ -803,10 +728,6 @@ margin: 0 auto; overflow: hidden; border-radius: 8px; - - /*border: 6px solid red;*/ - /*!*background-color: yellow;*!*/ - /*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/ } .left-box-con { @@ -815,7 +736,6 @@ position: relative; text-align: center; border: 6px solid red; - /*background-color: yellow;*/ border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1; } @@ -835,7 +755,6 @@ bottom: 0; width: 100%; height: 89%; - /*background-color: green;*/ background: -moz-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%); background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%, #06a8f8), color-stop(100%, #2bf3c7)); background: -webkit-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%); @@ -850,17 +769,5 @@ color: #fff; width: 100%; text-align: center; - } - - .con-left { - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: space-around; - align-items: center; - } - - .con-left > span { - flex: 1; } </style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue index 8ee1144..da048a5 100644 --- a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue +++ b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue @@ -38,7 +38,7 @@ </a-table> </div> - <a-spin :spinning="echartLoading"> + <a-spin :spinning="eChartLoading"> <div style="width: 100%;height: 100%;display: flex;"> <div id="MdcEquipmentWarningPie" style="height: 100%;width: 35%;"></div> <div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div> @@ -51,13 +51,8 @@ <script> import moment from 'moment' - import { putAction, getAction } from '@/api/manage' - import $ from 'jquery' - import '@/components/table2excel/table2excel' - import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' - import { - JeecgListMixin - } from '@/mixins/JeecgListMixin' + import { getAction } from '@/api/manage' + import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api' const columns = [ { title: '鎶ヨ鍙�', dataIndex: 'alarmCode', key: 'alarmCode', align: 'center' }, @@ -98,51 +93,31 @@ ] export default { - // mixins: [JeecgListMixin], name: 'alarmAnalysisMain', components: {}, data() { return { - dataSource: [], /* table鍔犺浇鐘舵�� */ outerDataLoading: false, innerDataLoading: false, - echartLoading: false, + eChartLoading: false, typeTree: '', - typeParent: 1, - typeEquipment: 1, - TreeIDOne: 1, - TreeIDTwo: 2, - deviceTypeDict: '', dates: [], - identifying: [], queryParam: {}, - queryParams: {}, queryParamEquip: {}, queryParamPeople: {}, - efficiencyOptions: [ - { label: '鍒╃敤鐜�', value: 'lyl' }, - { label: '寮�鏈虹巼', value: 'kjl' }, - { label: '寮�鏈烘椂闂�', value: 'kjsj' }, - { label: '鍔犲伐鏃堕棿', value: 'jgsj' }, - { label: '寰呮満鏃堕棿', value: 'djsj' }, - { label: '鍏虫満鏃堕棿', value: 'gjsj' } - ], - checkedList: ['lyl'], dataList: [], url: { efficiencyList: '/mdc/alarmAnalyze/alarmList', - listByType: '/mdc/MdcUtilizationRate/getByType', alarmTrend: '/mdc/alarmAnalyze/alarmTrend', equipmentAlarmList: '/mdc/alarmAnalyze/equipmentAlarmList' }, - tableHeads: [], pieDate: [0], XData: [0], YData: [0], columns, innerColumns, - hasRequsetAlarmCodeList: [] + hasRequestAlarmCodeList: [] } }, props: { nodeTree: '', Type: '', nodePeople: '' }, @@ -155,7 +130,6 @@ this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD') this.queryParam.typeTree = '1' this.loadData1() - }, mounted() { this.drawWrin() @@ -196,14 +170,6 @@ } }, filters: { - numFilter(value) { - if (value) { - return parseFloat((value * 100).toFixed(2)) - } else { - return '0' - } - }, - /** * 鏍煎紡鍖栨椂闂� * @param seconds 绉掓暟 @@ -243,9 +209,8 @@ }, TableDraw(key, val) { let that = this - that.echartLoading = true + that.eChartLoading = true that.queryParam.alarmCode = val.alarmCode - console.log(this.queryParam) getAction(that.url.alarmTrend, that.queryParam) .then(res => { if (res.success) { @@ -258,21 +223,12 @@ that.XData = res.result.dateCountList.map(item => item.key) that.YData = res.result.dateCountList.map(item => item.count) - // this.tableHeads = res.result.dates - // this.dataList = res.result - // this.draw() - // this.checkSameData(this.dataList) - // this.checkSameData1(this.dataList) - // this.checkSameData2(this.dataList) - // this.combineCell(); - // this.initDeviceType(this.dataList) that.drawWrin() } }) .finally(() => { - that.echartLoading = false + that.eChartLoading = false }) - console.log(this.YData) }, disabledDate(current) { @@ -322,20 +278,11 @@ }, loadData1() { this.outerDataLoading = true - this.tableHeads = [] this.dataList = [] getAction(this.url.efficiencyList, this.queryParam).then(res => { if (res.success) { - // this.tableHeads = res.result.dates this.dataList = res.result - this.hasRequsetAlarmCodeList = [] - // this.draw() - // this.checkSameData(this.dataList) - // this.checkSameData1(this.dataList) - // this.checkSameData2(this.dataList) - // this.combineCell(); - // this.initDeviceType(this.dataList) - + this.hasRequestAlarmCodeList = [] } }).finally(() => { this.outerDataLoading = false @@ -354,27 +301,21 @@ }, tooltip: { trigger: 'item', - formatter: '<br/>{b} : {c} ({d}%)' + formatter: '{b} : {c} ({d}%)' }, calculable: true, series: [{ type: 'pie', radius: '60%', + label: { + show: true, + formatter: '{b}\n{c}', + color: 'inherit' + }, itemStyle: { - normal: { - color: function(params) { - var colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3'] - return colorList[params.dataIndex] - }, - label: { - show: true, - // position: 'top', - formatter: '{b}\n{c}', - color: function(params) { - var colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3'] - return colorList[params.dataIndex] - } - } + color: function(params) { + const colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3'] + return colorList[params.dataIndex % colorList.length] } }, data: this.pieDate @@ -483,7 +424,7 @@ let _this = this // 褰撳睍寮�鏃惰嫢璇ヨ鏈灞曞紑杩囨墠浼氳姹傚悗鍙版暟鎹紝灞曞紑杩囩殑鏁版嵁浼氳缂撳瓨鏃犻渶閲嶅璇锋眰 this.queryParam.alarmCode = record.alarmCode - if (expanded && !this.hasRequsetAlarmCodeList.includes(record.alarmCode)) { + if (expanded && !this.hasRequestAlarmCodeList.includes(record.alarmCode)) { this.innerDataLoading = true getAction(this.url.equipmentAlarmList, this.queryParam).then(res => { if (res.success) { @@ -492,7 +433,7 @@ item.innerDataList = res.result } }) - _this.hasRequsetAlarmCodeList.push(record.alarmCode) + _this.hasRequestAlarmCodeList.push(record.alarmCode) } }) .finally(() => { diff --git a/src/views/mdc/base/modules/alarmManager/alarmManagerEdit.vue b/src/views/mdc/base/modules/alarmManager/alarmManagerEdit.vue index 4955e2e..1726314 100644 --- a/src/views/mdc/base/modules/alarmManager/alarmManagerEdit.vue +++ b/src/views/mdc/base/modules/alarmManager/alarmManagerEdit.vue @@ -85,7 +85,7 @@ span: 24 }, sm: { - span: 6 + span: 4 } }, wrapperCol: { diff --git a/src/views/mdc/base/modules/alarmManager/alarmManagerForm.vue b/src/views/mdc/base/modules/alarmManager/alarmManagerForm.vue index 23245fd..64bae97 100644 --- a/src/views/mdc/base/modules/alarmManager/alarmManagerForm.vue +++ b/src/views/mdc/base/modules/alarmManager/alarmManagerForm.vue @@ -106,7 +106,7 @@ span: 24 }, sm: { - span: 6 + span: 4 } }, wrapperCol: { diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue index 2cedc86..b8e1c50 100644 --- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue +++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue @@ -1,51 +1,52 @@ <template> - <div class="comparative_Bar" style="width: 100%;height: 900px;display: flex;flex-direction: column;overflow: scroll"> - <div id="compAnalBar1" style="flex: 1;"></div> - <div id="compAnalBar2" style="flex: 1;"></div> - </div> + <div style="height: 100%;overflow: auto"> + <div id="compAnalBar1" style="height: 400px"></div> + <div id="compAnalBar2" style="height: 400px"></div> + </div> </template> <script> import * as echarts from 'echarts' + export default { name: 'comparativeAnalysisBar', - props:{ - dataList:'' + props: { + dataList: '' }, - data(){ - return{ - OpenCloseList:[], - openRate:[], - utilizationRate:[], - openLong:[], - closeLong:[], - equipmentList:[] + data() { + return { + OpenCloseList: [], + openRate: [], + utilizationRate: [], + openLong: [], + closeLong: [], + equipmentList: [] } }, - created(){ + created() { }, - watch:{ - dataList(val){ + watch: { + dataList(val) { this.OpenCloseList = val this.drawTu() - }, + } }, mounted() { this.drawTu() }, - methods:{ - drawTu(){ - let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons'); - let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons'); - let compAnalBarOption1 = { + methods: { + drawTu() { + let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons') + let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons') + let compAnalBarOption1 = { tooltip: { trigger: 'axis', axisPointer: { - type: "shadow", + type: 'shadow', textStyle: { - color: "#fff" + color: '#fff' } } @@ -60,48 +61,42 @@ data: ['寮�鏈虹巼', '鍒╃敤鐜�'] }, toolbox: { - show : true, - feature : { - mark : {show: true}, - magicType : {show: true, type: ['line', 'bar']}, - restore : {show: true}, - saveAsImage : {show: true,name:'璁惧杩愯鏁堢巼瀵规瘮鍒嗘瀽鍥�'} + show: true, + feature: { + mark: { show: true }, + magicType: { show: true, type: ['line', 'bar'] }, + restore: { show: true }, + saveAsImage: { show: true, name: '璁惧杩愯鏁堢巼瀵规瘮鍒嗘瀽鍥�' } } }, calculable: true, grid: { borderWidth: 0, top: 110, - bottom: 95, + bottom: 110, textStyle: { - color: "#fff" + color: '#fff' } }, xAxis: [ { type: 'category', splitLine: { - "show": false + 'show': false }, axisTick: { - "show": false + 'show': false }, splitArea: { show: false }, - boundaryGap : true, - axisLabel : { - interval : 0, - rotate : 0, + boundaryGap: true, + axisLabel: { + interval: 0, + rotate: 45, show: true, - wigth:20, - splitNumber: 8, - textStyle: { - fontFamily: "寰蒋闆呴粦", - fontSize: 12 - } }, - data : [0] + data: [0] } ], yAxis: [ @@ -137,14 +132,14 @@ handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z', handleSize: '110%', handleStyle: { - color: "#d3dee5" + color: '#d3dee5' }, textStyle: { - color: "#fff" + color: '#fff' }, - borderColor: "#90979c" + borderColor: '#90979c' }, { - type: "inside", + type: 'inside', show: true, height: 15, start: 1, @@ -160,274 +155,80 @@ normal: { color: function(params) { let colorList = [ - ["#6496e9","#6bded3"], - // ["#849db8","#b4b8cc"], - // ["#4fe1c5","#4ecee1"], - // // ["#9978fa","#88a1fa"], - // ["#ffbb65","#fdc68b"], - ]; - // return colorList[params.dataIndex]; - let colorItem = colorList[params.dataIndex]; - return new echarts.graphic.LinearGradient(0,0,0,1,[{ - offset:0, - color:'#6496e9' + ['#6496e9', '#6bded3'] + ] + let colorItem = colorList[params.dataIndex] + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: '#6496e9' }, { - offset:1, - color:"#6bded3" - }],false) + offset: 1, + color: '#6bded3' + }], false) }, - barBorderRadius: [5, 5, 0, 0], + barBorderRadius: [5, 5, 0, 0] } }, data: [0], - // barCategoryGap: '20%', - // barGap : '-10%', - markPoint : { - data : [ - {type : 'max', name: '鏈�澶у��',symbolSize:70}, - {type : 'min', name: '鏈�灏忓��',symbolSize:70} + markPoint: { + data: [ + { type: 'max', name: '鏈�澶у��', symbolSize: 70 }, + { type: 'min', name: '鏈�灏忓��', symbolSize: 70 } ] }, - markLine : { - data : [ - {type : 'average', name: '骞冲潎鍊�'} + markLine: { + data: [ + { type: 'average', name: '骞冲潎鍊�' } ] } }, { name: '鍒╃敤鐜�', type: 'bar', - //barWidth: 30, barWidth: 25, - // barCategoryGap: '20%', - // barGap : '-10%', itemStyle: { normal: { color: function(params) { let colorList = [ - // ["#6496e9","#6bded3"], - // ["#849db8","#b4b8cc"], - ["#4fe1c5","#4ecee1"], - // ["#9978fa","#88a1fa"], - // ["#ffbb65","#fdc68b"], - ]; + ['#4fe1c5', '#4ecee1'] + ] // return colorList[params.dataIndex]; - let colorItem = colorList[params.dataIndex]; - return new echarts.graphic.LinearGradient(0,0,0,1,[{ - offset:0, - color:"#4fe1c5" + let colorItem = colorList[params.dataIndex] + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: '#4fe1c5' }, { - offset:1, - color:"#4ecee1" - }],false) + offset: 1, + color: '#4ecee1' + }], false) }, - barBorderRadius: [5, 5, 0, 0], + barBorderRadius: [5, 5, 0, 0] } }, data: [0], - markPoint : { - data : [ - {type : 'max', name: '鏈�澶у��',symbolSize:70}, - {type : 'min', name: '鏈�灏忓��',symbolSize:70} + markPoint: { + data: [ + { type: 'max', name: '鏈�澶у��', symbolSize: 70 }, + { type: 'min', name: '鏈�灏忓��', symbolSize: 70 } ] }, - markLine : { - data : [ - {type : 'average', name: '骞冲潎鍊�'} + markLine: { + data: [ + { type: 'average', name: '骞冲潎鍊�' } ] } } ] - }; - // let compAnalBarOption2 = { - // tooltip: { - // trigger: 'axis', - // axisPointer: { - // type: "shadow", - // textStyle: { - // color: "#fff" - // } - // - // } - // }, - // legend: { - // x: '4%', - // top: '11%', - // textStyle: { - // color: '#90979c' - // }, - // data: ['寮�鏈烘椂闂�', '鍏虫満鏃堕棿'], - // color:['#6496e9','#b4b8cc'] - // }, - // toolbox: { - // show : true, - // feature : { - // mark : {show: true}, - // magicType : {show: true, type: ['line', 'bar']}, - // restore : {show: true}, - // saveAsImage : {show: true,name:'璁惧杩愯鏃堕棿瀵规瘮鍒嗘瀽鍥�'} - // } - // }, - // calculable: true, - // grid: { - // borderWidth: 0, - // top: 110, - // bottom: 95, - // textStyle: { - // color: "#fff" - // } - // }, - // xAxis: [ - // { - // type: 'category', - // splitLine: { - // "show": false - // }, - // axisTick: { - // "show": false - // }, - // splitArea: { - // show: false - // }, - // boundaryGap : true, - // axisLabel : { - // interval : 0, - // rotate : 0, - // show: true, - // wigth:20, - // splitNumber: 8, - // textStyle: { - // fontFamily: "寰蒋闆呴粦", - // fontSize: 12 - // } - // }, - // data : [0] - // } - // ], - // yAxis: [ - // { - // type: 'value', - // splitLine: { - // show: false - // }, - // axisLine: { - // lineStyle: { - // color: '#90979c' - // } - // }, - // axisTick: { - // show: false - // }, - // axisLabel: { - // interval: 0 - // - // }, - // splitArea: { - // show: false - // } - // } - // ], - // dataZoom: [{ - // show: true, - // height: 30, - // xAxisIndex: [0], - // bottom: 30, - // start: 0, - // end: 100, - // handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z', - // handleSize: '110%', - // handleStyle: { - // color: "#d3dee5" - // }, - // textStyle: { - // color: "#fff" - // }, - // borderColor: "#90979c" - // }, { - // type: "inside", - // show: true, - // height: 15, - // start: 1, - // end: 35 - // }], - // series: [ - // { - // name: '寮�鏈烘椂闂�', - // type: 'bar', - // //barWidth: 30, - // barWidth: 25, - // // stack: 'sum', - // // barCategoryGap: '20%', - // itemStyle: { - // normal: { - // color: function(params) { - // let colorList = [ - // ["#6496e9","#6bded3"], - // // ["#849db8","#b4b8cc"], - // // ["#4fe1c5","#4ecee1"], - // // // ["#9978fa","#88a1fa"], - // // ["#ffbb65","#fdc68b"], - // ]; - // // return colorList[params.dataIndex]; - // let colorItem = colorList[params.dataIndex]; - // return new echarts.graphic.LinearGradient(0,0,0,1,[{ - // offset:0, - // color:'#6496e9' - // }, - // { - // offset:1, - // color:"#6bded3" - // }],false) - // }, - // barBorderRadius: [5, 5, 0, 0], - // } - // }, - // data: [0] - // }, - // { - // name: '鍏虫満鏃堕棿', - // type: 'bar', - // //barWidth: 30, - // barWidth: 25, - // // stack: 'sum', - // // barCategoryGap: '20%', - // itemStyle: { - // normal: { - // color: function(params) { - // let colorList = [ - // // ["#6496e9","#6bded3"], - // ["#849db8","#b4b8cc"], - // // ["#4fe1c5","#4ecee1"], - // // // ["#9978fa","#88a1fa"], - // // ["#ffbb65","#fdc68b"], - // ]; - // // return colorList[params.dataIndex]; - // let colorItem = colorList[params.dataIndex]; - // return new echarts.graphic.LinearGradient(0,0,0,1,[{ - // offset:0, - // color:'#849db8' - // }, - // { - // offset:1, - // color:"#b4b8cc" - // }],false) - // }, - // barBorderRadius: [5, 5, 0, 0], - // } - // }, - // data: [0] - // } - // ] - // }; + } let compAnalBarOption2 = { tooltip: { trigger: 'axis', axisPointer: { - type: "shadow", + type: 'shadow', textStyle: { - color: "#fff" + color: '#fff' } } @@ -438,52 +239,46 @@ textStyle: { color: '#90979c' }, - color:['#6496e9','#b4b8cc'], + color: ['#6496e9', '#b4b8cc'], data: ['寮�鏈烘椂闂�', '鍏虫満鏃堕棿'] }, toolbox: { - show : true, - feature : { - mark : {show: true}, - magicType : {show: true, type: ['line', 'bar']}, - restore : {show: true}, - saveAsImage : {show: true,name:'璁惧杩愯鏁堢巼瀵规瘮鍒嗘瀽鍥�'} + show: true, + feature: { + mark: { show: true }, + magicType: { show: true, type: ['line', 'bar'] }, + restore: { show: true }, + saveAsImage: { show: true, name: '璁惧杩愯鏁堢巼瀵规瘮鍒嗘瀽鍥�' } } }, calculable: true, grid: { borderWidth: 0, top: 110, - bottom: 95, + bottom: 110, textStyle: { - color: "#fff" + color: '#fff' } }, xAxis: [ { type: 'category', splitLine: { - "show": false + 'show': false }, axisTick: { - "show": false + 'show': false }, splitArea: { show: false }, - boundaryGap : true, - axisLabel : { - interval : 0, - rotate : 0, + boundaryGap: true, + axisLabel: { + interval: 0, + rotate: 45, show: true, - wigth:20, - splitNumber: 8, - textStyle: { - fontFamily: "寰蒋闆呴粦", - fontSize: 12 - } }, - data : [0] + data: [0] } ], yAxis: [ @@ -519,14 +314,14 @@ handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z', handleSize: '110%', handleStyle: { - color: "#d3dee5" + color: '#d3dee5' }, textStyle: { - color: "#fff" + color: '#fff' }, - borderColor: "#90979c" + borderColor: '#90979c' }, { - type: "inside", + type: 'inside', show: true, height: 15, start: 1, @@ -542,100 +337,84 @@ normal: { color: function(params) { let colorList = [ - ["#6496e9","#6bded3"], - // ["#849db8","#b4b8cc"], - // ["#4fe1c5","#4ecee1"], - // // ["#9978fa","#88a1fa"], - // ["#ffbb65","#fdc68b"], - ]; - // return colorList[params.dataIndex]; - let colorItem = colorList[params.dataIndex]; - return new echarts.graphic.LinearGradient(0,0,0,1,[{ - offset:0, - color:'#6496e9' + ['#6496e9', '#6bded3'] + ] + let colorItem = colorList[params.dataIndex] + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: '#6496e9' }, { - offset:1, - color:"#6bded3" - }],false) + offset: 1, + color: '#6bded3' + }], false) }, - barBorderRadius: [5, 5, 0, 0], + barBorderRadius: [5, 5, 0, 0] } }, data: [0], - // barCategoryGap: '20%', - // barGap : '-10%', - markPoint : { - data : [ - {type : 'max', name: '鏈�澶у��',symbolSize:70}, - {type : 'min', name: '鏈�灏忓��',symbolSize:70} + markPoint: { + data: [ + { type: 'max', name: '鏈�澶у��', symbolSize: 70 }, + { type: 'min', name: '鏈�灏忓��', symbolSize: 70 } ] }, - markLine : { - data : [ - {type : 'average', name: '骞冲潎鍊�'} + markLine: { + data: [ + { type: 'average', name: '骞冲潎鍊�' } ] } }, { name: '鍏虫満鏃堕棿', type: 'bar', - //barWidth: 30, barWidth: 25, - // barCategoryGap: '20%', - // barGap : '-10%', itemStyle: { normal: { color: function(params) { let colorList = [ - // ["#6496e9","#6bded3"], - ["#849db8","#b4b8cc"], - // ["#4fe1c5","#4ecee1"], - // ["#9978fa","#88a1fa"], - // ["#ffbb65","#fdc68b"], - ]; - // return colorList[params.dataIndex]; - let colorItem = colorList[params.dataIndex]; - return new echarts.graphic.LinearGradient(0,0,0,1,[{ - offset:0, - color:"#849db8" + ['#849db8', '#b4b8cc'] + ] + let colorItem = colorList[params.dataIndex] + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: '#849db8' }, { - offset:1, - color:"#b4b8cc" - }],false) + offset: 1, + color: '#b4b8cc' + }], false) }, - barBorderRadius: [5, 5, 0, 0], + barBorderRadius: [5, 5, 0, 0] } }, data: [0], - markPoint : { - data : [ - {type : 'max', name: '鏈�澶у��',symbolSize:70}, - {type : 'min', name: '鏈�灏忓��',symbolSize:70} + markPoint: { + data: [ + { type: 'max', name: '鏈�澶у��', symbolSize: 70 }, + { type: 'min', name: '鏈�灏忓��', symbolSize: 70 } ] }, - markLine : { - data : [ - {type : 'average', name: '骞冲潎鍊�'} + markLine: { + data: [ + { type: 'average', name: '骞冲潎鍊�' } ] } } ] - }; - if(this.OpenCloseList != null){ + } + if (this.OpenCloseList != null) { this.equipmentList = [] - this.openRate =[] - this.utilizationRate =[] + this.openRate = [] + this.utilizationRate = [] this.openLong = [] this.closeLong = [] - for(var i = 0;i<this.OpenCloseList.length;i++){ - this.equipmentList.push(this.OpenCloseList[i].equipmentId) - this.openRate.push((this.OpenCloseList[i].openRate*100).toFixed(2)) - // (this.openRate * 100).toFixed(2) - this.utilizationRate.push((this.OpenCloseList[i].utilizationRate*100).toFixed(2)) - this.openLong.push(this.OpenCloseList[i].openLong) - this.closeLong.push(this.OpenCloseList[i].closeLong) + for (var i = 0; i < this.OpenCloseList.length; i++) { + this.equipmentList.push(this.OpenCloseList[i].equipmentId) + this.openRate.push((this.OpenCloseList[i].openRate * 100).toFixed(2)) + this.utilizationRate.push((this.OpenCloseList[i].utilizationRate * 100).toFixed(2)) + this.openLong.push(this.OpenCloseList[i].openLong) + this.closeLong.push(this.OpenCloseList[i].closeLong) } compAnalBarOption1.xAxis[0].data = this.equipmentList compAnalBarOption1.series[0].data = this.openRate @@ -643,12 +422,9 @@ compAnalBarOption2.xAxis[0].data = this.equipmentList compAnalBarOption2.series[0].data = this.openLong compAnalBarOption2.series[1].data = this.closeLong - compAnalBar1.setOption(compAnalBarOption1); - compAnalBar2.setOption(compAnalBarOption2); - }else{ - compAnalBar1.setOption(compAnalBarOption1); - compAnalBar2.setOption(compAnalBarOption2); } + compAnalBar1.setOption(compAnalBarOption1) + compAnalBar2.setOption(compAnalBarOption2) window.addEventListener('resize', function() { compAnalBar1.resize() compAnalBar2.resize() @@ -656,8 +432,4 @@ } } } -</script> - -<style scoped> - -</style> \ No newline at end of file +</script> \ No newline at end of file diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue index 1fa304c..d01c305 100644 --- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue +++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue @@ -1,9 +1,9 @@ <template> - <div class="comparative_Gauge" style="width: 100%;height: 700px;display: flex;flex-direction: column;overflow: scroll"> - <div style="flex: 1;text-align:center;display: flex;flex-direction: column"> - <h3 style="height: 18px;margin: 0 auto;">鍒╃敤鐜� Top 5</h3> + <div class="outer-container"> + <div> + <h3 style="margin: 0 auto;">鍒╃敤鐜� Top 5</h3> - <div style="flex: 1;display: flex;"> + <div style="flex: 1;display: flex"> <div id="top1Gauge" class="div-inline"></div> <div id="top2Gauge" class="div-inline"></div> <div id="top3Gauge" class="div-inline"></div> @@ -11,10 +11,11 @@ <div id="top5Gauge" class="div-inline"></div> </div> </div> - <div style="flex: 1;text-align:center;display: flex;flex-direction: column"> - <h3 style="height: 18px; margin: 0 auto;">鍒╃敤鐜� Last 5</h3> - <div style="flex: 1;display: flex;"> + <div> + <h3 style="margin: 0 auto;">鍒╃敤鐜� Last 5</h3> + + <div style="flex: 1;display: flex"> <div id="last1Gauge" class="div-inline"></div> <div id="last2Gauge" class="div-inline"></div> <div id="last3Gauge" class="div-inline"></div> @@ -26,80 +27,79 @@ </template> <script> - import * as echarts from 'echarts' export default { name: 'comparativeAnalysisGauge', - props:{dataList:''}, - data(){ - return{ - utilizationRateTopOne:0, - utilizationRateTopOneEquipment:0, - utilizationRateTopTwo:0, - utilizationRateTopTwoEquipment:0, - utilizationRateTopThree:0, - utilizationRateTopThreeEquipment:0, - utilizationRateTopFour:0, - utilizationRateTopFourEquipment:0, - utilizationRateTopFive:0, - utilizationRateTopFiveEquipment:0, - utilizationRateLastOne:0, - utilizationRateLastOneEquipment:0, - utilizationRateLastTwo:0, - utilizationRateLastTwoEquipment:0, - utilizationRateLastThree:0, - utilizationRateLastThreeEquipment:0, - utilizationRateLastFour:0, - utilizationRateLastFourEquipment:0, - utilizationRateLastFive:0, - utilizationRateLastFiveEquipment:0, - TopLastList:[] + props: { dataList: '' }, + data() { + return { + utilizationRateTopOne: 0, + utilizationRateTopOneEquipment: 0, + utilizationRateTopTwo: 0, + utilizationRateTopTwoEquipment: 0, + utilizationRateTopThree: 0, + utilizationRateTopThreeEquipment: 0, + utilizationRateTopFour: 0, + utilizationRateTopFourEquipment: 0, + utilizationRateTopFive: 0, + utilizationRateTopFiveEquipment: 0, + utilizationRateLastOne: 0, + utilizationRateLastOneEquipment: 0, + utilizationRateLastTwo: 0, + utilizationRateLastTwoEquipment: 0, + utilizationRateLastThree: 0, + utilizationRateLastThreeEquipment: 0, + utilizationRateLastFour: 0, + utilizationRateLastFourEquipment: 0, + utilizationRateLastFive: 0, + utilizationRateLastFiveEquipment: 0, + TopLastList: [] } }, - watch:{ - dataList(val){ - console.log(val); + watch: { + dataList(val) { + console.log(val) this.TopLastList = val this.draw() - }, + } }, - mounted(){ - this.draw(); + mounted() { + this.draw() }, - methods:{ - draw(){ - let gaugeTopChart1 = this.$echarts.init(document.getElementById('top1Gauge'),'macarons'); - let gaugeTopChart2 = this.$echarts.init(document.getElementById('top2Gauge'),'macarons'); - let gaugeTopChart3 = this.$echarts.init(document.getElementById('top3Gauge'),'macarons'); - let gaugeTopChart4 = this.$echarts.init(document.getElementById('top4Gauge'),'macarons'); - let gaugeTopChart5 = this.$echarts.init(document.getElementById('top5Gauge'),'macarons'); - let gaugeLastChart1 = this.$echarts.init(document.getElementById('last1Gauge'),'macarons'); - let gaugeLastChart2 = this.$echarts.init(document.getElementById('last2Gauge'),'macarons'); - let gaugeLastChart3 = this.$echarts.init(document.getElementById('last3Gauge'),'macarons'); - let gaugeLastChart4 = this.$echarts.init(document.getElementById('last4Gauge'),'macarons'); - let gaugeLastChart5 = this.$echarts.init(document.getElementById('last5Gauge'),'macarons'); + methods: { + draw() { + let gaugeTopChart1 = this.$echarts.init(document.getElementById('top1Gauge'), 'macarons') + let gaugeTopChart2 = this.$echarts.init(document.getElementById('top2Gauge'), 'macarons') + let gaugeTopChart3 = this.$echarts.init(document.getElementById('top3Gauge'), 'macarons') + let gaugeTopChart4 = this.$echarts.init(document.getElementById('top4Gauge'), 'macarons') + let gaugeTopChart5 = this.$echarts.init(document.getElementById('top5Gauge'), 'macarons') + let gaugeLastChart1 = this.$echarts.init(document.getElementById('last1Gauge'), 'macarons') + let gaugeLastChart2 = this.$echarts.init(document.getElementById('last2Gauge'), 'macarons') + let gaugeLastChart3 = this.$echarts.init(document.getElementById('last3Gauge'), 'macarons') + let gaugeLastChart4 = this.$echarts.init(document.getElementById('last4Gauge'), 'macarons') + let gaugeLastChart5 = this.$echarts.init(document.getElementById('last5Gauge'), 'macarons') let gaugeTopOption1 = { - title : { - x : 'center', - y : 'bottom', - text : 'TOP1' + title: { + x: 'center', + y: 'bottom', + text: 'TOP1' }, - tooltip : { - formatter: "{a} <br/>{b} : {c}%" + tooltip: { + formatter: '{a} <br/>{b} : {c}%' }, - series : [ + series: [ { - name:'TOP1', - type:'gauge', + name: 'TOP1', + type: 'gauge', splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5 axisLine: { // 鍧愭爣杞寸嚎 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 - color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], + color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']], width: 8 } }, axisTick: { // 鍧愭爣杞村皬鏍囪 splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈� - length :12, // 灞炴�ength鎺у埗绾块暱 + length: 12, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 color: 'auto' } @@ -111,57 +111,57 @@ }, splitLine: { // 鍒嗛殧绾� show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁 - length :30, // 灞炴�ength鎺у埗绾块暱 + length: 30, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮� color: 'auto' } }, - pointer : { - width : 5 + pointer: { + width: 5 }, - title : { - show : false, + title: { + show: false, offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE fontWeight: 'bolder' } }, - detail : { - formatter:'{value}%', + detail: { + formatter: '{value}%', offsetCenter: [0, '60%'], textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE color: 'auto', fontWeight: 'bolder', - fontSize:20 + fontSize: 20 } }, - data:[{value: 0, name: '鍒╃敤鐜�'}] + data: [{ value: 0, name: '鍒╃敤鐜�' }] } ] - }; - let gaugeTopOption2 = { - title : { - x : 'center', - y : 'bottom', - text : 'TOP2' + } + let gaugeTopOption2 = { + title: { + x: 'center', + y: 'bottom', + text: 'TOP2' }, - tooltip : { - formatter: "{a} <br/>{b} : {c}%" + tooltip: { + formatter: '{a} <br/>{b} : {c}%' }, - series : [ + series: [ { - name:'TOP2', - type:'gauge', + name: 'TOP2', + type: 'gauge', splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5 axisLine: { // 鍧愭爣杞寸嚎 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 - color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], + color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']], width: 8 } }, axisTick: { // 鍧愭爣杞村皬鏍囪 splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈� - length :12, // 灞炴�ength鎺у埗绾块暱 + length: 12, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 color: 'auto' } @@ -173,57 +173,57 @@ }, splitLine: { // 鍒嗛殧绾� show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁 - length :30, // 灞炴�ength鎺у埗绾块暱 + length: 30, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮� color: 'auto' } }, - pointer : { - width : 5 + pointer: { + width: 5 }, - title : { - show : false, + title: { + show: false, offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE fontWeight: 'bolder' } }, - detail : { - formatter:'{value}%', + detail: { + formatter: '{value}%', offsetCenter: [0, '60%'], textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE color: 'auto', fontWeight: 'bolder', - fontSize:20 + fontSize: 20 } }, - data:[{value: 0, name: '鍒╃敤鐜�'}] + data: [{ value: 0, name: '鍒╃敤鐜�' }] } ] - }; + } let gaugeTopOption3 = { - title : { - x : 'center', - y : 'bottom', - text : 'TOP3' + title: { + x: 'center', + y: 'bottom', + text: 'TOP3' }, - tooltip : { - formatter: "{a} <br/>{b} : {c}%" + tooltip: { + formatter: '{a} <br/>{b} : {c}%' }, - series : [ + series: [ { - name:'TOP3', - type:'gauge', + name: 'TOP3', + type: 'gauge', splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5 axisLine: { // 鍧愭爣杞寸嚎 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 - color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], + color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']], width: 8 } }, axisTick: { // 鍧愭爣杞村皬鏍囪 splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈� - length :12, // 灞炴�ength鎺у埗绾块暱 + length: 12, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 color: 'auto' } @@ -235,57 +235,57 @@ }, splitLine: { // 鍒嗛殧绾� show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁 - length :30, // 灞炴�ength鎺у埗绾块暱 + length: 30, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮� color: 'auto' } }, - pointer : { - width : 5 + pointer: { + width: 5 }, - title : { - show : false, + title: { + show: false, offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE fontWeight: 'bolder' } }, - detail : { - formatter:'{value}%', + detail: { + formatter: '{value}%', offsetCenter: [0, '60%'], textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE color: 'auto', fontWeight: 'bolder', - fontSize:20 + fontSize: 20 } }, - data:[{value: 0, name: '鍒╃敤鐜�'}] + data: [{ value: 0, name: '鍒╃敤鐜�' }] } ] - }; + } let gaugeTopOption4 = { - title : { - x : 'center', - y : 'bottom', - text : 'TOP4' + title: { + x: 'center', + y: 'bottom', + text: 'TOP4' }, - tooltip : { - formatter: "{a} <br/>{b} : {c}%" + tooltip: { + formatter: '{a} <br/>{b} : {c}%' }, - series : [ + series: [ { - name:'TOP4', - type:'gauge', + name: 'TOP4', + type: 'gauge', splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5 axisLine: { // 鍧愭爣杞寸嚎 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 - color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], + color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']], width: 8 } }, axisTick: { // 鍧愭爣杞村皬鏍囪 splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈� - length :12, // 灞炴�ength鎺у埗绾块暱 + length: 12, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 color: 'auto' } @@ -297,57 +297,57 @@ }, splitLine: { // 鍒嗛殧绾� show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁 - length :30, // 灞炴�ength鎺у埗绾块暱 + length: 30, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮� color: 'auto' } }, - pointer : { - width : 5 + pointer: { + width: 5 }, - title : { - show : false, + title: { + show: false, offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE fontWeight: 'bolder' } }, - detail : { - formatter:'{value}%', + detail: { + formatter: '{value}%', offsetCenter: [0, '60%'], textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE color: 'auto', fontWeight: 'bolder', - fontSize:20 + fontSize: 20 } }, - data:[{value: 0, name: '鍒╃敤鐜�'}] + data: [{ value: 0, name: '鍒╃敤鐜�' }] } ] - }; + } let gaugeTopOption5 = { - title : { - x : 'center', - y : 'bottom', - text : 'TOP5' + title: { + x: 'center', + y: 'bottom', + text: 'TOP5' }, - tooltip : { - formatter: "{a} <br/>{b} : {c}%" + tooltip: { + formatter: '{a} <br/>{b} : {c}%' }, - series : [ + series: [ { - name:'TOP5', - type:'gauge', + name: 'TOP5', + type: 'gauge', splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5 axisLine: { // 鍧愭爣杞寸嚎 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 - color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], + color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']], width: 8 } }, axisTick: { // 鍧愭爣杞村皬鏍囪 splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈� - length :12, // 灞炴�ength鎺у埗绾块暱 + length: 12, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 color: 'auto' } @@ -359,57 +359,57 @@ }, splitLine: { // 鍒嗛殧绾� show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁 - length :30, // 灞炴�ength鎺у埗绾块暱 + length: 30, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮� color: 'auto' } }, - pointer : { - width : 5 + pointer: { + width: 5 }, - title : { - show : false, + title: { + show: false, offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE fontWeight: 'bolder' } }, - detail : { - formatter:'{value}%', + detail: { + formatter: '{value}%', offsetCenter: [0, '60%'], textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE color: 'auto', fontWeight: 'bolder', - fontSize:20 + fontSize: 20 } }, - data:[{value: 0, name: '鍒╃敤鐜�'}] + data: [{ value: 0, name: '鍒╃敤鐜�' }] } ] - }; + } let gaugeLessOption1 = { - title : { - x : 'center', - y : 'bottom', - text : 'LAST1' + title: { + x: 'center', + y: 'bottom', + text: 'LAST1' }, - tooltip : { - formatter: "{a} <br/>{b} : {c}%" + tooltip: { + formatter: '{a} <br/>{b} : {c}%' }, - series : [ + series: [ { - name:'LAST1', - type:'gauge', + name: 'LAST1', + type: 'gauge', splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5 axisLine: { // 鍧愭爣杞寸嚎 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 - color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], + color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']], width: 8 } }, axisTick: { // 鍧愭爣杞村皬鏍囪 splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈� - length :12, // 灞炴�ength鎺у埗绾块暱 + length: 12, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 color: 'auto' } @@ -421,57 +421,57 @@ }, splitLine: { // 鍒嗛殧绾� show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁 - length :30, // 灞炴�ength鎺у埗绾块暱 + length: 30, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮� color: 'auto' } }, - pointer : { - width : 5 + pointer: { + width: 5 }, - title : { - show : false, + title: { + show: false, offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE fontWeight: 'bolder' } }, - detail : { - formatter:'{value}%', + detail: { + formatter: '{value}%', offsetCenter: [0, '60%'], textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE color: 'auto', fontWeight: 'bolder', - fontSize:20 + fontSize: 20 } }, - data:[{value: 0, name: '鍒╃敤鐜�'}] + data: [{ value: 0, name: '鍒╃敤鐜�' }] } ] - }; + } let gaugeLessOption2 = { - title : { - x : 'center', - y : 'bottom', - text : 'LAST2' + title: { + x: 'center', + y: 'bottom', + text: 'LAST2' }, - tooltip : { - formatter: "{a} <br/>{b} : {c}%" + tooltip: { + formatter: '{a} <br/>{b} : {c}%' }, - series : [ + series: [ { - name:'LAST2', - type:'gauge', + name: 'LAST2', + type: 'gauge', splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5 axisLine: { // 鍧愭爣杞寸嚎 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 - color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], + color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']], width: 8 } }, axisTick: { // 鍧愭爣杞村皬鏍囪 splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈� - length :12, // 灞炴�ength鎺у埗绾块暱 + length: 12, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 color: 'auto' } @@ -483,57 +483,57 @@ }, splitLine: { // 鍒嗛殧绾� show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁 - length :30, // 灞炴�ength鎺у埗绾块暱 + length: 30, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮� color: 'auto' } }, - pointer : { - width : 5 + pointer: { + width: 5 }, - title : { - show : false, + title: { + show: false, offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE fontWeight: 'bolder' } }, - detail : { - formatter:'{value}%', + detail: { + formatter: '{value}%', offsetCenter: [0, '60%'], textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE color: 'auto', fontWeight: 'bolder', - fontSize:20 + fontSize: 20 } }, - data:[{value: 0, name: '鍒╃敤鐜�'}] + data: [{ value: 0, name: '鍒╃敤鐜�' }] } ] - }; + } let gaugeLessOption3 = { - title : { - x : 'center', - y : 'bottom', - text : 'LAST3' + title: { + x: 'center', + y: 'bottom', + text: 'LAST3' }, - tooltip : { - formatter: "{a} <br/>{b} : {c}%" + tooltip: { + formatter: '{a} <br/>{b} : {c}%' }, - series : [ + series: [ { - name:'LAST3', - type:'gauge', + name: 'LAST3', + type: 'gauge', splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5 axisLine: { // 鍧愭爣杞寸嚎 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 - color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], + color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']], width: 8 } }, axisTick: { // 鍧愭爣杞村皬鏍囪 splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈� - length :12, // 灞炴�ength鎺у埗绾块暱 + length: 12, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 color: 'auto' } @@ -545,57 +545,57 @@ }, splitLine: { // 鍒嗛殧绾� show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁 - length :30, // 灞炴�ength鎺у埗绾块暱 + length: 30, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮� color: 'auto' } }, - pointer : { - width : 5 + pointer: { + width: 5 }, - title : { - show : false, + title: { + show: false, offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE fontWeight: 'bolder' } }, - detail : { - formatter:'{value}%', + detail: { + formatter: '{value}%', offsetCenter: [0, '60%'], textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE color: 'auto', fontWeight: 'bolder', - fontSize:20 + fontSize: 20 } }, - data:[{value: 0, name: '鍒╃敤鐜�'}] + data: [{ value: 0, name: '鍒╃敤鐜�' }] } ] - }; + } let gaugeLessOption4 = { - title : { - x : 'center', - y : 'bottom', - text : 'LAST4' + title: { + x: 'center', + y: 'bottom', + text: 'LAST4' }, - tooltip : { - formatter: "{a} <br/>{b} : {c}%" + tooltip: { + formatter: '{a} <br/>{b} : {c}%' }, - series : [ + series: [ { - name:'LAST4', - type:'gauge', + name: 'LAST4', + type: 'gauge', splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5 axisLine: { // 鍧愭爣杞寸嚎 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 - color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], + color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']], width: 8 } }, axisTick: { // 鍧愭爣杞村皬鏍囪 splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈� - length :12, // 灞炴�ength鎺у埗绾块暱 + length: 12, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 color: 'auto' } @@ -607,57 +607,57 @@ }, splitLine: { // 鍒嗛殧绾� show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁 - length :30, // 灞炴�ength鎺у埗绾块暱 + length: 30, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮� color: 'auto' } }, - pointer : { - width : 5 + pointer: { + width: 5 }, - title : { - show : false, + title: { + show: false, offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE fontWeight: 'bolder' } }, - detail : { - formatter:'{value}%', + detail: { + formatter: '{value}%', offsetCenter: [0, '60%'], textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE color: 'auto', fontWeight: 'bolder', - fontSize:20 + fontSize: 20 } }, - data:[{value: 0, name: '鍒╃敤鐜�'}] + data: [{ value: 0, name: '鍒╃敤鐜�' }] } ] - }; + } let gaugeLessOption5 = { - title : { - x : 'center', - y : 'bottom', - text : 'LAST5' + title: { + x: 'center', + y: 'bottom', + text: 'LAST5' }, - tooltip : { - formatter: "{a} <br/>{b} : {c}%" + tooltip: { + formatter: '{a} <br/>{b} : {c}%' }, - series : [ + series: [ { - name:'LAST5', - type:'gauge', + name: 'LAST5', + type: 'gauge', splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5 axisLine: { // 鍧愭爣杞寸嚎 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 - color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], + color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']], width: 8 } }, axisTick: { // 鍧愭爣杞村皬鏍囪 splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈� - length :12, // 灞炴�ength鎺у埗绾块暱 + length: 12, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡 color: 'auto' } @@ -669,148 +669,148 @@ }, splitLine: { // 鍒嗛殧绾� show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁 - length :30, // 灞炴�ength鎺у埗绾块暱 + length: 30, // 灞炴�ength鎺у埗绾块暱 lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮� color: 'auto' } }, - pointer : { - width : 5 + pointer: { + width: 5 }, - title : { - show : false, + title: { + show: false, offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE fontWeight: 'bolder' } }, - detail : { - formatter:'{value}%', + detail: { + formatter: '{value}%', offsetCenter: [0, '60%'], textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE color: 'auto', fontWeight: 'bolder', - fontSize:20 + fontSize: 20 } }, - data:[{value: 0, name: '鍒╃敤鐜�'}] + data: [{ value: 0, name: '鍒╃敤鐜�' }] } ] - }; - if(this.TopLastList != null){ - this.utilizationRateTopOne=0 - this.utilizationRateTopOneEquipment = 'TOP1' - this.utilizationRateTopTwo=0 - this.utilizationRateTopTwoEquipment = 'TOP2' - this.utilizationRateTopThree=0 - this.utilizationRateTopThreeEquipment = 'TOP3' - this.utilizationRateTopFour =0 - this.utilizationRateTopFourEquipment = 'TOP4' - this.utilizationRateTopFive=0 - this.utilizationRateTopFiveEquipment = 'TOP5' - this.utilizationRateLastOne=0 - this.utilizationRateLastOneEquipment = 'LAST1' - this.utilizationRateLastTwo=0 - this.utilizationRateLastTwoEquipment = 'LAST2' - this.utilizationRateLastThree=0 - this.utilizationRateLastThreeEquipment = 'LAST3' - this.utilizationRateLastFour=0 - this.utilizationRateLastFourEquipment = 'LAST4' - this.utilizationRateLastFive=0 - this.utilizationRateLastFiveEquipment = 'LAST5' - if(this.TopLastList.tops){ - for(var i = 0;i<this.TopLastList.tops.length;i++){ - if(i == 0){ - this.utilizationRateTopOneEquipment=this.TopLastList.tops[0].equipmentId - this.utilizationRateTopOne=this.TopLastList.tops[0].utilizationRate - }else if(i == 1){ - this.utilizationRateTopTwoEquipment=this.TopLastList.tops[1].equipmentId - this.utilizationRateTopTwo=this.TopLastList.tops[1].utilizationRate - }else if(i == 2){ - this.utilizationRateTopThreeEquipment=this.TopLastList.tops[2].equipmentId - this.utilizationRateTopThree=this.TopLastList.tops[2].utilizationRate - }else if(i == 3){ - this.utilizationRateTopFourEquipment=this.TopLastList.tops[3].equipmentId - this.utilizationRateTopFour=this.TopLastList.tops[3].utilizationRate - }else if(i == 4){ - this.utilizationRateTopFiveEquipment=this.TopLastList.tops[4].equipmentId - this.utilizationRateTopFive=this.TopLastList.tops[4].utilizationRate + } + if (this.TopLastList != null) { + this.utilizationRateTopOne = 0 + this.utilizationRateTopOneEquipment = 'TOP1' + this.utilizationRateTopTwo = 0 + this.utilizationRateTopTwoEquipment = 'TOP2' + this.utilizationRateTopThree = 0 + this.utilizationRateTopThreeEquipment = 'TOP3' + this.utilizationRateTopFour = 0 + this.utilizationRateTopFourEquipment = 'TOP4' + this.utilizationRateTopFive = 0 + this.utilizationRateTopFiveEquipment = 'TOP5' + this.utilizationRateLastOne = 0 + this.utilizationRateLastOneEquipment = 'LAST1' + this.utilizationRateLastTwo = 0 + this.utilizationRateLastTwoEquipment = 'LAST2' + this.utilizationRateLastThree = 0 + this.utilizationRateLastThreeEquipment = 'LAST3' + this.utilizationRateLastFour = 0 + this.utilizationRateLastFourEquipment = 'LAST4' + this.utilizationRateLastFive = 0 + this.utilizationRateLastFiveEquipment = 'LAST5' + if (this.TopLastList.tops) { + for (var i = 0; i < this.TopLastList.tops.length; i++) { + if (i == 0) { + this.utilizationRateTopOneEquipment = this.TopLastList.tops[0].equipmentId + this.utilizationRateTopOne = this.TopLastList.tops[0].utilizationRate + } else if (i == 1) { + this.utilizationRateTopTwoEquipment = this.TopLastList.tops[1].equipmentId + this.utilizationRateTopTwo = this.TopLastList.tops[1].utilizationRate + } else if (i == 2) { + this.utilizationRateTopThreeEquipment = this.TopLastList.tops[2].equipmentId + this.utilizationRateTopThree = this.TopLastList.tops[2].utilizationRate + } else if (i == 3) { + this.utilizationRateTopFourEquipment = this.TopLastList.tops[3].equipmentId + this.utilizationRateTopFour = this.TopLastList.tops[3].utilizationRate + } else if (i == 4) { + this.utilizationRateTopFiveEquipment = this.TopLastList.tops[4].equipmentId + this.utilizationRateTopFive = this.TopLastList.tops[4].utilizationRate } } } - if(this.TopLastList.lasts){ - for(var j = 0;j<this.TopLastList.lasts.length;j++){ - if(j == 0){ - this.utilizationRateLastOneEquipment=this.TopLastList.lasts[0].equipmentId - this.utilizationRateLastOne=this.TopLastList.lasts[0].utilizationRate - }else if(j == 1){ - this.utilizationRateLastTwoEquipment=this.TopLastList.lasts[1].equipmentId - this.utilizationRateLastTwo=this.TopLastList.lasts[1].utilizationRate - }else if(j == 2){ - this.utilizationRateLastThreeEquipment=this.TopLastList.lasts[2].equipmentId - this.utilizationRateLastThree=this.TopLastList.lasts[2].utilizationRate - }else if(j == 3){ - this.utilizationRateLastFourEquipment=this.TopLastList.lasts[3].equipmentId - this.utilizationRateLastFour=this.TopLastList.lasts[3].utilizationRate - }else if(j == 4){ - this.utilizationRateLastFiveEquipment=this.TopLastList.lasts[4].equipmentId - this.utilizationRateLastFive=this.TopLastList.lasts[4].utilizationRate + if (this.TopLastList.lasts) { + for (var j = 0; j < this.TopLastList.lasts.length; j++) { + if (j == 0) { + this.utilizationRateLastOneEquipment = this.TopLastList.lasts[0].equipmentId + this.utilizationRateLastOne = this.TopLastList.lasts[0].utilizationRate + } else if (j == 1) { + this.utilizationRateLastTwoEquipment = this.TopLastList.lasts[1].equipmentId + this.utilizationRateLastTwo = this.TopLastList.lasts[1].utilizationRate + } else if (j == 2) { + this.utilizationRateLastThreeEquipment = this.TopLastList.lasts[2].equipmentId + this.utilizationRateLastThree = this.TopLastList.lasts[2].utilizationRate + } else if (j == 3) { + this.utilizationRateLastFourEquipment = this.TopLastList.lasts[3].equipmentId + this.utilizationRateLastFour = this.TopLastList.lasts[3].utilizationRate + } else if (j == 4) { + this.utilizationRateLastFiveEquipment = this.TopLastList.lasts[4].equipmentId + this.utilizationRateLastFive = this.TopLastList.lasts[4].utilizationRate } } } gaugeTopOption1.title.text = this.utilizationRateTopOneEquipment - gaugeTopOption1.series[0].data = [{value : (this.utilizationRateTopOne * 100).toFixed(2), name : '鍒╃敤鐜�'}]; + gaugeTopOption1.series[0].data = [{ value: (this.utilizationRateTopOne * 100).toFixed(2), name: '鍒╃敤鐜�' }] gaugeTopOption2.title.text = this.utilizationRateTopTwoEquipment - gaugeTopOption2.series[0].data = [{value : (this.utilizationRateTopTwo * 100).toFixed(2), name : '鍒╃敤鐜�'}]; + gaugeTopOption2.series[0].data = [{ value: (this.utilizationRateTopTwo * 100).toFixed(2), name: '鍒╃敤鐜�' }] gaugeTopOption3.title.text = this.utilizationRateTopThreeEquipment - gaugeTopOption3.series[0].data = [{value : (this.utilizationRateTopThree * 100).toFixed(2), name : '鍒╃敤鐜�'}]; + gaugeTopOption3.series[0].data = [{ value: (this.utilizationRateTopThree * 100).toFixed(2), name: '鍒╃敤鐜�' }] gaugeTopOption4.title.text = this.utilizationRateTopFourEquipment - gaugeTopOption4.series[0].data = [{value : (this.utilizationRateTopFour * 100).toFixed(2), name : '鍒╃敤鐜�'}]; + gaugeTopOption4.series[0].data = [{ value: (this.utilizationRateTopFour * 100).toFixed(2), name: '鍒╃敤鐜�' }] gaugeTopOption5.title.text = this.utilizationRateTopFiveEquipment - gaugeTopOption5.series[0].data = [{value : (this.utilizationRateTopFive * 100).toFixed(2), name : '鍒╃敤鐜�'}]; + gaugeTopOption5.series[0].data = [{ value: (this.utilizationRateTopFive * 100).toFixed(2), name: '鍒╃敤鐜�' }] gaugeLessOption1.title.text = this.utilizationRateLastOneEquipment - gaugeLessOption1.series[0].data = [{value : (this.utilizationRateLastOne * 100).toFixed(2), name : '鍒╃敤鐜�'}]; + gaugeLessOption1.series[0].data = [{ value: (this.utilizationRateLastOne * 100).toFixed(2), name: '鍒╃敤鐜�' }] gaugeLessOption2.title.text = this.utilizationRateLastTwoEquipment - gaugeLessOption2.series[0].data = [{value : (this.utilizationRateLastTwo * 100).toFixed(2), name : '鍒╃敤鐜�'}]; + gaugeLessOption2.series[0].data = [{ value: (this.utilizationRateLastTwo * 100).toFixed(2), name: '鍒╃敤鐜�' }] gaugeLessOption3.title.text = this.utilizationRateLastThreeEquipment - gaugeLessOption3.series[0].data = [{value : (this.utilizationRateLastThree * 100).toFixed(2), name : '鍒╃敤鐜�'}]; + gaugeLessOption3.series[0].data = [{ value: (this.utilizationRateLastThree * 100).toFixed(2), name: '鍒╃敤鐜�' }] gaugeLessOption4.title.text = this.utilizationRateLastFourEquipment - gaugeLessOption4.series[0].data = [{value : (this.utilizationRateLastFour * 100).toFixed(2), name : '鍒╃敤鐜�'}]; + gaugeLessOption4.series[0].data = [{ value: (this.utilizationRateLastFour * 100).toFixed(2), name: '鍒╃敤鐜�' }] gaugeLessOption5.title.text = this.utilizationRateLastFiveEquipment - gaugeLessOption5.series[0].data = [{value : (this.utilizationRateLastFive * 100).toFixed(2), name : '鍒╃敤鐜�'}]; - gaugeTopChart1.setOption(gaugeTopOption1); - gaugeTopChart2.setOption(gaugeTopOption2); - gaugeTopChart3.setOption(gaugeTopOption3); - gaugeTopChart4.setOption(gaugeTopOption4); - gaugeTopChart5.setOption(gaugeTopOption5); - gaugeLastChart1.setOption(gaugeLessOption1); - gaugeLastChart2.setOption(gaugeLessOption2); - gaugeLastChart3.setOption(gaugeLessOption3); - gaugeLastChart4.setOption(gaugeLessOption4); - gaugeLastChart5.setOption(gaugeLessOption5); - }else{ - gaugeTopChart1.setOption(gaugeTopOption1); - gaugeTopChart2.setOption(gaugeTopOption2); - gaugeTopChart3.setOption(gaugeTopOption3); - gaugeTopChart4.setOption(gaugeTopOption4); - gaugeTopChart5.setOption(gaugeTopOption5); - gaugeLastChart1.setOption(gaugeLessOption1); - gaugeLastChart2.setOption(gaugeLessOption2); - gaugeLastChart3.setOption(gaugeLessOption3); - gaugeLastChart4.setOption(gaugeLessOption4); - gaugeLastChart5.setOption(gaugeLessOption5); + gaugeLessOption5.series[0].data = [{ value: (this.utilizationRateLastFive * 100).toFixed(2), name: '鍒╃敤鐜�' }] + gaugeTopChart1.setOption(gaugeTopOption1) + gaugeTopChart2.setOption(gaugeTopOption2) + gaugeTopChart3.setOption(gaugeTopOption3) + gaugeTopChart4.setOption(gaugeTopOption4) + gaugeTopChart5.setOption(gaugeTopOption5) + gaugeLastChart1.setOption(gaugeLessOption1) + gaugeLastChart2.setOption(gaugeLessOption2) + gaugeLastChart3.setOption(gaugeLessOption3) + gaugeLastChart4.setOption(gaugeLessOption4) + gaugeLastChart5.setOption(gaugeLessOption5) + } else { + gaugeTopChart1.setOption(gaugeTopOption1) + gaugeTopChart2.setOption(gaugeTopOption2) + gaugeTopChart3.setOption(gaugeTopOption3) + gaugeTopChart4.setOption(gaugeTopOption4) + gaugeTopChart5.setOption(gaugeTopOption5) + gaugeLastChart1.setOption(gaugeLessOption1) + gaugeLastChart2.setOption(gaugeLessOption2) + gaugeLastChart3.setOption(gaugeLessOption3) + gaugeLastChart4.setOption(gaugeLessOption4) + gaugeLastChart5.setOption(gaugeLessOption5) } - gaugeTopChart1.setOption(gaugeTopOption1); - gaugeTopChart2.setOption(gaugeTopOption2); - gaugeTopChart3.setOption(gaugeTopOption3); - gaugeTopChart4.setOption(gaugeTopOption4); - gaugeTopChart5.setOption(gaugeTopOption5); - gaugeLastChart1.setOption(gaugeLessOption1); - gaugeLastChart2.setOption(gaugeLessOption2); - gaugeLastChart3.setOption(gaugeLessOption3); - gaugeLastChart4.setOption(gaugeLessOption4); - gaugeLastChart5.setOption(gaugeLessOption5); + gaugeTopChart1.setOption(gaugeTopOption1) + gaugeTopChart2.setOption(gaugeTopOption2) + gaugeTopChart3.setOption(gaugeTopOption3) + gaugeTopChart4.setOption(gaugeTopOption4) + gaugeTopChart5.setOption(gaugeTopOption5) + gaugeLastChart1.setOption(gaugeLessOption1) + gaugeLastChart2.setOption(gaugeLessOption2) + gaugeLastChart3.setOption(gaugeLessOption3) + gaugeLastChart4.setOption(gaugeLessOption4) + gaugeLastChart5.setOption(gaugeLessOption5) window.addEventListener('resize', function() { gaugeTopChart1.resize() gaugeTopChart2.resize() @@ -829,8 +829,20 @@ } </script> -<style scoped> - .div-inline{ - flex: 1; +<style lang="less" scoped> + .outer-container { + height: 100%; + overflow: auto; + + > div { + height: 320px; + display: flex; + flex-direction: column + } + + .div-inline { + width: 20%; + height: 100%; + } } </style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue index 32121ec..ceae2a0 100644 --- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue +++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue @@ -1,110 +1,81 @@ <template> - <div :bordered="false" class="device_list"> - <div class="com_box"> - <!-- 鏌ヨ鍖哄煙 --> - <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper"> - <a-form layout="inline" @keyup.enter.native="searchQuery"> - <a-row :gutter="24"> - <!--<a-col :md="5" :sm="5">--> - <!--<a-form-item label="鍚嶇О">--> - <!--<a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParam.tierName"></a-input>--> - <!--</a-form-item>--> - <!--</a-col>--> - <a-col :md="5" :sm="5"> - <a-form-item label="璁惧"> - <a-input-search :readOnly="true" v-model="queryParam.equipmentId" @search="deviceSearch" - placeholder='璇烽�夋嫨璁惧'/> - </a-form-item> - </a-col> + <div class="device_list"> + <!-- 鏌ヨ鍖哄煙 --> + <div style="background-color: #fff" class="table-page-search-wrapper"> + <a-form layout="inline" @keyup.enter.native="searchQuery"> + <a-row :gutter="24"> + <a-col :md="5" :sm="5"> + <a-form-item label="璁惧"> + <a-input-search readOnly v-model="queryParam.equipmentId" @search="deviceSearch" + @click="deviceSearch" + placeholder='璇烽�夋嫨璁惧'/> + </a-form-item> + </a-col> - <a-col :md="5" :sm="5"> - <a-form-item label="椹卞姩绫诲瀷"> - <!--<j-dict-select-tag placeholder="璇烽�夋嫨椹卞姩绫诲瀷"--> - <!--:triggerChange="true" dictCode="mdc_driveType"--> - <!--v-model="queryParam.driveType" allow-clear/>--> - <a-auto-complete - v-model="queryParam.driveType" - :data-source="driveTypeList" - placeholder="椹卞姩绫诲瀷" - :filter-option="filterOption" - :allowClear="true" - /> - </a-form-item> - </a-col> - <a-col :md="6" :sm="6" :xs="6"> - <a-form-item label="鏃堕棿"> - <a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD"/> - </a-form-item> - </a-col> - <a-col> - <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> - <!-- table鍖哄煙-begin --> - <div id="DeviceList"> - <a-tabs :activeKey="activeKey" @change="tabChange" tabPosition="top"> - <a-tab-pane key="1" tab="鍥惧舰"> - <ComparativeAnalysisBar ref="AnalysisBar" :dataList='AnalysisBarList'></ComparativeAnalysisBar> - </a-tab-pane> - <a-tab-pane key="2" tab="浠〃" forceRender> - <ComparativeAnalysisGauge ref="AnalysisGauge" :dataList="AnalysisGauge"></ComparativeAnalysisGauge> - </a-tab-pane> - <a-tab-pane key="3" tab="楗煎浘" forceRender> - <ComparativeAnalysisPie ref="AnalysisPie" :dataList="AnalysisPie"></ComparativeAnalysisPie> - </a-tab-pane> - </a-tabs> - </div> - <!-- table鍖哄煙-end --> + <a-col :md="5" :sm="5"> + <a-form-item label="椹卞姩绫诲瀷"> + <a-auto-complete + v-model="queryParam.driveType" + :data-source="driveTypeList" + placeholder="椹卞姩绫诲瀷" + :filter-option="filterOption" + :allowClear="true" + /> + </a-form-item> + </a-col> + <a-col :md="6" :sm="6" :xs="6"> + <a-form-item label="鏃堕棿"> + <a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD" :allow-clear="false"/> + </a-form-item> + </a-col> + <a-col :md="3" :sm="3" :xs="3"> + <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> - <SelectDeviceDrawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'閫夋嫨璁惧'"></SelectDeviceDrawer> + <a-spin :spinning="spinning"> + <a-tabs tabPosition="top" id="custom-tabs"> + <a-tab-pane key="1" tab="鍥惧舰"> + <ComparativeAnalysisBar ref="AnalysisBar" :dataList='AnalysisBarList'/> + </a-tab-pane> + <a-tab-pane key="2" tab="浠〃" forceRender> + <ComparativeAnalysisGauge ref="AnalysisGauge" :dataList="AnalysisGauge"/> + </a-tab-pane> + <a-tab-pane key="3" tab="楗煎浘" forceRender> + <ComparativeAnalysisPie ref="AnalysisPie" :dataList="AnalysisPie"/> + </a-tab-pane> + </a-tabs> + </a-spin> + + <SelectDeviceDrawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'閫夋嫨璁惧'"/> </div> </template> <script> import moment from 'moment' - import $ from 'jquery' - import JDictSelectTag from '@/components/dict/JDictSelectTag' - import JDate from '../../../../../components/jeecg/JDate' - import { - requestPut, - deleteAction, - getAction - } from '@/api/manage' + import { getAction } from '@/api/manage' + import api from '@/api/mdc' import ComparativeAnalysisBar from './ComparativeAnalysisBar' import ComparativeAnalysisGauge from './ComparativeAnalysisGauge' import ComparativeAnalysisPie from './ComparativeAnalysisPie' - import '@/components/table2excel/table2excel' - import JInput from '@/components/jeecg/JInput' - import JEllipsis from '@/components/jeecg/JEllipsis' - import Tooltip from 'ant-design-vue/es/tooltip' - import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' - import api from '@/api/mdc' import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer.vue' export default { name: 'ComparativeAnalysisMain', - // mixins: [JeecgListMixin], components: { - Tooltip, ComparativeAnalysisBar, ComparativeAnalysisGauge, ComparativeAnalysisPie, - JDictSelectTag, - JInput, - JDate, - JEllipsis, SelectDeviceDrawer }, props: { nodeTree: '', Type: '', nodePeople: '' }, data() { return { - activeKey: '1', typeTree: '', typeParent: 1, typeEquipment: 1, @@ -112,38 +83,31 @@ AnalysisGauge: [], AnalysisPie: [], dates: [], - xianshi: '', - readOnly: true, queryParam: { equipmentId: '' }, queryParams: {}, queryParamEquip: {}, - queryParamPeople: {}, - dataStartsoucre: [], url: { comparativeAnalysis: '/mdc/efficiencyReport/comparativeAnalysis' }, AnalysisList: {}, - driveTypeList: [] + driveTypeList: [], + spinning: false } }, watch: { Type(valmath) { this.dataList = [] this.queryParams.typeTree = valmath - // console.log(this.queryParams.typeTree) }, nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 if (JSON.stringify(val) != '{}') { if (val.equipmentId) { - // this.$set(this.queryParam, 'tierName', val.title) this.queryParamEquip.parentId = '' - // this.queryParams.equipmentId = val.equipmentId this.queryParam.equipmentId = val.equipmentId this.queryParamEquip.equipmentId = val.equipmentId } else { - // this.$set(this.queryParam, 'tierName', val.title) this.queryParamEquip.parentId = val.key this.queryParams.equipmentId = '' } @@ -153,12 +117,10 @@ nodePeople(val) { if (JSON.stringify(val) != '{}') { if (val.equipmentId) { - // this.$set(this.queryParam, 'tierName', val.title) this.queryParamEquip.parentId = '' this.queryParams.equipmentId = val.equipmentId this.queryParamEquip.equipmentId = val.equipmentId } else { - // this.$set(this.queryParam, 'tierName', val.title) this.queryParamEquip.parentId = val.key this.queryParams.equipmentId = '' } @@ -166,17 +128,29 @@ } } }, + created() { + this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)] + this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') + this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') + this.queryParam.typeTree = '1' + this.loadAnalysis() + this.getDriveTypeByApi() + }, + mounted() { + const tabsBar = document.querySelector('#custom-tabs .ant-tabs-bar') + const tabsContent = document.querySelector('#custom-tabs .ant-tabs-content') + const tabsBarHeight = window.getComputedStyle(tabsBar).height + const tabsBarMarginBottom = window.getComputedStyle(tabsBar).marginBottom + tabsContent.style.height = `calc(100% - ${tabsBarHeight} - ${tabsBarMarginBottom})` + }, methods: { - tabChange(val) { - this.activeKey = val - }, dateParamChange(v1, v2) { - // console.log(v1,v2) this.queryParam.startTime = v2[0] this.queryParam.endTime = v2[1] - console.log(v2[0], v2[1]) }, + loadAnalysis() { + this.spinning = true getAction(this.url.comparativeAnalysis, this.queryParam).then(res => { if (res.success) { this.AnalysisList = res.result @@ -187,51 +161,27 @@ this.$message.warning(res.message) } }).finally(() => { - this.loading = false + this.spinning = false }) }, - searchQuery() { - if (this.dates && this.dates.length > 0) { - this.AnalysisList = [] - this.AnalysisBarList = [] - this.AnalysisGauge = [] - this.AnalysisPie = [] - if (this.queryParams.typeTree == '1') { - this.queryParams.parentId = this.queryParamEquip.parentId - // this.queryParams.equipmentId = this.queryParamEquip.equipmentId - } else { - this.queryParams.parentId = this.queryParamEquip.parentId - // this.queryParams.equipmentId = "" - } - this.AnalysisList = [] - //鑾峰彇鏌ヨ鏉′欢 - this.queryParam.parentId = this.queryParams.parentId - // this.queryParam.equipmentId = this.queryParams.equipmentId - this.queryParam.typeTree = this.queryParams.typeTree - getAction(this.url.comparativeAnalysis, this.queryParam).then((res) => { - if (res.success) { - this.AnalysisList = res.result - this.AnalysisBarList = res.result.graphics - this.AnalysisGauge = res.result.meters - this.AnalysisPie.push(res.result.pieCharts) - } else { - // this.$message.warning(res.message) - this.$notification.warning({ - message: '娑堟伅', - description: res.message - }) - } - }).finally(() => { - this.loading = false - }) - } else { - this.$notification.warning({ - message: '鎻愮ず', - description: '璇烽�夋嫨鏃堕棿' - }) - } + searchQuery() { + this.AnalysisList = [] + this.AnalysisBarList = [] + this.AnalysisGauge = [] + this.AnalysisPie = [] + if (this.queryParams.typeTree == '1') { + this.queryParams.parentId = this.queryParamEquip.parentId + } else { + this.queryParams.parentId = this.queryParamEquip.parentId + } + this.AnalysisList = [] + //鑾峰彇鏌ヨ鏉′欢 + this.queryParam.parentId = this.queryParams.parentId + this.queryParam.typeTree = this.queryParams.typeTree + this.loadAnalysis() }, + searchReset() { this.AnalysisList = [] this.AnalysisBarList = [] @@ -243,7 +193,11 @@ this.typeEquipment = this.queryParams.equipmentId this.queryParams = {} this.queryParam = {} - this.dates = [] + this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)] + this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') + this.queryParams.startTime = moment(this.dates[0]).format('YYYYMMDD') + this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') + this.queryParams.endTime = moment(this.dates[1]).format('YYYYMMDD') this.queryParams.typeTree = this.typeTree this.queryParams.parentId = this.typeParent if (this.queryParams.parentId != '') { @@ -255,29 +209,17 @@ this.queryParams.equipmentId = this.queryParamEquip.equipmentId } } - getAction(this.url.comparativeAnalysis, this.queryParams).then((res) => { - if (res.success) { - this.AnalysisList = res.result - this.AnalysisBarList = res.result.graphics - this.AnalysisGauge = res.result.meters - this.AnalysisPie.push(res.result.pieCharts) - } else { - // this.$message.warning(res.message) - this.$notification.warning({ - message: '娑堟伅', - description: res.message - }) - } - }).finally(() => { - this.loading = false - }) } else { this.typeTree = this.queryParams.typeTree this.typeParent = this.queryParams.parentId this.typeEquipment = this.queryParams.equipmentId this.queryParams = {} this.queryParam = {} - this.dates = [] + this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)] + this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') + this.queryParams.startTime = moment(this.dates[0]).format('YYYYMMDD') + this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') + this.queryParams.endTime = moment(this.dates[1]).format('YYYYMMDD') this.queryParams.typeTree = this.typeTree this.queryParams.parentId = this.typeParent if (this.queryParams.parentId != '') { @@ -289,24 +231,10 @@ this.queryParams.equipmentId = this.queryParamEquip.equipmentId } } - getAction(this.url.comparativeAnalysis, this.queryParams).then((res) => { - if (res.success) { - this.AnalysisList = res.result - this.AnalysisBarList = res.result.graphics - this.AnalysisGauge = res.result.meters - this.AnalysisPie.push(res.result.pieCharts) - } else { - // this.$message.warning(res.message) - this.$notification.warning({ - message: '娑堟伅', - description: res.message - }) - } - }).finally(() => { - this.loading = false - }) } + this.loadAnalysis() }, + /** * 璋冪敤鎺ュ彛鑾峰彇鎺у埗绯荤粺绫诲瀷 */ @@ -315,6 +243,7 @@ this.driveTypeList = res.result.map(item => item.value) }) }, + /** * 鑱旀兂杈撳叆妗嗙瓫閫夊姛鑳� * @param input 杈撳叆鐨勫唴瀹� @@ -326,119 +255,8 @@ option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0 ) }, - // onChange(value, dateString) { - // // console.log('Selected Time: ', value); - // // console.log('Formatted Selected Time: ', dateString); - // }, - // searchReset() { - // if(this.queryParams.typeTree == "1"){ - // this.typeTree = this.queryParams.typeTree - // this.typeParent = this.queryParams.parentId - // this.typeEquipment = this.queryParams.equipmentId - // this.queryParams = {} - // this.queryParam = {} - // this.dates = [] - // this.queryParams.typeTree = this.typeTree - // this.queryParams.parentId = this.typeParent - // if(this.queryParams.parentId != ""){ - // this.queryParams.equipmentId = "" - // }else{ - // if(this.queryParams.equipmentId == this.queryParamEquip.equipmentId){ - // this.queryParams.equipmentId = this.typeEquipment - // }else{ - // this.queryParams.equipmentId = this.queryParamEquip.equipmentId - // } - // - // } - // - // this.ipagination.current = 1 - // this.ResetloadData(); - // }else{ - // this.typeTree = this.queryParams.typeTree - // this.typeParent = this.queryParams.parentId - // // this.typeEquipment = this.queryParams.equipmentId - // this.queryParams = {} - // this.queryParam = {} - // this.dates = [] - // this.queryParams.typeTree = this.typeTree - // this.queryParams.parentId = this.typeParent - // // this.queryParams.equipmentId = this.typeEquipment - // this.ipagination.current = 1 - // this.ResetloadData(); - // } - // - // }, - // ResetloadData() { - // if(!this.url.list){ - // this.$message.error("璇疯缃畊rl.list灞炴��!") - // return - // } - // var params = {} - // params.typeTree = this.queryParams.typeTree - // params.parentId = this.queryParams.parentId - // params.equipmentId = this.queryParams.equipmentId - // this.loading = true; - // getAction(this.url.list, params).then((res) => { - // if (res.success) { - // this.dataSource = res.result.records||res.result; - // }else{ - // this.$message.warning(res.message) - // } - // }).finally(() => { - // this.loading = false - // }) - // }, - // searchQuery(){ - // if(this.queryParams.typeTree == "1"){ - // this.queryParams.parentId = this.queryParamEquip.parentId - // // this.queryParams.equipmentId = this.queryParamEquip.equipmentId - // - // }else{ - // this.queryParams.parentId = this.queryParamPeople.parentId - // - // // this.queryParams.equipmentId = "" - // } - // this.dataSource = []; - // //鑾峰彇鏌ヨ鏉′欢 - // let param = {} - // param.parentId = this.queryParams.parentId; - // param.equipmentId = this.queryParams.equipmentId; - // param.startTime = this.queryParam.startTime; - // param.driveType = this.queryParam.driveType; - // param.endTime = this.queryParam.endTime; - // getAction(this.url.list,param).then((res) => { - // if(res.success){ - // this.dataSource = res.result.records||res.result; - // }else{ - // this.$message.warning(res.message) - // } - // }).finally(() => { - // this.loading = false - // }) - // }, - // loadData() { - // if(!this.url.list){ - // this.$message.error("璇疯缃畊rl.list灞炴��!") - // return - // } - // //鍔犺浇鏁版嵁 鑻ヤ紶鍏ュ弬鏁�1鍒欏姞杞界涓�椤电殑鍐呭 - // var params = {} - // this.loading = true; - // params.startTime = this.queryParam.startTime; - // params.endTime = this.queryParam.endTime; - // params.typeTree = this.queryParams.typeTree - // getAction(this.url.list, params).then((res) => { - // if (res.success) { - // this.dataSource = res.result.records||res.result; - // }else{ - // this.$message.warning(res.message) - // } - // }).finally(() => { - // this.loading = false - // }) - // }, + deviceSearch() { - console.log('瑙﹀彂') this.$refs.selectDeviceDrawer.visible = true this.$refs.selectDeviceDrawer.selectedRowKeys = [] this.$refs.selectDeviceDrawer.selectedRows = [] @@ -450,86 +268,60 @@ * @param data 宸查�夋嫨鐨勮澶� */ selectOK(data) { - // let params = {} - // params.equipmentIdList = [] - // for (var a = 0; a < data.length; a++) { - // params.equipmentIdList.push(data[a]) - // } - console.log('data=', data) this.queryParam.equipmentId = data.join(',') - console.log('queryParam', this.queryParam.equipmentId) } - }, - created() { - this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)] - this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') - this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') - this.queryParam.typeTree = '1' - this.loadAnalysis() - this.getDriveTypeByApi() } } </script> <style lang="less" scoped> - /*@import '~@assets/less/common.less';*/ + .device_list { + display: flex; + flex-direction: column; + overflow: hidden; + + /deep/ .ant-spin-nested-loading { + flex: 1; + overflow: hidden; + + .ant-spin-container { + height: 100%; + + .ant-tabs { + height: 100%; + overflow: hidden; + } + } + } + } @media screen and (min-width: 1920px) { .device_list { height: 811px !important; - overflow: scroll; } } @media screen and (min-width: 1680px) and (max-width: 1920px) { .device_list { height: 811px !important; - overflow: scroll; } } @media screen and (min-width: 1400px) and (max-width: 1680px) { .device_list { height: 663px !important; - overflow: scroll; } } @media screen and (min-width: 1280px) and (max-width: 1400px) { .device_list { height: 564px !important; - overflow: scroll; } } @media screen and (max-width: 1280px) { .device_list { height: 564px !important; - overflow: scroll; } - } - - /*.device_list{*/ - /*display: flex;*/ - /*}*/ - /*.device_list .table-page-search-wrapper{*/ - /**/ - /*}*/ - /deep/ .ant-card-body { - height: 100% !important; - } - - .device_list .com_box { - display: flex !important; - height: 100% !important; - flex-direction: column !important; - } - - .device_list .table-page-search-wrapper { - height: 6% !important; - } - - .device_list #DeviceList { - height: 90% !important; } </style> diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisPie.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisPie.vue index 70872cb..f5db383 100644 --- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisPie.vue +++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisPie.vue @@ -1,49 +1,44 @@ <template> - <div class="comparative_pie" style="width: 100%;height: 600px;display: flex;overflow: scroll"> - <div id="compAnalPie1" style="flex: 1;"></div> - <div id="compAnalPie2" style="flex: 1;"></div> + <div style="display: flex;height: 100%;overflow: auto"> + <div id="compAnalPie1" style="width:50%;height:600px"></div> + <div id="compAnalPie2" style="width:50%;height:600px"></div> </div> </template> <script> - import * as echarts from 'echarts' export default { - name: 'conparativeAnalysisPie', - props:{ dataList:''}, - data(){ - return{ - closeRate:0, - openRate:0, - usedRate:0, - waitRate:0, - RateList:[] + name: 'comparativeAnalysisPie', + props: { dataList: '' }, + data() { + return { + closeRate: 0, + openRate: 0, + usedRate: 0, + waitRate: 0, + RateList: [] } }, - created(){ - - }, - watch:{ - dataList(val){ + watch: { + dataList(val) { this.RateList = val - console.log(val) this.drawTu() - }, + } }, mounted() { this.drawTu() }, - methods:{ - drawTu(){ - let pieCompChart1 = this.$echarts.init(document.getElementById('compAnalPie1'),'macarons'); - let pieCompChart2 = this.$echarts.init(document.getElementById('compAnalPie2'),'macarons'); - let pieCompChartOption1 = { + methods: { + drawTu() { + let pieCompChart1 = this.$echarts.init(document.getElementById('compAnalPie1'), 'macarons') + let pieCompChart2 = this.$echarts.init(document.getElementById('compAnalPie2'), 'macarons') + let pieCompChartOption1 = { title: { x: 'center', subtext: '寮�鏈烘晥鐜�' }, tooltip: { trigger: 'item', - formatter: "{a} <br/>{b} : {c} ({d}%)" + formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', @@ -59,8 +54,8 @@ center: ['55%', '55%'], itemStyle: { normal: { - color: function (params) { - var colorList = ['#4169E1', '#A8A8A8']; + color: function(params) { + var colorList = ['#4169E1', '#A8A8A8'] return colorList[params.dataIndex] }, label: { @@ -70,18 +65,18 @@ } } }, - data: [{value: 0, name: '寮�鏈虹巼'}, - {value: 0, name: '鍏虫満鐜�'}] + data: [{ value: 0, name: '寮�鏈虹巼' }, + { value: 0, name: '鍏虫満鐜�' }] }] - }; - let pieCompChartOption2 = { + } + let pieCompChartOption2 = { title: { x: 'center', subtext: '杩愯鏁堢巼' }, tooltip: { trigger: 'item', - formatter: "{a} <br/>{b} : {c} ({d}%)" + formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', @@ -97,8 +92,8 @@ center: ['55%', '55%'], itemStyle: { normal: { - color: function (params) { - var colorList = ['#00ee00', '#FCCE10', '#A8A8A8']; + color: function(params) { + var colorList = ['#00ee00', '#FCCE10', '#A8A8A8'] return colorList[params.dataIndex] }, label: { @@ -108,37 +103,46 @@ } } }, - data: [{value: 0, name: '鍔犲伐鐜�'}, - {value: 0, name: '寰呮満鐜�'}, - {value: 0, name: '鍏虫満鐜�'}] + data: [{ value: 0, name: '鍔犲伐鐜�' }, + { value: 0, name: '寰呮満鐜�' }, + { value: 0, name: '鍏虫満鐜�' }] }] - }; - if(this.RateList != null){ - this.closeRate =[] - this.openRate =[] + } + if (this.RateList != null) { + this.closeRate = [] + this.openRate = [] this.usedRate = [] this.waitRate = [] - if(this.RateList.length>0){ - this.closeRate=this.RateList[0].closeRate - this.openRate=this.RateList[0].openRate - this.usedRate=this.RateList[0].processRate - this.waitRate=this.RateList[0].waitRate - pieCompChartOption1.series[0].data = [{value:(this.openRate * 100).toFixed(2), name:'寮�鏈虹巼'},{value:(this.closeRate * 100).toFixed(2), name:'鍏虫満鐜�'}]; - pieCompChartOption2.series[0].data = [{value:(this.usedRate * 100).toFixed(2), name:'鍔犲伐鐜�'},{value:(this.waitRate * 100).toFixed(2), name:'寰呮満鐜�'},{value:(this.closeRate * 100).toFixed(2), name:'鍏虫満鐜�'}]; - pieCompChart1.setOption(pieCompChartOption1); - pieCompChart2.setOption(pieCompChartOption2); - }else{ - pieCompChart1.setOption(pieCompChartOption1); - pieCompChart2.setOption(pieCompChartOption2); + if (this.RateList.length > 0) { + this.closeRate = this.RateList[0].closeRate + this.openRate = this.RateList[0].openRate + this.usedRate = this.RateList[0].processRate + this.waitRate = this.RateList[0].waitRate + pieCompChartOption1.series[0].data = [{ + value: (this.openRate * 100).toFixed(2), + name: '寮�鏈虹巼' + }, { value: (this.closeRate * 100).toFixed(2), name: '鍏虫満鐜�' }] + pieCompChartOption2.series[0].data = [{ + value: (this.usedRate * 100).toFixed(2), + name: '鍔犲伐鐜�' + }, { value: (this.waitRate * 100).toFixed(2), name: '寰呮満鐜�' }, { + value: (this.closeRate * 100).toFixed(2), + name: '鍏虫満鐜�' + }] + pieCompChart1.setOption(pieCompChartOption1) + pieCompChart2.setOption(pieCompChartOption2) + } else { + pieCompChart1.setOption(pieCompChartOption1) + pieCompChart2.setOption(pieCompChartOption2) } - }else{ - pieCompChart1.setOption(pieCompChartOption1); - pieCompChart2.setOption(pieCompChartOption2); + } else { + pieCompChart1.setOption(pieCompChartOption1) + pieCompChart2.setOption(pieCompChartOption2) } - pieCompChart1.setOption(pieCompChartOption1); - pieCompChart2.setOption(pieCompChartOption2); + pieCompChart1.setOption(pieCompChartOption1) + pieCompChart2.setOption(pieCompChartOption2) window.addEventListener('resize', function() { pieCompChart1.resize() pieCompChart2.resize() @@ -146,8 +150,4 @@ } } } -</script> - -<style scoped> - -</style> \ No newline at end of file +</script> \ No newline at end of file diff --git a/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue b/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue index 250d167..5a5ff50 100644 --- a/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue +++ b/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue @@ -16,17 +16,6 @@ <a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button> </a-space> </a-col> - <!--<a-col :md="2" :sm="2" :xs="2">--> - <!--<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>--> - <!--</a-col>--> - <!--<a-col :md="2" :sm="2">--> - <!--<!–//娌堥–>--> - <!--<a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button>--> - - <!--<!–<a-button type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button>–>--> - <!--</a-col>--> - - </a-row> </a-form> </div> diff --git a/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarModel.vue b/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarModel.vue index 477b7cb..f4121ea 100644 --- a/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarModel.vue +++ b/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarModel.vue @@ -10,7 +10,7 @@ <a-col :span="24"> <a-form-item label="璁惧缁�" :labelCol="labelColLong" :wrapperCol="wrapperColLong"> <a-input-search :readOnly="true" v-decorator="['equipmentId', validatorRules.equipmentId]" - @search="deviceSearch" enter-button placeholder="璇烽�夋嫨璁惧"/> + @search="deviceSearch" @click="deviceSearch" enter-button placeholder="璇烽�夋嫨璁惧"/> </a-form-item> </a-col> </a-row> @@ -341,35 +341,6 @@ </script> <style scoped lang="less"> - - /deep/ .ant-modal-close { - color: #1191b0; - font-size: 24px; - } - - /deep/ .ant-modal-close-x { - font-size: 24px; - } - - .ant-btn { - padding: 0 10px; - margin-left: 3px; - } - - .ant-form-item-control { - line-height: 0px; - } - - /** 涓昏〃鍗曡闂磋窛 */ - .ant-form .ant-form-item { - margin-bottom: 10px; - } - - /** Tab椤甸潰琛岄棿璺� */ - .ant-tabs-content .ant-form-item { - margin-bottom: 0px; - } - /deep/ .mark1 { color: white !important; background-color: #1890ff !important; diff --git a/src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue b/src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue index 8253a9b..0d1d0f2 100644 --- a/src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue +++ b/src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue @@ -39,39 +39,8 @@ </a-col> <a-col :md="4" :sm="4"> <a-form-item label="鏃堕棿"> - <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates" :allowClear="false"/> - </a-form-item> - </a-col> - <a-col :md="5" :sm="5" :xs="5"> - <a-form-item label="璁惧绾у埆"> - <a-select - :value="queryParams.deviceLevel" - mode="multiple" - placeholder="璇烽�夋嫨璁惧绾у埆" - allow-clear - :maxTagCount="1" - @change="selectChange($event,'deviceLevel')" - > - <a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index"> - {{item.label}} - </a-select-option> - </a-select> - </a-form-item> - </a-col> - <a-col :md="4" :sm="4" :xs="4"> - <a-form-item label="璁惧绉嶇被"> - <a-select - :value="queryParams.deviceCategory" - mode="multiple" - placeholder="璇烽�夋嫨璁惧绉嶇被" - allow-clear - :maxTagCount="1" - @change="selectChange($event,'deviceCategory')" - > - <a-select-option v-for="(item,index) in device_category_list" :value="item.value" :key="index"> - {{item.label}} - </a-select-option> - </a-select> + <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates" + :allowClear="false"/> </a-form-item> </a-col> </a-row> @@ -105,17 +74,23 @@ </a-form> </div> <a-spin :spinning="spinning"> - <div class="container" id="EfficiencyPO" style="margin-top: 20px;" > + <div class="container" id="EfficiencyPO" style="margin-top: 20px;"> <div class="table2"> - <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap" v-if="dataList.length>0"> + <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap" + v-if="dataList.length>0"> <thead> <tr class="thead fixed equipname"> - <th class="thgu dong1 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;height: 66px">鍏徃</th> - <th class="thgu dong2 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">杞﹂棿</th> - <th class="thgu dong3 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">宸ユ</th> - <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">璁惧缂栧彿</th> - <th class="thgu dong5 name" rowspan="2" style="min-width: 162px; max-width: 162px;width: 162px;">璁惧鍚嶇О</th> - <th class="thgu dong6 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">璁惧绫诲瀷</th> + <th class="thgu dong1 name" rowspan="2" + style="min-width: 50px; max-width: 50px;width: 50px;height: 66px">鍏徃 + </th> + <th class="thgu dong2 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">杞﹂棿</th> + <th class="thgu dong3 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">宸ユ</th> + <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">璁惧缂栧彿 + </th> + <th class="thgu dong5 name" rowspan="2" style="min-width: 162px; max-width: 162px;width: 162px;">璁惧鍚嶇О + </th> + <th class="thgu dong6 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">璁惧绫诲瀷 + </th> <!--<th rowspan="2">缁勫埆</th>--> <template v-for="(tableHead, index) in tableHeads"> <th class="timeth" :colspan="checkedList.length">{{tableHead}}</th> @@ -135,44 +110,57 @@ <tbody> <tr class="mathData" v-for="(item, index) in dataList"> <template v-if="item.level1!=='鍚堣'&&item.level1!=='骞冲潎鍊�'"> - <td class="tdgu kaitou" :rowspan="item.level1span" :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis"> + <td class="tdgu kaitou" :rowspan="item.level1span" + :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis"> <div class="wenzi"> {{item.level1}} </div> </td> - <td class="tdgu1 kaitou" :rowspan="item.level2span" :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis"> + <td class="tdgu1 kaitou" :rowspan="item.level2span" + :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis"> <div class="wenzi"> {{item.level2}} </div> </td> - <td class="tdgu2 kaitou" :rowspan="item.level3span" :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis"> + <td class="tdgu2 kaitou" :rowspan="item.level3span" + :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis"> <div class="wenzi"> {{item.level3}} </div> </td> - <td class="tdgu3 kaitou">{{item.equipmentId}}</td> - <td style="min-width: 162px; max-width: 162px;width: 162px;" class="tdgu4 kaitou">{{item.equipmentName}}</td> - <td class="tdgu5 kaitou">{{item.equipmentType}}</td> + <td class="tdgu3 kaitou">{{item.equipmentId}}</td> + <td style="min-width: 162px; max-width: 162px;width: 162px;" class="tdgu4 kaitou"> + {{item.equipmentName}} + </td> + <td class="tdgu5 kaitou">{{item.equipmentType}}</td> </template> <template v-else> <td colspan="6" class="tdgu kaitou">{{item.level1}}</td> </template> <template v-for="(tableHead, index) in item.dataList"> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('lyl') > -1">{{tableHead.startRate | numFilter}}</td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjl') > -1"> + <td :style="{background:tableHead.color,minWidth:'100px',width:'100px' }" + v-if="checkedList.indexOf('lyl') > -1"> + {{tableHead.startRate | numFilter}} + </td> + <td :style="{background:tableHead.color,minWidth:'100px',width:'100px' }" + v-if="checkedList.indexOf('kjl') > -1"> {{tableHead.openRate | numFilter}} </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjsj') > -1"> + <td :style="{background:tableHead.color,minWidth:'110px',width:'110px' }" + v-if="checkedList.indexOf('kjsj') > -1"> {{tableHead.openLong | getFormattedTime}} </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('jgsj') > -1"> + <td :style="{background:tableHead.color ,minWidth:'110px',width:'110px'}" + v-if="checkedList.indexOf('jgsj') > -1"> {{tableHead.processLong | getFormattedTime}} </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('djsj') > -1"> + <td :style="{background:tableHead.color,minWidth:'110px' ,width:'110px'}" + v-if="checkedList.indexOf('djsj') > -1"> {{tableHead.waitLong | getFormattedTime}} </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('gjsj') > -1"> + <td :style="{background:tableHead.color,minWidth:'110px',width:'110px' }" + v-if="checkedList.indexOf('gjsj') > -1"> {{tableHead.closeLong | getFormattedTime}} </td> </template> @@ -187,541 +175,540 @@ </template> <script> -import moment from 'moment' -import { putAction, getAction } from '@/api/manage' -import $ from 'jquery' -import '@/components/table2excel/table2excel' -import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' -import api from '@/api/mdc' + import moment from 'moment' + import { putAction, getAction } from '@/api/manage' + import $ from 'jquery' + import '@/components/table2excel/table2excel' + import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' + import api from '@/api/mdc' -export default { - name: 'EfficiencyPOList', - components: {}, - data() { - return { - typeTree:"", - typeParent:1, - typeEquipment:1, - dates: [], - equipmentTypeList:[], - driveTypeList:[], - device_level_list: [], - device_category_list: [], - queryParam: {}, - queryParams: { - equipmentType: [], - driveType: [], - deviceLevel: [], - deviceCategory: [] - }, - queryParamEquip:{}, - queryParamPeople:{}, - identifying: [], - efficiencyOptions: [ - { label: '寮�鍔ㄧ巼', value: 'lyl' }, - { label: '寮�鏈虹巼', value: 'kjl' }, - { label: '寮�鏈烘椂闂�', value: 'kjsj' }, - { label: '鍔犲伐鏃堕棿', value: 'jgsj' }, - { label: '寰呮満鏃堕棿', value: 'djsj' }, - { label: '鍏虫満鏃堕棿', value: 'gjsj' } - ], - checkedList: ['lyl'], - dataList: [], - url: { - list: '/mdc/efficiencyReport/efficiencyPOList', - listByType: '/mdc/MdcUtilizationRate/getByType', - queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType' - }, - tableHeads: [], - spinning:false - } - }, - props: { nodeTree: '', Type:'',nodePeople: ''}, - created() { - this.showIdentifying() - this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)] - this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') - this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') - this.queryParam.typeTree = "1" - this.loadData() - this.queryGroup() - this.getDriveTypeByApi() - this.initDictData('device_level') - this.initDictData('device_category') - }, - mounted() { - window.addEventListener('resize', this.handleWindowResize) - this.handleWindowResize() - }, - watch: { - Type(valmath){ - this.dataList = []; - this.queryParam.typeTree = valmath - }, - nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 - if (JSON.stringify(val) != '{}') { - if (val.equipmentId != null) { - this.queryParamEquip.parentId = '' - this.queryParamEquip.equipmentId = val.equipmentId - } else { - this.queryParamEquip.parentId = val.key - this.queryParamEquip.equipmentId = '' - } - this.searchQuery() + export default { + name: 'EfficiencyPOList', + components: {}, + data() { + return { + typeTree: '', + typeParent: 1, + typeEquipment: 1, + dates: [], + equipmentTypeList: [], + driveTypeList: [], + device_level_list: [], + device_category_list: [], + queryParam: {}, + queryParams: { + equipmentType: [], + driveType: [], + deviceLevel: [], + deviceCategory: [] + }, + queryParamEquip: {}, + queryParamPeople: {}, + identifying: [], + efficiencyOptions: [ + { label: '寮�鍔ㄧ巼', value: 'lyl' }, + { label: '寮�鏈虹巼', value: 'kjl' }, + { label: '寮�鏈烘椂闂�', value: 'kjsj' }, + { label: '鍔犲伐鏃堕棿', value: 'jgsj' }, + { label: '寰呮満鏃堕棿', value: 'djsj' }, + { label: '鍏虫満鏃堕棿', value: 'gjsj' } + ], + checkedList: ['lyl'], + dataList: [], + url: { + list: '/mdc/efficiencyReport/efficiencyPOList', + listByType: '/mdc/MdcUtilizationRate/getByType', + queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType' + }, + tableHeads: [], + spinning: false } }, - nodePeople(val){ - if (JSON.stringify(val) != '{}') { - if (val.equipmentId != null) { - this.queryParamPeople.parentId = val.equipmentId - this.queryParamPeople.equipmentId = '' - } else { - this.queryParamPeople.parentId = val.key - this.queryParamPeople.equipmentId = '' - } - this.searchQuery() - } - } - }, - filters: { - numFilter(value) { - if (value) { - return parseFloat((value * 100).toFixed(2)) - } else { - return '0' - } - }, - - /** - * 鏍煎紡鍖栨椂闂� - * @param seconds 绉掓暟 - * @returns '' 鏍煎紡鍖栧悗鏃堕棿瀛楃涓� - */ - getFormattedTime(seconds) { - if (seconds) { - return parseFloat((seconds / 3600).toFixed(2)) - } else { - return '0' - } - }, - }, - methods: { - initDictData(dictCode) { - // //浼樺厛浠庣紦瀛樹腑璇诲彇瀛楀吀閰嶇疆 - if (getDictItemsFromCache(dictCode)) { - this[dictCode + '_list'] = getDictItemsFromCache(dictCode) - return - } - //鏍规嵁瀛楀吀Code, 鍒濆鍖栧瓧鍏告暟缁� - ajaxGetDictItems(dictCode, null).then((res) => { - if (res.success) { - this[dictCode + '_list'] = res.result - return - } - }) - }, - selectChange(value, key) { - this.queryParams[key] = value - }, - checkSameData(dataList){ - let cache = {}; //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 - let indices = []; //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� - dataList.map((item,index)=>{ - let level1 = item.level1; - let _index = cache[level1]; - if(_index!==undefined){ - indices[_index].push(index) - }else{ - cache[level1] = indices.length - indices.push([index]) - } - }) - let result = []; - indices.map((item)=>{ - item.map((index)=>{ - result.push(dataList[index]) - }) - }) - this.dataList = result - }, - checkSameData1(dataList){ - let cache = {}; //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 - let indices = []; //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� - dataList.map((item,index)=>{ - let level2 = item.level2; - let _index = cache[level2]; - if(_index!==undefined){ - indices[_index].push(index) - }else{ - cache[level2] = indices.length - indices.push([index]) - } - }) - let result = []; - indices.map((item)=>{ - item.map((index)=>{ - result.push(dataList[index]) - }) - }) - this.dataList = result - }, - checkSameData2(dataList){ - let cache = {}; //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 - let indices = []; //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� - dataList.map((item,index)=>{ - let level3 = item.level3; - let _index = cache[level3]; - if(_index!==undefined){ - indices[_index].push(index) - }else{ - cache[level3] = indices.length - indices.push([index]) - } - }) - let result = []; - indices.map((item)=>{ - item.map((index)=>{ - result.push(dataList[index]) - }) - }) - this.dataList = result - }, - // 鍚堝苟 - combineCell() { - console.log(this.dataList) - let list =this.dataList; - for (let field in list[0]) { - var k = 0; - while (k < list.length) { - list[k][field + 'span'] = 1; - list[k][field + 'dis'] = false; - for (var i = k + 1; i <= list.length - 1; i++) { - if (list[k][field] == list[i][field] && list[k][field] != '') { - list[k][field + 'span']++; - list[k][field + 'dis'] = false; - list[i][field + 'span'] = 1; - list[i][field + 'dis'] = true; - } else { - break; - } - } - k = i; - } - } - return list; - }, - disabledDate(current){ - //Can not slect days before today and today - return current && current > moment().subtract('days', 1); - }, - initDeviceType(deviceList) { - let dictCode = 'mdc_equipmentType' - let items = [] - items = getDictItemsFromCache(dictCode) - if (deviceList && items.length > 0) { - for (let a = 0; a < deviceList.length; a++) { - if (items && items.length > 0) { - for (let i = 0; i < items.length; i++) { - if (deviceList[a].equipmentType == items[i].value) { - deviceList[a].equipmentType = items[i].title - } - } - } else { - ajaxGetDictItems(dictCode, null).then((res) => { - if (res.success) { - let items = res.result - for (let i = 0; i < items.length; i++) { - if (deviceList[a].equipmentType == items[i].value) { - deviceList[a].equipmentType = items[i].title - } - } - } - }) - } - } - } - }, - exportExcel() { - $("#EfficiencyPO").table2excel({ - exclude: ".noExl", - name: "Excel Document Name", - filename: "璁惧寮�鍔ㄧ巼", - exclude_img: true, - fileext: ".xls", - exclude_links: true, - exclude_inputs: true - }); - }, - showIdentifying() { - getAction(this.url.listByType, { type: 'kdl' }).then(res => { - if (res.success) { - this.identifying = res.result - } - }) - }, - dateParamChange(v1, v2) { - this.queryParam.startTime = v2[0] - this.queryParam.endTime = v2[1] - // 鐐瑰嚮鏃堕棿閫夋嫨鍣ㄧ殑娓呯┖鎸夐挳鏃朵細瑙﹀彂姝ゅ垽鏂�(鐐瑰嚮閲嶇疆鎸夐挳涓嶄細瑙﹀彂)锛屽疄鐜伴噸缃垪琛ㄥ姛鑳斤紝鍒囧疄鏀瑰彉鍒楄〃鏄剧ず鏁堟灉 - if(!this.queryParam.startTime&&!this.queryParam.endTime)this.searchReset() - }, - efficiencyOptionsOnChange(checkedList) { - // let index = checkedList.indexOf('lyl') - // if (index < 0) { - // // this.$message.warn('涓嶈兘鍙栨秷鏌ヨ鍒╃敤鐜�') - // this.$notification.warning({ - // message:'娑堟伅', - // description:"涓嶈兘鍙栨秷鏌ヨ鍒╃敤鐜�" - // }) - // return false - // } - this.checkedList = checkedList - }, - searchQuery() { - if(this.queryParam.typeTree == "1"){ - this.queryParam.parentId = this.queryParamEquip.parentId - this.queryParam.equipmentId = this.queryParamEquip.equipmentId - }else{ - this.queryParam.parentId = this.queryParamPeople.parentId - this.queryParam.equipmentId = "" - } - Object.keys(this.queryParams).forEach(item => { - this.queryParam[item] = this.queryParams[item].join() - // 姝ゅ涓轰繚璇佹帴鍙e弬鏁颁笉澶氫綑锛屽彲鐪佺暐 - if (this.queryParams[item].length === 0) delete this.queryParam[item] - }) - this.loadData() - }, - searchReset() { - this.typeTree = this.queryParam.typeTree - this.typeParent = this.queryParam.parentId - this.typeEquipment = this.queryParam.equipmentId - this.queryParam = {} - this.queryParam.typeTree = this.typeTree - this.queryParam.parentId = this.typeParent - this.queryParam.equipmentId = this.typeEquipment + props: { nodeTree: '', Type: '', nodePeople: '' }, + created() { + this.showIdentifying() this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)] this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') - // this.ipagination.current = 1 - this.queryParams = { - equipmentType: [], - driveType: [], - deviceLevel: [], - deviceCategory: [] - } - this.loadData(); + this.queryParam.typeTree = '1' + this.loadData() + this.queryGroup() + this.getDriveTypeByApi() + this.initDictData('device_level') + this.initDictData('device_category') }, - loadData() { - this.spinning=true - this.tableHeads = [] - this.dataList = [] - getAction(this.url.list, this.queryParam).then(res => { - if (res.success) { - // console.log(res.result) - this.tableHeads = res.result.dates - this.dataList = res.result.mdcEfficiencyList - if (res.result.mdcEfficiencyList && !res.result.mdcEfficiencyList.length) { - this.$notification.info({ + mounted() { + window.addEventListener('resize', this.handleWindowResize) + this.handleWindowResize() + }, + watch: { + Type(valmath) { + this.dataList = [] + this.queryParam.typeTree = valmath + }, + nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 + if (JSON.stringify(val) != '{}') { + if (val.equipmentId != null) { + this.queryParamEquip.parentId = '' + this.queryParamEquip.equipmentId = val.equipmentId + } else { + this.queryParamEquip.parentId = val.key + this.queryParamEquip.equipmentId = '' + } + this.searchQuery() + } + }, + nodePeople(val) { + if (JSON.stringify(val) != '{}') { + if (val.equipmentId != null) { + this.queryParamPeople.parentId = val.equipmentId + this.queryParamPeople.equipmentId = '' + } else { + this.queryParamPeople.parentId = val.key + this.queryParamPeople.equipmentId = '' + } + this.searchQuery() + } + } + }, + filters: { + numFilter(value) { + if (value) { + return parseFloat((value * 100).toFixed(2)) + } else { + return '0' + } + }, + + /** + * 鏍煎紡鍖栨椂闂� + * @param seconds 绉掓暟 + * @returns '' 鏍煎紡鍖栧悗鏃堕棿瀛楃涓� + */ + getFormattedTime(seconds) { + if (seconds) { + return parseFloat((seconds / 3600).toFixed(2)) + } else { + return '0' + } + } + }, + methods: { + initDictData(dictCode) { + // //浼樺厛浠庣紦瀛樹腑璇诲彇瀛楀吀閰嶇疆 + if (getDictItemsFromCache(dictCode)) { + this[dictCode + '_list'] = getDictItemsFromCache(dictCode) + return + } + //鏍规嵁瀛楀吀Code, 鍒濆鍖栧瓧鍏告暟缁� + ajaxGetDictItems(dictCode, null).then((res) => { + if (res.success) { + this[dictCode + '_list'] = res.result + return + } + }) + }, + selectChange(value, key) { + this.queryParams[key] = value + }, + checkSameData(dataList) { + let cache = {} //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 + let indices = [] //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� + dataList.map((item, index) => { + let level1 = item.level1 + let _index = cache[level1] + if (_index !== undefined) { + indices[_index].push(index) + } else { + cache[level1] = indices.length + indices.push([index]) + } + }) + let result = [] + indices.map((item) => { + item.map((index) => { + result.push(dataList[index]) + }) + }) + this.dataList = result + }, + checkSameData1(dataList) { + let cache = {} //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 + let indices = [] //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� + dataList.map((item, index) => { + let level2 = item.level2 + let _index = cache[level2] + if (_index !== undefined) { + indices[_index].push(index) + } else { + cache[level2] = indices.length + indices.push([index]) + } + }) + let result = [] + indices.map((item) => { + item.map((index) => { + result.push(dataList[index]) + }) + }) + this.dataList = result + }, + checkSameData2(dataList) { + let cache = {} //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 + let indices = [] //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� + dataList.map((item, index) => { + let level3 = item.level3 + let _index = cache[level3] + if (_index !== undefined) { + indices[_index].push(index) + } else { + cache[level3] = indices.length + indices.push([index]) + } + }) + let result = [] + indices.map((item) => { + item.map((index) => { + result.push(dataList[index]) + }) + }) + this.dataList = result + }, + // 鍚堝苟 + combineCell() { + console.log(this.dataList) + let list = this.dataList + for (let field in list[0]) { + var k = 0 + while (k < list.length) { + list[k][field + 'span'] = 1 + list[k][field + 'dis'] = false + for (var i = k + 1; i <= list.length - 1; i++) { + if (list[k][field] == list[i][field] && list[k][field] != '') { + list[k][field + 'span']++ + list[k][field + 'dis'] = false + list[i][field + 'span'] = 1 + list[i][field + 'dis'] = true + } else { + break + } + } + k = i + } + } + return list + }, + disabledDate(current) { + //Can not slect days before today and today + return current && current > moment().subtract('days', 1) + }, + initDeviceType(deviceList) { + let dictCode = 'mdc_equipmentType' + let items = [] + items = getDictItemsFromCache(dictCode) + if (deviceList && items.length > 0) { + for (let a = 0; a < deviceList.length; a++) { + if (items && items.length > 0) { + for (let i = 0; i < items.length; i++) { + if (deviceList[a].equipmentType == items[i].value) { + deviceList[a].equipmentType = items[i].title + } + } + } else { + ajaxGetDictItems(dictCode, null).then((res) => { + if (res.success) { + let items = res.result + for (let i = 0; i < items.length; i++) { + if (deviceList[a].equipmentType == items[i].value) { + deviceList[a].equipmentType = items[i].title + } + } + } + }) + } + } + } + }, + exportExcel() { + $('#EfficiencyPO').table2excel({ + exclude: '.noExl', + name: 'Excel Document Name', + filename: '璁惧寮�鍔ㄧ巼', + exclude_img: true, + fileext: '.xls', + exclude_links: true, + exclude_inputs: true + }) + }, + showIdentifying() { + getAction(this.url.listByType, { type: 'kdl' }).then(res => { + if (res.success) { + this.identifying = res.result + } + }) + }, + dateParamChange(v1, v2) { + this.queryParam.startTime = v2[0] + this.queryParam.endTime = v2[1] + // 鐐瑰嚮鏃堕棿閫夋嫨鍣ㄧ殑娓呯┖鎸夐挳鏃朵細瑙﹀彂姝ゅ垽鏂�(鐐瑰嚮閲嶇疆鎸夐挳涓嶄細瑙﹀彂)锛屽疄鐜伴噸缃垪琛ㄥ姛鑳斤紝鍒囧疄鏀瑰彉鍒楄〃鏄剧ず鏁堟灉 + if (!this.queryParam.startTime && !this.queryParam.endTime) this.searchReset() + }, + efficiencyOptionsOnChange(checkedList) { + // let index = checkedList.indexOf('lyl') + // if (index < 0) { + // // this.$message.warn('涓嶈兘鍙栨秷鏌ヨ鍒╃敤鐜�') + // this.$notification.warning({ + // message:'娑堟伅', + // description:"涓嶈兘鍙栨秷鏌ヨ鍒╃敤鐜�" + // }) + // return false + // } + this.checkedList = checkedList + }, + searchQuery() { + if (this.queryParam.typeTree == '1') { + this.queryParam.parentId = this.queryParamEquip.parentId + this.queryParam.equipmentId = this.queryParamEquip.equipmentId + } else { + this.queryParam.parentId = this.queryParamPeople.parentId + this.queryParam.equipmentId = '' + } + Object.keys(this.queryParams).forEach(item => { + this.queryParam[item] = this.queryParams[item].join() + // 姝ゅ涓轰繚璇佹帴鍙e弬鏁颁笉澶氫綑锛屽彲鐪佺暐 + if (this.queryParams[item].length === 0) delete this.queryParam[item] + }) + this.loadData() + }, + searchReset() { + this.typeTree = this.queryParam.typeTree + this.typeParent = this.queryParam.parentId + this.typeEquipment = this.queryParam.equipmentId + this.queryParam = {} + this.queryParam.typeTree = this.typeTree + this.queryParam.parentId = this.typeParent + this.queryParam.equipmentId = this.typeEquipment + this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)] + this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') + this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') + // this.ipagination.current = 1 + this.queryParams = { + equipmentType: [], + driveType: [], + deviceLevel: [], + deviceCategory: [] + } + this.loadData() + }, + loadData() { + this.spinning = true + this.tableHeads = [] + this.dataList = [] + getAction(this.url.list, this.queryParam).then(res => { + if (res.success) { + // console.log(res.result) + this.tableHeads = res.result.dates + this.dataList = res.result.mdcEfficiencyList + if (res.result.mdcEfficiencyList && !res.result.mdcEfficiencyList.length) { + this.$notification.info({ + message: '娑堟伅', + description: '鏆傛棤璇ヨ澶囩被鍨嬫暟鎹�' + }) + } + this.checkSameData(this.dataList) + this.checkSameData1(this.dataList) + this.checkSameData2(this.dataList) + this.combineCell() + // this.initDeviceType(this.dataList) + } + }).finally(() => { + this.spinning = false + }) + }, + queryGroup() { + getAction(this.url.queryEquipmentType).then(res => { + if (res.success) { + this.equipmentTypeList = res.result.map(item => { + return { + label: item.equipmentTypeName, + value: item.equipmentTypeName + } + }) + } else { + // this.$message.warning(res.message) + this.$notification.warning({ message: '娑堟伅', - description: '鏆傛棤璇ヨ澶囩被鍨嬫暟鎹�' + description: res.message }) } - this.checkSameData(this.dataList) - this.checkSameData1(this.dataList) - this.checkSameData2(this.dataList) - this.combineCell(); - // this.initDeviceType(this.dataList) - } - }).finally(()=>{ - this.spinning=false - }) - }, - queryGroup() { - getAction(this.url.queryEquipmentType).then(res => { - if (res.success) { - this.equipmentTypeList = res.result.map(item => { - return { - label: item.equipmentTypeName, - value: item.equipmentTypeName - } - }) - } else { - // this.$message.warning(res.message) - this.$notification.warning({ - message: '娑堟伅', - description: res.message - }) - } - }).finally(() => { - this.loading = false - }) - }, + }).finally(() => { + this.loading = false + }) + }, - /** - * 璋冪敤鎺ュ彛鑾峰彇鎺у埗绯荤粺绫诲瀷 - */ - getDriveTypeByApi(){ - api.getDriveTypeApi().then((res)=>{ - if (res.success) this.driveTypeList = res.result - }) - }, + /** + * 璋冪敤鎺ュ彛鑾峰彇鎺у埗绯荤粺绫诲瀷 + */ + getDriveTypeByApi() { + api.getDriveTypeApi().then((res) => { + if (res.success) this.driveTypeList = res.result + }) + }, - /** - * 鍒嗚鲸鐜囨敼鍙樻椂鍚屾椂鏀瑰彉琛ㄦ牸楂樺害宸蹭繚璇侀椤典竴杩涘叆涓嶆嫋鍔ㄥ瀭鐩存粴鍔ㄦ潯鏃跺嵆鍙嫋鍔ㄨ〃鏍兼按骞虫粴鍔ㄦ潯 - */ - handleWindowResize() { - const tableContainer = document.getElementById('EfficiencyPO') // 琛ㄦ牸瀹瑰櫒 - const clientHeight = document.documentElement.clientHeight || document.body.clientHeight // 娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴� - const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top // 琛ㄦ牸瀹瑰櫒椤堕儴鍒版祻瑙堝櫒鍙鍖哄煙椤堕儴鐨勯棿璺� - tableContainer.style.height = (clientHeight - containerTopToClientTopHeight - 32) + 'px' + /** + * 鍒嗚鲸鐜囨敼鍙樻椂鍚屾椂鏀瑰彉琛ㄦ牸楂樺害宸蹭繚璇侀椤典竴杩涘叆涓嶆嫋鍔ㄥ瀭鐩存粴鍔ㄦ潯鏃跺嵆鍙嫋鍔ㄨ〃鏍兼按骞虫粴鍔ㄦ潯 + */ + handleWindowResize() { + const tableContainer = document.getElementById('EfficiencyPO') // 琛ㄦ牸瀹瑰櫒 + const clientHeight = document.documentElement.clientHeight || document.body.clientHeight // 娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴� + const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top // 琛ㄦ牸瀹瑰櫒椤堕儴鍒版祻瑙堝櫒鍙鍖哄煙椤堕儴鐨勯棿璺� + tableContainer.style.height = (clientHeight - containerTopToClientTopHeight - 32) + 'px' + } } } -} </script> <style scoped> -/*table鏍峰紡*/ -.table2{ - width: 100%; - height: 100%; - overflow: auto; -} + /*table鏍峰紡*/ + .table2 { + width: 100%; + height: 100%; + overflow: auto; + } -.table2 thead tr th:first-child, -.table tbody tr .tdgu{ - position: sticky; - left: 0; - z-index: 1; -} + .table2 thead tr th:first-child, + .table tbody tr .tdgu { + position: sticky; + left: 0; + z-index: 1; + } -.table tbody tr .wenzi{ - /*writing-mode: vertical-lr;*/ - /*text-orientation: upright;*/ - transform: rotate(360deg); - writing-mode: vertical-lr; - letter-spacing: 2px; -} + .table tbody tr .wenzi { + /*writing-mode: vertical-lr;*/ + /*text-orientation: upright;*/ + transform: rotate(360deg); + writing-mode: vertical-lr; + letter-spacing: 2px; + } -.table tbody tr .kaitou{ - z-index: 1; - background-color: white; -} + .table tbody tr .kaitou { + z-index: 1; + background-color: white; + } -.table tbody tr .tdgu1{ - position: sticky; - left: 50px; - z-index: 2; -} + .table tbody tr .tdgu1 { + position: sticky; + left: 50px; + z-index: 2; + } -.table tbody tr .tdgu2{ - position: sticky; - left: 100px; - z-index: 2; -} + .table tbody tr .tdgu2 { + position: sticky; + left: 100px; + z-index: 2; + } -.table tbody tr .tdgu3{ - position: sticky; - left: 150px; - z-index: 2; -} + .table tbody tr .tdgu3 { + position: sticky; + left: 150px; + z-index: 2; + } -.table tbody tr .tdgu4{ - position: sticky; - left: 250px; - z-index: 2; -} + .table tbody tr .tdgu4 { + position: sticky; + left: 250px; + z-index: 2; + } -.table tbody tr .tdgu5{ - position: sticky; - left: 412px; - z-index: 2; -} + .table tbody tr .tdgu5 { + position: sticky; + left: 412px; + z-index: 2; + } -.table2 thead tr .timeth, -.table2 thead tr .thgu { - position: sticky; - top:0; - z-index: 3; -} + .table2 thead tr .timeth, + .table2 thead tr .thgu { + position: sticky; + top: 0; + z-index: 3; + } -.table2 thead .gudingth th{ - position: sticky; - top: 32px; - z-index: 2; -} + .table2 thead .gudingth th { + position: sticky; + top: 32px; + z-index: 2; + } -.table2 thead .equipname .name{ - z-index: 3; -} + .table2 thead .equipname .name { + z-index: 3; + } -.table2 thead .equipname .dong1{ - z-index: 4; - left: 0; -} + .table2 thead .equipname .dong1 { + z-index: 4; + left: 0; + } -.table2 thead .equipname .dong2{ - z-index: 5; - left: 50px; -} + .table2 thead .equipname .dong2 { + z-index: 5; + left: 50px; + } + .table2 thead .equipname .dong3 { + z-index: 5; + left: 100px; + } -.table2 thead .equipname .dong3{ - z-index: 5; - left: 100px; -} + .table2 thead .equipname .dong4 { + z-index: 5; + left: 150px; + } -.table2 thead .equipname .dong4{ - z-index: 5; - left: 150px; -} + .table2 thead .equipname .dong5 { + z-index: 5; + left: 250px; + } -.table2 thead .equipname .dong5{ - z-index: 5; - left: 250px; -} + .table2 thead .equipname .dong6 { + z-index: 5; + left: 412px; + } -.table2 thead .equipname .dong6{ - z-index: 5; - left: 412px; -} + #EfficiencyPO { + overflow: hidden; + } -#EfficiencyPO{ - overflow: hidden; -} + .identifyingclass { + width: 55px; + height: 15px; + display: inline-block + } -.identifyingclass { - width: 55px; - height: 15px; - display: inline-block -} + .dataContent { + white-space: nowrap; + /*margin: 0;*/ + border-collapse: separate; + border-spacing: 0; + /*table-layout: fixed;*/ + border: 1px solid #ccc; + /*border: 1px solid #ccc;*/ + width: 100%; + /*height: 100%;*/ + /*overflow: hidden;*/ + /*overflow-y: auto;*/ + text-align: center; + } -.dataContent { - white-space: nowrap; - /*margin: 0;*/ - border-collapse: separate; - border-spacing: 0; - /*table-layout: fixed;*/ - border: 1px solid #ccc; - /*border: 1px solid #ccc;*/ - width: 100%; - /*height: 100%;*/ - /*overflow: hidden;*/ - /*overflow-y: auto;*/ - text-align: center; -} + .dataContent .thead th { + background-color: #fafafa; + text-align: center; + height: 30px; + padding: 5px; + } -.dataContent .thead th { - background-color: #fafafa; - text-align: center; - height: 30px; - padding: 5px; -} + .dataContent .notfixed th { + width: auto; + } -.dataContent .notfixed th { - width: auto; -} - -.dataContent .mathData td { - padding: 10px; -} -</style> \ No newline at end of file + .dataContent .mathData td { + padding: 10px; + } +</style> diff --git a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue index a5ab8df..7d87aeb 100644 --- a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue +++ b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue @@ -44,45 +44,13 @@ v-model="dates" :allowClear="false"/> </a-form-item> </a-col> - <a-col :md="5" :sm="5" :xs="5"> - <a-form-item label="璁惧绾у埆"> - <a-select - :value="queryParams.deviceLevel" - mode="multiple" - placeholder="璇烽�夋嫨璁惧绾у埆" - allow-clear - :maxTagCount="1" - @change="selectChange($event,'deviceLevel')" - > - <a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index"> - {{item.label}} - </a-select-option> - </a-select> - </a-form-item> - </a-col> - <a-col :md="5" :sm="5" :xs="5"> - <a-form-item label="璁惧绉嶇被"> - <a-select - :value="queryParams.deviceCategory" - mode="multiple" - placeholder="璇烽�夋嫨璁惧绉嶇被" - allow-clear - :maxTagCount="1" - @change="selectChange($event,'deviceCategory')" - > - <a-select-option v-for="(item,index) in device_category_list" :value="item.value" :key="index"> - {{item.label}} - </a-select-option> - </a-select> - </a-form-item> - </a-col> </a-row> <a-row :gutter="24" type="flex" align="middle"> <a-col :md="24" :sm="24" :xs="24" style="display: flex;justify-content: space-between;align-items: flex-start"> <div> - <a-space style="margin-right: 20px"> + <a-space style="margin-right: 20px;margin-bottom: 20px"> <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button> <a-button type="primary" @click="exportExcel" icon="download">瀵煎嚭</a-button> @@ -142,7 +110,6 @@ <th v-if="checkedList.indexOf('djsj') > -1">寰呮満鏃堕棿(灏忔椂)</th> <th v-if="checkedList.indexOf('gjsj') > -1">鍏虫満鏃堕棿(灏忔椂)</th> </template> - </tr> </thead> <tbody> @@ -180,22 +147,28 @@ </template> <template v-for="(tableHead, index) in item.dataList"> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('lyl') > -1"> + <td :style="{background:tableHead.color,minWidth:'100px',width:'100px'}" + v-if="checkedList.indexOf('lyl') > -1"> {{tableHead.utilizationRate | numFilter}} </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjl') > -1"> + <td :style="{background:tableHead.color,minWidth:'100px',width:'100px' }" + v-if="checkedList.indexOf('kjl') > -1"> {{tableHead.openRate | numFilter}} </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjsj') > -1"> + <td :style="{background:tableHead.color,minWidth:'110px',width:'110px' }" + v-if="checkedList.indexOf('kjsj') > -1"> {{tableHead.openLong | getFormattedTime}} </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('jgsj') > -1"> + <td :style="{background:tableHead.color,minWidth:'110px',width:'110px' }" + v-if="checkedList.indexOf('jgsj') > -1"> {{tableHead.processLong | getFormattedTime}} </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('djsj') > -1"> + <td :style="{background:tableHead.color,minWidth:'110px',width:'110px' }" + v-if="checkedList.indexOf('djsj') > -1"> {{tableHead.waitLong | getFormattedTime}} </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('gjsj') > -1"> + <td :style="{background:tableHead.color,minWidth:'110px',width:'110px' }" + v-if="checkedList.indexOf('gjsj') > -1"> {{tableHead.closeLong | getFormattedTime}} </td> </template> @@ -204,7 +177,6 @@ </tbody> </table> - </div> </div> </a-spin> @@ -213,547 +185,532 @@ </template> <script> - import moment from 'moment' - import { putAction, getAction } from '@/api/manage' - import $ from 'jquery' - import '@/components/table2excel/table2excel' - import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' - import api from '@/api/mdc' +import moment from 'moment' +import { putAction, getAction } from '@/api/manage' +import $ from 'jquery' +import '@/components/table2excel/table2excel' +import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' +import api from '@/api/mdc' - export default { - name: 'EfficiencyList', - components: {}, - data() { - return { - typeTree: '', - typeParent: 1, - typeEquipment: 1, - TreeIDOne: 1, - TreeIDTwo: 2, - deviceTypeDict: '', - dates: [], - equipmentTypeList: [], - driveTypeList: [], - device_level_list: [], - device_category_list: [], - identifying: [], - queryParam: {}, - queryParams: { - equipmentType: [], - driveType: [], - deviceLevel: [], - deviceCategory: [] - }, - queryParamEquip: {}, - queryParamPeople: {}, - efficiencyOptions: [ - { label: '鍒╃敤鐜�', value: 'lyl' }, - { label: '寮�鏈虹巼', value: 'kjl' }, - { label: '寮�鏈烘椂闂�', value: 'kjsj' }, - { label: '鍔犲伐鏃堕棿', value: 'jgsj' }, - { label: '寰呮満鏃堕棿', value: 'djsj' }, - { label: '鍏虫満鏃堕棿', value: 'gjsj' } - ], - checkedList: ['lyl'], - dataList: [], - url: { - list: '/mdc/efficiencyReport/efficiencyList', - listByType: '/mdc/MdcUtilizationRate/getByType', - queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType' - }, - tableHeads: [], - distinguishColorList: [], - utilizationRateRowAverage: '', - openRateRowAverage: '', - openLongRowAverage: '', - processLongRowAverage: '', - waitLongRowAverage: '', - closeLongRowAverage: '', - spinning: false +export default { + name: 'EfficiencyList', + components: {}, + data() { + return { + typeTree: '', + typeParent: 1, + typeEquipment: 1, + deviceTypeDict: '', + dates: [], + equipmentTypeList: [], + driveTypeList: [], + device_level_list: [], + device_category_list: [], + identifying: [], + queryParam: {}, + queryParams: { + equipmentType: [], + driveType: [], + deviceLevel: [], + deviceCategory: [] + }, + queryParamEquip: {}, + queryParamPeople: {}, + efficiencyOptions: [ + { label: '鍒╃敤鐜�', value: 'lyl' }, + { label: '寮�鏈虹巼', value: 'kjl' }, + { label: '寮�鏈烘椂闂�', value: 'kjsj' }, + { label: '鍔犲伐鏃堕棿', value: 'jgsj' }, + { label: '寰呮満鏃堕棿', value: 'djsj' }, + { label: '鍏虫満鏃堕棿', value: 'gjsj' } + ], + checkedList: ['lyl'], + dataList: [], + url: { + list: '/mdc/efficiencyReport/efficiencyList', + listByType: '/mdc/MdcUtilizationRate/getByType', + queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType' + }, + tableHeads: [], + distinguishColorList: [], + spinning: false + } + }, + props: { nodeTree: '', Type: '', nodePeople: '' }, + created() { + this.showIdentifying() + this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)] + this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') + this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') + this.queryParam.typeTree = '1' + this.loadData() + this.queryGroup() + this.getDriveTypeByApi() + this.initDictData('device_level') + this.initDictData('device_category') + }, + mounted() { + window.addEventListener('resize', this.handleWindowResize) + this.handleWindowResize() + }, + watch: { + Type(valmath) { + this.dataList = [] + this.queryParam.typeTree = valmath + }, + nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 + if (JSON.stringify(val) != '{}') { + if (val.equipmentId != null) { + this.queryParamEquip.parentId = '' + this.queryParamEquip.equipmentId = val.equipmentId + } else { + this.queryParamEquip.parentId = val.key + this.queryParamEquip.equipmentId = '' + } + this.searchQuery() } }, - props: { nodeTree: '', Type: '', nodePeople: '' }, - created() { - this.showIdentifying() + nodePeople(val) { + if (JSON.stringify(val) != '{}') { + if (val.equipmentId != null) { + this.queryParamPeople.parentId = val.equipmentId + this.queryParamPeople.equipmentId = '' + } else { + this.queryParamPeople.parentId = val.key + this.queryParamPeople.equipmentId = '' + } + this.searchQuery() + } + } + }, + filters: { + numFilter(value) { + if (value) { + return parseFloat((value * 100).toFixed(2)) + } else { + return '0' + } + }, + + /** + * 鏍煎紡鍖栨椂闂� + * @param seconds 绉掓暟 + * @returns '' 鏍煎紡鍖栧悗鏃堕棿瀛楃涓� + */ + getFormattedTime(seconds) { + if (seconds) { + return parseFloat((seconds / 3600).toFixed(2)) + } else { + return '0' + } + } + }, + computed: {}, + methods: { + initDictData(dictCode) { + // //浼樺厛浠庣紦瀛樹腑璇诲彇瀛楀吀閰嶇疆 + if (getDictItemsFromCache(dictCode)) { + this[dictCode + '_list'] = getDictItemsFromCache(dictCode) + return + } + //鏍规嵁瀛楀吀Code, 鍒濆鍖栧瓧鍏告暟缁� + ajaxGetDictItems(dictCode, null).then((res) => { + if (res.success) { + this[dictCode + '_list'] = res.result + return + } + }) + }, + selectChange(value, key) { + this.queryParams[key] = value + }, + checkSameData(dataList) { + let cache = {} //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 + let indices = [] //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� + dataList.map((item, index) => { + let level1 = item.level1 + let _index = cache[level1] + if (_index !== undefined) { + indices[_index].push(index) + } else { + cache[level1] = indices.length + indices.push([index]) + } + }) + let result = [] + indices.map((item) => { + item.map((index) => { + result.push(dataList[index]) + }) + }) + this.dataList = result + }, + checkSameData1(dataList) { + let cache = {} //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 + let indices = [] //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� + dataList.map((item, index) => { + let level2 = item.level2 + let _index = cache[level2] + if (_index !== undefined) { + indices[_index].push(index) + } else { + cache[level2] = indices.length + indices.push([index]) + } + }) + let result = [] + indices.map((item) => { + item.map((index) => { + result.push(dataList[index]) + }) + }) + this.dataList = result + }, + checkSameData2(dataList) { + let cache = {} //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 + let indices = [] //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� + dataList.map((item, index) => { + let level3 = item.level3 + let _index = cache[level3] + if (_index !== undefined) { + indices[_index].push(index) + } else { + cache[level3] = indices.length + indices.push([index]) + } + }) + let result = [] + indices.map((item) => { + item.map((index) => { + result.push(dataList[index]) + }) + }) + this.dataList = result + }, + // 鍚堝苟 + combineCell() { + console.log(this.dataList) + let list = this.dataList + for (let field in list[0]) { + var k = 0 + while (k < list.length) { + list[k][field + 'span'] = 1 + list[k][field + 'dis'] = false + for (var i = k + 1; i <= list.length - 1; i++) { + if (list[k][field] == list[i][field] && list[k][field] != '') { + list[k][field + 'span']++ + list[k][field + 'dis'] = false + list[i][field + 'span'] = 1 + list[i][field + 'dis'] = true + } else { + break + } + } + k = i + } + } + return list + }, + disabledDate(current) { + //Can not slect days before today and today + return current && current > moment().subtract('days', 1) + }, + initDeviceType(deviceList) { + let dictCode = 'mdc_equipmentType' + let items = [] + items = getDictItemsFromCache(dictCode) + if (deviceList && items.length > 0) { + for (let a = 0; a < deviceList.length; a++) { + if (items && items.length > 0) { + for (let i = 0; i < items.length; i++) { + if (deviceList[a].equipmentType == items[i].value) { + deviceList[a].equipmentType = items[i].title + } + } + } else { + ajaxGetDictItems(dictCode, null).then((res) => { + if (res.success) { + let items = res.result + for (let i = 0; i < items.length; i++) { + if (deviceList[a].equipmentType == items[i].value) { + deviceList[a].equipmentType = items[i].title + } + } + } + }) + } + } + } + }, + exportExcel() { + $('#Efficiency').table2excel({ + exclude: '.noExl', + name: 'Excel Document Name', + filename: '璁惧鍒╃敤鐜�', + exclude_img: true, + fileext: '.xls', + exclude_links: true, + exclude_inputs: false + }) + }, + showIdentifying() { + getAction(this.url.listByType, { type: 'lyl' }).then(res => { + if (res.success) { + this.identifying = res.result + } + }) + }, + dateParamChange(v1, v2) { + this.queryParam.startTime = v2[0] + this.queryParam.endTime = v2[1] + // 鐐瑰嚮鏃堕棿閫夋嫨鍣ㄧ殑娓呯┖鎸夐挳鏃朵細瑙﹀彂姝ゅ垽鏂�(鐐瑰嚮閲嶇疆鎸夐挳涓嶄細瑙﹀彂)锛屽疄鐜伴噸缃垪琛ㄥ姛鑳斤紝鍒囧疄鏀瑰彉鍒楄〃鏄剧ず鏁堟灉 + if (!this.queryParam.startTime && !this.queryParam.endTime) this.searchReset() + }, + efficiencyOptionsOnChange(checkedList) { + // let index = checkedList.indexOf('lyl') + // if (index < 0) { + // // this.$message.warn('涓嶈兘鍙栨秷鏌ヨ寮�鍔ㄧ巼') + // this.$notification.warning({ + // message: '娑堟伅', + // description: '涓嶈兘鍙栨秷鏌ヨ寮�鍔ㄧ巼' + // }) + // + // return false + // } + this.checkedList = checkedList + }, + searchQuery() { + if (this.queryParam.typeTree == '1') { + this.queryParam.parentId = this.queryParamEquip.parentId + this.queryParam.equipmentId = this.queryParamEquip.equipmentId + } else { + this.queryParam.parentId = this.queryParamPeople.parentId + this.queryParam.equipmentId = '' + } + Object.keys(this.queryParams).forEach(item => { + this.queryParam[item] = this.queryParams[item].join() + // 姝ゅ涓轰繚璇佹帴鍙e弬鏁颁笉澶氫綑锛屽彲鐪佺暐 + if (this.queryParams[item].length === 0) delete this.queryParam[item] + }) + this.loadData() + }, + searchReset() { + this.typeTree = this.queryParam.typeTree + this.typeParent = this.queryParam.parentId + this.typeEquipment = this.queryParam.equipmentId + this.queryParam = {} + this.queryParam.typeTree = this.typeTree + this.queryParam.parentId = this.typeParent + this.queryParam.equipmentId = this.typeEquipment this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)] this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') - this.queryParam.typeTree = '1' + this.queryParams = { + equipmentType: [], + driveType: [], + deviceLevel: [], + deviceCategory: [] + } this.loadData() - this.queryGroup() - this.getDriveTypeByApi() - this.initDictData('device_level') - this.initDictData('device_category') }, - mounted() { - window.addEventListener('resize', this.handleWindowResize) - this.handleWindowResize() - }, - watch: { - Type(valmath) { - this.dataList = [] - this.queryParam.typeTree = valmath - }, - nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 - if (JSON.stringify(val) != '{}') { - if (val.equipmentId != null) { - this.queryParamEquip.parentId = '' - this.queryParamEquip.equipmentId = val.equipmentId - } else { - this.queryParamEquip.parentId = val.key - this.queryParamEquip.equipmentId = '' - } - this.searchQuery() - } - }, - nodePeople(val) { - if (JSON.stringify(val) != '{}') { - if (val.equipmentId != null) { - this.queryParamPeople.parentId = val.equipmentId - this.queryParamPeople.equipmentId = '' - } else { - this.queryParamPeople.parentId = val.key - this.queryParamPeople.equipmentId = '' - } - this.searchQuery() - } - } - }, - filters: { - numFilter(value) { - if (value) { - return parseFloat((value * 100).toFixed(2)) - } else { - return '0' - } - }, - - /** - * 鏍煎紡鍖栨椂闂� - * @param seconds 绉掓暟 - * @returns '' 鏍煎紡鍖栧悗鏃堕棿瀛楃涓� - */ - getFormattedTime(seconds) { - if (seconds) { - return parseFloat((seconds / 3600).toFixed(2)) - } else { - return '0' - } - } - }, - computed: {}, - methods: { - initDictData(dictCode) { - // //浼樺厛浠庣紦瀛樹腑璇诲彇瀛楀吀閰嶇疆 - if (getDictItemsFromCache(dictCode)) { - this[dictCode + '_list'] = getDictItemsFromCache(dictCode) - return - } - //鏍规嵁瀛楀吀Code, 鍒濆鍖栧瓧鍏告暟缁� - ajaxGetDictItems(dictCode, null).then((res) => { - if (res.success) { - this[dictCode + '_list'] = res.result - return - } - }) - }, - selectChange(value, key) { - this.queryParams[key] = value - }, - checkSameData(dataList) { - let cache = {} //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 - let indices = [] //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� - dataList.map((item, index) => { - let level1 = item.level1 - let _index = cache[level1] - if (_index !== undefined) { - indices[_index].push(index) - } else { - cache[level1] = indices.length - indices.push([index]) - } - }) - let result = [] - indices.map((item) => { - item.map((index) => { - result.push(dataList[index]) - }) - }) - this.dataList = result - }, - checkSameData1(dataList) { - let cache = {} //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 - let indices = [] //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� - dataList.map((item, index) => { - let level2 = item.level2 - let _index = cache[level2] - if (_index !== undefined) { - indices[_index].push(index) - } else { - cache[level2] = indices.length - indices.push([index]) - } - }) - let result = [] - indices.map((item) => { - item.map((index) => { - result.push(dataList[index]) - }) - }) - this.dataList = result - }, - checkSameData2(dataList) { - let cache = {} //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 - let indices = [] //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� - dataList.map((item, index) => { - let level3 = item.level3 - let _index = cache[level3] - if (_index !== undefined) { - indices[_index].push(index) - } else { - cache[level3] = indices.length - indices.push([index]) - } - }) - let result = [] - indices.map((item) => { - item.map((index) => { - result.push(dataList[index]) - }) - }) - this.dataList = result - }, - // 鍚堝苟 - combineCell() { - console.log(this.dataList) - let list = this.dataList - for (let field in list[0]) { - var k = 0 - while (k < list.length) { - list[k][field + 'span'] = 1 - list[k][field + 'dis'] = false - for (var i = k + 1; i <= list.length - 1; i++) { - if (list[k][field] == list[i][field] && list[k][field] != '') { - list[k][field + 'span']++ - list[k][field + 'dis'] = false - list[i][field + 'span'] = 1 - list[i][field + 'dis'] = true - } else { - break - } - } - k = i - } - } - return list - }, - disabledDate(current) { - //Can not slect days before today and today - return current && current > moment().subtract('days', 1) - }, - initDeviceType(deviceList) { - let dictCode = 'mdc_equipmentType' - let items = [] - items = getDictItemsFromCache(dictCode) - if (deviceList && items.length > 0) { - for (let a = 0; a < deviceList.length; a++) { - if (items && items.length > 0) { - for (let i = 0; i < items.length; i++) { - if (deviceList[a].equipmentType == items[i].value) { - deviceList[a].equipmentType = items[i].title - } - } - } else { - ajaxGetDictItems(dictCode, null).then((res) => { - if (res.success) { - let items = res.result - for (let i = 0; i < items.length; i++) { - if (deviceList[a].equipmentType == items[i].value) { - deviceList[a].equipmentType = items[i].title - } - } - } - }) - } - } - } - }, - exportExcel() { - $('#Efficiency').table2excel({ - exclude: '.noExl', - name: 'Excel Document Name', - filename: '璁惧鍒╃敤鐜�', - exclude_img: true, - fileext: '.xls', - exclude_links: true, - exclude_inputs: false - }) - }, - showIdentifying() { - getAction(this.url.listByType, { type: 'lyl' }).then(res => { - if (res.success) { - this.identifying = res.result - } - }) - }, - dateParamChange(v1, v2) { - this.queryParam.startTime = v2[0] - this.queryParam.endTime = v2[1] - // 鐐瑰嚮鏃堕棿閫夋嫨鍣ㄧ殑娓呯┖鎸夐挳鏃朵細瑙﹀彂姝ゅ垽鏂�(鐐瑰嚮閲嶇疆鎸夐挳涓嶄細瑙﹀彂)锛屽疄鐜伴噸缃垪琛ㄥ姛鑳斤紝鍒囧疄鏀瑰彉鍒楄〃鏄剧ず鏁堟灉 - if (!this.queryParam.startTime && !this.queryParam.endTime) this.searchReset() - }, - efficiencyOptionsOnChange(checkedList) { - // let index = checkedList.indexOf('lyl') - // if (index < 0) { - // // this.$message.warn('涓嶈兘鍙栨秷鏌ヨ寮�鍔ㄧ巼') - // this.$notification.warning({ - // message: '娑堟伅', - // description: '涓嶈兘鍙栨秷鏌ヨ寮�鍔ㄧ巼' - // }) - // - // return false - // } - this.checkedList = checkedList - }, - searchQuery() { - if (this.queryParam.typeTree == '1') { - this.queryParam.parentId = this.queryParamEquip.parentId - this.queryParam.equipmentId = this.queryParamEquip.equipmentId - } else { - this.queryParam.parentId = this.queryParamPeople.parentId - this.queryParam.equipmentId = '' - } - Object.keys(this.queryParams).forEach(item => { - this.queryParam[item] = this.queryParams[item].join() - // 姝ゅ涓轰繚璇佹帴鍙e弬鏁颁笉澶氫綑锛屽彲鐪佺暐 - if (this.queryParams[item].length === 0) delete this.queryParam[item] - }) - this.loadData() - }, - searchReset() { - this.typeTree = this.queryParam.typeTree - this.typeParent = this.queryParam.parentId - this.typeEquipment = this.queryParam.equipmentId - this.queryParam = {} - this.queryParam.typeTree = this.typeTree - this.queryParam.parentId = this.typeParent - this.queryParam.equipmentId = this.typeEquipment - this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)] - this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') - this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') - this.queryParams = { - equipmentType: [], - driveType: [], - deviceLevel: [], - deviceCategory: [] - } - this.loadData() - }, - loadData() { - this.tableHeads = [] - this.dataList = [] - this.spinning = true - getAction(this.url.list, this.queryParam).then(res => { - if (res.success) { - this.tableHeads = res.result.dates - this.dataList = res.result.mdcEfficiencyList - if (res.result.mdcEfficiencyList && !res.result.mdcEfficiencyList.length) { - this.$notification.info({ - message: '娑堟伅', - description: '鏆傛棤璇ョ被鍨嬫暟鎹�' - }) - } - this.distinguishColorList = res.result.utilizationRateList - this.checkSameData(this.dataList) - this.checkSameData1(this.dataList) - this.checkSameData2(this.dataList) - this.combineCell() - } - }).finally(() => { - this.spinning = false - }) - }, - queryGroup() { - getAction(this.url.queryEquipmentType).then(res => { - if (res.success) { - this.equipmentTypeList = res.result.map(item => { - return { - label: item.equipmentTypeName, - value: item.equipmentTypeName - } - }) - } else { - this.$notification.warning({ + loadData() { + this.tableHeads = [] + this.dataList = [] + this.spinning = true + getAction(this.url.list, this.queryParam).then(res => { + if (res.success) { + this.tableHeads = res.result.dates + this.dataList = res.result.mdcEfficiencyList + if (res.result.mdcEfficiencyList && !res.result.mdcEfficiencyList.length) { + this.$notification.info({ message: '娑堟伅', - description: res.message + description: '鏆傛棤璇ョ被鍨嬫暟鎹�' }) } - }) - }, + this.distinguishColorList = res.result.utilizationRateList + this.checkSameData(this.dataList) + this.checkSameData1(this.dataList) + this.checkSameData2(this.dataList) + this.combineCell() + } + }).finally(() => { + this.spinning = false + }) + }, + queryGroup() { + getAction(this.url.queryEquipmentType).then(res => { + if (res.success) { + this.equipmentTypeList = res.result.map(item => { + return { + label: item.equipmentTypeName, + value: item.equipmentTypeName + } + }) + } else { + this.$notification.warning({ + message: '娑堟伅', + description: res.message + }) + } + }) + }, - /** - * 璋冪敤鎺ュ彛鑾峰彇鎺у埗绯荤粺绫诲瀷 - */ - getDriveTypeByApi() { - api.getDriveTypeApi().then((res) => { - if (res.success) this.driveTypeList = res.result - }) - }, + /** + * 璋冪敤鎺ュ彛鑾峰彇鎺у埗绯荤粺绫诲瀷 + */ + getDriveTypeByApi() { + api.getDriveTypeApi().then((res) => { + if (res.success) this.driveTypeList = res.result + }) + }, - /** - * 鍒嗚鲸鐜囨敼鍙樻椂鍚屾椂鏀瑰彉琛ㄦ牸楂樺害宸蹭繚璇侀椤典竴杩涘叆涓嶆嫋鍔ㄥ瀭鐩存粴鍔ㄦ潯鏃跺嵆鍙嫋鍔ㄨ〃鏍兼按骞虫粴鍔ㄦ潯 - */ - handleWindowResize() { - const tableContainer = document.getElementById('Efficiency') // 琛ㄦ牸瀹瑰櫒 - const clientHeight = document.documentElement.clientHeight || document.body.clientHeight // 娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴� - const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top // 琛ㄦ牸瀹瑰櫒椤堕儴鍒版祻瑙堝櫒鍙鍖哄煙椤堕儴鐨勯棿璺� - tableContainer.style.height = (clientHeight - containerTopToClientTopHeight - 32) + 'px' - } + /** + * 鍒嗚鲸鐜囨敼鍙樻椂鍚屾椂鏀瑰彉琛ㄦ牸楂樺害宸蹭繚璇侀椤典竴杩涘叆涓嶆嫋鍔ㄥ瀭鐩存粴鍔ㄦ潯鏃跺嵆鍙嫋鍔ㄨ〃鏍兼按骞虫粴鍔ㄦ潯 + */ + handleWindowResize() { + const tableContainer = document.getElementById('Efficiency') // 琛ㄦ牸瀹瑰櫒 + const clientHeight = document.documentElement.clientHeight || document.body.clientHeight // 娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴� + const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top // 琛ㄦ牸瀹瑰櫒椤堕儴鍒版祻瑙堝櫒鍙鍖哄煙椤堕儴鐨勯棿璺� + tableContainer.style.height = (clientHeight - containerTopToClientTopHeight - 32) + 'px' } } +} </script> <style scoped> - .table2 { - width: 100%; - height: 100%; - overflow: auto; - } +.table2 { + width: 100%; + height: 100%; + overflow: auto; +} - .table2 thead tr th:first-child, - .table tbody tr .tdgu { - position: sticky; - left: 0; - z-index: 1; - } +.table2 thead tr th:first-child, +.table tbody tr .tdgu { + position: sticky; + left: 0; + z-index: 1; +} - .table tbody tr .wenzi { - /*writing-mode: vertical-lr;*/ - /*text-orientation: upright;*/ - transform: rotate(360deg); - writing-mode: vertical-lr; - letter-spacing: 2px; - } +.table tbody tr .wenzi { + /*writing-mode: vertical-lr;*/ + /*text-orientation: upright;*/ + transform: rotate(360deg); + writing-mode: vertical-lr; + letter-spacing: 2px; +} - .table tbody tr .kaitou { - z-index: 1; - background-color: white; - } +.table tbody tr .kaitou { + z-index: 1; + background-color: white; +} - .table tbody tr .tdgu1 { - position: sticky; - left: 50px; - z-index: 2; - } +.table tbody tr .tdgu1 { + position: sticky; + left: 50px; + z-index: 2; +} - .table tbody tr .tdgu2 { - position: sticky; - left: 100px; - z-index: 2; - } +.table tbody tr .tdgu2 { + position: sticky; + left: 100px; + z-index: 2; +} - .table tbody tr .tdgu3 { - position: sticky; - left: 150px; - z-index: 2; - } +.table tbody tr .tdgu3 { + position: sticky; + left: 150px; + z-index: 2; +} - .table tbody tr .tdgu4 { - position: sticky; - left: 250px; - z-index: 2; - } +.table tbody tr .tdgu4 { + position: sticky; + left: 250px; + z-index: 2; +} - .table tbody tr .tdgu5 { - position: sticky; - left: 412px; - z-index: 2; - } +.table tbody tr .tdgu5 { + position: sticky; + left: 412px; + z-index: 2; +} - .table2 thead tr .timeth, - .table2 thead tr .thgu { - position: sticky; - top: 0; - z-index: 3; - } +.table2 thead tr .timeth, +.table2 thead tr .thgu { + position: sticky; + top: 0; + z-index: 3; +} - .table2 thead .gudingth th { - position: sticky; - top: 32px; - z-index: 2; - } +.table2 thead .gudingth th { + position: sticky; + top: 32px; + z-index: 2; +} - .table2 thead .equipname .name { - z-index: 3; - } +.table2 thead .equipname .name { + z-index: 3; +} - .table2 thead .equipname .dong1 { - z-index: 4; - left: 0; - } +.table2 thead .equipname .dong1 { + z-index: 4; + left: 0; +} - .table2 thead .equipname .dong2 { - z-index: 5; - left: 50px; - } +.table2 thead .equipname .dong2 { + z-index: 5; + left: 50px; +} - .table2 thead .equipname .dong3 { - z-index: 5; - left: 100px; - } +.table2 thead .equipname .dong3 { + z-index: 5; + left: 100px; +} - .table2 thead .equipname .dong4 { - z-index: 5; - left: 150px; - } +.table2 thead .equipname .dong4 { + z-index: 5; + left: 150px; +} - .table2 thead .equipname .dong5 { - z-index: 5; - left: 250px; - } +.table2 thead .equipname .dong5 { + z-index: 5; + left: 250px; +} - .table2 thead .equipname .dong6 { - z-index: 5; - left: 412px; - } +.table2 thead .equipname .dong6 { + z-index: 5; + left: 412px; +} - #Efficiency { - overflow: hidden; - } +#Efficiency { + overflow: hidden; +} - .identifyingclass { - width: 55px; - height: 15px; - display: inline-block - } +.identifyingclass { + width: 55px; + height: 15px; + display: inline-block +} - .dataContent { - white-space: nowrap; - /*margin: 0;*/ - /*border: none;*/ - border-collapse: separate; - border-spacing: 0; - /*table-layout: fixed;*/ - border: 1px solid #ccc; - /*border: 1px solid #ccc;*/ - width: 100%; - /*height: 100%;*/ - /*overflow: hidden;*/ - /*overflow-y: auto;*/ - text-align: center; - } +.dataContent { + white-space: nowrap; + border-collapse: separate; + border-spacing: 0; + border: 1px solid #ccc; + width: 100%; + text-align: center; +} - .dataContent .thead th { - background-color: #fafafa; - text-align: center; - height: 30px; - padding: 5px; - } +.dataContent .thead th { + background-color: #fafafa; + text-align: center; + height: 30px; + padding: 5px; +} - .dataContent .mathData td { - padding: 10px; - } +.dataContent .mathData td { + padding: 10px; +} - td { - vertical-align: middle; - } -</style> \ No newline at end of file +td { + vertical-align: middle; +} +</style> diff --git a/src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue b/src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue index 8d1302f..e2cd9f3 100644 --- a/src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue +++ b/src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue @@ -64,51 +64,6 @@ </a-select> </a-form-item> </a-col> - <a-col :md="2" :sm="2"> - <a - @click="toggleSearchStatus=!toggleSearchStatus" - @selectstart="$event.preventDefault()" - style="display: inline-block;height: 32px;line-height: 32px" - > - {{ toggleSearchStatus ? '鏀惰捣' : '灞曞紑' }} - <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> - </a> - </a-col> - </a-row> - - <a-row :gutter="24" v-if="toggleSearchStatus"> - <a-col :md="5" :sm="5" :xs="5"> - <a-form-item label="璁惧绾у埆"> - <a-select - :value="queryParams.deviceLevel" - mode="multiple" - placeholder="璇烽�夋嫨璁惧绾у埆" - allow-clear - :maxTagCount="1" - @change="selectChange($event,'deviceLevel')" - > - <a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index"> - {{item.label}} - </a-select-option> - </a-select> - </a-form-item> - </a-col> - <a-col :md="5" :sm="5" :xs="5"> - <a-form-item label="璁惧绉嶇被"> - <a-select - :value="queryParams.deviceCategory" - mode="multiple" - placeholder="璇烽�夋嫨璁惧绉嶇被" - allow-clear - :maxTagCount="1" - @change="selectChange($event,'deviceCategory')" - > - <a-select-option v-for="(item,index) in device_category_list" :value="item.value" :key="index"> - {{item.label}} - </a-select-option> - </a-select> - </a-form-item> - </a-col> </a-row> <a-row :gutter="24" type="flex" align="middle"> @@ -148,7 +103,9 @@ v-if="dataList.length>0"> <thead> <tr class="thead fixed equipname"> - <th class="thgu dong1 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;height: 66px">鍏徃</th> + <th class="thgu dong1 name" rowspan="2" + style="min-width: 50px; max-width: 50px;width: 50px;height: 66px">鍏徃 + </th> <th class="thgu dong2 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">杞﹂棿</th> <th class="thgu dong3 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">宸ユ</th> <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">璁惧缂栧彿 @@ -207,17 +164,24 @@ </template> <!--<td>{{item.tierType}}</td>--> <template v-for="(tableHead, index) in item.dataList"> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('lyl') > -1">{{tableHead.utilizationRate | numFilter}}</td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjsj') > -1"> + <td :style="{background:tableHead.color ,minWidth:'110px',width:'110px'}" + v-if="checkedList.indexOf('lyl') > -1"> + {{tableHead.utilizationRate | numFilter}} + </td> + <td :style="{background:tableHead.color ,minWidth:'110px',width:'110px'}" + v-if="checkedList.indexOf('kjsj') > -1"> {{tableHead.openLong | getFormattedTime}} </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('jgsj') > -1"> + <td :style="{background:tableHead.color,minWidth:'110px',width:'110px' }" + v-if="checkedList.indexOf('jgsj') > -1"> {{tableHead.processLong | getFormattedTime}} </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('djsj') > -1"> + <td :style="{background:tableHead.color ,minWidth:'110px',width:'110px'}" + v-if="checkedList.indexOf('djsj') > -1"> {{tableHead.waitLong | getFormattedTime}} </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('gjsj') > -1"> + <td :style="{background:tableHead.color,minWidth:'110px' ,width:'110px'}" + v-if="checkedList.indexOf('gjsj') > -1"> {{tableHead.closeLong | getFormattedTime}} </td> </template> @@ -804,4 +768,4 @@ padding: 10px; } -</style> \ No newline at end of file +</style> diff --git a/src/views/mdc/base/modules/mdcParameter/MdcParameterModal.vue b/src/views/mdc/base/modules/mdcParameter/MdcParameterModal.vue new file mode 100644 index 0000000..80cdce7 --- /dev/null +++ b/src/views/mdc/base/modules/mdcParameter/MdcParameterModal.vue @@ -0,0 +1,131 @@ +<template> + <j-modal + :title="title" + :width="800" + :visible="visible" + :confirmLoading="confirmLoading" + switchFullscreen + @ok="handleOk" + @cancel="handleCancel" + cancelText="鍏抽棴"> + + <a-spin :spinning="confirmLoading"> + <a-form-model ref="form" :model="model" :rules="validatorRules"> + + <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code" label="鍙傛暟缂栫爜"> + <a-input placeholder="璇疯緭鍏ュ弬鏁扮紪鐮�" v-model="model.code" /> + </a-form-model-item> + <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="鍙傛暟鍚嶇О"> + <a-input placeholder="璇疯緭鍏ュ弬鏁板悕绉�" v-model="model.name" /> + </a-form-model-item> + <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type" label="鍙傛暟绫诲瀷"> + <a-radio-group v-model="model.type" placeholder="璇烽�夋嫨鍙傛暟绫诲瀷"> + <a-radio :value=true>鍏紡</a-radio> + <a-radio :value=false>鍩烘湰鍙傛暟</a-radio> + </a-radio-group> + </a-form-model-item> + <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="value" label="鍙傛暟鍊�" v-if="model.type"> + <a-input placeholder="璇疯緭鍏ュ弬鏁板��" v-model="model.value" /> + </a-form-model-item> + <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="description" label="鍙傛暟鎻忚堪"> + <a-input placeholder="璇疯緭鍏ュ弬鏁版弿杩�" v-model="model.description" /> + </a-form-model-item> + <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark" label="澶囨敞"> + <a-textarea placeholder="璇疯緭鍏ュ娉�" v-model="model.remark" /> + </a-form-model-item> + + </a-form-model> + </a-spin> + </j-modal> +</template> + +<script> + import { httpAction } from '@/api/manage' + import moment from "moment" + + export default { + name: "MdcParameterModal", + data () { + return { + title:"鎿嶄綔", + visible: false, + model: {}, + labelCol: { + xs: { span: 24 }, + sm: { span: 5 }, + }, + wrapperCol: { + xs: { span: 24 }, + sm: { span: 16 }, + }, + + confirmLoading: false, + validatorRules:{ + code:[{ required: true, message: '璇疯緭鍏ュ弬鏁扮紪鐮�!' }], + type:[{ required: true, message: '璇疯緭鍏ュ弬鏁扮被鍨�!' }], + }, + url: { + add: "/mdc/mdcParameter/add", + edit: "/mdc/mdcParameter/edit", + }, + } + }, + created () { + }, + methods: { + add () { + //鍒濆鍖栭粯璁ゅ�� + this.edit({type:false}); + }, + edit (record) { + this.model = Object.assign({}, record); + this.visible = true; + }, + close () { + this.$emit('close'); + this.visible = false; + this.$refs.form.clearValidate(); + }, + handleOk () { + const that = this; + // 瑙﹀彂琛ㄥ崟楠岃瘉 + this.$refs.form.validate(valid => { + if (valid) { + that.confirmLoading = true; + let httpurl = ''; + let method = ''; + if(!this.model.id){ + httpurl+=this.url.add; + method = 'post'; + }else{ + httpurl+=this.url.edit; + method = 'put'; + } + httpAction(httpurl,this.model,method).then((res)=>{ + if(res.success){ + that.$message.success(res.message); + that.$emit('ok'); + }else{ + that.$message.warning(res.message); + } + }).finally(() => { + that.confirmLoading = false; + that.close(); + }) + }else{ + return false; + } + }) + }, + handleCancel () { + this.close() + }, + + + } + } +</script> + +<style lang="less" scoped> + +</style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/shift/ShiftInfo.vue b/src/views/mdc/base/modules/shift/ShiftInfo.vue index e6d104e..f8299ca 100644 --- a/src/views/mdc/base/modules/shift/ShiftInfo.vue +++ b/src/views/mdc/base/modules/shift/ShiftInfo.vue @@ -2,7 +2,7 @@ <div class="shift_info"> <!-- 鎿嶄綔鎸夐挳鍖哄煙 --> <div class="table-operator"> - <a-button type="primary" v-if="Object.keys(shiftSystemRow).length>0" @click="handleAdd" icon="plus">閰嶇疆</a-button> + <a-button type="primary" :disabled="Object.keys(shiftSystemRow).length===0" @click="handleAdd" icon="plus">閰嶇疆</a-button> </div> <!-- table鍖哄煙-begin --> <div style="width: 100%;flex: 1;overflow: auto"> diff --git a/src/views/mdc/base/modules/shift/ShiftSystem.vue b/src/views/mdc/base/modules/shift/ShiftSystem.vue index 7197ad4..857cf18 100644 --- a/src/views/mdc/base/modules/shift/ShiftSystem.vue +++ b/src/views/mdc/base/modules/shift/ShiftSystem.vue @@ -6,7 +6,7 @@ </div> <!-- table鍖哄煙-begin --> <div style="flex: 1;overflow: auto"> - <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" + <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :customRow="customRow" :dataSource="dataSource" :pagination="false" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"> <span @@ -21,7 +21,7 @@ slot-scope="text, record" > <span v-if="text == 'true'">鏄�</span> - <span v-else-if="text == 'false'" >鍚�</span> + <span v-else-if="text == 'false'">鍚�</span> <span v-else-if="text == null">鍚�</span> </span> <span @@ -45,7 +45,7 @@ <a-menu-item v-if="record.shiftStatus == 1"> <a key="3" @click="handleStatus(record.id,0)">鍋滅敤</a> </a-menu-item> - <a-menu-item > + <a-menu-item> <a key="4" @click="handleDelete(record.id)">鍒犻櫎</a> </a-menu-item> </a-menu> @@ -54,18 +54,14 @@ </a-table> </div> - <shift-system-model ref="modalForm" @ok="modalFormOk"></shift-system-model> + <shift-system-model ref="modalForm" @ok="loadData"></shift-system-model> </div> </template> <script> import qs from 'qs' - import { - requestPut, putAction, deleteAction,postAction - } from '@/api/manage' - import { - JeecgListMixin - } from '@/mixins/JeecgListMixin' + import { putAction, deleteAction, postAction } from '@/api/manage' + import { JeecgListMixin } from '@/mixins/JeecgListMixin' import ShiftSystemModel from './ShiftSystemModel' export default { @@ -76,15 +72,7 @@ }, data() { return { - statusName: '', - disabled: true, disableMixinCreated: false, - url: { - list: '/mdc/mdcMdcShift/queryPageList', - changeStatus: '/mdc/mdcMdcShift/changeStatus', - deleteBatch:'/mdc/mdcMdcShift/deleteShift', - changeDefaultShift: '/mdc/mdcMdcShift/changeDefaultShift' - }, columns: [ { title: '鐝埗', @@ -109,7 +97,13 @@ dataIndex: 'action', scopedSlots: { customRender: 'action' } } - ] + ], + url: { + list: '/mdc/mdcMdcShift/queryPageList', + changeStatus: '/mdc/mdcMdcShift/changeStatus', + deleteBatch: '/mdc/mdcMdcShift/deleteShift', + changeDefaultShift: '/mdc/mdcMdcShift/changeDefaultShift' + } } }, methods: { @@ -118,15 +112,15 @@ putAction(this.url.changeStatus, { id: id, status: status }).then((res) => { if (res.success) { _this.$notification.success({ - message:'娑堟伅', - description:res.message + message: '娑堟伅', + description: res.message }) _this.loadData() } else { _this.$notification.warning({ - message:'娑堟伅', - description:res.message - }); + message: '娑堟伅', + description: res.message + }) } }) }, @@ -135,46 +129,46 @@ this.$refs.modalForm.title = '鐝埗閰嶇疆' this.$refs.modalForm.disableSubmit = false }, - handleDefault:function(record){ - postAction(this.url.changeDefaultShift,qs.stringify({id:record.id})).then((res) =>{ - if(res.success){ - // this.$message.success(res.message); - this.$notification.success({ - message:'娑堟伅', - description:res.message - }); - this.loadData() - }else{ - // this.$message.success(res.message); - this.$notification.warning({ - message:'娑堟伅', - description:res.message - }); - } + handleDefault: function(record) { + postAction(this.url.changeDefaultShift, qs.stringify({ id: record.id })).then((res) => { + if (res.success) { + // this.$message.success(res.message); + this.$notification.success({ + message: '娑堟伅', + description: res.message + }) + this.loadData() + } else { + // this.$message.success(res.message); + this.$notification.warning({ + message: '娑堟伅', + description: res.message + }) + } }) }, - handleDelete: function(record){ - if(!this.url.deleteBatch){ - this.$message.error("璇疯缃畊rl.delete灞炴��!") + handleDelete: function(record) { + if (!this.url.deleteBatch) { + this.$message.error('璇疯缃畊rl.delete灞炴��!') return } - var that = this; - deleteAction(that.url.deleteBatch, {id: record}).then((res) => { + var that = this + deleteAction(that.url.deleteBatch, { id: record }).then((res) => { if (res.success) { // that.$message.success(res.message); that.$notification.success({ - message:'娑堟伅', - description:res.message - }); - that.loadData(); + message: '娑堟伅', + description: res.message + }) + that.loadData() } else { // that.$message.warning(res.message); that.$notification.warning({ - message:'娑堟伅', - description:res.message - }); + message: '娑堟伅', + description: res.message + }) } - }); + }) }, handleEdit(record) { this.$refs.modalForm.edit(record) @@ -183,47 +177,61 @@ }, onSelectChange(selectedRowKeys, selectionRows) { - this.selectedRowKeys = selectedRowKeys; - this.selectionRows = selectionRows; + this.selectedRowKeys = selectedRowKeys + this.selectionRows = selectionRows this.$emit('selectionShiftRow', this.selectionRows[0]) }, - }, - created() { - } + customRow(record) { + return { + style: { + cursor: 'pointer' + }, + on: { + click: () => { + this.onSelectChange([record.id], [record]) + } + } + } + } + } } </script> <style lang="less" scoped> - .shift_system{ + .shift_system { overflow: auto; display: flex; flex-direction: column; } - @media screen and (min-width: 1920px){ - .shift_system{ - height: 748px!important; + @media screen and (min-width: 1920px) { + .shift_system { + height: 748px !important; } } - @media screen and (min-width: 1680px) and (max-width: 1920px){ - .shift_system{ - height: 748px!important; + + @media screen and (min-width: 1680px) and (max-width: 1920px) { + .shift_system { + height: 748px !important; } } - @media screen and (min-width: 1400px) and (max-width: 1680px){ - .shift_system{ - height: 600px!important; + + @media screen and (min-width: 1400px) and (max-width: 1680px) { + .shift_system { + height: 600px !important; } } - @media screen and (min-width: 1280px) and (max-width: 1400px){ - .shift_system{ - height: 501px!important; + + @media screen and (min-width: 1280px) and (max-width: 1400px) { + .shift_system { + height: 501px !important; } } - @media screen and (max-width: 1280px){ - .shift_system{ - height: 501px!important; + + @media screen and (max-width: 1280px) { + .shift_system { + height: 501px !important; } } </style> diff --git a/src/views/system/DepartList.vue b/src/views/system/DepartList.vue index 1545593..43da7a6 100644 --- a/src/views/system/DepartList.vue +++ b/src/views/system/DepartList.vue @@ -7,10 +7,10 @@ <a-row style="margin-left: 14px"> <a-button @click="handleAdd(1)" type="primary">娣诲姞閮ㄩ棬</a-button> <a-button @click="handleAdd(2)" type="primary">娣诲姞涓嬬骇</a-button> - <a-button type="primary" icon="download" @click="handleExportXls('閮ㄩ棬淇℃伅')">瀵煎嚭</a-button> - <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel"> - <a-button type="primary" icon="import">瀵煎叆</a-button> - </a-upload> +<!-- <a-button type="primary" icon="download" @click="handleExportXls('閮ㄩ棬淇℃伅')">瀵煎嚭</a-button>--> +<!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">--> +<!-- <a-button type="primary" icon="import">瀵煎叆</a-button>--> +<!-- </a-upload>--> <a-button title="鍒犻櫎澶氭潯鏁版嵁" @click="batchDel" type="default">鎵归噺鍒犻櫎</a-button> <!--<a-button @click="refresh" type="default" icon="reload" :loading="loading">鍒锋柊</a-button>--> </a-row> @@ -635,4 +635,4 @@ background: #fff; border-radius: 0 0 2px 2px; } -</style> \ No newline at end of file +</style> diff --git a/src/views/system/ProductionManager.vue b/src/views/system/ProductionManager.vue index de94956..06bc10e 100644 --- a/src/views/system/ProductionManager.vue +++ b/src/views/system/ProductionManager.vue @@ -7,11 +7,11 @@ <a-row style="margin-left: 14px"> <a-button @click="handleAdd(1)" type="primary">娣诲姞杞﹂棿</a-button> <a-button @click="handleAdd(2)" type="primary">娣诲姞涓嬬骇</a-button> - <a-button type="primary" icon="download" @click="handleExportXls('杞﹂棿淇℃伅')">瀵煎嚭</a-button> - <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" - :action="importExcelUrl" @change="handleImportExcel"> - <a-button type="primary" icon="import">瀵煎叆</a-button> - </a-upload> +<!-- <a-button type="primary" icon="download" @click="handleExportXls('杞﹂棿淇℃伅')">瀵煎嚭</a-button>--> +<!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"--> +<!-- :action="importExcelUrl" @change="handleImportExcel">--> +<!-- <a-button type="primary" icon="import">瀵煎叆</a-button>--> +<!-- </a-upload>--> <a-button @click="handleDelete" v-if="selectedKeys.length>0">鍒犻櫎</a-button> <a-button title="鍒犻櫎澶氭潯鏁版嵁" @click="batchDel" v-if="checkedKeys.length>0">鎵归噺鍒犻櫎</a-button> <!--<a-button @click="refresh" type="default" icon="reload" :loading="loading">鍒锋柊</a-button>--> @@ -27,32 +27,6 @@ <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="璇疯緭鍏ヨ溅闂村悕绉�"/> <!-- 鏍�--> <a-col :md="10" :sm="24"> - <!--<template>--> - <!--<a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">--> - <!--<span style="user-select: none">--> - <!--<a-tree--> - <!--checkable--> - <!--multiple--> - <!--@select="onSelect"--> - <!--@check="onCheck"--> - <!--@rightClick="rightHandle"--> - <!--:selectedKeys="selectedKeys"--> - <!--:checkedKeys="checkedKeys"--> - <!--:treeData="departTree"--> - <!--:checkStrictly="checkStrictly"--> - <!--:expandedKeys="iExpandedKeys"--> - <!--:autoExpandParent="autoExpandParent"--> - <!--@expand="onExpand"/>--> - <!--</span>--> - <!--<!–鏂板鍙抽敭鐐瑰嚮浜嬩欢,鍜屽鍔犳坊鍔犲拰鍒犻櫎鍔熻兘–>--> - - <!--<a-menu slot="overlay">--> - <!--<a-menu-item @click="handleAdd(3)" key="1">娣诲姞</a-menu-item>--> - <!--<a-menu-item @click="handleDelete" key="2">鍒犻櫎</a-menu-item>--> - <!--<a-menu-item @click="closeDrop" key="3">鍙栨秷</a-menu-item>--> - <!--</a-menu>--> - <!--</a-dropdown>--> - <!--</template>--> <a-tree checkable multiple @@ -644,4 +618,4 @@ background: #fff; border-radius: 0 0 2px 2px; } -</style> \ No newline at end of file +</style> diff --git a/src/views/system/UserList.vue b/src/views/system/UserList.vue index 5a29723..a798a66 100644 --- a/src/views/system/UserList.vue +++ b/src/views/system/UserList.vue @@ -6,7 +6,7 @@ <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter="24"> - <a-col :md="6" :sm="12"> + <a-col :md="6" :sm="8"> <a-form-item label="璐﹀彿"> <!--<a-input placeholder="璇疯緭鍏ヨ处鍙锋煡璇�" v-model="queryParam.username"></a-input>--> <j-input placeholder="杈撳叆璐﹀彿妯$硦鏌ヨ" v-model="queryParam.username"></j-input> @@ -14,48 +14,25 @@ </a-col> <a-col :md="6" :sm="8"> - <a-form-item label="鎬у埆"> - <a-select v-model="queryParam.sex" placeholder="璇烽�夋嫨鎬у埆"> - <a-select-option value="">璇烽�夋嫨</a-select-option> - <a-select-option value="1">鐢�</a-select-option> - <a-select-option value="2">濂�</a-select-option> - </a-select> + <a-form-item label="濮撳悕"> + <a-input placeholder="璇疯緭鍏ュ鍚�" v-model="queryParam.realname"></a-input> </a-form-item> </a-col> - - <template v-if="toggleSearchStatus"> - <a-col :md="6" :sm="8"> - <a-form-item label="鐪熷疄鍚嶅瓧"> - <a-input placeholder="璇疯緭鍏ョ湡瀹炲悕瀛�" v-model="queryParam.realname"></a-input> - </a-form-item> - </a-col> - - <a-col :md="6" :sm="8"> - <a-form-item label="鎵嬫満鍙风爜"> - <a-input placeholder="璇疯緭鍏ユ墜鏈哄彿鐮佹煡璇�" v-model="queryParam.phone"></a-input> - </a-form-item> - </a-col> - - <a-col :md="6" :sm="8"> - <a-form-item label="鐢ㄦ埛鐘舵��"> - <a-select v-model="queryParam.status" placeholder="璇烽�夋嫨"> - <a-select-option value="">璇烽�夋嫨</a-select-option> - <a-select-option value="1">姝e父</a-select-option> - <a-select-option value="2">鍐荤粨</a-select-option> - </a-select> - </a-form-item> - </a-col> - </template> + <a-col :md="6" :sm="8"> + <a-form-item label="鐢ㄦ埛鐘舵��"> + <a-select v-model="queryParam.status" placeholder="璇烽�夋嫨"> + <a-select-option value="">璇烽�夋嫨</a-select-option> + <a-select-option value="1">姝e父</a-select-option> + <a-select-option value="2">鍐荤粨</a-select-option> + </a-select> + </a-form-item> + </a-col> <a-col :md="6" :sm="8"> <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">閲嶇疆</a-button> - <a @click="handleToggleSearch" style="margin-left: 8px"> - {{ toggleSearchStatus ? '鏀惰捣' : '灞曞紑' }} - <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> - </a> </span> </a-col> @@ -209,16 +186,6 @@ queryParam: {}, recycleBinVisible: false, columns: [ - /*{ - title: '#', - dataIndex: '', - key:'rowIndex', - width:60, - align:"center", - customRender:function (t,r,index) { - return parseInt(index)+1; - } - },*/ { title: '鐢ㄦ埛璐﹀彿', align: "center", @@ -233,32 +200,11 @@ dataIndex: 'realname', }, { - title: '澶村儚', + title: '宸ュ彿', align: "center", - width: 80, - dataIndex: 'avatar', - scopedSlots: {customRender: "avatarslot"} + width: 100, + dataIndex: 'workNo', }, - - // { - // title: '鎬у埆', - // align: "center", - // width: 80, - // dataIndex: 'sex_dictText', - // sorter: true - // }, - // { - // title: '鐢熸棩', - // align: "center", - // width: 100, - // dataIndex: 'birthday' - // }, - // { - // title: '鎵嬫満鍙风爜', - // align: "center", - // width: 100, - // dataIndex: 'phone' - // }, { title: '閮ㄩ棬', align: "center", @@ -334,32 +280,11 @@ dataIndex: 'realname', }, { - title: '澶村儚', + title: '宸ュ彿', align: "center", - width: 80, - dataIndex: 'avatar', - scopedSlots: {customRender: "avatarslot"} + width: 100, + dataIndex: 'workNo', }, - - // { - // title: '鎬у埆', - // align: "center", - // width: 80, - // dataIndex: 'sex_dictText', - // sorter: true - // }, - // { - // title: '鐢熸棩', - // align: "center", - // width: 100, - // dataIndex: 'birthday' - // }, - // { - // title: '鎵嬫満鍙风爜', - // align: "center", - // width: 100, - // dataIndex: 'phone' - // }, { title: '杞﹂棿', align: "center", @@ -399,32 +324,11 @@ dataIndex: 'realname', }, { - title: '澶村儚', + title: '宸ュ彿', align: "center", - width: 80, - dataIndex: 'avatar', - scopedSlots: {customRender: "avatarslot"} + width: 100, + dataIndex: 'workNo', }, - - // { - // title: '鎬у埆', - // align: "center", - // width: 80, - // dataIndex: 'sex_dictText', - // sorter: true - // }, - // { - // title: '鐢熸棩', - // align: "center", - // width: 100, - // dataIndex: 'birthday' - // }, - // { - // title: '鎵嬫満鍙风爜', - // align: "center", - // width: 100, - // dataIndex: 'phone' - // }, { title: '閮ㄩ棬', align: "center", @@ -437,12 +341,6 @@ width: 240, dataIndex: 'productionName', ellipsis: true, - }, - { - title: '鐝粍', - align: "center", - width: 240, - dataIndex: 'teamId_dictText' }, { title: '鐘舵��', @@ -566,4 +464,4 @@ </script> <style scoped> @import '~@assets/less/common.less' -</style> \ No newline at end of file +</style> -- Gitblit v1.9.3