0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: 首页权限调整及样式微调

This commit is contained in:
easy 2023-01-31 11:52:26 +08:00
parent 471a442709
commit 67a3780287
5 changed files with 355 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
src/views/home/components/ComprehensiveHome/index.vue
View File

@ -41,24 +41,195 @@ import BasicCountCard from '../BasicCountCard.vue';
import PlatformPicCard from '../PlatformPicCard.vue';
import StepCard from '../StepCard.vue';
import {
deviceBootConfig as _deviceBootConfig,
deviceStepDetails,
opsBootConfig as _opsBootConfig,
opsStepDetails,
} from '../../modules/config';
import { useMenuStore } from '@/store/menu';
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}`);
// 页面权限控制
const menuPermission = useMenuStore().hasPermission;
// 物联网引导-数据
const _deviceBootConfig: bootConfig[] = [
{
english: 'STEP1',
label: '创建产品',
link: '/iot/device/Product',
auth: productPermission('add'),
params: {
save: true,
},
},
{
english: 'STEP2',
label: '创建设备',
link: '/iot/device/Instance',
auth: devicePermission('add'),
params: {
save: true,
},
},
{
english: 'STEP3',
label: '规则引擎',
link: '/iot/rule-engine/Instance',
auth: rulePermission('add'),
params: {
save: true,
},
},
];
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[] = [
{
title: '创建产品',
details:
'产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
iconUrl: '/images/home/bottom-4.png',
linkUrl: '/iot/device/Product',
auth: productPermission('add'),
params: {
save: true,
},
},
{
title: '配置产品接入方式',
details:
'通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
iconUrl: '/images/home/bottom-1.png',
linkUrl: '/iot/device/Product/detail',
auth: productPermission('update'),
dialogTag: 'accessMethod',
},
{
title: '添加测试设备',
details: '添加单个设备，用于验证产品模型是否配置正确。',
iconUrl: '/images/home/bottom-5.png',
linkUrl: '/iot/device/Instance',
auth: devicePermission('add'),
params: {
save: true,
},
},
{
title: '功能调试',
details:
'对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
iconUrl: '/images/home/bottom-2.png',
linkUrl: '/iot/device/Instance/detail',
// auth: devicePermission('update'),
auth: true,
dialogTag: 'funcTest',
},
{
title: '批量添加设备',
details: '批量添加同一产品下的设备',
iconUrl: '/images/home/bottom-3.png',
linkUrl: '/iot/device/Instance',
auth: devicePermission('import'),
params: {
import: true,
},
},
];
// 运维管理引导-数据
const _opsBootConfig: bootConfig[] = [
{
english: 'STEP1',
label: '设备接入配置',
link: '/iot/link/accessConfig',
auth: menuPermission('link/accessConfig'),
},
{
english: 'STEP2',
label: '日志排查',
link: '/iot/link/Log',
auth: menuPermission('link/Log'),
params: {
key: 'system',
},
},
{
english: 'STEP3',
label: '实时监控',
link: '/iot/link/dashboard',
auth: menuPermission('link/dashboard'),
params: {
save: true,
},
},
];
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[] = [
{
title: '协议管理',
details:
'根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
iconUrl: '/images/home/bottom-1.png',
linkUrl: '/iot/link/protocol',
auth: menuPermission('link/Protocol'),
},
{
title: '证书管理',
details: '统一维护平台内的证书，用于数据通信加密。',
iconUrl: '/images/home/bottom-6.png',
linkUrl: '/iot/link/Certificate',
auth: menuPermission('link/Certificate'),
},
{
title: '网络组件',
details: '根据不同的传输类型配置平台底层网络组件相关参数。',
iconUrl: '/images/home/bottom-3.png',
linkUrl: '/iot/link/type',
auth: menuPermission('link/Type'),
},
{
title: '设备接入网关',
details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
iconUrl: '/images/home/bottom-4.png',
linkUrl: '/iot/link/accessConfig',
auth: menuPermission('link/AccessConfig'),
},
{
title: '日志管理',
details: '监控系统日志，及时处理系统异常。',
iconUrl: '/images/home/bottom-5.png',
linkUrl: '/iot/link/Log',
auth: menuPermission('Log'),
params: {
key: 'system',
},
},
];
const deviceBootConfig = _deviceBootConfig.map((item,i) => ({...item, image: deviceImages[i]}));
const opsBootConfig = _opsBootConfig.map((item,i) => ({...item, image: opsImages[i]}));
</script>

76
src/views/home/components/DevOpsHome/index.vue
View File

@ -26,8 +26,82 @@ 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 '../../index';
// 页面权限控制
const menuPermission = useMenuStore().hasPermission;
const opsBootConfig: bootConfig[] = [
{
english: 'STEP1',
label: '设备接入配置',
link: '/iot/link/accessConfig',
auth: menuPermission('link/accessConfig'),
},
{
english: 'STEP2',
label: '日志排查',
link: '/iot/link/Log',
auth: menuPermission('link/Log'),
params: {
key: 'system',
},
},
{
english: 'STEP3',
label: '实时监控',
link: '/iot/link/dashboard',
auth: menuPermission('link/dashboard'),
params: {
save: true,
},
},
];
const opsStepDetails: recommendList[] = [
{
title: '协议管理',
details:
'根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
iconUrl: '/images/home/bottom-1.png',
linkUrl: '/iot/link/protocol',
auth: menuPermission('link/Protocol'),
},
{
title: '证书管理',
details: '统一维护平台内的证书，用于数据通信加密。',
iconUrl: '/images/home/bottom-6.png',
linkUrl: '/iot/link/Certificate',
auth: menuPermission('link/Certificate'),
},
{
title: '网络组件',
details: '根据不同的传输类型配置平台底层网络组件相关参数。',
iconUrl: '/images/home/bottom-3.png',
linkUrl: '/iot/link/type',
auth: menuPermission('link/Type'),
},
{
title: '设备接入网关',
details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
iconUrl: '/images/home/bottom-4.png',
linkUrl: '/iot/link/accessConfig',
auth: menuPermission('link/AccessConfig'),
},
{
title: '日志管理',
details: '监控系统日志，及时处理系统异常。',
iconUrl: '/images/home/bottom-5.png',
linkUrl: '/iot/link/Log',
auth: menuPermission('Log'),
params: {
key: 'system',
}
},
];
import { opsBootConfig, opsStepDetails } from '../../modules/config';
</script>

94
src/views/home/components/DeviceHome/index.vue
View File

@ -27,7 +27,99 @@ import DeviceCountCard from '../DeviceCountCard.vue';
import PlatformPicCard from '../PlatformPicCard.vue';
import StepCard from '../StepCard.vue';
import { deviceBootConfig, deviceStepDetails } from '../../modules/config';
import { usePermissionStore } from '@/store/permission';
import { bootConfig, recommendList } 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}`);
const deviceBootConfig: bootConfig[] = [
{
english: 'STEP1',
label: '创建产品',
link: '/iot/device/Product',
auth: productPermission('add'),
params: {
save: true,
},
},
{
english: 'STEP2',
label: '创建设备',
link: '/iot/device/Instance',
auth: devicePermission('add'),
params: {
save: true,
},
},
{
english: 'STEP3',
label: '规则引擎',
link: '/iot/rule-engine/Instance',
auth: rulePermission('add'),
params: {
save: true,
},
},
];
const deviceStepDetails: recommendList[] = [
{
title: '创建产品',
details:
'产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
iconUrl: '/images/home/bottom-4.png',
linkUrl: '/iot/device/Product',
auth: productPermission('add'),
params: {
save: true,
},
},
{
title: '配置产品接入方式',
details:
'通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
iconUrl: '/images/home/bottom-1.png',
linkUrl: '/iot/device/Product/detail',
auth: productPermission('update'),
dialogTag: 'accessMethod',
},
{
title: '添加测试设备',
details: '添加单个设备，用于验证产品模型是否配置正确。',
iconUrl: '/images/home/bottom-5.png',
linkUrl: '/iot/device/Instance',
auth: devicePermission('add'),
params: {
save: true,
},
},
{
title: '功能调试',
details:
'对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
iconUrl: '/images/home/bottom-2.png',
linkUrl: '/iot/device/Instance/detail',
// auth: devicePermission('update'),
auth: true,
dialogTag: 'funcTest',
},
{
title: '批量添加设备',
details: '批量添加同一产品下的设备',
iconUrl: '/images/home/bottom-3.png',
linkUrl: '/iot/device/Instance',
auth: devicePermission('import'),
params: {
import: true,
},
},
];
</script>
<style lang="less" scoped>

29
src/views/home/index.vue
View File

@ -1,14 +1,10 @@
<template>
<div class="container">
<div class="header"></div>
<div class="left"></div>
<div class="content iot-home-container" v-loading="loading">
<div class="iot-home-container" v-loading="loading">
<InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
<DeviceHome v-else-if="currentView === 'device'" />
<DevOpsHome v-else-if="currentView === 'ops'" />
<ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
</div>
</div>
</template>
<script lang="ts" setup>
@ -49,31 +45,12 @@ if (isNoCommunity) {
isApiUser ? router.push('/system/api') : setCurrentView();
}
});
}else setCurrentView()
} else setCurrentView();
</script>
<style lang="less" scoped>
.container {
.iot-home-container {
background: #f0f2f5;
width: 100vw;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
.header {
height: 48px;
background: #7e1c1c;
width: 100vw;
}
.left {
background: #352d85;
width: 210px;
min-height: calc(100vh - 48px);
}
.content {
margin: 24px;
width: calc(100vw - 280px);
overflow: hidden;
min-height: calc(100vh - 96px);
}
}
</style>

174
src/views/home/modules/config.ts
View File

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