large_screen/src/components/tunneling/temporature.vue

<template>
  <div
    id="tempChart"
    style="width: 100%;height: 150px;"
  ></div>
</template>

<script>
import { mapState } from "vuex";
var TP_value = 20.3;
var kd = [];
var Gradient = [];
var leftColor = "";
var showValue = 60;
var boxPosition = [65, 0];
var TP_txt = "";
// 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
for (let i = 0, len = 80; i <= len; i += 1) {
  if (i < 10) {
    kd.push("");
  } else if ((i - 10) % 10 === 0) {
    kd.push("-3");
  } else {
    kd.push("-1");
  }
}
//中间线的渐变色和文本内容
if (TP_value > 24) {
  TP_txt = "温度偏高";
  Gradient.push(
    {
      offset: 0,
      color: "#93FE94",
    },
    {
      offset: 0.5,
      color: "#E4D225",
    },
    {
      offset: 1,
      color: "#E01F28",
    }
  );
} else if (TP_value >= 14) {
  TP_txt = "温度正常";
  Gradient.push(
    {
      offset: 0,
      color: "#93FE94",
    },
    {
      offset: 1,
      color: "#E4D225",
    }
  );
} else {
  TP_txt = "温度偏低";
  Gradient.push({
    offset: 1,
    color: "#93FE94",
  });
}
if (TP_value > 80) {
  showValue = 80;
} else {
  if (TP_value < 0) {
    showValue = 0;
  } else {
    showValue = TP_value + 10;
  }
}
if (TP_value < 0) {
  boxPosition = [65, -120];
}
leftColor = Gradient[Gradient.length - 1].color;
// 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10

export default {
  data() {
    return {
      showValue: "",
      chartInstance: null,

      allData: null, // 服务器返回的数据

      currentPage: 1, //当前显示的页数， 当修改页数时， 数据动态刷新

      totalPage: 0, //一共多少也
      timerId: null, //定时器
    };
  },
  mounted() {
    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/46`);
    this.initWebSocket();
    this.initChart();
    this.updateChart();

    // this.getData()
    //  对窗口大小变化的事件进行监听
    // window.addEventListener('resize', this.screenAdapter)
  },
  computed: {
    ...mapState(["websocketIP"]),
  },

  methods: {
    //初始化echarts实例对象

    initChart() {
      this.chartInstance = this.$echarts.init(
        document.getElementById("tempChart")
      );

      //对图表对象进行鼠标事件监听
      this.chartInstance.on("mousecver", () => {
        this.clearInterval(this.timerId);
      });
      this.chartInstance.on("mouseout", () => {
        this.startInterval();
      });
    },

    updateChart() {
      // 每一页显示1个数据， 获取1个数据
      // const start = (this.currentPage - 1) * 1
      // const end = this.currentPage * 1
      // const showData = this.allData.slice(start, end)
      // const showValue = showData[0].wendu-10
      // const arrayData = this.showData.map((item) =>{
      //     return item.value
      // })
      // showValue = arrayData
      const option = {
        grid: {
          x: 60, //左侧与y轴的距离
          y: -50, //top部与x轴的距离
          x2: -120, //右侧与y轴的距离
          y2: 20, //bottom部与x轴的距离
        },
        // backgroundColor: '#0C2F6F',
        title: {
          text: "油缸温度",
          show: true,
          textStyle: {
            color: "pink",
          },
        },
        yAxis: [
          {
            show: false,
            data: [],
            min: 0,
            max: 120,
            axisLine: {
              show: false,
            },
          },
          {
            show: false,
            min: 0,
            max: 90,
          },
        ],
        xAxis: [
          {
            show: false,
            min: -10,
            max: 80,
            data: [],
          },
          {
            show: false,
            min: -10,
            max: 80,
            data: [],
          },
          {
            show: false,
            min: -10,
            max: 80,
            data: [],
          },
          {
            show: false,
            min: -5,
            max: 80,
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            // 对应上面XAxis的第一个对象配置
            xAxisIndex: 0,
            // data: arrayData[1],
            data: [
              {
                value: this.showValue,
              },
            ],
            barWidth: 8,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient),
              },
            },
            z: 2,
          },
          {
            name: "白框",
            type: "bar",
            xAxisIndex: 1,
            barGap: "-100%",
            data: [80],
            barWidth: 14,
            itemStyle: {
              normal: {
                color: "#0C2E6D",
                barBorderRadius: 50,
              },
            },
            z: 1,
          },
          {
            name: "外框",
            type: "bar",
            xAxisIndex: 2,
            barGap: "-100%",
            data: [81],
            barWidth: 24,
            itemStyle: {
              normal: {
                color: "#4577BA",
                barBorderRadius: 50,
              },
            },
            z: 0,
          },
          {
            name: "圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 0,
            symbolSize: 20,
            itemStyle: {
              normal: {
                color: "#93FE94",
                opacity: 1,
              },
            },
            series: {
              data: [
                {
                  value: this.showValue,
                },
              ],
            },
            z: 2,
          },
          {
            name: "白圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 1,
            symbolSize: 24,
            itemStyle: {
              normal: {
                color: "#0C2E6D",
                opacity: 1,
              },
            },

            z: 1,
          },
          {
            name: "外圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 2,
            symbolSize: 30,
            itemStyle: {
              normal: {
                color: "#4577BA",
                opacity: 1,
              },
            },
            z: 0,
          },
          {
            name: "刻度",
            type: "bar",
            yAxisIndex: 0,
            xAxisIndex: 3,
            label: {
              normal: {
                show: true,
                position: "left",
                distance: 10,
                color: "white",
                fontSize: 14,
                formatter: function (params) {
                  if (params.dataIndex > 80 || params.dataIndex < 10) {
                    return "";
                  } else {
                    if ((params.dataIndex - 10) % 10 === 0) {
                      return params.dataIndex - 10;
                    } else {
                      return "";
                    }
                  }
                },
              },
            },
            barGap: "-100%",
            data: kd,
            barWidth: 1,
            itemStyle: {
              normal: {
                color: "white",
                barBorderRadius: 120,
              },
            },
            z: 0,
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    addData(data) {
      //    console.log(data);
      this.showValue = data.map((item) => item["youwen_after"])[0];

      console.log(this.showValue);
      this.chartInstance.setOption({
        series: [
          {
            name: "条",
            type: "bar",
            // 对应上面XAxis的第一个对象配置
            xAxisIndex: 0,
            data: [
              {
                value: Number(this.showValue),
              },
            ],
          },
          {
            name: "白框",
            type: "bar",
            xAxisIndex: 1,
            barGap: "-100%",
            data: [100],
            barWidth: 14,
            itemStyle: {
              normal: {
                color: "#0C2E6D",
                barBorderRadius: 50,
              },
            },
            z: 1,
          },
          {
            name: "外框",
            type: "bar",
            xAxisIndex: 2,
            barGap: "-100%",
            data: [101],
          },
          {
            name: "圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 0,
            symbolSize: 20,
            series: {
              data: [
                {
                  value: showValue,
                },
              ],
            },
          },
          {
            name: "白圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0],
            series: {
              data: [
                {
                  value: showValue,
                },
              ],
            },
          },
          {
            name: "外圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 2,
            symbolSize: 30,
            series: {
              data: [
                {
                  value: showValue,
                },
              ],
            },
            z: 0,
          },
          {
            name: "刻度",
            type: "bar",
            yAxisIndex: 0,
            xAxisIndex: 3,
            barGap: "-100%",
          },
        ],
      });
    },
    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();
      });
    },
  },
};
</script>

<style scoped>
</style>