fix：新增预警通知功能
This commit is contained in:
parent
d3751210e0
commit
cf22b295bc
@ -19,7 +19,6 @@
|
|||||||
<div class="menu-return">
|
<div class="menu-return">
|
||||||
<i class="el-icon-data-analysis" @click="goBigScreen"></i>
|
<i class="el-icon-data-analysis" @click="goBigScreen"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-news"><i class="el-icon-bell"></i></div>
|
|
||||||
<search id="header-search" class="right-menu-item" />
|
<search id="header-search" class="right-menu-item" />
|
||||||
|
|
||||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||||
@ -96,8 +95,8 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/* 点击跳转大屏页面 */
|
/* 点击跳转大屏页面 */
|
||||||
goBigScreen() {
|
goBigScreen(){
|
||||||
this.$router.push("/screen");
|
this.$router.push("/screen")
|
||||||
},
|
},
|
||||||
toggleSideBar() {
|
toggleSideBar() {
|
||||||
this.$store.dispatch("app/toggleSideBar");
|
this.$store.dispatch("app/toggleSideBar");
|
||||||
@ -164,7 +163,7 @@ export default {
|
|||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-news {
|
.menu-return {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
|
|
||||||
@ -172,19 +171,7 @@ export default {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
line-height: 3.1rem;
|
line-height: 3.1rem;
|
||||||
font-weight: 400;
|
font-weight: bold;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-return {
|
|
||||||
height: 100%;
|
|
||||||
margin-right: 1rem;
|
|
||||||
|
|
||||||
i {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
line-height: 3.1rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
* @Author: SunTao 328867980@qq.com
|
* @Author: SunTao 328867980@qq.com
|
||||||
* @Date: 2024-10-17 11:34:00
|
* @Date: 2024-10-17 11:34:00
|
||||||
* @LastEditors: SunTao 328867980@qq.com
|
* @LastEditors: SunTao 328867980@qq.com
|
||||||
* @LastEditTime: 2024-11-19 14:16:56
|
* @LastEditTime: 2024-11-20 14:32:46
|
||||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||||
* @Description: 大屏首页
|
* @Description: 大屏首页
|
||||||
-->
|
-->
|
||||||
@ -20,7 +20,72 @@
|
|||||||
></iframe>
|
></iframe>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-time">
|
<div class="header-time">
|
||||||
<div class="header-news"><i class="el-icon-message-solid"></i></div>
|
<!-- 消息中心 -->
|
||||||
|
<div class="header-news">
|
||||||
|
<el-popover
|
||||||
|
placement="bottom-end"
|
||||||
|
width="400"
|
||||||
|
popper-class="screen-message-popover"
|
||||||
|
trigger="click"
|
||||||
|
>
|
||||||
|
<div class="screen-message-content">
|
||||||
|
<div class="message-content">
|
||||||
|
<fssm-scroll>
|
||||||
|
<div
|
||||||
|
class="message-item"
|
||||||
|
v-for="(item, index) in messageList"
|
||||||
|
:key="`message-item-${index}`"
|
||||||
|
>
|
||||||
|
<div class="item-top" @click="handleMessageItemClick(item.status)">
|
||||||
|
<div class="index">
|
||||||
|
<i
|
||||||
|
v-if="item.status === '1'"
|
||||||
|
style="color: #67c23a"
|
||||||
|
class="el-icon-success"
|
||||||
|
></i>
|
||||||
|
<i
|
||||||
|
v-if="item.status === '2'"
|
||||||
|
style="color: #e6a23c"
|
||||||
|
class="el-icon-info"
|
||||||
|
></i>
|
||||||
|
<i
|
||||||
|
v-if="item.status === '3'"
|
||||||
|
style="color: #909399"
|
||||||
|
class="el-icon-warning"
|
||||||
|
></i>
|
||||||
|
<i
|
||||||
|
v-if="item.status === '4'"
|
||||||
|
style="color: #f56c6c"
|
||||||
|
class="el-icon-error"
|
||||||
|
></i>
|
||||||
|
</div>
|
||||||
|
<div class="time">
|
||||||
|
<span>{{ item.time }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="carNo">
|
||||||
|
<span>{{ item.car }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-content">
|
||||||
|
{{ item.content }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fssm-scroll>
|
||||||
|
</div>
|
||||||
|
<div class="message-footer">
|
||||||
|
<el-button
|
||||||
|
@click="handleMessageClick"
|
||||||
|
icon="el-icon-d-arrow-right"
|
||||||
|
type="text"
|
||||||
|
>查看更多</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<i slot="reference" class="el-icon-message-solid">
|
||||||
|
<div class="num">48</div>
|
||||||
|
</i>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
<div class="header-data">{{ dataTime }}</div>
|
<div class="header-data">{{ dataTime }}</div>
|
||||||
<div class="header-week">
|
<div class="header-week">
|
||||||
<span>{{ weekTime }}</span>
|
<span>{{ weekTime }}</span>
|
||||||
@ -311,6 +376,10 @@ export default {
|
|||||||
weekTime: "",
|
weekTime: "",
|
||||||
// 年
|
// 年
|
||||||
yearTime: "",
|
yearTime: "",
|
||||||
|
|
||||||
|
// 预警中心消息数据
|
||||||
|
messageList: [],
|
||||||
|
|
||||||
// 数据栏右上角选择框
|
// 数据栏右上角选择框
|
||||||
selectTypeArr: [],
|
selectTypeArr: [],
|
||||||
// 左侧切换模块
|
// 左侧切换模块
|
||||||
@ -373,224 +442,7 @@ export default {
|
|||||||
// 图片背景下病害类型下拉选择绑定
|
// 图片背景下病害类型下拉选择绑定
|
||||||
mapCareSelect: "",
|
mapCareSelect: "",
|
||||||
// 图片背景下病害类型下拉选择数据
|
// 图片背景下病害类型下拉选择数据
|
||||||
dieaseOptions: [
|
dieaseOptions: [],
|
||||||
{
|
|
||||||
value: "zhinan",
|
|
||||||
label: "指南",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: "shejiyuanze",
|
|
||||||
label: "设计原则",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "daohang",
|
|
||||||
label: "导航",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "zujian",
|
|
||||||
label: "组件",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: "basic",
|
|
||||||
label: "Basic",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "form",
|
|
||||||
label: "Form",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: "radio",
|
|
||||||
label: "Radio 单选框",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "checkbox",
|
|
||||||
label: "Checkbox 多选框",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "input",
|
|
||||||
label: "Input 输入框",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "input-number",
|
|
||||||
label: "InputNumber 计数器",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "select",
|
|
||||||
label: "Select 选择器",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "cascader",
|
|
||||||
label: "Cascader 级联选择器",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "switch",
|
|
||||||
label: "Switch 开关",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "slider",
|
|
||||||
label: "Slider 滑块",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "time-picker",
|
|
||||||
label: "TimePicker 时间选择器",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "date-picker",
|
|
||||||
label: "DatePicker 日期选择器",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "datetime-picker",
|
|
||||||
label: "DateTimePicker 日期时间选择器",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "upload",
|
|
||||||
label: "Upload 上传",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "rate",
|
|
||||||
label: "Rate 评分",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "form",
|
|
||||||
label: "Form 表单",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "data",
|
|
||||||
label: "Data",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: "table",
|
|
||||||
label: "Table 表格",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "tag",
|
|
||||||
label: "Tag 标签",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "progress",
|
|
||||||
label: "Progress 进度条",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "tree",
|
|
||||||
label: "Tree 树形控件",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "pagination",
|
|
||||||
label: "Pagination 分页",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "badge",
|
|
||||||
label: "Badge 标记",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "notice",
|
|
||||||
label: "Notice",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: "alert",
|
|
||||||
label: "Alert 警告",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "loading",
|
|
||||||
label: "Loading 加载",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "message",
|
|
||||||
label: "Message 消息提示",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "message-box",
|
|
||||||
label: "MessageBox 弹框",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "notification",
|
|
||||||
label: "Notification 通知",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "navigation",
|
|
||||||
label: "Navigation",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: "menu",
|
|
||||||
label: "NavMenu 导航菜单",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "tabs",
|
|
||||||
label: "Tabs 标签页",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "breadcrumb",
|
|
||||||
label: "Breadcrumb 面包屑",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "dropdown",
|
|
||||||
label: "Dropdown 下拉菜单",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "steps",
|
|
||||||
label: "Steps 步骤条",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "others",
|
|
||||||
label: "Others",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: "dialog",
|
|
||||||
label: "Dialog 对话框",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "tooltip",
|
|
||||||
label: "Tooltip 文字提示",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "popover",
|
|
||||||
label: "Popover 弹出框",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "card",
|
|
||||||
label: "Card 卡片",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "carousel",
|
|
||||||
label: "Carousel 走马灯",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "collapse",
|
|
||||||
label: "Collapse 折叠面板",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "ziyuan",
|
|
||||||
label: "资源",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: "axure",
|
|
||||||
label: "Axure Components",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "sketch",
|
|
||||||
label: "Sketch Templates",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "jiaohu",
|
|
||||||
label: "组件交互文档",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
// 路段下拉绑定
|
// 路段下拉绑定
|
||||||
roadList: [],
|
roadList: [],
|
||||||
// 地图打点-路段绑定
|
// 地图打点-路段绑定
|
||||||
@ -651,6 +503,7 @@ export default {
|
|||||||
this.getMapCare();
|
this.getMapCare();
|
||||||
this.getRoadList();
|
this.getRoadList();
|
||||||
this.getDieaseTypeList();
|
this.getDieaseTypeList();
|
||||||
|
this.getMessageList();
|
||||||
// this.initWebSocket();
|
// this.initWebSocket();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -687,6 +540,54 @@ export default {
|
|||||||
}, 1000);
|
}, 1000);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/* 获取消息中心数据 */
|
||||||
|
getMessageList() {
|
||||||
|
// getMessageList().then(({ code, data }) => {
|
||||||
|
// if (code === 200) {
|
||||||
|
// this.messageList = data;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
this.messageList = [
|
||||||
|
{
|
||||||
|
status: "1",
|
||||||
|
time: "2024/45/62",
|
||||||
|
car: "辽jskdn",
|
||||||
|
content: "骄傲的是否哈德half绝对符合卡的法拉第",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
status: "2",
|
||||||
|
time: "2024/45/62",
|
||||||
|
car: "辽jskdn",
|
||||||
|
content: "骄傲的是否哈德half绝对符合卡的法拉第",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
status: "3",
|
||||||
|
time: "2024/45/62",
|
||||||
|
car: "辽jskdn",
|
||||||
|
content: "骄傲的是否哈德half绝对符合卡的法拉第",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 消息中心点击具体数据事件
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
|
handleMessageItemClick(value) {
|
||||||
|
this.$router.push({
|
||||||
|
name: "Warning-center",
|
||||||
|
params: { status: value },
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 消息中心查看更多事件
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
|
handleMessageClick() {
|
||||||
|
this.$router.push("/inspection_warn/warning-center");
|
||||||
|
},
|
||||||
|
|
||||||
/* 获取数据栏右上角选项数据 */
|
/* 获取数据栏右上角选项数据 */
|
||||||
getSelect() {
|
getSelect() {
|
||||||
selectTypeList().then(({ code, data }) => {
|
selectTypeList().then(({ code, data }) => {
|
||||||
@ -1526,10 +1427,25 @@ export default {
|
|||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 消息中心样式
|
||||||
.header-news {
|
.header-news {
|
||||||
cursor: pointer;
|
i {
|
||||||
font-size: 1.5rem;
|
position: relative;
|
||||||
color:red;
|
cursor: pointer;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
|
||||||
|
.num {
|
||||||
|
min-width: 0.9rem;
|
||||||
|
position: absolute;
|
||||||
|
top: -0.2rem;
|
||||||
|
right: -0.5rem;
|
||||||
|
padding: 0.2rem;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-data {
|
.header-data {
|
||||||
@ -1788,4 +1704,49 @@ input[aria-hidden="true"] {
|
|||||||
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
|
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 大屏消息弹出框样式
|
||||||
|
.screen-message-popover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
.screen-message-content {
|
||||||
|
width: 100%;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 12rem;
|
||||||
|
|
||||||
|
.message-item {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
border-bottom: 1px dashed rgb(115, 115, 116);
|
||||||
|
|
||||||
|
.item-top {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
span {
|
||||||
|
color: rgb(113, 179, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-content {
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
* @Author: SunTao 328867980@qq.com
|
* @Author: SunTao 328867980@qq.com
|
||||||
* @Date: 2024-10-08 09:26:24
|
* @Date: 2024-10-08 09:26:24
|
||||||
* @LastEditors: SunTao 328867980@qq.com
|
* @LastEditors: SunTao 328867980@qq.com
|
||||||
* @LastEditTime: 2024-11-18 15:06:35
|
* @LastEditTime: 2024-11-20 10:21:45
|
||||||
* @FilePath: \znxjxt-ui\src\views\index.vue
|
* @FilePath: \znxjxt-ui\src\views\index.vue
|
||||||
* @Description: 系统首页
|
* @Description: 系统首页
|
||||||
-->
|
-->
|
||||||
|
|||||||
296
src/views/xj/inspection-warn/warning-center/index.vue
Normal file
296
src/views/xj/inspection-warn/warning-center/index.vue
Normal file
@ -0,0 +1,296 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: SunTao 328867980@qq.com
|
||||||
|
* @Date: 2024-11-20 11:58:33
|
||||||
|
* @LastEditors: SunTao 328867980@qq.com
|
||||||
|
* @LastEditTime: 2024-11-20 14:33:22
|
||||||
|
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-center\index.vue
|
||||||
|
* @Description: 巡检预警中心
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<!-- 搜索表单 -->
|
||||||
|
<el-form
|
||||||
|
:model="warnForm"
|
||||||
|
ref="queryForm"
|
||||||
|
size="small"
|
||||||
|
:inline="true"
|
||||||
|
label-width="5rem"
|
||||||
|
>
|
||||||
|
<el-form-item label="车牌号" prop="carNo">
|
||||||
|
<el-input
|
||||||
|
v-model="warnForm.carNo"
|
||||||
|
placeholder="请输入车牌号"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备ID" prop="deviceId">
|
||||||
|
<el-select
|
||||||
|
v-model="warnForm.deviceId"
|
||||||
|
placeholder="请选择校验状态"
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in deviceList"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="时间" prop="dateTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dateTime"
|
||||||
|
type="daterange"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
format="yyyy-MM-dd"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="阅读状态" prop="readStatus">
|
||||||
|
<el-select
|
||||||
|
v-model="warnForm.readStatus"
|
||||||
|
placeholder="请选择阅读状态"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in readStatusList"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-search"
|
||||||
|
size="mini"
|
||||||
|
@click="handleQuery"
|
||||||
|
>搜索</el-button
|
||||||
|
>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||||
|
>重置</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||||
|
<el-tab-pane
|
||||||
|
v-for="(item, index) in editableTabs"
|
||||||
|
:key="`tabs-${index}`"
|
||||||
|
:label="item.title"
|
||||||
|
:name="item.value"
|
||||||
|
>
|
||||||
|
<!-- 标签页头 -->
|
||||||
|
<span slot="label"
|
||||||
|
><i
|
||||||
|
v-if="item.status === '1'"
|
||||||
|
style="color: #67c23a"
|
||||||
|
class="el-icon-success"
|
||||||
|
></i>
|
||||||
|
<i
|
||||||
|
v-if="item.status === '2'"
|
||||||
|
style="color: #e6a23c"
|
||||||
|
class="el-icon-info"
|
||||||
|
></i>
|
||||||
|
<i
|
||||||
|
v-if="item.status === '3'"
|
||||||
|
style="color: #909399"
|
||||||
|
class="el-icon-warning"
|
||||||
|
></i>
|
||||||
|
<i
|
||||||
|
v-if="item.status === '4'"
|
||||||
|
style="color: #f56c6c"
|
||||||
|
class="el-icon-error"
|
||||||
|
></i
|
||||||
|
>{{ item.title }}({{ item.count }})</span
|
||||||
|
>
|
||||||
|
<!-- 标签内容 -->
|
||||||
|
<el-table
|
||||||
|
ref="warningTable"
|
||||||
|
:data="warningList"
|
||||||
|
v-loading="loading"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-table-column label="时间" align="center" prop="segmentName" />
|
||||||
|
<el-table-column
|
||||||
|
label="消息内容"
|
||||||
|
align="center"
|
||||||
|
prop="stakeStart"
|
||||||
|
/>
|
||||||
|
<el-table-column label="车牌号" align="center" prop="stakeEnd" />
|
||||||
|
<el-table-column label="设备id" align="center" prop="stakeEnd" />
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<div class="pagination-part">
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
:current-page.sync="pagination.page"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:page-sizes="[10, 20, 30, 40]"
|
||||||
|
:page-size.sync="pagination.size"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="tableTotal"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "WarningCenter",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 查询表单绑定
|
||||||
|
warnForm: {
|
||||||
|
// 车牌号
|
||||||
|
carNo: "",
|
||||||
|
// 设备id
|
||||||
|
deviceId: "",
|
||||||
|
// 阅读状态
|
||||||
|
readStatus: "",
|
||||||
|
},
|
||||||
|
// 设备列表
|
||||||
|
deviceList: [],
|
||||||
|
// 时间
|
||||||
|
dateTime: [],
|
||||||
|
// 阅读状态列表
|
||||||
|
readStatusList: [
|
||||||
|
{ label: "已读", value: "1" },
|
||||||
|
{ label: "未读", value: "2" },
|
||||||
|
],
|
||||||
|
// 导航栏选择绑定
|
||||||
|
activeName: "1",
|
||||||
|
// 导航栏列表
|
||||||
|
editableTabs: [
|
||||||
|
{ title: "成功", value: "1", count: 10, status: "1" },
|
||||||
|
{ title: "提醒", value: "2", count: 10, status: "2" },
|
||||||
|
{ title: "告警", value: "3", count: 10, status: "3" },
|
||||||
|
{ title: "错误", value: "4", count: 10, status: "4" },
|
||||||
|
],
|
||||||
|
// 预警列表
|
||||||
|
warningList: [],
|
||||||
|
// 分页-页数页码
|
||||||
|
pagination: {
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
},
|
||||||
|
// 列表总条数
|
||||||
|
tableTotal: 0,
|
||||||
|
// 列表加载状态
|
||||||
|
loading: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route: {
|
||||||
|
handler(val) {
|
||||||
|
if (val.params.status) {
|
||||||
|
this.activeName = val.params.status;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* @description: 点击搜索事件
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
|
handleQuery() {
|
||||||
|
this.searchForm = JSON.parse(JSON.stringify(this.warnForm));
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 重置查询
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
|
resetQuery() {
|
||||||
|
this.warnForm = {
|
||||||
|
// 车牌号
|
||||||
|
carNo: "",
|
||||||
|
// 设备id
|
||||||
|
deviceId: "",
|
||||||
|
// 阅读状态
|
||||||
|
readStatus: "",
|
||||||
|
};
|
||||||
|
this.dateTime = [];
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 切换标签事件
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
|
handleClick() {
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 获取列表数据
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
const data = {
|
||||||
|
...this.pagination,
|
||||||
|
...this.warnForm,
|
||||||
|
activeName: this.activeName,
|
||||||
|
startTime: this.dateTime ? this.dateTime[0] : "",
|
||||||
|
endTime: this.dateTime ? this.dateTime[1] : "",
|
||||||
|
};
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loading = false;
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 切换分页
|
||||||
|
* @param {*} arg
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
|
handleCurrentChange(arg) {
|
||||||
|
this.pagination.page = arg;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 切换每页条数
|
||||||
|
* @param {*} arg
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
|
handleSizeChange(arg) {
|
||||||
|
this.pagination.size = arg;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 5.4rem);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分页样式 */
|
||||||
|
.pagination-part {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
padding-top: 1rem;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user