diff --git a/.env.development b/.env.development
index e5b0bf4..f7ff9da 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = RuoYi-Vue-Plus多租户管理系统
+VITE_APP_TITLE = 新能源场站智慧运维平台
 
 # 开发环境配置
 VITE_APP_ENV = 'development'
diff --git a/.env.production b/.env.production
index 1109bc6..6d0e0c6 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = RuoYi-Vue-Plus多租户管理系统
+VITE_APP_TITLE = 新能源场站智慧运维平台
 
 # 生产环境配置
 VITE_APP_ENV = 'production'
diff --git a/index.html b/index.html
index aa1c86d..9085d6e 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
     <link rel="icon" href="/favicon.ico" />
-    <title>RuoYi-Vue-Plus多租户管理系统</title>
+    <title>煤科运维平台</title>
     <!--[if lt IE 11
       ]><script>
         window.location.href = '/html/ie.html';
diff --git a/package.json b/package.json
index 6e2bcd9..0d3f22e 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "axios": "1.8.4",
     "crypto-js": "4.2.0",
     "echarts": "5.6.0",
+    "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.9.8",
     "file-saver": "2.0.5",
     "highlight.js": "11.9.0",
diff --git a/public/favicon.ico b/public/favicon.ico
index 3f919d8..3a3f585 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/assets/logo/logo.png b/src/assets/logo/logo.png
index 3f919d8..176c47b 100644
Binary files a/src/assets/logo/logo.png and b/src/assets/logo/logo.png differ
diff --git a/src/components/TitleComponent/index.vue b/src/components/TitleComponent/index.vue
new file mode 100644
index 0000000..dade41a
--- /dev/null
+++ b/src/components/TitleComponent/index.vue
@@ -0,0 +1,30 @@
+<template>
+    <el-row>
+        <el-col>
+            <div style="color: rgba(0, 30, 59, 1);;font-family: 'Alibaba-PuHuiTi-Bold';margin: 10px 0 0 0;"
+                :style="{ fontSize: fontLevelMap[props.fontLevel] }">
+                {{ props.title }}
+            </div>
+        </el-col>
+        <el-col>
+            <p style="color: rgba(154, 154, 154, 1);font-size: 14px;">
+                {{ props.subtitle }}
+            </p>
+        </el-col>
+
+    </el-row>
+</template>
+<script setup>
+const props = defineProps({
+    title: String,
+    subtitle: String,
+    fontLevel: {
+        type: Number,
+        default: 1
+    }
+})
+const fontLevelMap = {
+    1: "24px",
+    2: "18px"
+}
+</script>
\ No newline at end of file
diff --git a/src/views/pvSystem/alarmAnalysis/components/data.vue b/src/views/pvSystem/alarmAnalysis/components/data.vue
new file mode 100644
index 0000000..744772b
--- /dev/null
+++ b/src/views/pvSystem/alarmAnalysis/components/data.vue
@@ -0,0 +1,497 @@
+<template>
+  <div class="data-dashboard">
+    <!-- 标题区域 -->
+    <el-row class="dashboard-header">
+      <el-col :span="12">
+        <TitleComponent title="实时数据" :fontLevel="2" />
+      </el-col>
+      <el-col :span="12" class="text-right">
+        <span class="update-time">截止至2025/06/30 12:00</span>
+      </el-col>
+    </el-row>
+
+
+    <!-- 关键指标卡片区域 -->
+    <el-row class="metrics-container" :gutter="0">
+      <el-col :span="6">
+        <div class="metric-card">
+          <div class="metric-value">{{ props.dashboardData.todayAlarmTotal }}</div>
+          <div class="metric-label">今日报警总数</div>
+          <div class="metric-change">较上周 <span :class="props.dashboardData.updates.todayAlarmTotal.type">
+            {{ props.dashboardData.updates.todayAlarmTotal.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.todayAlarmTotal.value }}
+          </span></div>
+        </div>
+      </el-col>
+
+
+      <el-col :span="6">
+        <div class="metric-card">
+          <div class="metric-value">{{ props.dashboardData.unhandledAlarms }}</div>
+          <div class="metric-label">未处理报警</div>
+          <div class="metric-change">较上周 <span :class="props.dashboardData.updates.unhandledAlarms.type">
+            {{ props.dashboardData.updates.unhandledAlarms.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.unhandledAlarms.value }}
+          </span></div>
+        </div>
+      </el-col>
+
+
+      <el-col :span="6">
+        <div class="metric-card">
+          <div class="metric-value">{{ props.dashboardData.handledAlarms }}</div>
+          <div class="metric-label">已处理报警</div>
+          <div class="metric-change">较上周 <span :class="props.dashboardData.updates.handledAlarms.type">
+            {{ props.dashboardData.updates.handledAlarms.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.handledAlarms.value }}
+          </span></div>
+        </div>
+      </el-col>
+
+
+      <el-col :span="6">
+        <div class="metric-card">
+          <div class="metric-value">{{ props.dashboardData.avgProcessTime }}</div>
+          <div class="metric-label">平均处理时长</div>
+          <div class="metric-change">较上周 <span :class="props.dashboardData.updates.avgProcessTime.type">
+            {{ props.dashboardData.updates.avgProcessTime.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.avgProcessTime.value }}
+          </span></div>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 报警趋势图表区域 -->
+    <el-row class="trend-container">
+      <!-- 使用弹性布局实现标题在左、下拉框在右 -->
+      <div class="trend-header-flex">
+        <TitleComponent title="报警趋势" :fontLevel="2" />
+        <el-select v-model="timeRange" placeholder="近7天" size="small">
+          <el-option label="近7天" value="7days" />
+          <el-option label="近30天" value="30days" />
+          <el-option label="近90天" value="90days" />
+        </el-select>
+      </div>
+   
+      <el-col :span="24">
+        <div class="trend-section">
+          <el-row :gutter="20">
+            <!-- 报警数量图表 -->
+            <el-col :span="12">
+              <div class="chart-container">
+                <div class="chart-left-right-layout">
+                  <div class="chart-info-container">
+                    <div class="chart-title">报警数量(次)  </div>
+                    <div class="chart-total">{{ props.chartData.totals.alarmCount }}</div>
+                    <div class="chart-value">较昨日 <span :class="props.chartData.dailyChanges.alarmCount.type">
+                      {{ props.chartData.dailyChanges.alarmCount.type === 'up' ? '↑' : '↓' }}{{ props.chartData.dailyChanges.alarmCount.value }}
+                    </span></div>
+                  </div>
+                  <div ref="alarmCountRef" class="chart-content"></div>
+                </div>
+              </div>
+            </el-col>
+            <!-- 报警处理效率图表 -->
+            <el-col :span="12">
+              <div class="chart-container">
+                <div class="chart-left-right-layout">
+                  <div class="chart-info-container">
+                    <div class="chart-title">报警处理效率(%)</div>
+                    <div class="chart-total">{{ props.chartData.totals.processEfficiency }}</div>
+                    <div class="chart-value">较昨日 <span :class="props.chartData.dailyChanges.processEfficiency.type">
+                      {{ props.chartData.dailyChanges.processEfficiency.type === 'up' ? '↑' : '↓' }}{{ props.chartData.dailyChanges.processEfficiency.value }}
+                    </span></div>
+                  </div>
+                  <div ref="processEfficiencyRef" class="chart-content"></div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import * as echarts from 'echarts';
+import TitleComponent from '@/components/TitleComponent/index.vue';
+
+// 定义props
+const props = defineProps({
+  dashboardData: {
+    type: Object,
+    default: () => ({
+      todayAlarmTotal: 25,
+      unhandledAlarms: 8,
+      handledAlarms: 16,
+      avgProcessTime: '42分钟',
+      updates: {
+        todayAlarmTotal: { value: '4.2%', type: 'down' },
+        unhandledAlarms: { value: '5%', type: 'up' },
+        handledAlarms: { value: '8%', type: 'down' },
+        avgProcessTime: { value: '10%', type: 'down' }
+      }
+    })
+  },
+  chartData: {
+    type: Object,
+    default: () => ({
+      alarmCount: [150, 230, 224, 218, 135, 147, 260],
+      processEfficiency: [85, 88, 90, 87, 89, 91, 89],
+      dates: ['04/21', '04/22', '04/23', '04/24', '04/25', '04/26', '04/27'],
+      totals: {
+        alarmCount: 56,
+        processEfficiency: '89%'
+      },
+      dailyChanges: {
+        alarmCount: { value: '0.9%', type: 'down' },
+        processEfficiency: { value: '0.9%', type: 'down' }
+      }
+    })
+  }
+});
+
+const timeRange = ref('7days');
+const alarmCountRef = ref(null);
+const processEfficiencyRef = ref(null);
+let alarmCountChart = null;
+let processEfficiencyChart = null;
+
+// 初始化图表
+const initCharts = () => {
+  // 报警数量图表
+  if (alarmCountRef.value) {
+    alarmCountChart = echarts.init(alarmCountRef.value);
+  }
+
+  // 报警处理效率图表
+  if (processEfficiencyRef.value) {
+    processEfficiencyChart = echarts.init(processEfficiencyRef.value);
+  }
+
+  // 设置报警数量图表配置
+  const alarmCountOption = {
+    tooltip: {
+      trigger: 'axis',
+    },
+    grid: {
+      left: '-45px',
+      right: '0%',
+      bottom: '0%',
+      top: '0%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      //文本颜色
+      axisLabel: {
+        textStyle: {
+          color: '#999999'
+        },
+        interval: 2 // 每隔三天显示一个标签（索引从0开始，间隔为2表示每3个数据点显示一个）
+      },
+      // x轴线样式
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#427394"
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      data: props.chartData.dates,
+    },
+    yAxis: {
+      type: 'value',
+      show: false,
+      axisLabel: {
+        textStyle: {
+          color: '#C5D6E6'
+        }
+      },
+      splitLine: {
+        show: false
+      }
+    },
+    series: [
+      {
+        data: props.chartData.alarmCount,
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        lineStyle: {
+          color: '#3692FF',
+          width: 2
+        },
+        // 悬停时颜色
+        itemStyle: {
+          color: '#3692FF'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(54, 146, 255, 0.3)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(54, 146, 255, 0.05)'
+            }
+          ])
+        }
+      }
+    ]
+  };
+
+
+  // 设置报警处理效率图表配置
+  const processEfficiencyOption = {
+    tooltip: {
+      trigger: 'axis',
+    },
+    grid: {
+      left: '-45px',
+      right: '0%',
+      bottom: '0%',
+      top: '0%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      //文本颜色
+      axisLabel: {
+        textStyle: {
+          color: '#999999'
+        },
+        interval: 2 // 每隔三天显示一个标签（索引从0开始，间隔为2表示每3个数据点显示一个）
+      },
+      // x轴线样式
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#427394"
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      data: props.chartData.dates,
+    },
+    yAxis: {
+      type: 'value',
+      show: false,
+      axisLabel: {
+        textStyle: {
+          color: '#C5D6E6'
+        }
+      },
+      splitLine: {
+        show: false
+      }
+    },
+    series: [
+      {
+        data: props.chartData.processEfficiency,
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        lineStyle: {
+          color: '#FF9900',
+          width: 2
+        },
+        // 悬停时颜色
+        itemStyle: {
+          color: '#FF9900'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(255, 140, 0, 0.3)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(255, 140, 0, 0.05)'
+            }
+          ])
+        }
+      }
+    ]
+  };
+
+  alarmCountChart.setOption(alarmCountOption);
+  processEfficiencyChart.setOption(processEfficiencyOption);
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+  if (alarmCountChart) {
+    alarmCountChart.resize();
+  }
+  if (processEfficiencyChart) {
+    processEfficiencyChart.resize();
+  }
+};
+
+onMounted(() => {
+  initCharts();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  if (alarmCountChart) {
+    alarmCountChart.dispose();
+  }
+  if (processEfficiencyChart) {
+    processEfficiencyChart.dispose();
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.data-dashboard {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  padding:0 20px;
+  box-sizing: border-box;
+}
+
+.dashboard-header {
+  align-items: center;
+}
+
+.dashboard-header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+}
+
+.update-time {
+  font-size: 12px;
+  color: #999;
+}
+
+.metrics-container {
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: rgba(242, 248, 252, 1);
+  background-color: rgba(242, 248, 252, 1);
+}
+
+.metric-card {
+  padding: 20px;
+  text-align: center;
+  position: relative;
+  height: 100%;
+}
+
+
+/* 移除最后一个卡片的分隔线 */
+.metrics-container .el-col:last-child .metric-card::after {
+  display: none;
+}
+
+.metric-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.metric-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.metric-change {
+  font-size: 12px;
+  color: #999;
+}
+
+.up {
+  color: #ff4d4f;
+}
+
+.down {
+  color: #52c41a;
+}
+
+.trend-container {
+  width: 100%;
+}
+
+.trend-header-flex {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.trend-section {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.trend-header {
+  
+  align-items: center;
+}
+
+.trend-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.chart-container {
+  background: #fff;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  height: 150px;
+}
+
+.chart-left-right-layout {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+.chart-info-container {
+  width: 110px;
+}
+
+.chart-title {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.chart-total {
+  font-size: 32px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.chart-value {
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 0;
+}
+
+.chart-content {
+  flex: 1;
+  height: 110px;
+}
+
+// Element Plus 样式覆盖
+:deep(.el-select) {
+  width: 80px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/alarmAnalysis/components/pie.vue b/src/views/pvSystem/alarmAnalysis/components/pie.vue
new file mode 100644
index 0000000..0431d23
--- /dev/null
+++ b/src/views/pvSystem/alarmAnalysis/components/pie.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="pie-chart-container">
+    <div class="chart-header">
+       <TitleComponent title="报警类型分布" :fontLevel="2" />
+      <el-select v-model="selectedTimeRange" placeholder="选择时间范围" size="small">
+        <el-option label="今日" value="today" />
+      </el-select>
+    </div>
+    <div ref="pieChartRef" class="chart-content"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+import TitleComponent from '@/components/TitleComponent/index.vue';
+
+// 定义props
+const props = defineProps({
+  alarmTypeData: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const selectedTimeRange = ref('today');
+const pieChartRef = ref(null);
+let chartInstance = null;
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+
+const initChart = () => {
+  if (pieChartRef.value) {
+    chartInstance = echarts.init(pieChartRef.value);
+  } else {
+    console.warn('Chart container not found');
+    return;
+  }
+
+  const option = {
+   backgroundColor: '#fff',
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b}: {d}%'
+  },
+  legend: {
+    bottom: '5%',
+    left: 'center',
+    formatter: (name) => {
+      // 计算每个数据项的百分比
+      const data = option.series[0].data;
+      const total = data.reduce((sum, item) => sum + item.value, 0);
+      const item = data.find(item => item.name === name);
+      const percentage = item ? Math.round((item.value / total) * 100) : 0;
+      return `${name}(${percentage}%)`;
+    }
+  },
+  // 添加图形组件，用于在半圆中心显示图片
+  graphic: [
+    {
+      type: 'image',
+      id: 'alarmImage',
+      // 图片位置与半圆中心一致
+      left: 'center',
+      top: '50%',
+      // 图片大小
+      width: 60,
+      height: 60,
+      // 图片路径
+      style: {
+        image: '/src/assets/demo/baojing.png',
+        // 保持图片原始比例
+        width: 60,
+        height: 60
+      },
+      // 图片中心点调整
+      origin: [30, 30]
+    }
+  ],
+  series: [
+        {
+          name: '报警类型分布',
+          type: 'pie',
+          radius: [100, 200],
+          center: ['50%', '70%'],
+          // adjust the start and end angle
+          startAngle: 180,
+          endAngle: 360,
+          data: props.alarmTypeData,
+          label: {
+            show: true,
+            position: 'inner',
+            formatter: '{d}%',
+            color: '#fff',
+            fontSize: 14,
+          }
+        }
+      ]
+};
+
+  chartInstance.setOption(option);
+};
+</script>
+
+<style scoped lang="scss">
+.pie-chart-container {
+  width: 100%;
+  height: 400px;
+  background: #fff;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.chart-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.chart-content {
+  width: 100%;
+  height: calc(100% - 60px);
+}
+
+:deep(.el-select) {
+  width: 80px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/alarmAnalysis/components/status.vue b/src/views/pvSystem/alarmAnalysis/components/status.vue
new file mode 100644
index 0000000..adb72c5
--- /dev/null
+++ b/src/views/pvSystem/alarmAnalysis/components/status.vue
@@ -0,0 +1,226 @@
+<template>
+    <el-form :inline="true" :model="formInline" style="display: flex; width: 100%;">
+        <div style="display: flex; gap: 16px;">
+            <el-form-item label="状态:">
+                <el-select v-model="formInline.status" placeholder="状态" clearable style="width: 120px;">
+                    <el-option v-for="(item, key) in statusMap" :key="key" :label="item.label" :value="key" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="级别:">
+                <el-select v-model="formInline.alarmLevel" placeholder="级别" clearable style="width: 120px;">
+                    <el-option v-for="(item, key) in alarmLevelMap" :key="key" :label="item.label" :value="key" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="类别:">
+                <el-select v-model="formInline.alarmType" placeholder="类别" clearable style="width: 120px;">
+                    <el-option v-for="item in alarmTypeList" :key="item" :label="item" :value="item" />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="default" @click="clearFilters">清除筛选</el-button>
+            </el-form-item>
+        </div>
+        <div style="margin-left: auto;">
+            <el-form-item label="排序:">
+                <el-select v-model="formInline.region" placeholder="排序" clearable style="width: 120px;">
+                    <el-option label="Zone one" value="shanghai" />
+                    <el-option label="Zone two" value="beijing" />
+                </el-select>
+            </el-form-item>
+        </div>
+    </el-form>
+    <el-table
+      v-loading="loading"
+      :data="listData"
+      border
+      style="width: 100%"
+    >
+        <el-table-column label="报警时间" align="center" prop="time" />
+        <el-table-column label="设备名称" align="center" prop="toolname" />
+        <el-table-column label="报警类型" align="center" prop="alarmType" />
+        <el-table-column label="报警级别" align="center" prop="alarmLevel">
+            <template #default="scope">
+                <el-tag :type="alarmLevelMap[scope.row.alarmLevel].type">{{
+                    alarmLevelMap[scope.row.alarmLevel].label }}</el-tag>
+            </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" prop="status">
+            <template #default="scope">
+                <el-tag :type="statusMap[scope.row.status].type">{{ statusMap[scope.row.status].label }}</el-tag>
+            </template>
+        </el-table-column>
+        <el-table-column label="负责人" align="center" prop="manager" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
+            <template #default="scope">
+                <div style="display: flex;align-items: center;">
+                    <el-button link type="primary" :icon="View">查看</el-button>
+                    <div v-if="scope.row.status == 1"
+                        style="color: #43CF7C;margin-left: 5px; display: flex; align-items: center;">
+                        <el-icon style="margin-right: 4px; font-size: 14px;">
+                            <CircleCheckFilled />
+                        </el-icon>
+                        <span style="font-size: 13px;">已处理</span>
+                    </div>
+                    <el-button link type="success" v-else :icon="Opportunity">处理</el-button>
+                </div>
+            </template>
+        </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <div class="pagination-wrapper">
+        <div class="pagination-info">
+            显示第 {{ (currentPage - 1) * pageSize + 1 }} 到第
+            {{ Math.min(currentPage * pageSize, total) }} 条，共 {{ total }} 条记录
+        </div>
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[5, 10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          background
+        />
+    </div>
+</template>
+<script setup>
+import { View, CircleCheckFilled, Opportunity } from '@element-plus/icons-vue'
+import { ref, computed, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+
+// 定义props
+const props = defineProps({
+  alarmRecords: {
+    type: Array,
+    default: () => []
+  }
+});
+
+// 分页数据 - 设置为第1页，一页显示5条
+const currentPage = ref(1);
+const pageSize = ref(5);
+const total = ref(props.alarmRecords.length); // 使用传入的数据长度
+const formInline = reactive({})
+const loading = ref(false);
+
+// 使用props中的数据而不是本地虚拟数据
+const fullData = props.alarmRecords;
+
+// 状态映射
+const statusMap = {
+    1: {
+        label: "已处理",
+        type: "success"
+    },
+    2: {
+        label: "未处理",
+        type: "danger"
+    },
+    3: {
+        label: "处理中",
+        type: "primary"
+    }
+}
+
+// 报警级别映射
+const alarmLevelMap = {
+    1: {
+        label: "紧急",
+        type: "danger"
+    },
+    2: {
+        label: "重要",
+        type: "warning"
+    },
+    3: {
+        label: "一般",
+        type: "info"
+    }
+}
+
+// 报警类型列表
+const alarmTypeList = computed(() => {
+    const types = [...new Set(fullData.map(item => item.alarmType))];
+    return types;
+});
+
+// 计算当前页显示的数据（包含筛选功能）
+const listData = computed(() => {
+    // 先进行筛选
+    let filteredData = fullData.filter(item => {
+        // 状态筛选
+        if (formInline.status !== undefined && formInline.status !== null && formInline.status !== '') {
+            if (item.status !== parseInt(formInline.status)) {
+                return false;
+            }
+        }
+        // 级别筛选
+        if (formInline.alarmLevel !== undefined && formInline.alarmLevel !== null && formInline.alarmLevel !== '') {
+            if (item.alarmLevel !== parseInt(formInline.alarmLevel)) {
+                return false;
+            }
+        }
+        // 类别筛选
+        if (formInline.alarmType !== undefined && formInline.alarmType !== null && formInline.alarmType !== '') {
+            if (item.alarmType !== formInline.alarmType) {
+                return false;
+            }
+        }
+        return true;
+    });
+    
+    // 更新总条数
+    total.value = filteredData.length;
+    
+    // 然后进行分页
+    const startIndex = (currentPage.value - 1) * pageSize.value;
+    const endIndex = startIndex + pageSize.value;
+    return filteredData.slice(startIndex, endIndex);
+});
+
+// 清除筛选条件
+const clearFilters = () => {
+    // 清除所有筛选条件
+    Object.keys(formInline).forEach(key => {
+        if (key !== 'region') { // 保留排序功能
+            delete formInline[key];
+        }
+    });
+    // 重置到第一页
+    currentPage.value = 1;
+    // 显示提示信息
+    ElMessage.success('筛选条件已清除');
+};
+// 分页处理函数
+const handleSizeChange = (size) => {
+    pageSize.value = size;
+    currentPage.value = 1; // 切换每页显示条数时重置到第一页
+    // 模拟数据加载效果
+    loading.value = true;
+    setTimeout(() => {
+        loading.value = false;
+    }, 300);
+};
+
+const handleCurrentChange = (current) => {
+    currentPage.value = current;
+    // 模拟数据加载效果
+    loading.value = true;
+    setTimeout(() => {
+        loading.value = false;
+    }, 300);
+};
+</script>
+<style scoped lang="scss">
+.pagination-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 10px;
+  border-top: 1px solid #f5f5f5;
+}
+
+.pagination-info {
+  color: #8c8c8c;
+  font-size: 14px;
+}
+</style>
diff --git a/src/views/pvSystem/alarmAnalysis/index.vue b/src/views/pvSystem/alarmAnalysis/index.vue
index e69de29..2fa1f57 100644
--- a/src/views/pvSystem/alarmAnalysis/index.vue
+++ b/src/views/pvSystem/alarmAnalysis/index.vue
@@ -0,0 +1,161 @@
+<template>
+    <div class="model">
+        <!-- 标题栏 -->
+        <el-row :gutter="24">
+            <el-col :span="12">
+                <TitleComponent title="报警分析与管理" subtitle="实时监控光伏报警信息，高效处理运维任务" />
+            </el-col>
+            <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
+            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
+                <el-col :span="7">
+                    <el-input placeholder="搜索报警信息">
+                        <template #prefix>
+                            <el-icon>
+                                <Search />
+                            </el-icon>
+                        </template>
+                    </el-input>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">
+                        导出数据
+                        <el-icon class="el-icon--right">
+                            <UploadFilled />
+                        </el-icon>
+                    </el-button>
+                </el-col>
+            </el-col>
+        </el-row>
+        <!-- 数据展示-->
+        <el-row :gutter="24">
+            <el-col :span="16">
+                <el-card style="height: 100%;">
+                    <div style="height: 100%;">
+                        <Data :dashboardData="dashboardData" :chartData="chartData" />
+                    </div>
+                </el-card>
+            </el-col>
+            <el-col :span="8">
+                <el-card style="height: 100%;">
+                    <div style="height: 100%;">
+                        <Pie :alarmTypeData="alarmTypeData" />
+                    </div>
+                </el-card>
+            </el-col>
+        </el-row>
+        <!-- 状态表 -->
+        <el-row style="margin-top: 20px;">
+            <el-col :span="24">
+                <el-card>
+                    <TitleComponent title="报警记录" :fontLevel="2" />
+                    <status style="width: 100%;" :alarmRecords="alarmRecords" />
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import TitleComponent from '@/components/TitleComponent/index.vue';
+import Status from '@/views/pvSystem/alarmAnalysis/components/status.vue'
+import Pie from '@/views/pvSystem/alarmAnalysis/components/pie.vue';
+import Data from '@/views/pvSystem/alarmAnalysis/components/data.vue';
+
+// Mock数据
+const dashboardData = ref({
+  todayAlarmTotal: 25,
+  unhandledAlarms: 8,
+  handledAlarms: 16,
+  avgProcessTime: '42分钟',
+  updates: {
+    todayAlarmTotal: { value: '4.2%', type: 'down' },
+    unhandledAlarms: { value: '5%', type: 'up' },
+    handledAlarms: { value: '8%', type: 'down' },
+    avgProcessTime: { value: '10%', type: 'down' }
+  }
+});
+
+const chartData = ref({
+  alarmCount: [150, 230, 224, 218, 135, 147, 260],
+  processEfficiency: [85, 88, 90, 87, 89, 91, 89],
+  dates: ['04/21', '04/22', '04/23', '04/24', '04/25', '04/26', '04/27'],
+  totals: {
+    alarmCount: 56,
+    processEfficiency: '89%'
+  },
+  dailyChanges: {
+    alarmCount: { value: '0.9%', type: 'down' },
+    processEfficiency: { value: '0.9%', type: 'down' }
+  }
+});
+
+const alarmTypeData = ref([
+  { value: 25, name: '逆变器故障', itemStyle: { color: '#F94144' } },
+  { value: 20, name: '组串异常', itemStyle: { color: '#F3722C' } },
+  { value: 15, name: '通讯中断', itemStyle: { color: '#00BAAD' } },
+  { value: 15, name: '汇流箱报警', itemStyle: { color: '#186DF5' } }
+]);
+
+const alarmRecords = ref([
+  { time: "2025-10-15 08:30:22", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 1, status: 1, manager: "张工程师" },
+  { time: "2025-10-15 09:15:45", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 2, status: 1, manager: "李工程师" },
+  { time: "2025-10-15 10:42:18", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 3, status: 2, manager: "王工程师" },
+  { time: "2025-10-15 11:20:33", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 1, status: 2, manager: "赵工程师" },
+  { time: "2025-10-15 13:55:09", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 2, status: 3, manager: "孙工程师" },
+  { time: "2025-10-15 14:30:56", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 1, status: 3, manager: "周工程师" },
+  { time: "2025-10-15 15:20:12", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 2, status: 3, manager: "吴工程师" },
+  { time: "2025-10-15 16:05:47", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 1, status: 3, manager: "郑工程师" },
+  { time: "2025-10-15 17:30:29", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 2, status: 3, manager: "钱工程师" },
+  { time: "2025-10-15 18:15:54", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 1, status: 3, manager: "冯工程师" },
+  { time: "2025-10-16 08:30:22", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 1, status: 1, manager: "陈工程师" },
+  { time: "2025-10-16 09:15:45", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 2, status: 1, manager: "卫工程师" },
+  { time: "2025-10-16 10:42:18", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 3, status: 2, manager: "蒋工程师" },
+  { time: "2025-10-16 11:20:33", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 1, status: 2, manager: "沈工程师" },
+  { time: "2025-10-16 13:55:09", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 2, status: 3, manager: "韩工程师" },
+  { time: "2025-10-16 14:30:56", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 1, status: 3, manager: "杨工程师" },
+  { time: "2025-10-16 15:20:12", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 2, status: 3, manager: "朱工程师" },
+  { time: "2025-10-16 16:05:47", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 1, status: 3, manager: "秦工程师" },
+  { time: "2025-10-16 17:30:29", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 2, status: 3, manager: "尤工程师" },
+  { time: "2025-10-16 18:15:54", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 1, status: 3, manager: "许工程师" },
+  { time: "2025-10-17 08:30:22", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 1, status: 1, manager: "何工程师" },
+  { time: "2025-10-17 09:15:45", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 2, status: 1, manager: "吕工程师" },
+  { time: "2025-10-17 10:42:18", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 3, status: 2, manager: "施工程师" },
+  { time: "2025-10-17 11:20:33", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 1, status: 2, manager: "张工程师" },
+  { time: "2025-10-17 13:55:09", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 2, status: 3, manager: "孔工程师" },
+  { time: "2025-10-17 14:30:56", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 1, status: 3, manager: "曹工程师" },
+  { time: "2025-10-17 15:20:12", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 2, status: 3, manager: "严工程师" },
+  { time: "2025-10-17 16:05:47", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 1, status: 3, manager: "华工程师" },
+  { time: "2025-10-17 17:30:29", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 2, status: 3, manager: "金工程师" },
+  { time: "2025-10-17 18:15:54", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 1, status: 3, manager: "魏工程师" },
+  { time: "2025-10-18 08:30:22", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 1, status: 1, manager: "陶工程师" },
+  { time: "2025-10-18 09:15:45", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 2, status: 1, manager: "姜工程师" },
+  { time: "2025-10-18 10:42:18", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 3, status: 2, manager: "戚工程师" },
+  { time: "2025-10-18 11:20:33", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 1, status: 2, manager: "谢工程师" },
+  { time: "2025-10-18 13:55:09", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 2, status: 3, manager: "邹工程师" },
+  { time: "2025-10-18 14:30:56", toolname: '环境监测仪 EM-002', alarmType: "湿度异常", alarmLevel: 1, status: 3, manager: "喻工程师" },
+  { time: "2025-10-18 15:20:12", toolname: '环境监测仪 EM-002', alarmType: "湿度异常", alarmLevel: 2, status: 3, manager: "柏工程师" },
+  { time: "2025-10-18 16:05:47", toolname: '环境监测仪 EM-002', alarmType: "湿度异常", alarmLevel: 1, status: 3, manager: "水工程师" }
+]);
+
+// 模拟接口调用
+const fetchAlarmData = async () => {
+  try {
+    // 模拟网络请求延迟
+    await new Promise(resolve => setTimeout(resolve, 800));
+    // 这里可以添加数据处理逻辑
+    console.log('模拟API调用成功，数据已加载');
+  } catch (error) {
+    console.error('模拟API调用失败:', error);
+  }
+};
+
+onMounted(() => {
+  fetchAlarmData();
+});
+</script>
+<style scoped lang="scss">
+.model {
+    padding: 0px 15px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/operatingCurve/components/box1/qushiLine.vue b/src/views/pvSystem/operatingCurve/components/box1/qushiLine.vue
new file mode 100644
index 0000000..75cc4da
--- /dev/null
+++ b/src/views/pvSystem/operatingCurve/components/box1/qushiLine.vue
@@ -0,0 +1,363 @@
+<template>
+    <div class="chart-container">
+        <!-- 图表标题和时间范围选择器 -->
+        <div class="chart-header">
+            <h2>发电量趋势 (kWh)</h2>
+            <div class="chart-actions">
+                <button @click="timeRange = 'day'" :class="{ active: timeRange === 'day' }">日发电</button>
+                <button @click="timeRange = 'week'" :class="{ active: timeRange === 'week' }">周发电</button>
+                <button @click="timeRange = 'month'" :class="{ active: timeRange === 'month' }">月发电</button>
+            </div>
+        </div>
+        <!-- 图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, computed } from 'vue';
+import * as echarts from 'echarts';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  quShiData: {
+    type: Object,
+    default: () => ({
+      day: {
+        xAxis: [],
+        actualData: [],
+        theoreticalData: []
+      },
+      week: {
+        xAxis: [],
+        actualData: [],
+        theoreticalData: []
+      },
+      month: {
+        xAxis: [],
+        actualData: [],
+        theoreticalData: []
+      }
+    })
+  }
+});
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 时间范围状态
+const timeRange = ref('day');
+// 图表实例
+let chartInstance = null;
+
+// 定义颜色常量
+const ACTUAL_COLOR = '#2A82E4';
+const THEORETICAL_COLOR = '#67C23A';
+
+// 根据时间范围计算当前显示的数据
+const chartData = computed(() => {
+  // 使用传入的数据，如果不存在则使用默认数据
+  const dataForRange = props.quShiData[timeRange.value] || props.quShiData.day;
+  return {
+    xAxis: dataForRange.xAxis,
+    actualData: dataForRange.actualData,
+    theoreticalData: dataForRange.theoreticalData
+  };
+});
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    const data = chartData.value;
+
+    const option = {
+        
+        tooltip: {
+            trigger: 'axis',
+            // 悬停线相关设置
+            axisPointer: {
+                type: 'cross',
+                lineStyle: {
+                    color: '#2A82E4',
+                    width: 2
+                }
+            },
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            borderColor: '#e8e8e8',
+            borderWidth:2 ,
+            textStyle: {
+                color: '#333'
+            },
+            formatter: function (params) {
+                const date = params[0].axisValue;
+                const actualValue = params[0].value;
+                const theoreticalValue = params[1].value;
+
+                return `
+                      <div style="font-weight: bold;">${date}</div>
+                      <div style="color: ${ACTUAL_COLOR};">实际发电量: ${actualValue}</div>
+                      <div style="color: ${THEORETICAL_COLOR};">理论发电量: ${theoreticalValue}</div>
+                    `;
+            }
+        },
+        legend: {
+            right: 'center',
+            data: ['实际发电', '理论发电'],
+            top: 0,
+            itemWidth: 10,
+            itemHeight: 10,
+            icon: 'stack',
+            textStyle: {
+                fontSize: 12,
+                color: '#666'
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '10%',
+            top: '10%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: data.xAxis,
+            axisLine: {
+                lineStyle: {
+                    color: '#dcdfe6'
+                }
+            },
+            axisLabel: {
+                color: '#3E4954',
+                fontSize: 12
+            },
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            splitLine: {
+                show: true,  //显示分割线
+                lineStyle: {
+                    type: 'dashed'  // 设置分割线为虚线
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                lineStyle: {
+                    color: '#dcdfe6'
+                }
+            },
+            axisLabel: {
+                color: '#3E4954',
+                fontSize: 12
+            },
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            splitLine: {
+                show: true,  //显示分割线
+                lineStyle: {
+                    type: 'dashed'  // 设置分割线为虚线
+                }
+            }
+        },
+        series: [
+            {
+                name: '实际发电',
+                type: 'line',
+                data: data.actualData,
+                smooth: true,
+                symbol: 'circle',
+                symbolSize: 6,
+                // 开始不显示拐点， 鼠标经过显示
+                showSymbol: false,
+                // 设置拐点颜色以及边框
+                itemStyle: {
+                    color: ACTUAL_COLOR
+                },
+                lineStyle: {
+                    color: ACTUAL_COLOR,
+                    width: 3
+                },
+                emphasis: {
+                    itemStyle: {
+                        color: '#2A82E4',
+                        borderColor: '#fff',
+                        borderWidth: 3
+                    }
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: `rgba(${parseInt(ACTUAL_COLOR.slice(1, 3), 16)}, ${parseInt(ACTUAL_COLOR.slice(3, 5), 16)}, ${parseInt(ACTUAL_COLOR.slice(5, 7), 16)}, 0.2)`
+                        },
+                        {
+                            offset: 1,
+                            color: `rgba(${parseInt(ACTUAL_COLOR.slice(1, 3), 16)}, ${parseInt(ACTUAL_COLOR.slice(3, 5), 16)}, ${parseInt(ACTUAL_COLOR.slice(5, 7), 16)}, 0.05)`
+                        }
+                    ])
+                }
+            },
+            {
+                name: '理论发电',
+                type: 'line',
+                data: data.theoreticalData,
+                smooth: true,
+                symbol: 'circle',
+                symbolSize: 6,
+                itemStyle: {
+                    color: THEORETICAL_COLOR
+                },
+                lineStyle: {
+                    color: THEORETICAL_COLOR,
+                    width: 3
+                },
+                emphasis: {
+                    itemStyle: {
+                        color: '#67C23A',
+                        borderColor: '#fff',
+                        borderWidth: 3
+                    }
+                },
+                // 开始不显示拐点， 鼠标经过显示
+                showSymbol: false,
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: `rgba(${parseInt(THEORETICAL_COLOR.slice(1, 3), 16)}, ${parseInt(THEORETICAL_COLOR.slice(3, 5), 16)}, ${parseInt(THEORETICAL_COLOR.slice(5, 7), 16)}, 0.2)`
+                        },
+                        {
+                            offset: 1,
+                            color: `rgba(${parseInt(THEORETICAL_COLOR.slice(1, 3), 16)}, ${parseInt(THEORETICAL_COLOR.slice(3, 5), 16)}, ${parseInt(THEORETICAL_COLOR.slice(5, 7), 16)}, 0.05)`
+                        }
+                    ])
+                }
+            },
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+// 监听时间范围变化，更新图表
+watch(timeRange, () => {
+    initChart();
+});
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 500px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-actions button {
+    background: none;
+    border: 1px solid #e0e0e0;
+    padding: 5px 12px;
+    border-radius: 4px;
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.2s ease;
+}
+
+.chart-actions button.active {
+    background-color: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.chart-content {
+    width: 100%;
+    height: calc(100% - 54px);
+    padding: 10px;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 450px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 400px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>
diff --git a/src/views/pvSystem/operatingCurve/components/box1/statusBox.vue b/src/views/pvSystem/operatingCurve/components/box1/statusBox.vue
new file mode 100644
index 0000000..7544df9
--- /dev/null
+++ b/src/views/pvSystem/operatingCurve/components/box1/statusBox.vue
@@ -0,0 +1,240 @@
+<template>
+    <div class="status-box">
+        <!-- 总发电量 -->
+        <div class="status-card electricity">
+            <div class="card-left">
+                <div class="card-title">总发电量</div>
+                <div class="card-value">{{ props.statusData.totalPower }}</div>
+                <div class="card-change positive">
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
+                        height="18" viewBox="0 0 18 18" fill="none">
+                        <path
+                            d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
+                            fill="#00B87A">
+                        </path>
+                    </svg>
+                    {{ props.statusData.totalPowerChange }} 较上周
+                </div>
+            </div>
+            <div class="card-right">
+                <div class="card-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48"
+                        height="48" viewBox="0 0 48 48" fill="none">
+                        <path
+                            d="M44.5 37L34 37L34 12C34 9.8 32.2 8 30 8L17 8C14.8 8 13 9.8 13 12L13 37L3.5 37C2.7 37 2 37.7 2 38.5C2 39.3 2.7 40 3.5 40L44.5 40C45.3 40 46 39.3 46 38.5C46 37.7 45.3 37 44.5 37ZM18 22.2L24.4 14.1C24.8 13.5 25.6 13.7 25.5 14.4L24.8 21.7L28.2 21.7C28.9 21.7 29.3 22.5 28.8 23.1L22.5 31.2C22.1 31.8 21.3 31.6 21.4 30.9L22 23.6L18.6 23.6C17.9 23.6 17.5 22.8 18 22.2Z"
+                            fill="#2A82E4"></path>
+                        <path
+                            d="M6.99998 32L11 32L11 14L6.99998 14C4.8 14 3 15.8 3 18L3 28C3 30.2 4.8 32 6.99998 32ZM42 28L42 26L43 26C44.1 26 45 25.1 45 24L45 22C45 20.9 44.1 20 43 20L42 20L42 18C42 15.8 40.2 14 38 14L36 14L36 32L38 32C40.2 32 42 30.2 42 28Z"
+                            fill="#2A82E4"></path>
+                    </svg>
+                </div>
+            </div>
+        </div>
+
+        <!-- 系统效率 -->
+        <div class="status-card efficiency">
+            <div class="card-left">
+                <div class="card-title">系统效率</div>
+                <div class="card-value">{{ props.statusData.efficiency }}</div>
+                <div class="card-change negative">
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
+                        height="18" viewBox="0 0 18 18" fill="none">
+                        <path
+                            d="M15.15 12.2252L15.15 12.3002L15.15 12.3752L15.075 12.3752C15.075 12.3752 15 12.3752 14.925 12.4502L11.25 12.4502C10.875 12.4502 10.575 12.1502 10.575 11.7752C10.575 11.4002 10.875 11.1002 11.25 11.1002L13.125 11.1002L9.52501 7.5002L7.72501 9.3002C7.35 9.67519 6.60001 9.67519 6.225 9.3002L3.075 6.1502C2.85 5.9252 2.85 5.4752 3.075 5.2502C3.22501 5.10019 3.37501 5.0252 3.525 5.0252C3.67501 5.0252 3.82501 5.0252 3.975 5.2502L6.9 8.1752L8.7 6.3752C9.07501 6.00019 9.825 6.00019 10.2 6.3752L13.95 10.1252L13.95 8.25019C13.95 7.87519 14.25 7.57519 14.625 7.57519C15 7.57519 15.3 7.87519 15.3 8.25019L15.3 11.6252L15.3 11.8502L15.15 12.2252Z"
+                            fill="#E32727">
+                        </path>
+                    </svg>
+                    {{ props.statusData.efficiencyChange }} 较上周
+                </div>
+            </div>
+            <div class="card-right">
+                <div class="card-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46"
+                        height="46.00018310546875" viewBox="0 0 46 46.00018310546875" fill="none">
+                        <path
+                            d="M23 0C10.2 0 0 10.2 0 23C0 35.8 10.2 46.0002 23 46.0002C35.8 46.0002 46.0002 35.8 46.0002 23C46.0002 10.2 35.8 0 23 0ZM30.2 21.8L26 28.6C26.6 29.2 26.8 30 26.8 31C26.8 33.2 25 35 22.8 35C20.6 35 18.8 33.2 18.8 31C18.8 28.8 20.6 27 22.8 27L23.4 27L27.4 20.2C27.8 19.4 28.8 19.2 29.4 19.6C30.4 20.2 30.8 21 30.2 21.8ZM33.6 18.2C31.8 14.2 27.8 11.4 23 11.4C18.2 11.4 14.2 14.2 12.4 18.2L8.4 16.4C11 10.8 16.6 7.00003 23 7.00003C29.4 7.00003 35 10.8 37.6 16.4L33.6 18.2Z"
+                            fill="#FFEB3B"></path>
+                    </svg>
+                </div>
+            </div>
+        </div>
+
+        <!-- 组件温度 -->
+        <div class="status-card temperature">
+            <div class="card-left">
+                <div class="card-title">组件温度</div>
+                <div class="card-value">{{ props.statusData.temperature }}</div>
+                <div class="card-change positive">
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
+                        height="18" viewBox="0 0 18 18" fill="none">
+                        <path
+                            d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
+                            fill="#00B87A">
+                        </path>
+                    </svg>
+                    {{ props.statusData.temperatureChange }} 较上周
+                </div>
+            </div>
+            <div class="card-right">
+                <div class="card-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48"
+                        height="48" viewBox="0 0 48 48" fill="none">
+                        <path
+                            d="M23.9734 0C10.7276 0 0 10.7363 0 23.9798C0 37.2236 10.7276 47.9532 23.9734 47.9532C37.2149 47.9532 47.9466 37.2235 47.9466 23.9798C47.9466 10.7363 37.2149 0 23.9734 0ZM22.8214 4.5566L25.8706 4.5566L25.8706 10.5392L22.8214 10.5392L22.8214 4.5566ZM13.7083 15.7488L9.47281 11.5156L11.6312 9.36379L15.8624 13.5905L13.7083 15.7488ZM15.2114 6.74917L17.9735 5.46455L20.5002 10.886L17.7424 12.1752L15.2114 6.74917ZM24.3931 41.4545C21.7465 41.4545 19.5967 39.3048 19.5967 36.6582C19.5967 34.5875 20.9072 32.8297 22.7443 32.1531L22.7443 18.4704L25.7934 18.4704L25.7934 32.0652C27.7549 32.6627 29.1894 34.4912 29.1894 36.6581C29.1895 39.3048 27.0439 41.4545 24.3931 41.4545ZM27.9648 10.8796L30.4914 5.45594L33.2579 6.74487L30.7269 12.1709L27.9648 10.8796ZM34.6625 15.7488L32.5084 13.5904L36.7394 9.3637L38.8894 11.5156L34.6625 15.7488Z"
+                            fill="#FF5733"></path>
+                    </svg>
+                </div>
+            </div>
+        </div>
+
+        <!-- 日照强度 -->
+        <div class="status-card sunlight">
+            <div class="card-left">
+                <div class="card-title">日照强度</div>
+                <div class="card-value">{{ props.statusData.sunlight }}</div>
+                <div class="card-change positive">
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
+                        height="18" viewBox="0 0 18 18" fill="none">
+                        <path
+                            d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
+                            fill="#00B87A">
+                        </path>
+                    </svg>
+                    {{ props.statusData.sunlightChange }} 较上周
+                </div>
+            </div>
+            <div class="card-right">
+                <div class="card-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48"
+                        height="48" viewBox="0 0 48 48" fill="none">
+                        <path
+                            d="M25.791 40.836L25.791 48L22.209 48L22.209 40.836L25.791 40.836ZM10.824 34.641L13.359 37.173L8.292 42.24L5.76 39.705L10.824 34.641ZM37.17 34.638L42.237 39.702L39.702 42.237L34.638 37.17L37.17 34.638ZM24 10.029C24.2287 10.0289 24.4573 10.0344 24.6857 10.0456C24.9141 10.0567 25.1422 10.0735 25.3697 10.0958C25.5973 10.1182 25.8242 10.1461 26.0505 10.1796C26.2767 10.2131 26.502 10.2521 26.7263 10.2966C26.9506 10.3412 27.1737 10.3912 27.3956 10.4467C27.6174 10.5022 27.8378 10.5631 28.0567 10.6295C28.2755 10.6958 28.4926 10.7674 28.708 10.8444C28.9233 10.9214 29.1367 11.0036 29.348 11.0911C29.5593 11.1786 29.7683 11.2711 29.9751 11.3689C30.1818 11.4666 30.3861 11.5694 30.5878 11.6771C30.7895 11.7849 30.9885 11.8975 31.1846 12.015C31.3808 12.1326 31.574 12.2549 31.7642 12.3818C31.9544 12.5089 32.1413 12.6405 32.325 12.7767C32.5087 12.9129 32.689 13.0535 32.8658 13.1985C33.0427 13.3436 33.2158 13.4929 33.3853 13.6464C33.5548 13.8 33.7204 13.9576 33.8821 14.1193C34.0439 14.281 34.2015 14.4465 34.3552 14.616C34.5088 14.7854 34.6581 14.9585 34.8032 15.1353C34.9483 15.312 35.089 15.4922 35.2252 15.6759C35.3615 15.8596 35.4932 16.0465 35.6203 16.2366C35.7473 16.4268 35.8697 16.6199 35.9873 16.816C36.1049 17.0122 36.2176 17.2111 36.3255 17.4128C36.4333 17.6145 36.5361 17.8187 36.6339 18.0254C36.7317 18.2321 36.8243 18.4411 36.9119 18.6524C36.9994 18.8637 37.0817 19.077 37.1588 19.2923C37.2359 19.5076 37.3076 19.7247 37.374 19.9436C37.4404 20.1624 37.5014 20.3827 37.5569 20.6046C37.6125 20.8265 37.6627 21.0495 37.7072 21.2738C37.7519 21.4981 37.791 21.7234 37.8246 21.9496C37.8581 22.1758 37.8861 22.4027 37.9085 22.6303C37.931 22.8579 37.9478 23.0859 37.959 23.3143C37.9702 23.5427 37.9758 23.7713 37.9758 24C37.9758 24.2287 37.9702 24.4573 37.959 24.6857C37.9478 24.9141 37.931 25.1421 37.9085 25.3697C37.8861 25.5973 37.8581 25.8242 37.8246 26.0504C37.791 26.2766 37.7519 26.5019 37.7072 26.7262C37.6626 26.9505 37.6125 27.1735 37.5569 27.3954C37.5014 27.6172 37.4404 27.8376 37.374 28.0564C37.3076 28.2753 37.2359 28.4924 37.1588 28.7077C37.0817 28.923 36.9994 29.1363 36.9119 29.3476C36.8243 29.5589 36.7317 29.7679 36.6339 29.9746C36.5361 30.1813 36.4333 30.3855 36.3255 30.5872C36.2176 30.7889 36.1049 30.9878 35.9873 31.184C35.8697 31.3801 35.7473 31.5732 35.6203 31.7634C35.4932 31.9535 35.3615 32.1404 35.2252 32.3241C35.089 32.5078 34.9483 32.688 34.8032 32.8648C34.6581 33.0415 34.5088 33.2146 34.3552 33.384C34.2015 33.5534 34.0439 33.719 33.8821 33.8807C33.7204 34.0424 33.5548 34.2 33.3853 34.3536C33.2158 34.5071 33.0427 34.6564 32.8658 34.8014C32.689 34.9465 32.5087 35.0872 32.325 35.2233C32.1413 35.3595 31.9544 35.4911 31.7642 35.6182C31.574 35.7451 31.3808 35.8674 31.1846 35.985C30.9885 36.1025 30.7895 36.2151 30.5878 36.3229C30.3861 36.4306 30.1818 36.5334 29.9751 36.6311C29.7683 36.7289 29.5593 36.8214 29.348 36.9089C29.1367 36.9964 28.9233 37.0786 28.708 37.1556C28.4926 37.2326 28.2755 37.3042 28.0567 37.3705C27.8378 37.4369 27.6174 37.4978 27.3956 37.5533C27.1737 37.6088 26.9506 37.6588 26.7263 37.7034C26.502 37.7479 26.2767 37.7869 26.0505 37.8204C25.8242 37.8539 25.5973 37.8818 25.3697 37.9042C25.1422 37.9265 24.9141 37.9432 24.6857 37.9544C24.4573 37.9656 24.2287 37.9711 24 37.971C23.7713 37.971 23.5428 37.9654 23.3145 37.9542C23.0861 37.943 22.8582 37.9261 22.6306 37.9037C22.4031 37.8813 22.1762 37.8533 21.95 37.8198C21.7238 37.7862 21.4987 37.7471 21.2744 37.7025C21.0502 37.658 20.8271 37.6079 20.6053 37.5523C20.3835 37.4968 20.1632 37.4358 19.9444 37.3694C19.7257 37.303 19.5086 37.2313 19.2933 37.1543C19.078 37.0773 18.8648 36.995 18.6535 36.9075C18.4423 36.82 18.2333 36.7274 18.0266 36.6296C17.82 36.5319 17.6158 36.4291 17.4141 36.3213C17.2125 36.2136 17.0136 36.1009 16.8175 35.9833C16.6214 35.8658 16.4282 35.7435 16.2381 35.6165C16.048 35.4894 15.8611 35.3578 15.6775 35.2216C15.4938 35.0854 15.3136 34.9448 15.1369 34.7997C14.9601 34.6547 14.787 34.5054 14.6176 34.3518C14.4482 34.1983 14.2827 34.0407 14.121 33.879C13.9593 33.7173 13.8017 33.5518 13.6482 33.3824C13.4946 33.2129 13.3453 33.0398 13.2003 32.8631C13.0552 32.6864 12.9146 32.5062 12.7784 32.3225C12.6422 32.1389 12.5106 31.952 12.3835 31.7619C12.2565 31.5718 12.1342 31.3786 12.0167 31.1825C11.8991 30.9864 11.7864 30.7875 11.6787 30.5859C11.5709 30.3842 11.4681 30.18 11.3704 29.9734C11.2726 29.7667 11.18 29.5577 11.0925 29.3465C11.005 29.1352 10.9227 28.922 10.8457 28.7067C10.7687 28.4914 10.697 28.2743 10.6306 28.0556C10.5642 27.8368 10.5032 27.6165 10.4477 27.3947C10.3921 27.1729 10.342 26.9498 10.2975 26.7256C10.2528 26.5013 10.2137 26.2762 10.1802 26.05C10.1467 25.8238 10.1187 25.5969 10.0963 25.3694C10.0739 25.1418 10.057 24.9139 10.0458 24.6855C10.0346 24.4572 10.029 24.2287 10.029 24C10.029 23.7713 10.0346 23.5428 10.0458 23.3145C10.057 23.0861 10.0739 22.8582 10.0963 22.6306C10.1187 22.4031 10.1467 22.1762 10.1802 21.95C10.2137 21.7238 10.2528 21.4987 10.2975 21.2744C10.342 21.0502 10.3921 20.8271 10.4477 20.6053C10.5032 20.3835 10.5642 20.1632 10.6306 19.9444C10.697 19.7257 10.7687 19.5086 10.8457 19.2933C10.9227 19.078 11.005 18.8648 11.0925 18.6535C11.18 18.4423 11.2726 18.2333 11.3704 18.0266C11.4681 17.82 11.5709 17.6158 11.6787 17.4141C11.7864 17.2125 11.8991 17.0136 12.0167 16.8175C12.1342 16.6214 12.2565 16.4282 12.3835 16.2381C12.5106 16.048 12.6422 15.8611 12.7784 15.6775C12.9146 15.4938 13.0552 15.3136 13.2003 15.1369C13.3453 14.9601 13.4946 14.787 13.6482 14.6176C13.8017 14.4482 13.9593 14.2827 14.121 14.121C14.2827 13.9593 14.4482 13.8017 14.6176 13.6482C14.787 13.4946 14.9601 13.3453 15.1369 13.2003C15.3136 13.0552 15.4938 12.9146 15.6775 12.7784C15.8611 12.6422 16.048 12.5106 16.2381 12.3835C16.4282 12.2565 16.6214 12.1342 16.8175 12.0167C17.0136 11.8991 17.2125 11.7864 17.4141 11.6787C17.6158 11.5709 17.82 11.4681 18.0266 11.3704C18.2333 11.2726 18.4423 11.18 18.6535 11.0925C18.8648 11.005 19.078 10.9227 19.2933 10.8457C19.5086 10.7687 19.7257 10.697 19.9444 10.6306C20.1632 10.5642 20.3835 10.5032 20.6053 10.4477C20.8271 10.3921 21.0502 10.342 21.2744 10.2975C21.4987 10.2528 21.7238 10.2137 21.95 10.1802C22.1762 10.1467 22.4031 10.1187 22.6306 10.0963C22.8582 10.0739 23.0861 10.057 23.3145 10.0458C23.5428 10.0346 23.7713 10.029 24 10.029ZM48 22.209L48 25.791L40.836 25.791L40.836 22.209L48 22.209ZM7.164 22.209L7.164 25.791L0 25.791L0 22.209L7.164 22.209ZM8.292 5.766L13.359 10.83L10.824 13.362L5.76 8.298L8.292 5.766ZM40.824 4.641L43.359 7.173L38.292 12.24L35.76 9.705L40.824 4.641ZM25.791 0L25.791 7.164L22.209 7.164L22.209 0L25.791 0Z"
+                            fill="#FFC300"></path>
+                    </svg>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// 接收从父组件传入的数据
+const props = defineProps({
+  statusData: {
+    type: Object,
+    default: () => ({
+      totalPower: '0 KWh',
+      totalPowerChange: '0%',
+      efficiency: '0%',
+      efficiencyChange: '0%',
+      temperature: '0°C',
+      temperatureChange: '0°C',
+      sunlight: '0 W/m²',
+      sunlightChange: '0%'
+    })
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.status-box {
+    display: flex;
+    gap: 20px;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.status-card {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    min-width: 200px;
+    flex: 1;
+    max-width: calc(25% - 15px);
+
+    &.electricity {
+        background: rgba(232, 243, 255, 1);
+        border-image: linear-gradient(90deg, rgba(42, 130, 228, 1) 0%, rgba(0, 0, 0, 0) 100%) 0 0 1 0;
+    }
+
+    &.efficiency {
+        background: rgba(255, 255, 232, 1);
+        border-image: linear-gradient(90deg, rgba(255, 235, 59, 1) 0%, rgba(255, 235, 59, 0) 100%) 0 0 1 0;
+    }
+
+    &.temperature {
+        background: rgba(255, 232, 232, 1);
+        border-image: linear-gradient(90deg, rgba(255, 87, 51, 1) 0%, rgba(0, 0, 0, 0) 100%) 0 0 1 0;
+
+    }
+
+    &.sunlight {
+        background: rgba(255, 241, 227, 1);
+        border-image: linear-gradient(90deg, rgba(255, 141, 26, 1) 0%, rgba(255, 241, 227, 1) 100%) 0 0 1 0;
+    }
+}
+
+.card-left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.card-right {
+    margin-left: 16px;
+}
+
+.card-title {
+    font-size: 12px;
+    color: #606266;
+    font-weight: 500;
+}
+
+.card-value {
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+}
+
+.card-change {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    margin-top: 4px;
+
+    &.positive {
+        color: #67c23a;
+    }
+
+    &.negative {
+        color: #f56c6c;
+    }
+}
+
+.change-icon {
+    font-size: 10px;
+    margin-right: 2px;
+}
+
+.card-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+    .status-card {
+        max-width: calc(50% - 10px);
+    }
+}
+
+@media (max-width: 768px) {
+    .status-card {
+        max-width: 100%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/operatingCurve/components/box2/duibiPie.vue b/src/views/pvSystem/operatingCurve/components/box2/duibiPie.vue
new file mode 100644
index 0000000..d008220
--- /dev/null
+++ b/src/views/pvSystem/operatingCurve/components/box2/duibiPie.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2>性能比分析</h2>
+      <p>当前系统性能比为83%，高于同行水平（78%），表明系统运行状态良好。</p>
+    </div>
+    <div ref="chartRef" class="chart-content"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+// 引入 ECharts 核心模块
+import * as echarts from 'echarts';
+import 'echarts-liquidfill'
+// 接收从父组件传入的数据
+const props = defineProps({
+  duibiPieData: {
+    type: Number,
+    default: () => ({
+      num:0
+    })
+  }
+});
+
+const chartRef = ref(null);
+let myChart = null;
+
+onMounted(() => {
+  // 组件挂载后初始化图表
+  initChart();
+});
+
+const initChart = () => {
+  // 获取 DOM 容器
+  const chartDom = chartRef.value;
+  // 初始化 ECharts 实例
+  myChart = echarts.init(chartDom);
+
+  // 使用传入的数据，如果不存在则使用默认数据
+  const { num } = props.duibiPieData;
+
+  // 配置图表参数
+  const option = {
+    title: {
+      show: true,
+      text: '性能比',
+      x: '50%',
+      y: '60%',
+      z: 10,
+      textAlign: 'center',
+      textStyle: {
+        color: '#ffffff',
+        fontSize: 16,
+        fontWeight: 500
+      },
+    },
+    series: [
+      {
+        type: "liquidFill",
+        z: 2,
+        radius: "85%",
+        center: ["50%", "50%"],
+        data: [num/100],
+        label: {
+          fontSize: 30, // 设置数据字体大小
+          color: "#165DFF", // 设置数据字体颜色
+        },
+        backgroundStyle: {
+          color: "#fff",
+        },
+        outline: {
+          show: true,
+          itemStyle: {
+            borderWidth: 3, // 设置外边框的大小
+            borderColor: "#165DFF",// 设置外边框的颜色
+          },
+          borderDistance: 0,
+        },
+        color: [
+          {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 1,
+                color: "rgba(22, 93, 255,0.8)", //下
+              },
+              {
+                offset: 0,
+                color: "rgba(22, 93, 255,0.2)",
+              },
+            ],
+            globalCoord: false,
+          },
+        ],
+      },
+    ],
+  };
+
+  // 将配置项设置到图表实例
+  myChart.setOption(option);
+};
+
+// 组件卸载时，销毁图表实例（避免内存泄漏）
+onUnmounted(() => {
+  if (myChart) {
+    myChart.dispose();
+  }
+});
+</script>
+<style scoped lang="scss">
+.chart-container {
+  width: 100%;
+  height: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 8px;
+}
+
+.chart-header {
+  margin-bottom: 16px;
+}
+
+.chart-header h2 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+}
+
+.chart-header p {
+  font-size: 12px;
+  color: #666;
+  margin: 0;
+}
+
+.chart-content {
+  width: 100%;
+  height: calc(100% - 80px);
+  min-height: 200px;
+}
+
+@media (max-width: 768px) {
+  .chart-container {
+    padding: 12px;
+  }
+
+  .chart-content {
+    height: calc(100% - 70px);
+    min-height: 280px;
+  }
+}
+
+@media (max-width: 480px) {
+  .chart-container {
+    padding: 10px;
+  }
+
+  .chart-header h2 {
+    font-size: 16px;
+  }
+
+  .chart-header p {
+    font-size: 11px;
+  }
+
+  .chart-content {
+    height: calc(100% - 65px);
+    min-height: 250px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/operatingCurve/components/box2/powerBar.vue b/src/views/pvSystem/operatingCurve/components/box2/powerBar.vue
new file mode 100644
index 0000000..b55f153
--- /dev/null
+++ b/src/views/pvSystem/operatingCurve/components/box2/powerBar.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2>发电量预测对比</h2>
+      <p>实际发电量与预测值偏差在u±5%以内，处于合理范围，预测模型准确度较高。</p>
+    </div>
+    <div class="chart-content" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import * as echarts from 'echarts';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  powerBarData: {
+    type: Object,
+    default: () => ({
+      xAxis: ['上周', '本周'],
+      actualData: [],
+      forecastData: []
+    })
+  }
+});
+
+const chartRef = ref<HTMLDivElement>();
+let chartInstance: echarts.ECharts | null = null;
+
+// 初始化图表
+const initChart = async () => {
+  await nextTick();
+  if (!chartRef.value) return;
+  
+  // 销毁已存在的图表实例
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+  
+  // 创建新的图表实例
+  chartInstance = echarts.init(chartRef.value);
+  
+  // 使用传入的数据，如果不存在则使用默认数据
+  const data = props.powerBarData;
+  
+  // 图表配置
+  const option = {
+    tooltip: {
+      backgroundColor: 'rgba(13, 64, 71, 0.50)',
+      borderColor: 'rgba(143, 225, 252, 0.60)',
+      textStyle: {
+        color: '#fff'
+      },
+      padding: 10,
+      borderRadius: 4,
+    },
+    legend: {
+      data: ['实际发电量', '预测发电量'],
+      itemWidth: 14,
+      itemHeight: 10,
+      itemGap: 4,
+      textStyle: {
+         fontSize: 12,
+         color: '#666'
+      }
+   },
+    xAxis: {
+      type: 'category',
+      data: data.xAxis,
+      axisPointer: {
+            type: 'shadow'
+         },
+          axisLabel: {
+            textStyle: {
+               color: '#3E4954',  
+               fontSize: 12     
+            }
+         },
+      axisLine: {
+        lineStyle: {
+          color: '#ccc'
+        }
+      },
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 10000,
+      interval: 5000,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f0f0f0',
+          type: 'dashed'
+        }
+      }
+    },
+    series: [
+      {
+        name: '实际发电量',
+        type: 'bar',
+        data: data.actualData,
+        itemStyle: {
+          color: '#1a77dd',
+          borderRadius: [8, 8, 0, 0] // 设置圆角，上左、上右、下右、下左
+        },
+        barWidth: 60
+      },
+      {
+        name: '预测发电量',
+        type: 'bar',
+        data: data.forecastData,
+        itemStyle: {
+          color: '#7c3aed',
+          borderRadius: [8, 8, 0, 0] // 设置圆角，上左、上右、下右、下左
+        },
+        emphasis: {
+          itemStyle: {
+            color: '#6d28d9' // 悬停时的颜色
+          }
+        },
+        barWidth: 60
+      }
+    ]
+  };
+  
+  // 设置图表配置
+  chartInstance.setOption(option);
+};
+
+// 窗口大小改变时重新调整图表
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+
+// 生命周期钩子
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+});
+</script>
+
+<style scoped>
+.chart-container {
+  width: 100%;
+  height: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 8px;
+}
+
+.chart-header {
+  margin-bottom: 16px;
+}
+
+.chart-header h2 {
+ font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-header p {
+  font-size: 12px;
+  color: #666;
+  margin: 0;
+}
+
+.chart-content {
+  width: 100%;
+  height: calc(100% - 80px);
+  min-height: 200px;
+}
+
+@media (max-width: 768px) {
+  .chart-container {
+    padding: 12px;
+  }
+  
+  .chart-content {
+    height: calc(100% - 70px);
+    min-height: 280px;
+  }
+}
+
+@media (max-width: 480px) {
+  .chart-container {
+    padding: 10px;
+  }
+  
+  .chart-header h2 {
+    font-size: 16px;
+  }
+  
+  .chart-header p {
+    font-size: 11px;
+  }
+  
+  .chart-content {
+    height: calc(100% - 65px);
+    min-height: 250px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/operatingCurve/components/nibianqiLine.vue b/src/views/pvSystem/operatingCurve/components/nibianqiLine.vue
new file mode 100644
index 0000000..131a6fc
--- /dev/null
+++ b/src/views/pvSystem/operatingCurve/components/nibianqiLine.vue
@@ -0,0 +1,340 @@
+<template>
+    <div class="chart-container">
+        <!-- 逆变器输出与汇流箱电流  图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  nibianqiData: {
+    type: Object,
+    default: () => ({
+      xAxis: [],
+      inverterData: [],
+      combinerBoxData: []
+    })
+  }
+});
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 定义颜色常量
+const ACTUAL_COLOR = '#7948EA';
+const THEORETICAL_COLOR = '#0DFFEF';
+
+// 十六进制颜色转rgba工具函数
+const hexToRgba = (hex, opacity) => {
+  // 移除#号
+  hex = hex.replace('#', '');
+  
+  // 解析RGB值
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    // 使用传入的数据，如果不存在则使用默认数据
+    const { xAxis, inverterData, combinerBoxData } = props.nibianqiData;
+
+    const option = {
+        title: {
+            text: '逆变器输出与汇流箱电流',
+            top: 5,
+            textStyle: {
+                color: '#111111', // 标题颜色
+                fontWeight: 'bold',
+                fontSize: 16,
+            },
+        },
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(33,56,77,1)',
+            borderColor: 'rgba(33,56,77,1)',
+            textStyle: {
+                color: '#fff',
+                fontSize: 14
+            }
+        },
+        legend: {
+            right: 'center',
+            top: 4,
+            itemWidth: 10,
+            itemHeight: 10,
+            itemGap: 25,
+            icon: 'stack',
+        },
+        grid: {
+            top: '30%',
+            right: '4%',
+            bottom: '4%',
+            left: '6%',
+            containLabel: true
+        },
+        xAxis: {
+            data: xAxis,
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+                textStyle: {
+                    color: '#3E4954',
+                    fontSize: 12
+                }
+            },
+            axisTick: {
+                show: false // 去除刻度线
+            },
+        },
+        yAxis: [
+            {
+                name: '逆变器输出:KW',
+                position: 'left',
+                type: 'value',
+                min: 0,      // 统一最小刻度
+                max: 120,    // 统一最大刻度
+                axisLabel: {
+                    textStyle: {
+                        color: '#3E4954',
+                        fontSize: 12
+                    }
+                },
+                axisTick: {
+                    show: false // 去除刻度线
+                },
+                splitLine: {
+                    show: false,// y轴分割线
+                }
+            },
+            {
+                name: '汇流箱电流',
+                position: 'right',
+                type: 'value',
+                min: 0,      // 统一最小刻度
+                max: 120,    // 统一最大刻度
+                axisLabel: {
+                    textStyle: {
+                        color: '#3E4954',
+                        fontSize: 12
+                    }
+                },
+
+                axisTick: {
+                    show: false // 去除刻度线
+                },
+
+                splitLine: {
+                    show: false,// y轴分割线
+                }
+            },
+        ],
+
+        series: [
+            {
+                name: '逆变器输出',
+                smooth: true,
+                type: 'line',
+                yAxisIndex: 1, // 关联到右侧y轴
+                lineStyle: {
+                    width: 4       // 线条宽度，单位是 px
+                },
+                // 填充颜色设置
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [
+                            {
+                                offset: 0,
+                                color: hexToRgba(ACTUAL_COLOR, 0.4) // 使用ACTUAL_COLOR并设置透明度
+                            },
+                            {
+                                offset: 0.9,
+                                color: hexToRgba(ACTUAL_COLOR, 0) // 使用ACTUAL_COLOR并设置透明度为0
+                            }
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                // 拐点
+                showSymbol: true,
+                symbolSize: 10,
+                // 设置拐点颜色以及边框
+                itemStyle: {
+                    color: ACTUAL_COLOR
+                },
+                data: inverterData
+            },
+            {
+                name: '汇流箱电流',
+                smooth: true,
+                type: 'line',
+                lineStyle: {
+                    width: 4       // 线条宽度，单位是 px
+                },
+                // 填充颜色设置
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [
+                            {
+                                offset: 0,
+                                color: hexToRgba(THEORETICAL_COLOR, 0.4) // 使用THEORETICAL_COLOR并设置透明度
+                            },
+                            {
+                                offset: 0.9,
+                                color: hexToRgba(THEORETICAL_COLOR, 0) // 使用THEORETICAL_COLOR并设置透明度为0
+                            }
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                // 拐点
+                showSymbol: true,
+                symbolSize: 10,
+                // 设置拐点颜色以及边框
+                itemStyle: {
+                    color: THEORETICAL_COLOR
+                },
+                data: combinerBoxData
+            }
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+    /* padding: 10px; */
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-actions button {
+    background: none;
+    border: 1px solid #e0e0e0;
+    padding: 5px 12px;
+    border-radius: 4px;
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.2s ease;
+}
+
+.chart-actions button.active {
+    background-color: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.chart-content {
+    width: 100%;
+    height: calc(100% - 54px);
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>
diff --git a/src/views/pvSystem/operatingCurve/components/rizhaoqiangduBar.vue b/src/views/pvSystem/operatingCurve/components/rizhaoqiangduBar.vue
new file mode 100644
index 0000000..0b80b76
--- /dev/null
+++ b/src/views/pvSystem/operatingCurve/components/rizhaoqiangduBar.vue
@@ -0,0 +1,261 @@
+<template>
+    <div class="chart-container">
+        <!--系统效率与日照强度 图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  riZhaoData: {
+    type: Object,
+    default: () => ({
+      xAxis: [],
+      systemEfficiency: [],
+      solarIrradiance: []
+    })
+  }
+});
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 定义颜色常量
+const SYSTEM_EFFICIENCY_COLOR = '#FFD700'; // 黄色 - 系统效率
+const SOLAR_IRRADIANCE_COLOR = '#1890FF'; // 蓝色 - 日照强度
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    // 使用传入的数据，如果不存在则使用默认数据
+    const { xAxis, systemEfficiency, solarIrradiance } = props.riZhaoData;
+
+    const option = {
+        title: {
+            text: '系统效率与日照强度',
+            top: 5,
+            align: 'left',
+            textStyle: {
+                color: '#111111',
+                fontWeight: 'bold',
+                fontSize: 16,
+            },
+        },
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(255,255,255,1)',
+            borderColor: '#ddd',
+            borderWidth: 1,
+            textStyle: {
+                color: '#333',
+                fontSize: 14
+            },
+            formatter: function(params) {
+                const systemEfficiency = params[0].value;
+                const solarIrradiance = params[1].value;
+                return `
+                    <div style="padding: 5px;">
+                        <div style="color: ${params[0].color};">系统效率: ${systemEfficiency}%</div>
+                        <div style="color: ${params[1].color};">日照强度: ${solarIrradiance}</div>
+                    </div>
+                `;
+            }
+        },
+        legend: {
+            top: 30,
+            left: 'center',
+            itemWidth: 10,
+            itemHeight: 10,
+            itemGap: 25,
+            data: ['系统效率', '日照强度'],
+            textStyle: {
+                color: '#666',
+                fontSize: 12
+            }
+        },
+        grid: {
+            top: '30%',
+            right: '10%',
+            bottom: '10%',
+            left: '6%',
+            containLabel: true
+        },
+        xAxis: {
+            data: xAxis,
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+                textStyle: {
+                    color: '#666',
+                    fontSize: 12
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#ddd'
+                }
+            }
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '系统效率(%)',
+                nameTextStyle: {
+                    color: '#666',
+                    fontSize: 12
+                },
+                min: 0,
+                max: 20,
+                interval: 5,
+                axisLabel: {
+                    textStyle: {
+                        color: '#666',
+                        fontSize: 12
+                    }
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLine: {
+                    show: false
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: '#f0f0f0',
+                        type: 'dashed'
+                    }
+                }
+            },
+            {
+                type: 'value',
+                name: '日照强度',
+                nameTextStyle: {
+                    color: '#666',
+                    fontSize: 12
+                },
+                min: 0,
+                max: 800,
+                interval: 200,
+                axisLabel: {
+                    textStyle: {
+                        color: '#666',
+                        fontSize: 12
+                    }
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLine: {
+                    show: false
+                },
+                splitLine: {
+                    show: false
+                }
+            }
+        ],
+        series: [
+            {
+                name: '系统效率',
+                type: 'line',
+                smooth: true,
+                showSymbol: false,
+                symbol: 'circle',
+                symbolSize: 6,
+                emphasis: {
+                    showSymbol: true,
+                    symbolSize: 10
+                },
+                yAxisIndex: 0,
+                lineStyle: {
+                    width: 2,
+                    color: SYSTEM_EFFICIENCY_COLOR
+                },
+                itemStyle: {
+                    color: SYSTEM_EFFICIENCY_COLOR,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                data: systemEfficiency
+            },
+            {
+                name: '日照强度',
+                type: 'bar',
+                yAxisIndex: 1,
+                barWidth: '40%',
+                itemStyle: {
+                    color: SOLAR_IRRADIANCE_COLOR
+                },
+                data: solarIrradiance
+            }
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.chart-content {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/operatingCurve/components/temperatureLine.vue b/src/views/pvSystem/operatingCurve/components/temperatureLine.vue
new file mode 100644
index 0000000..fa4baeb
--- /dev/null
+++ b/src/views/pvSystem/operatingCurve/components/temperatureLine.vue
@@ -0,0 +1,317 @@
+<template>
+    <div class="chart-container">
+        <!--组件温度（℃）  图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  temperatureData: {
+    type: Object,
+    default: () => ({
+      xAxis: [],
+      componentTemp: [],
+      ambientTemp: []
+    })
+  }
+});
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 定义颜色常量
+const ACTUAL_COLOR = '#FF5733';
+const THEORETICAL_COLOR = '#FF8D1A';
+
+// 十六进制颜色转rgba工具函数
+const hexToRgba = (hex, opacity) => {
+  // 移除#号
+  hex = hex.replace('#', '');
+  
+  // 解析RGB值
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    // 使用传入的数据，如果不存在则使用默认数据
+    const { xAxis, componentTemp, ambientTemp } = props.temperatureData;
+
+    const option = {
+        title: {
+            text: '组件温度（℃）',
+            top: 5,
+            textStyle: {
+                color: '#111111', // 标题颜色
+                fontWeight: 'bold',
+                fontSize: 16,
+            },
+        },
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(33,56,77,1)',
+            borderColor: 'rgba(33,56,77,1)',
+            textStyle: {
+                color: '#fff',
+                fontSize: 14
+            }
+        },
+        legend: {
+            right: '5%',
+            top: 4,
+            itemWidth: 10,
+            itemHeight: 10,
+            itemGap: 25,
+            icon: 'stack',
+            data: ['组件温度', '环境温度']
+        },
+        grid: {
+            top: '20%',
+            right: '4%',
+            bottom: '4%',
+            left: '6%',
+            containLabel: true
+        },
+        xAxis: {
+            data: xAxis,
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+                textStyle: {
+                    color: '#3E4954',
+                    fontSize: 12
+                }
+            },
+            axisTick: {
+                show: false // 去除刻度线
+            },
+        },
+        yAxis: 
+            {
+                type: 'value',
+                min: 0,
+                max: 50,
+                axisLabel: {
+                    formatter: '{value} ℃',
+                    textStyle: {
+                        color: '#3E4954',
+                        fontSize: 12
+                    }
+                },
+                axisTick: {
+                    show: false // 去除刻度线
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#f0f0f0',
+                        type: 'dashed'
+                    }
+                }
+            },
+        series: [
+            {
+                name: '组件温度',
+                type: 'line',
+                 smooth: true,
+                showSymbol: false, // 取消点显示
+                lineStyle: {
+                    width: 4,       // 线条宽度，单位是 px
+                    color: ACTUAL_COLOR
+                },
+                // 填充颜色设置
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [
+                            {
+                                offset: 0,
+                                color: hexToRgba(ACTUAL_COLOR, 0.4) // 使用ACTUAL_COLOR并设置透明度
+                            },
+                            {
+                                offset: 0.9,
+                                color: hexToRgba(ACTUAL_COLOR, 0) // 使用ACTUAL_COLOR并设置透明度为0
+                            }
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                // 设置拐点颜色以及边框
+                itemStyle: {
+                    color: ACTUAL_COLOR
+                },
+                data: componentTemp
+            },
+            {
+                name: '环境温度',
+                type: 'line',
+                 smooth: true,
+                showSymbol: false, // 取消点显示
+                lineStyle: {
+                    width: 4,       // 线条宽度，单位是 px
+                    color: THEORETICAL_COLOR
+                },
+                // 填充颜色设置
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [
+                            {
+                                offset: 0,
+                                color: hexToRgba(THEORETICAL_COLOR, 0.4) // 使用THEORETICAL_COLOR并设置透明度
+                            },
+                            {
+                                offset: 0.9,
+                                color: hexToRgba(THEORETICAL_COLOR, 0) // 使用THEORETICAL_COLOR并设置透明度为0
+                            }
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                itemStyle: {
+                    color: THEORETICAL_COLOR
+                },
+                data: ambientTemp
+            }
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-actions button {
+    background: none;
+    border: 1px solid #e0e0e0;
+    padding: 5px 12px;
+    border-radius: 4px;
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.2s ease;
+}
+
+.chart-actions button.active {
+    background-color: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.chart-content {
+    width: 100%;
+    height: calc(100% - 54px);
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>
diff --git a/src/views/pvSystem/operatingCurve/components/yujing.vue b/src/views/pvSystem/operatingCurve/components/yujing.vue
new file mode 100644
index 0000000..24d1e45
--- /dev/null
+++ b/src/views/pvSystem/operatingCurve/components/yujing.vue
@@ -0,0 +1,238 @@
+<template>
+    <div class="warning-container">
+        <!-- 标题区域 -->
+        <h2 class="main-title">异常参数预警</h2>
+
+        <!-- 预警列表容器，设置最大高度和滚动 -->
+        <div class="warning-list">
+            <!-- 循环渲染预警项 -->
+            <div v-for="(warning, index) in warnings" :key="index"
+                :class="['warning-item', getWarningClass(warning.type)]">
+                <!-- 预警图标 -->
+                <el-icon :class="getIconClass(warning.type)">
+                    <template v-if="warning.type === 'error'">
+                        <CircleCloseFilled />
+                    </template>
+                    <template v-if="warning.type === 'warning'">
+                        <WarningFilled />
+                    </template>
+                    <template v-if="warning.type === 'info'">
+                        <Odometer />
+                    </template>
+                </el-icon>
+
+                <!-- 预警内容 -->
+                <div class="warning-content">
+                    <div :class="['warning-title', getTitleClass(warning.type)]">{{ warning.title }}</div>
+                    <div class="warning-time">{{ warning.time }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { CircleCloseFilled, InfoFilled, WarningFilled, Odometer } from '@element-plus/icons-vue';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  warningData: {
+    type: Array,
+    default: () => [
+      {
+        type: 'error',
+        title: '无',
+        time: '无'
+      }
+    ]
+  }
+});
+
+// 使用传入的预警数据
+const warnings = ref(props.warningData);
+
+// 根据预警类型获取样式类
+const getWarningClass = (type) => {
+    return `warning-${type}`;
+};
+
+// 根据预警类型获取图标样式类
+const getIconClass = (type) => {
+    return `${type}-icon`;
+};
+
+// 根据预警类型获取标题样式类，确保标题颜色与图标一致
+const getTitleClass = (type) => {
+    return `${type}-title`;
+};
+
+// 监听窗口大小变化，调整组件高度
+let resizeObserver = null;
+
+onMounted(() => {
+    // 设置响应式高度
+    const setResponsiveHeight = () => {
+        const warningContainer = document.querySelector('.warning-container');
+        const screenWidth = window.innerWidth;
+        let maxHeight = 400; // 默认高度，与line1组件一致
+
+        if (screenWidth <= 768) {
+            maxHeight = 350;
+        }
+        if (screenWidth <= 480) {
+            maxHeight = 300;
+        }
+
+        if (warningContainer) {
+            warningContainer.style.height = `${maxHeight}px`;
+        }
+    };
+
+    // 初始设置
+    setResponsiveHeight();
+
+    // 创建ResizeObserver监听窗口大小变化
+    if (window.ResizeObserver) {
+        resizeObserver = new ResizeObserver(setResponsiveHeight);
+        resizeObserver.observe(document.documentElement);
+    } else {
+        // 降级方案：使用窗口resize事件
+        window.addEventListener('resize', setResponsiveHeight);
+    }
+});
+
+onUnmounted(() => {
+    // 清理监听器，避免内存泄漏
+    if (resizeObserver) {
+        resizeObserver.disconnect();
+    } else {
+        window.removeEventListener('resize', () => { });
+    }
+});
+</script>
+
+<style scoped>
+.warning-container {
+    height: 400px;
+    /* 与line1组件一致的高度 */
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.main-title {
+    color: '#111111';
+    font-weight:bold;
+    font-size: 16px;
+    margin-bottom: 20px;
+
+
+}
+
+.warning-list {
+    overflow-y: auto;
+    padding-right: 10px;
+    /* 为滚动条预留空间 */
+    flex: 1;
+}
+
+/* 滚动条样式优化 */
+.warning-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.warning-list::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+.warning-list::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 3px;
+}
+
+.warning-list::-webkit-scrollbar-thumb:hover {
+    background: #aaa;
+}
+
+/* 响应式设计 - 与line1组件保持一致 */
+@media (max-width: 768px) {
+    .warning-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .warning-container {
+        height: 300px;
+    }
+}
+
+.warning-item {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    border-radius: 8px;
+    margin-bottom: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    transition: transform 0.2s ease;
+}
+
+.warning-item:hover {
+    transform: translateY(-2px);
+}
+
+/* 不同类型预警的背景色 */
+.warning-error {
+    background-color: #fff1f0;
+}
+
+.warning-warning {
+    background-color: #fffbe6;
+}
+
+.warning-info {
+    background-color: #e6f7ff;
+}
+
+/* 图标和标题颜色保持一致 */
+.error-icon,
+.error-title {
+    color: #f5222d !important;
+    /* 红色，使用 !important 确保优先级 */
+}
+
+.warning-icon,
+.warning-title {
+    color: #faad14;
+}
+
+.info-icon,
+.info-title {
+    color: #00BAAD;
+}
+
+/* 图标通用样式 */
+.el-icon {
+    font-size: 20px;
+    margin-right: 12px;
+}
+
+.warning-content {
+    flex: 1;
+}
+
+.warning-content .warning-title {
+    font-size: 16px;
+    margin-bottom: 4px;
+    font-weight: bold;
+    /* 颜色由动态类名（如.error-title）控制，不设置固定颜色 */
+}
+
+.warning-content .warning-time {
+    font-size: 14px;
+    color: #666;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/operatingCurve/index.vue b/src/views/pvSystem/operatingCurve/index.vue
new file mode 100644
index 0000000..32c9023
--- /dev/null
+++ b/src/views/pvSystem/operatingCurve/index.vue
@@ -0,0 +1,245 @@
+<template>
+    <div class="model">
+        <!-- 标题栏 -->
+        <el-row :gutter="24">
+            <el-col :span="12">
+                <TitleComponent title="运行参数曲线分析" subtitle="实时监控光伏系统关键运行参数，分析性能趋势" />
+            </el-col>
+            <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
+            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
+                <!-- 子col1：下拉 -->
+                <el-col :span="4">
+                    <el-select placeholder="请选择电站">
+                        <el-option label="所有电站" value="all"></el-option>
+                    </el-select>
+                </el-col>
+                <!-- 子col2：下拉框容器 -->
+                <el-col :span="4">
+                    <el-select placeholder="请选择月份">
+                        <el-option label="所有月份" value="all"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">
+                        导出数据
+                        <el-icon class="el-icon--right">
+                            <UploadFilled />
+                        </el-icon>
+                    </el-button>
+                </el-col>
+            </el-col>
+        </el-row>
+        <!-- 图示区域1 -->
+        <el-row :gutter="24" class="flex-container">
+            <el-col :span="16" class="flex-item">
+                <el-card>
+                    <!-- 状态 -->
+                    <statusBox :statusData="mockData.statusData"></statusBox>
+                    <!-- 发电量趋势 -->
+                    <qushiLine class="qushi" :quShiData="mockData.quShiData"></qushiLine>
+                </el-card>
+            </el-col>
+
+            <el-col :span="8" class="flex-item">
+                <el-card>
+                    <!-- 发电量预测对比 -->
+                   <powerBar :powerBarData="mockData.powerBarData"></powerBar>
+                </el-card>
+                <el-card>
+                    <!-- 性能分析 -->
+                   <duibiPie :duibiPieData="mockData.duibiPieData"></duibiPie>
+                </el-card>
+            </el-col>
+        </el-row>
+        <!-- 图示区域2-->
+        <el-row :gutter="24" style="margin-top: 20px;" class="flex-container">
+            <el-col :span="16">
+                <el-card>
+                    <!-- 系统效率与日照强度 -->
+                      <rizhaoqiangduBar :riZhaoData="mockData.rizhaoqiangduData"></rizhaoqiangduBar>
+                </el-card>
+            </el-col>
+            <el-col :span="8">
+                <el-card>
+                    <!-- 组件温度 -->
+                    <temperatureLine class="line" :temperatureData="mockData.temperatureData"></temperatureLine>
+                </el-card>
+            </el-col>
+        </el-row>
+        <!-- 图示区域3 -->
+        <el-row :gutter="24"  style="margin-top: 20px;">
+            <el-col :span="16">
+                <el-card>
+                    <!-- 逆变器输出与汇流箱电流 -->
+                    <nibianqiLine class="line" :nibianqiData="mockData.nibianqiData"></nibianqiLine>
+                </el-card>
+            </el-col>
+            <el-col :span="8">
+                <!-- 异常参数预警 -->
+                <el-card>
+                    <yujing :warningData="mockData.yujingData"></yujing>
+                </el-card>
+            </el-col>
+        </el-row>
+
+
+    </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import TitleComponent from '@/components/TitleComponent/index.vue';
+import StatusBox from '@/views/pvSystem/operatingCurve/components/box1/statusBox.vue'
+import QushiLine from '@/views/pvSystem/operatingCurve/components/box1/qushiLine.vue'
+import powerBar from '@/views/pvSystem/operatingCurve/components/box2/powerBar.vue'
+import nibianqiLine from '@/views/pvSystem/operatingCurve/components/nibianqiLine.vue';
+import temperatureLine from '@/views/pvSystem/operatingCurve/components/temperatureLine.vue';
+import rizhaoqiangduBar from '@/views/pvSystem/operatingCurve/components/rizhaoqiangduBar.vue';
+import duibiPie from '@/views/pvSystem/operatingCurve/components/box2/duibiPie.vue';
+import yujing from '@/views/pvSystem/operatingCurve/components/yujing.vue'
+
+// 模拟接口数据
+const mockData = ref({
+  // 状态卡片数据   
+  statusData: {
+    totalPower: '3,456.8KWh',
+    totalPowerChange: '8.2%',
+    efficiency: '18.7%',
+    efficiencyChange: '-0.3%',
+    temperature: '42.3°C',
+    temperatureChange: '2.1°C',
+    sunlight: '865 W/m²',
+    sunlightChange: '12.5%'
+  },
+  
+  // 发电量趋势数据
+  quShiData: {
+    day: {
+      xAxis: ['03-09', '03-10', '03-11', '03-12', '03-13', '03-14', '03-15', '03-16'],
+      actualData: [35, 65, 60, 55, 45, 50, 45, 30],
+      theoreticalData: [30, 70, 85, 80, 65, 60, 65, 95]
+    },
+    week: {
+      xAxis: ['第1周', '第2周', '第3周', '第4周'],
+      actualData: [280, 360, 320, 400],
+      theoreticalData: [300, 400, 350, 450]
+    },
+    month: {
+      xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
+      actualData: [1250, 1420, 1380, 1650, 1520, 1780],
+      theoreticalData: [1350, 1500, 1450, 1700, 1600, 1850]
+    }
+  },
+  
+  // 发电量预测对比数据
+  powerBarData: {
+    xAxis: ['上周', '本周'],
+    actualData: [4899, 5200],
+    forecastData: [5000, 5300]
+  },
+  
+  // 性能比分析数据
+  duibiPieData: {
+    num: 83,
+  },
+  
+  // 系统效率与日照强度数据
+  rizhaoqiangduData: {
+    xAxis: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
+    systemEfficiency: [14, 12, 13, 15, 12, 16, 15, 14, 13, 6],
+    solarIrradiance: [100, 556, 413, 115, 510, 115, 317, 118, 14, 7]
+  },
+  
+  // 组件温度数据
+  temperatureData: {
+    xAxis: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
+    componentTemp: [22, 30, 38, 28, 44, 32, 42, 25, 35],
+    ambientTemp: [18, 26, 32, 24, 1, 28, 36, 22, 30]
+  },
+  
+  // 逆变器输出与汇流箱电流数据
+  nibianqiData: {
+    xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
+    inverterData: [40, 58, 40, 44, 61, 58, 77, 60, 78, 53, 70, 53],
+    combinerBoxData: [50, 48, 44, 62, 41, 78, 57, 70, 68, 100, 60, 73]
+  },
+  
+  // 异常参数预警数据
+  yujingData: [
+    {
+      type: 'error',
+      title: '逆变器A电压异常',
+      time: '今日14:32发生'
+    },
+    {
+      type: 'warning',
+      title: '组件温度过高',
+      time: '今日13:45发生'
+    },
+    {
+      type: 'info',
+      title: '清理维护提醒',
+      time: '3天后需要进行组件清洁'
+    },
+    {
+      type: 'warning',
+      title: '组件温度过高',
+      time: '今日13:45发生'
+    },
+    {
+      type: 'info',
+      title: '清理维护提醒',
+      time: '3天后需要进行组件清洁'
+    },
+    {
+      type: 'error',
+      title: '逆变器B电流异常',
+      time: '今日10:22发生'
+    },
+    {
+      type: 'warning',
+      title: '散热系统效率降低',
+      time: '昨日23:15发生'
+    },
+    {
+      type: 'error',
+      title: '汇流箱C通讯中断',
+      time: '昨日18:30发生'
+    }
+  ]
+});
+
+// 模拟API调用
+const fetchData = () => {
+  return new Promise((resolve) => {
+    // 模拟网络延迟
+    setTimeout(() => {
+      resolve(mockData.value);
+    }, 500);
+  });
+};
+
+// 页面加载时获取数据
+onMounted(async () => {
+  try {
+    const data = await fetchData();
+    mockData.value = data;
+  } catch (error) {
+    console.error('获取数据失败:', error);
+  }
+});
+</script>
+<style scoped lang="scss">
+.model {
+    padding: 20px 15px;
+    background-color: rgba(242, 248, 252, 1);
+}
+.flex-container {
+  display: flex;
+}
+.flex-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between; /* 水平居中 */
+  align-items: stretch; /* 拉伸子元素以填满容器高度 */
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/reportManager/components/detailForm.vue b/src/views/pvSystem/reportManager/components/detailForm.vue
new file mode 100644
index 0000000..c40540e
--- /dev/null
+++ b/src/views/pvSystem/reportManager/components/detailForm.vue
@@ -0,0 +1,306 @@
+<template>
+  <div class="detail-form-container">
+    <!-- 标题栏 -->
+    <div class="form-header">
+      <h2 class="form-title">运行参数详情表</h2>
+      <div class="header-actions">
+        <el-input v-model="searchKeyword" placeholder="搜索参数" prefix-icon="el-icon-search" class="search-input" />
+        <el-button type="primary" class="filter-btn" @click="showFilterDialog = !showFilterDialog">
+          <img src="/src/assets/demo/shaixuan.png" alt="筛选" class="btn-icon">
+          筛选
+        </el-button>
+        <el-button type="primary" class="export-btn" @click="handleExport">
+          <img src="/src/assets/demo/upload.png" alt="导出" class="btn-icon">
+          导出
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 表格内容 -->
+    <div class="table-wrapper">
+      <el-table v-loading="loading" :data="processedTableData" style="width: 100%" border>
+        <el-table-column prop="time" label="时间" align="center" />
+        <el-table-column prop="irradiance" label="辐照度(W/㎡)" align="center" />
+        <el-table-column prop="powerGeneration" label="发电量(KWH)" align="center" />
+        <el-table-column prop="efficiency" label="效率(%)" align="center" />
+        <el-table-column prop="moduleTemperature" label="组件温度(℃)" align="center" />
+        <el-table-column prop="inverterTemperature" label="逆变器温度(℃)" align="center" />
+        <el-table-column prop="status" label="状态" align="center">
+          <template #default="scope">
+            <el-tag :type="getStatusTagType(scope.row.status)" v-if="['success', 'warning', 'info', 'primary', 'danger'].includes(getStatusTagType(scope.row.status))">
+              {{ scope.row.status }}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="pagination-wrapper">
+      <div class="pagination-info">
+        显示第 {{ (currentPage - 1) * pageSize + 1 }} 到第
+        {{ Math.min(currentPage * pageSize, total) }} 条，共 {{ total }} 条记录
+      </div>
+      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
+        layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </div>
+  </div>
+
+  <!-- 筛选对话框 -->
+  <el-dialog v-model="showFilterDialog" title="筛选条件" width="30%">
+    <div class="filter-content">
+      <div class="filter-item">
+        <span class="filter-label">设备状态：</span>
+        <el-checkbox-group v-model="selectedStatus" class="filter-checkbox-group">
+          <el-checkbox v-for="option in statusOptions" :key="option.value" :label="option.value">
+            {{ option.label }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="resetFilter">重置</el-button>
+        <el-button type="primary" @click="handleFilter">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { ElMessage, ElDialog, ElCheckboxGroup, ElCheckbox, ElButton } from 'element-plus';
+
+// 定义props
+const props = defineProps({
+  tableData: {
+    type: Array,
+    default: () => []
+  }
+});
+
+// 搜索关键词
+const searchKeyword = ref('');
+
+// 表格加载状态
+const loading = ref(false);
+
+// 分页数据 - 设置为第2页，共200条记录（20页）
+const currentPage = ref(2);
+const pageSize = ref(10);
+const total = ref(200); // 模拟总条数，20页
+
+// 筛选相关
+const showFilterDialog = ref(false);
+const selectedStatus = ref<string[]>([]);
+const statusOptions = [
+  { label: '正常', value: '正常' },
+  { label: '停机', value: '停机' }
+];
+
+// 筛选按钮点击处理
+const handleFilter = () => {
+  // 筛选逻辑已在processedTableData计算属性中实现
+  showFilterDialog.value = false;
+};
+
+// 重置筛选
+const resetFilter = () => {
+  selectedStatus.value = [];
+};
+
+
+
+// 计算表格数据（模拟分页、搜索和筛选）
+const processedTableData = computed(() => {
+  let filteredData = [...props.tableData];
+
+  // 搜索逻辑
+  if (searchKeyword.value) {
+    filteredData = filteredData.filter(item => {
+      return Object.values(item).some(val =>
+        String(val).includes(searchKeyword.value)
+      );
+    });
+  }
+
+  // 状态筛选逻辑
+  if (selectedStatus.value.length > 0) {
+    filteredData = filteredData.filter(item =>
+      selectedStatus.value.includes(item.status)
+    );
+  }
+
+  // 模拟分页逻辑
+  const start = (currentPage.value - 1) * pageSize.value;
+  const end = start + pageSize.value;
+  return filteredData.slice(start, end);
+});
+
+// 根据状态获取标签类型
+const getStatusTagType = (status: string) => {
+  switch (status) {
+    case '正常':
+      return 'success';
+    case '停机':
+      return 'info';
+    default:
+      return 'default';
+  }
+};
+
+// 分页大小变化处理
+const handleSizeChange = (size) => {
+  pageSize.value = size;
+  // 实际应用中这里应该重新获取数据
+  ElMessage.info(`每页显示 ${size} 条`);
+};
+
+// 当前页变化处理
+const handleCurrentChange = (current) => {
+  currentPage.value = current;
+  // 实际应用中这里应该重新获取数据
+};
+
+// 导出功能
+const handleExport = () => {
+  ElMessage.success('导出成功');
+  // 实际应用中这里应该实现真实的导出逻辑
+};
+
+// 初始化数据
+onMounted(() => {
+  // 模拟加载数据
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+});
+</script>
+
+<style scoped>
+.detail-form-container {
+  width: 100%;
+  min-width: 0;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.form-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.form-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.search-input {
+  width: 200px;
+}
+
+.filter-btn {
+  margin-right: 10px;
+}
+
+.btn-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+.table-wrapper {
+  margin-bottom: 20px;
+}
+
+/* 筛选对话框样式 */
+.filter-content {
+  padding: 10px 0;
+}
+
+.filter-item {
+  margin-bottom: 20px;
+}
+
+.filter-label {
+  display: inline-block;
+  width: 80px;
+  text-align: right;
+  margin-right: 10px;
+}
+
+.filter-checkbox-group {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 10px;
+  border-top: 1px solid #f5f5f5;
+}
+
+.pagination-info {
+  color: #8c8c8c;
+  font-size: 14px;
+}
+
+/* 适配不同屏幕尺寸 */
+@media (max-width: 1200px) {
+  .header-actions {
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 768px) {
+  .detail-form-container {
+    padding: 10px;
+  }
+
+  .form-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .header-actions {
+    width: 100%;
+  }
+
+  .search-input {
+    width: 100%;
+  }
+
+  .pagination-wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+}
+
+/* 确保表格在小屏幕上可以水平滚动 */
+.table-wrapper {
+  overflow-x: auto;
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/reportManager/components/fenxiLine.vue b/src/views/pvSystem/reportManager/components/fenxiLine.vue
new file mode 100644
index 0000000..f78dcd0
--- /dev/null
+++ b/src/views/pvSystem/reportManager/components/fenxiLine.vue
@@ -0,0 +1,294 @@
+<template>
+    <div class="chart-container">
+        <div class="chart-header">
+            <h2>效率分析</h2>
+            <div class="chart-actions">
+                <button :class="{ active: timeRange === 'hour' }" @click="changeTimeRange('hour')">小时</button>
+                <button :class="{ active: timeRange === 'day' }" @click="changeTimeRange('day')">每天</button>
+                <button :class="{ active: timeRange === 'week' }" @click="changeTimeRange('week')">每周</button>
+            </div>
+        </div>
+        <!--图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 当前时间范围状态
+const timeRange = ref('hour'); // 默认显示小时数据
+
+// 定义props
+const props = defineProps({
+  chartData: {
+    type: Object,
+    default: () => ({
+      hour: {
+        xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
+        efficiencyData: [7, 10, 14, 17, 18, 19, 20]
+      },
+      day: {
+        xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        efficiencyData: [12, 15, 17, 14, 18, 16, 19]
+      },
+      week: {
+        xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
+        efficiencyData: [10, 13, 16, 14, 18, 17]
+      }
+    })
+  }
+});
+
+// 切换时间范围的函数
+const changeTimeRange = (range) => {
+  timeRange.value = range;
+  updateChartData();
+};
+
+// 更新图表数据的函数
+const updateChartData = () => {
+  if (chartInstance) {
+    const data = props.chartData[timeRange.value];
+    chartInstance.setOption({
+      xAxis: {
+        data: data.xAxis
+      },
+      series: [
+        {
+          data: data.efficiencyData
+        }
+      ]
+    });
+  }
+};
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    const data = props.chartData[timeRange.value];
+
+    const option = {
+        title: {
+            text: '',
+            show: false
+        },
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(33,56,77,1)',
+            borderColor: 'rgba(33,56,77,1)',
+            textStyle: {
+                color: '#fff',
+                fontSize: 14
+            }
+        },
+        legend: {
+            data: ['转换效率(%)'],
+            icon:'circle',
+            left: '5%',  // 放在左边
+            itemWidth: 8,  // 调小icon宽度
+            itemHeight: 8  // 调小icon高度
+        },
+        grid: {
+            top: '20%',
+            right: '4%',
+            bottom: '4%',
+            left: '6%',
+            containLabel: true
+        },
+        xAxis: {
+            data: data.xAxis,
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+                textStyle: {
+                    color: '#3E4954',
+                    fontSize: 12
+                }
+            },
+            axisTick: {
+                show: false
+            }
+        },
+        yAxis: {
+            type: 'value',
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+                formatter: '{value}%',
+                textStyle: {
+                    color: '#333',
+                    fontSize: 12
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#f0f0f0',
+                    type: 'dashed'
+                }
+            }
+        },
+        series: [
+            {
+                name: '转换效率(%)',
+                type: 'line',
+                smooth: true,
+                symbol: 'circle',
+                symbolSize: 8,
+                lineStyle: {
+                    width: 3,
+                    color: '#1890ff'
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [
+                            {
+                                offset: 0,
+                                color: 'rgba(24, 144, 255, 0.6)'
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(24, 144, 255, 0.1)'
+                            }
+                        ],
+                        false
+                    )
+                },
+                itemStyle: {
+                    color: '#1890ff', // 设置为实心圆
+                    borderWidth: 0 // 移除边框
+                },
+                data: data.efficiencyData
+            }
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-actions button {
+    background: none;
+    border: 1px solid #e0e0e0;
+    padding: 5px 12px;
+    border-radius: 4px;
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.2s ease;
+}
+
+.chart-actions button.active {
+    background-color: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.chart-content {
+    width: 100%;
+    height: calc(100% - 70px);
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/reportManager/components/itembox.vue b/src/views/pvSystem/reportManager/components/itembox.vue
new file mode 100644
index 0000000..77131cb
--- /dev/null
+++ b/src/views/pvSystem/reportManager/components/itembox.vue
@@ -0,0 +1,293 @@
+<template>
+  <div class="item-box">
+    <div class="item-info">
+      <div class="power-box">
+        <div class="power-info">
+          <div class="power-title">
+            {{ title || '平均效率' }}
+          </div>
+          <div class="power-amount">{{ value || '2,456.8' }} <span>{{ unit || 'KWh' }}</span></div>
+          <div class="power-growth">
+            <span class="growth-value">{{ growth || '+2.5%' }}</span>
+            <span class="growth-label">{{ growthLabel || '较昨日' }}</span>
+          </div>
+        </div>
+        <div class="power-icon" :style="{ backgroundColor: color }">
+          <el-icon>
+            <img :src="iconSrc" alt="">
+          </el-icon>
+        </div>
+      </div>
+    </div>
+    <div class="itemView">
+      <div class="chart-placeholder">
+        <div ref="chartRef" class="chart-wrapper" style="width: 100%; height: 100%;"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, onUnmounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+// Props定义
+const props = defineProps({
+  title: {
+    type: String,
+    default: '平均效率'
+  },
+  value: {
+    type: String,
+    default: '2,456.8'
+  },
+  unit: {
+    type: String,
+    default: 'KWh'
+  },
+  growth: {
+    type: String,
+    default: ''
+  },
+  growthLabel: {
+    type: String,
+    default: ''
+  },
+  power: {
+    type: Object,
+    default: () => ({})
+  },
+  iconSrc: {
+    type: String,
+    default: ''
+  },
+  color: {
+    type: String,
+    default: ''
+  },
+  chartData: {
+    type: Array,
+    default: () => []
+  },
+  chartType: {
+    type: String,
+    default: ''
+  }
+});
+
+// 柱状图相关
+const chartRef = ref(null);
+let chartInstance = null;
+
+// 初始化柱状图
+const initChart = () => {
+  if (!chartRef.value || chartInstance) return;
+  
+  // 创建图表实例
+  chartInstance = echarts.init(chartRef.value);
+  
+  // 配置项
+  const option = {
+    grid: {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0,
+    },
+    xAxis: {
+      type: 'category',
+      data: Array.from({length: props.chartData.length}, (_, i) => i + 1),
+      show: false // 不显示x轴
+    },
+    yAxis: {
+      type: 'value',
+      show: false // 不显示y轴
+    },
+    series: [{
+      data: props.chartData,
+      type: props.chartType,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+          {offset: 0, color: props.color},
+          {offset: 1, color: props.color + '80'}
+        ])
+      },
+      // 根据图表类型设置不同的配置
+      ...(props.chartType === 'bar' ? {
+        barWidth: '60%',
+        barGap: 0,
+        barCategoryGap: '20%'
+      } : props.chartType === 'line' ? {
+        smooth: true,
+        symbol: 'none', // 取消拐点显示
+        areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+              {offset: 0, color: props.color + '40'},
+              {offset: 1, color: props.color + '20'}
+            ])
+          }
+      } : {})
+    }],
+    tooltip: {
+      show: true,
+      trigger: 'axis',
+      formatter: function(params) {
+        return params[0].value + '%';
+      }
+    }
+  };
+  
+  // 设置配置项
+  chartInstance.setOption(option);
+};
+
+// 监听窗口大小变化，重绘图表
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+
+// 监听图表数据变化
+watch(() => props.chartData, () => {
+  if (chartInstance) {
+    chartInstance.setOption({
+      xAxis: {
+        data: Array.from({length: props.chartData.length}, (_, i) => i + 1)
+      },
+      series: [{
+        data: props.chartData
+      }]
+    });
+  }
+});
+
+// 监听图表类型和颜色变化
+watch([() => props.chartType, () => props.chartColor], () => {
+  if (chartInstance) {
+    initChart();
+  }
+});
+
+// 生命周期钩子
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+  window.removeEventListener('resize', handleResize);
+});
+</script>
+<style scoped lang="scss">
+/* itemBox样式 */
+.item-box {
+    background: white;
+    border-radius: 12px;
+    padding: 15px 25px  0 25px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.item-info {
+    margin-bottom: 16px;
+    position: relative;
+}
+
+.power-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.power-info {
+    flex: 1;
+}
+
+.power-title {
+    font-size: 16px;
+    color: #999;
+    margin-bottom: 8px;
+}
+
+.power-amount {
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.power-amount span {
+    font-size: 16px;
+    font-weight: normal;
+    color: #666;
+    margin-left: 4px;
+}
+
+.power-growth {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.power-icon {
+    width: 33px;
+    height: 55px;
+    opacity: 1;
+    border-radius: 7px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.growth-value {
+    font-size: 14px;
+    color: #13C2C2;
+}
+
+.growth-label {
+    font-size: 12px;
+    color: #999;
+}
+
+.itemView {
+    position: relative;
+    height: 80px;
+}
+
+.chart-placeholder {
+    height: 100%;
+}
+
+/* echarts图表容器样式 */
+.chart-wrapper {
+    width: 100%;
+    height: 100%;
+}
+
+/* 确保在小屏幕下也能良好显示 */
+@media screen and (max-width: 1500px) {
+    .item-box {
+        padding: 12px 20px;
+    }
+    
+    .power-title {
+        font-size: 14px;
+    }
+    
+    .power-amount {
+        font-size: 20px;
+    }
+    
+    .power-amount span {
+        font-size: 14px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/reportManager/components/qushiBar.vue b/src/views/pvSystem/reportManager/components/qushiBar.vue
new file mode 100644
index 0000000..599eaeb
--- /dev/null
+++ b/src/views/pvSystem/reportManager/components/qushiBar.vue
@@ -0,0 +1,251 @@
+<template>
+    <div class="chart-container">
+        <div class="chart-header">
+            <h2>效率分析</h2>
+            <div class="chart-actions">
+                <button :class="{ active: timeRange === 'hour' }" @click="changeTimeRange('hour')">小时</button>
+                <button :class="{ active: timeRange === 'day' }" @click="changeTimeRange('day')">每天</button>
+                <button :class="{ active: timeRange === 'week' }" @click="changeTimeRange('week')">每周</button>
+            </div>
+        </div>
+        <!--图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 当前时间范围状态
+const timeRange = ref('hour'); // 默认显示小时数据
+
+// 定义props
+const props = defineProps({
+  chartData: {
+    type: Object,
+    default: () => ({
+      hour: {
+        xAxis: [],
+        efficiencyData: []
+      },
+      day: {
+        xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        efficiencyData: []
+      },
+      week: {
+        xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
+        efficiencyData: []
+      }
+    })
+  }
+});
+
+// 切换时间范围的函数
+const changeTimeRange = (range) => {
+    timeRange.value = range;
+    updateChartData();
+};
+
+// 更新图表数据的函数
+const updateChartData = () => {
+    if (chartInstance) {
+        const data = props.chartData[timeRange.value];
+        chartInstance.setOption({
+            xAxis: {
+                data: data.xAxis
+            },
+            series: [
+                {
+                    data: data.efficiencyData
+                }
+            ]
+        });
+    }
+};
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    const data = props.chartData[timeRange.value];
+
+    const option = {
+        title: {
+            text: '',
+            show: false
+        },
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(33,56,77,1)',
+            borderColor: 'rgba(33,56,77,1)',
+            textStyle: {
+                color: '#fff',
+                fontSize: 14
+            }
+        },
+        grid: {
+            top: '20%',
+            right: '4%',
+            bottom: '4%',
+            left: '6%',
+            containLabel: true
+        },
+        xAxis: {
+            data: data.xAxis,
+            type: 'category',
+            axisTick: {
+                show: false
+            }
+        },
+        yAxis: {
+            type: 'value',
+            max: 100,
+            interval: 10,
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#f0f0f0',
+                    type: 'dashed'
+                }
+            }
+        },
+        series: [
+            {
+                name: '转换效率(%)',
+                type: 'bar',
+                data: data.efficiencyData,
+                showBackground: true,
+                itemStyle: {
+                    color: 'rgba(63, 140, 255, 1)',
+                    borderRadius: [6, 6, 0, 0] // 为顶部两个角设置圆角
+                },
+                barWidth: 50,
+                backgroundStyle: {
+                    color: 'rgba(24, 179, 245, 0.1)'
+                },
+            }
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-actions button {
+    background: none;
+    border: 1px solid #e0e0e0;
+    padding: 5px 12px;
+    border-radius: 4px;
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.2s ease;
+}
+
+.chart-actions button.active {
+    background-color: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.chart-content {
+    width: 100%;
+    height: calc(100% - 70px);
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/reportManager/components/qushiLine.vue b/src/views/pvSystem/reportManager/components/qushiLine.vue
new file mode 100644
index 0000000..fd3623b
--- /dev/null
+++ b/src/views/pvSystem/reportManager/components/qushiLine.vue
@@ -0,0 +1,361 @@
+<template>
+    <div class="chart-container">
+        <div class="chart-header">
+            <h2>组件温度（℃）</h2>
+            <div class="chart-actions">
+                <button :class="{ active: timeRange === 'hour' }" @click="changeTimeRange('hour')">小时</button>
+                <button :class="{ active: timeRange === 'day' }" @click="changeTimeRange('day')">每天</button>
+                <button :class="{ active: timeRange === 'week' }" @click="changeTimeRange('week')">每周</button>
+            </div>
+        </div>
+        <!--图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 定义颜色常量
+const ACTUAL_COLOR = '#FF8D1A';
+const THEORETICAL_COLOR = '#FF5733';
+
+// 当前时间范围状态
+const timeRange = ref('hour'); // 默认显示小时数据
+
+// 定义props
+const props = defineProps({
+  chartData: {
+    type: Object,
+    default: () => ({
+      hour: {
+        xAxis: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
+        componentTemp: [22, 30, 38, 28, 44, 32, 42, 25, 35],
+        ambientTemp: [18, 26, 32, 24, 40, 28, 36, 22, 30]
+      },
+      day: {
+        xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        componentTemp: [25, 30, 35, 32, 38, 28, 30],
+        ambientTemp: [20, 24, 29, 27, 32, 25, 26]
+      },
+      week: {
+        xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
+        componentTemp: [28, 32, 36, 33, 30, 35],
+        ambientTemp: [24, 27, 30, 28, 26, 29]
+      }
+    })
+  }
+});
+
+// 十六进制颜色转rgba工具函数
+const hexToRgba = (hex, opacity) => {
+  // 移除#号
+  hex = hex.replace('#', '');
+  
+  // 解析RGB值
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+
+// 切换时间范围的函数
+const changeTimeRange = (range) => {
+  timeRange.value = range;
+  updateChartData();
+};
+
+// 更新图表数据的函数
+const updateChartData = () => {
+  if (chartInstance) {
+    const data = props.chartData[timeRange.value];
+    chartInstance.setOption({
+      xAxis: {
+        data: data.xAxis
+      },
+      series: [
+        {
+          data: data.componentTemp
+        },
+        {
+          data: data.ambientTemp
+        }
+      ]
+    });
+  }
+};
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    const data = props.chartData[timeRange.value];
+
+    const option = {
+        title: {
+            text: '', // 标题已移至HTML中
+            show: false
+        },
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(33,56,77,1)',
+            borderColor: 'rgba(33,56,77,1)',
+            textStyle: {
+                color: '#fff',
+                fontSize: 14
+            }
+        },
+        legend: {
+            left: 'center',
+            top: 4,
+            itemWidth: 10,
+            itemHeight: 10,
+            itemGap: 25,
+            icon: 'stack',
+            data: ['组件温度', '逆变器温度']
+        },
+        grid: {
+            top: '20%',
+            right: '4%',
+            bottom: '4%',
+            left: '6%',
+            containLabel: true
+        },
+        xAxis: {
+            data: data.xAxis,
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+                textStyle: {
+                    color: '#3E4954',
+                    fontSize: 12
+                }
+            },
+            axisTick: {
+                show: false // 去除刻度线
+            },
+        },
+        yAxis: 
+            {
+                type: 'value',
+                min: 0,
+                max: 50,
+                axisLabel: {
+                    formatter: '{value} ℃',
+                    textStyle: {
+                        color: '#3E4954',
+                        fontSize: 12
+                    }
+                },
+                axisTick: {
+                    show: false // 去除刻度线
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#f0f0f0',
+                        type: 'dashed'
+                    }
+                }
+            },
+        series: [
+            {
+                name: '组件温度',
+                type: 'line',
+                 smooth: true,
+                showSymbol: false, // 取消点显示
+                lineStyle: {
+                    width: 2,       // 线条宽度，单位是 px
+                    color: ACTUAL_COLOR
+                },
+                // 填充颜色设置
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [
+                            {
+                                offset: 0,
+                                color: hexToRgba(ACTUAL_COLOR, 0.4) // 使用ACTUAL_COLOR并设置透明度
+                            },
+                            {
+                                offset: 0.9,
+                                color: hexToRgba(ACTUAL_COLOR, 0) // 使用ACTUAL_COLOR并设置透明度为0
+                            }
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                // 设置拐点颜色以及边框
+                itemStyle: {
+                    color: ACTUAL_COLOR
+                },
+                data: data.componentTemp
+            },
+            {
+                name: '逆变器温度',
+                type: 'line',
+                 smooth: true,
+                showSymbol: false, // 取消点显示
+                lineStyle: {
+                    width: 2,       // 线条宽度，单位是 px
+                    color: THEORETICAL_COLOR
+                },
+                // 填充颜色设置
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [
+                            {
+                                offset: 0,
+                                color: hexToRgba(THEORETICAL_COLOR, 0.4) // 使用THEORETICAL_COLOR并设置透明度
+                            },
+                            {
+                                offset: 0.9,
+                                color: hexToRgba(THEORETICAL_COLOR, 0) // 使用THEORETICAL_COLOR并设置透明度为0
+                            }
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                itemStyle: {
+                    color: THEORETICAL_COLOR
+                },
+                data: data.ambientTemp
+            }
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-actions button {
+    background: none;
+    border: 1px solid #e0e0e0;
+    padding: 5px 12px;
+    border-radius: 4px;
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.2s ease;
+}
+
+.chart-actions button.active {
+    background-color: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.chart-content {
+    width: 100%;
+    height: calc(100% - 54px);
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>
diff --git a/src/views/pvSystem/reportManager/components/statusPie.vue b/src/views/pvSystem/reportManager/components/statusPie.vue
new file mode 100644
index 0000000..72dfd6f
--- /dev/null
+++ b/src/views/pvSystem/reportManager/components/statusPie.vue
@@ -0,0 +1,264 @@
+<template>
+  <!-- 图表容器 -->
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2>设备状态分布</h2>
+      <div class="chart-actions">
+        <img src="@/assets/demo/more.png" alt="">
+      </div>
+    </div>
+    <!-- 使用ref引用以便在JS中获取该DOM元素来渲染图表 -->
+    <div ref="chartRef" class="chart-content" />
+  </div>
+</template>
+<script setup>
+import * as echarts from "echarts";
+// 导入Vue的ref和onMounted响应式API和生命周期钩子
+import { ref, onMounted } from "vue";
+
+// 创建图表容器的ref引用，用于获取DOM元素
+const chartRef = ref(null);
+
+// 定义props
+const props = defineProps({
+  chartData: {
+    type: Object,
+    default: () => ({
+      "正常运行": { value: 40, color: '#43CF7C' },
+      "轻微异常": { value: 30, color: '#FFC300' },
+      "故障": { value: 20, color: '#FF5733' },
+      "维护中": { value: 10, color: '#2A82E4' }
+    })
+  }
+});
+
+// 组件挂载后执行的初始化逻辑
+onMounted(() => {
+  // 确保DOM元素已渲染完成
+  if (chartRef.value) {
+    // 使用ECharts初始化图表实例
+    var myChart3 = echarts.init(chartRef.value);
+
+    // 使用从props获取的数据
+    const statusData = props.chartData;
+
+    // 计算数据总和
+    const totalSum = Object.values(statusData).reduce((sum, item) => sum + item.value, 0);
+
+    // 定义空白占位区域的样式配置
+    const placeItemStyle = {
+      label: { show: false }, // 不显示标签
+      labelLine: { show: false }, // 不显示标签线
+      itemStyle: { color: "#cbccd0" }, // 设置占位区域的颜色为灰色
+      emphasis: { // 鼠标悬停时的样式
+        label: { show: false },
+        labelLine: { show: false }
+      }
+    };
+
+    // 设置图表配置项
+    myChart3.setOption({
+      // 提示框配置（默认显示）
+      tooltip: {
+        formatter: function (params) {
+          // 计算当前数据占总和的百分比
+          const percentage = ((params.value / totalSum) * 100).toFixed(1);
+          return `${params.name}: ${percentage}%`;
+        }
+      },
+      // 图例配置
+    legend: {
+      top: 'middle',
+      orient: 'vertical',
+      right:'20%', // 调整图例位置，使其更靠近左侧
+        data: Object.keys(statusData), // 使用props数据的键作为图例数据项
+      // 图例格式化函数，用于自定义图例的显示内容
+      formatter: function (name) {
+        // 计算当前状态占总和的百分比
+        const percentage = ((statusData[name].value / totalSum) * 100).toFixed(1);
+        // 返回格式化后的图例文本（状态名称+百分比）
+        return `${name} ${percentage}%`;
+      }
+    },
+      // 图表系列配置（多个环形图组成的嵌套饼图）
+      series: [
+        // 外层环：正常运行状态（绿色）
+        {
+          name: "设备状态", // 系列名称
+          label: {
+            show: false
+          },
+          type: "pie", // 图表类型为饼图
+          center: ['30%', '50%'], // 饼图中心位置，往左移
+          radius: ["55%", "60%"], // 设置圆环的内半径和外半径（占容器百分比）
+          zlevel: 1, // 设置图层级别，值越大越在顶层
+          hoverAnimation: false, // 禁用鼠标悬停动画效果
+          data: [
+            { // 正常运行部分
+              value: statusData["正常运行"].value, // 使用实际数值
+              name: "正常运行", // 名称
+              itemStyle: { color: '#43CF7C' } // 设置绿色
+            },
+            { // 空白占位部分（使圆环显示为圆弧）
+              value: totalSum - statusData["正常运行"].value, // 计算值，使总百分比为总和
+              name: "", // 无名称
+              ...placeItemStyle // 应用占位区域样式
+            }
+          ]
+        },
+        // 第二环：轻微异常状态（黄色）
+        {
+          name: "设备状态",
+          label: {
+            show: false
+          },
+          type: "pie",
+          center: ['30%', '50%'], // 饼图中心位置，往左移
+          radius: ["45%", "50%"], // 比外层环稍小
+          zlevel: 2,
+          hoverAnimation: false,
+          data: [
+            { // 轻微异常部分
+              value: statusData["轻微异常"].value,
+              name: "轻微异常",
+              itemStyle: { color: '#FFC300' } // 设置黄色
+            },
+            { // 空白占位部分
+              value: totalSum - statusData["轻微异常"].value,
+              name: "",
+              ...placeItemStyle
+            }
+          ]
+        },
+        // 第三环：故障状态（红色）
+        {
+          name: "设备状态",
+          label: {
+            show: false
+          },
+          type: "pie",
+          center: ['30%', '50%'], // 饼图中心位置，往左移
+          radius: ["35%", "40%"], // 更小的环
+          zlevel: 3,
+          hoverAnimation: false,
+          data: [
+            { // 故障部分
+              value: statusData["故障"].value,
+              name: "故障",
+              itemStyle: { color: '#FF5733' } // 设置红色
+            },
+            { // 空白占位部分
+              value: totalSum - statusData["故障"].value,
+              name: "",
+              ...placeItemStyle
+            }
+          ]
+        },
+        // 内层环：维护中状态（蓝色）
+        {
+          name: "设备状态",
+          label: {
+            show: false
+          },
+          type: "pie",
+          center: ['30%', '50%'], // 饼图中心位置，往左移
+          radius: ["25%", "30%"], // 最内层环
+          zlevel: 4,
+          hoverAnimation: false,
+          data: [
+            { // 维护中部分
+              value: statusData["维护中"].value,
+              name: "维护中",
+              itemStyle: { color: '#2A82E4' } // 设置蓝色
+            },
+            { // 空白占位部分
+              value: totalSum - statusData["维护中"].value,
+              name: "",
+              ...placeItemStyle
+            }
+          ]
+        }
+      ]
+    });
+
+    // 响应窗口大小变化
+    const handleResize = () => {
+      if (myChart3) {
+        myChart3.resize();
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      if (myChart3) {
+        myChart3.dispose();
+      }
+    };
+  }
+});
+</script>
+
+
+<style scoped>
+/* 设置图表容器的尺寸 */
+.chart-container {
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  height: 400px;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+}
+
+.chart-actions img {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+}
+
+.chart-content {
+  width: 100%;
+  height: calc(100% - 70px);
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+  .chart-container {
+    height: 350px;
+  }
+
+  .chart-content {
+    height: calc(100% - 70px);
+  }
+}
+
+@media (max-width: 480px) {
+  .chart-container {
+    height: 300px;
+  }
+
+  .chart-content {
+    height: calc(100% - 70px);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pvSystem/reportManager/index.vue b/src/views/pvSystem/reportManager/index.vue
new file mode 100644
index 0000000..cb09f5e
--- /dev/null
+++ b/src/views/pvSystem/reportManager/index.vue
@@ -0,0 +1,268 @@
+<template>
+    <div class="model">
+        <!-- 标题栏 -->
+        <el-row :gutter="24" class="title-row">
+            <el-col :span="12">
+                <TitleComponent title="运行参数报表" subtitle="查看和分析光伏系统的各项运行参数的日、月、年报表数据" />
+            </el-col>
+            <!-- 表单控件区域：使用flex布局确保同排显示 -->
+            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
+                <div class="form-controls">
+                    <div class="control-item">
+                        <el-select placeholder="请选择时间" style="width: 100%;">
+                            <el-option label="今天" value="all"></el-option>
+                        </el-select>
+                    </div>
+                    <div class="control-item">
+                        <el-select placeholder="请选择报表" style="width: 100%;">
+                            <el-option label="日报表" value="all"></el-option>
+                        </el-select>
+                    </div>
+                    <div class="control-item date-range">
+                        <el-date-picker v-model="value1" type="daterange" range-separator="-" start-placeholder="开始"
+                            end-placeholder="结束" style="width: 100%;" />
+                    </div>
+                    <div class="control-item">
+                        <el-button @click="refreshData">
+                            刷新数据
+                            <el-icon class="el-icon--right">
+                                <Refresh />
+                            </el-icon>
+                        </el-button>
+                    </div>
+                    <div class="control-item">
+                        <el-button type="primary">
+                            导出数据
+                            <el-icon class="el-icon--right">
+                                <UploadFilled />
+                            </el-icon>
+                        </el-button>
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+        <!-- 数据展示-->
+        <el-row :gutter="24">
+            <el-col :span="6">
+                <itembox title="总发电量" value="2,456.8" unit="KWh" growth="+2.5%" growthLabel="较昨日" color="#186DF5"
+                    chartType="bar" power="" icon-src="/src/assets/demo/shandian.png"
+                    :chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
+            </el-col>
+            <el-col :span="6">
+                <itembox title="平均效率" value="18.7" unit="%" growth="+2.5%" growthLabel="较昨日" color="#00B87A"
+                    chartType="line" icon-src="/src/assets/demo/huojian.png"
+                    :chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
+            </el-col>
+            <el-col :span="6">
+                <itembox title="设备温度" value="43.5" unit="℃" growth="+2.5%" growthLabel="较昨日" color="#FFC300"
+                    chartType="line" icon-src="/src/assets/demo/wendu.png"
+                    :chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
+            </el-col>
+            <el-col :span="6">
+                <itembox title="系统可用性" value="18.7" unit="%" growth="+2.5%" growthLabel="较昨日" color="#7948EA"
+                    chartType="line" icon-src="/src/assets/demo/use.png"
+                    :chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
+            </el-col>
+        </el-row>
+        <!-- 第一行图表 -->
+        <el-row :gutter="24">
+            <el-col :span="17">
+                <qushiBar :chartData="timeRangeData"></qushiBar>
+            </el-col>
+            <el-col :span="7">
+                <statusPie :chartData="statusPieData"></statusPie>
+            </el-col>
+        </el-row>
+        <!-- 第二行图表 -->
+        <el-row :gutter="24">
+            <el-col :span="17">
+                <qushiLine :chartData="temperatureData"></qushiLine>
+            </el-col>
+            <el-col :span="7">
+                <fenxiLine></fenxiLine>
+            </el-col>
+        </el-row>
+        <!-- 详情图表 -->
+        <el-row :gutter="24">
+           <el-col :span="24">
+              <detailForm :tableData="tableData"></detailForm>
+           </el-col>
+        </el-row>
+    </div>
+</template>
+<script setup>// import TitleComponent from '@/views/demo/components/TitleComponent.vue';
+import TitleComponent from '@/components/TitleComponent/index.vue';
+import qushiBar from '@/views/pvSystem/reportManager/components/qushiBar.vue';
+import qushiLine from '@/views/pvSystem/reportManager/components/qushiLine.vue';
+import itembox from '@/views/pvSystem/reportManager/components/itembox.vue';
+import fenxiLine from '@/views/pvSystem/reportManager/components/fenxiLine.vue';
+import statusPie from '@/views/pvSystem/reportManager/components/statusPie.vue';
+import detailForm from '@/views/pvSystem/reportManager/components/detailForm.vue';
+import { ref } from 'vue';
+
+// 日期范围选择器数据绑定
+const value1 = ref([]);
+
+// mock数据定义
+const timeRangeData = ref({
+  hour: {
+    xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
+    efficiencyData: [7, 10, 14, 17, 18, 19, 20]
+  },
+  day: {
+    xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    efficiencyData: [12, 15, 17, 14, 18, 16, 19]
+  },
+  week: {
+    xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
+    efficiencyData: [10, 13, 16, 14, 18, 17]
+  }
+});
+
+const temperatureData = ref({
+  hour: {
+    xAxis: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
+    componentTemp: [22, 30, 38, 28, 44, 32, 42, 25, 35],
+    ambientTemp: [18, 26, 32, 24, 40, 28, 36, 22, 30]
+  },
+  day: {
+    xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    componentTemp: [25, 30, 35, 32, 38, 28, 30],
+    ambientTemp: [20, 24, 29, 27, 32, 25, 26]
+  },
+  week: {
+    xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
+    componentTemp: [28, 32, 36, 33, 30, 35],
+    ambientTemp: [24, 27, 30, 28, 26, 29]
+  }
+});
+
+const statusPieData = ref({
+  "正常运行": { value: 40, color: '#43CF7C' },
+  "轻微异常": { value: 30, color: '#FFC300' },
+  "故障": { value: 20, color: '#FF5733' },
+  "维护中": { value: 10, color: '#2A82E4' }
+});
+
+const fenxiLineData = ref({
+  hour: {
+    xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
+    efficiencyData: [7, 10, 14, 17, 18, 19, 20]
+  },
+  day: {
+    xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    efficiencyData: [12, 15, 17, 14, 18, 16, 19]
+  },
+  week: {
+    xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
+    efficiencyData: [10, 13, 16, 14, 18, 17]
+  }
+});
+
+const tableData = ref([
+  { time: '00:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.5, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
+  { time: '08:00', irradiance: 12.5, powerGeneration: 17.2, efficiency: 28.1, moduleTemperature: 26.3, inverterTemperature: 20.3, status: '正常' },
+  { time: '12:00', irradiance: 98.0, powerGeneration: 13.1, efficiency: 46.2, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '正常' },
+  { time: '15:00', irradiance: 65, powerGeneration: 16.8, efficiency: 31.1, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
+  { time: '20:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.5, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
+  { time: '01:00', irradiance: 0, powerGeneration: 0.0, efficiency: 22.8, moduleTemperature: 21.5, inverterTemperature: 19.8, status: '停机' },
+  { time: '02:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.1, moduleTemperature: 22.1, inverterTemperature: 20.5, status: '停机' },
+  { time: '03:00', irradiance: 0, powerGeneration: 0.0, efficiency: 22.9, moduleTemperature: 21.8, inverterTemperature: 19.9, status: '停机' },
+  { time: '04:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.0, moduleTemperature: 22.0, inverterTemperature: 20.2, status: '停机' },
+  { time: '05:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.2, moduleTemperature: 22.3, inverterTemperature: 20.7, status: '停机' },
+  { time: '06:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.5, moduleTemperature: 22.6, inverterTemperature: 21.0, status: '停机' },
+  { time: '07:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.8, moduleTemperature: 22.9, inverterTemperature: 21.2, status: '停机' },
+  { time: '09:00', irradiance: 35.2, powerGeneration: 18.5, efficiency: 30.2, moduleTemperature: 28.5, inverterTemperature: 22.6, status: '正常' },
+  { time: '10:00', irradiance: 65.8, powerGeneration: 15.3, efficiency: 35.6, moduleTemperature: 32.8, inverterTemperature: 24.5, status: '正常' },
+  { time: '11:00', irradiance: 82.5, powerGeneration: 14.2, efficiency: 42.3, moduleTemperature: 38.2, inverterTemperature: 28.3, status: '正常' },
+  { time: '13:00', irradiance: 95.3, powerGeneration: 13.8, efficiency: 45.8, moduleTemperature: 42.6, inverterTemperature: 31.5, status: '正常' },
+  { time: '14:00', irradiance: 88.7, powerGeneration: 14.1, efficiency: 44.2, moduleTemperature: 40.8, inverterTemperature: 30.2, status: '正常' },
+  { time: '16:00', irradiance: 72.5, powerGeneration: 15.8, efficiency: 38.6, moduleTemperature: 36.4, inverterTemperature: 27.1, status: '正常' },
+  { time: '17:00', irradiance: 58.2, powerGeneration: 16.3, efficiency: 34.9, moduleTemperature: 33.2, inverterTemperature: 25.3, status: '正常' },
+  { time: '18:00', irradiance: 42.8, powerGeneration: 17.5, efficiency: 31.4, moduleTemperature: 30.1, inverterTemperature: 23.5, status: '正常' },
+  { time: '19:00', irradiance: 25.3, powerGeneration: 18.2, efficiency: 29.1, moduleTemperature: 27.6, inverterTemperature: 21.8, status: '正常' },
+  { time: '21:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.8, moduleTemperature: 23.8, inverterTemperature: 21.5, status: '停机' },
+  { time: '22:00', irradiance: 0, powerGeneration: 0.0, efficiency: 25.1, moduleTemperature: 24.1, inverterTemperature: 21.8, status: '停机' },
+  { time: '23:00', irradiance: 0, powerGeneration: 0.0, efficiency: 25.3, moduleTemperature: 24.3, inverterTemperature: 22.0, status: '停机' }
+]);
+
+// 模拟API调用函数
+const fetchData = async () => {
+  // 模拟网络延迟
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        timeRangeData: timeRangeData.value,
+        temperatureData: temperatureData.value,
+        statusPieData: statusPieData.value,
+        fenxiLineData: fenxiLineData.value,
+        tableData: tableData.value
+      });
+    }, 500);
+  });
+};
+
+// 初始化时获取数据
+fetchData().then(data => {
+  // 这里可以根据需要更新数据状态
+  console.log('模拟接口数据获取成功:', data);
+});
+
+// 刷新数据函数
+const refreshData = async () => {
+  const newData = await fetchData();
+  // 更新数据状态
+  timeRangeData.value = newData.timeRangeData;
+  temperatureData.value = newData.temperatureData;
+  statusPieData.value = newData.statusPieData;
+  fenxiLineData.value = newData.fenxiLineData;
+  tableData.value = newData.tableData;
+};
+</script>
+<style scoped lang="scss">
+.model {
+    padding: 20px 15px;
+    background-color: rgba(242, 248, 252, 1);
+}
+
+.title-row {
+    margin-bottom: 20px;
+}
+
+.el-row {
+    margin-bottom: 20px;
+}
+
+.el-row:last-child {
+    margin-bottom: 0;
+}
+
+.form-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    flex-wrap: nowrap;
+}
+
+.control-item {
+    flex: 0 0 auto;
+    width: 130px;
+}
+
+.control-item.date-range {
+    flex: 0 0 auto;
+    width: 260px;
+}
+
+/* 确保按钮在小尺寸时也能正常显示 */
+.control-item .el-button {
+    white-space: nowrap;
+}
+
+/* 优化表单控件的宽度和间距 */
+.el-select,
+.el-date-picker {
+    font-size: 14px;
+}
+</style>
\ No newline at end of file