|
@@ -1,415 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="container">
|
|
|
- <el-row :gutter="10" style="height:100%;">
|
|
|
-
|
|
|
- <el-col style="height:100%;position: relative;" :span="24">
|
|
|
- <el-card class="table1">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>兵力装备显示</span>
|
|
|
- </div>
|
|
|
- <el-table :data="maptable" @current-change="instanceChange" :row-style="{ height: '20px' }" :cell-style="{ padding: '0px' }">
|
|
|
- <el-table-column prop="platID" label="ID"></el-table-column>
|
|
|
- <el-table-column prop="platName" label="名称"></el-table-column>
|
|
|
- <el-table-column prop="isEnemy" label="敌我属性"></el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
- <el-card class="table2">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>战损显示</span>
|
|
|
- </div>
|
|
|
- <el-table :data="healthtable" @current-change="instanceChange" :row-style="{ height: '20px' }" :cell-style="{ padding: '0px' }">
|
|
|
- <el-table-column prop="platID" label="ID"></el-table-column>
|
|
|
- <el-table-column prop="platName" label="名称"></el-table-column>
|
|
|
- <el-table-column prop="platState" label="健康度"></el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
- <div class="main-layout">
|
|
|
- <div id="cesiumContainer" class="mapecharts"></div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-
|
|
|
-import friendplane from "../../../public/static/friend.glb"
|
|
|
-import enemyplane from "../../../public/static/enemy.glb"
|
|
|
-export default ({
|
|
|
- computed: {
|
|
|
- ...mapGetters([
|
|
|
- 'map',
|
|
|
- 'init'
|
|
|
- ]),
|
|
|
- },
|
|
|
-
|
|
|
- data() {
|
|
|
- return {
|
|
|
- pattern: "two-dimensional",
|
|
|
- instancetable: null,
|
|
|
- propertyinittable: null,
|
|
|
- propertycontroltable: null,
|
|
|
- timer: null,
|
|
|
- viewer: null,
|
|
|
- mapEchart: null,
|
|
|
- maptable: [
|
|
|
- {
|
|
|
- 'platID': '1001',
|
|
|
- 'platName': '弹道导弹1',
|
|
|
- 'isEnemy': '我方'
|
|
|
- },
|
|
|
- {
|
|
|
- 'platID': '1002',
|
|
|
- 'platName': '弹道导弹2',
|
|
|
- 'isEnemy': '我方'
|
|
|
- },
|
|
|
- // {
|
|
|
- // 'platID': '1003',
|
|
|
- // 'platName': '弹道导弹3',
|
|
|
- // 'isEnemy': '我方'
|
|
|
- // },
|
|
|
- // {
|
|
|
- // 'platID': '1004',
|
|
|
- // 'platName': '弹道导弹4',
|
|
|
- // 'isEnemy': '我方'
|
|
|
- // },
|
|
|
- // {
|
|
|
- // 'platID': '1005',
|
|
|
- // 'platName': '弹道导弹5',
|
|
|
- // 'isEnemy': '我方'
|
|
|
- // },
|
|
|
- // {
|
|
|
- // 'platID': '1006',
|
|
|
- // 'platName': '弹道导弹6',
|
|
|
- // 'isEnemy': '我方'
|
|
|
- // },
|
|
|
- // {
|
|
|
- // 'platID': '1007',
|
|
|
- // 'platName': '弹道导弹7',
|
|
|
- // 'isEnemy': '我方'
|
|
|
- // },
|
|
|
- {
|
|
|
- 'platID': '6001',
|
|
|
- 'platName': 'THADD系统1',
|
|
|
- 'isEnemy': '敌方'
|
|
|
- },
|
|
|
- {
|
|
|
- 'platID': '6002',
|
|
|
- 'platName': 'THADD系统2',
|
|
|
- 'isEnemy': '敌方'
|
|
|
- },
|
|
|
- ],
|
|
|
- healthtable: [
|
|
|
- {
|
|
|
- 'platID': '1001',
|
|
|
- 'platName': '弹道导弹1',
|
|
|
- 'platState': "85%"
|
|
|
- },
|
|
|
- {
|
|
|
- 'platID': '1002',
|
|
|
- 'platName': '弹道导弹2',
|
|
|
- 'platState': "90%"
|
|
|
- },
|
|
|
- // {
|
|
|
- // 'platID': '1003',
|
|
|
- // 'platName': '弹道导弹3',
|
|
|
- // 'platState': "90%"
|
|
|
- // },
|
|
|
- // {
|
|
|
- // 'platID': '1004',
|
|
|
- // 'platName': '弹道导弹4',
|
|
|
- // 'platState': "95%"
|
|
|
- // },
|
|
|
- // {
|
|
|
- // 'platID': '1005',
|
|
|
- // 'platName': '弹道导弹5',
|
|
|
- // 'platState': "100%"
|
|
|
- // },
|
|
|
- // {
|
|
|
- // 'platID': '1006',
|
|
|
- // 'platName': '弹道导弹6',
|
|
|
- // 'platState': "100%"
|
|
|
- // },
|
|
|
- // {
|
|
|
- // 'platID': '1007',
|
|
|
- // 'platName': '弹道导弹7',
|
|
|
- // 'platState': "100%"
|
|
|
- // },
|
|
|
- {
|
|
|
- 'platID': '6001',
|
|
|
- 'platName': 'THADD系统1',
|
|
|
- 'platState': "80%"
|
|
|
- },
|
|
|
- {
|
|
|
- 'platID': '6002',
|
|
|
- 'platName': 'THADD系统2',
|
|
|
- 'platState': '80%'
|
|
|
- },
|
|
|
- ]
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
- this.cesiumInit();
|
|
|
- if (this.init == 100) {
|
|
|
- this.$wst.send({url:"getLocalMap"});
|
|
|
- this.setTimer();
|
|
|
- }
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- this.timerDestory()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- setTimer() {
|
|
|
- if (this.timer == null) {
|
|
|
- this.timer = setInterval(() => {
|
|
|
-
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
- },
|
|
|
- //初始化echarts
|
|
|
- cesiumInit() {
|
|
|
- this.viewer = new this.Cesium.Viewer('cesiumContainer', {
|
|
|
- animation: false, // 是否显示时间轴动画
|
|
|
- baseLayerPicker: false,
|
|
|
- homeButton: false,
|
|
|
- geocoder: false,
|
|
|
- timeline: false,
|
|
|
- fullscreenButton: false,
|
|
|
- sceneModePicker: false,
|
|
|
- navigationHelpButton: false,
|
|
|
- selectionIndicator: false,
|
|
|
- // imageryProvider: new this.Cesium.WebMapServiceImageryProvider({
|
|
|
- // url: '/geoserver/map/wms',
|
|
|
- // // 这里是自定义的图层名称
|
|
|
- // layers: 'map',
|
|
|
- // parameters: {
|
|
|
- // service: 'WMS',
|
|
|
- // format: 'image/png',
|
|
|
- // transparent: true
|
|
|
- // }
|
|
|
- // }),
|
|
|
-
|
|
|
- // imageryProvider: new this.Cesium.WebMapTileServiceImageryProvider({
|
|
|
- // url: "http://localhost:8080/geoserver/gwc/service/wmts/rest/map:map/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png",
|
|
|
- // layer: 'map:map',
|
|
|
- // style: 'raster',
|
|
|
- // format: 'image/png',
|
|
|
- // tileMatrixSetID: 'EPSG:900913', //一般使用EPSG:3857坐标系
|
|
|
-
|
|
|
- // }),
|
|
|
-
|
|
|
- imageryProvider: new this.Cesium.ArcGisMapServerImageryProvider({
|
|
|
- url:"https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
|
|
|
-
|
|
|
- })
|
|
|
- });
|
|
|
- this.viewer._cesiumWidget._creditContainer.style.display = "none";
|
|
|
- this.viewer.camera.setView({
|
|
|
- destination: new this.Cesium.Cartesian3.fromDegrees(117.918977,25.0,1500000),
|
|
|
- // 方向,俯视和仰视的视角
|
|
|
- // orientation:{
|
|
|
- // heading: this.Cesium.Math.toRadians(90),//坐标系旋转90度
|
|
|
- // pitch: this.Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
|
|
|
- // }
|
|
|
- })
|
|
|
- // this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1500000; //相机高度的最大值
|
|
|
- },
|
|
|
- removeAllModel(){
|
|
|
- this.viewer.entities.removeAll(); // 移除全部模型
|
|
|
- },
|
|
|
- initFriendModel(){
|
|
|
- this.map.data.friend.forEach((element) => {
|
|
|
- console.log(element.value[0])
|
|
|
- console.log(element.value[1])
|
|
|
- console.log(element.value[2])
|
|
|
-
|
|
|
- this.viewer.entities.add({
|
|
|
-
|
|
|
- name: element.name,
|
|
|
-
|
|
|
- position: this.Cesium.Cartesian3.fromDegrees(element.value[0], element.value[1], element.value[2]),
|
|
|
-
|
|
|
- model: {
|
|
|
-
|
|
|
- uri: friendplane,
|
|
|
-
|
|
|
- minimumPixelSize: 128,
|
|
|
-
|
|
|
- maximumScale: 2000,
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- initEnemyModel(){
|
|
|
- this.map.data.enemy.forEach((element) => {
|
|
|
- console.log(element.value[0])
|
|
|
- console.log(element.value[1])
|
|
|
- console.log(element.value[2])
|
|
|
-
|
|
|
- this.viewer.entities.add({
|
|
|
-
|
|
|
- name: element.name,
|
|
|
-
|
|
|
- id: element.value[0],
|
|
|
-
|
|
|
- position: this.Cesium.Cartesian3.fromDegrees(element.value[0], element.value[1], element.value[2]),
|
|
|
-
|
|
|
- model: {
|
|
|
-
|
|
|
- uri: enemyplane,
|
|
|
-
|
|
|
- minimumPixelSize: 228,
|
|
|
-
|
|
|
- maximumScale: 4000,
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- },
|
|
|
- //通过窗体高宽计算容器高宽,渲染echart图表的div的宽高度以达到自适应目的
|
|
|
- timerDestory() {
|
|
|
- if (this.timer) {
|
|
|
- clearInterval(this.timer);
|
|
|
- }
|
|
|
- },
|
|
|
- instanceChange(val) {
|
|
|
-
|
|
|
- if (val.instanceName.includes("信号侦察")) {
|
|
|
- this.$wst.send({
|
|
|
- url: 'getESMParams',
|
|
|
- data: { InstanceID: val.instanceID }
|
|
|
- })
|
|
|
- } else
|
|
|
- if (val.instanceName.includes("导航")) {
|
|
|
- this.$wst.send({
|
|
|
- url: 'getNavParams',
|
|
|
- data: { InstanceID: val.instanceID }
|
|
|
- })
|
|
|
-
|
|
|
- } else
|
|
|
- if (val.instanceName.includes("雷达")) {
|
|
|
- this.$wst.send({
|
|
|
- url: 'getRadarParams',
|
|
|
- data: { InstanceID: val.instanceID }
|
|
|
- })
|
|
|
-
|
|
|
- } else
|
|
|
- if (val.instanceName.includes("电子攻击")) {
|
|
|
- this.$wst.send({
|
|
|
- url: 'getECMParams',
|
|
|
- data: { InstanceID: val.instanceID }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- init: {
|
|
|
- handler: function (val, oldVal) {
|
|
|
- console.log(val)
|
|
|
- this.setTimer();
|
|
|
- }
|
|
|
- },
|
|
|
- map: {
|
|
|
- handler: function (val, oldVal) {
|
|
|
- if(this.viewer != null){
|
|
|
- this.removeAllModel();
|
|
|
- this.initFriendModel();
|
|
|
- this.initEnemyModel();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-})
|
|
|
-</script>
|
|
|
-<style scoped>
|
|
|
-.model {
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- left: 100px;
|
|
|
- z-index: 999;
|
|
|
-}
|
|
|
-
|
|
|
-.table1 {
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- left: 10px;
|
|
|
- z-index: 999;
|
|
|
- width: 400px;
|
|
|
- height: 400px;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.table1 /deep/ .el-card__header {
|
|
|
- background-color: #11144e;
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.table2 {
|
|
|
- position: absolute;
|
|
|
- top: 430px;
|
|
|
- right: 20px;
|
|
|
- z-index: 999;
|
|
|
- width: 400px;
|
|
|
- height: 400px;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.table2 /deep/ .el-card__header {
|
|
|
- background-color: #11144e;
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-.box-card {
|
|
|
- min-height: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-/deep/ .el-card__body {
|
|
|
- height: 100% !important;
|
|
|
- padding: 0px !important;
|
|
|
-}
|
|
|
-
|
|
|
-.echarts-box {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- background-image: url('~@/assets/image/map-bg.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.main-layout {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.container {
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.mapecharts {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.tableHeight {
|
|
|
- flex-grow: 1;
|
|
|
- height: 33%;
|
|
|
-}
|
|
|
-
|
|
|
-.tableHeight /deep/ .el-card__body {
|
|
|
- height: calc(100% - 95px) !important;
|
|
|
-
|
|
|
-}
|
|
|
-</style>
|