update: 首页组件替换、权限判断方式调整

src/views/home/components/BasicCountCard.vue

@@ -1,58 +1,91 @@
 <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('link/DashBoard')"> 详情 </span>
-        </template>
-        <template #extra>
-            <span style="color: #1d39c4; cursor: pointer" @click="jumpPage"
-                >详情</span
-            >
-        </template>
 
         <div class="box-list">
             <div class="box-item">
                 <div class="label">CPU使用率</div>
-                <div class="value">{{ cpu }}</div>
+                <div class="value">{{ cpu + '%' }}</div>
                 <Pie
                     class="chart"
+                    :value="cpu"
                     chart-ref="cpuChart"
-                    :value="20"
                     :color-arr="['#ebebeb', '#d3adf7']"
                     image="/images/home/top-3.svg"
                 />
             </div>
             <div class="box-item">
                 <div class="label">JVM内存</div>
-                <div class="value">{{ jvm }}</div>
+                <div class="value">{{ jvm + '%' }}</div>
                 <Pie
                     class="chart"
                     chart-ref="jvmChart"
-                    :value="31"
+                    :value="jvm"
                     :color-arr="['#d6e4ff', '#85a5ff']"
                     image="/images/home/top-4.svg"
                 />
             </div>
         </div>
-    </a-card>
+    </div>
 </template>
 
 <script setup lang="ts">
+import { getWebSocket } from '@/utils/websocket';
 import Pie from './Pie.vue';
+import { map } from 'rxjs/operators';
+import { useMenuStore } from '@/store/menu';
 
-const cpu = ref('20%');
+const cpu = ref(0);
-const jvm = ref('31%');
+const jvm = ref(0);
 
-const getData = ()=>{
+const { jumpPage } = useMenuStore();
 
-}
+const cpuSocket = getWebSocket(
+    'operations-statistics-system-info-cpu-realTime',
+    '/dashboard/systemMonitor/stats/info/realTime',
+    {
+        type: 'cpu',
+        interval: '2s',
+        agg: 'avg',
+    },
+)
+    ?.pipe(map((res: any) => res.payload))
+    .subscribe((resp: any) => {
+        cpu.value = resp.value?.systemUsage || 0;
+    });
+const jvmSocket = getWebSocket(
+    `operations-statistics-system-info-memory-realTime`,
+    `/dashboard/systemMonitor/stats/info/realTime`,
+    {
+        type: 'memory',
+        interval: '2s',
+        agg: 'avg',
+    },
+)
+    ?.pipe(map((res: any) => res.payload))
+    .subscribe((payload: any) => {
+        jvm.value = payload.value?.jvmHeapUsage || 0;
+    });
 
-const jumpPage = () => {};
+onUnmounted(() => {
+    cpuSocket && cpuSocket.unsubscribe();
+    jvmSocket && jvmSocket.unsubscribe();
+});
 </script>
 
 <style lang="less" scoped>
 .device-count-container {
-    :deep(.ant-card-body) {
+    background-color: #fff;
-        padding-top: 0;
+    padding: 24px 14px;
+    position: relative;
+    .detail {
+        color: #1d39c4;
+        cursor: pointer;
+        position: absolute;
+        right: 12px;
+        top: 24px;
+        z-index: 3;
     }
     .title {
         position: relative;

src/views/home/components/BootCard.vue

@@ -6,7 +6,7 @@
             <div
                 class="box-item"
                 v-for="(item, index) in cardData"
-                @click="jumpPage(item.link,item.params)"
+                @click="jumpPage(item)"
             >
                 <div class="item-english">{{ item.english }}</div>
                 <div class="item-title">{{ item.label }}</div>
@@ -21,10 +21,11 @@
 </template>
 
 <script setup lang="ts">
-import { bootConfig } from "../typing";
+import { bootConfig } from '../typing';
 import { useMenuStore } from '@/store/menu';
+import { message } from 'ant-design-vue';
 
-const { jumpPage } = useMenuStore();
+const { jumpPage: _jumpPage } = useMenuStore();
 
 const props = defineProps({
     cardData: Array<bootConfig>,
@@ -32,6 +33,10 @@ const props = defineProps({
 });
 const { cardData, cardTitle } = toRefs(props);
 
+const jumpPage = (item: bootConfig) => {
+    if (item.auth === undefined || item.auth) _jumpPage(item.link, item.params);
+    else message.warning('暂无权限，请联系管理员');
+};
 </script>
 
 <style lang="less" scoped>

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

@@ -57,14 +57,15 @@ const rulePermission = (action: string) =>
 const menuPermission = useMenuStore().hasPermission;
 
 // 物联网引导-数据
-const _deviceBootConfig: bootConfig[] = [
+const deviceBootConfig: bootConfig[] = [
     {
         english: 'STEP1',
         label: '创建产品',
         link: '/iot/device/Product',
         auth: productPermission('add'),
+        image: '/images/home/guide-home1.png',
         params: {
-            save: true,
+            type: 'add',
         },
     },
     {
@@ -72,8 +73,9 @@ const _deviceBootConfig: bootConfig[] = [
         label: '创建设备',
         link: '/iot/device/Instance',
         auth: devicePermission('add'),
+        image: '/images/home/guide-home1.png',
         params: {
-            save: true,
+            type: 'add',
         },
     },
     {
@@ -81,20 +83,12 @@ const _deviceBootConfig: bootConfig[] = [
         label: '规则引擎',
         link: '/iot/rule-engine/Instance',
         auth: rulePermission('add'),
+        image: '/images/home/guide-home3.png',
         params: {
-            save: true,
+            type: 'add',
         },
     },
 ];
-const deviceImages = [
-    '/images/home/guide-home1.png',
-    '/images/home/guide-home2.png',
-    '/images/home/guide-home3.png',
-];
-const deviceBootConfig = _deviceBootConfig.map((item, i) => ({
-    ...item,
-    image: deviceImages[i],
-}));
 
 // 设备接入推荐步骤-数据
 const deviceStepDetails: recommendList[] = [
@@ -106,7 +100,7 @@ const deviceStepDetails: recommendList[] = [
         linkUrl: '/iot/device/Product',
         auth: productPermission('add'),
         params: {
-            save: true,
+            type: 'add',
         },
     },
     {
@@ -125,7 +119,7 @@ const deviceStepDetails: recommendList[] = [
         linkUrl: '/iot/device/Instance',
         auth: devicePermission('add'),
         params: {
-            save: true,
+            type: 'add',
         },
     },
     {
@@ -151,41 +145,32 @@ const deviceStepDetails: recommendList[] = [
 ];
 
 // 运维管理引导-数据
-const _opsBootConfig: bootConfig[] = [
+const opsBootConfig: bootConfig[] = [
     {
         english: 'STEP1',
         label: '设备接入配置',
-        link: '/iot/link/accessConfig',
+        link: 'link/AccessConfig',
-        auth: menuPermission('link/accessConfig'),
+        image: '/images/home/guide-home4.png',
     },
     {
         english: 'STEP2',
         label: '日志排查',
-        link: '/iot/link/Log',
+        link: 'Log',
-        auth: menuPermission('link/Log'),
         params: {
             key: 'system',
         },
+        image: '/images/home/guide-home5.png',
     },
     {
         english: 'STEP3',
         label: '实时监控',
-        link: '/iot/link/dashboard',
+        link: 'link/Dashboard',
-        auth: menuPermission('link/dashboard'),
         params: {
             save: true,
         },
+        image: '/images/home/guide-home6.png',
     },
 ];
-const opsImages = [
-    '/images/home/guide-home4.png',
-    '/images/home/guide-home5.png',
-    '/images/home/guide-home6.png',
-];
-const opsBootConfig = _opsBootConfig.map((item, i) => ({
-    ...item,
-    image: opsImages[i],
-}));
 
 // 运维管理推荐步骤-数据
 const opsStepDetails: recommendList[] = [
@@ -194,42 +179,34 @@ const opsStepDetails: recommendList[] = [
         details:
             '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
         iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/iot/link/protocol',
+        linkUrl: 'link/Protocol',
-        auth: menuPermission('link/Protocol'),
     },
     {
         title: '证书管理',
         details: '统一维护平台内的证书，用于数据通信加密。',
         iconUrl: '/images/home/bottom-6.png',
-        linkUrl: '/iot/link/Certificate',
+        linkUrl: 'link/Certificate',
-        auth: menuPermission('link/Certificate'),
     },
     {
         title: '网络组件',
         details: '根据不同的传输类型配置平台底层网络组件相关参数。',
         iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/iot/link/type',
+        linkUrl: 'link/Type',
-        auth: menuPermission('link/Type'),
     },
     {
         title: '设备接入网关',
         details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
         iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/iot/link/accessConfig',
+        linkUrl: 'link/AccessConfig',
-        auth: menuPermission('link/AccessConfig'),
     },
     {
         title: '日志管理',
         details: '监控系统日志，及时处理系统异常。',
         iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/iot/link/Log',
+        linkUrl: 'Log',
-        auth: menuPermission('Log'),
         params: {
             key: 'system',
         },
     },
 ];
-
-
-
 </script>

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

@@ -1,23 +1,23 @@
 <template>
     <div class="device-home-container">
-        <a-row :gutter="10">
+        <j-row :gutter="10">
-            <a-col :span="14">
+            <j-col :span="14">
                 <BootCard :cardData="opsBootConfig" cardTitle="运维引导" />
-            </a-col>
+            </j-col>
-            <a-col :span="10">
+            <j-col :span="10">
                 <BasicCountCard />
-            </a-col>
+            </j-col>
-        </a-row>
+        </j-row>
-        <a-row>
+        <j-row>
             <PlatformPicCard />
-        </a-row>
+        </j-row>
-        <a-row>
+        <j-row>
             <StepCard
                 cardTitle="运维管理推荐步骤"
                 tooltip="请根据业务需要对下述步骤进行选择性操作。"
                 :dataList="opsStepDetails"
             />
-        </a-row>
+        </j-row>
     </div>
 </template>
 
@@ -26,24 +26,18 @@ import BootCard from '../BootCard.vue';
 import BasicCountCard from '../BasicCountCard.vue';
 import PlatformPicCard from '../PlatformPicCard.vue';
 import StepCard from '../StepCard.vue';
-import { useMenuStore } from "@/store/menu";
-
-import { bootConfig, recommendList } from '../../typing';
-// 页面权限控制
-const menuPermission = useMenuStore().hasPermission;
 
+import type { bootConfig, recommendList } from '../../typing';
 const opsBootConfig: bootConfig[] = [
     {
         english: 'STEP1',
         label: '设备接入配置',
-        link: '/iot/link/accessConfig',
+        link: 'link/accessConfig',
-        auth: menuPermission('link/accessConfig'),
     },
     {
         english: 'STEP2',
         label: '日志排查',
-        link: '/iot/link/Log',
+        link: 'link/Log',
-        auth: menuPermission('link/Log'),
         params: {
             key: 'system',
         },
@@ -51,10 +45,9 @@ const opsBootConfig: bootConfig[] = [
     {
         english: 'STEP3',
         label: '实时监控',
-        link: '/iot/link/dashboard',
+        link: 'link/dashboard',
-        auth: menuPermission('link/dashboard'),
         params: {
-            save: true,
+            type: 'add',
         },
     },
 ];
@@ -64,45 +57,36 @@ const opsStepDetails: recommendList[] = [
         details:
             '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
         iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/iot/link/protocol',
+        linkUrl: 'link/Protocol',
-        auth: menuPermission('link/Protocol'),
-        
     },
     {
         title: '证书管理',
         details: '统一维护平台内的证书，用于数据通信加密。',
         iconUrl: '/images/home/bottom-6.png',
-        linkUrl: '/iot/link/Certificate',
+        linkUrl: 'link/Certificate',
-        auth: menuPermission('link/Certificate'),
-        
     },
     {
         title: '网络组件',
         details: '根据不同的传输类型配置平台底层网络组件相关参数。',
         iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/iot/link/type',
+        linkUrl: 'link/Type',
-        auth: menuPermission('link/Type'),
     },
     {
         title: '设备接入网关',
         details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
         iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/iot/link/accessConfig',
+        linkUrl: 'link/AccessConfig',
-        auth: menuPermission('link/AccessConfig'),
     },
     {
         title: '日志管理',
         details: '监控系统日志，及时处理系统异常。',
         iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/iot/link/Log',
+        linkUrl: 'Log',
-        auth: menuPermission('Log'),
         params: {
             key: 'system',
-        }
+        },
     },
 ];
-
-
 </script>
 
 <style lang="less" scoped>

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

@@ -1,23 +1,23 @@
 <template>
     <div class="device-home-container">
-        <a-row :gutter="24">
+        <j-row :gutter="24">
-            <a-col :span="14">
+            <j-col :span="14">
                 <BootCard :cardData="deviceBootConfig" cardTitle="物联网引导" />
-            </a-col>
+            </j-col>
-            <a-col :span="10">
+            <j-col :span="10">
                 <DeviceCountCard />
-            </a-col>
+            </j-col>
-        </a-row>
+        </j-row>
-        <a-row>
+        <j-row>
             <PlatformPicCard />
-        </a-row>
+        </j-row>
-        <a-row>
+        <j-row>
             <StepCard
                 cardTitle="设备接入推荐步骤"
                 tooltip="不同的设备因为通信协议的不同，存在接入步骤的差异"
                 :dataList="deviceStepDetails"
             />
-        </a-row>
+        </j-row>
     </div> 
 </template>
 
@@ -105,7 +105,6 @@ const deviceStepDetails: recommendList[] = [
             '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
         iconUrl: '/images/home/bottom-2.png',
         linkUrl: 'device/Instance/Detail',
-        auth: true,
         dialogTag: 'funcTest',
     },
     {

src/views/home/components/StepCard.vue

@@ -57,7 +57,7 @@ let selectRow: recommendList | rowType = {
 };
 // 跳转页面
 const jumpPage = (row: recommendList) => {
-    if (!row.auth) return message.warning('暂无权限，请联系管理员');
+    if ( row.auth === false) return message.warning('暂无权限，请联系管理员');
     selectRow = row; // 二次跳转需要使用
     if (row.dialogTag == 'accessMethod')
         return (productDialogVisible.value = true);

src/views/home/typing.d.ts

@@ -5,7 +5,7 @@ export interface recommendList {
     iconUrl: string;
     linkUrl: string;
     params?: object;
-    auth: boolean;
+    auth?: boolean;
     dialogTag?: 'accessMethod' | 'funcTest';
 }
 // 产品列表里的每项
@@ -25,7 +25,7 @@ export interface bootConfig {
     english: string,
     label: string,
     link: string,
-    auth: boolean,
+    auth?: boolean,
     image?:string,
     params?: object,
 }