screenFront/src/views/pmTest/index.vue

<template>
  <div :class="$style['container']">
    <div class="header">
      <div class="title">
        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'环境-噪音 实时监测系统'" :titleTip="[]"
          :typeFun="['AbnormalData', 'time']" :alarmType="['noiseAlarm', 'temphuim', 'dustAlarm']"></header2>
      </div>
    </div>
    <div class="content">
      <div class="test" v-for="item in pmData">
        <Border12>
          <PM :title="item.title" :value="item.value"></PM>
        </Border12>
      </div>
      <div class="test" v-for="item in pmData">
        <Border12>
          <PM :title="item.title" :value="item.value"></PM>
        </Border12>
      </div>
    </div>

  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted } from "vue"
import PM from "@/components/PM/PM.vue"
import Border12 from "@/components/border/Border12.vue"
import Header2 from "@/components/headerBox/header2.vue"
import { getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
let pmtest = ref({
  title: 'PM测试',
  value: { two: '44', ten: '51' }
})
type pmData = {
  title: string,
  value: {
    two: string,
    ten: string
  }
}
let pmData = reactive<pmData[]>([]);
/**
 * 请求数据
 */
async function getData() {
  let resulttwo: any = await getPmtwoData()
  let resultten: any = await getPmtenData()

  if (resulttwo.code == 200) {
    resulttwo.data.forEach(res => {
      let temp = {
        title: res.name + "(PM2.5/PM10)",
        value: {
          two: res.value,
          ten: '0'
        }
      }
      pmData.push(temp)

    })
  }
  if (resultten.code == 200) {
    resultten.data.forEach(res => {
      let index = pmData.findIndex(item => item.title == res.name + "(PM2.5/PM10)")

      if (index != -1) {
        pmData[index].value.ten = res.value
      }
    })
  }
}


//websocket 获取数据
function getWebsocket(val) {
  try {

    let data = JSON.parse(val);
    if (data.type == "dust") {
      let index = pmData.findIndex(item => item.title == data.msg.enName + "(PM2.5/PM10)")
      if (index != -1) {
        pmData[index].value.ten = data.msg.pm10
        pmData[index].value.two = data.msg.pm25
      }
    }

  } catch (err) { }
}

function errWebsocket(val) {
  console.log(val);
}
getData();

onMounted(() => {
  connectWebsocket(null, null, getWebsocket, errWebsocket);
});
onUnmounted(() => {
  closeWebsocket();
});
</script>


<style module>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
  box-sizing: border-box;
}
</style>
<style scoped>
.content {
  width: 100%;
  height: 980px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
}

.test {
  width: 20%;
  height: 30%;
  margin: 20px 47px;
}
</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>