<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\stuffView\right.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-13 14:43:28
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
    <div>
      <el-row>
        <el-col :span="24">
          <div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;  margin-right: 10px;">
              <border3 ref="borderref">
                    <template v-slot>
                        <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
                    </template>
                </border3>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, reactive, ref, watch } from "vue";
  import { calcWH } from "@/components/ts/selfAdaption";
  // import {getPowerData} from '@/http/environment'
  import { getPowerData, getconsumeDetail } from "@/http/energyConsume";
  import border6 from "@/components/borderBox/border6.vue";
  import border3 from "@/components/borderBox/border3.vue";
  import pm from "./chart/pm.vue";
  import power from "./chart/power2023.vue";
  import chart from "@/components/assembly/chart2.vue";
  import { useRoute, useRouter } from "vue-router";
  import { useEnergyConsumeStore } from "@/store/module/energyConsume";
  const store = useEnergyConsumeStore();
  const router = useRouter();
  

  let borderref=ref()
  let pmref=ref()
  
  let props = defineProps<{
    width: number;
    height: number;
  }>();
  watch(
    () => props,
    (newVal, oldVal) => {
      //监听父组件宽高变化，随时重置本组件尺寸
      reset(newVal);
    },
    { immediate: true, deep: true, flush: "post" }
  );
  function reset(val: any) {
    //宽高为0时跳出该方法
  
    if (!val.width && !val.height) return;
  
    //重置盒子尺寸
    powerBox(val.width, val.height);
    borderref.value.resetWH()
  }
  
  const powerBox = (width: any, height: any) => {
    let a = calcWH(height, width, 1, 1, 0);
    //修改高度
    pmref.value.setchartWH(a.oWidth-40,a.oHeight-40)
  //   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
  };

  function setcontentData(val){
      pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
  }
  onMounted(() => {
      
  
  
  });
  defineExpose({
    setcontentData,
  });
  </script>
  
  <style scoped></style>
  