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

修改传参方式

Browse Source
This commit is contained in:
re-JZzzz
2025-09-20 19:27:56 +08:00
parent 3445e54da0
commit 7eabcd203f
15 changed files with 948 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/views/integratedManage/alarmManage/components/fenxiBar.vue
View File

@ -5,11 +5,26 @@
</div>
</template>
<script setup>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
// 定义props类型
interface TrendSeriesItem {
name: string;
data: number[];
color: string;
}
interface TrendData {
dates: string[];
series: TrendSeriesItem[];
}
// 定义props
const props = defineProps<{
trendData: TrendData;
}>();
// 图表DOM引用
const chartRef = ref(null);
@ -24,7 +39,7 @@ const initChart = () => {
const option = {
xAxis: {
type: "category",
data: ["09-04", "09-05", "09-06", "09-07", "09-08", "09-09", "09-10"],
data: props.trendData.dates,
axisTick: {
show: false // 去除刻度线
}
@ -52,48 +67,15 @@ const initChart = () => {
bottom: '3%',
containLabel: true
},
series: [
{
name: "维护提醒",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
itemStyle: {
color: "rgb(0, 179, 255)",
},
series: props.trendData.series.map((item, index) => ({
name: item.name,
data: item.data,
type: "bar",
barWidth: '10%' ,
itemStyle: {
color: item.color,
},
{
name: "数据异常",
data: [80, 170, 100, 50, 90, 140, 170],
type: "bar",
itemStyle: {
color: "rgb(22, 93, 255)",
},
},
{
name: "信号减弱",
data: [60, 140, 100, 120, 110, 100, 130],
type: "bar",
itemStyle: {
color: "rgb(255, 153, 0)",
},
},
{
name: "温度过高",
data: [60, 140, 100, 120, 110, 100, 130],
type: "bar",
itemStyle: {
color: "rgb(250, 220, 25)",
},
},
{
name: "通讯中断",
data: [60, 140, 100, 120, 110, 100, 130],
type: "bar",
itemStyle: {
color: "rgb(251, 62, 122)",
}
}
],
})),
};
chartInstance.setOption(option);
@ -106,6 +88,13 @@ const handleResize = () => {
}
};
// 监听props变化
watch(() => props.trendData, () => {
if (chartInstance) {
initChart();
}
}, { deep: true });
// 生命周期钩子
onMounted(() => {
initChart();
@ -120,8 +109,6 @@ onMounted(() => {
}
};
});
</script>
<style scoped>

71
src/views/integratedManage/alarmManage/components/levelPie.vue
View File

@ -5,10 +5,29 @@
</div>
</template>
<script setup>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
// 定义props类型
interface PieItem {
value: number;
name: string;
displayName: string;
color: string;
}
interface PieData {
normal: PieItem;
interrupt: PieItem;
abnormal: PieItem;
serious: PieItem;
}
// 定义props
const props = defineProps<{
pieData: PieData;
}>();
// 图表DOM引用
const chartRef = ref(null);
@ -22,7 +41,10 @@ const initChart = () => {
}
const option = {
tooltip: {
trigger: 'item'
trigger: 'item',
formatter: (params: any) => {
return `${params.data.displayName}: ${params.value}`;
}
},
grid: {
left: '0%',
@ -37,6 +59,10 @@ const initChart = () => {
right: '5%', // 调整图例位置，使其更靠近左侧
itemWidth: 15,
itemHeight: 15,
formatter: (name: string) => {
const item = Object.values(props.pieData).find(item => item.name === name);
return item?.displayName || name;
}
},
series: [
{
@ -46,16 +72,32 @@ const initChart = () => {
show: false
},
color: [
'rgb(0, 179, 255)', // 提示信息
'rgb(45, 214, 131)', // 一般告警
'rgb(255, 208, 35)', // 重要告警
'rgb(227, 39, 39)' // 严重告警
props.pieData.normal.color,
props.pieData.interrupt.color,
props.pieData.abnormal.color,
props.pieData.serious.color
],
data: [
{ value: 1048, name: '提示信息' },
{ value: 735, name: '一般告警' },
{ value: 580, name: '重要告警' },
{ value: 484, name: '严重告警' },
{
value: props.pieData.normal.value,
name: props.pieData.normal.name,
displayName: props.pieData.normal.displayName
},
{
value: props.pieData.interrupt.value,
name: props.pieData.interrupt.name,
displayName: props.pieData.interrupt.displayName
},
{
value: props.pieData.abnormal.value,
name: props.pieData.abnormal.name,
displayName: props.pieData.abnormal.displayName
},
{
value: props.pieData.serious.value,
name: props.pieData.serious.name,
displayName: props.pieData.serious.displayName
}
],
emphasis: {
itemStyle: {
@ -78,6 +120,13 @@ const handleResize = () => {
}
};
// 监听props变化
watch(() => props.pieData, () => {
if (chartInstance) {
initChart();
}
}, { deep: true });
// 生命周期钩子
onMounted(() => {
initChart();
@ -92,8 +141,6 @@ onMounted(() => {
}
};
});
</script>
<style scoped>

70
src/views/integratedManage/alarmManage/components/levelSet.vue
View File

@ -1,5 +1,5 @@
<template>
<el-table :data="alarmLevels" :border="false" style="width: 100%">
<el-table :data="localAlarmLevels" :border="false" style="width: 100%">
<el-table-column prop="levelName" label="级别名称" align="center">
<template #default="scope">
<span :class="['level-name', `level-${scope.row.level}`]">{{ scope.row.levelName }}</span>
@ -78,7 +78,7 @@
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// 定义告警等级类型
@ -102,49 +102,19 @@ interface ConfigData extends AlarmLevel {
processDescription: string;
}
// 模拟数据
const alarmLevels = ref<AlarmLevel[]>([
{
id: 1,
levelName: '严重告警',
description: '系统或应用出现严重故障',
priority: '一级',
responseTime: '15分钟以内',
processingMethod: ['系统锁定', '声光报警', '短信通知'],
enabled: true,
level: 1
},
{
id: 2,
levelName: '重要告警',
description: '系统或应用出现严重故障',
priority: '二级',
responseTime: '30分钟以内',
processingMethod: ['声光报警', '短信通知', '系统记录'],
enabled: true,
level: 2
},
{
id: 3,
levelName: '一般告警',
description: '非关键性故障或潜在风险',
priority: '三级',
responseTime: '120分钟以内',
processingMethod: ['短信通知', '系统记录'],
enabled: true,
level: 3
},
{
id: 4,
levelName: '提示信息',
description: '系统或应用非关键性变化或即将达到阈值的状态',
priority: '四级',
responseTime: '24小时以内',
processingMethod: ['短信通知'],
enabled: false,
level: 4
}
]);
// 定义props
const props = defineProps<{
alarmLevels: AlarmLevel[];
}>();
// 本地数据副本
const localAlarmLevels = ref<AlarmLevel[]>([]);
// 初始化本地数据
watch(() => props.alarmLevels, (newVal) => {
// 深拷贝以避免直接修改props
localAlarmLevels.value = JSON.parse(JSON.stringify(newVal));
}, { immediate: true, deep: true });
// 对话框相关状态
const configDialogVisible = ref(false);
@ -198,10 +168,10 @@ const handleConfig = (row: AlarmLevel) => {
const handleConfigSave = () => {
if (currentConfigData.value) {
// 找到对应的告警等级并更新
const index = alarmLevels.value.findIndex(item => item.id === currentConfigData.value!.id);
const index = localAlarmLevels.value.findIndex(item => item.id === currentConfigData.value!.id);
if (index !== -1) {
alarmLevels.value[index] = {
...alarmLevels.value[index],
localAlarmLevels.value[index] = {
...localAlarmLevels.value[index],
enabled: currentConfigData.value!.enabled
};
}
@ -217,9 +187,9 @@ const handleDelete = (id: number) => {
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = alarmLevels.value.findIndex(item => item.id === id);
const index = localAlarmLevels.value.findIndex(item => item.id === id);
if (index !== -1) {
alarmLevels.value.splice(index, 1);
localAlarmLevels.value.splice(index, 1);
ElMessage.success('删除成功');
}
}).catch(() => {

34
src/views/integratedManage/alarmManage/components/totalView.vue
View File

@ -8,7 +8,7 @@
<div class="total-header">
<span class="total-title">今日报警总数</span>
</div>
<div class="total-number">28</div>
<div class="total-number">{{ totalData.totalAlarm }}</div>
</div>
<div class="icon-section">
<el-icon class="total-icon blue">
@ -20,7 +20,7 @@
<el-icon class="trend-icon green">
<img src="/src/assets/demo/up.png" alt="上升">
</el-icon>
<span class="comparison-text green">8台</span>
<span class="comparison-text green">+{{ totalData.totalIncrease }}台</span>
<span class="period-text">较上月同期</span>
</div>
</div>
@ -34,7 +34,7 @@
<div class="total-header">
<span class="total-title">未处理报警</span>
</div>
<div class="total-number">8</div>
<div class="total-number">{{ totalData.unprocessedAlarm }}</div>
</div>
<div class="icon-section">
<el-icon class="total-icon purple">
@ -46,7 +46,7 @@
<el-icon class="trend-icon green">
<img src="/src/assets/demo/up.png" alt="上升">
</el-icon>
<span class="comparison-text green">8台</span>
<span class="comparison-text green">+{{ totalData.unprocessedIncrease }}台</span>
<span class="period-text">较上月同期</span>
</div>
</div>
@ -60,7 +60,7 @@
<div class="total-header">
<span class="total-title">已处理报警</span>
</div>
<div class="total-number">20</div>
<div class="total-number">{{ totalData.processedAlarm }}</div>
</div>
<div class="icon-section">
<el-icon class="total-icon green">
@ -72,7 +72,7 @@
<el-icon class="trend-icon green">
<img src="/src/assets/demo/up.png" alt="上升">
</el-icon>
<span class="comparison-text green">8台</span>
<span class="comparison-text green">+{{ totalData.processedIncrease }}台</span>
<span class="period-text">较上月同期</span>
</div>
</div>
@ -86,7 +86,7 @@
<div class="total-header">
<span class="total-title">严重报警</span>
</div>
<div class="total-number">3</div>
<div class="total-number">{{ totalData.seriousAlarm }}</div>
</div>
<div class="icon-section">
<el-icon class="total-icon orange">
@ -98,7 +98,7 @@
<el-icon class="trend-icon green">
<img src="/src/assets/demo/up.png" alt="上升">
</el-icon>
<span class="comparison-text green">8台</span>
<span class="comparison-text green">+{{ totalData.seriousIncrease }}台</span>
<span class="period-text">较上月同期</span>
</div>
</div>
@ -107,6 +107,24 @@
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
// 定义props类型
interface TotalData {
totalAlarm: number;
unprocessedAlarm: number;
processedAlarm: number;
seriousAlarm: number;
totalIncrease: number;
unprocessedIncrease: number;
processedIncrease: number;
seriousIncrease: number;
}
// 定义props
const props = defineProps<{
totalData: TotalData;
}>();
</script>
<style scoped lang="scss">

125
src/views/integratedManage/alarmManage/index.vue
View File

@ -12,14 +12,14 @@
<el-col :span="16">
<el-card shadow="hover" class="custom-card">
<TitleComponent title="报警管理" :font-level="2" />
<totalView />
<totalView :totalData="totalData" />
</el-card>
</el-col>
<el-col :span="8">
<!-- 报警级别分布 -->
<el-card shadow="hover" class="custom-card">
<TitleComponent title="报警级别分布" :font-level="2" />
<levelPie />
<levelPie :pieData="pieData" />
</el-card>
</el-col>
</el-row>
@ -29,7 +29,7 @@
<el-col :span="24">
<el-card shadow="hover" class="custom-card">
<TitleComponent title="报警趋势分析" :font-level="2" />
<fenxiBar />
<fenxiBar :trendData="trendData" />
</el-card>
</el-col>
</el-row>
@ -39,7 +39,7 @@
<el-col :span="24">
<el-card shadow="hover" class="custom-card">
<TitleComponent title="报警级别设置" :font-level="2" />
<levelSet />
<levelSet :alarmLevels="alarmLevelsData" />
</el-card>
</el-col>
</el-row>
@ -47,11 +47,128 @@
</template>
<script setup>
import { ref } from 'vue';
import TitleComponent from '@/components/TitleComponent/index.vue';
import levelPie from '@/views/integratedManage/alarmManage/components/levelPie.vue'
import fenxiBar from '@/views/integratedManage/alarmManage/components/fenxiBar.vue'
import totalView from '@/views/integratedManage/alarmManage/components/totalView.vue';
import levelSet from '@/views/integratedManage/alarmManage/components/levelSet.vue';
// 模拟报警总数数据
const totalData = ref({
totalAlarm: 28,
unprocessedAlarm: 8,
processedAlarm: 20,
seriousAlarm: 3,
totalIncrease: 8,
unprocessedIncrease: 3,
processedIncrease: 5,
seriousIncrease: 1
});
// 模拟报警级别分布数据
const pieData = ref({
normal: {
value: 1048,
name: '提示信息',
displayName: '提示信息',
color: 'rgb(0, 179, 255)'
},
interrupt: {
value: 735,
name: '一般告警',
displayName: '一般告警',
color: 'rgb(45, 214, 131)'
},
abnormal: {
value: 580,
name: '重要告警',
displayName: '重要告警',
color: 'rgb(255, 208, 35)'
},
serious: {
value: 484,
name: '严重告警',
displayName: '严重告警',
color: 'rgb(227, 39, 39)'
}
});
// 模拟报警趋势数据
const trendData = ref({
dates: ['09-04', '09-05', '09-06', '09-07', '09-08', '09-09', '09-10'],
series: [
{
name: '维护提醒',
data: [120, 200, 150, 80, 70, 110, 130],
color: 'rgb(0, 179, 255)'
},
{
name: '数据异常',
data: [80, 170, 100, 50, 90, 140, 170],
color: 'rgb(22, 93, 255)'
},
{
name: '信号减弱',
data: [60, 140, 100, 120, 110, 100, 130],
color: 'rgb(255, 153, 0)'
},
{
name: '温度过高',
data: [60, 140, 100, 120, 110, 100, 130],
color: 'rgb(250, 220, 25)'
},
{
name: '通讯中断',
data: [60, 140, 100, 120, 110, 100, 130],
color: 'rgb(251, 62, 122)'
}
]
});
// 模拟告警级别设置数据
const alarmLevelsData = ref([
{
id: 1,
levelName: '严重告警',
description: '系统或应用出现严重故障',
priority: '一级',
responseTime: '15分钟以内',
processingMethod: ['系统锁定', '声光报警', '短信通知'],
enabled: true,
level: 1
},
{
id: 2,
levelName: '重要告警',
description: '系统或应用出现严重故障',
priority: '二级',
responseTime: '30分钟以内',
processingMethod: ['声光报警', '短信通知', '系统记录'],
enabled: true,
level: 2
},
{
id: 3,
levelName: '一般告警',
description: '非关键性故障或潜在风险',
priority: '三级',
responseTime: '120分钟以内',
processingMethod: ['短信通知', '系统记录'],
enabled: true,
level: 3
},
{
id: 4,
levelName: '提示信息',
description: '系统或应用非关键性变化或即将达到阈值的状态',
priority: '四级',
responseTime: '24小时以内',
processingMethod: ['短信通知'],
enabled: false,
level: 4
}
]);
</script>
<style scoped>