'fix:首页开发,wip:OEM定制开发'

+import { defHttp } from '/@/utils/http/axios';
+import { FileUploadResponse } from './model/index';
+enum API {
+  SELECT_DETAIL = '/enterprise/get',
+  UPDATE_DETAIL = '/enterprise/update',
+  TOWN_LIST = '/town/list',
+  TOWN_CHILDS = '/town/childs',
+  BaseUploadUrl = '/oss/upload',
+  SELECT_PLATFORM = '/platform/get',
+  UPDATE_PLATFORM = '/platform/update',
+
+  SELECT_APP_DESIGN = '/appDesign/get',
+  UPDATE_APP_DESIGN = '/appDesign/update',
+}
+
+// 查询企业信息
+export const getEnterPriseDetail = () => {
+  return defHttp.get({
+    url: API.SELECT_DETAIL,
+  });
+};
+
+// 更新企业信息
+export const updateEnterPriseDetail = (data) => {
+  return defHttp.put({
+    url: API.UPDATE_DETAIL,
+    data,
+  });
+};
+
+// 获取所有省份
+export const getTownList = () => {
+  return defHttp.get({
+    url: API.TOWN_LIST,
+  });
+};
+
+// 获取省份下面的地址
+export const getTownChild = (key, value) => {
+  return defHttp.get({
+    url: API.TOWN_CHILDS + `/${key}/${value}`,
+    params: {
+      variable: key,
+      value,
+    },
+  });
+};
+
+// logo上传
+export const logoUpload = (file) => {
+  return defHttp.post<FileUploadResponse>({ url: API.BaseUploadUrl, params: file });
+};
+
+// icon上传
+export const iconUpload = (file) => {
+  return defHttp.post<FileUploadResponse>({ url: API.BaseUploadUrl, params: file });
+};
+
+// 背景图片上传
+export const bgUpload = (file) => {
+  return defHttp.post<FileUploadResponse>({ url: API.BaseUploadUrl, params: file });
+};
+
+// 获取平台定制详情
+export const getPlatForm = () => {
+  return defHttp.get({
+    url: API.SELECT_PLATFORM,
+  });
+};
+
+// 更新平台定制
+export const updatePlatForm = (data) => {
+  return defHttp.put({
+    url: API.UPDATE_PLATFORM,
+    data,
+  });
+};
+
+// APP定制
+export const getAppDesign = () => {
+  return defHttp.get({
+    url: API.SELECT_APP_DESIGN,
+  });
+};
+
+// 更新APP定制
+export const updateAppDesign = (data) => {
+  return defHttp.put({
+    url: API.UPDATE_APP_DESIGN,
+    data,
+  });
+};

+export interface FileUploadResponse {
+  fileName: string;
+  fileDownloadUri: string;
+  fileType: string;
+  size: number;
+  fileStaticUri: string;
+}

@@ -196,8 +196,8 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
 export const defHttp = createAxios();
 
 // other api url
-// export const otherHttp = createAxios({
-//   requestOptions: {
-//     apiUrl: 'xxx',
-//   },
-// });
+export const otherHttp = createAxios({
+  requestOptions: {
+    apiUrl: 'xxx',
+  },
+});

@@ -3,7 +3,7 @@
     <template v-for="(item, index) in growCardList" :key="item.title">
       <div
         class="growCardItem md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4"
-        :class="[index + 1 < growCardList.length && '!md:mr-4']"
+        :class="[index + 1 < 3 && '!md:mr-4']"
       >
         <div class="growCardItem-top">
           <img :src="item.imgUrl" style="width: 90px; height: 90px" />
@@ -13,23 +13,31 @@
               <img src="../../../../assets/images/tip.png" style="width: 20px; height: 20px" />
             </div>
             <div class="ml-3">{{ item.title }}</div>
-            <div class="ml-3 mt-3 flex" v-if="item.offLine">
+            <div class="ml-1.5 mt-3 flex flex-nowrap" style="width: 240px" v-if="item.offLine">
               <div class="count">
-                <img src="../../../../assets/images/online.png" style="width: 10px; height: 10px" />
+                <img
+                  src="../../../../assets/images/online.png"
+                  style="width: 10px; height: 10px; margin-right: 4px"
+                />
                 在线 {{ item.onLine }}
               </div>
               <div class="count">
-                <img src="../../../../assets/images/offline.png" alt="" />
+                <img
+                  src="../../../../assets/images/offline.png"
+                  style="width: 10px; height: 10px; margin-right: 4px"
+                />
                 离线 {{ item.offLine }}
               </div>
               <div class="count">
-                <img src="../../../../assets/images/inactive.png" alt="" />
+                <img
+                  src="../../../../assets/images/inactive.png"
+                  style="width: 10px; height: 10px; margin-right: 4px"
+                />
                 未激活 {{ item.inactive }}
               </div>
             </div>
           </div>
         </div>
-
         <div class="growCardItem-bottom"> 今日新增 {{ item.newDay }}</div>
       </div>
     </template>
@@ -43,7 +51,7 @@
   .growCardItem {
     height: 179px;
     background-color: #fff;
-    color: 666;
+    color: #666;
     .growCardItem-top {
       display: flex;
       margin: 20px;

@@ -17,15 +17,15 @@
         <List item-layout="horizontal" :data-source="data">
           <template #renderItem="{ item }">
             <ListItem>
-              <ListItemMeta description="有新的告警数据需要处理，现在就去查看吧">
+              <ListItemMeta :description="item.description">
                 <template #title>
                   <a href="https://www.antdv.com/">{{ item.title }}</a>
                 </template>
                 <template #avatar>
-                  <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+                  <Avatar :src="item.avatar" />
                 </template>
               </ListItemMeta>
-              <template #extra> 7小时前 </template>
+              <template #extra> {{ item.date }} </template>
             </ListItem>
           </template>
         </List>
@@ -34,7 +34,7 @@
     </Card>
     <Card hoverable title="联系我们" :bordered="false">
       <template #cover>
-        <QrCode :value="qrCodeUrl" />
+        <QrCode :value="qrCodeUrl" class="flex justify-center" />
       </template>
       <CardMeta>
         <template #description>
@@ -48,9 +48,9 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
+  import { defineComponent, ref } from 'vue';
   import { Card, AnchorLink, List, ListItem, ListItemMeta, Avatar, CardMeta } from 'ant-design-vue';
-  import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
+  import { QrCode } from '/@/components/Qrcode/index';
   export default defineComponent({
     components: {
       Card,
@@ -100,32 +100,44 @@
       // 列表
       interface DataItem {
         title: string;
+        description: string;
+        avatar: string;
+        date: string;
       }
       const data: DataItem[] = [
         {
           title: '企业管理员',
+          description: '现在就来开创新的记录吧！',
+          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+          date: '5分钟前',
         },
         {
           title: '企业管理员',
+          description: '有新的告警数据需要处理,现在去查看吧',
+          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+          date: '7小时前',
         },
         {
           title: '管理员',
+          description: '有新的告警数据需要处理,现在去查看吧',
+          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+          date: '6小时前',
         },
         {
           title: '管理员',
+          description: '现在就来开创新的记录吧！',
+          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+          date: '1小时前',
         },
         {
           title: '管理员',
+          description: '现在就来开创新的记录吧！',
+          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+          date: '7小时前',
         },
       ];
 
-      const qrRef = ref<Nullable<QrCodeActionType>>(null);
       const qrCodeUrl = 'https://www.vvbin.cn';
-      const download = () => {
-        const qrEl = unref(qrRef);
-        if (!qrEl) return;
-        qrEl.download('文件名');
-      };
 
       return {
         activeKey,
@@ -134,7 +146,6 @@
         data,
         helpDoc,
         qrCodeUrl,
-        download,
       };
     },
   });

-<template>
-  <Card title="成交占比" :loading="loading">
-    <div ref="chartRef" :style="{ width, height }"></div>
-  </Card>
-</template>
-<script lang="ts" setup>
-  import { Ref, ref, watch } from 'vue';
-  import { Card } from 'ant-design-vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
-
-  const props = defineProps({
-    loading: Boolean,
-    width: {
-      type: String as PropType<string>,
-      default: '100%',
-    },
-    height: {
-      type: String as PropType<string>,
-      default: '300px',
-    },
-  });
-
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-  watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'item',
-        },
-
-        series: [
-          {
-            name: '访问来源',
-            type: 'pie',
-            radius: '80%',
-            center: ['50%', '50%'],
-            color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
-            data: [
-              { value: 500, name: '电子产品' },
-              { value: 310, name: '服装' },
-              { value: 274, name: '化妆品' },
-              { value: 400, name: '家居' },
-            ].sort(function (a, b) {
-              return a.value - b.value;
-            }),
-            roseType: 'radius',
-            animationType: 'scale',
-            animationEasing: 'exponentialInOut',
-            animationDelay: function () {
-              return Math.random() * 400;
-            },
-          },
-        ],
-      });
-    },
-    { immediate: true }
-  );
-</script>

@@ -5,13 +5,29 @@
     :active-tab-key="activeKey"
     @tabChange="onTabChange"
   >
-    <VisitAnalysis v-if="activeKey === 'tab1'" />
-    <VisitAnalysisBar v-else />
+    <template #tabBarExtraContent>
+      <div class="extra-date">
+        <template v-for="(item, index) in dateList" :key="item">
+          <span @click="changeDate(index)" :class="{ active: index === activeIndex }">{{
+            item
+          }}</span>
+        </template>
+        <DatePicker @change="onDateChange" />
+      </div>
+    </template>
+    <div v-if="activeKey === 'tab1'">
+      <p class="center">告警数</p>
+      <VisitAnalysis />
+    </div>
+    <div v-else>
+      <p class="center">消息数</p>
+      <VisitAnalysisBar />
+    </div>
   </Card>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
-  import { Card } from 'ant-design-vue';
+  import { Card, DatePicker } from 'ant-design-vue';
   import VisitAnalysis from './VisitAnalysis.vue';
   import VisitAnalysisBar from './VisitAnalysisBar.vue';
 
@@ -27,8 +43,36 @@
       tab: '消息量统计',
     },
   ];
-
+  const dateList = ref(['1小时', '1天', '7天', '30天']);
+  const activeIndex = ref(0);
   function onTabChange(key) {
     activeKey.value = key;
   }
+  function onDateChange(date, dateString) {
+    console.log(date, dateString);
+  }
+  function changeDate(index: number) {
+    activeIndex.value = index;
+  }
 </script>
+
+<style scoped lang="less">
+  .center {
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+  }
+  .active {
+    color: #0960bd;
+    font-weight: 500;
+  }
+  .extra-date {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    span {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+</style>

@@ -88,18 +88,6 @@
             color: '#5ab1ef',
           },
         },
-        {
-          smooth: true,
-          data: [
-            33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390,
-            198, 60, 30, 22, 11,
-          ],
-          type: 'line',
-          areaStyle: {},
-          itemStyle: {
-            color: '#019680',
-          },
-        },
       ],
     });
   });

-<template>
-  <Card title="转化率" :loading="loading">
-    <div ref="chartRef" :style="{ width, height }"></div>
-  </Card>
-</template>
-<script lang="ts" setup>
-  import { Ref, ref, watch } from 'vue';
-  import { Card } from 'ant-design-vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
-
-  const props = defineProps({
-    loading: Boolean,
-    width: {
-      type: String as PropType<string>,
-      default: '100%',
-    },
-    height: {
-      type: String as PropType<string>,
-      default: '300px',
-    },
-  });
-
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-  watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        legend: {
-          bottom: 0,
-          data: ['访问', '购买'],
-        },
-        tooltip: {},
-        radar: {
-          radius: '60%',
-          splitNumber: 8,
-          indicator: [
-            {
-              text: '电脑',
-              max: 100,
-            },
-            {
-              text: '充电器',
-              max: 100,
-            },
-            {
-              text: '耳机',
-              max: 100,
-            },
-            {
-              text: '手机',
-              max: 100,
-            },
-            {
-              text: 'Ipad',
-              max: 100,
-            },
-            {
-              text: '耳机',
-              max: 100,
-            },
-          ],
-        },
-        series: [
-          {
-            type: 'radar',
-            symbolSize: 0,
-            areaStyle: {
-              shadowBlur: 0,
-              shadowColor: 'rgba(0,0,0,.2)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 10,
-              opacity: 1,
-            },
-            data: [
-              {
-                value: [90, 50, 86, 40, 50, 20],
-                name: '访问',
-                itemStyle: {
-                  color: '#b6a2de',
-                },
-              },
-              {
-                value: [70, 75, 70, 76, 20, 85],
-                name: '购买',
-                itemStyle: {
-                  color: '#5ab1ef',
-                },
-              },
-            ],
-          },
-        ],
-      });
-    },
-    { immediate: true }
-  );
-</script>

-<template>
-  <Card title="访问来源" :loading="loading">
-    <div ref="chartRef" :style="{ width, height }"></div>
-  </Card>
-</template>
-<script lang="ts" setup>
-  import { Ref, ref, watch } from 'vue';
-  import { Card } from 'ant-design-vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
-  const props = defineProps({
-    loading: Boolean,
-    width: {
-      type: String as PropType<string>,
-      default: '100%',
-    },
-    height: {
-      type: String as PropType<string>,
-      default: '300px',
-    },
-  });
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-  watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'item',
-        },
-        legend: {
-          bottom: '1%',
-          left: 'center',
-        },
-        series: [
-          {
-            color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
-            name: '访问来源',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 10,
-              borderColor: '#fff',
-              borderWidth: 2,
-            },
-            label: {
-              show: false,
-              position: 'center',
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: '12',
-                fontWeight: 'bold',
-              },
-            },
-            labelLine: {
-              show: false,
-            },
-            data: [
-              { value: 1048, name: '搜索引擎' },
-              { value: 735, name: '直接访问' },
-              { value: 580, name: '邮件营销' },
-              { value: 484, name: '联盟广告' },
-            ],
-            animationType: 'scale',
-            animationEasing: 'exponentialInOut',
-            animationDelay: function () {
-              return Math.random() * 100;
-            },
-          },
-        ],
-      });
-    },
-    { immediate: true }
-  );
-</script>

@@ -12,7 +12,7 @@ export const growCardList: GrowCardItem[] = [
   {
     imgUrl: '/src/assets/images/device-count.png',
     title: '设备数（个）',
-    value: '10,0000',
+    value: '10,000',
     onLine: 2000,
     offLine: 3000,
     inactive: 4000,

+<template>
+  <div class="card">
+    <Card :bordered="false" class="card">
+      <BasicForm @register="registerForm">
+        <template #logoUpload>
+          <Upload
+            name="avatar"
+            list-type="picture-card"
+            class="avatar-uploader"
+            :show-upload-list="false"
+            @preview="handlePreview"
+            :customRequest="customUploadLogoPic"
+            :before-upload="beforeUploadLogoPic"
+          >
+            <img v-if="logoPic" :src="logoPic" />
+            <div v-else>
+              <div style="margin-top: 30px">
+                <PlusOutlined style="font-size: 30px" />
+              </div>
+              <div
+                class="ant-upload-text flex"
+                style="width: 180px; height: 130px; align-items: center"
+              >
+                支持.PNG、.JPG、.SVG格式，建议尺寸32px × 32px，大小不超过500KB。</div
+              >
+            </div>
+          </Upload>
+        </template>
+        <template #bgUpload>
+          <Upload
+            name="avatar"
+            list-type="picture-card"
+            class="avatar-uploader"
+            :show-upload-list="false"
+            :customRequest="customUploadBgPic"
+            :before-upload="beforeUploadBgPic"
+          >
+            <img v-if="bgPic" :src="bgPic" alt="avatar" />
+            <div v-else>
+              <div style="margin-top: 30px">
+                <PlusOutlined style="font-size: 30px" />
+              </div>
+              <div
+                class="ant-upload-text flex"
+                style="width: 280px; height: 130px; align-items: center"
+              >
+                支持.PNG、.JPG、.SVG格式，建议尺寸为1250px × 730px（及以上），大小不超过5M。</div
+              >
+            </div>
+          </Upload>
+        </template>
+        <template #colorInput="{ model, field }"
+          ><Input disabled v-model:value="model[field]">
+            <template #prefix> <input type="color" v-model="model[field]" /> </template
+          ></Input>
+        </template>
+
+        <template #homeSwiper>
+          <Upload
+            v-model:file-list="fileList"
+            list-type="picture-card"
+            @preview="handlePreview"
+            :customRequest="customUploadHomeSwiper"
+            :before-upload="beforeUploadHomeSwiper"
+          >
+            <div v-if="fileList.length < 5">
+              <plus-outlined />
+              <div class="ant-upload-text">Upload</div>
+            </div>
+          </Upload>
+          <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+            <img alt="example" style="width: 100%" :src="previewImage" />
+          </Modal>
+        </template>
+      </BasicForm>
+    </Card>
+    <Loading v-bind="compState" />
+    <a-button
+      @click="handleUpdateInfo"
+      size="large"
+      type="primary"
+      style="margin-top: 20px; background-color: #2950f7; border-radius: 5px"
+      >保存信息</a-button
+    >
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, unref, onMounted } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { Loading } from '/@/components/Loading/index';
+  import { Card, Upload, Input, Modal } from 'ant-design-vue';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { schemas } from '../config/AppDraw.config';
+  import { FileItem, FileInfo } from '../types/index';
+  import { logoUpload, bgUpload } from '/@/api/oem/index';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getAppDesign, updateAppDesign } from '/@/api/oem/index';
+  export default defineComponent({
+    components: {
+      Card,
+      BasicForm,
+      Upload,
+      Loading,
+      PlusOutlined,
+      Input,
+      Modal,
+    },
+    setup() {
+      const compState = ref({
+        absolute: false,
+        loading: false,
+        tip: '拼命加载中...',
+      });
+      const { createMessage } = useMessage();
+      const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
+        schemas,
+        showSubmitButton: false,
+        showResetButton: false,
+        labelWidth: 150,
+        wrapperCol: {
+          span: 10,
+        },
+      });
+      const previewVisible = ref<boolean>(false);
+      const previewImage = ref<string | undefined>('');
+      function getBase64(file: File) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.readAsDataURL(file);
+          reader.onload = () => resolve(reader.result);
+          reader.onerror = (error) => reject(error);
+        });
+      }
+      const handleCancel = () => {
+        previewVisible.value = false;
+      };
+      const handlePreview = async (file: FileItem) => {
+        console.log(file);
+        if (!file.url && !file.preview) {
+          file.preview = (await getBase64(file.originFileObj)) as string;
+        }
+        previewImage.value = file.url || file.preview;
+        previewVisible.value = true;
+      };
+      const handleChange = ({ fileList: newFileList }: FileInfo) => {
+        fileList.value = newFileList;
+      };
+
+      // logo图片上传
+      const logoPic = ref();
+      async function customUploadLogoPic({ file }) {
+        if (beforeUploadLogoPic(file)) {
+          const formData = new FormData();
+          formData.append('file', file);
+          const response = await logoUpload(formData);
+          if (response.fileStaticUri) {
+            logoPic.value = response.fileStaticUri;
+          }
+        }
+      }
+      const beforeUploadLogoPic = (file) => {
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          createMessage.error('只能上传图片文件!');
+        }
+        const isLt2M = (file.size as number) / 1024 < 500;
+        if (!isLt2M) {
+          createMessage.error('图片大小不能超过500KB!');
+        }
+        return isJpgOrPng && isLt2M;
+      };
+
+      // 登录页背景上传
+      const bgPic = ref();
+      async function customUploadBgPic({ file }) {
+        if (beforeUploadBgPic(file)) {
+          const formData = new FormData();
+          formData.append('file', file);
+          const response = await bgUpload(formData);
+          if (response.fileStaticUri) {
+            bgPic.value = response.fileStaticUri;
+          }
+        }
+      }
+      const beforeUploadBgPic = (file) => {
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          createMessage.error('只能上传图片文件!');
+        }
+        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
+        if (!isLt2M) {
+          createMessage.error('图片大小不能超过5MB!');
+        }
+        return isJpgOrPng && isLt2M;
+      };
+      // 首页轮播图
+      const fileList = ref<FileItem[]>([]);
+      async function customUploadHomeSwiper({ file }) {
+        if (beforeUploadHomeSwiper(file)) {
+          const formData = new FormData();
+          formData.append('file', file);
+
+          const response = await bgUpload(formData);
+          if (response.fileStaticUri) {
+            fileList.value.push({
+              uid: -Math.random() + '',
+              name: response.fileName,
+              status: 'done',
+              url: response.fileStaticUri,
+            });
+            console.log('改变前', fileList.value);
+            const fileArr = fileList.value.filter((item) => {
+              return item.percent !== 0;
+            });
+            fileList.value = fileArr;
+          }
+        }
+      }
+
+      const beforeUploadHomeSwiper = (file) => {
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          createMessage.error('只能上传图片文件!');
+        }
+        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
+        if (!isLt2M) {
+          createMessage.error('图片大小不能超过5MB!');
+        }
+        return isJpgOrPng && isLt2M;
+      };
+
+      const handleUpdateInfo = async () => {
+        try {
+          console.log(fileList.value);
+          const fieldValue = getFieldsValue();
+          // 做换字段
+          const homeSwiper = fileList.value.map((item) => item.url);
+          const rotation = homeSwiper.join(',');
+
+          compState.value.loading = true;
+          await updateAppDesign({
+            ...fieldValue,
+            background: unref(bgPic),
+            icon: unref(bgPic),
+            logo: unref(logoPic),
+            rotation,
+          });
+          compState.value.loading = false;
+          createMessage.success('保存信息成功');
+        } catch (e) {
+          createMessage.error('保存信息失败');
+        }
+      };
+
+      onMounted(async () => {
+        const res = await getAppDesign();
+        const rotation = res.rotation.split(',');
+        const arr: any[] = [];
+        for (let item of rotation) {
+          arr.push({
+            uid: -Math.random() + '',
+            name: '111',
+            url: item,
+            status: 'done',
+          });
+        }
+        setFieldsValue(res);
+        logoPic.value = res.logo;
+        bgPic.value = res.background;
+        if (arr[0].url === '') return;
+        fileList.value = arr;
+      });
+      return {
+        compState,
+        fileList,
+        registerForm,
+        handleUpdateInfo,
+        handleCancel,
+        handlePreview,
+        customUploadLogoPic,
+        beforeUploadLogoPic,
+        customUploadBgPic,
+        beforeUploadBgPic,
+        customUploadHomeSwiper,
+        beforeUploadHomeSwiper,
+        handleChange,
+        logoPic,
+        bgPic,
+        previewVisible,
+        previewImage,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .ant-upload-select-picture-card i {
+    font-size: 32px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
+</style>

+<template>
+  <div class="card">
+    <Card :bordered="false" class="card">
+      <BasicForm @register="registerForm">
+        <template #logoUpload>
+          <Upload
+            name="avatar"
+            list-type="picture-card"
+            class="avatar-uploader"
+            :show-upload-list="false"
+            :customRequest="customUploadLogoPic"
+            :before-upload="beforeUploadLogoPic"
+          >
+            <img v-if="logoPic" :src="logoPic" />
+            <div v-else>
+              <div style="margin-top: 30px">
+                <PlusOutlined style="font-size: 30px" />
+              </div>
+              <div
+                class="ant-upload-text flex"
+                style="width: 180px; height: 130px; align-items: center"
+              >
+                支持.PNG、.JPG、.SVG格式，建议尺寸32px × 32px，大小不超过500KB。</div
+              >
+            </div>
+          </Upload>
+        </template>
+        <template #iconUpload>
+          <Upload
+            name="avatar"
+            list-type="picture-card"
+            class="avatar-uploader"
+            :show-upload-list="false"
+            :customRequest="customUploadIconPic"
+            :before-upload="beforeUploadIconPic"
+          >
+            <div v-if="iconPic">
+              <img :src="iconPic" />
+              <div style="background-color: #ccc">重新上传</div>
+            </div>
+            <div v-else>
+              <PlusOutlined style="font-size: 30px" />
+            </div>
+          </Upload>
+        </template>
+        <template #bgUpload>
+          <Upload
+            name="avatar"
+            list-type="picture-card"
+            class="avatar-uploader"
+            :show-upload-list="false"
+            :customRequest="customUploadBgPic"
+            :before-upload="beforeUploadBgPic"
+          >
+            <img v-if="bgPic" :src="bgPic" alt="avatar" />
+            <div v-else>
+              <div style="margin-top: 30px">
+                <PlusOutlined style="font-size: 30px" />
+              </div>
+              <div
+                class="ant-upload-text flex"
+                style="width: 280px; height: 130px; align-items: center"
+              >
+                支持.PNG、.JPG、.SVG格式，建议尺寸为1250px × 730px（及以上），大小不超过5M。</div
+              >
+            </div>
+          </Upload>
+        </template>
+
+        <template #colorInput="{ model, field }"
+          ><Input disabled v-model:value="model[field]">
+            <template #prefix> <input type="color" v-model="model[field]" /> </template
+          ></Input>
+        </template>
+      </BasicForm>
+    </Card>
+    <Loading v-bind="compState" />
+    <a-button
+      @click="handleUpdateInfo"
+      size="large"
+      type="primary"
+      style="margin-top: 20px; background-color: #2950f7; border-radius: 5px"
+      >保存信息</a-button
+    >
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, onMounted, unref } from 'vue';
+  import { Card, Upload, Input } from 'ant-design-vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { schemas } from '../config/CVIDraw.config';
+  import { Loading } from '/@/components/Loading/index';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import type { FileItem } from '/@/components/Upload/src/typing';
+  import { logoUpload, iconUpload, bgUpload, getPlatForm, updatePlatForm } from '/@/api/oem/index';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  export default defineComponent({
+    components: {
+      BasicForm,
+      Card,
+      Loading,
+      Upload,
+      Input,
+      PlusOutlined,
+    },
+    setup() {
+      const compState = ref({
+        absolute: false,
+        loading: false,
+        tip: '拼命加载中...',
+      });
+      const { createMessage } = useMessage();
+      const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
+        schemas,
+        showSubmitButton: false,
+        showResetButton: false,
+        labelWidth: 150,
+        wrapperCol: {
+          span: 10,
+        },
+      });
+
+      const logoPic = ref();
+      const iconPic = ref();
+      const bgPic = ref();
+      // logo图片上传
+      async function customUploadLogoPic({ file }) {
+        if (beforeUploadLogoPic(file)) {
+          const formData = new FormData();
+          formData.append('file', file);
+          const response = await logoUpload(formData);
+          if (response.fileStaticUri) {
+            logoPic.value = response.fileStaticUri;
+          }
+        }
+      }
+      const beforeUploadLogoPic = (file: FileItem) => {
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          createMessage.error('只能上传图片文件!');
+        }
+        const isLt2M = (file.size as number) / 1024 < 500;
+        if (!isLt2M) {
+          createMessage.error('图片大小不能超过500KB!');
+        }
+        return isJpgOrPng && isLt2M;
+      };
+
+      async function customUploadIconPic({ file }) {
+        if (beforeUploadIconPic(file)) {
+          const formData = new FormData();
+          formData.append('file', file);
+          const response = await iconUpload(formData);
+          if (response.fileStaticUri) {
+            iconPic.value = response.fileStaticUri;
+          }
+        }
+      }
+      const beforeUploadIconPic = (file: FileItem) => {
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          createMessage.error('只能上传图片文件!');
+        }
+        const isLt2M = (file.size as number) / 1024 < 500;
+        if (!isLt2M) {
+          createMessage.error('图片大小不能超过500KB!');
+        }
+        return isJpgOrPng && isLt2M;
+      };
+      // 登录页背景上传
+      async function customUploadBgPic({ file }) {
+        if (beforeUploadBgPic(file)) {
+          const formData = new FormData();
+          formData.append('file', file);
+          const response = await bgUpload(formData);
+          if (response.fileStaticUri) {
+            bgPic.value = response.fileStaticUri;
+          }
+        }
+      }
+      const beforeUploadBgPic = (file: FileItem) => {
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          createMessage.error('只能上传图片文件!');
+        }
+        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
+        if (!isLt2M) {
+          createMessage.error('图片大小不能超过5MB!');
+        }
+        return isJpgOrPng && isLt2M;
+      };
+
+      // 更新
+      const handleUpdateInfo = async () => {
+        try {
+          const fieldValue = getFieldsValue();
+          compState.value.loading = true;
+          await updatePlatForm({
+            ...fieldValue,
+            background: unref(bgPic),
+            icon: unref(bgPic),
+            logo: unref(logoPic),
+          });
+          compState.value.loading = false;
+          createMessage.success('保存信息成功');
+        } catch (e) {
+          createMessage.error('保存信息失败');
+        }
+      };
+
+      onMounted(async () => {
+        const res = await getPlatForm();
+        setFieldsValue(res);
+        logoPic.value = res.logo;
+        iconPic.value = res.icon;
+        bgPic.value = res.background;
+      });
+      return {
+        registerForm,
+        logoPic,
+        iconPic,
+        bgPic,
+        customUploadLogoPic,
+        beforeUploadLogoPic,
+        customUploadIconPic,
+        beforeUploadIconPic,
+        customUploadBgPic,
+        beforeUploadBgPic,
+        compState,
+        handleUpdateInfo,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>

+<template>
+  <div class="card">
+    <Card :bordered="false" class="card"> <BasicForm @register="registerForm" /></Card>
+    <Loading v-bind="compState" />
+    <a-button
+      @click="handleUpdateInfo"
+      size="large"
+      type="primary"
+      style="margin-top: 20px; background-color: #2950f7; border-radius: 5px"
+      >更新基本信息</a-button
+    >
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, onMounted, ref } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { schemas } from '../config/enterPriseInfo.config';
+  import { getEnterPriseDetail, updateEnterPriseDetail } from '/@/api/oem/index';
+  import { Loading } from '/@/components/Loading';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  export default defineComponent({
+    components: {
+      Card,
+      BasicForm,
+      Loading,
+    },
+    setup() {
+      const compState = ref({
+        absolute: false,
+        loading: false,
+        tip: '拼命加载中...',
+      });
+      const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
+        labelWidth: 80,
+        schemas,
+        showResetButton: false,
+        showSubmitButton: false,
+        wrapperCol: {
+          span: 10,
+        },
+      });
+      const { createMessage } = useMessage();
+      const handleUpdateInfo = async () => {
+        try {
+          compState.value.loading = true;
+          const fieldsValue = getFieldsValue();
+          await updateEnterPriseDetail({
+            ...fieldsValue,
+            codeProv: fieldsValue.nameProv,
+            codeCity: fieldsValue.nameCity,
+            codeCoun: fieldsValue.nameCoun,
+            codeTown: fieldsValue.nameTown,
+          });
+          compState.value.loading = false;
+          createMessage.success('更新信息成功');
+        } catch (e) {
+          createMessage.error('更新信息失败');
+        }
+      };
+      onMounted(async () => {
+        const res = await getEnterPriseDetail();
+        setFieldsValue(res);
+      });
+
+      return {
+        registerForm,
+        compState,
+        handleUpdateInfo,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>

+import type { FormSchema } from '/@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'name',
+    component: 'Input',
+    label: '平台名称',
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      placeholder: '请输入平台名称',
+    },
+  },
+  {
+    field: 'logo',
+    component: 'Upload',
+    label: '平台Logo',
+    colProps: {
+      span: 24,
+    },
+    slot: 'logoUpload',
+  },
+  {
+    field: 'background',
+    component: 'Input',
+    label: '登录页背景图片',
+    colProps: {
+      span: 24,
+    },
+    slot: 'bgUpload',
+  },
+  {
+    field: 'backgroundColor',
+    component: 'AutoComplete',
+    label: '登录页背景颜色',
+    colProps: {
+      span: 24,
+    },
+    slot: 'colorInput',
+  },
+  {
+    field: 'background',
+    component: 'Input',
+    label: '首页轮播图',
+    colProps: {
+      span: 24,
+    },
+    slot: 'homeSwiper',
+  },
+];

+import type { FormSchema } from '/@/components/Form/index';
+
+export const schemas: FormSchema[] = [
+  {
+    field: 'name',
+    component: 'Input',
+    label: '平台名称',
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      placeholder: '请输入平台名称',
+    },
+  },
+  {
+    field: 'logo',
+    component: 'Upload',
+    label: '平台Logo',
+    colProps: {
+      span: 24,
+    },
+    slot: 'logoUpload',
+  },
+  {
+    field: 'icon',
+    component: 'Upload',
+    label: 'Favicon浏览器Icon图标',
+    colProps: {
+      span: 24,
+    },
+    slot: 'iconUpload',
+  },
+  {
+    field: 'background',
+    component: 'Input',
+    label: '登录页背景图片',
+    colProps: {
+      span: 24,
+    },
+    slot: 'bgUpload',
+  },
+  {
+    field: 'backgroundColor',
+    component: 'AutoComplete',
+    label: '登录页背景颜色',
+    colProps: {
+      span: 24,
+    },
+    slot: 'colorInput',
+  },
+  {
+    field: 'copyright',
+    component: 'Input',
+    label: '页面底部版权信息',
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    field: 'presentedOurselves',
+    component: 'Input',
+    label: '备案信息',
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    field: 'domain',
+    component: 'Input',
+    label: '绑定域名',
+    colProps: {
+      span: 24,
+    },
+  },
+];

+import type { FormSchema } from '/@/components/Form/index';
+import { getTownList, getTownChild } from '/@/api/oem/index';
+
+export const schemas: FormSchema[] = [
+  {
+    field: 'name',
+    component: 'Input',
+    label: '公司名称',
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      placeholder: '请输入公司名称',
+    },
+  },
+  {
+    field: 'abbreviation',
+    component: 'Input',
+    label: '公司简称',
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      placeholder: '请输入公司简称',
+    },
+  },
+  {
+    field: 'officialWebsite',
+    component: 'Input',
+    label: '公司官网',
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      placeholder: '请输入公司官网',
+    },
+  },
+  {
+    field: 'email',
+    component: 'Input',
+    label: '公司邮箱',
+    colProps: {
+      span: 24,
+    },
+
+    componentProps: {
+      placeholder: '请输入公司邮箱',
+    },
+  },
+  {
+    field: 'synopsis',
+    component: 'InputTextArea',
+    label: '公司简介',
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      placeholder: '请输入公司简介',
+      autoSize: { minRows: 8, maxRows: 12 },
+      showCount: true,
+    },
+  },
+  {
+    field: 'country',
+    component: 'Select',
+    label: '国家/地区',
+    colProps: {
+      span: 24,
+    },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择国家/地区',
+      options: [
+        {
+          label: '中国',
+          value: '1',
+        },
+      ],
+    },
+  },
+  {
+    field: 'nameProv',
+    component: 'ApiSelect',
+    label: '所在城市',
+    colProps: {
+      span: 5,
+    },
+    componentProps: ({ formModel, formActionType }) => {
+      return {
+        api: getTownList,
+        labelField: 'nameProv',
+        valueField: 'codeProv',
+        placeholder: '请选择省份',
+        async onChange(value) {
+          let nameCity = await getTownChild('codeProv', value);
+          nameCity.forEach((item) => {
+            item.label = item.nameCity;
+            item.value = item.codeCity;
+          });
+          const { updateSchema } = formActionType;
+          if (value === undefined) {
+            formModel.nameCity = undefined; //  reset city value
+            formModel.nameCoun = undefined;
+            formModel.nameTown = undefined;
+            nameCity = [];
+            updateSchema({
+              field: 'nameCoun',
+              componentProps: {
+                options: [],
+              },
+            });
+            updateSchema({
+              field: 'nameTown',
+              componentProps: {
+                options: [],
+              },
+            });
+          }
+          updateSchema({
+            field: 'nameCity',
+            componentProps: () => {
+              return {
+                options: nameCity,
+                placeholder: '请选择城市',
+                async onChange(value) {
+                  // 获取区数据
+                  let nameCoun = await getTownChild('codeCity', value);
+                  nameCoun.forEach((item) => {
+                    item.label = item.nameCoun;
+                    item.value = item.codeCoun;
+                  });
+                  if (value === undefined) {
+                    formModel.nameCoun = undefined; //  reset city value
+                    formModel.nameTown = undefined;
+                    nameCoun = [];
+                    updateSchema({
+                      field: 'nameTown',
+                      componentProps: {
+                        options: [],
+                      },
+                    });
+                  }
+                  updateSchema({
+                    field: 'nameCoun',
+                    componentProps: {
+                      // 请选择区
+                      options: nameCoun,
+                      async onChange(value) {
+                        let nameTown = await getTownChild('codeCoun', value);
+                        nameTown.forEach((item) => {
+                          item.label = item.nameTown;
+                          item.value = item.codeTown;
+                        });
+                        if (value === undefined) {
+                          formModel.nameTown = undefined;
+                          nameTown = [];
+                        }
+                        updateSchema({
+                          field: 'nameTown',
+                          componentProps: {
+                            placeholder: '请选择街道/城镇',
+                            options: nameTown,
+                          },
+                        });
+                      },
+                    },
+                  });
+                },
+              };
+            },
+          });
+        },
+      };
+    },
+  },
+  {
+    field: 'nameCity',
+    component: 'Select',
+    label: '',
+
+    colProps: {
+      span: 5,
+      style: {
+        marginLeft: '-80px',
+      },
+    },
+  },
+  {
+    field: 'nameCoun',
+    component: 'Select',
+    label: '',
+    colProps: {
+      span: 5,
+      style: {
+        marginLeft: '-160px',
+      },
+    },
+    componentProps: {
+      placeholder: '请选择区/县',
+    },
+  },
+  {
+    field: 'nameTown',
+    component: 'Select',
+    label: '',
+    colProps: {
+      span: 6,
+      style: {
+        marginLeft: '-160px',
+      },
+    },
+    componentProps: {
+      placeholder: '请选择街道/城镇',
+    },
+  },
+
+  // {
+  //   field: 'nameProv',
+  //   label: '所在城市',
+  //   component: 'Cascader',
+  // },
+
+  {
+    field: 'address',
+    component: 'Input',
+    label: '详细地址',
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      placeholder: '请输入详细地址',
+    },
+  },
+
+  {
+    field: 'contacts',
+    component: 'Input',
+    label: '联系人',
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      placeholder: '请输入联系人',
+    },
+  },
+  {
+    field: 'tel',
+    component: 'Input',
+    label: '联系电话',
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      placeholder: '请输入联系电话',
+    },
+  },
+];

+<template>
+  <div class="platform flex">
+    <Card class="tab-card" :bordered="false">
+      <Tabs v-model:activeKey="activeKey" tab-position="left">
+        <TabPane key="企业信息" tab="企业信息" />
+        <TabPane key="平台定制" tab="平台定制" />
+        <TabPane key="APP定制" tab="APP定制" />
+      </Tabs>
+    </Card>
+
+    <div style="width: 100%">
+      <div class="title">{{ activeKey }}</div>
+      <EnterpriseInfo v-if="activeKey === '企业信息'" />
+      <CVIDraw v-else-if="activeKey === '平台定制'" />
+      <AppDraw v-else />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Tabs, TabPane, Card } from 'ant-design-vue';
+  import { ref } from 'vue';
+  import EnterpriseInfo from './components/EnterpriseInfo.vue';
+  import CVIDraw from './components/CVIDraw.vue';
+  import AppDraw from './components/AppDraw.vue';
+  const activeKey = ref('APP定制');
+</script>
+
+<style lang="less" scoped>
+  .title {
+    width: 97.4%;
+    height: 50px;
+    margin: 20px;
+    line-height: 50px;
+    font-size: 18px;
+    border-radius: 8px;
+    background-color: #fff;
+    padding-left: 10px;
+  }
+  .tab-card {
+    margin: 20px 0 20px 20px;
+    border-radius: 5px;
+  }
+  .card {
+    margin: 20px;
+    border-radius: 8px;
+  }
+</style>

+export interface FileItem {
+  uid: string;
+  name?: string;
+  status?: string;
+  response?: string;
+  percent?: number;
+  url?: string;
+  preview?: string;
+  originFileObj?: any;
+}
+
+export interface FileInfo {
+  file: FileItem;
+  fileList: FileItem[];
+}