Merge branch 'main' into ft-dev

@@ -2,10 +2,17 @@
   <div class="md:flex justify-between">
     <template v-for="(item, index) in growCardList" :key="item.title">
       <div
-        class="growCardItem md:w-1/3 w-full !md:mt-0 !mt-4"
+        class="growCardItem md:w-1/3 w-full !md:mt-0 !mt-4 bg-white"
         :class="index === 0 ? '!md:ml-0' : '!md:ml-4'"
       >
-        <div class="growCardItem-top">
+        <div
+          class="
+            growCardItem-top
+            border border-solid border-t-0 border-r-0 border-l-0 border-b-1
+            dark:border-#ccc
+            light:border-#F2F2F5
+          "
+        >
           <img :src="item.imgUrl" style="width: 90px; height: 90px" />
           <div class="growCardItem-right">
             <div class="flex justify-between ml-3">
@@ -50,12 +57,10 @@
 <style scoped lang="less">
   .growCardItem {
     height: 179px;
-    background-color: #fff;
     color: #666;
     .growCardItem-top {
       display: flex;
       margin: 20px;
-      border-bottom: 1px solid #f2f2f5;
       padding-bottom: 10px;
       .growCardItem-right {
         width: 300px;

@@ -102,3 +102,152 @@ export const step1Schemas: FormSchema[] = [
     show: false,
   },
 ];
+
+// 第二步的表单
+export const step2Schemas: FormSchema[] = [
+  {
+    label: '',
+    component: 'Checkbox',
+    field: 'addAgree',
+    slot: 'addAgree',
+  },
+  {
+    label: '凭据类型',
+    component: 'Select',
+    field: 'creaentialsType',
+    componentProps({ formActionType }) {
+      const { updateSchema, setFieldsValue } = formActionType;
+      return {
+        options: [
+          {
+            value: 'Access token',
+            label: 'Access token',
+          },
+
+          {
+            value: 'X.509',
+            label: 'X.509',
+          },
+          {
+            value: 'MQTT Basic',
+            label: 'MQTT Basic',
+          },
+        ],
+        onChange(value) {
+          setFieldsValue({
+            publicKey: '',
+            token: '',
+            clientId: '',
+            username: '',
+            password: '',
+          });
+          if (value === 'Access token') {
+            updateSchema([
+              {
+                field: 'token',
+                ifShow: true,
+              },
+              {
+                field: 'clientId',
+                ifShow: false,
+              },
+              {
+                field: 'username',
+                ifShow: false,
+              },
+              {
+                field: 'password',
+                ifShow: false,
+              },
+              {
+                field: 'publicKey',
+                ifShow: false,
+              },
+            ]);
+          } else if (value === 'X.509') {
+            updateSchema([
+              {
+                field: 'publicKey',
+                ifShow: true,
+              },
+              {
+                field: 'token',
+                ifShow: false,
+              },
+              {
+                field: 'clientId',
+                ifShow: false,
+              },
+              {
+                field: 'username',
+                ifShow: false,
+              },
+              {
+                field: 'password',
+                ifShow: false,
+              },
+            ]);
+          } else {
+            updateSchema([
+              {
+                field: 'clientId',
+                ifShow: true,
+              },
+              {
+                field: 'username',
+                ifShow: true,
+              },
+              {
+                field: 'password',
+                ifShow: true,
+              },
+              {
+                field: 'publicKey',
+                ifShow: false,
+              },
+              {
+                field: 'token',
+                ifShow: false,
+              },
+            ]);
+          }
+        },
+      };
+    },
+    ifShow: ({ values }) => values.addAgree,
+  },
+  {
+    label: '访问令牌',
+    component: 'Input',
+    field: 'token',
+    required: true,
+    ifShow: false,
+  },
+  {
+    label: 'RSA公钥',
+    component: 'Input',
+    field: 'publicKey',
+    required: true,
+    ifShow: false,
+  },
+  {
+    label: '客户端ID',
+    component: 'Input',
+    field: 'clientId',
+    required: true,
+    ifShow: false,
+  },
+  {
+    label: '用户名',
+    component: 'Input',
+    field: 'username',
+    required: true,
+    ifShow: false,
+  },
+  {
+    label: '密码',
+    component: 'Input',
+    field: 'password',
+    ifShow: false,
+  },
+];

@@ -14,7 +14,7 @@
       <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'"
         ><RealTimeData
       /></TabPane>
-      <TabPane key="3" tab="告警"><Alarm :id="deviceId" /></TabPane>
+      <TabPane key="3" tab="告警"><Alarm :id="tbDeviceId" /></TabPane>
       <TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'"
         ><ChildDevice
       /></TabPane>
@@ -49,14 +49,13 @@
       const size = ref('small');
       const deviceDetailRef = ref();
       const deviceDetail: any = ref({});
-      const deviceId = ref('');
+      const tbDeviceId = ref('');
       // 详情回显
       const [register] = useDrawerInner(async (data) => {
-        const { id } = data;
+        const { id, tbDeviceId: tbId } = data;
         const res = await getDeviceDetail(id);
         deviceDetail.value = res;
-        deviceId.value = id;
-        console.log(deviceId.value);
+        tbDeviceId.value = tbId;
         const { latitude, longitude, address } = res.deviceInfo;
         if (latitude) {
           deviceDetailRef.value.initMap(longitude, latitude, address);
@@ -73,7 +72,7 @@
         closeDrawer,
         deviceDetail,
         deviceDetailRef,
-        deviceId,
+        tbDeviceId,
       };
     },
   });

@@ -17,9 +17,9 @@
     <div class="mt-5">
       <DeviceStep1
         @next="handleStep1Next"
-        v-show="current === 0"
         ref="DeviceStep1Ref"
         :deviceInfo="deviceInfo"
+        v-show="current === 0"
       />
       <DeviceStep2
         ref="DeviceStep2Ref"
@@ -56,7 +56,7 @@
       const DeviceStep1Ref = ref<InstanceType<typeof DeviceStep1>>();
       const DeviceStep2Ref = ref<InstanceType<typeof DeviceStep2>>();
       const { createMessage } = useMessage();
-      const current = ref(0);
+      const current = ref(1);
       const isUpdate = ref<Boolean>();
       const deviceInfo = ref({});
       const getTitle = computed(() => (!unref(isUpdate) ? '新增设备' : '编辑设备'));
@@ -98,7 +98,7 @@
         }
         current.value = 0;
         DeviceStep1Ref?.value?.resetFields();
-        DeviceStep2Ref?.value?.resetFields();
+        DeviceStep2Ref?.value?.resetFieldsValueAndStatus();
       }
       // 提交
       async function handleOk() {
@@ -108,7 +108,7 @@
           if (!valid) return;
           stepState.value = DeviceStep1Ref?.value?.parentGetFieldsValue();
         } else {
-          if (!DeviceStep2Ref?.value?.creaentialsPassword.isCreaentials) {
+          if (DeviceStep2Ref?.value?.getFieldsValue().creaentialsType) {
             const valid = await DeviceStep2Ref?.value?.validate();
             // 第二页验证通过情况
             if (!valid) return;

 <template>
   <div class="step2">
-    <div
-      ><input type="checkbox" v-model="creaentialsPassword.isCreaentials" @click="checked" />
-      添加凭证
-    </div>
-    <a-form
-      ref="formRef"
-      :rules="rules"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
-      v-show="creaentialsPassword.isCreaentials"
-      :model="creaentialsPassword"
-      labelAlign="left"
-    >
-      <a-form-item label="凭据类型" name="creaentialsType">
-        <a-select
-          v-model:value="creaentialsPassword.creaentialsType"
-          style="width: 200px"
-          @change="handleChange"
-          placeholder="请选择凭据类型"
-          :options="options"
-        />
-      </a-form-item>
-      <div v-if="creaentialsPassword.creaentialsType === 'Access token'">
-        <a-form-item label="访问令牌" name="token">
-          <a-input type="password" style="width: 200px" v-model:value="creaentialsPassword.token" />
-        </a-form-item>
-      </div>
-      <div v-else-if="creaentialsPassword.creaentialsType === 'X.509'">
-        <a-form-item label="RSA公钥" name="publicKey">
-          <a-input
-            type="password"
-            style="width: 200px"
-            v-model:value="creaentialsPassword.publicKey"
-          />
-        </a-form-item>
-      </div>
-      <div v-else>
-        <a-form-item label="客户端ID" name="clientId">
-          <a-input type="input" style="width: 200px" v-model:value="creaentialsPassword.clientId" />
-        </a-form-item>
-        <a-form-item label="用户名" name="username">
-          <a-input type="input" style="width: 200px" v-model:value="creaentialsPassword.username" />
-        </a-form-item>
-        <a-form-item label="密码" name="password">
-          <a-input
-            type="password"
-            style="width: 200px"
-            v-model:value="creaentialsPassword.password"
-          />
-        </a-form-item>
-      </div>
-    </a-form>
-    <div class="flex justify-start">
-      <a-button class="mr-5" @click="prevStep">上一步</a-button>
+    <BasicForm @register="registerForm">
+      <template #addAgree="{ model, field }">
+        <Checkbox v-model:checked="model[field]" @change="checkedChange" />添加协议
+      </template>
+    </BasicForm>
+    <div>
+      <a-button @click="prevStep">上一步</a-button>
     </div>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref, watch } from 'vue';
+  import { defineComponent } from 'vue';
 
-  import { Input, Form, Select, Button } from 'ant-design-vue';
+  import { Checkbox } from 'ant-design-vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { step2Schemas } from '../../config/data';
   export default defineComponent({
     components: {
-      [Form.name]: Form,
-      [Form.Item.name]: Form.Item,
-      [Input.name]: Input,
-      [Select.name]: Select,
-      [Button.name]: Button,
+      BasicForm,
+      Checkbox,
     },
 
     emits: ['prev', 'next'],
     setup(_, { emit }) {
-      const formRef = ref();
-      const creaentialsPassword = reactive({
-        isCreaentials: false,
-        creaentialsType: 'Access token',
-        token: '',
-        publicKey: '',
-        clientId: '',
-        username: '',
-        password: '',
-      });
-      const rules = {
-        token: [{ required: true, message: '请输入访问令牌', trigger: 'blur' }],
-        publicKey: [{ required: true, message: '请输入RSA公钥', trigger: 'blur' }],
-        clientId: [{ required: true, message: '请输入客户端ID', trigger: 'blur' }],
-        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-      };
-      const options = ref([
-        {
-          value: 'Access token',
-          label: 'Access token',
-        },
-
-        {
-          value: 'X.509',
-          label: 'X.509',
-        },
-        {
-          value: 'MQTT Basic',
-          label: 'MQTT Basic',
-        },
-      ]);
-      // 切换是否添加凭证
-      const checked = () => {
-        creaentialsPassword.isCreaentials = !creaentialsPassword.isCreaentials;
-        formRef.value.resetFields();
-        creaentialsPassword.creaentialsType = 'Access token';
-      };
       const prevStep = () => {
         emit('prev');
       };
-      watch(creaentialsPassword, (newValue) => {
-        emit('next', newValue);
+      const [
+        registerForm,
+        { getFieldsValue, updateSchema, validate, resetFields, setFieldsValue },
+      ] = useForm({
+        labelWidth: 100,
+        schemas: step2Schemas,
+        actionColOptions: {
+          span: 14,
+        },
+        labelAlign: 'left',
+        showSubmitButton: false,
+        showResetButton: false,
+        wrapperCol: {
+          span: 12,
+        },
       });
-
-      // 切换凭证类型时，重置字段
-      const handleChange = (value: string) => {
-        if (value === 'Access token') {
-          resetCreantialsType();
-        } else if (value === 'X.509') {
-          resetCreantialsType();
-        } else {
-          resetCreantialsType();
+      const checkedChange = async (e) => {
+        if (!e.target.checked) {
+          await updateSchema([
+            {
+              field: 'token',
+              ifShow: false,
+            },
+            {
+              field: 'clientId',
+              ifShow: false,
+            },
+            {
+              field: 'username',
+              ifShow: false,
+            },
+            {
+              field: 'password',
+              ifShow: false,
+            },
+            {
+              field: 'publicKey',
+              ifShow: false,
+            },
+          ]);
         }
       };
-      // 切换凭证类型时，重置字段
-      function resetCreantialsType() {
-        creaentialsPassword.token = '';
-        creaentialsPassword.publicKey = '';
-        creaentialsPassword.clientId = '';
-        creaentialsPassword.username = '';
-        creaentialsPassword.password = '';
+      function resetFieldsValueAndStatus() {
+        resetFields();
+        setFieldsValue({
+          addAgree: false,
+        });
+        updateSchema([
+          {
+            field: 'publicKey',
+            ifShow: false,
+          },
+          {
+            field: 'token',
+            ifShow: false,
+          },
+          {
+            field: 'clientId',
+            ifShow: false,
+          },
+          {
+            field: 'username',
+            ifShow: false,
+          },
+          {
+            field: 'password',
+            ifShow: false,
+          },
+        ]);
       }
 
-      // 重置所有字段
-      function resetFields() {
-        creaentialsPassword.isCreaentials = false;
-        creaentialsPassword.creaentialsType = 'Access token';
-        creaentialsPassword.token = '';
-        creaentialsPassword.publicKey = '';
-        creaentialsPassword.clientId = '';
-        creaentialsPassword.username = '';
-        creaentialsPassword.password = '';
-        formRef.value.resetFields();
-      }
-
-      // 表单验证
-      function validate() {
-        if (creaentialsPassword.isCreaentials) {
-          return formRef.value.validate();
-        }
-        return true;
-      }
       return {
-        options,
-        formRef,
-        creaentialsPassword,
-        handleChange,
         prevStep,
-        checked,
-        labelCol: { style: { width: '150px' } },
-        wrapperCol: { span: 18 },
-        resetFields,
+        registerForm,
+        checkedChange,
+        getFieldsValue,
         validate,
-        rules,
+        resetFieldsValueAndStatus,
       };
     },
   });

@@ -29,11 +29,8 @@
         showTableSetting: true,
         bordered: true,
         showIndexColumn: false,
-        beforeFetch: getDeviceId,
+        beforeFetch: (data) => Reflect.set(data, 'deviceId', props.id),
       });
-      function getDeviceId(data) {
-        Reflect.set(data, 'deviceId', props.id);
-      }
 
       return {
         registerTable,

@@ -2,9 +2,12 @@
   <BasicTable @register="registerTable" />
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, reactive, onMounted, onUnmounted } from 'vue';
   import { BasicTable, useTable } from '/@/components/Table';
   import { realTimeDataColumns, realTimeDataSearchSchemas } from '../../config/detail.config';
+  import { useWebSocket } from '@vueuse/core';
+  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
+  import { getAuthCache } from '/@/utils/auth';
   export default defineComponent({
     name: 'DeviceManagement',
     components: {
@@ -22,6 +25,45 @@
         bordered: true,
         showIndexColumn: false,
       });
+      const token = getAuthCache(JWT_TOKEN_KEY);
+
+      const state = reactive({
+        server: `ws://192.168.10.139:8080/api/ws/plugins/telemetry?token=${token}`,
+        sendValue: '',
+        recordList: [] as { id: number; time: number; res: string }[],
+      });
+      const { status, data, send, close, open } = useWebSocket(state.server, {
+        autoReconnect: false,
+        heartbeat: true,
+      });
+      onMounted(() => {
+        open();
+        send(
+          JSON.stringify({
+            attrSubCmds: [],
+            tsSubCmds: [
+              {
+                entityType: 'DEVICE',
+                entityId: '3199a500-6302-11ec-ba36-417bcc842c0a',
+                scope: 'LATEST_TELEMETRY',
+                cmdId: 1,
+              },
+            ],
+            historyCmds: [],
+            entityDataCmds: [],
+            entityDataUnsubscribeCmds: [],
+            alarmDataCmds: [],
+            alarmDataUnsubscribeCmds: [],
+            entityCountCmds: [],
+            entityCountUnsubscribeCmds: [],
+          })
+        );
+
+        console.log(JSON.parse(data.value));
+      });
+      onUnmounted(() => {
+        close();
+      });
 
       return {
         registerTable,

@@ -148,9 +148,10 @@
       }
 
       function handleDetail(record: Recordable) {
-        const { id } = record;
+        const { id, tbDeviceId } = record;
         openDrawer(true, {
           id,
+          tbDeviceId,
         });
       }
 

@@ -6,7 +6,7 @@
       </template>
       <template #config="{ record }">
         <a-button type="link" class="ml-2" @click="goConfig">
-          {{ record.messageConfig.configName }}
+          {{ record.messageConfig?.configName }}
         </a-button>
       </template>
       <template #action="{ record }">

@@ -45,12 +45,33 @@
             ...data.record,
           });
           organizationId = Reflect.get(data.record, 'id');
+          console.log(organizationId);
+          let treeData: any = await getOrganizationList();
+
+          // 过滤当前选中的组织，
+          function filterTransFun(treeData: any[]) {
+            treeData.forEach((item, index, arr) => {
+              if (item.id === organizationId) {
+                arr.splice(index, 1);
+              }
+              if (item.children.length) {
+                filterTransFun(item.children);
+              }
+            });
+          }
+          filterTransFun(treeData);
+          await updateSchema({
+            field: 'parentId',
+            componentProps: { treeData },
+          });
+        } else {
+          let treeData = await getOrganizationList();
+          console.log(treeData);
+          await updateSchema({
+            field: 'parentId',
+            componentProps: { treeData },
+          });
         }
-        let treeData = await getOrganizationList();
-        await updateSchema({
-          field: 'parentId',
-          componentProps: { treeData },
-        });
       });
 
       //得到页面标题