Merge branch 'tcy' of http://192.168.110.2:3000/taoge_xiaodi/maintenance_system into lx

src/assets/fonts/fonts.scss

@@ -0,0 +1,165 @@
+@font-face {
+    font-family: 'Rang_men_zheng'; //庞门正道字体
+    src: url('./PangmenTi/PangMenZhengDaoBiaoTiTi-1.ttf');
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Rang_men_zheng_title'; //庞门正道标题体
+    src: url('./PangMenZhengDaoBiaoTiTi/PangMenZhengDaoBiaoTiTi-1.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
+// 思源字体
+// @font-face {
+//     font-family: 'SourceHanSansCN-Bold';
+//     src: url('./ReflectTi/SourceHanSansCN-Bold_0.otf'); //暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'SourceHanSansCN-ExtraLight';
+//     src: url('./ReflectTi/SourceHanSansCN-ExtraLight.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'SourceHanSansCN-Heavy';
+//     src: url('./ReflectTi/SourceHanSansCN-Heavy.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'SourceHanSansCN-Light';
+//     src: url('./ReflectTi/SourceHanSansCN-Light.otf');
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'SourceHanSansCN-Medium';
+//     src: url('./ReflectTi/SourceHanSansCN-Medium_0.otf');
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: 'SourceHanSansCN-Normal';
+//     src: url('./ReflectTi/SourceHanSansCN-Normal.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+@font-face {
+    font-family: 'SourceHanSansCN-Regular';
+    src: url('./ReflectTi/SourceHanSansCN-Regular.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+// @font-face {
+//     font-family: 'SourceHanSansCN-Bold';
+//     src: url('./ReflectTi/SourceHanSerifCN-Bold.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: 'SourceHanSansCN-ExtraLight';
+//     src: url('./ReflectTi/SourceHanSerifCN-ExtraLight.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: 'SourceHanSerifCN-Heavy';
+//     src: url('./ReflectTi/SourceHanSerifCN-Heavy.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: 'SourceHanSerifCN-Light';
+//     src: url('./ReflectTi/SourceHanSerifCN-Light.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: 'SourceHanSerifCN-Medium';
+//     src: url('./ReflectTi/SourceHanSerifCN-Medium.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'SourceHanSerifCN-Regular';
+//     src: url('./ReflectTi/SourceHanSerifCN-Regular.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'SourceHanSerifCN-SemiBold';
+//     src: url('./ReflectTi/SourceHanSerifCN-SemiBold.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+// 阿里巴巴普惠体
+@font-face {
+    font-family: 'Alibaba-PuHuiTi-Bold';
+    src: url('./Alibaba/Alibaba-PuHuiTi-Bold.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+//阿里黑体
+@font-face {
+    font-family: 'AlimamaShuHeiTi-Bold';
+    src: url('./Alibaba/AlimamaShuHeiTi-Bold.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+// @font-face {
+//     font-family: 'Alibaba-PuHuiTi-Heavy';
+//     src: url('./Alibaba/Alibaba-PuHuiTi-Heavy.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'Alibaba-PuHuiTi-Light';
+//     src: url('./Alibaba/Alibaba-PuHuiTi-Light.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+@font-face {
+    font-family: 'Alibaba-PuHuiTi-Medium';
+    src: url('./Alibaba/Alibaba-PuHuiTi-Medium.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+// @font-face {
+//     font-family: 'Alibaba-PuHuiTi-Regular';
+//     src: url('./Alibaba/Alibaba-PuHuiTi-Regular.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+@font-face {
+    font-family: 'DOUYUFont'; //斗鱼追光体
+    src: url('./DouYu//斗鱼追光体2.0.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'D-Din'; 
+    src: url('./D-Din//D-DIN.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Roboto-Regular'; //Roboto
+    src: url('./Roboto//Roboto-Regular.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
+

src/components/TitleComponent/index.vue

@@ -1,7 +1,7 @@
 <template>
     <el-row>
         <el-col>
-            <div style="color: rgba(0, 30, 59, 1);;font-family: 'Alibaba-PuHuiTi-Bold';margin: 10px 0 0 0;"
+            <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>

src/main.ts

@@ -34,6 +34,8 @@ import i18n from '@/lang/index';
 // vxeTable
 import VXETable from 'vxe-table';
 import 'vxe-table/lib/style.css';
+import '@/assets/fonts/fonts.scss';
+
 VXETable.setConfig({
   zIndex: 999999
 });

src/views/pvSystem/mainSystemDiagram/components/RightTitle.vue

@@ -0,0 +1,38 @@
+<template>
+    <div style="display: flex;align-items: center;">
+        <div class="icon">
+            <img :src="`/assets/${icon}.png`" alt="图片" />
+        </div>
+        <div class="subtitle">
+            {{ subtitle }}
+        </div>
+    </div>
+</template>
+<script setup>
+const { subtitle, icon } = defineProps({
+    subtitle: {
+        type: String,
+        default: ''
+    },
+    icon: {
+        type: String,
+        default: ''
+    }
+})
+</script>
+<style scoped>
+.subtitle {
+    font-family: Alibaba-PuHuiTi-Bold;
+    font-size: 18px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 21.6px;
+    color: rgba(0, 30, 59, 1);
+    text-align: left;
+    vertical-align: top;
+}
+
+img {
+    width: 30px;
+}
+</style>

src/views/pvSystem/mainSystemDiagram/components/czzljl.vue

@@ -0,0 +1,226 @@
+<template>
+    <div class="operation-log-container">
+        <!-- 页面标题 -->
+        <div class="page-title">
+            <el-icon class="title-icon">
+                <DocumentChecked />
+            </el-icon>
+            <h1>操作指令记录</h1>
+        </div>
+
+        <!-- 搜索和操作区域 -->
+        <div class="search-bar">
+            <el-select v-model="selectedCommandType" placeholder="输入操作指令..." class="search-select" clearable>
+                <el-option v-for="type in commandTypes" :key="type.value" :label="type.label" :value="type.value" />
+            </el-select>
+
+            <el-button type="primary" class="send-btn">
+                <el-icon>
+                    <Paperclip />
+                </el-icon>
+                发送
+            </el-button>
+
+            <el-button type="primary" :plain="true" class="export-btn">
+                <el-icon>
+                    <Download />
+                </el-icon>
+                导出
+            </el-button>
+        </div>
+
+        <!-- 表格区域 -->
+        <el-table :data="tableData" border stripe class="log-table">
+            <el-table-column type="selection" width="50" />
+
+            <el-table-column prop="commandType" label="指令类型" width="120" />
+
+            <el-table-column prop="operationContent" label="操作内容" min-width="200" />
+
+            <el-table-column prop="device" label="设备" width="100" />
+
+            <el-table-column prop="status" label="状态" width="120" align="center">
+                <template #default="scope">
+                    <el-tag :type="scope.row.status === 'SUCCESS' ? 'success' : 'danger'" effect="light"
+                        class="status-tag">
+                        <el-icon :class="scope.row.status === 'SUCCESS' ? 'success-icon' : 'error-icon'">
+                            <Check v-if="scope.row.status === 'SUCCESS'" />
+                            <Close v-else />
+                        </el-icon>
+                        {{ scope.row.status }}
+                    </el-tag>
+                </template>
+            </el-table-column>
+
+            <el-table-column prop="time" label="时间" width="140" />
+        </el-table>
+
+        <!-- 分页区域 -->
+        <div class="pagination-container">
+            <div class="record-info">
+                显示第1到7条，共54条记录
+            </div>
+
+            <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :page-count="totalPages"
+                layout="prev, pager, next" @current-change="handlePageChange" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import {
+    DocumentChecked,
+    Paperclip,
+    Download,
+    Check,
+    Close
+} from '@element-plus/icons-vue';
+
+// 指令类型选项
+const commandTypes = [
+    { label: '系统自检', value: 'system_check' },
+    { label: '闭合馈线开关', value: 'close_feeder_switch' },
+    { label: '闭合保护开关', value: 'close_protection_switch' },
+    { label: '断开馈线开关', value: 'open_feeder_switch' },
+];
+
+// 选中的指令类型
+const selectedCommandType = ref('');
+
+// 表格数据
+const tableData = ref([
+    {
+        commandType: '系统自检',
+        operationContent: '系统进入正常供电模式.',
+        device: '主系统',
+        status: 'SUCCESS',
+        time: '09:51:24'
+    },
+    {
+        commandType: '闭合馈线开关',
+        operationContent: '馈线开关A已闭合，负载A.',
+        device: '主系统',
+        status: 'SUCCESS',
+        time: '09:41:20'
+    },
+    {
+        commandType: '闭合保护开关',
+        operationContent: '闭合母线开关',
+        device: '主系统',
+        status: 'ERROR',
+        time: '09:21:24'
+    },
+    {
+        commandType: '系统自检',
+        operationContent: '母线电压稳定在110KV',
+        device: '主系统',
+        status: 'SUCCESS',
+        time: '09:11:24'
+    },
+    {
+        commandType: '断开馈线开关',
+        operationContent: '闭合馈线开关',
+        device: '主系统',
+        status: 'SUCCESS',
+        time: '09:02:24'
+    },
+    {
+        commandType: '断开馈线开关',
+        operationContent: '闭合馈线开关',
+        device: '主系统',
+        status: 'SUCCESS',
+        time: '09:02:24'
+    },
+    {
+        commandType: '断开馈线开关',
+        operationContent: '闭合馈线开关',
+        device: '主系统',
+        status: 'SUCCESS',
+        time: '09:02:24'
+    }
+]);
+
+// 分页相关
+const currentPage = ref(3);
+const pageSize = ref(7);
+const totalPages = ref(20);
+
+// 处理页码变化
+const handlePageChange = (page) => {
+    currentPage.value = page;
+    // 实际应用中这里会根据页码加载对应的数据
+    console.log(`切换到第${page}页`);
+};
+</script>
+
+<style scoped>
+.operation-log-container {
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 0 20px;
+}
+
+.page-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.title-icon {
+    margin-right: 8px;
+    color: #409eff;
+}
+
+.search-bar {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+    align-items: center;
+}
+
+.search-select {
+    flex: 0 1 300px;
+}
+
+.send-btn,
+.export-btn {
+    white-space: nowrap;
+}
+
+.log-table {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.status-tag {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.success-icon {
+    color: #67c23a;
+}
+
+.error-icon {
+    color: #f56c6c;
+}
+
+.pagination-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #606266;
+    font-size: 14px;
+}
+
+.record-info {
+    color: #606266;
+}
+
+.el-pagination {
+    --el-pagination-active-color: #409eff;
+}
+</style>

src/views/pvSystem/mainSystemDiagram/components/dzt.vue

@@ -0,0 +1,349 @@
+<template>
+    <el-card style="width: 100%;">
+        <div class="circuit-container">
+            <!-- 状态指示器 -->
+            <div class="status-indicators">
+                <div class="status-item">
+                    <span class="status-dot closed"></span>
+                    <span>闭合</span>
+                </div>
+                <div class="status-item">
+                    <span class="status-dot open"></span>
+                    <span>断开</span>
+                </div>
+                <div class="status-item">
+                    <span class="status-dot running"></span>
+                    <span>运行中</span>
+                </div>
+            </div>
+
+            <!-- 控制按钮 -->
+            <div class="control-buttons">
+                <button v-for="(device, index) in devices" :key="index" @click="toggleDevice(device.id)"
+                    :class="{ 'btn-active': device.status === 'closed' }">
+                    {{ device.name }}: {{ device.statusText }}
+                </button>
+            </div>
+
+            <!-- 电路图 SVG -->
+            <svg class="circuit-svg" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
+                <!-- 背景网格 -->
+                <pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
+                    <path d="M 50 0 L 0 0 0 50" fill="none" stroke="#f0f0f0" stroke-width="1" />
+                </pattern>
+                <rect width="100%" height="100%" fill="url(#grid)" />
+
+                <!-- 主线路径 -->
+                <!-- 发电站到主开关 -->
+                <line x1="100" y1="200" x2="180" y2="200" stroke="#22c55e" stroke-width="4" />
+
+                <!-- 主开关到变压器 -->
+                <line x1="220" y1="200" x2="280" y2="200" stroke="#22c55e" stroke-width="4" />
+
+                <!-- 变压器到母线开关 -->
+                <line x1="360" y1="200" x2="420" y2="200" stroke="#22c55e" stroke-width="4" />
+
+                <!-- 母线开关到分支点 -->
+                <line x1="460" y1="200" x2="500" y2="200" stroke="#22c55e" stroke-width="4" />
+
+                <!-- 分支点到馈线开关A -->
+                <line x1="500" y1="200" x2="500" y2="100" stroke="#22c55e" stroke-width="4" />
+                <line x1="500" y1="100" x2="580" y2="100" stroke="#22c55e" stroke-width="4" />
+
+                <!-- 分支点到馈线开关B -->
+                <line x1="500" y1="200" x2="500" y2="300" stroke="#ef4444" stroke-width="4" stroke-dasharray="5,5" />
+                <line x1="500" y1="300" x2="580" y2="300" stroke="#ef4444" stroke-width="4" stroke-dasharray="5,5" />
+
+                <!-- 馈线开关B到保护开关 -->
+                <line x1="620" y1="300" x2="700" y2="300" stroke="#ef4444" stroke-width="4" stroke-dasharray="5,5" />
+
+                <!-- 发电站 -->
+                <circle cx="100" cy="200" r="30" fill="#3b82f6" stroke="#1e40af" stroke-width="2" />
+                <text x="100" y="205" text-anchor="middle" fill="white" font-weight="bold">发电站</text>
+
+                <!-- 主开关 -->
+                <g :class="{ 'switch-closed': devices[0].status === 'closed' }">
+                    <circle cx="200" cy="200" r="15" :fill="devices[0].status === 'closed' ? '#10b981' : '#ef4444'" />
+                    <text x="200" y="250" text-anchor="middle" font-size="12">主开关</text>
+                    <text x="200" y="270" text-anchor="middle" font-size="10" fill="#666">220kV</text>
+                    <text x="200" y="285" text-anchor="middle" font-size="10"
+                        :fill="devices[0].status === 'closed' ? '#10b981' : '#ef4444'">
+                        {{ devices[0].statusText }}
+                    </text>
+                </g>
+
+                <!-- 变压器 -->
+                <g>
+                    <rect x="300" y="170" width="60" height="60" fill="white" stroke="#666" stroke-width="2" />
+                    <line x1="315" y1="190" x2="345" y2="190" stroke="#666" stroke-width="2" />
+                    <line x1="315" y1="210" x2="345" y2="210" stroke="#666" stroke-width="2" />
+                    <line x1="315" y1="230" x2="345" y2="230" stroke="#666" stroke-width="2" />
+                    <text x="330" y="285" text-anchor="middle" font-size="10" fill="#10b981">已完成</text>
+                </g>
+
+                <!-- 母线开关 -->
+                <g :class="{ 'switch-closed': devices[1].status === 'closed' }">
+                    <circle cx="440" cy="200" r="15" :fill="devices[1].status === 'closed' ? '#10b981' : '#ef4444'" />
+                    <text x="440" y="250" text-anchor="middle" font-size="12">母线开关</text>
+                    <text x="440" y="270" text-anchor="middle" font-size="10" fill="#666">110kV</text>
+                    <text x="440" y="285" text-anchor="middle" font-size="10"
+                        :fill="devices[1].status === 'closed' ? '#10b981' : '#ef4444'">
+                        {{ devices[1].statusText }}
+                    </text>
+                </g>
+
+                <!-- 分支点 -->
+                <circle cx="500" cy="200" r="8" fill="#666" />
+
+                <!-- 馈线开关A -->
+                <g :class="{ 'switch-closed': devices[2].status === 'closed' }">
+                    <circle cx="600" cy="100" r="15" :fill="devices[2].status === 'closed' ? '#10b981' : '#ef4444'" />
+                    <text x="600" y="60" text-anchor="middle" font-size="12">馈线开关A</text>
+                    <text x="600" y="80" text-anchor="middle" font-size="10"
+                        :fill="devices[2].status === 'closed' ? '#10b981' : '#ef4444'">
+                        {{ devices[2].statusText }}
+                    </text>
+                </g>
+
+                <!-- 负载A -->
+                <circle cx="680" cy="100" r="20" fill="#3b82f6" stroke="#1e40af" stroke-width="2" />
+                <text x="680" y="105" text-anchor="middle" fill="white" font-size="12">负载A</text>
+                <text x="680" y="135" text-anchor="middle" font-size="10" fill="#10b981">已完成</text>
+
+                <!-- 馈线开关B -->
+                <g :class="{ 'switch-closed': devices[3].status === 'closed' }">
+                    <circle cx="600" cy="300" r="15" :fill="devices[3].status === 'closed' ? '#10b981' : '#ef4444'" />
+                    <text x="600" y="340" text-anchor="middle" font-size="12">馈线开关B</text>
+                    <text x="600" y="360" text-anchor="middle" font-size="10"
+                        :fill="devices[3].status === 'closed' ? '#10b981' : '#ef4444'">
+                        {{ devices[3].statusText }}
+                    </text>
+                </g>
+
+                <!-- 保护开关 -->
+                <g :class="{ 'switch-closed': devices[4].status === 'closed' }">
+                    <circle cx="720" cy="300" r="15" :fill="devices[4].status === 'closed' ? '#10b981' : '#ef4444'" />
+                    <text x="720" y="340" text-anchor="middle" font-size="12">保护开关</text>
+                    <text x="720" y="360" text-anchor="middle" font-size="10"
+                        :fill="devices[4].status === 'closed' ? '#10b981' : '#ef4444'">
+                        {{ devices[4].statusText }}
+                    </text>
+                </g>
+            </svg>
+
+            <!-- WebSocket 连接状态 -->
+            <div class="connection-status">
+                <span>WebSocket 连接状态:</span>
+                <span :class="wsConnected ? 'connected' : 'disconnected'">
+                    {{ wsConnected ? '已连接' : '未连接' }}
+                </span>
+            </div>
+        </div>
+    </el-card>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+
+// 设备状态数据
+const devices = ref([
+    { id: 'main-switch', name: '主开关', status: 'closed', statusText: '已完成' },
+    { id: 'bus-switch', name: '母线开关', status: 'closed', statusText: '已完成' },
+    { id: 'feeder-a', name: '馈线开关A', status: 'closed', statusText: '已完成' },
+    { id: 'feeder-b', name: '馈线开关B', status: 'open', statusText: '未完成' },
+    { id: 'protection-switch', name: '保护开关', status: 'open', statusText: '未完成' }
+]);
+
+// WebSocket 连接状态
+const wsConnected = ref(false);
+let ws = null;
+
+// 切换设备状态
+const toggleDevice = (deviceId) => {
+    const device = devices.value.find(d => d.id === deviceId);
+    if (device) {
+        // 切换状态
+        device.status = device.status === 'closed' ? 'open' : 'closed';
+        device.statusText = device.status === 'closed' ? '已完成' : '未完成';
+
+        // 发送状态到服务器
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({
+                type: 'status-update',
+                deviceId,
+                status: device.status
+            }));
+        }
+    }
+};
+
+// 连接 WebSocket
+const connectWebSocket = () => {
+    // 实际应用中替换为真实的 WebSocket 服务器地址
+    const wsUrl = 'ws://localhost:8080/ws/circuit';
+
+    // 关闭现有连接
+    if (ws) {
+        ws.close();
+    }
+
+    // 创建新连接
+    ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+        console.log('WebSocket 连接已建立');
+        wsConnected.value = true;
+
+        // 发送当前状态
+        ws.send(JSON.stringify({
+            type: 'initial-status',
+            status: devices.value.reduce((acc, device) => {
+                acc[device.id] = device.status;
+                return acc;
+            }, {})
+        }));
+    };
+
+    ws.onmessage = (event) => {
+        try {
+            const data = JSON.parse(event.data);
+            console.log('收到消息:', data);
+
+            // 处理状态更新
+            if (data.type === 'status-update' && data.deviceId && data.status) {
+                const device = devices.value.find(d => d.id === data.deviceId);
+                if (device) {
+                    device.status = data.status;
+                    device.statusText = data.status === 'closed' ? '已完成' : '未完成';
+                }
+            }
+        } catch (error) {
+            console.error('解析 WebSocket 消息失败:', error);
+        }
+    };
+
+    ws.onclose = () => {
+        console.log('WebSocket 连接已关闭');
+        wsConnected.value = false;
+
+        // 5秒后尝试重连
+        setTimeout(connectWebSocket, 5000);
+    };
+
+    ws.onerror = (error) => {
+        console.error('WebSocket 错误:', error);
+    };
+};
+
+// 组件挂载时连接 WebSocket
+onMounted(() => {
+    connectWebSocket();
+});
+
+// 组件卸载时关闭 WebSocket 连接
+onUnmounted(() => {
+    if (ws) {
+        ws.close();
+    }
+});
+</script>
+
+<style scoped>
+.circuit-container {
+    font-family: Arial, sans-serif;
+    padding: 20px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.status-indicators {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 15px;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: 5px;
+}
+
+.status-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.status-dot {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.status-dot.closed {
+    background-color: #10b981;
+}
+
+.status-dot.open {
+    background-color: #ef4444;
+}
+
+.status-dot.running {
+    background-color: #eab308;
+}
+
+.control-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.control-buttons button {
+    padding: 8px 16px;
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.control-buttons button.btn-active {
+    background-color: #10b981;
+    color: white;
+    border-color: #059669;
+}
+
+.control-buttons button:hover {
+    background-color: #e0e0e0;
+}
+
+.control-buttons button.btn-active:hover {
+    background-color: #059669;
+}
+
+.circuit-svg {
+    width: 100%;
+    height: auto;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: white;
+}
+
+.connection-status {
+    margin-top: 15px;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: 5px;
+    display: flex;
+    gap: 10px;
+}
+
+.connection-status .connected {
+    color: #10b981;
+    font-weight: bold;
+}
+
+.connection-status .disconnected {
+    color: #ef4444;
+    font-weight: bold;
+}
+</style>

src/views/pvSystem/mainSystemDiagram/components/glsc.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <RightTitle subtitle="功率输出趋势" icon="glsc" />
+    </div>
+    <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts';
+import { ref, onMounted } from 'vue';
+import RightTitle from './RightTitle.vue';
+// 创建对 chart DOM 的引用
+const chartRef = ref(null);
+
+// 初始化图表并设置配置
+onMounted(() => {
+    const chart = echarts.init(chartRef.value); // 初始化图表
+
+    const option = {
+
+        tooltip: {
+            trigger: 'axis',
+        },
+        legend: {
+            data: ['发电机1', '发电机2'],
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+        },
+        yAxis: {
+            type: 'value',
+            min: 10,
+            max: 20,
+            interval: 2,
+        },
+        series: [
+            {
+                name: '发电机1',
+                type: 'line',
+                data: [14, 16, 14, 15, 16, 14, 16, 15, 16, 17, 16],
+                smooth: true,
+                color: '#3366FF',
+                areaStyle: {
+                    opacity: 0.2,
+                },
+            },
+            {
+                name: '发电机2',
+                type: 'line',
+                data: [16, 17, 15, 16, 18, 16, 17, 17, 18, 19, 18],
+                smooth: true,
+                color: '#FFCC00',
+                areaStyle: {
+                    opacity: 0.2,
+                },
+            },
+        ],
+    };
+
+    // 设置图表的配置
+    chart.setOption(option);
+});
+</script>
+
+<style scoped>
+/* Optional styling */
+</style>

src/views/pvSystem/mainSystemDiagram/components/sbqk.vue

@@ -0,0 +1,219 @@
+<template>
+    <el-card style="width: 100%;">
+        <div class="container">
+            <div class="item">
+                <div class="top">
+                    <div class="icon">
+                        <img src="/assets/sb1.png" alt="">
+                    </div>
+                    <div class="content">
+                        <p class="t1">运行中</p>
+                        <p class="t2">当前状态</p>
+                    </div>
+                </div>
+                <div class="bottom">
+                    <span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink" width="17.4462890625" height="4.361663818359375"
+                            viewBox="0 0 17.4462890625 4.361663818359375" fill="none">
+                            <path
+                                d="M14.43 2.05L14.43 0.4C14.43 0.32495 14.5049 0.25 14.58 0.25L14.66 0.25L17.14 2.05C17.2151 2.12505 17.2151 2.20495 17.14 2.28L14.66 4.08C14.585 4.15505 14.505 4.08 14.43 4.08L14.43 2.5L0.55 2.5C0.399897 2.6501 0.25 2.4301 0.25 2.28C0.25 2.12988 0.399897 1.98 0.55 1.98L14.43 1.98L14.43 2.05Z"
+                                stroke="rgba(67, 207, 124, 1)" stroke-width="0.5" fill="#43CF7C">
+                            </path>
+                        </svg>
+                    </span>
+                    <span class="t1">平稳运行</span>
+                    <span class="t2">(30 days)</span>
+                </div>
+            </div>
+            <div class="item">
+                <div class="top">
+                    <div class="icon">
+                        <img src="/assets/sb2.png" alt="">
+                    </div>
+                    <div class="content">
+                        <p class="t1" style="font-size: 21px;">128小时</p>
+                        <p class="t2">运行时长</p>
+                    </div>
+                </div>
+                <div class="bottom">
+                    <span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink" width="17.4462890625" height="4.361663818359375"
+                            viewBox="0 0 17.4462890625 4.361663818359375" fill="none">
+                            <path
+                                d="M14.43 2.05L14.43 0.4C14.43 0.32495 14.5049 0.25 14.58 0.25L14.66 0.25L17.14 2.05C17.2151 2.12505 17.2151 2.20495 17.14 2.28L14.66 4.08C14.585 4.15505 14.505 4.08 14.43 4.08L14.43 2.5L0.55 2.5C0.399897 2.6501 0.25 2.4301 0.25 2.28C0.25 2.12988 0.399897 1.98 0.55 1.98L14.43 1.98L14.43 2.05Z"
+                                stroke="rgba(67, 207, 124, 1)" stroke-width="0.5" fill="#43CF7C">
+                            </path>
+                        </svg>
+                    </span>
+                    <span class="t1">平稳运行</span>
+                    <span class="t2">(30 days)</span>
+                </div>
+            </div>
+            <div class="item">
+                <div class="top">
+                    <div class="icon">
+                        <img src="/assets/sb3.png" alt="">
+                    </div>
+                    <div class="content">
+                        <p class="t1">5/8</p>
+                        <p class="t2">已完成步骤</p>
+                    </div>
+                </div>
+                <div class="bottom">
+                    <span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink" width="12.393798828125" height="7.42498779296875"
+                            viewBox="0 0 12.393798828125 7.42498779296875" fill="none">
+                            <path
+                                d="M12.2438 0.225L12.2438 0.150012L12.2438 0.0750058L12.1688 0.0750058C12.1688 0.0750058 12.0937 0.0750058 12.0188 0L8.34376 0C7.96876 0 7.66876 0.300006 7.66876 0.675C7.66876 1.05001 7.96876 1.35 8.34376 1.35L10.2188 1.35L6.61876 4.95L4.81876 3.15C4.44375 2.775 3.69376 2.775 3.31875 3.15L0.16875 6.3C-0.05625 6.525 -0.05625 6.975 0.16875 7.2C0.318762 7.35001 0.468756 7.425 0.61875 7.425C0.768762 7.425 0.918756 7.425 1.06875 7.2L3.99375 4.275L5.79375 6.075C6.16876 6.45001 6.91875 6.45001 7.29376 6.075L11.0438 2.32501L11.0438 4.20001C11.0438 4.575 11.3438 4.87501 11.7188 4.87501C12.0937 4.87501 12.3938 4.575 12.3938 4.20001L12.3938 0.825011L12.3938 0.600011L12.2438 0.225Z"
+                                fill="#00B87A">
+                            </path>
+                        </svg>
+
+                    </span>
+                    <span class="t1">完成率98%</span>
+                    <span class="t2">(30 days)</span>
+                </div>
+            </div>
+            <div class="item">
+                <div class="top">
+                    <div class="icon">
+                        <img src="/assets/sb4.png" alt="">
+                    </div>
+                    <div class="content">
+                        <p class="t1" style="color: rgba(255, 153, 0, 1);">2条</p>
+                        <p class="t2">告警信息</p>
+                    </div>
+                </div>
+                <div class="bottom">
+                    <span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink" width="12.393798828125" height="7.42498779296875"
+                            viewBox="0 0 12.393798828125 7.42498779296875" fill="none">
+                            <path
+                                d="M12.2438 0.225L12.2438 0.150012L12.2438 0.0750058L12.1688 0.0750058C12.1688 0.0750058 12.0937 0.0750058 12.0188 0L8.34376 0C7.96876 0 7.66876 0.300006 7.66876 0.675C7.66876 1.05001 7.96876 1.35 8.34376 1.35L10.2188 1.35L6.61876 4.95L4.81876 3.15C4.44375 2.775 3.69376 2.775 3.31875 3.15L0.16875 6.3C-0.05625 6.525 -0.05625 6.975 0.16875 7.2C0.318762 7.35001 0.468756 7.425 0.61875 7.425C0.768762 7.425 0.918756 7.425 1.06875 7.2L3.99375 4.275L5.79375 6.075C6.16876 6.45001 6.91875 6.45001 7.29376 6.075L11.0438 2.32501L11.0438 4.20001C11.0438 4.575 11.3438 4.87501 11.7188 4.87501C12.0937 4.87501 12.3938 4.575 12.3938 4.20001L12.3938 0.825011L12.3938 0.600011L12.2438 0.225Z"
+                                fill="#00B87A">
+                            </path>
+                        </svg>
+
+                    </span>
+                    <span class="t1">4%</span>
+                    <span class="t2">(30 days)</span>
+                </div>
+            </div>
+            <div class="item day">
+                <span class="text">34522天</span>
+            </div>
+        </div>
+    </el-card>
+</template>
+<style scoped lang="scss">
+.content {
+    font-family: "Alibaba-PuHuiTi-Bold";
+}
+
+.container {
+    display: flex;
+    gap: 20px;
+}
+
+.day {
+    flex: 1.5 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background-color: transparent !important;
+    background-image: url('/assets/dayImg.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: 100% 50%;
+    position: relative;
+    width: 120px;
+
+    .text {
+        position: absolute;
+        bottom: 60px;
+        color: rgba(24, 109, 245, 1);
+        font-weight: bold;
+        font-size: 25px;
+        margin-left: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+
+.item {
+    background-color: rgba(240, 249, 255, 1);
+    padding: 30px 15px;
+    border-radius: 20px;
+    text-align: center;
+    flex: 1;
+    margin: 75px 0;
+
+    .top {
+        display: flex;
+        align-items: center;
+        text-align: left;
+
+        .icon {
+            img {
+                width: 100%;
+                height: 100%;
+                display: block;
+                margin-top: -20px;
+            }
+
+            width: 50px;
+            height: 50px;
+            margin-right: 20px;
+        }
+
+        .t1 {
+            font-size: 26px;
+        }
+
+        .t2 {
+            font-size: 18px;
+            color: rgba(62, 73, 84, 1);
+        }
+
+        p {
+            margin: 10px 0;
+        }
+    }
+
+    .bottom {
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .icon {
+            display: flex;
+            align-items: center;
+        }
+
+        .t1 {
+            color: rgba(0, 184, 122, 1);
+            margin: 0 5px;
+        }
+
+        .t2 {
+            color: rgba(150, 155, 160, 1);
+        }
+    }
+
+}
+
+
+
+
+:deep(.el-card__body) {
+    padding: 0 !important;
+}
+
+.box {
+    display: flex;
+    height: 100%;
+}
+</style>
+<script setup>
+
+</script>

src/views/pvSystem/mainSystemDiagram/components/sjjk.vue

@@ -0,0 +1,136 @@
+<template>
+    <RightTitle subtitle="实时数据监控" icon="sjjk" />
+
+    <div class="sjjk-container">
+        <div class="chart-container">
+            <div id="chart" class="echarts-wrapper" style="width: 800px; height: 200px;"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import RightTitle from './RightTitle.vue';
+import * as echarts from 'echarts';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+    // 初始化图表
+    const myChart = echarts.init(document.getElementById('chart'));
+
+    // 图表配置项
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+            },
+        },
+        legend: {
+            data: ['电压(kv)', '电流(A)', '功率(MW)'],
+        },
+        grid: {
+              top: '15%',
+              left: '12%',
+              right: '12%',
+              bottom: '20%',
+              containLabel: true,
+              show: false
+            },
+        xAxis: {
+            type: 'category',
+            data: ['发电机1', '发电机2', '发电机3', '发电机4', '发电机5', '发电机6'],
+            axisLabel: {
+                interval: 0,
+                rotate: 45
+            }
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '电压(kv)/电流(A)',
+                splitLine: {
+                    show: false
+                }
+            },
+            {
+                type: 'value',
+                name: '功率(MW)',
+                splitLine: {
+                    show: false
+                }
+            },
+        ],
+        series: [
+            {
+                name: '电压(kv)',
+                type: 'bar',
+                data: [80, 70, 55, 80, 80, 80],
+            },
+            {
+                name: '电流(A)',
+                type: 'bar',
+                data: [65, 80, 65, 65, 65, 65],
+            },
+            {
+                name: '功率(MW)',
+                type: 'bar',
+                yAxisIndex: 1,
+                data: [58, 80, 80, 58, 58, 58],
+            },
+        ],
+    };
+
+    // 渲染图表
+    myChart.setOption(option);
+
+    // 窗口大小变化时，图表自适应
+    window.addEventListener('resize', () => {
+        myChart.resize();
+    });
+});
+</script>
+
+<style scoped>
+:deep(.el-card__body) {
+    padding: 0;
+}
+
+.sjjk-container {
+    width: 100%;
+    height: 100%;
+    background: #ffffff;
+    border-radius: 8px;
+    /* padding: 20px; */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    width: 100%;
+    max-width: 800px;
+}
+
+.chart-container {
+    width: 100%;
+    max-width: 800px;
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.echarts-wrapper {
+    width: 100%;
+    height: 100%;
+    min-height: 400px;
+    border-radius: 4px;
+    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
+}
+</style>

src/views/pvSystem/mainSystemDiagram/index.vue

@@ -0,0 +1,42 @@
+<template>
+    <div style="padding: 20px;">
+        <el-row>
+            <el-col :span="15">
+                <el-row>
+                    <TitleComponent title="设备情况" subtitle="电站一次监控数据" />
+                    <sbqk />
+                </el-row>
+                <el-row>
+                    <TitleComponent title="电站一次系统图" subtitle="电站一次监控数据" />
+                    <dzt />
+                </el-row>
+                <el-row>
+                    <TitleComponent title="运行步骤日志" subtitle="实时更新中" />
+                    <!-- <sbqk /> -->
+                </el-row>
+            </el-col>
+            <el-col :span="8" :push="1">
+                <TitleComponent title="运行步骤日志" subtitle="实时更新中" />
+                <el-card style="padding: 0;">
+                    <sjjk />
+                    <glsc />
+                    <czzljl />
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
+
+</template>
+<style scoped>
+.el-card {
+    border-radius: 10px;
+}
+</style>
+<script setup>
+import TitleComponent from '@/components/TitleComponent';
+import sbqk from './components/sbqk.vue';
+import sjjk from './components/sjjk.vue';
+import glsc from './components/glsc.vue';
+import czzljl from './components/czzljl.vue';
+import dzt from './components/dzt.vue';
+</script>

src/views/pvSystem/siteOverview/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>

src/views/pvSystem/siteOverview/components/gaojing.vue

@@ -0,0 +1,210 @@
+<template>
+    <el-card shadow="never" style="border-radius: 10px;">
+        <div style="margin-bottom: 20px;display: flex;align-items: center;justify-content: right;">
+            <span style="margin-right: 5px;color: rgba(113, 128, 150, 1);font-size: 14px;">
+                查看全部告警信息
+            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8"
+                viewBox="0 0 8 8" fill="none">
+                <path
+                    d="M5.94575 4.15722C5.94975 4.14947 5.95624 4.14298 5.95975 4.13497C6.0285 3.99197 6.00599 3.81697 5.88425 3.70197L3.1245 1.09172C2.97399 0.949466 2.73676 0.956216 2.59425 1.10648C2.45199 1.25698 2.4585 1.49422 2.60901 1.63673L5.08526 3.97922L2.61875 6.35647C2.46975 6.50021 2.46525 6.73746 2.60901 6.88672C2.6825 6.96321 2.78076 7.00148 2.87901 7.00148C2.97276 7.00148 3.06651 6.96648 3.13926 6.89648L5.87401 4.26073C5.87927 4.25547 5.88125 4.24823 5.88651 4.24274C5.89052 4.23899 5.89476 4.23623 5.89875 4.23224C5.92 4.20997 5.93124 4.18272 5.94575 4.15722Z"
+                    fill="#718096">
+                </path>
+            </svg>
+        </div>
+        <div class="notice">
+            <div class="item">
+                <div class="icon">
+                    <img src="/assets/zgjxx.png" alt="">
+                </div>
+                <div class="content">
+                    <p>总告警信息</p>
+                    <p style="color: rgba(42, 130, 228, 1);">1,921条</p>
+                </div>
+            </div>
+            <div class="item">
+                <div class="icon">
+                    <img src="/assets/ycl.png" alt="">
+                </div>
+                <div class="content">
+                    <p>已处理</p>
+                    <p style="color:rgba(0, 184, 122, 1);">500条</p>
+                </div>
+            </div>
+            <div class="item">
+                <div class="icon">
+                    <img src="/assets/zzcl.png" alt="">
+                </div>
+                <div class="content">
+                    <p>正在处理</p>
+                    <p style="color: rgba(255, 141, 26, 1);">200条</p>
+                </div>
+            </div>
+            <div class="item">
+                <div class="icon">
+                    <img src="/assets/wcl.png" alt="">
+                </div>
+                <div class="content">
+                    <p>未处理</p>
+                    <p style="color: rgba(227, 39, 39, 1);">1,221</p>
+                </div>
+            </div>
+        </div>
+        <div class="content">
+            <div class="list">
+                <div class="item waring">
+                    <div class="left">
+                        <p class="title">
+                            逆变器温度过高
+                        </p>
+                        <p class="text">INV-2023-003 温度达到52℃，超过阈值48℃</p>
+                    </div>
+                    <div class="right">
+                        <div class="time">
+                            10分钟前
+                        </div>
+                        <el-text type="warning" size="small">正在处理</el-text>
+                    </div>
+                </div>
+                <div class="item danger">
+                    <div class="left">
+                        <p class="title">
+                            通信中断
+                        </p>
+                        <p class="text">INV-2023-003 与监控系统通信中断</p>
+                    </div>
+                    <div class="right">
+                        <div class="time">
+                            20分钟前
+                        </div>
+                        <el-text type="primary" size="small">查看详情</el-text>
+                    </div>
+                </div>
+                <div class="item danger">
+                    <div class="left">
+                        <p class="title">
+                            通信中断
+                        </p>
+                        <p class="text">INV-2023-003 与监控系统通信中断</p>
+                    </div>
+                    <div class="right">
+                        <div class="time">
+                            1小时前
+                        </div>
+                        <el-text type="primary" size="small">查看详情</el-text>
+                    </div>
+                </div>
+                <div class="item grey">
+                    <div class="left">
+                        <p class="title">
+                            逆变器温度过高
+                        </p>
+                        <p class="text">INV-2023-003 温度达到52℃，超过阈值48℃</p>
+                    </div>
+                    <div class="right">
+                        <div class="time">
+                            2小时前
+                        </div>
+                        <!-- <el-text type="primary" size="small">查看详情</el-text> -->
+                        <el-button type="info" size="small" disabled>已处理</el-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </el-card>
+</template>
+<style scoped lang="scss">
+.notice {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(32, 32, 32, 0.05);
+    padding-bottom: 20px;
+
+    .item {
+        display: flex;
+    }
+
+    p {
+        padding: 0;
+        margin: 0;
+    }
+
+    .icon {
+        width: 50px;
+        height: 50px;
+        margin-right: 10px;
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .content p:nth-child(2) {
+        font-size: 14px;
+        margin-top: 5px;
+    }
+}
+
+.content {
+    .item {
+        border-radius: 10px;
+        padding: 0 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .text {
+            color: rgba(125, 133, 146, 1);
+            font-size: 12px;
+        }
+
+        .title {
+            font-size: 16px;
+        }
+
+        .right {
+            font-size: 12px;
+            color: rgba(125, 133, 146, 1);
+
+            .time {
+                margin-bottom: 5px;
+            }
+        }
+    }
+
+    .waring {
+        background-color: #FFFCE6;
+        border: 1px solid #FFF0E1;
+
+        .title {
+            color: #FFA408;
+        }
+    }
+
+    .danger {
+        background-color: #FFE9E5;
+        border: 1px solid #FFEFEB;
+
+        .title {
+            color: rgba(255, 87, 51, 1);
+        }
+    }
+
+    .grey {
+        background-color: #F3F3F3;
+        border: 1px solid #FCFCFC;
+
+        .right {
+            text-align: right;
+        }
+
+        .title {
+            color: rgba(102, 102, 102, 1);
+        }
+    }
+}
+</style>
+<script setup></script>

src/views/pvSystem/siteOverview/components/qixiang.vue

@@ -0,0 +1,216 @@
+<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/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/shidu.png" alt="" />
+            </div>
+            <div class="text">相对湿度： <span>45%</span></div>
+          </div>
+          <div class="item">
+            <div>
+              <img src="/assets/qiangdu.png" alt="" />
+            </div>
+            <div class="text">光照强度： <span>45%</span></div>
+          </div>
+          <div class="item">
+            <div>
+              <img src="/assets/fengshu.png" alt="" />
+            </div>
+            <div class="text">风速： <span>2.3m/s</span></div>
+          </div>
+          <div class="item">
+            <div>
+              <img src="/assets/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/sunny_s.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/sunny_s.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/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/rain_show.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/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/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: 40px;
+    height: 40px;
+    margin: 10px 0;
+  }
+
+  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;
+    padding: 0 5px;
+  }
+
+  .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>

src/views/pvSystem/siteOverview/components/status.vue

@@ -0,0 +1,107 @@
+<template>
+    <el-card shadow="never" style="border-radius: 10px;">
+        <el-form :inline="true" :model="formInline" label-width="120" style="display: flex; justify-content: center;">
+            <el-form-item label="规则编号">
+                <el-input v-model="formInline.user" placeholder="请输入规则编号" clearable />
+            </el-form-item>
+            <el-form-item label="状态">
+                <el-select v-model="formInline.region" placeholder="请输入状态" clearable>
+                    <el-option label="Zone one" value="shanghai" />
+                    <el-option label="Zone two" value="beijing" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="更新时间">
+                <el-date-picker v-model="formInline.date" type="date" placeholder="请选择时间" clearable />
+            </el-form-item>
+            <el-form-item>
+                <el-button icon="search" type="primary" @click="onSubmit">搜索</el-button>
+            </el-form-item>
+            <el-form-item>
+                <el-button icon="refresh" type="default" @click="onSubmit">重置</el-button>
+            </el-form-item>
+        </el-form>
+        <el-table v-loading="loading" :data="listData" @selection-change="handleSelectionChange">
+            <!-- <el-table-column type="index" width="50" label="序号" /> -->
+            <el-table-column label="逆变器编号" align="center" prop="id" />
+            <!-- <el-table-column label="合同类型" align="center" prop="contractType">
+                <template #default="scope">
+                    <dict-tag :options="income_contract_type" :value="scope.row.contractType" />
+                </template>
+</el-table-column> -->
+            <el-table-column label="输出功率" align="center" prop="shuchu" />
+            <el-table-column label="效率" align="center" prop="xiaolv" />
+            <el-table-column label="温度" align="center" prop="wendu" />
+            <el-table-column label="今日发电量" align="center" prop="fadian" />
+            <el-table-column label="状态" align="center" prop="status">
+                <template #default="scope">
+                    <!-- <el-button link type="primary">详情</el-button>
+                    <el-button link type="danger">处理</el-button>
+                    <el-button link type="warning">维护记录</el-button> -->
+                    <el-tag :type="statusMap[scope.row.status].type">{{ statusMap[scope.row.status].label }}</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
+                <template #default="scope">
+                    <el-button link type="primary">详情</el-button>
+                    <el-button link type="danger">处理</el-button>
+                    <el-button link type="warning">维护记录</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <!-- <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize" @pagination="getList" /> -->
+        <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+            @pagination="getList" />
+    </el-card>
+</template>
+<script setup>
+const formInline = ref({})
+const total = ref(0);
+const loading = ref(false);
+const listData = [
+    { id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 1 },
+    { id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 1 },
+    { id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 2 },
+    { id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 2 },
+    { id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 3 },
+    { id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 3 }
+]
+const statusMap = {
+    1: {
+        label: "正常运行",
+        type: "success"
+    },
+    2: {
+        label: "异常",
+        type: "danger"
+    },
+    3: {
+        label: "维护中",
+        type: "warning"
+    }
+}
+const initFormData = {
+
+};
+const data = reactive({
+    form: { ...initFormData },
+    queryParams: {
+
+    },
+});
+const { queryParams, form, rules } = toRefs(data);
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection) => {
+    ids.value = selection.map((item) => item.id);
+    single.value = selection.length != 1;
+    multiple.value = !selection.length;
+};
+const getList = async () => {
+    //   loading.value = true;
+    //   const res = await listIncomeContract(queryParams.value);
+    //   incomeContractList.value = res.rows;
+    //   total.value = res.total;
+    //   loading.value = false;
+};
+</script>