|
|
@@ -1,178 +1,312 @@
|
|
|
<template>
|
|
|
- <el-row :gutter="20" style="height:100%;">
|
|
|
- <el-col :span="12" style="height:100%;">
|
|
|
- <el-row style="height:50%;">
|
|
|
- <el-card class="box-card">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>网络状态</span>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-table :data="netMembertable" height="270" style="width: 100%">
|
|
|
- <el-table-column prop="platID" label="平台ID"></el-table-column>
|
|
|
- <el-table-column prop="platName" label="平台名称"></el-table-column>
|
|
|
- <el-table-column prop="netState" label="网络状态"></el-table-column>
|
|
|
- <el-table-column prop="platInTeam" label="平台身份"></el-table-column>
|
|
|
- <el-table-column prop="isCurrent" label="是否为本平台"></el-table-column>
|
|
|
+ <div style="height:100%;">
|
|
|
+ <el-row style="height:65%;" gutter="20">
|
|
|
+
|
|
|
+ <el-col :span="6" style="height:100%">
|
|
|
+ <el-row style="height: 28px;">
|
|
|
+ <span class="select">
|
|
|
+ <span style="width:40%;text-align: center;">当前链路：</span>
|
|
|
+ <el-select style="width:60%;" v-model="currentSensor" placeholder="选择链路" @change="instanceChange" size="mini">
|
|
|
+ <el-option v-for="item in instancetable" :key="item.instanceID" :label="item.instanceName"
|
|
|
+ :value="item.instanceID">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+ <el-row style="height: calc(100% - 28px);">
|
|
|
+ <el-card class="tableHeight">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>工作参数</span>
|
|
|
+ </div>
|
|
|
+ <el-form label-width="80px">
|
|
|
+ <el-form-item label="链路开关">
|
|
|
+ <el-switch v-model="Switch"></el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="链路模式">
|
|
|
+ <el-select style="width:60%;" v-model="currentSensor" placeholder="选择链路模式" @change="instanceChange" size="mini">
|
|
|
+ <el-option v-for="item in instancetable" :key="item.instanceID" :label="item.instanceName"
|
|
|
+ :value="item.instanceID">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="工作模式">
|
|
|
+ <el-input v-model="model"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmit">变更</el-button>
|
|
|
+ <el-button>撤消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>`
|
|
|
+ </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" ></div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" style="height:100%;">
|
|
|
+ <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-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="height:35%;">
|
|
|
+ <el-card class="target">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>成员列表</span>
|
|
|
+ <el-button style="float: right;" round size="mini">发送到协同平台</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table :data="ESMresults" class="targetTable" height="100%;">
|
|
|
+ <!-- <el-table-column prop="az" label="方位角" width="150">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column prop="az" label="方位角(°)">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="range" label="距离(km)">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="type" label="类型">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="freq" label="频率">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="PRF" label="PRF">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="lon" label="经度">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="lat" label="纬度">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="height" label="高度">
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-row>
|
|
|
- <el-row style="height:50%;">
|
|
|
- <el-card class="box-card">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>V/U链路状态</span>
|
|
|
- </div>
|
|
|
- <el-table :data="linkVUtable" height="270" style="width: 100%">
|
|
|
- <el-table-column label="属性" prop="key"></el-table-column>
|
|
|
- <el-table-column label="值" prop="value"></el-table-column>
|
|
|
- </el-table>
|
|
|
- <!-- <el-table :data="tableData5" style="width: 100%">
|
|
|
- <el-table-column type="expand" class="demo-table-expand">
|
|
|
- <template slot-scope="props">
|
|
|
- <el-descriptions title = {{ props.row.linkId }}>
|
|
|
- <el-descriptions-item label="丢包率">{{ props.row.lossRate }}</el-descriptions-item>
|
|
|
- </el-descriptions>
|
|
|
- <el-form label-position="left" inline class="demo-table-expand">
|
|
|
- <el-form-item label="丢包率">
|
|
|
- <span>{{ props.row.lossRate }}</span>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="通信时延">
|
|
|
- <span>{{ props.row.latency }}</span>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="通信容量">
|
|
|
- <span>{{ props.row.capacity }}</span>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="链路编号" prop="linkId">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="链路名称" prop="linkName">
|
|
|
- </el-table-column>
|
|
|
- </el-table> -->
|
|
|
- </el-card>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12" style="height:100%;">
|
|
|
- <el-row style="height:50%;">
|
|
|
- <el-card class="box-card">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>J链路状态</span>
|
|
|
- </div>
|
|
|
- <el-table :data="linkJtable" height="270" style="width: 100%">
|
|
|
- <el-table-column label="属性" prop="key"></el-table-column>
|
|
|
- <el-table-column label="值" prop="value"></el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
- </el-row>
|
|
|
- <el-row style="height:50%;">
|
|
|
- <el-card class="box-card">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>ZY链路状态</span>
|
|
|
- </div>
|
|
|
- <el-table :data="linkZYtable" height="270" style="width: 100%">
|
|
|
- <el-table-column label="属性" prop="key"></el-table-column>
|
|
|
- <el-table-column label="值" prop="value"></el-table-column>
|
|
|
- </el-table>
|
|
|
</el-card>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { visualMap } from 'echarts/lib/theme/dark';
|
|
|
import { mapGetters } from 'vuex'
|
|
|
export default {
|
|
|
computed: {
|
|
|
- ...mapGetters([
|
|
|
- 'platformID',
|
|
|
- 'netMembertable',
|
|
|
- 'linkVUtable',
|
|
|
- 'linkJtable',
|
|
|
- 'linkZYtable',
|
|
|
- ]),
|
|
|
+ ...mapGetters([
|
|
|
+ 'map',
|
|
|
+ 'init',
|
|
|
+ 'platforms',
|
|
|
+ 'esmInstances',
|
|
|
+ 'esmParams',
|
|
|
+ 'platformID'
|
|
|
+ ]),
|
|
|
},
|
|
|
watch: {
|
|
|
- platformID: {
|
|
|
- handler: function (val, oldVal) {
|
|
|
- // 更新表数据
|
|
|
- this.$store.commit('app/setNetMembertable', this.netMembertableTemp);
|
|
|
- this.$store.commit('app/setLinkVUtable', this.linkVUtableTemp);
|
|
|
- this.$store.commit('app/setLinkJtable', this.linkJtableTemp);
|
|
|
- this.$store.commit('app/setLinkZYtable', this.linkZYtableTemp);
|
|
|
- // 判断是否为本平台
|
|
|
- this.netMembertable.forEach(element => {
|
|
|
- if (element.platID == val) {
|
|
|
- element.isCurrent = "是"
|
|
|
+ init: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+
|
|
|
+ this.setTimer();
|
|
|
}
|
|
|
- else {
|
|
|
- element.isCurrent = "否"
|
|
|
+ },
|
|
|
+ platformID: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ this.$wst.send({
|
|
|
+ url: 'getInstanceTable',
|
|
|
+ data: { PlatformID: val }
|
|
|
+ })
|
|
|
}
|
|
|
- });
|
|
|
+ },
|
|
|
+ esmInstances: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
|
|
|
+ this.instancetable = val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ esmParams: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ this.propertyinittable = val.InitParams
|
|
|
+ this.propertycontroltable = val.CtrlParams
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
},
|
|
|
data() {
|
|
|
- return {
|
|
|
-
|
|
|
- netMembertableTemp: [
|
|
|
- { platID: 8013, platName: "干扰机_1", netState: "在线", platInTeam: "长机", isCurrent: null },
|
|
|
- { platID: 8014, platName: "干扰机_2", netState: "离线", platInTeam: "僚机", isCurrent: null },
|
|
|
- { platID: 8015, platName: "侦察机_1", netState: "在线", platInTeam: "僚机", isCurrent: null },
|
|
|
- { platID: 8016, platName: "侦察机_2", netState: "在线", platInTeam: "僚机", isCurrent: null }
|
|
|
- ],
|
|
|
- linkVUtableTemp: [
|
|
|
- { key: "链路开关", value: "开" },
|
|
|
- { key: "静默状态", value: "非静默" },
|
|
|
- { key: "工作模式", value: "指挥引导" },
|
|
|
- { key: "波形", value: "TCM" },
|
|
|
- { key: "波道号", value: 12 },
|
|
|
- { key: "丢包率(%)", value: 1 },
|
|
|
- { key: "通信速率(kbps)", value: 19.2 },
|
|
|
- { key: "时延(ms)", value: 100 }
|
|
|
- ],
|
|
|
- linkJtableTemp: [
|
|
|
- { key: "链路开关", value: "开" },
|
|
|
- { key: "静默状态", value: "静默" },
|
|
|
- { key: "工作模式", value: "指挥引导" },
|
|
|
- { key: "规划号", value: 13 },
|
|
|
- { key: "丢包率(%)", value: 6 },
|
|
|
- { key: "通信速率(kbps)", value: 38.4 },
|
|
|
- { key: "时延(ms)", value: 150 }
|
|
|
- ],
|
|
|
- linkZYtableTemp: [
|
|
|
- { key: "链路开关", value: "关" },
|
|
|
- { key: "静默状态", value: null },
|
|
|
- { key: "丢包率(%)", value: null },
|
|
|
- { key: "通信速率(kbps)", value: null },
|
|
|
- { key: "时延(ms)", value: null }
|
|
|
- ]
|
|
|
- };
|
|
|
+ return {
|
|
|
+ data: [],
|
|
|
+ ESMresults: [],
|
|
|
+ currentSensor: null,
|
|
|
+ frequencevalue: '',
|
|
|
+ workvalue: '',
|
|
|
+ frequenceAverageShow: false,
|
|
|
+ radarEchart: null,
|
|
|
+ instancetable: null,
|
|
|
+ instanceID: null,
|
|
|
+ propertyinittable: null,
|
|
|
+ propertycontroltable: null,
|
|
|
+ Switch: null,
|
|
|
+ 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: {
|
|
|
+ polar: {},
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ angleAxis: {
|
|
|
+ max: 360,
|
|
|
+ min: 0,
|
|
|
+ type: 'value',
|
|
|
+ startAngle: 90,
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ radiusAxis: {
|
|
|
+ max: 10,
|
|
|
+ min: 0,
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#f7f7f7' // 设置轴线的颜色为红色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ coordinateSystem: 'polar',
|
|
|
+ name: 'line',
|
|
|
+ type: 'scatter',
|
|
|
+ data: null,
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // radarData: {
|
|
|
+ // [12, 32,42]
|
|
|
+ // }
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
- if (this.platformID != null) {
|
|
|
- // 更新表数据
|
|
|
- this.$store.commit('app/setNetMembertable', this.netMembertableTemp);
|
|
|
- this.$store.commit('app/setLinkVUtable', this.linkVUtableTemp);
|
|
|
- this.$store.commit('app/setLinkJtable', this.linkJtableTemp);
|
|
|
- this.$store.commit('app/setLinkZYtable', this.linkZYtableTemp);
|
|
|
- // 判断是否为本平台
|
|
|
- this.netMembertable.forEach(element => {
|
|
|
- if (element.platID == val) {
|
|
|
- element.isCurrent = "是"
|
|
|
- }
|
|
|
- else {
|
|
|
- element.isCurrent = "否"
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
+ for (let i = 0; i <= 7; i++) {
|
|
|
+ let theta = (i / 100) * 180 + Math.random() * 90;
|
|
|
+ let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
|
|
|
+ this.data.push([r, theta]);
|
|
|
+
|
|
|
+ this.ESMresults.push(
|
|
|
+ {
|
|
|
+ "az": theta,
|
|
|
+ "range": r
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ this.echartoption.series[0].data = this.data
|
|
|
+
|
|
|
+ this.echartsInit();
|
|
|
+ // 页面加载设置高度自适应
|
|
|
+ window.onresize = () => {
|
|
|
+
|
|
|
+ this.resizeDom()
|
|
|
+ };
|
|
|
+ // 页面加载设置高度自适应
|
|
|
+ this.resizeDom()
|
|
|
},
|
|
|
methods: {
|
|
|
- submitForm() {
|
|
|
- // 这里可以编写提交表单的代码
|
|
|
- },
|
|
|
+ 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-65)+'px';
|
|
|
+ this.$echarts.init(document.getElementById('radarEchart')).resize()
|
|
|
+ },
|
|
|
+ instanceChange(val) {
|
|
|
+
|
|
|
+ this.$wst.send({
|
|
|
+ url: 'getESMParams',
|
|
|
+ data: {
|
|
|
+ InstanceID: val.instanceID,
|
|
|
+ PlatformID: this.platformID
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
-};
|
|
|
-</script>
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.tableHeight {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.echarts-box {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.radar {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.select{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
