<template>
|
<div class="msgBox" @click.stop="setShowMenuClick(true)">
|
|
<i style="font-size: 20px;" class="el-icon-chat-line-round"></i>
|
<el-badge v-show="$store.state.mapLayers.msgList.length > 0" :value="$store.state.mapLayers.msgList.length"
|
class="item">
|
</el-badge>
|
<el-dialog title="故障信息" :visible.sync="dialogVisible" width="30%" :show-close="false">
|
<el-table :data="$store.state.mapLayers.msgList" style="width: 100%">
|
<el-table-column prop="msg" label="设备名称">
|
</el-table-column>
|
<el-table-column prop="point" label="设备位置">
|
</el-table-column>
|
<el-table-column label="操作" width="100">
|
<template slot-scope="scope">
|
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
|
<el-button @click="handleClick2(scope.row)" type="text" size="small">分发</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click.stop="dialogVisible = false">关 闭</el-button>
|
</span>
|
<el-dialog width="30%" title="位置" :visible.sync="innerVisible" append-to-body>
|
<div style="height: 540px">
|
<olMap v-if="innerVisible" :parentData="parentData"></olMap>
|
</div>
|
</el-dialog>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
|
import olMap from '@/components/mapOl/index.vue';
|
|
export default {
|
name: 'RouYiMsg',
|
components: {
|
olMap
|
},
|
data() {
|
return {
|
msgCount: 1,
|
dialogVisible: false,
|
dialogFlag: false,
|
wsSocket: null,
|
innerVisible: false,
|
msgData: [],
|
parentData: null,
|
}
|
},
|
methods: {
|
handleClick2(row) {
|
this.$message({
|
showClose: true,
|
message: '已分发到相关负责人',
|
type: 'success'
|
});
|
},
|
handleClick(row) {
|
const obj = {
|
val: row,
|
type: 'point',
|
isShow: false,
|
}
|
|
this.parentData = JSON.stringify([obj])
|
this.innerVisible = true
|
},
|
setShowMenuClick(res) {
|
|
this.dialogVisible = true
|
|
|
},
|
handleClose() {
|
this.dialogVisible = false
|
},
|
createSocket() {
|
this.wsSocket = new WebSocket(config.pySocket);
|
this.wsSocket.onopen = (event) => {
|
console.log('WebSocket连接成功');
|
};
|
this.wsSocket.onclose = () => {
|
console.log('WebSocket连接关闭');
|
this.wsSocket = null
|
};
|
this.wsSocket.onmessage = (event) => {
|
|
if (event.data != "连接成功") {
|
const obj = JSON.parse(event.data);
|
if (obj.type == "error") {
|
if (this.$store.state.mapLayers.msgList.length == 0) {
|
this.$store.state.mapLayers.msgList.push(obj)
|
} else {
|
|
var rs = this.$store.state.mapLayers.msgList;
|
var st = rs.filter(item => {
|
if (item.msg == obj.msg && item.point == obj.point && item.line == obj.line) {
|
return item
|
}
|
})
|
if (st.length <= 0) {
|
this.$store.state.mapLayers.msgList.push(obj)
|
}
|
|
|
|
|
}
|
}
|
}
|
// 处理接收到的消息
|
};
|
},
|
setShowMsg(res) {
|
const filter = this.msgData.filter(item => {
|
if (item.msg == res.msg && item.point == res.point) {
|
return item;
|
}
|
})
|
if (filter.length > 0) return;
|
this.msgData.push(res)
|
this.msgCount = this.msgData.length;
|
|
},
|
},
|
mounted() {
|
if (!this.wsSocket) {
|
this.createSocket();
|
}
|
|
},
|
beforeDestroy() {
|
if (this.wsSocket) {
|
this.wsSocket.close();
|
|
}
|
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.msgBox {
|
display: flex;
|
|
|
}
|
</style>
|
