Merge branch 'sqy_dev' into 'main'

'feat:地图搜索完善,fix:OEM调整,实时数据支持模糊查询,动态修改标题'

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

@@ -11,7 +11,6 @@
   import { AppProvider } from '/@/components/Application';
   import { AppProvider } from '/@/components/Application';
   import { useTitle } from '/@/hooks/web/useTitle';
   import { useTitle } from '/@/hooks/web/useTitle';
   import { useLocale } from '/@/locales/useLocale';
   import { useLocale } from '/@/locales/useLocale';
-
   // support Multi-language
   // support Multi-language
   const { getAntdLocale } = useLocale();
   const { getAntdLocale } = useLocale();
 
 

-<!--
- * @Author: Vben
- * @Description: logo component
--->
-
 <template>
 <template>
-  <div class="application" :class="getAppLogoClass">
+  <div class="anticon" :class="getAppLogoClass" @click="goHome">
     <img v-if="getLogo" :src="getLogo" />
     <img v-if="getLogo" :src="getLogo" />
     <img v-else src="/src/assets/images/logo.png" />
     <img v-else src="/src/assets/images/logo.png" />
-    <span
-      class="ml-2 md:opacity-100"
-      :class="getTitleClass"
-      v-show="showTitle"
-      style="white-space: nowrap; font-size: small; color: #f3f4fb"
-    >
+    <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
       {{ getTitle }}
       {{ getTitle }}
-    </span>
+    </div>
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
@@ -96,6 +86,7 @@
       font-size: 16px;
       font-size: 16px;
       font-weight: 700;
       font-weight: 700;
       transition: all 0.5s;
       transition: all 0.5s;
+      line-height: normal;
     }
     }
   }
   }
 </style>
 </style>

@@ -3,7 +3,7 @@ import { useI18n } from '/@/hooks/web/useI18n';
 import { useTitle as usePageTitle } from '@vueuse/core';
 import { useTitle as usePageTitle } from '@vueuse/core';
 import { useGlobSetting } from '/@/hooks/setting';
 import { useGlobSetting } from '/@/hooks/setting';
 import { useRouter } from 'vue-router';
 import { useRouter } from 'vue-router';
-
+import { createLocalStorage } from '/@/utils/cache/index';
 import { REDIRECT_NAME } from '/@/router/constant';
 import { REDIRECT_NAME } from '/@/router/constant';
 
 
 export function useTitle() {
 export function useTitle() {
@@ -12,7 +12,7 @@ export function useTitle() {
   const { currentRoute } = useRouter();
   const { currentRoute } = useRouter();
 
 
   const pageTitle = usePageTitle();
   const pageTitle = usePageTitle();
-
+  const storage = createLocalStorage();
   watch(
   watch(
     () => currentRoute.value.path,
     () => currentRoute.value.path,
     () => {
     () => {
@@ -22,7 +22,9 @@ export function useTitle() {
       }
       }
 
 
       const tTitle = t(route?.meta?.title as string);
       const tTitle = t(route?.meta?.title as string);
-      pageTitle.value = tTitle ? ` ${tTitle} - ${title} ` : `${title}`;
+      pageTitle.value = tTitle
+        ? ` ${tTitle} - ${storage.get('platInfo').name ?? title} `
+        : `${title}`;
     },
     },
     { immediate: true }
     { immediate: true }
   );
   );

@@ -42,7 +42,7 @@ export const emailRule: Rule[] = [
   {
   {
     validator: (_, value: string) => {
     validator: (_, value: string) => {
       const reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
       const reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
-      if (value === '') {
+      if (!value) {
         return Promise.resolve();
         return Promise.resolve();
       } else if (!reg.test(value)) {
       } else if (!reg.test(value)) {
         return Promise.reject('电子邮箱格式不正确');
         return Promise.reject('电子邮箱格式不正确');

@@ -43,7 +43,12 @@
       </Card>
       </Card>
       <Card title="联系我们" :bordered="false" v-bind="$attrs" :headStyle="{ padding: 0 }">
       <Card title="联系我们" :bordered="false" v-bind="$attrs" :headStyle="{ padding: 0 }">
         <template #cover>
         <template #cover>
-          <img :src="getQrCode" alt="" style="width: 150px; height: 150px; margin: 50px auto" />
+          <img
+            :src="getQrCode"
+            v-if="getQrCode"
+            style="width: 150px; height: 150px; margin: 50px auto"
+          />
+          <Empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
         </template>
         </template>
         <CardMeta>
         <CardMeta>
           <template #description>
           <template #description>
@@ -161,6 +166,7 @@
     Progress,
     Progress,
     Skeleton,
     Skeleton,
     Tooltip,
     Tooltip,
+    Empty,
   } from 'ant-design-vue';
   } from 'ant-design-vue';
   import { useUserStore } from '/@/store/modules/user';
   import { useUserStore } from '/@/store/modules/user';
   import { getEnterPriseDetail } from '/@/api/oem';
   import { getEnterPriseDetail } from '/@/api/oem';
@@ -186,6 +192,7 @@
       Progress,
       Progress,
       Skeleton,
       Skeleton,
       Tooltip,
       Tooltip,
+      Empty,
     },
     },
     props: {
     props: {
       role: {
       role: {
@@ -288,6 +295,7 @@
         go,
         go,
         registerTable,
         registerTable,
         isAdmin,
         isAdmin,
+        Empty,
       };
       };
     },
     },
   });
   });

@@ -5,7 +5,6 @@
   import { ref, Ref, withDefaults, onMounted, watch } from 'vue';
   import { ref, Ref, withDefaults, onMounted, watch } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { getTrendData } from '/@/api/dashboard/index';
   import { getTrendData } from '/@/api/dashboard/index';
-
   interface Props {
   interface Props {
     width?: string;
     width?: string;
     height?: string;
     height?: string;

 <template>
 <template>
   <div>
   <div>
     <div ref="chartRef" :style="{ height, width }" v-show="alarmList.length"></div>
     <div ref="chartRef" :style="{ height, width }" v-show="alarmList.length"></div>
-    <div v-show="!alarmList.length"><Empty /></div>
+    <div v-show="!alarmList.length"><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>

 <template>
 <template>
   <div>
   <div>
     <div ref="chartRef" :style="{ height, width }" v-show="dataPointList.length"></div>
     <div ref="chartRef" :style="{ height, width }" v-show="dataPointList.length"></div>
-    <div v-show="!dataPointList.length"><Empty /></div>
+    <div v-show="!dataPointList.length"><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>

@@ -127,6 +127,9 @@
         }
         }
         // 验证成功 --调-- 新增或者编辑接口
         // 验证成功 --调-- 新增或者编辑接口
         const msg = computed(() => (unref(stepState).id ? '更新设备成功' : '新增设备成功'));
         const msg = computed(() => (unref(stepState).id ? '更新设备成功' : '新增设备成功'));
+        // 此处需要删除地图的属性，否则会报堆栈溢出的错误 Uncaught RangeError: Maximum call stack size exceeded
+        Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'map');
+        Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'marker');
         if (unref(stepState).id) {
         if (unref(stepState).id) {
           const editData = {
           const editData = {
             ...unref(stepState),
             ...unref(stepState),
@@ -135,6 +138,7 @@
               ...DeviceStep1Ref.value?.positionState,
               ...DeviceStep1Ref.value?.positionState,
             },
             },
           };
           };
+
           await createOrEditDevice(editData);
           await createOrEditDevice(editData);
         } else {
         } else {
           const createData = {
           const createData = {

@@ -44,10 +44,10 @@
       centered
       centered
     >
     >
       <div>
       <div>
-        <a-form :label-col="labelCol" :colon="false">
-          <a-row :gutter="20" class="mt-4">
-            <a-col :span="20">
-              <a-form-item label="搜索位置">
+        <Form :label-col="labelCol" :colon="false">
+          <Row :gutter="20" class="mt-4">
+            <Col :span="20">
+              <FormItem label="搜索位置">
                 <AutoComplete
                 <AutoComplete
                   v-model:value="positionState.address"
                   v-model:value="positionState.address"
                   :options="dataSource"
                   :options="dataSource"
@@ -57,22 +57,22 @@
                   @select="handleSelect"
                   @select="handleSelect"
                   backfill
                   backfill
                 />
                 />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="20" class="">
-            <a-col :span="10">
-              <a-form-item label="经度">
+              </FormItem>
+            </Col>
+          </Row>
+          <Row :gutter="20" class="">
+            <Col :span="10">
+              <FormItem label="经度">
                 <Input v-model:value="positionState.longitude" disabled />
                 <Input v-model:value="positionState.longitude" disabled />
-              </a-form-item>
-            </a-col>
-            <a-col :span="10">
-              <a-form-item label="纬度">
+              </FormItem>
+            </Col>
+            <Col :span="10">
+              <FormItem label="纬度">
                 <Input v-model:value="positionState.latitude" disabled />
                 <Input v-model:value="positionState.latitude" disabled />
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
+              </FormItem>
+            </Col>
+          </Row>
+        </Form>
         <div ref="wrapRef" style="height: 300px; width: 90%" class="ml-6"></div>
         <div ref="wrapRef" style="height: 300px; width: 90%" class="ml-6"></div>
       </div>
       </div>
     </Modal>
     </Modal>
@@ -88,6 +88,7 @@
   import { upload } from '/@/api/oss/ossFileUploader';
   import { upload } from '/@/api/oss/ossFileUploader';
   import { FileItem } from '/@/components/Upload/src/typing';
   import { FileItem } from '/@/components/Upload/src/typing';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
+
   import icon from '/@/assets/images/wz.png';
   import icon from '/@/assets/images/wz.png';
   import { useDebounceFn } from '@vueuse/core';
   import { useDebounceFn } from '@vueuse/core';
   export default defineComponent({
   export default defineComponent({
@@ -95,15 +96,14 @@
       BasicForm,
       BasicForm,
       Input,
       Input,
       AutoComplete,
       AutoComplete,
-      [Input.Group.name]: Input.Group,
       Upload,
       Upload,
       EnvironmentTwoTone,
       EnvironmentTwoTone,
       PlusOutlined,
       PlusOutlined,
       Modal,
       Modal,
-      [Form.name]: Form,
-      [Form.Item.name]: Form.Item,
-      [Row.name]: Row,
-      [Col.name]: Col,
+      Form,
+      FormItem: Form.Item,
+      Row,
+      Col,
     },
     },
     props: {
     props: {
       deviceInfo: {
       deviceInfo: {
@@ -209,6 +209,7 @@
       const wrapRef = ref<HTMLDivElement | null>(null);
       const wrapRef = ref<HTMLDivElement | null>(null);
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
 
 
+      // 初始化地图
       async function initMap(longitude, latitude) {
       async function initMap(longitude, latitude) {
         await toPromise();
         await toPromise();
         await nextTick();
         await nextTick();
@@ -243,7 +244,6 @@
         });
         });
       }
       }
       const dataSource = ref<any[]>([]);
       const dataSource = ref<any[]>([]);
-
       const onSearch = (searchText: string) => {
       const onSearch = (searchText: string) => {
         if (!searchText) {
         if (!searchText) {
           dataSource.value = [];
           dataSource.value = [];
@@ -256,7 +256,6 @@
               const searchArr = [];
               const searchArr = [];
               for (let i = 0; i < res.getCurrentNumPois(); i++) {
               for (let i = 0; i < res.getCurrentNumPois(); i++) {
                 const item = res.getPoi(i);
                 const item = res.getPoi(i);
-                console.log(item);
                 searchArr.push({
                 searchArr.push({
                   label: item.address + item.title,
                   label: item.address + item.title,
                   value: item.address + item.title,
                   value: item.address + item.title,
@@ -268,13 +267,12 @@
           },
           },
         }); //调用search方法，根据检索词searchText发起检索
         }); //调用search方法，根据检索词searchText发起检索
         local.search(searchText);
         local.search(searchText);
-        console.log(dataSource);
       };
       };
       // 防抖函数包装一下，防止频繁执行
       // 防抖函数包装一下，防止频繁执行
       const debounceSearch = useDebounceFn(onSearch, 500);
       const debounceSearch = useDebounceFn(onSearch, 500);
       function handleSelect(value, option) {
       function handleSelect(value, option) {
         dataSource.value = [];
         dataSource.value = [];
-        console.log(option);
+
         positionState.address = option.value; //记录详细地址，含建筑物名
         positionState.address = option.value; //记录详细地址，含建筑物名
         const { lat, lng } = option.point;
         const { lat, lng } = option.point;
         positionState.latitude = lat; //记录当前选中地址坐标
         positionState.latitude = lat; //记录当前选中地址坐标
@@ -299,11 +297,9 @@
       // 取消选择位置
       // 取消选择位置
       const handleCancel = () => {
       const handleCancel = () => {
         dataSource.value = [];
         dataSource.value = [];
-
         for (let key in positionState) {
         for (let key in positionState) {
           positionState[key] = '';
           positionState[key] = '';
         }
         }
-        console.log(positionState);
       };
       };
       // 父组件调用更新字段值的方法
       // 父组件调用更新字段值的方法
       function parentSetFieldsValue(data) {
       function parentSetFieldsValue(data) {

@@ -77,17 +77,17 @@
               setTableData(state.recordList);
               setTableData(state.recordList);
               return;
               return;
             }
             }
-            const newRecordList = state.recordList.find((item) => {
-              if (item.key === key) return item;
-              console.log('--------------------------', item);
-              if (item.value === key) return item;
-            });
-            console.log(newRecordList);
-            if (!newRecordList) {
-              setTableData([]);
-            } else {
-              setTableData([newRecordList]);
+            let newRecordList = [];
+            let len = state.recordList.length;
+            for (let i = 0; i < len; i++) {
+              if (
+                state.recordList[i].key.indexOf(key) >= 0 ||
+                state.recordList[i].value.indexOf(key) >= 0
+              ) {
+                newRecordList.push(state.recordList[i]);
+              }
             }
             }
+            setTableData(newRecordList);
           },
           },
           resetFunc() {
           resetFunc() {
             setTableData(state.recordList);
             setTableData(state.recordList);

@@ -28,7 +28,7 @@ export const schemas: FormSchema[] = [
   {
   {
     field: 'logo',
     field: 'logo',
     component: 'Upload',
     component: 'Upload',
-    label: '平台Logo',
+    label: 'APP Logo',
     colProps: {
     colProps: {
       span: 24,
       span: 24,
     },
     },

@@ -102,7 +102,6 @@ export const schemas: FormSchema[] = [
       maxLength: 500,
       maxLength: 500,
       placeholder: '请输入公司简介',
       placeholder: '请输入公司简介',
       autoSize: { minRows: 8, maxRows: 12 },
       autoSize: { minRows: 8, maxRows: 12 },
-      showCount: true,
     },
     },
     dynamicRules: () => {
     dynamicRules: () => {
       return [
       return [

@@ -15,13 +15,13 @@
             <img v-if="logoPic" :src="logoPic" />
             <img v-if="logoPic" :src="logoPic" />
             <div v-else>
             <div v-else>
               <div style="margin-top: 30px">
               <div style="margin-top: 30px">
-                <PlusOutlined style="font-size: 30px" />
+                <PlusOutlined style="font-size: 50px" />
               </div>
               </div>
               <div
               <div
                 class="ant-upload-text flex"
                 class="ant-upload-text flex"
-                style="width: 180px; height: 130px; align-items: center"
+                style="width: 180px; height: 100px; align-items: center; font-size: 9px"
               >
               >
-                支持.PNG、.JPG、.SVG格式，建议尺寸32px × 32px，大小不超过500KB。</div
+                支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB</div
               >
               >
             </div>
             </div>
           </Upload>
           </Upload>
@@ -38,13 +38,13 @@
             <img v-if="bgPic" :src="bgPic" alt="avatar" />
             <img v-if="bgPic" :src="bgPic" alt="avatar" />
             <div v-else>
             <div v-else>
               <div style="margin-top: 30px">
               <div style="margin-top: 30px">
-                <PlusOutlined style="font-size: 30px" />
+                <PlusOutlined style="font-size: 50px" />
               </div>
               </div>
               <div
               <div
                 class="ant-upload-text flex"
                 class="ant-upload-text flex"
-                style="width: 280px; height: 130px; align-items: center"
+                style="width: 280px; height: 100px; align-items: center; font-size: 9px"
               >
               >
-                支持.PNG、.JPG、.SVG格式，建议尺寸为1250px × 730px（及以上），大小不超过5M。</div
+                支持.PNG、.JPG格式，建议尺寸为1080*1620px，大小不超过5M</div
               >
               >
             </div>
             </div>
           </Upload>
           </Upload>
@@ -64,8 +64,14 @@
             :before-upload="beforeUploadHomeSwiper"
             :before-upload="beforeUploadHomeSwiper"
           >
           >
             <div v-if="fileList.length < 5">
             <div v-if="fileList.length < 5">
-              <plus-outlined />
-              <div class="ant-upload-text">Upload</div>
+              <div style="margin-top: 30px">
+                <PlusOutlined style="font-size: 50px" />
+              </div>
+              <div
+                class="ant-upload-text flex"
+                style="width: 150px; height: 70px; align-items: center; font-size: 9px"
+                >支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M</div
+              >
             </div>
             </div>
           </Upload>
           </Upload>
           <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
           <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
@@ -252,7 +258,7 @@
 
 
       onMounted(async () => {
       onMounted(async () => {
         const res = await getAppDesign();
         const res = await getAppDesign();
-        const rotation = res.rotation.split(',');
+        const rotation = res.rotation ? res.rotation.split(',') : [];
         const arr: any[] = [];
         const arr: any[] = [];
         for (let item of rotation) {
         for (let item of rotation) {
           arr.push({
           arr.push({
@@ -265,7 +271,7 @@
         setFieldsValue(res);
         setFieldsValue(res);
         logoPic.value = res.logo;
         logoPic.value = res.logo;
         bgPic.value = res.background;
         bgPic.value = res.background;
-        if (arr[0].url === '') return;
+        if (arr[0]?.url === '') return;
         fileList.value = arr;
         fileList.value = arr;
       });
       });
       return {
       return {

@@ -14,13 +14,13 @@
             <img v-if="logoPic" :src="logoPic" />
             <img v-if="logoPic" :src="logoPic" />
             <div v-else>
             <div v-else>
               <div style="margin-top: 30px">
               <div style="margin-top: 30px">
-                <PlusOutlined style="font-size: 30px" />
+                <PlusOutlined style="font-size: 50px" />
               </div>
               </div>
               <div
               <div
                 class="ant-upload-text flex"
                 class="ant-upload-text flex"
-                style="width: 180px; height: 130px; align-items: center"
+                style="width: 180px; height: 100px; align-items: center; font-size: 9px"
               >
               >
-                支持.PNG、.JPG、.SVG格式，建议尺寸32px × 32px，大小不超过500KB。</div
+                支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB</div
               >
               >
             </div>
             </div>
           </Upload>
           </Upload>
@@ -39,7 +39,15 @@
               <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
               <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
             </div>
             </div>
             <div v-else>
             <div v-else>
-              <PlusOutlined style="font-size: 30px" />
+              <div style="margin-top: 20px">
+                <PlusOutlined style="font-size: 30px" />
+              </div>
+              <div
+                class="ant-upload-text flex"
+                style="width: 130px; height: 70px; align-items: center; font-size: 9px"
+              >
+                支持.ICON格式，建议尺寸为16*16px</div
+              >
             </div>
             </div>
           </Upload>
           </Upload>
         </template>
         </template>
@@ -55,13 +63,13 @@
             <img v-if="bgPic" :src="bgPic" alt="avatar" />
             <img v-if="bgPic" :src="bgPic" alt="avatar" />
             <div v-else>
             <div v-else>
               <div style="margin-top: 30px">
               <div style="margin-top: 30px">
-                <PlusOutlined style="font-size: 30px" />
+                <PlusOutlined style="font-size: 50px" />
               </div>
               </div>
               <div
               <div
                 class="ant-upload-text flex"
                 class="ant-upload-text flex"
-                style="width: 280px; height: 130px; align-items: center"
+                style="width: 280px; height: 130px; align-items: center; font-size: 9px"
               >
               >
-                支持.PNG、.JPG、.SVG格式，建议尺寸为1250px × 730px（及以上），大小不超过5M。</div
+                支持.PNG、.JPG格式，建议尺寸为1920*1080px以上，大小不超过5M</div
               >
               >
             </div>
             </div>
           </Upload>
           </Upload>
@@ -97,6 +105,8 @@
   import { PlusOutlined } from '@ant-design/icons-vue';
   import { PlusOutlined } from '@ant-design/icons-vue';
   import { useUserStore } from '/@/store/modules/user';
   import { useUserStore } from '/@/store/modules/user';
   import { createLocalStorage } from '/@/utils/cache/index';
   import { createLocalStorage } from '/@/utils/cache/index';
+  import { useTitle } from '@vueuse/core';
+  import { useGlobSetting } from '/@/hooks/setting';
   export default defineComponent({
   export default defineComponent({
     components: {
     components: {
       BasicForm,
       BasicForm,
@@ -221,6 +231,8 @@
         userStore.setPlatInfo(newFieldValue);
         userStore.setPlatInfo(newFieldValue);
         // 保存本地缓存
         // 保存本地缓存
         storage.set('platInfo', newFieldValue);
         storage.set('platInfo', newFieldValue);
+        const { title } = useGlobSetting();
+        useTitle(`OEM定制 - ${newFieldValue.name === '' ? title : newFieldValue.name}`);
       }
       }
 
 
       onMounted(async () => {
       onMounted(async () => {

@@ -14,13 +14,13 @@
             <img v-if="qrcodePic" :src="qrcodePic" alt="avatar" />
             <img v-if="qrcodePic" :src="qrcodePic" alt="avatar" />
             <div v-else>
             <div v-else>
               <div style="margin-top: 30px">
               <div style="margin-top: 30px">
-                <PlusOutlined style="font-size: 30px" />
+                <PlusOutlined style="font-size: 50px" />
               </div>
               </div>
               <div
               <div
                 class="ant-upload-text flex"
                 class="ant-upload-text flex"
-                style="width: 280px; height: 130px; align-items: center"
+                style="width: 180px; height: 100px; align-items: center; font-size: 9px"
               >
               >
-                支持.PNG、.JPG、.SVG格式，建议尺寸为300px × 300px（及以上），大小不超过2M。</div
+                支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过2M</div
               >
               >
             </div>
             </div>
           </Upload>
           </Upload>

@@ -9,7 +9,7 @@
     </Card>
     </Card>
 
 
     <div style="width: 100%">
     <div style="width: 100%">
-      <div class="title">{{ activeKey }}</div>
+      <Card class="card" :title="activeKey" :bordered="false" :bodyStyle="{ display: 'none' }" />
       <EnterpriseInfo v-if="activeKey === '企业信息'" />
       <EnterpriseInfo v-if="activeKey === '企业信息'" />
       <CVIDraw v-else-if="activeKey === '平台定制'" />
       <CVIDraw v-else-if="activeKey === '平台定制'" />
       <AppDraw v-else />
       <AppDraw v-else />
@@ -23,6 +23,7 @@
   import EnterpriseInfo from './cpns/EnterpriseInfo.vue';
   import EnterpriseInfo from './cpns/EnterpriseInfo.vue';
   import CVIDraw from './cpns/CVIDraw.vue';
   import CVIDraw from './cpns/CVIDraw.vue';
   import AppDraw from './cpns/AppDraw.vue';
   import AppDraw from './cpns/AppDraw.vue';
+
   const activeKey = ref('企业信息');
   const activeKey = ref('企业信息');
 </script>
 </script>
 
 
@@ -30,18 +31,16 @@
   .title {
   .title {
     width: 97.4%;
     width: 97.4%;
     height: 50px;
     height: 50px;
-    margin: 20px;
+    margin: 1rem;
     line-height: 50px;
     line-height: 50px;
     font-size: 18px;
     font-size: 18px;
-
-    background-color: #fff;
     padding-left: 10px;
     padding-left: 10px;
+    background-color: #fff;
   }
   }
   .tab-card {
   .tab-card {
-    margin: 20px 0 20px 20px;
+    margin: 1rem 0 1rem 1rem;
   }
   }
   .card {
   .card {
-    margin: 20px;
-    border-radius: 8px;
+    margin: 1rem;
   }
   }
 </style>
 </style>