<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>
|
</div>
|
|
</div>
|
</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 { type } from 'jquery';
|
export default {
|
components: {
|
mapView, leftMenu,
|
rightMenu, bottomMenu, atlas, analysis, statistics, lineLoss
|
},
|
data() {
|
return {
|
isShow: null,
|
showInfo: false,
|
wsSocket: null,
|
rightChartData: {},
|
leftChartData:{},
|
}
|
},
|
beforeDestroy() {
|
if (this.wsSocket) {
|
this.wsSocket.onclose = () => {
|
console.log('WebSocket连接关闭');
|
this.wsSocket = null
|
};
|
}
|
|
},
|
mounted() {
|
if (!this.wsSocket) {
|
this.createSocket();
|
}
|
},
|
methods: {
|
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)
|
|
|
this.leftChartData = {
|
type: 'left1',
|
val: 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;
|
}
|
|
.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>
|
