From 102c7d7dc9f5af873f19c86a0d17d5d6addcbc32 Mon Sep 17 00:00:00 2001 From: zhuzhuanzhuan Date: 星期二, 19 九月 2023 17:39:28 +0800 Subject: [PATCH] 项目优化 --- src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue | 267 +++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 216 insertions(+), 51 deletions(-) diff --git a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue index d635058..a42a1c8 100644 --- a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue +++ b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue @@ -29,7 +29,7 @@ </a-row> </a-form> </div> - <div style="width: 400px;position: absolute;top: 20px; right: 0px;"> + <div style="width: 530px;position: absolute;top: 20px; right: 1.5%;"> <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;"> <tr> <td v-for="(item, index) in identifying">{{item.title}}</td> @@ -50,9 +50,12 @@ <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap"> <thead> <tr class="thead fixed equipname"> - <th class="thgu dong1 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">璁惧缂栧彿</th> - <th class="thgu dong2 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">璁惧鍚嶇О</th> - <th class="thgu dong3 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;"></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: 150px; max-width: 150px;width: 150px;">璁惧鍚嶇О</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> @@ -71,26 +74,28 @@ </thead> <tbody> <tr class="mathData" v-for="(item, index) in dataList"> - <td class="tdgu kaitou">{{item.equipmentId}}</td> - <td class="tdgu1 kaitou">{{item.equipmentName}}</td> - <td class="tdgu2 kaitou">{{item.equipmentType}}</td> - <!--<td>{{item.tierType}}</td>--> - <template v-for="(tableHead, index) in tableHeads"> - <td :style="{background:item[tableHead].color }">{{item[tableHead].lyl | numFilter}}</td> - <td :style="{background:item[tableHead].color }" v-if="checkedList.indexOf('kjl') > -1"> - {{item[tableHead].kjl | numFilter}} + <td class="tdgu kaitou wenzi" :rowspan="item.level1span" :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis">{{item.level1}}</td> + <td class="tdgu1 kaitou wenzi" :rowspan="item.level2span" :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis">{{item.level2}}</td> + <td class="tdgu2 kaitou wenzi" :rowspan="item.level3span" :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis">{{item.level3}}</td> + <td class="tdgu3 kaitou">{{item.equipmentId}}</td> + <td class="tdgu4 kaitou">{{item.equipmentName}}</td> + <td class="tdgu5 kaitou">{{item.equipmentType}}</td> + <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('kjl') > -1"> + {{tableHead.openRate | numFilter}} </td> - <td :style="{background:item[tableHead].color }" v-if="checkedList.indexOf('kjsj') > -1"> - {{item[tableHead].kjsj}} + <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjsj') > -1"> + {{tableHead.openLong}} </td> - <td :style="{background:item[tableHead].color }" v-if="checkedList.indexOf('jgsj') > -1"> - {{item[tableHead].jgsj}} + <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('jgsj') > -1"> + {{tableHead.processLong}} </td> - <td :style="{background:item[tableHead].color }" v-if="checkedList.indexOf('djsj') > -1"> - {{item[tableHead].djsj}} + <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('djsj') > -1"> + {{tableHead.waitLong}} </td> - <td :style="{background:item[tableHead].color }" v-if="checkedList.indexOf('gjsj') > -1"> - {{item[tableHead].gjsj}} + <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('gjsj') > -1"> + {{tableHead.closeLong}} </td> </template> </tr> @@ -137,9 +142,10 @@ dataList: [], url: { list: '/mdc/efficiencyReport/efficiencyList', - listByType: '/mdc/MdcUtilizationRate/listByType' + listByType: '/mdc/MdcUtilizationRate/getByType' }, - tableHeads: [] + tableHeads: [], + } }, props: { nodeTree: '',Type:'',nodePeople:'' }, @@ -158,24 +164,24 @@ }, nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 if (JSON.stringify(val) != '{}') { - if (val.entity.equipmentId) { + if (val.equipmentId != null) { this.queryParamEquip.parentId = '' - this.queryParamEquip.equipmentIds = val.entity.equipmentId + this.queryParamEquip.equipmentId = val.equipmentId } else { - this.queryParamEquip.parentId = val.entity.id - this.queryParamEquip.equipmentIds = '' + this.queryParamEquip.parentId = val.key + this.queryParamEquip.equipmentId = '' } this.searchQuery() } }, nodePeople(val){ if (JSON.stringify(val) != '{}') { - if (val.entity.equipmentId) { - this.queryParamPeople.parentId = val.entity.equipmentId - this.queryParamPeople.equipmentIds = '' + if (val.equipmentId != null) { + this.queryParamPeople.parentId = val.equipmentId + this.queryParamPeople.equipmentId = '' } else { - this.queryParamPeople.parentId = val.entity.id - this.queryParamPeople.equipmentIds = '' + this.queryParamPeople.parentId = val.key + this.queryParamPeople.equipmentId = '' } this.searchQuery() } @@ -191,6 +197,93 @@ } }, methods: { + 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); @@ -230,7 +323,7 @@ exclude_img: true, fileext: ".xls", exclude_links: true, - exclude_inputs: true + exclude_inputs: false }); }, showIdentifying() { @@ -247,43 +340,79 @@ efficiencyOptionsOnChange(checkedList) { let index = checkedList.indexOf('lyl') if (index < 0) { - this.$message.warn('涓嶈兘鍙栨秷鏌ヨ鍒╃敤鐜�') + // 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(this.queryParam.typeTree); - // console.log(this.queryParams.parentId); if(this.queryParam.typeTree == "1"){ - // this.queryParam.TreeIDTwo = "" this.queryParam.parentId = this.queryParamEquip.parentId - this.queryParam.equipmentIds = this.queryParamEquip.equipmentIds + this.queryParam.equipmentId = this.queryParamEquip.equipmentId }else{ - // this.queryParam.TreeIDOne = "" this.queryParam.parentId = this.queryParamPeople.parentId - this.queryParam.equipmentIds = "" + this.queryParam.equipmentId = "" } this.loadData() // this.onClearSelected() }, searchReset() { this.typeTree = this.queryParam.typeTree - this.typeParent = this.queryParams.parentId + this.typeParent = this.queryParam.parentId + this.typeEquipment = this.queryParam.equipmentId this.queryParam = {} this.dates = [] this.queryParam.typeTree = this.typeTree this.queryParam.parentId = this.typeParent - this.loadData() + this.queryParam.equipmentId = this.typeEquipment + // this.ipagination.current = 1 + this.loadData(); + // this.queryParam = {} + // this.dates = [] + // this.loadData() // this.onClearSelected() }, loadData() { - // console.log(this.queryParam) + this.tableHeads = [] + this.dataList = [] getAction(this.url.list, this.queryParam).then(res => { if (res.success) { this.tableHeads = res.result.dates - this.dataList = res.result.list - this.initDeviceType(this.dataList) + this.dataList = res.result.mdcEfficiencyList + this.checkSameData(this.dataList) + this.checkSameData1(this.dataList) + this.checkSameData2(this.dataList) + this.combineCell(); + // this.initDeviceType(this.dataList) + } }) } @@ -302,18 +431,40 @@ 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 .kaitou{ z-index: 1; background-color: white; } .table tbody tr .tdgu1{ position: sticky; - left: 100px; + left: 50px; 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 .tdgu4{ + position: sticky; left: 250px; + z-index: 2; +} +.table tbody tr .tdgu5{ + position: sticky; + left: 400px; z-index: 2; } .table2 thead tr .timeth, @@ -337,11 +488,23 @@ } .table2 thead .equipname .dong2{ z-index: 5; - left: 100px; + left: 50px; } .table2 thead .equipname .dong3{ z-index: 5; + left: 100px; +} +.table2 thead .equipname .dong4{ + z-index: 5; + left: 150px; +} +.table2 thead .equipname .dong5{ + z-index: 5; left: 250px; +} +.table2 thead .equipname .dong6{ + z-index: 5; + left: 400px; } @media screen and (min-width: 1920px){ @@ -392,7 +555,7 @@ .dataContent { white-space: nowrap; /*margin: 0;*/ - border: none; + /*border: none;*/ border-collapse: separate; border-spacing: 0; /*table-layout: fixed;*/ @@ -420,9 +583,9 @@ /*width: auto;*/ } -.dataContent tr td { - height: 35px; -} +/*.dataContent tr td {*/ + /*height: 35px;*/ +/*}*/ .dataContent .mathData td { padding: 10px; @@ -438,7 +601,9 @@ .dataContent .mathData .tdd { /*display: none;*/ } - +td { + vertical-align: middle; +} .pink { background-color: #ff9bd2; } -- Gitblit v1.9.3