From 14e6fca4c624e161dae9b7e905f9fccb03ba0177 Mon Sep 17 00:00:00 2001 From: zhuzhuanzhuan Date: 星期一, 13 十一月 2023 10:42:08 +0800 Subject: [PATCH] 1、车间看板页面实现鼠标悬浮于设备上出现设备详细信息弹窗,鼠标移出弹窗消失 2、设备参数阈值管理页面新增至mdc模块设备基础配置菜单下并完成所有布局及功能实现 --- src/views/WorkshopSignage.vue | 526 ++++++----- src/api/mdc.js | 15 src/views/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue | 1538 +++++++++++++++++++++++++++++++++++ src/views/mdc/base/DeviceParamThresholdManagement.vue | 232 +++++ src/views/mdc/base/modules/DeviceParamThresholdManagement/ParamThresholdModal.vue | 251 +++++ 5 files changed, 2,310 insertions(+), 252 deletions(-) diff --git a/src/api/mdc.js b/src/api/mdc.js index 2e30100..24833ba 100644 --- a/src/api/mdc.js +++ b/src/api/mdc.js @@ -4,7 +4,7 @@ // -------------------------------------椹卞姩鍙傛暟绠$悊椤甸潰---------------------------------------- // 鑾峰彇鎺у埗绯荤粺绫诲瀷 getDriveTypeApi: () => getAction('/mdc/mdcDriveTypeParamConfig/getDriveParamOptions'), - // -------------------------------------杞﹂棿鐪嬫澘椤甸潰---------------------------------------- + // -------------------------------------杞﹂棿鐪嬫澘椤甸潰-------------------------------------------- // 棣栭〉鑾峰彇澶у睆鍏ュ彛杞﹂棿鍒楄〃 getWorkshopListInHomePageApi: () => getAction('/mdc/mdcWorkshopInfo/getWorkshopList'), // 鏍规嵁杞﹂棿id鏌ヨ璁惧鍒楄〃 @@ -30,5 +30,16 @@ // 鍒犻櫎鍗曚釜澶у睆杞﹂棿鍜岃澶囧叧绯� deleteSingleDeviceInWorkshopApi: params => deleteAction('/mdc/mdcWorkshopInfo/deleteWorkshopEquipment', params), // 鎵归噺鍒犻櫎澶у睆杞﹂棿鍜岃澶囧叧绯� - deleteBatchDeviceInWorkshopApi: params => deleteAction('/mdc/mdcWorkshopInfo/deleteWorkshopEquipmentBatch', params) + deleteBatchDeviceInWorkshopApi: params => deleteAction('/mdc/mdcWorkshopInfo/deleteWorkshopEquipmentBatch', params), + // -------------------------------------璁惧鍙傛暟闃堝�肩鐞嗛〉闈�-------------------------------------------- + // 鏍规嵁椹卞姩绫诲瀷鑾峰彇鍙傛暟 + getParamListByDriveTypeApi: controlSystemType => getAction(`/mdc/mdcDriveTypeParamConfig/getDriveParamOptionsByType?controlSystemType=${controlSystemType}`), + // 澧炲姞璁惧鍙傛暟闃堝�� + addParamThresholdApi: params => postAction('/mdc/mdcEquipmentThreshold/add', params), + // 缂栬緫璁惧鍙傛暟闃堝�� + editParamThresholdApi: params => postAction('/mdc/mdcEquipmentThreshold/edit', params), + // 鍒犻櫎璁惧鍙傛暟闃堝�� + deleteParamThresholdApi: id => deleteAction('/mdc/mdcEquipmentThreshold/delete', { id }), + // 鍒犻櫎璁惧鍙傛暟闃堝�� + deleteBatchParamThresholdApi: ids => deleteAction('/mdc/mdcEquipmentThreshold/deleteBatch', { ids }) } \ No newline at end of file diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue index c566a50..81b35a5 100644 --- a/src/views/WorkshopSignage.vue +++ b/src/views/WorkshopSignage.vue @@ -36,7 +36,8 @@ :isResizable="isResizable" :stickSize="6" > - <div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }"> + <div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }" + @mouseenter="openDetail(item)"> <div class="device-status"> <div v-if="item.equipmentStatus == 2 || item.equipmentStatus == 1" @@ -77,293 +78,318 @@ </div> </div> </dv-border-box-8> + + <EquipmentDetailModal ref="EquipmentDetailModal"></EquipmentDetailModal> </dv-full-screen-container> </template> <script> -import VueDragResize from 'vue-drag-resize' -import api from '@/api/mdc' -import { getFileAccessHttpUrl } from '@/api/manage' + import VueDragResize from 'vue-drag-resize' + import api from '@/api/mdc' + import { getFileAccessHttpUrl } from '@/api/manage' + import EquipmentDetailModal from './mdc/base/modules/WorkshopSignage/EquipmentDetailModal' + import { message } from 'ant-design-vue' -export default { - components: { - VueDragResize, - }, - data() { - return { - workshopDetails: {}, // 杞﹂棿璇︾粏淇℃伅, - isDraggable: false, // 鏄惁寮�鍚嫋鎷� - isResizable: false, // 鏄惁寮�鍚缉鏀� - isSwitchChecked: false, // 鏄惁寮�鍚姛鑳� - timingAcquisition: null, // 瀹氭椂鍒锋柊鏄惁寮�鍚� - deviceList: [ - // { - // equipmentId: '123213213123232',// 璁惧ID - // equipmentImage: require('@/assets/8.png'), // 璁惧鍥剧墖 - // coordinateTop: 200, // 鎷栨嫿鍏冪礌璺濈洅瀛愰《璺濈 - // coordinateLeft: 100, // 鎷栨嫿鍏冪礌璺濈洅瀛愬乏渚ц窛绂� - // vw: 100, // 缂╂斁鍏冪礌瀹藉害 - // vh: 100, // 缂╂斁鍏冪礌楂樺害 - // fontSize: 12, // 缂╂斁鍏冪礌瀛椾綋澶у皬 - // equipmentStatus: 1 // 璁惧鐘舵�� 0:鍏虫満 22:鎶ヨ 2:寰呮満 3:杩愯 寮�鏈�:1锛堟病鏈夊洓鑹茬伅鏍囪瘑褰掍负寰呮満锛� - // } - ], // 璁惧淇℃伅鍒楄〃 - deviceStatusList: [ - { - label: '鍏虫満', - value: 0, - color: '#A8A8A8', - }, - { - label: '寰呮満', - value: 2, - color: '#FFFF00', - }, - { - label: '杩愯', - value: 3, - color: '#00EE00', - }, - { - label: '鎶ヨ', - value: 22, - color: '#FF0000', - }, - ], // 璁惧鐘舵�佹寚绀虹伅鍒楄〃 - } - }, - watch: { - isSwitchChecked: { - handler(newVal) { - if (!newVal) { - console.log('瀹氭椂鍣ㄥ紑鍚腑') - this.timingAcquisition = setInterval(() => { - this.getDeviceListByApi(this.$route.params.id) - }, 2000) - } else { - console.log('鍏抽棴瀹氭椂鍣�') - clearInterval(this.timingAcquisition) - this.timingAcquisition = null - } - }, - immediate: true, - }, - }, - methods: { - /** - * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇璁惧淇℃伅鍒楄〃 - * @param id 杞﹂棿Id - */ - getDeviceListByApi(id) { - console.log('閲嶆柊鍒锋柊') - api.getDeviceListInWorkshopSignagePageApi(id).then((res) => { - if (res.result && res.result.length > 0) { - this.deviceList = res.result - } - }) - }, + message.config({ + maxCount: 3 + }) - /** - * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇杞﹂棿璇︾粏淇℃伅 - * @param id 杞﹂棿Id - */ - getWorkshopDetailsByApi(id) { - api.getWorkshopDetailByWorkshopIdApi(id).then((res) => { - this.workshopDetails = res.result - this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView( - this.workshopDetails.backgroundImage - )})` - }) + export default { + components: { + VueDragResize, + EquipmentDetailModal }, - - /** - * 鍥剧墖棰勮 - * @param text 鍥剧墖鍦板潃 - */ - getImgView(text) { - if (text && text.indexOf(',') > 0) { - text = text.substring(0, text.indexOf(',')) + data() { + return { + workshopDetails: {}, // 杞﹂棿璇︾粏淇℃伅, + isDraggable: false, // 鏄惁寮�鍚嫋鎷� + isResizable: false, // 鏄惁寮�鍚缉鏀� + isSwitchChecked: false, // 鏄惁寮�鍚姛鑳� + timingAcquisition: null, // 瀹氭椂鍒锋柊鏄惁寮�鍚� + deviceList: [ + // { + // equipmentId: '123213213123232',// 璁惧ID + // equipmentImage: require('@/assets/8.png'), // 璁惧鍥剧墖 + // coordinateTop: 200, // 鎷栨嫿鍏冪礌璺濈洅瀛愰《璺濈 + // coordinateLeft: 100, // 鎷栨嫿鍏冪礌璺濈洅瀛愬乏渚ц窛绂� + // vw: 100, // 缂╂斁鍏冪礌瀹藉害 + // vh: 100, // 缂╂斁鍏冪礌楂樺害 + // fontSize: 12, // 缂╂斁鍏冪礌瀛椾綋澶у皬 + // equipmentStatus: 1 // 璁惧鐘舵�� 0:鍏虫満 22:鎶ヨ 2:寰呮満 3:杩愯 寮�鏈�:1锛堟病鏈夊洓鑹茬伅鏍囪瘑褰掍负寰呮満锛� + // } + ], // 璁惧淇℃伅鍒楄〃 + deviceStatusList: [ + { + label: '鍏虫満', + value: 0, + color: '#A8A8A8' + }, + { + label: '寰呮満', + value: 2, + color: '#FFFF00' + }, + { + label: '杩愯', + value: 3, + color: '#00EE00' + }, + { + label: '鎶ヨ', + value: 22, + color: '#FF0000' + } + ] // 璁惧鐘舵�佹寚绀虹伅鍒楄〃 } - return getFileAccessHttpUrl(text) }, - - /** - * 鐐瑰嚮淇濆瓨鎸夐挳璋冪敤鎺ュ彛淇濆瓨鎷栨嫿鍚庣殑浣嶇疆涓庤澶囧浘鏍囧昂瀵� - */ - saveDevicePositionAndSizeByApi() { - console.log('瑙﹀彂淇濆瓨') - if (this.isOperatingDevice) { - api.saveDevicePositionAndSizeApi(this.deviceList).then((res) => { - if (res.code === 200) { - this.$notification.success({ - message: '娑堟伅', - description: res.message, - }) - this.isOperatingDevice = false - if (this.isSwitchChecked) { - this.isSwitchChecked = false - this.isResizable = !this.isResizable - this.isDraggable = !this.isDraggable - } - this.getDeviceListByApi(this.$route.params.id) + watch: { + isSwitchChecked: { + handler(newVal) { + if (!newVal) { + console.log('瀹氭椂鍣ㄥ紑鍚腑') + this.timingAcquisition = setInterval(() => { + this.getDeviceListByApi(this.$route.params.id) + }, 2000) + } else { + console.log('鍏抽棴瀹氭椂鍣�') + clearInterval(this.timingAcquisition) + this.timingAcquisition = null + } + }, + immediate: true + } + }, + methods: { + /** + * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇璁惧淇℃伅鍒楄〃 + * @param id 杞﹂棿Id + */ + getDeviceListByApi(id) { + console.log('閲嶆柊鍒锋柊') + api.getDeviceListInWorkshopSignagePageApi(id).then((res) => { + if (res.result && res.result.length > 0) { + this.deviceList = res.result } }) - } else { - this.$notification.warning({ - message: '娑堟伅', - description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛屼繚瀛�', + }, + + /** + * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇杞﹂棿璇︾粏淇℃伅 + * @param id 杞﹂棿Id + */ + getWorkshopDetailsByApi(id) { + api.getWorkshopDetailByWorkshopIdApi(id).then((res) => { + this.workshopDetails = res.result + this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView( + this.workshopDetails.backgroundImage + )})` }) + }, + + /** + * 鍥剧墖棰勮 + * @param text 鍥剧墖鍦板潃 + */ + getImgView(text) { + if (text && text.indexOf(',') > 0) { + text = text.substring(0, text.indexOf(',')) + } + return getFileAccessHttpUrl(text) + }, + + /** + * 鐐瑰嚮淇濆瓨鎸夐挳璋冪敤鎺ュ彛淇濆瓨鎷栨嫿鍚庣殑浣嶇疆涓庤澶囧浘鏍囧昂瀵� + */ + saveDevicePositionAndSizeByApi() { + console.log('瑙﹀彂淇濆瓨') + if (this.isOperatingDevice) { + api.saveDevicePositionAndSizeApi(this.deviceList).then((res) => { + if (res.code === 200) { + this.$notification.success({ + message: '娑堟伅', + description: res.message + }) + this.isOperatingDevice = false + if (this.isSwitchChecked) { + this.isSwitchChecked = false + this.isResizable = !this.isResizable + this.isDraggable = !this.isDraggable + } + this.getDeviceListByApi(this.$route.params.id) + } + }) + } else { + this.$notification.warning({ + message: '娑堟伅', + description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛屼繚瀛�' + }) + } + }, + + /** + * 璁惧鎷栨嫿鎴栫缉鏀炬椂瑙﹀彂浜嬩欢 + * @param newRect 鎷栨嫿鎴栫缉鏀惧悗鐨勫昂瀵稿強璺濈 + * @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍� + */ + resize(newRect, index) { + // if (newRect.width > 100) { + // if (newRect.width / newRect.height < 2) { + // this.deviceList[index].fontSize = newRect.width / 10 + // } else { + // this.deviceList[index].fontSize = newRect.height / 5 + // } + // } else { + // this.deviceList[index].fontSize = 12 + // } + this.deviceList[index].vw = newRect.width + this.deviceList[index].vh = newRect.height + this.deviceList[index].coordinateTop = newRect.top + this.deviceList[index].coordinateLeft = newRect.left + }, + + /** + * 鏍规嵁璁惧鐘舵�佸�艰幏鍙栧搴旇澶囨暟閲� + * @param value 璁惧鐘舵�佸�� + * @returns {number} 璁惧鏁伴噺 + */ + getDeviceNumberByStatus(value) { + return this.deviceList.filter((item) => item.equipmentStatus === value).length + }, + + /** + * 寮�鍚姛鑳借Е鍙戜簨浠� + * @param checked 褰撳墠switch鐘舵�侊紝鏄惁寮�鍚紝鍒濆涓篺alse + */ + handleSwitchChange(checked) { + this.isOperatingDevice = true + this.isResizable = !this.isResizable + this.isDraggable = !this.isDraggable + }, + + openDetail(item) { + if (item.equipmentStatus == 0) { + // this.$message.warn("璁惧澶勪簬鍏虫満鐘舵�侊紒"); + this.$message.warning('璁惧澶勪簬鍏虫満鐘舵�侊紒') + return false + } + console.log(item) + console.log(this.$refs.EquipmentDetailModal) + this.$refs.EquipmentDetailModal.initData(item.equId) + this.$refs.EquipmentDetailModal.timerModel(item.equId) + // this.equipMessageTimer = setInterval(() => { + // setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0) + // },1000*10) + }, + + }, + created() { + if (this.$route.params.id) { + this.getDeviceListByApi(this.$route.params.id) + this.getWorkshopDetailsByApi(this.$route.params.id) } }, - - /** - * 璁惧鎷栨嫿鎴栫缉鏀炬椂瑙﹀彂浜嬩欢 - * @param newRect 鎷栨嫿鎴栫缉鏀惧悗鐨勫昂瀵稿強璺濈 - * @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍� - */ - resize(newRect, index) { - // if (newRect.width > 100) { - // if (newRect.width / newRect.height < 2) { - // this.deviceList[index].fontSize = newRect.width / 10 - // } else { - // this.deviceList[index].fontSize = newRect.height / 5 - // } - // } else { - // this.deviceList[index].fontSize = 12 - // } - this.deviceList[index].vw = newRect.width - this.deviceList[index].vh = newRect.height - this.deviceList[index].coordinateTop = newRect.top - this.deviceList[index].coordinateLeft = newRect.left + mounted() { + // 绂佹鐢ㄦ埛閫変腑鍐呭 + document.onselectstart = () => false }, - - /** - * 鏍规嵁璁惧鐘舵�佸�艰幏鍙栧搴旇澶囨暟閲� - * @param value 璁惧鐘舵�佸�� - * @returns {number} 璁惧鏁伴噺 - */ - getDeviceNumberByStatus(value) { - return this.deviceList.filter((item) => item.equipmentStatus === value).length - }, - - /** - * 寮�鍚姛鑳借Е鍙戜簨浠� - * @param checked 褰撳墠switch鐘舵�侊紝鏄惁寮�鍚紝鍒濆涓篺alse - */ - handleSwitchChange(checked) { - this.isOperatingDevice = true - this.isResizable = !this.isResizable - this.isDraggable = !this.isDraggable - }, - }, - created() { - if (this.$route.params.id) { - this.getDeviceListByApi(this.$route.params.id) - this.getWorkshopDetailsByApi(this.$route.params.id) + beforeDestroy() { + // 纭繚閿�姣佸畾鏃跺櫒鍙婂洖鏀惰祫婧� + clearInterval(this.timingAcquisition) + this.timingAcquisition = null } - }, - mounted() { - // 绂佹鐢ㄦ埛閫変腑鍐呭 - document.onselectstart = () => false - }, - beforeDestroy() { - // 纭繚閿�姣佸畾鏃跺櫒鍙婂洖鏀惰祫婧� - clearInterval(this.timingAcquisition) - this.timingAcquisition = null - }, -} + } </script> <style scoped lang="less"> -.full-screen-container { - background-image: url('../assets/Bj.jpg'); - background-size: 100% 100%; - color: #fff; - - .page-header { - height: 80px; - font-size: 50px; - text-align: center; - position: relative; - - .header-right { - width: 450px; - position: absolute; - right: 0px; - top: 35px; - display: flex; - justify-content: space-evenly; - align-items: center; - font-size: 16px; - } - } - - .content-container { - position: relative; - width: 100%; - height: 100%; - background-repeat: no-repeat; + .full-screen-container { + background-image: url('../assets/Bj.jpg'); background-size: 100% 100%; + color: #fff; - .device-status-info { - width: 400px; - position: absolute; - top: 5px; - right: 5px; - display: flex; - align-items: center; - justify-content: space-between; + .page-header { + height: 80px; + font-size: 50px; + text-align: center; + position: relative; - .single-status-info { - width: 60px; + .header-right { + width: 450px; + position: absolute; + right: 0px; + top: 35px; + display: flex; + justify-content: space-evenly; + align-items: center; + font-size: 16px; + } + } + + .content-container { + position: relative; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-size: 100% 100%; + + .device-status-info { + width: 400px; + position: absolute; + top: 5px; + right: 5px; display: flex; align-items: center; justify-content: space-between; - .status-square { - width: 14px; - height: 14px; - border: 1px solid #fff; - border-radius: 2px; + .single-status-info { + width: 60px; + display: flex; + align-items: center; + justify-content: space-between; + + .status-square { + width: 14px; + height: 14px; + border: 1px solid #fff; + border-radius: 2px; + } } } - } - .single-device { - position: absolute; - border: 1px solid transparent; - padding: 10px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - cursor: default; - - &:active { - border: 1px solid #1890ff; - } - - .device-status { - width: 100%; - height: 100%; + .single-device { + position: absolute; + border: 1px solid transparent; + padding: 10px; display: flex; + flex-direction: column; + align-items: center; justify-content: space-between; + cursor: default; - .status-image { - background-size: 100% 100%; - background-repeat: no-repeat; - width: 45px; - margin-right: 10px; + &:active { + border: 1px solid #1890ff; } - .device-image { - background-size: 100% 100%; - background-repeat: no-repeat; + .device-status { width: 100%; height: 100%; + display: flex; + justify-content: space-between; + + .status-image { + background-size: 100% 100%; + background-repeat: no-repeat; + width: 45px; + margin-right: 10px; + } + + .device-image { + background-size: 100% 100%; + background-repeat: no-repeat; + width: 100%; + height: 100%; + } } } } } -} </style> \ No newline at end of file diff --git a/src/views/mdc/base/DeviceParamThresholdManagement.vue b/src/views/mdc/base/DeviceParamThresholdManagement.vue new file mode 100644 index 0000000..c049b5e --- /dev/null +++ b/src/views/mdc/base/DeviceParamThresholdManagement.vue @@ -0,0 +1,232 @@ +<template> + <a-card :bordered="false"> + + <!-- 鏌ヨ鍖哄煙 --> + <div class="table-page-search-wrapper"> + <a-form layout="inline" @keyup.enter.native="searchQuery"> + <a-row :gutter="24"> + + <a-col :md="6" :sm="12"> + <a-form-item label="涓枃鍚�"> + <j-input placeholder="璇疯緭鍏ヤ腑鏂囧悕" v-model="queryParam.chineseName"></j-input> + </a-form-item> + </a-col> + + <a-col :md="6" :sm="8"> + <a-form-item label="鑻辨枃鍚�"> + <j-input placeholder="璇疯緭鍏ヨ嫳鏂囧悕" v-model="queryParam.englishName"></j-input> + </a-form-item> + </a-col> + + <a-col :md="6" :sm="8"> + <a-form-item label="椹卞姩绫诲瀷"> + <a-auto-complete + v-model="queryParam.controlSystemType" + :data-source="driveTypeList" + placeholder="璇烽�夋嫨鎺у埗绯荤粺绫诲瀷" + :filter-option="filterOption" + /> + </a-form-item> + </a-col> + + <a-col :md="6" :sm="8"> + <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> + <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">閲嶇疆</a-button> + </a-col> + </a-row> + </a-form> + </div> + + <!-- 鎿嶄綔鎸夐挳鍖哄煙 --> + <div class="table-operator" style="border-top: 5px"> + <a-button @click="handleAdd" type="primary" icon="plus">娣诲姞鍙傛暟闃堝��</a-button> + <a-dropdown v-if="selectedRowKeys.length > 0"> + <a-menu slot="overlay" @click="handleMenuClick"> + <a-menu-item key="1"> + <a-icon type="delete" @click="batchDel"/> + 鍒犻櫎 + </a-menu-item> + </a-menu> + <a-button style="margin-left: 8px"> + 鎵归噺鎿嶄綔 + <a-icon type="down"/> + </a-button> + </a-dropdown> + </div> + + <!-- table鍖哄煙-begin --> + <div> + <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>椤� + <a style="margin-left: 24px" @click="onClearSelected">娓呯┖</a> + </div> + + <a-table + ref="table" + bordered + size="middle" + rowKey="id" + :columns="columns" + :dataSource="dataSource" + :pagination="ipagination" + :loading="loading" + :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" + @change="handleTableChange"> + + <template slot="avatarslot" slot-scope="text, record, index"> + <div class="anty-img-wrap"> + <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/> + </div> + </template> + + <span slot="action" slot-scope="text, record"> + <a @click="handleEdit(record)">缂栬緫</a> + + <a-divider type="vertical"/> + + <a-popconfirm title="纭畾鍒犻櫎鍚�?" @confirm="() => handleDelete(record.id)"> + <a>鍒犻櫎</a> + </a-popconfirm> + + </span> + + + </a-table> + </div> + <!-- table鍖哄煙-end --> + + <ParamThresholdModal ref="modalForm" @ok="modalFormOk" :driveTypeList="driveTypeList"/> + </a-card> +</template> + +<script> + import { JeecgListMixin } from '@/mixins/JeecgListMixin' + import api from '@/api/mdc' + import ParamThresholdModal from './modules/DeviceParamThresholdManagement/ParamThresholdModal' + + export default { + name: 'EquipmentList', + mixins: [JeecgListMixin], + components: { + ParamThresholdModal + }, + data() { + return { + name: 'DeviceParamThresholdManagement', + description: '杩欐槸璁惧鍙傛暟闃堝�肩鐞嗛〉闈�', + queryParam: {}, + columns: [ + { + title: '#', + dataIndex: '', + key: 'rowIndex', + width: 60, + align: 'center', + customRender: function(t, r, index) { + return parseInt(index) + 1 + } + }, + { + title: '涓枃鍚�', + align: 'center', + dataIndex: 'chineseName', + width: 120 + // sorter: true + }, + { + title: '鑻辨枃鍚�', + align: 'center', + width: 150, + dataIndex: 'englishName' + }, + { + title: '椹卞姩绫诲瀷', + align: 'center', + width: 180, + dataIndex: 'controlSystemType' + }, + { + title: '闃堝�间笂闄�', + align: 'center', + width: 120, + dataIndex: 'maxThreshold' + // scopedSlots: {customRender: "avatarslot"} + }, + { + title: '闃堝�间笅闄�', + align: 'center', + width: 80, + dataIndex: 'minThreshold' + // sorter: true + }, + { + title: '鎿嶄綔', + dataIndex: 'action', + scopedSlots: { customRender: 'action' }, + align: 'center', + width: 120 + } + ], + driveTypeList: [], + url: { + list: '/mdc/mdcEquipmentThreshold/list', + delete: '/mdc/mdcEquipmentThreshold/delete', + deleteBatch: '/mdc/mdcEquipmentThreshold/deleteBatch' + } + } + }, + created() { + this.getDriveTypeByApi() + }, + methods: { + handleEdit: function(record) { + this.$refs.modalForm.edit(record) + this.$refs.modalForm.title = '缂栬緫' + + // 璋冪敤鎶藉眽琛ㄥ崟缁勪欢涓殑娓呴櫎琛ㄥ崟楠岃瘉鏂规硶 + this.$refs.modalForm.removeValidate() + }, + + handleAdd: function() { + this.$refs.modalForm.add() + this.$refs.modalForm.title = '鏂板' + }, + + handleMenuClick(e) { + if (e.key == 1) { + this.batchDel() + } else if (e.key == 2) { + this.batchFrozen(2) + } else if (e.key == 3) { + this.batchFrozen(1) + } + }, + + /** + * 璋冪敤鎺ュ彛鑾峰彇鎺у埗绯荤粺绫诲瀷 + */ + getDriveTypeByApi() { + api.getDriveTypeApi().then((res) => { + this.driveTypeList = res.result.map(item => item.value) + }) + }, + + /** + * 鑱旀兂杈撳叆妗嗙瓫閫夊姛鑳� + * @param input 杈撳叆鐨勫唴瀹� + * @param option 閰嶇疆 + * @returns {boolean} 鍒ゆ柇鏄惁绛涢�� + */ + filterOption(input, option) { + return ( + option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0 + ) + } + } + + } +</script> +<style scoped> + @import '~@assets/less/common.less' +</style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/DeviceParamThresholdManagement/ParamThresholdModal.vue b/src/views/mdc/base/modules/DeviceParamThresholdManagement/ParamThresholdModal.vue new file mode 100644 index 0000000..c03b3c7 --- /dev/null +++ b/src/views/mdc/base/modules/DeviceParamThresholdManagement/ParamThresholdModal.vue @@ -0,0 +1,251 @@ +<template> + <a-modal + :title="title" + :maskClosable="true" + :width="modalWidth" + @cancel="visible=false" + :visible="visible"> + <a-spin :spinning="confirmLoading"> + <a-form-model ref="form" :form="form" :model="model" :rules="validatorRules" :labelCol="labelCol" + :wrapperCol="wrapperCol"> + + <a-row :gutter="24"> + <a-col :span="12"> + <a-form-model-item prop="controlSystemType" label="椹卞姩绫诲瀷"> + <a-select v-model="model.controlSystemType" @change="handleDriveTypeChange" + placeholder="璇烽�夋嫨椹卞姩绫诲瀷"> + <a-select-option v-for="(item,index) in driveTypeList" :key="index" :value="item"> + {{item}} + </a-select-option> + </a-select> + </a-form-model-item> + </a-col> + + <a-col :span="12"> + <a-form-model-item prop="chineseName" label="鍙傛暟"> + <a-select v-model="model.chineseName" placeholder="璇烽�夋嫨鍙傛暟"> + <a-select-option v-for="item in paramList" :key="item.value" :value="item.value"> + {{item.label}} + </a-select-option> + </a-select> + </a-form-model-item> + </a-col> + </a-row> + + <a-row :gutter="24"> + + <a-col :span="12"> + <a-form-model-item prop="maxThreshold" label="闃堝�间笂闄�"> + <a-input v-model="model.maxThreshold" placeholder="璇疯緭鍏ラ槇鍊间笂闄�"></a-input> + </a-form-model-item> + </a-col> + + <a-col :span="12"> + <a-form-model-item prop="minThreshold" label="闃堝�间笅闄�"> + <a-input v-model="model.minThreshold" placeholder="璇疯緭鍏ラ槇鍊间笅闄�"></a-input> + </a-form-model-item> + </a-col> + + </a-row> + + </a-form-model> + </a-spin> + + + <template slot="footer"> + <a-popconfirm title="纭畾鏀惧純鎿嶄綔锛�" @confirm="visible=false" okText="纭畾" cancelText="鍙栨秷"> + <a-button style="margin-right: .8rem">鍙栨秷</a-button> + </a-popconfirm> + <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">鎻愪氦</a-button> + </template> + + </a-modal> + +</template> + +<script> + import pick from 'lodash.pick' + import api from '@/api/mdc' + + export default { + name: 'ParamThresholdModal', + components: {}, + props: { + driveTypeList: { + type: Array + } + }, + data() { + return { + modalWidth: 700, + form: this.$form.createForm(this), + validatorRules: { + controlSystemType: [ + { + required: true, message: '璇烽�夋嫨椹卞姩绫诲瀷' + } + ], + chineseName: [ + { + required: true, message: '璇烽�夋嫨鍙傛暟' + } + ], + minThreshold: [ + { + required: true, message: '璇疯緭鍏ラ槇鍊间笂闄�' + }, + { + pattern: /^[0-9]+$/, + message: '璇疯緭鍏ラ樋鎷変集鏁板瓧' + } + ], + maxThreshold: [ + { + required: true, message: '璇疯緭鍏ラ槇鍊间笅闄�' + }, + { + pattern: /^[0-9]+$/, + message: '璇疯緭鍏ラ樋鎷変集鏁板瓧' + } + ] + }, + title: '鎿嶄綔', + visible: false, + model: { + controlSystemType: '', + chineseName: '', + minThreshold: '', + maxThreshold: '' + }, + labelCol: { + xs: { span: 24 }, + sm: { span: 6 } + }, + wrapperCol: { + xs: { span: 24 }, + sm: { span: 15 } + }, + confirmLoading: false, + url: { + userId: '/sys/user/generateUserId' // 寮曞叆鐢熸垚娣诲姞鐢ㄦ埛鎯呭喌涓嬬殑url + }, + paramList: [] + } + }, + created() { + + }, + methods: { + add() { + this.visible = true + this.model = { + controlSystemType: '', + chineseName: '', + minThreshold: '', + maxThreshold: '' + } + this.paramList = [] + this.$nextTick(() => { + this.form.setFieldsValue(pick(this.model, 'controlSystemType', 'chineseName', 'minThreshold', 'maxThreshold')) + }) + }, + + edit(record) { + this.visible = true + this.model = Object.assign({}, record) + api.getParamListByDriveTypeApi(record.controlSystemType) + .then(res => { + if (res.success) { + this.paramList = res.result + } + }) + this.model.chineseName = `${record.englishName}(${record.chineseName})` + this.$nextTick(() => { + this.form.setFieldsValue(pick(this.model, 'controlSystemType', 'chineseName', 'minThreshold', 'maxThreshold')) + }) + }, + + handleSubmit() { + const that = this + // 瑙﹀彂琛ㄥ崟楠岃瘉 + this.$refs.form.validate(valid => { + if (valid) { + if (this.model.maxThreshold > this.model.minThreshold) { + that.confirmLoading = true + let obj + if (this.title == '鏂板') { + obj = api.addParamThresholdApi(this.model) + } else { + obj = api.editParamThresholdApi(this.model) + } + obj.then((res) => { + if (res.success) { + that.$notification.success({ + message: '娑堟伅', + description: res.message + }) + that.$emit('ok') + } else { + that.$notification.warning({ + message: '娑堟伅', + description: res.message + }) + } + }).finally(() => { + that.confirmLoading = false + this.visible = false + }) + } else { + this.$notification.warning({ + message: '娑堟伅', + description: '闃堝�间笂闄愪笉鑳藉皬浜庣瓑浜庨槇鍊间笅闄�' + }) + } + + } else { + return false + } + }) + }, + + /** + * 鑱旀兂杈撳叆妗嗙瓫閫夊姛鑳� + * @param input 杈撳叆鐨勫唴瀹� + * @param option 閰嶇疆 + * @returns {boolean} 鍒ゆ柇鏄惁绛涢�� + */ + filterOption(input, option) { + return ( + option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0 + ) + }, + + /** + * 椹卞姩鍙傛暟绫诲瀷閫変腑鍚庢覆鏌撶浉搴旂殑鍙傛暟鍒楄〃 + * @param value 椹卞姩鍙傛暟绫诲瀷閫変腑椤� + */ + handleDriveTypeChange(value) { + api.getParamListByDriveTypeApi(value) + .then(res => { + if (res.success) { + this.paramList = res.result + this.model.chineseName = res.result.length ? res.result[0].value : '' + if (this.model.chineseName) this.$refs.form.clearValidate('chineseName') + } + }) + }, + + /** + * 缂栬緫鎴栨煡鐪嬭鎯呮暟鎹椂娓呴櫎鎶藉眽琛ㄥ崟楠岃瘉 + */ + removeValidate() { + if (this.$refs.form) this.$refs.form.clearValidate() + } + } + + } +</script> + +<style scoped> + +</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 new file mode 100644 index 0000000..296cba5 --- /dev/null +++ b/src/views/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue @@ -0,0 +1,1538 @@ +<template> + <div ref="wrap" @mouseenter="getModalNode"> + <a-modal + :title="title" + width="70%" + :visible="visible" + :getContainer="() => this.$refs.wrap" + @cancel="handleCancel" + cancelText="鍏抽棴" + wrap-class-name="full-modal" + centered + :closable="false" + :footer="null" + > + <div + id="mdcEquiInfo" + style="padding:1px;" + > + <table + width="100%" + style="border-collapse: separate;border-spacing:0px; color: #fff" + > + <tr> + <td v-if="this.spindlebeilv != null"> + <div + class="mdcEquipMon" + style="width: 250px; height: 200px;margin : 0 auto;padding: 0;" + align="center" + > + 涓昏酱鍊嶇巼 + <div + id="mdcEquiMoniGauge1" + ref="chart1" + style="width: 100%; height: 95%;" + ></div> + </div> + </td> + <td v-if="this.feedbeilv != null"> + <div + class="mdcEquipMon" + style="width: 210px; height: 180px;margin : 0 auto;" + align="center" + > + 杩涚粰鍊嶇巼 + <div + id="mdcEquiMoniGauge2" + ref="chart2" + style="width: 100%; height: 95%;" + ></div> + </div> + </td> + <td v-if="this.spindleload != null"> + <div + class="mdcEquipMon" + style="width: 210px; height: 180px;margin : 0 auto;" + align="center" + >涓昏酱璐熻嵎 + <div + id="mdcEquiMoniGauge3" + ref="mdcEquiMoniGauge3" + style="width: 100%; height: 95%;" + ></div> + </div> + </td> + <td v-if="this.rapidfeed != null"> + <div + class="mdcEquipMon" + style="width: 210px; height: 180px;margin : 0 auto;" + align="center" + >蹇�熻繘缁欏�嶇巼 + <div + id="mdcEquiMoniGauge4" + ref="mdcEquiMoniGauge4" + style="width: 100%; height: 95%;" + ></div> + </div> + </td> + </tr> + <tr> + <td colspan="5"> + <a-descriptions + title="鍩虹淇℃伅" + :column="4" + > + <a-descriptions-item label="璁惧缂栧彿">{{resultData.equipmentID}}</a-descriptions-item> + <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.driveType}}</a-descriptions-item> + <a-descriptions-item label="绯荤粺鍨嬪彿">{{resultData.SystemType}}</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.remark}}</a-descriptions-item> + </a-descriptions> + + <!-- <a-descriptions + title="杩愯鏁版嵁" + v-if="driverType != 'LSV2' && driverType != 'ZUOLAN' " + :column="4" + > + <a-descriptions-item label="涓昏酱鍊嶇巼(%)">{{resultData.spindlebeilv}}</a-descriptions-item> + <a-descriptions-item label="杩涚粰鍊嶇巼(%)">{{resultData.feedbeilv}}</a-descriptions-item> + <a-descriptions-item label="涓昏酱璐熻嵎(%)">{{resultData.spindleload}}</a-descriptions-item> + <a-descriptions-item label="涓昏酱杞��(rpm)">{{resultData.spindlespeed}}</a-descriptions-item> + <a-descriptions-item label="杩涚粰閫熷害(mm/min)">{{resultData.feedrate}}</a-descriptions-item> + </a-descriptions> + + <a-descriptions + title="杩愯鏁版嵁 for lsv2" + v-if="driverType == 'LSV2'" + :column="4" + > + <a-descriptions-item label="涓昏酱鍊嶇巼(%)">{{resultData.spindlebeilv}}</a-descriptions-item> + <a-descriptions-item label="璁惧姝e父杩愯鏃堕棿">{{resultData.equipmentNormalTime}}</a-descriptions-item> + <a-descriptions-item label="蹇�熻繘缁欏�嶇巼(%)">{{resultData.rapidfeed}}</a-descriptions-item> + <a-descriptions-item label="NC姝e父杩愯鏃堕棿">{{resultData.nCNormalTime}}</a-descriptions-item> + <a-descriptions-item label="杩涚粰鍊嶇巼(%)">{{resultData.feedbeilv}}</a-descriptions-item> + <a-descriptions-item label="璁惧杩愯鏃堕棿">{{resultData.equipmentTime}}</a-descriptions-item> + <a-descriptions-item label="褰撳墠鍒�鍏峰彿">{{resultData.toolNum}}</a-descriptions-item> + </a-descriptions> --> + + <!-- <a-descriptions + title="绋嬪簭淇℃伅" + v-if="driverType != 'LSV2' && driverType != 'ZUOLAN' " + :column="4" + > + <a-descriptions-item label="搴忓垪鍙�">{{resultData.sequencenumber}}</a-descriptions-item> + <a-descriptions-item + label="褰撳墠鎵ц浠g爜" + :span="2" + >{{resultData.executingcode}}</a-descriptions-item> + <a-descriptions-item label="宸ヤ欢鍚嶇О">{{resultData.productName}}</a-descriptions-item> + </a-descriptions> --> + + <!-- <a-descriptions + title="绋嬪簭淇℃伅 for lsv2" + v-if="driverType == 'LSV2'" + :column="4" + > + <a-descriptions-item label="褰撳墠绋嬪簭">{{resultData.program}}</a-descriptions-item> + <a-descriptions-item label="绋嬪簭鎵ц鐐�">{{resultData.programPosition}}</a-descriptions-item> + <a-descriptions-item label="鎿嶄綔妯″紡">{{resultData.operationType}}</a-descriptions-item> + <a-descriptions-item label="閿欒淇℃伅缂栧彿涓�">{{resultData.firstErrorNum}}</a-descriptions-item> + <a-descriptions-item label="閿欒淇℃伅涓�">{{resultData.firstError}}</a-descriptions-item> + <a-descriptions-item label="閿欒淇℃伅">{{resultData.errorinfo}}</a-descriptions-item> + <a-descriptions-item label="閿欒淇℃伅缂栧彿浜�">{{resultData.secondErrorNum}}</a-descriptions-item> + <a-descriptions-item label="閿欒淇℃伅浜�">{{resultData.secondError}}</a-descriptions-item> + </a-descriptions> --> + + <!--<a-descriptions + title="杞寸洃鎺ф暟鎹� fro SIEMENS840DSL" + v-if="driverType == 'SIEMENS840DSL'" + :column="4" + > + <a-descriptions-item label="X杞存俯搴�">{{resultData.temperatureX}}</a-descriptions-item> + <a-descriptions-item label="Y杞存俯搴�">{{resultData.temperatureY}}</a-descriptions-item> + <a-descriptions-item label="Z杞存俯搴�">{{resultData.temperatureZ}}</a-descriptions-item> + <a-descriptions-item label="A杞存俯搴�">{{resultData.temperatureA}}</a-descriptions-item> + <a-descriptions-item label="B杞存俯搴�">{{resultData.temperatureB}}</a-descriptions-item> + <a-descriptions-item label="X杞寸數娴�">{{resultData.equipmentCurrentX}}</a-descriptions-item> + <a-descriptions-item label="Y杞寸數娴�">{{resultData.equipmentCurrentY}}</a-descriptions-item> + <a-descriptions-item label="Z杞寸數娴�">{{resultData.equipmentCurrentZ}}</a-descriptions-item> + <a-descriptions-item label="A杞寸數娴�">{{resultData.equipmentCurrentA}}</a-descriptions-item> + <a-descriptions-item label="B杞寸數娴�">{{resultData.equipmentCurrentB}}</a-descriptions-item> + <a-descriptions-item label="X杞撮殢鍔ㄨ宸�">{{resultData.equipmentLagErrorX}}</a-descriptions-item> + <a-descriptions-item label="Y杞撮殢鍔ㄨ宸�">{{resultData.equipmentLagErrorY}}</a-descriptions-item> + <a-descriptions-item label="Z杞撮殢鍔ㄨ宸�">{{resultData.equipmentLagErrorZ}}</a-descriptions-item> + <a-descriptions-item label="A杞撮殢鍔ㄨ宸�">{{resultData.equipmentLagErrorA}}</a-descriptions-item> + <a-descriptions-item label="B杞撮殢鍔ㄨ宸�">{{resultData.equipmentLagErrorB}}</a-descriptions-item> + </a-descriptions> +--> + <!-- <a-descriptions + title="鍧愭爣淇℃伅 " + v-if="driverType == 'FANUC'" + :column="3" + > + <a-descriptions-item label="缁濆鍧愭爣X">{{resultData.xabsolute}}</a-descriptions-item> + <a-descriptions-item label="缁濆鍧愭爣Y">{{resultData.yabsolute}}</a-descriptions-item> + <a-descriptions-item label="缁濆鍧愭爣Z">{{resultData.zabsolute}}</a-descriptions-item> + <a-descriptions-item label="鏈哄簥鍧愭爣X">{{resultData.xmachine}}</a-descriptions-item> + <a-descriptions-item label="鏈哄簥鍧愭爣Y">{{resultData.ymachine}}</a-descriptions-item> + <a-descriptions-item label="鏈哄簥鍧愭爣Z">{{resultData.zmachine}}</a-descriptions-item> + </a-descriptions> + + <a-descriptions + title="鍧愭爣淇℃伅 for lsv2" + v-if="driverType == 'LSV2'" + :column="4" + > + <a-descriptions-item label="X鍧愭爣">{{resultData.xmachine}}</a-descriptions-item> + <a-descriptions-item label="Y鍧愭爣">{{resultData.ymachine}}</a-descriptions-item> + <a-descriptions-item label="Z鍧愭爣">{{resultData.zmachine}}</a-descriptions-item> + <a-descriptions-item label="A鍧愭爣">{{resultData.amachine}}</a-descriptions-item> + <a-descriptions-item label="B鍧愭爣">{{resultData.bmachine}}</a-descriptions-item> + <a-descriptions-item label="C鍧愭爣">{{resultData.cmachine}}</a-descriptions-item> + </a-descriptions> + + <a-descriptions + title="鍧愭爣淇℃伅 for lsv2" + v-if="driverType == 'LSV2'" + :column="4" + > + <a-descriptions-item label="X鍧愭爣">{{resultData.xmachine}}</a-descriptions-item> + <a-descriptions-item label="Y鍧愭爣">{{resultData.ymachine}}</a-descriptions-item> + <a-descriptions-item label="Z鍧愭爣">{{resultData.zmachine}}</a-descriptions-item> + <a-descriptions-item label="A鍧愭爣">{{resultData.amachine}}</a-descriptions-item> + <a-descriptions-item label="B鍧愭爣">{{resultData.bmachine}}</a-descriptions-item> + <a-descriptions-item label="C鍧愭爣">{{resultData.cmachine}}</a-descriptions-item> + </a-descriptions> + + <a-descriptions + title="鍧愭爣淇℃伅" + v-if="driverType == 'LSV2'" + :column="4" + > + <a-descriptions-item label="X鍧愭爣">{{resultData.xmachine}}</a-descriptions-item> + <a-descriptions-item label="Y鍧愭爣">{{resultData.ymachine}}</a-descriptions-item> + <a-descriptions-item label="Z鍧愭爣">{{resultData.zmachine}}</a-descriptions-item> + <a-descriptions-item label="A鍧愭爣">{{resultData.amachine}}</a-descriptions-item> + <a-descriptions-item label="B鍧愭爣">{{resultData.bmachine}}</a-descriptions-item> + <a-descriptions-item label="C鍧愭爣">{{resultData.cmachine}}</a-descriptions-item> + </a-descriptions> --> + <!---鏁版嵁婧愯皟鏁� 鍔ㄦ�佸睍绀� 杩愯鏁版嵁----> + + <a-descriptions + title="杩愯鏁版嵁" + v-show="mdcDriveTypeParamConfigList != null" + v-if="driverType != 'PLC'" + :column="4" + > + + <a-descriptions-item + v-for="(item,id) in mdcDriveTypeParamConfigList " + :key="item.id" + :label="item.chineseName" + >{{item.value}} + </a-descriptions-item> + + </a-descriptions> + + <!--<a-descriptions--> + <!--title="鍧愭爣淇℃伅"--> + <!--v-show="xyzAliasesList != null"--> + <!--v-if="driverType != 'PLC'"--> + <!--:column="4"--> + <!-->--> + <!--<a-descriptions-item--> + <!--v-for="(item,id) in xyzAliasesList "--> + <!--:key="item.id"--> + <!--:label="item.title"--> + <!-->{{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> + + </td> + </tr> + </table> + </div> + <template slot="footer"> + <a-button + :style="{ marginRight: '8px' }" + @click="handleCancel" + style="color: #1191b0;" + >鍏抽棴 + </a-button> + </template> + </a-modal> + </div> +</template> + +<script> + import { + getAction, + postAction + } from '@/api/manage' + import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' + + export default { + name: 'EqumentDetaiModal', + components: {}, + props: {}, + data() { + return { + mdcDriveTypeParamConfigList: [], + xyzAliasesList: [], + title: '', + //涓昏酱鍊嶇巼 + spindlebeilv: 1, + //杩涚粰鍊嶇巼 + feedbeilv: 1, + // 涓昏酱璐熻嵎 + spindleload: 1, + //蹇�熻繘缁欏�嶇巼 + rapidfeed: 1, + visible: false, + resultData: {}, + driverType: '', + deviceTypeDict: '', + url: { + mdcEquipmentDetailedInfo: '/mdc/mdcEquipment/mdcEquipmentDetailedInfo' + }, + modalTimer: null, + ee: ' ', + modalNode: null, + timeout: null + } + }, + mounted() { + + }, + watch: {}, + methods: { + drawLine() { + let _this = this + if (_this.spindlebeilv) { + //鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥 + let mdcEquiMoniGauge1 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge1'), 'macarons') + let mdcEquiMoniGaugeOption1 = { + tooltip: { + formatter: '{a} <br/>{b} : {c}%' + }, + + series: [{ + name: '澶栭儴绾�', + type: 'gauge', + radius: '65%', // 鍔ㄦ�� + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [1, '#31F3FF'] // 鍔ㄦ�� + ], + width: 1 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { //鏍囬 + show: false + } + }, + { + name: '澶栭儴鍒诲害', + type: 'gauge', + radius: '80%', + min: 0, //鏈�灏忓埢搴� + max: 300, //鏈�澶у埢搴� + splitNumber: 10, //鍒诲害鏁伴噺 + startAngle: 225, + endAngle: -45, + axisLine: { + show: false, + lineStyle: { + color: [ + [1, 'rgba(0,0,0,0)'] + ] + } + }, //浠〃鐩樿酱绾� + axisLabel: { + show: true, + color: '#31F3FF', + fontSize: 10, // 鍔ㄦ�� + distance: -20 // 鍔ㄦ�� + + }, //鍒诲害鏍囩銆� + axisTick: { + show: false + }, //鍒诲害鏍峰紡 + splitLine: { + show: false + } + }, + { + name: '鍐呴儴瀹界嚎鏉�', + type: 'gauge', + radius: '55%', + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [1, '#122B3C'] + ], + width: 4 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + } + }, + { + name: '鍐呴儴缁嗙嚎鏉�', + type: 'gauge', + radius: '40%', + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [1, '#122B3C'] + ], + width: 3 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + } + }, + { + name: '闂撮殧鏉″舰', + type: 'gauge', + radius: '52.5%', + z: 4, + splitNumber: 35, + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + opacity: 0 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: true, + length: 20, + splitNumber: 1, + lineStyle: { + color: '#122B3C', + width: 1 + } + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + } + }, + { + name: '鏁版嵁', + type: 'gauge', + radius: '52.5%', + z: 3, + startAngle: 225, + max: 300, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [_this.spindlebeilv / 300, '#31F3FF'], // 鍔ㄦ�� + [1, '#185363'] + ], + width: 4 + } + }, + tooltip: { + show: false + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: true, + fontWeight: 'bold', + fontSize: 12, + color: '#fff' + }, + pointer: { + show: true, + width: 3 + }, + data: [{ + name: '', + value: _this.spindlebeilv + }] + }, + // 鍐呭渾 + { + 'name': '鍐呭渾鐜�', + 'type': 'pie', + 'radius': ['4%', '2%'], + 'hoverAnimation': false, + tooltip: { + show: false + }, + cursor: 'default', + 'labelLine': { + 'normal': { + 'show': false + } + }, + itemStyle: { + color: '#fff' + }, + animation: false, + 'data': [1] + }, + // 鍐呭渾 + { + 'name': '鍐呭渾鐜�2', + 'type': 'pie', + 'radius': '2%', + 'hoverAnimation': false, + cursor: 'default', + tooltip: { + show: false + }, + 'labelLine': { + 'normal': { + 'show': false + } + }, + itemStyle: { + color: '#31F3FF' + }, + animation: false, + 'data': [1] + } + ] + } + mdcEquiMoniGauge1.setOption(mdcEquiMoniGaugeOption1) + } + if (_this.feedbeilv) { + let mdcEquiMoniGauge2 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge2'), 'macarons') + let mdcEquiMoniGaugeOption2 = { + tooltip: { + formatter: '{a} <br/>{b} : {c}%' + }, + + series: [{ + name: '澶栭儴绾�', + type: 'gauge', + radius: '65%', // 鍔ㄦ�� + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [1, '#31F3FF'] // 鍔ㄦ�� + ], + width: 1 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { //鏍囬 + show: false + } + }, + { + name: '澶栭儴鍒诲害', + type: 'gauge', + radius: '80%', + min: 0, //鏈�灏忓埢搴� + max: 300, //鏈�澶у埢搴� + splitNumber: 10, //鍒诲害鏁伴噺 + startAngle: 225, + endAngle: -45, + axisLine: { + show: false, + lineStyle: { + color: [ + [1, 'rgba(0,0,0,0)'] + ] + } + }, //浠〃鐩樿酱绾� + axisLabel: { + show: true, + color: '#31F3FF', + fontSize: 10, // 鍔ㄦ�� + distance: -20 // 鍔ㄦ�� + + }, //鍒诲害鏍囩銆� + axisTick: { + show: false + }, //鍒诲害鏍峰紡 + splitLine: { + show: false + } + }, + { + name: '鍐呴儴瀹界嚎鏉�', + type: 'gauge', + radius: '55%', + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [1, '#122B3C'] + ], + width: 4 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + } + }, + { + name: '鍐呴儴缁嗙嚎鏉�', + type: 'gauge', + radius: '40%', + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [1, '#122B3C'] + ], + width: 3 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + } + }, + { + name: '闂撮殧鏉″舰', + type: 'gauge', + radius: '52.5%', + z: 4, + splitNumber: 35, + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + opacity: 0 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: true, + length: 20, + splitNumber: 1, + lineStyle: { + color: '#122B3C', + width: 1 + } + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + } + }, + { + name: '鏁版嵁', + type: 'gauge', + radius: '52.5%', + z: 3, + startAngle: 225, + max: 300, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [_this.feedbeilv / 300, '#31F3FF'], // 鍔ㄦ�� + [1, '#185363'] + ], + width: 4 + } + }, + tooltip: { + show: false + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: true, + fontWeight: 'bold', + fontSize: 12, + color: '#fff' + }, + pointer: { + show: true, + width: 3 + }, + data: [{ + name: '', + value: _this.feedbeilv + }] + }, + // 鍐呭渾 + { + 'name': '鍐呭渾鐜�', + 'type': 'pie', + 'radius': ['4%', '2%'], + 'hoverAnimation': false, + tooltip: { + show: false + }, + cursor: 'default', + 'labelLine': { + 'normal': { + 'show': false + } + }, + itemStyle: { + color: '#fff' + }, + animation: false, + 'data': [1] + }, + // 鍐呭渾 + { + 'name': '鍐呭渾鐜�2', + 'type': 'pie', + 'radius': '2%', + 'hoverAnimation': false, + cursor: 'default', + tooltip: { + show: false + }, + 'labelLine': { + 'normal': { + 'show': false + } + }, + itemStyle: { + color: '#31F3FF' + }, + animation: false, + 'data': [1] + } + ] + } + mdcEquiMoniGauge2.setOption(mdcEquiMoniGaugeOption2) + } + if (_this.spindleload) { + let mdcEquiMoniGauge3 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge3'), 'macarons') + let mdcEquiMoniGaugeOption3 = { + tooltip: { + formatter: '{a} <br/>{b} : {c}%' + }, + + series: [{ + name: '澶栭儴绾�', + type: 'gauge', + radius: '65%', // 鍔ㄦ�� + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [1, '#31F3FF'] // 鍔ㄦ�� + ], + width: 1 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { //鏍囬 + show: false + } + }, + { + name: '澶栭儴鍒诲害', + type: 'gauge', + radius: '80%', + min: 0, //鏈�灏忓埢搴� + max: 300, //鏈�澶у埢搴� + splitNumber: 10, //鍒诲害鏁伴噺 + startAngle: 225, + endAngle: -45, + axisLine: { + show: false, + lineStyle: { + color: [ + [1, 'rgba(0,0,0,0)'] + ] + } + }, //浠〃鐩樿酱绾� + axisLabel: { + show: true, + color: '#31F3FF', + fontSize: 10, // 鍔ㄦ�� + distance: -20 // 鍔ㄦ�� + + }, //鍒诲害鏍囩銆� + axisTick: { + show: false + }, //鍒诲害鏍峰紡 + splitLine: { + show: false + } + }, + { + name: '鍐呴儴瀹界嚎鏉�', + type: 'gauge', + radius: '55%', + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [1, '#122B3C'] + ], + width: 4 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + } + }, + { + name: '鍐呴儴缁嗙嚎鏉�', + type: 'gauge', + radius: '40%', + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [1, '#122B3C'] + ], + width: 3 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + } + }, + { + name: '闂撮殧鏉″舰', + type: 'gauge', + radius: '52.5%', + z: 4, + splitNumber: 35, + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + opacity: 0 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: true, + length: 20, + splitNumber: 1, + lineStyle: { + color: '#122B3C', + width: 1 + } + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + } + }, + { + name: '鏁版嵁', + type: 'gauge', + radius: '52.5%', + z: 3, + startAngle: 225, + max: 300, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [_this.spindleload / 300, '#31F3FF'], // 鍔ㄦ�� + [1, '#185363'] + ], + width: 4 + } + }, + tooltip: { + show: false + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: true, + fontWeight: 'bold', + fontSize: 12, + color: '#fff' + }, + pointer: { + show: true, + width: 3 + }, + data: [{ + name: '', + value: _this.spindleload + }] + }, + // 鍐呭渾 + { + 'name': '鍐呭渾鐜�', + 'type': 'pie', + 'radius': ['4%', '2%'], + 'hoverAnimation': false, + tooltip: { + show: false + }, + cursor: 'default', + 'labelLine': { + 'normal': { + 'show': false + } + }, + itemStyle: { + color: '#fff' + }, + animation: false, + 'data': [1] + }, + // 鍐呭渾 + { + 'name': '鍐呭渾鐜�2', + 'type': 'pie', + 'radius': '2%', + 'hoverAnimation': false, + cursor: 'default', + tooltip: { + show: false + }, + 'labelLine': { + 'normal': { + 'show': false + } + }, + itemStyle: { + color: '#31F3FF' + }, + animation: false, + 'data': [1] + } + ] + } + mdcEquiMoniGauge3.setOption(mdcEquiMoniGaugeOption3) + } + if (_this.rapidfeed) { + let mdcEquiMoniGauge4 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge4'), 'macarons') + let mdcEquiMoniGaugeOption4 = { + tooltip: { + formatter: '{a} <br/>{b} : {c}%' + }, + + series: [{ + name: '澶栭儴绾�', + type: 'gauge', + radius: '65%', // 鍔ㄦ�� + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [1, '#31F3FF'] // 鍔ㄦ�� + ], + width: 1 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { //鏍囬 + show: false + } + }, + { + name: '澶栭儴鍒诲害', + type: 'gauge', + radius: '80%', + min: 0, //鏈�灏忓埢搴� + max: 300, //鏈�澶у埢搴� + splitNumber: 10, //鍒诲害鏁伴噺 + startAngle: 225, + endAngle: -45, + axisLine: { + show: false, + lineStyle: { + color: [ + [1, 'rgba(0,0,0,0)'] + ] + } + }, //浠〃鐩樿酱绾� + axisLabel: { + show: true, + color: '#31F3FF', + fontSize: 10, // 鍔ㄦ�� + distance: -20 // 鍔ㄦ�� + + }, //鍒诲害鏍囩銆� + axisTick: { + show: false + }, //鍒诲害鏍峰紡 + splitLine: { + show: false + } + }, + { + name: '鍐呴儴瀹界嚎鏉�', + type: 'gauge', + radius: '55%', + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [1, '#122B3C'] + ], + width: 4 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + } + }, + { + name: '鍐呴儴缁嗙嚎鏉�', + type: 'gauge', + radius: '40%', + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [1, '#122B3C'] + ], + width: 3 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + } + }, + { + name: '闂撮殧鏉″舰', + type: 'gauge', + radius: '52.5%', + z: 4, + splitNumber: 35, + startAngle: 225, + endAngle: -45, + axisLine: { + lineStyle: { + opacity: 0 + } + }, + axisLabel: { + show: false + }, + axisTick: { + show: true, + length: 20, + splitNumber: 1, + lineStyle: { + color: '#122B3C', + width: 1 + } + }, + splitLine: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + } + }, + { + name: '鏁版嵁', + type: 'gauge', + radius: '52.5%', + z: 3, + startAngle: 225, + max: 300, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [_this.rapidfeed / 300, '#31F3FF'], // 鍔ㄦ�� + [1, '#185363'] + ], + width: 4 + } + }, + tooltip: { + show: false + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + detail: { + show: true, + fontWeight: 'bold', + fontSize: 12, + color: '#fff' + }, + pointer: { + show: true, + width: 3 + }, + data: [{ + name: '', + value: _this.rapidfeed + }] + }, + // 鍐呭渾 + { + 'name': '鍐呭渾鐜�', + 'type': 'pie', + 'radius': ['4%', '2%'], + 'hoverAnimation': false, + tooltip: { + show: false + }, + cursor: 'default', + 'labelLine': { + 'normal': { + 'show': false + } + }, + itemStyle: { + color: '#fff' + }, + animation: false, + 'data': [1] + }, + // 鍐呭渾 + { + 'name': '鍐呭渾鐜�2', + 'type': 'pie', + 'radius': '2%', + 'hoverAnimation': false, + cursor: 'default', + tooltip: { + show: false + }, + 'labelLine': { + 'normal': { + 'show': false + } + }, + itemStyle: { + color: '#31F3FF' + }, + animation: false, + 'data': [1] + } + ] + } + mdcEquiMoniGauge4.setOption(mdcEquiMoniGaugeOption4) + } + }, + + handleCancel() { + this.$emit('close') + this.visible = false + this.modalNode.removeEventListener('mouseleave', this.closeModal) + if(this.modalTimer){ + clearInterval(this.modalTimer) + this.modalTimer = null + } + if (this.timeout) { + clearTimeout(this.timeout) + this.timeout = null + } + }, + + timerModel(id) { + this.ee = id + this.modalTimer = setInterval(() => { + setTimeout(this.initData(this.ee), 0) + }, 1000 * 4) + }, + + initData(id) { + let _this = this + this.visible = true + // _this.drawLine() + getAction(this.url.mdcEquipmentDetailedInfo, { id: id }).then((res) => { + if (res.success) { + _this.resultData = res.result + _this.driverType = res.result.deviceType + _this.spindlebeilv = res.result.spindlebeilv + _this.feedbeilv = res.result.feedbeilv + _this.spindleload = res.result.spindleload + _this.rapidfeed = res.result.rapidfeed + _this.mdcDriveTypeParamConfigList = res.result.mdcDriveTypeParamConfigList + _this.xyzAliasesList = res.result.xyzAliasesList + this.$nextTick(() => { + _this.drawLine() + }) + // _this.initDeviceType(_this.resultData.deviceType) + } else { + // _this.$message.warn(res.message) + _this.$notification.warning({ + message: '娑堟伅', + description: res.message + }) + } + }) + }, + + 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) + }, + + closeModal() { + this.handleCancel() + } + }, + beforeDestroy() { + clearInterval(this.modalTimer) + this.modalTimer = null + } + } +</script> + +<style scoped lang="less"> + body { + overflow-y: hidden !important; + } + + .full-modal { + .ant-modal { + top: 0; + padding-bottom: 0; + margin: 0; + background-color: #4a4a48 !important; + opacity: 0.5; + } + /deep/ .ant-modal-content { + display: flex; + flex-direction: column; + /*height: calc(100vh);*/ + background-color: #4a4a48; + } + .ant-modal-body { + flex: 1; + } + } + + /deep/ .ant-modal-content { + /*background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.27) 100%);*/ + /*background: -webkit-gradient(linear, left left, right right, color-stop(0%, rgba(0, 0, 0, 0.66)), color-stop(100%, rgba(0, 0, 0, 0.4)));*/ + /*background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ + /*background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ + /*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; + } + + /deep/ .ant-modal-close { + color: #1191b0; + font-size: 24px; + } + + /deep/ .ant-modal-close-x { + font-size: 24px; + } + + /deep/ .ant-modal-footer { + border-top: none; + } + + /deep/ .ant-descriptions { + border: 1px solid #16738d; + margin: 10px 0; + } + + /deep/ .ant-descriptions-title { + color: #fff; + padding: 10px; + margin-bottom: 0; + } + + /deep/ .ant-descriptions-view { + padding: 0 20px; + } + + /deep/ .ant-descriptions-view .ant-descriptions-row .ant-descriptions-item { + padding-bottom: 5px; + } + + /deep/ .ant-descriptions-item-colon { + color: #fff; + width: 5.1vw; + } + + /deep/ .ant-descriptions-item-content { + color: #fff; + border: 1px solid #4bcfc8; + padding: 0 10px; + width: auto; + min-width: 130px; + /*max-width: 300px;*/ + height: 25px; + } + + .mdcEquipMon { + color: #fff; + } + + fieldset { + border: 1px solid #16738d; + padding: 17px; + margin: 14px; + } + + fieldset legend { + display: inline; + width: 88px; + } + + table tr td { + text-align: left; + color: #fff; + } + + table tr td input { + border: 1px solid #a6eff9; + } + + .ant-btn { + padding: 0 10px; + margin-left: 3px; + color: #fff !important; + background-color: #1191b0; + border: none; + } + + .ant-form-item-control { + line-height: 0px; + } + + /** 涓昏〃鍗曡闂磋窛 */ + .ant-form .ant-form-item { + margin-bottom: 10px; + } + + /** Tab椤甸潰琛岄棿璺� */ + .ant-tabs-content .ant-form-item { + margin-bottom: 0px; + } +</style> -- Gitblit v1.9.3