feat：设备列表新增TBox远程连接

@@ -17,6 +17,7 @@ enum EDeviceConfigApi {
   DEVICE_CONFIG_EXPORT = '/deviceProfile/export',
   DEVICE_CONFIG_IMPORT = '/deviceProfile/import',
   SET_DEVICE_ISDEFAULT = '/deviceProfile',
+  FRP_API = '/frp/',
 }
 
 /**
@@ -114,3 +115,18 @@ export const setDeviceProfileIsDefaultApi = (id: string, v, params?: {}) => {
     }
   );
 };
+
+/**
+ * Frp内网穿透信息API
+ */
+export const frpGetInfoApi = (proxyName: string) => {
+  return defHttp.get({
+    url: `${EDeviceConfigApi.FRP_API}${proxyName}`,
+  });
+};
+
+export const frpPutInfoApi = (proxyName: string, enableRemote: number) => {
+  return defHttp.put({
+    url: `${EDeviceConfigApi.FRP_API}${proxyName}/${enableRemote}`,
+  });
+};

@@ -28,7 +28,7 @@
         tab="TBox"
         v-if="deviceDetail?.deviceType === 'GATEWAY' && deviceDetail?.brand == 'TBox'"
       >
-        <TBoxDetail />
+        <TBoxDetail :deviceDetail="deviceDetail" />
       </TabPane>
       <!-- 网关设备并且是TBox -->
     </Tabs>

@@ -53,12 +53,6 @@
       <a-button type="primary" class="mr-4" @click="copyTbDeviceId">复制设备ID</a-button>
       <a-button type="primary" class="mr-4" @click="copyDeviceToken">复制访问令牌</a-button>
       <a-button type="primary" class="mr-4" @click="manageDeviceToken">管理设备凭证</a-button>
-      <!-- <a-button
-        type="primary"
-        v-if="deviceDetail.deviceType == 'GATEWAY'"
-        @click="remoteConnectiondGateway"
-        >远程连接边缘网关</a-button
-      > -->
       <ManageDeviceTokenModal @register="registerModal" />
     </div>
     <div v-if="deviceDetail?.deviceInfo?.address" class="mt-4">

 <template>
-  <div>TBox</div>
+  <div>
+    <BasicTable @register="registerTable" :dataSource="tableData">
+      <template #status>
+        <Switch
+          checked-children="开"
+          un-checked-children="关"
+          v-model:checked="checked"
+          @change="handleChange"
+        />
+      </template>
+    </BasicTable>
+    <div style="margin-top: -54vh">
+      <a-button type="primary" class="mr-4" :disabled="disabled" @click="handleFrpRemote"
+        >远程连接</a-button
+      >
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { ref, nextTick } from 'vue';
+  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
+  import { Switch } from 'ant-design-vue';
+  import { h } from 'vue';
+  import { Tag } from 'ant-design-vue';
+  import { frpGetInfoApi, frpPutInfoApi } from '/@/api/device/deviceConfigApi';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const props = defineProps({
+    deviceDetail: {
+      type: Object,
+      required: true,
+    },
+  });
+
+  const { createMessage } = useMessage();
+  const tableData: any = ref([]);
+  const checked = ref<boolean>(false);
+  const disabled = ref<boolean>(true);
+  const viewDeviceColumn: BasicColumn[] = [
+    {
+      title: 'Frp连接状态',
+      dataIndex: 'status',
+      width: 80,
+      customRender: ({ record }) => {
+        const status = record.status;
+        const color = status == 1 ? 'green' : 'red';
+        const text = status == 1 ? '在线' : '离线';
+        return h(Tag, { color }, () => text);
+      },
+    },
+    {
+      title: '远程连接',
+      dataIndex: 'enableRemote',
+      width: 80,
+      slots: { customRender: 'status' },
+    },
+    {
+      title: '设备SN',
+      dataIndex: 'proxyName',
+      width: 120,
+    },
+  ];
+  const [registerTable] = useTable({
+    title: 'TBox信息',
+    columns: viewDeviceColumn,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    showTableSetting: false,
+    bordered: true,
+  });
+  const enableRemote = ref(0);
+  const proxyName = ref('');
+  const remotePort = ref(0);
+  const address = ref('');
+  const getTableData = async () => {
+    const res = await frpGetInfoApi('1000000061664FF');
+    // const res = await frpGetInfoApi(props.deviceDetail.sn);
+    enableRemote.value = res.enableRemote;
+    proxyName.value = res.proxyName;
+    remotePort.value = res.remotePort;
+    address.value = res.address;
+    if (res.enableRemote == 1) {
+      checked.value = true;
+      disabled.value = false;
+    } else {
+      checked.value = false;
+      disabled.value = true;
+    }
+    tableData.value.push({
+      enableRemote: res.enableRemote,
+      proxyName: res.proxyName,
+      status: res.status,
+    });
+  };
+  const handleFrpRemote = async () => {
+    if (enableRemote.value == 1) {
+      window.open(`${address.value}`);
+    }
+  };
+  nextTick(() => {
+    getTableData();
+  });
+  const handleChange = async (e) => {
+    if (e) {
+      disabled.value = false;
+      enableRemote.value = 1;
+      const res = await frpPutInfoApi(proxyName.value, enableRemote.value);
+      if (res.enableRemote == 1) {
+        createMessage.success('开启成功');
+        getTableData();
+      }
+    } else {
+      disabled.value = true;
+      enableRemote.value = 0;
+      const res = await frpPutInfoApi(proxyName.value, enableRemote.value);
+      if (res.enableRemote == 0) {
+        createMessage.success('关闭成功');
+        getTableData();
+      }
+    }
+  };
+</script>
 <style lang="less" scoped></style>