feat: device detail add model of matter tab pane

 {
-  "i18n-ally.localesPaths": ["src/locales", "src/locales/lang", "public/resource/tinymce/langs"]
+  "i18n-ally.localesPaths": [
+    "src/locales",
+    "src/locales/lang",
+    "public/resource/tinymce/langs"
+  ],
+  "cSpell.words": [
+    "unref",
+    "VITE"
+  ]
 }

@@ -16,12 +16,15 @@
           @open-gateway-device="handleOpenGatewayDevice"
         />
       </TabPane>
-      <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
+      <TabPane v-if="deviceDetail?.deviceType !== 'GATEWAY'" key="modelOfMatter" tab="物模型">
+        <ModelOfMatter :deviceDetail="deviceDetail" />
+      </TabPane>
+      <!-- <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
         <RealTimeData :deviceDetail="deviceDetail" />
       </TabPane>
       <TabPane key="7" tab="历史数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
         <HistoryData :deviceDetail="deviceDetail" />
-      </TabPane>
+      </TabPane> -->
       <TabPane key="5" tab="命令下发" v-if="deviceDetail?.deviceType !== 'SENSOR'">
         <CommandIssuance :deviceDetail="deviceDetail" />
       </TabPane>
@@ -50,13 +53,14 @@
 
   import { Tabs } from 'ant-design-vue';
   import Detail from '../tabs/Detail.vue';
-  import RealTimeData from '../tabs/RealTimeData.vue';
+  // import RealTimeData from '../tabs/RealTimeData.vue';
   import Alarm from '../tabs/Alarm.vue';
   import ChildDevice from '../tabs/ChildDevice.vue';
   import TBoxDetail from '../tabs/TBoxDetail.vue';
   import CommandIssuance from '../tabs/CommandIssuance.vue';
   import { getDeviceDetail } from '/@/api/device/deviceManager';
-  import HistoryData from '../tabs/HistoryData.vue';
+  // import HistoryData from '../tabs/HistoryData.vue';
+  import ModelOfMatter from '../tabs/ModelOfMatter.vue';
   export default defineComponent({
     name: 'DeviceModal',
     components: {
@@ -64,12 +68,13 @@
       Tabs,
       TabPane: Tabs.TabPane,
       Detail,
-      RealTimeData,
+      // RealTimeData,
       Alarm,
       ChildDevice,
       CommandIssuance,
       TBoxDetail,
-      HistoryData,
+      // HistoryData,
+      ModelOfMatter,
     },
     emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
     setup(_props, { emit }) {

@@ -23,6 +23,7 @@
 
   const props = defineProps<{
     deviceDetail: DeviceDetail;
+    attr?: string;
   }>();
 
   const chartRef = ref();
@@ -119,6 +120,10 @@
     const { tbDeviceId } = props.deviceDetail || {};
     try {
       deviceAttrs.value = (await getDeviceDataKeys(tbDeviceId)) || [];
+
+      if (props.attr) {
+        method.setFieldsValue({ keys: props.attr });
+      }
     } catch (error) {}
   };
 

+<script lang="ts" setup>
+  import { nextTick, reactive, ref, unref } from 'vue';
+  import { List, Button, Tooltip, Card } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons-vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { realTimeDataColumns } from '../../config/detail.config';
+  import { useWebSocket } from '@vueuse/core';
+  import { getAuthCache } from '/@/utils/auth';
+  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import HistoryData from './HistoryData.vue';
+  import { BasicModal, useModal } from '/@/components/Modal';
+
+  interface ReceiveMessage {
+    data: {
+      [key: string]: [number, string][];
+    };
+  }
+
+  interface DataSource {
+    key?: string;
+    value?: string;
+    time?: number;
+  }
+
+  const props = defineProps<{
+    deviceDetail: Record<'tbDeviceId', string>;
+  }>();
+
+  const grid = {
+    gutter: 8,
+    column: 3,
+  };
+
+  const token = getAuthCache(JWT_TOKEN_KEY);
+
+  const socketInfo = reactive({
+    origin: `${import.meta.env.VITE_WEB_SOCKET}${token}`,
+    attr: undefined as string | undefined,
+    originData: [] as DataSource[],
+    dataSource: [] as DataSource[],
+    sendValue: {
+      tsSubCmds: [
+        {
+          entityType: 'DEVICE',
+          entityId: props.deviceDetail!.tbDeviceId || 'd2526c70-60a9-11ed-ba9c-6b98bfcc8255',
+          scope: 'LATEST_TELEMETRY',
+          cmdId: 1,
+        },
+      ],
+    },
+  });
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: [
+      {
+        field: 'value',
+        label: '键/值',
+        component: 'Input',
+        colProps: { span: 8 },
+        componentProps: {
+          placeholder: '请输入键/值',
+        },
+      },
+    ],
+    labelWidth: 100,
+    compact: true,
+    showAdvancedButton: true,
+    submitFunc: async () => {
+      try {
+        const { value } = getFieldsValue() || {};
+        if (!value) setTableData(socketInfo.originData);
+        const data = unref(socketInfo.originData).filter(
+          (item) => item.key?.includes(value) || item.value?.includes(value)
+        );
+        await nextTick();
+        socketInfo.dataSource = data;
+        setTableData(data);
+      } catch (error) {}
+    },
+    resetFunc: async () => {
+      try {
+        socketInfo.dataSource = socketInfo.originData;
+        setTableData(socketInfo.originData);
+      } catch (error) {}
+    },
+  });
+
+  const [registerTable, { setTableData }] = useTable({
+    columns: realTimeDataColumns,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  enum Mode {
+    TABLE = 'table',
+    CARD = 'card',
+  }
+
+  const mode = ref<Mode>(Mode.CARD);
+
+  const switchMode = async (value: Mode) => {
+    mode.value = value;
+    await nextTick();
+    setTableData(socketInfo.dataSource);
+  };
+
+  const { createMessage } = useMessage();
+
+  const { send, close, data } = useWebSocket(socketInfo.origin, {
+    onConnected() {
+      send(JSON.stringify(socketInfo.sendValue));
+    },
+    async onMessage() {
+      try {
+        const value = JSON.parse(unref(data)) as ReceiveMessage;
+        if (value) {
+          const { data } = value;
+          const keys = Object.keys(data);
+          socketInfo.originData = socketInfo.dataSource = keys.map((key) => {
+            const [time, value] = data[key].at(0) || [];
+            return { key, value, time };
+          });
+
+          await nextTick();
+          setTableData(socketInfo.dataSource);
+        }
+      } catch (error) {}
+    },
+    onDisconnected() {
+      console.log('断开连接了');
+      close();
+    },
+    onError() {
+      createMessage.error('webSocket连接超时,请联系管理员');
+    },
+  });
+
+  const handleShowDetail = (record: DataSource) => {
+    const { key } = record;
+    socketInfo.attr = key;
+    openModal(true);
+  };
+</script>
+
+<template>
+  <PageWrapper
+    dense
+    content-class="flex flex-col bg-transparent p-4"
+    :content-style="{ backgroundColor: '#F0F2F5' }"
+  >
+    <section class="flex flex-col justify-between w-full bg-light-50 pt-3 mb-4">
+      <div class="flex-auto">
+        <BasicForm @register="registerForm" />
+      </div>
+    </section>
+    <section class="bg-light-50">
+      <div v-show="mode === Mode.CARD" class="flex h-70px items-center justify-end p-2">
+        <Tooltip title="卡片模式">
+          <Button
+            :class="[mode === Mode.CARD && '!bg-blue-500 svg:text-light-50']"
+            class="!p-2 !children:flex flex justify-center items-center border-r-0"
+            @click="switchMode(Mode.CARD)"
+          >
+            <AppstoreOutlined />
+          </Button>
+        </Tooltip>
+
+        <Tooltip title="列表模式">
+          <Button
+            class="!p-2 !children:flex flex justify-center items-center"
+            @click="switchMode(Mode.TABLE)"
+          >
+            <BarsOutlined />
+          </Button>
+        </Tooltip>
+      </div>
+      <List
+        v-if="mode === Mode.CARD"
+        class="list-mode !px-2"
+        :data-source="socketInfo.dataSource"
+        :grid="grid"
+      >
+        <template #renderItem="{ item }">
+          <List.Item>
+            <Card class="shadow-md">
+              <template #title>
+                <span class="text-base font-normal">{{ item.key }}</span>
+              </template>
+              <template #extra>
+                <Button type="link" class="!p-0" @click="handleShowDetail(item)">历史数据</Button>
+              </template>
+              <section>
+                <div class="flex font-bold text-lg mb-4">
+                  <div>{{ item.value }}</div>
+                </div>
+                <div class="text-dark-800 text-xs">{{ formatToDateTime(item.time) }}</div>
+              </section>
+            </Card>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+
+    <BasicTable v-if="mode === Mode.TABLE" @register="registerTable">
+      <template #toolbar>
+        <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
+          <Tooltip title="卡片模式">
+            <Button
+              class="!p-2 !children:flex flex justify-center items-center border-r-0"
+              @click="switchMode(Mode.CARD)"
+            >
+              <AppstoreOutlined />
+            </Button>
+          </Tooltip>
+
+          <Tooltip title="列表模式">
+            <Button
+              :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
+              class="!p-2 !children:flex flex justify-center items-center"
+              @click="switchMode(Mode.TABLE)"
+            >
+              <BarsOutlined />
+            </Button>
+          </Tooltip>
+        </div>
+      </template>
+    </BasicTable>
+    <BasicModal @register="registerModal" width="50%" destroy-on-close>
+      <HistoryData :deviceDetail="props.deviceDetail" :attr="socketInfo.attr" />
+    </BasicModal>
+  </PageWrapper>
+</template>
+
+<style scoped lang="less">
+  .list-mode:deep(.ant-card-head) {
+    border-bottom: 0;
+  }
+
+  .list-mode:deep(.ant-card-body) {
+    padding-top: 0;
+  }
+</style>