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-03-07 17:15:14 +08:00
parent a0fd58e819
commit 418c0e823e
11 changed files with 57 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/views/home/components/BootCard.vue
View File

@ -1,13 +1,12 @@
<template>
<a-card class="boot-card-container" :bordered="false">
<template #title>
<h5 class="title">{{ cardTitle }}</h5>
</template>
<div class="boot-card-container" :bordered="false">
<h5 class="title">{{ cardTitle }}</h5>
<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 "../index";
import { bootConfig } from "../typing";
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) {
padding-top: 0;
}
background-color: #fff;
padding: 24px 14px;
.title {
position: relative;
z-index: 2;

2
src/views/home/components/BootCardSmall.vue
View File

@ -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({

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

@ -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;

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

@ -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;

41
src/views/home/components/DeviceCountCard.vue
View File

@ -1,13 +1,7 @@
<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('device/DashBoard')"> 详情 </span>
<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) {
padding-top: 0;
}
background-color: #fff;
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;

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

@ -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>
@ -18,7 +18,7 @@
:dataList="deviceStepDetails"
/>
</a-row>
</div>
</div>
</template>
<script setup lang="ts" name="deviceHome">
@ -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,

8
src/views/home/components/PlatformPicCard.vue
View File

@ -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 {

2
src/views/home/components/StepCard.vue
View File

@ -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;

2
src/views/home/components/dialogs/ProductChooseDialog.vue
View File

@ -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,

0
src/views/home/index.d.ts → src/views/home/typing.ts
View File

2
src/views/media/Home/index.vue
View File

@ -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;