feat: 添加光伏系统主系统图页面及相关组件
新增主系统图页面及多个组件，包括设备情况、实时数据监控、功率输出趋势、操作指令记录等。添加天气图标、字体文件和样式资源，实现系统状态监控和操作功能。优化图表展示和交互体验，完善响应式布局。
This commit is contained in:
@ -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>
|
||||
226
src/views/pvSystem/mainSystemDiagram/components/czzljl.vue
Normal file
226
src/views/pvSystem/mainSystemDiagram/components/czzljl.vue
Normal file
@ -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>
|
||||
349
src/views/pvSystem/mainSystemDiagram/components/dzt.vue
Normal file
349
src/views/pvSystem/mainSystemDiagram/components/dzt.vue
Normal file
@ -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>
|
||||
69
src/views/pvSystem/mainSystemDiagram/components/glsc.vue
Normal file
69
src/views/pvSystem/mainSystemDiagram/components/glsc.vue
Normal file
@ -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>
|
||||
219
src/views/pvSystem/mainSystemDiagram/components/sbqk.vue
Normal file
219
src/views/pvSystem/mainSystemDiagram/components/sbqk.vue
Normal file
@ -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>
|
||||
136
src/views/pvSystem/mainSystemDiagram/components/sjjk.vue
Normal file
136
src/views/pvSystem/mainSystemDiagram/components/sjjk.vue
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user