压风系统数据看板

src/common/oneline.vue

@@ -0,0 +1,281 @@
+<template>
+  <div>
+    <div
+      ref="testLine"
+      style="width: 450px; height: 200px; margin: 0px auto"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  props: {
+    title: {
+      type:String,
+      default:''
+    },
+    id:{
+      type:Number,
+      required:true
+    },
+    unit:{
+      type:String,
+      default:''
+    },
+    type:{
+      type:String,
+      required:true
+    }
+},
+  data() {
+    return {
+      title:'',
+      type: [],
+      unit:'°C',
+      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("sep", 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/${this.id}`);
+      this.initWebSocket();
+    },
+
+    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[0]]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      this.myChart.setOption({
+    
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        series: [
+          {
+            name: this.unit,
+            data: this.yData,
+          },
+        ],
+      });
+      // 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/${this.id}`);
+    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/common/threeline.vue

@@ -0,0 +1,395 @@
+<template>
+<!-- 三条曲线封装 -->
+  <div>
+    <div
+      ref="testLine"
+      style="width: 450px; height: 200px; margin: 0px auto"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+props: {
+    title: {
+      type:String,
+      default:''
+    },
+    id:{
+      type:Number,
+      required:true
+    },
+    unit:{
+      type:String,
+      default:''
+    },
+    type:{
+      type:Array,
+      required:true
+    },
+    legend:{
+      type:Array,
+      required:true
+    },
+},
+  data() {
+    return {
+      title: this.title,
+    //   type: ["xzhou_after", "yzhou_after", "zzhou_after"],
+            type:'',
+      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: this.legend,
+          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/${this.id}`
+      );
+      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/${this.id}`);
+    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/common/twoline.vue

@@ -0,0 +1,341 @@
+<template>
+  <div>
+    <div
+      ref="testLine"
+      style="width: 450px; height: 200px; margin: 0px auto"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  props: {
+    title: {
+      type:String,
+      default:''
+    },
+    id:{
+      type:Number,
+      required:true
+    },
+    unit:{
+      type:String,
+      default:''
+    },
+    type:{
+      type:Array,
+      required:true
+    },
+    legend:{
+      type:Array,
+      required:true
+    },
+},
+  data() {
+    return {
+      title:'',
+      type: [],
+      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/${this.id}`);
+      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({
+        legend:{
+          data:this.legend
+        },
+        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/${this.id}`);
+    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/app_industrial_video/industrialVideo.vue

@@ -1,193 +1,37 @@
 <template>
- 
-    <div class="helloword">
-    <VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" :parent="true" v-on:dragging="resize">
-      <!--将这个div的宽高动态设置==VueDrangResize的宽高这样可实时完成缩放-->
-       <div id="chart" :style="{width: + vw+ 'px',height:+vh+'px'}"></div>
-       <!-- <div id="chart" :style="chartStyle"></div> -->
-       <!-- <div id="chart" style="width:100%;height:100%;"></div> -->
-             <!-- <div id="chart" style="width:200px;height:200px;"></div> -->
-        <!-- <div class="box"  id="chart" :style="{width: +vw+ 'px',height:+vh+'px'}"></div> -->
-         <!-- <div id="chart"></div> -->
-        <!-- <div id="chart" :style="chartStyle"></div> -->
-       <!-- <div :style="{width:+ vw+'px',height:+vh+'px'}" id="chart"></div> -->
-         <!-- <power style="width:100%;height:100%;position:absolute;"></power> -->
-       
-    </VueDragResize>
 
-  </div>
+    <dv-scroll-board
+      :config="config"
+      style="width:500px;height:220px"
+    />
+
+
 </template>
 
 <script>
-// import VueDraggableResizable from 'vue-draggable-resizable'
-  import VueDragResize from 'vue-drag-resize';
-  import power from '@/components/mining/power.vue'
-    import coal_output from '@/components/mining/coal_output.vue'
 export default {
-  name: "industrialVideo",
-  data(){
-    return{
-        vw: 0,
-      vh: 0,
-      top: 0,
-      left: 0,
-      chartStyle:{
-        width:"",
-        height:""
-      }
-
-    }
-  },
-  mounted(){
-    this.$nextTick(()=>{
-      this.initChart()
-    })
- 
-    },
-  watch:{
-    vw(newName, oldName) {
-    this.myChart.resize();
-  
-      console.log(this.chartStyle.width)
-
-    },
-    vh(newName, oldName) {
-      this.myChart.resize();
-  },
-  },
-  created() {
-    this.vw = 200 + "px";
-    this.vh = 200 + "px";
-  },
- methods: {
-    resize(newRect) {
-      this.vw = newRect.width;
-      this.vh = newRect.height;
-      this.top = newRect.top;
-      this.left = newRect.left;
-      // this.$echarts.resize;
-      // this.myChart.resize;
-    },
-
-    initChart(){
-      this.myChart = this.$echarts.init(document.getElementById('chart'));
-      this.myChart.setOption({
-                    title: {
-                        text: '采煤机平均功率',
-                        textStyle: {
-                            fontSize: 12,
-                            fontWeight: 'bold'
-                        }
-                    },
-                    tooltip: {
-                        trigger: 'axis',
-                        // axisPointer: {
-                        //     type: 'cross',
-                        //     label: {
-                        //         backgroundColor: '#6a7985'
-                        //     }
-                        // }
-                    },
-                    legend: {
-                        data: ['单位：KW/min']
-                    },
-                    grid: {
-                        top: '15%',
-                        left: '1%',
-                        right: '4%',
-                        bottom: '3%',
-                        containLabel: true
-                    },
-                    xAxis: [{
-                        type: 'category',
-                        boundaryGap: false,
-                        data: ['16:19', '16:21', '16:23', '16:25', '16:27'],
-                        // 修改x轴文字颜色和大小
-                        axisLabel: {
-                            textStyle: {
-                                color: "rgba(187, 174, 200, 1)",
-                                fontSize: "12"
-                            }
-                        }
-                    }],
-                    yAxis: [{
-                            type: 'value',
-                            // axisTick: { show: false },
-                            axisLine: {
-                                // 修改Y轴坐标轴颜色
-                                lineStyle: {
-                                    color: "rgba(187, 174, 200, 1)",
-
-                                }
-                            },
-                            axisLabel: {
-                                //修改y轴数据颜色
-                                textStyle: {
-                                    color: "rgba(187, 174, 200, 1)",
-                                    fontSize: 12
-                                }
-                            },
-                            // 修改分割线的颜色
-                            splitLine: {
-                                lineStyle: {
-                                    color: "rgba(199, 186, 212, 0.3)",
-                                    // color: "rgba(0, 255, 0, 1.0)",
-                                }
-                            }
-                        }
-
-                    ],
-                    series: [{
-                        name: '采煤机平均功率',
-                        type: 'line',
-                        smooth: true,
-                        // 单独修改当前线条的样式
-                        lineStyle: {
-                            color: "#0cff30",
-                            width: "2"
-                        },
-                        // 设置拐点
-                        symbol: "circle",
-                        // 拐点大小
-                        symbolSize: 3,
-                        // 开始不显示拐点， 鼠标经过显示
-                        showSymbol: false,
-                        // 设置拐点颜色以及边框
-                        itemStyle: {
-                            color: "#0184d5",
-                            borderColor: "rgba(0, 170, 255, 0.1)",
-                            borderWidth: 6
-                        },
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [500, 400, 200, 600, 500, 800, 600]
-                    }]
-                });
-
-    },
-    // resize(){
-    //   this.myChart.resize;
-    // }
-  },
-  components: {
-          VueDragResize,
-           power,
-            coal_output,
-            // VueDraggableResizable 
+  data() {
+    return {
+      config: {
+        header: ["列1", "列2", "列3"],
+        data: [
+          ["行1列1", "行1列2", "行1列3"],
+          ["行2列1", "行2列2", "行2列3"],
+          ["行3列1", "行3列2", "行3列3"],
+          ["行4列1", "行4列2", "行4列3"],
+          ["行5列1", "行5列2", "行5列3"],
+          ["行6列1", "行6列2", "行6列3"],
+          ["行7列1", "行7列2", "行7列3"],
+          ["行8列1", "行8列2", "行8列3"],
+          ["行9列1", "行9列2", "行9列3"],
+          ["行10列1", "行10列2", "行10列3"],
+        ],
+        
       },
-
-
-}
+    };
+  },
+};
 </script>
 
-<style scoped>
-.box{
-position: relative;
-}
-
-
-</style>
-
-    
-      
+<style>
+</style>

src/views/compressed/compressed.vue

@@ -4,12 +4,16 @@
     <el-tab-pane label="数据标准" name="second">
       <dataStandard></dataStandard>
     </el-tab-pane>
+    <el-tab-pane label="数据看板" name="fourth">
+        <data-board></data-board>
+      </el-tab-pane>
   </el-tabs>
 </template>
 
 
 <script>
 import dataStandard from "./dataStandard/dataStandard";
+import dataBoard from './dataBoard/dataBoard'
     export default {
       name: "compressed",
       data() {
@@ -24,6 +28,7 @@ import dataStandard from "./dataStandard/dataStandard";
       },
       components: {
             dataStandard,
+            dataBoard
      
       }
     };

src/views/compressed/dataBoard/dataBoard.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="main">
+    <div class="header">
+      <div class="select-veido">
+        <el-select
+          style="margin-top: 10px"
+          v-model="currentComId"
+          placeholder="请选择"
+          @change="selectChart"
+          :popper-append-to-body="false"
+        >
+          <el-option
+            v-for="item in comOptions"
+            :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">
+            <!-- 电机电流 -->
+            <oneline ref="current" :id="23" title="电机电流" unit="A" type="dianjidianliu_after"></oneline>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="top_center">
+            <!-- 三相绕组温度 -->
+            <threeline ref="winding" :id="23" title="三相绕组温度" unit="°C" :type="windingType" :legand="windingLegand"></threeline>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="top_right">
+            <!-- 电机振动 -->
+            <threeline ref="vibrate" :id="23" title="电机振动" unit="mm/s" :type="vibrateType" :legand="vibrateLegand"></threeline>
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+    <div class="center">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <div class="center_left">
+            <!-- 压风机及风包压力 -->
+            <twoline ref="pressure" :id="23" title="压风机及风包压力" unit="Mpa" :type="pressureType" :legand="pressureLegand"></twoline>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="center_center">
+            <!-- 压风机及风包温度 -->
+            <twoline ref="temperature" :id="23" title="压风机及风包温度" unit="°C" :type="temperatureType" :legand="temperatureLegand"></twoline>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="center_right">
+            <!-- 电机前后轴温 -->
+            <twoline ref="bearing" :id="23" title="电机前后轴温" unit="°C" :type="bearingType" :legand="bearingLegand"></twoline>
+          </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 oneline from '@/common/oneline'
+import twoline from '@/common/twoline'
+import threeline from '@/common/threeline'
+import faultAlarm from "./faultAlarm";
+import runningMsg from "./runningMsg";
+import runningMsg1 from "./runningMsg1";
+export default {
+  data() {
+    return {
+      currentComId: "1号压风机",
+      comOptions: [
+        {
+          id: "1",
+          label: "1号压风机",
+        },
+        {
+          id: "2",
+          label: "2号压风机",
+        },
+        {
+          id: "3",
+          label: "3号压风机",
+        },
+      ],
+      windingType:["u1_after","v1_after","w1_after"],
+      windingLegand:["U1相温度","V1相温度","W1相温度"],
+      vibrateType:["xzhou_after","yzhou_after","zzhou_after"],
+      vibrateLegand:["X轴振动","Y轴振动","Z轴振动"],
+      pressureType:["yafengjiyali_after","fengbaoyali_after"],
+      pressureLegand:["压风机压力","风包压力"],
+      temperatureType:["yafengjiwendu_after","fengbaowendu_after"],
+      temperatureLegand:["压风机温度","风包温度"],
+      bearingType:["qianzhouwen_after","houzhouwen_after"],
+      bearingLegand:["电机前轴温","电机后轴温"]
+
+    };
+  },
+  methods: {
+    selectChart(val) {
+      console.log("val", val);
+      this.$refs.current.idChange(val);
+      this.$refs.winding.idChange(val);
+      this.$refs.vibrate.idChange(val);
+      this.$refs.pressure.idChange(val);
+      this.$refs.temperature.idChange(val);
+      this.$refs.bearing.idChange(val);
+      //   this.$refs.faultAlarm.idChange(val);
+      //   this.$refs.runningMsg.idChange(val);
+    },
+  },
+  components: {
+    oneline,
+    twoline,
+    threeline,
+    faultAlarm,
+    runningMsg,
+    runningMsg1
+  },
+};
+</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/compressed/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/compressed/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/compressed/dataBoard/runningMsg1.vue

@@ -0,0 +1,51 @@
+<template>
+
+    <dv-scroll-board
+      :config="config"
+      style="width:500px;height:180px;padding:10px"
+    />
+
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      config: {
+        header: ["列1", "列2", "列3"],
+        data: [
+          ["行1列1", "行1列2", "行1列3"],
+          ["行2列1", "行2列2", "行2列3"],
+          ["行3列1", "行3列2", "行3列3"],
+          ["行4列1", "行4列2", "行4列3"],
+          ["行5列1", "行5列2", "行5列3"],
+          ["行6列1", "行6列2", "行6列3"],
+          ["行7列1", "行7列2", "行7列3"],
+          ["行8列1", "行8列2", "行8列3"],
+          ["行9列1", "行9列2", "行9列3"],
+          ["行10列1", "行10列2", "行10列3"],
+        ],
+        evenRowBGC:'#011667',
+        oddRowBGC:'#051445',
+        headerBGC:'#021660',
+        rowNum: 4,
+        
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+// .dv-scroll-board {
+
+//     color: #F3DB5C;
+//     /deep/ .header-item{
+//       font-size: 1em;
+//       text-align: center;
+//       white-space: nowrap;
+//       color:#FFF !important;
+//     }
+// }
+</style>