|
|
@@ -23,6 +23,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
+
|
|
|
<script>
|
|
|
import { mapState } from "vuex";
|
|
|
|
|
|
@@ -39,8 +40,14 @@ export default {
|
|
|
label: "三相相电流",
|
|
|
},
|
|
|
],
|
|
|
+ id: 89,
|
|
|
title: "三相线电压",
|
|
|
- type: ["Uab_after", "Ubc_after", "Uca_after"],
|
|
|
+ type: [
|
|
|
+ "xiandianyauab_after",
|
|
|
+ "xiandianyaubc_after",
|
|
|
+ "xiandianyauca_after",
|
|
|
+ ],
|
|
|
+ legend: ["三相线电压Uab", "三相线电压Ubc", "三相线电压Uca"],
|
|
|
unit: "V",
|
|
|
currentChartId: 1,
|
|
|
xData: new Array(30).fill("-"),
|
|
|
@@ -53,43 +60,115 @@ export default {
|
|
|
color: ["#41D6C3", "#FA8072"],
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
+ backgroundColor: "transparent",
|
|
|
axisPointer: {
|
|
|
- type: "cross",
|
|
|
- label: {
|
|
|
- backgroundColor: "#6a7985",
|
|
|
+ lineStyle: {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(126,199,255,0)", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: "rgba(126,199,255,1)", // 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(126,199,255,0)", // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
- backgroundColor: "#fff",
|
|
|
- padding: 10,
|
|
|
- textStyle: {
|
|
|
- fontSize: 12,
|
|
|
- color: "#152934",
|
|
|
- lineHeight: 24,
|
|
|
- },
|
|
|
- extraCssText:
|
|
|
- "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
|
|
|
- formatter: (params) => {
|
|
|
- console.log("params", params);
|
|
|
- var result = `${this.title}：${params[0].data}${this.unit} <br/>`;
|
|
|
- return result;
|
|
|
+ formatter: (p) => {
|
|
|
+ let dom = `<div style="width: 79px;
|
|
|
+ height: 110px;;color:#fff;position: relative;">
|
|
|
+ <svg style="position: absolute;top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100"
|
|
|
+ height="111" viewBox="0 0 80 85">
|
|
|
+ <defs>
|
|
|
+ <style>
|
|
|
+ .cls-1 {
|
|
|
+ fill: #07172c;
|
|
|
+ fill-opacity: 0.8;
|
|
|
+ stroke: #a7d8ff;
|
|
|
+ stroke-linejoin: round;
|
|
|
+ stroke-opacity: 0.2;
|
|
|
+ stroke-width: 1px;
|
|
|
+ fill-rule: evenodd;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </defs>
|
|
|
+ <path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
|
|
|
+ transform="translate(-258.5 -592.5)" />
|
|
|
+ </svg>
|
|
|
+ <div style="padding: 3px 1px 3px 11px;display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;position: relative;z-index: 1;">
|
|
|
+ <div
|
|
|
+ style="margin-bottom: 4px;width:100%;display:${
|
|
|
+ p[0] ? "flex" : "none"
|
|
|
+ };justify-content:space-between;align-items:center;">
|
|
|
+ <span style="font-size:11px;color:#7ec7ff;">${
|
|
|
+ p[0] ? p[0].seriesName : ""
|
|
|
+ }</span>
|
|
|
+ <span style="font-size:11px;color:#fff;">${p[0] ? p[0].data : ""}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="width:100%;height:100%;display:${
|
|
|
+ p[1] ? "flex" : "none"
|
|
|
+ };justify-content:space-between;align-items:center;">
|
|
|
+ <span style="font-size:11px;color:#7ec7ff;">${
|
|
|
+ p[1] ? p[1].seriesName : ""
|
|
|
+ }</span>
|
|
|
+ <span style="font-size:11px;color:#fff;">${p[1] ? p[1].data : ""}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="width:100%;height:100%;display:${
|
|
|
+ p[1] ? "flex" : "none"
|
|
|
+ };justify-content:space-between;align-items:center;">
|
|
|
+ <span style="font-size:11px;color:#7ec7ff;">${
|
|
|
+ p[2] ? p[2].seriesName : ""
|
|
|
+ }</span>
|
|
|
+ <span style="font-size:11px;color:#fff;">${p[2] ? p[2].data : ""}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>`;
|
|
|
+ return dom;
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
- top: "15%",
|
|
|
+ top: "5%",
|
|
|
left: "10%",
|
|
|
right: "10%",
|
|
|
- bottom: "1%",
|
|
|
+ bottom: "7%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
legend: {
|
|
|
- orient: "vertical",
|
|
|
- x: "left",
|
|
|
- y: "top",
|
|
|
- // data: ["抽气流量", "排气流量"],
|
|
|
+ align: "left",
|
|
|
+ right: "4%",
|
|
|
+ top: "-1%",
|
|
|
+ type: "plain",
|
|
|
textStyle: {
|
|
|
- fontWeight: "normal",
|
|
|
- color: "#fff",
|
|
|
+ color: "#7ec7ff",
|
|
|
+ fontSize: 11,
|
|
|
},
|
|
|
+ // icon:'rect',
|
|
|
+ itemGap: 21,
|
|
|
+ itemWidth: 18,
|
|
|
+ icon:
|
|
|
+ "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
|
|
|
+
|
|
|
+ data: this.legend,
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
@@ -143,7 +222,7 @@ export default {
|
|
|
|
|
|
series: [
|
|
|
{
|
|
|
- name: this.type[0],
|
|
|
+ name: "三相线电压Uab",
|
|
|
type: "line",
|
|
|
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
|
|
showAllSymbol: true,
|
|
|
@@ -192,7 +271,7 @@ export default {
|
|
|
data: [],
|
|
|
},
|
|
|
{
|
|
|
- name: this.type[1],
|
|
|
+ name: "三相线电压Ubc",
|
|
|
type: "line",
|
|
|
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
|
|
showAllSymbol: true,
|
|
|
@@ -241,7 +320,7 @@ export default {
|
|
|
data: [],
|
|
|
},
|
|
|
{
|
|
|
- name: this.type[2],
|
|
|
+ name: "三相线电压Uca",
|
|
|
type: "line",
|
|
|
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
|
|
showAllSymbol: true,
|
|
|
@@ -308,7 +387,7 @@ export default {
|
|
|
this.websocket.close();
|
|
|
// 开启一个新的
|
|
|
this.websocket = new WebSocket(
|
|
|
- `ws://${this.websocketIP}/hbase/ws/belt/62`
|
|
|
+ `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
|
|
|
);
|
|
|
this.initWebSocket();
|
|
|
},
|
|
|
@@ -322,16 +401,27 @@ export default {
|
|
|
}
|
|
|
switch (this.currentChartId) {
|
|
|
// 三相线电压
|
|
|
- case "1":
|
|
|
+ case 1:
|
|
|
this.unit = "V";
|
|
|
- this.type = ["Uab_after", "Ubc_after", "Uca_after"];
|
|
|
+ this.type = [
|
|
|
+ "xiandianyauab_after",
|
|
|
+ "xiandianyaubc_after",
|
|
|
+ "xiandianyauca_after",
|
|
|
+ ];
|
|
|
+ this.legend = ["三相线电压Uab", "三相线电压Ubc", "三相线电压Uca"];
|
|
|
break;
|
|
|
// 三相相电流
|
|
|
- case "2":
|
|
|
+ case 2:
|
|
|
this.unit = "A";
|
|
|
- this.type = ["Ia", "Ib", "Ic"];
|
|
|
+ this.type = [
|
|
|
+ "xiangdianliuia_after",
|
|
|
+ "xiangdianliuib_after",
|
|
|
+ "xiangdianliuic_after",
|
|
|
+ ];
|
|
|
+ this.legend = ["三相相电流Ia", "三相相电流Ib", "三相相电流Ic"];
|
|
|
break;
|
|
|
}
|
|
|
+ console.log(this.legend);
|
|
|
this.count = 0;
|
|
|
this.xData = new Array(30).fill("-");
|
|
|
this.y1Data = new Array(30).fill("-");
|
|
|
@@ -341,7 +431,9 @@ export default {
|
|
|
addData(data) {
|
|
|
this.websocket;
|
|
|
// 先扩展数组，然后删除多余元素
|
|
|
- console.log("data", data);
|
|
|
+
|
|
|
+ // console.log("data", data);
|
|
|
+ // console.log('this.legend',this.legend);
|
|
|
if (this.count < 30) {
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
this.y1Data[this.count] = data[i][this.type[0]];
|
|
|
@@ -371,15 +463,15 @@ export default {
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- name: this.unit,
|
|
|
+ name: this.legend[0],
|
|
|
data: this.y1Data,
|
|
|
},
|
|
|
{
|
|
|
- name: this.unit,
|
|
|
+ name: this.legend[1],
|
|
|
data: this.y2Data,
|
|
|
},
|
|
|
{
|
|
|
- name: this.unit,
|
|
|
+ name: this.legend[2],
|
|
|
data: this.y3Data,
|
|
|
},
|
|
|
],
|
|
|
@@ -424,7 +516,9 @@ export default {
|
|
|
// 先画图
|
|
|
this.myChart = this.$echarts.init(this.$refs.testLine);
|
|
|
this.myChart.setOption(this.option);
|
|
|
- this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
|
|
|
+ this.websocket = new WebSocket(
|
|
|
+ `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
|
|
|
+ );
|
|
|
this.initWebSocket();
|
|
|
},
|
|
|
};
|
