<template>
|
<div class="visualization">
|
<div class="title"></div>
|
<mapView></mapView>
|
<div class="leftMenu">
|
<left-menu :leftChartData="leftChartData"></left-menu>
|
</div>
|
<div class="rightMenu">
|
<right-menu :rightChartData="rightChartData"></right-menu>
|
</div>
|
<div class="bottomMenu">
|
<bottomMenu @childData="childData"></bottomMenu>
|
</div>
|
<div class="visualInfo" v-show="showInfo">
|
<div class="infotitle">
|
<div class="titleInfo">
|
{{ isShow }}
|
</div>
|
<div @click="setInfoClose" class="titleInfo">
|
X
|
</div>
|
</div>
|
<div class="infobox">
|
<div class="infoContent">
|
<atlas v-if="isShow == '知识图谱'"></atlas>
|
<analysis v-if="isShow == '数据分析'"></analysis>
|
<statistics v-if="isShow == '数据统计'"></statistics>
|
<line-loss v-if="isShow == '数字线损'"></line-loss>
|
<semanticFunction v-if="isShow == '语义功能'"></semanticFunction>
|
</div>
|
|
</div>
|
</div>
|
<div v-show="showMsgFlag" @click="ShowMenuList" class="elBadge"
|
:disabled="$store.state.mapLayers.msgList.length == 0">
|
<el-badge :value="$store.state.mapLayers.msgList.length" class="item">
|
<i class="el-icon-chat-dot-square"></i>
|
</el-badge>
|
</div>
|
<div class="msgList" v-show="!showMsgFlag">
|
<msg-list @childData="receiveDataFromChild"></msg-list>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import mapView from './mapView.vue';
|
import leftMenu from './leftMenu.vue';
|
import rightMenu from './rightMenu.vue';
|
import bottomMenu from './bottomMenu.vue';
|
import atlas from '@/views/visual/atlas/index.vue'
|
import analysis from '@/views/visual/analysis/index.vue'
|
import lineLoss from './lineLoss.vue';
|
import statistics from '@/views/visual/statistics/index.vue'
|
import semanticFunction from '@/views/dataManager/semanticFunction/index.vue'
|
import msgList from './msgList.vue';
|
import { point } from '@turf/turf';
|
export default {
|
components: {
|
mapView, leftMenu,
|
rightMenu,
|
bottomMenu,
|
atlas,
|
analysis,
|
statistics,
|
lineLoss,
|
semanticFunction,
|
msgList
|
},
|
data() {
|
return {
|
isShow: null,
|
showInfo: false,
|
wsSocket: null,
|
rightChartData: {},
|
leftChartData: {},
|
showMsgFlag: true
|
}
|
},
|
beforeDestroy() {
|
if (this.wsSocket) {
|
this.wsSocket.close();
|
this.wsSocket.onclose = () => {
|
console.log('WebSocket连接关闭');
|
this.wsSocket = null
|
};
|
}
|
|
},
|
mounted() {
|
if (!this.wsSocket) {
|
this.createSocket();
|
}
|
},
|
methods: {
|
receiveDataFromChild(data) {
|
console.log(data);
|
|
this.showMsgFlag = true
|
},
|
ShowMenuList() {
|
if (this.$store.state.mapLayers.msgList.length == 0) return;
|
this.showMsgFlag = !this.showMsgFlag
|
|
},
|
createSocket() {
|
this.wsSocket = new WebSocket(config.pySocket);
|
this.wsSocket.onopen = (event) => {
|
console.log('WebSocket连接成功');
|
};
|
this.wsSocket.onmessage = (event) => {
|
// console.log('Received message:', event.data);
|
|
if (event.data != "连接成功") {
|
const obj = JSON.parse(event.data)
|
if (obj.type == "rain") {
|
this.$store.state.mapLayers.disasterRain.val = [obj]
|
} else if (obj.type == "snow") {
|
this.$store.state.mapLayers.disasterSnow.val = [obj]
|
} else if (obj.type == "fire") {
|
this.$store.state.mapLayers.disasterFire.val = [obj]
|
} else if (obj.type == "error") {
|
this.$store.state.mapLayers.msgList
|
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)
|
}
|
|
}
|
}
|
|
|
}
|
};
|
},
|
childData(res) {
|
if (!res) return
|
this.showInfo = true;
|
this.$nextTick(() => {
|
this.isShow = res.name
|
})
|
|
},
|
setInfoClose() {
|
this.showInfo = false;
|
this.isShow = null;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.visualization {
|
width: 100%;
|
height: 100%;
|
|
.title {
|
height: 86px;
|
width: 100%;
|
z-index: 40;
|
background: url(~@/assets/images/Screen/logobg.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: absolute;
|
}
|
|
.leftMenu {
|
width: 15%;
|
top: 90px;
|
left: 10px;
|
height: calc(100% - 180px);
|
z-index: 40;
|
position: absolute;
|
}
|
|
.rightMenu {
|
width: 15%;
|
top: 90px;
|
right: 10px;
|
height: calc(100% - 180px);
|
z-index: 40;
|
position: absolute;
|
}
|
|
.bottomMenu {
|
width: 100%;
|
height: 90px;
|
z-index: 40;
|
position: absolute;
|
bottom: 0px;
|
}
|
|
.elBadge {
|
// width: 15%;
|
top: 90px;
|
right: 16%;
|
z-index: 40;
|
padding: 10px;
|
position: absolute;
|
background: url(~@/assets/images/treeClose.png)no-repeat;
|
background-size: 100% 100%;
|
|
.el-icon-chat-dot-square {
|
color: white;
|
font-size: 22px;
|
margin-right: 5px;
|
}
|
}
|
|
.msgList {
|
width: 15%;
|
top: 90px;
|
right: 16%;
|
z-index: 40;
|
position: absolute;
|
|
height: 30%;
|
}
|
|
.visualInfo {
|
width: 60%;
|
height: 60%;
|
z-index: 50;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
background: url(~@/assets/images/Screen/chartbg.png)no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
|
flex-direction: column;
|
|
.infotitle {
|
height: 12%;
|
display: flex;
|
justify-content: space-between;
|
|
.titleInfo {
|
color: white;
|
font-size: 24px;
|
font-weight: bolder;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
margin-left: 8%;
|
margin-right: 3%;
|
}
|
|
}
|
|
.infobox {
|
flex: 1;
|
|
.infoContent {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
}
|
}
|
}
|
</style>
|
<style>
|
::v-deep.map-info-bar {
|
display: none;
|
}
|
</style>
|
