large_screen/src/common/twoline.vue

<template>
	<!-- 两条曲线封装 且需要两个websocket连接 -->
	<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 {
				currentChartId: 1,
				xData: new Array(30).fill("-"),
				y1Data: new Array(30).fill("-"),
				y2Data: new Array(30).fill("-"),
				count: 0,
				myChart: null,
				option: {
        tooltip: {
          trigger: "axis",
          backgroundColor: "transparent",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(126,199,255,0)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(126,199,255,1)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(126,199,255,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          formatter: (p) => {
            let dom = `<div style="width: 79px;
	height: 110px;;color:#fff;position: relative;">
	<svg style="position: absolute;top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100"
		height="111" viewBox="0 0 80 85">
		<defs>
			<style>
				.cls-1 {
					fill: #07172c;
					fill-opacity: 0.8;
					stroke: #a7d8ff;
					stroke-linejoin: round;
					stroke-opacity: 0.2;
					stroke-width: 1px;
					fill-rule: evenodd;
				}
			</style>
		</defs>
		<path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
			transform="translate(-258.5 -592.5)" />
	</svg>
	<div style="padding: 3px 1px 3px 11px;display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;position: relative;z-index: 1;">
		<div
			style="margin-bottom: 4px;width:100%;display:${
        p[0] ? "flex" : "none"
      };justify-content:space-between;align-items:center;">
			<span style="font-size:11px;color:#7ec7ff;">${
        p[0] ? p[0].seriesName : ""
      }</span>
			<span style="font-size:11px;color:#fff;">${p[0] ? p[0].data : ""}</span>
		</div>
		<div
			style="width:100%;height:100%;display:${
        p[1] ? "flex" : "none"
      };justify-content:space-between;align-items:center;">
			<span style="font-size:11px;color:#7ec7ff;">${
        p[1] ? p[1].seriesName : ""
      }</span>
			<span style="font-size:11px;color:#fff;">${p[1] ? p[1].data : ""}</span>
		</div>
		<div
			style="width:100%;height:100%;display:${
        p[1] ? "flex" : "none"
      };justify-content:space-between;align-items:center;">
			<span style="font-size:11px;color:#7ec7ff;">${
        p[2] ? p[2].seriesName : ""
      }</span>
			<span style="font-size:11px;color:#fff;">${p[2] ? p[2].data : ""}</span>
		</div>
	</div>
</div>`;
            return dom;
          },
        },
        legend: {
          align: "left",
          right: "10%",
          top: "10%",
          type: "plain",
          textStyle: {
            color: "#7ec7ff",
            fontSize: 11,
          },
          // icon:'rect',
          itemGap: 25,
          itemWidth: 18,
          icon:
            "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",

          data: this.legend,
        },
        grid: {
          top: "15%",
          left: "10%",
          right: "10%",
          bottom: "15%",
          // containLabel: true
        },
        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",
			fontSize:15
          },
        },

        series: [
          {
            name: this.legend[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.legend[1],
            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('this.legend',this.legend[0]);
				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({
					xAxis: [{
						data: this.xData,
					}, ],
					series: [{
							name: this.legend[0],
							data: this.y1Data,
						},
						{
							name: this.legend[1],
							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>