update: 首页调整

src/views/home/components/BootCard.vue

@@ -1,13 +1,12 @@
 <template>
-    <a-card class="boot-card-container" :bordered="false">
+    <div class="boot-card-container" :bordered="false">
-        <template #title>
+        <h5 class="title">{{ cardTitle }}</h5>
-            <h5 class="title">{{ cardTitle }}</h5>
+
-        </template>
         <div class="box">
             <div
                 class="box-item"
                 v-for="(item, index) in cardData"
-                @click="jumpPage(item)"
+                @click="jumpPage(item.link,item.params)"
             >
                 <div class="item-english">{{ item.english }}</div>
                 <div class="item-title">{{ item.label }}</div>
@@ -18,12 +17,14 @@
                 />
             </div>
         </div>
-    </a-card>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { message } from 'ant-design-vue';
+import { bootConfig } from "../typing";
-import { bootConfig } from "../index";
+import { useMenuStore } from '@/store/menu';
+
+const { jumpPage } = useMenuStore();
 
 const router = useRouter();
 const props = defineProps({
@@ -32,32 +33,12 @@ const props = defineProps({
 });
 const { cardData, cardTitle } = toRefs(props);
 
-const jumpPage = (row: bootConfig): void => {
-    if (row.auth && row.link) {
-        router.push(`${row.link}${objToParams(row.params || {})}`);
-    } else {
-        message.warning('暂无权限，请联系管理员');
-    }
-};
-
-const objToParams = (source: object): string => {
-    if (Object.prototype.toString.call(source) === '[object Object]') {
-        const paramsArr = <any>[];
-        Object.entries(source).forEach(([prop, value]) => {
-            if (typeof value === 'object') value = JSON.stringify(value);
-            paramsArr.push(`${prop}=${value}`);
-        });
-        if (paramsArr.length > 0) return '?' + paramsArr.join('&');
-    }
-    return '';
-};
 </script>
 
 <style lang="less" scoped>
 .boot-card-container {
-    :deep(.ant-card-body) {
+    background-color: #fff;
-        padding-top: 0;
+    padding: 24px 14px;
-    }
     .title {
         position: relative;
         z-index: 2;

src/views/home/components/BootCardSmall.vue

@@ -28,7 +28,7 @@
 
 <script setup lang="ts">
 import { message } from 'ant-design-vue';
-import { bootConfig } from "../index";
+import { bootConfig } from "../typing";
 
 const router = useRouter();
 const props = defineProps({

src/views/home/components/ComprehensiveHome/index.vue

@@ -43,7 +43,7 @@ import StepCard from '../StepCard.vue';
 
 import { useMenuStore } from '@/store/menu';
 import { usePermissionStore } from '@/store/permission';
-import { recommendList, bootConfig } from '../../index';
+import { recommendList, bootConfig } from '../../typing';
 
 // 按钮权限控制
 const hasPermission = usePermissionStore().hasPermission;

src/views/home/components/DevOpsHome/index.vue

@@ -28,7 +28,7 @@ import PlatformPicCard from '../PlatformPicCard.vue';
 import StepCard from '../StepCard.vue';
 import { useMenuStore } from "@/store/menu";
 
-import { bootConfig, recommendList } from '../../index';
+import { bootConfig, recommendList } from '../../typing';
 // 页面权限控制
 const menuPermission = useMenuStore().hasPermission;
 

src/views/home/components/DeviceCountCard.vue

@@ -1,13 +1,7 @@
 <template>
-    <a-card class="device-count-container">
+    <div class="device-count-container">
-        <template #title>
+        <h5 class="title">设备统计</h5>
-            <h5 class="title">设备统计</h5>
+        <span class="detail" @click="jumpPage('device/DashBoard')"> 详情 </span>
-        </template>
-        <template #extra>
-            <span style="color: #1d39c4; cursor: pointer" @click="jumpPage"
-                >详情</span
-            >
-        </template>
 
         <div class="box-list">
             <div class="box-item">
@@ -21,34 +15,33 @@
                 <img src="/images/home/top-2.png" alt="" />
             </div>
         </div>
-    </a-card>
+    </div>
 </template>
 
 <script setup lang="ts">
 import { getDeviceCount_api, getProductCount_api } from '@/api/home';
+import { useMenuStore } from '@/store/menu';
+
+const { jumpPage } = useMenuStore();
 const projectNum = ref(0);
 const deviceNum = ref(0);
 
-onMounted(() => {
-    getData();
-});
-
 const getData = () => {
-    getDeviceCount_api().then((resp) => {
+    getDeviceCount_api().then((resp: any) => {
         deviceNum.value = resp.result;
     });
-    getProductCount_api().then((resp) => {
+    getProductCount_api({}).then((resp: any) => {
         projectNum.value = resp.result;
     });
 };
-const jumpPage = () => {};
+getData();
 </script>
 
 <style lang="less" scoped>
 .device-count-container {
-    :deep(.ant-card-body) {
+    background-color: #fff;
-        padding-top: 0;
+    padding: 24px 14px;
-    }
+    position: relative;
     .title {
         position: relative;
         z-index: 2;
@@ -71,6 +64,14 @@ const jumpPage = () => {};
             content: ' ';
         }
     }
+    .detail {
+        color: #1d39c4;
+        cursor: pointer;
+        position: absolute;
+        right: 12px;
+        top: 24px;
+        z-index: 3;
+    }
 
     .box-list {
         display: grid;

src/views/home/components/DeviceHome/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="device-home-container">
-        <a-row :gutter="10">
+        <a-row :gutter="24">
             <a-col :span="14">
                 <BootCard :cardData="deviceBootConfig" cardTitle="物联网引导" />
             </a-col>
@@ -28,7 +28,7 @@ import PlatformPicCard from '../PlatformPicCard.vue';
 import StepCard from '../StepCard.vue';
 
 import { usePermissionStore } from '@/store/permission';
-import { bootConfig, recommendList } from '../../index';
+import { bootConfig, recommendList } from '../../typing';
 
 // 按钮权限控制
 const hasPermission = usePermissionStore().hasPermission;
@@ -43,28 +43,28 @@ const deviceBootConfig: bootConfig[] = [
     {
         english: 'STEP1',
         label: '创建产品',
-        link: '/iot/device/Product',
+        link: 'device/Product',
         auth: productPermission('add'),
         params: {
-            save: true,
+            type: 'add',
         },
     },
     {
         english: 'STEP2',
         label: '创建设备',
-        link: '/iot/device/Instance',
+        link: 'device/Instance',
         auth: devicePermission('add'),
         params: {
-            save: true,
+            type: 'add',
         },
     },
     {
         english: 'STEP3',
         label: '规则引擎',
-        link: '/iot/rule-engine/Instance',
+        link: 'rule-engine/Instance',
         auth: rulePermission('add'),
         params: {
-            save: true,
+            type: 'add',
         },
     },
 ];
@@ -74,10 +74,10 @@ const deviceStepDetails: recommendList[] = [
         details:
             '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
         iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/iot/device/Product',
+        linkUrl: 'iot/device/Product',
         auth: productPermission('add'),
         params: {
-            save: true,
+            type: 'add',
         },
     },
     {
@@ -85,7 +85,7 @@ const deviceStepDetails: recommendList[] = [
         details:
             '通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
         iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/iot/device/Product/detail',
+        linkUrl: 'iot/device/Product/detail',
         auth: productPermission('update'),
         dialogTag: 'accessMethod',
     },
@@ -93,10 +93,10 @@ const deviceStepDetails: recommendList[] = [
         title: '添加测试设备',
         details: '添加单个设备，用于验证产品模型是否配置正确。',
         iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/iot/device/Instance',
+        linkUrl: 'iot/device/Instance',
         auth: devicePermission('add'),
         params: {
-            save: true,
+            type: 'add',
         },
     },
     {
@@ -104,7 +104,7 @@ const deviceStepDetails: recommendList[] = [
         details:
             '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
         iconUrl: '/images/home/bottom-2.png',
-        linkUrl: '/iot/device/Instance/detail',
+        linkUrl: 'iot/device/Instance/detail',
         // auth: devicePermission('update'),
         auth: true,
         dialogTag: 'funcTest',
@@ -113,7 +113,7 @@ const deviceStepDetails: recommendList[] = [
         title: '批量添加设备',
         details: '批量添加同一产品下的设备',
         iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/iot/device/Instance',
+        linkUrl: 'iot/device/Instance',
         auth: devicePermission('import'),
         params: {
             import: true,

src/views/home/components/PlatformPicCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <a-card class="platform-pic-container">
+    <div class="platform-pic-container">
         <div class="title">
             <span>平台架构图</span>
             <p>PLATFORM ARCHITECTURE DIAGRAM</p>
@@ -9,7 +9,7 @@
             class="bj"
             alt=""
         />
-    </a-card>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -19,13 +19,11 @@ const props = defineProps({
 </script>
 
 <style lang="less" scoped>
-:deep(.ant-card-body) {
-    padding: 0;
-}
 .platform-pic-container {
     position: relative;
     width: 100%;
     overflow: hidden;
+    background-color: #fff;
     border-bottom: 1px solid #2f54eb;
 
     .bj {

src/views/home/components/StepCard.vue

@@ -41,7 +41,7 @@ import { message } from 'ant-design-vue';
 import ProductChooseDialog from './dialogs/ProductChooseDialog.vue';
 import DeviceChooseDialog from './dialogs/DeviceChooseDialog.vue';
 
-import { recommendList } from '../index';
+import { recommendList } from '../typing';
 
 type rowType = {
     params: object;

src/views/home/components/dialogs/ProductChooseDialog.vue

@@ -38,7 +38,7 @@
 import { ComponentInternalInstance } from 'vue';
 
 import { getProductList_api } from '@/api/home';
-import { productItem } from '../../index';
+import { productItem } from '../../typing';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const props = defineProps({
     openNumber: Number,

src/views/media/Home/index.vue

@@ -31,7 +31,7 @@ import StepCard from '@/views/home/components/StepCard.vue';
 import BasicCountCard from '@/views/media/Home/components/BasicCountCard.vue';
 
 import { usePermissionStore } from '@/store/permission';
-import type { bootConfig, recommendList } from '@/views/home/index';
+import type { bootConfig, recommendList } from '@/views/home/typing';
 
 // 权限控制
 const hasPermission = usePermissionStore().hasPermission;