From 7f6af6907202cb7c9395a7020d249bd62e17d50f Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 05 一月 2024 17:59:17 +0800
Subject: [PATCH] 1、解决车间看板页面因浏览器兼容性问题导致的样式不适配问题（使用浏览器86版本与其他版本做对比） 2、优化车间看板页面代码，将看板拖拽区域设置高度后再设置限制拖拽以试图解决进入页面后有概率设备无法自由拖拽问题（猜想因父子组件渲染顺序导致，父组件还未渲染完成，子组件就已限制区域，此时区域高度可能0，未在现场调试，本地调试无问题） 3、优化设备利用率、开动率及班次利用率页面代码，解决因浏览器版本问题导致表格前3列文字无法垂直排列导致的布局问题以及调整右上角区间展示区域为响应式布局
---
src/views/WorkshopSignage.vue | 42 +++++++---
src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue | 60 ++++++++++----
src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue | 61 ++++++++++-----
src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue | 31 +++++--
4 files changed, 133 insertions(+), 61 deletions(-)
diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index 53d8115..0d993f3 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -2,7 +2,7 @@
<dv-full-screen-container class="full-screen-container">
<header class="page-header" :style="{height: pageHeaderHeight+'px'}">
{{ workshopDetails.workshopName }}
- <div class="header-left" v-has="'home:saveDevicePositionAndSize'">
+ <div class="header-left" v-has="'home:saveDevicePositionAndSize'" v-if="!isFullScreen">
<a-space>
<span v-if="!isSwitchChecked">寮�鍚姛鑳�</span>
<span v-else>鍏抽棴鍔熻兘</span>
@@ -36,7 +36,7 @@
:y="item.coordinateTop"
v-on:resizing="resize($event, index)"
v-on:dragging="resize($event, index)"
- :parentLimitation="true"
+ :parentLimitation="parentLimitation"
:minw="70"
:minh="70"
:isDraggable="isDraggable"
@@ -103,10 +103,6 @@
data() {
return {
pageHeaderHeight: 80,// 椤靛ご楂樺害
- taskBarHeight: window.screen.height - window.screen.availHeight,// 灞忓箷搴曢儴浠诲姟鏍忛珮搴�
- utilsBarHeight: window.outerHeight - window.innerHeight,// 娴忚鍣ㄥ伐鍏锋爮楂樺害
- normalPageHeight: 0,
- fullScreenPageHeight: 0,
workshopDetails: {}, // 杞﹂棿璇︾粏淇℃伅,
isDraggable: false, // 鏄惁寮�鍚嫋鎷�
isResizable: false, // 鏄惁寮�鍚缉鏀�
@@ -145,7 +141,10 @@
value: 22,
color: '#FF0000'
}
- ]// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
+ ],// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
+ windowHeight: null,// 褰撳墠娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴︼紙锛堜笉鍖呮嫭宸ュ叿鏍忋�佷功绛俱�佸簳閮ㄤ换鍔℃爮锛夛紝杩涘叆椤甸潰鏃惰绠椾竴娆★紝闄ら潪閲嶆柊鍔犺浇椤甸潰鍚﹀垯娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴﹀垯涓嶅彂鐢熸敼鍙�
+ isFullScreen: false,// 杩涘叆鐪嬫澘椤甸潰鏃舵槸鍚︿负鍏ㄥ睆妯″紡锛屼笉鍖呮嫭姝ｅ父妯″紡杩涘叆鍚庡垏鎹负鍏ㄥ睆妯″紡
+ parentLimitation: false// 鎷栨嫿鍖哄煙鏄惁闄愬埗鍦ㄧ埗鍏冪礌鍖哄煙鍐�
}
},
watch: {
@@ -189,7 +188,9 @@
this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(
this.workshopDetails.backgroundImage
)})`
- this.$refs.deviceContainerRef.style.height = this.normalPageHeight
+
+ this.$refs.deviceContainerRef.style.height = (this.windowHeight - this.pageHeaderHeight) + 'px'
+ this.parentLimitation = true // 鍦ㄧ埗鍏冪礌楂樺害璁剧疆鍚庡啀璁剧疆闄愬埗鎷栨嫿鍖哄煙锛屼笉杩欐牱鏈夋鐜囧鑷寸埗鍏冪礌楂樺害鏈缃氨闄愬埗鎷栨嫿
})
},
@@ -288,11 +289,16 @@
// setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0)
// },1000*10)
}
+ },
+
+ /**
+ * 娴忚鍣ㄥ昂瀵稿彂鐢熸敼鍙樻椂瑙﹀彂
+ */
+ handleWindowSizeChange() {
+ if (this.isFullScreen) location.reload() // 濡傛灉椤甸潰杩涘叆鏃朵负鍏ㄥ睆妯″紡锛屽垯鍦ㄥ垏鎹㈡ā寮忔椂閲嶆柊鍔犺浇椤甸潰浠ラ噸鏂拌幏鍙栨祻瑙堝櫒鍙鍖哄煙楂樺害
}
},
created() {
- if (this.utilsBarHeight > 0) this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)`
- else this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - 87px)`
if (this.$route.params.id) {
this.getDeviceListByApi(this.$route.params.id)
this.getWorkshopDetailsByApi(this.$route.params.id)
@@ -301,6 +307,16 @@
mounted() {
// 绂佹鐢ㄦ埛閫変腑鍐呭
document.onselectstart = () => false
+
+ this.windowHeight =
+ window.innerHeight ||
+ document.documentElement.clientHeight ||
+ document.body.clientHeight
+
+ // 鍒ゆ柇娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴︽槸鍚︾瓑浜庡垎杈ㄧ巼锛岃嫢鐩哥瓑鍒欒〃绀鸿繘鍏ユ椂娴忚鍣ㄤ负鍏ㄥ睆妯″紡
+ if (this.windowHeight === screen.height) this.isFullScreen = true
+
+ window.addEventListener('resize', this.handleWindowSizeChange)
},
beforeDestroy() {
// 纭繚閿�姣佸畾鏃跺櫒銆佷簨浠跺強鍥炴敹璧勬簮
@@ -324,7 +340,7 @@
.header-left {
width: 450px;
position: absolute;
- left: 0px;
+ left: 0;
top: 35px;
display: flex;
justify-content: space-evenly;
@@ -383,7 +399,9 @@
width: 100%;
height: 100%;
display: flex;
- align-items: end;
+ -webkit-align-items: flex-end;
+ -moz-align-items: flex-end;
+ -ms-align-items: flex-end;
.status-image {
background-size: 100% 100%;
diff --git a/src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue b/src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue
index 2d1f956..1d4a39b 100644
--- a/src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue
+++ b/src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue
@@ -19,12 +19,24 @@
<a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates"/>
</a-form-item>
</a-col>
- <a-col :md="14" :sm="14">
+ <a-col :md="14" :sm="14" style="display: flex;align-items: flex-start;-webkit-align-items: flex-start;justify-content: space-between;">
<a-space>
<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
<a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
<a-button type="primary" @click="exportExcel" icon="download">瀵煎嚭</a-button>
</a-space>
+ <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;margin-left: 24px">
+ <tr>
+ <td v-for="(item, index) in identifying">{{item.title}}</td>
+ </tr>
+ <tr>
+ <td style="text-align:center;" v-for="(item, index) in identifying">
+ <div class="identifyingclass" :style="{background: item.color}"></div>
+ </td>
+ <!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>-->
+ <!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>-->
+ </tr>
+ </table>
</a-col>
</a-row>
<a-row :gutter="24">
@@ -35,20 +47,20 @@
</a-row>
</a-form>
</div>
- <div style="width: 530px;position: absolute;top: 0; right:1.5%;">
- <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">
- <tr>
- <td v-for="(item, index) in identifying">{{item.title}}</td>
- </tr>
- <tr>
- <td style="text-align:center;" v-for="(item, index) in identifying">
- <div class="identifyingclass" :style="{background: item.color}"></div>
- </td>
- <!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>-->
- <!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>-->
- </tr>
- </table>
- </div>
+ <!--<div style="width: 530px;position: absolute;top: 0; right:1.5%;">-->
+ <!--<table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">-->
+ <!--<tr>-->
+ <!--<td v-for="(item, index) in identifying">{{item.title}}</td>-->
+ <!--</tr>-->
+ <!--<tr>-->
+ <!--<td style="text-align:center;" v-for="(item, index) in identifying">-->
+ <!--<div class="identifyingclass" :style="{background: item.color}"></div>-->
+ <!--</td>-->
+ <!--<!–<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>–>-->
+ <!--<!–<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>–>-->
+ <!--</tr>-->
+ <!--</table>-->
+ <!--</div>-->
<a-spin :spinning="spinning">
<div class="container" id="EfficiencyPO" style="margin-top: 20px;" >
<div class="table2">
@@ -80,9 +92,21 @@
<tbody>
<tr class="mathData" v-for="(item, index) in dataList">
<template v-if="item.level1!=='鍚堣'&&item.level1!=='骞冲潎鍊�'">
- <td class="tdgu kaitou wenzi" :rowspan="item.level1span" :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis">{{item.level1}}</td>
- <td class="tdgu1 kaitou wenzi" :rowspan="item.level2span" :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis">{{item.level2}}</td>
- <td class="tdgu2 kaitou wenzi" :rowspan="item.level3span" :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis">{{item.level3}}</td>
+ <td class="tdgu kaitou" :rowspan="item.level1span" :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis">
+ <div class="wenzi">
+ {{item.level1}}
+ </div>
+ </td>
+ <td class="tdgu1 kaitou" :rowspan="item.level2span" :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis">
+ <div class="wenzi">
+ {{item.level2}}
+ </div>
+ </td>
+ <td class="tdgu2 kaitou" :rowspan="item.level3span" :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis">
+ <div class="wenzi">
+ {{item.level3}}
+ </div>
+ </td>
<td class="tdgu3 kaitou">{{item.equipmentId}}</td>
<td style="min-width: 162px; max-width: 162px;width: 162px;" class="tdgu4 kaitou">{{item.equipmentName}}</td>
<td class="tdgu5 kaitou">{{item.equipmentType}}</td>
diff --git a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue
index d062e27..bd07f4b 100644
--- a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue
+++ b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue
@@ -22,12 +22,24 @@
v-model="dates"/>
</a-form-item>
</a-col>
- <a-col :md="14" :sm="14">
+ <a-col :md="14" :sm="14" style="display: flex;align-items: flex-start;-webkit-align-items: flex-start;justify-content: space-between;">
<a-space>
<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
<a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
<a-button type="primary" @click="exportExcel" icon="download">瀵煎嚭</a-button>
</a-space>
+ <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;margin-left: 24px">
+ <tr>
+ <td v-for="(item, index) in identifying">{{item.title}}</td>
+ </tr>
+ <tr>
+ <td style="text-align:center;" v-for="(item, index) in identifying">
+ <div class="identifyingclass" :style="{background: item.color}"></div>
+ </td>
+ <!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>-->
+ <!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>-->
+ </tr>
+ </table>
</a-col>
</a-row>
<a-row :gutter="24">
@@ -38,20 +50,20 @@
</a-row>
</a-form>
</div>
- <div style="width: 530px;position: absolute;top: 0; right: 1.5%;">
- <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">
- <tr>
- <td v-for="(item, index) in identifying">{{item.title}}</td>
- </tr>
- <tr>
- <td style="text-align:center;" v-for="(item, index) in identifying">
- <div class="identifyingclass" :style="{background: item.color}"></div>
- </td>
- <!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>-->
- <!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>-->
- </tr>
- </table>
- </div>
+ <!--<div style="width: 530px;position: absolute;top: 0; right: 1.5%;">-->
+ <!--<table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">-->
+ <!--<tr>-->
+ <!--<td v-for="(item, index) in identifying">{{item.title}}</td>-->
+ <!--</tr>-->
+ <!--<tr>-->
+ <!--<td style="text-align:center;" v-for="(item, index) in identifying">-->
+ <!--<div class="identifyingclass" :style="{background: item.color}"></div>-->
+ <!--</td>-->
+ <!--<!–<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>–>-->
+ <!--<!–<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>–>-->
+ <!--</tr>-->
+ <!--</table>-->
+ <!--</div>-->
</div>
<a-spin :spinning="spinning">
@@ -91,14 +103,23 @@
<tr class="mathData" v-for="(item, index) in dataList">
<template v-if="item.level1!=='鍚堣'&&item.level1!=='骞冲潎鍊�'">
- <td class="tdgu kaitou wenzi" :rowspan="item.level1span"
- :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis">{{item.level1}}
+ <td class="tdgu kaitou" :rowspan="item.level1span"
+ :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis">
+ <div class="wenzi">
+ {{item.level1}}
+ </div>
</td>
- <td class="tdgu1 kaitou wenzi" :rowspan="item.level2span"
- :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis">{{item.level2}}
+ <td class="tdgu1 kaitou" :rowspan="item.level2span"
+ :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis">
+ <div class="wenzi">
+ {{item.level2}}
+ </div>
</td>
<td class="tdgu2 kaitou wenzi" :rowspan="item.level3span"
- :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis">{{item.level3}}
+ :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis">
+ <div class="wenzi">
+ {{item.level3}}
+ </div>
</td>
<td class="tdgu3 kaitou">{{item.equipmentId}}</td>
<td class="tdgu4 kaitou" style="min-width: 162px; max-width: 162px;width: 162px;">{{item.equipmentName}}</td>
diff --git a/src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue b/src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue
index 91078d8..96b3752 100644
--- a/src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue
+++ b/src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue
@@ -39,20 +39,18 @@
</a-select>
</a-form-item>
</a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :md="9" :sm="9" :xs="9">
- <a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions"
- @change="efficiencyOptionsOnChange"/>
- </a-col>
- <a-col :md="5" :sm="5">
+ <a-col :md="7" :sm="7" :xs="7">
<a-space>
<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
<a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
<a-button type="primary" @click="exportExcel" icon="download">瀵煎嚭</a-button>
</a-space>
</a-col>
- <a-col :md="10" :sm="10">
+ </a-row>
+ <a-row :gutter="24">
+ <a-col :md="24" :sm="24" :xs="24" style="display: flex;justify-content: space-between">
+ <a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions"
+ @change="efficiencyOptionsOnChange"/>
<table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">
<tr>
<td v-for="(item, index) in identifying">{{item.title}}</td>
@@ -118,9 +116,20 @@
<tbody>
<tr class="mathData" v-for="(item, index) in dataList">
<template v-if="item.level1!=='鍚堣'&&item.level1!=='骞冲潎鍊�'">
- <td class="tdgu kaitou wenzi" :rowspan="item.level1span" :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis">{{item.level1}}</td>
- <td class="tdgu1 kaitou wenzi" :rowspan="item.level2span" :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis">{{item.level2}}</td>
- <td class="tdgu2 kaitou wenzi" :rowspan="item.level3span" :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis">{{item.level3}}</td>
+ <td class="tdgu kaitou" :rowspan="item.level1span" :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis">
+ <div class="wenzi">
+ {{item.level1}}
+ </div></td>
+ <td class="tdgu1 kaitou" :rowspan="item.level2span" :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis">
+ <div class="wenzi">
+ {{item.level2}}
+ </div>
+ </td>
+ <td class="tdgu2 kaitou" :rowspan="item.level3span" :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis">
+ <div class="wenzi">
+ {{item.level3}}
+ </div>
+ </td>
<td class="tdgu3 kaitou">{{item.equipmentId}}</td>
<td class="tdgu4 kaitou" style="min-width: 162px; max-width: 162px;width: 162px;">{{item.equipmentName}}</td>
<td class="tdgu5 kaitou">{{item.equipmentType}}</td>
--
Gitblit v1.9.3