From 8c168889e5ef37b4d334827108615e762511c622 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期二, 26 十二月 2023 11:39:25 +0800
Subject: [PATCH] 1、根页面网站标题由统计分析调整为MDC智慧车间 2、车间看板页面优化代码，去除冗余代码，试图解决新增车间后设备无法自由拖拽问题（未在现场调试，本地调试无问题） 3、车间看板页面全屏模式进入车间后车间背景图无法正常计算高度 4、车间看板与设备监控页面设备详情弹窗调整数据过长则省略的判定条件 5、首页优化布局方式，实现响应式布局
---
src/views/WorkshopSignage.vue | 59 +------------------
public/index.html | 2
src/views/mdc/base/modules/deviceBaseInfo/EqumentDetaiModel.vue | 22 +++++--
src/views/dashboard/Analysis.vue | 42 +++++++-------
src/views/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue | 22 +++++--
5 files changed, 56 insertions(+), 91 deletions(-)
diff --git a/public/index.html b/public/index.html
index 15b2ac4..0645826 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
- <title>缁熻鍒嗘瀽</title>
+ <title>MDC鏅烘収杞﹂棿</title>
<link rel="icon" href="<%= BASE_URL %>lxzn.png">
<script src="<%= BASE_URL %>cdn/babel-polyfill/polyfill_7_2_5.js"></script>
<style>
diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index 5dc5cb2..53d8115 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -145,8 +145,7 @@
value: 22,
color: '#FF0000'
}
- ],// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
- isFullscreen: false
+ ]// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
}
},
watch: {
@@ -190,15 +189,7 @@
this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(
this.workshopDetails.backgroundImage
)})`
-
- this.fullScreenPageHeight = `calc(100% - ${this.pageHeaderHeight}px)`
- this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)`
-
- if (this.isFullscreen) {
- this.$refs.deviceContainerRef.style.height = this.fullScreenPageHeight
- } else {
- this.$refs.deviceContainerRef.style.height = this.normalPageHeight
- }
+ this.$refs.deviceContainerRef.style.height = this.normalPageHeight
})
},
@@ -297,56 +288,15 @@
// setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0)
// },1000*10)
}
- },
-
- onResize() {
- // 鍒╃敤灞忓箷鍒嗚鲸鐜囧拰window瀵硅薄鐨勫唴楂樺害鏉ュ垽鏂吋瀹笽E
- let winFlag = window.innerHeight === window.screen.height
- // 鍒╃敤window鍏ㄥ睆鏍囪瘑鏉ュ垽鏂� -- IE鏃犳晥
- let isFull = window.fullScreen || document.webkitIsFullScreen
-
- if (isFull === undefined) {
- this.isFullscreen = winFlag
- } else {
- this.isFullscreen = winFlag || isFull
- }
- console.log(winFlag) // true鍏ㄥ睆 false涓嶆槸鍏ㄥ睆
- console.log('浠诲姟鏍忛珮搴�', this.taskBarHeight)
- console.log('宸ュ叿鏍忛珮搴�', this.utilsBarHeight)
-
- //鍏ㄥ睆鍒欏浘绾哥洅瀛愬彲瑙嗛珮搴﹀噺鍘婚〉澶撮珮搴︼紝姝ｅ父绐楀彛鍒欏噺鍘婚〉澶淬�佸睆骞曞簳閮ㄤ换鍔℃爮浠ュ強娴忚鍣ㄥ伐鍏锋爮楂樺害
- if (winFlag) {
- console.log('瑙﹀彂鍏ㄥ睆')
- this.$refs.deviceContainerRef.style.height = this.fullScreenPageHeight
-
- } else {
- console.log('鍏抽棴鍏ㄥ睆')
- // 濡傛灉鍒锋柊椤甸潰閲嶆柊鍔犺浇鍚庨粯璁ゅ浜庡叏灞忔ā寮忥紝鍒欏伐鍏锋爮楂樺害涓鸿礋鏁帮紝鍥犳闇�瑕侀��鍑哄叏灞忔ā寮忔椂閲嶇疆宸ュ叿鏍忛珮搴�
- this.utilsBarHeight = window.outerHeight - window.innerHeight
- this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)`
- this.$refs.deviceContainerRef.style.height = this.normalPageHeight
- }
}
-
},
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)
}
-
-
- let winFlag = window.innerHeight === window.screen.height
- // 鍒╃敤window鍏ㄥ睆鏍囪瘑鏉ュ垽鏂� -- IE鏃犳晥
- let isFull = window.fullScreen || document.webkitIsFullScreen
-
- if (isFull === undefined) {
- this.isFullscreen = winFlag
- } else {
- this.isFullscreen = winFlag || isFull
- }
-
- // window.addEventListener('resize', this.onResize)
},
mounted() {
// 绂佹鐢ㄦ埛閫変腑鍐呭
@@ -356,7 +306,6 @@
// 纭繚閿�姣佸畾鏃跺櫒銆佷簨浠跺強鍥炴敹璧勬簮
clearInterval(this.timingAcquisition)
this.timingAcquisition = null
- // window.removeEventListener('resize', this.onResize)
}
}
</script>
diff --git a/src/views/dashboard/Analysis.vue b/src/views/dashboard/Analysis.vue
index edb65db..209c1ab 100644
--- a/src/views/dashboard/Analysis.vue
+++ b/src/views/dashboard/Analysis.vue
@@ -1,5 +1,5 @@
<template>
- <div class="page-container" style="width: 100%">
+ <div class="page-container">
<!--<index-chart v-if="indexStyle==1"></index-chart>-->
<!--<index-bdc v-if="indexStyle==2"></index-bdc>-->
<!--<index-task v-if="indexStyle==3"></index-task>-->
@@ -11,14 +11,15 @@
<!--<!–<a-radio :value="3">浠诲姟琛ㄦ牸</a-radio>–>-->
<!--<!–</a-radio-group>–>-->
<!--</div>-->
- <!--<a-button type="primary" size="large" v-for="item in workshopList" :key="item.workshopId"-->
- <!--@click="navigateToWorkshopSignage(item.id)">{{item.workshopName}}-->
- <!--</a-button>-->
- <a-card v-for="item in workshopList" :key="item.workshopId"
- @click="navigateToWorkshopSignage(item.id)" class="workshop-entrance">
- {{item.workshopName}}
- </a-card>
+ <a-list
+ :grid="{ gutter: [{xs: 0, sm: 24, md: 24, lg: 56, xl: 64, xxl: 80},20], xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }"
+ :data-source="workshopList">
+ <a-list-item slot="renderItem" slot-scope="item, index">
+ <div class="workshop-name" @click="navigateToWorkshopSignage(item.id)">{{item.workshopName}}</div>
+ </a-list-item>
+ </a-list>
+
</div>
</template>
@@ -70,21 +71,20 @@
<style lang="less" scoped>
.page-container {
- width: 100%;
- display: flex;
- flex-wrap: wrap;
+ padding: 30px 30px 0;
- .workshop-entrance {
- font-size: 30px;
- background-color: #fff;
- width: 300px;
- height: 140px;
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 30px 38px;
- cursor: pointer;
+ .workshop-name {
+ width: 100%;
+ background: #fff;
+ padding: 55px 0;
border-radius: 20px;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 30px;
+ cursor: pointer;
}
}
+
</style>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue b/src/views/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue
index 022e82c..c234759 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue
@@ -237,16 +237,13 @@
:key="item.id"
:label="item.chineseName"
>
- <a-popover v-if="item.value&&item.value.length>18">
- <template slot="content">
+ <a-tooltip @mouseenter="mouseEnterItem">
+ <template slot="title">
{{item.value}}
</template>
- {{item.value}}
- </a-popover>
+ <div class="description-item-class">{{item.value}}</div>
+ </a-tooltip>
- <template v-else>
- {{item.value}}
- </template>
</a-descriptions-item>
</a-descriptions>
@@ -1423,6 +1420,13 @@
closeModal() {
this.handleCancel()
+ },
+
+ mouseEnterItem(e){
+ console.log(e, e.target, e.target.clientWidth, e.target.scrollWidth)
+ if (e.target.clientWidth >= e.target.scrollWidth) {
+ e.target.style.pointerEvents = 'none' // 闃绘榧犳爣浜嬩欢 pointer-events 灞炴�х敤浜庤缃厓绱犳槸鍚﹀榧犳爣浜嬩欢鍋氬嚭鍙嶅簲銆�
+ }
}
},
beforeDestroy() {
@@ -1571,6 +1575,10 @@
{
width: 130px;
overflow: hidden;
+ }
+
+ .description-item-class{
+ overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
diff --git a/src/views/mdc/base/modules/deviceBaseInfo/EqumentDetaiModel.vue b/src/views/mdc/base/modules/deviceBaseInfo/EqumentDetaiModel.vue
index c0d6bc6..a448802 100644
--- a/src/views/mdc/base/modules/deviceBaseInfo/EqumentDetaiModel.vue
+++ b/src/views/mdc/base/modules/deviceBaseInfo/EqumentDetaiModel.vue
@@ -237,16 +237,13 @@
:key="item.id"
:label="item.chineseName"
>
- <a-popover v-if="item.value&&item.value.length>18">
- <template slot="content">
+ <a-tooltip @mouseenter="mouseEnterItem">
+ <template slot="title">
{{item.value}}
</template>
- {{item.value}}
- </a-popover>
+ <div class="description-item-class">{{item.value}}</div>
+ </a-tooltip>
- <template v-else>
- {{item.value}}
- </template>
</a-descriptions-item>
</a-descriptions>
@@ -1425,6 +1422,13 @@
}
})
+ },
+
+ mouseEnterItem(e){
+ console.log(e, e.target, e.target.clientWidth, e.target.scrollWidth)
+ if (e.target.clientWidth >= e.target.scrollWidth) {
+ e.target.style.pointerEvents = 'none' // 闃绘榧犳爣浜嬩欢 pointer-events 灞炴�х敤浜庤缃厓绱犳槸鍚﹀榧犳爣浜嬩欢鍋氬嚭鍙嶅簲銆�
+ }
}
},
beforeDestroy(){
@@ -1560,6 +1564,10 @@
{
width: 130px;
overflow: hidden;
+ }
+
+ .description-item-class{
+ overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
--
Gitblit v1.9.3