Merge branch 'ww' into 'main'

feat: implment history trend && implment share data board && perf style

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

@@ -27,6 +27,10 @@ enum DataComponentUrl {
   UPDATE_DATA_COMPONENT = '/data_component',
   UPDATE_DATA_COMPONENT = '/data_component',
 }
 }
 
 
+enum DataBoardShareUrl {
+  GET_DATA_COMPONENT = '/noauth/share/dataBoard',
+}
+
 enum DeviceUrl {
 enum DeviceUrl {
   GET_DEVICE = '/device/list/master',
   GET_DEVICE = '/device/list/master',
   GET_SLAVE_DEVICE = '/device/list/slave',
   GET_SLAVE_DEVICE = '/device/list/slave',
@@ -141,6 +145,18 @@ export const updateDataComponent = (params: UpdateDataComponentParams) => {
 };
 };
 
 
 /**
 /**
+ * @description 分享组件信息
+ * @param params
+ * @returns
+ */
+export const getShareBoardComponentInfo = (params: { boardId: string; tenantId: string }) => {
+  const { boardId, tenantId } = params;
+  return defHttp.get({
+    url: `${DataBoardShareUrl.GET_DATA_COMPONENT}/${boardId}/${tenantId}`,
+  });
+};
+
+/**
  * @description 获取所有主设备
  * @description 获取所有主设备
  * @param params
  * @param params
  * @returns
  * @returns

@@ -77,7 +77,7 @@ export interface DataSource {
   slaveDeviceId: string;
   slaveDeviceId: string;
   gatewayDevice: boolean;
   gatewayDevice: boolean;
   componentInfo: ComponentInfo;
   componentInfo: ComponentInfo;
-  deviceName?: string;
+  deviceName: string;
 
 
   // front usage
   // front usage
   uuid?: string;
   uuid?: string;

@@ -6,6 +6,7 @@ import {
   EXCEPTION_COMPONENT,
   EXCEPTION_COMPONENT,
   PAGE_NOT_FOUND_NAME,
   PAGE_NOT_FOUND_NAME,
 } from '/@/router/constant';
 } from '/@/router/constant';
+import { DATA_BOARD_SHARE_URL } from '/@/views/data/board/config/config';
 
 
 // 404 on a page
 // 404 on a page
 export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
 export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
@@ -76,3 +77,13 @@ export const ERROR_LOG_ROUTE: AppRouteRecordRaw = {
     },
     },
   ],
   ],
 };
 };
+
+export const DATA_BOARD_SHARE: AppRouteRecordRaw = {
+  path: DATA_BOARD_SHARE_URL(),
+  name: 'dataBoardSharePage',
+  component: () => import('/@/views/data/board/detail/index.vue'),
+  meta: {
+    ignoreAuth: true,
+    title: '分享看板',
+  },
+};

 import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';
 import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';
-import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
+import { DATA_BOARD_SHARE, PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
 import { mainOutRoutes } from './mainOut';
 import { mainOutRoutes } from './mainOut';
 import { PageEnum } from '/@/enums/pageEnum';
 import { PageEnum } from '/@/enums/pageEnum';
 import { t } from '/@/hooks/web/useI18n';
 import { t } from '/@/hooks/web/useI18n';
@@ -85,4 +85,5 @@ export const basicRoutes = [
   ...mainOutRoutes,
   ...mainOutRoutes,
   REDIRECT_ROUTE,
   REDIRECT_ROUTE,
   PAGE_NOT_FOUND_ROUTE,
   PAGE_NOT_FOUND_ROUTE,
+  DATA_BOARD_SHARE,
 ];
 ];

@@ -92,13 +92,15 @@
         placement="topLeft"
         placement="topLeft"
         :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
         :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
       >
       >
-        <span>更新时间:</span>
-        <span
+        <div
           :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
           :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
           class="truncate"
           class="truncate"
         >
         >
-          {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }}
-        </span>
+          <span class="mr-1">更新时间:</span>
+          <span class="truncate">
+            {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }}
+          </span>
+        </div>
       </Tooltip>
       </Tooltip>
     </div>
     </div>
   </div>
   </div>

 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { MoreOutlined, LineChartOutlined } from '@ant-design/icons-vue';
+  import { MoreOutlined } from '@ant-design/icons-vue';
   import { DropMenu } from '/@/components/Dropdown';
   import { DropMenu } from '/@/components/Dropdown';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import { Tooltip } from 'ant-design-vue';
   import { Tooltip } from 'ant-design-vue';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
-  import { MoreActionEvent } from '../../config/config';
+  import { isBataBoardSharePage, MoreActionEvent } from '../../config/config';
   import { computed } from '@vue/reactivity';
   import { computed } from '@vue/reactivity';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { DataSource } from '/@/api/dataBoard/model';
   import { DataSource } from '/@/api/dataBoard/model';
+  import { useRoute } from 'vue-router';
 
 
   const emit = defineEmits(['action']);
   const emit = defineEmits(['action']);
   const props = defineProps<{
   const props = defineProps<{
@@ -41,6 +42,12 @@
     return basicMenu;
     return basicMenu;
   });
   });
 
 
+  const ROUTE = useRoute();
+
+  const getIsSharePage = computed(() => {
+    return isBataBoardSharePage(ROUTE.path);
+  });
+
   const handleMenuEvent = (event: DropMenu) => {
   const handleMenuEvent = (event: DropMenu) => {
     emit('action', event, props.id);
     emit('action', event, props.id);
   };
   };
@@ -64,9 +71,7 @@
       </div>
       </div>
     </div>
     </div>
     <div class="flex items-center w-10">
     <div class="flex items-center w-10">
-      <Tooltip title="趋势">
-        <LineChartOutlined class="cursor-pointer mx-1" />
-      </Tooltip>
+      <slot name="moreAction"></slot>
       <Dropdown
       <Dropdown
         v-if="dropMenuList.length"
         v-if="dropMenuList.length"
         :drop-menu-list="dropMenuList"
         :drop-menu-list="dropMenuList"
@@ -74,7 +79,7 @@
         @menu-event="handleMenuEvent"
         @menu-event="handleMenuEvent"
       >
       >
         <Tooltip title="更多">
         <Tooltip title="更多">
-          <MoreOutlined class="transform rotate-90 cursor-pointer" />
+          <MoreOutlined v-if="!getIsSharePage" class="transform rotate-90 cursor-pointer" />
         </Tooltip>
         </Tooltip>
       </Dropdown>
       </Dropdown>
     </div>
     </div>

@@ -8,3 +8,22 @@ export enum MoreActionEvent {
 
 
 export const DEFAULT_WIDGET_WIDTH = 6;
 export const DEFAULT_WIDGET_WIDTH = 6;
 export const DEFAULT_WIDGET_HEIGHT = 6;
 export const DEFAULT_WIDGET_HEIGHT = 6;
+
+export const DATA_BOARD_SHARE_URL = (
+  boardId = ':boardId',
+  tenantId = ':tenantId',
+  name = ':boardName?'
+) => `/data/board/share/${boardId}/${tenantId}/${name}`;
+
+export const isBataBoardSharePage = (url: string) => {
+  const reg = /^\/data\/board\/share/g;
+  return reg.test(url);
+};
+
+export const encode = (string: string) => {
+  return encodeURIComponent(string);
+};
+
+export const decode = (string: string) => {
+  return decodeURIComponent(string);
+};

@@ -9,6 +9,7 @@
   import { useModalInner } from '/@/components/Modal';
   import { useModalInner } from '/@/components/Modal';
   import { DataBoardLayoutInfo } from '../../types/type';
   import { DataBoardLayoutInfo } from '../../types/type';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { decode } from '../../config/config';
 
 
   interface DataComponentRouteParams extends RouteParams {
   interface DataComponentRouteParams extends RouteParams {
     id: string;
     id: string;
@@ -21,7 +22,7 @@
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
 
 
   const boardId = computed(() => {
   const boardId = computed(() => {
-    return (ROUTE.params as DataComponentRouteParams).id;
+    return decode((ROUTE.params as DataComponentRouteParams).boardId as string);
   });
   });
 
 
   const frontId = ref('');
   const frontId = ref('');

-<script setup lang="ts"></script>
-
-<template>
-  <div>历史趋势</div>
-</template>

+<script lang="ts" setup>
+  import moment from 'moment';
+  import { nextTick, Ref, ref, unref } from 'vue';
+  import { getDeviceHistoryInfo } from '/@/api/alarm/position';
+  import { Empty } from 'ant-design-vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { dateUtil } from '/@/utils/dateUtil';
+  import { AggregateDataEnum, eChartOptions } from '/@/views/device/localtion/config.data';
+  import { useGridLayout } from '/@/hooks/component/useGridLayout';
+  import { ColEx } from '/@/components/Form/src/types';
+  import { DataSource } from '/@/api/dataBoard/model';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { formSchema, QueryWay, SchemaFiled } from '../config/historyTrend.config';
+  import { DEFAULT_DATE_FORMAT } from '../config/util';
+  import { Loading } from '/@/components/Loading';
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
+  import { useModalInner } from '/@/components/Modal';
+  import { getDeviceAttributes } from '/@/api/dataBoard';
+
+  defineEmits(['register']);
+
+  const chartRef = ref();
+
+  const deviceAttrs = ref<string[]>([]);
+
+  const loading = ref(false);
+
+  const isNull = ref(false);
+
+  function getSearchParams(value: Recordable) {
+    const { startTs, endTs, interval, agg, limit, keys, way, deviceId } = value;
+    if (way === QueryWay.LATEST) {
+      return {
+        entityId: deviceId,
+        keys: keys ? keys : unref(deviceAttrs).join(),
+        startTs: moment().subtract(startTs, 'ms').valueOf(),
+        endTs: Date.now(),
+        interval,
+        agg,
+        limit,
+      };
+    } else {
+      return {
+        entityId: deviceId,
+        keys: keys ? keys : unref(deviceAttrs).join(),
+        startTs: moment(startTs).valueOf(),
+        endTs: moment(endTs).valueOf(),
+        interval,
+        agg,
+        limit,
+      };
+    }
+  }
+
+  function hasDeviceAttr() {
+    if (!unref(deviceAttrs).length) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  function setChartOptions(data, keys?) {
+    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+    const dataArray: any[] = [];
+    for (const key in data) {
+      for (const item1 of data[key]) {
+        let { ts, value } = item1;
+        const time = dateUtil(ts).format(DEFAULT_DATE_FORMAT);
+        value = Number(value).toFixed(2);
+        dataArray.push([time, value, key]);
+      }
+    }
+    keys = keys ? [keys] : unref(deviceAttrs);
+    const series: any = keys.map((item) => {
+      return {
+        name: item,
+        type: 'line',
+        data: dataArray.filter((item1) => item1[2] === item),
+      };
+    });
+    // 设置数据
+    setOptions(eChartOptions(series, keys));
+  }
+
+  const [register, method] = useForm({
+    schemas: formSchema,
+    baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
+    rowProps: {
+      gutter: 10,
+    },
+    labelWidth: 120,
+    fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]],
+    submitButtonOptions: {
+      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);
+      // 判断数据对象是否为空
+      if (!Object.keys(res).length) {
+        isNull.value = false;
+        return;
+      } else {
+        isNull.value = true;
+      }
+      setChartOptions(res, value.keys);
+      loading.value = false;
+    },
+  });
+
+  const getDeviceDataKey = async (deviceId: string) => {
+    if (!deviceId) return;
+    try {
+      deviceAttrs.value = (await getDeviceAttributes({ deviceId })) || [];
+      await nextTick();
+      method.updateSchema({
+        field: SchemaFiled.KEYS,
+        componentProps: {
+          options: unref(deviceAttrs).map((item) => ({ label: item, value: item })),
+        },
+      });
+    } catch (error) {}
+  };
+
+  const handleModalOpen = async () => {
+    await nextTick();
+
+    method.setFieldsValue({
+      [SchemaFiled.START_TS]: 1 * 24 * 60 * 60 * 1000,
+      [SchemaFiled.LIMIT]: 7,
+      [SchemaFiled.AGG]: AggregateDataEnum.NONE,
+    });
+
+    if (!hasDeviceAttr()) return;
+
+    const { deviceId } = method.getFieldsValue();
+
+    const res = await getDeviceHistoryInfo({
+      entityId: deviceId,
+      keys: unref(deviceAttrs).join(),
+      startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
+      endTs: Date.now(),
+      agg: AggregateDataEnum.NONE,
+    });
+
+    // 判断对象是否为空
+    if (!Object.keys(res).length) {
+      isNull.value = false;
+      return;
+    } else {
+      isNull.value = true;
+    }
+    setChartOptions(res);
+  };
+
+  const generateDeviceOptions = (dataSource: DataSource[]) => {
+    const record: { [key: string]: boolean } = {};
+    const options: Record<'label' | 'value', string>[] = [];
+    for (const item of dataSource) {
+      const { deviceName, gatewayDevice, slaveDeviceId } = item;
+      let { deviceId } = item;
+      if (gatewayDevice) {
+        deviceId = slaveDeviceId;
+      }
+      if (record[deviceId]) continue;
+      options.push({
+        label: deviceName,
+        value: deviceId,
+      });
+      record[deviceId] = true;
+    }
+
+    return options;
+  };
+
+  const [registerModal] = useModalInner(async (dataSource: DataSource[]) => {
+    deviceAttrs.value = [];
+    loading.value = false;
+    const options = generateDeviceOptions(dataSource);
+    await nextTick();
+    method.updateSchema({
+      field: SchemaFiled.DEVICE_ID,
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          options,
+          onChange(value: string) {
+            getDeviceDataKey(value);
+            setFieldsValue({ [SchemaFiled.KEYS]: null });
+          },
+        };
+      },
+    });
+
+    await handleModalOpen();
+  });
+</script>
+
+<template>
+  <BasicModal @register="registerModal" :destroy-on-close="true" width="70%" title="历史趋势">
+    <section
+      class="flex flex-col p-4 h-full w-full min-w-7/10"
+      style="color: #f0f2f5; background-color: #f0f2f5"
+    >
+      <section class="bg-white my-3 p-2">
+        <BasicForm @register="register" />
+      </section>
+      <section class="bg-white p-3" style="min-hight: 350px">
+        <div v-show="isNull" ref="chartRef" :style="{ height: '350px', width: '100%' }">
+          <Loading :loading="loading" :absolute="true" />
+        </div>
+        <Empty description="暂无数据，请选择设备查询" v-show="!isNull" />
+      </section>
+    </section>
+  </BasicModal>
+</template>
+
+<style scoped></style>

@@ -23,7 +23,7 @@
     :style="{ borderColor: props.controlId === props.checkedId ? '#1a74e8' : '#f0f0f0' }"
     :style="{ borderColor: props.controlId === props.checkedId ? '#1a74e8' : '#f0f0f0' }"
     hoverable
     hoverable
     bordered
     bordered
-    class="w-60 h-60 widget-select"
+    class="w-60 h-60 widget-select !bg-light-50"
     @click="handleClick"
     @click="handleClick"
   >
   >
     <div class="widget-container">
     <div class="widget-container">

+import { Moment } from 'moment';
+import { getDeviceAttributes } from '/@/api/dataBoard';
+import { FormSchema } from '/@/components/Form';
+import { ColEx } from '/@/components/Form/src/types';
+import { useGridLayout } from '/@/hooks/component/useGridLayout';
+import {
+  getPacketIntervalByRange,
+  getPacketIntervalByValue,
+  intervalOption,
+} from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
+export enum QueryWay {
+  LATEST = 'latest',
+  TIME_PERIOD = 'timePeriod',
+}
+
+export enum SchemaFiled {
+  DEVICE_ID = 'deviceId',
+  WAY = 'way',
+  TIME_PERIOD = 'timePeriod',
+  KEYS = 'keys',
+  DATE_RANGE = 'dataRange',
+  START_TS = 'startTs',
+  END_TS = 'endTs',
+  INTERVAL = 'interval',
+  LIMIT = 'limit',
+  AGG = 'agg',
+  ORDER_BY = 'orderBy',
+}
+
+export enum AggregateDataEnum {
+  MIN = 'MIN',
+  MAX = 'MAX',
+  AVG = 'AVG',
+  SUM = 'SUM',
+  COUNT = 'COUNT',
+  NONE = 'NONE',
+}
+export const formSchema: FormSchema[] = [
+  {
+    field: SchemaFiled.DEVICE_ID,
+    label: '设备名称',
+    component: 'Select',
+    rules: [{ required: true, message: '设备名称为必选项', type: 'string' }],
+    componentProps({ formActionType }) {
+      const { setFieldsValue } = formActionType;
+      return {
+        placeholder: '请选择设备',
+        onChange() {
+          setFieldsValue({ [SchemaFiled.KEYS]: null });
+        },
+      };
+    },
+  },
+  {
+    field: SchemaFiled.WAY,
+    label: '查询方式',
+    component: 'RadioGroup',
+    defaultValue: QueryWay.LATEST,
+    componentProps({ formActionType }) {
+      const { setFieldsValue } = formActionType;
+      return {
+        options: [
+          { label: '最后', value: QueryWay.LATEST },
+          { label: '时间段', value: QueryWay.TIME_PERIOD },
+        ],
+        onChange(value) {
+          value === QueryWay.LATEST
+            ? setFieldsValue({
+                [SchemaFiled.DATE_RANGE]: [],
+                [SchemaFiled.START_TS]: null,
+                [SchemaFiled.END_TS]: null,
+              })
+            : setFieldsValue({ [SchemaFiled.START_TS]: null });
+        },
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: SchemaFiled.START_TS,
+    label: '最后数据',
+    component: 'Select',
+    ifShow({ values }) {
+      return values[SchemaFiled.WAY] === QueryWay.LATEST;
+    },
+    componentProps({ formActionType }) {
+      const { setFieldsValue } = formActionType;
+      return {
+        options: intervalOption,
+        onChange() {
+          setFieldsValue({ [SchemaFiled.INTERVAL]: null });
+        },
+        getPopupContainer: () => document.body,
+      };
+    },
+    rules: [{ required: true, message: '最后数据为必选项', type: 'number' }],
+  },
+  {
+    field: SchemaFiled.DATE_RANGE,
+    label: '时间段',
+    component: 'RangePicker',
+    ifShow({ values }) {
+      return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD;
+    },
+    rules: [{ required: true, message: '时间段为必选项' }],
+    componentProps({ formActionType }) {
+      const { setFieldsValue } = formActionType;
+      let dates: Moment[] = [];
+      return {
+        showTime: true,
+        onCalendarChange(value: Moment[]) {
+          dates = value;
+        },
+        disabledDate(current: Moment) {
+          if (!dates || dates.length === 0 || !current) {
+            return false;
+          }
+          const diffDate = current.diff(dates[0], 'years', true);
+          return Math.abs(diffDate) > 1;
+        },
+        onChange() {
+          dates = [];
+          setFieldsValue({ [SchemaFiled.INTERVAL]: null });
+        },
+        getPopupContainer: () => document.body,
+      };
+    },
+    colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx,
+  },
+  {
+    field: SchemaFiled.AGG,
+    label: '数据聚合功能',
+    component: 'Select',
+    // defaultValue: AggregateDataEnum.NONE,
+    componentProps: {
+      getPopupContainer: () => document.body,
+      options: [
+        { label: '最小值', value: AggregateDataEnum.MIN },
+        { label: '最大值', value: AggregateDataEnum.MAX },
+        { label: '平均值', value: AggregateDataEnum.AVG },
+        { label: '求和', value: AggregateDataEnum.SUM },
+        { label: '计数', value: AggregateDataEnum.COUNT },
+        { label: '空', value: AggregateDataEnum.NONE },
+      ],
+    },
+  },
+  {
+    field: SchemaFiled.INTERVAL,
+    label: '分组间隔',
+    component: 'Select',
+    ifShow({ values }) {
+      return values[SchemaFiled.AGG] !== AggregateDataEnum.NONE;
+    },
+    componentProps({ formModel, formActionType }) {
+      const options =
+        formModel[SchemaFiled.WAY] === QueryWay.LATEST
+          ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS])
+          : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]);
+      if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) {
+        formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null });
+      }
+      return {
+        options,
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: SchemaFiled.LIMIT,
+    label: '最大值',
+    component: 'InputNumber',
+    // defaultValue: 7,
+    ifShow({ values }) {
+      return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
+    },
+    componentProps() {
+      return {
+        max: 50000,
+        min: 7,
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: SchemaFiled.KEYS,
+    label: '设备属性',
+    component: 'Select',
+    componentProps: {
+      getPopupContainer: () => document.body,
+    },
+    // componentProps({ formModel }) {
+    //   const deviceId = formModel[SchemaFiled.DEVICE_ID];
+    //   return {
+    //     api: async () => {
+    //       if (deviceId) {
+    //         try {
+    //           try {
+    //             const data = await getDeviceAttributes({ deviceId });
+    //             if (data) return data.map((item) => ({ label: item, value: item }));
+    //           } catch (error) {}
+    //           return [];
+    //         } catch (error) {}
+    //       }
+    //       return [];
+    //     },
+    //     getPopupContainer: () => document.body,
+    //   };
+    // },
+  },
+];
+
+// export const selectDeviceAttrSchema: FormSchema[] = [
+//   {
+//     field: 'keys',
+//     label: '设备属性',
+//     component: 'Select',
+//     componentProps: {
+//       getPopupContainer: () => document.body,
+//     },
+//   },
+// ];

 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { Button, PageHeader, Empty, Spin } from 'ant-design-vue';
+  import { Button, PageHeader, Empty, Spin, Tooltip } from 'ant-design-vue';
+  import { LineChartOutlined, RollbackOutlined } from '@ant-design/icons-vue';
   import { GridItem, GridLayout } from 'vue3-grid-layout';
   import { GridItem, GridLayout } from 'vue3-grid-layout';
   import { nextTick, onMounted, ref } from 'vue';
   import { nextTick, onMounted, ref } from 'vue';
   import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
   import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
@@ -7,11 +8,18 @@
   import { DropMenu } from '/@/components/Dropdown';
   import { DropMenu } from '/@/components/Dropdown';
   import DataBindModal from './components/DataBindModal.vue';
   import DataBindModal from './components/DataBindModal.vue';
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
-  import { DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, MoreActionEvent } from '../config/config';
+  import {
+    decode,
+    DEFAULT_WIDGET_HEIGHT,
+    DEFAULT_WIDGET_WIDTH,
+    isBataBoardSharePage,
+    MoreActionEvent,
+  } from '../config/config';
   import {
   import {
     addDataComponent,
     addDataComponent,
     deleteDataComponent,
     deleteDataComponent,
     getDataComponent,
     getDataComponent,
+    getShareBoardComponentInfo,
     updateDataBoardLayout,
     updateDataBoardLayout,
   } from '/@/api/dataBoard';
   } from '/@/api/dataBoard';
   import { useRoute, useRouter } from 'vue-router';
   import { useRoute, useRouter } from 'vue-router';
@@ -25,27 +33,43 @@
   import Authority from '/@/components/Authority/src/Authority.vue';
   import Authority from '/@/components/Authority/src/Authority.vue';
   import { useSocketConnect } from '../hook/useSocketConnect';
   import { useSocketConnect } from '../hook/useSocketConnect';
   import { buildUUID } from '/@/utils/uuid';
   import { buildUUID } from '/@/utils/uuid';
+  import HistoryTrendModal from './components/HistoryTrendModal.vue';
 
 
   const ROUTE = useRoute();
   const ROUTE = useRoute();
 
 
   const ROUTER = useRouter();
   const ROUTER = useRouter();
 
 
   const { createMessage, createConfirm } = useMessage();
   const { createMessage, createConfirm } = useMessage();
+
   const getBoardId = computed(() => {
   const getBoardId = computed(() => {
-    return (ROUTE.params as { id: string }).id;
+    return decode((ROUTE.params as { boardId: string }).boardId);
+  });
+
+  const getDataBoardName = computed(() => {
+    return decode((ROUTE.params as { boardName: string }).boardName || '');
+  });
+
+  const getSharePageParams = computed(() => {
+    const { boardId, tenantId } = ROUTE.params as { boardId: string; tenantId: string };
+    return { boardId: decode(boardId), tenantId: decode(tenantId) };
+  });
+
+  const getIsSharePage = computed(() => {
+    return isBataBoardSharePage(ROUTE.path);
   });
   });
 
 
   const widgetEl = new Map<string, Fn>();
   const widgetEl = new Map<string, Fn>();
 
 
   const dataBoardList = ref<DataBoardLayoutInfo[]>([]);
   const dataBoardList = ref<DataBoardLayoutInfo[]>([]);
 
 
-  const draggable = ref(true);
-  const resizable = ref(true);
+  const draggable = ref(!unref(getIsSharePage));
+  const resizable = ref(!unref(getIsSharePage));
 
 
   const GirdLayoutColNum = 24;
   const GirdLayoutColNum = 24;
   const GridLayoutMargin = 10;
   const GridLayoutMargin = 10;
 
 
   const handleBack = () => {
   const handleBack = () => {
+    if (unref(getIsSharePage)) return;
     ROUTER.go(-1);
     ROUTER.go(-1);
   };
   };
 
 
@@ -166,12 +190,36 @@
 
 
   const { beginSendMessage } = useSocketConnect(dataBoardList);
   const { beginSendMessage } = useSocketConnect(dataBoardList);
 
 
+  const getBasePageComponentData = async () => {
+    try {
+      return await getDataComponent(unref(getBoardId));
+    } catch (error) {}
+    return [];
+  };
+
+  const getSharePageComponentData = async () => {
+    try {
+      const params = unref(getSharePageParams);
+      return await getShareBoardComponentInfo(params);
+    } catch (error) {}
+    return [];
+  };
+
+  const getDataBoradDetail = async () => {
+    try {
+      return unref(getIsSharePage)
+        ? await getSharePageComponentData()
+        : await getBasePageComponentData();
+    } catch (error) {}
+    return [];
+  };
+
   const loading = ref(false);
   const loading = ref(false);
   const getDataBoardComponent = async () => {
   const getDataBoardComponent = async () => {
     try {
     try {
       // dataBoardList.value = [];
       // dataBoardList.value = [];
       loading.value = true;
       loading.value = true;
-      const data = await getDataComponent(unref(getBoardId));
+      const data = await getDataBoradDetail();
       dataBoardList.value = data.data.componentData.map((item) => {
       dataBoardList.value = data.data.componentData.map((item) => {
         const index = data.data.componentLayout.findIndex((each) => item.id === each.id);
         const index = data.data.componentLayout.findIndex((each) => item.id === each.id);
         let layout;
         let layout;
@@ -243,6 +291,12 @@
     }
     }
   };
   };
 
 
+  const [registerHistoryDataModal, historyDataModalMethod] = useModal();
+
+  const handleOpenHistroyDataModal = (record: DataSource[]) => {
+    historyDataModalMethod.openModal(true, record);
+  };
+
   onMounted(() => {
   onMounted(() => {
     getDataBoardComponent();
     getDataBoardComponent();
   });
   });
@@ -250,10 +304,18 @@
 
 
 <template>
 <template>
   <section class="bg-light-50 flex flex-col overflow-hidden h-full w-full">
   <section class="bg-light-50 flex flex-col overflow-hidden h-full w-full">
-    <PageHeader title="水电表看板" @back="handleBack">
+    <PageHeader>
+      <template #title>
+        <div class="flex items-center">
+          <RollbackOutlined v-if="!getIsSharePage" class="mr-3" @click="handleBack" />
+          <span>{{ getDataBoardName }}</span>
+        </div>
+      </template>
       <template #extra>
       <template #extra>
         <Authority value="api:yt:dataBoardDetail:post">
         <Authority value="api:yt:dataBoardDetail:post">
-          <Button type="primary" @click="handleOpenCreatePanel">创建组件</Button>
+          <Button v-if="!getIsSharePage" type="primary" @click="handleOpenCreatePanel"
+            >创建组件</Button
+          >
         </Authority>
         </Authority>
       </template>
       </template>
       <div>
       <div>
@@ -301,7 +363,17 @@
                   :record="item.record.dataSource"
                   :record="item.record.dataSource"
                   :id="item.record.id"
                   :id="item.record.id"
                   @action="handleMoreAction"
                   @action="handleMoreAction"
-                />
+                >
+                  <template #moreAction>
+                    <Tooltip title="趋势">
+                      <LineChartOutlined
+                        v-if="!getIsSharePage"
+                        class="cursor-pointer mx-1"
+                        @click="handleOpenHistroyDataModal(item.record.dataSource)"
+                      />
+                    </Tooltip>
+                  </template>
+                </BaseWidgetHeader>
               </template>
               </template>
               <template #controls="{ record, add, remove, update }">
               <template #controls="{ record, add, remove, update }">
                 <component
                 <component
@@ -320,6 +392,7 @@
       </Spin>
       </Spin>
     </section>
     </section>
     <DataBindModal @register="register" @submit="getDataBoardComponent" />
     <DataBindModal @register="register" @submit="getDataBoardComponent" />
+    <HistoryTrendModal @register="registerHistoryDataModal" />
   </section>
   </section>
 </template>
 </template>
 
 

@@ -100,7 +100,6 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
   const transformSocketMessageItem = () => {
   const transformSocketMessageItem = () => {
     const messageList: SocketMessageItem[] = [];
     const messageList: SocketMessageItem[] = [];
     let index = 0;
     let index = 0;
-    console.log(unref(dataSourceRef));
     unref(dataSourceRef).forEach((record, recordIndex) => {
     unref(dataSourceRef).forEach((record, recordIndex) => {
       const componentId = record.record.id;
       const componentId = record.record.id;
       record.record.dataSource.forEach((dataSource, dataSourceIndex) => {
       record.record.dataSource.forEach((dataSource, dataSourceIndex) => {

@@ -7,7 +7,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import { DropMenu } from '/@/components/Dropdown';
   import { DropMenu } from '/@/components/Dropdown';
-  import { MoreActionEvent } from './config/config';
+  import { DATA_BOARD_SHARE_URL, MoreActionEvent } from './config/config';
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
   import PanelDetailModal from './components/PanelDetailModal.vue';
   import PanelDetailModal from './components/PanelDetailModal.vue';
   import { getDataBoardList, deleteDataBoard } from '/@/api/dataBoard';
   import { getDataBoardList, deleteDataBoard } from '/@/api/dataBoard';
@@ -18,6 +18,7 @@
   import Authority from '/@/components/Authority/src/Authority.vue';
   import Authority from '/@/components/Authority/src/Authority.vue';
   import { computed } from '@vue/reactivity';
   import { computed } from '@vue/reactivity';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { usePermission } from '/@/hooks/web/usePermission';
+  import { encode } from './config/config';
 
 
   const ListItem = List.Item;
   const ListItem = List.Item;
   const router = useRouter();
   const router = useRouter();
@@ -50,9 +51,14 @@
     pageSize.value = size;
     pageSize.value = size;
   }
   }
 
 
+  const createShareUrl = (boardId: string, tenantId: string, name: string) => {
+    const { origin } = location;
+    return `${origin}${DATA_BOARD_SHARE_URL(encode(boardId), encode(tenantId), encode(name))}`;
+  };
+
   const { clipboardRef } = useCopyToClipboard();
   const { clipboardRef } = useCopyToClipboard();
   const handleCopyShareUrl = (record: DataBoardRecord) => {
   const handleCopyShareUrl = (record: DataBoardRecord) => {
-    clipboardRef.value = record.openUrl;
+    clipboardRef.value = createShareUrl(record.id, record.tenantId, record.name);
     unref(clipboardRef) ? createMessage.success('复制成功') : createMessage.error('未找到分享链接');
     unref(clipboardRef) ? createMessage.success('复制成功') : createMessage.error('未找到分享链接');
   };
   };
 
 
@@ -128,7 +134,8 @@
 
 
   const handleViewBoard = (record: DataBoardRecord) => {
   const handleViewBoard = (record: DataBoardRecord) => {
     const hasDetailPermission = hasPermission('api:yt:dataBoard:detail');
     const hasDetailPermission = hasPermission('api:yt:dataBoard:detail');
-    if (hasDetailPermission) router.push(`/data/board/detail/${record.id}`);
+    if (hasDetailPermission)
+      router.push(`/data/board/detail/${encode(record.id)}/${encode(record.name)}`);
   };
   };
 
 
   const handlePagenationPosition = () => {
   const handlePagenationPosition = () => {