commit

src/views/networkManagement/index.vue

@@ -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>

src/views/radarInvestigation/index.vue

@@ -47,7 +47,7 @@
             <el-col :span="6" style="height:100%;">
                 <el-card class="tableHeight">
                     <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>