qv/src/views/situation/index.vue

<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">
          <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 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>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default ({
  computed: {
    ...mapGetters([
      'map',
      'init',
      'platforms',
      'instances',
      'properties',
      'platformShow'
    ]),
  },
  watch: {
    init: {
      handler: function (val, oldVal) {
        console.log(val)
        this.setTimer();
      }
    },
    platforms: {
      handler: function (val, oldVal) {

      }
    },
    instances: {
      handler: function (val, oldVal) {

        this.instancetable = val
      }
    },
    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,
      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%'
        },
      ],
      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% 处的颜色
                },
                {
                  offset: 1,
                  color: "#061E3D" // 100% 处的颜色
                }
              ]
            },
            borderColor: "#87ADCB",
            shadowColor: "rgba(10,76,139,1)",
            shadowOffsetY: 0,
            shadowBlur: 60,
            borderWidth: 1
          },
          tooltip: {
            show: false
          }
        },
        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)
      }
    },
    //初始化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'
        }),

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

        } 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 {
  position: absolute;
  top: 20px;
  left: 100px;
  z-index: 999;
}

.table1 {
  position: absolute;
  top: 40px;
  right: 20px;
  z-index: 999;
  width: 400px;
  height: 400px;

}

.table1 /deep/ .el-card__header {
  background-color: #11144e;
  color: white;
}

.table2 {
  position: absolute;
  top: 460px;
  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>