From e702dae9ddc86df7b9976ccd7356ffa402236393 Mon Sep 17 00:00:00 2001
From: xiongqian <2167232911@qq.com>
Date: Wed, 1 Feb 2023 10:56:24 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E6=88=90=E5=8A=9F=E6=8F=90=E7=A4=BA=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/Product/Detail/BasicInfo/index.vue |   1 +
 src/views/device/Product/DialogTips/index.vue |  99 +++
 src/views/device/Product/Save/index.vue       |  70 +-
 src/views/device/Product/index.vue            |  59 +-
 src/views/init-home/Basic/index.vue           | 717 ++++++++++++++++++
 src/views/init-home/index.vue                 | 426 +----------
 6 files changed, 882 insertions(+), 490 deletions(-)
 create mode 100644 src/views/device/Product/Detail/BasicInfo/index.vue
 create mode 100644 src/views/device/Product/DialogTips/index.vue
 create mode 100644 src/views/init-home/Basic/index.vue

diff --git a/src/views/device/Product/Detail/BasicInfo/index.vue b/src/views/device/Product/Detail/BasicInfo/index.vue
new file mode 100644
index 00000000..8d5b884c
--- /dev/null
+++ b/src/views/device/Product/Detail/BasicInfo/index.vue
@@ -0,0 +1 @@
+<!-- 配置信息-->
diff --git a/src/views/device/Product/DialogTips/index.vue b/src/views/device/Product/DialogTips/index.vue
new file mode 100644
index 00000000..6c403056
--- /dev/null
+++ b/src/views/device/Product/DialogTips/index.vue
@@ -0,0 +1,99 @@
+<!-- 产品保存成功后的提示框 -->
+<template>
+    <a-modal
+        :maskClosable="false"
+        destroy-on-close
+        v-model:visible="visible"
+        @cancel="cancel"
+        v-bind="layout"
+        width="650px"
+    >
+        <template #title>
+            <span>产品创建成功</span>
+        </template>
+        <template #footer>
+            <a-button @click="cancel">关闭</a-button>
+        </template>
+        <div class="product-tips">
+            <div style="display: flex">
+                <div class="product-icon">
+                    <check-circle-outlined class="icon-style" />
+                </div>
+                <div class="product-title">产品创建成功</div>
+            </div>
+            <div style="display: flex">
+                <div class="product-id">产品ID: 12333</div>
+                <div class="product-btn" @click="jump">查看详情</div>
+            </div>
+            <div>接下来推荐操作:</div>
+            <div class="product-main">1、配置产品接入方式</div>
+            <div class="product-text">
+                点击具体产品的查看按钮,进入“设备接入”tab页，并参照设备铭牌说明选择匹配的接入方式
+            </div>
+            <div class="product-main">2、添加测试设备</div>
+            <div class="product-text">
+                进入设备列表，添加单个设备，用于验证产品模型是否配置正确
+            </div>
+            <div class="product-main">3、功能调试</div>
+            <div class="product-text">
+                点击查看具体设备，进入“设备诊断”对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确
+            </div>
+            <div class="product-main">4、批量添加设备</div>
+            <div class="product-text">
+                进入设备列表页面，点击批量导入设备，批量添加同一产品下的设备
+            </div>
+        </div>
+    </a-modal>
+</template>
+<script lang="ts" setup name="DialogTips">
+import { getImage } from '@/utils/comm.ts';
+import { CheckCircleOutlined } from '@ant-design/icons-vue';
+const visible = ref<boolean>(false);
+/**
+ * 弹窗关闭
+ */
+const cancel = () => {
+    visible.value = false;
+};
+/**
+ * 显示弹窗
+ */
+const show = () => {
+    visible.value = true;
+};
+/**
+ * 跳转页面
+ */
+const jump = () => {};
+defineExpose({
+    show: show,
+});
+</script>
+<style lang="less" scoped>
+.product-tips {
+    .product-icon {
+        .icon-style {
+            color: #52c41a;
+            font-size: 25px;
+        }
+    }
+    .product-title {
+        margin-left: 10px;
+        margin-top: 2px;
+        font-weight: 600;
+    }
+    .product-id {
+        margin: 10px 15px 10px 0px;
+    }
+    .product-btn {
+        margin: 10px 0px 10px 0;
+        color: #0297d7;
+    }
+    .product-text {
+        color: #757575;
+    }
+    .product-main {
+        font-weight: 600;
+    }
+}
+</style>
diff --git a/src/views/device/Product/Save/index.vue b/src/views/device/Product/Save/index.vue
index d7605411..c004f166 100644
--- a/src/views/device/Product/Save/index.vue
+++ b/src/views/device/Product/Save/index.vue
@@ -194,6 +194,7 @@
             </a-form>
         </div>
     </a-modal>
+    <DialogTips ref="dialogRef" />
 </template>
 
 <script lang="ts" setup>
@@ -201,7 +202,7 @@ import { category } from '@/api/device/product';
 import { Form } from 'ant-design-vue';
 import { getImage } from '@/utils/comm.ts';
 import { message } from 'ant-design-vue';
-import ChooseCard from '../ChooseCard/index.vue';
+import DialogTips from '../DialogTips/index.vue';
 import { filterTreeSelectNode, filterSelectNode } from '@/utils/comm';
 import { FILE_UPLOAD } from '@/api/comm';
 import { isInput } from '@/utils/regular';
@@ -225,6 +226,7 @@ const props = defineProps({
     },
 });
 const loading = ref<boolean>(false);
+const dialogRef = ref();
 const treeList = ref<Record<string, any>[]>([]);
 const visible = ref<boolean>(false);
 const logoLoading = ref<boolean>(false);
@@ -335,26 +337,27 @@ watch(
  * 显示弹窗
  */
 const show = (data: any) => {
-    console.log(props.isAdd, '11111');
     if (props.isAdd === 2) {
-        // form.name = data.name;
-        // form.classifiedId = data.classifiedId;
-        // form.classifiedName = data.classifiedName;
-        // form.photoUrl = data.photoUrl || photoValue.value;
-        // form.deviceType = data.deviceType.value;
-        // form.describe = form.describe;
-        // form.id = data.id;
-        // disabled.value = true;
-    } else {
-        // form.name = '';
-        // form.classifiedId = '';
-        // form.classifiedName = '';
-        // form.photoUrl = photoValue.value;
-        // form.deviceType = '';
-        // form.describe = '';
-        // form.id = '';
+        form.name = data.name;
+        form.classifiedId = data.classifiedId;
+        form.classifiedName = data.classifiedName;
+        form.photoUrl = data.photoUrl || photoValue.value;
+        form.deviceType = data.deviceType.value;
+        form.describe = form.describe;
+        form.id = data.id;
+        disabled.value = true;
+    } else if (props.isAdd === 1) {
+        form.name = '';
+        form.classifiedId = '';
+        form.classifiedName = '';
+        form.photoUrl = getImage('/device/instance/device-card.png');
+        form.deviceType = '';
+        form.describe = '';
+        form.id = '';
+        disabled.value = false;
+        dialogRef.value.show();
     }
-    visible.value = true;
+    // visible.value = true;
 };
 
 /**
@@ -376,35 +379,6 @@ const submitData = () => {
         .then(async () => {})
         .catch((err: any) => {});
 };
-/**
- * 文件上传之前
- */
-const beforeUpload = (file: any) => {
-    const isType: any = imageTypes.includes(file.type);
-    if (!isType) {
-        message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
-        return false;
-    }
-    const isSize = file.size / 1024 / 1024 < 4;
-    if (!isSize) {
-        message.error(`图片大小必须小于${4}M`);
-    }
-    return isType && isSize;
-};
-
-/**
- * 文件改变事件
- */
-const handleChange = (info: any) => {
-    if (info.file.status === 'uploading') {
-        logoLoading.value = true;
-    }
-    if (info.file.status === 'done') {
-        info.file.url = info.file.response?.result;
-        logoLoading.value = false;
-        photoValue.value = info.file.response?.result;
-    }
-};
 /**
  * 初始化
  */
diff --git a/src/views/device/Product/index.vue b/src/views/device/Product/index.vue
index e71205cd..380e6ef8 100644
--- a/src/views/device/Product/index.vue
+++ b/src/views/device/Product/index.vue
@@ -41,27 +41,42 @@
                         </a-row>
                     </template>
                     <template #actions="item">
-                        <a-popconfirm
-                            v-if="item.popConfirm"
-                            v-bind="item.popConfirm"
+                        <a-tooltip
+                            v-bind="item.tooltip"
+                            :title="item.disabled && item.tooltip.title"
                         >
-                            <a-button :disabled="item.disabled">
-                                <DeleteOutlined v-if="item.key === 'delete'" />
-                                <template v-else>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item.text }}</span>
-                                </template>
-                            </a-button>
-                        </a-popconfirm>
-                        <template v-else>
-                            <a-button :disabled="item.disabled">
-                                <DeleteOutlined v-if="item.key === 'delete'" />
-                                <template v-else>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item.text }}</span>
-                                </template>
-                            </a-button>
-                        </template>
+                            <a-popconfirm
+                                v-if="item.popConfirm"
+                                v-bind="item.popConfirm"
+                                :disabled="item.disabled"
+                            >
+                                <a-button :disabled="item.disabled">
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item?.text }}</span>
+                                    </template>
+                                </a-button>
+                            </a-popconfirm>
+                            <template v-else>
+                                <a-button
+                                    :disabled="item.disabled"
+                                    @click="item.onClick"
+                                >
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item?.text }}</span>
+                                    </template>
+                                </a-button>
+                            </template>
+                        </a-tooltip>
                     </template>
                 </CardBox>
             </template>
@@ -303,7 +318,9 @@ const getActions = (
 const add = () => {
     isAdd.value = 1;
     title.value = '新增';
-    saveRef.value.show(currentForm.value);
+    nextTick(() => {
+        saveRef.value.show(currentForm.value);
+    });
 };
 
 // 筛选
diff --git a/src/views/init-home/Basic/index.vue b/src/views/init-home/Basic/index.vue
new file mode 100644
index 00000000..fc2c7eea
--- /dev/null
+++ b/src/views/init-home/Basic/index.vue
@@ -0,0 +1,717 @@
+<!-- 基础内容 -->
+<template>
+    <a-form layout="vertical" :model="form" ref="formBasicRef">
+        <a-row :span="24" :gutter="24">
+            <a-col :span="10">
+                <a-form-item
+                    label="系统名称"
+                    name="title"
+                    v-bind="validateInfos.title"
+                >
+                    <a-input
+                        v-model:value="form.title"
+                        :maxlength="64"
+                        placeholder="请输入系统名称"
+                    />
+                </a-form-item>
+                <a-form-item
+                    label="主题色"
+                    name="headerTheme"
+                    v-bind="validateInfos.headerTheme"
+                >
+                    <a-select v-model:value="form.headerTheme">
+                        <a-select-option value="light">白色</a-select-option>
+                        <a-select-option value="dark">黑色</a-select-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item>
+                    <template #label>
+                        <span>高德API Key</span>
+                        <a-tooltip title="配置后平台可调用高德地图GIS服务">
+                            <img
+                                class="img-style"
+                                :src="getImage('/init-home/mark.png')"
+                            />
+                        </a-tooltip>
+                    </template>
+                    <a-input
+                        v-model:value="form.apikey"
+                        placeholder="请输入高德API Key"
+                    />
+                </a-form-item>
+                <a-form-item name="basePath" v-bind="validateInfos.basePath">
+                    <template #label>
+                        <span>base-path</span>
+                        <a-tooltip title="系统后台访问的url">
+                            <img
+                                class="img-style"
+                                :src="getImage('/init-home/mark.png')"
+                            />
+                        </a-tooltip>
+                    </template>
+                    <a-input
+                        v-model:value="form.basePath"
+                        placeholder="请输入高德API Key"
+                    />
+                </a-form-item>
+                <a-row :gutter="24" :span="24">
+                    <a-col>
+                        <a-form-item label="系统logo">
+                            <div class="upload-image-warp-logo">
+                                <div class="upload-image-border-logo">
+                                    <a-upload
+                                        name="file"
+                                        :action="FILE_UPLOAD"
+                                        :headers="headers"
+                                        :showUploadList="false"
+                                        :beforeUpload="beforeLogoUpload"
+                                        @change="handleChangeLogo"
+                                        :accept="
+                                            imageTypes && imageTypes.length
+                                                ? imageTypes.toString()
+                                                : ''
+                                        "
+                                    >
+                                        <div class="upload-image-content-logo">
+                                            <div
+                                                class="loading-logo"
+                                                v-if="logoLoading"
+                                            >
+                                                <LoadingOutlined
+                                                    style="font-size: 28px"
+                                                />
+                                            </div>
+                                            <div
+                                                class="upload-image"
+                                                v-if="logoValue"
+                                                :style="
+                                                    logoValue
+                                                        ? `background-image: url(${logoValue});`
+                                                        : ''
+                                                "
+                                            ></div>
+                                            <div
+                                                v-if="logoValue"
+                                                class="upload-image-mask"
+                                            >
+                                                点击修改
+                                            </div>
+                                            <div v-else>
+                                                <div v-if="logoLoading">
+                                                    <LoadingOutlined
+                                                        style="font-size: 28px"
+                                                    />
+                                                </div>
+                                                <div v-else>
+                                                    <PlusOutlined
+                                                        style="font-size: 28px"
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a-upload>
+                                    <div v-if="logoLoading">
+                                        <div class="upload-loading-mask">
+                                            <LoadingOutlined
+                                                v-if="logoLoading"
+                                                style="font-size: 28px"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="upload-tips">推荐尺寸200*200</div>
+                            <div class="upload-tips">支持jpg,png</div>
+                        </a-form-item>
+                    </a-col>
+                    <a-col>
+                        <a-form-item>
+                            <template #label>
+                                <span>浏览器页签</span>
+                                <a-tooltip title="浏览器tab页中显示的图片元素">
+                                    <img
+                                        class="img-style"
+                                        :src="getImage('/init-home/mark.png')"
+                                    />
+                                </a-tooltip>
+                            </template>
+                            <div class="upload-image-warp-logo">
+                                <div class="upload-image-border-logo">
+                                    <a-upload
+                                        name="file"
+                                        :action="FILE_UPLOAD"
+                                        :headers="headers"
+                                        :showUploadList="false"
+                                        :beforeUpload="beforeIconUpload"
+                                        @change="changeIconUpload"
+                                        :accept="
+                                            iconTypes && iconTypes.length
+                                                ? iconTypes.toString()
+                                                : ''
+                                        "
+                                    >
+                                        <div class="upload-image-content-logo">
+                                            <div
+                                                v-if="iconLoading"
+                                                class="loading-icon"
+                                            >
+                                                <LoadingOutlined
+                                                    style="font-size: 28px"
+                                                />
+                                            </div>
+                                            <div
+                                                class="upload-image-icon"
+                                                v-if="iconValue"
+                                                :style="
+                                                    iconValue
+                                                        ? `background-image: url(${iconValue});`
+                                                        : ''
+                                                "
+                                            ></div>
+                                            <div
+                                                v-if="iconValue"
+                                                class="upload-image-mask"
+                                            >
+                                                点击修改
+                                            </div>
+                                            <div v-else>
+                                                <div>
+                                                    <PlusOutlined
+                                                        style="font-size: 28px"
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a-upload>
+                                </div>
+                            </div>
+
+                            <div class="upload-tips">推荐尺寸64*64</div>
+                            <div class="upload-tips">支持icon格式</div>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-col>
+            <a-col :span="14">
+                <a-form-item label="登录背景图">
+                    <div class="upload-image-warp-back">
+                        <div class="upload-image-border-back">
+                            <a-upload
+                                name="file"
+                                :action="FILE_UPLOAD"
+                                :headers="headers"
+                                :beforeUpload="beforeBackUpload"
+                                :showUploadList="false"
+                                @change="changeBackUpload"
+                                :accept="
+                                    imageTypes && imageTypes.length
+                                        ? imageTypes.toString()
+                                        : ''
+                                "
+                            >
+                                <div class="upload-image-content-back">
+                                    <div
+                                        v-if="backLoading"
+                                        class="loading-back"
+                                    >
+                                        <LoadingOutlined
+                                            style="font-size: 28px"
+                                        />
+                                    </div>
+                                    <div
+                                        class="upload-image"
+                                        v-if="backValue"
+                                        :style="
+                                            backValue
+                                                ? `background-image: url(${backValue});`
+                                                : ''
+                                        "
+                                    ></div>
+                                    <div
+                                        v-if="backValue"
+                                        class="upload-image-mask"
+                                    >
+                                        点击修改
+                                    </div>
+                                    <div v-else>
+                                        <div>
+                                            <PlusOutlined
+                                                style="font-size: 28px"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </a-upload>
+                        </div>
+                    </div>
+                    <div class="upload-tips">支持4M以内的图片:支持jpg、png</div>
+                    <div class="upload-tips">建议尺寸1400x1080</div>
+                </a-form-item>
+            </a-col>
+        </a-row>
+    </a-form>
+</template>
+<script setup lang="ts">
+import { modalState, formState, logoState } from '../data/interface';
+import { getImage } from '@/utils/comm.ts';
+import { Form } from 'ant-design-vue';
+import {
+    getSystemPermission,
+    save,
+    addRole,
+    getRoleMenu,
+    updateRoleMenu,
+    getResourcesCurrent,
+    saveNetwork,
+    saveProtocol,
+    getProtocol,
+    saveAccessConfig,
+    saveProduct,
+    saveDevice,
+    changeDeploy,
+    deployDevice,
+    saveInit,
+} from '@/api/initHome';
+import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
+import { message } from 'ant-design-vue';
+const formRef = ref();
+const menuRef = ref();
+const formBasicRef = ref();
+const useForm = Form.useForm;
+const iconValue = ref('/public/favicon.ico');
+const backValue = ref('/public/images/login.png');
+const logoValue = ref('/public/logo.png');
+const logoLoading = ref(false);
+const backLoading = ref(false);
+const iconLoading = ref(false);
+const imageTypes = ref(['image/jpeg', 'image/png']);
+const iconTypes = ref(['image/x-icon']);
+/**
+ * 表单数据
+ */
+const form = ref<formState>({
+    title: '',
+    headerTheme: 'light',
+    apikey: '',
+    basePath: `${window.location.origin}/api`,
+    logo: '',
+    icon: '',
+});
+const rulesFrom = ref({
+    title: [
+        {
+            required: true,
+            message: '请输入系统名称',
+            trigger: 'change',
+        },
+    ],
+    headerTheme: [
+        {
+            required: true,
+            message: '请选择主题色',
+            trigger: 'blur',
+        },
+    ],
+    basePath: [
+        {
+            required: true,
+            message: '请输入base-path',
+            trigger: 'blur',
+        },
+    ],
+});
+const { resetFields, validate, validateInfos } = useForm(
+    form.value,
+    rulesFrom.value,
+);
+/**
+ * 提交数据
+ */
+const saveBasicInfo = async () => {
+    validate()
+        .then(async () => {
+            const item = [
+                {
+                    scope: 'front',
+                    properties: {
+                        ...form,
+                        apikey: '',
+                        'base-path': '',
+                    },
+                },
+                {
+                    scope: 'amap',
+                    properties: {
+                        api: form.apikey,
+                    },
+                },
+                {
+                    scope: 'paths',
+                    properties: {
+                        'base-path': form.basePath,
+                    },
+                },
+            ];
+            const res = await save(item);
+            if (res.status === 200) {
+                const ico: any = document.querySelector('link[rel="icon"]');
+                if (ico !== null) {
+                    ico.href = form.icon;
+                }
+            }
+            //     basicData.isSucessBasic = 3;
+            // } else {
+            //     basicData.isSucessBasic = 2;
+            // }
+        })
+        .catch((error: ValidateErrorEntity<formState>) => {
+            // basicData.isSucessBasic = 2;
+        });
+};
+/**
+ * logo格式校验
+ */
+const beforeLogoUpload = (file: any) => {
+    const isType: any = imageTypes.value.includes(file.type);
+    if (!isType) {
+        message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
+        return false;
+    }
+    const isSize = file.size / 1024 / 1024 < 4;
+    if (!isSize) {
+        message.error(`图片大小必须小于${4}M`);
+    }
+    return isType && isSize;
+};
+
+/*
+ * logo上传改变事件
+ */
+const handleChangeLogo = (info: any) => {
+    if (info.file.status === 'uploading') {
+        logoLoading.value = true;
+    }
+    if (info.file.status === 'done') {
+        info.file.url = info.file.response?.result;
+        logoLoading.value = false;
+        logoValue.value = info.file.response?.result;
+    }
+};
+
+/**
+ * 背景图片上传之前
+ */
+const beforeBackUpload = (file: any) => {
+    const isType = imageTypes.value.includes(file.type);
+    if (!isType) {
+        message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
+        return false;
+    }
+    const isSize = file.size / 1024 / 1024 < 4;
+    if (!isSize) {
+        message.error(`图片大小必须小于${4}M`);
+    }
+    return isType && isSize;
+};
+/**
+ * 背景图片发生改变
+ */
+const changeBackUpload = (info: any) => {
+    if (info.file.status === 'uploading') {
+        backLoading.value = true;
+    }
+    if (info.file.status === 'done') {
+        info.file.url = info.file.response?.result;
+        backLoading.value = false;
+        backValue.value = info.file.response?.result;
+    }
+};
+defineExpose({
+    submitBasic: saveBasicInfo,
+});
+</script>
+<style scoped lang="less">
+.page-container {
+    width: 100%;
+    height: 100vh;
+    padding: 32px 128px 64px;
+    overflow: hidden;
+    background-image: url(/images/init-home/background.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .container-text {
+        font-weight: 700;
+        font-size: 16px;
+        .container-title {
+            position: relative;
+            padding-left: 10px;
+            color: rgba(0, 0, 0, 0.8);
+            font-weight: 600;
+            line-height: 1;
+            &:before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 4px;
+                height: 100%;
+                background-color: #1d39c4;
+                border-radius: 0 3px 3px 0;
+                content: '';
+            }
+        }
+    }
+    .container-box {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+        background: #fff;
+        .container-main {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            height: 100%;
+            overflow-y: auto;
+            .container-right {
+                width: calc(100% - 70px);
+                .title {
+                    font-size: 15px;
+                }
+                .sub-title {
+                    margin-top: 2px;
+                    margin-left: 8px;
+                    color: #666;
+                    font-size: 12px;
+                    opacity: 0.85;
+                }
+                .img-style {
+                    width: 16px;
+                    height: 16px;
+                    margin-left: 5px;
+                }
+                .menu-style {
+                    display: flex;
+                    align-items: center;
+                    .menu-img {
+                        margin-right: 16px;
+                    }
+                }
+                .init-home-role {
+                    .init-home-role-content {
+                        display: flex;
+                        grid-gap: 24px;
+                        gap: 24px;
+                    }
+                    .role-item-1 {
+                        background-image: url(/images/init-home/role1.png);
+                    }
+                    .role-item-2 {
+                        background-image: url(/images/init-home/role2.png);
+                    }
+                    .role-item-3 {
+                        background-image: url(/images/init-home/role3.png);
+                    }
+                    .role-item {
+                        position: relative;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+                        margin-bottom: 30px;
+                        padding: 24px;
+                        background-repeat: no-repeat;
+                        background-position: 50%;
+                        background-size: 370px;
+                        border: 1px solid #f5f5f5;
+                        .role-item-title {
+                            display: flex;
+                            .role-title {
+                                flex: 1 1 auto;
+                                font-weight: 700;
+                                font-size: 16px;
+                            }
+                        }
+                        .role-item-content {
+                            width: 250px;
+                            height: 260px;
+                            margin-top: 24px;
+                        }
+                        .role-item-footer {
+                            position: absolute;
+                            bottom: -30px;
+                            left: 0;
+                            width: 100%;
+                            color: #999;
+                            font-size: 12px;
+                            text-align: center;
+                        }
+                    }
+                }
+                .init-data-img {
+                    width: 300px;
+                }
+
+                .upload-image-warp-logo {
+                    display: flex;
+                    justify-content: flex-start;
+                    .upload-image-border-logo {
+                        position: relative;
+                        overflow: hidden;
+                        border: 1px dashed #d9d9d9;
+                        transition: all 0.3s;
+                        width: 160px;
+                        height: 150px;
+                        &:hover {
+                            border: 1px dashed #1890ff;
+                            display: flex;
+                        }
+                        .upload-image-content-logo {
+                            align-items: center;
+                            justify-content: center;
+                            position: relative;
+                            display: flex;
+                            flex-direction: column;
+                            width: 160px;
+                            height: 150px;
+                            padding: 8px;
+                            background-color: rgba(0, 0, 0, 0.06);
+                            cursor: pointer;
+                            .loading-logo {
+                                position: absolute;
+                                top: 50%;
+                            }
+                            .loading-icon {
+                                position: absolute;
+                            }
+                            .upload-image {
+                                width: 100%;
+                                height: 100%;
+                                background-repeat: no-repeat;
+                                background-position: 50%;
+                                background-size: cover;
+                            }
+                            .upload-image-icon {
+                                width: 100%;
+                                height: 100%;
+                                background-repeat: no-repeat;
+                                background-position: 50%;
+                                background-size: inherit;
+                            }
+                            .upload-image-mask {
+                                align-items: center;
+                                justify-content: center;
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                display: none;
+                                width: 100%;
+                                height: 100%;
+                                color: #fff;
+                                font-size: 16px;
+                                background-color: rgba(0, 0, 0, 0.35);
+                            }
+                            &:hover .upload-image-mask {
+                                display: flex;
+                            }
+                        }
+                    }
+                }
+
+                .upload-image-warp-back {
+                    display: flex;
+                    justify-content: flex-start;
+                    .upload-image-border-back {
+                        position: relative;
+                        overflow: hidden;
+                        border: 1px dashed #d9d9d9;
+                        transition: all 0.3s;
+                        width: 570px;
+                        height: 415px;
+                        &:hover {
+                            border: 1px dashed #1890ff;
+                            display: flex;
+                        }
+                        .upload-image-content-back {
+                            align-items: center;
+                            justify-content: center;
+                            position: relative;
+                            display: flex;
+                            flex-direction: column;
+                            width: 570px;
+                            height: 415px;
+                            padding: 8px;
+                            background-color: rgba(0, 0, 0, 0.06);
+                            cursor: pointer;
+                            .loading-back {
+                                position: absolute;
+                            }
+                            .upload-image {
+                                width: 100%;
+                                height: 100%;
+                                background-repeat: no-repeat;
+                                background-position: 50%;
+                                background-size: cover;
+                            }
+                            .upload-image-mask {
+                                align-items: center;
+                                justify-content: center;
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                display: none;
+                                width: 100%;
+                                height: 100%;
+                                color: #fff;
+                                font-size: 16px;
+                                background-color: rgba(0, 0, 0, 0.35);
+                            }
+                            &:hover .upload-image-mask {
+                                display: flex;
+                            }
+                        }
+                    }
+                }
+                .upload-tips {
+                    color: rgba(0, 0, 0, 0.45);
+                    font-size: 14px;
+                    line-height: 1.5715;
+                }
+                // .uplod-style {
+                //     :deep(.ant-upload.ant-upload-select-picture-card) {
+                //         width: 180px;
+                //         height: 180px;
+                //     }
+                // }
+                .btn-style {
+                    margin-top: 20px;
+                    color: #fff;
+                    border-color: #1d39c4;
+                    background: #1d39c4;
+                }
+            }
+        }
+    }
+    .modal-style {
+        .data-content {
+            background: rgb(236, 237, 238);
+            .data-p-style {
+                padding: 10px;
+            }
+        }
+    }
+    ::-webkit-scrollbar {
+        width: 12px;
+    }
+
+    /* 滚动槽 */
+    ::-webkit-scrollbar-track {
+        background: #f2f2f2;
+        border-radius: 8px;
+    }
+
+    /* 滚动条滑块 */
+    ::-webkit-scrollbar-thumb {
+        background: #cecece;
+        border-radius: 8px;
+    }
+}
+</style>
diff --git a/src/views/init-home/index.vue b/src/views/init-home/index.vue
index 896f2983..ca732ea1 100644
--- a/src/views/init-home/index.vue
+++ b/src/views/init-home/index.vue
@@ -16,426 +16,7 @@
                                         >配置平台名称、登录背景图、主题色等基本信息</span
                                     >
                                 </template>
-                                <a-form
-                                    layout="vertical"
-                                    :model="form"
-                                    ref="formBasicRef"
-                                >
-                                    <a-row :span="24" :gutter="24">
-                                        <a-col :span="10">
-                                            <a-form-item
-                                                label="系统名称"
-                                                name="title"
-                                                v-bind="validateInfos.title"
-                                            >
-                                                <a-input
-                                                    v-model:value="form.title"
-                                                    :maxlength="64"
-                                                    placeholder="请输入系统名称"
-                                                />
-                                            </a-form-item>
-                                            <a-form-item
-                                                label="主题色"
-                                                name="headerTheme"
-                                                v-bind="
-                                                    validateInfos.headerTheme
-                                                "
-                                            >
-                                                <a-select
-                                                    v-model:value="
-                                                        form.headerTheme
-                                                    "
-                                                >
-                                                    <a-select-option
-                                                        value="light"
-                                                        >白色</a-select-option
-                                                    >
-                                                    <a-select-option
-                                                        value="dark"
-                                                        >黑色</a-select-option
-                                                    >
-                                                </a-select>
-                                            </a-form-item>
-                                            <a-form-item>
-                                                <template #label>
-                                                    <span>高德API Key</span>
-                                                    <a-tooltip
-                                                        title="配置后平台可调用高德地图GIS服务"
-                                                    >
-                                                        <img
-                                                            class="img-style"
-                                                            :src="
-                                                                getImage(
-                                                                    '/init-home/mark.png',
-                                                                )
-                                                            "
-                                                        />
-                                                    </a-tooltip>
-                                                </template>
-                                                <a-input
-                                                    v-model:value="form.apikey"
-                                                    placeholder="请输入高德API Key"
-                                                />
-                                            </a-form-item>
-                                            <a-form-item
-                                                name="basePath"
-                                                v-bind="validateInfos.basePath"
-                                            >
-                                                <template #label>
-                                                    <span>base-path</span>
-                                                    <a-tooltip
-                                                        title="系统后台访问的url"
-                                                    >
-                                                        <img
-                                                            class="img-style"
-                                                            :src="
-                                                                getImage(
-                                                                    '/init-home/mark.png',
-                                                                )
-                                                            "
-                                                        />
-                                                    </a-tooltip>
-                                                </template>
-                                                <a-input
-                                                    v-model:value="
-                                                        form.basePath
-                                                    "
-                                                    placeholder="请输入高德API Key"
-                                                />
-                                            </a-form-item>
-                                            <a-row :gutter="24" :span="24">
-                                                <a-col>
-                                                    <a-form-item
-                                                        label="系统logo"
-                                                    >
-                                                        <div
-                                                            class="upload-image-warp-logo"
-                                                        >
-                                                            <div
-                                                                class="upload-image-border-logo"
-                                                            >
-                                                                <a-upload
-                                                                    name="file"
-                                                                    :action="
-                                                                        FILE_UPLOAD
-                                                                    "
-                                                                    :headers="
-                                                                        headers
-                                                                    "
-                                                                    :showUploadList="
-                                                                        false
-                                                                    "
-                                                                    :beforeUpload="
-                                                                        beforeLogoUpload
-                                                                    "
-                                                                    @change="
-                                                                        handleChangeLogo
-                                                                    "
-                                                                    :accept="
-                                                                        imageTypes &&
-                                                                        imageTypes.length
-                                                                            ? imageTypes.toString()
-                                                                            : ''
-                                                                    "
-                                                                >
-                                                                    <div
-                                                                        class="upload-image-content-logo"
-                                                                    >
-                                                                        <div
-                                                                            class="loading-logo"
-                                                                            v-if="
-                                                                                logoLoading
-                                                                            "
-                                                                        >
-                                                                            <LoadingOutlined
-                                                                                style="
-                                                                                    font-size: 28px;
-                                                                                "
-                                                                            />
-                                                                        </div>
-                                                                        <div
-                                                                            class="upload-image"
-                                                                            v-if="
-                                                                                logoValue
-                                                                            "
-                                                                            :style="
-                                                                                logoValue
-                                                                                    ? `background-image: url(${logoValue});`
-                                                                                    : ''
-                                                                            "
-                                                                        ></div>
-                                                                        <div
-                                                                            v-if="
-                                                                                logoValue
-                                                                            "
-                                                                            class="upload-image-mask"
-                                                                        >
-                                                                            点击修改
-                                                                        </div>
-                                                                        <div
-                                                                            v-else
-                                                                        >
-                                                                            <div
-                                                                                v-if="
-                                                                                    logoLoading
-                                                                                "
-                                                                            >
-                                                                                <LoadingOutlined
-                                                                                    style="
-                                                                                        font-size: 28px;
-                                                                                    "
-                                                                                />
-                                                                            </div>
-                                                                            <div
-                                                                                v-else
-                                                                            >
-                                                                                <PlusOutlined
-                                                                                    style="
-                                                                                        font-size: 28px;
-                                                                                    "
-                                                                                />
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                </a-upload>
-                                                                <div
-                                                                    v-if="
-                                                                        logoLoading
-                                                                    "
-                                                                >
-                                                                    <div
-                                                                        class="upload-loading-mask"
-                                                                    >
-                                                                        <LoadingOutlined
-                                                                            v-if="
-                                                                                logoLoading
-                                                                            "
-                                                                            style="
-                                                                                font-size: 28px;
-                                                                            "
-                                                                        />
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-
-                                                        <div
-                                                            class="upload-tips"
-                                                        >
-                                                            推荐尺寸200*200
-                                                        </div>
-                                                        <div
-                                                            class="upload-tips"
-                                                        >
-                                                            支持jpg,png
-                                                        </div>
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col>
-                                                    <a-form-item>
-                                                        <template #label>
-                                                            <span
-                                                                >浏览器页签</span
-                                                            >
-                                                            <a-tooltip
-                                                                title="浏览器tab页中显示的图片元素"
-                                                            >
-                                                                <img
-                                                                    class="img-style"
-                                                                    :src="
-                                                                        getImage(
-                                                                            '/init-home/mark.png',
-                                                                        )
-                                                                    "
-                                                                />
-                                                            </a-tooltip>
-                                                        </template>
-                                                        <div
-                                                            class="upload-image-warp-logo"
-                                                        >
-                                                            <div
-                                                                class="upload-image-border-logo"
-                                                            >
-                                                                <a-upload
-                                                                    name="file"
-                                                                    :action="
-                                                                        FILE_UPLOAD
-                                                                    "
-                                                                    :headers="
-                                                                        headers
-                                                                    "
-                                                                    :showUploadList="
-                                                                        false
-                                                                    "
-                                                                    :beforeUpload="
-                                                                        beforeIconUpload
-                                                                    "
-                                                                    @change="
-                                                                        changeIconUpload
-                                                                    "
-                                                                    :accept="
-                                                                        iconTypes &&
-                                                                        iconTypes.length
-                                                                            ? iconTypes.toString()
-                                                                            : ''
-                                                                    "
-                                                                >
-                                                                    <div
-                                                                        class="upload-image-content-logo"
-                                                                    >
-                                                                        <div
-                                                                            v-if="
-                                                                                iconLoading
-                                                                            "
-                                                                            class="loading-icon"
-                                                                        >
-                                                                            <LoadingOutlined
-                                                                                style="
-                                                                                    font-size: 28px;
-                                                                                "
-                                                                            />
-                                                                        </div>
-                                                                        <div
-                                                                            class="upload-image-icon"
-                                                                            v-if="
-                                                                                iconValue
-                                                                            "
-                                                                            :style="
-                                                                                iconValue
-                                                                                    ? `background-image: url(${iconValue});`
-                                                                                    : ''
-                                                                            "
-                                                                        ></div>
-                                                                        <div
-                                                                            v-if="
-                                                                                iconValue
-                                                                            "
-                                                                            class="upload-image-mask"
-                                                                        >
-                                                                            点击修改
-                                                                        </div>
-                                                                        <div
-                                                                            v-else
-                                                                        >
-                                                                            <div>
-                                                                                <PlusOutlined
-                                                                                    style="
-                                                                                        font-size: 28px;
-                                                                                    "
-                                                                                />
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                </a-upload>
-                                                            </div>
-                                                        </div>
-
-                                                        <div
-                                                            class="upload-tips"
-                                                        >
-                                                            推荐尺寸64*64
-                                                        </div>
-                                                        <div
-                                                            class="upload-tips"
-                                                        >
-                                                            支持icon格式
-                                                        </div>
-                                                    </a-form-item>
-                                                </a-col>
-                                            </a-row>
-                                        </a-col>
-                                        <a-col :span="14">
-                                            <a-form-item label="登录背景图">
-                                                <div
-                                                    class="upload-image-warp-back"
-                                                >
-                                                    <div
-                                                        class="upload-image-border-back"
-                                                    >
-                                                        <a-upload
-                                                            name="file"
-                                                            :action="
-                                                                FILE_UPLOAD
-                                                            "
-                                                            :headers="headers"
-                                                            :beforeUpload="
-                                                                beforeBackUpload
-                                                            "
-                                                            :showUploadList="
-                                                                false
-                                                            "
-                                                            @change="
-                                                                changeBackUpload
-                                                            "
-                                                            :accept="
-                                                                imageTypes &&
-                                                                imageTypes.length
-                                                                    ? imageTypes.toString()
-                                                                    : ''
-                                                            "
-                                                        >
-                                                            <div
-                                                                class="upload-image-content-back"
-                                                            >
-                                                                <div
-                                                                    v-if="
-                                                                        backLoading
-                                                                    "
-                                                                    class="loading-back"
-                                                                >
-                                                                    <LoadingOutlined
-                                                                        style="
-                                                                            font-size: 28px;
-                                                                        "
-                                                                    />
-                                                                </div>
-                                                                <div
-                                                                    class="upload-image"
-                                                                    v-if="
-                                                                        backValue
-                                                                    "
-                                                                    :style="
-                                                                        backValue
-                                                                            ? `background-image: url(${backValue});`
-                                                                            : ''
-                                                                    "
-                                                                ></div>
-                                                                <div
-                                                                    v-if="
-                                                                        backValue
-                                                                    "
-                                                                    class="upload-image-mask"
-                                                                >
-                                                                    点击修改
-                                                                </div>
-                                                                <div v-else>
-                                                                    <div>
-                                                                        <PlusOutlined
-                                                                            style="
-                                                                                font-size: 28px;
-                                                                            "
-                                                                        />
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </a-upload>
-                                                        <!-- <div v-if="logoValue">
-                                                          <div v-if="logoLoading">
-                                                            <div class="upload-loading-mask"></div>
-                                                          </div>
-                                                        </div> -->
-                                                    </div>
-                                                </div>
-                                                <div class="upload-tips">
-                                                    支持4M以内的图片:支持jpg、png
-                                                </div>
-                                                <div class="upload-tips">
-                                                    建议尺寸1400x1080
-                                                </div>
-                                            </a-form-item>
-                                        </a-col>
-                                    </a-row>
-                                </a-form>
+                                <Basic ref="basicRef" />
                             </a-collapse-panel>
                             <a-collapse-panel key="2">
                                 <template #header>
@@ -743,6 +324,7 @@
 </template>
 <script setup lang="ts">
 import { getImage } from '@/utils/comm.ts';
+import Basic from './Basic/index.vue';
 import {
     PlusOutlined,
     ExclamationCircleOutlined,
@@ -783,6 +365,7 @@ import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
 const formRef = ref();
 const menuRef = ref();
 const formBasicRef = ref();
+const basicRef = ref();
 const useForm = Form.useForm;
 /**
  * 表单数据
@@ -1358,7 +941,8 @@ const submitData = async () => {
     if (keys.value.length > 0) {
         roleData.addRoleData();
     }
-    basicData.saveBasicInfo();
+    basicRef.value.submitBasic();
+    // basicData.saveBasicInfo();
     // 当前数据是否成功提交
     if (
         basicData.isSucessBasic === 3 &&

From 2ba01642955bbd923a67aad30d2211cf6781e40d Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Wed, 1 Feb 2023 10:58:26 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DdatSource=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/device/{instance => }/button.png   | Bin
 src/components/Table/index.tsx                |  11 +++++
 .../device/Instance/Detail/Running/index.vue  |  46 ++++++++++++++++++
 src/views/device/Instance/Detail/index.vue    |  10 +++-
 src/views/device/Instance/index.vue           |   2 +-
 src/views/northbound/AliCloud/index.vue       |   2 +-
 src/views/northbound/DuerOS/index.vue         |   4 +-
 7 files changed, 69 insertions(+), 6 deletions(-)
 rename public/images/device/{instance => }/button.png (100%)
 create mode 100644 src/views/device/Instance/Detail/Running/index.vue

diff --git a/public/images/device/instance/button.png b/public/images/device/button.png
similarity index 100%
rename from public/images/device/instance/button.png
rename to public/images/device/button.png
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 774b95b8..232cc992 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -207,6 +207,7 @@ const JTable = defineComponent<JTableProps>({
                     _dataSource.value  = []
                 }
             } else {
+                console.log(props?.dataSource)
                 _dataSource.value = props?.dataSource || []
             }
             loading.value = false
@@ -220,6 +221,16 @@ const JTable = defineComponent<JTableProps>({
             {deep: true, immediate: true}
         )
 
+        watch(
+            () => props.dataSource, 
+            (newValue) => {
+                if(props.dataSource){
+                    handleSearch(props.params)
+                }
+            }, 
+            {deep: true, immediate: true}
+        )
+
         onMounted(() => {
             window.onresize = () => {
                 windowChange()
diff --git a/src/views/device/Instance/Detail/Running/index.vue b/src/views/device/Instance/Detail/Running/index.vue
new file mode 100644
index 00000000..e2e39b8a
--- /dev/null
+++ b/src/views/device/Instance/Detail/Running/index.vue
@@ -0,0 +1,46 @@
+<template>
+    <a-card>
+        <a-row type="flex">
+            <a-col flex="200px">
+                <div>
+                    <a-input-search
+                        v-model:value="value"
+                        placeholder="请输入事件名称"
+                        style="width: 200px; margin-bottom: 10px"
+                        @search="onSearch"
+                    />
+                    <a-tabs
+                        tab-position="left"
+                        :style="{ height: '600px' }"
+                        v-model:activeKey="activeKey"
+                        tabBarStyle="width: 200px"
+                    >
+                        <a-tab-pane v-for="i in tabList" :key="i.key" :tab="i.tab" />
+                    </a-tabs>
+                </div>
+            </a-col>
+            <a-col flex="auto">
+                <!-- <component :is="tabs[activeKey]" /> -->
+                123
+            </a-col>
+        </a-row>
+    </a-card>
+</template>
+
+<script lang="ts" setup>
+const activeKey = ref<string>('property')
+const tabList = ref<{key: string, tab: string}[]>([
+    {
+        key: 'property',
+        tab: '属性'
+    },
+    {
+        key: 'event1',
+        tab: '事件1'
+    }
+])
+
+const onSearch = () => {
+
+}
+</script>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/index.vue b/src/views/device/Instance/Detail/index.vue
index d9f2f0e5..02bd7026 100644
--- a/src/views/device/Instance/Detail/index.vue
+++ b/src/views/device/Instance/Detail/index.vue
@@ -32,7 +32,7 @@
             </div>
         </template>
         <template #extra>
-            <img @click="handleRefresh" :src="getImage('/device/instance/button.png')" style="margin-right: 20px; cursor: pointer;" />
+            <img @click="handleRefresh" :src="getImage('/device/button.png')" style="margin-right: 20px; cursor: pointer;" />
         </template>
         <component :is="tabs[instanceStore.tabActiveKey]" />
     </page-container>
@@ -41,6 +41,7 @@
 <script lang="ts" setup>
 import { useInstanceStore } from '@/store/instance';
 import Info from './Info/index.vue';
+import Running from './Running/index.vue'
 import Metadata from '../../components/Metadata/index.vue';
 import { _deploy, _disconnect } from '@/api/device/instance'
 import { message } from 'ant-design-vue';
@@ -59,6 +60,10 @@ const list = [
         key: 'Info',
         tab: '实例信息'
     },
+    {
+        key: 'Running',
+        tab: '运行状态'
+    },
     {
         key: 'Metadata',
         tab: '物模型'
@@ -67,7 +72,8 @@ const list = [
 
 const tabs = {
   Info,
-  Metadata
+  Metadata,
+  Running
 }
 
 watch(
diff --git a/src/views/device/Instance/index.vue b/src/views/device/Instance/index.vue
index 4792f526..b472faf3 100644
--- a/src/views/device/Instance/index.vue
+++ b/src/views/device/Instance/index.vue
@@ -385,7 +385,7 @@ const handleAdd = () => {
  * 查看
  */
 const handleView = (id: string) => {
-    router.push('/device/instance/detail/' + id);
+    router.push('/iot/device/instance/detail/' + id);
 };
 
 const getActions = (
diff --git a/src/views/northbound/AliCloud/index.vue b/src/views/northbound/AliCloud/index.vue
index cd36fd59..36c762ec 100644
--- a/src/views/northbound/AliCloud/index.vue
+++ b/src/views/northbound/AliCloud/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>123</div>
+    <page-container>阿里云</page-container>
 </template>
 
 <script setup>
diff --git a/src/views/northbound/DuerOS/index.vue b/src/views/northbound/DuerOS/index.vue
index 520d60bd..dc06f008 100644
--- a/src/views/northbound/DuerOS/index.vue
+++ b/src/views/northbound/DuerOS/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <page-container>
         <JTable 
             :columns="columns"
             :request="request"
@@ -69,7 +69,7 @@
                 </a-space>
             </template>
         </JTable>
-    </div>
+    </page-container>
 </template>
 
 <script setup lang="ts">

From c88283fb46337c5cc9e9f5b9220f1f9f417d0082 Mon Sep 17 00:00:00 2001
From: xiongqian <2167232911@qq.com>
Date: Wed, 1 Feb 2023 10:59:45 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/device/Product/Detail/BasicInfo/index.vue | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 src/views/device/Product/Detail/BasicInfo/index.vue

diff --git a/src/views/device/Product/Detail/BasicInfo/index.vue b/src/views/device/Product/Detail/BasicInfo/index.vue
deleted file mode 100644
index 8d5b884c..00000000
--- a/src/views/device/Product/Detail/BasicInfo/index.vue
+++ /dev/null
@@ -1 +0,0 @@
-<!-- 配置信息-->

From be172b1580c46a5ab3602f136e667130c709bac5 Mon Sep 17 00:00:00 2001
From: blp <2962632571@qq.com>
Date: Wed, 1 Feb 2023 13:50:17 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CardBox/index.vue  | 30 ++++++++++++++++++------------
 src/views/notice/Config/index.vue |  1 +
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/CardBox/index.vue b/src/components/CardBox/index.vue
index 0915064a..dee607c8 100644
--- a/src/components/CardBox/index.vue
+++ b/src/components/CardBox/index.vue
@@ -2,22 +2,21 @@
     <div class="card">
         <div
             class="card-warp"
-            :class="{ active: active ? 'active' : ''}"
+            :class="{ active: active ? 'active' : '' }"
             @click="handleClick"
         >
             <div class="card-content">
-                <a-row>
-                    <a-col :span="6">
-                        <!-- 图片 -->
-                        <div class="card-item-avatar">
-                            <slot name="img"> </slot>
-                        </div>
-                    </a-col>
-                    <a-col :span="18">
-                        <!-- 内容 -->
+                <div style="display: flex">
+                    <!-- 图片 -->
+                    <div class="card-item-avatar">
+                        <slot name="img"> </slot>
+                    </div>
+
+                    <!-- 内容 -->
+                    <div class="card-item-body">
                         <slot name="content"></slot>
-                    </a-col>
-                </a-row>
+                    </div>
+                </div>
 
                 <!-- 勾选 -->
                 <div v-if="active" class="checked-icon">
@@ -201,6 +200,13 @@ const handleClick = () => {
                 margin-right: 16px;
             }
 
+            .card-item-body {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                width: 0;
+            }
+
             .card-state {
                 position: absolute;
                 top: 30px;
diff --git a/src/views/notice/Config/index.vue b/src/views/notice/Config/index.vue
index 043206a2..6fe54e10 100644
--- a/src/views/notice/Config/index.vue
+++ b/src/views/notice/Config/index.vue
@@ -47,6 +47,7 @@
                     <template #img>
                         <slot name="img">
                             <img
+                                style="width: 80px; height: 80px"
                                 :src="
                                     getLogo(slotProps.type, slotProps.provider)
                                 "