From ce2904335f4a1bc1e538c194bdd3ced484b672f5 Mon Sep 17 00:00:00 2001
From: lzhe <lzhe@example.com>
Date: 星期二, 12 十一月 2024 20:39:52 +0800
Subject: [PATCH] 1
---
src/views/mdc/components/StationLiveSpeed.vue | 66 +++++++++++++++++----------------
1 files changed, 34 insertions(+), 32 deletions(-)
diff --git a/src/views/mdc/components/StationLiveSpeed.vue b/src/views/mdc/components/StationLiveSpeed.vue
index 3f95c96..e26b21b 100644
--- a/src/views/mdc/components/StationLiveSpeed.vue
+++ b/src/views/mdc/components/StationLiveSpeed.vue
@@ -1,24 +1,26 @@
<!--
* @Date: 2024-04-18 21:52:18
* @LastEditors: lzhe lzhe@example.com
- * @LastEditTime: 2024-11-12 20:34:19
- * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/TimeAlarm.vue
+ * @LastEditTime: 2024-11-12 20:39:04
+ * @FilePath: /cps-web/src/views/mdc/components/StationLiveSpeed.vue
-->
<template>
- <div class="speed" v-if="isspeed">
- <div id="c" style="width: 30%;height:200px;"></div>
- <div id="d" style="width: 30%;height:200px;"></div>
- <div id="e" style="width: 30%;height:200px;"></div>
+ <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 != 'SpindleLoad' && item.dpName != 'SpindleRate' && item.dpName != 'FeedRate'">
+ <el-col :span="12" v-for="item in dmpList" style="margin-bottom: 12px;"
+ v-show="item.dpName != 'SpindleLoad' && item.dpName != 'SpindleRate' && item.dpName != 'FeedRate'">
<div>
- <div class="inlineDiv">{{item.dpLabel}}</div>
- <el-input v-model="item.codeName" :disabled="true" class="inlineInput" :title="item.codeName"></el-input>
+ <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>
@@ -38,7 +40,7 @@
}
},
components: {
-
+
},
data() {
return {
@@ -51,7 +53,7 @@
style: { opacity: 0 }// 娣″叆
},
enterAnimation: {
- duration: 1300//鍔ㄧ敾鏃堕暱
+ duration: 1300//鍔ㄧ敾鏃堕暱
},
left: 'center',
top: 'bottom',
@@ -81,7 +83,7 @@
},
pointer: {
itemStyle: {
- color: 'auto'
+ color: 'auto'
}
},
axisTick: { //鍒诲害
@@ -96,8 +98,8 @@
distance: -14, //鍒诲害璺濈琛ㄧ洏鐨勮窛绂�
length: 10,
lineStyle: {
- color: '#fff',
- width: 2 //姣忎釜閿娇绾垮
+ color: '#fff',
+ width: 2 //姣忎釜閿娇绾垮
}
},
axisLabel: { //琛ㄧ洏鍐呭埢搴�
@@ -110,7 +112,7 @@
}
}
]
- }
+ }
}
},
methods: {
@@ -128,30 +130,26 @@
// })
// this.showCharts(a,b,c);
},
- showCharts(a,b,c) {
- var myChartA = echarts.init(document.getElementById('c'));
- var myChartB = echarts.init(document.getElementById('d'));
- var myChartC = echarts.init(document.getElementById('e'));
+ 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}];
+ 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);
}
},
mounted() {
- this.isspeed = true;
- this.$nextTick(()=> {
- this.showCharts(0,0,0);
- })
-
+ this.showCharts(0, 0, 0);
}
}
</script>
@@ -161,9 +159,11 @@
display: flex;
justify-content: center;
}
-.speed > div {
+
+.speed>div {
flex: 1;
}
+
.dataHr {
background-color: #48ACF8;
height: 30px;
@@ -176,11 +176,13 @@
margin-top: 12px;
margin-bottom: 12px;
}
+
.inlineDiv {
display: inline-block;
width: 70px;
text-align: left;
}
+
.inlineInput {
width: calc(100% - 76px);
margin-left: 6px;
--
Gitblit v1.9.3