通风系统数据看板

src/views/power_supply/dataBoard/leftChart.vue

@@ -8,7 +8,7 @@
       @change="selectParm"
     >
       <el-option
-        v-for="item in parmOptions"
+        v-for="item in parmoptions"
         :key="item.id+''"
         :label="item.label"
         :value="item.id"

src/views/ventilate/dataBoard/bearing.vue

@@ -0,0 +1,316 @@
+<template>
+  <div>
+    <div
+      ref="testLine"
+      style="width: 450px; height: 200px; margin: 0px auto"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      title:'轴承温度',
+      type: ['qianzhouwen_after','houzhouwen_after'],
+      unit:'°C',
+      currentChartId: 1,
+      xData: new Array(30).fill("-"),
+      y1Data: new Array(30).fill("-"),
+      y2Data: new Array(30).fill("-"),
+      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: [],
+          },
+          {
+            // 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) {
+      console.log("sep", id);
+      // 数据清空
+      this.xData = new Array(30).fill("-");
+      this.y1Data = new Array(30).fill("-");
+      this.y2Data = new Array(30).fill("-");
+      // 关闭以前的websocket
+      this.websocket.close();
+      // 开启一个新的
+      this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
+      this.initWebSocket();
+    },
+
+    addData(data) {
+      this.websocket;
+      // 先扩展数组，然后删除多余元素
+      console.log("data", data);
+      if (this.count < 30) {
+        for (let i = 0; i < data.length; i++) {
+          this.y1Data[this.count] = data[i][this.type[0]];
+          this.y2Data[this.count] = data[i][this.type[1]];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
+        }
+        this.count++;
+      } else {
+        for (let i = 0; i < data.length; i++) {
+          // 删除数组中的第一个项目
+          this.y1Data.shift();
+          this.y1Data.push(data[i][this.type[0]]);
+          this.y2Data.shift();
+          this.y2Data.push(data[i][this.type[1]]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        series: [
+          {
+            name: this.unit,
+            data: this.y1Data,
+          },
+          {
+            name: this.unit,
+            data: this.y2Data,
+          }
+        ],
+      });
+      // console.log("this.paiqidata", this.paiqidata);
+      // console.log("this.chouqidata", this.chouqidata);
+      // console.log("this.xData", this.xData);
+    },
+    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();
+      });
+    },
+  },
+  mounted() {
+    // 先画图
+    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.initWebSocket();
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

src/views/ventilate/dataBoard/dataBoard.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="main">
+    <div class="header">
+      <div class="select-veido">
+        <el-select
+          style="margin-top: 10px"
+          v-model="currentVenId"
+          placeholder="请选择"
+          @change="selectChart"
+          :popper-append-to-body="false"
+        >
+          <el-option
+            v-for="item in venOptions"
+            :key="item.id"
+            :label="item.label"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class="top">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <div class="top_left">
+            <!-- 三相线电压/三相相电流 -->
+            <vol-and-current ref="volAndCurrent"></vol-and-current>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="top_center">
+            <!-- 三相绕组温度（定子温度） -->
+            <separate ref="separate"></separate>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="top_right">
+            <!-- 轴承温度 -->
+            <bearing ref="bearing"></bearing>
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+    <div class="center">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <div class="center_left">
+            <!-- 振动 -->
+            <vibrate ref="vibrate"></vibrate>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="center_center">
+            <!-- 风流/风速 -->
+            <wind ref="wind"></wind>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="center_right">
+            <!-- 全压/静压/动压 -->
+            <pressure ref="pressure"></pressure>
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+    <div class="bottom">
+      <el-row :gutter="130">
+        <el-col :span="12">
+          <div class="bottom_left">
+            <fault-alarm></fault-alarm>
+          </div>
+        </el-col>
+        <el-col :span="12">
+            <div class="bottom_right">
+          <running-msg></running-msg>
+           </div>
+        </el-col>
+      </el-row>
+
+
+    </div>
+  </div>
+</template>
+
+<script>
+import volAndCurrent from "./volAndCurrent";
+import separate from "./separate";
+import bearing from "./bearing";
+import vibrate from "./vibrate";
+import wind from "./wind";
+import pressure from "./pressure";
+import faultAlarm from "./faultAlarm";
+import runningMsg from "./runningMsg";
+export default {
+  data() {
+    return {
+      currentVenId: "1号风机",
+      venOptions: [
+        {
+          id: "1",
+          label: "1号风机",
+        },
+        {
+          id: "2",
+          label: "2号风机",
+        },
+      ],
+    };
+  },
+  methods: {
+    selectChart(val) {
+      console.log("val", val);
+      this.$refs.volAndCurrent.idChange(val);
+      this.$refs.separate.idChange(val);
+      this.$refs.bearing.idChange(val);
+      this.$refs.vibrate.idChange(val);
+      this.$refs.wind.idChange(val);
+      this.$refs.pressure.idChange(val);
+      //   this.$refs.faultAlarm.idChange(val);
+      //   this.$refs.runningMsg.idChange(val);
+    },
+  },
+  components: {
+    volAndCurrent,
+    separate,
+    bearing,
+    vibrate,
+    wind,
+    pressure,
+    faultAlarm,
+    runningMsg,
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 140px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+  color: #4adefe;
+  font-size: 20px;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+.select-veido >>> .el-scrollbar {
+  background: rgba(255, 255, 255, 1);
+  border: 0;
+}
+.main {
+  width: 100%;
+  height: 850px;
+  position: relative;
+  background-image: linear-gradient(
+    to right,
+    rgb(6, 19, 60) 0%,
+    rgb(1, 22, 105) 50%,
+    rgb(6, 19, 60) 100%
+  );
+  /* background-color: antiquewhite; */
+}
+.header {
+  margin: 0 auto;
+  position: relative;
+  width: 100%;
+  height: 10%;
+  max-width: 1920px;
+  background: url("../../../assets/img/gas/header.png") center no-repeat;
+  box-sizing: border-box;
+}
+.select-veido {
+  margin: 0;
+  padding: 0;
+  line-height: 50px;
+  text-align: center;
+  font-size: 22px;
+  color: #ffffff;
+}
+.top {
+  height: 30%;
+}
+.top_left {
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+  height: 210px;
+}
+.top_center {
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+  height: 210px;
+}
+.top_right {
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+  height: 210px;
+}
+
+.center {
+  height: 30%;
+}
+.center_left {
+  width: 100%;
+  height: 210px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.center_center {
+  width: 100%;
+  height: 210px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.center_right {
+  width: 100%;
+  height: 210px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.bottom {
+  /* height: 30%; */
+  /* display: inline; */
+  /* height: 400px; */
+  margin-top: -40px;
+  display: flex;
+  justify-content:space-around;
+}
+.bottom_left {
+  width: 500px;
+  height: 210px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.bottom_right {
+  width: 500px;
+  height: 210px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+</style>

src/views/ventilate/dataBoard/faultAlarm.vue

@@ -0,0 +1,97 @@
+  <template>
+  <!-- style="padding:6px;border:3px solid #96c2f1;background:#eff7ff;height:180px;margin-top:60px" -->
+  <div class="table-wrapper">
+    <span class="title">故障报警</span>
+    <el-table :data="tableData">
+      <el-table-column
+        prop="name"
+        label="名称"
+        width="180"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="problem"
+        label="记录"
+        width="180"
+      >
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          name: "2022-1-15 17:41:25",
+          problem: "振动异常",
+        },
+        {
+          name: "2022-1-15 17:44:26",
+          problem: "风机过热",
+        },
+        {
+          name: "2022-1-15 17:52:22",
+          problem: "风量异常",
+        },
+      ],
+    };
+  },
+  methods: {
+    headerStyle({ row, column, rowIndex, columnIndex }) {
+      return "tableStyle";
+    },
+    tableRowStyle({ row, rowIndex }) {
+      return "background-color:#ecf5ff";
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.table-wrapper {
+  padding-top: 20px;
+  margin-left: 90px;
+  height: 80%;
+  margin-top: 10px;
+  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgba(9, 12, 14, 0.2);
+    color: #fff;
+  }
+} /* 删除表格下横线 */
+.table-wrapper ::v-deep .el-table::before {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0px;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table tr {
+  background-color: transparent !important;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table th {
+  background-color: transparent !important;
+  border: none;
+  color: #4ADEFE;
+  font-size: 16px;
+}
+.table-wrapper ::v-deep .el-table td,
+.el-table th.is-leaf {
+  background-color: transparent !important;
+  color: #F3DB5C;
+  font-size: 15px;
+  border: none;
+}
+.title {
+  /* font-weight:; */
+  /* padding-bottom: 15px; */
+  font-size: 18px;
+  color: #4ADEFE;
+}
+</style>

src/views/ventilate/dataBoard/pressure.vue

@@ -0,0 +1,372 @@
+<template>
+  <div>
+    <div
+      ref="testLine"
+      style="width: 450px; height: 200px; margin: 0px auto"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      title: "管道压力",
+      type: ["quanya_after", "jingya_after", "dongya_after"],
+      unit: "",
+      currentChartId: 1,
+      xData: new Array(30).fill("-"),
+      y1Data: new Array(30).fill("-"),
+      y2Data: new Array(30).fill("-"),
+      y3Data: new Array(30).fill("-"),
+      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: [],
+          },
+          {
+            // 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: [],
+          },
+          {
+            // 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) {
+      console.log("sep", id);
+      // 数据清空
+      this.xData = new Array(30).fill("-");
+      this.y1Data = new Array(30).fill("-");
+      this.y2Data = new Array(30).fill("-");
+      this.y3Data = new Array(30).fill("-");
+      // 关闭以前的websocket
+      this.websocket.close();
+      // 开启一个新的
+      this.websocket = new WebSocket(
+        `ws://${this.websocketIP}/hbase/ws/belt/62`
+      );
+      this.initWebSocket();
+    },
+
+    addData(data) {
+      this.websocket;
+      // 先扩展数组，然后删除多余元素
+      console.log("data", data);
+      if (this.count < 30) {
+        for (let i = 0; i < data.length; i++) {
+          this.y1Data[this.count] = data[i][this.type[0]];
+          this.y2Data[this.count] = data[i][this.type[1]];
+          this.y3Data[this.count] = data[i][this.type[1]];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
+        }
+        this.count++;
+      } else {
+        for (let i = 0; i < data.length; i++) {
+          // 删除数组中的第一个项目
+          this.y1Data.shift();
+          this.y1Data.push(data[i][this.type[0]]);
+          this.y2Data.shift();
+          this.y2Data.push(data[i][this.type[1]]);
+          this.y3Data.shift();
+          this.y3Data.push(data[i][this.type[2]]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        series: [
+          {
+            name: this.unit,
+            data: this.y1Data,
+          },
+          {
+            name: this.unit,
+            data: this.y2Data,
+          },
+          {
+            name: this.unit,
+            data: this.y3Data,
+          }
+        ],
+      });
+      // console.log("this.paiqidata", this.paiqidata);
+      // console.log("this.chouqidata", this.chouqidata);
+      // console.log("this.xData", this.xData);
+    },
+    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();
+      });
+    },
+  },
+  mounted() {
+    // 先画图
+    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.initWebSocket();
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

src/views/ventilate/dataBoard/runningMsg.vue

@@ -0,0 +1,88 @@
+  <template>
+  <div class="table-wrapper">
+    <span class="title">运行操作</span>
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="name"
+        label="瓦斯泵本体设备"
+        width="180"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="problem"
+        label="启停"
+        width="180"
+      >
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          name: "1#风机",
+          problem: "关闭",
+        },
+        {
+          name: "1#风机",
+          problem: "开启",
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang='scss' scoped>
+.table-wrapper {
+  padding-top: 20px;
+  margin-left: 110px;
+  height: 80%;
+  margin-top: 10px;
+  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgba(9, 12, 14, 0.2);
+    color: #fff;
+  }
+} /* 删除表格下横线 */
+.table-wrapper ::v-deep .el-table::before {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0px;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table tr {
+  background-color: transparent !important;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table th {
+  background-color: transparent !important;
+  border: none;
+  color: #4adefe;
+  font-size: 16px;
+}
+.table-wrapper ::v-deep .el-table td,
+.el-table th.is-leaf {
+  background-color: transparent !important;
+  color: #f3db5c;
+  font-size: 15px;
+  border: none;
+}
+.title {
+  /* font-weight:; */
+  /* padding-bottom: 15px; */
+  font-size: 18px;
+  color: #4adefe;
+}
+</style>

src/views/ventilate/dataBoard/separate.vue

@@ -0,0 +1,370 @@
+<template>
+  <div>
+    <div
+      ref="testLine"
+      style="width: 450px; height: 200px; margin: 0px auto"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      title:'三相绕组温度',
+      type: ['raozu1_after','raozu2_after','raozu3_after'],
+      unit:'°C',
+      currentChartId: 1,
+      xData: new Array(30).fill("-"),
+      y1Data: new Array(30).fill("-"),
+      y2Data: new Array(30).fill("-"),
+      y3Data: new Array(30).fill("-"),
+      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: ["绕组1温度", "绕组2温度","绕组3温度"],
+          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: [],
+          },
+          {
+            // 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: [],
+          },
+          {
+            // 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) {
+      console.log("sep", id);
+      // 数据清空
+      this.xData = new Array(30).fill("-");
+      this.y1Data = new Array(30).fill("-");
+      this.y2Data = new Array(30).fill("-");
+      this.y3Data = new Array(30).fill("-");
+      // 关闭以前的websocket
+      this.websocket.close();
+      // 开启一个新的
+      this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
+      this.initWebSocket();
+    },
+
+    addData(data) {
+      this.websocket;
+      // 先扩展数组，然后删除多余元素
+      console.log("data", data);
+      if (this.count < 30) {
+        for (let i = 0; i < data.length; i++) {
+          this.y1Data[this.count] = data[i][this.type[0]];
+          this.y2Data[this.count] = data[i][this.type[1]];
+          this.y3Data[this.count] = data[i][this.type[2]];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
+        }
+        this.count++;
+      } else {
+        for (let i = 0; i < data.length; i++) {
+          // 删除数组中的第一个项目
+          this.y1Data.shift();
+          this.y1Data.push(data[i][this.type[0]]);
+          this.y2Data.shift();
+          this.y2Data.push(data[i][this.type[1]]);
+          this.y3Data.shift();
+          this.y3Data.push(data[i][this.type[2]]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        series: [
+          {
+            name: this.unit,
+            data: this.y1Data,
+          },
+          {
+            name: this.unit,
+            data: this.y2Data,
+          },
+          {
+            name: this.unit,
+            data: this.y3Data,
+          }
+        ],
+      });
+      // console.log("this.paiqidata", this.paiqidata);
+      // console.log("this.chouqidata", this.chouqidata);
+      // console.log("this.xData", this.xData);
+    },
+    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();
+      });
+    },
+  },
+  mounted() {
+    // 先画图
+    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.initWebSocket();
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

src/views/ventilate/dataBoard/vibrate.vue

@@ -0,0 +1,318 @@
+<template>
+  <div>
+    <div
+      ref="testLine"
+      style="width: 450px; height: 200px; margin: 0px auto"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      title: "振动",
+      type: ["shuiping_after", "chuizhi_after"],
+      unit: "",
+      currentChartId: 1,
+      xData: new Array(30).fill("-"),
+      y1Data: new Array(30).fill("-"),
+      y2Data: new Array(30).fill("-"),
+      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: [],
+          },
+          {
+            // 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) {
+      console.log("sep", id);
+      // 数据清空
+      this.xData = new Array(30).fill("-");
+      this.y1Data = new Array(30).fill("-");
+      this.y2Data = new Array(30).fill("-");
+      // 关闭以前的websocket
+      this.websocket.close();
+      // 开启一个新的
+      this.websocket = new WebSocket(
+        `ws://${this.websocketIP}/hbase/ws/belt/62`
+      );
+      this.initWebSocket();
+    },
+
+    addData(data) {
+      this.websocket;
+      // 先扩展数组，然后删除多余元素
+      console.log("data", data);
+      if (this.count < 30) {
+        for (let i = 0; i < data.length; i++) {
+          this.y1Data[this.count] = data[i][this.type[0]];
+          this.y2Data[this.count] = data[i][this.type[1]];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
+        }
+        this.count++;
+      } else {
+        for (let i = 0; i < data.length; i++) {
+          // 删除数组中的第一个项目
+          this.y1Data.shift();
+          this.y1Data.push(data[i][this.type[0]]);
+          this.y2Data.shift();
+          this.y2Data.push(data[i][this.type[1]]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        series: [
+          {
+            name: this.unit,
+            data: this.y1Data,
+          },
+          {
+            name: this.unit,
+            data: this.y2Data,
+          },
+        ],
+      });
+      // console.log("this.paiqidata", this.paiqidata);
+      // console.log("this.chouqidata", this.chouqidata);
+      // console.log("this.xData", this.xData);
+    },
+    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();
+      });
+    },
+  },
+  mounted() {
+    // 先画图
+    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.initWebSocket();
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

src/views/ventilate/dataBoard/volAndCurrent.vue

@@ -0,0 +1,424 @@
+<template>
+  <div>
+    <div class="select-veido">
+      <el-select
+      style="margin-top:10px"
+      v-model="currentChartId"
+      placeholder="请选择"
+      @change="selectParm"
+    >
+      <el-option
+        v-for="item in parmoptions"
+        :key="item.id+''"
+        :label="item.label"
+        :value="item.id"
+      >
+      </el-option>
+    </el-select>
+    </div>
+    <div
+      ref="testLine"
+      style="width: 450px; height: 200px; margin: 0px auto"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      parmoptions: [
+        {
+          id: 1,
+          label: "三相线电压",
+        },
+        {
+          id: 2,
+          label: "三相相电流",
+        },
+      ],
+      title:'三相线电压',
+      type: ['Uab_after','Ubc_after','Uca_after'],
+      unit:'V',
+      currentChartId: 1,
+      xData: new Array(30).fill("-"),
+      y1Data: new Array(30).fill("-"),
+      y2Data: new Array(30).fill("-"),
+      y3Data: new Array(30).fill("-"),
+      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: [],
+          },
+          {
+            // 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: [],
+          },
+          {
+            // 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) {
+      console.log("vol", id);
+      // 数据清空
+      this.xData = new Array(30).fill("-");
+      this.y1Data = new Array(30).fill("-");
+      this.y2Data = new Array(30).fill("-");
+      this.y3Data = new Array(30).fill("-");
+      // 关闭以前的websocket
+      this.websocket.close();
+      // 开启一个新的
+      this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
+      this.initWebSocket();
+    },
+    // 选择要展示的参数
+    selectParm() {
+      for (let i in this.parmoptions) {
+        if (this.parmoptions[i].id == this.currentChartId) {
+          this.title = this.parmoptions[i].label;
+          break;
+        }
+      }
+      switch (this.currentChartId) {
+        // 三相线电压
+        case '1':
+          this.unit = "V";
+          this.type = ['Uab_after','Ubc_after','Uca_after'];
+          break
+          // 三相相电流
+        case '2':
+          this.unit = "A";
+          this.type = ['Ia','Ib','Ic'];
+          break
+       
+      }
+        this.count = 0;
+        this.xData = new Array(30).fill("-");
+        this.y1Data = new Array(30).fill("-");
+      this.y2Data = new Array(30).fill("-");
+      this.y3Data = new Array(30).fill("-");
+        
+  
+    },
+    addData(data) {
+      this.websocket;
+      // 先扩展数组，然后删除多余元素
+      console.log("data", data);
+      if (this.count < 30) {
+        for (let i = 0; i < data.length; i++) {
+          this.y1Data[this.count] = data[i][this.type[0]];
+          this.y2Data[this.count] = data[i][this.type[1]];
+          this.y3Data[this.count] = data[i][this.type[2]];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
+        }
+        this.count++;
+      } else {
+        for (let i = 0; i < data.length; i++) {
+          // 删除数组中的第一个项目
+          this.y1Data.shift();
+          this.y1Data.push(data[i][this.type[0]]);
+          this.y2Data.shift();
+          this.y2Data.push(data[i][this.type[1]]);
+          this.y3Data.shift();
+          this.y3Data.push(data[i][this.type[2]]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        series: [
+          {
+            name: this.unit,
+            data: this.y1Data,
+          },
+          {
+            name: this.unit,
+            data: this.y2Data,
+          },
+          {
+            name: this.unit,
+            data: this.y3Data,
+          }
+        ],
+      });
+      // console.log("this.paiqidata", this.paiqidata);
+      // console.log("this.chouqidata", this.chouqidata);
+      // console.log("this.xData", this.xData);
+    },
+    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();
+      });
+    },
+  },
+  mounted() {
+    // 先画图
+    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.initWebSocket();
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 120px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

src/views/ventilate/dataBoard/wind.vue

@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <div class="select-veido">
+      <el-select
+      style="margin-top:10px"
+      v-model="currentChartId"
+      placeholder="请选择"
+      @change="selectParm"
+    >
+      <el-option
+        v-for="item in parmoptions"
+        :key="item.id+''"
+        :label="item.label"
+        :value="item.id"
+      >
+      </el-option>
+    </el-select>
+    </div>
+    <div
+      ref="testLine"
+      style="width: 450px; height: 200px; margin: 0px auto"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      parmoptions: [
+        {
+          id: 1,
+          label: "风流",
+        },
+        {
+          id: 2,
+          label: "风速",
+        },
+      ],
+      title:'风流',
+      type: 'fengliu_after',
+      unit:'',
+      currentChartId: 1,
+      xData: new Array(30).fill("-"),
+      yData: new Array(30).fill("-"),  
+      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) {
+      console.log("wind", id);
+      // 数据清空
+      this.xData = new Array(30).fill("-");
+      this.yData = new Array(30).fill("-");
+      // 关闭以前的websocket
+      this.websocket.close();
+      // 开启一个新的
+      this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
+      this.initWebSocket();
+    },
+    // 选择要展示的参数
+    selectParm() {
+      for (let i in this.parmoptions) {
+        if (this.parmoptions[i].id == this.currentChartId) {
+          this.title = this.parmoptions[i].label;
+          break;
+        }
+      }
+      switch (this.currentChartId) {
+        // 风流
+        case '1':
+          this.unit = "";
+          this.type = "fengliu_after";
+          break
+          //风速
+        case '2':
+          this.unit = "m/s";
+          this.type = "fengsu_after";
+          break
+       
+      }
+        this.count = 0;
+        this.xData = new Array(30).fill("-");
+        this.yData = new Array(30).fill("-");
+    
+  
+    },
+    addData(data) {
+      this.websocket;
+      // 先扩展数组，然后删除多余元素
+      console.log("data", data);
+      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]);
+        }
+      }
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        series: [
+          {
+            name: this.unit,
+            data: this.y1Data,
+          }
+        ],
+      });
+      // console.log("this.paiqidata", this.paiqidata);
+      // console.log("this.chouqidata", this.chouqidata);
+      // console.log("this.xData", this.xData);
+    },
+    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();
+      });
+    },
+  },
+  mounted() {
+    // 先画图
+    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.initWebSocket();
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

src/views/ventilate/ventilate.vue

@@ -19,11 +19,16 @@
         <dataStandard></dataStandard>
       </el-tab-pane>
       <el-tab-pane
-        label="组态图"
+        label="系统图"
         name="third"
       >
         <router-view></router-view>
-        <!-- <zutai></zutai> -->
+      </el-tab-pane>
+      <el-tab-pane
+        label="数据看板"
+        name="fourth"
+      >
+        <data-board></data-board>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -34,6 +39,7 @@
 <script>
 import dataStandard from "./dataStandard";
 import systemData from "./systemData";
+import dataBoard from '@/views/ventilate/dataBoard/dataBoard'
 export default {
   name: "ventilate",
   data() {
@@ -54,6 +60,7 @@ export default {
   components: {
     dataStandard,
     systemData,
+    dataBoard
   },
 };
 </script>