Merge branch 'tcy' of http://192.168.110.2:3000/taoge_xiaodi/maintenance_system into lx
This commit is contained in:
75
src/views/pvSystem/siteOverview/allAlarms.vue
Normal file
75
src/views/pvSystem/siteOverview/allAlarms.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="allAlarms">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<TitleComponent title="所有告警"></TitleComponent>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row class="right-align-row">
|
||||
<el-col :span="8">
|
||||
<el-input prefix-icon="search" placeholder="搜索告警信息"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4" style="text-align: right;">
|
||||
<el-button icon="download" type="primary">
|
||||
导出数据
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table :data="tableData" style="width: 100%;">
|
||||
<el-table-column label="告警编号" prop="id"></el-table-column>
|
||||
<el-table-column label="告警名称" prop="title"></el-table-column>
|
||||
<el-table-column label="告警等级" prop="level"></el-table-column>
|
||||
<el-table-column label="告警时间" prop="alarmTime"></el-table-column>
|
||||
<el-table-column label="负责人" prop="responsible"></el-table-column>
|
||||
<el-table-column label="告警描述" prop="description"></el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="scope.row.status === 1 ? 'success' : scope.row.status === 2 ? 'warning' : 'danger'">{{
|
||||
scope.row.status === 1 ? '已解决' : scope.row.status === 2 ? '待解决' : '未解决' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="background-color: #fff;padding: 20px 0;">
|
||||
<el-pagination layout="prev, pager, next, jumper,sizes" :total="totalRecords"
|
||||
v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
|
||||
@current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.allAlarms {
|
||||
background-color: #F2F8FC;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.right-align-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import TitleComponent from '@/components/TitleComponent';
|
||||
const pageSize = ref(20);
|
||||
const totalRecords = ref(100);
|
||||
const tableData = computed(() => {
|
||||
return Array.from({ length: 15 }).map((_, index) => {
|
||||
return {
|
||||
id: index,
|
||||
title: `逆变器温度过高`,
|
||||
id: `INV-2023-003`,
|
||||
level: `二级`,
|
||||
alarmTime: '2025-09-18 18:00',
|
||||
// 预计解决时间
|
||||
resolveTime: '2025-09-19 18:00',
|
||||
// 负责人
|
||||
responsible: '李华(现场运维组)',
|
||||
description: `AAAABBBCCCDE...`,
|
||||
status: Math.floor(Math.random() * 3) + 1
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,7 +1,7 @@
|
||||
<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 style="margin-right: 5px;color: rgba(113, 128, 150, 1);font-size: 14px;" @click="handleClick">
|
||||
查看全部告警信息
|
||||
</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8"
|
||||
@ -207,4 +207,11 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
const router = useRouter();
|
||||
const handleClick = () => {
|
||||
console.log('查看全部告警信息');
|
||||
router.push('/pvSystem/allAlarms');
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,4 +1,5 @@
|
||||
<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="规则编号">
|
||||
@ -53,11 +54,37 @@
|
||||
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</el-card>
|
||||
<el-dialog v-model="dialogVisible" width="1000" id="custom-dialog" class="no-header-dialog normal">
|
||||
<div class="alert-content">
|
||||
<div class="img">
|
||||
<img src="/assets/dialog1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss">
|
||||
// #custom-dialog {
|
||||
// padding: 0;
|
||||
|
||||
// .el-dialog__header {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// .el-dialog__body {
|
||||
// padding: 0 !important;
|
||||
// }
|
||||
|
||||
// .alert-content {
|
||||
// padding: 80px;
|
||||
// background: linear-gradient(180deg, rgba(0, 119, 255, 0.23) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
// }
|
||||
// }</style>
|
||||
<script setup>
|
||||
const formInline = ref({})
|
||||
const total = ref(0);
|
||||
const loading = ref(false);
|
||||
const dialogVisible = ref(true);
|
||||
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 },
|
||||
|
||||
@ -177,11 +177,15 @@
|
||||
<QiXiang />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div>
|
||||
<el-row :gutter="20"> <!-- gutter:列之间的间距(单位px),控制垂直/水平间距 -->
|
||||
<!-- 标题列:占满12列(栅格系统默认12列) -->
|
||||
<el-col> <!-- span=12 表示占满一行宽度 -->
|
||||
<TitleComponent title="逆变器运行状态" :fontLevel="2" />
|
||||
</div>
|
||||
<status style="width: 100%;" />
|
||||
</el-col>
|
||||
<!-- status组件列:同样占满12列,与标题垂直排列 -->
|
||||
<el-col>
|
||||
<status style="width: 100%;" /> <!-- 确保组件宽度100%,不溢出 -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="display: flex;">
|
||||
<el-col :span="6" style="display: flex;flex-direction: column;">
|
||||
|
||||
Reference in New Issue
Block a user