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/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue | 119 +++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 83 insertions(+), 36 deletions(-) diff --git a/src/views/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue b/src/views/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue index 296cba5..c234759 100644 --- a/src/views/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue +++ b/src/views/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue @@ -9,7 +9,6 @@ cancelText="鍏抽棴" wrap-class-name="full-modal" centered - :closable="false" :footer="null" > <div @@ -86,13 +85,13 @@ <a-descriptions-item label="璁惧鍚嶇О">{{resultData.equipmentName}}</a-descriptions-item> <a-descriptions-item label="IP鍦板潃">{{resultData.equipmentIP}}</a-descriptions-item> <a-descriptions-item label="绔彛鍙�">{{resultData.dataPort}}</a-descriptions-item> - <a-descriptions-item label="绯荤粺鐗堟湰鍙�">{{resultData.SystemVersion}}</a-descriptions-item> + <a-descriptions-item label="绯荤粺鐗堟湰鍙�">{{resultData.systemVersion}}</a-descriptions-item> <a-descriptions-item label="椹卞姩绫诲瀷">{{resultData.driveType}}</a-descriptions-item> - <a-descriptions-item label="绯荤粺鍨嬪彿">{{resultData.SystemType}}</a-descriptions-item> + <a-descriptions-item label="璁惧鍨嬪彿">{{resultData.equipmentModel}}</a-descriptions-item> <a-descriptions-item label="璁惧绫诲瀷">{{resultData.deviceType}}</a-descriptions-item> <a-descriptions-item label="璁惧鍔熺巼">{{resultData.devicePower}}</a-descriptions-item> - <a-descriptions-item label="鏈夋晥杞存暟">{{resultData.ValidAxis}}</a-descriptions-item> - <a-descriptions-item label="鏈�澶ц酱鏁�">{{resultData.MaxAxis}}</a-descriptions-item> + <a-descriptions-item label="鏈夋晥杞存暟">{{resultData.validAxis}}</a-descriptions-item> + <a-descriptions-item label="鏈�澶ц酱鏁�">{{resultData.maxAxis}}</a-descriptions-item> <a-descriptions-item label="澶囨敞">{{resultData.remark}}</a-descriptions-item> </a-descriptions> @@ -230,13 +229,21 @@ v-show="mdcDriveTypeParamConfigList != null" v-if="driverType != 'PLC'" :column="4" + class="operationData" > <a-descriptions-item v-for="(item,id) in mdcDriveTypeParamConfigList " :key="item.id" :label="item.chineseName" - >{{item.value}} + > + <a-tooltip @mouseenter="mouseEnterItem"> + <template slot="title"> + {{item.value}} + </template> + <div class="description-item-class">{{item.value}}</div> + </a-tooltip> + </a-descriptions-item> </a-descriptions> @@ -254,16 +261,17 @@ <!-->{{item.value}}</a-descriptions-item>--> <!--</a-descriptions>--> - <a-descriptions - title="鐗堟湰淇℃伅 for lsv2" - v-if="driverType == 'LSV2'" - :column="4" - > - <a-descriptions-item label="NC鐗堟湰">{{resultData.nCVersion}}</a-descriptions-item> - <a-descriptions-item label="TNC鐗堟湰">{{resultData.tNCVersion}}</a-descriptions-item> - <a-descriptions-item label="OPT鐗堟湰">{{resultData.oPTVersion}}</a-descriptions-item> - <a-descriptions-item label="PLC鐗堟湰">{{resultData.pLCVersion}}</a-descriptions-item> - </a-descriptions> + <!--<a-descriptions--> + <!--title="鐗堟湰淇℃伅 for lsv2"--> + <!--v-if="driverType == 'LSV2'"--> + <!--:column="4"--> + <!--class="lsv2Data"--> + <!-->--> + <!--<a-descriptions-item label="NC鐗堟湰">{{resultData.ncversion}}</a-descriptions-item>--> + <!--<a-descriptions-item label="TNC鐗堟湰">{{resultData.tncversion}}</a-descriptions-item>--> + <!--<a-descriptions-item label="OPT鐗堟湰">{{resultData.optversion}}</a-descriptions-item>--> + <!--<a-descriptions-item label="PLC鐗堟湰">{{resultData.plcversion}}</a-descriptions-item>--> + <!--</a-descriptions>--> </td> </tr> @@ -287,10 +295,11 @@ postAction } from '@/api/manage' import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' + import Template1 from '../../../../jeecg/JVxeDemo/layout-demo/Template1' export default { name: 'EqumentDetaiModal', - components: {}, + components: { Template1 }, props: {}, data() { return { @@ -471,7 +480,7 @@ show: false }, axisTick: { - show: true, + show: false, length: 20, splitNumber: 1, lineStyle: { @@ -526,7 +535,10 @@ }, pointer: { show: true, - width: 3 + width: 3, + itemStyle:{ + color:'#fff' + } }, data: [{ name: '', @@ -724,7 +736,7 @@ show: false }, axisTick: { - show: true, + show: false, length: 20, splitNumber: 1, lineStyle: { @@ -779,7 +791,10 @@ }, pointer: { show: true, - width: 3 + width: 3, + itemStyle:{ + color:'#fff' + } }, data: [{ name: '', @@ -874,7 +889,7 @@ type: 'gauge', radius: '80%', min: 0, //鏈�灏忓埢搴� - max: 300, //鏈�澶у埢搴� + max: 100, //鏈�澶у埢搴� splitNumber: 10, //鍒诲害鏁伴噺 startAngle: 225, endAngle: -45, @@ -977,7 +992,7 @@ show: false }, axisTick: { - show: true, + show: false, length: 20, splitNumber: 1, lineStyle: { @@ -1001,12 +1016,12 @@ radius: '52.5%', z: 3, startAngle: 225, - max: 300, + max: 100, endAngle: -45, axisLine: { lineStyle: { color: [ - [_this.spindleload / 300, '#31F3FF'], // 鍔ㄦ�� + [_this.spindleload / 100, '#31F3FF'], // 鍔ㄦ�� [1, '#185363'] ], width: 4 @@ -1032,7 +1047,10 @@ }, pointer: { show: true, - width: 3 + width: 3, + itemStyle:{ + color:'#fff' + } }, data: [{ name: '', @@ -1230,7 +1248,7 @@ show: false }, axisTick: { - show: true, + show: false, length: 20, splitNumber: 1, lineStyle: { @@ -1285,7 +1303,10 @@ }, pointer: { show: true, - width: 3 + width: 3, + itemStyle:{ + color:'#fff' + } }, data: [{ name: '', @@ -1343,7 +1364,7 @@ handleCancel() { this.$emit('close') this.visible = false - this.modalNode.removeEventListener('mouseleave', this.closeModal) + // this.modalNode.removeEventListener('mouseleave', this.closeModal) if(this.modalTimer){ clearInterval(this.modalTimer) this.modalTimer = null @@ -1390,15 +1411,22 @@ }, getModalNode() { - console.log(document.querySelector('.ant-modal-content')) - this.modalNode = document.querySelector('.ant-modal-content') - this.timeout = setTimeout(() => { - this.modalNode.addEventListener('mouseleave', this.closeModal) - }, 100) + // console.log(document.querySelector('.ant-modal-content')) + // this.modalNode = document.querySelector('.ant-modal-content') + // this.timeout = setTimeout(() => { + // this.modalNode.addEventListener('mouseleave', this.closeModal) + // }, 100) }, 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() { @@ -1419,7 +1447,7 @@ padding-bottom: 0; margin: 0; background-color: #4a4a48 !important; - opacity: 0.5; + opacity: 0.9; } /deep/ .ant-modal-content { display: flex; @@ -1440,7 +1468,7 @@ /*background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ /*background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ background-color: #312c2c; - opacity: 0.7; + opacity: 1; } /deep/ .ant-modal-close { @@ -1535,4 +1563,23 @@ .ant-tabs-content .ant-form-item { margin-bottom: 0px; } + + /deep/ .ant-descriptions-item-label{ + width: 6.7vw; + text-align: right; + margin-right: 10px; + } + + /deep/ .operationData .ant-descriptions-item-content, + .lsv2Data .ant-descriptions-item-content + { + width: 130px; + overflow: hidden; + } + + .description-item-class{ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } </style> -- Gitblit v1.9.3