功能更新

suerprisePlus

2024-11-27 ab8f3297f7c8243d486c9da0900e4f813b2ea2df

功能更新

 .env.development

@@ -1,5 +1,5 @@
# é¡µé¢æ ‡é¢˜
VUE_APP_TITLE = å±±è¥¿é…ç½‘
VUE_APP_TITLE = ä¸€ä½“化指挥指挥舱

# å¼€å‘环境配置
ENV = 'development'

 .env.production

@@ -1,5 +1,5 @@
# é¡µé¢æ ‡é¢˜
VUE_APP_TITLE = å±±è¥¿é…ç½‘
VUE_APP_TITLE = ä¸€ä½“化指挥指挥舱

# ç”Ÿäº§çŽ¯å¢ƒé…ç½®
ENV = 'production'

 .env.staging

@@ -1,5 +1,5 @@
# é¡µé¢æ ‡é¢˜
VUE_APP_TITLE = å±±è¥¿é…ç½‘
VUE_APP_TITLE = ä¸€ä½“化智慧指挥舱

NODE_ENV = production


 .vscode/settings.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,3 @@
{
    "compile-hero.disable-compile-files-on-did-save-code": false
}

 public/config/config.js

@@ -20,6 +20,7 @@
const pwythHost = "http://localhost/pwyth";
//配置
const config = {

  images:  host + "/imgs/",
  // server服务
  apiServices: "http://" + apiHost + "/server/",
@@ -59,5 +60,6 @@
    url: pwythHost + "/modles/TY/tileset.json",
    cnName:"baseModel",
    id:"baseModel",
    flag:false,
 },
};

 public/imgs/filre.png

 public/imgs/thunder2.png

 public/imgs/ÏòÉÏ.png

 public/imgs/ÏòÓÒ.png

 public/index.html

@@ -13,7 +13,7 @@
  <script src="./CimSDK/CimSDK.min.js"></script>
  <link rel="stylesheet" href="./CimSDK/Workers/layui/css/layui.css">
  <link rel="stylesheet" href="./CimSDK/CimSDK.min.css">

 
  <title>
    <%= webpackConfig.name %>
  </title>

 src/assets/js/mapSdk/mapData.js

@@ -4,7 +4,7 @@
    menuData: [
        {
            id: 's1',
            name: '配网巡检',
            name: '巡检',
            children: [
                {
                    id: 'a1',
@@ -15,7 +15,7 @@
        },
        {
            id: 's2',
            name: '配网运检',
            name: '运检',
            children: [
                {
                    id: 'a1',
@@ -252,8 +252,8 @@
        dataOption: [
            { value: '杆塔', label: '杆塔' },
            {
                value: '配网箱',
                label: '配网箱',
                value: 'ç®±',
                label: 'ç®±',
            },
            {
                value: '环网柜',

 src/assets/js/mapSdk/menuManager.js

@@ -298,6 +298,9 @@
        }
        return std;
    },
    getCartesianCoord(longitude, latitude, height) {
        return Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
    },
    // æµ‹é‡
    setMenuS8(res) {
        const colorAll = this.colorAll;

 src/assets/logo/Login3.png

 src/assets/logo/Login3_1.png

 src/components/RuoYi/Msgger/index.vue

@@ -14,7 +14,7 @@
                <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></el-button>
                        <el-button @click="handleClick2(scope.row)" type="text" size="small">分发</el-button> 
                    </template>
                </el-table-column>
            </el-table>

 src/layout/components/Sidebar/Logo.vue

@@ -35,8 +35,8 @@
  },
  data() {
    return {
      title: '山西配网',
      logo: logoImg
      title: '一体化指挥舱',
      logo:""
    }
  }
}

 src/store/modules/mapLayers.js

@@ -6,17 +6,23 @@
    mapInfo: [],
    msgList: [],
    disasterSnow: {
        title:"雪",
        val:[]
        title: '雪',
        val: [],
    },
    disasterRain: {
        title:"雨",
        val:[]
        title: '雨',
        val: [],
    },
    disasterFire: {
        title:"火",
        val:[]
        title: '火',
        val: [],
    },
    weatherFlag: 2,
    weatherMsg: {
        name:'',
        data:[]
    },
    msgInfoData:null,
};

const mutations = {

 src/views/login copy.vue

@@ -7,8 +7,8 @@
                        <div class="logoImg"></div>
                        <!-- <img :src="logo" alt="logo" style="width: 100px; height: 100px; float: left" /> -->
                        <div style="float: left; margin-top: 13px; width: 300px; text-align: left">
                            <div>山西配网</div>
                            <div style="letter-spacing: 1.5px; font-size: 20px; font-weight: 600; margin-top: -8px; margin-left: 3px">山西配网</div>
                            <div>一体化智慧指挥舱</div>
                            <div style="letter-spacing: 1.5px; font-size: 20px; font-weight: 600; margin-top: -8px; margin-left: 3px">一体化智慧指挥舱</div>
                        </div>
                    </div>
                </div>

 src/views/login.vue

@@ -4,10 +4,6 @@
            <div class="titleItem">
                <div class="logImg"></div>
            </div>

            <!-- <div class="titleItem">
                <div class="logText">数字孪生智能配网巡检系统</div>
            </div> -->
        </div>
        <div class="logContent">
            <div class="contFrom">
@@ -361,7 +357,7 @@
        .titleItem {
            height: 100%;
            display: flex;
            align-items: center;
            align-items: end;
            height: 266px;
        }


 src/views/visualization/bottomMenu.vue

@@ -61,7 +61,7 @@
                //     }]
                // }, 
                {
                    name: '配网运检',
                    name: '运检',

                }
            ],

 src/views/visualization/index.vue

@@ -25,7 +25,7 @@
                    <atlas v-if="isShow == '知识图谱'"></atlas>
                    <analysis v-if="isShow == '数据分析'"></analysis>
                    <statistics v-if="isShow == '数据统计'"></statistics>
                    <line-loss v-if="isShow == '配网运检'"></line-loss>
                    <line-loss v-if="isShow == '运检'"></line-loss>
                    <semanticFunction v-if="isShow == '语义功能'"></semanticFunction>
                </div>

@@ -39,6 +39,21 @@
        </div>
        <div class="msgList" v-show="!showMsgFlag">
            <msg-list @childData="receiveDataFromChild"></msg-list>
        </div>
        <div class="msgListinfo" v-if="showMsgInfoFlag">
            <msg-list-info @childData="receiveDataInfoChild"></msg-list-info >
        </div>
        <div class="wearthList" v-if="$store.state.mapLayers.weatherFlag == 1">
            <div class="weatherHeader">
                {{ $store.state.mapLayers.weatherMsg.name }}
            </div>
            <div class="weatherBox">
                <ul>
                    <li v-for="(item, key) in $store.state.mapLayers.weatherMsg.data" :key="key">
                        {{ item.name }}:{{ item.val }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
@@ -54,6 +69,7 @@
import statistics from '@/views/visual/statistics/index.vue'
import semanticFunction from '@/views/dataManager/semanticFunction/index.vue'
import msgList from './msgList.vue';
import msgListInfo from './msgListInfo.vue';
import { point } from '@turf/turf';
export default {
    components: {
@@ -65,7 +81,8 @@
        statistics,
        lineLoss,
        semanticFunction,
        msgList
        msgList,
        msgListInfo
    },
    data() {
        return {
@@ -74,7 +91,8 @@
            wsSocket: null,
            rightChartData: {},
            leftChartData: {},
            showMsgFlag: true
            showMsgFlag: true,
            showMsgInfoFlag: false,
        }
    },
    beforeDestroy() {
@@ -94,9 +112,16 @@
    },
    methods: {
        receiveDataFromChild(data) {
            console.log(data);

            this.showMsgFlag = true
          if(data =="close"){
            this.showMsgFlag = true;
            this.showMsgInfoFlag = false
            return
          }
          this.showMsgInfoFlag = true;
            
        },
        receiveDataInfoChild() {
            this.showMsgInfoFlag = false
        },
        ShowMenuList() {
            if (this.$store.state.mapLayers.msgList.length == 0) return;
@@ -114,13 +139,20 @@
                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]
                        if ([obj] != this.$store.state.mapLayers.disasterRain.val) {
                            this.$store.state.mapLayers.disasterRain.val = [obj]
                        }

                    } else if (obj.type == "thunder") {
                        if ([obj] != this.$store.state.mapLayers.disasterSnow.val) {
                            this.$store.state.mapLayers.disasterSnow.val = [obj]
                        }
                    } else if (obj.type == "fire") {
                        this.$store.state.mapLayers.disasterFire.val = [obj]
                        if ([obj] != this.$store.state.mapLayers.disasterFire.val) {
                            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 {
@@ -173,7 +205,7 @@
    }

    .leftMenu {
        width: 12%;
        width: 14%;
        top: 90px;
        left: 10px;
        height: calc(100% - 180px);
@@ -182,7 +214,7 @@
    }

    .rightMenu {
        width: 12%;
        width: 14%;
        top: 90px;
        right: 10px;
        height: calc(100% - 180px);
@@ -215,13 +247,53 @@
        }
    }

    .wearthList {
        width: 15%;
        top: 90px;
        left: 15%;
        z-index: 40;
        position: absolute;
        background: url(~@/assets/images/Screen/chartbg.png) no-repeat;
        background-size: 100% 100%;
        height: 20%;
        padding: 10px;
        color: white;
        display: flex;
        flex-direction: column;

        .weatherHeader {
            line-height: 10px;
            font-size: 16px;
            padding-left: 20px;
        }

        .weatherBox {
            flex: 1;
            padding: 10px;
            overflow: auto;

            li {
                line-height: 30px;
                font-size: 16px;
            }
        }
    }

    .msgList {
        width: 15%;
        top: 90px;
        right: 16%;
        z-index: 40;
        position: absolute;
        height: 30%;
    }

    .msgListinfo {
        width: 15%;
        top: calc(30% + 100px);
        right: 16%;
        z-index: 40;
        position: absolute;
        height: 30%;
    }

@@ -268,6 +340,21 @@
        }
    }
}

/* è‡ªå®šä¹‰æ»šåŠ¨æ¡è½¨é“ */
::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
}

/* è‡ªå®šä¹‰æ»šåŠ¨æ¡çš„滑块 */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
}

/* è®¾ç½®æ»šåŠ¨æ¡çš„宽度 */
::-webkit-scrollbar {
    width: 1px;
}
</style>
<style>
::v-deep.map-info-bar {

 src/views/visualization/list/chart.vue

@@ -27,9 +27,9 @@
                    <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
                        <el-button v-show="flagData != roadItem.type" class="elButton" type="primary" plain
                            size="mini" @click="setChangeItem()">详情</el-button>
                        <el-button v-show="flagData == roadItem.address" class="elButton" type="danger" plain
                        <el-button v-show="flagData == roadItem.type" class="elButton" type="danger" plain
                            size="mini" @click="setCannelItem()">重置</el-button>
                    </td>
                </tr>
@@ -82,6 +82,8 @@
    },
    methods: {
        setCannelItem() {
            this.$store.state.mapLayers.weatherFlag = false;
            this.$store.state.mapLayers.weatherFlag = 2
            this.flagData = null;
            mapWeather.closeRegionWeather()
        },
@@ -91,8 +93,10 @@
        },
        setChangeItem() {
            var res = this.roadItem;
            window.regionWeather = res.address;
            window.regionWeather = res.type;
            var event = new Event('POIDetailDataChange');
            this.$store.state.mapLayers.weatherMsg = mapWeather.getWearData(res);
            this.$store.state.mapLayers.weatherFlag = 1;
            window.dispatchEvent(event);
            mapWeather.setRegionWeatherType(res);
        },

 src/views/visualization/list/chart1.vue

@@ -1,6 +1,6 @@
<template>
    <div class="chartListBox" :childData="childData">
        <div class="aside-title"> é›ª</div>
        <div class="aside-title">雷电</div>
        <div class="echartBox" v-show="roadItem.address">
            <table class="chartTable">
                <tr>
@@ -27,9 +27,9 @@
                    <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
                        <el-button v-show="flagData != roadItem.type" class="elButton" type="primary" plain
                            size="mini" @click="setChangeItem()">详情</el-button>
                        <el-button v-show="flagData == roadItem.address" class="elButton" type="danger" plain
                        <el-button v-show="flagData == roadItem.type" class="elButton" type="danger" plain
                            size="mini" @click="setCannelItem()">重置</el-button>
                    </td>
                </tr>
@@ -84,6 +84,8 @@
    },
    methods: {
        setCannelItem() {
            this.$store.state.mapLayers.weatherFlag = false;
            this.$store.state.mapLayers.weatherFlag = 2
            this.flagData = null;
            mapWeather.closeRegionWeather()
        },
@@ -93,8 +95,10 @@
        },
        setChangeItem() {
            var res = this.roadItem;
            window.regionWeather = res.address;
            window.regionWeather = res.type;
            var event = new Event('POIDetailDataChange');
            this.$store.state.mapLayers.weatherMsg = mapWeather.getWearData(res);
            this.$store.state.mapLayers.weatherFlag = 1;
            window.dispatchEvent(event);
            mapWeather.setRegionWeatherType(res);
        },

 src/views/visualization/list/chart2.vue

@@ -27,9 +27,9 @@
                    <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
                        <el-button v-show="flagData != roadItem.type" class="elButton" type="primary" plain
                            size="mini" @click="setChangeItem()">详情</el-button>
                        <el-button v-show="flagData == roadItem.address" class="elButton" type="danger" plain
                        <el-button v-show="flagData == roadItem.type" class="elButton" type="danger" plain
                            size="mini" @click="setCannelItem()">重置</el-button>
                    </td>
                </tr>
@@ -84,6 +84,8 @@
    },
    methods: {
        setCannelItem() {
            this.$store.state.mapLayers.weatherFlag = false;
            this.$store.state.mapLayers.weatherFlag = 2
            this.flagData = null;
            mapWeather.closeRegionWeather()
        },
@@ -93,8 +95,10 @@
        },
        setChangeItem() {
            var res = this.roadItem;
            window.regionWeather = res.address;
            window.regionWeather = res.type;
            var event = new Event('POIDetailDataChange');
            this.$store.state.mapLayers.weatherMsg = mapWeather.getWearData(res);
            this.$store.state.mapLayers.weatherFlag = 1;
            window.dispatchEvent(event);
            mapWeather.setRegionWeatherType(res);
        },

 src/views/visualization/list/mapWeather.js

@@ -1,9 +1,40 @@
import mapServer from '../../../assets/js/mapSdk/mapServe';
import mapServer from '@/assets/js/mapSdk/mapServe.js';
import * as turf from '@turf/turf';
const mapWeather = {
    regionWeather: null,
    particle: null,
    showRain: 'ShowRain',
    wallLayer: null,
    pathLayer: null,
    listBiildBord: [],
    listParticle: [],
    getWearData(res) {
        return {
            name: res.address,
            data: [
                {
                    name: '名称',
                    val: res.address,
                },
                {
                    name: '气象级别',
                    val: res.level,
                },
                {
                    name: '所属线路',
                    val: res.line,
                },
                {
                    name: '数据来源',
                    val: res.source,
                },
                {
                    name: '发布时间',
                    val: res.time,
                },
            ],
        };
    },
    closeRegionWeather() {
        if (this.regionWeather) {
            this.regionWeather.enableWeatherType = SmartEarth.Cesium.RegionWeather.TYPE_NONE;
@@ -19,6 +50,24 @@
                Viewer.scene.primitives.remove(Viewer.scene.primitives._primitives[i]);
            }
        }
        if (this.wallLayer) {
            Viewer.entities.remove(this.wallLayer);
            this.wallLayer = null;
            // this.wallLayer.removeFromMap();
            // this.wallLayer = null;
        }
        if (this.pathLayer) {
            this.pathLayer.deleteObject();
            this.pathLayer = null;
        }
        for (var i in this.listBiildBord) {
            this.listBiildBord[i].removeFromMap();
        }
        this.listBiildBord = [];
        for (var i in this.listParticle) {
            this.listParticle[i].deleteObject();
        }
        this.listParticle = [];
    },
    setRegionWeatherType(response) {
        this.closeRegionWeather();
@@ -32,51 +81,166 @@
            case 'rain':
                //  earthCtrl.camera.flyTo(coord[0], coord[1], 8000, 0, -90, 0, 0);
                this.showRain(response);

                break;
            case 'fire':
                this.showFire(response);
                earthCtrl.camera.flyTo(coord[0], coord[1], 1000, 0, -90, 0, 0);
                // earthCtrl.camera.flyTo(coord[0], coord[1], 1000, 0, -90, 0, 0);
                break;
            case 'snow':
                this.showSnow();
                earthCtrl.camera.flyTo(coord[0], coord[1], 1000, 0, -90, 0, 0);
                break;
            case 'thunder':
                this.showThunder(response);
                break;
        }
    },
    showFire(res) {
        const coord = this.getCoord(res);
    showThunder(response) {
        if (response.geom) {
            this.addWatherGeom(response.geom, 'thunder2.png');
        }
        // const points = this.chunkArray(response.point.split(','), 2);

        // for (var i in points) {
        //     const billboardEntity = earthCtrl.factory.createBillboard({
        //         name: '标签点',
        //         id: earthCtrl.factory.createUUID(),
        //         image: config.images + 'thunder.png', // è´´å›¾,
        //         width: 40,
        //         height: 40,
        //         lon: parseFloat(points[i][0]),
        //         lat: parseFloat(points[i][1]),
        //         alt: 1,
        //         scale: 6,
        //     });
        //     this.listBiildBord.push(billboardEntity);
        // }
    },
    addWatherGeom(response, image) {
        if (response.ploygon) {
            this.addWatherPloygon(this.chunkArray(response.ploygon, 2), image);
        }
        if (response.line) {
            this.addWatherLine(this.chunkArray(response.line, 2));
        }
    },
    addWatherLine(response) {
        const obj = {
            x: coord[0],
            y: coord[1],
            z: 0,
            type: 'FeatureCollection',
            features: [
                {
                    type: 'Feature',
                    geometry: {
                        type: 'LineString',
                        coordinates: response,
                    },
                },
            ],
        };
        this.particle = earthCtrl.factory.createParticleEffect(
            'flame',
            obj,
            {
                translation: SmartEarth.Cesium.Cartesian3.fromElements(0, 0, 0), //平移
                particleSize: 10,
        this.pathLayer = earthCtrl.factory.createPathLayer({
            url: obj,
            color: '#ff0000', //线的颜色
            width: 5.0, //线的宽度
            pointColor: '#FFFFFF', //移动点的颜色
            speed: 1,
            far: 50000,
        });
    },
    addWatherPloygon(response, image) {
        response.push(response[0]);
        const coord = this.getCentroid(response);
        earthCtrl.camera.flyTo(coord[0], coord[1], 80000, 0, -90, 0, 0);
        var geom = [];
        for (var i = 0; i < response.length; i++) {
            geom.push(response[i][0], response[i][1]);
        }

        this.wallLayer = Viewer.entities.add({
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArray(geom),
                material: new Cesium.ImageMaterialProperty({
                    image: config.images + image,
                    alpha: 0.2, // è®¾ç½®é€æ˜Žåº¦ä¸º0.5
                    repeat: Cesium.Cartesian2(1.0, 1.0), // ä¸é‡å¤
                    transparent: true, // å¯ç”¨png透明
                    color: new Cesium.Color(1.0, 1.0, 1.0, 0.3), // è®¾ç½®é¢œè‰²å’Œé€æ˜Žåº¦
                }),
                stRotation: Cesium.Math.toRadians(0),
            },
            function (data) {}
        );
        });
        // this.wallLayer = earthCtrl.factory.createPolygon({
        //     name: '面',
        //     id: earthCtrl.factory.createUUID(),
        //     material: Cesium.Color.fromCssColorString('rgba(128,128,128, .2)'),
        //     outlineColor: Cesium.Color.fromCssColorString('rgba(128,128,128, .5)'),
        //     lineWidth: 3,
        //     height: 10,
        //     outline: true,
        //     outlineWidth: 2,
        //     positions: SmartEarth.Cesium.Cartesian3.fromDegreesArrayHeights(geom),
        // });

        // const obj = { type: 'GeometryCollection', geometries: [{ type: 'LineString', coordinates: response }] };
        // // æµåŠ¨å¢™å›¾å±‚
        // this.wallLayer = earthCtrl.factory.createTrailWallLayer({
        //     url: obj,
        //     color: '#0000ff05', //颜色
        //     height: 20, //高度
        //     speed: 2,
        // });
    },
    showFire(response) {
        if (response.geom) {
            this.addWatherGeom(response.geom, 'filre.png');
        }
        // const points = this.chunkArray(response.point.split(','), 2);
        // for (var i in points) {
        //     const particle = earthCtrl.factory.createParticleEffect(
        //         'flame',
        //         {
        //             x: parseFloat(points[i][0]),
        //             y: parseFloat(points[i][1]),
        //             z: 0,
        //         },
        //         {
        //             translation: SmartEarth.Cesium.Cartesian3.fromElements(0, 0, 0), //平移
        //             particleSize: 10,
        //         },
        //         function (data) {}
        //     );

        //     this.listParticle.push(particle);
        // }
        // const coord = this.getCoord(res);
        // const obj = {
        //     x: coord[0],
        //     y: coord[1],
        //     z: 0,
        // };
        // this.particle = earthCtrl.factory.createParticleEffect(
        //     'flame',
        //     obj,
        //     {
        //         translation: SmartEarth.Cesium.Cartesian3.fromElements(0, 0, 0), //平移
        //         particleSize: 10,
        //     },
        //     function (data) {}
        // );
    },

    showRain(res) {
        var area = [];
        var std =[];
        for (var i = 0; i < res.area.length; i += 3) {
        var std = [];
        for (var i = 0; i < res.area.length; i += 2) {
            area.push(res.area[i]);
            area.push(res.area[i + 1]);
            std.push([res.area[i],res.area[i + 1]])
            std.push([res.area[i], res.area[i + 1]]);
        }
        std.push(std[0])
 
        
        std.push(std[0]);

        const polygon = turf.polygon([std]);

        const centerPoint = turf.center(polygon);
        const coord= centerPoint.geometry.coordinates;
        const coord = centerPoint.geometry.coordinates;
        earthCtrl.camera.flyTo(coord[0], coord[1], 8000, 0, -90, 0, 0);

        const geometry = new Cesium.PolygonGeometry({
@@ -115,13 +279,6 @@
        });
        primitive.name = this.showRain;
        Viewer.scene.primitives.add(primitive);

        // Viewer.camera.lookAt(primitive.boundingSphere.center, new Cesium.HeadingPitchRange(0.0, Cesium.Math.toRadians(-90), 5000));
        // if (this.regionWeather) {
        //     this.regionWeather.enableWeatherType = SmartEarth.Cesium.RegionWeather.TYPE_RAIN;
        //     this.regionWeather.regionAlpha = 0.6;
        //     this.regionWeather.regionGradientDistance = 300;
        // }
    },

    showSnow() {
@@ -135,6 +292,23 @@
        const coord = res.point.split(',');
        return coord;
    },
    getCentroid(response) {
        var centroid = turf.centroid(turf.polygon([response]));
        return centroid.geometry.coordinates;
    },
    chunkArray(array, size) {
        return array.reduce((chunks, current, index) => {
            const chunkIndex = Math.floor(index / size);

            if (!chunks[chunkIndex]) {
                chunks[chunkIndex] = [];
            }

            chunks[chunkIndex].push(current);

            return chunks;
        }, []);
    },
    getRegionWather(res) {
        if (res.type == 'fire') return;
        const coord = this.getCoord(res);

 src/views/visualization/mapView.vue

@@ -52,6 +52,9 @@
            }
            // é»˜è®¤è®¾ç½®åº•å›¾
            this.addImageLayer();
          
             

        },
        addImageLayer() {
            const baseLayer = mapData.baseLayer;
@@ -70,7 +73,7 @@
        },
        setdefaultPerspective() {
            mapConfig.sertCameraTo(mapData.defaultPerspective);
            if (config.baseModel.url) {
            if (config.baseModel.flag) {
                mapServer.addLayer(config.baseModel);
            }
            this.getSelectLayers();
@@ -84,7 +87,7 @@
                        if (item.cnName != "配网线") {
                            mapServer.addLayer(item)
                        }
                    } 
                    }

                })
                this.$nextTick(() => {
@@ -97,7 +100,7 @@
            earthCtrl.factory.createPathLayer({
                url: road,
                // color: "#00FA9A", //线的颜色
                 color: "#ff0000", //线的颜色
                color: "#ff0000", //线的颜色
                width: 5.0, //线的宽度
                pointColor: "#FFFFFF", //移动点的颜色
                speed: 1,

 src/views/visualization/msgList.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,116 @@

import * as turf from "@turf/turf";
const msgList = {
    label: null,
    circle: undefined,
    line: [],
    startLine: [],
    backLine: [],
    point: null,
    removeLabel() {
        if (this.label) {
            this.label.removeFromMap();
            this.label = null;
        }
        if (this.circle) {
            this.circle.removeFromMap();
            this.circle = undefined;
        }
        if (this.pathLine) {
            Viewer.entities.remove(this.pathLine);
            this.pathLine = null;
        }
        this.startLine = [];
        this.line = [];
        this.backLine = [];
    },
    setInit(item) {
        const point = item.point.split(',');
        this.point = point;
        this.label = earthCtrl.factory.createLabel({
            lon: point[0],
            lat: point[1],
            alt: 40,
            text: item.msg,
            image: config.sdkImg + 'Workers/image/mark.png',
            // æ–‡æœ¬åç§»é‡
            pixelOffset: new SmartEarth.Cesium.Cartesian2(0, -50),
            // å›¾ç‰‡åç§»é‡
            iPixelOffset: new SmartEarth.Cesium.Cartesian2(0, -20),
        });
        this.showCircle(point, '#ff0000');
        if (!item.geom.line) return;
        this.line = this.chunkArray(item.geom.line, 2);
        var center_Coord = [];

        for (var i = 0; i < this.line.length; i++) {
            center_Coord.push(turf.point([this.line[i][0], this.line[i][1]]));
            var coord_start =this.getCartesianCoord(this.line[i][0], this.line[i][1], 1);
            this.startLine.push(coord_start);
        }
        var features = turf.featureCollection(center_Coord);

        var center = turf.center(features).geometry.coordinates;

        earthCtrl.camera.flyTo(center[0], center[1], 8000, 0, -90, 0, 0);
        var backGeom = this.line.reverse();
        for (var i = 0; i < backGeom.length; i++) {
            var coord_back =this.getCartesianCoord(backGeom[i][0], backGeom[i][1], 1);
            this.backLine.push(coord_back);
        }
        // this.$nextTick(() => {
      
            this.showPathLine(this.startLine, true);
        // });
    },
    getCartesianCoord(longitude, latitude, height) {
        return Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
    },
    showCircle(res, color) {
        if (this.circle) {
            this.circle.removeFromMap();
            this.circle = undefined;
        }
        this.circle = earthCtrl.factory.createCircleScan({
            lon: res[0],
            lat: res[1],
            color: SmartEarth.Cesium.Color.fromCssColorString(color),
            height: 1,
            maxRadius: 100,
            duration: 5000,
        });
    },
    chunkArray(array, size) {
        return array.reduce((chunks, current, index) => {
          const chunkIndex = Math.floor(index / size);
  
          if (!chunks[chunkIndex]) {
            chunks[chunkIndex] = [];
          }
  
          chunks[chunkIndex].push(current);
  
          return chunks;
        }, []);
      },
    showPathLine(degreesArr, boolen) {
        this.pathLine = Viewer.entities.add({
            polyline: {
                clampToGround: true,
                //轨迹线的分布位置
                positions: degreesArr,
                material: new Cesium.ImageMaterialProperty({
                    //图片的颜色
                    //轨迹运行的速率
                    speed: 10,
                    //随意一张图片
                    image: config.images + '向右.png',
                    //将轨迹分成一行50个图片
                    repeat: { x: 40, y: 1 },
                }),
                width: 20,
            },
        });
    },
};
export default msgList;

 src/views/visualization/msgList.vue

@@ -1,18 +1,15 @@
<template>
  <div class="msgBox">

    <div class="aside-title">
      <div>故障信息</div>
      <div @click="sendDataToParent()" class="closeMsg">
        X
      </div>
      <div @click="sendDataToParent()" class="closeMsg">X</div>
    </div>
    <div class="menuTable">
      <table>
        <tr>
          <th style="width: 100px;">设备名称</th>
          <th style="width: 80px">设备名称</th>
          <th>设备位置</th>
          <th style="width: 100px;">操作</th>
          <th style="width: 40px">操作</th>
        </tr>
        <tr v-for="(item, indx) in $store.state.mapLayers.msgList" :key="indx">
          <td>{{ item.msg }}</td>
@@ -24,72 +21,39 @@
        </tr>
      </table>
    </div>

  </div>
</template>

<script>

import mapConfig from '../../assets/js/mapSdk/mapConfig';
import menuManager from '../../assets/js/mapSdk/menuManager';


import msgList from './msgList.js';
export default {
  components: {

  },
  props: {

  },
  components: {},
  props: {},
  data() {
    return {
      label: null,
    }
     
    };
  },
  watch: {

  },
  mounted() {

  },
  watch: {},
  mounted() { },
  methods: {
    sendDataToParent() {
      this.removeLabel();
      console.log(23);

      this.$emit('childData', '子组件数据');

      msgList.removeLabel();
      this.$emit('childData', 'close');
    },
    removeLabel() {
      if (this.label) {
        this.label.removeFromMap()
        this.label = null;
      }
    },
    
    handleClick(item) {
      this.removeLabel();
      // const point = mapConfig.getWKTParse(item.point)
      const point = item.point.split(",")
      this.label = earthCtrl.factory.createLabel({
        lon: point[0],
        lat: point[1],
        alt: 40,
        text: item.msg,
        image: config.sdkImg + 'Workers/image/mark.png',
        // æ–‡æœ¬åç§»é‡
        pixelOffset: new SmartEarth.Cesium.Cartesian2(0, -50),
        // å›¾ç‰‡åç§»é‡
        iPixelOffset: new SmartEarth.Cesium.Cartesian2(0, -20)
      });
      earthCtrl.userScene.flyTo(this.label)
      this.$store.state.mapLayers.msgInfoData = {...item};
      this.$emit('childData', 'showMsgInfoFlag');
      msgList.removeLabel();
      msgList.setInit(item)
    },
    handleClick2(item) {

    },
    setMsgClose() {

    }

  }
}
  },
};
</script>

<style lang="scss" scoped>
@@ -111,7 +75,7 @@
    color: #fff;
    width: 100%;
    height: 45px;
    line-height: 45px;
    line-height: 35px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
@@ -122,9 +86,8 @@
    }

    .closeMsg :hover {
      color: #409EFF;
      color: #409eff;
    }

  }

  .menuTable {
@@ -140,13 +103,15 @@

      th {
        text-align: center;

        word-wrap: break-word;
        word-break: break-all;
      }

      td {
        word-wrap: break-word;
        word-break: break-all;
        line-height: 30px;
        border-bottom: 1px solid #409EFF;
        ;
        border-bottom: 1px solid #409eff;
      }
    }
  }
@@ -163,13 +128,13 @@
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #409EFF;
  background: #409eff;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: rgba(237, 237, 237, .1);
  background: rgba(237, 237, 237, 0.1);
}
</style>
</style>

 src/views/visualization/msgListInfo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,141 @@
<template>
  <div class="msgBox">
    <div class="aside-title">
      <div>{{ this.$store.state.mapLayers.msgInfoData.line }}</div>
      <div @click="sendDataToParent()" class="closeMsg">X</div>
    </div>
    <div class="menuTable">
      <table>
        <tr>
          <td>异常信息：</td>
          <td>{{ this.$store.state.mapLayers.msgInfoData.msg }}</td>
        </tr>
        <tr>
          <td>异常地点：</td>
          <td>{{ this.$store.state.mapLayers.msgInfoData.point }}</td>
        </tr>
        <tr>
          <td>异常时间：</td>
          <td>{{ this.$store.state.mapLayers.msgInfoData.time }}</td>
        </tr>
        <tr>
          <td>数据来源：</td>
          <td>{{ this.$store.state.mapLayers.msgInfoData.source }}</td>
        </tr>


      </table>

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

<script>
import msgList from './msgList.js';



export default {
  components: {},
  props: {},
  data() {
    return {

    };
  },
  watch: {},
  mounted() {
  
  },
  methods: {
    sendDataToParent() {
      msgList.removeLabel();
      this.$emit('childData', '子组件数据');
    },

  },
};
</script>

<style lang="scss" scoped>
.msgBox {
  width: 100%;
  height: 100%;
  background: url(~@/assets/images/Screen/chartbg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  border-radius: 5px;
  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: 35px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;

    .closeMsg {
      margin-left: 64%;
      cursor: pointer;
    }

    .closeMsg :hover {
      color: #409eff;
    }
  }

  .menuTable {
    margin: 5px;
    margin-top: 10px;
    text-align: center;
    flex: 1;
    overflow: auto;

    table {
      width: 100%;
      color: white;

      th {
        text-align: center;
        word-wrap: break-word;
        word-break: break-all;
      }

      td {
        word-wrap: break-word;
        word-break: break-all;
        line-height: 30px;
        border-bottom: 1px solid #409eff;
      }
    }
  }
}

/*滚动条整体样式*/
::-webkit-scrollbar {
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 5px;
  height: 1px;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #409eff;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: rgba(237, 237, 237, 0.1);
}
</style>

 vue.config.js

@@ -8,7 +8,7 @@
const CompressionPlugin = require('compression-webpack-plugin');
const { log } = require('console');

const name = process.env.VUE_APP_TITLE || '山西配网'; // ç½‘页标题
const name = process.env.VUE_APP_TITLE || '一体化智慧指挥舱'; // ç½‘页标题

const port = process.env.port || process.env.npm_config_port || 80; // ç«¯å£
console.log( "123",process.env.VUE_APP_SERVER_API_URL);