websocket接口对接

suerprisePlus

2024-10-15 afd3fe35aeaae4f3984c94ca29d57b5a3a52107f

websocket接口对接

 public/glb/ZB.glb

Binary files differ

 public/glb/¿ª¹Ø.glb

Binary files differ

 public/glb/¹ÊÕÏָʾµÆ.glb

Binary files differ

 public/glb/»·Íø¹ñ.glb

Binary files differ

 public/glb/µçÀÂÖмä½ÓÍ·.glb

Binary files differ

 src/App.vue

@@ -24,18 +24,11 @@
  },
  data() {
    return {

      wsSocket: null
    }
  },
  mounted() {
    this.createSocket();
    setTimeout(() => {
      this.$store.state.mapLayers.msgList.push({
        msg: "变压器故障",
        point: "POINT (112.56978672907 37.8558881392881)"
      })

    }, 10000);
 
  },
  methods: {
    createSocket() {
@@ -44,16 +37,11 @@
        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
          }

        }
      };
    }

 src/assets/js/mapSdk/mapData.js

@@ -312,7 +312,7 @@
        XB: '箱变',
        HW: '环网柜',
        DLZJJT: '电缆中间接头',
        ZB: 'ZB',
        ZB: '美式箱变',
        KG: '开关',
        ZSQ: '故障指示器',
        PDS: 'PDS',

 src/components/RuoYi/Msgger/index.vue

@@ -2,7 +2,8 @@
    <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 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%">
@@ -31,7 +32,7 @@
</template>

<script>
 

import olMap from '@/components/mapOl/index.vue';

export default {
@@ -64,6 +65,7 @@
                type: 'point',
                isShow: false,
            }
 
            this.parentData = JSON.stringify([obj])
            this.innerVisible = true
        },
@@ -81,12 +83,33 @@
            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.mes) {
                        this.setShowMsg(obj)
                    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)
                            }




                        }
                    }
                }
                // å¤„理接收到的消息
@@ -105,9 +128,16 @@
        },
    },
    mounted() {
        // if (!this.wsSocket) {
        //     this.createSocket();
        // }
        if (!this.wsSocket) {
            this.createSocket();
        }

    },
    beforeDestroy() {
        if (this.wsSocket) {
            this.wsSocket.close();

        }

    },
}

 src/components/mapOl/index.vue

@@ -61,7 +61,7 @@
        initOlMap() {
            const baseLayer = mapData.baseLayer;
            const vecUrl = baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl
            const geo= config.geoServer;
            const geo = config.geoServer;
            var vectorLayer = new TileLayer({
                source: new XYZ({
                    url: vecUrl + config.tdToken,
@@ -96,7 +96,7 @@
                }),
            });

console.log(geo.url + geo.wms)

            var layer2 = new Image({
                name: "Wms_Layer",
                source: new ImageWMS({
@@ -113,12 +113,17 @@
            if (this.parentData) {
                if (this.parentData.indexOf('type') > -1) {
                    const data = JSON.parse(this.parentData)[0];

                    console.log(data);

                    this.isShow = data.isShow
                    if (data.type == 'point') {
                        const obj = mapConfig.getWKTParse(data.val.point)
                        
                        const obj = data.val.point.split(" ");
                        console.log(obj);
                        this.formInline = {
                            lon: obj.coordinates[0],
                            lat: obj.coordinates[1],
                            lon: obj[0],
                            lat: obj[1],
                        }
                        this.addPointData(obj);
                    } else if (data.type == 'line') {
@@ -176,12 +181,12 @@
            this.mapol.addLayer(vectorLayer);
            this.mapol.getView().fit(extent, {
                size: this.mapol.getSize(),
                padding: [100, 100,200,100], // å››ä¸ªæ–¹å‘的边距，可选
                padding: [100, 100, 200, 100], // å››ä¸ªæ–¹å‘的边距，可选
                constrainResolution: false, // æ˜¯å¦é™åˆ¶åˆ†è¾¨çŽ‡ï¼Œå¯é€‰
            });
        },
        addPointData(res) {
            const coord = res.coordinates;
            const coord = res;

            const urlImg = config.sdkImg + 'Workers/image/mark.png';
            var geom = transform(

 src/store/modules/mapLayers.js

@@ -4,8 +4,19 @@
    layerTree: [],
    defaultLayer: [],
    mapInfo: [],
    msgList:[ ]

    msgList: [],
    disasterSnow: {
        title:"雪",
        val:[]
    },
    disasterRain: {
        title:"雨",
        val:[]
    },
    disasterFire: {
        title:"火",
        val:[]
    },
};

const mutations = {
@@ -17,8 +28,7 @@
    },
    CHANGE_MAPINFO: (state, res) => {
        state.mapInfo = res;
        busEvent.$emit('CHANGE_MAPINFO',  state.mapInfo);
    
        busEvent.$emit('CHANGE_MAPINFO', state.mapInfo);
    },
};


 src/views/visualization/data.js

@@ -136,8 +136,8 @@
                address: '广场变电站',
                type: 'rain',
                data: [
                    23.97957226, 23.67522328, 23.64627646, 23.98678133, 23.7049411, 23.90907715, 23.97135417, 23.93937771, 24.7313574, 23.78658559, 23.86060646, 23.93976822, 23.77442911, 23.70706984, 23.97513076,
                    24.00566013, 23.68618352, 23.62046202, 23.94578353, 23.667424, 23.89900528, 23.84667184, 23.79052521, 23.54961054,
                    23.97957226, 3.67522328, 23.64627646, 23.98678133, 23.7049411, 23.90907715, 23.97135417, 23.93937771, 24.7313574, 23.78658559, 23.86060646, 23.93976822, 23.77442911, 23.70706984, 23.97513076,
                    10.00566013, 23.68618352, 23.62046202, 23.94578353, 23.667424, 23.89900528, 23.84667184, 23.79052521, 23.54961054,
                ],
                source: '山西省气象局',
                time: '2024 -09 - 26 10:06: 40',

 src/views/visualization/index.vue

@@ -37,7 +37,7 @@
                <i class="el-icon-chat-dot-square"></i>
            </el-badge>
        </div>
        <div class="msgList"  v-show="!showMsgFlag" >
        <div class="msgList" v-show="!showMsgFlag">
            <msg-list @childData="receiveDataFromChild"></msg-list>
        </div>
    </div>
@@ -54,6 +54,7 @@
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,
@@ -73,11 +74,12 @@
            wsSocket: null,
            rightChartData: {},
            leftChartData: {},
            showMsgFlag: true   
            showMsgFlag: true
        }
    },
    beforeDestroy() {
        if (this.wsSocket) {
            this.wsSocket.close();
            this.wsSocket.onclose = () => {
                console.log('WebSocket连接关闭');
                this.wsSocket = null
@@ -87,13 +89,13 @@
    },
    mounted() {
        if (!this.wsSocket) {
            // this.createSocket();
            this.createSocket();
        }
    },
    methods: {
        receiveDataFromChild(data) {
            console.log(data);
            

            this.showMsgFlag = true
        },
        ShowMenuList() {
@@ -111,12 +113,31 @@

                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)
                            }


                    this.leftChartData = {
                        type: 'left1',
                        val: obj
                        }
                    }


                }
            };
        },

 src/views/visualization/leftMenu.vue

@@ -1,13 +1,13 @@
<template>
    <div class="leftMnu">
        <div class="menuBox">
            <chart-vue :childData="childData"></chart-vue>
            <chart-vue></chart-vue>
        </div>
        <div class="menuBox">
            <chart-vue :childData="childData1"></chart-vue>
            <chart-vue1></chart-vue1>
        </div>
        <div class="menuBox">
            <chart-vue :childData="childData2"></chart-vue>
            <chart-vue2></chart-vue2>
        </div>
    </div>
</template>
@@ -15,16 +15,21 @@
<script>
import * as echarts from 'echarts';
import chartVue from './list/chart.vue';
import chartVue1 from './list/chart1.vue';
import chartVue2 from './list/chart2.vue';
import data from './data.js';
export default {
    components: {
        chartVue
        chartVue, chartVue1, chartVue2
    },
    props: {
        leftChartData: {
            type: Object,
            required: true
        },
    },
    computed: {

    },
    data() {
        return {
@@ -39,28 +44,10 @@

    mounted() {
        window.regionWeather = null;
        this.initEchart();

    },
    methods: {
        initEchart() {
            this.initEchart1();
            this.initEchart2();
            this.initEchart3();
        },
        initEchart1() {
            var chart1 = data[3];
            chart1.id = "myChart01";
            this.childData = chart1
        },
        initEchart2() {
            var chart2 = data[4];
            chart2.id = "myChart02";
            this.childData1 = chart2
        }, initEchart3() {
            var chart3 = data[5];
            chart3.id = "myChart03";
            this.childData2 = chart3
        }
       
    }
}
</script>
@@ -72,7 +59,6 @@
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .menuBox {
        width: 100%;
        height: 33%;
@@ -85,7 +71,6 @@
        .aside-title {
            box-sizing: border-box;
            padding-left: 30px;

            font-size: 15px;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
            color: #fff;
@@ -105,7 +90,6 @@
            .chartBox {
                width: calc(100% - 10px);
                height: calc(100% - 10px);

                position: absolute;
            }
        }

 src/views/visualization/list/chart.vue

@@ -1,7 +1,7 @@
<template>
    <div class="chartListBox" :childData="childData">
        <div class="aside-title">{{ childData.title }}</div>
        <div class="echartBox">
        <div class="aside-title"> é›¨</div>
        <div class="echartBox" v-show="roadItem.address">
            <table class="chartTable">
                <tr>
                    <th></th>
@@ -35,7 +35,11 @@
                </tr>
            </table>
            <div class="chartEchart">
                <div :id="chartId" class="myChart"> </div>
                <div class="myChart">
                    <div id="chartRain" class="myChartID"></div>


                </div>
            </div>
        </div>
    </div>
@@ -53,16 +57,14 @@
        }
    },
    watch: {
        childData(newValue, oldValue) {
            if (newValue) {
                this.chartId = newValue.id;
                this.title = newValue.title;
                setTimeout(() => {
                    this.setEchartChange(newValue.val[0])

                }, 200);
            }
        }
        "$store.state.mapLayers.disasterRain": {
            handler(newVal, oldVal) {
                if (newVal.val) {
                    this.setEchartChange(newVal);
                }
            },
            deep: true
        },
    },
    data() {
        return {
@@ -75,7 +77,9 @@
    created() {
        window.addEventListener('POIDetailDataChange', this.handlePOIDetailDataChange)
    },
    mounted() {

    },
    methods: {
        setCannelItem() {
            this.flagData = null;
@@ -92,12 +96,18 @@
            window.dispatchEvent(event);
            mapWeather.setRegionWeatherType(res);
        },
        showEchart() {

        setEchartChange(res) {
            this.roadItem = res
            if (!this.roadItem) return
            if (!this.roadItem.data) return;
            const data = this.roadItem.data;
            const id = document.getElementById(this.chartId)
            var div = document.getElementsByClassName("chartEchart")[0];
            if (div.offsetWidth == 0 || div.offsetHeight == 0) return
            document.getElementById("chartRain").style.width = div.offsetWidth + "px"
            document.getElementById("chartRain").style.height = div.offsetHeight + "px"
            var data = this.roadItem.data;


            const id = document.getElementById("chartRain")
            var std = [];
            for (var i = 0; i < data.length; i++) {
                var h = i + 1
@@ -151,6 +161,13 @@


            option && myChart.setOption(option);
        },
        setEchartChange(res) {
            

            this.roadItem = res.val[0]
            this.showEchart();

        }
    }
}
@@ -188,12 +205,18 @@
        // justify-content: space-around;
        .chartEchart {
            flex: 1;

        }

        .myChart {
            width: 100%;
            height: 100%;
            position: relative;


            .myChartID {
                position: absolute;

            }
        }

        .chartTd {

 src/views/visualization/list/chart1.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,247 @@
<template>
    <div class="chartListBox" :childData="childData">
        <div class="aside-title"> é›ª</div>
        <div class="echartBox" v-show="roadItem.address">
            <table class="chartTable">
                <tr>
                    <th></th>
                    <th>
                        çº¿è·¯
                    </th>
                    <th>
                        ç±»åž‹
                    </th>

                    <th>
                        æ“ä½œ
                    </th>
                </tr>
                <tr>
                    <td class="chartTd" colspan="4">
                        <div class=" elDriver">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>{{ roadItem.address }}</td>
                    <td>{{ roadItem.line }}</td>
                    <td style="color:#f56c6c">{{ roadItem.level }}</td>
                    <td style="color:#409eff">
                        <el-button v-show="flagData != roadItem.address" class="elButton" type="primary" plain
                            size="mini" @click="setChangeItem()">详情</el-button>
                        <el-button v-show="flagData == roadItem.address" class="elButton" type="danger" plain
                            size="mini" @click="setCannelItem()">重置</el-button>
                    </td>
                </tr>
            </table>
            <div class="chartEchart">
                <div class="myChart">
                    <div id="chartSnow" class="myChartID"></div>


                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import mapWeather from './mapWeather';

export default {
    props: {
        childData: {
            type: Object,
            default: null
        }
    },
    watch: {
        "$store.state.mapLayers.disasterSnow": {
            handler(newVal, oldVal) {
                if (newVal.val) {
                    this.setEchartChange(newVal);
                }
            },
            deep: true
        },
    },
    data() {
        return {
            chartId: "",
            title: "",
            flagData: null,
            roadItem: {},
        }
    },
    created() {
        window.addEventListener('POIDetailDataChange', this.handlePOIDetailDataChange)
    },
    mounted() {


        // this.showEchart();
    },
    methods: {
        setCannelItem() {
            this.flagData = null;
            mapWeather.closeRegionWeather()
        },
        handlePOIDetailDataChange() {
            if (this.flagData == window.regionWeather) return
            this.flagData = window.regionWeather;
        },
        setChangeItem() {
            var res = this.roadItem;
            window.regionWeather = res.address;
            var event = new Event('POIDetailDataChange');
            window.dispatchEvent(event);
            mapWeather.setRegionWeatherType(res);
        },
        showEchart() {
       
            if (!this.roadItem.data) return;
            var div = document.getElementsByClassName("chartEchart")[0];
            if (div.offsetWidth == 0 || div.offsetHeight == 0) return
            document.getElementById("chartSnow").style.width = div.offsetWidth + "px"
            document.getElementById("chartSnow").style.height = div.offsetHeight + "px"
            var data = this.roadItem.data;
       

            const id = document.getElementById("chartSnow")
            var std = [];
            for (var i = 0; i < data.length; i++) {
                var h = i + 1
                var t = h > 10 ? h : "0" + h;
                std.push(t + ":00:00")
            }
            const myChart = echarts.init(id);
            var option = {
                title: {
                    text: "",
                    textStyle: {
                        color: "white"
                    }
                },
                xAxis: {
                    type: 'category',
                    data: std,
                    axisLabel: {
                        textStyle: {
                            color: 'WHITE' // è®¾ç½®å­—体颜色为红色
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: 'WHITE' // è®¾ç½®å­—体颜色为红色
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                series: [
                    {
                        data: data,
                        type: 'line',
                        smooth: true,
                        // itemStyle: {
                        //     normal: {

                        //         lineStyle: {
                        //             color: ""// çº¿çš„颜色
                        //         }
                        //     }
                        // }
                    }
                ]
            };


            option && myChart.setOption(option);
        },
        setEchartChange(res) {
            this.roadItem = res.val[0]
            this.showEchart();
        }
    }
}
</script>

<style lang="scss" scoped>
.chartListBox {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;

    .aside-title {
        box-sizing: border-box;
        padding-left: 30px;
        font-size: 15px;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
        color: #fff;
        width: 100%;
        height: 45px;
        line-height: 45px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .echartBox {
        flex: 1;
        padding: 5px;
        position: relative;
        color: white;
        display: flex;
        flex-direction: column;

        // justify-content: space-around;
        .chartEchart {
            flex: 1;
        }

        .myChart {
            width: 100%;
            height: 100%;
            position: relative;


            .myChartID {
                position: absolute;

            }
        }

        .chartTd {
            width: 100%;
            padding: 0px !important;
        }

        .elDriver {
            width: 100%;
            height: 2px;
            background: #409EFF;
            margin: 10px 0px;

        }

        .chartTable {
            width: 100%;

            td {
                text-align: center;

                .elButton {
                    padding: 5px 10px;
                }
            }
        }

    }
}
</style>

 src/views/visualization/list/chart2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,249 @@
<template>
    <div class="chartListBox" :childData="childData">
        <div class="aside-title"> ç«</div>
        <div class="echartBox" v-show="roadItem.address">
            <table class="chartTable">
                <tr>
                    <th></th>
                    <th>
                        çº¿è·¯
                    </th>
                    <th>
                        ç±»åž‹
                    </th>

                    <th>
                        æ“ä½œ
                    </th>
                </tr>
                <tr>
                    <td class="chartTd" colspan="4">
                        <div class=" elDriver">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>{{ roadItem.address }}</td>
                    <td>{{ roadItem.line }}</td>
                    <td style="color:#f56c6c">{{ roadItem.level }}</td>
                    <td style="color:#409eff">
                        <el-button v-show="flagData != roadItem.address" class="elButton" type="primary" plain
                            size="mini" @click="setChangeItem()">详情</el-button>
                        <el-button v-show="flagData == roadItem.address" class="elButton" type="danger" plain
                            size="mini" @click="setCannelItem()">重置</el-button>
                    </td>
                </tr>
            </table>
            <div class="chartEchart">
                <div class="myChart">
                    <div id="chartFire" class="myChartID"></div>


                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import mapWeather from './mapWeather';

export default {
    props: {
        childData: {
            type: Object,
            default: null
        }
    },
    watch: {
        "$store.state.mapLayers.disasterFire": {
            handler(newVal, oldVal) {
                if (newVal.val) {
                    this.setEchartChange(newVal);
                }
            },
            deep: true
        },
    },
    data() {
        return {
            chartId: "",
            title: "",
            flagData: null,
            roadItem: {},
        }
    },
    created() {
        window.addEventListener('POIDetailDataChange', this.handlePOIDetailDataChange)
    },
    mounted() {


        this.showEchart();
    },
    methods: {
        setCannelItem() {
            this.flagData = null;
            mapWeather.closeRegionWeather()
        },
        handlePOIDetailDataChange() {
            if (this.flagData == window.regionWeather) return
            this.flagData = window.regionWeather;
        },
        setChangeItem() {
            var res = this.roadItem;
            window.regionWeather = res.address;
            var event = new Event('POIDetailDataChange');
            window.dispatchEvent(event);
            mapWeather.setRegionWeatherType(res);
        },
        showEchart() {
       
            if (!this.roadItem.data) return;
            var div = document.getElementsByClassName("chartEchart")[0];
            if (div.offsetWidth == 0 || div.offsetHeight == 0) return
            document.getElementById("chartFire").style.width = div.offsetWidth + "px"
            document.getElementById("chartFire").style.height = div.offsetHeight + "px"
            var data = this.roadItem.data;
       

            const id = document.getElementById("chartFire")
            var std = [];
            for (var i = 0; i < data.length; i++) {
                var h = i + 1
                var t = h > 10 ? h : "0" + h;
                std.push(t + ":00:00")
            }
            const myChart = echarts.init(id);
            var option = {
                title: {
                    text: "",
                    textStyle: {
                        color: "white"
                    }
                },
                xAxis: {
                    type: 'category',
                    data: std,
                    axisLabel: {
                        textStyle: {
                            color: 'WHITE' // è®¾ç½®å­—体颜色为红色
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: 'WHITE' // è®¾ç½®å­—体颜色为红色
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                series: [
                    {
                        data: data,
                        type: 'line',
                        smooth: true,
                        // itemStyle: {
                        //     normal: {

                        //         lineStyle: {
                        //             color: ""// çº¿çš„颜色
                        //         }
                        //     }
                        // }
                    }
                ]
            };


            option && myChart.setOption(option);
        },
        setEchartChange(res) {
            this.roadItem = res.val[0]
            this.showEchart();


        }
    }
}
</script>

<style lang="scss" scoped>
.chartListBox {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;

    .aside-title {
        box-sizing: border-box;
        padding-left: 30px;
        font-size: 15px;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
        color: #fff;
        width: 100%;
        height: 45px;
        line-height: 45px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .echartBox {
        flex: 1;
        padding: 5px;
        position: relative;
        color: white;
        display: flex;
        flex-direction: column;

        // justify-content: space-around;
        .chartEchart {
            flex: 1;
        }

        .myChart {
            width: 100%;
            height: 100%;
            position: relative;


            .myChartID {
                position: absolute;

            }
        }

        .chartTd {
            width: 100%;
            padding: 0px !important;
        }

        .elDriver {
            width: 100%;
            height: 2px;
            background: #409EFF;
            margin: 10px 0px;

        }

        .chartTable {
            width: 100%;

            td {
                text-align: center;

                .elButton {
                    padding: 5px 10px;
                }
            }
        }

    }
}
</style>

 src/views/visualization/list/mapWeather.js

@@ -66,7 +66,7 @@
    },
    getCoord(res) {
       const coord = res.point.split(',');
        console.log('测试', coord);
       

        return coord;
    },

 src/views/visualization/mapView.vue

@@ -84,7 +84,7 @@
                        if (item.cnName != "配网线") {
                            mapServer.addLayer(item)
                        }
                    }
                    } 

                })
                this.$nextTick(() => {

 src/views/visualization/msgList.vue

@@ -66,10 +66,11 @@
    },
    handleClick(item) {
      this.removeLabel();
      const point = mapConfig.getWKTParse(item.point)
      // const point = mapConfig.getWKTParse(item.point)
      const point = item.point.split(" ")
      this.label = earthCtrl.factory.createLabel({
        lon: point.coordinates[0],
        lat: point.coordinates[1],
        lon: point[0],
        lat: point[1],
        alt: 40,
        text: item.msg,
        image: config.sdkImg + 'Workers/image/mark.png',