|
|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
|
<div class="border">
|
|
|
- <div style="text-align: right; padding-top: 10px; margin-right: 40px">
|
|
|
+ <div style="text-align: right; padding-top: 10px; margin-right: 70px">
|
|
|
<button
|
|
|
type="button"
|
|
|
class="bottom_01"
|
|
|
- :style="{ backgroundColor: chooseDatetime === '0' ? 'aqua' : '' }"
|
|
|
+ :style="{ backgroundColor: chooseDatetime === '0' ? '#46B9ED' : '' }"
|
|
|
@click="chooseDate('0')"
|
|
|
>
|
|
|
实时
|
|
|
@@ -12,7 +12,7 @@
|
|
|
<button
|
|
|
type="button"
|
|
|
class="bottom_01"
|
|
|
- :style="{ backgroundColor: chooseDatetime === '1' ? 'aqua' : '' }"
|
|
|
+ :style="{ backgroundColor: chooseDatetime === '1' ? '#46B9ED' : '' }"
|
|
|
@click="chooseDate('1')"
|
|
|
>
|
|
|
近1天
|
|
|
@@ -20,7 +20,7 @@
|
|
|
<button
|
|
|
type="button"
|
|
|
class="bottom_01"
|
|
|
- :style="{ backgroundColor: chooseDatetime === '10' ? 'aqua' : '' }"
|
|
|
+ :style="{ backgroundColor: chooseDatetime === '10' ? '#46B9ED' : '' }"
|
|
|
@click="chooseDate('10')"
|
|
|
>
|
|
|
近10天
|
|
|
@@ -28,16 +28,17 @@
|
|
|
<button
|
|
|
type="button"
|
|
|
class="bottom_01"
|
|
|
- :style="{ backgroundColor: chooseDatetime === '20' ? 'aqua' : '' }"
|
|
|
- @click="chooseDate('20')"
|
|
|
+ :style="{ backgroundColor: chooseDatetime === '30' ? '#46B9ED' : '' }"
|
|
|
+ @click="chooseDate('30')"
|
|
|
>
|
|
|
- 近20天
|
|
|
+ 近1月
|
|
|
</button>
|
|
|
</div>
|
|
|
<!-- <div id="transactionFlowView" style="height:180px;width: 100%;margin-bottom: 10px;"></div> -->
|
|
|
<div
|
|
|
ref="testLine"
|
|
|
- style="width: 780px; height: 250px; margin: 0px auto; margin-top: -30px"
|
|
|
+ style="width: 850px; height: 260px; margin: 0px auto; margin-top: -40px"
|
|
|
+ v-loading="chartLoading"
|
|
|
></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -47,198 +48,126 @@ import { mapState } from "vuex";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ chartLoading:false,
|
|
|
+ interval0: null,
|
|
|
+ interval1: null,
|
|
|
+ interval10: null,
|
|
|
+ interval30: null,
|
|
|
chooseDatetime: "0",
|
|
|
- title: "测试",
|
|
|
+ title: "1",
|
|
|
type: "fuhe_after",
|
|
|
unit: "",
|
|
|
- yData: new Array(30).fill("-"),
|
|
|
- xData: new Array(30).fill("-"),
|
|
|
+ // yData: new Array(30).fill("-"),
|
|
|
+ // xData: new Array(30).fill("-"),
|
|
|
+ xData: [],
|
|
|
+ yData: [],
|
|
|
count: 0,
|
|
|
|
|
|
myChart: null,
|
|
|
- option: {
|
|
|
- color: ["#41D6C3", "#FA8072"],
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- type: "cross",
|
|
|
- label: {
|
|
|
- backgroundColor: "#6a7985",
|
|
|
- },
|
|
|
- },
|
|
|
- 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;
|
|
|
- },
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: "vertical",
|
|
|
- x: "left",
|
|
|
- y: "top",
|
|
|
- // data: ["抽气流量", "排气流量"],
|
|
|
- textStyle: {
|
|
|
- fontWeight: "normal",
|
|
|
- color: "#fff",
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- boundaryGap: [0, "100%"],
|
|
|
- name: this.unit,
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- type: "dotted",
|
|
|
- color: "rgba(155, 155, 155, 0.5)",
|
|
|
- },
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 11,
|
|
|
- },
|
|
|
- axisTick: { show: false },
|
|
|
- type: "value",
|
|
|
- },
|
|
|
- ],
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- // type: "time", // x轴为 时间轴
|
|
|
- interval: 0,
|
|
|
- splitLine: { show: false },
|
|
|
- axisLine: {
|
|
|
- lineStyle: { width: 0 },
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 11,
|
|
|
- rotate: 30,
|
|
|
- },
|
|
|
- axisTick: { show: false },
|
|
|
- boundaryGap: false,
|
|
|
- data: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- title: {
|
|
|
- text: this.title,
|
|
|
- padding: [5, 230],
|
|
|
- textStyle: {
|
|
|
- fontWeight: "normal", //标题颜色
|
|
|
- color: "#4ADEFE",
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: this.title,
|
|
|
- type: "line",
|
|
|
- symbol: "none",
|
|
|
- markPoint: {
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true,
|
|
|
- backgroundColor: "#fff",
|
|
|
- position: "top",
|
|
|
- color: "#5AAAFA",
|
|
|
- borderColor: "rgba(90,170,250,0.3)",
|
|
|
- borderWidth: 1,
|
|
|
- padding: 8,
|
|
|
- formatter: "{b}: {c} ",
|
|
|
- },
|
|
|
- },
|
|
|
- symbol: "circle",
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- borderColor: "rgba(90,170,250,0.3)",
|
|
|
- borderWidth: 15,
|
|
|
- },
|
|
|
- },
|
|
|
- symbolSize: 7,
|
|
|
- data: [{ type: "max", name: "Max" }],
|
|
|
- },
|
|
|
- // lineStyle: { normal: { color: "#41D6C3", width: 1 } },
|
|
|
- lineStyle: {
|
|
|
- width: 2,
|
|
|
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "#9effff",
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "#9E87FF",
|
|
|
- },
|
|
|
- ]),
|
|
|
- },
|
|
|
- areaStyle: { normal: { color: "#41D6C3", opacity: 0.5 } },
|
|
|
- connectNulls: true,
|
|
|
- data: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
};
|
|
|
},
|
|
|
- computed: {
|
|
|
- ...mapState(["websocketIP"]),
|
|
|
- },
|
|
|
+
|
|
|
methods: {
|
|
|
- idChange(id) {
|
|
|
- // 数据清空
|
|
|
- this.yData = new Array(30).fill("-");
|
|
|
- this.xData = new Array(30).fill("-");
|
|
|
- // 关闭以前的websocket
|
|
|
- this.websocket.close();
|
|
|
- // 开启一个新的
|
|
|
- this.websocket = new WebSocket(
|
|
|
- `ws://${this.websocketIP}/hbase/ws/safetyMonitor/62/${this.choseDateTime}`
|
|
|
- );
|
|
|
- this.initWebSocket();
|
|
|
+ idChange(id) {},
|
|
|
+ //获取实时数据
|
|
|
+ getSecondData() {
|
|
|
+ this.mockRequest("/mock/monitor/second").then((resp) => {
|
|
|
+ if (resp) {
|
|
|
+ // console.log("second");
|
|
|
+ // this.xData = [];
|
|
|
+ // this.yData = [];
|
|
|
+ this.xData = resp.data.data.xData;
|
|
|
+ this.yData = resp.data.data.yData;
|
|
|
+ this.addData();
|
|
|
+ // console.log(resp.data.data);
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
+ //获取过去一天数据
|
|
|
+ getOnedayData() {
|
|
|
+ this.mockRequest("/mock/monitor/oneday").then((resp) => {
|
|
|
+ if (resp) {
|
|
|
+ // this.xData = [];
|
|
|
+ // this.yData = [];
|
|
|
+ this.xData = resp.data.data.xData;
|
|
|
+ this.yData = resp.data.data.yData;
|
|
|
+ this.addData();
|
|
|
+ // console.log(resp.data.data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取近10天数据
|
|
|
+ getTenDayData() {
|
|
|
+ this.mockRequest("/mock/monitor/tenday").then((resp) => {
|
|
|
+ if (resp) {
|
|
|
+ console.log("tenday");
|
|
|
+ // this.xData = [];
|
|
|
+ // this.yData = [];
|
|
|
+ this.xData = resp.data.data.xData;
|
|
|
+ this.yData = resp.data.data.yData;
|
|
|
+ this.addData();
|
|
|
+ // console.log(resp.data.data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取过去一月数据
|
|
|
+ getMonthData() {
|
|
|
+ this.mockRequest("/mock/monitor/month").then((resp) => {
|
|
|
+ if (resp) {
|
|
|
+ console.log("month");
|
|
|
+ // this.xData = [];
|
|
|
+ // this.yData = [];
|
|
|
+ this.xData = resp.data.data.xData;
|
|
|
+ this.yData = resp.data.data.yData;
|
|
|
+ this.addData();
|
|
|
+ // console.log(resp.data.data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
// 选择数据的时间
|
|
|
chooseDate(value) {
|
|
|
+ // console.log(value);
|
|
|
this.chooseDatetime = value;
|
|
|
this.count = 0;
|
|
|
- this.xData = new Array(30).fill("-");
|
|
|
- this.yData = new Array(30).fill("-");
|
|
|
- this.websocket.close();
|
|
|
-
|
|
|
- this.websocket = new WebSocket(
|
|
|
- `ws://${this.websocketIP}/hbase/ws/safetyMonitor/62/${this.chooseDatetime}`
|
|
|
- );
|
|
|
-
|
|
|
- this.initWebSocket();
|
|
|
+ switch (value) {
|
|
|
+ case "0":
|
|
|
+ clearInterval(this.interval1);
|
|
|
+ clearInterval(this.interval10);
|
|
|
+ clearInterval(this.interval30);
|
|
|
+ this.getSecondData();
|
|
|
+ this.interval0 = setInterval(this.getSecondData, 2000);
|
|
|
+ break;
|
|
|
+ case "1":
|
|
|
+ clearInterval(this.interval0);
|
|
|
+ clearInterval(this.interval10);
|
|
|
+ clearInterval(this.interval30);
|
|
|
+ this.getOnedayData();
|
|
|
+ this.interval1 = setInterval(this.getOnedayData, 1000 * 60 * 60); //1小时调用一次
|
|
|
+ break;
|
|
|
+ case "10":
|
|
|
+ clearInterval(this.interval1);
|
|
|
+ clearInterval(this.interval0);
|
|
|
+ clearInterval(this.interval30);
|
|
|
+ this.getTenDayData();
|
|
|
+ this.interval10 = setInterval(this.getTenDayData, 1000 * 60 * 60 * 8); //8小时调用一次
|
|
|
+ break;
|
|
|
+ case "30":
|
|
|
+ clearInterval(this.interval0);
|
|
|
+ clearInterval(this.interval1);
|
|
|
+ clearInterval(this.interval10);
|
|
|
+ this.getMonthData();
|
|
|
+ this.interval30 = setInterval(this.getMonthData, 1000 * 60 * 60 * 24); //1天调用一次
|
|
|
+ break;
|
|
|
+ }
|
|
|
},
|
|
|
-
|
|
|
- addData(data) {
|
|
|
- this.websocket;
|
|
|
- // 先扩展数组，然后删除多余元素
|
|
|
- if (this.count < 30) {
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- this.yData[this.count] = data[i][this.type];
|
|
|
- this.xData[this.count] = data[i]["date"].split(" ")[1];
|
|
|
- }
|
|
|
- this.count++;
|
|
|
- } else {
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- // 删除数组中的第一个项目
|
|
|
- this.yData.shift();
|
|
|
- this.yData.push(data[i][this.type]);
|
|
|
- this.xData.shift();
|
|
|
- this.xData.push(data[i]["date"].split(" ")[1]);
|
|
|
+ clearData(){
|
|
|
+ this.mockRequest("/clearData").then((resp) => {
|
|
|
+ if (resp) {
|
|
|
}
|
|
|
- }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addData() {
|
|
|
this.myChart.setOption({
|
|
|
xAxis: [
|
|
|
{
|
|
|
@@ -247,53 +176,170 @@ export default {
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- name: this.unit,
|
|
|
+ name: this.title,
|
|
|
data: this.yData,
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
},
|
|
|
- initWebSocket() {
|
|
|
- // 连接错误
|
|
|
- this.websocket.onerror = () => {
|
|
|
- console.log(
|
|
|
- "WebSocket连接发生错误 状态码：" + this.websocket.readyState
|
|
|
- );
|
|
|
- };
|
|
|
- // 连接成功
|
|
|
- this.websocket.onopen = () => {
|
|
|
- console.log(
|
|
|
- "WebSocket连接成功 状态码：" + this.websocket.readyState
|
|
|
- );
|
|
|
- };
|
|
|
- // 收到消息的回调
|
|
|
- this.websocket.onmessage = (event) => {
|
|
|
- // console.log("onmessage", event);
|
|
|
- if (JSON.parse(event.data).length) {
|
|
|
- this.addData(JSON.parse(event.data));
|
|
|
- }
|
|
|
- };
|
|
|
- // 连接关闭的回调
|
|
|
- this.websocket.onclose = () => {
|
|
|
- console.log(
|
|
|
- "WebSocket连接关闭 状态码：" + this.websocket.readyState
|
|
|
- );
|
|
|
- };
|
|
|
- // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
|
|
|
- this.$once("hook:beforeDestroy", () => {
|
|
|
- this.websocket.close();
|
|
|
- });
|
|
|
+ clearAllInterval() {
|
|
|
+ if (this.interval0 != null) clearInterval(this.interval0);
|
|
|
+ if (this.interval1 != null) clearInterval(this.interval1);
|
|
|
+ if (this.interval10 != null) clearInterval(this.interval10);
|
|
|
+ if (this.interval30 != null) clearInterval(this.interval30);
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
+ const option = {
|
|
|
+ color: ["#41D6C3", "#FA8072"],
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ label: {
|
|
|
+ backgroundColor: "#6a7985",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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) => {
|
|
|
+ var result = `${this.title}：${params[0].data}${this.unit} <br/>`;
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ x: 45,
|
|
|
+ y: 15,
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: "normal",
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ boundaryGap: [0, "100%"],
|
|
|
+ name: this.unit,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: "dotted",
|
|
|
+ color: "rgba(155, 155, 155, 0.5)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 11,
|
|
|
+ },
|
|
|
+ axisTick: { show: false },
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ // type: "time", // x轴为 时间轴
|
|
|
+ interval: 0,
|
|
|
+ splitLine: { show: false },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: { width: 0 },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 11,
|
|
|
+ rotate: 30,
|
|
|
+ },
|
|
|
+ axisTick: { show: false },
|
|
|
+ boundaryGap: false,
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // title: {
|
|
|
+ // text: this.title,
|
|
|
+ // padding: [5, 230],
|
|
|
+ // textStyle: {
|
|
|
+ // fontWeight: "normal", //标题颜色
|
|
|
+ // color: "#fff",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: this.title,
|
|
|
+ type: "line",
|
|
|
+ symbol: "none",
|
|
|
+ markPoint: {
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ backgroundColor: "#fff",
|
|
|
+ position: "top",
|
|
|
+ color: "#5AAAFA",
|
|
|
+ borderColor: "rgba(90,170,250,0.3)",
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: 8,
|
|
|
+ formatter: "{b}: {c} ",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ symbol: "circle",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: "rgba(90,170,250,0.3)",
|
|
|
+ borderWidth: 15,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ symbolSize: 7,
|
|
|
+ data: [{ type: "max", name: "Max" }],
|
|
|
+ },
|
|
|
+ // lineStyle: { normal: { color: "#41D6C3", width: 1 } },
|
|
|
+ lineStyle: {
|
|
|
+ width: 2,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#9effff",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#9E87FF",
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ areaStyle: { normal: { color: "#41D6C3", opacity: 0.5 } },
|
|
|
+ connectNulls: true,
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
// 先画图
|
|
|
this.myChart = this.$echarts.init(this.$refs.testLine);
|
|
|
- this.myChart.setOption(this.option);
|
|
|
- this.websocket = new WebSocket(
|
|
|
- `ws://${this.websocketIP}/hbase/ws/safetyMonitor/62/${this.chooseDatetime}`
|
|
|
- );
|
|
|
- console.log(this.websocket);
|
|
|
- this.initWebSocket();
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ this.chooseDate(this.chooseDatetime);
|
|
|
+ this.$bus.$on("changeMpId", (val) => {
|
|
|
+ console.log(val);
|
|
|
+ this.title = val;
|
|
|
+ this.chartLoading = true;
|
|
|
+ this.clearAllInterval();
|
|
|
+ this.clearData();
|
|
|
+ this.chartLoading = false;
|
|
|
+ this.chooseDate(this.chooseDatetime);
|
|
|
+ });
|
|
|
+ this.$once("hook:beforeDestroy", () => {
|
|
|
+ this.$bus.$off("changeMpId");
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ beforeDestroy() {
|
|
|
+ this.clearAllInterval();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -311,7 +357,7 @@ export default {
|
|
|
color: #fff;
|
|
|
background-color: #2d8cf0;
|
|
|
width: 60px;
|
|
|
- z-index:999;
|
|
|
+ z-index: 999;
|
|
|
position: relative;
|
|
|
}
|
|
|
</style>
|
