<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\InPlantProducts\child\right.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:30:31
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->

<template>
  <div class="content-right">
    <axle ref="axleRef"></axle>
    <sensor ref="sensorRef"></sensor>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { calcWH } from "@/components/ts/selfAdaption";
import bottomtip from "./component/bottomtip.vue";
import remarks from "./component/remarks.vue";
import axle from "./component/axle.vue";
import sensor from "./component/sensor2.vue";
//   import detail1 from './component/Details.vue'
//   import { getnoiseData } from "@/http/environment";
// import { getnoiseData } from "@/http/generalEnvironment";
import { gettime } from "@/utils/time";
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
const store = useInPlantProductsStore();
let props = defineProps<{
  width: number;
  height: number;
}>();

watch(
  () => props,
  (newVal, oldVal) => {
    //监听父组件宽高变化，随时重置本组件尺寸
    reset(newVal);
  },
  { immediate: true, deep: true, flush: "post" }
);
// watch(
//   () => store.DeviceSensorinfo,
//   (newVal, oldVal) => {
//     //动态更新echarts
//     console.log(newVal, "数据2");
//     setdata(newVal);
//   },
//   { deep: true, flush: "post" }
// );

watch(
  () => store.newPageData,
  (newVal, oldVal) => {
    //动态更新echarts
    setdata(newVal);
  },
  { deep: true, flush: "post" }
);

//内容dom-------------------------
let sensorRef = ref();
let axleRef = ref();
//   let originRef=ref()
//   let detailsRef=ref()

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

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

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

const remarksBox = (width: any, height: any) => {
  let a = calcWH(height, width, 3, 1, 0);

  //   a.oHeight=a.oHeight
  //修改高度
  sensorRef.value.setchartWH(a.oWidth - 20, a.oHeight * 2);
  axleRef.value.setchartWH(a.oWidth - 20, a.oHeight);
};

function setdata(val: any) {
  // console.log(val.Timestamp-0);
  // sensorRef.value.setData(val.LedList);
  sensorRef.value.setData(val.LedList);
  
  axleRef.value.setData(val.axleList);
  // axleRef.value.setData(val.LedList);
}
onMounted(() => {
  // getnoiseDatafun()
  // setdata()
});
</script>

<style scope>
.content-right {
  width: 100%;
  margin-left: 50px;
  /* height: 100%; */
}
</style>
