<!--
|
* @Date: 2024-04-18 21:52:18
|
* @LastEditors: 李喆(开发组) lzhe@yxqiche.com
|
* @LastEditTime: 2025-11-18 16:03:27
|
* @FilePath: /cps-web/src/views/mdc/components/StationLiveSpeed.vue
|
-->
|
<template>
|
<div class="speed">
|
<div ref="c" style="width: 30%;height:200px;"></div>
|
<div ref="d" style="width: 30%;height:200px;"></div>
|
<div ref="e" style="width: 30%;height:200px;"></div>
|
</div>
|
<div class="dataHr">加工数据</div>
|
<el-row :gutter="20" style="padding-right: 12px;padding-left: 12px;">
|
<!-- 主轴负载(SpindleLoad),主轴倍率(SpindleRate),进给倍率(FeedRate) 不在这里展示 -->
|
<el-col :span="12" v-for="item in dmpList" style="margin-bottom: 12px;"
|
v-show="item.dpName.toLowerCase() != 'spindleload' && item.dpName.toLowerCase() != 'spindlerate' && item.dpName.toLowerCase() != 'feedrate'">
|
<div>
|
<div class="inlineDiv">{{ item.dpLabel }}</div>
|
<el-input v-model="item.codeName" :disabled="true" class="inlineInput"
|
:title="item.codeName"></el-input>
|
</div>
|
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
export default {
|
props: {
|
dmpList: {
|
default: [],
|
type: Array,
|
}
|
},
|
watch: {
|
dmpList() {
|
this.query();
|
}
|
},
|
components: {
|
|
},
|
data() {
|
return {
|
isspeed: false,
|
input: '',
|
option: {
|
graphic: {
|
type: 'text',
|
enterFrom: {
|
style: { opacity: 0 }// 淡入
|
},
|
enterAnimation: {
|
duration: 1300//动画时长
|
},
|
left: 'center',
|
top: 'bottom',
|
style: {
|
text: [
|
'主轴倍率100.00%',
|
].join('\n'),
|
textAlign: 'center',
|
textVerticalAlign: 'middle',
|
fontSize: 12,
|
fontWeight: 'bold',
|
fill: '#333' // 文字颜色
|
}
|
},
|
series: [
|
{
|
type: 'gauge',
|
axisLine: {
|
lineStyle: {
|
width: 10,
|
color: [
|
[0.3, '#67e0e3'],
|
[0.7, '#37a2da'],
|
[1, '#fd666d']
|
]
|
}
|
},
|
pointer: {
|
itemStyle: {
|
color: 'auto'
|
}
|
},
|
axisTick: { //刻度
|
splitNumber: 5,
|
distance: -10, //刻度与轴线的距离
|
lineStyle: {
|
color: '#fff',
|
width: 2
|
}
|
},
|
splitLine: {
|
distance: -14, //刻度距离表盘的距离
|
length: 10,
|
lineStyle: {
|
color: '#fff',
|
width: 2 //每个锯齿线宽
|
}
|
},
|
axisLabel: { //表盘内刻度
|
color: 'inherit',
|
distance: 20, //刻度距离表盘的距离
|
fontSize: 12
|
},
|
detail: {
|
show: false
|
}
|
}
|
]
|
}
|
}
|
},
|
methods: {
|
query() {
|
if(this.dmpList.length == 0) return;
|
var a,b,c;
|
this.dmpList.forEach(item=> {
|
if(item.dpName.toLowerCase() == "spindleload") {
|
a = item.codeName;
|
}else if(item.dpName.toLowerCase() == "spindlerate") {
|
b = item.codeName;
|
}else if(item.dpName.toLowerCase() == "feedrate") {
|
c = item.codeName;
|
}
|
})
|
this.showCharts(a,b,c);
|
},
|
showCharts(a, b, c) {
|
var myChartA = echarts.init(this.$refs.c);
|
var myChartB = echarts.init(this.$refs.d);
|
var myChartC = echarts.init(this.$refs.e);
|
var optionA = JSON.parse(JSON.stringify(this.option));
|
var optionB = JSON.parse(JSON.stringify(this.option));
|
var optionC = JSON.parse(JSON.stringify(this.option));
|
optionA.graphic.style.text = ['主轴负载' + a + '%',].join('\n');
|
optionB.graphic.style.text = ['主轴倍率' + b + '%',].join('\n');
|
optionC.graphic.style.text = ['进给倍率' + c + '%',].join('\n');
|
optionA.series[0].data = [{ value: a }];
|
optionB.series[0].data = [{ value: b }];
|
optionC.series[0].data = [{ value: c }];
|
myChartA.setOption(optionA);
|
myChartB.setOption(optionB);
|
myChartC.setOption(optionC);
|
|
console.log(this.dmpList,111)
|
}
|
},
|
mounted() {
|
this.showCharts(0, 0, 0);
|
}
|
}
|
</script>
|
|
<style scoped>
|
.speed {
|
display: flex;
|
justify-content: center;
|
}
|
|
.speed>div {
|
flex: 1;
|
}
|
|
.dataHr {
|
background-color: #48ACF8;
|
height: 30px;
|
width: 100%;
|
text-align: center;
|
line-height: 30px;
|
font-size: 13px;
|
color: #fff;
|
font-weight: bold;
|
margin-top: 12px;
|
margin-bottom: 12px;
|
}
|
|
.inlineDiv {
|
display: inline-block;
|
width: 70px;
|
text-align: left;
|
}
|
|
.inlineInput {
|
width: calc(100% - 76px);
|
margin-left: 6px;
|
}
|
</style>
|
