From a04b8970aa94f80c4c4937706c787391759aded7 Mon Sep 17 00:00:00 2001 From: zhuzhuanzhuan Date: 星期三, 13 十二月 2023 15:54:17 +0800 Subject: [PATCH] 1、全局车间层级以及部门层级树默认展开 2、车间看板页面设备详情弹窗背景透明度改为不透明 3、所有含有车间层级树页面新增弹窗中的选择设备弹窗内容由表格选择调整为树方式 4、报警分析页面表格字段出现次数与合计持续时间增加排序功能以及表格请求数据设置加载中动画 5、设备利用率、设备开动率以及班次利用率页面表格有关时间值调整为小时并保留两位小数以及通过与后端数据联调,增加表格平均值及合计值展示 6、设备综合效率分析页面表格班次字段若数据过长则省略 7、用户管理页面添加用户与重新设定密码弹窗中的登录密码校验长度与数据字典password_length设置保持一致以及表格车间字段若数据过长则省略 --- src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue | 214 ++++++++++++++++++++++++++++++++++------------------ 1 files changed, 139 insertions(+), 75 deletions(-) diff --git a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue index 4060b9a..3948f87 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> @@ -53,70 +54,89 @@ </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 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" 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 +181,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 +239,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 +435,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 +472,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 +506,7 @@ }).finally(() => { this.loading = false }) - } + }, } } </script> @@ -518,7 +563,7 @@ .table tbody tr .tdgu5 { position: sticky; - left: 400px; + left: 412px; z-index: 2; } @@ -567,7 +612,7 @@ .table2 thead .equipname .dong6 { z-index: 5; - left: 400px; + left: 412px; } @media screen and (min-width: 1920px) { @@ -668,10 +713,6 @@ padding: 10px; } - .dataContent .mathData .tdd { - /*display: none;*/ - } - td { vertical-align: middle; } @@ -687,4 +728,27 @@ .green { background-color: #99ff4e; } + + .vertical-text { + writing-mode: vertical-rl; + } + + /*/deep/ .ant-table-body .ant-table-row td {*/ + /*padding-top: 10px;*/ + /*padding-bottom: 10px;*/ + /*}*/ + + /deep/ .ant-table-body .ant-table-row td.data { + min-width: 150px; + max-width: 150px; + } + + /deep/ .ant-table-tbody > tr.ant-table-row:hover > td { + background: none !important; + } + + /deep/ .ant-table-thead th { + text-align: center; + } + </style> \ No newline at end of file -- Gitblit v1.9.3