From 3432c3100ccb4c3b78dc0a5f7f242bdcda503a63 Mon Sep 17 00:00:00 2001 From: zhaowei <zhaowei> Date: 星期三, 18 六月 2025 10:45:49 +0800 Subject: [PATCH] 1、终端程序呼叫页面呼叫原因组件由输入框改为多行文本域 2、设备管理页面新增设备图片字段同时在新增和编辑设备时添加设备图片 3、设备监控以及设备看板页面新增故障状态同时替换设备图片为设备管理页面中维护的设备图片而不再是设备所属设备类型图片以及三色灯增加故障状态灯 --- src/views/mdc/base/modules/DeviceBaseInfo/EquipmentLayout.vue | 146 +++++++++++++++++++----------------------------- 1 files changed, 57 insertions(+), 89 deletions(-) diff --git a/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentLayout.vue b/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentLayout.vue index f8099d1..048b06a 100644 --- a/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentLayout.vue +++ b/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentLayout.vue @@ -2,13 +2,14 @@ <a-card :bordered="false"> <div class="containerequip"> <div class="container_content"> - <div class="contnet" v-for="(item,index) in dataList" :key="index" :class="node == item.equipmentId ? 'addclass' : '' "> + <div class="contnet" v-for="(item,index) in dataList" :key="index" + :class="node == item.equipmentId ? 'addClass' : '' "> - <div class="content_equipment" @click="openDetail(item)"> + <div style="cursor: pointer" @click="openDetail(item)"> <div class="equipment_box"> <div> <img style="width: 11%;" :src="getStatusImgUrl(item.oporation)" alt=""> - <img class="orange" :src="getImgUrl(item.equipmentTypePictures)"> + <img class="deviceImage" :src="getImgUrl(item.equipmentTypePictures)"> </div> </div> </div> @@ -24,7 +25,7 @@ <script> import EquipmentDetailModal from './EquipmentDetailModal' - import {getFileAccessHttpUrl} from '@/api/manage'; + import { getFileAccessHttpUrl } from '@/api/manage' import { getAction } from '@/api/manage' @@ -32,128 +33,95 @@ export default { name: 'EquipmentLayout', components: { EquipmentDetailModal }, - props: { dataList: { + props: { + dataList: { type: Array, required: true, default: [] - }, equipmentId: '' , - node:''}, - data() { - return { - equipMessageTimer:'' - } - }, - created() { - }, - mounted() { - + }, + node: '' }, methods: { - getImgUrl(img){ - if(img == null || img ==''){ - return require("../../../../../assets/default.png"); + getImgUrl(img) { + if (img == null || img == '') { + return require('../../../../../assets/default.png') } return getFileAccessHttpUrl(img) }, - getStatusImgUrl(imgStaus){ - if(imgStaus == 1){ - return require("../../../../../assets/yellow.png"); - }else if(imgStaus == 2){ - return require("../../../../../assets/yellow.png"); - }else if(imgStaus == 3){ - return require("../../../../../assets/green.png"); - }else if(imgStaus ==22){ - return require("../../../../../assets/red.png"); - }else if(imgStaus ==0){ - return require("../../../../../assets/gray.png"); - }else{ - return require("../../../../../assets/gray.png"); + getStatusImgUrl(imgStatus) { + switch (imgStatus) { + case 1: + case 2: + return require('@/assets/yellow.png') + case 3: + return require('@/assets/green.png') + case 22: + return require('@/assets/red.png') + case 5: + return require('@/assets/orange.png') + default: + return require('@/assets/gray.png') } - }, - getBackgroundUrl(imgurl){ - return require("../../../../../assets/"+imgurl+".gif"); }, openDetail(item) { - if(item.oporation == 0){ - // this.$message.warn("璁惧澶勪簬鍏虫満鐘舵�侊紒"); + if (item.oporation == 0) { this.$notification.warning({ - message:'娑堟伅', - description:"璁惧澶勪簬鍏虫満鐘舵�侊紒" - }); - return false; + message: '娑堟伅', + description: '璁惧澶勪簬鍏虫満鐘舵�侊紒' + }) + return false } - console.log(item); - this.$refs.equipmentDetailModal.initData(item.id); - this.$refs.equipmentDetailModal.timerModel(item.id); - // this.equipMessageTimer = setInterval(() => { - // setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0) - // },1000*10) + this.$refs.equipmentDetailModal.initData(item.id) + this.$refs.equipmentDetailModal.timerModel(item.id) } - }, - beforeDestroy(){ - // clearInterval(this.equipMessageTimer); - // this.equipMessageTimer = null } } </script> <style scoped> - .gray{ - background-image: url("../../../../../assets/gray.gif"); + .deviceImage { -webkit-background-size: 100% 100%; background-size: 100% 100%; background-repeat: no-repeat; } - .green{ - background-image: url("../../../../../assets/green.gif"); - -webkit-background-size: 100% 100%; - background-size: 100% 100%; - background-repeat: no-repeat; - } - .red{ - background-image: url("../../../../../assets/red.gif"); - -webkit-background-size: 100% 100%; - background-size: 100% 100%; - background-repeat: no-repeat; - } - .orange{ - /*background-image: url("../../../../../assets/orange.gif");*/ - -webkit-background-size: 100% 100%; - background-size: 100% 100%; - background-repeat: no-repeat; - } - .equipment_box img{ + + .equipment_box img { width: 45%; } - .containerequip{ + .containerequip { overflow: auto; } - @media screen and (min-width: 1920px){ - .containerequip{ - height: 640px!important; + @media screen and (min-width: 1920px) { + .containerequip { + height: 640px !important; } } - @media screen and (min-width: 1680px) and (max-width: 1920px){ - .containerequip{ - height: 640px!important; + + @media screen and (min-width: 1680px) and (max-width: 1920px) { + .containerequip { + height: 640px !important; } } - @media screen and (min-width: 1400px) and (max-width: 1680px){ - .containerequip{ - height: 493px!important; + + @media screen and (min-width: 1400px) and (max-width: 1680px) { + .containerequip { + height: 493px !important; } } - @media screen and (min-width: 1280px) and (max-width: 1400px){ - .containerequip{ - height: 493px!important; + + @media screen and (min-width: 1280px) and (max-width: 1400px) { + .containerequip { + height: 493px !important; } } - @media screen and (max-width: 1280px){ - .containerequip{ - height: 394px!important; + + @media screen and (max-width: 1280px) { + .containerequip { + height: 394px !important; } } + .container_content { width: 100%; position: relative; @@ -170,7 +138,7 @@ padding-top: 5%; } - .addclass p { + .addClass p { border-bottom: 2px solid #e957ff; } </style> \ No newline at end of file -- Gitblit v1.9.3