large_screen/src/views/ventilate/dataBoard/volAndCurrent.vue

<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;
          },
        },
        grid: {
          top: "15%",
          left: "10%",
          right: "10%",
          bottom: "1%",
          containLabel: true,
        },
        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, 170],
          textStyle: {
            fontWeight: "normal", //标题颜色
            color: "#4ADEFE",
            fontSize: 15,
          },
        },

        series: [
          {
            name: this.type[0],
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: "rgba(255, 102, 102,1)", // 线条颜色
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: "rgba(255, 102, 102,1)",
              borderColor: "#646ace",
              borderWidth: 2,
            },
            tooltip: {
              show: true,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(255, 102, 102,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 102, 102, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: [],
          },
          {
            name: this.type[1],
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: "rgba(255, 255, 0,1)", // 线条颜色
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: "rgba(255, 255, 0,1)",
              borderColor: "#646ace",
              borderWidth: 2,
            },
            tooltip: {
              show: true,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(255, 255, 0,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 255, 0, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(255, 255, 0, 0.5)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: [],
          },
          {
            name: this.type[2],
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: "rgba(0, 102, 153,1)", // 线条颜色
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: "rgba(0, 102, 153,1)",
              borderColor: "#3578e5",
              borderWidth: 2,
            },
            tooltip: {
              show: true,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 102, 153,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 102, 153, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 102, 153, 0.5)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            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>