From adae7524c986a758dd61bc5d0c23f6b922e299c7 Mon Sep 17 00:00:00 2001 From: Lius <Lius2225@163.com> Date: 星期四, 25 一月 2024 17:06:35 +0800 Subject: [PATCH] 加班管理添加字段 --- src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue | 295 +++++++++++++++++++++++++++++++--------------------------- 1 files changed, 157 insertions(+), 138 deletions(-) diff --git a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue index 4060b9a..9e2abec 100644 --- a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue +++ b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue @@ -8,7 +8,8 @@ <a-row :gutter="24"> <a-col :md="4" :sm="4"> <a-form-item label="璁惧绫诲瀷"> - <a-select placeholder="璇烽�夋嫨璁惧绫诲瀷" :triggerChange="true" v-model="queryParam.equipmentType" :allowClear="true"> + <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-option> @@ -21,12 +22,25 @@ v-model="dates"/> </a-form-item> </a-col> - <a-col :md="14" :sm="14"> + <a-col :md="14" :sm="14" 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"> + <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> </a-col> </a-row> <a-row :gutter="24"> @@ -37,86 +51,114 @@ </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 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> - <div id="Efficiency" class="container" style="margin-top: 20px;"> - <div class="table2"> - <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: 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> - </template> - </tr> - <tr class="thead notfixed gudingth"> - <template v-for="(tableHead, index) in tableHeads"> - <th>鍒╃敤鐜�(%)</th> - <th v-if="checkedList.indexOf('kjl') > -1">寮�鏈虹巼(%)</th> - <th v-if="checkedList.indexOf('kjsj') > -1">寮�鏈烘椂闂�(s)</th> - <th v-if="checkedList.indexOf('jgsj') > -1">鍔犲伐鏃堕棿(s)</th> - <th v-if="checkedList.indexOf('djsj') > -1">寰呮満鏃堕棿(s)</th> - <th v-if="checkedList.indexOf('gjsj') > -1">鍏虫満鏃堕棿(s)</th> - </template> - </tr> - </thead> - <tbody> - <tr class="mathData" v-for="(item, index) in dataList"> - <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:tableHead.color }" v-if="checkedList.indexOf('kjsj') > -1"> - {{tableHead.openLong}} - </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('jgsj') > -1"> - {{tableHead.processLong}} - </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('djsj') > -1"> - {{tableHead.waitLong}} - </td> - <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('gjsj') > -1"> - {{tableHead.closeLong}} - </td> - </template> - </tr> - </tbody> - </table> + <a-spin :spinning="spinning"> + <div id="Efficiency" class="container" 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"> + <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 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> + </template> + </tr> + <tr class="thead notfixed gudingth"> + <template v-for="(tableHead, index) in tableHeads"> + <th>鍒╃敤鐜�(%)</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> + <th v-if="checkedList.indexOf('djsj') > -1">寰呮満鏃堕棿(灏忔椂)</th> + <th v-if="checkedList.indexOf('gjsj') > -1">鍏虫満鏃堕棿(灏忔椂)</th> + </template> + + </tr> + </thead> + <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"> + <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"> + <div class="wenzi"> + {{item.level2}} + </div> + </td> + <td class="tdgu2 kaitou wenzi" :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 class="tdgu4 kaitou" style="min-width: 162px; max-width: 162px;width: 162px;">{{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 }">{{tableHead.utilizationRate | numFilter}}</td> + <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjl') > -1"> + {{tableHead.openRate | numFilter}} + </td> + <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjsj') > -1"> + {{tableHead.openLong | getFormattedTime}} + </td> + <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('jgsj') > -1"> + {{tableHead.processLong | getFormattedTime}} + </td> + <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('djsj') > -1"> + {{tableHead.waitLong | getFormattedTime}} + </td> + <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('gjsj') > -1"> + {{tableHead.closeLong | getFormattedTime}} + </td> + </template> + + </tr> + + </tbody> + </table> + + </div> </div> - </div> + </a-spin> </div> </div> </template> @@ -161,8 +203,15 @@ listByType: '/mdc/MdcUtilizationRate/getByType', queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType' }, - tableHeads: [] - + tableHeads: [], + distinguishColorList: [], + utilizationRateRowAverage: '', + openRateRowAverage: '', + openLongRowAverage: '', + processLongRowAverage: '', + waitLongRowAverage: '', + closeLongRowAverage: '', + spinning: false } }, props: { nodeTree: '', Type: '', nodePeople: '' }, @@ -212,8 +261,22 @@ } else { return '0' } + }, + + /** + * 鏍煎紡鍖栨椂闂� + * @param seconds 绉掓暟 + * @returns '' 鏍煎紡鍖栧悗鏃堕棿瀛楃涓� + */ + getFormattedTime(seconds) { + if (seconds) { + return parseFloat((seconds / 3600).toFixed(2)) + } else { + return '0' + } } }, + computed: {}, methods: { checkSameData(dataList) { let cache = {} //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 @@ -394,7 +457,7 @@ // // this.onClearSelected() // }, searchQuery() { - console.log('dates',this.dates) + console.log('dates', this.dates) if (this.dates != '') { if (this.queryParam.typeTree == '1') { this.queryParam.parentId = this.queryParamEquip.parentId @@ -431,17 +494,21 @@ 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 + this.distinguishColorList = res.result.utilizationRateList this.checkSameData(this.dataList) this.checkSameData1(this.dataList) this.checkSameData2(this.dataList) this.combineCell() + // this.columns.push(...dataColumns) // this.initDeviceType(this.dataList) - } + }).finally(() => { + this.spinning = false }) }, queryGroup() { @@ -461,7 +528,7 @@ }).finally(() => { this.loading = false }) - } + }, } } </script> @@ -518,7 +585,7 @@ .table tbody tr .tdgu5 { position: sticky; - left: 400px; + left: 412px; z-index: 2; } @@ -542,7 +609,6 @@ .table2 thead .equipname .dong1 { z-index: 4; left: 0; - /*border: 1px solid #000;*/ } .table2 thead .equipname .dong2 { @@ -567,53 +633,41 @@ .table2 thead .equipname .dong6 { z-index: 5; - left: 400px; + left: 412px; + } + + #Efficiency{ + overflow: hidden; } @media screen and (min-width: 1920px) { #Efficiency { height: 687px !important; - overflow: scroll; } } @media screen and (min-width: 1680px) and (max-width: 1920px) { #Efficiency { height: 687px !important; - overflow: scroll; } } @media screen and (min-width: 1400px) and (max-width: 1680px) { #Efficiency { height: 540px !important; - overflow: scroll; } } @media screen and (min-width: 1280px) and (max-width: 1400px) { #Efficiency { height: 440px !important; - overflow: scroll; } } @media screen and (max-width: 1280px) { #Efficiency { height: 440px !important; - overflow: scroll; } - } - - #Efficiency .table_guding1 { - position: absolute; - overflow: hidden; - width: 500px; - } - - #Efficiency .table_guding2 { - overflow-x: scroll; - width: 500px; } .identifyingclass { @@ -638,10 +692,6 @@ text-align: center; } - /*.dataContent .fixed th {*/ - /*width: 50px;*/ - /*}*/ - .dataContent .thead th { background-color: #fafafa; text-align: center; @@ -649,42 +699,11 @@ padding: 5px; } - .dataContent .notfixed th { - /*width: auto;*/ - } - - /*.dataContent tr td {*/ - /*height: 35px;*/ - /*}*/ - .dataContent .mathData td { padding: 10px; - /*display: none;*/ - } - - .dataContent .mathData .td { - /*background-color: #ff9bd2;*/ - display: inline-block; - padding: 10px; - } - - .dataContent .mathData .tdd { - /*display: none;*/ } td { vertical-align: middle; - } - - .pink { - background-color: #ff9bd2; - } - - .yellow { - background-color: #e8ff37; - } - - .green { - background-color: #99ff4e; } </style> \ No newline at end of file -- Gitblit v1.9.3