diff --git a/.env.development b/.env.development
index 77653ad..9289418 100644
--- a/.env.development
+++ b/.env.development
@@ -9,7 +9,7 @@ VITE_APP_ENV = 'development'
 # 李陈杰 209
 # VITE_APP_BASE_API = 'http://192.168.110.209:8899'
 # 李陈杰 209
- # VITE_APP_BASE_API = 'http://192.168.110.209:8899'
+#  VITE_APP_BASE_API = 'http://192.168.110.209:8899'
 # 曾涛
 # VITE_APP_BASE_API = 'http://192.168.110.149:8899'
 # 罗成
diff --git a/public/xx.xlsx b/public/xx.xlsx
index fb25b99..95009db 100644
Binary files a/public/xx.xlsx and b/public/xx.xlsx differ
diff --git a/src/views/demo3/bar1.vue b/src/views/demo3/bar1.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/demo3/components/box1/qushi.vue b/src/views/demo3/components/box1/qushi.vue
new file mode 100644
index 0000000..2407a13
--- /dev/null
+++ b/src/views/demo3/components/box1/qushi.vue
@@ -0,0 +1,351 @@
+<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 } from 'vue';
+import * as echarts from 'echarts';
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 时间范围状态
+const timeRange = ref('day');
+// 图表实例
+let chartInstance = null;
+
+// 定义颜色常量
+const ACTUAL_COLOR = '#2A82E4';
+const THEORETICAL_COLOR = '#67C23A';
+
+// 根据时间范围返回对应的数据
+const getChartData = () => {
+    if (timeRange.value === 'day') {
+        return {
+            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]
+        };
+    } else if (timeRange.value === 'week') {
+        return {
+            xAxis: ['第1周', '第2周', '第3周', '第4周'],
+            actualData: [280, 360, 320, 400],
+            theoreticalData: [300, 400, 350, 450]
+        };
+    } else {
+        // 月数据
+        return {
+            xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
+            actualData: [1250, 1420, 1380, 1650, 1520, 1780],
+            theoreticalData: [1350, 1500, 1450, 1700, 1600, 1850]
+        };
+    }
+};
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    const data = getChartData();
+
+    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: '25%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: data.xAxis,
+            axisLine: {
+                lineStyle: {
+                    color: '#dcdfe6'
+                }
+            },
+            axisLabel: {
+                color: '#909399',
+                fontSize: 12
+            },
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            splitLine: {
+                show: true,  //显示分割线
+                lineStyle: {
+                    type: 'dashed'  // 设置分割线为虚线
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                lineStyle: {
+                    color: '#dcdfe6'
+                }
+            },
+            axisLabel: {
+                color: '#909399',
+                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: 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;
+}
+
+@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/demo3/components/box1/statusBox.vue b/src/views/demo3/components/box1/statusBox.vue
new file mode 100644
index 0000000..d0025e4
--- /dev/null
+++ b/src/views/demo3/components/box1/statusBox.vue
@@ -0,0 +1,225 @@
+<template>
+    <div class="status-box">
+        <!-- 总发电量 -->
+        <div class="status-card electricity">
+            <div class="card-left">
+                <div class="card-title">总发电量</div>
+                <div class="card-value">2,456.8KWh</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>
+                    8.2% 较上周
+                </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">18.7%</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>
+                    0.3% 较上周
+                </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">42.3°C</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>
+                    2.1°C 较上周
+                </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">865 W/m²</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>
+                    12.5% 较上周
+                </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">
+// 这里可以添加组件逻辑
+</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/demo3/components/box2/bar.vue b/src/views/demo3/components/box2/bar.vue
new file mode 100644
index 0000000..2d88379
--- /dev/null
+++ b/src/views/demo3/components/box2/bar.vue
@@ -0,0 +1,205 @@
+<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 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 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: ['上周', '本周'],
+      axisPointer: {
+            type: 'shadow'
+         },
+          axisLabel: {
+            textStyle: {
+               color: '#333',  
+               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: [4899, 5200],
+        itemStyle: {
+          color: '#1a77dd',
+          borderRadius: [8, 8, 0, 0] // 设置圆角，上左、上右、下右、下左
+        },
+        barWidth: 60
+      },
+      {
+        name: '预测发电量',
+        type: 'bar',
+        data: [5000, 5300],
+        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: 16px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 8px;
+}
+
+.chart-header {
+  margin-bottom: 16px;
+}
+
+.chart-header h2 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.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/demo3/components/box2/pie.vue b/src/views/demo3/components/box2/pie.vue
new file mode 100644
index 0000000..bc7a297
--- /dev/null
+++ b/src/views/demo3/components/box2/pie.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="performance-pie-container">
+    <h2>性能比分析</h2>
+    <p>当前系统性能比为82.5%，高于同行水平（78%），表明系统运行状态良好。</p>
+    <div id="performancePieChart" ref="chartRef"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+const chartRef = ref<HTMLElement>();
+let chartInstance: echarts.ECharts | null = null;
+
+const initChart = () => {
+  if (chartRef.value) {
+    chartInstance = echarts.init(chartRef.value);
+    
+    const option = {
+      series: [
+        {
+          type: 'gauge',
+          startAngle: 180,
+          endAngle: 0,
+          min: 0,
+          max: 100,
+          splitNumber: 10,
+          radius: '100%',
+          axisLine: {
+            lineStyle: {
+              width: 20,
+              color: [
+                [0.78, '#2f4554'],  // 同行水平78%
+                [0.825, '#1890ff'], // 当前性能比82.5%
+                [1, '#52c41a']
+              ]
+            }
+          },
+          pointer: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          detail: {
+            valueAnimation: true,
+            formatter: '{value}%',
+            color: '#000',
+            fontSize: 30,
+            fontWeight: 'bold',
+            offsetCenter: [0, '-5%']
+          },
+          data: [
+            {
+              value: 82.5,
+              name: '性能比'
+            }
+          ],
+          // 添加内圆环效果
+          anchor: {
+            show: true,
+            showAbove: true,
+            size: 10,
+            itemStyle: {
+              borderWidth: 10,
+              borderColor: '#fff'
+            }
+          }
+        }
+      ]
+    };
+
+    chartInstance.setOption(option);
+  }
+};
+
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+});
+</script>
+
+<style scoped>
+.performance-pie-container {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.performance-pie-container h2 {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.performance-pie-container p {
+  margin: 0 0 12px 0;
+  font-size: 12px;
+  color: #666;
+  line-height: 1.5;
+}
+
+#performancePieChart {
+  width: 100%;
+  height: calc(100% - 60px);
+  min-height: 200px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/demo3/components/line1.vue b/src/views/demo3/components/line1.vue
new file mode 100644
index 0000000..c8a3a69
--- /dev/null
+++ b/src/views/demo3/components/line1.vue
@@ -0,0 +1,316 @@
+<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';
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 定义颜色常量
+const ACTUAL_COLOR = '#31FBFB';
+const THEORETICAL_COLOR = '#5158FA';
+
+
+const dataX = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'];
+const y = [40, 58, 40, 44, 61, 58, 77, 60, 78, 53, 70, 53];
+const y1 = [50, 48, 44, 62, 41, 78, 57, 70, 68, 93, 60, 73];
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    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',
+            textStyle: {
+                color: '#E1E5E6'
+            }
+        },
+        grid: {
+            top: '30%',
+            right: '4%',
+            bottom: '4%',
+            left: '6%',
+            containLabel: true
+        },
+        xAxis: {
+            data: dataX,
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+                textStyle: {
+                    color: '#B5C5D4',
+                    fontSize: 12
+                }
+            },
+            axisTick: {
+                show: false // 去除刻度线
+            },
+        },
+        yAxis: [
+            {
+                name: '逆变器输出:KW',
+                position: 'left',
+                type: 'value',
+                axisLabel: {
+                    textStyle: {
+                        color: '#B5C5D4',
+                        fontSize: 12
+                    }
+                },
+                axisTick: {
+                    show: false // 去除刻度线
+                },
+                splitLine: {
+                    show: false,// y轴分割线
+                }
+            },
+            {
+                name: '汇流箱电流',
+                position: 'right',
+                type: 'value',
+                axisLabel: {
+                    textStyle: {
+                        color: '#B5C5D4',
+                        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: 'rgba(253, 190, 93,.4)' // 渐变色的起始颜色
+                            },
+                            {
+                                offset: 0.9,
+                                color: 'rgba(253, 190, 93,0)' // 渐变线的结束颜色
+                            }
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                // 拐点
+                showSymbol: true,
+                symbolSize: 10,
+                // 设置拐点颜色以及边框
+                itemStyle: {
+                    color: 'rgba(253, 190, 93, 1)'
+                },
+                data: y1
+            },
+            {
+                name: '进园',
+                smooth: true,
+                type: 'line',
+                lineStyle: {
+                    width: 4       // 线条宽度，单位是 px
+                },
+                // 填充颜色设置
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [
+                            {
+                                offset: 0,
+                                color: 'rgba(26, 119, 221,.4)' // 渐变色的起始颜色
+                            },
+                            {
+                                offset: 0.9,
+                                color: 'rgba(26, 119, 221,0)' // 渐变线的结束颜色
+                            }
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                // 拐点
+                showSymbol: true,
+                symbolSize: 10,
+                // 设置拐点颜色以及边框
+                itemStyle: {
+                    color: 'rgba(26, 119, 221, 1)'
+                },
+                data: y
+            }
+        ]
+    };
+
+    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;
+}
+
+@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/demo3/components/line2.vue b/src/views/demo3/components/line2.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/demo3/index.vue b/src/views/demo3/index.vue
new file mode 100644
index 0000000..c584677
--- /dev/null
+++ b/src/views/demo3/index.vue
@@ -0,0 +1,78 @@
+<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>
+        <!-- 图示区域 -->
+        <el-row :gutter="24">
+            <el-col :span="16">
+                <el-card>
+                    <statusBox></statusBox>
+                    <qushi class="line"></qushi>
+                </el-card>
+            </el-col>
+            
+            <el-col :span="8">
+                <el-card>
+                    <bar></bar>
+                </el-card>
+            </el-col>
+            </el-row>
+
+              <el-row :gutter="24">
+            <el-col :span="16">
+                <el-card>
+                    <line1 class="line"></line1>
+                </el-card>
+            </el-col>
+            
+            <el-col :span="8">
+                <el-card>
+                    <bar></bar>
+                </el-card>
+            </el-col>
+            </el-row>
+
+
+    </div>
+</template>
+<script setup>
+import TitleComponent from '../demo/components/TitleComponent.vue';
+import StatusBox from './components/box1/statusBox.vue'
+import Qushi from './components/box1/qushi.vue'
+import Bar from './components/box2/bar.vue'
+import line1 from './components/line1.vue';
+</script>
+<style scoped lang="scss">
+.model {
+    padding: 20p15px;
+}
+</style>
diff --git a/src/views/design/billofQuantities/index.vue b/src/views/design/billofQuantities/index.vue
index 4010b73..e428c0d 100644
--- a/src/views/design/billofQuantities/index.vue
+++ b/src/views/design/billofQuantities/index.vue
@@ -163,9 +163,6 @@ const handleTabChange = (tab) => {
     getVersionNums(false);
   }
 };
-onMounted(async () => {
-  await getVersionNums();
-});
 
 // 获取版本号
 async function getVersionNums(isSheet = true) {
@@ -173,6 +170,7 @@ async function getVersionNums(isSheet = true) {
     state.loading.versions = true;
     state.error = null;
 
+    console.log('🚀 ~ handleSheetName ~ currentProject.value?.id:', currentProject.value?.id);
     const res = await obtainAllVersionNumbers({
       projectId: currentProject.value?.id,
       workOrderType: state.work_order_type,
@@ -378,6 +376,32 @@ const downloadTemplate = (type) => {
     alert('下载失败，请重试');
   }
 };
+const resetState = () => {
+  state.tableData = [];
+  state.options = [];
+  state.sheets = [];
+  state.queryForm.versions = '';
+  state.queryForm.sheet = '';
+  state.versionsData = {};
+  state.error = null;
+  isExpandAll.value = true;
+};
+onMounted(async () => {
+  await getVersionNums();
+});
+//监听项目id刷新数据
+const listeningProject = watch(
+  () => currentProject.value?.id,
+  (nid, oid) => {
+    resetState();
+    state.queryForm.projectId = nid;
+    getVersionNums();
+  }
+);
+
+onUnmounted(() => {
+  listeningProject();
+});
 </script>
 <style>
 .billof-quantities {
diff --git a/src/views/materials/batchPlan/index.vue b/src/views/materials/batchPlan/index.vue
index f73db21..2ad64cc 100644
--- a/src/views/materials/batchPlan/index.vue
+++ b/src/views/materials/batchPlan/index.vue
@@ -73,6 +73,7 @@
           </template>
 
           <el-table v-loading="loading" :data="cailiaoshebeiList" @selection-change="handleSelectionChange">
+            <el-table-column label="所属上级" align="center" prop="suppliespricePname" />
             <el-table-column label="物资名称" align="center" prop="name" />
             <el-table-column label="质量标准" align="center" prop="qs" />
             <el-table-column label="规格型号" align="center" prop="specification" />
@@ -129,21 +130,21 @@
           <el-table-column prop="name" align="center" label="物资名称" width="160">
             <template #default="scope">
               <el-input v-model="scope.row.name" v-if="scope.row.mrpBaseId" placeholder="请输入物资名称" disabled />
-              <el-select
+              <el-cascader
                 v-else
                 :disabled="!scope.row.batchNumber"
                 v-model="scope.row.suppliespriceId"
+                :show-all-levels="false"
+                :options="getAvailableNameList(scope.$index)"
                 placeholder="请选择"
                 @change="(val) => selectName(val, scope.row, scope.$index)"
-              >
-                <!-- 动态过滤：排除当前行外已选中的物资ID -->
-                <el-option 
-                  v-for="item in getAvailableNameList(scope.$index)" 
-                  :key="item.id" 
-                  :label="item.name" 
-                  :value="item.id" 
-                />
-              </el-select>
+                :props="{
+                  label: 'name',
+                  value: 'id',
+                  children: 'children',
+                  emitPath: false
+                }"
+              />
             </template>
           </el-table-column>
           <!-- 剩余量列 -->
@@ -412,7 +413,15 @@ const validateDemandQuantity = (row: PlanListItem, index: number) => {
 const getMrpBaseRemaining = async (suppliespriceId: number, row: PlanListItem) => {
   try {
     const res = await mrpBaseRemaining({ suppliespriceId });
-    row.Remaining = res.data || 0;
+    const selected = res.data;
+    console.log('🚀 ~ getMrpBaseRemaining ~ selected:', selected);
+    row.Remaining = selected.remainingQuantity || 0;
+    row.name = selected.name;
+    row.specification = selected.specification;
+    row.unit = selected.unit;
+    row.qs = selected.qs || '';
+    row.remark = selected.remark || '';
+    row.arrivalTime = selected.arrivalTime || '';
     // 剩余量更新后，重新校验当前数量
     validateDemandQuantity(row, 0);
   } catch (error) {
@@ -426,27 +435,17 @@ const getAvailableNameList = (currentIndex: number) => {
   // 收集除当前行外已选中的物资ID
   const selectedIds = form.value.planList
     .filter((_, index) => index !== currentIndex)
-    .map(item => item.suppliespriceId)
-    .filter(id => id !== undefined && id !== null);
+    .map((item) => item.suppliespriceId)
+    .filter((id) => id !== undefined && id !== null);
 
   // 过滤掉已选中的物资
-  return nameList.value.filter(item => !selectedIds.includes(item.id));
+  return nameList.value.filter((item) => !selectedIds.includes(item.id));
 };
 
 /** 选择物资名称触发 */
 const selectName = (val: number, row: PlanListItem, index: number) => {
   // 1. 获取剩余量并更新基础信息
-  getMrpBaseRemaining(val, row).then(() => {
-    const selected = nameList.value.find((item: any) => item.id === val);
-    if (selected) {
-      row.name = selected.name;
-      row.specification = selected.specification;
-      row.unit = selected.unit;
-      row.qs = selected.qs || '';
-      row.remark = selected.remark || '';
-      row.arrivalTime = selected.arrivalTime || '';
-    }
-  });
+  getMrpBaseRemaining(val, row);
 };
 
 /** 节点单击事件 */
diff --git a/src/views/quality/qualityInspection/index.vue b/src/views/quality/qualityInspection/index.vue
index d1523cf..c069a3a 100644
--- a/src/views/quality/qualityInspection/index.vue
+++ b/src/views/quality/qualityInspection/index.vue
@@ -55,7 +55,7 @@
       <el-table v-loading="loading" :data="qualityInspectionList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="主键id" align="center" prop="id" v-if="false" />
-        <el-table-column label="填报人" align="center" prop="createBy" />
+        <el-table-column label="填报人" align="center" prop="createByName" />
         <el-table-column label="填报时间" align="center" prop="createTime" width="180">
           <template #default="scope">
             <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
@@ -86,7 +86,7 @@
           </template>
         </el-table-column> -->
         <el-table-column label="备注" align="center" prop="remark" />
-        <el-table-column label="创建者" align="center" prop="createBy" />
+        <!-- <el-table-column label="创建者" align="center" prop="createBy" /> -->
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <!-- <el-tooltip content="验证" placement="top">
@@ -145,6 +145,11 @@
             <el-option v-for="dict in foremanOpt" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="是否回复" prop="isReply">
+          <el-radio-group v-model="form.isReply">
+            <el-radio v-for="dict in isReply_type" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
         <!-- <el-form-item label="工单状态" prop="inspectionStatus">
           <el-radio-group v-model="form.inspectionStatus">
             <el-radio v-for="dict in quality_inspection_status_type" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
@@ -197,6 +202,16 @@ const ids = ref<Array<string | number>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
+const isReply_type = ref([
+  {
+    label: '是',
+    value: 1
+  },
+  {
+    label: '否',
+    value: 2
+  }
+]);
 
 const queryFormRef = ref<ElFormInstance>();
 const qualityInspectionFormRef = ref<ElFormInstance>();
@@ -246,6 +261,7 @@ const data = reactive<PageData<QualityInspectionForm, QualityInspectionQuery>>({
     inspectionHeadline: [{ required: true, message: '巡检标题不能为空', trigger: 'blur' }],
     inspectionResult: [{ required: true, message: '巡检结果不能为空', trigger: 'blur' }],
     teamId: [{ required: true, message: '班组id不能为空', trigger: 'blur' }],
+    isReply: [{ required: true, message: '是否回复不能为空', trigger: 'change' }],
     corrector: [{ required: true, message: '整改人不能为空', trigger: 'blur' }]
   }
 });
diff --git a/src/views/safety/safetyInspection/index.vue b/src/views/safety/safetyInspection/index.vue
index 1d6fe0f..f75cdc3 100644
--- a/src/views/safety/safetyInspection/index.vue
+++ b/src/views/safety/safetyInspection/index.vue
@@ -49,6 +49,7 @@
       <el-table v-loading="loading" :data="safetyInspectionList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="序号" type="index" width="60" align="center" />
+        <el-table-column label="检查项目" align="center" prop="checkProject" />
         <el-table-column label="处理状态" align="center" prop="status">
           <template #default="scope">
             <dict-tag :options="safety_inspection_type" :value="scope.row.status" />
@@ -107,8 +108,12 @@
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 添加或修改安全巡检工单对话框 -->
+
     <el-dialog :title="dialog.title" v-model="dialog.visible" append-to-body>
       <el-form ref="safetyInspectionFormRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="检查项目" prop="checkProject">
+          <el-input v-model="form.checkProject" placeholder="请输入检查项目" />
+        </el-form-item>
         <el-form-item label="检查类型" prop="checkType">
           <el-select v-model="form.checkType" placeholder="请选择检查类型">
             <el-option v-for="dict in safety_inspection_check_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
@@ -137,6 +142,13 @@
             <el-option v-for="item in foremanOpt" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
+
+        <el-form-item label="是否回复" prop="isReply">
+          <el-radio-group v-model="form.isReply">
+            <el-radio label="1">是</el-radio>
+            <el-radio label="2">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item label="问题隐患" prop="hiddenDanger">
           <el-input v-model="form.hiddenDanger" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -234,7 +246,7 @@ const initFormData: SafetyInspectionForm = {
   checkTime: undefined,
   rectificationTime: undefined,
   rectificationUnit: undefined,
-
+  checkProject: undefined,
   reviewTime: undefined,
   checkFile: undefined,
   rectificationFile: undefined,
@@ -270,7 +282,9 @@ const data = reactive<PageData<SafetyInspectionForm, SafetyInspectionQuery>>({
     id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
     projectId: [{ required: true, message: '项目ID不能为空', trigger: 'blur' }],
     checkType: [{ required: true, message: '检查类型不能为空', trigger: 'blur' }],
-    violationType: [{ required: true, message: '违章类型不能为空', trigger: 'blur' }]
+    violationType: [{ required: true, message: '违章类型不能为空', trigger: 'blur' }],
+    checkProject: [{ required: true, message: '检查项目不能为空', trigger: 'blur' }],
+    isReply: [{ required: true, message: '是否回复不能为空', trigger: 'blur' }]
   }
 });
 
diff --git a/src/views/safety/teamMeeting/index.vue b/src/views/safety/teamMeeting/index.vue
index ba468a7..7ce99b0 100644
--- a/src/views/safety/teamMeeting/index.vue
+++ b/src/views/safety/teamMeeting/index.vue
@@ -50,11 +50,11 @@
             <span>{{ parseTime(scope.row.meetingDate, '{y}-{m}-{d}') }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="上传时间" align="center" prop="createTime" width="180">
-          <template #default="scope">
+        <el-table-column label="上传时间" align="center" prop="createTime" width="180" />
+        <!-- <template #default="scope">
             <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
           </template>
-        </el-table-column>
+        </el-table-column> -->
         <el-table-column label="备注" align="center" prop="remark" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
diff --git a/src/views/tender/plan/comm/winTheBid.vue b/src/views/tender/plan/comm/winTheBid.vue
index e9d3186..fcb5507 100644
--- a/src/views/tender/plan/comm/winTheBid.vue
+++ b/src/views/tender/plan/comm/winTheBid.vue
@@ -7,15 +7,23 @@
         </el-select>
       </el-form-item>
       <el-form-item label="中标文件" prop="name">
-        <file-upload v-model="form.costEstimationFile" :fileSize="100" :auto-upload="false"
-          uploadUrl="/tender/biddingPlan/uploadBiddingDocuments" method="put" ref="fileUploadRef" :data="{
+        <file-upload
+          v-model="form.costEstimationFile"
+          :fileSize="100"
+          :auto-upload="false"
+          uploadUrl="/tender/biddingPlan/uploadBiddingDocuments"
+          method="put"
+          ref="fileUploadRef"
+          :data="{
             projectId: currentProject?.id,
             type: planType,
             fileType: '0',
             bidStatus: '0',
             id: row.id,
             winningBidderId: form.winningBidder
-          }" showFileList />
+          }"
+          showFileList
+        />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -75,7 +83,7 @@ const submitForm = () => {
   fileUploadRef.value.submitUpload().then((res) => {
     if (res == 'noFile') {
       ElMessage({
-        message: '请上传招标文件',
+        message: '请上传中标文件',
         type: 'warning'
       });
       return;