Merge branch 'ww' into 'main'

feat: product profile add card mode && fix bug in teambition

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

@@ -2,7 +2,9 @@ import { defHttp } from '/@/utils/http/axios';
 import {
   TDeviceConfigParams,
   IDeviceConfigAddOrEditModel,
+  ProfileRecord,
 } from '/@/api/device/model/deviceConfigModel';
+import { PaginationResult } from '/#/axios';
 
 enum EDeviceConfigApi {
   /**
@@ -52,7 +54,7 @@ export const alarmContactGetPage = () => {
  * 分页查询设备配置页面
  */
 export const deviceConfigGetQuery = (params?: TDeviceConfigParams) => {
-  return defHttp.get({
+  return defHttp.get<PaginationResult<ProfileRecord>>({
     url: EDeviceConfigApi.DEVICE_CONFIG_GET_PAGE,
     params,
   });

@@ -199,3 +199,45 @@ export interface AlarmLogItem {
   organizationId: string;
   organizationName: string;
 }
+
+export interface Configuration {
+  type: string;
+}
+
+export interface TransportConfiguration {
+  type: string;
+}
+
+export interface ProvisionConfiguration {
+  type: string;
+  provisionDeviceSecret?: any;
+}
+
+export interface ProfileData {
+  configuration: Configuration;
+  transportConfiguration: TransportConfiguration;
+  provisionConfiguration: ProvisionConfiguration;
+  alarms?: any;
+}
+
+export interface ProfileRecord {
+  id: string;
+  creator: string;
+  createTime: string;
+  updater: string;
+  updateTime: string;
+  name: string;
+  tenantId: string;
+  transportType: string;
+  provisionType: string;
+  deviceType: string;
+  tbProfileId: string;
+  profileData: ProfileData;
+  defaultRuleChainId: string;
+  defaultQueueName: string;
+  image: string;
+  type: string;
+  default: boolean;
+
+  checked?: boolean;
+}

+<svg t="1671442803003" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4002" width="200" height="200"><path d="M0 0m178.086957 0l667.826086 0q178.086957 0 178.086957 178.086957l0 667.826086q0 178.086957-178.086957 178.086957l-667.826086 0q-178.086957 0-178.086957-178.086957l0-667.826086q0-178.086957 178.086957-178.086957Z" fill="#2E7BFC" p-id="4003"></path><path d="M758.717217 394.373565v268.866783l-238.191304 134.455652v-268.911304l124.14887-70.054957v94.497391l51.956869-29.985391V429.412174l62.107826-35.038609z m-493.434434 0l238.191304 134.433392v268.866782l-238.191304-134.433391V394.373565zM512 226.304l246.717217 139.241739L512 504.787478l-246.717217-139.241739L512 226.326261z" fill="#FFFFFF" p-id="4004"></path></svg>

@@ -13,7 +13,7 @@
   const iconList = IconData.icons;
   const [register, { openDrawer, closeDrawer }] = useDrawer();
   const getIcon = computed(() => {
-    return props.value || 'temperature';
+    return props.value || 'shuiwen';
   });
 
   const getColor = computed(() => {

+<script lang="ts" setup>
+  import { Popover, Slider, Button } from 'ant-design-vue';
+  import { LayoutOutlined } from '@ant-design/icons-vue';
+  import { computed } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      min?: number;
+      max?: number;
+      value?: number;
+    }>(),
+    {
+      min: 4,
+      max: 12,
+      value: 4,
+    }
+  );
+
+  const emit = defineEmits(['change', 'update:value']);
+
+  const generateLayoutMarks = (min: number, max: number) => {
+    const marks = {};
+    Array.from({ length: max - min + 1 }).forEach((_, index) => {
+      const key = index + min;
+      marks[key] = key;
+    });
+    return marks;
+  };
+
+  const getMarks = computed(() => {
+    const { min, max } = props;
+    return generateLayoutMarks(min, max);
+  });
+
+  const handleChange = (value: number) => {
+    emit('update:value', value);
+    emit('change', value);
+  };
+</script>
+
+<template>
+  <Popover :trigger="['hover']">
+    <template #content>
+      <div class="w-60">
+        <div>每行显示数量</div>
+        <Slider
+          :value="props.value"
+          :max="props.max"
+          :min="props.min"
+          :marks="getMarks"
+          @change="handleChange"
+        />
+      </div>
+    </template>
+    <Button type="primary">
+      <LayoutOutlined />
+    </Button>
+  </Popover>
+</template>

+<script lang="ts" setup>
+  import { RadioButton, RadioGroup, Tooltip } from 'ant-design-vue';
+  import { TABLE_CARD_MODE_LIST } from './const';
+  import { ModeList } from './types';
+  import Icon from '../Icon';
+  const props = withDefaults(
+    defineProps<{
+      value: string;
+      mode?: ModeList[];
+    }>(),
+    {
+      mode: () => TABLE_CARD_MODE_LIST,
+    }
+  );
+
+  const emit = defineEmits(['change']);
+
+  const handleChange = (event: Event) => {
+    const value = (event.target as HTMLInputElement).value;
+    emit('change', value);
+  };
+</script>
+
+<template>
+  <RadioGroup :value="props.value" button-style="solid" @change="handleChange">
+    <template v-for="item in $props.mode" :key="item.value">
+      <Tooltip :title="item.label">
+        <RadioButton class="cursor-pointer" :value="item.value">
+          <Icon :icon="item.icon" />
+        </RadioButton>
+      </Tooltip>
+    </template>
+  </RadioGroup>
+</template>

+import { ModeList } from './types';
+
+export enum EnumTableCardMode {
+  CARD = 'CARD',
+  TABLE = 'TABLE',
+}
+
+export enum EnumTableChartMode {
+  TABLE = 'TABLE',
+  CHART = 'CHART',
+}
+
+export const TABLE_CARD_MODE_LIST: ModeList[] = [
+  {
+    label: '卡片模式',
+    value: EnumTableCardMode.CARD,
+    icon: 'ant-design:appstore-outlined',
+  },
+  {
+    label: '列表模式',
+    value: EnumTableCardMode.TABLE,
+    icon: 'ant-design:unordered-list-outlined',
+  },
+];
+
+export const TABLE_CHART_MODE_LIST: ModeList[] = [
+  {
+    label: '图表模式',
+    value: EnumTableChartMode.CHART,
+    icon: 'ant-design:line-chart-outlined',
+  },
+  {
+    label: '列表模式',
+    value: EnumTableChartMode.TABLE,
+    icon: 'ant-design:unordered-list-outlined',
+  },
+];

+export { default as ModeSwitchButton } from './ModeSwitchButton.vue';
+export { default as CardLayoutButton } from './CardLayoutButton.vue';
+export {
+  EnumTableCardMode,
+  EnumTableChartMode,
+  TABLE_CARD_MODE_LIST,
+  TABLE_CHART_MODE_LIST,
+} from './const';
+export type { ModeList } from './types';

+import { ExtractPropTypes } from 'vue';
+import Icon from '../Icon';
+
+export interface ModeList {
+  value: string;
+  label: string;
+  icon?: string;
+  iconProps?: ExtractPropTypes<typeof Icon>;
+}

@@ -11,10 +11,10 @@
       >
         <template #toolbar>
           <a-button type="primary" @click="handleSwitchMode">分屏模式</a-button>
-          <Authority value="api:yt:video:post">
+          <Authority :value="CameraPermission.CREATE">
             <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增视频 </a-button>
           </Authority>
-          <Authority value="api:yt:video:delete">
+          <Authority :value="CameraPermission.DELETE">
             <Popconfirm
               title="您确定要批量删除数据"
               ok-text="确定"
@@ -50,12 +50,12 @@
               {
                 label: '预览',
                 icon: 'clarity:note-edit-line',
-                auth: 'api:yt:video:get',
+                auth: CameraPermission.PREVIEW,
                 onClick: handleViewVideo.bind(null, record),
               },
               {
                 label: '编辑',
-                auth: 'api:yt:video:update',
+                auth: CameraPermission.UPDATE,
                 icon: 'clarity:note-edit-line',
                 onClick: handleCreateOrEdit.bind(null, record),
               },
@@ -63,7 +63,7 @@
             :drop-down-actions="[
               {
                 label: '删除',
-                auth: 'api:yt:video:delete',
+                auth: CameraPermission.DELETE,
                 icon: 'ant-design:delete-outlined',
                 color: 'error',
                 popConfirm: {
@@ -89,7 +89,7 @@
   import CameraDrawer from './CameraDrawer.vue';
   import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
   import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager';
-  import { searchFormSchema, columns, AccessMode, PageMode } from './config.data';
+  import { searchFormSchema, columns, AccessMode, PageMode, CameraPermission } from './config.data';
   import VideoPreviewModal from './DialogPreviewVideo.vue';
   import { useModal } from '/@/components/Modal';
   import { Authority } from '/@/components/Authority';
@@ -199,6 +199,7 @@
         registerModal,
         AccessMode,
         handleSwitchMode,
+        CameraPermission,
       };
     },
   });

@@ -8,13 +8,14 @@
   import { useFullscreen } from '@vueuse/core';
   import CameraDrawer from './CameraDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
-  import { AccessMode, PageMode } from './config.data';
+  import { AccessMode, CameraPermission, PageMode } from './config.data';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
   import { buildUUID } from '/@/utils/uuid';
   import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
   import { VideoJsPlayerOptions } from 'video.js';
   import { getBoundingClientRect } from '/@/utils/domUtils';
+  import { Authority } from '/@/components/Authority';
 
   type CameraRecordItem = CameraRecord & {
     canPlay?: boolean;
@@ -220,7 +221,9 @@
           </div>
           <div class="flex items-center gap-4">
             <div class="flex">
-              <Button type="primary" @click="handleAddCamera">新增视频</Button>
+              <Authority :value="CameraPermission.CREATE">
+                <Button type="primary" @click="handleAddCamera">新增视频</Button>
+              </Authority>
             </div>
             <Space>
               <Button type="primary" @click="handleChangeMode(PageMode.SPLIT_SCREEN_MODE)">

@@ -6,6 +6,14 @@ import type { FormSchema as QFormSchema } from '/@/components/Form/index';
 import { CameraVideoUrl, CameraMaxLength, MediaTypeValidate } from '/@/utils/rules';
 import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
+
+export enum CameraPermission {
+  PREVIEW = 'api:yt:video:get',
+  CREATE = 'api:yt:video:post',
+  UPDATE = 'api:yt:video:update',
+  DELETE = 'api:yt:video:delete',
+}
+
 export enum AccessMode {
   ManuallyEnter = 0,
   Streaming = 1,

@@ -9,6 +9,14 @@ export enum Platform {
   PC = 'pc',
 }
 
+export enum ConfigurationPermission {
+  CREATE = 'api:yt:configuration:center:post',
+  UPDATE = 'api:yt:configuration:center:update',
+  DELETE = 'api:yt:configuration:center:delete',
+  DESIGN = 'api:yt:configuration:center:get_configuration_info:design',
+  PREVIEW = 'api:yt:configuration:center:get_configuration_info:preview',
+}
+
 export const PC_DEFAULT_CONTENT =
   '<mxfile><diagram>dZHBDsIgDIafhvuEzOh5Tr142sEzGXWQsHVhmKFP7xbAidMT5fv/UtoSVrTuZHgvLyhAE5oJR9iBUMrybT4dM3l4stnTzJPGKBHYAir1hACj7a4EDInRImqr+hTW2HVQ24RxY3BMbTfUadWeN7ACVc31ml6VsPK7jVk4g2pkLJ3tgtLy6A5gkFzg+IFYSVhhEK2PWleAnscXB+Pzjn/U988MdPZHwhQsb0+XZEesfAE=</diagram></mxfile>';
 

@@ -7,7 +7,7 @@
     EditOutlined,
     EllipsisOutlined,
   } from '@ant-design/icons-vue';
-  import { onMounted, reactive, ref, unref } from 'vue';
+  import { computed, onMounted, reactive, ref, unref } from 'vue';
   import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
   import {
     deleteConfigurationCenter,
@@ -17,7 +17,7 @@
   import { PageWrapper } from '/@/components/Page';
   import { Dropdown } from '/@/components/Dropdown';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { searchFormSchema } from './center.data';
+  import { ConfigurationPermission, searchFormSchema } from './center.data';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
   import { isDevMode } from '/@/utils/env';
@@ -98,6 +98,16 @@
 
   const [registerDrawer, { openDrawer }] = useDrawer();
 
+  const { hasPermission } = usePermission();
+
+  const getPreviewFlag = computed(() => {
+    return hasPermission(ConfigurationPermission.PREVIEW);
+  });
+
+  const getDesignFlag = computed(() => {
+    return hasPermission(ConfigurationPermission.DESIGN);
+  });
+
   const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
     if (record) {
       openDrawer(true, {
@@ -114,15 +124,15 @@
   const { configurationPrefix } = useGlobSetting();
   const isDev = isDevMode();
 
-  const { hasPermission } = usePermission();
   const handlePreview = (record: ConfigurationCenterItemsModal) => {
-    if (!hasPermission('api:yt:configuration:center:get_configuration_info:get')) return;
+    if (!unref(getPreviewFlag)) return;
     window.open(
       `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}&lightbox=1`
     );
   };
 
   const handleDesign = (record: ConfigurationCenterItemsModal) => {
+    if (!unref(getDesignFlag)) return;
     window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`);
   };
 
@@ -175,7 +185,9 @@
       >
         <template #header>
           <div class="flex gap-3 justify-end">
-            <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
+            <Authority :value="ConfigurationPermission.CREATE">
+              <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
+            </Authority>
             <Popover :trigger="['hover']">
               <template #content>
                 <div class="w-50">
@@ -204,7 +216,7 @@
           <List.Item>
             <Card hoverable>
               <template #cover>
-                <div class="h-full w-full !flex justify-center items-center text-center">
+                <div class="h-full w-full !flex justify-center items-center text-center p-1">
                   <img
                     class="w-full h-36"
                     alt="example"
@@ -214,29 +226,35 @@
                 </div>
               </template>
               <template class="ant-card-actions" #actions>
-                <Authority value="api:yt:configuration:center:get_configuration_info:get">
-                  <Tooltip title="预览">
-                    <EyeOutlined key="setting" @click="handlePreview(item)" />
-                  </Tooltip>
-                </Authority>
-                <Authority value="api:yt:configuration:center:get_configuration_info:get">
-                  <Tooltip title="设计">
-                    <EditOutlined key="edit" @click="handleDesign(item)" />
-                  </Tooltip>
-                </Authority>
+                <Tooltip title="预览">
+                  <EyeOutlined
+                    :class="getPreviewFlag ? '' : '!cursor-not-allowed !text-gray-200'"
+                    key="setting"
+                    @click="handlePreview(item)"
+                  />
+                </Tooltip>
+                <Tooltip title="设计">
+                  <EditOutlined
+                    :class="getDesignFlag ? '' : '!cursor-not-allowed !text-gray-200'"
+                    key="edit"
+                    @click="handleDesign(item)"
+                  />
+                </Tooltip>
                 <Dropdown
                   :dropMenuList="[
                     {
                       text: '编辑',
-                      auth: 'api:yt:configuration:center:update',
+                      auth: ConfigurationPermission.UPDATE,
                       icon: 'clarity:note-edit-line',
+                      event: '',
                       onClick: handleCreateOrUpdate.bind(null, item),
                     },
                     {
                       text: '删除',
-                      auth: 'api:yt:configuration:center:delete',
+                      auth: ConfigurationPermission.DELETE,
                       icon: 'ant-design:delete-outlined',
                       color: 'error',
+                      event: '',
                       onClick: handleDelete.bind(null, item),
                     },
                   ]"

 <script lang="ts" setup>
   import { computed, nextTick, onMounted, onUnmounted, Ref, ref, unref } from 'vue';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
-  import { Empty, Spin, Tooltip, Button } from 'ant-design-vue';
+  import { Empty, Spin } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { AggregateDataEnum, selectDeviceAttrSchema } from '/@/views/device/localtion/config.data';
   import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm';
@@ -13,8 +13,12 @@
   import { useHistoryData } from '../../hook/useHistoryData';
   import { formatToDateTime } from '/@/utils/dateUtil';
   import { useTable, BasicTable } from '/@/components/Table';
-  import { LineChartOutlined, BarsOutlined } from '@ant-design/icons-vue';
   import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
+  import {
+    ModeSwitchButton,
+    TABLE_CHART_MODE_LIST,
+    EnumTableChartMode,
+  } from '/@/components/Widget';
 
   interface DeviceDetail {
     tbDeviceId: string;
@@ -26,12 +30,7 @@
     attr?: string;
   }>();
 
-  enum Mode {
-    TABLE = 'table',
-    CHART = 'chart',
-  }
-
-  const mode = ref<Mode>(Mode.CHART);
+  const mode = ref<EnumTableChartMode>(EnumTableChartMode.CHART);
 
   const chartRef = ref();
 
@@ -151,9 +150,9 @@
             attrInfo?.detail.dataType.type as unknown as DataTypeEnum
           )
         ) {
-          mode.value = Mode.TABLE;
+          mode.value = EnumTableChartMode.TABLE;
         } else {
-          mode.value = Mode.CHART;
+          mode.value = EnumTableChartMode.CHART;
         }
       }
     } catch (error) {}
@@ -200,7 +199,7 @@
     setOptions(setChartOptions(res, selectedKeys));
   };
 
-  const switchMode = (flag: Mode) => {
+  const switchMode = (flag: EnumTableChartMode) => {
     mode.value = flag;
   };
 
@@ -221,55 +220,32 @@
     </section>
     <section class="bg-white p-3">
       <Spin :spinning="loading" :absolute="true">
-        <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
+          v-show="mode === EnumTableChartMode.CHART"
+          class="flex h-70px items-center justify-end p-2"
+        >
+          <ModeSwitchButton
+            v-model:value="mode"
+            :mode="TABLE_CHART_MODE_LIST"
+            @change="switchMode"
+          />
         </div>
         <div
-          v-show="isNull && mode === Mode.CHART"
+          v-show="isNull && mode === EnumTableChartMode.CHART"
           ref="chartRef"
           :style="{ height: '400px', width: '100%' }"
         >
         </div>
-        <Empty v-show="!isNull && mode === Mode.CHART" />
+        <Empty v-show="!isNull && mode === EnumTableChartMode.CHART" />
 
-        <BasicTable v-show="mode === Mode.TABLE" @register="registerTable">
+        <BasicTable v-show="mode === EnumTableChartMode.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 class="flex h-70px items-center justify-end p-2">
+              <ModeSwitchButton
+                v-model:value="mode"
+                :mode="TABLE_CHART_MODE_LIST"
+                @change="switchMode"
+              />
             </div>
           </template>
         </BasicTable>

 <script lang="ts" setup>
   import { nextTick, onUnmounted, reactive, ref, unref } from 'vue';
-  import { List, Button, Tooltip, Card } from 'ant-design-vue';
+  import { List, Button, 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';
@@ -20,6 +19,7 @@
   import { isArray, isObject } from '/@/utils/is';
   import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { ModeSwitchButton, EnumTableCardMode } from '/@/components/Widget';
 
   interface ReceiveMessage {
     data: {
@@ -112,14 +112,9 @@
 
   const [registerModal, { openModal }] = useModal();
 
-  enum Mode {
-    TABLE = 'table',
-    CARD = 'card',
-  }
-
-  const mode = ref<Mode>(Mode.CARD);
+  const mode = ref<EnumTableCardMode>(EnumTableCardMode.CARD);
 
-  const switchMode = async (value: Mode) => {
+  const switchMode = async (value: EnumTableCardMode) => {
     mode.value = value;
     await nextTick();
     setTableData(socketInfo.dataSource);
@@ -210,28 +205,14 @@
       </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
+        v-show="mode === EnumTableCardMode.CARD"
+        class="flex h-70px items-center justify-end p-2"
+      >
+        <ModeSwitchButton v-model:value="mode" @change="switchMode" />
       </div>
       <List
-        v-if="mode === Mode.CARD"
+        v-if="mode === EnumTableCardMode.CARD"
         class="list-mode !px-2"
         :data-source="socketInfo.dataSource"
         :grid="grid"
@@ -260,27 +241,13 @@
       </List>
     </section>
 
-    <BasicTable v-if="mode === Mode.TABLE" @register="registerTable">
+    <BasicTable v-if="mode === EnumTableCardMode.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
+          v-show="mode === EnumTableCardMode.TABLE"
+          class="flex h-70px items-center justify-end p-2"
+        >
+          <ModeSwitchButton v-model:value="mode" @change="switchMode" />
         </div>
       </template>
     </BasicTable>

@@ -50,28 +50,18 @@
       <TimePeriodForm @register="timePeriodRegister" />
       <section>
         <Spin :spinning="loading">
-          <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
+            v-show="mode === EnumTableChartMode.CHART"
+            class="flex h-70px items-center justify-end p-2"
+          >
+            <ModeSwitchButton
+              v-model:value="mode"
+              :mode="TABLE_CHART_MODE_LIST"
+              @change="switchMode"
+            />
           </div>
           <div
-            v-show="isNull && mode === Mode.CHART"
+            v-show="isNull && mode === EnumTableChartMode.CHART"
             ref="chartRef"
             :style="{ height: '400px', width }"
           >
@@ -79,30 +69,17 @@
           <Empty
             :style="{ height: '550px', width }"
             class="flex flex-col justify-center items-center"
-            v-show="!isNull && mode === Mode.CHART"
+            v-show="!isNull && mode === EnumTableChartMode.CHART"
           />
 
-          <BasicTable v-show="mode === Mode.TABLE" @register="registerAttrTable">
+          <BasicTable v-show="mode === EnumTableChartMode.TABLE" @register="registerAttrTable">
             <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 class="flex h-70px items-center justify-end p-2">
+                <ModeSwitchButton
+                  v-model:value="mode"
+                  :mode="TABLE_CHART_MODE_LIST"
+                  @change="switchMode"
+                />
               </div>
             </template>
           </BasicTable>
@@ -134,7 +111,7 @@
   import { formSchema, columns } from './config.data';
   import { BasicTable, useTable } from '/@/components/Table';
   import { devicePage } from '/@/api/alarm/contact/alarmContact';
-  import { Tag, Empty, Spin, Tooltip, Button } from 'ant-design-vue';
+  import { Tag, Empty, Spin } 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';
@@ -157,8 +134,12 @@
   import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
   import { useAsyncQueue } from './useAsyncQueue';
   import { useHistoryData } from '../list/hook/useHistoryData';
-  import { LineChartOutlined, BarsOutlined } from '@ant-design/icons-vue';
   import { formatToDateTime } from '/@/utils/dateUtil';
+  import {
+    TABLE_CHART_MODE_LIST,
+    EnumTableChartMode,
+    ModeSwitchButton,
+  } from '/@/components/Widget';
 
   interface DeviceInfo {
     alarmStatus: 0 | 1;
@@ -183,10 +164,7 @@
       DeviceDetailDrawer,
       TimePeriodForm,
       Spin,
-      Tooltip,
-      Button,
-      LineChartOutlined,
-      BarsOutlined,
+      ModeSwitchButton,
     },
     props: {
       width: {
@@ -199,12 +177,7 @@
       },
     },
     setup() {
-      enum Mode {
-        TABLE = 'table',
-        CHART = 'chart',
-      }
-
-      const mode = ref<Mode>(Mode.CHART);
+      const mode = ref<EnumTableChartMode>(EnumTableChartMode.CHART);
       let entityId = '';
       let globalRecord: any = {};
       const wrapRef = ref<HTMLDivElement | null>(null);
@@ -571,13 +544,14 @@
         openGatewayDetailDrawer(true, data);
       };
 
-      const switchMode = (flag: Mode) => {
+      const switchMode = (flag: EnumTableChartMode) => {
         mode.value = flag;
       };
 
       return {
         mode,
-        Mode,
+        EnumTableChartMode,
+        TABLE_CHART_MODE_LIST,
         wrapRef,
         registerTable,
         deviceRowClick,

+<script lang="ts" setup>
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { List, Button, Tooltip, Card, PaginationProps, Image } from 'ant-design-vue';
+  import { ReloadOutlined, EyeOutlined, FormOutlined, MoreOutlined } from '@ant-design/icons-vue';
+  import { computed, onMounted, reactive, ref, unref } from 'vue';
+  import { CardLayoutButton, EnumTableCardMode, ModeSwitchButton } from '/@/components/Widget';
+  import { Authority } from '/@/components/Authority';
+  import {
+    deviceConfigDelete,
+    deviceConfigGetQuery,
+    setDeviceProfileIsDefaultApi,
+  } from '/@/api/device/deviceConfigApi';
+  import { ProfileRecord } from '/@/api/device/model/deviceConfigModel';
+  import { Dropdown } from '/@/components/Dropdown';
+  import {
+    defaultObj,
+    searchFormSchema,
+    DeviceTypeName,
+    ProductPermission,
+  } from './device.profile.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
+  import DeviceProfileModal from './DeviceProfileModal.vue';
+  import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
+  import { useModal } from '/@/components/Modal';
+  import { useDrawer } from '/@/components/Drawer';
+  import productDefault from '/@/assets/icons/product-default.svg';
+  import { usePermission } from '/@/hooks/web/usePermission';
+
+  defineProps<{
+    mode: EnumTableCardMode;
+  }>();
+
+  const emit = defineEmits(['changeMode']);
+
+  enum DropMenuEvent {
+    SET_DEFAULT = 'setDefault',
+    DELETE = 'delete',
+  }
+  const IMAGE_FALLBACK = productDefault;
+
+  const { createMessage } = useMessage();
+  const { createSyncConfirm } = useSyncConfirm();
+
+  const [register, { getFieldsValue }] = useForm({
+    showAdvancedButton: true,
+    labelWidth: 100,
+    compact: true,
+    baseColProps: { span: 8 },
+    schemas: searchFormSchema,
+    submitFunc: async () => {
+      getDataSource();
+    },
+  });
+
+  const [registerModal, { openModal }] = useModal();
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const loading = ref(false);
+
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showTotal: (total: number) => `共 ${total} 条数据`,
+    current: 1,
+    onChange: (page: number) => {
+      pagination.current = page;
+      getDataSource();
+    },
+  });
+
+  const dataSource = ref<ProfileRecord[]>([]);
+
+  const colNumber = ref(4);
+
+  const getSelectAllFlag = computed(() => {
+    return unref(dataSource).every((item) => item.checked);
+  });
+
+  const getCheckedRecord = computed(() => {
+    return unref(dataSource)
+      .filter((item) => item.checked)
+      .map((item) => item.id);
+  });
+
+  const getDataSource = async () => {
+    try {
+      loading.value = true;
+      const params = getFieldsValue();
+      const { items, total } = await deviceConfigGetQuery({
+        page: pagination.current,
+        pageSize: unref(colNumber) * 2,
+        ...params,
+      });
+      pagination.total = total;
+      dataSource.value = items.map((item) => ({ ...item, checked: false }));
+    } catch (error) {
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const { hasPermission } = usePermission();
+
+  const getHasDeleteFlag = computed(() => {
+    return hasPermission(ProductPermission.DELETE);
+  });
+
+  const getHasDetailFlag = computed(() => {
+    return hasPermission(ProductPermission.DETAIL);
+  });
+
+  const getHasUpdateFlag = computed(() => {
+    return hasPermission(ProductPermission.UPDATE);
+  });
+
+  const getDropDownList = (record: ProfileRecord) => {
+    const list = [
+      {
+        text: '默认',
+        event: DropMenuEvent.SET_DEFAULT,
+        icon: 'ant-design:unordered-list-outlined',
+        onClick: handleSetDefault.bind(null, record),
+      },
+    ];
+    if (unref(getHasDeleteFlag)) {
+      list.push({
+        text: '删除',
+        event: DropMenuEvent.DELETE,
+        icon: 'ant-design:delete-outlined',
+        onClick: handleDelete.bind(null, [record.id]),
+      });
+    }
+    return list;
+  };
+
+  const handleModeChange = (mode: EnumTableCardMode) => {
+    emit('changeMode', mode);
+  };
+
+  const handleCheckCard = (item: ProfileRecord) => {
+    item.checked = !item.checked;
+  };
+
+  const handleSelectAll = () => {
+    dataSource.value = unref(dataSource).map((item) => {
+      return {
+        ...item,
+        checked: !unref(getSelectAllFlag),
+      };
+    });
+  };
+
+  const handleCreate = () => {
+    openModal(true, {
+      isUpdate: false,
+    });
+  };
+
+  const handleShowDetail = (record: ProfileRecord) => {
+    if (!unref(getHasDetailFlag)) return;
+    openDrawer(true, { record });
+  };
+
+  const handleUpdate = (record: ProfileRecord) => {
+    if (!unref(getHasUpdateFlag)) return;
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  };
+
+  const handleDelete = async (id: string[]) => {
+    try {
+      await createSyncConfirm({ iconType: 'warning', content: '是否确认删除操作?' });
+      await deviceConfigDelete(id);
+      createMessage.success('删除成功');
+      await getDataSource();
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const handleSetDefault = async (record: ProfileRecord) => {
+    try {
+      const { tbProfileId } = record;
+      const data = await setDeviceProfileIsDefaultApi(tbProfileId, 'default', defaultObj);
+      if (!data) return createMessage.error('设置该产品为默认失败');
+      createMessage.success('设置该产品为默认成功');
+      await getDataSource();
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  onMounted(() => {
+    getDataSource();
+  });
+</script>
+
+<template>
+  <PageWrapper dense contentFullHeight contentClass="flex">
+    <section class="flex-auto p-4 w-full profile-list">
+      <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
+        <BasicForm @register="register" />
+      </div>
+      <List
+        ref="listEl"
+        :loading="loading"
+        class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"
+        position="bottom"
+        :pagination="pagination"
+        :data-source="dataSource"
+        :grid="{ gutter: 4, column: colNumber }"
+      >
+        <template #header>
+          <div class="flex gap-3 justify-end">
+            <Authority :value="ProductPermission.CREATE">
+              <Button type="primary" @click="handleCreate">新增产品</Button>
+            </Authority>
+
+            <Button type="primary" @click="handleSelectAll">
+              {{ getSelectAllFlag ? '反选' : '全选' }}
+            </Button>
+            <Authority :value="ProductPermission.DELETE">
+              <Button
+                type="primary"
+                danger
+                :disabled="!getCheckedRecord.length"
+                @click="handleDelete(getCheckedRecord)"
+              >
+                批量删除
+              </Button>
+            </Authority>
+
+            <ModeSwitchButton :value="$props.mode" @change="handleModeChange" />
+            <CardLayoutButton v-model:value="colNumber" @change="getDataSource" />
+
+            <Tooltip title="刷新">
+              <Button type="primary" @click="getDataSource">
+                <ReloadOutlined :spin="loading" />
+              </Button>
+            </Tooltip>
+          </div>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item>
+            <Card
+              hoverable
+              @click="handleCheckCard(item)"
+              :class="item.checked ? '!border-blue-500 !border-2' : ''"
+            >
+              <template #cover>
+                <div class="h-full w-full !flex justify-center items-center text-center p-1">
+                  <Image
+                    @click.stop
+                    :height="144"
+                    :src="item.image"
+                    placeholder
+                    :fallback="IMAGE_FALLBACK"
+                  />
+                </div>
+              </template>
+              <template class="ant-card-actions" #actions>
+                <Tooltip title="详情">
+                  <EyeOutlined
+                    :class="getHasDetailFlag ? '' : '!cursor-not-allowed !text-gray-200'"
+                    key="setting"
+                    @click.stop="handleShowDetail(item)"
+                  />
+                </Tooltip>
+                <Tooltip title="编辑">
+                  <FormOutlined
+                    :class="getHasUpdateFlag ? '' : '!cursor-not-allowed !text-gray-200'"
+                    key="edit"
+                    @click.stop="handleUpdate(item)"
+                  />
+                </Tooltip>
+                <Dropdown :trigger="['hover']" :drop-menu-list="getDropDownList(item)">
+                  <MoreOutlined @click.stop class="transform rotate-90" />
+                </Dropdown>
+              </template>
+              <Card.Meta>
+                <template #title>
+                  <span class="truncate"> {{ item.name }} </span>
+                </template>
+                <template #description>
+                  <div class="truncate h-11">
+                    <div class="truncate">{{ DeviceTypeName[item.deviceType] }} </div>
+                    <div class="truncate">{{ item.transportType }} </div>
+                  </div>
+                </template>
+              </Card.Meta>
+            </Card>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+    <DeviceProfileModal @register="registerModal" @success="getDataSource" />
+    <DeviceProfileDrawer @register="registerDrawer" />
+  </PageWrapper>
+</template>
+
+<style lang="less" scoped>
+  .profile-list:deep(.ant-image-img) {
+    width: 100% !important;
+    height: 100% !important;
+  }
+</style>

+<template>
+  <div>
+    <BasicTable
+      class="devide-profiles"
+      @register="registerTable"
+      :rowSelection="{ type: 'checkbox' }"
+      :clickToRowSelect="false"
+    >
+      <template #toolbar>
+        <Authority :value="ProductPermission.CREATE">
+          <a-button type="primary" @click="handleCreate"> 新增产品 </a-button>
+        </Authority>
+        <Authority :value="ProductPermission.IMPORT">
+          <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
+            <a-button @click="handleImport"> 导入产品 </a-button>
+          </ImpExcel>
+        </Authority>
+        <Authority :value="ProductPermission.DELETE">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+        <ModeSwitchButton :value="$props.mode" @change="handleModeChange" />
+      </template>
+      <template #img="{ record }">
+        <TableImg
+          :size="30"
+          :showBadge="false"
+          :simpleShow="true"
+          :imgList="
+            typeof record.image !== 'undefined' && record.image !== '' && record.image != null
+              ? [record.image]
+              : null
+          "
+        />
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              auth: ProductPermission.DETAIL,
+              icon: 'ant-design:eye-outlined',
+              onClick: handleDetailView.bind(null, record),
+            },
+            {
+              label: '编辑',
+              auth: ProductPermission.UPDATE,
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+              ifShow: () => {
+                return record.name !== 'default' ? true : false;
+              },
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '默认',
+              icon: 'ant-design:profile-outlined',
+              onClick: handleSetDefault.bind(null, record),
+              ifShow: () => {
+                return record.default === false;
+              },
+            },
+            {
+              label: '导出',
+              auth: ProductPermission.EXPORT,
+              icon: 'ant-design:login-outlined',
+              onClick: handleExport.bind(null, record),
+            },
+            {
+              label: '删除',
+              auth: ProductPermission.DELETE,
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+              ifShow: () => {
+                return record.default === false && record.name !== 'default';
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <DeviceProfileModal @register="registerModal" @success="handleSuccess" />
+    <DeviceProfileDrawer @register="registerDrawer" />
+    <ExpExcelModal
+      ref="expExcelModalRef"
+      @register="registerExportModal"
+      @success="defaultHeader"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, nextTick, onUnmounted } from 'vue';
+  import { BasicTable, TableImg, useTable, TableAction, BasicColumn } from '/@/components/Table';
+  import { columns, searchFormSchema, defaultObj, ProductPermission } from './device.profile.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import {
+    deviceConfigGetQuery,
+    deviceConfigDelete,
+    setDeviceProfileIsDefaultApi,
+  } from '/@/api/device/deviceConfigApi';
+  import { useModal } from '/@/components/Modal';
+  import { useDrawer } from '/@/components/Drawer';
+  import DeviceProfileModal from '/@/views/device/profiles/DeviceProfileModal.vue';
+  import { ImpExcel, ExcelData } from '/@/components/Excel';
+  import { jsonToSheetXlsx, ExpExcelModal, ExportModalResult } from '/@/components/Excel';
+  import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Popconfirm } from 'ant-design-vue';
+  import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
+  import { EnumTableCardMode, ModeSwitchButton } from '/@/components/Widget';
+
+  defineProps<{
+    mode: EnumTableCardMode;
+  }>();
+
+  const emit = defineEmits(['changeMode']);
+
+  const exportData: any = ref([]);
+  const expExcelModalRef: any = ref(null);
+  const getPathUrl = ref('');
+  const getPathUrlName = ref('');
+  const disabled = ref(true);
+  const onCloseVal = ref(0);
+  const immediateStatus = ref(false);
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal }] = useModal();
+  const [registerExportModal, { openModal: openModalExcel }] = useModal();
+  const [registerTable, { setProps, reload, setTableData, getForm }] = useTable({
+    title: '产品列表',
+    clickToRowSelect: false,
+    api: deviceConfigGetQuery,
+    immediate: immediateStatus.value,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    rowKey: 'id',
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+    deviceConfigDelete,
+    handleSuccess,
+    setProps
+  );
+  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+    // Demo:status为1的选择框禁用
+    if (record.default === true) {
+      return { disabled: true };
+    } else if (record.name == 'default') {
+      return { disabled: true };
+    } else {
+      return { disabled: false };
+    }
+  };
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+  /**
+   *@param url,name
+   **/
+  function getParam(url, name) {
+    try {
+      let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
+      let r = url.split('?')[1].match(reg);
+      if (r != null) {
+        return r[2];
+      }
+      return ''; //如果此处只写return;则返回的是undefined
+    } catch (e) {
+      return ''; //如果此处只写return;则返回的是undefined
+    }
+  }
+  getPathUrl.value = window.location.href;
+  const name = 'name';
+  const getName = getParam(getPathUrl.value, name);
+  getPathUrlName.value = decodeURIComponent(getName);
+
+  const setRowClassName = async () => {
+    if (getPathUrlName.value !== '') {
+      const { items } = await deviceConfigGetQuery({
+        page: 1,
+        pageSize: 10,
+        name: getPathUrlName.value,
+      });
+      nextTick(() => {
+        setTableData(items);
+        const { setFieldsValue, resetFields } = getForm();
+        setFieldsValue({
+          name: getPathUrlName.value,
+        });
+        if (onCloseVal.value == 1) {
+          resetFields();
+        }
+      });
+    } else {
+      setTimeout(() => {
+        reload();
+      }, 80);
+    }
+  };
+  setRowClassName();
+  onUnmounted(() => {
+    getPathUrlName.value = '';
+    onCloseVal.value = 1;
+  });
+  const tableListRef = ref<
+    {
+      title: string;
+      columns?: any[];
+      dataSource?: any[];
+    }[]
+  >([]);
+
+  function loadDataSuccess(excelDataList: ExcelData[]) {
+    tableListRef.value = [];
+    console.log(excelDataList);
+    for (const excelData of excelDataList) {
+      const {
+        header,
+        results,
+        meta: { sheetName },
+      } = excelData;
+      const columns: BasicColumn[] = [];
+      for (const title of header) {
+        columns.push({ title, dataIndex: title });
+      }
+      tableListRef.value.push({ title: sheetName, dataSource: results, columns });
+    }
+  }
+  //新增
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+  //编辑
+  function handleEdit(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  //详情
+  function handleDetailView(record: Recordable) {
+    openDrawer(true, { record });
+  }
+
+  function defaultHeader({ filename, bookType }: ExportModalResult) {
+    // 默认Object.keys(data[0])作为header
+    const data = exportData.value;
+    jsonToSheetXlsx({
+      data,
+      filename,
+      write2excelOpts: {
+        bookType,
+      },
+    });
+  }
+  //导出
+  const handleExport = (record: Recordable) => {
+    exportData.value = [];
+    exportData.value.push({
+      createTime: record.createTime,
+      description: record.description,
+      name: record.name,
+    });
+    nextTick(() => {
+      openModalExcel();
+      expExcelModalRef.value?.clearFieldFunc();
+    });
+  };
+  //导入
+  function handleImport() {
+    console.log('record');
+  }
+  function handleSuccess() {
+    reload();
+  }
+
+  const handleSetDefault = async (record: Recordable) => {
+    let id = record.tbProfileId;
+    const data = await setDeviceProfileIsDefaultApi(id, 'default', defaultObj);
+    if (!data) return createMessage.error('设置该产品为默认失败');
+    createMessage.success('设置该产品为默认成功');
+    reload();
+    disabled.value = true;
+  };
+
+  const handleModeChange = (value: EnumTableCardMode) => {
+    emit('changeMode', value);
+  };
+</script>
+
+<style lang="css">
+  .devide-profiles .rowcolor {
+    color: red;
+  }
+
+  .devide-profiles .rowcolor2 {
+    background: #a2c3e6;
+  }
+</style>

@@ -9,6 +9,26 @@ import { FormField, FunctionType } from './step/cpns/physical/cpns/config';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 
+export enum Mode {
+  CARD = 'card',
+  TABLE = 'table',
+}
+
+export enum DeviceTypeName {
+  DIRECT_CONNECTION = '直连设备',
+  GATEWAY = '网关设备',
+  SENSOR = '网关子设备',
+}
+export enum ProductPermission {
+  DETAIL = 'api:yt:deviceProfile:get',
+  CREATE = 'api:yt:deviceProfile:post',
+  UPDATE = 'api:yt:deviceProfile:update',
+  DELETE = 'api:yt:deviceProfile:delete',
+  SET_DEFAULT = '',
+  IMPORT = 'api:yt:deviceProfile:import',
+  EXPORT = 'api:yt:deviceProfile:export',
+}
+
 export enum ModelOfMatterPermission {
   CREATE = 'api:yt:things_model:post',
   UPDATE = 'api:yt:things_model:put',

-<template>
-  <div>
-    <BasicTable
-      class="devide-profiles"
-      @register="registerTable"
-      :rowSelection="{ type: 'checkbox' }"
-      :clickToRowSelect="false"
-    >
-      <template #toolbar>
-        <Authority value="api:yt:deviceProfile:post">
-          <a-button type="primary" @click="handleCreate"> 新增产品 </a-button>
-        </Authority>
-        <Authority value="api:yt:deviceProfile:import">
-          <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
-            <a-button @click="handleImport"> 导入产品 </a-button>
-          </ImpExcel>
-        </Authority>
-        <Authority value="api:yt:deviceProfile:delete">
-          <Popconfirm
-            title="您确定要批量删除数据"
-            ok-text="确定"
-            cancel-text="取消"
-            @confirm="handleDeleteOrBatchDelete(null)"
-          >
-            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
-          </Popconfirm>
-        </Authority>
-      </template>
-      <template #img="{ record }">
-        <TableImg
-          :size="30"
-          :showBadge="false"
-          :simpleShow="true"
-          :imgList="
-            typeof record.image !== 'undefined' && record.image !== '' && record.image != null
-              ? [record.image]
-              : null
-          "
-        />
-      </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '详情',
-              auth: 'api:yt:deviceProfile:get',
-              icon: 'ant-design:eye-outlined',
-              onClick: handleDetailView.bind(null, record),
-            },
-            {
-              label: '编辑',
-              auth: 'api:yt:deviceProfile:update',
-              icon: 'clarity:note-edit-line',
-              onClick: handleEdit.bind(null, record),
-              ifShow: () => {
-                return record.name !== 'default' ? true : false;
-              },
-            },
-          ]"
-          :drop-down-actions="[
-            {
-              label: '默认',
-              icon: 'ant-design:profile-outlined',
-              onClick: handleSetDefault.bind(null, record),
-              ifShow: () => {
-                return record.default === false;
-              },
-            },
-            {
-              label: '导出',
-              auth: 'api:yt:deviceProfile:export',
-              icon: 'ant-design:login-outlined',
-              onClick: handleExport.bind(null, record),
-            },
-            {
-              label: '删除',
-              auth: 'api:yt:deviceProfile:delete',
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              popConfirm: {
-                title: '是否确认删除',
-                confirm: handleDeleteOrBatchDelete.bind(null, record),
-              },
-              ifShow: () => {
-                return record.default === false && record.name !== 'default';
-              },
-            },
-          ]"
-        />
-      </template>
-    </BasicTable>
-    <DeviceProfileModal @register="registerModal" @success="handleSuccess" />
-    <DeviceProfileDrawer @register="registerDrawer" />
-    <ExpExcelModal
-      ref="expExcelModalRef"
-      @register="registerExportModal"
-      @success="defaultHeader"
-    />
-  </div>
-</template>
 <script lang="ts" setup>
-  import { ref, nextTick, onUnmounted } from 'vue';
-  import { BasicTable, TableImg, useTable, TableAction, BasicColumn } from '/@/components/Table';
-  import { columns, searchFormSchema, defaultObj } from './device.profile.data';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import {
-    deviceConfigGetQuery,
-    deviceConfigDelete,
-    setDeviceProfileIsDefaultApi,
-  } from '/@/api/device/deviceConfigApi';
-  import { useModal } from '/@/components/Modal';
-  import { useDrawer } from '/@/components/Drawer';
-  import DeviceProfileModal from '/@/views/device/profiles/DeviceProfileModal.vue';
-  import { ImpExcel, ExcelData } from '/@/components/Excel';
-  import { jsonToSheetXlsx, ExpExcelModal, ExportModalResult } from '/@/components/Excel';
-  import { Authority } from '/@/components/Authority';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { Popconfirm } from 'ant-design-vue';
-  import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
-
-  const exportData: any = ref([]);
-  const expExcelModalRef: any = ref(null);
-  const getPathUrl = ref('');
-  const getPathUrlName = ref('');
-  const disabled = ref(true);
-  const onCloseVal = ref(0);
-  const immediateStatus = ref(false);
-  const { createMessage } = useMessage();
-  const [registerModal, { openModal }] = useModal();
-  const [registerExportModal, { openModal: openModalExcel }] = useModal();
-  const [registerTable, { setProps, reload, setTableData, getForm }] = useTable({
-    title: '产品列表',
-    clickToRowSelect: false,
-    api: deviceConfigGetQuery,
-    immediate: immediateStatus.value,
-    columns,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-    },
-    rowKey: 'id',
-    useSearchForm: true,
-    showTableSetting: true,
-    bordered: true,
-    showIndexColumn: false,
-    actionColumn: {
-      width: 200,
-      title: '操作',
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-      fixed: 'right',
-    },
-  });
-  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-    deviceConfigDelete,
-    handleSuccess,
-    setProps
-  );
-  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
-    // Demo:status为1的选择框禁用
-    if (record.default === true) {
-      return { disabled: true };
-    } else if (record.name == 'default') {
-      return { disabled: true };
-    } else {
-      return { disabled: false };
-    }
-  };
-  nextTick(() => {
-    setProps(selectionOptions);
-  });
-  /**
-   *@param url,name
-   **/
-  function getParam(url, name) {
-    try {
-      let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
-      let r = url.split('?')[1].match(reg);
-      if (r != null) {
-        return r[2];
-      }
-      return ''; //如果此处只写return;则返回的是undefined
-    } catch (e) {
-      return ''; //如果此处只写return;则返回的是undefined
-    }
-  }
-  getPathUrl.value = window.location.href;
-  const name = 'name';
-  const getName = getParam(getPathUrl.value, name);
-  getPathUrlName.value = decodeURIComponent(getName);
-
-  const setRowClassName = async () => {
-    if (getPathUrlName.value !== '') {
-      const { items } = await deviceConfigGetQuery({
-        page: 1,
-        pageSize: 10,
-        name: getPathUrlName.value,
-      });
-      nextTick(() => {
-        setTableData(items);
-        const { setFieldsValue, resetFields } = getForm();
-        setFieldsValue({
-          name: getPathUrlName.value,
-        });
-        if (onCloseVal.value == 1) {
-          resetFields();
-        }
-      });
-    } else {
-      setTimeout(() => {
-        reload();
-      }, 80);
-    }
-  };
-  setRowClassName();
-  onUnmounted(() => {
-    getPathUrlName.value = '';
-    onCloseVal.value = 1;
-  });
-  const tableListRef = ref<
-    {
-      title: string;
-      columns?: any[];
-      dataSource?: any[];
-    }[]
-  >([]);
-
-  function loadDataSuccess(excelDataList: ExcelData[]) {
-    tableListRef.value = [];
-    console.log(excelDataList);
-    for (const excelData of excelDataList) {
-      const {
-        header,
-        results,
-        meta: { sheetName },
-      } = excelData;
-      const columns: BasicColumn[] = [];
-      for (const title of header) {
-        columns.push({ title, dataIndex: title });
-      }
-      tableListRef.value.push({ title: sheetName, dataSource: results, columns });
-    }
-  }
-  //新增
-  function handleCreate() {
-    openModal(true, {
-      isUpdate: false,
-    });
-  }
-  //编辑
-  function handleEdit(record: Recordable) {
-    openModal(true, {
-      record,
-      isUpdate: true,
-    });
-  }
-
-  const [registerDrawer, { openDrawer }] = useDrawer();
-  //详情
-  function handleDetailView(record: Recordable) {
-    openDrawer(true, { record });
-  }
-
-  function defaultHeader({ filename, bookType }: ExportModalResult) {
-    // 默认Object.keys(data[0])作为header
-    const data = exportData.value;
-    jsonToSheetXlsx({
-      data,
-      filename,
-      write2excelOpts: {
-        bookType,
-      },
-    });
-  }
-  //导出
-  const handleExport = (record: Recordable) => {
-    exportData.value = [];
-    exportData.value.push({
-      createTime: record.createTime,
-      description: record.description,
-      name: record.name,
-    });
-    nextTick(() => {
-      openModalExcel();
-      expExcelModalRef.value?.clearFieldFunc();
-    });
-  };
-  //导入
-  function handleImport() {
-    console.log('record');
-  }
-  function handleSuccess() {
-    reload();
-  }
-
-  const handleSetDefault = async (record: Recordable) => {
-    let id = record.tbProfileId;
-    const data = await setDeviceProfileIsDefaultApi(id, 'default', defaultObj);
-    if (!data) return createMessage.error('设置该产品为默认失败');
-    createMessage.success('设置该产品为默认成功');
-    reload();
-    disabled.value = true;
+  import { ref } from 'vue';
+  import TableMode from './TableMode.vue';
+  import CardMode from './CardMode.vue';
+  import { EnumTableCardMode } from '/@/components/Widget';
+  const mode = ref(EnumTableCardMode.CARD);
+
+  const handleChangeMode = (flag: EnumTableCardMode) => {
+    mode.value = flag;
   };
 </script>
 
-<style lang="css">
-  .devide-profiles .rowcolor {
-    color: red;
-  }
-
-  .devide-profiles .rowcolor2 {
-    background: #a2c3e6;
-  }
-</style>
+<template>
+  <section>
+    <CardMode v-if="mode === EnumTableCardMode.CARD" :mode="mode" @change-mode="handleChangeMode" />
+    <TableMode
+      v-if="mode === EnumTableCardMode.TABLE"
+      :mode="mode"
+      @change-mode="handleChangeMode"
+    />
+  </section>
+</template>

@@ -152,6 +152,17 @@
       field: 'transportType',
       componentProps: {
         disabled: status,
+        options: [
+          { label: '默认', value: 'DEFAULT' },
+          { label: 'MQTT', value: 'MQTT' },
+          { label: 'CoAP', value: 'COAP' },
+          { label: 'LWM2M', value: 'LWM2M' },
+          { label: 'SNMP', value: 'SNMP' },
+          { label: 'TCP', value: 'TCP' },
+        ],
+        onChange(e) {
+          isMqttType.value = e;
+        },
       },
     });
   };

 <script lang="ts" setup>
   import { computed, nextTick, Ref, ref, unref } from 'vue';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
-  import { Empty, Tooltip, Button, Spin } from 'ant-design-vue';
+  import { Empty, Spin } 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,19 +14,18 @@
   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';
+  import {
+    ModeSwitchButton,
+    TABLE_CHART_MODE_LIST,
+    EnumTableChartMode,
+  } from '/@/components/Widget';
 
   type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
 
   defineEmits(['register']);
 
-  enum Mode {
-    TABLE = 'table',
-    CHART = 'chart',
-  }
-
-  const mode = ref<Mode>(Mode.CHART);
+  const mode = ref<EnumTableChartMode>(EnumTableChartMode.CHART);
 
   const chartRef = ref();
 
@@ -245,7 +244,7 @@
     destory();
   };
 
-  const switchMode = (flag: Mode) => {
+  const switchMode = (flag: EnumTableChartMode) => {
     mode.value = flag;
   };
 </script>
@@ -269,61 +268,38 @@
       </section>
       <section class="bg-white p-3" style="min-height: 350px">
         <Spin :spinning="loading" :absolute="true">
-          <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
+            v-show="mode === EnumTableChartMode.CHART"
+            class="flex h-70px items-center justify-end p-2"
+          >
+            <ModeSwitchButton
+              v-model:value="mode"
+              :mode="TABLE_CHART_MODE_LIST"
+              @change="switchMode"
+            />
           </div>
 
           <div
-            v-show="isNull && mode === Mode.CHART"
+            v-show="isNull && mode === EnumTableChartMode.CHART"
             ref="chartRef"
             :style="{ height: '350px', width: '100%' }"
           >
           </div>
           <Empty
-            v-if="mode === Mode.CHART"
+            v-if="mode === EnumTableChartMode.CHART"
             class="h-350px flex flex-col justify-center items-center"
             description="暂无数据，请选择设备查询"
             v-show="!isNull"
           />
 
-          <BasicTable v-show="mode === Mode.TABLE" @register="registerTable">
+          <BasicTable v-show="mode === EnumTableChartMode.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 class="flex h-70px items-center justify-end p-2">
+                <ModeSwitchButton
+                  v-model:value="mode"
+                  :mode="TABLE_CHART_MODE_LIST"
+                  @change="switchMode"
+                />
               </div>
             </template>
           </BasicTable>