From 3a097696dbc536ad29ccf60b7cf381a08e1bebf0 Mon Sep 17 00:00:00 2001 From: zhaowei <zhaowei> Date: 星期四, 26 六月 2025 17:41:30 +0800 Subject: [PATCH] 1、设备日利用率以及设备日利用率对比页面优化图表加载展示区域及代码 2、调整操作工终端登录页背景图片 --- src/assets/terminal/login-bg.jpg | 0 src/views/dnc/base/OperatorLogin.vue | 13 - src/views/mdc/base/equipmentDayAvail.vue | 46 +-- src/views/mdc/base/equipmentAvailCompare.vue | 6 src/views/mdc/base/modules/EquipmentDayAvail/EquipmentDayAvailMain.vue | 259 +++++++--------------- src/views/mdc/base/modules/EquipmentAvailCompare/EquipmentAvailCompareMain.vue | 277 +++++------------------- 6 files changed, 163 insertions(+), 438 deletions(-) diff --git a/src/assets/terminal/login-bg.jpg b/src/assets/terminal/login-bg.jpg new file mode 100644 index 0000000..74ff20d --- /dev/null +++ b/src/assets/terminal/login-bg.jpg Binary files differ diff --git a/src/views/dnc/base/OperatorLogin.vue b/src/views/dnc/base/OperatorLogin.vue index f0e6ba9..47f0154 100644 --- a/src/views/dnc/base/OperatorLogin.vue +++ b/src/views/dnc/base/OperatorLogin.vue @@ -46,10 +46,6 @@ <a-button type="primary" size="large" block :loading="loading" @click="handleLogin">鐧诲綍</a-button> </a-form-model> - <!--<div class="footer">--> - <!--<a @click="handleRegister">娉ㄥ唽璐﹀彿</a>--> - <!--<a @click="handleForget">蹇樿瀵嗙爜</a>--> - <!--</div>--> </a-card> </div> </div> @@ -192,13 +188,6 @@ callback() } } - - // handleRegister() { - // this.$router.push('/register') - // }, - // handleForget() { - // this.$message.info('璇疯仈绯荤鐞嗗憳閲嶇疆瀵嗙爜') - // } } } </script> @@ -210,7 +199,7 @@ align-items: center; min-height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), - url('../../../assets/operator-login-bg.png') no-repeat center; + url('../../../assets/terminal/login-bg.jpg') no-repeat center; background-size: cover; .login-container { 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/EquipmentAvailCompare/EquipmentAvailCompareMain.vue b/src/views/mdc/base/modules/EquipmentAvailCompare/EquipmentAvailCompareMain.vue index eaa447e..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" :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> - <!-- 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,118 +207,12 @@ } }, searchQuery() { - 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.queryParams.parentId = this.queryParamEquip.parentId //鑾峰彇鏌ヨ鏉′欢 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 - }) - }, - 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.loadAnalysis() }, initEquipment(id) { let _this = this @@ -361,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 @@ -390,9 +252,7 @@ _this.searchQuery() } else { this.queryParams = {} - // this.queryList() this.equipment = {} - // _this.$message.warning('璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒') _this.$notification.warning({ message: '娑堟伅', description: '璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒' @@ -415,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 e24d024..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' :allow-clear="false" - @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,44 +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 - }) + if (this.queryParams.typeTree == '1') { + this.queryParams.parentId = this.queryParamEquip.parentId } else { - this.$notification.warning({ - message: '娑堟伅', - description: '璇烽�夋嫨鏃堕棿' - }) + 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 @@ -347,75 +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> -- Gitblit v1.9.3