逆变器综合监控

This commit is contained in:
tcy
2025-08-27 17:45:27 +08:00
parent e7dc466c88
commit 93c2f6e512
22 changed files with 496 additions and 10 deletions

View File

@ -8,11 +8,11 @@ VITE_APP_ENV = 'development'
# 李陈杰 209
# VITE_APP_BASE_API = 'http://192.168.110.209:8899'
# 曾涛
VITE_APP_BASE_API = 'http://192.168.110.180:8899'
# VITE_APP_BASE_API = 'http://192.168.110.180:8899'
# 罗成
# VITE_APP_BASE_API = 'http://192.168.110.213:8899'
# 朱银
# VITE_APP_BASE_API = 'http://192.168.110.149:8899'
VITE_APP_BASE_API = 'http://192.168.110.149:8899'
#曾涛
# VITE_APP_BASE_API = 'http://192.168.110.171:8899'

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 1014 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 993 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
public/assets/demo/wcl.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/assets/demo/ycl.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/assets/demo/zzcl.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/demo/avatar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
src/assets/demo/gaojing.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/demo/rain.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
src/assets/demo/wcl.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/demo/yichuli.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/demo/zzcl.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -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/demo/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/demo/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/demo/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/demo/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>

View File

@ -46,14 +46,14 @@
<div class="time">16:00</div>
<div class="temp">30°C</div>
<div class="img-box">
<img src="/assets/demo/Sunny.png" alt="">
<img src="/assets/demo/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/demo/Sunny.png" alt="">
<img src="/assets/demo/sunny_s.png" alt="">
</div>
</div>
<div class="time-item">
@ -69,10 +69,10 @@
<div class="time">现在</div>
<div class="temp">25°C</div>
<div class="img-box">
<img src="/assets/demo/rain.png" alt="">
<img src="/assets/demo/rain_show.png" alt="">
</div>
</div>
<div class="time-item ">
<div class="time-item">
<div class="time">20:00</div>
<div class="temp">25°C</div>
<div class="img-box">
@ -132,8 +132,9 @@
}
.img-box {
width: 50px;
height: 50px;
width: 40px;
height: 40px;
margin: 10px 0;
}
img {
@ -171,6 +172,7 @@
position: relative;
// z-index: 888;
background-color: #fff;
padding: 0 5px;
}

View File

@ -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>

File diff suppressed because one or more lines are too long

View File

@ -178,8 +178,24 @@
</el-col>
</el-row>
<el-row>
<div>
<TitleComponent title="逆变器运行状态" :fontLevel="2" />
</div>
<status style="width: 100%;" />
</el-row>
<el-row style="display: flex;">
<el-col :span="6" style="display: flex;flex-direction: column;">
<div>
<TitleComponent title="今日值班信息" :fontLevel="2" />
</div>
<zhiban style="width: 100%;flex-grow: 1;overflow: auto;" />
</el-col>
<el-col :span="17" :offset="1">
<div>
<TitleComponent title="最近告警消息" :fontLevel="2" />
</div>
<gaojing />
</el-col>
</el-row>
</div>
</template>
@ -187,6 +203,9 @@
import TitleComponent from './components/TitleComponent.vue';
import ChartBox from './components/ChartBox.vue';
import QiXiang from './components/qixiang.vue';
import status from './components/status.vue';
import zhiban from './components/zhiban.vue';
import gaojing from './components/gaojing.vue';
</script>
<style scoped lang="scss">
.model {