screenFront/src/views/realtimeSecurity/content/content.vue

<template>
<div>
  <!-- <div class="topTip">
    <toptip ref="toptip1"></toptip>
  </div> -->
  <div  style="display: flex;">
    <div style="width: 20%; height: 250px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-evenly;" v-for="item in store.newVerticalNum">
      <verticalNumLoop :title="item.title"  :icon="item.icon" :limit="item.limit" :unit="item.unit" :value="item.value"></verticalNumLoop>
    </div>
  </div>
  <div>
    <el-row>
    <el-col :span="6">
        <pressure ref="perssure1" name="east" :title="t('messages.EastPumpPressure_Mpa')"></pressure>
    </el-col>
    <el-col :span="6">
        <pressure ref="perssure2" name="west" :title="t('messages.WestPumpPressure_Mpa')"></pressure>
    </el-col>
    <el-col :span="12">
       <pipe ref="pipe1" :title="t('messages.PipelinePressure_Mpa')"></pipe>
    </el-col>
</el-row>
  </div>

</div>
</template>

<script setup lang="ts">
import pressure from "./chart/pressure.vue"
import pipe from "./chart/pipe.vue"
// import toptip from "./chart/toptip.vue"
import {onMounted, reactive, ref, watch} from "vue"
import { calcWH } from "@/components/ts/selfAdaption";
import verticalNumLoop from './chart/verticalNumLoop.vue'
// import { getPressureData,getSafeWarningData } from "@/http/environment";
import { getPressureData,getSafeWarningData,getpipeData } from "@/http/realtimeSecurity";
import { useSocketStore } from "@/store/moduleSocket"
import {gettime,clacendTime} from "@/utils/time"
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useSocketStore()
let props=defineProps<{
    width:number,
    height:number,
    }>()
watch(()=>props,(newVal, oldVal)=>{
  //监听父组件宽高变化，随时重置本组件尺寸  
  
  reset(newVal)
},{immediate:true,deep:true,flush:'post'})

// let toptip1=ref()
let perssure1=ref()
let perssure2=ref()
let pipe1=ref()

const verticalType = {
  'TVOC': {icon: 'icon-TVOC-Outlined',title:t('messages.TVOCDetection'), unit: 'mg/m³'},
  'Smoke': {icon: 'icon-yanwubaojingqi',title:t('messages.smokeDetection'), unit: "ppm"},
  'Methane': {icon: 'icon-ranqi',title:t('messages.gasDetection'), unit: null},
  'CH2O': {icon: 'icon-app_icons--',title:t('messages.CH2ODetection'), unit: 'mg/m³'},
  'FIRE': {icon: 'icon-weibiaoti1',title:t('messages.flameDetection'), unit: null},
}


function reset(val:any){
  //宽高为0时跳出该方法
  
  if(!val.width && !val.height) return

  //重置盒子尺寸
  PressureBox(val.width,val.height)
  pipeBox(val.width,val.height)
  verticalNumBox(val.width,val.height)
  // toptip1.value.setchartWH()
}
const PressureBox=(width:any,height:any)=>{
  let a=calcWH(height,width,3,4,0)
  //修改高度
  perssure1.value.setchartWH(a.oWidth-50,a.oHeight*2)
  perssure2.value.setchartWH(a.oWidth-50,a.oHeight*2)
}

const pipeBox=(width:any,height:any)=>{
  let a=calcWH(height,width,3,2,0)
  //修改高度
  // pipe1.value.setchartWH(a.oWidth-50,a.oHeight*2)
  pipe1.value.setchartWH(a.oWidth-50,a.oHeight*2)
}

const verticalNumBox=(width:any,height:any)=>{
  let a=calcWH(height,width,3,5,0)
  a.oHeight=a.oHeight-40
}

watch(
  () => store.Pressure,
  (newVal, oldVal) => {
    //动态更新echarts
    //泵房气压
    perssure1.value.setData(newVal.east,2)
    perssure2.value.setData(newVal.west,2)
  },
  { deep: true, flush: "post" }
);
async function getPressureDatafun(){
  let result:any = await getPressureData()
 
  if(result.code==200){
    perssure1.value.setData(result.data.east,1)
    perssure2.value.setData(result.data.west,1)
    store.changePressure({east: result.data.east, west: result.data.west})
  }
}
let vertical= reactive([]) 
async function getSafeWarningDatafun(){
  let result:any = await getSafeWarningData()
  if(result.code==200){
    let datetime = new Date().getTime();  
    let handle_vertical = result.data.map((item:any)=>{
      item.value.forEach(element => {
        
        if (element.val>item.limit) {          
          element.date = gettime(element.ts),
          element.time = element.ts||datetime
          element.continuous = clacendTime(datetime,element.ts||datetime)
        } else {
          element.date = null
          element.time = null
          element.continuous = null
        }
      });
      return {
        type:item.type,
        icon:verticalType[item.type].icon,
        title:verticalType[item.type].title,
        limit:item.limit,
        unit:verticalType[item.type].unit,
        value:item.value
      }
    })
    
    //console.log(result.data,'安全预警----------');
    store.setNewVerticalNum(handle_vertical)
  }
}
watch(
  () => store.pipe,
  (newVal, oldVal) => {
    //动态更新echarts
    //泵房气压
    pipe1.value.setData(newVal,2)
  },
  { deep: true, flush: "post" }
);
async function getpipeDatafun(){
  let result:any = await getpipeData({})
 
  if(result.code==200){
    //设置组件样式
    pipe1.value.setData({listData:result.data.listData,top:result.data.top},1)

    //将数据存入pinia
    store.changePipe({listData:result.data.listData,top:result.data.top})
  }
}

onMounted(()=>{
  getPressureDatafun()
  getSafeWarningDatafun()
  getpipeDatafun()
})

</script>

<style scoped>
.topTip{
  width:100%;
  height:150px;
}
</style>