src/layout/Footer/index.vue

@@ -1,28 +1,28 @@
 <template>
     <el-footer class="MainFooter">
-      <div @click="setCollapse()" class="collapse">
-      <el-tooltip class="item" effect="dark" content="展开" placement="right">
-        <i class="el-icon-d-arrow-right"
-          style="font-size: 1.5em;font-weight: 600; display: table; margin: 0 auto; color: #19c3eb;" v-if="isCollapse"></i>
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="收缩" placement="right">
-        <i class="el-icon-d-arrow-left"
-          style="font-size: 1.5em;font-weight: 600; display: table; margin: 0 auto;color: #19c3eb" v-if="!isCollapse"></i>
-      </el-tooltip>
-       </div>
-        <!-- <dv-decoration-6 style="width:300px;height:30px;" /> -->
-        <span style="margin-top:4px;margin-left:10px;">初始化状态</span>
-        <dv-percent-pond :config="{value: init}" style="width:200px;margin-top: 5px;margin-left: 5px;" />
-        <span style="margin-top:4px;margin-left:10px;">平台信息</span>
-        <el-switch
-          style="margin-top:4px;margin-left:10px;"
-          v-model="platformshow"
-          :change = "platformShowChange()"
-          active-color="#13ce66"
-          inactive-color="#ff4949">
-        </el-switch>  
-        <span style="margin-top:4px;margin-left:10px;">平台编号</span>
-        <el-input v-model="platformID" :disabled="true" style="margin-top:2px; margin-bottom:2px;width:100px;margin-left:10px;" class="platformId" size="mini"></el-input>
+<!--      <div @click="setCollapse()" class="collapse">-->
+<!--      <el-tooltip class="item" effect="dark" content="展开" placement="right">-->
+<!--        <i class="el-icon-d-arrow-right"-->
+<!--          style="font-size: 1.5em;font-weight: 600; display: table; margin: 0 auto; color: #19c3eb;" v-if="isCollapse"></i>-->
+<!--      </el-tooltip>-->
+<!--      <el-tooltip class="item" effect="dark" content="收缩" placement="right">-->
+<!--        <i class="el-icon-d-arrow-left"-->
+<!--          style="font-size: 1.5em;font-weight: 600; display: table; margin: 0 auto;color: #19c3eb" v-if="!isCollapse"></i>-->
+<!--      </el-tooltip>-->
+<!--       </div>-->
+<!--        &lt;!&ndash; <dv-decoration-6 style="width:300px;height:30px;" /> &ndash;&gt;-->
+<!--        <span style="margin-top:4px;margin-left:10px;">初始化状态</span>-->
+<!--        <dv-percent-pond :config="{value: init}" style="width:200px;margin-top: 5px;margin-left: 5px;" />-->
+<!--        <span style="margin-top:4px;margin-left:10px;">平台信息</span>-->
+<!--        <el-switch-->
+<!--          style="margin-top:4px;margin-left:10px;"-->
+<!--          v-model="platformshow"-->
+<!--          :change = "platformShowChange()"-->
+<!--          active-color="#13ce66"-->
+<!--          inactive-color="#ff4949">-->
+<!--        </el-switch>-->
+<!--        <span style="margin-top:4px;margin-left:10px;">平台编号</span>-->
+<!--        <el-input v-model="platformID" :disabled="true" style="margin-top:2px; margin-bottom:2px;width:100px;margin-left:10px;" class="platformId" size="mini"></el-input>-->
         <!-- <dv-decoration-3 style="width:250px;height:30px;" />
         <dv-decoration-10 style="width:300px;height:30px;" /> -->
     </el-footer>
@@ -58,7 +58,7 @@ export default {
        },
        platformID: {
           handler: function(val, oldVal){
-            
+
           }
        },
     },
@@ -72,7 +72,7 @@ export default {
       setCollapse(){
         this.$store.commit('app/setIsCollapse',!this.isCollapse);
       }
-      
+
   }
 }
 
@@ -80,10 +80,10 @@ export default {
 <style  scoped>
 .MainFooter {
     padding: 0px;
-    height: 30px !important;  
+    height: 30px !important;
     display: flex;
     color: #03d3ec;
-    
+
 }
 
 /deep/ .el-input--mini .el-input__inner {
@@ -96,4 +96,4 @@ export default {
     background-color: #282c34;
     color: white;
 }
-</style>
+</style>

src/views/communicationManagement/index.vue

@@ -14,36 +14,65 @@
                                :value="item.id"/>
                   </el-select>
             </div>
-            <el-table height="90%" :data="Params" style="width: 100%;overflow-y: auto"  fit size="mini">
-              <el-table-column width="80" prop="key" label="属性"></el-table-column>
-              <el-table-column width="80" prop="value" label="值"></el-table-column>
+            <el-table height="90%" :data="params" style="width: 100%;overflow-y: auto"  fit size="mini">
+              <el-table-column width="80" prop="label" label="属性"></el-table-column>
+              <el-table-column width="80" prop="value" label="当前值"></el-table-column>
               <el-table-column label="操作" align="center">
                 <template slot-scope="scope">
-                  <el-switch v-if="scope.row.key === '链路开关'" active-text="开" inactive-text="关"
-                    v-model="linkVUProps.linkSwitchBoolean" :change="switchChange()">
-                  </el-switch>
-                  <el-switch v-if="scope.row.key === '静默状态'" active-text="非静默" inactive-text="静默"
-                    v-model="linkVUProps.linkSilentBoolean" :change="switchChange()">
-                  </el-switch>
-                  <el-select v-if="scope.row.key === '通信速率'" v-model="linkVUProps.linkSpeed" size="mini"
-                    placeholder="选择速率">
-                    <el-option v-for="item in linkVUSpeedOptions" :key="item.value" :label="item.label"
-                      :value="item.label"></el-option>
-                  </el-select>
-                  <el-select v-if="scope.row.key === '传输模式'" v-model="linkVUProps.linkQuality" size="mini"
-                    placeholder="选择质量">
-                    <el-option v-for="item in linkVUQualityOptions" :key="item.value" :label="item.label"
-                      :value="item.label"></el-option>
+                  <!-- ID不显示操作 -->
+                  <template v-if="scope.row.controlType === 'text'">
+                    <span>不可修改</span>
+                  </template>
+
+                  <!-- 是否在线开关 -->
+                  <el-switch
+                      v-if="scope.row.controlType === 'switch-online'"
+                      v-model="scope.row.value"
+                      active-value="开"
+                      inactive-value="关"
+                      @change="val => handleSwitchChange('isOnline', val)"
+                  ></el-switch>
+
+                  <!-- 是否静默开关 -->
+                  <el-switch
+                      v-if="scope.row.controlType === 'switch-status'"
+                      v-model="scope.row.value"
+                      active-value="静默"
+                      inactive-value="非静默"
+                      @change="val => handleSwitchChange('status', val)"
+                  ></el-switch>
+
+                  <!-- 连接模式下拉框 -->
+                  <el-select
+                      v-if="scope.row.controlType === 'select'"
+                      v-model="scope.row.value"
+                      placeholder="请选择"
+                      @change="val => handleSelectChange(val)"
+                  >
+                    <el-option
+                        v-for="item in linkOptions"
+                        :key="item"
+                        :label="item"
+                        :value="item"
+                    ></el-option>
                   </el-select>
                 </template>
               </el-table-column>
             </el-table>
             <div >
+              <el-select size="mini" v-model="selectPlatId" @change="getParams">
+                <el-option v-for="item in platList"
+                           :key="item.id"
+                           :label="item.name"
+                           :value="item.id"/>
+              </el-select>
               <el-button size="mini" type="success" style="float: right"
-                         :disabled="!editable">修改参数</el-button>
+                         :disabled="editable()"
+                         @click="editParams"
+              >修改参数</el-button>
               <el-button size="mini" type="info" style="float: right"
                          :disabled="editable()"
-                         @click="getParams"
+                         @click="getParamsPre"
               >刷新</el-button>
             </div>
           </el-card>
@@ -124,55 +153,12 @@ export default {
 
       tableHeight: "calc(100vh - 30px)",
 
-      Params: [{
-        key: "链路开关",
-        value: "开"
-      },
-        {
-          key: "静默状态",
-          value: "非静默"
-        },
-        {
-          key: "通信速率",
-          value: "速率1"
-        },
-        {
-          key: "传输模式",
-          value: "模式1"
-        }
-      ],
-      linkVUProps: {
-        linkSwitch: 1,
-        linkSilent: 1,
-        linkSwitchBoolean: true,
-        linkSilentBoolean: true,
-        linkSpeed: null,
-        platInfo: null,
-        linkEdit: null,
-        linkQuality: null,
-      },
-      linkJProps: {
-        WorkMode: 1,
-        WireLessStatus: 1,
-        WorkModeBoolean: true,
-        WireLessStatusBoolean: true,
-        PlatType: null,
-      },
-      linkVUSpeedOptions: [
-        {value: 0, label: "无报告"},
-        {value: 1, label: "2.4kbps"},
-        {value: 2, label: "4.8kbps"},
-        {value: 3, label: "6.4kbps"},
-        {value: 4, label: "128kbps"},
-        {value: 5, label: "256kbps"},
-        {value: 6, label: "512kbps"},
-        {value: 7, label: "1Mbps"},
-        {value: 8, label: "2Mbps"},
-      ],
-      linkVUQualityOptions: [
-        {value: 1, label: "可靠性"},
-        {value: 2, label: "实时性"},
-      ],
+      selectPlatId: null,
+      platList: [],
+      params: [],
+      originData: {},
+      linkOptions: ['实时性','可靠性'],
+
     };
   },
   created() {
@@ -206,6 +192,8 @@ export default {
         this.initReceived()
         this.initMembers()
         this.getParams()
+      }else {
+        this.selectPlatId = null;
       }
     },
     initGroup() {
@@ -230,10 +218,98 @@ export default {
           break
         }
       }
+      this.selectPlatId=null;
+      this.originData=null;
+      this.params=[];
+      this.initPlatList();
       this.initChart();
       this.initSend();
       this.initReceived();
       this.initMembers();
+      this.getParams();
+    },
+    async getParamsPre(){
+      try {
+        await this.getParams();
+        // 请求成功后显示提示
+        this.$message({
+          message: "刷新成功",
+          type: "success",
+          duration: 1500,
+        });
+      } catch (error) {
+        // 可选：添加错误处理
+        this.$message.error('操作失败: ' + error.message);
+      }
+    },
+    getParams(){
+      this.$http({
+        url: this.$http.adornUrl("/communication/getParams?id=" + this.selectPlatId),
+        method: "get",
+      }).then(({data}) => {
+        if (data && data.code === 0) {
+          this.produceData(data.data)
+          return data
+        }else {
+          throw new Error(data.msg || '请求失败')
+        }
+      })
+    },
+    produceData(data){
+      this.originData = {...data}
+      this.params = [
+        {
+          propKey: 'id',
+          label: '平台ID',
+          value: data.id,
+          controlType: 'text'
+        },
+        {
+          propKey: 'isOnline',
+          label: '链路开关',
+          value: data.isOnline,
+          controlType: 'switch-online'
+        },
+        {
+          propKey: 'status',
+          label: '静默状态',
+          value: data.status,
+          controlType: 'switch-status'
+        },
+        {
+          propKey: 'linkModel',
+          label: '连接模式',
+          value: data.linkModel,
+          controlType: 'select'
+        }
+      ];
+    },
+    editParams(){
+      this.$http({
+        url: this.$http.adornUrl("/communication/updateParams"),
+        method: "post",
+        data: this.originData,
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          Message({
+            message: "操作成功",
+            type: "success",
+            duration: 1500,
+          });
+        } else {
+          Message.error(data.msg);
+        }
+        this.getParams();
+        this.initMembers();
+      });
+    },
+    // 开关修改事件
+    handleSwitchChange(key, value) {
+      this.originData[key] = value;
+    },
+    // 下拉框修改事件
+    handleSelectChange(value) {
+      this.originData.linkModel = value;
     },
     getNetworkGroupList() {
       this.$http({
@@ -252,7 +328,7 @@ export default {
       })
     },
     editable() {
-      return this.selectedGroupId === 0;
+      return this.selectPlatId===null || this.selectPlatId === 0;
     },
     fetchData(){
       if(this.selectedGroupId!=null){
@@ -262,7 +338,20 @@ export default {
         this.initReceived();
       }
     },
+    initPlatList(){
+      if(this.selectedGroupId!=null){
+        this.$http({
+          url: this.$http.adornUrl("/communication/getMembers?id=" + this.selectedGroupId),
+          method: "get",
+        }).then(({data}) => {
+          if (data && data.code === 0) {
+            this.platList = data.data;
+          }
+        })
+      }
+    },
     initChart() {
+      console.log(this.selectedGroup)
       this.$http({
         url: this.$http.adornUrl("/communication/getChart?id=" + this.selectedGroupId),
         method: "get",
@@ -273,10 +362,26 @@ export default {
           if (this.chartInstance == null) {
             this.createChartInstance(this.$refs.chart);
           }
+          let color ='#F56C6C'
+          let text = "干扰平台网络组"
+          if(this.selectedGroup.type==="radar"){
+            color = '#409EFF'
+            text = '雷达平台网络组'
+          }
           this.chartInstance.setOption({
+            title: {
+              text: text,
+              left: 'center',
+              textStyle:{
+                color: '#ffffff'
+              }
+            },
             series: [{
               data: this.nodes,
               links: this.edges,
+              itemStyle: {
+                color: color
+              },
             }]
           })
         }
@@ -312,7 +417,6 @@ export default {
         }
       })
     },
-    getParams(){},
     createChartInstance(dom) {
       this.chartInstance = this.$echarts.init(dom)
       const chartOption = {
@@ -352,7 +456,6 @@ export default {
           },
         ],
       };
-
       this.chartInstance.setOption(chartOption)
     },
     //通过窗体高宽计算容器高宽，渲染echart图表的div的宽高度以达到自适应目的
@@ -363,23 +466,6 @@ export default {
       Echart.style.height = boxHeight - 65 + "px";
       this.$echarts.init(document.getElementById("radarEchart")).resize();
     },
-    //变更参数
-    handleEdit() {
-      console.log("aaa")
-    },
-    switchChange() {
-      if (this.currentLink === 1) {
-        this.linkVUProps.linkSilent =
-            this.linkVUProps.linkSilentBoolean == true ? 1 : 0;
-        this.linkVUProps.linkSwitch =
-            this.linkVUProps.linkSwitchBoolean == true ? 1 : 0;
-      } else if (this.currentLink === 2) {
-        this.linkJProps.WireLessStatus =
-            this.linkJProps.WireLessStatusBoolean == true ? 1 : 0;
-        this.linkJProps.WorkMode =
-            this.linkJProps.WorkModeBoolean == true ? 1 : 2;
-      }
-    },
   }
 }
 

src/views/groupManagement/index.vue

@@ -15,7 +15,7 @@
       <div style="height: calc(100% - 50px)" class="main-content">
         <div v-if="activeMenu === '1'" style="height: 100%" >
           <div style="height: calc(100% - 60px)">
-            <el-table :data="networkGroups" height="100%" style="width: 100%" >
+            <el-table :data="networkGroups" height="100%" style="align-items: center">
               <el-table-column prop="id" label="ID"/>
               <el-table-column prop="type" label="平台类型" >
                 <template slot-scope="scope">
@@ -29,7 +29,7 @@
                   {{ scope.row.communication ? '启用' : '禁用' }}
                 </template>
               </el-table-column>
-              <el-table-column label="操作" width="180px" fixed="right">
+              <el-table-column label="操作" width="200px" fixed="right">
                 <template slot-scope="scope">
                   <el-button @click="editNetworkGroup(scope.row)">编辑</el-button>
                   <el-button type="danger" @click="deleteNetworkGroup(scope.row.id)">删除</el-button>
@@ -112,7 +112,7 @@
               </el-table-column>
               <el-table-column
                 label="操作"
-                width="180px"
+                width="200px"
                 fixed="right"
               >
                 <template slot-scope="scope">
@@ -581,6 +581,9 @@
                   {
                     type: "graph",
                     layout: "force",
+                    itemStyle: {
+                      color: '#F56C6C'
+                    },
                     symbolSize: 30,
                     roam: true,
                     label: {
@@ -652,6 +655,9 @@
                   {
                     type: "graph",
                     layout: "force",
+                    itemStyle: {
+                      color: '#409EFF'
+                    },
                     symbolSize: 30,
                     roam: true,
                     label: {

src/views/messageManagement/index.vue

@@ -23,6 +23,7 @@
           <div style="height: 30px">
             <el-pagination
                 background
+                class="pagination-container"
                 @size-change="radarSizeChangeHandle"
                 @current-change="radarCurrentChangeHandle"
                 :current-page="radarPageIndex"
@@ -57,6 +58,7 @@
           <div style="height: 30px;">
             <el-pagination
                 background
+                class="pagination-container"
                 @size-change="interferenceSizeChangeHandle"
                 @current-change="interferenceCurrentChangeHandle"
                 :current-page="interferencePageIndex"
@@ -75,7 +77,7 @@
         <div slot="header" class="clearfix" style="height: 28px">
           <span>综合/战术/自由</span>
         </div>
-        <div style="height: calc(100% - 30px)">
+        <div style="height: calc(100% - 35px)">
           <el-table :data="this.otherData" height="100%">
             <el-table-column label="序号" type="index" :index='(index) => { return (index + 1) + (otherPageIndex - 1) * otherPageSize }'></el-table-column>
             <el-table-column prop="type" label="消息类型"></el-table-column>
@@ -90,6 +92,7 @@
         <div style="height: 30px">
           <el-pagination
               background
+              class="pagination-container"
               @size-change="otherSizeChangeHandle"
               @current-change="otherCurrentChangeHandle"
               :current-page="otherPageIndex"
@@ -256,7 +259,11 @@ export default {
 .clearfix:after {
   clear: both;
 }
-
+.pagination-container {
+  display: flex;
+  justify-content: flex-end; /* 将内容推到右侧 */
+  margin-top: 3px; /* 可选：添加上边距 */
+}
 .box-card {
   width: 480px;
 }

src/views/semiPhysicalSystem/index.vue

@@ -1,104 +1,382 @@
 <template>
-    <div>
-      <el-row>
-        <!-- 半实物设备接入 -->
-          <el-card>
-            <h2>半实物设备接入</h2>
-            <el-form :model="deviceForm" label-width="150px">
-              <el-form-item label="设备名称">
-                <el-input v-model="deviceForm.deviceName" placeholder="请输入设备名称"></el-input>
-              </el-form-item>
-              <el-form-item label="设备状态">
-                <el-tag :type="deviceForm.deviceStatus === '正常' ? 'success' : 'danger'">{{ deviceForm.deviceStatus }}</el-tag>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="updateDevice">更新设备</el-button>
-              </el-form-item>
-            </el-form>
-          </el-card>
-  
-        <!-- 设备数据交互 -->
-        <el-row>
-          <el-card>
-            <h2>设备数据交互</h2>
-            <el-form :model="dataInteractionForm" label-width="150px">
-              <el-form-item label="干扰脉冲数据">
-                <el-input v-model="dataInteractionForm.interferenceData" placeholder="请输入干扰脉冲数据"></el-input>
-              </el-form-item>
-              <el-form-item label="模拟器参数数据">
-                <el-input v-model="dataInteractionForm.simulatorParams" placeholder="请输入模拟器参数数据"></el-input>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="sendData">发送数据</el-button>
-              </el-form-item>
-            </el-form>
-          </el-card>
-        </el-row>
-  
-        <!-- 仿真数据交互 -->
-        <el-row>
-          <el-card>
-            <h2>仿真数据交互</h2>
-            <el-form :model="simulationForm" label-width="150px">
-              <el-form-item label="接收数据">
-                <el-input type="textarea" v-model="simulationForm.receivedData" placeholder="请输入接收的数据" rows="4"></el-input>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="processData">处理数据</el-button>
-              </el-form-item>
-            </el-form>
-          </el-card>
-        </el-row>
+  <el-row style="height: 100%" :gutter="10">
+    <el-col :span="8" style="height: 100%">
+      <el-card class="box-card">
+        <div slot="header" style="height: 35px">
+          <span>半实物平台数据</span>
+          <el-button size="mini" @click="initilizeSDR" type="danger"
+                     style="float: right;margin-right: 10px;">重启设备</el-button>
+        </div>
+        <div style="height: calc(100% - 30px)">
+          <!-- 主表 -->
+          <div class="card-container">
+            <div v-if="platData" class="card-wrapper">
+              <div class="status-card">
+                <div class="card-title">在线状态</div>
+                <el-tag v-if="platData.onlineStatus==='上线'" type="success" class="card-value">
+                  {{platData.onlineStatus}}
+                </el-tag>
+                <el-tag v-else-if="platData.onlineStatus==='离线'" type="danger" class="card-value">
+                  {{platData.onlineStatus}}
+                </el-tag>
+                <el-tag v-else type="info" class="card-value">
+                  加载
+                </el-tag>
+              </div>
+              <div class="status-card">
+                <div class="card-title">服务状态</div>
+                <el-tag v-if="platData.serviceStatus==='正常提供'" type="success" class="card-value2">
+                  {{platData.serviceStatus}}
+                </el-tag>
+                <el-tag v-else-if="platData.onlineStatus==='无法提供'" type="danger" class="card-value2">
+                  {{platData.serviceStatus}}
+                </el-tag>
+                <el-tag v-else type="info" class="card-value2">
+                  正在加载
+                </el-tag>
+              </div>
+            </div>
+          </div>
+          <div style="overflow-y: auto;height: calc(100% - 210px);scrollbar-width: none; ">
+          <!-- 可折叠副表 -->
+            <el-collapse v-model="activeNames " class="transparent-collapse" >
+              <!-- A平台参数 -->
+              <el-collapse-item name="1"  class="transparent-item">
+                  <template slot="title">
+                    <span style="font-weight: bold;">半实物干扰平台参数</span>
+                  </template>
+                  <el-card>
+                    <el-table
+                        :data="interferList"
+                        :cell-class-name="setFirstCellBold"
+                        size="mini"
+                        height="200"
+                        style="margin: 10px 0;">
+                      <el-table-column prop="name" label="参数名"></el-table-column>
+                      <el-table-column prop="value" label="参数值"></el-table-column>
+                    </el-table>
+                  </el-card>
+                </el-collapse-item>
+                <!-- B平台参数 -->
+                <el-collapse-item name="2">
+                  <template slot="title">
+                    <span style="font-weight: bold;">半实物雷达平台参数</span>
+                  </template>
+                  <el-card>
+                    <el-table
+                        :data="radarList"
+                        :cell-class-name="setFirstCellBold"
+                        size="mini"
+                        height="200"
+                        style="margin: 10px 0;">
+                      <el-table-column prop="name" label="参数名"></el-table-column>
+                      <el-table-column prop="value" label="参数值"></el-table-column>
+                    </el-table>
+                  </el-card>
+                </el-collapse-item>
+            </el-collapse>
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="16" style="height: 100%">
+      <el-row style="height: calc(50% - 5px)">
+        <el-card class="box-card">
+          <div slot="header" style="height: 28px">
+            <span>原始波形</span>
+          </div>
+          <div ref="originalChart" style="height: 100%"></div>
+        </el-card>
       </el-row>
-    </div>
-  </template>
-  
+      <el-row style="height: calc(50% - 5px);margin-top: 10px" >
+        <el-card class="box-card">
+          <div slot="header" style="height: 28px">
+            <span>干扰后波形</span>
+          </div>
+          <div ref="interferedChart" style="height: 100%"></div>
+        </el-card>
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
   <script>
+  import {Message, MessageBox} from "element-ui";
   export default {
     data() {
       return {
-        deviceForm: {
-          deviceName: '',
-          deviceStatus: '正常'
+        interval: null,
+        originalChart: null,
+        interferedChart: null,
+        platData: {
+          onlineStatus:null,
+          serviceStatus:null,
         },
-        dataInteractionForm: {
-          interferenceData: '',
-          simulatorParams: ''
+        radarRawData:{},
+        interferRawData:{},
+        radarList:[],
+        interferList:[],
+        // 示例波形数据
+        waveData: {
+          original: null,
+          interfered: null
         },
-        simulationForm: {
-          receivedData: ''
-        }
+        isCollapsed: { A: false, B: false },
+        mainData: [],    // 主表数据
+        aData: [],       // A平台数据
+        bData: []        // B平台数据
       };
     },
+    activated() {
+      this.interval=setInterval(this.getPlatStatus, 5000)
+      this.getPlatParams()
+      this.getChartInfo()
+    },
+    deactivated() {
+      if(this.interval){
+        clearInterval(this.interval)
+      }
+      this.waveData.original=null;
+      this.waveData.interfered=null;
+    },
+    mounted() {
+      this.initCharts()
+      this.getPlatStatus()
+      window.addEventListener('resize', this.handleResize)
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleResize)
+      if (this.originalChart) {
+        this.originalChart.dispose()
+      }
+      if (this.interferedChart) {
+        this.interferedChart.dispose()
+      }
+    },
     methods: {
-      updateDevice() {
-        this.$message({
-          message: '设备信息已更新',
-          type: 'success'
-        });
-        // 这里可以添加更新设备信息的逻辑
+      // 初始化图表
+      initCharts() {
+        this.originalChart = this.$echarts.init(this.$refs.originalChart)
+        this.interferedChart = this.$echarts.init(this.$refs.interferedChart)
+
+        const baseOption = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          xAxis: {
+            type: 'category',
+            data: Array.from({length: 100}, (_,i) => i)
+          },
+          yAxis: {
+            type: 'value',
+            min: -2,
+            max: 2
+          },
+          series: [{
+            type: 'line',
+            smooth: true,
+            symbol: 'none',
+            lineStyle: {
+              width: 1
+            }
+          }]
+        }
+
+        this.originalChart.setOption({
+          ...baseOption,
+          series: [{
+            ...baseOption.series[0],
+            data: this.waveData.original,
+            lineStyle: {
+              color: '#409EFF'
+            }
+          }]
+        })
+
+        this.interferedChart.setOption({
+          ...baseOption,
+          series: [{
+            ...baseOption.series[0],
+            data: this.waveData.interfered,
+            lineStyle: {
+              color: '#F56C6C'
+            }
+          }]
+        })
       },
-      sendData() {
-        this.$message({
-          message: '数据已发送',
-          type: 'success'
-        });
-        // 这里可以添加发送数据的逻辑
+      handleResize() {
+        this.originalChart?.resize()
+        this.interferedChart?.resize()
       },
-      processData() {
-        this.$message({
-          message: '数据处理完成',
-          type: 'success'
+      initilizeSDR(){
+        MessageBox.confirm('确定要重启设备吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(()=> {
+          this.$http({
+            url: this.$http.adornUrl("/SDR/initialize"),
+            method: "get",
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              Message({
+                message: "操作成功",
+                type: "success",
+                duration: 1000,
+              });
+            } else {
+              Message.error(data.msg);
+            }
+          })
+        })
+      },
+      getPlatStatus() {
+        this.$http({
+          url: this.$http.adornUrl("/SDR/info"),
+          method: "get",
+        }).then(({data}) => {
+          if (data && data.code === 0) {
+            this.platData.onlineStatus=data.data.onlineStatus;
+            this.platData.serviceStatus=data.data.serviceStatus;
+            console.log(this.platData)
+          } else {
+            Message.error(data.msg);
+          }
+        })
+      },
+      getPlatParams(){
+        this.$http({
+          url: this.$http.adornUrl("/SDR/getInfo"),
+          method: "get",
+        }).then(({data}) => {
+          if (data && data.code === 0) {
+            this.radarRawData=data.radarInfo;
+            this.interferRawData=data.interferInfo;
+            this.convertInterferInfo();
+          } else {
+            Message.error(data.msg);
+          }
+        })
+      },
+      convertInterferInfo() {
+        this.interferList = Object.entries(this.interferRawData).map(([key, value]) => {
+          const name = key === 'strategy' ? '采用策略' : key;
+          return {
+            name,
+            value
+          };
         });
-        // 这里可以添加处理数据的逻辑
+        const strategyIndex = this.interferList.findIndex(item => item.name === '采用策略');
+        if (strategyIndex > -1) {
+          const strategyItem = this.interferList.splice(strategyIndex, 1)[0];
+          this.interferList.unshift(strategyItem);
+        }
+        this.radarList = Object.entries(this.radarRawData).map(([key, value]) => {
+          const name = key === 'strategy' ? '采用策略' : key;
+          return {
+            name,
+            value
+          };
+        });
+        const radarStrategyIndex = this.radarList.findIndex(item => item.name === '采用策略');
+        if (radarStrategyIndex > -1) {
+          const radarStrategyItem = this.radarList.splice(radarStrategyIndex, 1)[0];
+          this.radarList.unshift(radarStrategyItem);
+        }
+      },
+      getChartInfo(){
+        this.$http({
+          url: this.$http.adornUrl("/SDR/getData"),
+          method: "get",
+        }).then(({data}) =>{
+          if (data && data.code === 0) {
+            this.waveData.original=data.data.jamming_signal;
+            this.waveData.interfered=data.data.anti_jamming_signal;
+            this.originalChart.setOption({
+              series:[{
+                data:this.waveData.original
+              }]
+            })
+            this.interferedChart.setOption({
+              series:[{
+                data:this.waveData.interfered
+              }]
+            })
+          }
+        })
+      },
+      setFirstCellBold({ rowIndex }) {
+        // 如果是第一行，所有单元格加粗
+        return rowIndex === 0 ? 'bold-cell' : '';
       }
     }
   };
   </script>
-  
+
   <style scoped>
-  h2 {
-    margin-bottom: 20px;
+  /*以下都是内部CSS，是改写element-ui自带的CSS，所以上面看不到使用的痕迹，但是确实是有用的*/
+  ::v-deep .transparent-collapse {
+    width: calc(100% - 20px);
+    /*color: white;*/
+    height: 28px;
+  }
+  ::v-deep .el-collapse-item__wrap{
+    background-color: transparent;
+  }
+
+  ::v-deep .transparent-item {
+    background: transparent !important;
+    border: none !important;
+  }
+  ::v-deep .el-collapse-item__content{
+    padding-bottom: 0;
+  }
+  ::v-deep .el-collapse-item__header{
+    height: 28px;
+    background-color: #1981f6;
+    color: white;
+    padding-left: 20px;
+  }
+  .card-container {
+    padding: 15px 35px 15px 15px;
+  }
+
+  .card-wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+  }
+
+  .status-card {
+    background: #19aff680;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: center; /* 垂直居中对齐 */
+    justify-content: space-between;
+  }
+
+  .card-title {
+    color: white;
+    font-size: 16px;
+    margin-bottom: 8px;
+    margin-right: 16px; /* 增加右侧外边距，使标题和标签有间隔 */
+  }
+  .card-value {
+    float: right;
+    font-weight: 500;
+    font-size: large;
+    padding: 0px 30px 0px 30px;
+  }
+  .card-value2 {
+    float: right;
+    font-weight: 500;
+    font-size: large;
+    padding: 0px 12px 0px 12px;
+  }
+  ::v-deep .bold-cell {
+    font-weight: bold !important;
+    font-size: small;
   }
   </style>
-