From 38faff747e892c3cc55c3a9c9b614cf9fbd321e6 Mon Sep 17 00:00:00 2001
From: luoyu <mingyuxuezhang@qq.com>
Date: Fri, 23 May 2025 15:33:49 +0800
Subject: [PATCH] =?UTF-8?q?20250523-=E4=BF=AE=E6=94=B9=E4=BC=9A=E8=AE=AE?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E4=BC=9A=E8=AE=AE=E5=AE=A4=E4=BD=BF=E7=94=A8=E6=83=85?=
 =?UTF-8?q?=E5=86=B5=E6=8E=92=E5=BA=8F=E5=92=8C=E9=83=A8=E9=97=A8=E5=BC=80?=
 =?UTF-8?q?=E4=BC=9A=E6=83=85=E5=86=B5=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/admin/meeting/MeetingCount.vue | 273 +++++++++++++++++------
 1 file changed, 207 insertions(+), 66 deletions(-)

diff --git a/src/views/admin/meeting/MeetingCount.vue b/src/views/admin/meeting/MeetingCount.vue
index 36f9d20..091eebe 100644
--- a/src/views/admin/meeting/MeetingCount.vue
+++ b/src/views/admin/meeting/MeetingCount.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='container'>
-    <a-card title='会议室管理'>
+    <a-card title='会议室管理' :bodyStyle="{ padding: '12px' }">
       <a slot='extra'>
         <a-date-picker @change='onChangeNumCount' :default-value='nowDate' />
       </a>
@@ -67,9 +67,9 @@
         </a-col>
       </a-row>
     </a-card>
-    <a-row>
+    <a-row :gutter="[0, 16]">
       <a-col :span='18'>
-        <a-card title='会议日历' bodyStyle='height: 780px'>
+        <a-card title='会议日历' :bodyStyle='{ height: "780px", padding: "0" }'>
           <a-calendar :header-render='headerRender' @select='onSelect'>
             <ul slot='dateCellRender' slot-scope='value' class='c_meeting'
                 style='padding: 0;text-align: center; font-size: 30px;font-weight: 700; margin-top: 6px'>
@@ -89,7 +89,7 @@
         </a-card>
       </a-col>
       <a-col :span='6'>
-        <a-card title='会议状态'>
+        <a-card title='会议状态' :bodyStyle="{ padding: '16px' }">
           <a-row>
             <a-col :span='18'>
               <a-icon type='message' theme='filled' style='font-size: 24px;color: #E6A23C' />
@@ -136,7 +136,7 @@
             </a-col>
           </a-row>
         </a-card>
-        <a-card title='任务代办（会议审核）' bodyStyle='height: 554px'>
+        <a-card title='任务代办（会议审核）' :bodyStyle='{ height: "554px", padding: "0" }'>
           <a-list item-layout='horizontal' :data-source='waitList'>
             <a-list-item @click='goRes({status: "5"})' slot='renderItem' slot-scope='item, index'>
               <!--              <a slot='actions'>审核</a>-->
@@ -150,43 +150,43 @@
         </a-card>
       </a-col>
     </a-row>
-    <a-card title='数据统计'>
+    <a-card title='数据统计' :bodyStyle="{ padding: '12px' }">
       <a slot='extra'>
         <a-range-picker @change='onChangeChartCount' :default-value='[nowMonthStart,nowMonthEnd]' />
       </a>
     </a-card>
-    <a-row>
+    <a-row :gutter="[16, 16]">
       <a-col :span='8'>
-        <a-card title='会议室使用排名'>
-          <div id='chartUse' style='width: 100%; height: 500px'></div>
+        <a-card title='会议室使用情况' class="chart-card" :bodyStyle="{ padding: '0' }">
+          <div id='chartUse' class="responsive-chart" style='width: 100%; height: 650px'></div>
         </a-card>
       </a-col>
       <a-col :span='16'>
-        <a-row>
+        <a-row :gutter="[16, 16]">
           <a-col :span='12'>
-            <a-card title='服务情况'>
-              <div id='chartServe' style='width: 100%; height: 200px'></div>
+            <a-card title='服务情况' class="chart-card" :bodyStyle="{ padding: '0' }">
+              <div id='chartServe' class="responsive-chart" style='width: 100%; height: 225px'></div>
             </a-card>
           </a-col>
           <a-col :span='12'>
-            <a-card title='形式统计'>
-              <div id='chartType' style='width: 100%; height: 200px'></div>
+            <a-card title='形式统计' class="chart-card" :bodyStyle="{ padding: '0' }">
+              <div id='chartType' class="responsive-chart" style='width: 100%; height: 225px'></div>
             </a-card>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="[16, 16]">
           <a-col :span='24'>
-            <a-card title='部门开会情况'>
-              <div id='chartDep' style='width: 100%; height: 194px'></div>
+            <a-card title='部门开会情况' class="chart-card" :bodyStyle="{ padding: '0' }">
+              <div id='chartDep' class="responsive-chart" style='width: 100%; height: 325px'></div>
             </a-card>
           </a-col>
         </a-row>
       </a-col>
     </a-row>
-    <a-row>
+    <a-row :gutter="[16, 16]">
       <a-col :span='24'>
-        <a-card title='开会情况'>
-          <div id='chartMeeting' style='width: 100%; height: 300px'></div>
+        <a-card title='开会情况' class="chart-card" :bodyStyle="{ padding: '0' }">
+          <div id='chartMeeting' class="responsive-chart" style='width: 100%; height: 300px'></div>
         </a-card>
       </a-col>
     </a-row>
@@ -194,6 +194,14 @@
   </div>
 </template>
 <style>
+.container {
+  padding: 0;
+}
+
+.ant-card {
+  margin-bottom: 16px;
+}
+
 .eachNum {
   margin-left: 50px;
 }
@@ -237,6 +245,28 @@
   padding: 2px 5px;
   font-size: 0.8rem;
 }
+
+/* 响应式图表样式 */
+.chart-card {
+  margin-bottom: 16px;
+}
+
+.responsive-chart {
+  min-height: 200px;
+}
+
+@media (max-width: 1200px) {
+  .responsive-chart {
+    height: auto !important;
+    min-height: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+  .responsive-chart {
+    min-height: 250px;
+  }
+}
 </style>
 <script>
 import * as echarts from 'echarts'
@@ -276,7 +306,9 @@ export default {
         closed: 0,
         wait: 0
       }, // 会议室状态数据
-      waitList: [] // 待办数据
+      waitList: [], // 待办数据
+      resizeTimer: null, // 用于防抖的定时器
+      charts: [] // 存储图表实例
     }
   },
   mounted() {
@@ -285,9 +317,28 @@ export default {
     this.getStatusCount()
     this.getWaitList()
     this.getChartCount()
-    // this.drawChart()
+    // 添加窗口大小变化监听器
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    // 组件销毁前移除监听器
+    window.removeEventListener('resize', this.handleResize)
   },
   methods: {
+    // 处理窗口大小变化，重新渲染图表
+    handleResize() {
+      if (this.resizeTimer) {
+        clearTimeout(this.resizeTimer)
+      }
+      this.resizeTimer = setTimeout(() => {
+        // 使用保存的图表实例进行重新渲染
+        this.charts.forEach(chart => {
+          if (chart && !chart.isDisposed()) {
+            chart.resize()
+          }
+        })
+      }, 200) // 添加200ms防抖
+    },
     onSelect(nowDate) {
       let date = nowDate.format('YYYY-MM-DD')
       this.goRes({ date: date })
@@ -452,55 +503,125 @@ export default {
      * 获取统计图数据
      */
     getChartCount() {
+      console.log('调用图表统计接口，请求参数：', {
+        startDate: this.nowMonthStart,
+        endDate: this.nowMonthEnd
+      });
+      
+      // 清除旧的图表实例
+      this.charts.forEach(chart => {
+        if (chart && !chart.isDisposed()) {
+          chart.dispose()
+        }
+      })
+      this.charts = []
+      
       getChartData({
         startDate: this.nowMonthStart,
         endDate: this.nowMonthEnd
       }).then(res => {
+        console.log('图表统计接口返回数据：', res);
+        console.log('会议室使用排名数据：', res.data.roomRank);
         this.drawChart(res.data)
+      }).catch(error => {
+        console.error('图表统计接口调用失败：', error);
       })
     },
     drawChart(data) {
-      // 会议室使用排名
-      let chartUse = echarts.init(document.getElementById('chartUse'))
-      let useData = data.roomRank
-      useData.y.reverse()
-      useData.total.reverse()
-      let chartUseOp = {
-        tooltip: {
-          trigger: 'item',
-          formatter: '{b}<br />会议场次 : {c} 次'
-        },
-        yAxis: {
-          type: 'category',
-          data: useData.y
-        },
-        xAxis: {
-          type: 'value'
-        },
-        grid: {
-          top: '0',
-          left: '2%',
-          right: '2%',
-          bottom: '1%',
-          containLabel: true
-        },
-        series: [
-          {
-            data: useData.total,
-            type: 'bar',
-            label: {
-              show: true, // 显示数值
-              position: 'inside' // 数值显示的位置
-            },
-            barWidth: '20px',
-            itemStyle: {
-              color: '#50B5FF', // 设置柱状图的颜色
-              borderRadius: [0, 5, 5, 0] // 分别设置柱子左上、右上、右下、左下的圆角
-            }
+      try {
+        // 会议室使用情况
+        let chartUse = echarts.init(document.getElementById('chartUse'))
+        let useData = data.roomRank
+        
+        // 保存图表实例
+        this.charts.push(chartUse)
+        
+        console.log('绘制会议室使用情况图表，原始数据：', useData);
+        
+        // 反转数据数组，使1楼在上面
+        if (useData && useData.y && useData.total) {
+          useData.y.reverse()
+          useData.total.reverse()
+          console.log('反转后的会议室数据：', useData);
+        }
+
+        // 提取楼层和房间名称，构建标题
+        let yAxisLabels = []
+        let seriesData = []
+
+        if (useData && useData.y && useData.total) {
+          console.log('会议室名称列表：', useData.y);
+          console.log('会议室使用次数列表：', useData.total);
+
+          for (let i = 0; i < useData.y.length; i++) {
+            // 使用楼层+会议室名称作为标签
+            yAxisLabels.push(useData.y[i])
+            
+            // 构建带有统一天蓝色的数据
+            seriesData.push({
+              value: useData.total[i],
+              itemStyle: {
+                color: '#87CEEB' // 天蓝色
+              }
+            });
           }
-        ]
+
+          console.log('处理后的图表数据：', {
+            yAxisLabels: yAxisLabels,
+            seriesData: seriesData
+          });
+        } else {
+          console.warn('会议室使用情况数据不完整或为空');
+        }
+
+        let chartUseOp = {
+          title: {
+            left: 'center',
+            top: '10px'
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{b}<br />会议场次 : {c} 次'
+          },
+          yAxis: {
+            type: 'category',
+            data: yAxisLabels,
+            axisLabel: {
+              interval: 0,
+              rotate: 0
+            }
+          },
+          xAxis: {
+            type: 'value'
+          },
+          grid: {
+            top: '60px',
+            left: '2%',
+            right: '2%',
+            bottom: '1%',
+            containLabel: true
+          },
+          series: [
+            {
+              data: seriesData.length > 0 ? seriesData : useData.total,
+              type: 'bar',
+              label: {
+                show: true, // 显示数值
+                position: 'right' // 数值显示的位置
+              },
+              barWidth: '20px',
+              itemStyle: {
+                color: '#87CEEB', // 天蓝色
+                borderRadius: [0, 5, 5, 0] // 分别设置柱子左上、右上、右下、左下的圆角
+              }
+            }
+          ]
+        }
+        chartUse.setOption(chartUseOp)
+      } catch (error) {
+        console.error('绘制会议室使用情况图表出错:', error);
       }
-      chartUse.setOption(chartUseOp)
+
       // 服务情况
       let chartServe = echarts.init(document.getElementById('chartServe'))
       let serveData = data.serve
@@ -557,6 +678,8 @@ export default {
         ]
       }
       chartServe.setOption(chartServeOp)
+      // 保存图表实例
+      this.charts.push(chartServe)
       // 形式统计
       let chartType = echarts.init(document.getElementById('chartType'))
       let typeData = data.roomType
@@ -618,26 +741,38 @@ export default {
         ]
       }
       chartType.setOption(chartTypeOp)
+      // 保存图表实例
+      this.charts.push(chartType)
       // 部门开会情况
       let chartDep = echarts.init(document.getElementById('chartDep'))
       let depData = data.orgMeeting
       let chartDepOp = {
+        title: {
+          // text: '部门开会情况（显示前20个部门）',
+          left: 'center',
+          top: '10px'
+        },
         tooltip: {
           trigger: 'item',
           formatter: '{b}<br />会议场次 : {c} 次'
         },
         xAxis: {
           type: 'category',
-          data: depData.x
+          data: depData.x,
+          axisLabel: {
+            interval: 0,
+            rotate: 45, // 旋转标签，避免重叠
+            fontSize: 12 // 增加字体大小
+          }
         },
         yAxis: {
           type: 'value'
         },
         grid: {
-          top: '3%',
+          top: '60px', // 增加顶部空间，为标题留出位置
           left: '2%',
           right: '2%',
-          bottom: '0%',
+          bottom: '20%', // 增加底部空间，为旋转的标签留出更多位置
           containLabel: true
         },
         series: [
@@ -645,10 +780,12 @@ export default {
             data: depData.total,
             label: {
               show: true, // 显示数值
-              position: 'inside' // 数值显示的位置
+              position: 'top', // 数值显示的位置
+              fontSize: 12, // 增加标签字体大小
+              formatter: '{c}' // 只显示数值
             },
             type: 'bar',
-            barWidth: '20px',
+            barWidth: '15px', // 增加柱子宽度
             itemStyle: {
               color: '#FFEC6D' // 设置柱状图的颜色
             }
@@ -656,6 +793,8 @@ export default {
         ]
       }
       chartDep.setOption(chartDepOp)
+      // 保存图表实例
+      this.charts.push(chartDep)
       // 开会情况统计
       let chartMeeting = echarts.init(document.getElementById('chartMeeting'))
       let meetingData = data.everyDay
@@ -701,6 +840,8 @@ export default {
         ]
       }
       chartMeeting.setOption(chartMeetingOp)
+      // 保存图表实例
+      this.charts.push(chartMeeting)
     }
   }
 }