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