|
|
@@ -1,47 +1,46 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
- <el-row :gutter="10" style="height:100%;">
|
|
|
-
|
|
|
- <el-col style="height:100%;position: relative;" :span="24">
|
|
|
- <el-radio-group class="model" v-model="pattern" label="size control" size="small">
|
|
|
- <el-radio-button label="two-dimensional" @click="pattern='two-dimensional'">二维态势</el-radio-button>
|
|
|
- <el-radio-button label="three-dimensional" @click="pattern='three-dimensional'">三维态势</el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- <el-card class="table1">
|
|
|
+ <el-row :gutter="10" style="height:100%;">
|
|
|
+
|
|
|
+ <el-col style="height:100%;position: relative;" :span="24">
|
|
|
+ <el-radio-group class="model" v-model="pattern" label="size control" size="small">
|
|
|
+ <el-radio-button label="two-dimensional" @click="pattern = 'two-dimensional'">二维态势</el-radio-button>
|
|
|
+ <el-radio-button label="three-dimensional" @click="pattern = 'three-dimensional'">三维态势</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-card class="table1">
|
|
|
<div slot="header" class="clearfix">
|
|
|
- <span>兵力装备显示</span>
|
|
|
+ <span>兵力装备显示</span>
|
|
|
</div>
|
|
|
<el-table :data="instancetable" @current-change="instanceChange">
|
|
|
- <el-table-column prop="instanceID" label="ID"></el-table-column>
|
|
|
- <el-table-column prop="instanceName" label="名称"></el-table-column>
|
|
|
- <el-table-column prop="instanceState" label="敌我属性"></el-table-column>
|
|
|
+ <el-table-column prop="instanceID" label="ID"></el-table-column>
|
|
|
+ <el-table-column prop="instanceName" label="名称"></el-table-column>
|
|
|
+ <el-table-column prop="instanceState" label="敌我属性"></el-table-column>
|
|
|
</el-table>
|
|
|
- </el-card>
|
|
|
- <el-card class="table2">
|
|
|
+ </el-card>
|
|
|
+ <el-card class="table2">
|
|
|
<div slot="header" class="clearfix">
|
|
|
- <span>战损显示</span>
|
|
|
+ <span>战损显示</span>
|
|
|
</div>
|
|
|
<el-table :data="instancetable" @current-change="instanceChange">
|
|
|
<el-table-column prop="instanceID" label="ID"></el-table-column>
|
|
|
- <el-table-column prop="instanceName" label="名称"></el-table-column>
|
|
|
- <el-table-column prop="instanceState" label="健康度"></el-table-column>
|
|
|
+ <el-table-column prop="instanceName" label="名称"></el-table-column>
|
|
|
+ <el-table-column prop="instanceState" label="健康度"></el-table-column>
|
|
|
</el-table>
|
|
|
- </el-card>
|
|
|
- <div v-show="pattern=='two-dimensional'" class="echarts-box">
|
|
|
- <div id="mapEchart" class="mapecharts"></div>
|
|
|
- </div>
|
|
|
- <div v-show="pattern=='three-dimensional'" class="main-layout">
|
|
|
+ </el-card>
|
|
|
+ <div v-show="pattern == 'two-dimensional'" class="echarts-box">
|
|
|
+ <div id="mapEchart" class="mapecharts"></div>
|
|
|
+ </div>
|
|
|
+ <div v-show="pattern == 'three-dimensional'" class="main-layout">
|
|
|
<div id="cesiumContainer" class="mapecharts"></div>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
-
|
|
|
</template>
|
|
|
- <script>
|
|
|
- import { mapGetters } from 'vuex'
|
|
|
-export default({
|
|
|
- computed: {
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+export default ({
|
|
|
+ computed: {
|
|
|
...mapGetters([
|
|
|
'map',
|
|
|
'init',
|
|
|
@@ -50,418 +49,424 @@ export default({
|
|
|
'properties',
|
|
|
'platformShow'
|
|
|
]),
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ init: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ console.log(val)
|
|
|
+ this.setTimer();
|
|
|
+ }
|
|
|
},
|
|
|
- watch: {
|
|
|
- init: {
|
|
|
- handler: function(val, oldVal){
|
|
|
- console.log(val)
|
|
|
- this.setTimer();
|
|
|
- }
|
|
|
- },
|
|
|
- platforms: {
|
|
|
- handler: function(val, oldVal){
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- instances: {
|
|
|
- handler: function(val, oldVal){
|
|
|
+ platforms: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
|
|
|
- this.instancetable = val
|
|
|
- }
|
|
|
- },
|
|
|
- platformID: {
|
|
|
- handler: function(val, oldVal){
|
|
|
- this.$wst.send({
|
|
|
- url:'getRadarInstances',
|
|
|
- data:{PlatformID: val}
|
|
|
- })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ instances: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
|
|
|
- }
|
|
|
- },
|
|
|
- properties: {
|
|
|
- handler: function(val,oldVal){
|
|
|
- this.propertyinittable = val.InitParams
|
|
|
- this.propertycontroltable = val.CtrlParams
|
|
|
- }
|
|
|
- },
|
|
|
- platformShow: {
|
|
|
- handler: function(val,oldVal){
|
|
|
- this.resizeDom()
|
|
|
- }
|
|
|
- }
|
|
|
+ this.instancetable = val
|
|
|
+ }
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- pattern:"two-dimensional",
|
|
|
- instancetable: null,
|
|
|
- propertyinittable: null,
|
|
|
- propertycontroltable: null,
|
|
|
- timer: null,
|
|
|
- mapEchart: null,
|
|
|
- mapOption: {
|
|
|
- aria: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- formatter: '{a}&name:{b}&location:{c}',
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: 'vertical',
|
|
|
- left: 'left',
|
|
|
- data:['categoryA','categoryB','categoryC']
|
|
|
- },
|
|
|
- geo: {
|
|
|
+ platformID: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ this.$wst.send({
|
|
|
+ url: 'getRadarInstances',
|
|
|
+ data: { PlatformID: val }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ properties: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ this.propertyinittable = val.InitParams
|
|
|
+ this.propertycontroltable = val.CtrlParams
|
|
|
+ }
|
|
|
+ },
|
|
|
+ platformShow: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ this.resizeDom()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pattern: "two-dimensional",
|
|
|
+ instancetable: null,
|
|
|
+ propertyinittable: null,
|
|
|
+ propertycontroltable: null,
|
|
|
+ timer: null,
|
|
|
+ mapEchart: null,
|
|
|
+ mapOption: {
|
|
|
+ aria: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: '{a}&name:{b}&location:{c}',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'left',
|
|
|
+ data: ['categoryA', 'categoryB', 'categoryC']
|
|
|
+ },
|
|
|
+ geo: {
|
|
|
map: "china",
|
|
|
// zoom: 1,
|
|
|
// center: [120.397128, 25.916527],
|
|
|
roam: true,
|
|
|
- scaleLimit:{
|
|
|
- min: 1,
|
|
|
- max: 20
|
|
|
- },
|
|
|
- label: {
|
|
|
- color: "#fff",
|
|
|
- show: true
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- color: "#fff",
|
|
|
- show: true
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- areaColor: {
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "#073684" // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "#2B91B7" // 100% 处的颜色
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- areaColor: {
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "#073684" // 0% 处的颜色
|
|
|
+ scaleLimit: {
|
|
|
+ min: 1,
|
|
|
+ max: 20
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ color: "#fff",
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ color: "#fff",
|
|
|
+ show: true
|
|
|
},
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "#061E3D" // 100% 处的颜色
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#073684" // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#2B91B7" // 100% 处的颜色
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
- ]
|
|
|
- },
|
|
|
- borderColor: "#87ADCB",
|
|
|
- shadowColor: "rgba(10,76,139,1)",
|
|
|
- shadowOffsetY: 0,
|
|
|
- shadowBlur: 60,
|
|
|
- borderWidth: 1
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- },
|
|
|
- graphic: [{
|
|
|
- type: 'circle',
|
|
|
- shape: {
|
|
|
- cx: 73.675379,
|
|
|
- cy: 42.442284,
|
|
|
- r: 100// 以米为单位设置视野半径
|
|
|
- },
|
|
|
- style: {
|
|
|
- fill: '#ffa500',
|
|
|
- opacity: 0.2
|
|
|
- },
|
|
|
- z: 10 // 设置层级为10，确保在地图上显示在最上层
|
|
|
- }],
|
|
|
- series : [
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
{
|
|
|
- name: '我方飞机',
|
|
|
- type: 'scatter',
|
|
|
- coordinateSystem: 'geo',
|
|
|
- symbol: 'image://'+ require('@/assets/image/redairplane.png'),
|
|
|
- symbolSize: 20,
|
|
|
- data: null,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- formatter: '{b}',
|
|
|
- position: 'right',
|
|
|
- show: false
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#ddb926'
|
|
|
- //color: '#0000ff'
|
|
|
- }
|
|
|
- }
|
|
|
+ offset: 0,
|
|
|
+ color: "#073684" // 0% 处的颜色
|
|
|
},
|
|
|
{
|
|
|
- name: '我方dddd',
|
|
|
- type: 'scatter',
|
|
|
- coordinateSystem: 'geo',
|
|
|
- symbol: 'image://'+ require('@/assets/image/redmissile.png'),
|
|
|
- symbolSize: 20,
|
|
|
- data: null,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- formatter: '{b}',
|
|
|
- position: 'right',
|
|
|
- show: false
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#ddb926'
|
|
|
- //color: '#0000ff'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '敌方',
|
|
|
- type: 'scatter',
|
|
|
- coordinateSystem: 'geo',
|
|
|
- symbol: 'image://'+ require('@/assets/image/blueradar.png'),
|
|
|
- symbolSize: 20,
|
|
|
- data: null,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- formatter: '{b}',
|
|
|
- position: 'right',
|
|
|
- show: false
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#ff0000'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
+ offset: 1,
|
|
|
+ color: "#061E3D" // 100% 处的颜色
|
|
|
+ }
|
|
|
]
|
|
|
+ },
|
|
|
+ borderColor: "#87ADCB",
|
|
|
+ shadowColor: "rgba(10,76,139,1)",
|
|
|
+ shadowOffsetY: 0,
|
|
|
+ shadowBlur: 60,
|
|
|
+ borderWidth: 1
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false
|
|
|
}
|
|
|
+ },
|
|
|
+ graphic: [{
|
|
|
+ type: 'circle',
|
|
|
+ shape: {
|
|
|
+ cx: 73.675379,
|
|
|
+ cy: 42.442284,
|
|
|
+ r: 100// 以米为单位设置视野半径
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: '#ffa500',
|
|
|
+ opacity: 0.2
|
|
|
+ },
|
|
|
+ z: 10 // 设置层级为10，确保在地图上显示在最上层
|
|
|
+ }],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '我方飞机',
|
|
|
+ type: 'scatter',
|
|
|
+ coordinateSystem: 'geo',
|
|
|
+ symbol: 'image://' + require('@/assets/image/redairplane.png'),
|
|
|
+ symbolSize: 20,
|
|
|
+ data: null,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: '{b}',
|
|
|
+ position: 'right',
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#ddb926'
|
|
|
+ //color: '#0000ff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '我方dddd',
|
|
|
+ type: 'scatter',
|
|
|
+ coordinateSystem: 'geo',
|
|
|
+ symbol: 'image://' + require('@/assets/image/redmissile.png'),
|
|
|
+ symbolSize: 20,
|
|
|
+ data: null,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: '{b}',
|
|
|
+ position: 'right',
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#ddb926'
|
|
|
+ //color: '#0000ff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '敌方',
|
|
|
+ type: 'scatter',
|
|
|
+ coordinateSystem: 'geo',
|
|
|
+ symbol: 'image://' + require('@/assets/image/blueradar.png'),
|
|
|
+ symbolSize: 20,
|
|
|
+ data: null,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: '{b}',
|
|
|
+ position: 'right',
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#ff0000'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.echartsInit();
|
|
|
+ this.cesiumInit();
|
|
|
+ // 页面加载设置高度自适应
|
|
|
+ window.onresize = () => {
|
|
|
|
|
|
+ this.resizeDom()
|
|
|
+ };
|
|
|
+ // 页面加载设置高度自适应
|
|
|
+ this.resizeDom()
|
|
|
+ if (this.init == 100) {
|
|
|
+ this.setTimer();
|
|
|
+ }
|
|
|
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.timerDestory()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setTimer() {
|
|
|
+ if (this.timer == null) {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ console.log('开始定时...每过一秒执行一次')
|
|
|
+ this.echartsInit()
|
|
|
+ }, 1000)
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
- mounted(){
|
|
|
- this.echartsInit();
|
|
|
- this.cesiumInit();
|
|
|
- // 页面加载设置高度自适应
|
|
|
- window.onresize = () => {
|
|
|
-
|
|
|
- this.resizeDom()
|
|
|
- };
|
|
|
- // 页面加载设置高度自适应
|
|
|
- this.resizeDom()
|
|
|
- if(this.init == 100){
|
|
|
- this.setTimer();
|
|
|
- }
|
|
|
+ //初始化echarts
|
|
|
+ echartsInit() {
|
|
|
+
|
|
|
+ if (this.init == 100) { this.$wst.send({ url: 'getLocalMap' }) }
|
|
|
+ if (this.map != null && this.map.type == 'local') { this.submitForm('mapEchart') }
|
|
|
+ if (this.mapEchart == null) {
|
|
|
+ this.mapEchart = this.$echarts.init(document.getElementById('mapEchart'))
|
|
|
+ }
|
|
|
+ this.mapEchart.setOption(this.mapOption);
|
|
|
+ this.resizeDom()
|
|
|
|
|
|
},
|
|
|
- beforeDestroy() {
|
|
|
- this.timerDestory()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- setTimer() {
|
|
|
- if(this.timer == null) {
|
|
|
- this.timer = setInterval( () => {
|
|
|
- console.log('开始定时...每过一秒执行一次')
|
|
|
- this.echartsInit()
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
- },
|
|
|
- //初始化echarts
|
|
|
- echartsInit() {
|
|
|
-
|
|
|
- if(this.init == 100){ this.$wst.send({url:'getLocalMap'})}
|
|
|
- if(this.map != null && this.map.type=='local'){ this.submitForm('mapEchart')}
|
|
|
- if(this.mapEchart == null){
|
|
|
- this.mapEchart = this.$echarts.init(document.getElementById('mapEchart'))
|
|
|
- }
|
|
|
- this.mapEchart.setOption(this.mapOption);
|
|
|
- this.resizeDom()
|
|
|
-
|
|
|
- },
|
|
|
- //初始化echarts
|
|
|
- cesiumInit() {
|
|
|
- this.viewer = new this.Cesium.Viewer('cesiumContainer', {
|
|
|
- animation: true, // 是否显示时间轴动画
|
|
|
- baseLayerPicker: false,
|
|
|
- // homeButton: false,
|
|
|
- // geocoder: false,
|
|
|
- timeline: false,
|
|
|
- fullscreenButton: false,
|
|
|
- // sceneModePicker: false,
|
|
|
- navigationHelpButton: false,
|
|
|
- imageryProvider:new this.Cesium.ArcGisMapServerImageryProvider({
|
|
|
- url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer'
|
|
|
- }),
|
|
|
+ //初始化echarts
|
|
|
+ cesiumInit() {
|
|
|
+ this.viewer = new this.Cesium.Viewer('cesiumContainer', {
|
|
|
+ animation: true, // 是否显示时间轴动画
|
|
|
+ baseLayerPicker: false,
|
|
|
+ // homeButton: false,
|
|
|
+ // geocoder: false,
|
|
|
+ timeline: false,
|
|
|
+ fullscreenButton: false,
|
|
|
+ // sceneModePicker: false,
|
|
|
+ navigationHelpButton: false,
|
|
|
+ imageryProvider: new this.Cesium.ArcGisMapServerImageryProvider({
|
|
|
+ url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer'
|
|
|
+ }),
|
|
|
|
|
|
});
|
|
|
this.viewer._cesiumWidget._creditContainer.style.display = "none";
|
|
|
- },
|
|
|
- //通过窗体高宽计算容器高宽，渲染echart图表的div的宽高度以达到自适应目的
|
|
|
- resizeDom() {
|
|
|
- console.log("高度自适应")
|
|
|
- this.$echarts.init(document.getElementById('mapEchart')).resize()
|
|
|
- // var mapEchart = document.getElementById('mapEchart')
|
|
|
- // var mapEchart = document.getElementById('mapEchart')
|
|
|
- // var mapEchart = document.getElementById('mapEchart')
|
|
|
- // var mapEchart = document.getElementById('mapEchart')
|
|
|
- // const boxHeight = document.getElementsByClassName("echarts-box")[0].clientHeight
|
|
|
- // mapEchart.style.height = (boxHeight/2-65)+'px';
|
|
|
- // mapEchart.style.height = (boxHeight/2-65)+'px';
|
|
|
- // mapEchart.style.height = (boxHeight/2-65)+'px';
|
|
|
- // mapEchart.style.height = (boxHeight/2-65)+'px';
|
|
|
- },
|
|
|
- echartsChange(){
|
|
|
- this.timerDestory()
|
|
|
- this.echartsInit();
|
|
|
- this.setTimer();
|
|
|
- },
|
|
|
- timerDestory(){
|
|
|
- if (this.timer) {
|
|
|
+ },
|
|
|
+ //通过窗体高宽计算容器高宽，渲染echart图表的div的宽高度以达到自适应目的
|
|
|
+ resizeDom() {
|
|
|
+ console.log("高度自适应")
|
|
|
+ this.$echarts.init(document.getElementById('mapEchart')).resize()
|
|
|
+ // var mapEchart = document.getElementById('mapEchart')
|
|
|
+ // var mapEchart = document.getElementById('mapEchart')
|
|
|
+ // var mapEchart = document.getElementById('mapEchart')
|
|
|
+ // var mapEchart = document.getElementById('mapEchart')
|
|
|
+ // const boxHeight = document.getElementsByClassName("echarts-box")[0].clientHeight
|
|
|
+ // mapEchart.style.height = (boxHeight/2-65)+'px';
|
|
|
+ // mapEchart.style.height = (boxHeight/2-65)+'px';
|
|
|
+ // mapEchart.style.height = (boxHeight/2-65)+'px';
|
|
|
+ // mapEchart.style.height = (boxHeight/2-65)+'px';
|
|
|
+ },
|
|
|
+ echartsChange() {
|
|
|
+ this.timerDestory()
|
|
|
+ this.echartsInit();
|
|
|
+ this.setTimer();
|
|
|
+ },
|
|
|
+ timerDestory() {
|
|
|
+ if (this.timer) {
|
|
|
clearInterval(this.timer);
|
|
|
}
|
|
|
- },
|
|
|
- submitForm(map) {
|
|
|
- console.log("放入数据")
|
|
|
- this.mapOption.series[0].data = this.map.data.friend.Planes;
|
|
|
- this.mapOption.series[1].data = this.map.data.friend.Missiles;
|
|
|
- this.mapOption.series[2].data = this.map.data.enemy.Radars;
|
|
|
- this.$echarts.init(document.getElementById(map)).setOption(this.mapOption);
|
|
|
- console.log(this.mapOption);
|
|
|
- },
|
|
|
- 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}
|
|
|
- })
|
|
|
+ },
|
|
|
+ submitForm(map) {
|
|
|
+ console.log("放入数据")
|
|
|
+ this.mapOption.series[0].data = this.map.data.friend.Planes;
|
|
|
+ this.mapOption.series[1].data = this.map.data.friend.Missiles;
|
|
|
+ this.mapOption.series[2].data = this.map.data.enemy.Radars;
|
|
|
+ this.$echarts.init(document.getElementById(map)).setOption(this.mapOption);
|
|
|
+ console.log(this.mapOption);
|
|
|
+ },
|
|
|
+ instanceChange(val) {
|
|
|
|
|
|
- }else
|
|
|
- if(val.instanceName.includes("雷达")) {
|
|
|
+ if (val.instanceName.includes("信号侦察")) {
|
|
|
this.$wst.send({
|
|
|
- url:'getRadarParams',
|
|
|
- data:{InstanceID: val.instanceID}
|
|
|
+ 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:'getECMParams',
|
|
|
- data:{InstanceID: val.instanceID}
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- })
|
|
|
- </script>
|
|
|
+ } 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 }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+})
|
|
|
+</script>
|
|
|
<style scoped>
|
|
|
-.model{
|
|
|
+.model {
|
|
|
position: absolute;
|
|
|
top: 20px;
|
|
|
left: 20px;
|
|
|
z-index: 999;
|
|
|
background-color: #66b1ff;
|
|
|
}
|
|
|
-.table1{
|
|
|
+
|
|
|
+.table1 {
|
|
|
position: absolute;
|
|
|
top: 20px;
|
|
|
right: 20px;
|
|
|
z-index: 999;
|
|
|
width: 400px;
|
|
|
height: 400px;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
|
|
|
-.table1 /deep/ .el-card__header{
|
|
|
+.table1 /deep/ .el-card__header {
|
|
|
background-color: #66b1ff;
|
|
|
}
|
|
|
|
|
|
-.table2{
|
|
|
+.table2 {
|
|
|
position: absolute;
|
|
|
top: 440px;
|
|
|
right: 20px;
|
|
|
z-index: 999;
|
|
|
width: 400px;
|
|
|
height: 400px;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
|
|
|
-.table2 /deep/ .el-card__header{
|
|
|
+.table2 /deep/ .el-card__header {
|
|
|
background-color: #66b1ff;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
-.box-card{
|
|
|
+.box-card {
|
|
|
min-height: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
-/deep/ .el-card__body{
|
|
|
+
|
|
|
+/deep/ .el-card__body {
|
|
|
height: 100% !important;
|
|
|
padding: 0px !important;
|
|
|
}
|
|
|
|
|
|
-.echarts-box{
|
|
|
+.echarts-box {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
background-image: url('~@/assets/image/map-bg.png');
|
|
|
background-repeat: no-repeat;
|
|
|
- background-size:100% 100%;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
-.main-layout{
|
|
|
+
|
|
|
+.main-layout {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
-.container{
|
|
|
+
|
|
|
+.container {
|
|
|
height: 100%;
|
|
|
}
|
|
|
-.mapecharts{
|
|
|
+
|
|
|
+.mapecharts {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
-.tableHeight{
|
|
|
+
|
|
|
+.tableHeight {
|
|
|
flex-grow: 1;
|
|
|
height: 33%;
|
|
|
}
|
|
|
-.tableHeight /deep/ .el-card__body{
|
|
|
+
|
|
|
+.tableHeight /deep/ .el-card__body {
|
|
|
height: calc(100% - 95px) !important;
|
|
|
-
|
|
|
-}
|
|
|
-</style>
|
|
|
+
|
|
|
+}</style>
|
