From 0c85b7c4a6a04c4937234eaf2c82ddeb3b798b1f Mon Sep 17 00:00:00 2001 From: Lius <Lius2225@163.com> Date: 星期二, 15 四月 2025 17:02:09 +0800 Subject: [PATCH] 设备运行数据信息页面修改 --- src/views/mdc/base/modules/DeviceBaseInfo/EquipmentDetailModal.vue | 2658 ++++++++++++++++++++++++++++------------------------------- 1 files changed, 1,261 insertions(+), 1,397 deletions(-) diff --git a/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentDetailModal.vue b/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentDetailModal.vue index 524ca0e..3e1b58a 100644 --- a/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentDetailModal.vue +++ b/src/views/mdc/base/modules/DeviceBaseInfo/EquipmentDetailModal.vue @@ -1,8 +1,7 @@ <template> <div ref="wrap"> <a-modal - :title="title" - width="70%" + width="90%" :visible="visible" :getContainer="() => this.$refs.wrap" @cancel="handleCancel" @@ -74,168 +73,42 @@ </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.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="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.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.equipmentType}}</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'" + v-show="runData" + v-if="resultData.driveType != 'PLC'" :column="4" class="operationData" > <a-descriptions-item - v-for="(item,id) in mdcDriveTypeParamConfigList " + v-for="(item,id) in runData" :key="item.id" - :label="item.chineseName" + :label="item.key" > <a-tooltip @mouseenter="mouseEnterItem"> <template slot="title"> @@ -248,6 +121,23 @@ </a-descriptions> + <a-descriptions + title="鍧愭爣淇℃伅" + v-if="xyzList != null" + :column="5" + > + <a-descriptions-item label="鏈哄簥鍧愭爣X">{{xyzList.xmachine}}</a-descriptions-item> + <a-descriptions-item label="Y">{{xyzList.ymachine}}</a-descriptions-item> + <a-descriptions-item label="Z">{{xyzList.zmachine}}</a-descriptions-item> + <a-descriptions-item label="A">{{xyzList.amachine}}</a-descriptions-item> + <a-descriptions-item label="B">{{xyzList.bmachine}}</a-descriptions-item> + <a-descriptions-item label="缁濆鍧愭爣X">{{xyzList.xabsolute}}</a-descriptions-item> + <a-descriptions-item label="Y">{{xyzList.yabsolute}}</a-descriptions-item> + <a-descriptions-item label="Z">{{xyzList.zabsolute}}</a-descriptions-item> + <a-descriptions-item label="A">{{xyzList.aabsolute}}</a-descriptions-item> + <a-descriptions-item label="B">{{xyzList.babsolute}}</a-descriptions-item> + </a-descriptions> + </td> </tr> </table> @@ -257,1293 +147,1267 @@ :style="{ marginRight: '8px' }" @click="handleCancel" style="color: #1191b0;" - >鍏抽棴</a-button> + >鍏抽棴 + </a-button> </template> </a-modal> </div> </template> <script> - import { - getAction, - postAction - } from '@/api/manage' - import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' +import { + getAction, + postAction +} from '@/api/manage' +import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' - export default { - name: 'EquipmentDetailModal', - 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:" " +export default { + name: 'EquipmentDetailModal', + components: {}, + props: {}, + data() { + return { + runData: [], + // xyzAliasesList: [], + //涓昏酱鍊嶇巼 + spindlebeilv: 0, + //杩涚粰鍊嶇巼 + feedbeilv: 0, + // 涓昏酱璐熻嵎 + spindleload: 0, + //蹇�熻繘缁欏�嶇巼 + rapidfeed: 0, + visible: false, + resultData: {}, + url: { + mdcEquipmentDetailedInfo: '/mdc/mdcEquipment/mdcEquipmentDetailedInfo' + }, + modalTimer: null, + xyzList: null + } + }, + beforeDestroy() { + clearInterval(this.modalTimer) + this.modalTimer = null + }, + 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: false, + 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, + itemStyle: { + color: '#fff' + } + }, + 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: false, + 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, + itemStyle: { + color: '#fff' + } + }, + 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: 100, //鏈�澶у埢搴� + 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: false, + 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: 100, + endAngle: -45, + axisLine: { + lineStyle: { + color: [ + [_this.spindleload / 100, '#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, + itemStyle: { + color: '#fff' + } + }, + 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: false, + 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, + itemStyle: { + color: '#fff' + } + }, + 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) } }, - mounted() { - }, - 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: false, - 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, - itemStyle:{ - color:'#fff', - } - }, - 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: false, - 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, - itemStyle:{ - color:'#fff' - } - }, - 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: 100, //鏈�澶у埢搴� - 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: false, - 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: 100, - endAngle: -45, - axisLine: { - lineStyle: { - color: [ - [_this.spindleload / 100, '#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, - itemStyle:{ - color:'#fff' - } - }, - 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: false, - 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, - itemStyle:{ - color:'#fff' - } - }, - 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) - } - }, - close() { - this.$emit('close') - this.visible = false - clearInterval(this.modalTimer); - this.modalTimer = null - }, - handleCancel() { - this.close() - clearInterval(this.modalTimer); - this.modalTimer = null - }, - // initDeviceType(deviceTypeId) { - // let dictCode = 'mdc_equipmentType' - // let items = [] - // items = getDictItemsFromCache(dictCode) - // if (items && items.length > 0) { - // for (let i = 0; i < items.length; i++) { - // if (deviceTypeId == items[i].value) { - // this.deviceTypeDict = items[i].title - // } - // } - // } else { - // ajaxGetDictItems(dictCode, null).then((res) => { - // if (res.success) { - // let items = res.result - // for (let i = 0; i < items.length; i++) { - // if (deviceTypeId == items[i].value) { - // this.deviceTypeDict = items[i].title - // } - // } - // } - // }) - // } - // }, - 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 - }); - } - }) - - }, - - 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(){ - clearInterval(this.modalTimer); + close() { + this.$emit('close') + this.visible = false + clearInterval(this.modalTimer) this.modalTimer = null + }, + handleCancel() { + this.close() + clearInterval(this.modalTimer) + this.modalTimer = null + }, + timerModel(id) { + this.modalTimer = setInterval(() => { + setTimeout(this.initData(id), 0) + }, 1000 * 4) + }, + + initData(id) { + let _this = this + this.visible = true + getAction(this.url.mdcEquipmentDetailedInfo, { id: id }).then((res) => { + if (res.success) { + _this.resultData = res.result.equipment + _this.spindlebeilv = res.result.spindlebeilv + _this.feedbeilv = res.result.feedbeilv + _this.spindleload = res.result.spindleload + _this.rapidfeed = res.result.rapidfeed + _this.runData = res.result.runData + _this.xyzList = res.result.xyzList + + // _this.xyzAliasesList = res.result.xyzAliasesList + this.$nextTick(() => { + _this.drawLine() + }) + } else { + _this.$notification.warning({ + message: '娑堟伅', + description: res.message + }) + } + }) + + }, + + 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 灞炴�х敤浜庤缃厓绱犳槸鍚﹀榧犳爣浜嬩欢鍋氬嚭鍙嶅簲銆� + } } } +} </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; - } +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 { - /*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.9; + display: flex; + flex-direction: column; + background-color: #4a4a48; } - /deep/ .ant-modal-close { - color: #1191b0; - font-size: 24px; + .ant-modal-body { + flex: 1; } - /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; - } +/deep/ .ant-modal-content { + background-color: #312c2c; + opacity: 0.9; +} - fieldset legend { - display: inline; - width: 88px; - } +/deep/ .ant-modal-close { + color: #1191b0; + font-size: 24px; +} - table tr td { - text-align: left; - color: #fff; - } +/deep/ .ant-modal-close-x { + font-size: 24px; +} - table tr td input { - border: 1px solid #a6eff9; - } +/deep/ .ant-modal-footer { + border-top: none; +} - .ant-btn { - padding: 0 10px; - margin-left: 3px; - color: #fff !important; - background-color: #1191b0; - border: none; - } +/deep/ .ant-descriptions { + border: 1px solid #16738d; + margin: 10px 0; +} - .ant-form-item-control { - line-height: 0px; - } +/deep/ .ant-descriptions-title { + color: #fff; + padding: 10px; + margin-bottom: 0; +} - /** 涓昏〃鍗曡闂磋窛 */ - .ant-form .ant-form-item { - margin-bottom: 10px; - } +/deep/ .ant-descriptions-view { + padding: 0 20px; +} - /** Tab椤甸潰琛岄棿璺� */ - .ant-tabs-content .ant-form-item { - margin-bottom: 0px; - } +/deep/ .ant-descriptions-view .ant-descriptions-row .ant-descriptions-item { + padding-bottom: 5px; +} - /deep/ .ant-descriptions-item-label{ - width: 6.7vw; - text-align: right; - margin-right: 10px; - } +/deep/ .ant-descriptions-item-colon { + color: #fff; + width: 5.1vw; +} - /deep/ .operationData .ant-descriptions-item-content - { - width: 130px; - overflow: hidden; - } +/deep/ .ant-descriptions-item-content { + color: #fff; + border: 1px solid #4bcfc8; + padding: 0 10px; + width: auto; + min-width: 130px; + /*max-width: 300px;*/ + height: 25px; +} - .description-item-class{ - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } +.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; +} + +/deep/ .ant-descriptions-item-label { + width: 6.7vw; + text-align: right; + margin-right: 10px; +} + +/deep/ .operationData .ant-descriptions-item-content { + width: 130px; + overflow: hidden; +} + +.description-item-class { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} </style> -- Gitblit v1.9.3