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