From 7fe18e1be6ef108277fa628db35c63c74d77b75e Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期四, 31 十月 2024 16:51:13 +0800
Subject: [PATCH] 分控车间看板新增点击设备图片弹出设备信息弹窗
---
src/views/mdc/base/SubControlWorkshopSignage.vue | 55 +
src/views/mdc/base/modules/SubControlWorkshopSignage/EquipmentDetailModal.vue | 1361 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 1,396 insertions(+), 20 deletions(-)
diff --git a/src/views/mdc/base/SubControlWorkshopSignage.vue b/src/views/mdc/base/SubControlWorkshopSignage.vue
index 10d2242..40fcfcb 100644
--- a/src/views/mdc/base/SubControlWorkshopSignage.vue
+++ b/src/views/mdc/base/SubControlWorkshopSignage.vue
@@ -80,7 +80,8 @@
<div class="device-container">
<div class="single-device-container" v-for="item in equipmentStatusList" :key="item.id"
- :style="{marginRight:isDeviceContinuous(currentProductionInfo.productionOrder)?'':'5%'}">
+ :style="{marginRight:isDeviceContinuous(currentProductionInfo.productionOrder)?'':'5%'}"
+ @click="openDetail(item)">
<div class="status-image-container">
<img src="@/assets/page/subControlWorkshopSignage/grey.png" v-if="item.oporation===0">
<img src="@/assets/page/subControlWorkshopSignage/green.png" v-if="item.oporation===3">
@@ -90,7 +91,7 @@
<div class="device-image-container">
<img :src="require('@/assets/page/subControlWorkshopSignage/'+item.equipmentId+'.png')">
</div>
- 1
+ {{item.equipmentId}}
<div class="device-name">
{{item.equipmentName}}
</div>
@@ -146,6 +147,8 @@
<SignageModal :todayProductionPlanList="todayProductionPlanList" :modalVisible="modalVisible"
@closeModal="modalVisible=false"/>
+
+ <EquipmentDetailModal ref="equipmentDetailModal"/>
</div>
</template>
@@ -153,10 +156,11 @@
import moment from 'moment'
import api from '@/api/mdc'
import SignageModal from './modules/SubControlWorkshopSignage/SignageModal'
+ import EquipmentDetailModal from './modules/SubControlWorkshopSignage/EquipmentDetailModal'
export default {
name: 'SubControlWorkshopSignage',
- components: { SignageModal },
+ components: { EquipmentDetailModal, SignageModal },
data() {
return {
currentProductionInfo: {
@@ -204,22 +208,22 @@
// ],
todayProductionPlanList: [],
equipmentStatusList: [
- {
- oporation: 0,
- equipmentId: '5045-7076'
- },
- {
- oporation: 3,
- equipmentId: '5068-7005'
- },
- {
- oporation: 22,
- equipmentId: '5045-7157'
- },
- {
- oporation: 2,
- equipmentId: '5045-7815'
- }
+ // {
+ // oporation: 0,
+ // equipmentId: '5045-7076'
+ // },
+ // {
+ // oporation: 3,
+ // equipmentId: '5068-7005'
+ // },
+ // {
+ // oporation: 22,
+ // equipmentId: '5045-7157'
+ // },
+ // {
+ // oporation: 2,
+ // equipmentId: '5045-7815'
+ // }
],
// toolLife: {
// brandList: ['鍖楅綈浜�', '閾� 闀�', '妫� 浜�', '涓� 鏇�', '瑗� 鏇�', '瑗� 寰�', '涓� 寰�'],
@@ -412,8 +416,18 @@
})
},
- clickToLoadMore() {
+ openDetail(item) {
+ if (item.oporation == 0) {
+ this.$notification.warning({
+ message: '娑堟伅',
+ description: '璁惧澶勪簬鍏虫満鐘舵�侊紒'
+ })
+ return false
+ }
+ console.log(item)
+ this.$refs.equipmentDetailModal.initData(item.equipmentId)
+ this.$refs.equipmentDetailModal.timerModel(item.equipmentId)
},
getEquipmentStatusByApi() {
@@ -552,6 +566,7 @@
align-items: center;
padding-top: 2%;
font-size: 1vw;
+ cursor: pointer;
.status-image-container {
height: 20%;
diff --git a/src/views/mdc/base/modules/SubControlWorkshopSignage/EquipmentDetailModal.vue b/src/views/mdc/base/modules/SubControlWorkshopSignage/EquipmentDetailModal.vue
new file mode 100644
index 0000000..3ec4b6b
--- /dev/null
+++ b/src/views/mdc/base/modules/SubControlWorkshopSignage/EquipmentDetailModal.vue
@@ -0,0 +1,1361 @@
+<template>
+ <div ref="wrap">
+ <a-modal
+ title=""
+ width="65%"
+ :visible="visible"
+ :getContainer="() => this.$refs.wrap"
+ @cancel="handleCancel"
+ cancelText="鍏抽棴"
+ wrap-class-name="full-modal"
+ centered
+ >
+ <div id="mdcEquiInfo">
+ <div class="equipment-info">
+ <div>璁惧鍚嶇О锛歿{resultData.equipmentName}}</div>
+ <div>鏈�澶ц酱鏁帮細{{resultData.maxAxis}}</div>
+ <div>鏈夋晥杞存暟锛歿{resultData.validAxis}}</div>
+ <div>璁惧鍨嬪彿锛歿{resultData.equipmentModel|isValueNull}}</div>
+ <div>璁惧IP锛歿{resultData.equipmentIp|isValueNull}}</div>
+ </div>
+ <div class="charts-container">
+ <div class="mdcEquipMon" v-if="this.spindlebeilv != null">
+ <div id="mdcEquiMoniGauge1" ref="chart1"></div>
+ 涓昏酱鍊嶇巼
+ </div>
+ <div class="mdcEquipMon" v-if="this.feedbeilv != null">
+ <div id="mdcEquiMoniGauge2" ref="chart2"></div>
+ 杩涚粰鍊嶇巼
+ </div>
+ <div class="mdcEquipMon" v-if="this.spindleload != null">
+ <div id="mdcEquiMoniGauge3" ref="mdcEquiMoniGauge3"></div>
+ 涓昏酱璐熻嵎
+ </div>
+ <!--<div class="mdcEquipMon" v-if="this.rapidfeed != null">-->
+ <!--<div id="mdcEquiMoniGauge4" ref="mdcEquiMoniGauge4"></div>-->
+ <!--蹇�熻繘缁欏�嶇巼-->
+ <!--</div>-->
+ </div>
+ <div class="speed-container">
+ <div>涓昏酱杞�燂細{{resultData.spindlespeed}}(mm/min)</div>
+ <div>杩涚粰閫熷害锛歿{resultData.feedrate}}(mm/rev)</div>
+ </div>
+ <div class="other-info">
+ <div class="process-info">
+ <div class="info-title">鍔犲伐淇℃伅</div>
+ <div class="info-value-container">
+ <div>杩愯妯″紡锛歿{resultData.runModble|isValueNull}}</div>
+ <div>鍔犲伐鐘舵�侊細{{resultData.workstate|isValueNull}}</div>
+ <div>鎬ュ仠鐘舵�侊細{{resultData.emergency|isValueNull}}</div>
+ <div>鏁版帶绯荤粺鍨嬪彿锛歿{resultData.controlsystem|isValueNull}}</div>
+ <div>鍒�鍏峰彿锛歿{resultData.toolNum|isValueNull}}</div>
+ </div>
+ </div>
+
+ <div class="program-info">
+ <div class="info-title">绋嬪簭淇℃伅</div>
+ <div class="info-value-container">
+ <div>鎵ц浠ｇ爜锛歿{resultData.executingcode|isValueNull}}</div>
+ <div>绋嬪簭鍙凤細{{resultData.sequencenumber|isValueNull}}</div>
+ <div>瀛愮▼搴忓彿锛歿{resultData.productName|isValueNull}}</div>
+ </div>
+ </div>
+
+ <div class="axis-info">
+ <div class="info-title">杞翠俊鎭�</div>
+ <div class="info-value-container">
+ <table>
+ <tr>
+ <td>杞�</td>
+ <td>缁濆鍧愭爣</td>
+ <td>鏈哄簥鍧愭爣</td>
+ <td>鐩稿鍧愭爣</td>
+ <td>杞存俯搴�</td>
+ <td>浼烘湇璺熼殢璇樊</td>
+ </tr>
+ <tr v-for="(item,index) in xyzAliasesList" :key="index">
+ <td> {{item.axisType}} </td>
+ <td>{{item.absolute}}</td>
+ <td>{{item.machine}}</td>
+ <td>{{item.relative}}</td>
+ <td>{{item.temperature}}</td>
+ <td>{{item.lag}}</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ </div>
+ </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'
+
+ export default {
+ name: 'EquipmentDetailModal',
+ components: {},
+ props: {},
+ data() {
+ return {
+ xyzAliasesList: [],
+ //涓昏酱鍊嶇巼
+ spindlebeilv: 1,
+ //杩涚粰鍊嶇巼
+ feedbeilv: 1,
+ // 涓昏酱璐熻嵎
+ spindleload: 1,
+ //蹇�熻繘缁欏�嶇巼
+ rapidfeed: 1,
+ visible: false,
+ resultData: {},
+ driverType: '',
+ deviceTypeDict: '',
+ url: {
+ mdcEquipmentDetailedInfo: '/mdc/subLargeScreen/equipmentInfo'
+ },
+ modalTimer: null
+ }
+ },
+ mounted() {
+ },
+ filters: {
+ isValueNull(value) {
+ return value ? value : '鏃�'
+ }
+ },
+ methods: {
+ drawLine() {
+ let _this = this
+ if (_this.spindlebeilv) {
+ //鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ let mdcEquiMoniGauge1 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge1'), 'macarons')
+ console.log('spindlebeilv', _this.spindlebeilv)
+ 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)
+ // }
+ },
+
+ initData(equipmentId) {
+ let _this = this
+ this.visible = true
+ // _this.drawLine()
+ getAction(this.url.mdcEquipmentDetailedInfo, { equipmentId: equipmentId }).then((res) => {
+ if (res.success) {
+ console.log('res=', res.result)
+ _this.resultData = res.result
+ _this.driverType = res.result.controlsystem
+ _this.spindlebeilv = res.result.spindlebeilv
+ _this.feedbeilv = res.result.feedbeilv
+ _this.spindleload = res.result.spindleload
+ // _this.rapidfeed = res.result.rapidfeed
+ _this.xyzAliasesList = res.result.xyzDtoList
+ this.$nextTick(() => {
+ _this.drawLine()
+ })
+ } else {
+ _this.$notification.warning({
+ message: '娑堟伅',
+ description: res.message
+ })
+ }
+ })
+
+ },
+
+ handleCancel() {
+ this.$emit('close')
+ this.visible = false
+ clearInterval(this.modalTimer)
+ this.modalTimer = null
+ },
+
+ timerModel(equipmentId) {
+ this.modalTimer = setInterval(() => {
+ setTimeout(this.initData(equipmentId), 0)
+ }, 1000 * 4)
+ },
+
+ 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)
+ this.modalTimer = null
+ }
+ }
+</script>
+
+
+<style scoped lang="less">
+ body {
+ overflow-y: hidden !important;
+ }
+
+ #mdcEquiInfo {
+ color: #fff;
+ font-size: 18px;
+ .equipment-info {
+ display: flex;
+ justify-content: space-between;
+ padding: 0 50px;
+ }
+
+ .charts-container {
+ display: flex;
+ margin: 20px 0;
+ .mdcEquipMon {
+ width: 250px;
+ height: 200px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ & > div {
+ width: 100%;
+ flex: 1;
+ }
+ }
+ }
+
+ .speed-container {
+ display: flex;
+ justify-content: space-evenly;
+ margin: 25px 0;
+ }
+
+ .other-info {
+ height: 300px;
+ display: flex;
+ justify-content: space-between;
+ & > div {
+ border: 2px solid #EFEFAB;
+ border-radius: 12px;
+ padding: 25px;
+ display: flex;
+ flex-direction: column;
+
+ .info-title {
+ color: #EFEFAB;
+ text-align: center;
+ font-size: 25px;
+ border-bottom: 1px solid #EFEFAB;
+ padding-bottom: 10px;
+ }
+
+ .info-value-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ padding: 10px 0 0 20px;
+
+ .overflow-container {
+ width: 200px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ table {
+ td {
+ text-align: center;
+ }
+ }
+ }
+ }
+ }
+
+ .process-info {
+ flex: 0.22;
+ }
+
+ .program-info {
+ flex: 0.3;
+ }
+
+ .axis-info {
+ flex: 0.45;
+ }
+ }
+
+ /deep/ .ant-modal-body {
+ padding-bottom: 0;
+ }
+
+ /deep/ .ant-modal-content {
+ background-color: #312c2c;
+ opacity: 0.9;
+ }
+
+ /deep/ .ant-modal-close {
+ color: #1191b0;
+ font-size: 24px;
+ }
+
+ /deep/ .ant-modal-close-x {
+ font-size: 24px;
+ }
+
+ /deep/ .ant-modal-footer {
+ border-top: none;
+ }
+
+ .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