From 120cf05bfd146a9bd1c011c9dd0244a57d0dea64 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 12 一月 2024 17:35:43 +0800
Subject: [PATCH] 1、优化代码：mdc全局页面表格区域内容若需滚动无需翻至最底部且部分页面竖向滚动会滚动整个页面调整为仅滚动表格区域，表格操作列右固定以满足不同分辨率下操作列始终显示不被遮挡 2、优化代码：mdc全局左侧树组件所在区域的滚动条将不再进行全部内容滚动，调整为仅只有树组件内容滚动 3、优化代码：报警分析、利用率走势分析以及利用率分段分析页面在浏览器窗口尺寸变化后重绘图表以适应页面新尺寸 4、设备综合效率分析页面取消分页器以便能一次性导出所有表格数据 5、mdc全局左侧树区域宽度增大，右侧数据展示区域宽度减小
---
src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue | 87 +++++++++++++++++++++++++++++++------------
1 files changed, 63 insertions(+), 24 deletions(-)
diff --git a/src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue b/src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue
index f5c23aa..8505d58 100644
--- a/src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue
+++ b/src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue
@@ -1,5 +1,5 @@
<template>
- <a-card :bordered="false" class="device_list">
+ <div :bordered="false" class="device_list">
<!-- 鏌ヨ鍖哄煙 -->
<div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -19,12 +19,18 @@
<a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" v-model="queryParams.equipmentName"></a-input>
</a-form-item>
</a-col>
- <a-col :md="2" :sm="3" :xs="3">
- <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
- </a-col>
<a-col :md="2" :sm="2" :xs="2">
- <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
+ <a-space>
+ <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
+ </a-space>
</a-col>
+ <!--<a-col :md="2" :sm="3" :xs="3">-->
+ <!--<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>-->
+ <!--</a-col>-->
+ <!--<a-col :md="2" :sm="2" :xs="2">-->
+ <!--<a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>-->
+ <!--</a-col>-->
<!--<a-col :lg="2" :md="3" :sm="3" :xs="3">-->
<!--<a-button type="primary" @click="exportExcel" icon="download">瀵煎嚭</a-button>-->
<!--</a-col>-->
@@ -35,6 +41,7 @@
<div class="table-operator" style="display: inline;">
<a-button @click="handleAdd" type="primary" icon="plus">鏂板
</a-button>
+ <a-button type="primary" icon="download" @click="importTemplate('鍚堟牸鐜囨ā鏉�')">瀵煎叆妯℃澘</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('鍚堟牸鐜囩鐞�')">瀵煎嚭</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">瀵煎叆</a-button>
@@ -53,9 +60,9 @@
</div>
<!-- table鍖哄煙-begin -->
- <div id="DeviceList">
+ <div id="DeviceList" style="flex: 1;overflow: hidden">
<a-table ref="table" bordered size="middle" rowKey="id" :columns="columns"
- :scroll="{x:1000}" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
+ :scroll="{x:'max-content',y:scrollY}" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
@@ -84,7 +91,7 @@
<!--<device-repair-model></device-repair-model>-->
<mdc-pass-rate-modal ref="modalForm" @ok="modalFormOk"></mdc-pass-rate-modal>
<mdc-pass-rate-edit ref="modalFormedit" @ok="modalFormOk"></mdc-pass-rate-edit>
- </a-card>
+ </div>
</template>
<script>
@@ -100,8 +107,6 @@
} from '@/api/manage'
import mdcPassRateModal from './mdcPassRateModal'
import mdcPassRateEdit from './mdcPassRateEdit'
- // import DeviceRepairModelAdd from './DeviceRepairModelAdd'
- // import DeviceRepairModelEdit from './DeviceRepairModelEdit'
import '@/components/table2excel/table2excel'
import {
JeecgListMixin
@@ -110,6 +115,7 @@
import JEllipsis from '@/components/jeecg/JEllipsis'
import Tooltip from 'ant-design-vue/es/tooltip'
import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
+
export default {
name: 'mdcPassRateList',
mixins: [JeecgListMixin],
@@ -117,8 +123,6 @@
Tooltip,
mdcPassRateModal,
mdcPassRateEdit,
- // DeviceRepairModelAdd,
- // DeviceRepairModelEdit,
JDictSelectTag,
JInput,
JDate,
@@ -138,16 +142,19 @@
queryParamEquip:{},
queryParamPeople:{},
dataStartsoucre:[],
+ scrollY:465,
columns: [
{
title: '璁惧缂栧彿',
align: 'center',
- dataIndex: 'equipmentId'
+ dataIndex: 'equipmentId',
+ width:200
},
{
title: '璁惧鍚嶇О',
align: 'center',
dataIndex: 'equipmentName',
+ width:200
// defaultSortOrder:'descend',
// sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1}
},
@@ -155,6 +162,7 @@
title: '鏃ユ湡',
align: 'center',
dataIndex: 'efficientDate',
+ width:200
// scopedSlots:{customRender:'startTime'},
// customRender:(text,row,index) => {
// return moment(text).format("YYYY-MM-DD HH:mm:ss")
@@ -163,30 +171,35 @@
{
title: '鍔犲伐鏁伴噺',
align: 'center',
- dataIndex: 'processQuantity'
+ dataIndex: 'processQuantity',
+ width:150
},
{
title: '涓嶅悎鏍兼暟閲�',
align: 'center',
- dataIndex: 'unqualifiedQuantity'
+ dataIndex: 'unqualifiedQuantity',
+ width:150
},
{
title: '鍚堟牸鐜�',
align: 'center',
dataIndex: 'passRate',
- scopedSlots:{customRender:'discount1'}
+ scopedSlots:{customRender:'discount1'},
+ width:150
},
{
title: '澶囨敞',
align: 'center',
- dataIndex: 'remark'
+ dataIndex: 'remark',
+ width:200
},
{
title: '鎿嶄綔',
dataIndex: 'action',
scopedSlots: {customRender: 'action'},
align: "center",
+ fixed:'right',
width: 150
}
],
@@ -239,6 +252,15 @@
},
},
methods: {
+ importTemplate(fileName){
+ var a = document.createElement("a");
+ a.href = "/static/鍚堟牸鐜囩鐞�.xls";
+ a.download = "鍚堟牸鐜囩鐞�.xls";
+ a.style.display = "none";
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ },
dateParamChange(v1, v2) {
// console.log(v1,v2)
this.queryParam.startTime = v2[0]
@@ -520,7 +542,7 @@
//閲嶆柊璁＄畻鍒嗛〉闂
that.reCalculatePage(1)
// that.$message.success(res.message);
- that.$notification.warning({
+ that.$notification.success({
message:'娑堟伅',
description:res.message
});
@@ -562,7 +584,7 @@
//閲嶆柊璁＄畻鍒嗛〉闂
that.reCalculatePage(that.selectedRowKeys.length)
// that.$message.success(res.message);
- that.$notification.warning({
+ that.$notification.success({
message:'娑堟伅',
description:res.message
});
@@ -667,9 +689,25 @@
exclude_inputs: true
});
},
+
+ /**
+ * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙�
+ */
+ 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 - 50
+ }
},
created() {
this.queryParam.typeTree = "1"
+ },
+ mounted(){
+ window.addEventListener('resize',this.handleWindowResize)
+ this.handleWindowResize()
+ },
+ beforeDestroy(){
+ window.removeEventListener('resize',this.handleWindowResize)
}
}
</script>
@@ -677,34 +715,35 @@
<style lang="less" scoped>
@import '~@assets/less/common.less';
+ .device_list{
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+
@media screen and (min-width: 1920px){
.device_list{
height: 811px!important;
- overflow: scroll;
}
}
@media screen and (min-width: 1680px) and (max-width: 1920px){
.device_list{
height: 811px!important;
- overflow: scroll;
}
}
@media screen and (min-width: 1400px) and (max-width: 1680px){
.device_list{
height: 663px!important;
- overflow: scroll;
}
}
@media screen and (min-width: 1280px) and (max-width: 1400px){
.device_list{
height: 564px!important;
- overflow: scroll;
}
}
@media screen and (max-width: 1280px){
.device_list{
height: 564px!important;
- overflow: scroll;
}
}
</style>
--
Gitblit v1.9.3