|
|
@@ -0,0 +1,280 @@
|
|
|
+<template>
|
|
|
+ <el-row style="height:100%;">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-row>
|
|
|
+ <el-card class="tableHeight">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <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>
|
|
|
+ </el-card>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-card class="tableHeight">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>工作参数设置</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ 频率范围：
|
|
|
+ <el-select :change="frequenceChange()" v-model="frequencevalue" placeholder="请选择">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div v-if="frequenceAverageShow" style="padding-top:5px;display:flex;">
|
|
|
+ <div style="flex:1;">
|
|
|
+ <span>频率下限：</span>
|
|
|
+ <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div style="flex:1;">
|
|
|
+ <span style="padding-left:10px;"> 频率上限：</span>
|
|
|
+ <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding-top:5px;">
|
|
|
+ 工作模式：
|
|
|
+ <el-select v-model="workvalue" placeholder="请选择">
|
|
|
+ <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <el-table :data="propertyinittable" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" style="font-size: 10px;width: 100%;" height="100%" highlight-current-row border>
|
|
|
+ <el-table-column prop="key" label="属性"></el-table-column>
|
|
|
+ <el-table-column prop="value" label="值"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ <el-card class="tableHeight">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>运行状态</span>
|
|
|
+ </div>
|
|
|
+ <el-table :data="propertycontroltable" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" style="font-size: 10px;width: 100%;" height="100%" highlight-current-row border>
|
|
|
+ <el-table-column prop="key" label="属性"></el-table-column>
|
|
|
+ <el-table-column prop="value" label="值"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" style="height:100%;">
|
|
|
+ <el-card class="radar">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>雷达状态显示</span>
|
|
|
+ </div>
|
|
|
+ <div class="echarts-box">
|
|
|
+ <div id="radarEchart" class="mapecharts"></div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card>
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>雷达目标列表</span>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+export default {
|
|
|
+ computed: {
|
|
|
+ ...mapGetters([
|
|
|
+ 'map',
|
|
|
+ 'init',
|
|
|
+ 'platforms',
|
|
|
+ 'radarInstances',
|
|
|
+ 'radarParams',
|
|
|
+ 'platformID'
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ init: {
|
|
|
+ handler: function(val, oldVal){
|
|
|
+
|
|
|
+ this.setTimer();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ platformID: {
|
|
|
+ handler: function(val, oldVal){
|
|
|
+ this.$wst.send({
|
|
|
+ url:'getRadarInstances',
|
|
|
+ data:{PlatformID: val}
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ radarInstances: {
|
|
|
+ handler: function(val, oldVal){
|
|
|
+
|
|
|
+ this.instancetable = val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ radarParams: {
|
|
|
+ handler: function(val,oldVal){
|
|
|
+ this.propertyinittable = val.InitParams
|
|
|
+ this.propertycontroltable = val.CtrlParams
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ frequencevalue: '',
|
|
|
+ workvalue: '',
|
|
|
+ frequenceAverageShow : false,
|
|
|
+ radarEchart: null,
|
|
|
+ instancetable: null,
|
|
|
+ instanceID: null,
|
|
|
+ propertyinittable: null,
|
|
|
+ propertycontroltable: null,
|
|
|
+ radars:[
|
|
|
+ {
|
|
|
+ key: 1,
|
|
|
+ value: "雷达1",
|
|
|
+ instanceID: "11"
|
|
|
+
|
|
|
+ }
|
|
|
+ , {
|
|
|
+ key: 2,
|
|
|
+ value: "雷达2",
|
|
|
+ instanceID: 12
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ options: [{
|
|
|
+ value: 1,
|
|
|
+ label: '0.5~2GHz'
|
|
|
+ }, {
|
|
|
+ value: 2,
|
|
|
+ label: '2~5GHz'
|
|
|
+ }, {
|
|
|
+ value: 3,
|
|
|
+ label: '5~18GHz'
|
|
|
+ }, {
|
|
|
+ value: 4,
|
|
|
+ label: '自定义'
|
|
|
+ }],
|
|
|
+ options1: [{
|
|
|
+ value: 1,
|
|
|
+ label: '干涉仪'
|
|
|
+ }, {
|
|
|
+ value: 2,
|
|
|
+ label: 'DBF'
|
|
|
+ }, {
|
|
|
+ value: 3,
|
|
|
+ label: 'ABF'
|
|
|
+ },{
|
|
|
+ value: 4,
|
|
|
+ label: 'SEI'
|
|
|
+ },{
|
|
|
+ value: 5,
|
|
|
+ label: '精分析'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ echartoption: {
|
|
|
+ dataZoom: {
|
|
|
+ },
|
|
|
+ polar: {
|
|
|
+
|
|
|
+ },
|
|
|
+ radiusAxis: {
|
|
|
+
|
|
|
+ },
|
|
|
+ angleAxis: {
|
|
|
+ type: 'category',
|
|
|
+ // boundaryGap: false,
|
|
|
+ data: [
|
|
|
+ '0°~60°',
|
|
|
+ '60°~120°',
|
|
|
+ '120°~180°',
|
|
|
+ '180°~240°',
|
|
|
+ '240°~300°',
|
|
|
+ '300°~360°',
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ series: {
|
|
|
+ type: 'line',
|
|
|
+ coordinateSystem: 'polar',
|
|
|
+ data: [12,32,42,52,62]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // radarData: {
|
|
|
+ // [12, 32,42]
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.echartsInit();
|
|
|
+ // 页面加载设置高度自适应
|
|
|
+ window.onresize = () => {
|
|
|
+
|
|
|
+ this.resizeDom()
|
|
|
+ };
|
|
|
+ // 页面加载设置高度自适应
|
|
|
+ this.resizeDom()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ frequenceChange(){
|
|
|
+ if(this.frequencevalue== 4) {
|
|
|
+ this.frequenceAverageShow = true;
|
|
|
+ }else{
|
|
|
+ this.frequenceAverageShow = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ echartsInit() {
|
|
|
+ this.$echarts.init(document.getElementById('radarEchart')).setOption(this.echartoption);
|
|
|
+ if(this.localEchart == null){
|
|
|
+ this.radarEchart = this.$echarts.init(document.getElementById('radarEchart'))
|
|
|
+ }else{
|
|
|
+ this.radarEchart.setOption(this.echartoption);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //通过窗体高宽计算容器高宽，渲染echart图表的div的宽高度以达到自适应目的
|
|
|
+ resizeDom() {
|
|
|
+ console.log("高度自适应")
|
|
|
+ // const boxHeight = document.getElementsByClassName("echarts-box")[0].clientHeight
|
|
|
+ // var Echart = document.getElementById('radarEchart')
|
|
|
+ // Echart.style.height = (boxHeight/2-65)+'px';
|
|
|
+ this.$echarts.init(document.getElementById('radarEchart')).resize()
|
|
|
+ },
|
|
|
+ instanceChange(val) {
|
|
|
+
|
|
|
+ this.$wst.send({
|
|
|
+ url:'getRadarParams',
|
|
|
+ data:{InstanceID: val.instanceID,
|
|
|
+ PlatformID: this.platformID}
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.tableHeight{
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.echarts-box{
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.mapecharts{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.radar{
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.radar /deep/ .el-card__body{
|
|
|
+ height: calc(100% - 100px);
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
