add： dp 组件模块提取

src/components/DashboardModules/DataOverview.vue

+<template>
+  <div class="data-module">
+    <div class="module-header">
+      <h3>数据总览</h3>
+      <span class="refresh-icon" @click="handleRefresh"></span>
+    </div>
+    <div class="module-body">
+      <div class="data-stats">
+        <div class="stat-item">
+          <span class="stat-label">监测点位</span>
+          <span class="stat-value">{{ monitoringPoints }}</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">在线设备</span>
+          <span class="stat-value online">{{ onlineDevices }}</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">数据采集量</span>
+          <span class="stat-value">{{ dataCollectionVolume }}</span>
+        </div>
+      </div>
+      <div class="progress-bars">
+        <div class="progress-item">
+          <span class="progress-label">设备在线率</span>
+          <div class="progress-container">
+            <div
+              class="progress-bar"
+              :style="{ width: deviceOnlineRate + '%' }"
+            ></div>
+          </div>
+          <span class="progress-value">{{ deviceOnlineRate + "%" }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DataOverview",
+  props: {
+    monitoringPoints: {
+      type: Number,
+      default: 256,
+    },
+    onlineDevices: {
+      type: Number,
+      default: 245,
+    },
+    dataCollectionVolume: {
+      type: String,
+      default: "1.2万",
+    },
+    deviceOnlineRate: {
+      type: Number,
+      default: 95.7,
+    },
+  },
+  methods: {
+    handleRefresh() {
+      // 触发父组件的数据刷新事件
+      this.$emit("refresh-data");
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 组件样式将从主页面继承 */
+</style>
\ No newline at end of file

src/components/DashboardModules/DeviceStatus.vue

+<template>
+  <div class="data-module">
+    <div class="module-header">
+      <h3>设备运行状态</h3>
+      <span class="view-more" @click="handleViewMore">查看全部</span>
+    </div>
+    <div class="module-body">
+      <div class="device-status-list">
+        <div 
+          v-for="(device, index) in deviceList" 
+          :key="index" 
+          class="device-item"
+        >
+          <span class="device-name">{{ device.name }}</span>
+          <span class="device-status" :class="device.status">{{ device.statusText }}</span>
+          <span class="device-value">{{ device.value }}</span>
+          <span class="device-time">{{ device.time }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeviceStatus',
+  props: {
+    deviceList: {
+      type: Array,
+      default: () => [
+        {
+          name: '传感器A-1',
+          status: 'normal',
+          statusText: '正常',
+          value: '125.6',
+          time: '3分钟前'
+        },
+        {
+          name: '传感器B-3',
+          status: 'normal',
+          statusText: '正常',
+          value: '89.2',
+          time: '5分钟前'
+        },
+        {
+          name: '传感器C-2',
+          status: 'warning',
+          statusText: '警告',
+          value: '185.3',
+          time: '1分钟前'
+        },
+        {
+          name: '传感器D-5',
+          status: 'offline',
+          statusText: '离线',
+          value: '--',
+          time: '2小时前'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleViewMore() {
+      this.$emit('view-more');
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 组件样式将从主页面继承 */
+</style>
\ No newline at end of file

src/components/DashboardModules/EnvironmentalMonitoring.vue

+<template>
+  <div class="data-module">
+    <div class="module-header">
+      <h3>环境监测</h3>
+      <span class="time-range">{{ timeRange }}</span>
+    </div>
+    <div class="module-body">
+      <div class="env-data-grid">
+        <div class="env-item" v-for="(envData, index) in envDataList" :key="index">
+          <span class="env-icon" :class="envData.icon"></span>
+          <span class="env-label">{{ envData.label }}</span>
+          <span class="env-value">{{ envData.value }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EnvironmentalMonitoring',
+  props: {
+    timeRange: {
+      type: String,
+      default: '今日'
+    },
+    envDataList: {
+      type: Array,
+      default: () => [
+        {
+          icon: 'temp',
+          label: '平均温度',
+          value: '26.3°C'
+        },
+        {
+          icon: 'humidity',
+          label: '平均湿度',
+          value: '65.8%'
+        },
+        {
+          icon: 'pressure',
+          label: '平均气压',
+          value: '101.5kPa'
+        },
+        {
+          icon: 'wind',
+          label: '平均风速',
+          value: '3.2m/s'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 组件样式将从主页面继承 */
+</style>
\ No newline at end of file

src/components/DashboardModules/RealTimeAlarm.vue

+<template>
+  <div class="data-module">
+    <div class="module-header">
+      <h3>实时报警</h3>
+      <span class="alarm-count">{{ alarmCount }}</span>
+    </div>
+    <div class="module-body">
+      <div class="alarm-list">
+        <div 
+          v-for="(alarm, index) in alarmList" 
+          :key="index" 
+          class="alarm-item"
+          :class="'level-' + alarm.level"
+        >
+          <span class="alarm-level">{{ alarm.levelText }}</span>
+          <span class="alarm-content">{{ alarm.content }}</span>
+          <span class="alarm-point">{{ alarm.point }}</span>
+          <span class="alarm-time">{{ alarm.time }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RealTimeAlarm',
+  props: {
+    alarmList: {
+      type: Array,
+      default: () => [
+        {
+          level: 1,
+          levelText: '紧急',
+          content: '温度异常',
+          point: 'A-12区',
+          time: '10:23'
+        },
+        {
+          level: 2,
+          levelText: '重要',
+          content: '设备离线',
+          point: 'B-05区',
+          time: '09:45'
+        },
+        {
+          level: 3,
+          levelText: '一般',
+          content: '数据异常',
+          point: 'C-08区',
+          time: '08:30'
+        },
+        {
+          level: 3,
+          levelText: '一般',
+          content: '压力偏低',
+          point: 'D-01区',
+          time: '07:55'
+        }
+      ]
+    }
+  },
+  computed: {
+    alarmCount() {
+      return this.alarmList.length;
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 组件样式将从主页面继承 */
+</style>
\ No newline at end of file

src/components/DashboardModules/SystemLoad.vue

+<template>
+  <div class="data-module">
+    <div class="module-header">
+      <h3>系统资源监控</h3>
+      <span class="system-time">{{ currentTime }}</span>
+    </div>
+    <div class="module-body">
+      <div class="system-resources">
+        <div
+          v-for="(resource, index) in resourceList"
+          :key="index"
+          class="resource-item"
+        >
+          <span class="resource-label">{{ resource.label }}</span>
+          <div class="resource-bar-container">
+            <div
+              class="resource-bar"
+              :class="resource.barClass"
+              :style="{ width: resource.value + '%' }"
+            ></div>
+          </div>
+          <span class="resource-value">{{ resource.value + "%" }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SystemLoad",
+  props: {
+    currentTime: {
+      type: String,
+      default: "",
+    },
+    resourceList: {
+      type: Array,
+      default: () => [
+        {
+          label: "CPU使用率",
+          value: 42,
+          barClass: "cpu-bar",
+        },
+        {
+          label: "内存使用率",
+          value: 68,
+          barClass: "mem-bar",
+        },
+        {
+          label: "磁盘使用率",
+          value: 35,
+          barClass: "disk-bar",
+        },
+      ],
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 组件样式将从主页面继承 */
+</style>
\ No newline at end of file

src/components/DashboardModules/TrendAnalysis.vue

+<template>
+  <div class="data-module">
+    <div class="module-header">
+      <h3>数据趋势分析</h3>
+      <span class="chart-type">{{ chartType }}</span>
+    </div>
+    <div class="module-body">
+      <div class="chart-container" ref="chartContainer"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TrendAnalysis',
+  props: {
+    chartType: {
+      type: String,
+      default: '24小时'
+    }
+  },
+  data() {
+    return {
+      chartInstance: null
+    };
+  },
+  mounted() {
+    // 这里可以初始化图表，例如使用ECharts
+    // 如果需要在父组件中初始化，可以通过$refs访问chartContainer
+    this.$nextTick(() => {
+      this.$emit('chart-ready', this.$refs.chartContainer);
+    });
+  },
+  beforeDestroy() {
+    // 清理图表实例
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 组件样式将从主页面继承 */
+</style>
\ No newline at end of file

src/views/index.vue

@@ -55,199 +55,52 @@
     </nav> -->
 
     <!-- 主内容区 -->
-    <main class="main-content" style="display: none">
+    <main class="main-content" style="display: none1">
       <!-- 左侧数据模块 -->
       <div class="left-modules">
         <!-- 模块1：数据总览 -->
-        <div class="data-module">
-          <div class="module-header">
-            <h3>数据总览</h3>
-            <span class="refresh-icon"></span>
-          </div>
-          <div class="module-body">
-            <div class="data-stats">
-              <div class="stat-item">
-                <span class="stat-label">监测点位</span>
-                <span class="stat-value">256</span>
-              </div>
-              <div class="stat-item">
-                <span class="stat-label">在线设备</span>
-                <span class="stat-value online">245</span>
-              </div>
-              <div class="stat-item">
-                <span class="stat-label">数据采集量</span>
-                <span class="stat-value">1.2万</span>
-              </div>
-            </div>
-            <div class="progress-bars">
-              <div class="progress-item">
-                <span class="progress-label">设备在线率</span>
-                <div class="progress-container">
-                  <div class="progress-bar" style="width: 95%"></div>
-                </div>
-                <span class="progress-value">95.7%</span>
-              </div>
-            </div>
-          </div>
-        </div>
+        <DataOverview @refresh-data="handleRefreshData" />
 
         <!-- 模块2：实时报警 -->
-        <div class="data-module">
-          <div class="module-header">
-            <h3>实时报警</h3>
-            <span class="alarm-count">5</span>
-          </div>
-          <div class="module-body">
-            <div class="alarm-list">
-              <div class="alarm-item level-1">
-                <span class="alarm-level">紧急</span>
-                <span class="alarm-content">温度异常</span>
-                <span class="alarm-point">A-12区</span>
-                <span class="alarm-time">10:23</span>
-              </div>
-              <div class="alarm-item level-2">
-                <span class="alarm-level">重要</span>
-                <span class="alarm-content">设备离线</span>
-                <span class="alarm-point">B-05区</span>
-                <span class="alarm-time">09:45</span>
-              </div>
-              <div class="alarm-item level-3">
-                <span class="alarm-level">一般</span>
-                <span class="alarm-content">数据异常</span>
-                <span class="alarm-point">C-08区</span>
-                <span class="alarm-time">08:30</span>
-              </div>
-              <div class="alarm-item level-3">
-                <span class="alarm-level">一般</span>
-                <span class="alarm-content">压力偏低</span>
-                <span class="alarm-point">D-01区</span>
-                <span class="alarm-time">07:55</span>
-              </div>
-            </div>
-          </div>
-        </div>
+        <RealTimeAlarm />
 
         <!-- 模块3：环境监测 -->
-        <div class="data-module">
-          <div class="module-header">
-            <h3>环境监测</h3>
-            <span class="time-range">今日</span>
-          </div>
-          <div class="module-body">
-            <div class="env-data-grid">
-              <div class="env-item">
-                <span class="env-icon temp"></span>
-                <span class="env-label">平均温度</span>
-                <span class="env-value">26.3°C</span>
-              </div>
-              <div class="env-item">
-                <span class="env-icon humidity"></span>
-                <span class="env-label">平均湿度</span>
-                <span class="env-value">65.8%</span>
-              </div>
-              <div class="env-item">
-                <span class="env-icon pressure"></span>
-                <span class="env-label">平均气压</span>
-                <span class="env-value">101.5kPa</span>
-              </div>
-              <div class="env-item">
-                <span class="env-icon wind"></span>
-                <span class="env-label">平均风速</span>
-                <span class="env-value">3.2m/s</span>
-              </div>
-            </div>
-          </div>
-        </div>
+        <EnvironmentalMonitoring />
       </div>
 
       <!-- 右侧数据模块 -->
       <div class="right-modules">
         <!-- 模块4：趋势分析 -->
-        <div class="data-module">
-          <div class="module-header">
-            <h3>数据趋势分析</h3>
-            <span class="chart-type">24小时</span>
-          </div>
-          <div class="module-body">
-            <div class="chart-container" id="trendChart"></div>
-          </div>
-        </div>
+        <TrendAnalysis @chart-ready="handleChartReady" />
 
         <!-- 模块5：设备状态 -->
-        <div class="data-module">
-          <div class="module-header">
-            <h3>设备运行状态</h3>
-            <span class="view-more">查看全部</span>
-          </div>
-          <div class="module-body">
-            <div class="device-status-list">
-              <div class="device-item">
-                <span class="device-name">传感器A-1</span>
-                <span class="device-status normal">正常</span>
-                <span class="device-value">125.6</span>
-                <span class="device-time">3分钟前</span>
-              </div>
-              <div class="device-item">
-                <span class="device-name">传感器B-3</span>
-                <span class="device-status normal">正常</span>
-                <span class="device-value">89.2</span>
-                <span class="device-time">5分钟前</span>
-              </div>
-              <div class="device-item">
-                <span class="device-name">传感器C-2</span>
-                <span class="device-status warning">警告</span>
-                <span class="device-value">185.3</span>
-                <span class="device-time">1分钟前</span>
-              </div>
-              <div class="device-item">
-                <span class="device-name">传感器D-5</span>
-                <span class="device-status offline">离线</span>
-                <span class="device-value">--</span>
-                <span class="device-time">2小时前</span>
-              </div>
-            </div>
-          </div>
-        </div>
+        <DeviceStatus @view-more="handleViewMoreDevices" />
 
         <!-- 模块6：系统负载 -->
-        <div class="data-module">
-          <div class="module-header">
-            <h3>系统资源监控</h3>
-            <span class="system-time">{{ currentTimeShort }}</span>
-          </div>
-          <div class="module-body">
-            <div class="system-resources">
-              <div class="resource-item">
-                <span class="resource-label">CPU使用率</span>
-                <div class="resource-bar-container">
-                  <div class="resource-bar cpu-bar" style="width: 42%"></div>
-                </div>
-                <span class="resource-value">42%</span>
-              </div>
-              <div class="resource-item">
-                <span class="resource-label">内存使用率</span>
-                <div class="resource-bar-container">
-                  <div class="resource-bar mem-bar" style="width: 68%"></div>
-                </div>
-                <span class="resource-value">68%</span>
-              </div>
-              <div class="resource-item">
-                <span class="resource-label">磁盘使用率</span>
-                <div class="resource-bar-container">
-                  <div class="resource-bar disk-bar" style="width: 35%"></div>
-                </div>
-                <span class="resource-value">35%</span>
-              </div>
-            </div>
-          </div>
-        </div>
+        <SystemLoad :current-time="currentTimeShort" />
       </div>
     </main>
   </div>
 </template>
 
 <script>
+// 引入所有组件
+import DataOverview from "@/components/DashboardModules/DataOverview.vue";
+import RealTimeAlarm from "@/components/DashboardModules/RealTimeAlarm.vue";
+import EnvironmentalMonitoring from "@/components/DashboardModules/EnvironmentalMonitoring.vue";
+import TrendAnalysis from "@/components/DashboardModules/TrendAnalysis.vue";
+import DeviceStatus from "@/components/DashboardModules/DeviceStatus.vue";
+import SystemLoad from "@/components/DashboardModules/SystemLoad.vue";
 export default {
+  // 注册组件
+  components: {
+    DataOverview,
+    RealTimeAlarm,
+    EnvironmentalMonitoring,
+    TrendAnalysis,
+    DeviceStatus,
+    SystemLoad,
+  },
   data() {
     return {
       currentTime: "",
@@ -268,15 +121,6 @@ export default {
           status: "online", // 在线
           avatar: "/static/images/avatars/zhangsan.png", // 头像
         },
-        {
-          longitude: 121.70810830038986,
-          latitude: 36.854636402927986,
-          height: 100,
-          name: "李四",
-          status: "offline", // 离线
-          avatar: "/static/images/avatars/lisi.png", // 头像
-        },
-        // 其他人员数据...
       ],
       // 新增：车辆数据
       vehicleList: [],
@@ -288,11 +132,6 @@ export default {
     // 初始化Cesium地图
     this.initCesium();
 
-    // 初始化图表
-    this.$nextTick(() => {
-      this.drawTrendChart();
-    });
-
     // 监听窗口大小变化
     window.addEventListener("resize", this.handleResize);
   },
@@ -499,98 +338,6 @@ export default {
         console.error("定位到模型上方失败:", error);
       }
     },
-    // 修改createPersonModel方法
-    createPersonModel() {
-      // 先清除可能存在的定时器，避免重复执行
-      if (this.intervaler) {
-        clearInterval(this.intervaler);
-        this.intervaler = null;
-      }
-
-      // 立即生成并显示人员实体，而不是等待定时器执行
-      console.log("立即创建人员实体");
-      // 清除现有实体
-      this.clearEntities();
-
-      // 立即调用personCardList生成数据并创建实体
-      this.personCardList((list) => {
-        console.log("人员数据", this.personnelList);
-        // 创建新实体
-        for (let item of this.personnelList) {
-          let lng = Number(item.lng);
-          let lat = Number(item.lat);
-          let height = Number(item.height);
-          let position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
-          console.log(item.perName, position);
-          // 创建人员标记
-          let entity = this.viewer.entities.add({
-            position: position,
-            label: {
-              text: item.perName,
-              font: "16px",
-              backgroundColor: Cesium.Color.fromCssColorString("#173349"),
-              showBackground: true,
-              fillColor: Cesium.Color.YELLOW,
-              depthTestAgainstTerrain: false,
-              pixelOffset: new Cesium.Cartesian2(0, -35),
-            },
-            billboard: {
-              image: "/poi-marker-default.png",
-              scale: 0.5,
-              heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
-            },
-            description: `<div><h4>${item.perName}${item.status}</h4></div>`,
-            fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
-          });
-          entity.info = item; // 添加 info 属性
-          entity.type = "person"; // 添加类型标记
-          this.bgEntities[item.perName] = entity; // 存储新实体
-        }
-      });
-
-      // 设置定时刷新，改为10秒(10000ms)
-      this.intervaler = setInterval(() => {
-        console.log("开始获取实时数据");
-        // 清除现有实体
-        this.clearEntities();
-
-        // 从API获取最新的人员定位数据
-        this.personCardList((list) => {
-          console.log("人员数据", this.personnelList);
-          // 创建新实体
-          for (let item of this.personnelList) {
-            let lng = Number(item.lng);
-            let lat = Number(item.lat);
-            let height = Number(item.height);
-            let position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
-            console.log(item.perName, position);
-            // 创建人员标记
-            let entity = this.viewer.entities.add({
-              position: position,
-              label: {
-                text: item.perName,
-                font: "16px",
-                backgroundColor: Cesium.Color.fromCssColorString("#173349"),
-                showBackground: true,
-                fillColor: Cesium.Color.YELLOW,
-                depthTestAgainstTerrain: false,
-                pixelOffset: new Cesium.Cartesian2(0, -35),
-              },
-              billboard: {
-                image: "/poi-marker-default.png",
-                scale: 0.5,
-                heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
-              },
-              description: `<div><h4>${item.perName}${item.status}</h4></div>`,
-              fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
-            });
-            entity.info = item; // 添加 info 属性
-            entity.type = "person"; // 添加类型标记
-            this.bgEntities[item.perName] = entity; // 存储新实体
-          }
-        });
-      }, 10000); // 改为10秒刷新一次，与注释一致
-    },
 
     personCardList(fn) {
       // 将笛卡尔坐标转换为经纬度坐标
@@ -633,103 +380,6 @@ export default {
       fn(this.personnelList);
     },
 
-    // 新增：车辆模型创建方法
-    createVehicleModel() {
-      // 清除定时器，避免重复执行
-      if (this.intervaler) {
-        clearInterval(this.intervaler);
-        this.intervaler = null;
-      }
-
-      // 清除现有实体
-      this.clearEntities();
-
-      // 生成车辆数据（模拟数据，可以替换为实际API调用）
-      this.generateVehicleData();
-
-      // 创建车辆实体
-      for (let item of this.vehicleList) {
-        let lng = Number(item.lng);
-        let lat = Number(item.lat);
-        let height = Number(item.height);
-        let position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
-
-        // 创建车辆标记
-        let entity = this.viewer.entities.add({
-          position: position,
-          label: {
-            text: item.vehicleName,
-            font: "16px",
-            backgroundColor: Cesium.Color.fromCssColorString("#173349"),
-            showBackground: true,
-            fillColor: Cesium.Color.CYAN, // 车辆标签使用青色
-            depthTestAgainstTerrain: false,
-            pixelOffset: new Cesium.Cartesian2(0, -35),
-          },
-          billboard: {
-            image: "/poi-marker-vehicle.png", // 可以使用不同的图标表示车辆
-            scale: 0.5,
-            heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
-          },
-          description: `<div><h4>${item.vehicleName}${item.status}</h4></div>`,
-          fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
-        });
-        entity.info = item; // 添加 info 属性
-        entity.type = "vehicle"; // 添加类型标记
-        this.bgEntities[item.vehicleName] = entity; // 存储新实体
-      }
-
-      // 设置定时刷新
-      this.intervaler = setInterval(() => {
-        console.log("开始获取实时车辆数据");
-        this.generateVehicleData();
-
-        // 更新车辆实体
-        for (let item of this.vehicleList) {
-          let entity = this.bgEntities[item.vehicleName];
-          if (entity) {
-            let position = Cesium.Cartesian3.fromDegrees(
-              item.lng,
-              item.lat,
-              item.height
-            );
-            entity.position.setValue(position);
-            entity.fixedFrame =
-              Cesium.Transforms.eastNorthUpToFixedFrame(position);
-          } else {
-            // 如果实体不存在，则创建新的
-            let position = Cesium.Cartesian3.fromDegrees(
-              item.lng,
-              item.lat,
-              item.height
-            );
-            let newEntity = this.viewer.entities.add({
-              position: position,
-              label: {
-                text: item.vehicleName,
-                font: "16px",
-                backgroundColor: Cesium.Color.fromCssColorString("#173349"),
-                showBackground: true,
-                fillColor: Cesium.Color.CYAN,
-                depthTestAgainstTerrain: false,
-                pixelOffset: new Cesium.Cartesian2(0, -35),
-              },
-              billboard: {
-                image: "/poi-marker-vehicle.png",
-                scale: 0.5,
-                heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
-              },
-              description: `<div><h4>${item.vehicleName}${item.status}</h4></div>`,
-              fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
-            });
-            newEntity.info = item;
-            newEntity.type = "vehicle";
-            this.bgEntities[item.vehicleName] = newEntity;
-          }
-        }
-      }, 10000); // 每10秒刷新一次
-    },
-
     // 新增：生成车辆数据
     generateVehicleData() {
       // 将笛卡尔坐标转换为经纬度坐标
@@ -835,8 +485,6 @@ export default {
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     },
-    // 绘制趋势图
-    drawTrendChart() {},
 
     // 处理窗口大小变化
     handleResize() {
@@ -852,6 +500,166 @@ export default {
         this.drawTrendChart();
       }
     },
+    // 1. 提取通用实体创建函数
+    createEntity(item, type) {
+      const isPerson = type === "person";
+      const idField = isPerson ? "perName" : "vehicleName";
+      const labelColor = isPerson ? Cesium.Color.YELLOW : Cesium.Color.CYAN;
+      const iconPath = isPerson
+        ? "/poi-marker-default.png"
+        : "/poi-marker-vehicle.png";
+
+      let lng = Number(item.lng);
+      let lat = Number(item.lat);
+      let height = Number(item.height);
+      let position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
+
+      console.log(item[idField], position);
+
+      // 创建实体
+      let entity = this.viewer.entities.add({
+        position: position,
+        label: {
+          text: item[idField],
+          font: "16px",
+          backgroundColor: Cesium.Color.fromCssColorString("#173349"),
+          showBackground: true,
+          fillColor: labelColor,
+          depthTestAgainstTerrain: false,
+          pixelOffset: new Cesium.Cartesian2(0, -35),
+        },
+        billboard: {
+          image: iconPath,
+          scale: 0.5,
+          heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
+        },
+        description: `<div><h4>${item[idField]}${item.status}</h4></div>`,
+        fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
+      });
+
+      entity.info = item;
+      entity.type = type;
+      this.bgEntities[item[idField]] = entity;
+
+      return entity;
+    },
+
+    // 2. 提取实体更新函数
+    updateEntity(entity, item) {
+      let position = Cesium.Cartesian3.fromDegrees(
+        item.lng,
+        item.lat,
+        item.height
+      );
+      entity.position.setValue(position);
+      entity.fixedFrame = Cesium.Transforms.eastNorthUpToFixedFrame(position);
+    },
+
+    // 3. 提取批量创建实体的函数
+    createEntities(entityList, type) {
+      const isPerson = type === "person";
+      const idField = isPerson ? "perName" : "vehicleName";
+
+      for (let item of entityList) {
+        this.createEntity(item, type);
+      }
+    },
+
+    // 4. 提取批量更新实体的函数（增量更新模式）
+    updateEntities(entityList, type) {
+      const isPerson = type === "person";
+      const idField = isPerson ? "perName" : "vehicleName";
+
+      for (let item of entityList) {
+        let entity = this.bgEntities[item[idField]];
+        if (entity && entity.type === type) {
+          // 更新现有实体
+          this.updateEntity(entity, item);
+        } else {
+          // 创建新实体
+          this.createEntity(item, type);
+        }
+      }
+    },
+
+    // 5. 提取定时器逻辑为可重用函数
+    setupEntityUpdateInterval(type, dataGenerator, interval = 10000) {
+      // 清除现有定时器
+      if (this.intervaler) {
+        clearInterval(this.intervaler);
+        this.intervaler = null;
+      }
+
+      // 设置新的定时器
+      this.intervaler = setInterval(() => {
+        console.log(`开始获取实时${type === "person" ? "人员" : "车辆"}数据`);
+
+        // 生成或获取最新数据
+        if (typeof dataGenerator === "function") {
+          dataGenerator();
+        }
+
+        const entityList =
+          type === "person" ? this.personnelList : this.vehicleList;
+
+        // 更新实体（这里可以选择清除重建或增量更新）
+        // 方案1：清除所有实体后重建
+        this.clearEntities();
+        this.createEntities(entityList, type);
+
+        // 方案2：增量更新（推荐，性能更好）
+        // this.updateEntities(entityList, type);
+      }, interval);
+    },
+
+    // 修改后的createPersonModel方法
+    createPersonModel() {
+      // 清除现有定时器
+      if (this.intervaler) {
+        clearInterval(this.intervaler);
+        this.intervaler = null;
+      }
+
+      // 清除现有实体
+      this.clearEntities();
+
+      // 立即生成并显示人员实体
+      console.log("立即创建人员实体");
+      this.personCardList((list) => {
+        console.log("人员数据", this.personnelList);
+        this.createEntities(this.personnelList, "person");
+      });
+
+      // 设置定时刷新
+      this.setupEntityUpdateInterval("person", () => {
+        this.personCardList(() => {
+          console.log("人员数据", this.personnelList);
+        });
+      });
+    },
+
+    // 修改后的createVehicleModel方法
+    createVehicleModel() {
+      // 清除现有定时器
+      if (this.intervaler) {
+        clearInterval(this.intervaler);
+        this.intervaler = null;
+      }
+
+      // 清除现有实体
+      this.clearEntities();
+
+      // 立即生成并显示车辆实体
+      console.log("立即创建车辆实体");
+      this.generateVehicleData();
+      this.createEntities(this.vehicleList, "vehicle");
+
+      // 设置定时刷新
+      this.setupEntityUpdateInterval(
+        "vehicle",
+        this.generateVehicleData.bind(this)
+      );
+    },
   },
 };
 </script>