taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.新增报警管理部分图表

Browse Source 
2.修改箭头为本地图片
3.优化部分样式
4.完成性能比水滴图
This commit is contained in:
re-JZzzz
2025-09-17 20:02:08 +08:00
parent f28a617bb3
commit 63167f66e7
23 changed files with 2184 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
src/views/integratedManage/stateManage/components/manageForm.vue Normal file
View File

@ -0,0 +1,332 @@
<template>
<div class="manage-form-container">
<!-- 搜索和筛选区域 -->
<!-- 设备信息表格 -->
<el-table v-loading="loading" :data="deviceList" style="width: 100%" height="calc(100vh - 300px)">
<el-table-column prop="deviceId" label="设备ID" min-width="120" align="center" />
<el-table-column prop="deviceName" label="设备名称" min-width="120" align="center" />
<el-table-column prop="deviceType" label="类型" min-width="100" align="center">
<template #default="scope">
<el-tag :type="getDeviceTypeTagType(scope.row.deviceType)" :effect="'light'">
{{ scope.row.deviceType }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="station" label="所属电站" min-width="120" align="center" />
<el-table-column prop="protocol" label="通讯协议" min-width="100" align="center" />
<el-table-column prop="ipAddress" label="IP地址" min-width="120" align="center" />
<el-table-column prop="lastOnlineTime" label="最后在线时间" min-width="150" align="center" />
<el-table-column prop="status" label="状态" min-width="80">
<template #default="scope">
<el-tag :type="getStatusTagType(scope.row.status)" :effect="getStatusTagEffect(scope.row.status)">
{{ getStatusText(scope.row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" min-width="150" fixed="right">
<template #default="scope">
<el-button type="primary" link @click="handleDetails(scope.row)" size="small">
查看
</el-button>
<el-button type="primary" link @click="handleConfig(scope.row)" size="small">
配置
</el-button>
<el-button type="primary" link @click="handleDelete(scope.row)" size="small">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页区域 -->
<div class="pagination-container">
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
:page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
// 搜索表单数据
const searchForm = reactive({
deviceType: '',
station: '',
protocol: '',
status: '',
keyword: ''
});
// 表格加载状态
const loading = ref(false);
// 分页数据
const pagination = reactive({
currentPage: 1,
pageSize: 10,
total: 545
});
// 设备列表数据
const deviceList = ref([
{
deviceId: 'WO-2023-0620-056',
deviceName: '逆变器-01',
deviceType: '逆变器',
station: '兴电基站1',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-057',
deviceName: '温度传感器-45',
deviceType: '传感器',
station: '兴电基站2',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'interrupt'
},
{
deviceId: 'WO-2023-0620-058',
deviceName: '智能电表-03',
deviceType: '电表',
station: '兴电基站3',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'abnormal'
},
{
deviceId: 'WO-2023-0620-059',
deviceName: '监控摄像头-02',
deviceType: '摄像头',
station: '兴电基站4',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-060',
deviceName: '控制器-07',
deviceType: '控制器',
station: '兴电基站5',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-061',
deviceName: '逆变器-02',
deviceType: '逆变器',
station: '兴电基站1',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-062',
deviceName: '电流传感器-08',
deviceType: '传感器',
station: '兴电基站1',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-063',
deviceName: '多功能电表-12',
deviceType: '电表',
station: '兴电基站1',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-064',
deviceName: '门禁摄像头-05',
deviceType: '摄像头',
station: '兴电基站1',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-065',
deviceName: '开关控制器-15',
deviceType: '控制器',
station: '兴电基站1',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
}
]);
// 获取状态文本
const getStatusText = (status) => {
const statusMap = {
normal: '正常',
interrupt: '中断',
abnormal: '异常'
};
return statusMap[status] || status;
};
// 获取状态标签类型
const getStatusTagType = (status) => {
const typeMap = {
normal: 'success',
interrupt: 'warning',
abnormal: 'danger'
};
return typeMap[status] || 'default';
};
// 获取状态标签效果
const getStatusTagEffect = (status) => {
// 正常状态使用浅色效果，其他状态使用深色效果
return status === 'normal' ? 'light' : 'dark';
};
// 获取设备类型标签类型
const getDeviceTypeTagType = (deviceType) => {
const typeMap = {
'逆变器': 'primary',
'传感器': 'success',
'电表': 'warning',
'摄像头': 'info',
'控制器': 'danger'
};
return typeMap[deviceType] || 'default';
};
// 处理搜索
const handleSearch = () => {
loading.value = true;
// 模拟搜索请求
setTimeout(() => {
loading.value = false;
ElMessage.success('搜索成功');
// 实际项目中这里应该调用API获取数据
}, 500);
};
// 处理添加设备
const handleAddDevice = () => {
// 实际项目中这里应该打开添加设备的弹窗或跳转到添加页面
ElMessage.success('打开添加设备窗口');
};
// 处理批量配置
const handleBatchConfig = () => {
// 实际项目中这里应该打开批量配置的弹窗
ElMessage.success('打开批量配置窗口');
};
// 处理查看详情
const handleDetails = (row) => {
// 实际项目中这里应该打开设备详情的弹窗或跳转到详情页面
ElMessage.success(`查看设备${row.deviceCode}详情`);
};
// 处理配置
const handleConfig = (row) => {
// 实际项目中这里应该打开设备配置的弹窗
ElMessage.success(`配置设备${row.deviceCode}`);
};
// 处理删除
const handleDelete = (row) => {
ElMessageBox.confirm(
`确定要删除设备${row.deviceCode}吗？`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(() => {
// 实际项目中这里应该调用API删除设备
ElMessage.success('删除成功');
})
.catch(() => {
ElMessage.info('已取消删除');
});
};
// 处理分页大小变化
const handleSizeChange = (size) => {
pagination.pageSize = size;
// 实际项目中这里应该重新请求数据
};
// 处理分页页码变化
const handleCurrentChange = (current) => {
pagination.currentPage = current;
// 实际项目中这里应该重新请求数据
};
</script>
<style scoped>
.manage-form-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
min-height: 100%;
}
.search-form {
margin-bottom: 20px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.action-buttons {
margin-bottom: 20px;
display: flex;
gap: 10px;
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: flex-end;
align-items: center;
}
/* 表格样式优化 */
:deep(.el-table) {
border-radius: 8px;
overflow: hidden;
}
:deep(.el-table__header-wrapper) {
background-color: #fafafa;
}
:deep(.el-table__row:hover) {
background-color: #f5f7fa;
}
/* 分页样式优化 */
:deep(.el-pagination) {
display: flex;
justify-content: flex-end;
}
</style>

214
src/views/integratedManage/stateManage/components/stateTrend.vue Normal file
View File

@ -0,0 +1,214 @@
<template>
<div class="chart-container">
<!--组件温度（℃） 图表内容区域 -->
<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);
// 图表实例
let chartInstance = null;
// 初始化图表
const initChart = () => {
if (chartRef.value && !chartInstance) {
chartInstance = echarts.init(chartRef.value);
}
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
show: true,
left: '8%',
icon: 'square',
itemWidth: 12,
itemHeight: 12,
textStyle: {
color: '#4E5969'
}
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#4E5969'
}
},
axisLine: {
lineStyle: {
color: '#EAEBF0'
}
},
data: ['9-12', '9-13', '9-14', '9-15', '9-16', '9-17', '9-18']
},
yAxis: {
type: 'value',
max: 150,
interval: 50,
axisLabel: {
textStyle: {
color: '#4E5969'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#EAEBF0',
type: 'dashed'
}
}
},
series: [
{
name: '正常',
data: [20, 10, 50, 80, 70, 10, 30],
type: 'bar',
stack: 'one',
color: '#7339F5',
itemStyle: {
// borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
barBorderRadius: 8
},
barWidth: '20',
},
{
name: '中断',
data: [80, 30, 50, 80, 70, 10, 30],
type: 'bar',
stack: 'one', //堆叠
color: '#FF8A00',
itemStyle: {
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
barBorderRadius: 8
},
},
{
name: '异常',
data: [50, 30, 50, 80, 70, 10, 30],
type: 'bar',
stack: 'one', //堆叠
color: '#DE4848',
itemStyle: {
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
barBorderRadius: 8
},
barWidth: '12',
}
]
};
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;
}
};
});
</script>
<style scoped>
.chart-container {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
height: 400px;
width: 100%;
padding: 5px;
box-sizing: border-box;
}
.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-content {
width: 100%;
height: 100%;
padding: 5px;
box-sizing: border-box;
}
@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;
}
}
</style>

201
src/views/integratedManage/stateManage/components/statusPie.vue Normal file
View File

@ -0,0 +1,201 @@
<template>
<div class="chart-container">
<!--组件温度（℃） 图表内容区域 -->
<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);
// 图表实例
let chartInstance = null;
// 初始化图表
const initChart = () => {
if (chartRef.value && !chartInstance) {
chartInstance = echarts.init(chartRef.value);
}
const option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
// 定义名称映射关系
const nameMap = {
'提示信息': '设备正常',
'一般告警': '设备中断',
'重要告警': '设备异常'
};
// 使用ECharts提供的百分比值
const percentage = params.percent.toFixed(1);
// 返回格式化后的文本
return `${nameMap[params.name]}: ${params.value}台 (${percentage}%)`;
}
},
grid: {
left: '0%',
right: '20%',
bottom: '0%',
top: '0%',
containLabel: true
},
legend: {
top: 'middle',
orient: 'vertical',
right: '5%', // 调整图例位置，使其更靠近左侧
itemWidth: 15,
itemHeight: 15,
formatter: function(name) {
// 定义名称映射关系
const nameMap = {
'提示信息': '设备正常',
'一般告警': '设备中断',
'重要告警': '设备异常'
};
// 定义数值映射关系
const valueMap = {
'提示信息': 28,
'一般告警': 45,
'重要告警': 55
};
// 返回格式化后的文本
return `${nameMap[name] || name}(${valueMap[name]})`;
}
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
label: {
show: false
},
labelLine: {
show: true
},
color: [
'#43CF7C', // 设备正常
'#00B3FF', // 设备中断
'#FB3E7A', // 设备异常
],
data: [
{ value: 28, name: '提示信息' },
{ value: 45, name: '一般告警' },
{ value: 55, name: '重要告警' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
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;
}
};
});
</script>
<style scoped>
.chart-container {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
height: 150px;
width: 100%;
padding: 5px;
box-sizing: border-box;
}
.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-content {
width: 100%;
height: 100%;
padding: 5px;
box-sizing: border-box;
}
@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>

93
src/views/integratedManage/stateManage/index.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<div class="model">
<!-- 标题栏 -->
<el-row>
<el-col :span="12">
<TitleComponent title="报警管理" subtitle="配置新能源厂站的报警级别、类型及相关规则" />
</el-col>
</el-row>
<!-- 第一行：报警管理和报警级别分布 -->
<el-row :gutter="20" class="content-row">
<el-col :span="16">
<el-card shadow="hover" class="custom-card">
<TitleComponent title="报警管理" :font-level="2" />
<totalView />
</el-card>
</el-col>
<el-col :span="8">
<!-- 报警级别分布 -->
<el-card shadow="hover" class="custom-card">
<TitleComponent title="报警级别分布" :font-level="2" />
<statusPie />
</el-card>
</el-col>
</el-row>
<!-- 第二行：报警趋势分析 -->
<el-row :gutter="20" class="content-row">
<el-col :span="24">
<el-card shadow="hover" class="custom-card">
<TitleComponent title="报警趋势分析" :font-level="2" />
<stateTrend />
</el-card>
</el-col>
</el-row>
<!-- 第三行：报警管理表单 -->
<el-row :gutter="20" class="content-row">
<el-col :span="24">
<el-card shadow="hover" class="custom-card">
<TitleComponent title="报警管理表单" :font-level="2" />
<manageForm />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup>
import TitleComponent from '@/components/TitleComponent/index.vue';
import totalView from '@/views/integratedManage/alarmManage/components/totalView.vue';
import stateTrend from '@/views/integratedManage/stateManage/components/stateTrend.vue'
import statusPie from '@/views/integratedManage/stateManage/components/statusPie.vue'
import manageForm from '@/views/integratedManage/stateManage/components/manageForm.vue';
</script>
<style scoped>
.model {
padding: 20px 15px;
background-color: rgba(242, 248, 252, 1);
}
.content-row {
margin-bottom: 20px;
}
.custom-card {
border-radius: 8px;
transition: all 0.3s ease;
border: none;
}
.custom-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* 响应式布局调整 */
@media (max-width: 1200px) {
.content-row {
margin-bottom: 15px;
}
}
@media (max-width: 768px) {
.model {
padding: 15px 10px;
}
.content-row {
margin-bottom: 10px;
}
}
</style>