From b66eab74b627b0e3746f5cb4f6a7d7cb142e9a6d Mon Sep 17 00:00:00 2001 From: zhaowei <zhaowei> Date: 星期四, 01 八月 2024 10:36:42 +0800 Subject: [PATCH] OEE综合效率分析页面删除加工数量和标准加工时间字段 --- src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue | 315 ++++++++++++++++++++++++++-------------------------- 1 files changed, 159 insertions(+), 156 deletions(-) diff --git a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue index cc8458f..26b51b7 100644 --- a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue +++ b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue @@ -8,84 +8,107 @@ <a-row :gutter="24"> <a-col :md="5" :sm="5"> <a-form-item label="璁惧绫诲瀷"> - <a-select placeholder="璇烽�夋嫨璁惧绫诲瀷" :triggerChange="true" v-model="queryParam.equipmentType" - :allowClear="true"> - <a-select-option v-for='item in selectList' :key='item.id' :value='item.equipmentTypeName'> - {{item.equipmentTypeName}} + <a-select + :value="queryParams.equipmentType" + mode="multiple" + placeholder="璇烽�夋嫨璁惧绫诲瀷" + allow-clear + :maxTagCount="1" + @change="selectChange($event,'equipmentType')" + > + <a-select-option v-for="(item,index) in equipmentTypeList" :value="item.value" :key="index"> + {{item.label}} </a-select-option> </a-select> </a-form-item> </a-col> <a-col :md="5" :sm="5"> <a-form-item label="椹卞姩绫诲瀷"> - <a-auto-complete - v-model="queryParam.driveType" - :data-source="driveTypeList" + <a-select + :value="queryParams.driveType" + mode="multiple" placeholder="璇烽�夋嫨椹卞姩绫诲瀷" - :filter-option="filterOption" - /> + allow-clear + :maxTagCount="1" + @change="selectChange($event,'driveType')" + > + <a-select-option v-for="(item,index) in driveTypeList" :value="item.value" :key="index"> + {{item.label}} + </a-select-option> + </a-select> </a-form-item> </a-col> - <a-col :md="6" :sm="6"> + <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="8" :sm="8" - style="display: flex;align-items: flex-start;-webkit-align-items: flex-start;justify-content: space-between;"> - <!--<a-space>--> - <!--<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>--> - <!--<a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>--> - <!--<a-button type="primary" @click="exportExcel" icon="download">瀵煎嚭</a-button>--> - <!--<a-button type="primary" icon="printer" v-print="'#Efficiency'" v-has="'efficiency:print'">鎵撳嵃--> - <!--</a-button>--> - <!--</a-space>--> - <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;margin-left: 24px"> + <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-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> + <a-button type="primary" icon="printer" v-print="'#Efficiency'" + v-has="'efficiency:print'">鎵撳嵃 + </a-button> + </a-space> + <a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions" + @change="efficiencyOptionsOnChange"/> + </div> + <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;"> <tr> - <td v-for="(item, index) in identifying">{{item.title}}</td> + <td v-for="(item, index) in identifying" + style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap">{{item.title}} + </td> </tr> <tr> <td style="text-align:center;" v-for="(item, index) in identifying"> <div class="identifyingclass" :style="{background: item.color}"></div> </td> - <!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>--> - <!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>--> </tr> </table> </a-col> </a-row> - <a-row :gutter="24" type="flex" align="middle"> - <a-col :md="6" :sm="6"> - <a-space> - <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> - <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button> - <a-button type="primary" @click="exportExcel" icon="download">瀵煎嚭</a-button> - <a-button type="primary" icon="printer" v-print="'#Efficiency'" v-has="'efficiency:print'">鎵撳嵃 - </a-button> - </a-space> - </a-col> - <a-col :md="18" :sm="18"> - <a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions" - @change="efficiencyOptionsOnChange"/> - </a-col> - </a-row> </a-form> </div> - <!--<div style="width: 530px;position: absolute;top: 0; right: 1.5%;">--> - <!--<table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">--> - <!--<tr>--> - <!--<td v-for="(item, index) in identifying">{{item.title}}</td>--> - <!--</tr>--> - <!--<tr>--> - <!--<td style="text-align:center;" v-for="(item, index) in identifying">--> - <!--<div class="identifyingclass" :style="{background: item.color}"></div>--> - <!--</td>--> - <!--<!–<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>–>--> - <!--<!–<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>–>--> - <!--</tr>--> - <!--</table>--> - <!--</div>--> </div> <a-spin :spinning="spinning"> @@ -95,7 +118,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;">鍏徃</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;">璁惧缂栧彿 @@ -111,7 +136,7 @@ </tr> <tr class="thead notfixed gudingth"> <template v-for="(tableHead, index) in tableHeads"> - <th>鍒╃敤鐜�(%)</th> + <th v-if="checkedList.indexOf('lyl') > -1">鍒╃敤鐜�(%)</th> <th v-if="checkedList.indexOf('kjl') > -1">寮�鏈虹巼(%)</th> <th v-if="checkedList.indexOf('kjsj') > -1">寮�鏈烘椂闂�(灏忔椂)</th> <th v-if="checkedList.indexOf('jgsj') > -1">鍔犲伐鏃堕棿(灏忔椂)</th> @@ -156,7 +181,9 @@ </template> <template v-for="(tableHead, index) in item.dataList"> - <td :style="{background:tableHead.color }">{{tableHead.utilizationRate | numFilter}}</td> + <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('lyl') > -1"> + {{tableHead.utilizationRate | numFilter}} + </td> <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjl') > -1"> {{tableHead.openRate | numFilter}} </td> @@ -206,11 +233,18 @@ TreeIDTwo: 2, deviceTypeDict: '', dates: [], - selectList: [], - driveTypeList:[], + equipmentTypeList: [], + driveTypeList: [], + device_level_list: [], + device_category_list: [], identifying: [], queryParam: {}, - queryParams: {}, + queryParams: { + equipmentType: [], + driveType: [], + deviceLevel: [], + deviceCategory: [] + }, queryParamEquip: {}, queryParamPeople: {}, efficiencyOptions: [ @@ -249,6 +283,12 @@ 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) { @@ -304,6 +344,23 @@ }, 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鐨勪笅鏍� @@ -447,59 +504,32 @@ 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 - } + // 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.TreeIDTwo = "" - // this.queryParam.parentId = this.queryParamEquip.parentId - // this.queryParam.equipmentId = this.queryParamEquip.equipmentId - // }else{ - // // this.queryParam.TreeIDOne = "" - // this.queryParam.parentId = this.queryParamPeople.parentId - // this.queryParam.equipmentId = "" - // } - // this.loadData() - // // this.onClearSelected() - // }, - // searchReset() { - // this.typeTree = this.queryParam.typeTree - // this.typeParent = this.queryParams.parentId - // this.queryParam = {} - // this.dates = [] - // this.queryParam.typeTree = this.typeTree - // this.queryParam.parentId = this.typeParent - // this.loadData() - // // this.onClearSelected() - // }, searchQuery() { - console.log('dates', this.dates) - if (this.dates != '') { - 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 = '' - } - this.loadData() + if (this.queryParam.typeTree == '1') { + this.queryParam.parentId = this.queryParamEquip.parentId + this.queryParam.equipmentId = this.queryParamEquip.equipmentId } else { - this.$notification.warning({ - message: '娑堟伅', - description: '璇烽�夋嫨鏃堕棿' - }) + this.queryParam.parentId = this.queryParamPeople.parentId + this.queryParam.equipmentId = '' } - // this.onClearSelected() + 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 @@ -512,6 +542,12 @@ 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.ipagination.current = 1 this.loadData() // this.queryParam = {} @@ -530,7 +566,7 @@ if (res.result.mdcEfficiencyList && !res.result.mdcEfficiencyList.length) { this.$notification.info({ message: '娑堟伅', - description: '鏆傛棤璇ヨ澶囩被鍨嬫暟鎹�' + description: '鏆傛棤璇ョ被鍨嬫暟鎹�' }) } this.distinguishColorList = res.result.utilizationRateList @@ -548,42 +584,39 @@ 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.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 }) }, /** * 璋冪敤鎺ュ彛鑾峰彇鎺у埗绯荤粺绫诲瀷 */ - getDriveTypeByApi(){ - api.getDriveTypeApi().then((res)=>{ - this.driveTypeList=res.result.map(item=>item.value) + getDriveTypeByApi() { + api.getDriveTypeApi().then((res) => { + if (res.success) this.driveTypeList = res.result }) }, /** - * 鑱旀兂杈撳叆妗嗙瓫閫夊姛鑳� - * @param input 杈撳叆鐨勫唴瀹� - * @param option 閰嶇疆 - * @returns {boolean} 鍒ゆ柇鏄惁绛涢�� + * 鍒嗚鲸鐜囨敼鍙樻椂鍚屾椂鏀瑰彉琛ㄦ牸楂樺害宸蹭繚璇侀椤典竴杩涘叆涓嶆嫋鍔ㄥ瀭鐩存粴鍔ㄦ潯鏃跺嵆鍙嫋鍔ㄨ〃鏍兼按骞虫粴鍔ㄦ潯 */ - filterOption(input, option) { - return ( - option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0 - ); - }, + 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> @@ -693,36 +726,6 @@ #Efficiency { overflow: hidden; - } - - @media screen and (min-width: 1920px) { - #Efficiency { - height: 687px !important; - } - } - - @media screen and (min-width: 1680px) and (max-width: 1920px) { - #Efficiency { - height: 687px !important; - } - } - - @media screen and (min-width: 1400px) and (max-width: 1680px) { - #Efficiency { - height: 540px !important; - } - } - - @media screen and (min-width: 1280px) and (max-width: 1400px) { - #Efficiency { - height: 440px !important; - } - } - - @media screen and (max-width: 1280px) { - #Efficiency { - height: 440px !important; - } } .identifyingclass { -- Gitblit v1.9.3