diff --git a/.env.development b/.env.development
index 500d6b0..4c056ae 100644
--- a/.env.development
+++ b/.env.development
@@ -6,9 +6,9 @@ VITE_APP_ENV = 'development'
 
 # 开发环境
 # 李陈杰 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.180:8899'
+VITE_APP_BASE_API = 'http://192.168.110.180:8899'
 # 罗成
 # VITE_APP_BASE_API = 'http://192.168.110.213:8899'
 # 朱银
diff --git a/package.json b/package.json
index 67291cb..58746c4 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "await-to-js": "3.0.0",
     "axios": "1.7.8",
     "crypto-js": "4.2.0",
+    "date-fns": "^4.1.0",
     "diagram-js": "12.3.0",
     "didi": "9.0.2",
     "echarts": "5.5.0",
diff --git a/public/assets/demo/Sunny.png b/public/assets/demo/Sunny.png
new file mode 100644
index 0000000..14c94d4
Binary files /dev/null and b/public/assets/demo/Sunny.png differ
diff --git a/public/assets/demo/back.png b/public/assets/demo/back.png
new file mode 100644
index 0000000..6b6a2ac
Binary files /dev/null and b/public/assets/demo/back.png differ
diff --git a/public/assets/demo/back2.png b/public/assets/demo/back2.png
new file mode 100644
index 0000000..19253bd
Binary files /dev/null and b/public/assets/demo/back2.png differ
diff --git a/public/assets/demo/back3.png b/public/assets/demo/back3.png
new file mode 100644
index 0000000..538a083
Binary files /dev/null and b/public/assets/demo/back3.png differ
diff --git a/public/assets/demo/back4.png b/public/assets/demo/back4.png
new file mode 100644
index 0000000..c296fae
Binary files /dev/null and b/public/assets/demo/back4.png differ
diff --git a/public/assets/demo/fengshu.png b/public/assets/demo/fengshu.png
new file mode 100644
index 0000000..23ea230
Binary files /dev/null and b/public/assets/demo/fengshu.png differ
diff --git a/public/assets/demo/qiangdu.png b/public/assets/demo/qiangdu.png
new file mode 100644
index 0000000..75c64f6
Binary files /dev/null and b/public/assets/demo/qiangdu.png differ
diff --git a/public/assets/demo/rain.png b/public/assets/demo/rain.png
new file mode 100644
index 0000000..4283bde
Binary files /dev/null and b/public/assets/demo/rain.png differ
diff --git a/public/assets/demo/riluo.png b/public/assets/demo/riluo.png
new file mode 100644
index 0000000..401a9cf
Binary files /dev/null and b/public/assets/demo/riluo.png differ
diff --git a/public/assets/demo/shidu.png b/public/assets/demo/shidu.png
new file mode 100644
index 0000000..d318124
Binary files /dev/null and b/public/assets/demo/shidu.png differ
diff --git a/public/assets/demo/yin.png b/public/assets/demo/yin.png
new file mode 100644
index 0000000..0de75b2
Binary files /dev/null and b/public/assets/demo/yin.png differ
diff --git a/src/assets/demo/back.png b/src/assets/demo/back.png
new file mode 100644
index 0000000..6b6a2ac
Binary files /dev/null and b/src/assets/demo/back.png differ
diff --git a/src/views/demo/components/1.html b/src/views/demo/components/1.html
new file mode 100644
index 0000000..846de09
--- /dev/null
+++ b/src/views/demo/components/1.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- 引入图标（这里用的是阿里图标库示例，实际可替换成自己的图标资源） -->
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4245527_xxxxxx.css">
+    <!-- <link rel="stylesheet" href="style.css"> -->
+    <style>
+        /* 初始化样式 */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background: #eef5ff;
+            font-family: sans-serif;
+        }
+
+        /* 时间轴容器 */
+        .weather-timeline {
+            display: flex;
+            align-items: center;
+            background: #fff;
+            border-radius: 12px;
+            padding: 20px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            overflow-x: auto;
+            /* 适配小屏幕横向滚动 */
+        }
+
+        /* 每个时间项 */
+        .time-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 0 12px;
+            min-width: 80px;
+            /* 保证 item 最小宽度 */
+        }
+
+        /* 当前时间项特殊样式 */
+        .time-item.current {
+            background: #e3f0ff;
+            border-radius: 8px;
+            padding: 10px;
+            transform: scale(1.1);
+            /* 稍微放大突出 */
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        /* 时间文本 */
+        .time {
+            font-size: 14px;
+            color: #333;
+            margin-bottom: 4px;
+        }
+
+        /* 温度文本 */
+        .temp {
+            font-size: 16px;
+            color: #666;
+            margin-bottom: 8px;
+        }
+
+        /* 图标样式（基于阿里图标库，可替换成自己的图标字体或图片） */
+        .iconfont {
+            font-size: 24px;
+            color: #f9b115;
+            /* 太阳/主色调 */
+        }
+
+        .icon-rain {
+            color: #9ec8f2;
+            /* 雨/蓝色系 */
+        }
+
+        .icon-cloud-moon {
+            color: #c9d6e5;
+            /* 多云 moon/浅灰蓝 */
+        }
+    </style>
+    <title>天气时间轴</title>
+</head>
+
+<body>
+    <div class="weather-timeline">
+        <div class="time-item">
+            <div class="time">16:00</div>
+            <div class="temp">30°C</div>
+            <i class="iconfont icon-sun"></i> <!-- 太阳图标 -->
+        </div>
+        <div class="time-item">
+            <div class="time">17:00</div>
+            <div class="temp">29°C</div>
+            <i class="iconfont icon-sun"></i>
+        </div>
+        <div class="time-item">
+            <div class="time">18:00</div>
+            <div class="temp">25°C</div>
+            <i class="iconfont icon-rain"></i> <!-- 小雨图标 -->
+        </div>
+        <div class="time-item current">
+            <div class="time">现在</div>
+            <div class="temp">25°C</div>
+            <i class="iconfont icon-rain"></i>
+        </div>
+        <div class="time-item">
+            <div class="time">20:00</div>
+            <div class="temp">25°C</div>
+            <i class="iconfont icon-cloud-moon"></i> <!-- 多云 moon 图标 -->
+        </div>
+        <div class="time-item">
+            <div class="time">21:00</div>
+            <div class="temp">20°C</div>
+            <i class="iconfont icon-cloud-moon"></i>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/views/demo/components/ChartBox.vue b/src/views/demo/components/ChartBox.vue
new file mode 100644
index 0000000..434eb2d
--- /dev/null
+++ b/src/views/demo/components/ChartBox.vue
@@ -0,0 +1,311 @@
+<template>
+    <div class="chart-container">
+        <!-- 图表标题和时间范围选择器 -->
+        <div class="chart-header">
+            <h2>功率与效率趋势</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 POWER_COLOR = 'rgba(42, 130, 228, 1)';
+const EFFICIENCY_COLOR = 'rgba(67, 207, 124, 1)';
+
+// 生成指定范围内的随机数（用于模拟数据）
+const getRandomValue = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+// 生成指定范围内的随机浮点数（用于效率数据）
+const getRandomFloat = (min, max, decimalPlaces = 1) => {
+    const value = Math.random() * (max - min) + min;
+    return parseFloat(value.toFixed(decimalPlaces));
+};
+
+// 获取当前月份的天数
+const getDaysInCurrentMonth = () => {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = now.getMonth() + 1; // 月份从0开始，所以+1
+    return new Date(year, month, 0).getDate();
+};
+
+// 根据时间范围返回对应的数据
+const getChartData = () => {
+    if (timeRange.value === 'day') {
+        return {
+            xAxis: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
+            powerData: [320, 380, 350, 420, 580, 630, 550, 480],
+            efficiencyData: [85.2, 86.5, 87.1, 88.3, 89.5, 89.2, 88.7, 88.1]
+        };
+    } else if (timeRange.value === 'week') {
+        return {
+            xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+            powerData: [4200, 4800, 5100, 4900, 5300, 3800, 3200],
+            efficiencyData: [86.2, 87.5, 88.1, 87.8, 89.0, 88.5, 87.9]
+        };
+    } else {
+        // 本月数据 - 按天显示
+        const daysInMonth = getDaysInCurrentMonth();
+        const xAxis = [];
+        const powerData = [];
+        const efficiencyData = [];
+
+        // 生成每天的数据
+        for (let i = 1; i <= daysInMonth; i++) {
+            xAxis.push(`${i}日`);
+            // 生成合理范围内的功率数据（10000-25000之间）
+            powerData.push(getRandomValue(10000, 25000));
+            // 生成合理范围内的效率数据（85-90之间，保留1位小数）
+            efficiencyData.push(getRandomFloat(85, 90));
+        }
+
+        return {
+            xAxis,
+            powerData,
+            efficiencyData
+        };
+    }
+};
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    const data = getChartData();
+
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'cross' }
+        },
+        legend: {
+            data: ['总功率(kW)', '平均效率(%)'],
+            top: 0
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: data.xAxis,
+            // 当月天数较多时，优化X轴标签显示
+            axisLabel: {
+                interval: timeRange.value === 'month' ? 'auto' : 0,
+                rotate: timeRange.value === 'month' ? 45 : 0
+            }
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '总功率(kW)',
+                axisLabel: {
+                    formatter: '{value}'
+                }
+            },
+            {
+                type: 'value',
+                name: '平均效率(%)',
+                min: 80,
+                max: 95,
+                axisLabel: {
+                    formatter: '{value}%'
+                }
+            }
+        ],
+        series: [
+            {
+                name: '总功率(kW)',
+                type: 'line',
+                data: data.powerData,
+                smooth: true,
+                lineStyle: {
+                    width: 3,
+                    color: POWER_COLOR
+                },
+                symbol: 'circle',
+                symbolSize: 8,
+                itemStyle: {
+                    color: POWER_COLOR
+                },
+                markPoint: {
+                    data: [
+                        { type: 'max', name: '最大值' },
+                        { type: 'min', name: '最小值' }
+                    ],
+                    itemStyle: {
+                        color: POWER_COLOR
+                    }
+                }
+            },
+            {
+                name: '平均效率(%)',
+                type: 'line',
+                yAxisIndex: 1,
+                data: data.efficiencyData,
+                smooth: true,
+                lineStyle: {
+                    width: 3,
+                    type: 'dashed',
+                    color: EFFICIENCY_COLOR
+                },
+                symbol: 'diamond',
+                symbolSize: 8,
+                itemStyle: {
+                    color: EFFICIENCY_COLOR
+                },
+                markPoint: {
+                    data: [
+                        { type: 'max', name: '最大值' },
+                        { type: 'min', name: '最小值' }
+                    ],
+                    itemStyle: {
+                        color: EFFICIENCY_COLOR
+                    }
+                }
+            }
+        ]
+    };
+
+    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;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+}
+
+.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/demo/components/TitleComponent.vue b/src/views/demo/components/TitleComponent.vue
new file mode 100644
index 0000000..d974a27
--- /dev/null
+++ b/src/views/demo/components/TitleComponent.vue
@@ -0,0 +1,23 @@
+<template>
+    <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>
+    <p style="color: rgba(154, 154, 154, 1);font-size: 14px;">
+        {{ props.subtitle }}
+    </p>
+</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/demo/components/qixiang.vue b/src/views/demo/components/qixiang.vue
new file mode 100644
index 0000000..6512011
--- /dev/null
+++ b/src/views/demo/components/qixiang.vue
@@ -0,0 +1,222 @@
+<template>
+    <div class="cardItem">
+        <el-card>
+            <div class="tianqi"
+                style="display: flex;flex-direction: column;align-items: center;background-color: #FAFAFA;border-radius: 10px;padding-bottom: 40px;">
+                <div>
+                    <img src="/assets/demo/Sunny.png" style="display: block; width: 100px;height: 100px;" alt="">
+                </div>
+                <div style="font-family: 'Alibaba-PuHuiTi-Bold';font-size: 24px;">
+                    31℃
+                </div>
+                <div>晴朗</div>
+                <div style="color: rgba(154, 154, 154, 1);font-size: 14px;">
+                    紫外线强度：<span>高</span>
+                </div>
+                <div class="tianqi2">
+                    <div class="item">
+                        <div>
+                            <img src="/assets/demo/shidu.png" alt="">
+                        </div>
+                        <div class="text">相对湿度： <span>45%</span></div>
+                    </div>
+                    <div class="item">
+                        <div>
+                            <img src="/assets/demo/qiangdu.png" alt="">
+                        </div>
+                        <div class="text">光照强度： <span>45%</span></div>
+                    </div>
+                    <div class="item">
+                        <div>
+                            <img src="/assets/demo/fengshu.png" alt="">
+                        </div>
+                        <div class="text">风速： <span>2.3m/s</span></div>
+                    </div>
+                    <div class="item">
+                        <div>
+                            <img src="/assets/demo/riluo.png" alt="">
+                        </div>
+                        <div class="text">日落时间： <span>19.45</span></div>
+                    </div>
+                </div>
+            </div>
+            <div class="weather-timeline">
+                <div class="time-box">
+                    <div class="time-item">
+                        <div class="time">16:00</div>
+                        <div class="temp">30°C</div>
+                        <div class="img-box">
+                            <img src="/assets/demo/Sunny.png" alt="">
+                        </div>
+                    </div>
+                    <div class="time-item">
+                        <div class="time">17:00</div>
+                        <div class="temp">29°C</div>
+                        <div class="img-box">
+                            <img src="/assets/demo/Sunny.png" alt="">
+                        </div>
+                    </div>
+                    <div class="time-item">
+                        <div class="child">
+                            <div class="time">18:00</div>
+                            <div class="temp">25°C</div>
+                            <div class="img-box">
+                                <img src="/assets/demo/rain.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="time-item show">
+                        <div class="time">现在</div>
+                        <div class="temp">25°C</div>
+                        <div class="img-box">
+                            <img src="/assets/demo/rain.png" alt="">
+                        </div>
+                    </div>
+                    <div class="time-item ">
+                        <div class="time">20:00</div>
+                        <div class="temp">25°C</div>
+                        <div class="img-box">
+                            <img src="/assets/demo/yin.png" alt="">
+                        </div>
+                    </div>
+                    <div class="time-item">
+                        <div class="time">21:00</div>
+                        <div class="temp">20°C</div>
+                        <div class="img-box">
+                            <img src="/assets/demo/yin.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </el-card>
+    </div>
+</template>
+<style scoped lang="scss">
+.cardItem {
+    padding: -20px !important;
+}
+
+.tianqi2 {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    margin-top: 50px;
+
+    img {
+        width: 40px;
+        height: 40x;
+        display: block;
+    }
+
+    .item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 14px;
+
+        .text {
+            margin-top: 10px;
+        }
+    }
+
+}
+
+.weather-timeline {
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+    margin: 15px 0;
+
+    .time {
+        margin: 10px 0;
+    }
+
+    .img-box {
+        width: 50px;
+        height: 50px;
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+
+    // img[src*='Sunny'] {
+    //     width: 50px;
+    //     height: 50px;
+    // }
+
+    // img[src*='rain'] {
+    //     width: 60px;
+    //     height: 60px;
+    // }
+
+
+    padding: 15px;
+    background: linear-gradient(to right, #D6E2FF, #DEEBFF);
+    border-radius: 15px;
+
+    .time-box {
+        background: linear-gradient(to right, #447BFF, #67A3FD);
+        display: flex;
+        justify-content: space-between;
+        border-radius: 10px;
+        padding: 10px 20px;
+        align-items: center;
+    }
+
+    .time-item.show {
+        color: rgba(24, 109, 245, 1);
+        position: relative;
+        // z-index: 888;
+        background-color: #fff;
+
+    }
+
+    .show::after {
+        // color: rgba(24, 109, 245, 1);
+        // position: relative;
+        // z-index: 888;
+        // background-color: #fff;
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 25px;
+        // background-color: red;
+        background-color: #fff;
+        left: 0;
+        border-radius: 0 0 25px 25px;
+    }
+
+    .show::before {
+        // color: rgba(24, 109, 245, 1);
+        // position: relative;
+        // z-index: 888;
+        // background-color: #fff;
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 25px;
+        // background-color: red;
+        background-color: #fff;
+        left: 0;
+        top: -25px;
+        border-radius: 25px 25px 0 0;
+    }
+
+    // .show::after {
+    //     content: '';
+    //     position: absolute;
+    //     height: 155px;
+    //     background-color: #fff;
+    //     z-index: 999;
+    //     width: 100%;
+    //     top: -25px;
+    //     left: 0;
+    //     border-radius: 20px;
+    // }
+}
+</style>
+<script setup>
+</script>
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
new file mode 100644
index 0000000..4088f03
--- /dev/null
+++ b/src/views/demo/index.vue
@@ -0,0 +1,207 @@
+<template>
+    <div class="model">
+        <el-row :gutter="24">
+            <el-col :span="12">
+                <TitleComponent title="XXX电站·逆变器综合监控" subtitle="实时监控X台逆变器运行状态、发电趋势及环境信息" />
+            </el-col>
+            <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
+            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
+                <!-- 子col1：输入框容器 -->
+                <el-col :span="8">
+                    <el-input placeholder="请输入逆变器...">
+                        <template #prefix>
+                            <el-icon>
+                                <Search />
+                            </el-icon>
+                        </template>
+                    </el-input>
+                </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">
+                            <Refresh />
+                        </el-icon>
+                    </el-button>
+                </el-col>
+            </el-col>
+        </el-row>
+        <el-row style="display: flex; gap: 30px;" class="card">
+            <el-col style="flex: 1;" class="item">
+                <div class="box" style="height: 100%;display: flex;">
+                    <div class="left"
+                        style="display: flex;flex-direction: column;height: 100%;justify-content: space-around;padding: 15px;">
+                        <div style="color: rgba(102, 102, 102, 1);">今日总发电量</div>
+                        <div><span
+                                style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">1,248</span>
+                            <span
+                                style="font-size: 12px;font-weight: 400;letter-spacing: 0px;line-height: 17.38px;color: rgba(154, 154, 154, 1);">
+                                KWH
+                            </span>
+                        </div>
+                        <div style="display: flex;align-items: center">
+                            <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>
+                            <span
+                                style="font-size: 12px;font-weight: 500;letter-spacing: 0px;line-height: 14.48px;color: rgba(0, 184, 122, 1)">8.2%</span>
+                            <span
+                                style="font-size: 12px;font-weight: 500;letter-spacing: 0px;line-height: 14.48px;color: rgba(154, 154, 154, 1)">较昨日同期</span>
+                        </div>
+                    </div>
+                    <div class="right">
+                        <img src="/assets/demo/back.png" alt="" style="height: 100%;">
+                    </div>
+                </div>
+            </el-col>
+            <el-col style="flex: 1" class="item">
+                <div class="box" style="height: 100%;display: flex;">
+                    <div class="left"
+                        style="display: flex;flex-direction: column;height: 100%;justify-content: space-around;padding: 15px;">
+                        <div style="color: rgba(102, 102, 102, 1);">逆变器总数</div>
+                        <div><span
+                                style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">54</span>
+                            <span
+                                style="font-size: 12px;font-weight: 400;letter-spacing: 0px;line-height: 17.38px;color: rgba(154, 154, 154, 1);">
+                                台
+                            </span>
+                        </div>
+                        <div style="display: flex;">
+                            <div
+                                style="width: 63px;height: 18px;border-radius: 16px;background: rgba(0, 184, 122, .3);text-align: center;">
+                                <span
+                                    style="font-size: 12px;font-weight: 400;letter-spacing: 0;line-height: 17.38px;color: rgba(0, 184, 122, 1);">
+                                    正常：<span>53</span>
+                                </span>
+                            </div>
+                            <div
+                                style="width: 63px;height: 18px;border-radius: 16px;background: rgba(227, 39, 39, .3);text-align: center;margin-left: 10px;">
+                                <span
+                                    style="font-size: 12px;font-weight: 400;letter-spacing: 0;line-height: 17.38px;color: rgba(0, 184, 122, 1);color: red;">
+                                    异常<span>53</span>
+                                </span>
+                            </div>
+                            <!-- <div>异常：<span>1</span></div> -->
+                        </div>
+                    </div>
+                    <div class="right">
+                        <img src="/assets/demo/back2.png" alt="" style="height: 100%;">
+                    </div>
+                </div>
+            </el-col>
+            <el-col style="flex: 1" class="item">
+                <div class="box" style="height: 100%;display: flex;">
+                    <div class="left"
+                        style="display: flex;flex-direction: column;height: 100%;justify-content: space-around;padding: 15px;">
+                        <div style="color: rgba(102, 102, 102, 1);">平均效率</div>
+                        <div><span
+                                style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">98</span>
+                            <span
+                                style="font-size: 12px;font-weight: 400;letter-spacing: 0px;line-height: 17.38px;color: rgba(154, 154, 154, 1);">
+                                %
+                            </span>
+                        </div>
+                        <div style="display: flex;align-items: center">
+                            <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>
+
+                            <span
+                                style="font-size: 12px;font-weight: 500;letter-spacing: 0px;line-height: 14.48px;color:  rgba(227, 39, 39, 1)">0.2%</span>
+                            <span
+                                style="font-size: 12px;font-weight: 500;letter-spacing: 0px;line-height: 14.48px;color: rgba(154, 154, 154, 1)">较昨日同期</span>
+                        </div>
+                    </div>
+                    <div class="right">
+                        <img src="/assets/demo/back3.png" alt="" style="height: 100%;">
+                    </div>
+                </div>
+            </el-col>
+            <el-col style="flex: 1" class="item">
+                <div class="box" style="height: 100%;display: flex;">
+                    <div class="left"
+                        style="display: flex;flex-direction: column;height: 100%;justify-content: space-around;padding: 15px;">
+                        <div style="color: rgba(102, 102, 102, 1);">当前总功率</div>
+                        <div><span
+                                style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">325</span>
+                            <span
+                                style="font-size: 12px;font-weight: 400;letter-spacing: 0px;line-height: 17.38px;color: rgba(154, 154, 154, 1);">
+                                KW
+                            </span>
+                        </div>
+                        <div style="display: flex;align-items: center">
+                            <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="M1.561 6.19974L2.68001 6.19974C2.68598 6.1995 2.69196 6.19932 2.69795 6.19925C2.70395 6.19918 2.70995 6.19921 2.71594 6.19932C2.72193 6.19944 2.72791 6.19965 2.73388 6.19995C2.73987 6.20027 2.74585 6.20066 2.75181 6.20115C2.75779 6.20164 2.76375 6.20222 2.76971 6.20289C2.77565 6.20357 2.78158 6.20435 2.78752 6.20521C2.79344 6.20607 2.79935 6.20702 2.80526 6.20806C2.81116 6.20911 2.81703 6.21025 2.8229 6.21148C2.82876 6.21271 2.83459 6.21403 2.84043 6.21544C2.84625 6.21686 2.85205 6.21837 2.85783 6.21996C2.8636 6.22156 2.86935 6.22324 2.87508 6.225C2.88079 6.22678 2.88648 6.22864 2.89214 6.23057C2.8978 6.23254 2.90343 6.23458 2.90904 6.23669C2.91463 6.23884 2.9202 6.24105 2.92574 6.24334C2.93126 6.24564 2.93676 6.24803 2.94222 6.25049C2.94767 6.25297 2.95309 6.25552 2.95847 6.25815C2.96385 6.26079 2.96917 6.26352 2.97448 6.26633C2.97975 6.26914 2.98501 6.27202 2.99021 6.27499C2.99542 6.27796 3.00057 6.28101 3.00568 6.28413C3.01078 6.28726 3.01584 6.29048 3.02085 6.29377C3.02584 6.29705 3.0308 6.30041 3.03572 6.30386C3.04061 6.3073 3.04546 6.31084 3.05026 6.31442C3.05504 6.31801 3.05979 6.32168 3.06446 6.32543C3.06914 6.32917 3.07374 6.33298 3.07831 6.33687C3.08287 6.34075 3.08737 6.34471 3.09181 6.34873C3.09624 6.35278 3.1006 6.35687 3.10493 6.36102C3.10922 6.36519 3.11347 6.36941 3.11765 6.37369C3.12182 6.378 3.12593 6.38236 3.12998 6.38677C3.134 6.3912 3.13797 6.3957 3.14188 6.40024C3.14578 6.40479 3.14959 6.4094 3.15336 6.41405C3.15712 6.41873 3.16079 6.42344 3.16441 6.42822C3.16802 6.433 3.17155 6.43786 3.17501 6.44274L4.37351 8.21423L6.08351 4.67124C6.15401 4.51973 6.2965 4.41623 6.4585 4.37724C6.751 4.30224 7.057 4.45673 7.14551 4.72673L9.4555 11.7062L11.14 6.61673C11.1925 6.37674 11.4175 6.19974 11.6905 6.19974L14.5045 6.19974C14.5522 6.19951 14.5992 6.20502 14.6455 6.21623C14.652 6.20586 14.6586 6.19559 14.6654 6.18543C14.6722 6.17527 14.6791 6.16524 14.6863 6.15529C14.6934 6.14536 14.7007 6.13553 14.7081 6.12583C14.7155 6.11612 14.7231 6.10652 14.7309 6.09707C14.7386 6.08761 14.7465 6.07828 14.7545 6.06907C14.7626 6.05987 14.7708 6.0508 14.7791 6.04186C14.7874 6.03293 14.7959 6.02412 14.8045 6.01544C14.8131 6.00677 14.8219 5.99824 14.8308 5.98984C14.8397 5.98146 14.8487 5.97321 14.8579 5.96511C14.867 5.95702 14.8763 5.94908 14.8857 5.94127C14.8951 5.93347 14.9047 5.92582 14.9143 5.91833C14.924 5.91085 14.9338 5.9035 14.9437 5.89633C14.9536 5.88915 14.9636 5.88212 14.9737 5.87527C14.9838 5.86841 14.994 5.86173 15.0044 5.85519C15.0147 5.84867 15.0251 5.84231 15.0357 5.83612C15.0462 5.82993 15.0569 5.82392 15.0676 5.81807C15.0783 5.81223 15.0891 5.80655 15.1001 5.80103C15.111 5.79555 15.122 5.79022 15.1331 5.78507C15.1442 5.77992 15.1553 5.77495 15.1666 5.77017C15.1778 5.76539 15.1892 5.76078 15.2005 5.75635C15.2119 5.75192 15.2234 5.74769 15.2349 5.74362C15.2465 5.73958 15.2581 5.73571 15.2697 5.73202C15.2814 5.72835 15.2931 5.72485 15.3049 5.72155C15.3166 5.71824 15.3284 5.71513 15.3403 5.7122C15.3522 5.70928 15.3641 5.70655 15.3761 5.704C15.388 5.70147 15.4 5.69912 15.412 5.69695C15.4241 5.69481 15.4361 5.69284 15.4482 5.69107C15.4603 5.68931 15.4724 5.68774 15.4846 5.68636C15.4967 5.68498 15.5089 5.68381 15.5211 5.6828C15.5333 5.68182 15.5455 5.68105 15.5577 5.68045C15.5699 5.67985 15.5821 5.67946 15.5943 5.67925C15.6066 5.67906 15.6188 5.67906 15.631 5.67924C16.252 5.67924 16.756 6.14423 16.756 6.71874C16.756 7.29474 16.252 7.75973 15.631 7.75973C15.6188 7.75991 15.6066 7.75987 15.5944 7.75964C15.5821 7.75943 15.5699 7.75901 15.5577 7.75838C15.5455 7.75776 15.5333 7.75695 15.5211 7.75593C15.509 7.75493 15.4968 7.75374 15.4847 7.75233C15.4725 7.75094 15.4604 7.74936 15.4483 7.74757C15.4362 7.74577 15.4242 7.7438 15.4122 7.74162C15.4001 7.73946 15.3882 7.73711 15.3762 7.73454C15.3642 7.73199 15.3523 7.72925 15.3405 7.7263C15.3286 7.72338 15.3168 7.72025 15.305 7.71693C15.2933 7.71362 15.2816 7.71011 15.2699 7.70642C15.2583 7.70272 15.2467 7.69886 15.2352 7.69478C15.2236 7.69074 15.2122 7.68648 15.2008 7.68205C15.1894 7.67762 15.1781 7.67302 15.1669 7.66822C15.1556 7.66344 15.1445 7.65848 15.1334 7.65331C15.1223 7.64818 15.1113 7.64285 15.1004 7.63735C15.0895 7.63185 15.0786 7.62617 15.0679 7.62032C15.0572 7.61448 15.0465 7.60847 15.036 7.60228C15.0255 7.5961 15.015 7.58973 15.0047 7.58321C14.9944 7.57671 14.9841 7.57001 14.974 7.56315C14.9639 7.55632 14.9539 7.5493 14.944 7.54213C14.9341 7.53496 14.9243 7.52763 14.9147 7.52014C14.905 7.51267 14.8955 7.50504 14.8861 7.49724C14.8766 7.48947 14.8673 7.48152 14.8582 7.47344C14.849 7.46535 14.84 7.45712 14.8311 7.44874C14.8222 7.44037 14.8134 7.43185 14.8048 7.4232C14.7962 7.41455 14.7877 7.40574 14.7794 7.39681C14.771 7.38788 14.7628 7.37883 14.7548 7.36964C14.7467 7.36046 14.7388 7.35114 14.7311 7.34169C14.7233 7.33225 14.7157 7.32269 14.7082 7.313C14.7008 7.30331 14.6935 7.29351 14.6864 7.28359C14.6792 7.27368 14.6723 7.26364 14.6655 7.25348C14.6586 7.24336 14.652 7.23311 14.6455 7.22274C14.5992 7.23395 14.5522 7.23945 14.5045 7.23924L12.1105 7.23924L9.9955 13.6322C9.9055 13.9052 9.5905 14.0612 9.2935 13.9772C9.28273 13.9742 9.27205 13.9709 9.26147 13.9673C9.25089 13.9636 9.24041 13.9597 9.23008 13.9554C9.21972 13.9512 9.20951 13.9466 9.19944 13.9417C9.18937 13.9369 9.17945 13.9317 9.16968 13.9263C9.15991 13.9208 9.15031 13.9151 9.14089 13.9091C9.13145 13.903 9.1222 13.8967 9.11315 13.8902C9.1041 13.8836 9.09525 13.8768 9.08661 13.8697C9.07796 13.8626 9.06952 13.8552 9.06131 13.8476C9.05308 13.84 9.0451 13.8322 9.03737 13.8241C9.0296 13.8161 9.02209 13.8078 9.01485 13.7993C9.00759 13.7907 9.0006 13.782 8.99386 13.7731C8.98711 13.7642 8.98064 13.755 8.97446 13.7457C8.96825 13.7364 8.96233 13.7269 8.9567 13.7172C8.95108 13.7076 8.94573 13.6978 8.94069 13.6878C8.93563 13.6778 8.93088 13.6677 8.92643 13.6574C8.92197 13.6471 8.91784 13.6368 8.91401 13.6262L6.50651 6.34824L4.98551 9.50724C4.97821 9.52457 4.96997 9.54145 4.96079 9.55787C4.9516 9.57429 4.94151 9.59012 4.93054 9.60538C4.91955 9.62066 4.90774 9.63526 4.89512 9.64919C4.8825 9.66314 4.86912 9.67633 4.85501 9.68874L4.84451 9.69923C4.83931 9.7037 4.83404 9.70805 4.82869 9.71233C4.82335 9.7166 4.81792 9.72078 4.81243 9.72486C4.80693 9.72894 4.80138 9.73293 4.79575 9.73683C4.79012 9.74073 4.78443 9.74451 4.77866 9.7482C4.7729 9.75191 4.76708 9.75552 4.76119 9.759C4.7553 9.76249 4.74936 9.76589 4.74337 9.76917C4.73736 9.77248 4.73131 9.77566 4.72521 9.77874C4.71909 9.78183 4.71292 9.7848 4.70672 9.78767C4.70049 9.79055 4.69424 9.79331 4.68793 9.79595C4.68162 9.79862 4.67527 9.80115 4.66887 9.80357C4.66247 9.80602 4.65604 9.80834 4.64957 9.81055C4.64308 9.81277 4.63656 9.81488 4.63002 9.81686C4.62347 9.81885 4.61689 9.82073 4.61028 9.82249C4.60367 9.82425 4.59703 9.8259 4.59035 9.82743C4.58367 9.82896 4.57699 9.83036 4.57028 9.83166C4.56354 9.83296 4.55681 9.83416 4.55006 9.83523C4.54329 9.8363 4.53651 9.83725 4.52972 9.83808C4.52292 9.83892 4.51612 9.83964 4.50931 9.84024C4.50249 9.84084 4.49566 9.84133 4.48884 9.84168C4.48198 9.84205 4.47514 9.8423 4.4683 9.84244C4.46147 9.84258 4.45463 9.84258 4.44779 9.84246C4.44094 9.84235 4.4341 9.84214 4.42726 9.84179C4.42042 9.84146 4.4136 9.841 4.40678 9.84042C4.39996 9.83984 4.39314 9.83913 4.38636 9.83833C4.37955 9.83752 4.37277 9.8366 4.36602 9.83555C4.35925 9.83449 4.3525 9.83333 4.34579 9.83205C4.33905 9.83078 4.33236 9.82938 4.32569 9.82787C4.31901 9.82635 4.31235 9.82474 4.30574 9.823C4.29912 9.82128 4.29252 9.81941 4.28598 9.81744C4.27943 9.81547 4.27291 9.8134 4.26642 9.8112C4.25993 9.80902 4.25348 9.80672 4.24708 9.80429C4.24069 9.8019 4.23432 9.79937 4.22801 9.79674C4.21372 9.79106 4.19971 9.78478 4.18598 9.77789C4.17224 9.77102 4.15882 9.76357 4.14573 9.75555C4.13262 9.74754 4.11989 9.73896 4.10751 9.72983C4.09514 9.72073 4.08319 9.7111 4.07165 9.70094C4.06011 9.69081 4.04901 9.68019 4.03838 9.6691C4.02774 9.65801 4.0176 9.64648 4.00797 9.63453C3.9983 9.62257 3.98918 9.61023 3.9806 9.59749C3.972 9.58476 3.96397 9.57167 3.9565 9.55824L2.38599 7.23924L1.561 7.23924C1.2505 7.23924 1 7.00674 1 6.71874C1 6.43374 1.252 6.19974 1.561 6.19974Z"
+                                    fill="#FF9900">
+                                </path>
+                            </svg>
+                            <span
+                                style="font-size: 12px;font-weight: 500;letter-spacing: 0px;line-height: 14.48px;color:  rgba(255, 153, 0, 1)">峰值功率：384KW</span>
+                        </div>
+                    </div>
+                    <div class="right">
+                        <img src="/assets/demo/back4.png" alt="" style="height: 100%;">
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="15">
+                <el-row style="display: flex;flex-direction: column;height: 100%;">
+                    <div>
+                        <TitleComponent title="逆变器发电趋势" subtitle="过去24小时发电功率与效率趋势" :fontLevel="2" />
+                    </div>
+                    <ChartBox style="flex-grow: 1;" />
+                </el-row>
+            </el-col>
+            <el-col :span="8" :offset="1">
+                <div>
+                    <TitleComponent title="气象监测信息" subtitle="未来24小时天气预报及环境监测" :fontLevel="2" />
+                </div>
+                <QiXiang />
+            </el-col>
+        </el-row>
+        <el-row>
+            <TitleComponent title="逆变器运行状态" :fontLevel="2" />
+
+        </el-row>
+    </div>
+</template>
+<script setup>
+import TitleComponent from './components/TitleComponent.vue';
+import ChartBox from './components/ChartBox.vue';
+import QiXiang from './components/qixiang.vue';
+</script>
+<style scoped lang="scss">
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+
+.card {
+    .item {
+        flex: 1;
+        height: 123px;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 12px;
+        background-color: #fff;
+    }
+
+}
+</style>
