1
0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee
Files
epp/frontend/src/views/warning-view.vue

397 lines
9.6 KiB
Vue

<template>
<div class="container">
<el-row :gutter="20">
<el-col :span="18">
<el-row :gutter="20" class="mgb20">
<el-col :span="6">
<el-card shadow="hover" :body-style="{ padding: '0px' }">
<div class="grid-content grid-con-0">
<el-icon class="grid-con-icon">
<Odometer />
</el-icon>
<div class="grid-cont-right">
<div class="grid-num">{{ levelCount?.today_total }}</div>
<div>今日累计预警</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" :body-style="{ padding: '0px' }">
<div class="grid-content grid-con-1">
<el-icon class="grid-con-icon">
<User />
</el-icon>
<div class="grid-cont-right">
<div class="grid-num">{{ levelCount?.today_y }}</div>
<div>黄色预警</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" :body-style="{ padding: '0px' }">
<div class="grid-content grid-con-2">
<el-icon class="grid-con-icon">
<ChatDotRound />
</el-icon>
<div class="grid-cont-right">
<div class="grid-num">{{ levelCount?.today_o }}</div>
<div>橙色预警</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" :body-style="{ padding: '0px' }">
<div class="grid-content grid-con-3">
<el-icon class="grid-con-icon">
<Goods />
</el-icon>
<div class="grid-cont-right">
<div class="grid-num">{{ levelCount?.today_r }}</div>
<div>红色预警</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-card shadow="hover" style="min-height: 403px">
<template #header>
<div class="clearfix">
<span>预警列表</span>
<el-button style="float: right; padding: 3px 0" text>查看全部</el-button>
</div>
</template>
<!-- 表格 -->
<el-table :data="tableData" border class="table" ref="multipleTable"
header-cell-class-name="table-header">
<el-table-column prop="id" label="ID" width="55" align="center" v-if="false"></el-table-column>
<el-table-column prop="createTime" label="报警时间" align="center"></el-table-column>
<el-table-column prop="deviceName" label="报警设备" align="center"></el-table-column>
<el-table-column prop="alertLevel" label="报警等级" align="center"></el-table-column>
<el-table-column prop="monitorCode" label="监测项" align="center"></el-table-column>
<el-table-column prop="monitorValue" label="监测值" align="center"></el-table-column>
<el-table-column prop="threshold" label="阈值" align="center"></el-table-column>
<el-table-column prop="deviceId" label="" align="center" v-if="false"></el-table-column>
<!-- <el-table-column label="操作" width="220" align="center"> -->
<!-- <template #default="scope">
<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)"
v-permiss="'user-setting'">
编辑
</el-button>
<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)"
v-permiss="'user-setting'">
删除
</el-button>
</template> -->
<!-- </el-table-column> -->
</el-table>
<!-- 分页 -->
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
:page-size="query.pageSize" :total="pageTotal"
@current-change="handlePageChange"></el-pagination>
</div>
<!-- <el-table :show-header="false" :data="todoList" style="width: 100%">
<el-table-column width="40">
<template #default="scope">
<el-checkbox v-model="scope.row.status"></el-checkbox>
</template>
</el-table-column>
<el-table-column>
<template #default="scope">
<div
class="todo-item"
:class="{
'todo-item-del': scope.row.status
}"
>
{{ scope.row.title }}
</div>
</template>
</el-table-column>
</el-table> -->
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="mgb20">
<p>
监测预警总览
</p>
<div class="alert-image-container">
<img class="alert-image" :class="isAlerting ? 'alert-ing' : []"
:src="isAlerting ? '/assets/image/svg/alert_warning.svg' : '/assets/image/svg/alert_default.svg'"
@click="isAlerting = !isAlerting">
</div>
<!-- 表格 -->
<el-table :data="alertLogCountTableData" style="width: 100%">
<el-table-column prop="timeRange" label="" />
<el-table-column prop="yellow" label="黄色预警" />
<el-table-column prop="orange" label="橙色预警" />
<el-table-column prop="red" label="红色预警" />
<el-table-column prop="total" label="总计" />
</el-table>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts" name="dashboard">
import { ref, reactive } from 'vue';
import send_request from '../utils/send_request';
const name = localStorage.getItem('ms_username');
const role: string = name === 'admin' ? '超级管理员' : '普通用户';
// 筛选条件
const query = reactive({
params: {
deviceType: '',
name: '',
},
pageIndex: 1,
pageSize: 10
});
// 展示的铃铛是否处于报警状态
const isAlerting = ref(false);
const alertLevel = {
"1": "黄色预警",
"2": "橙色预警",
"3": "红色预警",
}
const tableData: any = ref([]);
const pageTotal = ref(0);
const levelCount = ref({
'today_y': '',
'today_o': '',
'today_r': '',
'today_total': '',
});
// 统计表格的数据
const alertLogCountTableData = ref([]);
const getData = async () => {
// const loading = ElLoading.service({
// lock: true,
// text: '请稍候',
// background: 'rgba(0, 0, 0, 0.7)',
// });
await send_request('v1/alert/list', "GET", {
...query.params,
pageIndex: query.pageIndex,
pageSize: query.pageSize,
page: query.pageIndex,
}, (data: any) => {
let alertList = data;
//生成"设备类型"数据字典
//console.log("deviceList/deviceTypeList:", deviceList, deviceTypeList)
// deviceTypeList.forEach((item: any) => deviceTypeDict.value[item.id] = item.type)
// 渲染表格
tableData.value = alertList.list.map((i: any) => {
i.state = "在线"
i.alertLevel = alertLevel[i.alertLevel]
i.createTime = new Date(new Date(i.createTime).getTime() + 8 * 3600 * 1000).toISOString().substring(0, 19).replace('T', ' ')
return i
});
pageTotal.value = alertList.total;
// // 渲染下拉框
// deviceTypeOption.value = deviceTypeList;
});
// 各种预警的数量
await send_request('v1/chart-data/levelCount', "GET", {
}, (data: any) => {
console.log("v1/chart-data/levelCount:", data);
let timeRangeDict = {
"day": "今日",
"week": "本周",
"month": "本月",
"year": "今年",
"total": "累计",
}
alertLogCountTableData.value = data.map((row: any) => {
row.total = row.yellow + row.orange + row.red;
if (row.timeRange == "day") {
levelCount.value.today_y = row.yellow;
levelCount.value.today_o = row.orange;
levelCount.value.today_r = row.red;
levelCount.value.today_total = row.total;
console.log(levelCount.value)
}
row.timeRange = timeRangeDict[row.timeRange]
return row
})
console.log("alertLogCountTableData.value", alertLogCountTableData.value);
});
// loading.close();
};
getData();
// 分页导航
const handlePageChange = (val: number) => {
query.pageIndex = val;
getData();
};
</script>
<style scoped>
/* 警铃抖动样式 */
@keyframes shaking {
0% {
transform: rotate(0deg);
}
35% {
transform: rotate(20deg);
}
65% {
transform: rotate(-20deg);
}
100% {
transform: rotate(0deg);
}
}
.alert-image-container {
text-align: center;
}
.alert-image {
width: 60%;
}
.alert-ing {
animation-duration: 1s;
animation-name: shaking;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.76, 0.44, 0.33, 0.75);
animation-delay: 0.8s;
}
/* ############ */
.el-row {
margin-bottom: 20px;
}
.grid-content {
display: flex;
align-items: center;
--grid-content-height: min(150px, 6vw);
height: var(--grid-content-height);
}
.grid-cont-right {
flex: 1;
text-align: center;
font-size: 14px;
color: #999;
}
.grid-num {
font-size: min(70px, 4vw);
font-weight: bold;
}
.grid-con-icon {
font-size: min(50px, 2.8vw);
width: min(150px, 5vw);
height: var(--grid-content-height);
text-align: center;
line-height: 100px;
color: #fff;
}
.grid-con-0 .grid-con-icon {
background: rgb(43 157 255);
}
.grid-con-0 .grid-num {
color: rgb(43 157 255);
}
.grid-con-1 .grid-con-icon {
background: rgb(255 223 43);
}
.grid-con-1 .grid-num {
color: rgb(255 223 43);
}
.grid-con-2 .grid-con-icon {
background: rgb(255, 135, 0);
}
.grid-con-2 .grid-num {
color: rgb(255, 135, 0);
}
.grid-con-3 .grid-con-icon {
background: rgb(242, 94, 67);
}
.grid-con-3 .grid-num {
color: rgb(242, 94, 67);
}
.user-info {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 2px solid #ccc;
margin-bottom: 20px;
}
.user-info-cont {
padding-left: 50px;
flex: 1;
font-size: 14px;
color: #999;
}
.user-info-cont div:first-child {
font-size: 30px;
color: #222;
}
.user-info-list {
font-size: 14px;
color: #999;
line-height: 25px;
}
.user-info-list span {
margin-left: 70px;
}
.mgb20 {
margin-bottom: 20px;
}
.todo-item {
font-size: 14px;
}
.todo-item-del {
text-decoration: line-through;
color: #999;
}
</style>