397 lines
9.6 KiB
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>
|