<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\generalEnvironment\content\left.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-10 11:48:52
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="content-left">
    <el-row>
        <el-col :span="24"> 
          <border2 ref="bordernoise">
            <template v-slot>
                <noise ref="refnoise"></noise>
            </template>
          </border2>
        </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, watch} from "vue"
import noise from './chart/noise.vue'
import {calcWH} from '@/components/ts/selfAdaption'
import border2 from "@/components/borderBox/border2.vue";
// import { getnoiseData } from "@/http/environment";
import { useSocketStore } from "@/store/moduleSocket"

const store = useSocketStore()
let props=defineProps<{
    width:number,
    height:number,
    }>()

watch(()=>props,(newVal, oldVal)=>{
  //监听父组件宽高变化，随时重置本组件尺寸  
  reset(newVal)
},{immediate:true,deep:true,flush:'post'})


//内容dom-------------------------
let refnoise=ref()

//---------------------------

//边框dom-------------------------
let bordernoise=ref()

//---------------------------

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

  //重置边框尺寸
  resetBorder()
  //重置盒子尺寸
  bigBox(val.width,val.height)
//   smallBox(val.width,val.height)
}

const resetBorder=()=>{
  bordernoise.value.resetWH()
}

const bigBox=(width:any,height:any)=>{
  let a=calcWH(height,width,1,1,30)
  //重置图表宽高
  refnoise.value.setchartWH(a.oWidth,a.oHeight)
  // powerChild.value.setchartWH(a.oWidth,a.oHeight)
}
watch(
  () => store.noise,
  (newVal, oldVal) => {
    //动态更新echarts
    // if(oldVal)
    refnoise.value.setData(newVal.top,newVal.listData,2)
  },
  { deep: true, flush: "post" }
);

onMounted(()=>{
  // getnoiseDatafun()
})
</script>

<style scope>
.content-left{
    width: 100%;
}

</style>
