2026.3.18

riku

2026-03-18 8e8d00477b1f30183d0d09cd7ec744067595dc46

 src/views/monitor/DataDashboard.vue

@@ -2,10 +2,10 @@
  <div class="data-dashboard">
    <!-- 顶部指标卡片区 -->
    <div class="top-cards">
      <div class="cards-container">
        <!-- 时间周期选项卡片 -->
        <div class="time-period-card">
          <div class="card-title">时间周期</div>
      <!-- 时间周期选项卡片 -->
      <div class="time-period-card">
        <div class="card-title">时间选择</div>
        <div class="time-controls">
          <div class="time-tab-container">
            <div
              v-for="tab in timeTabs"
@@ -17,8 +17,46 @@
              {{ tab.label }}
            </div>
          </div>
          <div class="time-navigator">
            <button class="nav-btn" @click="navigateTime(-1)" title="上一个周期">
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15 18L9 12L15 6"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </button>
            <div class="current-time">{{ currentTimeDisplay }}</div>
            <button class="nav-btn" @click="navigateTime(1)" title="下一个周期">
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9 18L15 12L9 6"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </button>
          </div>
        </div>

      </div>
      <div class="cards-container">
        <!-- 超标数 -->
        <div class="metric-card">
          <div class="card-header">
@@ -148,10 +186,10 @@
          </div>
        </div>

        <!-- 任务完成率 -->
        <!-- 巡查点次 -->
        <div class="metric-card">
          <div class="card-header">
            <div class="card-title">任务完成率</div>
            <div class="card-title">巡查点次</div>
            <div class="card-icon task-icon">
              <svg
                width="20"
@@ -177,18 +215,18 @@
              </svg>
            </div>
          </div>
          <div class="card-value">{{ metrics.taskCompletionRate }}%</div>
          <div class="card-value">{{ metrics.inspectionPoints }}</div>
          <div class="card-trend">
            <span
              class="trend-arrow"
              :class="{
                up: metrics.taskCompletionRateTrend > 0,
                down: metrics.taskCompletionRateTrend < 0,
                up: metrics.inspectionPointsTrend > 0,
                down: metrics.inspectionPointsTrend < 0,
              }"
            >
              {{ metrics.taskCompletionRateTrend > 0 ? '↑' : '↓' }}
              {{ metrics.inspectionPointsTrend > 0 ? '↑' : '↓' }}
            </span>
            <span class="trend-text">{{ Math.abs(metrics.taskCompletionRateTrend) }}%</span>
            <span class="trend-text">{{ Math.abs(metrics.inspectionPointsTrend) }}</span>
            <span class="trend-label">{{ getCompareLabel() }}</span>
          </div>
        </div>
@@ -200,7 +238,7 @@
      <!-- 中部GIS地图区 -->
      <div class="map-section">
        <div id="map" class="map-container">
          <BaseMap></BaseMap>
          <BaseMap :showSatellite="true"></BaseMap>
        </div>

        <!-- 地图点位弹窗 -->
@@ -240,50 +278,212 @@
          </template>
        </el-dialog>
      </div>
    </div>
    <!-- 右侧实时监测总览区 -->
    <div class="overview-section">
      <div class="section-header">
        <h3>设备监控</h3>
        <!-- <span class="view-more">查看更多</span> -->
      </div>

      <!-- 右侧实时监测总览区 -->
      <div class="overview-section">
        <div class="section-header">
          <h3>实时监测总览</h3>
          <span class="view-more">查看更多</span>
      <div class="overview-items-container">
        <div class="overview-item">
          <div class="overview-label">餐饮店铺总数</div>
          <div class="overview-value">{{ overview.totalShops }}</div>
        </div>

        <div class="overview-items-container">
          <div class="overview-item">
            <div class="overview-label">餐饮店铺总数</div>
            <div class="overview-value">{{ overview.totalShops }}</div>
          </div>

          <div class="overview-item">
            <div class="overview-label">在线设备数</div>
            <div class="overview-value">{{ overview.onlineDevices }}</div>
          </div>

          <div class="overview-item">
            <div class="overview-label">离线设备数</div>
            <div class="overview-value">{{ overview.offlineDevices }}</div>
          </div>
        <div class="overview-item">
          <div class="overview-label">在线设备数</div>
          <div class="overview-value">{{ overview.onlineDevices }}</div>
        </div>

        <!-- 设备状态饼图 -->
        <div class="device-status-chart">
          <canvas id="deviceStatusChart"></canvas>
        <div class="overview-item">
          <div class="overview-label">离线设备数</div>
          <div class="overview-value">{{ overview.offlineDevices }}</div>
        </div>
      </div>

      <!-- 设备状态饼图 -->
      <div class="device-status-chart">
        <canvas id="deviceStatusChart"></canvas>
      </div>
    </div>

    <!-- 地图图例 -->
    <div class="map-legend">
      <div class="legend-header">
        <h4>图例</h4>
      </div>
      <div class="legend-items">
        <div class="legend-item">
          <img src="@/assets/exceed.png" alt="油烟浓度超标" class="legend-icon" />
          <span class="legend-text">油烟浓度超标</span>
        </div>
        <div class="legend-item">
          <img src="@/assets/exception.png" alt="供电异常" class="legend-icon" />
          <span class="legend-text">供电异常</span>
        </div>
        <div class="legend-item">
          <img src="@/assets/offline.png" alt="设备或网络异常" class="legend-icon" />
          <span class="legend-text">设备或网络异常</span>
        </div>
        <div class="legend-item">
          <img
            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI1IiB5PSI4IiB3aWR0aD0iMjIiIGhlaWdodD0iMTYiIHJ4PSIzIiBmaWxsPSIjNTJjNDFhIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNNSA4IFEgMTYgMyAyNyA4IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiMzODllMGQiLz48cGF0aCBkPSJNNSAyNCBRIDE2IDI5IDI3IDI0IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiM2NjY2NjYiLz48cmVjdCB4PSI4IiB5PSIxMSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwIiByeD0iMiIgZmlsbD0id2hpdGUiLz48cGF0aCBkPSJNMTIgMTQgTCAyMSAxNCIgc3Ryb2tlPSIjNTJjNDFhIiBzdHJva2Utd2lkdGg9IjEuNSIvPjxwYXRoIGQ9Ik0xMiAxNyBMIDE4IDE3IiBzdHJva2U9IiM1MmM0MWEiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZD0iTTEyIDIwIEwgMTUgMjAiIHN0cm9rZT0iIzUyYzQxYSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48bGluZSB4MT0iMTYiIHkxPSI4IiB4Mj0iMTYiIHkyPSIzIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMyIgcj0iMS41IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjI3IiBjeT0iMTYiIHI9IjMiIGZpbGw9IiNmZmZmZmYiLz48Y2lyY2xlIGN4PSIyNyIgY3k9IjE2IiByPSIxLjUiIGZpbGw9IiM1MmM0MWEiLz48bGluZSB4MT0iNSIgeTE9IjEzIiB4Mj0iNiIgeTI9IjEzIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIvPjxsaW5lIHgxPSI1IiB5MT0iMTkiIHgyPSI2IiB5Mj0iMTkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9zdmc+"
            alt="在线状态"
            class="legend-icon"
          />
          <span class="legend-text">在线状态</span>
        </div>
        <div class="legend-item">
          <img
            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI1IiB5PSI4IiB3aWR0aD0iMjIiIGhlaWdodD0iMTYiIHJ4PSIzIiBmaWxsPSIjOGM4YzhjIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNNSA4IFEgMTYgMyAyNyA4IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiM2NjY2NjYiLz48cGF0aCBkPSJNNSAyNCBRIDE2IDI5IDI3IDI0IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiM2NjY2NjYiLz48cmVjdCB4PSI4IiB5PSIxMSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwIiByeD0iMiIgZmlsbD0id2hpdGUiLz48bGluZSB4MT0iMTEiIHkxPSIxMiIgeDI9IjIxIiB5Mj0iMjIiIHN0cm9rZT0iIzhjOGM4YyIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgeDE9IjExIiB5MT0iMjIiIHgyPSIyMSIgeTI9IjEyIiBzdHJva2U9IiM4YzhjOGMiIHN0cm9rZS13aWR0aD0iMiIvPjxsaW5lIHgxPSIxNiIgeTE9IjgiIHgyPSIxNiIgeTI9IjMiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41Ii8+PGNpcmNsZSBjeD0iMTYiIGN5PSIzIiByPSIxLjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMjciIGN5PSIxNiIgcj0iMyIgZmlsbD0iI2ZmZmZmZiIvPjxjaXJjbGUgY3g9IjI3IiBjeT0iMTYiIHI9IjEuNSIgZmlsbD0iIzhjOGM4YyIvPjxsaW5lIHgxPSI1IiB5MT0iMTMiIHgyPSI2IiB5Mj0iMTMiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41Ii8+PGxpbmUgeDE9IjUiIHkxPSIxOSIgeDI9IjYiIHkyPSIxOSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48L3N2Zz4="
            alt="离线状态"
            class="legend-icon"
          />
          <span class="legend-text">离线状态</span>
        </div>
      </div>
    </div>
    <!-- 巡查情况统计卡片 -->
    <el-scrollbar class="inspection-section">
      <div class="section-header">
        <h3>巡查汇总</h3>
      </div>

      <!-- 巡查量统计 -->
      <div class="inspection-metrics">
        <div class="inspection-metric-item">
          <div class="inspection-metric-label">店铺总计</div>
          <div class="inspection-metric-value">{{ inspectionStats.totalShops }}</div>
        </div>
        <div class="inspection-metric-item">
          <div class="inspection-metric-label">巡查店铺</div>
          <div class="inspection-metric-value">{{ inspectionStats.inspectedShops }}</div>
        </div>
        <div class="inspection-metric-item">
          <div class="inspection-metric-label">巡查点次</div>
          <div class="inspection-metric-value">{{ inspectionStats.inspectionPoints }}</div>
        </div>
        <div class="inspection-metric-item">
          <div class="inspection-metric-label">复查点次</div>
          <div class="inspection-metric-value">{{ inspectionStats.reviewPoints }}</div>
        </div>
      </div>

      <!-- 问题整改情况 -->
      <div class="inspection-chart-container">
        <div class="section-header"><h3>整改汇总</h3></div>
        <canvas id="rectificationChart"></canvas>
      </div>

      <!-- 问题审核情况 -->
      <div class="inspection-table-container">
        <div class="section-header"><h3>审核汇总</h3></div>
        <div class="inspection-metric-label">问题审核</div>
        <div class="inspection-table">
          <div class="inspection-metric-item">
            <div class="inspection-metric-label">无问题</div>
            <div class="inspection-metric-value">{{ inspectionStats.noProblemShops }}</div>
          </div>
          <div class="inspection-metric-item">
            <div class="inspection-metric-label">未审核</div>
            <div class="inspection-metric-value">
              {{ inspectionStats.unreviewedProblemShops }}
            </div>
          </div>
          <div class="inspection-metric-item">
            <div class="inspection-metric-label">部分审核</div>
            <div class="inspection-metric-value">
              {{ inspectionStats.partiallyReviewedProblemShops }}
            </div>
          </div>
          <div class="inspection-metric-item">
            <div class="inspection-metric-label">全部审核</div>
            <div class="inspection-metric-value">
              {{ inspectionStats.fullyReviewedProblemShops }}
            </div>
          </div>
        </div>
        <div class="inspection-metric-label">整改审核</div>
        <div class="inspection-table">
          <div class="inspection-metric-item">
            <div class="inspection-metric-label">未整改</div>
            <div class="inspection-metric-value">{{ inspectionStats.unrectifiedShops }}</div>
          </div>
          <div class="inspection-metric-item">
            <div class="inspection-metric-label">未审核</div>
            <div class="inspection-metric-value">
              {{ inspectionStats.unreviewedRectifiedShops }}
            </div>
          </div>
          <div class="inspection-metric-item">
            <div class="inspection-metric-label">部分审核</div>
            <div class="inspection-metric-value">
              {{ inspectionStats.partiallyReviewedRectifiedShops }}
            </div>
          </div>
          <div class="inspection-metric-item">
            <div class="inspection-metric-label">全部审核</div>
            <div class="inspection-metric-value">
              {{ inspectionStats.fullyReviewedRectifiedShops }}
            </div>
          </div>
          <!-- <div class="table-row">
            <div class="table-cell">无问题店铺数量</div>
            <div class="table-cell value">{{ inspectionStats.noProblemShops }}</div>
          </div>
          <div class="table-row">
            <div class="table-cell">问题未审核店铺数量</div>
            <div class="table-cell value">{{ inspectionStats.unreviewedProblemShops }}</div>
          </div>
          <div class="table-row">
            <div class="table-cell">问题部分审核店铺数量</div>
            <div class="table-cell value">
              {{ inspectionStats.partiallyReviewedProblemShops }}
            </div>
          </div>
          <div class="table-row">
            <div class="table-cell">问题全部审核店铺数量</div>
            <div class="table-cell value">{{ inspectionStats.fullyReviewedProblemShops }}</div>
          </div>
          <div class="table-row">
            <div class="table-cell">未整改店铺数</div>
            <div class="table-cell value">{{ inspectionStats.unrectifiedShops }}</div>
          </div>
          <div class="table-row">
            <div class="table-cell">整改未审核店铺数</div>
            <div class="table-cell value">{{ inspectionStats.unreviewedRectifiedShops }}</div>
          </div>
          <div class="table-row">
            <div class="table-cell">整改部分审核店铺数</div>
            <div class="table-cell value">
              {{ inspectionStats.partiallyReviewedRectifiedShops }}
            </div>
          </div>
          <div class="table-row">
            <div class="table-cell">整改全部审核店铺数</div>
            <div class="table-cell value">{{ inspectionStats.fullyReviewedRectifiedShops }}</div>
          </div> -->
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { onMapMounted, map, AMap } from '@/utils/map/index'
import { onMapMounted, satellite } from '@/utils/map/index'
import districtSearch from '@/utils/map/districtsearch.js'
import marks from '@/utils/map/marks.js'
import { generateTestShops } from '@/debug/debugdata'

export default {
  name: 'DataDashboard',
  data() {
    return {
      activeTime: 'day',
      currentDate: new Date(),
      timeTabs: [
        { label: '日', value: 'day' },
        { label: '周', value: 'week' },
@@ -306,21 +506,62 @@
        onlineRateTrend: 2,
        purifierEfficiency: 85,
        purifierEfficiencyTrend: -3,
        taskCompletionRate: 78,
        taskCompletionRateTrend: 10,
        inspectionPoints: 350,
        inspectionPointsTrend: 50,
      },
      overview: {
        totalShops: 245,
        onlineDevices: 220,
        offlineDevices: 25,
      },
      inspectionStats: {
        // 巡查量
        totalShops: 245,
        inspectedShops: 180,
        inspectionPoints: 350,
        reviewPoints: 80,
        // 问题整改情况
        problemCount: 45,
        rectifiedCount: 38,
        rectificationRate: 84.4,
        // 问题审核情况
        noProblemShops: 135,
        unreviewedProblemShops: 8,
        partiallyReviewedProblemShops: 5,
        fullyReviewedProblemShops: 32,
        unreviewedRectifiedShops: 3,
        partiallyReviewedRectifiedShops: 2,
        fullyReviewedRectifiedShops: 33,
        unrectifiedShops: 7,
      },
      map: null,
      refreshTimer: null,
    }
  },
  computed: {
    currentTimeDisplay() {
      const date = this.currentDate
      switch (this.activeTime) {
        case 'day':
          return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
        case 'week':
          // 简单计算周显示，实际项目中可能需要更复杂的周计算逻辑
          let weekStart = new Date(date)
          weekStart.setDate(date.getDate() - date.getDay() + 1)
          let weekEnd = new Date(date)
          weekEnd.setDate(date.getDate() + (7 - date.getDay()))
          return `${weekStart.getFullYear()}-${String(weekStart.getMonth() + 1).padStart(2, '0')}-${String(weekStart.getDate()).padStart(2, '0')} ~ ${weekEnd.getFullYear()}-${String(weekEnd.getMonth() + 1).padStart(2, '0')}-${String(weekEnd.getDate()).padStart(2, '0')}`
        case 'month':
          return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
        default:
          return ''
      }
    },
  },
  mounted() {
    this.initMap()
    this.initDeviceStatusChart()
    this.initRectificationChart()
    this.startAutoRefresh()
  },
  beforeUnmount() {
@@ -334,16 +575,44 @@
      // 模拟切换时间周期后的数据更新
      this.updateMetrics()
    },
    getPeriodLabel() {
    navigateTime(direction) {
      const newDate = new Date(this.currentDate)
      switch (this.activeTime) {
        case 'day':
          return '今日'
          newDate.setDate(newDate.getDate() + direction)
          break
        case 'week':
          return '本周'
          newDate.setDate(newDate.getDate() + direction * 7)
          break
        case 'month':
          return '本月'
          newDate.setMonth(newDate.getMonth() + direction)
          break
      }
      this.currentDate = newDate
      // 模拟切换时间后的数据更新
      this.updateMetrics()
    },
    getPeriodLabel() {
      const today = new Date()
      const isToday =
        this.activeTime === 'day' &&
        this.currentDate.getDate() === today.getDate() &&
        this.currentDate.getMonth() === today.getMonth() &&
        this.currentDate.getFullYear() === today.getFullYear()

      if (isToday) {
        return '今日'
      }

      switch (this.activeTime) {
        case 'day':
          return '当日'
        case 'week':
          return '当周'
        case 'month':
          return '当月'
        default:
          return '今日'
          return '当日'
      }
    },
    getCompareLabel() {
@@ -369,17 +638,49 @@
          onlineRateTrend: Math.floor(Math.random() * 10) - 5,
          purifierEfficiency: Math.floor(Math.random() * 30) + 70,
          purifierEfficiencyTrend: Math.floor(Math.random() * 10) - 5,
          taskCompletionRate: Math.floor(Math.random() * 40) + 60,
          taskCompletionRateTrend: Math.floor(Math.random() * 15) - 7,
          inspectionPoints: Math.floor(Math.random() * 100) + 300,
          inspectionPointsTrend: Math.floor(Math.random() * 100) - 50,
        }

        // 更新巡查统计数据
        this.inspectionStats = {
          totalShops: 245,
          inspectedShops: Math.floor(Math.random() * 50) + 150,
          inspectionPoints: Math.floor(Math.random() * 100) + 300,
          reviewPoints: Math.floor(Math.random() * 50) + 50,
          problemCount: Math.floor(Math.random() * 30) + 20,
          rectifiedCount: Math.floor(Math.random() * 25) + 15,
          rectificationRate: Math.round((Math.random() * 30 + 70) * 10) / 10,
          noProblemShops: Math.floor(Math.random() * 50) + 100,
          unreviewedProblemShops: Math.floor(Math.random() * 10),
          partiallyReviewedProblemShops: Math.floor(Math.random() * 8),
          fullyReviewedProblemShops: Math.floor(Math.random() * 20) + 15,
          unreviewedRectifiedShops: Math.floor(Math.random() * 5),
          partiallyReviewedRectifiedShops: Math.floor(Math.random() * 5),
          fullyReviewedRectifiedShops: Math.floor(Math.random() * 20) + 15,
          unrectifiedShops: Math.floor(Math.random() * 10),
        }

        // 更新图表
        this.initRectificationChart()
      }, 300)
    },
    initMap() {
      // setTimeout(() => {
      districtSearch.removeDistrict()
      districtSearch.drawDistrict('上海市')
      districtSearch.drawDistrictMask('上海市')
      // districtSearch.districtLayer('310106')
      // }, 2000)

      onMapMounted(() => {
        setTimeout(() => {
          marks.clearMassMarks()
          const shops = generateTestShops()
          console.log(shops)

          marks.drawMassMarks(shops)
        }, 2000)
      })
    },
    initDeviceStatusChart() {
      const chartDom = document.getElementById('deviceStatusChart')
@@ -452,9 +753,83 @@
        chart.setOption(option)

        // 响应式调整
        window.addEventListener('resize', () => {
          chart.resize()
        })
        // window.addEventListener('resize', () => {
        //   chart.resize()
        // })
      }
    },
    initRectificationChart() {
      const chartDom = document.getElementById('rectificationChart')
      if (chartDom) {
        const chart = echarts.init(chartDom)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            backgroundColor: 'rgba(255, 255, 255, 0.95)',
            borderColor: '#e8e8e8',
            borderWidth: 1,
            textStyle: {
              color: '#333',
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['问题数', '整改数'],
            axisLabel: {
              color: '#86909c',
              fontSize: 12,
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#86909c',
              fontSize: 12,
            },
          },
          series: [
            {
              name: '数量',
              type: 'bar',
              data: [
                {
                  value: this.inspectionStats.problemCount,
                  itemStyle: {
                    color: '#fa8c16',
                  },
                },
                {
                  value: this.inspectionStats.rectifiedCount,
                  itemStyle: {
                    color: '#52c41a',
                  },
                },
              ],
              barWidth: '60%',
              label: {
                show: true,
                position: 'top',
                color: '#262626',
                fontSize: 12,
              },
            },
          ],
        }
        chart.setOption(option)

        // 响应式调整
        // window.addEventListener('resize', () => {
        //   chart.resize()
        // })
      }
    },
    startAutoRefresh() {
@@ -476,7 +851,7 @@
/* 全局样式 */
.data-dashboard {
  width: 100%;
  height: calc(100vh - 60px);
  height: calc(100vh - 70px);
  background-color: #f5f7fa;
  color: #333;
  box-sizing: border-box;
@@ -488,32 +863,34 @@
/* 顶部指标卡片区 */
.top-cards {
  position: absolute;
  top: 24px;
  left: 24px;
  top: 4px;
  left: 4px;
  z-index: 10;
  margin-bottom: 24px;
}

.cards-container {
  display: grid;
  grid-template-columns: 280px;
  grid-template-rows: auto repeat(4, auto);
  gap: 16px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 16px;
  grid-template-columns: repeat(2, 180px);
  grid-template-rows: auto repeat(2, auto);
  gap: 8px;
  /* background-color: rgba(255, 255, 255, 0.9); */
  /* padding: 16px; */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

/* 时间周期卡片 */
.time-period-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  padding: 4px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 8px;
  min-width: 300px;
}

.time-period-card .card-title {
@@ -522,6 +899,12 @@
  font-weight: 500;
  margin-bottom: 16px;
  text-align: center;
}

.time-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.time-tab-container {
@@ -533,7 +916,7 @@
}

.time-tab {
  padding: 2px 4px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
@@ -543,6 +926,7 @@
  text-align: center;
  border: 1px solid #e8e8e8;
  background-color: #fafafa;
  flex: 1;
}

.time-tab.active {
@@ -556,6 +940,43 @@
  color: #1890ff;
  border-color: #e6f7ff;
  background-color: #e6f7ff;
}

.time-navigator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
}

.nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #e8e8e8;
  background-color: #fafafa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #4e5969;
}

.nav-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
  background-color: #e6f7ff;
}

.current-time {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  min-width: 180px;
  text-align: center;
  padding: 0 12px;
}

/* 指标卡片 */
@@ -714,8 +1135,8 @@
/* 右侧实时监测总览区 */
.overview-section {
  position: absolute;
  top: 200px;
  right: 24px;
  bottom: 4px;
  left: 4px;
  width: 320px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
@@ -731,7 +1152,6 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}
@@ -759,11 +1179,101 @@

.device-status-chart {
  flex: 1;
  margin-top: 16px;
  min-height: 200px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* 巡查情况统计 */
.inspection-section {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 320px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  max-height: calc(70vh);
  border-top: 1px solid #f0f0f0;
}

.inspection-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.inspection-metric-item {
  background-color: #fafafa;
  border-radius: 6px;
  padding: 12px;
  text-align: center;
}

.inspection-metric-label {
  font-size: 12px;
  color: #86909c;
  margin-bottom: 4px;
}

.inspection-metric-value {
  font-size: 18px;
  font-weight: bold;
  color: #262626;
}

.inspection-chart-container {
  margin-bottom: 20px;
}

.chart-title {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 12px;
}

.inspection-table-container {
  /* max-height: 200px; */
  /* overflow-y: auto; */
}

.inspection-table {
  /* width: 100%;
  border-collapse: collapse; */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-bottom: 20px;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 0;
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  flex: 1;
  font-size: 12px;
  color: #4e5969;
}

.table-cell.value {
  font-weight: 500;
  color: #262626;
  text-align: right;
}

/* 弹窗样式 */
@@ -790,8 +1300,53 @@
  animation: blink 1s infinite;
}

/* 地图图例样式 */
.map-legend {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 200px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  z-index: 10;
}

.legend-header {
  margin-bottom: 12px;
}

.legend-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  margin: 0;
  text-align: center;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #4e5969;
}

.legend-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* 响应式设计 */
@media (max-width: 1200px) {
/* @media (max-width: 1200px) {
  .top-cards {
    position: relative;
    margin-bottom: 24px;
@@ -817,9 +1372,9 @@
    margin-top: 16px;
    background-color: #ffffff;
  }
}
} */

@media (max-width: 768px) {
/* @media (max-width: 768px) {
  .data-dashboard {
    padding: 16px;
  }
@@ -861,5 +1416,5 @@
    width: 100%;
    text-align: left;
  }
}
} */
</style>