fix：webscoket连接，修改信息中心
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-21 09:12:52
|
||||
* @LastEditTime: 2024-11-29 15:31:24
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@@ -508,9 +508,20 @@ export default {
|
||||
this.getRoadList();
|
||||
this.getDieaseTypeList();
|
||||
this.getMessageList();
|
||||
// this.initWebSocket();
|
||||
this.handleMessage();
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 处理websocket消息
|
||||
* @return {*}
|
||||
*/
|
||||
handleMessage() {
|
||||
this.$ws.on("message", (data) => {
|
||||
console.log("收到xxxxxxxx消息:", data);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取当前时间
|
||||
* @return {*}
|
||||
@@ -549,7 +560,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 获取消息中心数据
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
getMessageList() {
|
||||
// getMessageList().then(({ code, data }) => {
|
||||
@@ -600,7 +611,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 获取数据栏右上角选项数据
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
getSelect() {
|
||||
selectTypeList().then(({ code, data }) => {
|
||||
@@ -609,10 +620,10 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @description: 获取路段下拉数据
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
getRoadList() {
|
||||
getRoadListTypes().then(({ code, data }) => {
|
||||
@@ -624,7 +635,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 获取图片背景左上角病害类型下拉
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
getDieaseTypeList() {
|
||||
getDefectTypes().then(({ code, data }) => {
|
||||
@@ -636,7 +647,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 获取图片背景下坐标数据
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
getMapCare(value) {
|
||||
const data = {
|
||||
@@ -652,7 +663,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 点击病害日志详情打开弹窗进行地图打点
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
getimagePoint(item) {
|
||||
this.imgTitle = "查看";
|
||||
@@ -673,7 +684,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 关闭图片查看弹窗
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
imgCancel() {
|
||||
this.imgTitle = "";
|
||||
@@ -683,7 +694,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 关闭查看点位大图弹窗
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
screenImgCancel() {
|
||||
this.$refs.roadMap.removeSelectClick();
|
||||
@@ -692,7 +703,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 切换icon类型多选框事件
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
handleChecked(value) {
|
||||
this.centerPiont = this.drawPointList.filter(
|
||||
@@ -708,7 +719,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 获取地图点位信息
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
getCenterPiont() {
|
||||
// 如果当前已经有打点坐标
|
||||
@@ -754,7 +765,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 绘制地图点位
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
drawPoint() {
|
||||
const features = [];
|
||||
@@ -853,7 +864,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 获取地图线段点位信息
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
getLinePoint() {
|
||||
if (!this.markLayerLines) {
|
||||
@@ -868,7 +879,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 绘制地图线段
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
drawLine() {
|
||||
const features = [];
|
||||
@@ -929,8 +940,8 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 地图线段颜色区分
|
||||
* @param {number} value
|
||||
* @return {string}
|
||||
* @param {number} value
|
||||
* @return {string}
|
||||
*/
|
||||
getLineColor(value) {
|
||||
if (value > 92) {
|
||||
@@ -945,11 +956,11 @@ export default {
|
||||
return "#E64548";
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @description: 地图下方4图标类别切换点击事件
|
||||
* @param {string} value
|
||||
* @return {void}
|
||||
* @param {string} value
|
||||
* @return {void}
|
||||
*/
|
||||
changeIconType(value) {
|
||||
if (this.bottomTipClick !== value) {
|
||||
@@ -970,7 +981,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 获取icon多选数据
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
getIconType() {
|
||||
this.mapLogeList = {};
|
||||
@@ -992,8 +1003,8 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 传回来的地图图层
|
||||
* @param {number} zoom
|
||||
* @return {void}
|
||||
* @param {number} zoom
|
||||
* @return {void}
|
||||
*/
|
||||
getZoom(zoom) {
|
||||
this.mapZoom = zoom;
|
||||
@@ -1006,8 +1017,8 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 地图选中feature事件
|
||||
* @param {object} e
|
||||
* @return {void}
|
||||
* @param {object} e
|
||||
* @return {void}
|
||||
*/
|
||||
featureSelect(e) {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
@@ -1043,8 +1054,8 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 数据栏切换事件
|
||||
* @param {object} item
|
||||
* @return {void}
|
||||
* @param {object} item
|
||||
* @return {void}
|
||||
*/
|
||||
changeElement(item) {
|
||||
if (this.elementDiv !== item) {
|
||||
@@ -1098,6 +1109,9 @@ export default {
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
// 不接收小车位置消息
|
||||
const data = { type: "carLocation", status: false };
|
||||
this.$ws.send(data);
|
||||
// 地图右上角多选按钮隐藏
|
||||
this.showIconList = false;
|
||||
// 图层恢复
|
||||
@@ -1141,6 +1155,10 @@ export default {
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
// 发送小车位置消息
|
||||
const data = { type: "carLocation", status: true };
|
||||
this.$ws.send(data);
|
||||
// 将地图层级初始化
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.getView().setZoom(10);
|
||||
@@ -1191,6 +1209,9 @@ export default {
|
||||
class: "one",
|
||||
},
|
||||
];
|
||||
// 发送小车位置消息
|
||||
const data = { type: "carLocation", status: true };
|
||||
this.$ws.send(data);
|
||||
// 地图右上角多选按钮隐藏
|
||||
this.showIconList = false;
|
||||
// 图层恢复
|
||||
@@ -1202,11 +1223,6 @@ export default {
|
||||
map.getView().setZoom(10);
|
||||
map.getView().setCenter([123.30297096718999, 41.87942945541742]);
|
||||
});
|
||||
// 地图右上角多选按钮显示
|
||||
// this.getIconType();
|
||||
// this.showIconList = true;
|
||||
// 进行地图打点
|
||||
// this.getCenterPiont();
|
||||
this.getLinePoint();
|
||||
}
|
||||
}
|
||||
@@ -1214,7 +1230,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 跳转系统首页
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
goIndex() {
|
||||
this.$router.push("/index");
|
||||
@@ -1222,7 +1238,7 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 图片位置信息获取
|
||||
* @return {void}
|
||||
* @return {void}
|
||||
*/
|
||||
updateScreenRects() {
|
||||
1;
|
||||
@@ -1241,11 +1257,11 @@ export default {
|
||||
|
||||
/**
|
||||
* @description: 图片红框位置
|
||||
* @param {object} left
|
||||
* @param {object} top
|
||||
* @param {object} width
|
||||
* @param {object} height
|
||||
* @return {object}
|
||||
* @param {object} left
|
||||
* @param {object} top
|
||||
* @param {object} width
|
||||
* @param {object} height
|
||||
* @return {object}
|
||||
*/
|
||||
getScreenRectStyle({ left, top, width, height }) {
|
||||
const image = this.$refs.mainImage;
|
||||
@@ -1272,39 +1288,10 @@ export default {
|
||||
boxSizing: "border-box",
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 初始化websocket
|
||||
* @return {void}
|
||||
*/
|
||||
initWebSocket() {
|
||||
const url = `ws://192.168.1.188:8080/websocket?token=${getToken()}`;
|
||||
const data = { type: "carLocation", status: true };
|
||||
connectWebsocket(
|
||||
url,
|
||||
data,
|
||||
(res) => {
|
||||
// console.log("onWsMessage接收到服务器的数据: ", res);
|
||||
console.log(JSON.parse(res));
|
||||
},
|
||||
(err) => {
|
||||
console.log("断开重连");
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 发送消息
|
||||
* @return {void}
|
||||
*/
|
||||
sendMsg() {
|
||||
sendMsg(5555); //value是发送的值
|
||||
// this.value = "";
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timeFlag);
|
||||
closeWebsocket();
|
||||
this.$ws.close();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -17,17 +17,10 @@
|
||||
: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-form-item label="消息类型" prop="type">
|
||||
<el-select
|
||||
v-model="warnForm.deviceId"
|
||||
placeholder="请选择校验状态"
|
||||
v-model="warnForm.type"
|
||||
placeholder="请选择消息类型"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
@@ -42,17 +35,17 @@
|
||||
<el-form-item label="时间" prop="dateTime">
|
||||
<el-date-picker
|
||||
v-model="dateTime"
|
||||
type="daterange"
|
||||
type="datetimerange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="阅读状态" prop="readStatus">
|
||||
<el-form-item label="阅读状态" prop="read">
|
||||
<el-select
|
||||
v-model="warnForm.readStatus"
|
||||
v-model="warnForm.read"
|
||||
placeholder="请选择阅读状态"
|
||||
clearable
|
||||
>
|
||||
@@ -108,27 +101,27 @@
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="`tabs-${index}`"
|
||||
:label="item.title"
|
||||
:name="item.value"
|
||||
:name="item.code"
|
||||
>
|
||||
<!-- 标签页头 -->
|
||||
<span slot="label"
|
||||
><i
|
||||
v-if="item.status === '1'"
|
||||
v-if="item.title === '成功'"
|
||||
style="color: #67c23a"
|
||||
class="el-icon-success"
|
||||
></i>
|
||||
<i
|
||||
v-if="item.status === '2'"
|
||||
v-if="item.title === '提醒'"
|
||||
style="color: #e6a23c"
|
||||
class="el-icon-info"
|
||||
></i>
|
||||
<i
|
||||
v-if="item.status === '3'"
|
||||
v-if="item.title === '告警'"
|
||||
style="color: #909399"
|
||||
class="el-icon-warning"
|
||||
></i>
|
||||
<i
|
||||
v-if="item.status === '4'"
|
||||
v-if="item.title === '错误'"
|
||||
style="color: #f56c6c"
|
||||
class="el-icon-error"
|
||||
></i
|
||||
@@ -146,23 +139,33 @@
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
|
||||
<el-table-column
|
||||
width="200"
|
||||
width="180"
|
||||
label="时间"
|
||||
align="center"
|
||||
prop="segmentName"
|
||||
prop="createdTime"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span class="table-index">asd</span>
|
||||
{{ scope.row.segmentName }}
|
||||
<span
|
||||
:class="`${scope.row.readStatus === 1 ? 'table-index' : ''}`"
|
||||
>{{ scope.row.createdTime }}</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="消息内容"
|
||||
show-overflow-tooltip
|
||||
label="消息标题"
|
||||
width="150"
|
||||
align="center"
|
||||
prop="stakeStart"
|
||||
/>
|
||||
<el-table-column label="车牌号" align="center" prop="stakeEnd" />
|
||||
<el-table-column label="设备id" align="center" prop="stakeEnd" />
|
||||
prop="title"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
label="消息内容"
|
||||
align="left"
|
||||
prop="content"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<div class="pagination-part">
|
||||
@@ -184,18 +187,21 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getWarningList,
|
||||
getWarningNav,
|
||||
markNoticeRead,
|
||||
} from "@/api/xj/inspection/center";
|
||||
export default {
|
||||
name: "WarningCenter",
|
||||
data() {
|
||||
return {
|
||||
// 查询表单绑定
|
||||
warnForm: {
|
||||
// 车牌号
|
||||
carNo: "",
|
||||
// 设备id
|
||||
deviceId: "",
|
||||
type: "",
|
||||
// 阅读状态
|
||||
readStatus: "",
|
||||
read: "",
|
||||
},
|
||||
// 设备列表
|
||||
deviceList: [],
|
||||
@@ -203,18 +209,13 @@ export default {
|
||||
dateTime: [],
|
||||
// 阅读状态列表
|
||||
readStatusList: [
|
||||
{ label: "已读", value: "1" },
|
||||
{ label: "未读", value: "2" },
|
||||
{ label: "已读", value: 2 },
|
||||
{ label: "未读", value: 1 },
|
||||
],
|
||||
// 导航栏选择绑定
|
||||
activeName: "1",
|
||||
activeName: "WARNING",
|
||||
// 导航栏列表
|
||||
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" },
|
||||
],
|
||||
editableTabs: [],
|
||||
// 预警列表
|
||||
warningList: [],
|
||||
// 列表勾选数据
|
||||
@@ -244,9 +245,22 @@ export default {
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getNav();
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 获取导航栏数据
|
||||
* @return {*}
|
||||
*/
|
||||
getNav() {
|
||||
getWarningNav().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.editableTabs = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 点击搜索事件
|
||||
* @return {*}
|
||||
@@ -262,12 +276,10 @@ export default {
|
||||
*/
|
||||
resetQuery() {
|
||||
this.warnForm = {
|
||||
// 车牌号
|
||||
carNo: "",
|
||||
// 设备id
|
||||
deviceId: "",
|
||||
type: "",
|
||||
// 阅读状态
|
||||
readStatus: "",
|
||||
read: "",
|
||||
};
|
||||
this.dateTime = [];
|
||||
this.getList();
|
||||
@@ -291,14 +303,20 @@ export default {
|
||||
const data = {
|
||||
...this.pagination,
|
||||
...this.warnForm,
|
||||
activeName: this.activeName,
|
||||
notificationType: this.activeName,
|
||||
startTime: this.dateTime ? this.dateTime[0] : "",
|
||||
endTime: this.dateTime ? this.dateTime[1] : "",
|
||||
};
|
||||
setTimeout(() => {
|
||||
this.warningList = [{id:"1", segmentName: "sSSSSSS" }];
|
||||
this.loading = false;
|
||||
}, 100);
|
||||
getWarningList(data)
|
||||
.then(({ code, rows, total }) => {
|
||||
if (code === 200) {
|
||||
this.warningList = rows;
|
||||
this.tableTotal = total;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -308,8 +326,11 @@ export default {
|
||||
*/
|
||||
handleTableChange(val) {
|
||||
if (val) {
|
||||
console.log(val, "ddd");
|
||||
this.getList();
|
||||
markNoticeRead(val.id).then(({ code }) => {
|
||||
if (code === 200) {
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -382,6 +403,7 @@ export default {
|
||||
width: 100%;
|
||||
height: calc(100vh - 5.4rem);
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
|
||||
Reference in New Issue
Block a user