20250523-修改会议管理数据统计中的会议室使用情况排序和部门开会情况数量

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='会议室使用排名'>
+        <a-card title='会议室使用情况' class="chart-card" :bodyStyle="{ padding: '0' }">
-          <div id='chartUse' style='width: 100%; height: 500px'></div>
+          <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='服务情况'>
+            <a-card title='服务情况' class="chart-card" :bodyStyle="{ padding: '0' }">
-              <div id='chartServe' style='width: 100%; height: 200px'></div>
+              <div id='chartServe' class="responsive-chart" style='width: 100%; height: 225px'></div>
             </a-card>
           </a-col>
           <a-col :span='12'>
-            <a-card title='形式统计'>
+            <a-card title='形式统计' class="chart-card" :bodyStyle="{ padding: '0' }">
-              <div id='chartType' style='width: 100%; height: 200px'></div>
+              <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='部门开会情况'>
+            <a-card title='部门开会情况' class="chart-card" :bodyStyle="{ padding: '0' }">
-              <div id='chartDep' style='width: 100%; height: 194px'></div>
+              <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='开会情况'>
+        <a-card title='开会情况' class="chart-card" :bodyStyle="{ padding: '0' }">
-          <div id='chartMeeting' style='width: 100%; height: 300px'></div>
+          <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) {
-      // 会议室使用排名
+      try {
-      let chartUse = echarts.init(document.getElementById('chartUse'))
+        // 会议室使用情况
-      let useData = data.roomRank
+        let chartUse = echarts.init(document.getElementById('chartUse'))
-      useData.y.reverse()
+        let useData = data.roomRank
-      useData.total.reverse()
+        
-      let chartUseOp = {
+        // 保存图表实例
-        tooltip: {
+        this.charts.push(chartUse)
-          trigger: 'item',
+        
-          formatter: '{b}<br />会议场次 : {c} 次'
+        console.log('绘制会议室使用情况图表，原始数据：', useData);
-        },
+        
-        yAxis: {
+        // 反转数据数组，使1楼在上面
-          type: 'category',
+        if (useData && useData.y && useData.total) {
-          data: useData.y
+          useData.y.reverse()
-        },
+          useData.total.reverse()
-        xAxis: {
+          console.log('反转后的会议室数据：', useData);
-          type: 'value'
+        }
-        },
+
-        grid: {
+        // 提取楼层和房间名称，构建标题
-          top: '0',
+        let yAxisLabels = []
-          left: '2%',
+        let seriesData = []
-          right: '2%',
+
-          bottom: '1%',
+        if (useData && useData.y && useData.total) {
-          containLabel: true
+          console.log('会议室名称列表：', useData.y);
-        },
+          console.log('会议室使用次数列表：', useData.total);
-        series: [
+
-          {
+          for (let i = 0; i < useData.y.length; i++) {
-            data: useData.total,
+            // 使用楼层+会议室名称作为标签
-            type: 'bar',
+            yAxisLabels.push(useData.y[i])
-            label: {
+            
-              show: true, // 显示数值
+            // 构建带有统一天蓝色的数据
-              position: 'inside' // 数值显示的位置
+            seriesData.push({
-            },
+              value: useData.total[i],
-            barWidth: '20px',
+              itemStyle: {
-            itemStyle: {
+                color: '#87CEEB' // 天蓝色
-              color: '#50B5FF', // 设置柱状图的颜色
+              }
-              borderRadius: [0, 5, 5, 0] // 分别设置柱子左上、右上、右下、左下的圆角
+            });
-            }
           }
-        ]
+
+          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)
     }
   }
 }