update: 首页

2023-01-13 14:35:34 +08:00 · 2023-01-13 14:35:34 +08:00 · 8dd5f2f22a
parent 6ed95f4758
commit 8dd5f2f22a
8 changed files with 223 additions and 347 deletions
--- a/src/views/home/components/BootCard.vue
+++ b/src/views/home/components/BootCard.vue
@ -23,23 +23,16 @@

 <script setup lang="ts">
 import { message } from 'ant-design-vue';
-
-type configItem = {
-    auth: boolean;
-    link: string;
-    english: string;
-    label: string;
-    params?: object;
-};
+import { bootConfig } from "../index";

 const router = useRouter();
 const props = defineProps({
-    cardData: Array<configItem>,
+    cardData: Array<bootConfig>,
    cardTitle: String,
 });
 const { cardData, cardTitle } = toRefs(props);

-const jumpPage = (row: configItem): void => {
+const jumpPage = (row: bootConfig): void => {
    if (row.auth && row.link) {
        router.push(`${row.link}${objToParams(row.params || {})}`);
    } else {
--- a/src/views/home/components/BootCardSmall.vue
+++ b/src/views/home/components/BootCardSmall.vue
@ -28,24 +28,16 @@

 <script setup lang="ts">
 import { message } from 'ant-design-vue';
-
-type configItem = {
-    auth: boolean;
-    link: string;
-    english: string;
-    label: string;
-    params?: object;
-    image: string;
-};
+import { bootConfig } from "../index";

 const router = useRouter();
 const props = defineProps({
-    cardData: Array<configItem>,
+    cardData: Array<bootConfig>,
    cardTitle: String,
 });
 const { cardData, cardTitle } = toRefs(props);

-const jumpPage = (row: configItem): void => {
+const jumpPage = (row: bootConfig): void => {
    if (row.auth && row.link) {
        router.push(`${row.link}${objToParams(row.params || {})}`);
    } else {
--- a/src/views/home/components/ComprehensiveHome/index.vue
+++ b/src/views/home/components/ComprehensiveHome/index.vue
@ -3,7 +3,7 @@
        <a-row :gutter="24" class="top" style="margin-bottom: 24px">
            <a-col :span="6" class="left">
                <BootCardSmall
-                    :cardData="devBootConfig"
+                    :cardData="deviceBootConfig"
                    cardTitle="物联网引导"
                />
                <div style="width: 100%; height: 24px"></div>
@ -23,7 +23,7 @@
        <StepCard
            cardTitle="设备接入推荐步骤"
            tooltip="不同的设备因为通信协议的不同，存在接入步骤的差异"
-            :dataList="devStepDetails"
+            :dataList="deviceStepDetails"
            style="margin-bottom: 24px"
        />
        <StepCard
@ -39,152 +39,26 @@ import BootCardSmall from '../BootCardSmall.vue';
 import DeviceCountCard from '../DeviceCountCard.vue';
 import BasicCountCard from '../BasicCountCard.vue';
 import PlatformPicCard from '../PlatformPicCard.vue';
-import { recommendList } from '../../index';
-
 import StepCard from '../StepCard.vue';

-// 物联网引导-数据
-const devBootConfig = [
-    {
-        english: 'STEP1',
-        label: '创建产品',
-        link: '/a',
-        auth: true,
-        save: true,
-        image: '/images/home/guide-home1.png',
-    },
-    {
-        english: 'STEP2',
-        label: '创建设备',
-        link: '/b',
-        auth: true,
-        save: true,
-        image: '/images/home/guide-home2.png',
-    },
-    {
-        english: 'STEP3',
-        label: '规则引擎',
-        link: '/c',
-        auth: false,
-        save: true,
-        image: '/images/home/guide-home3.png',
-    },
+import {
+    deviceBootConfig as _deviceBootConfig,
+    deviceStepDetails,
+    opsBootConfig as _opsBootConfig,
+    opsStepDetails,
+} from '../../modules/config';
+
+const deviceImages = [
+    '/images/home/guide-home1.png',
+    '/images/home/guide-home2.png',
+    '/images/home/guide-home3.png',
 ];
-// 运维管理引导-数据
-const opsBootConfig = [
-    {
-        english: 'STEP1',
-        label: '创建产品',
-        link: '/a',
-        auth: true,
-        save: true,
-        image: '/images/home/guide-home4.png',
-    },
-    {
-        english: 'STEP2',
-        label: '创建设备',
-        link: '/b',
-        auth: true,
-        save: true,
-        image: '/images/home/guide-home5.png',
-    },
-    {
-        english: 'STEP3',
-        label: '规则引擎',
-        link: '/c',
-        auth: false,
-        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 devStepDetails = [
-    {
-        title: '创建产品',
-        details:
-            '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
-        iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/a',
-        auth: true,
-    },
-    {
-        title: '配置产品接入方式',
-        details:
-            '通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
-        iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/a',
-        auth: true,
-        dialogTag: 'accessMethod',
-    },
-    {
-        title: '添加测试设备',
-        details: '添加单个设备，用于验证产品模型是否配置正确。',
-        iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/a',
-        auth: true,
-    },
-    {
-        title: '功能调试',
-        details:
-            '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
-        iconUrl: '/images/home/bottom-2.png',
-        linkUrl: '/a',
-        auth: true,
-        dialogTag: 'funcTest',
-    },
-    {
-        title: '批量添加设备',
-        details: '批量添加同一产品下的设备',
-        iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/a',
-        auth: false,
-    },
-] as recommendList[];
-// 运维管理推荐步骤-数据
-const opsStepDetails = [
-    {
-        title: '协议管理',
-        details:
-            '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
-        iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/a',
-        auth: true,
-        params: {
-            a: 1,
-            save: true,
-        },
-    },
-    {
-        title: '证书管理',
-        details: '统一维护平台内的证书，用于数据通信加密。',
-        iconUrl: '/images/home/bottom-6.png',
-        linkUrl: '/a',
-        auth: true,
-        params: {
-            a: 1,
-            save: false,
-        },
-    },
-    {
-        title: '网络组件',
-        details: '根据不同的传输类型配置平台底层网络组件相关参数。',
-        iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/a',
-        auth: true,
-    },
-    {
-        title: '设备接入网关',
-        details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
-        iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/a',
-        auth: true,
-    },
-    {
-        title: '日志管理',
-        details: '监控系统日志，及时处理系统异常。',
-        iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/a',
-        auth: false,
-    },
-] as recommendList[];
+
+const deviceBootConfig = _deviceBootConfig.map((item,i) => ({...item, image: deviceImages[i]}));
+const opsBootConfig = _opsBootConfig.map((item,i) => ({...item, image: opsImages[i]}));
 </script>
--- a/src/views/home/components/DevOpsHome/index.vue
+++ b/src/views/home/components/DevOpsHome/index.vue
@ -2,7 +2,7 @@
    <div class="device-home-container">
        <a-row :gutter="10">
            <a-col :span="14">
-                <BootCard :cardData="bootConfig" cardTitle="运维引导" />
+                <BootCard :cardData="opsBootConfig" cardTitle="运维引导" />
            </a-col>
            <a-col :span="10">
                <BasicCountCard />
@ -15,7 +15,7 @@
            <StepCard
                cardTitle="运维管理推荐步骤"
                tooltip="请根据业务需要对下述步骤进行选择性操作。"
-                :dataList="stepDetails"
+                :dataList="opsStepDetails"
            />
        </a-row>
    </div>
@ -27,74 +27,8 @@ import BasicCountCard from '../BasicCountCard.vue';
 import PlatformPicCard from '../PlatformPicCard.vue';
 import StepCard from '../StepCard.vue';

-import {recommendList} from '../../index'
-// import {getImage} from '@/utils/comm'
+import { opsBootConfig, opsStepDetails } from '../../modules/config';

-// 运维引导-数据
-const bootConfig = [
-    {
-        english: 'STEP1',
-        label: '设备接入配置',
-        link: '/a',
-        auth: true,
-        save: true,
-    },
-    {
-        english: 'STEP2',
-        label: '日志排查',
-        link: '/b',
-        auth: true,
-        save: true,
-    },
-    {
-        english: 'STEP3',
-        label: '实时监控',
-        link: '/c',
-        auth: false,
-        save: true,
-    },
-];
-// 运维管理推荐步骤-数据
-const stepDetails = [
-    {
-        title: '创建产品',
-        details:
-            '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
-        iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/a',
-        auth: true,
-    },
-    {
-        title: '配置产品接入方式',
-        details:
-            '通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
-        iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/a',
-        auth: true,
-    },
-    {
-        title: '添加测试设备',
-        details: '添加单个设备，用于验证产品模型是否配置正确。',
-        iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/a',
-        auth: true,
-    },
-    {
-        title: '功能调试',
-        details:
-            '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
-        iconUrl: '/images/home/bottom-2.png',
-        linkUrl: '/a',
-        auth: true,
-    },
-    {
-        title: '批量添加设备',
-        details: '批量添加同一产品下的设备',
-        iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/a',
-        auth: false,
-    },
-] as recommendList[];
 </script>

 <style lang="less" scoped>
--- a/src/views/home/components/DeviceHome/index.vue
+++ b/src/views/home/components/DeviceHome/index.vue
@ -2,7 +2,7 @@
    <div class="device-home-container">
        <a-row :gutter="10">
            <a-col :span="14">
-                <BootCard :cardData="bootConfig" cardTitle="物联网引导" />
+                <BootCard :cardData="deviceBootConfig" cardTitle="物联网引导" />
            </a-col>
            <a-col :span="10">
                <DeviceCountCard />
@ -15,7 +15,7 @@
            <StepCard
                cardTitle="设备接入推荐步骤"
                tooltip="不同的设备因为通信协议的不同，存在接入步骤的差异"
-                :dataList="stepDetails"
+                :dataList="deviceStepDetails"
            />
        </a-row>
    </div>
@ -27,73 +27,7 @@ import DeviceCountCard from '../DeviceCountCard.vue';
 import PlatformPicCard from '../PlatformPicCard.vue';
 import StepCard from '../StepCard.vue';

-import {recommendList} from '../../index'
-
-// import {getImage} from '@/utils/comm'
-
-// 物联网引导-数据
-const bootConfig = [
-    {
-        english: 'STEP1',
-        label: '创建产品',
-        link: '/a',
-        auth: true,
-        params: {},
-    },
-    {
-        english: 'STEP2',
-        label: '创建设备',
-        link: '/b',
-        auth: true,
-        params: {},
-    },
-    {
-        english: 'STEP3',
-        label: '规则引擎',
-        link: '/c',
-        auth: false,
-        params: {},
-    },
-];
-// 设备接入推荐步骤-数据
-const stepDetails = [
-    {
-        title: '协议管理',
-        details:
-            '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
-        iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/a',
-        auth: true,
-    },
-    {
-        title: '证书管理',
-        details: '统一维护平台内的证书，用于数据通信加密。',
-        iconUrl: '/images/home/bottom-6.png',
-        linkUrl: '/a',
-        auth: true,
-    },
-    {
-        title: '网络组件',
-        details: '根据不同的传输类型配置平台底层网络组件相关参数。',
-        iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/a',
-        auth: true,
-    },
-    {
-        title: '设备接入网关',
-        details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
-        iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/a',
-        auth: true,
-    },
-    {
-        title: '日志管理',
-        details: '监控系统日志，及时处理系统异常。',
-        iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/a',
-        auth: false,
-    },
-] as recommendList[];
+import { deviceBootConfig, deviceStepDetails } from '../../modules/config';
 </script>

 <style lang="less" scoped>
--- a/src/views/home/components/dialogs/FuncTestDialog.vue
+++ b/src/views/home/components/dialogs/FuncTestDialog.vue
@ -8,43 +8,20 @@
        :getContainer="getContainer"
        :maskClosable="false"
    >
-        <div class="search">
-            <a-select
-                v-model:value="form.key"
-                style="width: 100px;margin-right: 20px;"
-                :options="productList"
-            />
-            <a-select
-                v-model:value="form.relation"
-                style="width: 100px;margin-right: 20px;"
-                :options="productList"
-            />
-            <a-input v-model:value="form.keyValue" allow-clear style="width: 230px;margin-right: 50px;" />
-
-            <a-button type="primary" @click="clickSearch" style="margin-right: 10px;">
-                <template #icon><SearchOutlined /></template>
-                搜索
-            </a-button>
-            <a-button @click="clickReset">
-                <template #icon><reload-outlined /></template>
-                重置
-            </a-button>
-        </div>
+        <Search />
        <JTable :columns="columns" model="TABLE"> </JTable>

        <template #footer>
-            <a-button key="back" @click="visible = false
-            ">取消</a-button>
-            <a-button key="submit" type="primary" @click="handleOk">确认</a-button>
+            <a-button key="back" @click="visible = false">取消</a-button>
+            <a-button key="submit" type="primary" @click="handleOk"
+                >确认</a-button
+            >
        </template>
    </a-modal>
 </template>

 <script setup lang="ts">
 import { ComponentInternalInstance } from 'vue';
-import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
-
-import { productItem, deviceInfo } from '../../index';

 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const emits = defineEmits(['confirm']);
@ -64,7 +41,6 @@ watch(
    () => {
        visible.value = true;
        clickReset();
-        getOptions();
        clickSearch();
    },
 );
@ -75,10 +51,7 @@ const form = ref({
    relation: '',
    keyValue: '',
 });
-const productList = ref<[productItem] | []>([]);
-const getOptions = () => {
-    productList.value = [];
-};
+
 const clickSearch = () => {};
 const clickReset = () => {
    Object.entries(form.value).forEach(([prop]) => {
@ -114,9 +87,6 @@ const columns = [
        key: 'status',
    },
 ];
-const tableData = ref<deviceInfo[]>([]);
-const selectItem: deviceInfo | {} = {};
-const getList = () => {};
 </script>

 <style lang="less" scoped>
@ -125,5 +95,4 @@ const getList = () => {};
        display: flex;
    }
 }
-
 </style>
--- a/src/views/home/index.d.ts
+++ b/src/views/home/index.d.ts
@ -8,11 +8,6 @@ export interface recommendList {
    auth: boolean;
    dialogTag?: 'accessMethod' | 'funcTest';
 }
-// 产品列表里的每项
-export interface productItem {
-    label: string;
-    value: string
-}

 export interface deviceInfo {
    deviceId: string,
@ -20,4 +15,13 @@ export interface deviceInfo {
    productName: string,
    createTime: string,
    status: boolean
+}
+
+export interface bootConfig {
+    english: string,
+    label: string,
+    link: string,
+    auth: boolean,
+    image?:string,
+    params?: object,
 }
--- a/src/views/home/modules/config.ts
+++ b/src/views/home/modules/config.ts
@ -0,0 +1,176 @@
+// import {getImage} from '@/utils/comm'
+import { usePermissionStore } from "@/store/permission";
+import { recommendList, bootConfig } from "../index";
+
+
+// 权限控制
+const hasPermission = usePermissionStore().hasPermission;
+const productPermission = (action: string) =>
+    hasPermission(`device/Product:${action}"`);
+const devicePermission = (action: string) =>
+    hasPermission(`device/Instance:${action}"`);
+const rulePermission = (action: string) =>
+    hasPermission(`rule-engine/Instance:${action}"`);
+
+
+// 物联网引导-数据
+export const deviceBootConfig: bootConfig[] = [
+    {
+        english: 'STEP1',
+        label: '创建产品',
+        link: '/a',
+        auth: productPermission('add'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        english: 'STEP2',
+        label: '创建设备',
+        link: '/b',
+        auth: devicePermission('add'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        english: 'STEP3',
+        label: '规则引擎',
+        link: '/c',
+        auth: rulePermission('add'),
+        params: {
+            save: true,
+        },
+    },
+];
+// 设备接入推荐步骤-数据
+export const deviceStepDetails: recommendList[] = [
+    {
+        title: '创建产品',
+        details:
+            '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
+        iconUrl: '/images/home/bottom-4.png',
+        linkUrl: '/a',
+        auth: productPermission('add'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        title: '配置产品接入方式',
+        details:
+            '通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
+        iconUrl: '/images/home/bottom-1.png',
+        linkUrl: '/a',
+        auth: productPermission('update'),
+        dialogTag: 'accessMethod',
+    },
+    {
+        title: '添加测试设备',
+        details: '添加单个设备，用于验证产品模型是否配置正确。',
+        iconUrl: '/images/home/bottom-5.png',
+        linkUrl: '/a',
+        auth: devicePermission('add'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        title: '功能调试',
+        details:
+            '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
+        iconUrl: '/images/home/bottom-2.png',
+        linkUrl: '/a',
+        auth: devicePermission('update'),
+        dialogTag: 'funcTest',
+    },
+    {
+        title: '批量添加设备',
+        details: '批量添加同一产品下的设备',
+        iconUrl: '/images/home/bottom-3.png',
+        linkUrl: '/a',
+        auth: devicePermission('import'),
+        params: {
+            import: true,
+        },
+    },
+];
+
+
+// 运维管理引导-数据
+export const opsBootConfig: bootConfig[] = [
+    {
+        english: 'STEP1',
+        label: '设备接入配置',
+        link: '/a',
+        auth: true,
+    },
+    {
+        english: 'STEP2',
+        label: '日志排查',
+        link: '/b',
+        auth: true,
+        params: {
+            key: 'system',
+        },
+    },
+    {
+        english: 'STEP3',
+        label: '实时监控',
+        link: '/c',
+        auth: false,
+        params: {
+            save: true,
+        },
+    },
+];
+// 运维管理推荐步骤-数据
+export const opsStepDetails: recommendList[] = [
+    {
+        title: '协议管理',
+        details:
+            '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
+        iconUrl: '/images/home/bottom-1.png',
+        linkUrl: '/a',
+        auth: true,
+        params: {
+            a: 1,
+            save: true,
+        },
+    },
+    {
+        title: '证书管理',
+        details: '统一维护平台内的证书，用于数据通信加密。',
+        iconUrl: '/images/home/bottom-6.png',
+        linkUrl: '/a',
+        auth: true,
+        params: {
+            a: 1,
+            save: false,
+        },
+    },
+    {
+        title: '网络组件',
+        details: '根据不同的传输类型配置平台底层网络组件相关参数。',
+        iconUrl: '/images/home/bottom-3.png',
+        linkUrl: '/a',
+        auth: true,
+    },
+    {
+        title: '设备接入网关',
+        details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
+        iconUrl: '/images/home/bottom-4.png',
+        linkUrl: '/a',
+        auth: true,
+    },
+    {
+        title: '日志管理',
+        details: '监控系统日志，及时处理系统异常。',
+        iconUrl: '/images/home/bottom-5.png',
+        linkUrl: '/a',
+        auth: false,
+        params: {
+            key: 'system',
+        }
+    },
+];