From 4bfe87304988cfa2338bb58210ee227b917a9247 Mon Sep 17 00:00:00 2001
From: whycwx <1272078254@qq.com>
Date: 星期四, 22 七月 2021 14:12:43 +0800
Subject: [PATCH] 动图
---
src/pages/testedMotor/testedMotor.vue | 4
src/pages/monitoring/js/diagramStates.js | 159 +++++++++++++++++++++++++++++++
src/pages/monitoring/js/gridCircuitDiagram.js | 6
src/pages/monitoring/intoLineMonitoring.vue | 19 ++-
src/pages/dcSwitchboard/dcSwitchboard.vue | 4
src/pages/dynamometerMmotor/dynamometerMmotor.vue | 34 ++++++
src/pages/testedMotor/js/gridCircuitDiagram.js | 4
src/pages/dynamometerMmotor/js/gridCircuitDiagram.js | 29 +++++
src/pages/dcSwitchboard/js/gridCircuitDiagram.js | 12 +-
9 files changed, 241 insertions(+), 30 deletions(-)
diff --git a/src/pages/dcSwitchboard/dcSwitchboard.vue b/src/pages/dcSwitchboard/dcSwitchboard.vue
index 48c8244..5825a78 100644
--- a/src/pages/dcSwitchboard/dcSwitchboard.vue
+++ b/src/pages/dcSwitchboard/dcSwitchboard.vue
@@ -12,9 +12,9 @@
<div class="content_top">
<p class="title_into">褰撳墠杩愯鎯呭喌</p>
<el-form ref="form" label-width="150px">
- <el-form-item label="澶у姛鐜囨暣娴佺數婧愶細">
+ <!-- <el-form-item label="澶у姛鐜囨暣娴佺數婧愶細">
<el-input size="mini" v-model="formData.thisInfo.dglzldy" style="width:210px"></el-input>
- </el-form-item>
+ </el-form-item> -->
<el-form-item label="寮�鍏崇姸鎬侊細">
<el-input size="mini" v-model="formData.thisInfo.kgzt" style="width:210px"></el-input>
</el-form-item>
diff --git a/src/pages/dcSwitchboard/js/gridCircuitDiagram.js b/src/pages/dcSwitchboard/js/gridCircuitDiagram.js
index dfc61d3..8d421ac 100644
--- a/src/pages/dcSwitchboard/js/gridCircuitDiagram.js
+++ b/src/pages/dcSwitchboard/js/gridCircuitDiagram.js
@@ -101,7 +101,7 @@
lineWidth: lineWidth,
points: [
[line5[0][0], line5[0][1]],
- [line3[1][0] - 10, line3[1][1]]
+ [line3[1][0], line3[1][1]]
]
});
let line7 = diagram.line({
@@ -224,7 +224,7 @@
lineWidth: lineWidth,
points: [
[line16[0][0], line16[0][1]],
- [line15[1][0] - 10, line15[1][1]]
+ [line15[1][0], line15[1][1]]
]
});
// 鍙宠竟寮�濮嬬嚎鏉�
@@ -299,7 +299,7 @@
lineWidth: lineWidth,
points: [
[line22[0][0], line22[0][1]],
- [line21[1][0] - 10, line21[1][1]]
+ [line21[1][0], line21[1][1]]
]
});
//
@@ -370,7 +370,7 @@
lineWidth: lineWidth,
points: [
[line25B[0][0], line25B[0][1]],
- [line4[1][0] - 10, line4[1][1]]
+ [line4[1][0], line4[1][1]]
]
});
let line27 = diagram.line({
@@ -493,7 +493,7 @@
lineWidth: lineWidth,
points: [
[line36[0][0], line36[0][1]],
- [line35[1][0] - 10, line35[1][1]]
+ [line35[1][0], line35[1][1]]
]
});
// 鍙宠竟寮�濮嬬嚎鏉�
@@ -568,7 +568,7 @@
lineWidth: lineWidth,
points: [
[line42[0][0], line42[0][1]],
- [line41[1][0] - 10, line41[1][1]]
+ [line41[1][0], line41[1][1]]
]
});
//
diff --git a/src/pages/dynamometerMmotor/dynamometerMmotor.vue b/src/pages/dynamometerMmotor/dynamometerMmotor.vue
index a143113..099dbc0 100644
--- a/src/pages/dynamometerMmotor/dynamometerMmotor.vue
+++ b/src/pages/dynamometerMmotor/dynamometerMmotor.vue
@@ -8,9 +8,9 @@
<el-form-item label="鍙楄瘯鐢垫満鐘舵�侊細">
<el-input size="mini" v-model="formData.thisInfo.ssdjzt" style="width:65px"></el-input>
</el-form-item>
- <el-form-item label="鐩存祦璋冮�熸煖锛�">
+ <!-- <el-form-item label="鐩存祦璋冮�熸煖锛�">
<el-input size="mini" v-model="formData.thisInfo.zltsg" style="width:65px"></el-input>
- </el-form-item>
+ </el-form-item> -->
<el-form-item label="鍙楄瘯渚ц酱鑱斿櫒锛�">
<el-input size="mini" v-model="formData.thisInfo.ssczlq" style="width:65px"></el-input>
@@ -82,11 +82,12 @@
</div>
<div class="left_Box">
<!-- <div class="tipTitle">AFE鍙橀椹卞姩鏌滅洃鎺�</div> -->
- <div class="content_cent canvs_box">
+ <div class="content_cent canvs_box" style="position:relative;">
<div class="diagram-content">
<div class="diagram-stc" ref="static"></div>
<div class="diagram-flush" ref="flush"></div>
</div>
+ <abs-panel class="diagramPanel2" title="鍙楄瘯鐢垫満" :list="underTestMotor"></abs-panel>
</div>
<div class="content_bottom list_box">
<p class="title_into">鎶ヨ鎯呭喌</p>
@@ -120,6 +121,7 @@
import getWsUrl from "@/assets/js/getWsUrl";
import * as echarts from 'echarts';
import gridCircuitDiagram from '@/pages/dynamometerMmotor/js/gridCircuitDiagram'
+import absPanel from '@/components/smallModule/absPanel.vue';
let diagram;
export default {
chart: {},
@@ -127,6 +129,27 @@
return {
isOpen:false,
tableData:[],
+ underTestMotor: [{
+ label: '鐢靛帇锛�',
+ value: 690,
+ unit: "V",
+ },
+ {
+ label: '棰戠巼锛�',
+ value: 44.5,
+ unit: "Hz",
+ },
+ {
+ label: '杞�燂細',
+ value: 89,
+ unit: "r/min",
+ },
+ {
+ label: '杈撳嚭鍔熺巼:',
+ value: 980,
+ unit: "kW",
+ },
+ ],
formData:{
thisInfo:{
ssdjzt:"杩愯涓�",
@@ -154,6 +177,7 @@
}
},
components:{
+ absPanel
// ContentBox
},
mounted() {
@@ -637,4 +661,8 @@
.list_box{
height: 33.5%;
}
+.diagramPanel2 {
+ left: 350px;
+ top: 230px;
+}
</style>
\ No newline at end of file
diff --git a/src/pages/dynamometerMmotor/js/gridCircuitDiagram.js b/src/pages/dynamometerMmotor/js/gridCircuitDiagram.js
index 43f8418..a1f6ee9 100644
--- a/src/pages/dynamometerMmotor/js/gridCircuitDiagram.js
+++ b/src/pages/dynamometerMmotor/js/gridCircuitDiagram.js
@@ -35,7 +35,7 @@
lineWidth: lineWidth,
points: [
[line1[1][0],line1[1][1]],
- [line1[1][0]+260, line1[1][1]]
+ [line1[1][0]+200, line1[1][1]]
]
});
@@ -45,7 +45,7 @@
lineWidth: lineWidth,
points: [
[line2[1][0]+2,line2[1][1]],
- [line2[1][0]+130, line2[1][1]]
+ [line2[1][0]+190, line2[1][1]]
]
});
let line4 = diagram.line({
@@ -174,7 +174,7 @@
fillStyle: '#1e9ff2',
fontSize: 12,
fontWidth:1,
- point:[line1[0][0]+30,line1[0][1]+50],
+ point:[line1[0][0]+20,line1[0][1]+50],
showPanel: false,
});
@@ -330,6 +330,29 @@
point:[Image6.top[0]-30,Image6.top[1]-15],
showPanel: false,
});
+
+ // let text12 = diagram.text({
+ // id: "text12",
+ // text: '&鐢靛帇锛�690V&棰戠巼锛�44.5Hz&杞�燂細89r/min&杈撳嚭鍔熺巼锛�980kW',
+ // fillStyle: '#ffffff',
+ // fontSize: 12,
+ // fontWidth:1,
+ // point:[Image3.top[0]+50,Image3.top[1]-160],
+ // showPanel: false,
+ // type:true,
+ // radBorder: true,
+ // bgColor:"rgba(2, 151, 215, 0.3)",
+ // borderColor:"rgba(30, 159, 242, 1)"
+ // });
+ // let text13 = diagram.text({
+ // id: "text13",
+ // text: ' 鍙楀姛鐢垫満',
+ // fillStyle: "#ffff18",
+ // fontSize: 12,
+ // fontWidth:1,
+ // point:[Image3.top[0]+50,Image3.top[1]-160],
+ // showPanel: false,
+ // });
//
diff --git a/src/pages/monitoring/intoLineMonitoring.vue b/src/pages/monitoring/intoLineMonitoring.vue
index 939ef4e..a2ab130 100644
--- a/src/pages/monitoring/intoLineMonitoring.vue
+++ b/src/pages/monitoring/intoLineMonitoring.vue
@@ -19,9 +19,9 @@
<el-form-item label="璐熻浇鐘舵�侊細">
<el-input size="mini" v-model="formData.thisInfo.fzzt" style="width:160px"></el-input>
</el-form-item>
- <el-form-item label="澶у姛鐜囨暣娴佺數婧愶細">
+ <!-- <el-form-item label="澶у姛鐜囨暣娴佺數婧愶細">
<el-input size="mini" v-model="formData.thisInfo.dglzldy" style="width:160px"></el-input>
- </el-form-item>
+ </el-form-item> -->
</el-form>
</div>
<div class="content_cent">
@@ -134,7 +134,7 @@
import * as echarts from 'echarts';
// import ContentBox from "@/components/ContentBox";
import gridCircuitDiagram from '@/pages/monitoring/js/gridCircuitDiagram'
-// import diagramStates from '@/pages/home/topoGraphdiagram/js/diagramStates'
+import diagramStates from '@/pages/monitoring/js/diagramStates'
let diagram;
export default {
chart: {},
@@ -173,6 +173,7 @@
mounted() {
let self = this;
diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
+ diagramStates(diagram, 'run1');
self.initEcharts();
self.openSocket();
},
@@ -209,17 +210,17 @@
if(result.code == 1){
this.isOpen = true;
// 琛ㄥ崟璧嬪��
- self.formData.thisInfo.cxFivePanelCurr = result.data.screenRTList[0].panelCurr + "A";
+ self.formData.thisInfo.cxFivePanelCurr = result.data.screenRTList[0].panelCurr + "V/AC";
self.echartsList[0].echartsCurr.push(result.data.screenRTList[0].panelCurr);
- self.formData.thisInfo.cxFivePanelVol = result.data.screenRTList[0].panelVol + "V";
+ self.formData.thisInfo.cxFivePanelVol = result.data.screenRTList[0].panelVol + "A";
self.echartsList[0].echartsVol.push(result.data.screenRTList[0].panelVol);
- self.formData.thisInfo.cxOnePanelVol = result.data.screenRTList[2].panelVol + "V";
+ self.formData.thisInfo.cxOnePanelVol = result.data.screenRTList[2].panelVol + "A";
self.echartsList[1].echartsCurr.push(result.data.screenRTList[2].panelCurr);
self.echartsList[1].echartsVol.push(result.data.screenRTList[2].panelVol);
- self.formData.thisInfo.cxTwoPanelVol = result.data.screenRTList[3].panelVol + "V";
+ self.formData.thisInfo.cxTwoPanelVol = result.data.screenRTList[3].panelVol + "A";
self.echartsList[2].echartsCurr.push(result.data.screenRTList[3].panelCurr);
self.echartsList[2].echartsVol.push(result.data.screenRTList[3].panelVol);
@@ -228,8 +229,8 @@
- self.formData.thisInfo.volA = result.data.dcMainBoard.volA + "V";
- self.formData.thisInfo.volB = result.data.dcMainBoard.volB + "V";
+ self.formData.thisInfo.volA = result.data.dcMainBoard.volA + "V/AC";
+ self.formData.thisInfo.volB = result.data.dcMainBoard.volB + "V/AC";
self.formData.thisInfo.currA = result.data.dcMainBoard.currA + "A";
self.formData.thisInfo.currB = result.data.dcMainBoard.currB + "A";
}
diff --git a/src/pages/monitoring/js/diagramStates.js b/src/pages/monitoring/js/diagramStates.js
new file mode 100644
index 0000000..17e8e3a
--- /dev/null
+++ b/src/pages/monitoring/js/diagramStates.js
@@ -0,0 +1,159 @@
+// 鍩虹閰嶇疆
+let springGreen = "#50cef5";
+let red = "#b370fe";
+let scalcRadius = 3;
+// 鏀剧數鐘舵��
+function diagramStates(diagram, type) {
+ // 鏂紑鎵�鏈夌殑寮�鍏�
+ // diagram.setOption('km1', 'state', false);
+ // diagram.setOption('km2', 'state', false);
+ // diagram.setOption('km3', 'state', false);
+ // diagram.setOption('km4', 'state', false);
+ // 娓呴櫎鐢垫祦
+ // diagram.del(/^line.*dot$/);
+ if (type == "run1") {
+ run1Charge(diagram);
+ // run2Charge(diagram);
+ // run3Charge(diagram);
+ }
+
+ if (type == "run2") {
+ run2Charge(diagram);
+ }
+
+ if (type == "run3") {
+ run3Charge(diagram);
+ }
+}
+
+// 杩愯鐘舵��1
+function run1Charge(diagram) {
+ // 绾挎潯1
+ let line1 = diagram.getOption('line3').points;
+ // 绾挎潯2
+ let line2 = diagram.getOption('line2').points;
+ diagram.moveDot({
+ id: 'line1_dot',
+ fillStyle: springGreen,
+ strokeStyle: springGreen,
+ radius: scalcRadius,
+ flush: true,
+ points: [line1[0], line2[0]],
+ });
+ // 绾挎潯3
+ let line3 = diagram.getOption('line5').points;
+ diagram.moveDot({
+ id: 'line2_dot',
+ fillStyle: springGreen,
+ strokeStyle: springGreen,
+ radius: scalcRadius,
+ flush: true,
+ points: [line2[0], line3[1]],
+ });
+ //绾挎潯4
+ let line4 = diagram.getOption('line6').points;
+ diagram.moveDot({
+ id: 'line3_dot',
+ fillStyle: springGreen,
+ strokeStyle: springGreen,
+ radius: scalcRadius,
+ flush: true,
+ points: [line3[0], line4[1]],
+ });
+ // 绾挎潯5
+ let line5 = diagram.getOption('line12').points;
+ diagram.moveDot({
+ id: 'line4_dot',
+ fillStyle: springGreen,
+ strokeStyle: springGreen,
+ radius: scalcRadius,
+ flush: true,
+ points: [line4[1], line5[1]],
+ });
+ // 绾挎潯6
+ let line6 = diagram.getOption('line13').points;
+ diagram.moveDot({
+ id: 'line5_dot',
+ fillStyle: springGreen,
+ strokeStyle: springGreen,
+ radius: scalcRadius,
+ flush: true,
+ points: [line5[1], line6[1]],
+ });
+}
+
+// 杩愯鐘舵��2
+function run2Charge(diagram) {
+
+ // // 绾挎潯3
+ // let line3 = diagram.getOption('line3').points;
+ // // 绾挎潯4
+ // let line4 = diagram.getOption('line4').points;
+ // diagram.moveDot({
+ // id: 'line3_dot',
+ // fillStyle: springGreen,
+ // strokeStyle: springGreen,
+ // radius: scalcRadius,
+ // flush: true,
+ // points: [line3[0], line4[1]],
+ // });
+ // // 绾挎潯5
+ // let line5 = diagram.getOption('line5').points;
+ // // 绾挎潯6
+ // let line6 = diagram.getOption('line6').points;
+ // diagram.moveDot({
+ // id: 'line5_dot',
+ // fillStyle: springGreen,
+ // strokeStyle: springGreen,
+ // radius: scalcRadius,
+ // flush: true,
+ // points: [line5[0], line6[1]],
+ // });
+}
+
+function run3Charge(diagram) {
+
+ // 绾挎潯1
+ let line1 = diagram.getOption('line1').points;
+ // 绾挎潯2
+ let line2 = diagram.getOption('line2').points;
+ diagram.moveDot({
+ id: 'line1_dot',
+ fillStyle: springGreen,
+ strokeStyle: springGreen,
+ radius: scalcRadius,
+ flush: true,
+ points: [line1[0], line2[1]],
+ });
+
+ // 绾挎潯3
+ let line3 = diagram.getOption('line3').points;
+ // 绾挎潯4
+ let line4 = diagram.getOption('line4').points;
+ diagram.moveDot({
+ id: 'line3_dot',
+ fillStyle: springGreen,
+ strokeStyle: springGreen,
+ radius: scalcRadius,
+ flush: true,
+ points: [line3[0], line4[1]],
+ });
+
+
+ // 绾挎潯5
+ let line5 = diagram.getOption('line5').points;
+ // 绾挎潯6
+ let line6 = diagram.getOption('line6').points;
+ diagram.moveDot({
+ id: 'line5_dot',
+ fillStyle: springGreen,
+ strokeStyle: springGreen,
+ radius: scalcRadius,
+ flush: true,
+ points: [line5[0], line6[1]],
+ });
+
+}
+
+
+export default diagramStates;
\ No newline at end of file
diff --git a/src/pages/monitoring/js/gridCircuitDiagram.js b/src/pages/monitoring/js/gridCircuitDiagram.js
index 329797d..162af97 100644
--- a/src/pages/monitoring/js/gridCircuitDiagram.js
+++ b/src/pages/monitoring/js/gridCircuitDiagram.js
@@ -75,7 +75,7 @@
strokeStyle: lineStrokeColor,
lineWidth: lineWidth,
points: [
- [line3[1][0] - 30, line3[1][1]],
+ [line3[1][0], line3[1][1]],
[line2[1][0], line2[1][1]]
]
})
@@ -138,7 +138,7 @@
strokeStyle: lineStrokeColor,
lineWidth: lineWidth,
points: [
- [line5[1][0] - 30, line5[1][1]],
+ [line5[1][0], line5[1][1]],
[line6[0][0], line6[0][1]]
]
})
@@ -288,7 +288,7 @@
let Image1 = diagram.drawImage({
id: 'img1',
url: rectifier,
- point: [line15[1][0] - 60, line15[1][1]],
+ point: [line15[1][0] - 60, line15[1][1]-20],
width: 70,
height: 101,
})
diff --git a/src/pages/testedMotor/js/gridCircuitDiagram.js b/src/pages/testedMotor/js/gridCircuitDiagram.js
index f667178..8966c40 100644
--- a/src/pages/testedMotor/js/gridCircuitDiagram.js
+++ b/src/pages/testedMotor/js/gridCircuitDiagram.js
@@ -138,7 +138,7 @@
lineWidth: lineWidth,
points: [
[line7[1][0],line7[1][1]],
- [line8[0][0], line8[0][1]-10]
+ [line8[0][0], line8[0][1]]
],
hide: hideStatus,
@@ -173,7 +173,7 @@
let text3 = diagram.text({
id: "text3",
- text: '900V',
+ text: '900V/DC',
fillStyle: '#fff',
fontSize: 12,
fontWidth:1,
diff --git a/src/pages/testedMotor/testedMotor.vue b/src/pages/testedMotor/testedMotor.vue
index 5e33c76..2eb1a28 100644
--- a/src/pages/testedMotor/testedMotor.vue
+++ b/src/pages/testedMotor/testedMotor.vue
@@ -8,9 +8,9 @@
<el-form-item label="鍙楄瘯鐢垫満鐘舵�侊細">
<el-input size="mini" v-model="formData.thisInfo.ssdjzt" style="width:65px"></el-input>
</el-form-item>
- <el-form-item label="鐩存祦璋冮�熸煖锛�">
+ <!-- <el-form-item label="鐩存祦璋冮�熸煖锛�">
<el-input size="mini" v-model="formData.thisInfo.zltsg" style="width:65px"></el-input>
- </el-form-item>
+ </el-form-item> -->
<el-form-item label="鍙楄瘯渚ц酱鑱斿櫒锛�">
<el-input size="mini" v-model="formData.thisInfo.ssczlq" style="width:65px"></el-input>
--
Gitblit v1.9.1