update right table

2023-12-29 12:33:25 +08:00
parent a73d61fad8
commit 0cd25a6972
9 changed files with 543 additions and 168 deletions
--- a/src/components/Common/NavMenu/index.jsx
+++ b/src/components/Common/NavMenu/index.jsx
@@ -7,7 +7,7 @@ export default function CenterMenu({ active, onChangeActive }) {
 		['窑炉内部', '/kilnInner'],
 		['退火监测', '/stopFire'],
 		['质检统计', '/quailtyCheck'],
-		// ['能耗分析', '/energyCost'],
+		['能耗分析', '/energyCost'],
 	];
 	return (
 		<div className={`${cls.centerMenu} flex`}>
--- a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
@@ -1,37 +1,160 @@
-import GraphBase from '../../../Common/GraphBase';
-import ReactECharts from 'echarts-for-react';
-import getOptions from '../../../../hooks/getChartOption';
+import GraphBase from "../../../Common/GraphBase";
+import ReactECharts from "echarts-for-react";
+// import getOptions from "../../../../hooks/getChartOption";
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import * as echarts from "echarts";

 function Gas(props) {
-	function handleSwitch(v) {
-		// console.log('switched ', v);
-	}
+  const elecTrend = useSelector((state) => state.energy.trend.natGas2);
+  const [period, setPeriod] = useState("周");

-	function handleDateChange(v) {
-		// console.log('date ', v);
-	}
+  const options = getOptions(
+    { 周: "week", 月: "month", 年: "year" }[period],
+    elecTrend ?? { week: [], month: [], year: [] }
+  );

-	return (
-		<GraphBase
-			icon="battery"
-			title="焦炉煤气"
-			desc="能耗趋势图"
-			switchOptions={true}
-			onSwitch={handleSwitch}
-			dateOptions={['日', '周', '月', '年']}
-			legend={['总量']}
-			onDateChange={handleDateChange}
-			size={['long', 'short']}
-		>
-			{/* real echarts here */}
-			<ReactECharts
-				key={Math.random()}
-				option={getOptions([[21, 4, 74, 72, 9, 59, 63]], '氧气')}
-				style={{ height: '100%' }}
-			/>
-			{/* real table data here  */}
-		</GraphBase>
-	);
+  function handleSwitch(v) {
+    // console.log('switched ', v);
+  }
+
+  function handleDateChange(v) {
+    // console.log('date ', v);
+    setPeriod(v);
+  }
+
+  return (
+    <GraphBase
+      icon="battery"
+      title="天然气II"
+      desc="能耗趋势图"
+      switchOptions={false}
+      onSwitch={handleSwitch}
+      defaultSelect={period}
+      dateOptions={["周", "月", "年"]}
+      //   legend={["总量"]}
+      onDateChange={handleDateChange}
+      size={["long", "short"]}
+    >
+      {/* real echarts here */}
+      <ReactECharts
+        key={Math.random()}
+		option={options}
+        // option={getOptions([[21, 4, 74, 72, 9, 59, 63]], "氧气")}
+        style={{ height: "100%" }}
+      />
+      {/* real table data here  */}
+    </GraphBase>
+  );
 }

 export default Gas;
+
+function getOptions(period, trend) {
+  console.log("getOptions", period, trend);
+  // export default function getOptions(seriesData, name) {
+  const colors = [
+    "#FFD160",
+    "#12FFF5",
+    "#2760FF",
+    "#E80091",
+    "#8064ff",
+    "#ff8a3b",
+    "#8cd26d",
+    "#2aa1ff",
+  ];
+  return {
+    color: colors,
+    grid: { top: 38, right: 12, bottom: 20, left: 48 },
+    legend: {
+      show: false,
+      icon: "roundRect",
+      top: 10,
+      right: 10,
+      padding: 0,
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 3,
+      height: 8,
+      textStyle: {
+        color: "#DFF1FE",
+        fontSize: 10,
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: Array(period == "week" ? 7 : period == "year" ? 12 : 30)
+        .fill(1)
+        .map((_, index) => {
+          const today = new Date();
+          const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+            dtimestamp
+          ).getDate()}`;
+        })
+        .reverse(),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位m³/h",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 10,
+        align: "right",
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#213259",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#213259a0",
+        },
+      },
+    },
+    series: {
+      data: trend[period],
+      type: "line",
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: colors[0] + "40" },
+          { offset: 0.5, color: colors[0] + "20" },
+          { offset: 1, color: colors[0] + "00" },
+        ]),
+      },
+    },
+    // series: seriesData.map((arr, index) => ({
+    // 	name: index + 1 + '#' + name,
+    // 	data: arr,
+    // 	type: 'line',
+    // 	areaStyle: {
+    // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    // 			{ offset: 0, color: colors[index] + '40' },
+    // 			{ offset: 0.5, color: colors[index] + '20' },
+    // 			{ offset: 1, color: colors[index] + '00' },
+    // 		]),
+    // 	},
+    // })),
+    tooltip: {
+      trigger: "axis",
+    },
+  };
+}
--- a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
@@ -1,37 +1,160 @@
-import GraphBase from '../../../Common/GraphBase';
-import ReactECharts from 'echarts-for-react';
-import getOptions from '../../../../hooks/getChartOption';
+import GraphBase from "../../../Common/GraphBase";
+import ReactECharts from "echarts-for-react";
+// import getOptions from "../../../../hooks/getChartOption";
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import * as echarts from "echarts";

 function ElecCost(props) {
-	function handleSwitch(v) {
-		// console.log('switched ', v);
-	}
+  const elecTrend = useSelector((state) => state.energy.trend.elec);
+  const [period, setPeriod] = useState("周");

-	function handleDateChange(v) {
-		// console.log('date ', v);
-	}
+  const options = getOptions(
+    { 周: "week", 月: "month", 年: "year" }[period],
+    elecTrend ?? { week: [], month: [], year: [] }
+  );

-	return (
-		<GraphBase
-			icon="battery"
-			title="电耗能"
-			desc="能耗趋势图"
-			switchOptions={true}
-			onSwitch={handleSwitch}
-			dateOptions={['日', '周', '月', '年']}
-			legend={['总量']}
-			onDateChange={handleDateChange}
-			size={['long', 'short']}
-		>
-			{/* real echarts here */}
-			<ReactECharts
-				key={Math.random()}
-				option={getOptions([[112, 73, 79, 82, 30, 105, 87]], '氧气')}
-				style={{ height: '100%' }}
-			/>
-			{/* real table data here  */}
-		</GraphBase>
-	);
+  function handleSwitch(v) {
+    // console.log('switched ', v);
+  }
+
+  function handleDateChange(v) {
+    setPeriod(v);
+  }
+
+  return (
+    <GraphBase
+      icon="battery"
+      title="电耗能"
+      desc="能耗趋势图"
+      switchOptions={false}
+      onSwitch={handleSwitch}
+      defaultSelect={period}
+      dateOptions={["周", "月", "年"]}
+      //   legend={["总量"]}
+      onDateChange={handleDateChange}
+      size={["long", "short"]}
+    >
+      {/* real echarts here */}
+      <ReactECharts
+        key={Math.random()}
+        option={options}
+        // option={getOptions([[112, 73, 79, 82, 30, 105, 87]], "氧气")}
+        style={{ height: "100%" }}
+      />
+      {/* real table data here  */}
+    </GraphBase>
+  );
 }

 export default ElecCost;
+
+function getOptions(period, trend) {
+  console.log("getOptions", period, trend);
+  // export default function getOptions(seriesData, name) {
+  const colors = [
+    "#FFD160",
+    "#12FFF5",
+    "#2760FF",
+    "#E80091",
+    "#8064ff",
+    "#ff8a3b",
+    "#8cd26d",
+    "#2aa1ff",
+  ];
+  return {
+    color: colors,
+    grid: { top: 38, right: 12, bottom: 20, left: 48 },
+    legend: {
+      show: false,
+      icon: "roundRect",
+      top: 10,
+      right: 10,
+      padding: 0,
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 3,
+      height: 8,
+      textStyle: {
+        color: "#DFF1FE",
+        fontSize: 10,
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: trend[period].map((item) => item.time),
+      // data: Array(7)
+      // 	.fill(1)
+      // 	.map((_, index) => {
+      // 		const today = new Date();
+      // 		const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+      // 		return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+      // 			dtimestamp,
+      // 		).getDate()}`;
+      // 	})
+      // 	.reverse(),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位m³/h",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 10,
+        align: "right",
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#213259",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#213259a0",
+        },
+      },
+    },
+    series: {
+      data: trend[period].map((item) => item.qty),
+      type: "line",
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: colors[0] + "40" },
+          { offset: 0.5, color: colors[0] + "20" },
+          { offset: 1, color: colors[0] + "00" },
+        ]),
+      },
+    },
+    // series: seriesData.map((arr, index) => ({
+    // 	name: index + 1 + '#' + name,
+    // 	data: arr,
+    // 	type: 'line',
+    // 	areaStyle: {
+    // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    // 			{ offset: 0, color: colors[index] + '40' },
+    // 			{ offset: 0.5, color: colors[index] + '20' },
+    // 			{ offset: 1, color: colors[index] + '00' },
+    // 		]),
+    // 	},
+    // })),
+    tooltip: {
+      trigger: "axis",
+    },
+  };
+}
--- a/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
@@ -1,44 +1,48 @@
-import cls from './index.module.css';
-import GradientText from '../../../Common/GradientText';
+import cls from "./index.module.css";
+import GradientText from "../../../Common/GradientText";
+import { useSelector } from "react-redux";

 function Energy(props) {
-	return (
-		<div className={' ' + cls.layout} style={{ color: '#fff' }}>
-			<span
-				className={cls.shadowBorder}
-				style={{
-					gridRow: '1 / 3',
-					paddingTop: '38px',
-					paddingLeft: '32px',
-					userSelect: 'none',
-				}}
-			>
-				<GradientText text="能源" />
-			</span>
-			<span
-				className={cls.shadowBorder + ' ' + cls.infoText}
-				style={{
-					gridRow: '1 / 3',
-				}}
-			>
-				<span style={{ lineHeight: 2.5 }}>余热发电</span>
-				<span style={{ lineHeight: 2.5 }}>992Kwh</span>
-			</span>
+  const energyInfo = useSelector((state) => state.energy?.info);
+  return (
+    <div className={" " + cls.layout} style={{ color: "#fff" }}>
+      <span
+        className={cls.shadowBorder}
+        style={{
+          gridRow: "1 / 3",
+          paddingTop: "38px",
+          paddingLeft: "32px",
+          userSelect: "none",
+        }}
+      >
+        <GradientText text="能源" />
+      </span>
+      <span
+        className={cls.shadowBorder + " " + cls.infoText}
+        style={{
+          fontSize: "22px",
+          lineHeight: "2.5",
+          gridRow: "1 / 3",
+        }}
+      >
+        <span style={{ lineHeight: 2.5 }}>余热发电</span>
+        <span style={{ lineHeight: 2.5 }}>{energyInfo?.elecQty1 || 0}kWh</span>
+      </span>

-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
-				水耗量: 32Km³
-			</span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
-				天然气I: 92m³
-			</span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
-				电耗量: 92Km³
-			</span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
-				天然气II: 92m³
-			</span>
-		</div>
-	);
+      <span className={cls.shadowBorder + " " + cls.infoText}>
+        水耗量: {energyInfo?.waterQty || 0}Km³
+      </span>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
+        天然气I: {energyInfo?.ngQty1 || 0}
+      </span>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
+        电耗量: {energyInfo?.elecQty2 || 0}kWh
+      </span>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
+        天然气II: {energyInfo?.ngQty2 || 0}
+      </span>
+    </div>
+  );
 }

 export default Energy;
--- a/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
@@ -13,8 +13,8 @@

 .infoText {
 	text-align: center;
-	font-size: 24px;
-	line-height: 2.2;
+	font-size: 20px;
+	line-height: 2.5;
 	/* line-height: 20px; */
 	letter-spacing: 1px;
 	user-select: none;
--- a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
@@ -1,37 +1,160 @@
-import GraphBase from '../../../Common/GraphBase';
-import ReactECharts from 'echarts-for-react';
-import getOptions from '../../../../hooks/getChartOption';
+import GraphBase from "../../../Common/GraphBase";
+import ReactECharts from "echarts-for-react";
+// import getOptions from "../../../../hooks/getChartOption";
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import * as echarts from "echarts";

 function NatGas(props) {
-	function handleSwitch(v) {
-		// console.log('switched ', v);
-	}
+  const elecTrend = useSelector((state) => state.energy.trend.natGas1);
+  const [period, setPeriod] = useState("周");

-	function handleDateChange(v) {
-		// console.log('date ', v);
-	}
+  const options = getOptions(
+    { 周: "week", 月: "month", 年: "year" }[period],
+    elecTrend ?? { week: [], month: [], year: [] }
+  );

-	return (
-		<GraphBase
-			icon="battery"
-			title="天然气"
-			desc="能耗趋势图"
-			switchOptions={true}
-			onSwitch={handleSwitch}
-			dateOptions={['日', '周', '月', '年']}
-			legend={['总量']}
-			onDateChange={handleDateChange}
-			size={['long', 'short']}
-		>
-			{/* real echarts here */}
-			<ReactECharts
-				key={Math.random()}
-				option={getOptions([[91, 69, 5, 10, 21, 46, 24]], '氧气')}
-				style={{ height: '100%' }}
-			/>
-			{/* real table data here  */}
-		</GraphBase>
-	);
+  function handleSwitch(v) {
+    // console.log('switched ', v);
+  }
+
+  function handleDateChange(v) {
+    setPeriod(v);
+    // console.log('date ', v);
+  }
+
+  return (
+    <GraphBase
+      icon="battery"
+      title="天然气I"
+      desc="能耗趋势图"
+      switchOptions={false}
+      onSwitch={handleSwitch}
+      defaultSelect={period}
+      dateOptions={["周", "月", "年"]}
+      //   legend={["总量"]}
+      onDateChange={handleDateChange}
+      size={["long", "short"]}
+    >
+      {/* real echarts here */}
+      <ReactECharts
+        key={Math.random()}
+        option={options}
+        // option={getOptions([[91, 69, 5, 10, 21, 46, 24]], "氧气")}
+        style={{ height: "100%" }}
+      />
+      {/* real table data here  */}
+    </GraphBase>
+  );
 }

 export default NatGas;
+
+function getOptions(period, trend) {
+  console.log("getOptions", period, trend);
+  // export default function getOptions(seriesData, name) {
+  const colors = [
+    "#FFD160",
+    "#12FFF5",
+    "#2760FF",
+    "#E80091",
+    "#8064ff",
+    "#ff8a3b",
+    "#8cd26d",
+    "#2aa1ff",
+  ];
+  return {
+    color: colors,
+    grid: { top: 38, right: 12, bottom: 20, left: 48 },
+    legend: {
+      show: false,
+      icon: "roundRect",
+      top: 10,
+      right: 10,
+      padding: 0,
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 3,
+      height: 8,
+      textStyle: {
+        color: "#DFF1FE",
+        fontSize: 10,
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: Array(period == "week" ? 7 : period == "year" ? 12 : 30)
+        .fill(1)
+        .map((_, index) => {
+          const today = new Date();
+          const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+            dtimestamp
+          ).getDate()}`;
+        })
+        .reverse(),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位m³/h",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 10,
+        align: "right",
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#213259",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#213259a0",
+        },
+      },
+    },
+    series: {
+      data: trend[period],
+      type: "line",
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: colors[0] + "40" },
+          { offset: 0.5, color: colors[0] + "20" },
+          { offset: 1, color: colors[0] + "00" },
+        ]),
+      },
+    },
+    // series: seriesData.map((arr, index) => ({
+    // 	name: index + 1 + '#' + name,
+    // 	data: arr,
+    // 	type: 'line',
+    // 	areaStyle: {
+    // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    // 			{ offset: 0, color: colors[index] + '40' },
+    // 			{ offset: 0.5, color: colors[index] + '20' },
+    // 			{ offset: 1, color: colors[index] + '00' },
+    // 		]),
+    // 	},
+    // })),
+    tooltip: {
+      trigger: "axis",
+    },
+  };
+}
--- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx
@@ -1,37 +1,39 @@
-import cls from './index.module.css';
-import GradientText from '../../../Common/GradientText';
+import cls from "./index.module.css";
+import GradientText from "../../../Common/GradientText";
+import { useSelector } from "react-redux";

 function SmokeHandle(props) {
-	return (
-		<div className={' ' + cls.smoke} style={{ color: '#fff' }}>
-			<span
-				className={cls.shadowBorder}
-				style={{
-					gridRow: '1 / 3',
-					paddingTop: '38px',
-					paddingLeft: '32px',
-					userSelect: 'none',
-				}}
-			>
-				<GradientText text="烟气处理" />
-			</span>
-			<span
-				className={cls.shadowBorder + ' ' + cls.infoText}
-				style={{ letterSpacing: '12px' }}
-			>
-				氧气含量: <span style={{ letterSpacing: '1px' }}>80%</span>
-			</span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
-				一氧化氮排放浓度: 20mg/m³
-			</span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
-				二氧化硫排放浓度: 20mg/m³
-			</span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
-				二氧化氮排放浓度: 20mg/m³
-			</span>
-		</div>
-	);
+  const smokeInfo = useSelector((state) => state.smoke?.info);
+  return (
+    <div className={" " + cls.smoke} style={{ color: "#fff" }}>
+      <span
+        className={cls.shadowBorder}
+        style={{
+          gridRow: "1 / 3",
+          paddingTop: "38px",
+          paddingLeft: "32px",
+          userSelect: "none",
+        }}
+      >
+        <GradientText text="烟气处理" />
+      </span>
+      <span
+        className={cls.shadowBorder + " " + cls.infoText}
+        style={{ letterSpacing: "12px" }}
+      >
+        氧气含量: {smokeInfo?.O2_float || 0}%
+      </span>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
+        氮氧化物浓度: {smokeInfo?.NOX_float || 0}mg/m³
+      </span>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
+        二氧化硫浓度: {smokeInfo?.SO2_float || 0}mg/m³
+      </span>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
+        颗粒物浓度: {smokeInfo?.dust_float || 0}mg/m³
+      </span>
+    </div>
+  );
 }

 export default SmokeHandle;
--- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css
@@ -13,8 +13,8 @@

 .infoText {
 	text-align: center;
-	font-size: 24px;
-	line-height: 2.2;
+	font-size: 20px;
+	line-height: 2.5;
 	/* line-height: 20px; */
 	letter-spacing: 1px;
 	user-select: none;
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -63,15 +63,15 @@ new XClient(
 new XClient(
  // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
  "ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser,
-  "CUTTING_DATA",
+  "CUTTING_DATA",   
  cuttingHandler
 );

 // 烟气处理相关数据
 new XClient(
  // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
-  // "ws://10.70.2.2:8080/websocket/message?userId=GAS" + newUser,
-  "ws://192.168.1.62:48082/websocket/message?userId=GAS" + newUser,
+  "ws://10.70.2.2:8080/websocket/message?userId=GAS" + newUser,
+  // "ws://192.168.1.62:48082/websocket/message?userId=GAS" + newUser,
  "SMOKE_DATA",
  smokeHandler
 );