ptw统计

src/views/pms/qhse/ptw/index.vue

@@ -3,18 +3,18 @@
     <!-- 左侧部门树 -->
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
-      <div class="ptw-stats mb-15px">
+      <div ref="statsContainerRef" class="ptw-stats mb-15px">
         <div class="ptw-stats-card">
           <div class="ptw-stats-card__label">作业票总数</div>
           <div class="ptw-stats-card__value">{{ totalStaticCount }}</div>
         </div>
         <div class="ptw-stats-chart-card">
           <div class="ptw-stats-card__label">作业票分类统计</div>
-          <Echart :height="220" :options="staticChartOptions" />
+          <Echart ref="staticChartRef" :height="220" :options="staticChartOptions" />
         </div>
         <div class="ptw-stats-chart-card">
           <div class="ptw-stats-card__label">作业票趋势统计</div>
-          <Echart :height="220" :options="timeTrendChartOptions" />
+          <Echart ref="timeTrendChartRef" :height="220" :options="timeTrendChartOptions" />
         </div>
       </div>
       <div class="bg-white rounded-sm px-2 py-2">
@@ -602,6 +602,10 @@ const queryParams3 = reactive({
   jsaXh: ''
 })
 const queryFormRef = ref(null) // 搜索的表单
+const statsContainerRef = ref<HTMLElement | null>(null)
+const staticChartRef = ref<any>(null)
+const timeTrendChartRef = ref<any>(null)
+let statsResizeObserver: ResizeObserver | null = null
 
 // 对话框相关
 const dialogVisible = ref(false)
@@ -976,7 +980,9 @@ const staticChartOptions = computed<EChartsOption>(() => ({
 }))
 
 const timeTrendDates = computed(() =>
-  Object.keys(timeStaticRes.value || {}).sort((a, b) => new Date(a).getTime() - new Date(b).getTime())
+  Object.keys(timeStaticRes.value || {}).sort(
+    (a, b) => new Date(a).getTime() - new Date(b).getTime()
+  )
 )
 
 const timeTrendChartOptions = computed<EChartsOption>(() => ({
@@ -1079,6 +1085,11 @@ async function getTimeStaticRes() {
   timeStaticRes.value = res || {}
 }
 
+const resizeStatsCharts = () => {
+  staticChartRef.value?.resize?.()
+  timeTrendChartRef.value?.resize?.()
+}
+
 watch(
   () => queryParams.createTime,
   () => {
@@ -1086,6 +1097,15 @@ watch(
   }
 )
 
+watch(
+  () => isLeftContentCollapsed.value,
+  () => {
+    nextTick(() => {
+      resizeStatsCharts()
+    })
+  }
+)
+
 onMounted(async () => {
   getList()
   deptList2.value = handleTree(await DeptApi.getSimpleDeptList())
@@ -1094,6 +1114,21 @@ onMounted(async () => {
   userInfo.value = users
   getStatic()
   getTimeStaticRes()
+
+  nextTick(() => {
+    resizeStatsCharts()
+    if (statsContainerRef.value) {
+      statsResizeObserver = new ResizeObserver(() => {
+        resizeStatsCharts()
+      })
+      statsResizeObserver.observe(statsContainerRef.value)
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  statsResizeObserver?.disconnect()
+  statsResizeObserver = null
 })
 
 let personDialogVisible = ref(false)
@@ -1279,7 +1314,7 @@ const handleRadioChange2 = (row: any) => {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-height: 220px;
+  min-height: 180px;
   background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
 }
 
@@ -1306,7 +1341,7 @@ const handleRadioChange2 = (row: any) => {
   }
 
   .ptw-stats-card {
-    min-height: 160px;
+    min-height: 130px;
   }
 }