screenFront/src/views/generalEnvironment/content/right.vue

<template>
    <div class="content-right">
        <el-row >
            <el-col :span="8">
                <border2 ref="borderElectriccontrol">
                  <template v-slot>
                      <pm name="Electriccontrol" :title="t('messages.pmHanJie')" ref="refwelding"></pm>
                  </template>
              </border2>
            </el-col>
            <el-col :span="8">
                <border2 ref="borderfinish">
                  <template v-slot>
                      <pm name="finish" :title="t('messages.pmJingShi')" ref="refornaments"></pm>
                  </template>
              </border2>
            </el-col>
            <el-col :span="8">
                <border2 ref="borderlarge">
                  <template v-slot>
                      <pm name="large" :title="t('messages.pmDaJian')" ref="refstuff"></pm>
                  </template>
              </border2>
            </el-col>
        </el-row>
        <el-row >
            <el-col :span="24">
            <border2 ref="borderhumiture">
              <template v-slot>
                <humiture ref="Refhumiture"></humiture>
              </template>
            </border2>
            </el-col>
        </el-row>
    </div>
  </template>
  
  <script setup lang="ts">
  import border2 from "@/components/borderBox/border2.vue";
  import pm from "./chart/pm.vue"
  import humiture from './chart/humiture.vue'
  import { calcWH } from "@/components/ts/selfAdaption";
  import { getHumitureData,getPmtenData, getPmtwoData  } from "@/http/generalEnvironment";
  // import { getHumitureData,getPmtenData, getPmtwoData } from "@/http/environment";
  import {onMounted, reactive, ref, watch} from "vue"
  import { useSocketStore } from "@/store/moduleSocket"
  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'})
  
  //边框dom
let borderElectriccontrol=ref()
let borderfinish=ref()
let borderlarge=ref()
let borderhumiture=ref()

//内容dom
let refwelding=ref()
let refornaments=ref()
let refstuff=ref()
let Refhumiture=ref()
  function reset(val:any){
    //宽高为0时跳出该方法
    if(!val.width && !val.height) return
  
    //重置边框尺寸
    resetBorder()
    //重置盒子尺寸
    threebox(val.width,val.height)
    onebox(val.width,val.height)
  }

const resetBorder=()=>{
    borderElectriccontrol.value.resetWH()
    borderfinish.value.resetWH()
    borderlarge.value.resetWH()
    borderhumiture.value.resetWH()
    }   

const threebox=(width:any,height:any)=>{
  let a=calcWH(height,width,3,3,0)
  //修改高度
  refwelding.value.setchartWH(a.oWidth,a.oHeight)
  refornaments.value.setchartWH(a.oWidth,a.oHeight)
  refstuff.value.setchartWH(a.oWidth,a.oHeight)
}
const onebox=(width:any,height:any)=>{
  let a=calcWH(height,width,3,1,0)
  //修改高度
  Refhumiture.value.setchartWH(a.oWidth,a.oHeight*2-40)
}
watch(
  () => store.humiture,
  (newVal, oldVal) => {
    //动态更新echarts
    // if(oldVal)
    Refhumiture.value.setData(newVal,2)
  },
  { deep: true, flush: "post" }
);
async function gethumitureData(){
  let result:any = await getHumitureData({})
 
  if(result.code==200){
    Refhumiture.value.setData(result.data,1)
    store.$patch((state)=>{
      state.humiture=result.data
    })
  }
}
/**
 * @函数功能: 监听缓存数据数据改变更新视图
 * @出口参数: 
 * @函数备注: 
 */
watch(
  () => store.pm,
  (newVal, oldVal) => {
    //动态更新echarts
    console.log(newVal,'最新数据');
  refwelding.value.setData(newVal.welding,2)
  refornaments.value.setData(newVal.ornaments,2)
  refstuff.value.setData(newVal.stuff,2)
  },
  { deep: true, flush: "post" }
);
/**
 * @函数功能: 获取所有空气质量数据
 * @出口参数: 
 * @函数备注: 
 */
async function getPmtwoDatafun(){
   let resulttwo:any = await getPmtwoData()
  if(resulttwo.code==200){
    return resulttwo
  }
  return false
}

async function getPmtenDatafun(){
   let resultten:any = await getPmtenData()
  if(resultten.code==200){
    return resultten
  }
  return false
}
async function getPmData(){
  // let resulttwo:any = await getPmtwoData()
  // let resultten:any = await getPmtenData()
  let data=reactive({welding:{two:null,ten:null},stuff:{two:null,ten:null},ornaments:{two:null,ten:null}})
  Promise.all([getPmtwoDatafun(),getPmtenDatafun()]).then((res)=>{
    console.log(res);
    if(res){
      res[0].data.forEach(ele=>{
        if(data[ele.enName]){
        data[ele.enName].two=ele.value
      }
      })
    }

    if(res){
      res[1].data.forEach(ele=>{
        if(data[ele.enName]){
        data[ele.enName].ten=ele.value
      }
      })
    }
    refwelding.value.setData(data.welding,1)
  refornaments.value.setData(data.ornaments,1)
  refstuff.value.setData(data.stuff,1)

  store.$patch((state)=>{
    state.pm=data
  })
  })
  
  // if(resulttwo.code==200){
  //   resulttwo.data.forEach(res=>{
  //     if(data[res.name]){
  //       data[res.name].two=res.value
  //     }
     
  //   })
  // }
  // if(resultten.code==200){
  //   resultten.data.forEach(res=>{
  //     if(data[res.name]){
  //     data[res.name].ten=res.value
  //   }
  //   })
  // }
  
  

}

onMounted(()=>{
  gethumitureData()
  getPmData()
})
  </script>
  
  <style scope>
  .content-right{
      width: 100%;
  }
  
  </style>