样式调整

frontend/src/views/home/tabs/dashboard.vue

@@ -33,7 +33,7 @@
             <el-collapse-item title="&nbsp&nbsp&nbsp&nbsp检测进度展示：" name="1">
         <!-- 饼图 -->
         <div class="container_charts">
-          <div class="charts_info">
+          <div class="charts_info" ref="chartsInfoRef">
             <pie
               :customData="{
                 title: '设备检测状态',
@@ -112,6 +112,8 @@ import Table from "../components/table.vue";
 import { data } from "@/api/plan/static.json";
 import deviceDataList from '@/api/device/device/deviceData'
 
+const chartsInfoRef = ref<HTMLElement | null>(null);
+const chartsWidth = ref<number>(0);
 const deviceData = deviceDataList.plan_devicedata
 const treeRef = ref();
 const form: any = ref({
@@ -278,9 +280,9 @@ const getPieData = () => {
   pieRef1.value.init();
   pieRef2.value.init();
   pieRef3.value.init();
-  pieRef1.value.reSize(470,145,true);
-  pieRef2.value.reSize(470,145,true);
-  pieRef3.value.reSize(470,145,true);
+  // pieRef1.value.reSize(470,145,true);
+  // pieRef2.value.reSize(470,145,true);
+  // pieRef3.value.reSize(470,145,true);
 };
 const getTree = () => {
   treeRef.value.getTreeData(data);
@@ -342,11 +344,33 @@ const handleCheckFunction = (val: any) => {
   form.value.activeTabs = val;
 };
 
+
+const resizeObserver = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    chartsWidth.value = entry.contentRect.width;
+    console.log('Charts Info Width:', chartsWidth.value);
+
+    pieRef1.value.reSize(chartsWidth.value * 0.95,145,true);
+    pieRef2.value.reSize(chartsWidth.value * 0.95,145,true);
+    pieRef3.value.reSize(chartsWidth.value * 0.95,145,true);
+  }
+});
+
 onMounted(() => {
  // console.log();
+ if (chartsInfoRef.value) {
+    resizeObserver.observe(chartsInfoRef.value);
+  }
   getTree();
   getPieData();
 });
+
+
+onUnmounted(() => {
+  if (chartsInfoRef.value) {
+    resizeObserver.unobserve(chartsInfoRef.value);
+  }
+});
 </script>
 <style lang="scss" scoped>
 .static {