screenFront/src/views/realtimeSecurity/index.vue

<!--
 * @FilePath: \gitscreenFront\src\views\realtimeSecurity\index.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-10 11:45:17
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div :class="$style['container']">
    <div class="header">
      <div class="title">

        <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="t('messages.realtimeSecurity')"
          :titleTip="titleTip" :typeFun="['AbnormalData', 'time']" :alarmType="['saving', 'pressure']"></header2>
      </div>
    </div>

    <div class="content" ref="Acontent">
      <el-row>
        <el-col :span="24">
          <content :width="size.oWidth" :height="size.oHeight"></content>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from "vue";
import content from "./content/content.vue";
//   import contentRight from './content/right.vue'
import header2 from "@/components/headerBox/header2.vue";
//   import useNowTime from '@/hook/nowTime'
import { calcWH } from "@/components/ts/selfAdaption";
// import { ElRow, ElCol } from "element-plus";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { useSocketStore } from "@/store/moduleSocket";
const store = useSocketStore();
let Acontent = ref();
let headerref = ref()
let time = ref(null);
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
let titleTip = [
  {
    color: "#20AEC5",
    name: t('messages.normal_Tip'),
  },
  {
    color: "#E43961",
    name: t('messages.abnormal'),
  },
  {
    color: "#A7A6BD",
    name: t('messages.disconnection'),
  },
];

let size = reactive({
  oWidth: 0,
  oHeight: 0,
});
function WH(div: HTMLElement) {
  let a = calcWH(div.offsetHeight, div.offsetWidth, 1, 1, 0);
  size.oWidth = a.oWidth;
  size.oHeight = a.oHeight;
  // console.log(a,"sssssfafasagdfgsbxczvzdbdz");

}
//
function getWebsocket(val) {
  headerref.value.HeadergetWebsocket(val)
  try {
    let data = JSON.parse(val);

    //燃气监测
    if (data.type == "Gas") {
      // store.changepaintingGas(data.msg);

      let verticalData = { name: data.msg.devName, val: data.msg.methane.value, devId: data.msg.devId }
      store.changeNewVerticalNum({ type: 'Methane', data: verticalData })

    }
    //甲醛TVOC
    if (data.type == "TVOC_CH2O") {
      // store.changeTVOC_CH2O(data.msg);
      let verticalData_TVOC = { name: data.msg.TVOC.name, val: data.msg.TVOC.value, devId: data.msg.TVOC.devId }
      store.changeNewVerticalNum({ type: 'TVOC', data: verticalData_TVOC })
      let verticalData_CH2O = { name: data.msg.CH2O.name, val: data.msg.CH2O.value, devId: data.msg.CH2O.devId }
      store.changeNewVerticalNum({ type: 'CH2O', data: verticalData_CH2O })

    }
    //火焰传感器？
    if (data.type == "flame") {
      // store.changeHumiture(data.msg)
      store.changeflame(data.msg.flame);
      let verticalData = { name: data.msg.devName, val: data.msg.flame.value, devId: data.msg.devId }
      store.changeNewVerticalNum({ type: 'FIRE', data: verticalData })


    }
    //精饰车间烟雾传感器
    if (data.type == "smoke") {
      // store.changeHumiture(data.msg)
      // store.changepaintingGas(data.msg)
      store.changesmoke(data.msg.smoke);
      let verticalData = { name: data.msg.devName, val: data.msg.smoke.value, devId: data.msg.devId }
      store.changeNewVerticalNum({ type: 'Smoke', data: verticalData })
      // console.log(JSON.stringify({type:'Smoke',data:verticalData}),"烟雾传感器");
    }
    if (data.type == "airPressure") {
      // store.changeHumiture(data.msg)
      store.changePressure(data.msg);
    }
    if (data.type == "waterPressure") {
      // store.changeHumiture(data.msg)
      store.changePipe(data.msg);
    }

    if (data.type == "QbHumi") {
      // store.changeHumiture(data.msg)
      let dqbfData = data.msg.name == "东气泵房温湿度传感器"?data.msg:null
      let xqbfData = data.msg.name == "西气泵房温湿度传感器"?data.msg:null
      if (dqbfData) {
        store.dqbf.humidity = dqbfData.humi
        store.dqbf.temp = dqbfData.temp
        store.dqbf.temp_limit = dqbfData.tempmax
      }
      if (xqbfData) {
        store.xqbf.humidity = xqbfData.humi
        store.xqbf.temp = xqbfData.temp
        store.xqbf.temp_limit = xqbfData.tempmax
      }
    }

    if (data.type == "EmptyState") {
      let dqbfData = data.msg.name == "东气泵房空开状态信息"?data.msg:null;
      let xqbfData = data.msg.name == "西气泵房空开状态信息"?data.msg:null;

      let paifeng = 0
      if (data.msg.open == true) {
        paifeng = 1
      } else {
        paifeng = 0
      }
      if (dqbfData) {
        store.dqbf.paifeng = paifeng
      }
      if (xqbfData) {
        store.xqbf.paifeng = paifeng
      }
    }

  } catch (err) {
    console.log(err, "报错了大哥", console.log(val)
    );

  }
}
function errWebsocket(val) {
  headerref.value ? headerref.value.HeadererrWebsocket(val) : ''
  // console.log(val);
}
onMounted(() => {
  let contentBox = Acontent.value;
  // let Timedombox=Timedom.value
  window.document.title = "安全 实时监测系统";
  WH(contentBox);
  window.addEventListener("resize", () => {
    if (time.value) {
      clearTimeout(time.value);
      time.value = null;
    }
    time.value = setTimeout(() => {
      WH(contentBox);
    }, 1000);
  });
  connectWebsocket(null, null, getWebsocket, errWebsocket);
});

onUnmounted(() => {
  closeWebsocket();
  clearTimeout(time);
  //退出后清空store缓存的数据
  store.resetRealtimeSecurity()
});
</script>

<style module>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
}
</style>

<style scoped>
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.title>h1 {
  font-size: 30px;
  position: absolute;
  top: 10px;
}

.header {
  position: relative;
}

.header p {
  position: absolute;
  right: 50px;
  bottom: 20px;
  font-size: 20px;
}

.content {
  width: 100%;
  --header: 150px;
  height: calc(1080px - var(--header));
}
</style>

<style>
body {

  /* --content:calc(100vh - var(--header)) */
  overflow: hidden !important;
  -ms-overflow-style: none;
  /* IE + Edge */
  scrollbar-width: none;
  /* Firefox */
}

::-webkit-scrollbar {
  display: none;
}
</style>