3.10

src/views/ConeControl.vue

@@ -88,6 +88,27 @@
         </div>
       </div>
     </div>
+
+    <!-- 添加选择器弹出层 -->
+    <van-popup v-model:show="freqBandPickerVisible" position="bottom">
+      <van-picker :columns="freqBandOptions" @confirm="onFreqBandConfirm" @cancel="freqBandPickerVisible = false"
+        show-toolbar />
+    </van-popup>
+
+    <van-popup v-model:show="channelPickerVisible" position="bottom">
+      <van-picker :columns="channelOptions" @confirm="onChannelConfirm" @cancel="channelPickerVisible = false"
+        show-toolbar />
+    </van-popup>
+
+    <van-popup v-model:show="speedRatePickerVisible" position="bottom">
+      <van-picker :columns="speedRateOptions" @confirm="onSpeedRateConfirm" @cancel="speedRatePickerVisible = false"
+        show-toolbar />
+    </van-popup>
+
+    <van-popup v-model:show="powerPickerVisible" position="bottom">
+      <van-picker :columns="powerOptions" @confirm="onPowerConfirm" @cancel="powerPickerVisible = false"
+        show-toolbar />
+    </van-popup>
   </div>
 </template>
 
@@ -108,27 +129,87 @@ export default {
     const power = ref('');
     const firmwareVersionEl = ref(null);
     const macAddressEl = ref(null);
-    const isLocal = ref(true); // 用于判断是否为本地模式
+    const jsonId = ref(1);
+    const isLocal = ref(true);
+    const freqBandPickerVisible = ref(false);
+    const channelPickerVisible = ref(false);
+    const speedRatePickerVisible = ref(false);
+    const powerPickerVisible = ref(false);
+
+    // 选项数据
+    const freqBandOptions = [
+      { text: '433MHz(430MHz-446MHz)', value: 0 },
+      { text: '470MHz(454MHz-469MHz)', value: 1 },
+      { text: '480MHz(470MHz-486MHz)', value: 2 },
+      { text: '500MHz(494MHz-509MHz)', value: 3 }
+    ];
+
+    const channelOptions = Array.from({ length: 32 }, (_, i) => ({
+      text: `信道${i + 1}`,
+      value: i
+    }));
+
+    const speedRateOptions = [
+      { text: '62.5kbps', value: 0 },
+      { text: '37.5kbps', value: 1 },
+      { text: '21.8kbps', value: 2 },
+      { text: '12.5kbps', value: 3 },
+      { text: '7.0kbps', value: 4 },
+      { text: '3.9kbps', value: 5 },
+      { text: '2.1kbps', value: 6 }
+    ];
+
+    const powerOptions = [
+      { text: '22dbm', value: 0 },
+      { text: '20dbm', value: 1 },
+      { text: '17dbm', value: 2 },
+      { text: '14dbm', value: 3 },
+      { text: '11dbm', value: 4 },
+      { text: '8dbm', value: 5 },
+      { text: '5dbm', value: 6 },
+      { text: '2dbm', value: 7 }
+    ];
 
     const onClickLeft = () => {
       router.back();
     };
 
     const showFreqBandPopup = () => {
-      // 显示频段选择器
+      freqBandPickerVisible.value = true;
     };
 
     const showChannelPopup = () => {
-      // 显示信道选择器
+      channelPickerVisible.value = true;
     };
 
     const showSpeedRatePopup = () => {
-      // 显示速率选择器
+      speedRatePickerVisible.value = true;
     };
 
     const showPowerPopup = () => {
-      // 显示功率选择器
+      powerPickerVisible.value = true;
     };
+
+    const onFreqBandConfirm = (value) => {
+      freqBand.value = value.selectedOptions[0].text;
+      freqBandPickerVisible.value = false;
+    };
+
+    const onChannelConfirm = (value) => {
+      channel.value = value.selectedOptions[0].text;
+      channelPickerVisible.value = false;
+    };
+
+    const onSpeedRateConfirm = (value) => {
+      speedRate.value = value.selectedOptions[0].text;
+      speedRatePickerVisible.value = false;
+    };
+
+    const onPowerConfirm = (value) => {
+      power.value = value.selectedOptions[0].text;
+      powerPickerVisible.value = false;
+    };
+
     const checkEnvironment = () => {
       if (window.location.hostname === '192.168.4.1') {
         console.log('in local');
@@ -139,6 +220,7 @@ export default {
         isLocal.value = false;
       }
     };
+
     const MQTT_send = (send_string) => {
       showToast('设置成功');
       jsonId.value++;
@@ -154,11 +236,6 @@ export default {
       }
     };
 
-
-    const sendCommand = (command) => {
-      // 发送指令逻辑
-      showToast(`发送${command}`);
-    };
     const uploadLoRaConfig = () => {
       // 检查必填字段是否为空
       if (!networkId.value || !freqBand.value || !channel.value || !speedRate.value || !power.value) {
@@ -212,22 +289,14 @@ export default {
         MQTT_send(configData);
       }
     };
-    const MQTT_recv = (string) => {
-            loading.value = false;
-            console.log("MQTT 接收的json:" + string);
-            parseAndFillData(JSON.parse(string));
-            // showToast('刷新成功');
-            console.log('Received message:', string);
-        };
+
+    const sendCommand = (command) => {
+      // 发送指令逻辑
+      showToast(`发送${command}`);
+    };
+
     onMounted(() => {
       checkEnvironment();
-      window.MQTT_recv = MQTT_recv;
-
-    });
-
-    // 组件卸载前断开连接
-    onBeforeUnmount(() => {
-
     });
 
     return {
@@ -245,8 +314,18 @@ export default {
       showPowerPopup,
       uploadLoRaConfig,
       sendCommand,
-      uploadLoRaConfig,
-      checkEnvironment
+      freqBandPickerVisible,
+      channelPickerVisible,
+      speedRatePickerVisible,
+      powerPickerVisible,
+      onFreqBandConfirm,
+      onChannelConfirm,
+      onSpeedRateConfirm,
+      onPowerConfirm,
+      freqBandOptions,
+      channelOptions,
+      speedRateOptions,
+      powerOptions,
     };
   }
 };