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

2023-03-08 11:25:59 +08:00 · 2023-03-08 11:25:59 +08:00 · 4d9249d2a4
parent d200ac9ace
commit 4d9249d2a4
7 changed files with 118 additions and 120 deletions
--- a/src/views/home/components/BasicCountCard.vue
+++ b/src/views/home/components/BasicCountCard.vue
@ -1,58 +1,91 @@
 <template>
-    <a-card class="device-count-container">
-        <template #title>
-            <h5 class="title">基础统计</h5>
-        </template>
-        <template #extra>
-            <span style="color: #1d39c4; cursor: pointer" @click="jumpPage"
-                >详情</span
-            >
-        </template>
+    <div class="device-count-container">
+        <h5 class="title">基础统计</h5>
+        <span class="detail" @click="jumpPage('link/DashBoard')"> 详情 </span>

        <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 jvm = ref('31%');
+const cpu = ref(0);
+const jvm = ref(0);

-const getData = ()=>{
-    
-}
+const { jumpPage } = useMenuStore();

-const jumpPage = () => {};
+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;
+    });
+
+onUnmounted(() => {
+    cpuSocket && cpuSocket.unsubscribe();
+    jvmSocket && jvmSocket.unsubscribe();
+});
 </script>

 <style lang="less" scoped>
 .device-count-container {
-    :deep(.ant-card-body) {
-        padding-top: 0;
+    background-color: #fff;
+    padding: 24px 14px;
+    position: relative;
+    .detail {
+        color: #1d39c4;
+        cursor: pointer;
+        position: absolute;
+        right: 12px;
+        top: 24px;
+        z-index: 3;
    }
    .title {
        position: relative;
--- a/src/views/home/components/BootCard.vue
+++ b/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>
--- a/src/views/home/components/ComprehensiveHome/index.vue
+++ b/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',
-        auth: menuPermission('link/accessConfig'),
+        link: 'link/AccessConfig',
+        image: '/images/home/guide-home4.png',
    },
    {
        english: 'STEP2',
        label: '日志排查',
-        link: '/iot/link/Log',
-        auth: menuPermission('link/Log'),
+        link: 'Log',
        params: {
            key: 'system',
        },
+        image: '/images/home/guide-home5.png',
    },
    {
        english: 'STEP3',
        label: '实时监控',
-        link: '/iot/link/dashboard',
-        auth: menuPermission('link/dashboard'),
+        link: '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',
-        auth: menuPermission('link/Protocol'),
+        linkUrl: 'link/Protocol',
    },
    {
        title: '证书管理',
        details: '统一维护平台内的证书，用于数据通信加密。',
        iconUrl: '/images/home/bottom-6.png',
-        linkUrl: '/iot/link/Certificate',
-        auth: menuPermission('link/Certificate'),
+        linkUrl: 'link/Certificate',
    },
    {
        title: '网络组件',
        details: '根据不同的传输类型配置平台底层网络组件相关参数。',
        iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/iot/link/type',
-        auth: menuPermission('link/Type'),
+        linkUrl: 'link/Type',
    },
    {
        title: '设备接入网关',
        details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
        iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/iot/link/accessConfig',
-        auth: menuPermission('link/AccessConfig'),
+        linkUrl: 'link/AccessConfig',
    },
    {
        title: '日志管理',
        details: '监控系统日志，及时处理系统异常。',
        iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/iot/link/Log',
-        auth: menuPermission('Log'),
+        linkUrl: 'Log',
        params: {
            key: 'system',
        },
    },
 ];
-
-
-
 </script>
--- a/src/views/home/components/DevOpsHome/index.vue
+++ b/src/views/home/components/DevOpsHome/index.vue
@ -1,23 +1,23 @@
 <template>
    <div class="device-home-container">
-        <a-row :gutter="10">
-            <a-col :span="14">
+        <j-row :gutter="10">
+            <j-col :span="14">
                <BootCard :cardData="opsBootConfig" cardTitle="运维引导" />
-            </a-col>
-            <a-col :span="10">
+            </j-col>
+            <j-col :span="10">
                <BasicCountCard />
-            </a-col>
-        </a-row>
-        <a-row>
+            </j-col>
+        </j-row>
+        <j-row>
            <PlatformPicCard />
-        </a-row>
-        <a-row>
+        </j-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',
-        auth: menuPermission('link/accessConfig'),
+        link: 'link/accessConfig',
    },
    {
        english: 'STEP2',
        label: '日志排查',
-        link: '/iot/link/Log',
-        auth: menuPermission('link/Log'),
+        link: 'link/Log',
        params: {
            key: 'system',
        },
@ -51,10 +45,9 @@ const opsBootConfig: bootConfig[] = [
    {
        english: 'STEP3',
        label: '实时监控',
-        link: '/iot/link/dashboard',
-        auth: menuPermission('link/dashboard'),
+        link: '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',
-        auth: menuPermission('link/Protocol'),
-        
+        linkUrl: 'link/Protocol',
    },
    {
        title: '证书管理',
        details: '统一维护平台内的证书，用于数据通信加密。',
        iconUrl: '/images/home/bottom-6.png',
-        linkUrl: '/iot/link/Certificate',
-        auth: menuPermission('link/Certificate'),
-        
+        linkUrl: 'link/Certificate',
    },
    {
        title: '网络组件',
        details: '根据不同的传输类型配置平台底层网络组件相关参数。',
        iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/iot/link/type',
-        auth: menuPermission('link/Type'),
+        linkUrl: 'link/Type',
    },
    {
        title: '设备接入网关',
        details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
        iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/iot/link/accessConfig',
-        auth: menuPermission('link/AccessConfig'),
+        linkUrl: 'link/AccessConfig',
    },
    {
        title: '日志管理',
        details: '监控系统日志，及时处理系统异常。',
        iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/iot/link/Log',
-        auth: menuPermission('Log'),
+        linkUrl: 'Log',
        params: {
            key: 'system',
-        }
+        },
    },
 ];
-
-
 </script>

 <style lang="less" scoped>
--- a/src/views/home/components/DeviceHome/index.vue
+++ b/src/views/home/components/DeviceHome/index.vue
@ -1,23 +1,23 @@
 <template>
    <div class="device-home-container">
-        <a-row :gutter="24">
-            <a-col :span="14">
+        <j-row :gutter="24">
+            <j-col :span="14">
                <BootCard :cardData="deviceBootConfig" cardTitle="物联网引导" />
-            </a-col>
-            <a-col :span="10">
+            </j-col>
+            <j-col :span="10">
                <DeviceCountCard />
-            </a-col>
-        </a-row>
-        <a-row>
+            </j-col>
+        </j-row>
+        <j-row>
            <PlatformPicCard />
-        </a-row>
-        <a-row>
+        </j-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',
    },
    {
--- a/src/views/home/components/StepCard.vue
+++ b/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);
--- a/src/views/home/typing.d.ts
+++ b/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,
 }