From b8e2c776ec2cdd248fbef401f740e36153435ca0 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期四, 11 九月 2025 13:51:46 +0800
Subject: [PATCH] 倍率报表页面调整为与TEEP页面样式功能及样式一致
---
src/views/mdc/base/modules/MagnificationReport/MagnificationReportList.vue | 425 +++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 361 insertions(+), 64 deletions(-)
diff --git a/src/views/mdc/base/modules/MagnificationReport/MagnificationReportList.vue b/src/views/mdc/base/modules/MagnificationReport/MagnificationReportList.vue
index 595be3c..6aafb62 100644
--- a/src/views/mdc/base/modules/MagnificationReport/MagnificationReportList.vue
+++ b/src/views/mdc/base/modules/MagnificationReport/MagnificationReportList.vue
@@ -2,7 +2,7 @@
<div class="device_list">
<!-- 鏌ヨ鍖哄煙 -->
<div class="table-page-search-wrapper">
- <a-form layout="inline" @keyup.enter.native="searchQuery">
+ <a-form layout="inline" @keyup.enter.native="loadData">
<a-row :gutter="24">
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="璁惧缂栧彿">
@@ -11,14 +11,15 @@
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="鏃ユ湡">
- <a-range-picker value-format="YYYY-MM-DD" v-model="queryParam.dates" @change="dateParamChange"
- :disabled-date="disabledDate"/>
+ <a-range-picker value-format="YYYY-MM-DD" v-model="dates" @change="dateParamChange"
+ :allow-clear="false" :disabled-date="disabledDate"/>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-space>
- <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ <a-button type="primary" @click="loadData" icon="search">鏌ヨ</a-button>
<a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
+ <a-button type="primary" icon="download" @click="handleExportXls('鍊嶇巼鎶ヨ〃')">瀵煎嚭</a-button>
</a-space>
</a-col>
</a-row>
@@ -27,45 +28,106 @@
<!-- 鏌ヨ鍖哄煙-END -->
<!-- 鎿嶄綔鎸夐挳鍖哄煙 -->
- <div class="table-operator">
- <a-button type="primary" icon="download" @click="handleExportXls('鍊嶇巼鎶ヨ〃')">瀵煎嚭</a-button>
- </div>
+ <!--<div class="table-operator">-->
+ <!--<a-button type="primary" icon="download" @click="handleExportXls('鍊嶇巼鎶ヨ〃')">瀵煎嚭</a-button>-->
+ <!--</div>-->
<!-- table鍖哄煙-begin -->
- <div id="DeviceList" style="flex: 1;overflow: hidden">
- <a-table :scroll="{x:'max-content',y:scrollY}" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
- :pagination="ipagination" :loading="loading" @change="handleTableChange"/>
- </div>
+ <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;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: 150px; max-width: 150px;width: 150px;">璁惧缂栧彿
+ </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: 150px; max-width: 150px;width: 150px;">璁惧绫诲瀷
+ </th>
+ <template v-for="tableHead in tableHeads">
+ <th class="timeth" colspan="2">{{tableHead}}</th>
+ </template>
+ </tr>
+ <tr class="thead notfixed gudingth">
+ <template v-for="tableHead in tableHeads">
+ <th>涓昏酱鍊嶇巼骞冲潎鍊�</th>
+ <th>杩涚粰鍊嶇巼骞冲潎鍊�</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.mdcBeilvVoList">
+ <td>{{tableHead.spindlebeilv | numFilter}}</td>
+ <td>{{tableHead.feedbeilv | numFilter}}</td>
+ </template>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </a-spin>
</div>
</template>
<script>
import moment from 'moment'
- import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+ import $ from 'jquery'
+ import '@/components/table2excel/table2excel'
+ import { putAction, getAction } from '@/api/manage'
export default {
name: 'MagnificationReportList',
- mixins: [JeecgListMixin],
components: {},
props: { nodeTree: '', Type: '', nodePeople: '' },
data() {
return {
disableMixinCreated: true,
+ tableHeads: [],
+ dataList: [],
+ spinning: false,
/* 鍒嗛〉鍙傛暟 */
- ipagination: {
- current: 1,
- pageSize: 30,
- pageSizeOptions: ['30', '50', '100'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 鍏�' + total + '鏉�'
- },
- showQuickJumper: true,
- showSizeChanger: true,
- total: 0
- },
- queryParam: {
- dates: [moment().subtract(1, 'day').startOf('day'), moment().subtract(1, 'day').endOf('day')]
- },
+ queryParam: {},
+ dates: [moment().subtract(1, 'day').startOf('day'), moment().subtract(1, 'day').endOf('day')],
// 琛ㄥご
columns: [
{
@@ -101,10 +163,17 @@
width: 300
}
],
- scrollY: 465,
url: {
- list: '/mdc/magnification/list',
- exportXlsUrl: '/mdc/magnification/exportXls'
+ list: '/mdc/magnification/beilvList'
+ }
+ }
+ },
+ filters: {
+ numFilter(value) {
+ if (value) {
+ return parseFloat((value * 100).toFixed(2))
+ } else {
+ return '0'
}
}
},
@@ -122,7 +191,7 @@
this.queryParam.parentId = val.key
this.queryParam.equipmentId = ''
}
- this.searchQuery()
+ this.loadData()
}
},
nodePeople(val) {
@@ -134,14 +203,14 @@
this.queryParam.parentId = val.key
this.queryParam.equipmentId = ''
}
- this.searchQuery()
+ this.loadData()
}
}
},
created() {
- this.queryParam.startTime = moment(this.queryParam.dates[0]).format('YYYY-MM-DD')
- this.queryParam.endTime = moment(this.queryParam.dates[1]).format('YYYY-MM-DD')
- this.loadData(1)
+ this.queryParam.startTime = moment(this.dates[0]).format('YYYY-MM-DD')
+ this.queryParam.endTime = moment(this.dates[1]).format('YYYY-MM-DD')
+ this.loadData()
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
@@ -151,6 +220,133 @@
window.removeEventListener('resize', this.handleWindowResize)
},
methods: {
+ 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.mdcMagnificationVos
+ if (res.result.mdcMagnificationVos && !res.result.mdcMagnificationVos.length) {
+ this.$notification.info({
+ message: '娑堟伅',
+ description: '鏆傛棤璇ョ被鍨嬫暟鎹�'
+ })
+ }
+ this.checkSameData(this.dataList)
+ this.checkSameData1(this.dataList)
+ this.checkSameData2(this.dataList)
+ this.combineCell()
+ }
+ }).finally(() => {
+ this.spinning = false
+ })
+ },
+
+ 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
+ },
+
+ handleExportXls() {
+ $('#Efficiency').table2excel({
+ exclude: '.noExl',
+ name: 'Excel Document Name',
+ filename: '鍊嶇巼鎶ヨ〃',
+ exclude_img: true,
+ fileext: '.xls',
+ exclude_links: true,
+ exclude_inputs: false
+ })
+ },
+
dateParamChange(dateArray) {
this.queryParam.startTime = dateArray[0]
this.queryParam.endTime = dateArray[1]
@@ -161,53 +357,154 @@
return current > moment().subtract(1, 'day').endOf('day')
},
+ searchReset() {
+ this.dates = [moment().subtract(1, 'day').startOf('day'), moment().subtract(1, 'day').endOf('day')]
+ this.queryParam = {
+ startTime: moment(this.dates[0]).format('YYYY-MM-DD'),
+ endTime: moment(this.dates[1]).format('YYYY-MM-DD')
+ }
+ this.loadData()
+ },
+
/**
* 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙�
*/
handleWindowResize() {
- const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0, -2)
- const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2)
- this.scrollY = boxHeight - tableHeadHeight - 100
+ 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>
<style scoped>
- @import '~@assets/less/common.less';
+ .table2 {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ }
- .device_list {
- display: flex;
- flex-direction: column;
+ .table2 thead tr th:first-child,
+ .table tbody tr .tdgu {
+ position: sticky;
+ left: 0;
+ z-index: 1;
+ }
+
+ .table tbody tr .wenzi {
+ 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: 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: 300px;
+ z-index: 2;
+ }
+
+ .table tbody tr .tdgu5 {
+ position: sticky;
+ left: 462px;
+ z-index: 2;
+ }
+
+ .table2 thead tr .timeth,
+ .table2 thead tr .thgu {
+ position: sticky;
+ top: 0;
+ z-index: 3;
+ }
+
+ .table2 thead .gudingth th {
+ position: sticky;
+ top: 32px;
+ z-index: 2;
+ }
+
+ .table2 thead .equipname .name {
+ z-index: 3;
+ }
+
+ .table2 thead .equipname .dong1 {
+ z-index: 4;
+ left: 0;
+ }
+
+ .table2 thead .equipname .dong2 {
+ z-index: 5;
+ 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: 300px;
+ }
+
+ .table2 thead .equipname .dong6 {
+ z-index: 5;
+ left: 462px;
+ }
+
+ #Efficiency {
overflow: hidden;
}
- @media screen and (min-width: 1920px) {
- .device_list {
- height: 811px !important;
- }
+ .dataContent {
+ white-space: nowrap;
+ border-collapse: separate;
+ border-spacing: 0;
+ border: 1px solid #ccc;
+ width: 100%;
+ text-align: center;
}
- @media screen and (min-width: 1680px) and (max-width: 1920px) {
- .device_list {
- height: 811px !important;
- }
+ .dataContent .thead th {
+ background-color: #fafafa;
+ text-align: center;
+ height: 30px;
+ padding: 5px;
}
- @media screen and (min-width: 1400px) and (max-width: 1680px) {
- .device_list {
- height: 663px !important;
- }
+ .dataContent .mathData td {
+ padding: 10px;
}
- @media screen and (min-width: 1280px) and (max-width: 1400px) {
- .device_list {
- height: 564px !important;
- }
- }
-
- @media screen and (max-width: 1280px) {
- .device_list {
- height: 564px !important;
- }
+ td {
+ vertical-align: middle;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3