通信质量第一版

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,11 +218,97 @@ export default {
           break
         }
       }
+      this.selectPlatId=null;
+      this.originData=null;
+      this.params=[];
+      this.initPlatList();
       this.initChart();
       this.initSend();
       this.initReceived();
       this.initMembers();
     },
+    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();
+      });
+    },
+    // 开关修改事件
+    handleSwitchChange(key, value) {
+      this.originData[key] = value;
+    },
+    // 下拉框修改事件
+    handleSelectChange(value) {
+      this.originData.linkModel = value;
+    },
     getNetworkGroupList() {
       this.$http({
         url: this.$http.adornUrl("/communication/getNetworkGroups"),
@@ -252,7 +326,7 @@ export default {
       })
     },
     editable() {
-      return this.selectedGroupId === 0;
+      return this.selectPlatId===null || this.selectPlatId === 0;
     },
     fetchData(){
       if(this.selectedGroupId!=null){
@@ -262,6 +336,18 @@ 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() {
       this.$http({
         url: this.$http.adornUrl("/communication/getChart?id=" + this.selectedGroupId),
@@ -312,7 +398,6 @@ export default {
         }
       })
     },
-    getParams(){},
     createChartInstance(dom) {
       this.chartInstance = this.$echarts.init(dom)
       const chartOption = {
@@ -352,7 +437,6 @@ export default {
           },
         ],
       };
-
       this.chartInstance.setOption(chartOption)
     },
     //通过窗体高宽计算容器高宽，渲染echart图表的div的宽高度以达到自适应目的
@@ -363,23 +447,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;
-      }
-    },
   }
 }