Merge branch 'ww' into 'main'

fix: DEFECT-963 create data component fetch api happend error

See merge request huang/yun-teng-iot-front!424

@@ -44,6 +44,7 @@ enum DeviceUrl {
   GET_SLAVE_DEVICE = '/device/list/slave',
   GET_DEVICE_ATTRIBUTE = '/device/attributes',
   GET_DEVICE = '/device/list',
+  GET_DEVICE_RELATION = '/device/device/relation',
 }
 
 /**
@@ -224,3 +225,10 @@ export const sendCommandOneway = (params: SendCommandParams) => {
     { joinPrefix: false }
   );
 };
+
+export const getDeviceRelation = (params: { deviceId: string; isSlave: boolean }) => {
+  return defHttp.get<string>({
+    url: DeviceUrl.GET_DEVICE_RELATION,
+    params,
+  });
+};

 import { RadioRecord } from '../../../views/visual/board/detail/config/util';
+import { DeviceTypeEnum } from '../../device/model/deviceModel';
 
 export interface AddDataBoardParams {
   name: string;
@@ -79,12 +80,14 @@ export interface DataSource {
   componentInfo: ComponentInfo;
   deviceName: string;
   deviceProfileId: string;
+  tbDeviceId: string;
 
   // front usage
   uuid?: string;
   width?: number;
   height?: number;
   radio?: RadioRecord;
+  deviceType?: DeviceTypeEnum;
 }
 
 export interface DataComponentRecord {

@@ -163,7 +163,7 @@
 <template>
   <PageWrapper dense contentFullHeight contentClass="flex">
     <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-    <section class="flex-auto p-4 configuration-list">
+    <section class="flex-auto p-4 w-full configuration-list">
       <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
         <BasicForm @register="registerForm" />
       </div>
@@ -248,7 +248,10 @@
                   <EllipsisOutlined key="ellipsis" />
                 </Dropdown>
               </template>
-              <Card.Meta :title="item.name">
+              <Card.Meta>
+                <template #title>
+                  <span class="truncate">{{ item.name }}</span>
+                </template>
                 <template #description>
                   <div class="truncate h-11">
                     <div class="truncate">{{ item.organizationDTO.name }}</div>

@@ -13,12 +13,6 @@
         <Tabs.TabPane :key="FunctionType.SERVICE" tab="服务" />
         <!-- <Tabs.TabPane :key="FunctionType.EVENTS" tab="事件" /> -->
         <template #tabBarExtraContent>
-          <Button @click="handlePremitter">
-            <template #icon>
-              <SortAscendingOutlined />
-            </template>
-            格式化
-          </Button>
           <Button class="ml-2" @click="handleCopy">
             <template #icon>
               <CopyOutlined />
@@ -30,24 +24,21 @@
     </div>
     <div class="relative">
       <Spin :spinning="loading">
-        <div id="jsoneditor" ref="jsoneditorEl"></div>
-        <div class="absolute top-0 left-0 w-full h-full"></div>
+        <Textarea :disabled="true" :auto-size="{ minRows: 20, maxRows: 20 }" :value="jsonValue" />
       </Spin>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, unref, onMounted, nextTick } from 'vue';
-  import { CopyOutlined, SortAscendingOutlined } from '@ant-design/icons-vue';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { ref, unref, onMounted } from 'vue';
+  import { CopyOutlined } from '@ant-design/icons-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import jsoneditor from 'jsoneditor';
-  import 'jsoneditor/dist/jsoneditor.min.css';
-  import { Button, Typography, TypographyParagraph, Tabs, Spin } from 'ant-design-vue';
+  import { Button, Typography, TypographyParagraph, Tabs, Spin, Textarea } from 'ant-design-vue';
   import { FunctionType } from './config';
   import useCommon from '../hook/useCommon';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { getModelTsl } from '/@/api/device/modelOfMatter';
+  import { useClipboard } from '@vueuse/core';
 
   const props = defineProps<{
     record: DeviceRecord;
@@ -61,40 +52,17 @@
 
   const jsonValue = ref();
 
-  const jsonInstance = ref<{
-    set: (value?: Recordable) => void;
-    get: () => Recordable;
-  }>();
-
-  const jsoneditorEl = ref<HTMLDivElement>();
-
   const activeKey = ref(FunctionType.PROPERTIES);
 
-  onMounted(() => {
-    nextTick(() => {
-      let options = {
-        mode: 'code',
-        mainMenuBar: false,
-        statusBar: false,
-      };
-      let editor = new jsoneditor(jsoneditorEl.value, options);
-      editor.set(jsonValue.value);
-      jsonInstance.value = editor;
-    });
-  });
-
-  const { clipboardRef, copiedRef } = useCopyToClipboard();
-
+  const { copy, isSupported } = useClipboard({ source: jsonValue });
   const handleCopy = () => {
     try {
-      const valueRef = unref(jsonInstance)?.get();
-      const value = JSON.stringify(unref(valueRef));
-      if (!value) {
+      if (!jsonValue.value) {
         createMessage.warning('请输入要拷贝的内容！');
         return;
       }
-      clipboardRef.value = value;
-      if (unref(copiedRef)) {
+      if (unref(isSupported)) {
+        copy();
         createMessage.success('复制成功！');
       }
     } catch (e) {
@@ -103,25 +71,18 @@
   };
 
   const getFormData = () => {
-    const value = unref(jsonInstance)?.get();
-    if (!value) return;
-    return value;
+    return JSON.parse(jsonValue.value);
   };
 
   const resetFormData = () => {
-    unref(jsonInstance)?.set();
-  };
-
-  const handlePremitter = () => {
-    const value = unref(jsonInstance)?.get();
-    return unref(jsonInstance)?.set(value);
+    jsonValue.value = null;
   };
 
   const handleSwitchTsl = async (functionType: FunctionType) => {
     try {
       loading.value = true;
       const record = await getModelTsl({ deviceProfileId: props.record.id, functionType });
-      jsonInstance.value?.set(record);
+      jsonValue.value = JSON.stringify(record, null, 2);
     } catch (error) {
     } finally {
       loading.value = false;
@@ -138,10 +99,3 @@
     resetFormData,
   });
 </script>
-
-<style lang="less" scope>
-  #jsoneditor {
-    width: 100%;
-    height: 450px;
-  }
-</style>

@@ -41,9 +41,9 @@
     >
       <label class="switch">
         <input
-          :value="props.value?.value"
+          :value="!!props.value?.value"
           type="checkbox"
-          :checked="props.value?.value"
+          :checked="!!props.value?.value"
           @change="handleChange"
         />
         <div class="button">

 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 
 export interface ControlComponentLayout {
   [key: string]: any;
@@ -14,6 +15,8 @@ export interface ControlComponentValue {
   fontColor?: string;
   slaveDeviceId?: string;
   deviceProfileId?: string;
+  deviceType?: DeviceTypeEnum;
+  organizationId?: string;
 }
 
 export const ControlComponentDefaultConfig: ControlComponentValue = {
@@ -34,7 +37,9 @@ export const transformControlConfig = (
       attributeRename: dataSourceRecord.attributeRename,
       deviceProfileId: dataSourceRecord.deviceProfileId,
       deviceId: dataSourceRecord.deviceId,
+      deviceType: dataSourceRecord.deviceType,
       slaveDeviceId: dataSourceRecord.slaveDeviceId,
+      organizationId: dataSourceRecord.organizationId,
     } as ControlComponentValue,
   };
 };

 import { ControlComponentValue } from './control.config';
 import { getDeviceProfile } from '/@/api/alarm/position';
-import { sendCommandOneway } from '/@/api/dataBoard';
+import { getDeviceRelation, sendCommandOneway } from '/@/api/dataBoard';
+import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 import { getModelServices } from '/@/api/device/modelOfMatter';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { isString } from '/@/utils/is';
@@ -8,7 +9,9 @@ import { isString } from '/@/utils/is';
 const { createMessage } = useMessage();
 export function useSendCommand() {
   const sendCommand = async (record: ControlComponentValue, value: any) => {
-    const { deviceId, deviceProfileId, attribute } = record;
+    if (!record) return;
+    const { deviceProfileId, attribute, deviceType } = record;
+    let { deviceId } = record;
     if (!deviceId) return;
     try {
       const list = await getDeviceProfile();
@@ -23,6 +26,12 @@ export function useSendCommand() {
         const sendCommand = record?.functionJson.inputData?.at(0)?.serviceCommand || '';
         params = isString(sendCommand) ? sendCommand : JSON.stringify(sendCommand);
       }
+      if (deviceType === DeviceTypeEnum.SENSOR) {
+        deviceId = await getDeviceRelation({
+          deviceId,
+          isSlave: deviceType === DeviceTypeEnum.SENSOR,
+        });
+      }
       await sendCommandOneway({
         deviceId,
         value: {

@@ -27,15 +27,19 @@
       const { dataSource = [] } = params;
       const deviceRecord = dataSource?.at(0) || ({} as DataSource);
       if (!deviceRecord.organizationId) return;
-      const deviceList = await getAllDeviceByOrg(deviceRecord.organizationId);
+      const deviceList = await getAllDeviceByOrg(
+        deviceRecord.organizationId,
+        deviceRecord.deviceProfileId
+      );
       const options = deviceList
-        .filter((item) => item.id === deviceRecord.deviceId)
-        .map((item) => ({ ...item, label: item.name, value: item.id }));
+        .filter((item) => item.tbDeviceId === deviceRecord.deviceId)
+        .map((item) => ({ ...item, label: item.name, value: item.tbDeviceId }));
       const attKey = dataSource.map((item) => ({
         ...item,
         label: item.attribute,
         value: item.attribute,
       }));
+      console.log(options);
       updateSchema([
         {
           field: SchemaFiled.DEVICE_ID,

@@ -22,6 +22,7 @@
   import { formatToDateTime } from '/@/utils/dateUtil';
   import { isEqual } from 'lodash-es';
   import { useAsyncQueue } from '/@/views/device/localtion/useAsyncQueue';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
   // useVisualBoardContext();
   type TrackRecord = Record<'lng' | 'lat' | 'ts', number>;
@@ -199,7 +200,13 @@
     return (trackAni.value || {})._status;
   });
 
+  const { createMessage } = useMessage();
   const handlePlay = () => {
+    const { start, end } = timeRange;
+
+    if (!props.random && (!start || !end)) {
+      createMessage.warning('请先选择时间范围');
+    }
     if (unref(getTrackPlayStatus) === TrackAnimationStatus.DONE) unref(trackAni).start();
     else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PLAY) unref(trackAni).pause();
     else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PAUSE) unref(trackAni).continue();

@@ -289,7 +289,7 @@
     <Alert type="info" show-icon v-if="isMapComponent">
       <template #description>
         <div>
-          地图组件，需绑定两个数据源，且数据源为同一设备。第一数据源为经度，第二数据源为维度，否则地图组件不能正常显示。
+          地图组件，需绑定两个数据源，且数据源为同一设备。第一数据源为经度，第二数据源为纬度，否则地图组件不能正常显示。
         </div>
       </template>
     </Alert>

 <script lang="ts" setup>
   import { nextTick, Ref, ref, unref } from 'vue';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
-  import { Empty } from 'ant-design-vue';
+  import { Empty, Tooltip, Button } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { AggregateDataEnum } from '/@/views/device/localtion/config.data';
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
@@ -14,17 +14,29 @@
   import { useModalInner } from '/@/components/Modal';
   import { getAllDeviceByOrg } from '/@/api/dataBoard';
   import { useHistoryData } from '/@/views/device/list/hook/useHistoryData';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { LineChartOutlined, BarsOutlined } from '@ant-design/icons-vue';
+  import { formatToDateTime } from '/@/utils/dateUtil';
 
   type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
 
   defineEmits(['register']);
 
+  enum Mode {
+    TABLE = 'table',
+    CHART = 'chart',
+  }
+
+  const mode = ref<Mode>(Mode.CHART);
+
   const chartRef = ref();
 
   const loading = ref(false);
 
   const isNull = ref(false);
 
+  const historyData = ref<{ ts: number; value: string; name: string }[]>([]);
+
   const { deviceAttrs, getDeviceKeys, getSearchParams, setChartOptions, getDeviceAttribute } =
     useHistoryData();
 
@@ -52,30 +64,74 @@
       loading: loading as unknown as boolean,
     },
     async submitFunc() {
-      // 表单验证
-      await method.validate();
-      const value = method.getFieldsValue();
-      const searchParams = getSearchParams(value);
-      if (!hasDeviceAttr()) return;
-      // 发送请求
-      loading.value = true;
-      const res = await getDeviceHistoryInfo(searchParams);
-      loading.value = false;
-      // 判断数据对象是否为空
-      if (!Object.keys(res).length) {
-        isNull.value = false;
-        return;
-      } else {
-        isNull.value = true;
-      }
-
-      const selectedKeys = unref(deviceAttrs).find(
-        (item) => item.identifier === value[SchemaFiled.KEYS]
-      );
-      setOptions(setChartOptions(res, selectedKeys));
+      search();
     },
   });
 
+  const search = async () => {
+    // 表单验证
+    await method.validate();
+    const value = method.getFieldsValue();
+    const searchParams = getSearchParams(value);
+    if (!hasDeviceAttr()) return;
+    // 发送请求
+    loading.value = true;
+    const res = await getDeviceHistoryInfo(searchParams);
+    historyData.value = getTableHistoryData(res);
+    loading.value = false;
+    // 判断数据对象是否为空
+    if (!Object.keys(res).length) {
+      isNull.value = false;
+      return;
+    } else {
+      isNull.value = true;
+    }
+
+    const selectedKeys = unref(deviceAttrs).find(
+      (item) => item.identifier === value[SchemaFiled.KEYS]
+    );
+    setOptions(setChartOptions(res, selectedKeys));
+  };
+
+  const getTableHistoryData = (record: Recordable<{ ts: number; value: string }[]>) => {
+    const keys = Object.keys(record);
+    const list = keys.reduce((prev, next) => {
+      const list = record[next].map((item) => {
+        return {
+          ...item,
+          name: next,
+        };
+      });
+      return [...prev, ...list];
+    }, []);
+    return list;
+  };
+
+  const [registerTable] = useTable({
+    showIndexColumn: false,
+    showTableSetting: false,
+    dataSource: historyData,
+    maxHeight: 300,
+    size: 'small',
+    columns: [
+      {
+        title: '属性',
+        dataIndex: 'name',
+      },
+      {
+        title: '值',
+        dataIndex: 'value',
+      },
+      {
+        title: '更新时间',
+        dataIndex: 'ts',
+        format: (val) => {
+          return formatToDateTime(val, 'YYYY-MM-DD HH:mm:ss');
+        },
+      },
+    ],
+  });
+
   const getDeviceDataKey = async (record: DeviceOption) => {
     const { organizationId, value } = record;
     try {
@@ -115,9 +171,9 @@
       agg: AggregateDataEnum.NONE,
       limit: 7,
     });
-
+    historyData.value = getTableHistoryData(res);
     // 判断对象是否为空
-    if (!Object.keys(res).length) {
+    if (!Object.keys(unref(historyData)).length) {
       isNull.value = false;
       return;
     } else {
@@ -181,6 +237,10 @@
   const handleCancel = () => {
     destory();
   };
+
+  const switchMode = (flag: Mode) => {
+    mode.value = flag;
+  };
 </script>
 
 <template>
@@ -201,14 +261,65 @@
         <BasicForm @register="register" />
       </section>
       <section class="bg-white p-3" style="min-height: 350px">
-        <div v-show="isNull" ref="chartRef" :style="{ height: '350px', width: '100%' }">
+        <div v-show="mode === Mode.CHART" class="flex h-70px items-center justify-end p-2">
+          <Tooltip title="图表模式">
+            <Button
+              :class="[mode === Mode.CHART && '!bg-blue-500 svg:text-light-50']"
+              class="!p-2 !children:flex flex justify-center items-center border-r-0"
+              @click="switchMode(Mode.CHART)"
+            >
+              <LineChartOutlined />
+            </Button>
+          </Tooltip>
+
+          <Tooltip title="列表模式">
+            <Button
+              class="!p-2 !children:flex flex justify-center items-center"
+              @click="switchMode(Mode.TABLE)"
+            >
+              <BarsOutlined />
+            </Button>
+          </Tooltip>
+        </div>
+
+        <div
+          v-show="isNull && mode === Mode.CHART"
+          ref="chartRef"
+          :style="{ height: '350px', width: '100%' }"
+        >
           <Loading :loading="loading" :absolute="true" />
         </div>
         <Empty
+          v-if="mode === Mode.CHART"
           class="h-350px flex flex-col justify-center items-center"
           description="暂无数据，请选择设备查询"
           v-show="!isNull"
         />
+
+        <BasicTable v-show="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.CHART)"
+                >
+                  <LineChartOutlined />
+                </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>
       </section>
     </section>
   </BasicModal>

@@ -143,7 +143,7 @@
   };
 
   const handleOpenDetailModal = () => {
-    openModal();
+    openModal(true, { isEdit: false });
   };
 
   const handleRemove = async (record: DataBoardRecord) => {