1.合并机械分厂环境

src/views/generalEnvironmentMechanical/components/gas.vue

@@ -0,0 +1,164 @@
+<!--
+ * @FilePath: \code\gitscreenFront\src\views\generalEnvironmentMechanical\components\gas.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-02-14 13:24:12
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+
+<template>
+        <!-- <h1>{{props.title}}</h1> -->
+        <div ref="gas" class="gas-echarts-class"></div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, onMounted, onUpdated, reactive, ref, watch} from "vue"
+import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
+import 'echarts-liquidfill'
+const { proxy } = getCurrentInstance() as any;
+let props=defineProps<{
+      title:string,
+      value:any;
+      }>()
+let gas=ref()
+
+let refborder4=ref()
+
+const echartsData = reactive<EDataPerson>({
+    gas:{
+      div:null,
+      data:null,
+      title:'',
+      box:null
+  },
+})
+
+const setData=()=>{
+  
+  echartsData.gas!.div=gas.value
+  echartsData.gas!.title=props.title
+  echartsData.gas!.data=({
+          title: {
+            // 标题
+            text: echartsData.gas!.title,
+            textStyle:{
+          color:'#fff',
+          fontSize:20
+            },
+            top:'2%'
+          },
+           series: [{
+    type: 'liquidFill',
+    radius: '80%', //水球大小
+    shape:'rect',
+    center: ['50%', '50%'],
+    waveAnimation: true,
+    color: [
+      {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: '#186945',
+          },
+          {
+            offset: 1,
+            color: '#1b7a4f',
+          },
+        ],
+        globalCoord: false,
+      },
+    ],
+    data: [0.7,0.7], // data个数代表波浪数
+    amplitude: 10, //振幅
+    backgroundStyle: {
+      borderWidth: 2, //边框大小
+      borderColor:'rgba(8, 206, 120, 0.8)',//边框颜色
+      color: 'rgba(8, 206, 120, 0.4)',
+    },
+    label: {
+      normal: {
+        textStyle: {
+          fontSize: 24,
+          fontWeight: 'bold',
+          color: '#fff',
+        },
+        formatter:function(params){
+          return props.value
+        }
+      },
+      
+    },
+    outline: {
+      borderDistance: 0,
+      itemStyle: {
+        borderWidth: 4,
+        borderColor: 'transparent',
+      },
+    },
+            }],
+        })
+
+change(echartsData.gas)
+}
+
+const change = (item:EDataPersonItem) => {
+  let Ebox;
+  if (!item.box) {
+    Ebox = proxy.$echarts.init(item.div, "dark");
+  } else {
+    Ebox = item.box;
+  }
+  Ebox.setOption(item.data);
+  item.box = Ebox;
+};
+
+onUpdated(() => {
+  console.log('数据更新');
+  
+  setData()
+})
+// watch(() => props.value, (val) => {
+//   console.log(val);
+  
+//   setData()
+// }, { deep: true })
+
+onMounted(() => {
+  setData()
+})
+
+
+</script>
+
+<style scoped>
+.gasBox{
+    /* border-radius: 50%; */
+    background-color: #8CE78D;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px;
+    font-size: 20px;
+}
+.gasborder{
+    position: relative;
+}
+.gasborder h1{
+    position: absolute;
+    top: 20px;
+    left:20px;
+    color: #fff;
+}
+.gas-echarts-class{
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/generalEnvironmentMechanical/components/pipe.vue

@@ -0,0 +1,289 @@
+<template>
+  <div ref="pipe" class="pipebox"></div>
+</template>
+
+<script setup lang="ts">
+import { getCurrentInstance, nextTick, onMounted, onUpdated, reactive, ref, watch } from "vue";
+import { EDataPerson, EDataPersonItem } from "@/type/realtimeSecurity";
+
+import border6 from "@/components/borderBox/border6.vue";
+import { useI18n } from "vue-i18n";
+let { t } = useI18n();
+const { proxy } = getCurrentInstance() as any;
+let props = defineProps<{
+  title: string;
+  value: any;
+}>();
+let pipe = ref();
+
+let refborder3 = ref();
+
+const echartsData = reactive<EDataPerson>({
+  pipe: {
+    div: null,
+    data: null,
+    title: "",
+    box: null,
+  },
+});
+
+const setData = () => {
+  let x = [];
+  let y = [];
+  let sumx = [];
+  console.log(props.value,"ddd");
+  
+  props.value.listData.forEach((res) => {
+    
+    x.push(res.name);
+  });
+  let newx = [...new Set(x)];
+  newx.forEach((ele) => {
+    let count = 0;
+    props.value.listData.forEach((res) => {
+      if (ele == res.name) {
+        count++;
+      }
+    });
+    sumx.push({ name: ele, val: 1, sum: count });
+    count = 0;
+  });
+
+  sumx.forEach((ele) => {
+    props.value.listData.forEach((res) => {
+      let color1 = rgb();
+      if (ele.name == res.name)
+        y.push({
+          name: res.devName,
+          value: [
+            newx.map((item) => item).indexOf(res.name),
+            0,
+            res.value,
+            ele.val++,
+            ele.sum,
+          ],
+        });
+    });
+  });
+
+  echartsData.pipe!.div = pipe.value;
+  echartsData.pipe!.title = props.title;
+  echartsData.pipe!.data = {
+    title: {
+      text: echartsData.pipe!.title,
+      show: true,
+      textStyle: {
+        color: "#fff",
+        fontSize: 20,
+      },
+      top: "1%",
+    },
+    grid: {
+      top: "15%",
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: "item",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    legend: {
+      top: "5%",
+    },
+    xAxis: {
+      type: "category",
+      data: newx,
+    },
+    yAxis: {
+      type: "value",
+      // axisLabel: {
+      //   formatter: "{value} mpa",
+      // },
+    },
+    //   dataset:{
+    //   dimensions: x,
+    //   source: y
+    // },
+    // series:server
+    series: [
+      {
+        type: "custom",
+        renderItem: renderItem1,
+        itemStyle: {
+          color: function (params) {
+            var index_color = params.value[2];
+            if (index_color >= props.value.top.value) {
+              return "#FF6E76";
+            } else {
+              return "#4992FF";
+            }
+          },
+        },
+        label: {
+          show: true,
+          normal: {
+            formatter: function (params) {
+              return params.value[2];
+            },
+            show: true,
+            position: "top",
+            textStyle: {
+              color: "rgb(255,255,255,0.9)",
+            },
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params) {
+            return !(params.value[2] == "0.0")
+              ? params.name + ":" + params.value[2] + "Mpa"
+              : "";
+          },
+        },
+        // labelLayout: (params, api) => {
+        //   console.log(params, api);
+
+        //   return {
+        //     x: params.rect.x ,
+        //     y: params.rect.y + params.rect.height / 2,
+        //     verticalAlign: "middle",
+        //     align: "left",
+        //     text:'1'
+        //   };
+        // },
+        // itemStyle: { normal: { opacity: 0.8 } },
+        encode: {
+          y: 2,
+          x: 0,
+          tooltip: [0, 1, 2], //映射到提示框中的维度
+          itemName: 3,
+        },
+        data: y,
+      },
+      {
+        type: "bar",
+        name: `${t("messages.normal_Tip")}(0mpa - ` + props.value.top.value + "mpa)",
+        color: "#4992FF",
+      },
+      {
+        type: "bar",
+        name: `${t("messages.abnormal_Tip")}(${props.value.top.value}mpa ${t(
+          "messages.abnormal_Tip_yishang"
+        )})`,
+        color: "#FF6E76",
+      },
+    ],
+  };
+  change(echartsData.pipe);
+};
+
+let renderItem1 = (params, api) => {
+  // console.log(params,"?????????????????");
+
+  let categoryIndex = api.value(0);
+  let start = api.coord([categoryIndex, api.value(1)]);
+  let end = api.coord([categoryIndex, api.value(2)]);
+  let width = api.size([0, api.value(4)])[0] * 0.6;
+
+  const num = api.value(4); // 每个系列柱子数
+  const currentIndex = api.value(3);
+  const isOdd = num % 2 === 0;
+  const midN = isOdd ? num / 2 : (num + 1) / 2;
+
+  var rect = null;
+
+  width = width / num;
+
+  let rectX = start[0] - width / 2;
+
+  const FIXED_WIDTH = 2; // 柱子间距
+
+  // 数据处理，结构为 { itemStyle: { normal: { color: 'lightgreen' } }, name: '2011', value: [0, 0, 150, 2, 5] }
+  // 其中value 分为五个维度，分别为{系列项}（从0开始）、y轴起始值(均为0)、实际值、同系列中索引值（从1开始）、同系列数据项总数
+
+  if (num > 1) {
+    if (isOdd) {
+      if (currentIndex <= midN) {
+        // 中位数左侧
+        rectX =
+          start[0] -
+          width / 2 -
+          width / 2 +
+          (currentIndex - midN) * width -
+          FIXED_WIDTH * (midN + 1 - currentIndex);
+      } else {
+        // 中位数右侧
+        rectX =
+          start[0] -
+          width / 2 +
+          width / 2 +
+          (currentIndex - midN - 1) * width +
+          FIXED_WIDTH * (currentIndex - midN);
+      }
+    } else {
+      rectX =
+        start[0] - width / 2 + (currentIndex - midN) * (width + FIXED_WIDTH);
+    }
+  }
+
+  rect = {
+    type: "rect",
+    shape: proxy.$echarts.graphic.clipRectByRect(
+      { x: rectX, y: end[1], width: width, height: start[1] - end[1] },
+      {
+        x: params.coordSys.x,
+        y: params.coordSys.y,
+        width: params.coordSys.width,
+        height: params.coordSys.height,
+      }
+    ),
+    style: api.style(),
+  };
+
+  return rect;
+};
+function rgb() {
+  //rgb颜色随机
+  const r = Math.floor(Math.random() * 256);
+  const g = Math.floor(Math.random() * 256);
+  const b = Math.floor(Math.random() * 256);
+  return `rgb(${r},${g},${b})`;
+}
+
+const change = (item: EDataPersonItem) => {
+  let Ebox;
+  if (!item.box) {
+    Ebox = proxy.$echarts.init(item.div, "dark");
+  } else {
+    Ebox = item.box;
+  }
+  Ebox.setOption(item.data);
+  item.box = Ebox;
+};
+onUpdated(() => {
+  setData()
+})
+watch(() => props.value, (val) => {
+
+  setData()
+}, { deep: true })
+onMounted(() => {
+  setData()
+});
+
+// return{setchartWH}
+</script>
+
+<style scoped>
+.pipebox {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/generalEnvironmentMechanical/components/power2023.vue

@@ -0,0 +1,278 @@
+<!--
+ * @FilePath: \code\gitscreenFront\src\views\generalEnvironmentMechanical\components\power2023.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-02-13 15:04:23
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+  <div ref="power" class="power-class"></div>
+</template>
+
+<script setup lang="ts">
+import { getCurrentInstance, onMounted, onUpdated, reactive, ref } from "vue";
+import { EDataPerson, EDataPersonItem } from "@/type/energyConsume";
+import { accAdd } from "@/utils/precision";
+import border4 from "@/components/borderBox/border6.vue";
+const { proxy } = getCurrentInstance() as any;
+let props = defineProps<{
+  title: string;
+  seriesVal: any[];
+  httpValue: any;
+}>();
+let power = ref();
+
+let refborder4 = ref();
+
+const echartsData = reactive<EDataPerson>({
+  power: {
+    div: null,
+    data: null,
+    title: "",
+    box: null,
+  },
+});
+
+const initEchart = () => {
+  if (props.httpValue.listData) {
+    console.log('zhixingle');
+    
+    let series = [];
+    props.httpValue.listData.forEach((res) => {
+      if (res.years == 2023) {
+        for (let key in res.month) {
+          series.push({
+            name: key + "月",
+            type: "bar",
+            stack: res.years,
+            emphasis: {
+              focus: "coordinateSystem",
+              label: {
+                show: true,
+                formatter: function (value, index) {
+                  return value.value.toLocaleString();
+                },
+              },
+            },
+            data: res.month[key],
+          });
+        }
+      }
+    });
+    //data0用于初始化计算的数据
+    let data0 = [];
+
+    for (let i = 1; i <= props.httpValue.name.length; i++) {
+      data0.push(0);
+    }
+
+    series.push({
+      name: "",
+      type: "bar",
+      data: data0,
+      color: "#bbf",
+      stack: props.httpValue.listData[1].years,
+      // barWidth: 30,
+      label: {
+        show: true,
+
+        position: "right",
+        color: "#fff",
+      },
+    });
+  }
+
+  echartsData.power!.div = power.value;
+  echartsData.power!.title = props.title;
+  echartsData.power!.data = {
+    title: {
+      text: echartsData.power!.title,
+      show: true,
+      textStyle: {
+        color: "#fff",
+        fontSize: 20,
+      },
+      top: "3%",
+    },
+    tooltip: {
+      trigger: "item",
+      axisPointer: {
+        // Use axis to trigger tooltip
+        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
+        axis: "auto",
+      },
+    },
+    // color:color,
+    legend: {
+      type: "scroll",
+      // width:400,
+      // right:20,
+      top: "11%",
+      // itemStyle:{
+      //     data:yue
+      //   },
+    },
+    grid: {
+      top: "20%",
+      left: "3%",
+      right: "10%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "value",
+      splitLine: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: "category",
+      data: props.httpValue?.name,
+    },
+    series: props.seriesVal,
+  };
+
+  change(echartsData.power, props.httpValue);
+};
+const change = (item: EDataPersonItem, value: any) => {
+  let Ebox;
+  if (!item.box) {
+    Ebox = proxy.$echarts.init(item.div, "dark");
+  } else {
+    Ebox = item.box;
+  }
+  clacChartsSum(item.data, value);
+  Ebox.setOption(item.data);
+  item.box = Ebox;
+  changeecharts(item.data, value);
+};
+
+/**
+ * @函数功能: 修改用电量总数数值的标签
+ * @param {*} option echarts数据
+ * @param {*} value api接收数据
+ * @出口参数:
+ * @函数备注:
+ */
+const clacChartsSum = (option: any, value: any) => {
+  var series = option.series;
+  // function getSum1 (params) {
+  //     let stack=value.listData[0].years
+  //       var datavalue = 0
+  //       for (var i = 0; i < series.length; i++) {
+  //         if(series[i].stack==stack){
+  //           // datavalue += series[i].data[params.dataIndex]
+  //           datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
+  //         }
+
+  //       }
+  //       return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
+  //     }
+  function getSum2(params) {
+    let stack = value.listData[1].years;
+    var datavalue = 0;
+    for (var i = 0; i < series.length; i++) {
+      if (series[i].stack == stack) {
+        // datavalue += series[i].data[params.dataIndex]
+        datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
+      }
+    }
+    return datavalue ? datavalue.toLocaleString() : null;
+  }
+  console.log(series);
+
+  if (series.length) {
+    series[series.length - 1].label.formatter = getSum2;
+  }
+
+  // series[series.length - 2].label.formatter = getSum1
+};
+
+/**
+ * @函数功能: 修改用电量总数数值的标签
+ * @param {*} option echarts数据
+ * @param {*} value api接收数据
+ * @出口参数:
+ * @函数备注:
+ */
+const changeecharts = (option: any, value: any) => {
+  var series = option.series;
+
+  echartsData.power.box.on("legendselectchanged", (obj) => {
+    //重新计算今年年数据
+    function getSum2(params) {
+      let stack = value.listData[1].years;
+      var datavalue = 0;
+      for (var i = 0; i < series.length; i++) {
+        if (obj.selected[series[i].name]) {
+          if (series[i].stack == stack) {
+            // datavalue += series[i].data[params.dataIndex]
+            datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
+          }
+        }
+      }
+      return datavalue ? datavalue.toLocaleString() : null;
+    }
+    if(series.length){
+      series[series.length - 1].label.formatter = getSum2;
+    }
+
+    // series[series.length - 2].label.formatter = getSum1
+    echartsData.power.box.setOption(option);
+  });
+
+  function getSum2(params) {
+    let stack = value.listData[1].years;
+    var datavalue = 0;
+    for (var i = 0; i < series.length; i++) {
+      if (series[i].stack == stack) {
+        // datavalue += series[i].data[params.dataIndex]
+        datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
+      }
+    }
+    return datavalue ? datavalue.toLocaleString() : null;
+  }
+
+  if (series.length) {
+    series[series.length - 1].label.formatter = getSum2;
+  }
+
+  // series[series.length - 2].label.formatter = getSum1
+};
+let boxWH = reactive({
+  width: "0px",
+  height: "0px",
+});
+function setchartWH(width: any, height: any) {
+  echartsData.power!.div = power.value;
+  power.value.style.height = height + "px";
+  power.value.style.width = width + "px";
+  boxWH.height = height + 30 + "px";
+  boxWH.width = width + "px";
+  refborder4.value.resetWH();
+  if (echartsData.power.box) {
+    echartsData.power.box.resize();
+  }
+}
+
+onUpdated(() => {
+  initEchart();
+});
+onMounted(() => {
+  initEchart();
+});
+
+// return{setchartWH}
+defineExpose({
+  setchartWH,
+});
+</script>
+
+<style scoped>
+.power-class {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/generalEnvironmentMechanical/index.vue

@@ -17,12 +17,20 @@
 
             </div>
             <div class="bottom-box">
-                <power style="width: 33%;height: 100%;box-sizing: border-box;" :title="powerTitle" :series="powerSeries"
+                <div style="width: 33%;height: 100%;">
-                    :listName="listName">
+                    <border13>
-                </power>
+                        <power :title="powerData.title" :seriesVal="powerData.seriesVal" :httpValue="powerData.value"></power>
-                <div style="width: 33%;height: 100%;background: #bfb;">
+                    </border13>
                 </div>
-                <div style="width: 33%;height: 100%;background: #bfc;">
+                <div style="width: 33%;height: 100%;">
+                    <border13>
+                        <pipe :title="t('messages.PipelinePressure_Mpa')" :value="pipeData"></pipe>
+                    </border13>
+                </div>
+                <div style="width: 33%;height: 100%;">
+                    <border13>
+                        <gas :title="t('messages.gashistory')" :value="gasData"></gas>
+                    </border13>
                 </div>
             </div>
         </div>
@@ -33,11 +41,14 @@
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import header2 from '@/components/headerBox/header2.vue'
 import verticalNumLoop from './components/verticalNumLoop.vue'
-import power from './components/power.vue';
+import power from './components/power2023.vue';
+import gas from './components/gas.vue'
+import pipe from './components/pipe.vue'
+import border13 from '@/components/border/Border13.vue'
 import { getSafeWarningData, getpipeData } from "@/http/realtimeSecurity";
 import { getnoiseData } from "@/http/generalEnvironment";
 import { getHumitureData, getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
-import { getPowerData } from "@/http/energyConsume";
+import { getPowerData,getconsumeDetail } from "@/http/energyConsume";
 import { useSocketStore } from "@/store/moduleSocketMechanics";
 import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
 import { gettime, clacendTime } from "@/utils/time"
@@ -69,10 +80,11 @@ const verticalType = {
     'noise': { icon: 'icon-shengyin', title: t('messages.noiseDetection'), unit: 'dB' },
 }
 /**用电量 */
-let listName = ref<string[]>()
+let powerData=ref({value:{name:[]},seriesVal:[],title:t('messages.Powerto2023')})
-let powerTitle = t('messages.Powerto2023')
-let powerSeries = ref()
 
+let gasData=ref(0)
+
+let pipeData=ref({listData:[],top:0})
 
 let headerref = ref()
 let verticalList: any[] = reactive([])
@@ -130,56 +142,80 @@ async function getSensorData() {
 }
 
 async function getPower_data() {
-    const { data }: any = await getPowerData({ time: 1 })
+  let result: any = await getPowerData({ time: 1 });
-    listName.value = data.name
 
+  if (result.code == 200) {
+    let series = [];
+    result.data.listData.forEach((res) => {
+    if (res.years == 2023) {
+      for (let key in res.month) {
+        series.push({
+          name: key + "月",
+          type: "bar",
+          stack: res.years,
+          emphasis: {
+            focus: "coordinateSystem",
+            label: {
+              show: true,
+              formatter: function (value, index) {
+                return value.value.toLocaleString();
+              },
+            },
+          },
+          data: res.month[key],
+        });
+      }
+    }
+  });
+  //data0用于初始化计算的数据
+  let data0 = [];
 
-    let series = []
+  for (let i = 1; i <= result.data.name.length; i++) {
-    data.listData.forEach(res => {
+    data0.push(0);
-        if (res.years == 2023) {
+  }
-            for (let key in res.month) {
+
-                series.push({
+  series.push({
-                    name: key + '月',
+    name: "",
-                    type: 'bar',
+    type: "bar",
-                    stack: res.years,
+    data: data0,
-                    emphasis: {
+    color: "#bbf",
-                        focus: 'coordinateSystem',
+    stack: result.data.listData[1].years,
-                        label: {
+    // barWidth: 30,
-                            show: true,
+    label: {
-                            formatter: function (value, index) {
+      show: true,
-                                return value.value.toLocaleString()
+
-                            }
+      position: "right",
-                        }
+      color: "#fff",
-                    },
+    },
-                    data: res.month[key]
+  });
-                })
+
-            }
+    powerData.value.value=result.data
+    powerData.value.seriesVal=series
+    powerData.value.title='机械分厂用电量'
+  }
+}
+async function getconsumeDetailfun(){
+  let result:any = await getconsumeDetail()
+  console.log(gasData.value);
+  if(result.code==200){
+    result.data.forEach(res=>{
+        if(res.deptName=='喷漆车间' && res.type=='GasDetail'){
+            gasData.value=res.usageNum
         }
     })
-    //data0用于初始化计算的数据
-    let data0 = []
 
-    for (let i = 1; i <= data.name.length; i++) {
+    console.log(gasData.value);
-        data0.push(0)
-    }
     
-    series.push(
+  }
-        {
+}
-            name: '',
+async function getpipeDatafun() {
-            type: 'bar',
+  let pageValue = '6,7,9,10,11'
-            data: data0,
+  let result: any = await getpipeData({ deptIds: pageValue })
-            color: '#bbf',
-            stack: data.listData[1].years,
-            // barWidth: 30,
-            label: {
-                show: true,
-                position: 'right',
-                color: '#fff'
-            }
-        }
-    )
-    powerSeries.value = series
 
+  if (result.code == 200) {
+    pipeData.value.listData=result.data.listData
+    pipeData.value.top=result.data.top
+  }
 }
 
 function getWebsocket(val) {
@@ -235,8 +271,13 @@ function errWebsocket(val) {
 onMounted(() => {
     getSensorData()
     getPower_data()
+    getpipeDatafun()
+    getconsumeDetailfun()
     connectWebsocket(null, null, getWebsocket, errWebsocket);
 })
+onUnmounted(() => {
+    closeWebsocket();
+})
 </script>
 
 <style module>