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/UnplannedDowntimemManager/UnplannedDowntimemManagerList.vue | 45 + src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue | 139 +--- src/views/mdc/base/MdcplancloseList.vue | 16 src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue | 75 -- src/views/mdc/base/mdcPassRate.vue | 4 src/views/mdc/base/DeviceParamThresholdManagement.vue | 14 src/views/mdc/base/OvertimeManagement.vue | 4 src/views/mdc/base/alarmAnalysis.vue | 4 src/views/mdc/base/modules/deviceBaseInfo/EquipmentList.vue | 35 src/views/mdc/base/openRateFractionAnalysis.vue | 4 src/views/mdc/base/MdcDriveTypeParamConfigList.vue | 27 src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue | 49 src/views/mdc/base/mdcStandardProcessDuration.vue | 4 src/views/mdc/base/modules/mdcProcessQuantity/mdcProcessQuantityList.vue | 58 + src/views/mdc/base/modules/deviceRepair/DeviceRepairList.vue | 58 + src/views/mdc/base/modules/openRateTrendAnalysis/openRateTrendAnalysisMain.vue | 130 -- src/views/mdc/base/openRateTrendAnalysis.vue | 4 src/views/mdc/base/EquipmentList.vue | 64 + src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue | 131 +-- src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue | 54 src/views/mdc/base/modules/DeviceProcessReport/DeviceProcessReportList.vue | 142 +-- src/views/mdc/base/AlarmManager.vue | 14 src/views/mdc/base/modules/TorqueconfigurationList/TorqueconfigurationList.vue | 60 + src/views/mdc/base/Torqueconfiguration.vue | 4 src/views/mdc/base/modules/OvertimeManagement/OvertimeManagementList.vue | 55 + src/views/mdc/base/DeviceCalendar.vue | 4 src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue | 57 + src/views/mdc/base/modules/shift/ShiftInfo.vue | 17 src/views/mdc/base/UnplannedDowntimemManager.vue | 4 src/views/mdc/base/mdcProcessQuantity.vue | 4 src/views/mdc/base/modules/mdcStandardProcessDuration/MdcStandardProcessDurationList.vue | 50 + src/views/mdc/common/BaseTree.vue | 108 +- src/views/mdc/base/HolidayManagement.vue | 4 src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue | 180 +--- src/views/mdc/base/modules/HolidayManagement/HolidayManagementList.vue | 50 + src/views/mdc/base/modules/deviceBaseInfo/EquipmentLayout.vue | 35 src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue | 271 ------- src/views/mdc/base/modules/shift/ShiftSystem.vue | 17 src/views/mdc/base/MdcEquipmentTypeList.vue | 15 39 files changed, 815 insertions(+), 1,195 deletions(-) diff --git a/src/views/mdc/base/AlarmManager.vue b/src/views/mdc/base/AlarmManager.vue index 83c5383..acd894f 100644 --- a/src/views/mdc/base/AlarmManager.vue +++ b/src/views/mdc/base/AlarmManager.vue @@ -171,7 +171,7 @@ <a-table ref="table" size="middle" - :scroll="{x:true}" + :scroll="{x:'max-content',y:465}" bordered rowKey="id" :columns="columns" @@ -258,20 +258,23 @@ title: '鎶ヨ鍙�', align: "center", // sorter: true, - dataIndex: 'alarmCode' + dataIndex: 'alarmCode', + width:400 }, { title: '鎶ヨ鍐呭', align: "center", // sorter: true, - dataIndex: 'alarmContent' + dataIndex: 'alarmContent', + width:400 }, { title: '璁惧椹卞姩绫诲瀷', align: "center", // sorter: true, - dataIndex: 'driveType' + dataIndex: 'driveType', + width:400 }, // { // title: '鏄惁杩囨护', @@ -283,6 +286,7 @@ dataIndex:'isUse_dictText', title: '鏄惁杩囨护', align: "center", + width:380 // dictCode:'alarm_is_use' }, { @@ -290,7 +294,7 @@ dataIndex: 'action', align: "center", fixed: "right", - width: 147, + width: 150, scopedSlots: { customRender: 'action' } } ], diff --git a/src/views/mdc/base/DeviceCalendar.vue b/src/views/mdc/base/DeviceCalendar.vue index 1cbbdb8..705dc5d 100644 --- a/src/views/mdc/base/DeviceCalendar.vue +++ b/src/views/mdc/base/DeviceCalendar.vue @@ -2,7 +2,7 @@ <div style="width: 100%; height: 100%;"> <a-card :bordered="false"> <a-row type="flex" :gutter="16"> - <a-col :md="4"> + <a-col :md="5"> <a-tabs :activeKey="activeKey" @change="tabChange"> <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render> <base-tree @getCurrSelected="changeSelectionNode"></base-tree> @@ -12,7 +12,7 @@ </a-tab-pane> </a-tabs> </a-col> - <a-col :md="20"> + <a-col :md="19"> <device-calendar-list ref="deviceList" :node='selectEquement' :Type="slectTypeTree"/> </a-col> </a-row> diff --git a/src/views/mdc/base/DeviceParamThresholdManagement.vue b/src/views/mdc/base/DeviceParamThresholdManagement.vue index a0da603..e2a170a 100644 --- a/src/views/mdc/base/DeviceParamThresholdManagement.vue +++ b/src/views/mdc/base/DeviceParamThresholdManagement.vue @@ -67,6 +67,7 @@ bordered size="middle" rowKey="id" + :scroll="{x:'max-content',y:600}" :columns="columns" :dataSource="dataSource" :pagination="ipagination" @@ -131,32 +132,32 @@ title: '涓枃鍚�', align: 'center', dataIndex: 'chineseName', - width: 120 + width: 350 // sorter: true }, { title: '鑻辨枃鍚�', align: 'center', - width: 150, + width: 350, dataIndex: 'englishName' }, { title: '椹卞姩绫诲瀷', align: 'center', - width: 180, + width: 350, dataIndex: 'controlSystemType' }, { title: '闃堝�间笂闄�', align: 'center', - width: 120, + width: 270, dataIndex: 'maxThreshold' // scopedSlots: {customRender: "avatarslot"} }, { title: '闃堝�间笅闄�', align: 'center', - width: 80, + width: 270, dataIndex: 'minThreshold' // sorter: true }, @@ -165,7 +166,8 @@ dataIndex: 'action', scopedSlots: { customRender: 'action' }, align: 'center', - width: 120 + fixed: 'right', + width: 150 } ], driveTypeList: [], diff --git a/src/views/mdc/base/EquipmentList.vue b/src/views/mdc/base/EquipmentList.vue index 55ce880..c2b147a 100644 --- a/src/views/mdc/base/EquipmentList.vue +++ b/src/views/mdc/base/EquipmentList.vue @@ -64,6 +64,7 @@ bordered size="middle" rowKey="id" + :scroll="{x:'max-content',y:465}" :columns="columns" :dataSource="dataSource" :pagination="ipagination" @@ -180,25 +181,25 @@ title: '璁惧缂栧彿', align: "center", dataIndex: 'equipmentId', - width: 120, + width: 200, // sorter: true }, { title: '璁惧鍚嶇О', align: "center", - width: 150, + width: 200, dataIndex: 'equipmentName', }, { title: '杞﹂棿', align: "center", - width: 180, + width: 200, dataIndex: 'productionName' }, { title: '璁惧绫诲瀷', align: "center", - width: 120, + width: 200, dataIndex: 'equipmentType', // scopedSlots: {customRender: "avatarslot"} }, @@ -206,33 +207,33 @@ { title: '椹卞姩绫诲瀷', align: "center", - width: 80, + width: 200, dataIndex: 'driveType', // sorter: true }, { title: '鏈哄簥IP', align: "center", - width: 100, + width: 200, dataIndex: 'equipmentIp' }, { title: '璁惧鍔熺巼', align: "center", - width: 100, + width: 200, dataIndex: 'devicePower' }, { title: '閮ㄩ棬', align: "center", - width: 180, + width: 200, dataIndex: 'orgCodeTxt' }, { title: '绯荤粺鐗堟湰', align: "center", - width: 80, + width: 200, dataIndex: 'systemVersion' }, { @@ -240,7 +241,8 @@ dataIndex: 'action', scopedSlots: {customRender: 'action'}, align: "center", - width: 120 + width: 150, + fixed:'right' } ], @@ -290,25 +292,25 @@ title: '璁惧缂栧彿', align: "center", dataIndex: 'equipmentId', - width: 120, + width: 200, // sorter: true }, { title: '璁惧鍚嶇О', align: "center", - width: 150, + width: 200, dataIndex: 'equipmentName', }, { title: '杞﹂棿', align: "center", - width: 180, + width: 200, dataIndex: 'productionName' }, { title: '璁惧绫诲瀷', align: "center", - width: 120, + width: 200, dataIndex: 'equipmentType', // scopedSlots: {customRender: "avatarslot"} }, @@ -316,33 +318,33 @@ { title: '椹卞姩绫诲瀷', align: "center", - width: 80, + width: 200, dataIndex: 'driveType', // sorter: true }, { title: '鏈哄簥IP', align: "center", - width: 100, + width: 200, dataIndex: 'equipmentIp' }, { title: '璁惧鍔熺巼', align: "center", - width: 100, + width: 200, dataIndex: 'devicePower' }, // { // title: '閮ㄩ棬', // align: "center", - // width: 180, + // width: 200, // dataIndex: 'orgCodeTxt' // }, { title: '绯荤粺鐗堟湰', align: "center", - width: 80, + width: 200, dataIndex: 'systemVersion' }, { @@ -350,7 +352,8 @@ dataIndex: 'action', scopedSlots: {customRender: 'action'}, align: "center", - width: 120 + width: 150, + fixed:'right' } ] @@ -370,25 +373,25 @@ title: '璁惧缂栧彿', align: "center", dataIndex: 'equipmentId', - width: 120, + width: 200, // sorter: true }, { title: '璁惧鍚嶇О', align: "center", - width: 150, + width: 200, dataIndex: 'equipmentName', }, { title: '杞﹂棿', align: "center", - width: 180, + width: 200, dataIndex: 'productionName' }, { title: '璁惧绫诲瀷', align: "center", - width: 120, + width: 200, dataIndex: 'equipmentType', // scopedSlots: {customRender: "avatarslot"} }, @@ -396,33 +399,33 @@ { title: '椹卞姩绫诲瀷', align: "center", - width: 80, + width: 200, dataIndex: 'driveType', // sorter: true }, { title: '鏈哄簥IP', align: "center", - width: 100, + width: 200, dataIndex: 'equipmentIp' }, { title: '璁惧鍔熺巼', align: "center", - width: 100, + width: 200, dataIndex: 'devicePower' }, { title: '閮ㄩ棬', align: "center", - width: 180, + width: 200, dataIndex: 'orgCodeTxt' }, { title: '绯荤粺鐗堟湰', align: "center", - width: 80, + width: 200, dataIndex: 'systemVersion' }, { @@ -430,7 +433,8 @@ dataIndex: 'action', scopedSlots: {customRender: 'action'}, align: "center", - width: 120 + width: 150, + fixed:'right' } ] diff --git a/src/views/mdc/base/HolidayManagement.vue b/src/views/mdc/base/HolidayManagement.vue index e230736..f996a39 100644 --- a/src/views/mdc/base/HolidayManagement.vue +++ b/src/views/mdc/base/HolidayManagement.vue @@ -2,7 +2,7 @@ <div style="width: 100%; height: 100%;"> <a-card :bordered="false"> <a-row type="flex" :gutter="16"> - <a-col :md="4"> + <a-col :md="5"> <a-tabs :activeKey="activeKey" @change="tabChange"> <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render> <base-tree @getCurrSelected="changeSelectionNode"></base-tree> @@ -12,7 +12,7 @@ </a-tab-pane> </a-tabs> </a-col> - <a-col :md="20"> + <a-col :md="19"> <holiday-management-list ref="HolidayManagementList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></holiday-management-list> </a-col> </a-row> diff --git a/src/views/mdc/base/MdcDriveTypeParamConfigList.vue b/src/views/mdc/base/MdcDriveTypeParamConfigList.vue index 0af6e3b..1647dd9 100644 --- a/src/views/mdc/base/MdcDriveTypeParamConfigList.vue +++ b/src/views/mdc/base/MdcDriveTypeParamConfigList.vue @@ -187,7 +187,7 @@ <a-table ref="table" size="middle" - :scroll="{x:true}" + :scroll="{x:'max-content',y:465}" bordered rowKey="id" :columns="columns" @@ -195,7 +195,6 @@ :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" - class="j-table-force-nowrap" @change="handleTableChange" > @@ -313,44 +312,50 @@ title: '鎺у埗绯荤粺绫诲瀷', align: "center", // sorter: true, - dataIndex: 'controlSystemType' + dataIndex: 'controlSystemType', + width: 300, }, { title: '涓枃鍚嶇О', align: "center", // sorter: true, - dataIndex: 'chineseName' + dataIndex: 'chineseName', + width: 300, }, { title: '鑻辨枃鍚嶇О', align: "center", // sorter: true, - dataIndex: 'englishName' + dataIndex: 'englishName', + width: 300, }, { title: '搴忓彿', align: "center", // sorter: true, - dataIndex: 'sortNo' + dataIndex: 'sortNo', + width:100 }, { title: '鏄剧ず鏍囧織', align: "center", dataIndex: 'showFlag', customRender: (text) => (text ? filterMultiDictText(this.dictOptions['showFlag'], text) : ''), + width: 300, }, { title:'宸ヤ綔鏇茬嚎鏍囧織', - align: "center", - dataIndex: 'curveGenerationFlags', - customRender: (text) => (text ? filterMultiDictText(this.dictOptions['curveGenerationFlags'], text) : ''), + align: "center", + dataIndex: 'curveGenerationFlags', + customRender: (text) => (text ? filterMultiDictText(this.dictOptions['curveGenerationFlags'], text) : ''), + width: 300, }, { title: '鎿嶄綔', dataIndex: 'action', align: "center", - fixed: "right", - width: 147, + width: 150, + fixed:'right', scopedSlots: { customRender: 'action' } } ], diff --git a/src/views/mdc/base/MdcEquipmentTypeList.vue b/src/views/mdc/base/MdcEquipmentTypeList.vue index b83a7e8..27bdd0e 100644 --- a/src/views/mdc/base/MdcEquipmentTypeList.vue +++ b/src/views/mdc/base/MdcEquipmentTypeList.vue @@ -59,7 +59,9 @@ :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" class="j-table-force-nowrap" - @change="handleTableChange"> + @change="handleTableChange" + :scroll="{x:'max-content',y:465}" + > <template slot="htmlSlot" slot-scope="text"> <div v-html="text"></div> @@ -139,25 +141,30 @@ { title:'璁惧绫诲瀷鍚嶇О', align:"center", - dataIndex: 'equipmentTypeName' + dataIndex: 'equipmentTypeName', + width:530 }, { title:'璁惧绫诲瀷鍥剧墖', align:"center", dataIndex: 'equipmentTypePictures', - scopedSlots: {customRender: 'imgSlot'} + scopedSlots: {customRender: 'imgSlot'}, + width:530 }, { title:'璁惧绫诲瀷鐘舵��', align:"center", dataIndex: 'equipmentTypeStates', customRender: (text) => (text ? filterMultiDictText(this.dictOptions['equipmentTypeStates'], text) : ''), + width:530 }, { title: '鎿嶄綔', dataIndex: 'action', align:"center", - scopedSlots: { customRender: 'action' } + scopedSlots: { customRender: 'action' }, + width:150, + fixed:'right' } ], url: { diff --git a/src/views/mdc/base/MdcplancloseList.vue b/src/views/mdc/base/MdcplancloseList.vue index bfd66cc..a90b63a 100644 --- a/src/views/mdc/base/MdcplancloseList.vue +++ b/src/views/mdc/base/MdcplancloseList.vue @@ -58,7 +58,7 @@ <a-table ref="table" size="middle" - :scroll="{x:true}" + :scroll="{x:'max-content',y:465}" bordered rowKey="id" :columns="columns" @@ -126,29 +126,33 @@ { title:'绫诲瀷', align:"center", - dataIndex: 'planCloseType' + dataIndex: 'planCloseType', + width:500 }, { title:'鏃堕棿绫诲瀷', align:"center", - dataIndex: 'planCloseTimeType' + dataIndex: 'planCloseTimeType', + width:350 }, { title:'鏃堕暱锛堝垎閽燂級', align:"center", - dataIndex: 'planCloseTimeLong' + dataIndex: 'planCloseTimeLong', + width:350 }, { title:'澶囨敞', align:"center", - dataIndex: 'remark' + dataIndex: 'remark', + width:380 }, { title: '鎿嶄綔', dataIndex: 'action', align:"center", fixed:"right", - width:147, + width:150, scopedSlots: { customRender: 'action' } } ], diff --git a/src/views/mdc/base/OvertimeManagement.vue b/src/views/mdc/base/OvertimeManagement.vue index 3a116fc..db4dce5 100644 --- a/src/views/mdc/base/OvertimeManagement.vue +++ b/src/views/mdc/base/OvertimeManagement.vue @@ -2,7 +2,7 @@ <div style="width: 100%; height: 100%;"> <a-card :bordered="false"> <a-row type="flex" :gutter="16"> - <a-col :md="4"> + <a-col :md="5"> <a-tabs :activeKey="activeKey" @change="tabChange"> <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render> <base-tree @getCurrSelected="changeSelectionNode"></base-tree> @@ -12,7 +12,7 @@ </a-tab-pane> </a-tabs> </a-col> - <a-col :md="20"> + <a-col :md="19"> <overtime-management-list ref="OvertimeManagementList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></overtime-management-list> </a-col> </a-row> diff --git a/src/views/mdc/base/Torqueconfiguration.vue b/src/views/mdc/base/Torqueconfiguration.vue index 2aa13cc..be23e7e 100644 --- a/src/views/mdc/base/Torqueconfiguration.vue +++ b/src/views/mdc/base/Torqueconfiguration.vue @@ -2,7 +2,7 @@ <div style="width: 100%; height: 100%;"> <a-card :bordered="false"> <a-row type="flex" :gutter="16"> - <a-col :md="4"> + <a-col :md="5"> <a-tabs :activeKey="activeKey" @change="tabChange"> <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render> <base-tree @getCurrSelected="changeSelectionNode"></base-tree> @@ -12,7 +12,7 @@ </a-tab-pane> </a-tabs> </a-col> - <a-col :md="20"> + <a-col :md="19"> <torqueconfiguration-list ref="TorqueconfigurationList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></torqueconfiguration-list> </a-col> </a-row> diff --git a/src/views/mdc/base/UnplannedDowntimemManager.vue b/src/views/mdc/base/UnplannedDowntimemManager.vue index bfe20a2..53fe732 100644 --- a/src/views/mdc/base/UnplannedDowntimemManager.vue +++ b/src/views/mdc/base/UnplannedDowntimemManager.vue @@ -2,7 +2,7 @@ <div style="width: 100%; height: 100%;"> <a-card :bordered="false"> <a-row type="flex" :gutter="16"> - <a-col :md="4"> + <a-col :md="5"> <a-tabs :activeKey="activeKey" @change="tabChange"> <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render> <base-tree @getCurrSelected="changeSelectionNode"></base-tree> @@ -12,7 +12,7 @@ </a-tab-pane> </a-tabs> </a-col> - <a-col :md="20"> + <a-col :md="19"> <plan-downtime-maintenance-list ref="PlanDowntimeMaintenanceList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></plan-downtime-maintenance-list> </a-col> </a-row> diff --git a/src/views/mdc/base/alarmAnalysis.vue b/src/views/mdc/base/alarmAnalysis.vue index c25bc0c..ba83a02 100644 --- a/src/views/mdc/base/alarmAnalysis.vue +++ b/src/views/mdc/base/alarmAnalysis.vue @@ -2,7 +2,7 @@ <div style="width: 100%; height: 100%;"> <a-card :bordered="false"> <a-row type="flex" :gutter="16"> - <a-col :md="4"> + <a-col :md="5"> <a-tabs :activeKey="activeKey" @change="tabChange"> <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render> <base-tree @getCurrSelected="changeSelectionNode"></base-tree> @@ -12,7 +12,7 @@ </a-tab-pane> </a-tabs> </a-col> - <a-col :md="20"> + <a-col :md="19"> <alarm-analysis-main ref="alarmAnalysisMain" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></alarm-analysis-main> </a-col> </a-row> diff --git a/src/views/mdc/base/mdcPassRate.vue b/src/views/mdc/base/mdcPassRate.vue index 8d7feb0..e74a0b2 100644 --- a/src/views/mdc/base/mdcPassRate.vue +++ b/src/views/mdc/base/mdcPassRate.vue @@ -2,7 +2,7 @@ <div style="width: 100%; height: 100%;"> <a-card :bordered="false"> <a-row type="flex" :gutter="16"> - <a-col :md="4"> + <a-col :md="5"> <a-tabs :activeKey="activeKey" @change="tabChange"> <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render> <base-tree @getCurrSelected="changeSelectionNode"></base-tree> @@ -12,7 +12,7 @@ </a-tab-pane> </a-tabs> </a-col> - <a-col :md="20"> + <a-col :md="19"> <mdc-pass-rate-list ref="MdcStandardProcessDurationList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></mdc-pass-rate-list> </a-col> </a-row> diff --git a/src/views/mdc/base/mdcProcessQuantity.vue b/src/views/mdc/base/mdcProcessQuantity.vue index 3dfdb35..87b1c99 100644 --- a/src/views/mdc/base/mdcProcessQuantity.vue +++ b/src/views/mdc/base/mdcProcessQuantity.vue @@ -2,7 +2,7 @@ <div style="width: 100%; height: 100%;"> <a-card :bordered="false"> <a-row type="flex" :gutter="16"> - <a-col :md="4"> + <a-col :md="5"> <a-tabs :activeKey="activeKey" @change="tabChange"> <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render> <base-tree @getCurrSelected="changeSelectionNode"></base-tree> @@ -12,7 +12,7 @@ </a-tab-pane> </a-tabs> </a-col> - <a-col :md="20"> + <a-col :md="19"> <mdc-process-quantity-list ref="mdcProcessQuantityList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></mdc-process-quantity-list> </a-col> </a-row> diff --git a/src/views/mdc/base/mdcStandardProcessDuration.vue b/src/views/mdc/base/mdcStandardProcessDuration.vue index 7dc4fc9..998ad66 100644 --- a/src/views/mdc/base/mdcStandardProcessDuration.vue +++ b/src/views/mdc/base/mdcStandardProcessDuration.vue @@ -2,7 +2,7 @@ <div style="width: 100%; height: 100%;"> <a-card :bordered="false"> <a-row type="flex" :gutter="16"> - <a-col :md="4"> + <a-col :md="5"> <a-tabs :activeKey="activeKey" @change="tabChange"> <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render> <base-tree @getCurrSelected="changeSelectionNode"></base-tree> @@ -12,7 +12,7 @@ </a-tab-pane> </a-tabs> </a-col> - <a-col :md="20"> + <a-col :md="19"> <mdc-standard-process-duration-list ref="MdcStandardProcessDurationList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></mdc-standard-process-duration-list> </a-col> </a-row> diff --git a/src/views/mdc/base/modules/DeviceProcessReport/DeviceProcessReportList.vue b/src/views/mdc/base/modules/DeviceProcessReport/DeviceProcessReportList.vue index 54f84af..3f87906 100644 --- a/src/views/mdc/base/modules/DeviceProcessReport/DeviceProcessReportList.vue +++ b/src/views/mdc/base/modules/DeviceProcessReport/DeviceProcessReportList.vue @@ -1,6 +1,5 @@ <template> - <div style="width: 100%;"> - <div :bordered="false"> + <div class="device_list"> <!-- 鏌ヨ鍖哄煙 --> <div class="seach-content"> <div class="table-page-search-wrapper"> @@ -17,7 +16,7 @@ </a-form-item> </a-col> - <a-col :md="5" :sm="5" :xs="5"> + <a-col :md="7" :sm="7" :xs="7"> <a-form-item label="鏃堕棿"> <a-range-picker :placeholder="['寮�濮嬫椂闂�', '缁撴潫鏃堕棿']" @@ -41,12 +40,10 @@ </div> </div> - <div class="container" id="EfficiencyShift" style="margin-top: 20px;"> - <div class="table2"> - <a-table :columns="columns" :dataSource="dataSource.records" :pagination="false" bordered> - <span slot="duration" slot-scope="text">{{getFormattedTime(text)}}</span> - </a-table> - </div> + <div class="container" id="EfficiencyShift" style="flex:1;overflow: hidden"> + <a-table :columns="columns" rowKey="equipmentId" :dataSource="dataSource.records" :scroll="{x:'max-content',y:scrollY}" :pagination="false" bordered> + <span slot="duration" slot-scope="text">{{getFormattedTime(text)}}</span> + </a-table> </div> <div class="pagination"> <a-pagination @@ -61,7 +58,6 @@ @showSizeChange="handlePageSizeChange" /> </div> - </div> </div> </template> @@ -151,7 +147,8 @@ } ], dataSource: [], - driveTypeList: [] + driveTypeList: [], + scrollY:465 } }, props: { nodeTree: '', Type: '', nodePeople: '' }, @@ -161,6 +158,13 @@ this.queryParam.typeTree = '1' this.loadData() this.getDriveTypeByApi() + }, + mounted(){ + window.addEventListener('resize',this.handleWindowResize) + this.handleWindowResize() + }, + beforeDestroy(){ + window.removeEventListener('resize',this.handleWindowResize) }, watch: { Type(valmath) { @@ -328,112 +332,56 @@ return ( option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0 ) + }, + + /** + * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙� + */ + handleWindowResize(){ + const boxHeight = +window.getComputedStyle(document.getElementById('EfficiencyShift')).height.slice(0,-2) + const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) + this.scrollY = boxHeight - tableHeadHeight } } } </script> <style scoped> - .table2 { - width: 100%; - height: 100%; - overflow: auto; - } - .pagination { display: flex; justify-content: end; margin: 20px 0; } - @media screen and (min-width: 1920px) { - #EfficiencyShift { - height: 670px !important; - overflow: scroll; + .device_list{ + overflow: hidden; + display: flex; + flex-direction: column; + } + + @media screen and (min-width: 1920px){ + .device_list{ + height: 811px!important; } } - - @media screen and (min-width: 1680px) and (max-width: 1920px) { - #EfficiencyShift { - height: 670px !important; - overflow: scroll; + @media screen and (min-width: 1680px) and (max-width: 1920px){ + .device_list{ + height: 811px!important; } } - - @media screen and (min-width: 1400px) and (max-width: 1680px) { - #EfficiencyShift { - height: 522px !important; - overflow: scroll; + @media screen and (min-width: 1400px) and (max-width: 1680px){ + .device_list{ + height: 663px!important; } } - - @media screen and (min-width: 1280px) and (max-width: 1400px) { - #EfficiencyShift { - height: 414px !important; - overflow: scroll; + @media screen and (min-width: 1280px) and (max-width: 1400px){ + .device_list{ + height: 564px!important; } } - - @media screen and (max-width: 1280px) { - #EfficiencyShift { - height: 414px !important; - overflow: scroll; + @media screen and (max-width: 1280px){ + .device_list{ + height: 564px!important; } - } - - .identifyingclass { - width: 55px; - height: 15px; - display: inline-block - } - - .dataContent { - white-space: nowrap; - /*margin: 0;*/ - /*border: none;*/ - border-collapse: separate; - border-spacing: 0; - /*table-layout: fixed;*/ - border: 1px solid #ccc; - /*border: 1px solid #ccc;*/ - width: 100%; - /*height: 100%;*/ - /*overflow: hidden;*/ - /*overflow-y: auto;*/ - text-align: center; - } - - .dataContent .fixed th { - width: 50px; - } - - .dataContent .thead th { - background-color: #fafafa; - text-align: center; - height: 30px; - 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;*/ } </style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/HolidayManagement/HolidayManagementList.vue b/src/views/mdc/base/modules/HolidayManagement/HolidayManagementList.vue index e12a612..184f6bd 100644 --- a/src/views/mdc/base/modules/HolidayManagement/HolidayManagementList.vue +++ b/src/views/mdc/base/modules/HolidayManagement/HolidayManagementList.vue @@ -9,12 +9,12 @@ <a-range-picker @change="dateParamChange" v-model="dates" format="YYYY-MM-DD"/> </a-form-item> </a-col> - <a-col :md="4" :sm="4"> + <a-col :md="5" :sm="5"> <a-form-item label="璁惧缂栧彿"> <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" v-model="queryParams.equipmentId"></a-input> </a-form-item> </a-col> - <a-col :md="4" :sm="4" :xs="4"> + <a-col :md="5" :sm="5" :xs="5"> <a-form-item label="璁惧鍚嶇О"> <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" v-model="queryParams.equipmentName"></a-input> </a-form-item> @@ -58,9 +58,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"> <span slot="action" slot-scope="text, record"> @@ -138,16 +138,19 @@ queryParamEquip:{}, queryParamPeople:{}, dataStartsoucre:[], + scrollY:465, columns: [ { title: '璁惧缂栧彿', align: 'center', - dataIndex: 'equipmentId' + dataIndex: 'equipmentId', + width:250 }, { title: '璁惧鍚嶇О', align: 'center', dataIndex: 'equipmentName', + width:250 // defaultSortOrder:'descend', // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} }, @@ -155,6 +158,7 @@ title: '鏃ユ湡', align: 'center', dataIndex: 'vacationDate', + width:250 // scopedSlots:{customRender:'startTime'}, // customRender:(text,row,index) => { // return moment(text).format("YYYY-MM-DD HH:mm:ss") @@ -163,19 +167,22 @@ { title: '绫诲瀷', align: 'center', - dataIndex: 'vacationType' + dataIndex: 'vacationType', + width:250 }, { title: '澶囨敞', align: 'center', - dataIndex: 'notes' + dataIndex: 'notes', + width:250 }, { title: '鎿嶄綔', dataIndex: 'action', scopedSlots: {customRender: 'action'}, align: "center", - width: 150 + width: 150, + fixed:'right' } ], url: { @@ -629,9 +636,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> @@ -639,34 +662,35 @@ <style lang="less" scoped> @import '~@assets/less/common.less'; + .device_list{ + display: flex; + flex-direction: column; + overflow: hidden; + } + @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> diff --git a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue index 4a0be14..e9fec71 100644 --- a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue +++ b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue @@ -1,6 +1,5 @@ <template> - <div style="width: 100%;"> - <div :bordered="false"> + <div class="device_list"> <!-- 鏌ヨ鍖哄煙 --> <div class="seach-content"> <div class="table-page-search-wrapper"> @@ -16,7 +15,7 @@ /> </a-form-item> </a-col> - <a-col :md="5" :sm="5" :xs="5"> + <a-col :md="7" :sm="7" :xs="7"> <a-form-item label="鏃堕棿"> <a-range-picker :placeholder="['寮�濮嬫椂闂�', '缁撴潫鏃堕棿']" @@ -27,7 +26,7 @@ /> </a-form-item> </a-col> - <a-col :md="8" :sm="8" :xs="8"> + <a-col :md="2" :sm="2" :xs="2"> <a-space> <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button> @@ -40,27 +39,22 @@ </div> </div> - <div class="container" id="EfficiencyShift" style="margin-top: 20px;"> - <div class="table2"> - <a-table :columns="columns" :dataSource="dataSource.records" :pagination="false" bordered - :scroll="{ x: 3200, y: false }"> - </a-table> - </div> + <div id="EfficiencyShift" style="flex:1;overflow: hidden"> + <a-table :columns="columns" rowKey="equipmentId" :dataSource="dataSource.records" :pagination="false" :scroll="{x:'max-content',y:scrollY}" bordered></a-table> </div> - <div class="pagination"> - <a-pagination - :total=dataSource.total - :show-total="(total, range) => `${range[0]}-${range[1]} 鍏� ${total} 鏉" - :page-size="+queryParam.pageSize" - :default-current="1" - :current=+queryParam.pageNo - show-size-changer - :pageSizeOptions="['20','30','40','50']" - @change="handlePageNoChange" - @showSizeChange="handlePageSizeChange" - /> - </div> - </div> + <!--<div class="pagination">--> + <!--<a-pagination--> + <!--:total=dataSource.total--> + <!--:show-total="(total, range) => `${range[0]}-${range[1]} 鍏� ${total} 鏉"--> + <!--:page-size="+queryParam.pageSize"--> + <!--:default-current="1"--> + <!--:current=+queryParam.pageNo--> + <!--show-size-changer--> + <!--:pageSizeOptions="['20','30','40','50']"--> + <!--@change="handlePageNoChange"--> + <!--@showSizeChange="handlePageSizeChange"--> + <!--/>--> + <!--</div>--> </div> </template> @@ -77,15 +71,9 @@ components: {}, data() { return { - typeTree: '', - typeParent: 1, - typeEquipment: 1, - allowClear: true, - allowClearSu: true, dates: [moment().subtract('month', 1), moment().subtract('month', 1)], - identifying: [], queryParam: { - pageSize: 20, + pageSize: 10000, pageNo: 1 }, queryParamEquip: {}, @@ -107,21 +95,18 @@ customRender: function(t, r, index) { return parseInt(index) + 1 } - // fixed: 'left' }, { title: '璁惧缁熶竴缂栧彿', align: 'center', dataIndex: 'equipmentId', width: 120 - // fixed: 'left' }, { title: '璁惧鍚嶇О', align: 'center', width: 200, dataIndex: 'equipmentName' - // fixed: 'left' }, { title: '璁惧鍨嬪彿', @@ -283,17 +268,24 @@ } ], dataSource: [], - driveTypeList: [] + driveTypeList: [], + scrollY:465, } }, props: { nodeTree: '', Type: '', nodePeople: '' }, created() { - // this.initShiftList() this.queryParam.startTime = moment(this.dates[0]).format('YYYY-MM') this.queryParam.endTime = moment(this.dates[1]).format('YYYY-MM') this.queryParam.typeTree = '1' this.loadData() this.getDriveTypeByApi() + }, + mounted(){ + window.addEventListener('resize',this.handleWindowResize) + this.handleWindowResize() + }, + beforeDestroy(){ + window.removeEventListener('resize',this.handleWindowResize) }, watch: { Type(valmath) { @@ -456,112 +448,56 @@ return ( option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0 ) + }, + + /** + * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙� + */ + handleWindowResize(){ + const boxHeight = +window.getComputedStyle(document.getElementById('EfficiencyShift')).height.slice(0,-2) + const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) + this.scrollY = boxHeight - tableHeadHeight } } } </script> <style scoped> - .table2 { - width: 100%; - height: 100%; - overflow: auto; - } - .pagination { display: flex; justify-content: end; margin: 20px 0; } - @media screen and (min-width: 1920px) { - #EfficiencyShift { - height: 670px !important; - overflow: scroll; + .device_list{ + overflow: hidden; + display: flex; + flex-direction: column; + } + + @media screen and (min-width: 1920px){ + .device_list{ + height: 811px!important; } } - - @media screen and (min-width: 1680px) and (max-width: 1920px) { - #EfficiencyShift { - height: 670px !important; - overflow: scroll; + @media screen and (min-width: 1680px) and (max-width: 1920px){ + .device_list{ + height: 811px!important; } } - - @media screen and (min-width: 1400px) and (max-width: 1680px) { - #EfficiencyShift { - height: 522px !important; - overflow: scroll; + @media screen and (min-width: 1400px) and (max-width: 1680px){ + .device_list{ + height: 663px!important; } } - - @media screen and (min-width: 1280px) and (max-width: 1400px) { - #EfficiencyShift { - height: 414px !important; - overflow: scroll; + @media screen and (min-width: 1280px) and (max-width: 1400px){ + .device_list{ + height: 564px!important; } } - - @media screen and (max-width: 1280px) { - #EfficiencyShift { - height: 414px !important; - overflow: scroll; + @media screen and (max-width: 1280px){ + .device_list{ + height: 564px!important; } - } - - .identifyingclass { - width: 55px; - height: 15px; - display: inline-block - } - - .dataContent { - white-space: nowrap; - /*margin: 0;*/ - /*border: none;*/ - border-collapse: separate; - border-spacing: 0; - /*table-layout: fixed;*/ - border: 1px solid #ccc; - /*border: 1px solid #ccc;*/ - width: 100%; - /*height: 100%;*/ - /*overflow: hidden;*/ - /*overflow-y: auto;*/ - text-align: center; - } - - .dataContent .fixed th { - width: 50px; - } - - .dataContent .thead th { - background-color: #fafafa; - text-align: center; - height: 30px; - 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;*/ } </style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/OvertimeManagement/OvertimeManagementList.vue b/src/views/mdc/base/modules/OvertimeManagement/OvertimeManagementList.vue index 6f55e67..f8ee888 100644 --- a/src/views/mdc/base/modules/OvertimeManagement/OvertimeManagementList.vue +++ b/src/views/mdc/base/modules/OvertimeManagement/OvertimeManagementList.vue @@ -9,7 +9,7 @@ <a-range-picker @change="dateParamChange" v-model="dates" format="YYYY-MM-DD HH:mm:ss"/> </a-form-item> </a-col> - <a-col :md="4" :sm="4"> + <a-col :md="5" :sm="5"> <a-form-item label="璁惧缂栧彿"> <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" v-model="queryParams.equipmentId"></a-input> </a-form-item> @@ -60,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"> <span slot="action" slot-scope="text, record"> @@ -144,16 +144,19 @@ queryParamEquip:{}, queryParamPeople:{}, dataStartsoucre:[], + scrollY:465, columns: [ { title: '璁惧缂栧彿', align: 'center', - dataIndex: 'equipmentId' + dataIndex: 'equipmentId', + width:150 }, { title: '璁惧鍚嶇О', align: 'center', dataIndex: 'equipmentName', + width:200 // defaultSortOrder:'descend', // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} }, @@ -161,6 +164,7 @@ title: '鏃ユ湡', align: 'center', dataIndex: 'effectiveDate', + width:150 // scopedSlots:{customRender:'startTime'}, // customRender:(text,row,index) => { // return moment(text).format("YYYY-MM-DD HH:mm:ss") @@ -169,33 +173,39 @@ { title: '鐝寮�濮嬫椂闂�', align: 'center', - dataIndex: 'startDate' + dataIndex: 'startDate', + width:150 }, { title: '鐝缁撴潫鏃堕棿', align: 'center', - dataIndex: 'endDate' + dataIndex: 'endDate', + width:150 }, { title: '鍔犵彮寮�濮嬫椂闂�', align: 'center', - dataIndex: 'startTime' + dataIndex: 'startTime', + width:150 }, { title: '鍔犵彮缁撴潫鏃堕棿', align: 'center', - dataIndex: 'endTime' + dataIndex: 'endTime', + width:150 }, { title: '澶囨敞', align: 'center', - dataIndex: 'remark' + dataIndex: 'remark', + width:150 }, { title: '鎿嶄綔', dataIndex: 'action', scopedSlots: {customRender: 'action'}, align: "center", + fixed:'right', width: 150 } ], @@ -686,9 +696,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> @@ -696,34 +722,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> diff --git a/src/views/mdc/base/modules/TorqueconfigurationList/TorqueconfigurationList.vue b/src/views/mdc/base/modules/TorqueconfigurationList/TorqueconfigurationList.vue index b82d26a..eb0e098 100644 --- a/src/views/mdc/base/modules/TorqueconfigurationList/TorqueconfigurationList.vue +++ b/src/views/mdc/base/modules/TorqueconfigurationList/TorqueconfigurationList.vue @@ -1,20 +1,20 @@ <template> - <div :bordered="false" class="device_list"> + <div class="device_list"> <!-- 鏌ヨ鍖哄煙 --> - <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper"> + <div style=" background-color: #fff;overflow: auto" class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> - <a-row :gutter="24"> + <a-row :gutter="24" style="width: 100%;"> <a-col :md="7" :sm="7"> <a-form-item label="鏃堕棿"> <a-range-picker @change="dateParamChange" v-model="dates" format="YYYY-MM-DD HH:mm:ss"/> </a-form-item> </a-col> - <a-col :md="4" :sm="4"> + <a-col :md="5" :sm="5"> <a-form-item label="璁惧缂栧彿"> <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" v-model="queryParams.equipmentId"></a-input> </a-form-item> </a-col> - <a-col :md="4" :sm="4" :xs="4"> + <a-col :md="5" :sm="5" :xs="5"> <a-form-item label="璁惧鍚嶇О"> <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" v-model="queryParams.equipmentName"></a-input> </a-form-item> @@ -59,11 +59,11 @@ </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" + :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" - @change="handleTableChange"> + @change="handleTableChange" :scroll="{x:'max-content',y:scrollY}"> <span slot="action" slot-scope="text, record"> <a @click="handleEdit(record)">缂栬緫</a> <a-divider type="vertical" /> @@ -116,12 +116,10 @@ import JEllipsis from '@/components/jeecg/JEllipsis' import Tooltip from 'ant-design-vue/es/tooltip' import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' - import ACol from 'ant-design-vue/es/grid/Col' export default { name: 'TorqueconfigurationList', mixins: [JeecgListMixin], components: { - ACol, Tooltip, TorqueconfigurationModal, TorqueconfigurationModaledit, @@ -146,16 +144,19 @@ queryParamEquip:{}, queryParamPeople:{}, dataStartsoucre:[], + scrollY:465, columns: [ { title: '璁惧缂栧彿', align: 'center', - dataIndex: 'equipmentId' + dataIndex: 'equipmentId', + width:250 }, { title: '璁惧鍚嶇О', align: 'center', dataIndex: 'equipmentName', + width:250 // defaultSortOrder:'descend', // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} }, @@ -163,6 +164,7 @@ title: '鏃堕棿', align: 'center', dataIndex: 'torqueDate', + width:250 // scopedSlots:{customRender:'startTime'}, // customRender:(text,row,index) => { // return moment(text).format("YYYY-MM-DD HH:mm:ss") @@ -171,19 +173,22 @@ { title: '鎵煩鍊�', align: 'center', - dataIndex: 'torqueValue' + dataIndex: 'torqueValue', + width:150 }, { title: '澶囨敞', align: 'center', - dataIndex: 'notes' + dataIndex: 'notes', + width:350 }, { title: '鎿嶄綔', dataIndex: 'action', scopedSlots: {customRender: 'action'}, align: "center", - width: 150 + width: 150, + fixed:'right' } ], url: { @@ -669,6 +674,15 @@ 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 + } // /** // * 杞﹂棿閫変腑椤瑰彇娑堝悗瑙﹀彂姝や簨浠讹紝鐢盉aseTree缁勪欢鐢变簨浠舵�荤嚎瑙﹀彂 // * @param value 鎻愮ず淇℃伅 @@ -682,6 +696,13 @@ created() { this.queryParam.typeTree = "1" // this.$bus.$on('treeClearSelected',this.treeClearSelected) + }, + mounted(){ + window.addEventListener('resize',this.handleWindowResize) + this.handleWindowResize() + }, + beforeDestroy(){ + window.removeEventListener('resize',this.handleWindowResize) } } </script> @@ -689,34 +710,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> diff --git a/src/views/mdc/base/modules/UnplannedDowntimemManager/UnplannedDowntimemManagerList.vue b/src/views/mdc/base/modules/UnplannedDowntimemManager/UnplannedDowntimemManagerList.vue index 6f7e767..172ff2b 100644 --- a/src/views/mdc/base/modules/UnplannedDowntimemManager/UnplannedDowntimemManagerList.vue +++ b/src/views/mdc/base/modules/UnplannedDowntimemManager/UnplannedDowntimemManagerList.vue @@ -60,9 +60,9 @@ </div> <!-- table鍖哄煙-begin --> - <div id="DeviceList"> + <div id="DeviceList" style="overflow: hidden;flex: 1"> <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"> <span slot="action" slot-scope="text, record"> @@ -140,6 +140,7 @@ queryParamEquip:{}, queryParamPeople:{}, dataStartsoucre:[], + scrollY:465, columns: [ { title: '#', @@ -154,12 +155,14 @@ { 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} }, @@ -167,6 +170,7 @@ title: '绫诲瀷', align: 'center', dataIndex: 'noplanType', + width:200 // defaultSortOrder:'descend', // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} }, @@ -174,6 +178,7 @@ title: '寮�濮嬫椂闂�', align: 'center', dataIndex: 'startTime', + width:200 // scopedSlots:{customRender:'startTime'}, // customRender:(text,row,index) => { // return moment(text).format("YYYY-MM-DD HH:mm:ss") @@ -182,18 +187,21 @@ { title: '缁撴潫鏃堕棿', align: 'center', - dataIndex: 'endTime' + dataIndex: 'endTime', + width:200 }, { title: '澶囨敞', align: 'center', - dataIndex: 'remark' + dataIndex: 'remark', + width:200 }, { title: '鎿嶄綔', dataIndex: 'action', scopedSlots: {customRender: 'action'}, align: "center", + fixed:'right', width: 150 } ], @@ -649,9 +657,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> @@ -659,34 +683,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> diff --git a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue index 7150831..12d210a 100644 --- a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue +++ b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue @@ -5,13 +5,13 @@ <div class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter="24"> - <a-col :md="6" :sm="6"> + <a-col :md="7" :sm="7"> <a-form-item label="鏃堕棿"> <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates"/> </a-form-item> </a-col> - <a-col :lg="2" :md="3" :sm="3" :xs="3"> + <a-col :lg="2" :md="2" :sm="2" :xs="2"> <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> </a-col> </a-row> @@ -19,44 +19,6 @@ </div> <div id="DeviceList"> <div class="openRateTrendDg"> - <!--<div id="Efficiency" class="container">--> - <!--<div class="table2">--> - <!--<table class="dataContent table" border="1" cellspacing="0" cellpadding="0"--> - <!--style="white-space: nowrap;text-align: left;">--> - <!--<thead>--> - <!--<tr class="thead fixed equipname">--> - <!--<th class="thgu dong1 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">鎶ヨ鍙�--> - <!--</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: 150px; max-width: 150px;width: 150px;">--> - <!--鍚堣鎸佺画鏃堕棿--> - <!--</th>--> - <!--<th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">--> - <!--鎶ヨ淇℃伅--> - <!--</th>--> - <!--<!–<template v-for="(tableHead, index) in tableHeads">–>--> - <!--<!–<th class="timeth" :colspan="checkedList.length">{{tableHead}}</th>–>--> - <!--<!–</template>–>--> - <!--</tr>--> - <!--</thead>--> - <!--<tbody>--> - <!--<tr class="mathData" v-for="(item, index) in dataList" @click="TableDraw(index,item)">--> - <!--<td class="tdgu kaitou">{{item.alarmCode}}</td>--> - <!--<td class="tdgu1 kaitou">{{item.count}}</td>--> - <!--<td class="tdgu2 kaitou">{{getFormattedTime(item.timeCount)}}--> - <!--<!–<td class="tdgu2 kaitou">{{item.timeCount}}</td>–>--> - <!--<td class="tdgu3 kaitou">{{item.alarmContent}}</td>--> - <!--<!–<template v-for="(tableHead, index) in item.dataList">–>--> - <!--<!–<td :style="{background:tableHead.color }">{{tableHead.utilizationRate | numFilter}}</td>–>--> - <!--<!–</template>–>--> - <!--</tr>--> - <!--</tbody>--> - <!--</table>--> - <!--</div>--> - <!--</div>--> - <!--<a-spin :spinning=""></a-spin>--> <a-table :columns="columns" :data-source="dataList" bordered :pagination="false" :scroll="{y:210}" :customRow="customRow" rowKey="alarmCode" @expand="handleExpandChange" :loading="outerDataLoading" @@ -197,6 +159,10 @@ }, mounted() { this.drawWrin() + window.addEventListener('resize',this.handleWindowResize) + }, + beforeDestroy(){ + window.removeEventListener('resize',this.handleWindowResize) }, watch: { Type(valmath) { @@ -454,7 +420,7 @@ }) }, drawWrin() { - let equipmentWarningPie = this.$echarts.init(document.getElementById('MdcEquipmentWarningPie'), 'macarons') + this.equipmentWarningPie = this.$echarts.init(document.getElementById('MdcEquipmentWarningPie'), 'macarons') let equipmentWarningPieOption = { title: { text: '鍚勮澶囧嚭鐜版鎶ヨ鐨勬瘮渚�', @@ -493,8 +459,8 @@ // data:[{name:'jjjjjjj',value:'2'}] }] } - equipmentWarningPie.setOption(equipmentWarningPieOption, true) - let equipmentWarningLine = this.$echarts.init(document.getElementById('MdcEquipmentWarningLine'), 'macarons') + this.equipmentWarningPie.setOption(equipmentWarningPieOption, true) + this.equipmentWarningLine = this.$echarts.init(document.getElementById('MdcEquipmentWarningLine'), 'macarons') let equipmentWarningLineOption = { title: { text: '姣忓ぉ鍑虹幇姝ゆ姤璀︾殑鏁伴噺璧板娍', @@ -562,7 +528,7 @@ } ] } - equipmentWarningLine.setOption(equipmentWarningLineOption, true) + this.equipmentWarningLine.setOption(equipmentWarningLineOption, true) }, /** @@ -611,220 +577,19 @@ _this.innerDataLoading = false }) } + }, + + /** + * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙� + */ + handleWindowResize(){ + if(this.equipmentWarningPie) this.equipmentWarningPie.resize() + if(this.equipmentWarningLine) this.equipmentWarningLine.resize() } } } </script> <style scoped> - .dataContent { - white-space: nowrap; - /*margin: 0;*/ - /*border: none;*/ - border-collapse: separate; - border-spacing: 0; - /*table-layout: fixed;*/ - border: 1px solid #ccc; - /*border: 1px solid #ccc;*/ - width: 100%; - /*height: 100%;*/ - /*overflow: hidden;*/ - /*overflow-y: auto;*/ - text-align: center; - } - - /*.dataContent .fixed th {*/ - /*width: 50px;*/ - /*}*/ - - .dataContent .thead th { - background-color: #fafafa; - text-align: center; - height: 30px; - padding: 5px; - } - - .dataContent .notfixed th { - /*width: auto;*/ - } - - .dataContent tr td { - height: 35px; - } - - .dataContent .mathData:hover td { - background-color: #e6f7ff; - } - - .dataContent .mathData td { - padding: 10px; - /*display: none;*/ - } - - .dataContent .mathData td { - /*background-color: #ff9bd2;*/ - cursor: pointer; - } - - .dataContent .mathData .tdd { - /*display: none;*/ - } - - .table2 { - width: 100%; - height: 100%; - overflow: auto; - } - - /*tr th {*/ - /*height: 50px!important;*/ - /*}*/ - /*tr td{*/ - /*height: 50px!important;*/ - /*}*/ - .table2 thead tr th:first-child, - .table tbody tr .tdgu { - position: sticky; - left: 0; - z-index: 1; - } - - .table tbody tr .kaitou { - z-index: 1; - background-color: white; - } - - .table tbody tr .tdgu1 { - position: sticky; - left: 150px; - z-index: 2; - } - - .table tbody tr .tdgu2 { - position: sticky; - left: 300px; - z-index: 2; - } - - .table tbody tr .tdgu3 { - position: sticky; - left: 450px; - z-index: 2; - } - - .table tbody tr .tdgu4 { - position: sticky; - left: 550px; - z-index: 2; - } - - .table tbody tr .tdgu5 { - position: sticky; - left: 700px; - 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: 6 !important; - } - - .table2 thead .equipname .name { - z-index: 3; - } - - .table2 thead .equipname .dong1 { - z-index: 4; - left: 0; - /*border: 1px solid #000;*/ - } - - .table2 thead .equipname .dong2 { - z-index: 5; - left: 150px; - } - - .table2 thead .equipname .dong3 { - z-index: 5; - left: 300px; - } - - .table2 thead .equipname .dong4 { - z-index: 5; - left: 450px; - } - - .table2 thead .equipname .dong5 { - z-index: 5; - left: 550px; - } - - .table2 thead .equipname .dong6 { - z-index: 5; - left: 700px; - } - - @media screen and (min-width: 1920px) { - #Efficiency { - height: 258px !important; - overflow: scroll; - } - } - - @media screen and (min-width: 1680px) and (max-width: 1920px) { - #Efficiency { - height: 258px !important; - overflow: scroll; - } - } - - @media screen and (min-width: 1400px) and (max-width: 1680px) { - #Efficiency { - height: 160px !important; - overflow: scroll; - } - } - - @media screen and (min-width: 1280px) and (max-width: 1400px) { - #Efficiency { - height: 60px !important; - overflow: scroll; - } - } - - @media screen and (max-width: 1280px) { - #Efficiency { - height: 90px !important; - overflow: scroll; - } - } - - #Efficiency .table_guding1 { - position: absolute; - overflow: hidden; - width: 500px; - } - - #Efficiency .table_guding2 { - overflow-x: scroll; - width: 500px; - } - - /deep/ .ant-card { - height: 100% !important; - } - - /deep/ .ant-card .ant-card-body { - height: 100% !important; - } - .efficiency_list #DeviceList { height: 90% !important; } diff --git a/src/views/mdc/base/modules/deviceBaseInfo/EquipmentLayout.vue b/src/views/mdc/base/modules/deviceBaseInfo/EquipmentLayout.vue index b7d8c93..71d216f 100644 --- a/src/views/mdc/base/modules/deviceBaseInfo/EquipmentLayout.vue +++ b/src/views/mdc/base/modules/deviceBaseInfo/EquipmentLayout.vue @@ -124,42 +124,38 @@ .equipment_box img{ width: 45%; } + + .containerequip{ + overflow: auto; + } + @media screen and (min-width: 1920px){ .containerequip{ height: 640px!important; - overflow: scroll; } } @media screen and (min-width: 1680px) and (max-width: 1920px){ .containerequip{ height: 640px!important; - overflow: scroll; } } @media screen and (min-width: 1400px) and (max-width: 1680px){ .containerequip{ height: 493px!important; - overflow: scroll; } } @media screen and (min-width: 1280px) and (max-width: 1400px){ .containerequip{ height: 493px!important; - overflow: scroll; } } @media screen and (max-width: 1280px){ .containerequip{ height: 394px!important; - overflow: scroll; } } .container_content { width: 100%; - /*display: flex;*/ - /*flex-wrap: wrap;*/ - /*justify-content: space-between;*/ - /*align-items: center;*/ position: relative; } @@ -168,34 +164,13 @@ display: inline-block; text-align: center; margin-bottom: 5%; - /*float: left;*/ } .container_content .contnet p { padding-top: 5%; } - /*.container_content .contnet img {*/ - /*padding: 5%;*/ - /*}*/ - /**/ - .addclass { - /*float: left;*/ - /*position: absolute;*/ - /*top: 0;*/ - /*left: 0;*/ - } - - .noaddclass { - /*float: left;*/ - } - - /*.addclass .content_equipment img {*/ - /*border-bottom: 2px solid #e957ff;*/ - /*!*padding-bottom: 8%;*!*/ - /*}*/ .addclass p { border-bottom: 2px solid #e957ff; - /*padding-bottom: 8%;*/ } </style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/deviceBaseInfo/EquipmentList.vue b/src/views/mdc/base/modules/deviceBaseInfo/EquipmentList.vue index 3f41c4e..fc8afcb 100644 --- a/src/views/mdc/base/modules/deviceBaseInfo/EquipmentList.vue +++ b/src/views/mdc/base/modules/deviceBaseInfo/EquipmentList.vue @@ -1,5 +1,5 @@ <template> - <a-card :bordered="false"> + <a-card :bordered="false" style="display: flex;flex-direction: column"> <!-- 鏌ヨ鍖哄煙 --> <!--<div class="table-page-search-wrapper">--> @@ -48,7 +48,7 @@ <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">閲嶇疆</a-button>--> <!--</div>--> - <div class="equipmentList"> + <div class="equipmentList" id="DeviceList"> <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">--> <!--<i class="anticon anticon-info-circle ant-alert-icon"></i>宸查�夋嫨 <a style="font-weight: 600">{{--> <!--selectedRowKeys.length }}</a>椤� --> @@ -56,8 +56,7 @@ <!--</div>--> <a-table ref="table" bordered size="middle" rowKey="equipmentId" :columns="columns" :dataSource="dataSource" - :pagination="false" :loading="loading" - style="height: 100%; overflow-y: scroll;"> + :pagination="false" :loading="loading" :scroll="{x:'max-content',y:scrollY}"> </a-table> </div> </a-card> @@ -79,25 +78,30 @@ title: '璁惧ID', align: "center", dataIndex: 'equipmentId', + width:250 }, { title: '璁惧鍚嶇О', align: "center", dataIndex: 'equipmentName', + width:300 }, { title: '鐘舵��', align: "center", dataIndex: 'oporationDict', + width:150 }, { title: '閲囬泦鏃堕棿', align: "center", dataIndex: 'collecttime', defaultSortOrder:'descend', - sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1} + sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1}, + width:350 }, ], + scrollY:465, } }, props: { dataSource: { @@ -108,38 +112,47 @@ watch: { }, methods: { - } + 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 + } + }, + mounted(){ + window.addEventListener('resize',this.handleWindowResize) + this.handleWindowResize() + }, } </script> <style scoped> + .equipmentList{ + flex: 1; + overflow: hidden; + } + @media screen and (min-width: 1920px){ .equipmentList{ height: 640px!important; - overflow: scroll; } } @media screen and (min-width: 1680px) and (max-width: 1920px){ .equipmentList{ height: 640px!important; - overflow: scroll; } } @media screen and (min-width: 1400px) and (max-width: 1680px){ .equipmentList{ height: 493px!important; - overflow: scroll; } } @media screen and (min-width: 1280px) and (max-width: 1400px){ .equipmentList{ height: 493px!important; - overflow: scroll; } } @media screen and (max-width: 1280px){ .equipmentList{ height: 394px!important; - overflow: scroll; } } diff --git a/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue b/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue index 5706370..6e3e8fe 100644 --- a/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue +++ b/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue @@ -1,12 +1,10 @@ <template> <div class="deviceCalendar_list"> - <div :bordered="false"> <!-- 鏌ヨ鍖哄煙 --> - <div> <div class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> - <a-row :gutter="24"> + <a-row :gutter="24" style="width: 100%"> <a-col :md="6" :sm="6"> <a-form-item label="鏃堕棿"> <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/> @@ -34,9 +32,12 @@ </div> </div> - <div style="overflow: auto;width: 100%;margin-top: 20px;height: 569px;"> - <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" @change="handleTableChange" class="ant-table-striped" - :dataSource="dataSource" :pagination="ipagination" :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"> + <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList"> + <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}" + size="middle" rowKey="id" :columns="columns" + @change="handleTableChange" class="ant-table-striped" + :dataSource="dataSource" :pagination="ipagination" + :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"> <span slot="action" slot-scope="text, record"> <a-popconfirm @@ -53,7 +54,6 @@ </a-table> </div> <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model> - </div> </div> </template> @@ -79,6 +79,7 @@ identifying: [], queryParam: {}, disableMixinCreated: true, + scrollY:465, /* 鍒嗛〉鍙傛暟 */ ipagination:{ current: 1, @@ -96,60 +97,70 @@ title: '鏃ユ湡', align: 'center', dataIndex: 'effectiveDate', + width:100, }, { title: '璁惧缂栧彿', align: 'center', - dataIndex: 'equipmentId' + dataIndex: 'equipmentId', + width:150 }, { title: '璁惧鍚嶇О', align: 'center', dataIndex: 'equipmentName', + width:150 }, { title: '鐝埗', align: 'center', - dataIndex: 'shiftName' + dataIndex: 'shiftName', + width:150 }, { title: '鐝', align: 'center', - dataIndex: 'shiftSubName' + dataIndex: 'shiftSubName', + width:150 }, { title: '寮�濮嬫椂闂�', align: 'center', - dataIndex: 'startDate' + dataIndex: 'startDate', + width:140 }, { title: '缁撴潫鏃堕棿', align: 'center', - dataIndex: 'endDate' + dataIndex: 'endDate', + width:140 }, { title: '鏄惁璺ㄥぉ', align: 'center', dataIndex: 'isDaySpan', - scopedSlots: { customRender: 'isDaySpan' } + scopedSlots: { customRender: 'isDaySpan' }, + width:100 }, { title: '寮�濮嬩紤鎭椂闂�', align: 'center', - dataIndex: 'sleepStartDate' + dataIndex: 'sleepStartDate', + width:140 }, { title: '缁撴潫浼戞伅鏃堕棿', align: 'center', - dataIndex: 'sleepEndDate' + dataIndex: 'sleepEndDate', + width:140 }, { title: '鎿嶄綔', dataIndex: 'action', align: "center", - fixed: "right", - width: 147, - scopedSlots: { customRender: 'action' } + width: 100, + scopedSlots: { customRender: 'action' }, + fixed:'right' } ], checkedList: ['lyl'], @@ -167,6 +178,13 @@ this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') this.queryParam.typeTree = "1" this.loadData() + }, + mounted(){ + window.addEventListener('resize',this.handleWindowResize) + this.handleWindowResize() + }, + beforeDestroy(){ + window.removeEventListener('resize',this.handleWindowResize) }, watch: { Type(valmath){ @@ -252,103 +270,50 @@ this.$refs.modalForm.add(record) this.$refs.modalForm.title = '璁惧宸ヤ綔鏃ュ巻閰嶇疆' this.$refs.modalForm.disableSubmit = false + }, + + 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 } } } </script> <style scoped> + .deviceCalendar_list{ + overflow: hidden; + display: flex; + flex-direction: column; + } + @media screen and (min-width: 1920px){ .deviceCalendar_list{ height: 812px!important; - overflow: scroll; } } @media screen and (min-width: 1680px) and (max-width: 1920px){ .deviceCalendar_list{ height: 812px!important; - overflow: scroll; } } @media screen and (min-width: 1400px) and (max-width: 1680px){ .deviceCalendar_list{ height: 664px!important; - overflow: scroll; } } @media screen and (min-width: 1280px) and (max-width: 1400px){ .deviceCalendar_list{ height: 565px!important; - overflow: scroll; } } @media screen and (max-width: 1280px){ .deviceCalendar_list{ height: 565px!important; - overflow: scroll; } } .ant-table-striped /deep/ .table-striped td { background-color: #fafafa; - } - .identifyingclass { - width: 55px; - height: 15px; - display: inline-block - } - - .dataContent { - border: 1px solid #ccc; - width: 100%; - /*height: 100%;*/ - overflow: hidden; - overflow-y: auto; - text-align: center; - } - - .dataContent .fixed th { - width: 50px; - } - - .dataContent .thead th { - background-color: #fafafa; - text-align: center; - height: 30px; - 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;*/ - } - - .pink { - background-color: #ff9bd2; - } - - .yellow { - background-color: #e8ff37; - } - - .green { - background-color: #99ff4e; } </style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/deviceRepair/DeviceRepairList.vue b/src/views/mdc/base/modules/deviceRepair/DeviceRepairList.vue index bccdd0f..d187ef1 100644 --- a/src/views/mdc/base/modules/deviceRepair/DeviceRepairList.vue +++ b/src/views/mdc/base/modules/deviceRepair/DeviceRepairList.vue @@ -1,9 +1,9 @@ <template> - <div :bordered="false" class="device_list"> + <div class="device_list"> <!-- 鏌ヨ鍖哄煙 --> - <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper"> + <div style="background-color: #fff" class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> - <a-row :gutter="24"> + <a-row :gutter="24" style="width: 100%;"> <a-col :md="7" :sm="7"> <a-form-item label="鏃堕棿"> <a-range-picker @change="dateParamChange" v-model="dates" format="YYYY-MM-DD HH:mm:ss"/> @@ -23,7 +23,6 @@ <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="handleExportXls('缁翠慨浼戠彮绠$悊')" icon="download">瀵煎嚭</a-button> </a-space> </a-col> <!--<a-col :md="2" :sm="3" :xs="3">--> @@ -43,16 +42,17 @@ <div class="table-operator" style="display: inline;"> <a-button @click="handleAdd" type="primary" icon="plus">鏂板 </a-button> + <a-button type="primary" @click="handleExportXls('缁翠慨浼戠彮绠$悊')" icon="download">瀵煎嚭</a-button> <!--<a-button v-has="'user.add'" @click="handleAddXIU" type="primary" icon="plus">浼戠彮鏂板--> <!--</a-button>--> </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" + :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" - @change="handleTableChange"> + @change="handleTableChange" :scroll="{x:'max-content',y:scrollY}"> <span slot="action" slot-scope="text, record"> <a @click="handleEdit(record)">缂栬緫</a> <a-divider type="vertical" /> @@ -128,28 +128,33 @@ queryParamEquip:{}, queryParamPeople:{}, dataStartsoucre:[], + scrollY:465, columns: [ { title: '璁惧缂栧彿', align: 'center', - dataIndex: 'equipmentId' + dataIndex: 'equipmentId', + width:250 }, { title: '璁惧鍚嶇О', align: 'center', dataIndex: 'equipmentName', defaultSortOrder:'descend', - sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} + sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1}, + width:250 }, { title: '缁翠慨绫诲瀷', align: 'center', - dataIndex: 'mdcRepairTypeDictText' + dataIndex: 'mdcRepairTypeDictText', + width:250 }, { title: '寮�濮嬫椂闂�', align: 'center', dataIndex: 'startTime', + width:250 // scopedSlots:{customRender:'startTime'}, // customRender:(text,row,index) => { // return moment(text).format("YYYY-MM-DD HH:mm:ss") @@ -158,14 +163,16 @@ { title: '缁撴潫鏃堕棿', align: 'center', - dataIndex: 'endTime' + dataIndex: 'endTime', + width:250 }, { title: '鎿嶄綔', dataIndex: 'action', scopedSlots: {customRender: 'action'}, align: "center", - width: 150 + width: 150, + fixed:'right' } ], url: { @@ -559,9 +566,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> @@ -569,34 +592,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> diff --git a/src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue b/src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue index 1d4a39b..be9c4d5 100644 --- a/src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue +++ b/src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue @@ -481,12 +481,14 @@ height: 100%; overflow: auto; } + .table2 thead tr th:first-child, .table tbody tr .tdgu{ position: sticky; left: 0; z-index: 1; } + .table tbody tr .wenzi{ /*writing-mode: vertical-lr;*/ /*text-orientation: upright;*/ @@ -494,30 +496,36 @@ 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: 250px; z-index: 2; } + .table tbody tr .tdgu5{ position: sticky; left: 412px; @@ -530,81 +538,91 @@ 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; - /*border: 1px solid #000;*/ } + .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: 250px; } + .table2 thead .equipname .dong6{ z-index: 5; left: 412px; } - +#EfficiencyPO{ + overflow: hidden; +} @media screen and (min-width: 1920px){ #EfficiencyPO{ height: 687px!important; - overflow: scroll; } } + @media screen and (min-width: 1680px) and (max-width: 1920px){ #EfficiencyPO{ height: 687px!important; - overflow: scroll; } } + @media screen and (min-width: 1400px) and (max-width: 1680px){ #EfficiencyPO{ height: 540px!important; - overflow: scroll; } } + @media screen and (min-width: 1280px) and (max-width: 1400px){ #EfficiencyPO{ height: 440px!important; - overflow: scroll; } } + @media screen and (max-width: 1280px){ #EfficiencyPO{ height: 440px!important; - overflow: scroll; } } + .identifyingclass { width: 55px; height: 15px; display: inline-block } + .dataContent { white-space: nowrap; /*margin: 0;*/ - border: none; border-collapse: separate; border-spacing: 0; /*table-layout: fixed;*/ @@ -615,10 +633,6 @@ /*overflow: hidden;*/ /*overflow-y: auto;*/ text-align: center; -} - -.dataContent .fixed th { - width: 50px; } .dataContent .thead th { @@ -632,23 +646,7 @@ 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;*/ -} - </style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue index bd07f4b..7f2f038 100644 --- a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue +++ b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue @@ -608,7 +608,6 @@ .table2 thead .equipname .dong1 { z-index: 4; left: 0; - /*border: 1px solid #000;*/ } .table2 thead .equipname .dong2 { @@ -636,50 +635,38 @@ 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 { @@ -704,10 +691,6 @@ text-align: center; } - /*.dataContent .fixed th {*/ - /*width: 50px;*/ - /*}*/ - .dataContent .thead th { background-color: #fafafa; text-align: center; @@ -715,61 +698,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; } td { vertical-align: middle; } - - .pink { - background-color: #ff9bd2; - } - - .yellow { - background-color: #e8ff37; - } - - .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 diff --git a/src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue b/src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue index 96b3752..c7adad0 100644 --- a/src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue +++ b/src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue @@ -599,27 +599,32 @@ 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; - /*border: 1px solid #000;*/ } + .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; @@ -628,43 +633,48 @@ z-index: 5; left: 250px; } + .table2 thead .equipname .dong6{ z-index: 5; left: 412px; } + .table2 thead .equipname .dong7{ z-index: 6; left: 512px; } + #EfficiencyShift{ + overflow: hidden; + } + @media screen and (min-width: 1920px){ #EfficiencyShift{ height: 670px!important; - overflow: scroll; } } + @media screen and (min-width: 1680px) and (max-width: 1920px){ #EfficiencyShift{ height: 670px!important; - overflow: scroll; } } + @media screen and (min-width: 1400px) and (max-width: 1680px){ #EfficiencyShift{ height: 522px!important; - overflow: scroll; } } + @media screen and (min-width: 1280px) and (max-width: 1400px){ #EfficiencyShift{ height: 414px!important; - overflow: scroll; } } + @media screen and (max-width: 1280px){ #EfficiencyShift{ height: 414px!important; - overflow: scroll; } } @@ -690,10 +700,6 @@ text-align: center; } - .dataContent .fixed th { - width: 50px; - } - .dataContent .thead th { background-color: #fafafa; text-align: center; @@ -701,31 +707,8 @@ 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;*/ - } - /*.seach-content{*/ - /*display: flex;*/ - /*justify-content: space-between;*/ - /*}*/ </style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue b/src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue index 63b3d4a..8505d58 100644 --- a/src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue +++ b/src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue @@ -60,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"> @@ -107,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 @@ -117,17 +115,14 @@ import JEllipsis from '@/components/jeecg/JEllipsis' import Tooltip from 'ant-design-vue/es/tooltip' import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' - import ACol from 'ant-design-vue/es/grid/Col' + export default { name: 'mdcPassRateList', mixins: [JeecgListMixin], components: { - ACol, Tooltip, mdcPassRateModal, mdcPassRateEdit, - // DeviceRepairModelAdd, - // DeviceRepairModelEdit, JDictSelectTag, JInput, JDate, @@ -147,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} }, @@ -164,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") @@ -172,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 } ], @@ -685,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> @@ -695,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> diff --git a/src/views/mdc/base/modules/mdcProcessQuantity/mdcProcessQuantityList.vue b/src/views/mdc/base/modules/mdcProcessQuantity/mdcProcessQuantityList.vue index 4ff7393..3cae1f0 100644 --- a/src/views/mdc/base/modules/mdcProcessQuantity/mdcProcessQuantityList.vue +++ b/src/views/mdc/base/modules/mdcProcessQuantity/mdcProcessQuantityList.vue @@ -60,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"> <span slot="action" slot-scope="text, record"> @@ -141,16 +141,19 @@ queryParamEquip:{}, queryParamPeople:{}, dataStartsoucre:[], + scrollY:465, columns: [ { title: '璁惧缂栧彿', align: 'center', - dataIndex: 'equipmentId' + dataIndex: 'equipmentId', + width:150 }, { title: '璁惧鍚嶇О', align: 'center', dataIndex: 'equipmentName', + width:200 // defaultSortOrder:'descend', // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} }, @@ -158,6 +161,7 @@ title: '闆朵欢鍙�', align: 'center', dataIndex: 'partsCode', + width:120 // scopedSlots:{customRender:'startTime'}, // customRender:(text,row,index) => { // return moment(text).format("YYYY-MM-DD HH:mm:ss") @@ -166,39 +170,46 @@ { title: '鎵规鍙�', align: 'center', - dataIndex: 'batchCode' + dataIndex: 'batchCode', + width:120 }, { title: '绋嬪簭鍙�', align: 'center', - dataIndex: 'sequenceNumber' + dataIndex: 'sequenceNumber', + width:120 }, { title: '鏃ユ湡', align: 'center', - dataIndex: 'efficientDate' + dataIndex: 'efficientDate', + width:150 }, { title: '鍔犲伐鏁伴噺', align: 'center', - dataIndex: 'processQuantity' + dataIndex: 'processQuantity', + width:120 }, { title: '鏃堕暱锛堝垎閽燂級', align: 'center', - dataIndex: 'duration' + dataIndex: 'duration', + width:120 }, { title: '澶囨敞', align: 'center', - dataIndex: 'remark' + dataIndex: 'remark', + width:120 }, { title: '鎿嶄綔', dataIndex: 'action', scopedSlots: {customRender: 'action'}, align: "center", - width: 150 + fixed:'right', + width: 200 } ], url: { @@ -688,9 +699,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> @@ -698,34 +725,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> diff --git a/src/views/mdc/base/modules/mdcStandardProcessDuration/MdcStandardProcessDurationList.vue b/src/views/mdc/base/modules/mdcStandardProcessDuration/MdcStandardProcessDurationList.vue index 8bbf456..8a6bdcf 100644 --- a/src/views/mdc/base/modules/mdcStandardProcessDuration/MdcStandardProcessDurationList.vue +++ b/src/views/mdc/base/modules/mdcStandardProcessDuration/MdcStandardProcessDurationList.vue @@ -60,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"> <span slot="action" slot-scope="text, record"> @@ -141,16 +141,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} }, @@ -158,6 +161,7 @@ title: '闆朵欢鍙�', align: 'center', dataIndex: 'partsCode', + width:150 // scopedSlots:{customRender:'startTime'}, // customRender:(text,row,index) => { // return moment(text).format("YYYY-MM-DD HH:mm:ss") @@ -166,28 +170,33 @@ { title: '鎵规鍙�', align: 'center', - dataIndex: 'batchCode' + dataIndex: 'batchCode', + width:150 }, { title: '绋嬪簭鍙�', align: 'center', - dataIndex: 'sequenceNumber' + dataIndex: 'sequenceNumber', + width:150 }, { title: '鏃堕暱锛堝垎閽燂級', align: 'center', - dataIndex: 'duration' + dataIndex: 'duration', + width:150 }, { title: '澶囨敞', align: 'center', - dataIndex: 'remark' + dataIndex: 'remark', + width:250 }, { title: '鎿嶄綔', dataIndex: 'action', scopedSlots: {customRender: 'action'}, align: "center", + fixed:'right', width: 150 } ], @@ -677,9 +686,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> @@ -687,34 +712,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> diff --git a/src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue b/src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue index db3e659..630964f 100644 --- a/src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue +++ b/src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue @@ -11,23 +11,22 @@ v-model="dates"/> </a-form-item> </a-col> - <a-col :md="6" :sm="6" :xs="6"> + <a-col :md="17" :sm="17" :xs="17"> <a-form-item label="鏃堕棿娈�"> - <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart"/> - 鑷� - <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd"/> + <a-space> + <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart"/> + 鑷� + <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd"/> + <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> + </a-space> </a-form-item> - </a-col> - <a-col :lg="2" :md="3" :sm="3" :xs="3"> - <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> </a-col> </a-row> </a-form> </div> <div id="DeviceList"> - <div class="openRateTrendDg"> - <div id="Efficiency" class="container" style="margin-top: 20px;"> - <a-spin :spinning="loading"> + <a-spin :spinning="loading"> + <div id="Efficiency" class="container" style="margin-bottom: 15px;"> <div class="table2"> <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap;text-align: center;"> @@ -36,7 +35,7 @@ <th class="thgu dong1 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"> 璁惧缂栧彿 </th> - <th class="thgu dong2 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"> + <th class="thgu dong2 name" rowspan="2" style="min-width: 162px; max-width: 162px;width: 162px;"> 璁惧鍚嶇О </th> <th class="thgu dong3 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;"> @@ -59,10 +58,10 @@ </tbody> </table> </div> - </a-spin> </div> - </div> - <div id="openRateTrendChart" style="width: 100%;height: 60%"></div> + </a-spin> + + <div id="openRateTrendChart"></div> </div> </div> </div> @@ -81,7 +80,6 @@ export default { // mixins: [JeecgListMixin], name: 'openRateFractionAnalysisMain', - components: {}, data() { return { dataSource: [], @@ -137,9 +135,11 @@ }, mounted() { this.tableScroll = document.querySelector('.table2') + window.addEventListener('resize',this.handleWindowResize) }, beforeDestroy() { this.tableScroll.removeEventListener('scroll', this.tableScrollX) + window.removeEventListener('resize',this.handleWindowResize) }, watch: { Type(valmath) { @@ -343,7 +343,7 @@ }) }, draw() { - let openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons') + this.openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons') let openRateTrendChartOptions = { title: { text: '鍒╃敤鐜囧垎娈靛垎鏋�', @@ -398,7 +398,7 @@ } ] } - openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true) + this.openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true) }, /** @@ -434,6 +434,13 @@ this.loading = false }) } + }, + + /** + * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙� + */ + handleWindowResize(){ + if(this.openRateTrendAnalysisChart) this.openRateTrendAnalysisChart.resize() } } } @@ -455,19 +462,11 @@ text-align: center; } - /*.dataContent .fixed th {*/ - /*width: 50px;*/ - /*}*/ - .dataContent .thead th { background-color: #fafafa; text-align: center; height: 30px; padding: 5px; - } - - .dataContent .notfixed th { - /*width: auto;*/ } .dataContent tr td { @@ -476,22 +475,11 @@ .dataContent .mathData td { padding: 10px; - /*display: none;*/ cursor: pointer; } .dataContent .mathData:hover td { background-color: #e6f7ff; - } - - .dataContent .mathData .td { - /*background-color: #ff9bd2;*/ - display: inline-block; - padding: 10px; - } - - .dataContent .mathData .tdd { - /*display: none;*/ } .table2 { @@ -500,12 +488,6 @@ overflow: auto; } - /*tr th {*/ - /*height: 50px!important;*/ - /*}*/ - /*tr td{*/ - /*height: 50px!important;*/ - /*}*/ .table2 thead tr th:first-child, .table tbody tr .tdgu { position: sticky; @@ -526,25 +508,7 @@ .table tbody tr .tdgu2 { position: sticky; - left: 300px; - z-index: 2; - } - - .table tbody tr .tdgu3 { - position: sticky; - left: 450px; - z-index: 2; - } - - .table tbody tr .tdgu4 { - position: sticky; - left: 550px; - z-index: 2; - } - - .table tbody tr .tdgu5 { - position: sticky; - left: 700px; + left: 312px; z-index: 2; } @@ -568,7 +532,6 @@ .table2 thead .equipname .dong1 { z-index: 4; left: 0; - /*border: 1px solid #000;*/ } .table2 thead .equipname .dong2 { @@ -578,79 +541,49 @@ .table2 thead .equipname .dong3 { z-index: 5; - left: 300px; + left: 312px; } - .table2 thead .equipname .dong4 { - z-index: 5; - left: 450px; + .efficiency_list #DeviceList { + height: 90% !important; } - .table2 thead .equipname .dong5 { - z-index: 5; - left: 550px; + #Efficiency{ + overflow: hidden; } - .table2 thead .equipname .dong6 { - z-index: 5; - left: 700px; + #openRateTrendChart{ + width: 100%; + height: 60% } @media screen and (min-width: 1920px) { #Efficiency { height: 337px !important; - overflow: scroll; } } @media screen and (min-width: 1680px) and (max-width: 1920px) { #Efficiency { height: 337px !important; - overflow: scroll; } } @media screen and (min-width: 1400px) and (max-width: 1680px) { #Efficiency { - height: 190px !important; - overflow: scroll; + height: 337px !important; } } @media screen and (min-width: 1280px) and (max-width: 1400px) { #Efficiency { - height: 90px !important; - overflow: scroll; + height: 200px !important; } } @media screen and (max-width: 1280px) { #Efficiency { - height: 90px !important; - overflow: scroll; + height: 200px !important; } - } - - #Efficiency .table_guding1 { - position: absolute; - overflow: hidden; - width: 500px; - } - - #Efficiency .table_guding2 { - overflow-x: scroll; - width: 500px; - } - - /deep/ .ant-card { - height: 100% !important; - } - - /deep/ .ant-card .ant-card-body { - height: 100% !important; - } - - .efficiency_list #DeviceList { - height: 90% !important; } </style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/openRateTrendAnalysis/openRateTrendAnalysisMain.vue b/src/views/mdc/base/modules/openRateTrendAnalysis/openRateTrendAnalysisMain.vue index fadbf53..6f33288 100644 --- a/src/views/mdc/base/modules/openRateTrendAnalysis/openRateTrendAnalysisMain.vue +++ b/src/views/mdc/base/modules/openRateTrendAnalysis/openRateTrendAnalysisMain.vue @@ -5,7 +5,7 @@ <div class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter="24"> - <a-col :md="6" :sm="6"> + <a-col :md="7" :sm="7"> <a-form-item label="鏃堕棿"> <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates"/> @@ -17,10 +17,12 @@ </a-row> </a-form> </div> + + <!--琛ㄦ牸鍙婂浘琛ㄥ尯鍩�--> <div id="DeviceList"> - <div class="openRateTrendDg"> - <div id="Efficiency" class="container" style="margin-top: 20px;"> - <a-spin :spinning="loading"> + <!--琛ㄦ牸鍖哄煙--> + <a-spin :spinning="loading"> + <div id="Efficiency" class="container" style="margin-bottom: 15px;"> <div class="table2"> <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap;text-align: center;"> @@ -29,7 +31,7 @@ <th class="thgu dong1 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"> 璁惧缂栧彿 </th> - <th class="thgu dong2 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"> + <th class="thgu dong2 name" rowspan="2" style="min-width: 162px; max-width: 162px;width: 162px;"> 璁惧鍚嶇О </th> <th class="thgu dong3 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;"> @@ -52,10 +54,10 @@ </tbody> </table> </div> - </a-spin> </div> - </div> - <div id="openRateTrendChart" style="width: 100%;height: 60%"></div> + </a-spin> + <!--鍥炬爣鍖哄煙--> + <div id="openRateTrendChart"></div> </div> </div> </div> @@ -127,9 +129,11 @@ }, mounted() { this.tableScroll = document.querySelector('.table2') + window.addEventListener('resize',this.handleWindowResize) }, beforeDestroy() { this.tableScroll.removeEventListener('scroll', this.tableScrollX) + window.removeEventListener('resize',this.handleWindowResize) }, watch: { Type(valmath) { @@ -351,7 +355,7 @@ }) }, draw() { - let openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons') + this.openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons') let openRateTrendChartOptions = { title: { text: '鍒╃敤鐜囪蛋鍔垮垎鏋�', @@ -406,7 +410,7 @@ } ] } - openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true) + this.openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true) }, /** @@ -442,6 +446,13 @@ this.loading = false }) } + }, + + /** + * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙� + */ + handleWindowResize(){ + if(this.openRateTrendAnalysisChart) this.openRateTrendAnalysisChart.resize() } } } @@ -457,15 +468,8 @@ border: 1px solid #ccc; /*border: 1px solid #ccc;*/ width: 100%; - /*height: 100%;*/ - /*overflow: hidden;*/ - /*overflow-y: auto;*/ text-align: center; } - - /*.dataContent .fixed th {*/ - /*width: 50px;*/ - /*}*/ .dataContent .thead th { background-color: #fafafa; @@ -474,32 +478,17 @@ padding: 5px; } - .dataContent .notfixed th { - /*width: auto;*/ - } - .dataContent tr td { height: 35px; } .dataContent .mathData td { padding: 10px; - /*display: none;*/ cursor: pointer; } .dataContent .mathData:hover td { background-color: #e6f7ff; - } - - .dataContent .mathData .td { - /*background-color: #ff9bd2;*/ - display: inline-block; - padding: 10px; - } - - .dataContent .mathData .tdd { - /*display: none;*/ } .table2 { @@ -508,12 +497,6 @@ overflow: auto; } - /*tr th {*/ - /*height: 50px!important;*/ - /*}*/ - /*tr td{*/ - /*height: 50px!important;*/ - /*}*/ .table2 thead tr th:first-child, .table tbody tr .tdgu { position: sticky; @@ -534,25 +517,7 @@ .table tbody tr .tdgu2 { position: sticky; - left: 300px; - z-index: 2; - } - - .table tbody tr .tdgu3 { - position: sticky; - left: 450px; - z-index: 2; - } - - .table tbody tr .tdgu4 { - position: sticky; - left: 550px; - z-index: 2; - } - - .table tbody tr .tdgu5 { - position: sticky; - left: 700px; + left: 312px; z-index: 2; } @@ -576,7 +541,6 @@ .table2 thead .equipname .dong1 { z-index: 4; left: 0; - /*border: 1px solid #000;*/ } .table2 thead .equipname .dong2 { @@ -586,79 +550,51 @@ .table2 thead .equipname .dong3 { z-index: 5; - left: 300px; + left: 312px; } - .table2 thead .equipname .dong4 { - z-index: 5; - left: 450px; + .efficiency_list #DeviceList { + height: 90% !important; } - .table2 thead .equipname .dong5 { - z-index: 5; - left: 550px; + #Efficiency{ + overflow: hidden; } - .table2 thead .equipname .dong6 { - z-index: 5; - left: 700px; + #openRateTrendChart{ + width: 100%; + height: 60%; } @media screen and (min-width: 1920px) { #Efficiency { height: 337px !important; - overflow: scroll; } } @media screen and (min-width: 1680px) and (max-width: 1920px) { #Efficiency { height: 337px !important; - overflow: scroll; } } @media screen and (min-width: 1400px) and (max-width: 1680px) { #Efficiency { - height: 190px !important; - overflow: scroll; + height: 337px !important; } } @media screen and (min-width: 1280px) and (max-width: 1400px) { #Efficiency { - height: 90px !important; - overflow: scroll; + height: 200px !important; } } @media screen and (max-width: 1280px) { #Efficiency { - height: 90px !important; - overflow: scroll; + height: 200px !important; } } - #Efficiency .table_guding1 { - position: absolute; - overflow: hidden; - width: 500px; - } - #Efficiency .table_guding2 { - overflow-x: scroll; - width: 500px; - } - - /deep/ .ant-card { - height: 100% !important; - } - - /deep/ .ant-card .ant-card-body { - height: 100% !important; - } - - .efficiency_list #DeviceList { - height: 90% !important; - } </style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/shift/ShiftInfo.vue b/src/views/mdc/base/modules/shift/ShiftInfo.vue index 19a856d..e6d104e 100644 --- a/src/views/mdc/base/modules/shift/ShiftInfo.vue +++ b/src/views/mdc/base/modules/shift/ShiftInfo.vue @@ -1,11 +1,11 @@ <template> - <a-card :bordered="false" class="shift_info"> + <div class="shift_info"> <!-- 鎿嶄綔鎸夐挳鍖哄煙 --> <div class="table-operator"> <a-button type="primary" v-if="Object.keys(shiftSystemRow).length>0" @click="handleAdd" icon="plus">閰嶇疆</a-button> </div> <!-- table鍖哄煙-begin --> - <div style="width: 100%;"> + <div style="width: 100%;flex: 1;overflow: auto"> <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="false" :loading="loading"> <span @@ -50,7 +50,7 @@ </div> <shift-info-model ref="modalForm" @ok="modalFormOk"></shift-info-model> - </a-card> + </div> </template> <script> @@ -201,34 +201,35 @@ </script> <style lang="less" scoped> + .shift_info{ + overflow: hidden; + display: flex; + flex-direction: column; + } + @media screen and (min-width: 1920px){ .shift_info{ height: 748px!important; - overflow: scroll; } } @media screen and (min-width: 1680px) and (max-width: 1920px){ .shift_info{ height: 748px!important; - overflow: scroll; } } @media screen and (min-width: 1400px) and (max-width: 1680px){ .shift_info{ height: 600px!important; - overflow: scroll; } } @media screen and (min-width: 1280px) and (max-width: 1400px){ .shift_info{ height: 501px!important; - overflow: scroll; } } @media screen and (max-width: 1280px){ .shift_info{ height: 501px!important; - overflow: scroll; } } </style> diff --git a/src/views/mdc/base/modules/shift/ShiftSystem.vue b/src/views/mdc/base/modules/shift/ShiftSystem.vue index 3d53d7d..7197ad4 100644 --- a/src/views/mdc/base/modules/shift/ShiftSystem.vue +++ b/src/views/mdc/base/modules/shift/ShiftSystem.vue @@ -1,11 +1,11 @@ <template> - <a-card :bordered="false" class="shift_system"> + <div class="shift_system"> <!-- 鎿嶄綔鎸夐挳鍖哄煙 --> <div class="table-operator"> <a-button type="primary" @click="handleAdd" icon="plus">鏂板</a-button> </div> <!-- table鍖哄煙-begin --> - <div> + <div style="flex: 1;overflow: auto"> <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="false" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"> @@ -55,7 +55,7 @@ </div> <shift-system-model ref="modalForm" @ok="modalFormOk"></shift-system-model> - </a-card> + </div> </template> <script> @@ -195,34 +195,35 @@ </script> <style lang="less" scoped> + .shift_system{ + overflow: auto; + display: flex; + flex-direction: column; + } + @media screen and (min-width: 1920px){ .shift_system{ height: 748px!important; - overflow: scroll; } } @media screen and (min-width: 1680px) and (max-width: 1920px){ .shift_system{ height: 748px!important; - overflow: scroll; } } @media screen and (min-width: 1400px) and (max-width: 1680px){ .shift_system{ height: 600px!important; - overflow: scroll; } } @media screen and (min-width: 1280px) and (max-width: 1400px){ .shift_system{ height: 501px!important; - overflow: scroll; } } @media screen and (max-width: 1280px){ .shift_system{ height: 501px!important; - overflow: scroll; } } </style> diff --git a/src/views/mdc/base/openRateFractionAnalysis.vue b/src/views/mdc/base/openRateFractionAnalysis.vue index 3d0ce5c..d732ace 100644 --- a/src/views/mdc/base/openRateFractionAnalysis.vue +++ b/src/views/mdc/base/openRateFractionAnalysis.vue @@ -2,7 +2,7 @@ <div style="width: 100%; height: 100%;"> <a-card :bordered="false"> <a-row type="flex" :gutter="16"> - <a-col :md="4"> + <a-col :md="5"> <a-tabs :activeKey="activeKey" @change="tabChange"> <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render> <base-tree @getCurrSelected="changeSelectionNode"></base-tree> @@ -12,7 +12,7 @@ </a-tab-pane> </a-tabs> </a-col> - <a-col :md="20"> + <a-col :md="19"> <open-rate-fraction-analysis-main ref="openRateFractionAnalysisMain" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></open-rate-fraction-analysis-main> </a-col> </a-row> diff --git a/src/views/mdc/base/openRateTrendAnalysis.vue b/src/views/mdc/base/openRateTrendAnalysis.vue index 027b1b4..0277ccc 100644 --- a/src/views/mdc/base/openRateTrendAnalysis.vue +++ b/src/views/mdc/base/openRateTrendAnalysis.vue @@ -2,7 +2,7 @@ <div style="width: 100%; height: 100%;"> <a-card :bordered="false"> <a-row type="flex" :gutter="16"> - <a-col :md="4"> + <a-col :md="5"> <a-tabs :activeKey="activeKey" @change="tabChange"> <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render> <base-tree @getCurrSelected="changeSelectionNode"></base-tree> @@ -12,7 +12,7 @@ </a-tab-pane> </a-tabs> </a-col> - <a-col :md="20"> + <a-col :md="19"> <open-rate-trend-analysis-main ref="EfficiencyList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></open-rate-trend-analysis-main> </a-col> </a-row> diff --git a/src/views/mdc/common/BaseTree.vue b/src/views/mdc/common/BaseTree.vue index 1eebf9d..c94bd5f 100644 --- a/src/views/mdc/common/BaseTree.vue +++ b/src/views/mdc/common/BaseTree.vue @@ -1,56 +1,62 @@ <template> <a-card class="tree_con" :loading="cardLoading" :bordered="false" > <a-spin :spinning="loading"> - <a-alert type="info" :showIcon="false" style="margin-right: 54px;padding-left: 5px"> - <div slot="message"> - <span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span> - <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">鍙栨秷</a> - <span v-else>鏃�</span> - </div> - </a-alert> - <div class="drawer-bootom-button"> - <a-dropdown :trigger="['click']" placement="bottomCenter"> - <a-menu slot="overlay"> - <a-menu-item key="1" @click="expandAll">灞曞紑鎵�鏈�</a-menu-item> - <a-menu-item key="2" @click="closeAll">鍚堝苟鎵�鏈�</a-menu-item> - <a-menu-item key="3" @click="refreshTree">鍒锋柊</a-menu-item> - </a-menu> - <a-button> - <a-icon type="bars"/> - </a-button> - </a-dropdown> - </div> - <a-input-search @search="handleSearch" style="width:100%;margin-top: 10px" placeholder="妫�绱� 绫诲埆缂栫爜/鍚嶇О" allowClear - v-model="searchInput" @change="handleChange"/> - <!-- showLine --> - <a-tree showLine ref="tree" :checkStrictly="checkStrictly" :expandedKeys.sync="expandedKeys" - :selectedKeys="selectedKeys" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" - :treeData="treeDataSource" - :autoExpandParent="autoExpandParent" @select="onSelect" @expand="onExpand" slots="{}"> - <template slot="title" slot-scope="{ title, parentId, entity, key}"> + <div style="display: flex;flex-direction: column;height: 100%"> + <div> + <a-alert type="info" :showIcon="false" style="margin-right: 54px;padding-left: 5px"> + <div slot="message"> + <span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span> + <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">鍙栨秷</a> + <span v-else>鏃�</span> + </div> + </a-alert> + <div class="drawer-bottom-button"> + <a-dropdown :trigger="['click']" placement="bottomCenter"> + <a-menu slot="overlay"> + <a-menu-item key="1" @click="expandAll">灞曞紑鎵�鏈�</a-menu-item> + <a-menu-item key="2" @click="closeAll">鍚堝苟鎵�鏈�</a-menu-item> + <a-menu-item key="3" @click="refreshTree">鍒锋柊</a-menu-item> + </a-menu> + <a-button> + <a-icon type="bars"/> + </a-button> + </a-dropdown> + </div> + </div> + <a-input-search @search="handleSearch" style="width:100%;margin-top: 10px" placeholder="妫�绱� 绫诲埆缂栫爜/鍚嶇О" allowClear + v-model="searchInput" @change="handleChange"/> + <!-- showLine --> + <div style="flex: 1;overflow:auto;margin-top: 10px"> + <a-tree showLine ref="tree" :checkStrictly="checkStrictly" :expandedKeys.sync="expandedKeys" + :selectedKeys="selectedKeys" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" + :treeData="treeDataSource" + :autoExpandParent="autoExpandParent" @select="onSelect" @expand="onExpand" slots="{}"> + <template slot="title" slot-scope="{ title, parentId, entity, key}"> <span v-if="title.indexOf(searchValue) > -1"> {{ title.substr(0, title.indexOf(searchValue)) }} <span class="replaceSearch">{{ searchValue }}</span> {{ title.substr(title.indexOf(searchValue) + searchValue.length) }} </span> - <span v-else>{{ title }}</span> - <a-dropdown v-if="!editDisable && entity.parentId == -1" :trigger="['click']" placement="bottomCenter"> - <a-menu slot="overlay"> - <a-menu-item> - <a href="javascript:;" @click="handleEdit(entity)">缂栬緫</a> - </a-menu-item> - <a-menu-item> - <a href="javascript:;" @click="batchDel(entity)"> - 鍒犻櫎 - </a> - </a-menu-item> - </a-menu> - <span :style="{position: 'absolute',right: 0}"> + <span v-else>{{ title }}</span> + <a-dropdown v-if="!editDisable && entity.parentId == -1" :trigger="['click']" placement="bottomCenter"> + <a-menu slot="overlay"> + <a-menu-item> + <a href="javascript:;" @click="handleEdit(entity)">缂栬緫</a> + </a-menu-item> + <a-menu-item> + <a href="javascript:;" @click="batchDel(entity)"> + 鍒犻櫎 + </a> + </a-menu-item> + </a-menu> + <span :style="{position: 'absolute',right: 0}"> <a-icon type="down"/> </span> - </a-dropdown> - </template> - </a-tree> + </a-dropdown> + </template> + </a-tree> + </div> + </div> </a-spin> <tier-model ref="tierModalForm" @ok="modalFormOk"></tier-model> </a-card> @@ -356,7 +362,7 @@ padding: 5px 15px 5px 37px; } - .drawer-bootom-button { + .drawer-bottom-button { position: absolute; top: 1px; /* padding: 10px 16px; */ @@ -365,34 +371,38 @@ background: #fff; border-radius: 0 0 2px 2px; } + + .tree_con{ + overflow: hidden; + } + @media screen and (min-width: 1920px){ .tree_con{ height: 748px!important; - overflow: scroll; } } @media screen and (min-width: 1680px) and (max-width: 1920px){ .tree_con{ height: 748px!important; - overflow: scroll; } } @media screen and (min-width: 1400px) and (max-width: 1680px){ .tree_con{ height: 600px!important; - overflow: scroll; } } @media screen and (min-width: 1280px) and (max-width: 1400px){ .tree_con{ height: 501px!important; - overflow: scroll; } } @media screen and (max-width: 1280px){ .tree_con{ height: 501px!important; - overflow: scroll; } } + + /deep/ .ant-card-body,/deep/ .ant-spin-nested-loading,/deep/ .ant-spin-container{ + height: 100%; + } </style> -- Gitblit v1.9.3