feat:设备凭证管理，wip:地图历史数据页面编写

@@ -21,9 +21,7 @@
           theme = htmlRoot = null;
         }
       })();
-      const historyClick = () => {
-        console.log(1);
-      };
+    
     </script>
     <div id="app">
       <style>
@@ -163,6 +161,7 @@
         </div>
       </div>
     </div>
+  
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

@@ -19,6 +19,8 @@ enum DeviceManagerApi {
   DEVICE_PROFILE_URL_ME = '/deviceProfile/me/list',
 
   DEVICE_ALARM_URL = '/alarm',
+
+  DEVICE_CREDENTIALS = '/device/credentials',
 }
 
 export const devicePage = (params: DeviceQueryParam) => {
@@ -108,3 +110,29 @@ export const clearOrAckAlarm = (id: string, flag: boolean) => {
     }
   );
 };
+
+// 获取设备凭证详情
+export const getDeviceToken = (id: string) => {
+  return defHttp.get(
+    {
+      url: `${DeviceManagerApi.DEVICE_URL}/${id}/credentials`,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+// 保存设备凭证详情
+
+export const saveDeviceToken = (data) => {
+  return defHttp.post(
+    {
+      url: DeviceManagerApi.DEVICE_CREDENTIALS,
+      data,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};

@@ -35,10 +35,12 @@ export const alarmSearchSchemas: FormSchema[] = [
     colProps: { span: 6 },
   },
   {
-    field: 'time',
+    field: 'endTime',
     label: '告警时间范围',
-    component: 'RangePicker',
-    componentProps: {},
+    component: 'DatePicker',
+    componentProps: {
+      valueFormat: 'x',
+    },
     colProps: { span: 6 },
   },
 ];

@@ -38,7 +38,6 @@
         formConfig: {
           labelWidth: 120,
           schemas: alarmSearchSchemas,
-          fieldMapToTime: [['time', ['startTime', 'endTime'], 'x']],
         },
         useSearchForm: true,
         bordered: true,

@@ -3,6 +3,15 @@ import type { FormSchema } from '/@/components/Table';
 import { getOrganizationList } from '/@/api/system/system';
 import { copyTransFun } from '/@/utils/fnUtils';
 import { getDeviceProfile } from '/@/api/alarm/position';
+
+export enum AggregateDataEnum {
+  MIN = 'MIN',
+  MAX = 'MAX',
+  AVG = 'AVG',
+  SUM = 'SUM',
+  COUNT = 'COUNT',
+  NONE = 'NONE',
+}
 export const formSchema: FormSchema[] = [
   {
     field: 'organizationId',
@@ -82,3 +91,114 @@ export const columns: BasicColumn[] = [
     slots: { customRender: 'deviceState' },
   },
 ];
+
+export const schemas: FormSchema[] = [
+  {
+    field: 'name',
+    label: '最后数据',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '最近1小时',
+          value: '1',
+        },
+        {
+          label: '最近2小时',
+          value: '2',
+        },
+        {
+          label: '最近5小时',
+          value: '5',
+        },
+        {
+          label: '最近12小时',
+          value: '12',
+        },
+        {
+          label: '最近1天',
+          value: '1天',
+        },
+        {
+          label: '最近7天',
+          value: '7天',
+        },
+        {
+          label: '最近30天',
+          value: '30天',
+        },
+      ],
+    },
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: 'name',
+    label: '分组间隔',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '15秒',
+          value: '15',
+        },
+        {
+          label: '30秒',
+          value: '30',
+        },
+        {
+          label: '1分钟',
+          value: '60',
+        },
+        {
+          label: '2分钟',
+          value: '120',
+        },
+        {
+          label: '5分钟',
+          value: '360',
+        },
+        {
+          label: '10分钟',
+          value: '600',
+        },
+        {
+          label: '15分钟',
+          value: '900',
+        },
+      ],
+    },
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: 'name',
+    label: '数据聚合功能',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '最小值',
+          value: AggregateDataEnum.MIN,
+        },
+        {
+          label: '最大值',
+          value: AggregateDataEnum.MAX,
+        },
+        {
+          label: '平均值',
+          value: AggregateDataEnum.AVG,
+        },
+        {
+          label: '求和',
+          value: AggregateDataEnum.SUM,
+        },
+      ],
+    },
+    colProps: {
+      span: 6,
+    },
+  },
+];

@@ -22,9 +22,13 @@
                 : '离线'
             }}
           </Tag>
-        </template></BasicTable
-      >
+        </template>
+      </BasicTable>
     </div>
+    <a-button type="primary" @click="handleClick">打开弹窗</a-button>
+    <BasicModal @register="registerModal" title="历史数据" width="70%">
+      <BasicForm @register="registerForm" />
+    </BasicModal>
   </div>
 </template>
 <script lang="ts">
@@ -36,11 +40,16 @@
   import { Tag } from 'ant-design-vue';
   import { DeviceState } from '/@/api/device/model/deviceModel';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
+  import { useModal, BasicModal } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { schemas } from './config.data';
   export default defineComponent({
     name: 'BaiduMap',
     components: {
       BasicTable,
       Tag,
+      BasicModal,
+      BasicForm,
     },
     props: {
       width: {
@@ -151,11 +160,23 @@
         console.log(record);
       };
 
+      const [registerModal, { openModal }] = useModal();
+      const [registerForm] = useForm({
+        labelWidth: 120,
+        schemas,
+      });
+      const handleClick = () => {
+        openModal(true);
+      };
+
       return {
         wrapRef,
         registerTable,
         deviceRowClick,
         DeviceState,
+        handleClick,
+        registerModal,
+        registerForm,
       };
     },
   });

@@ -268,8 +268,185 @@ export const step2Schemas: FormSchema[] = [
   },
   {
     label: '密码',
+    component: 'InputPassword',
+    field: 'password',
+    ifShow: false,
+  },
+];
+
+// 管理凭证的表单配置项
+export const TokenSchemas: FormSchema[] = [
+  {
+    label: '凭据类型',
+    component: 'Select',
+    field: 'credentialType',
+    required: true,
+    componentProps({ formActionType }) {
+      const { updateSchema, setFieldsValue } = formActionType;
+      return {
+        options: [
+          {
+            value: credentialTypeEnum.ACCESS_TOKEN,
+            label: 'Access Token',
+          },
+          {
+            value: credentialTypeEnum.X_509,
+            label: 'X.509',
+          },
+          {
+            value: credentialTypeEnum.MQTT_BASIC,
+            label: 'MQTT Basic',
+          },
+        ],
+        onChange(value) {
+          setFieldsValue({
+            publicKey: '',
+            credentialsId: '',
+            clientId: '',
+            username: '',
+            password: '',
+          });
+          if (value === credentialTypeEnum.ACCESS_TOKEN) {
+            updateSchema([
+              {
+                field: 'credentialsId',
+                ifShow: true,
+              },
+              {
+                field: 'clientId',
+                ifShow: false,
+              },
+              {
+                field: 'username',
+                ifShow: false,
+              },
+              {
+                field: 'password',
+                ifShow: false,
+              },
+              {
+                field: 'publicKey',
+                ifShow: false,
+              },
+            ]);
+          } else if (value === credentialTypeEnum.X_509) {
+            updateSchema([
+              {
+                field: 'publicKey',
+                ifShow: true,
+              },
+              {
+                field: 'credentialsId',
+                ifShow: false,
+              },
+              {
+                field: 'clientId',
+                ifShow: false,
+              },
+              {
+                field: 'username',
+                ifShow: false,
+              },
+              {
+                field: 'password',
+                ifShow: false,
+              },
+            ]);
+          } else if (value === credentialTypeEnum.MQTT_BASIC) {
+            updateSchema([
+              {
+                field: 'clientId',
+                ifShow: true,
+              },
+              {
+                field: 'username',
+                ifShow: true,
+              },
+              {
+                field: 'password',
+                ifShow: true,
+              },
+              {
+                field: 'publicKey',
+                ifShow: false,
+              },
+              {
+                field: 'credentialsId',
+                ifShow: false,
+              },
+            ]);
+          } else {
+            updateSchema([
+              {
+                field: 'clientId',
+                ifShow: false,
+              },
+              {
+                field: 'username',
+                ifShow: false,
+              },
+              {
+                field: 'password',
+                ifShow: false,
+              },
+              {
+                field: 'publicKey',
+                ifShow: false,
+              },
+              {
+                field: 'credentialsId',
+                ifShow: false,
+              },
+            ]);
+          }
+        },
+      };
+    },
+  },
+  {
+    label: '访问令牌',
+    component: 'Input',
+    field: 'credentialsId',
+    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: 'InputPassword',
     field: 'password',
     ifShow: false,
   },
+  {
+    label: 'id',
+    component: 'Input',
+    field: 'id',
+    show: false,
+  },
+  {
+    label: 'tbDeviceId',
+    component: 'Input',
+    field: 'tbDeviceId',
+    show: false,
+  },
 ];

@@ -97,10 +97,12 @@ export const alarmSearchSchemas: FormSchema[] = [
     colProps: { span: 6 },
   },
   {
-    field: 'time',
+    field: 'endTime',
     label: '告警时间范围',
-    component: 'RangePicker',
-    componentProps: {},
+    component: 'DatePicker',
+    componentProps: {
+      valueFormat: 'x',
+    },
     colProps: { span: 6 },
   },
 ];

@@ -49,11 +49,12 @@
       const activeKey = ref('1');
       const size = ref('small');
       const deviceDetailRef = ref();
-      const deviceDetail: any = ref({});
-
+      const deviceDetail = ref<any>({});
+      const tbDeviceId = ref('');
       // 详情回显
       const [register] = useDrawerInner(async (data) => {
         const { id } = data;
+        // 设备详情
         const res = await getDeviceDetail(id);
         deviceDetail.value = res;
         const { latitude, longitude, address } = res.deviceInfo;
@@ -72,6 +73,7 @@
         closeDrawer,
         deviceDetail,
         deviceDetailRef,
+        tbDeviceId,
       };
     },
   });

@@ -108,7 +108,6 @@
         if (current.value === 0) {
           // 验证
           const valid = await unref(DeviceStep1Ref)?.parentValidate();
-          console.log('123');
           if (!valid) return;
           stepState.value = unref(DeviceStep1Ref)?.parentGetFieldsValue();
         } else {

 <template>
-  <BasicModal @register="registerModal" v-bind="$attrs" title="管理设备凭证">
-    <BasicForm @register="registerForm" @cancel="handleCancel" @ok="handleOk">
-      <template #addAgree="{ model, field }">
-        <Checkbox v-model:checked="model[field]" @change="checkedChange" />
-        <span class="ml-2">添加协议</span>
-      </template>
-    </BasicForm>
+  <BasicModal
+    @register="registerModal"
+    v-bind="$attrs"
+    title="管理设备凭证"
+    @cancel="handleCancel"
+    @ok="handleOk"
+    centered
+  >
+    <BasicForm @register="registerForm" />
   </BasicModal>
 </template>
 
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { useModalInner, BasicModal } from '/@/components/Modal';
-  import { Checkbox } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { step2Schemas } from '../../config/data';
-
+  import { TokenSchemas, credentialTypeEnum } from '../../config/data';
+  import { saveDeviceToken } from '/@/api/device/deviceManager';
+  import { useMessage } from '/@/hooks/web/useMessage';
   export default defineComponent({
     components: {
       BasicModal,
       BasicForm,
-      Checkbox,
     },
     emits: ['register'],
     setup() {
-      const [registerModal, { closeModal }] = useModalInner(async (data) => {
-        console.log(data);
-      });
       const [
         registerForm,
         { getFieldsValue, updateSchema, validate, resetFields, setFieldsValue },
       ] = useForm({
         labelWidth: 100,
-        schemas: step2Schemas,
-        actionColOptions: {
-          span: 14,
-        },
-        labelAlign: 'left',
+        schemas: TokenSchemas,
+        labelAlign: 'right',
         showSubmitButton: false,
         showResetButton: false,
         wrapperCol: {
           span: 12,
         },
       });
-      const checkedChange = async (e) => {
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        if (data.credentialsType === credentialTypeEnum.ACCESS_TOKEN) {
+          updateSchema([
+            {
+              field: 'credentialType',
+              ifShow: true,
+            },
+            {
+              field: 'credentialsId',
+              ifShow: true,
+            },
+          ]);
+          setFieldsValue({
+            credentialType: data.credentialsType,
+            credentialsId: data.credentialsId,
+            id: data.id.id,
+            tbDeviceId: data.deviceId.id,
+          });
+        } else if (data.credentialsType === credentialTypeEnum.X_509) {
+          updateSchema([
+            {
+              field: 'credentialType',
+              ifShow: true,
+            },
+            {
+              field: 'publicKey',
+              ifShow: true,
+            },
+          ]);
+          setFieldsValue({
+            credentialType: data.credentialsType,
+            publicKey: data.credentialsValue,
+            id: data.id.id,
+            tbDeviceId: data.deviceId.id,
+          });
+        } else {
+          updateSchema([
+            {
+              field: 'credentialType',
+              ifShow: true,
+            },
+            {
+              field: 'clientId',
+              ifShow: true,
+            },
+            {
+              field: 'username',
+              ifShow: true,
+            },
+            {
+              field: 'password',
+              ifShow: true,
+            },
+          ]);
+          const credentialsValue = JSON.parse(data.credentialsValue);
+          setFieldsValue({
+            credentialType: data.credentialsType,
+            clientId: credentialsValue?.clientId,
+            username: credentialsValue?.userName,
+            password: credentialsValue?.password,
+            id: data.id.id,
+            tbDeviceId: data.deviceId.id,
+          });
+        }
+      });
+      const checkedChange = (e) => {
         if (!e.target.checked) {
-          await updateSchema([
+          updateSchema([
             {
               field: 'credentialsId',
               ifShow: false,
@@ -66,17 +126,84 @@
               field: 'publicKey',
               ifShow: false,
             },
+            {
+              field: 'credentialType',
+              ifShow: false,
+            },
           ]);
           setFieldsValue({
             credentialType: '',
           });
+        } else {
+          updateSchema([
+            {
+              field: 'credentialType',
+              ifShow: true,
+            },
+          ]);
         }
       };
       const handleCancel = () => {
-        console.log('取消');
+        resetFields();
+
+        updateSchema([
+          {
+            field: 'publicKey',
+            ifShow: false,
+          },
+          {
+            field: 'credentialsId',
+            ifShow: false,
+          },
+          {
+            field: 'clientId',
+            ifShow: false,
+          },
+          {
+            field: 'username',
+            ifShow: false,
+          },
+          {
+            field: 'password',
+            ifShow: false,
+          },
+        ]);
       };
-      const handleOk = () => {
-        console.log('确定');
+      const handleOk = async () => {
+        // 验证
+        const valid = await validate();
+        if (!valid) return;
+        // 收集表单数据
+        const field = getFieldsValue();
+        const editData = {
+          id: {
+            id: field.id,
+          },
+          deviceId: {
+            id: field.tbDeviceId,
+            entityType: 'DEVICE',
+          },
+          credentialsType: field.credentialType,
+          credentialsId: field.credentialsId,
+          credentialsValue:
+            field.credentialType === credentialTypeEnum.MQTT_BASIC
+              ? JSON.stringify({
+                  userName: field.username,
+                  password: field.password,
+                  clientId: field.clientId,
+                })
+              : field.credentialType === credentialTypeEnum.X_509
+              ? field.publicKey
+              : null,
+        };
+
+        await saveDeviceToken(editData);
+        const { createMessage } = useMessage();
+        createMessage.success('修改设备凭证成功');
+
+        // 请求
+        closeModal();
+        handleCancel();
       };
       return {
         registerModal,

@@ -43,7 +43,6 @@
         formConfig: {
           labelWidth: 120,
           schemas: alarmSearchSchemas,
-          fieldMapToTime: [['time', ['startTime', 'endTime'], 'x']],
         },
         useSearchForm: true,
         bordered: true,

@@ -37,6 +37,7 @@
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { useModal } from '/@/components/Modal';
   import ManageDeviceTokenModal from '../modal/ManageDeviceTokenModal.vue';
+  import { getDeviceToken } from '/@/api/device/deviceManager';
   export default defineComponent({
     components: {
       Image,
@@ -90,16 +91,19 @@
           createMessage.success('复制成功~');
         }
       };
-      const copyDeviceToken = () => {
-        // TODO:此处需要动态修改
-        clipboardRef.value = props.deviceDetail.deviceToken;
-        if (unref(clipboardRef)) {
-          createMessage.success('复制成功~');
+      const copyDeviceToken = async () => {
+        const token = await getDeviceToken(props.deviceDetail.tbDeviceId);
+        if (token.credentialsType === 'ACCESS_TOKEN') {
+          clipboardRef.value = token.credentialsId;
+        } else {
+          clipboardRef.value = token.credentialsValue;
         }
+        createMessage.success('复制成功~');
       };
       const [registerModal, { openModal }] = useModal();
-      const manageDeviceToken = () => {
-        openModal(true);
+      const manageDeviceToken = async () => {
+        const token = await getDeviceToken(props.deviceDetail.tbDeviceId);
+        openModal(true, token);
       };
 
       return {

@@ -26,6 +26,7 @@
       const state = reactive({
         server: `ws://101.133.234.90:8080/api/ws/plugins/telemetry?token=${token}`,
         sendValue: JSON.stringify({
+          attrSubCmds: [],
           tsSubCmds: [
             {
               entityType: 'DEVICE',
@@ -34,6 +35,13 @@
               cmdId: 1,
             },
           ],
+          historyCmds: [],
+          entityDataCmds: [],
+          entityDataUnsubscribeCmds: [],
+          alarmDataCmds: [],
+          alarmDataUnsubscribeCmds: [],
+          entityCountCmds: [],
+          entityCountUnsubscribeCmds: [],
         }),
         recordList: Array<socketDataType>(),
       });
@@ -49,10 +57,12 @@
       const { send } = useWebSocket(state.server, {
         onConnected() {
           send(state.sendValue);
+          console.log('建立连接了');
+          console.log(props.deviceDetail.tbDeviceId);
         },
         onMessage(_, e) {
           const { data } = JSON.parse(e.data);
-          console.log('来新消息了');
+          console.log('来新消息了', 'data---', data);
           const newArray: any = [];
           for (const key in data) {
             const newData = data[key].flat(1);