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

Merge remote-tracking branch 'origin/dev' into dev-hub

This commit is contained in:
jackhoo_98 2023-01-13 09:54:22 +08:00
parent f225993626 3ed04a35ff
commit 7c62c8903d
22 changed files with 1593 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/api/initHome.ts
View File

@ -1,15 +1,15 @@
import server from '@/utils/request';
// 更新全部菜单
export const updateMenus = (data: any) => server
export const updateMenus = (data: any) => server.path(`/menu/iot/_all`, data)
// 添加角色
export const addRole = (data: any) => server.post(`/role`)
export const addRole = (data: any) => server.post(`/role`, data)
//更新权限菜单
export const getRoleMenu = (id: string) => server.get(`/menu/role/${id}/_grant/tree`)
//更新权限菜单
export const updateRoleMenu = (id: string, data: any) => server.put(`/menu/role/${id}/_grant`)
export const updateRoleMenu = (id: string, data: any) => server.put(`/menu/role/${id}/_grant`, data)
// 记录初始化
export const saveInit = () => server.post(`/user/settings/init`,{ init: true },)
@ -22,4 +22,34 @@ export const getInit = () => server.get(`/user/settings/init`)
export const getSystemPermission = () =>server.get(`/system/resources/permission`)
// 保存基础信息
export const save = (data?: any) => server.post('/system/config/scope/_save')
export const save = (data?: any) => server.post('/system/config/scope/_save',data)
// 查询对应协议下的本地端口数据
export const getResourcesCurrent = () => server.get('/network/resources/alive/_current')
// 保存网络组件
export const saveNetwork = (data: any) => server.post(`/network/config`, data)
// 保存协议
export const saveProtocol = () => server.post(`/protocol/default-protocol/_save`,)
// 新增设备接入网关
export const saveAccessConfig = (data: any) => server.post(`/gateway/device`, data)
// 新增产品
export const saveProduct = (data: any) => server.post(`/device/product`,data)
// 新增设备
export const saveDevice = (data: any) => server.post(`/device/instance`,data)
// 启用设备
export const deployDevice = (deviceId: string, params?: any) => server.post(`/device-instance/${deviceId}/deploy`,params,)
export const changeDeploy= (id: string) => server.post(`/device-product/${id}/deploy`)
// 查询保存后的数据
export const detail = (data?: any) => server.post(`/system/config/scopes`, data)
// 获取协议
export const getProtocol = () =>server.get(`/protocol/_query/no-paging?paging=false`)
// 上传文件

6
src/api/iot-card/home.ts Normal file
View File

@ -0,0 +1,6 @@
import server from '@/utils/request'
// 查询特定天数流量数据
export const queryFlow = (beginTime: any, endTime: any, data: any) => server.post(`/network/flow/_query/${beginTime}/${endTime}`, data)
export const list = (data: any) => server.post(`/network/card/_query`, data)

43
src/components/CardBox/index.vue
View File

@ -54,31 +54,24 @@
delete: item.key === 'delete',
}"
>
<!-- <slot name="actions" v-bind="item"></slot> -->
<a-popconfirm v-if="item.popConfirm" v-bind="item.popConfirm">
<template v-if="item.key === 'delete'">
<a-button :disabled="item.disabled">
<DeleteOutlined />
</a-button>
</template>
<template v-else>
<a-button :disabled="item.disabled">
<a-button :disabled="item.disabled">
<DeleteOutlined v-if="item.key === 'delete'" />
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</a-button>
</template>
</template>
</a-button>
</a-popconfirm>
<template v-else>
<template v-if="item.key === 'delete'">
<a-button :disabled="item.disabled">
<DeleteOutlined />
</a-button>
</template>
<template v-else>
<a-button :disabled="item.disabled">
<a-button :disabled="item.disabled">
<DeleteOutlined v-if="item.key === 'delete'" />
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</a-button>
</template>
</template>
</a-button>
</template>
</div>
</div>
@ -291,10 +284,10 @@ const handleClick = () => {
display: flex;
flex-grow: 1;
> span,
& button {
width: 100%;
border-radius: 0;
& > span,
button {
width: 100% !important;
border-radius: 0 !important;
}
button {
@ -372,9 +365,9 @@ const handleClick = () => {
}
}
:deep(.ant-tooltip-disabled-compatible-wrapper) {
width: 100%;
}
// :deep(.ant-tooltip-disabled-compatible-wrapper) {
// width: 100%;
// }
}
}
}

75
src/components/Table/index.tsx
View File

@ -50,11 +50,20 @@ export interface JTableProps extends TableProps{
pageIndex: number;
};
model?: keyof typeof ModelEnum | undefined; // 显示table还是card
actions?: ActionsType[];
// actions?: ActionsType[];
noPagination?: boolean;
rowSelection?: TableProps['rowSelection'];
cardProps?: Record<string, any>;
dataSource?: Record<string, any>[];
gridColumn: number;
/**
* 用于不同分辨率
* gridColumns[0] 1366 ~ 1440 分辨率；
* gridColumns[1] 1440 ~ 1600 分辨率；
* gridColumns[2] > 1600 分辨率；
*/
gridColumns?: number[];
alertRender?: boolean;
}
const JTable = defineComponent<JTableProps>({
@ -87,10 +96,10 @@ const JTable = defineComponent<JTableProps>({
type: [String, undefined],
default: undefined
},
actions: {
type: Array as PropType<ActionsType[]>,
default: () => []
},
// actions: {
// type: Array as PropType<ActionsType[]>,
// default: () => []
// },
noPagination: {
type: Boolean,
default: false
@ -106,12 +115,24 @@ const JTable = defineComponent<JTableProps>({
dataSource: {
type: Array,
default: () => []
},
gridColumns: {
type: Array as PropType<Number[]>,
default: [2, 3, 4]
},
gridColumn: {
type: Number,
default: 4
},
alertRender: {
type: Boolean,
default: true
}
} as any,
setup(props: JTableProps ,{ slots, emit }){
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
const column = ref<number>(4);
const column = ref<number>(props.gridColumn || 4);
const _dataSource = ref<Record<string, any>[]>([])
const pageIndex = ref<number>(0)
const pageSize = ref<number>(6)
@ -119,9 +140,20 @@ const JTable = defineComponent<JTableProps>({
const _columns = ref<JColumnProps[]>(props?.columns || [])
const loading = ref<boolean>(true)
// alert关闭，取消选择
const handleAlertClose = () => {
emit('cancelSelect')
/**
* 监听宽度，计算显示卡片个数
*/
const windowChange = () => {
if (window.innerWidth <= 1440) {
const _column = props.gridColumn && props.gridColumn < 2 ? props.gridColumn : 2;
column.value = props.gridColumns ? props.gridColumns[0] : _column
} else if (window.innerWidth > 1440 && window.innerWidth <= 1600) {
const _column = props.gridColumn && props.gridColumn < 3 ? props.gridColumn : 3;
column.value = props.gridColumns ? props.gridColumns[1] : _column
} else if (window.innerWidth > 1600) {
const _column = props.gridColumn && props.gridColumn < 4 ? props.gridColumn : 4;
column.value = props.gridColumns ? props.gridColumns[2] : _column
}
}
/**
@ -153,13 +185,22 @@ const JTable = defineComponent<JTableProps>({
} else {
_dataSource.value = props?.dataSource || []
}
loading.value = false
}
watchEffect(() => {
handleSearch(props.params)
})
onMounted(() => {
window.onresize = () => {
windowChange()
}
})
onUnmounted(() => {
window.onresize = null
})
return () => <Spin spinning={loading.value}>
<div class={styles["jtable-body"]}>
@ -184,12 +225,14 @@ const JTable = defineComponent<JTableProps>({
{/* content */}
<div class={styles['jtable-content']}>
{
props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
props.alertRender && props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
<div class={styles['jtable-alert']}>
<Alert
message={'已选择' + props?.rowSelection?.selectedRowKeys?.length + '项'}
type="info"
onClose={handleAlertClose}
onClose={() => {
emit('cancelSelect')
}}
closeText={<a>取消选择</a>}
/>
</div> : null
@ -205,8 +248,10 @@ const JTable = defineComponent<JTableProps>({
>
{
_dataSource.value.map(item => slots.card ?
<div class={[styles['jtable-card-item'], props.cardBodyClass]}>{slots.card({row: item, actions: props?.actions || []})}</div>
: null)
<div class={[styles['jtable-card-item'], props.cardBodyClass]}>
{slots.card(item)}
</div> : null
)
}
</div> :
<div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
@ -225,7 +270,7 @@ const JTable = defineComponent<JTableProps>({
const {column, record} = dt;
if((column?.key || column?.dataIndex) && column?.scopedSlots && (slots?.[column?.dataIndex] || slots?.[column?.key])) {
const _key = column?.key || column?.dataIndex
return slots?.[_key]!({row: record, actions: props.actions})
return slots?.[_key]!(record)
} else {
return record?.[column?.dataIndex] || ''
}

2
src/components/Table/index.vue
View File

@ -15,7 +15,7 @@
</div>
</div>
<div class="jtable-content">
<div class="jtable-alert" v-if="rowSelection.selectedRowKeys && rowSelection.selectedRowKeys.length">
<div class="jtable-alert" v-if="rowSelection && rowSelection.selectedRowKeys && rowSelection.selectedRowKeys.length">
<a-alert :message="'已选择' + rowSelection.selectedRowKeys.length + '项'" type="info" :afterClose="handleAlertClose">
<template #closeText>
<a>取消选择</a>

3
src/global.d.ts vendored
View File

@ -9,4 +9,5 @@ declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.js';
declare module '*.ts';
declare module '*.ts';
declare module 'js-cookie';

14
src/router/menu.ts
View File

@ -87,9 +87,19 @@ export default [
path: '/link/accessConfig/detail/add',
component: () => import('@/views/link/AccessConfig/Detail/index.vue')
},
// system 系统管理
{
path:'/system/api',
components: ()=>import('@/views/system/apiPage/index')
},
// 初始化
{
path: '/init-home',
component: () => import('@/views/init-home/index.vue')
path: '/init-home',
component: () => import('@/views/init-home/index.vue')
},
// 物联卡 iot-card
{
path: '/iot-card/home',
component: () => import('@/views/iot-card/Home/index.vue')
},
]

51
src/utils/consts.ts
View File

@ -29,38 +29,21 @@ export const StatusColorEnum = {
'default': 'default',
}
class SystemConst {
static API_BASE = 'api';
static SYSTEM_NAME = 'Jetlinks';
static LOGIN = 'LOGIN-STATUS';
static DOC_URL = 'http://doc.jetlinks.cn';
static BASE_CURD_MODAL_VISIBLE = 'BASE_CURD_MODAL_VISIBLE';
static BASE_CURD_CURRENT = 'BASE_CURD_CURRENT';
static BASE_CURD_MODEL = 'BASE_CURD_MODEL';
static BASE_UPDATE_DATA = 'BASE_UPDATE_DATA';
static GLOBAL_WEBSOCKET = 'GLOBAL-WEBSOCKET';
static BIND_USER_STATE = 'false';
static REFRESH_METADATA = 'refresh_metadata';
static REFRESH_METADATA_TABLE = 'refresh_metadata_table';
static GET_METADATA = 'get_metadata';
static REFRESH_DEVICE = 'refresh_device';
static AMAP_KEY = 'amap_key';
static Version_Code = 'version_code';
export const SystemConst = {
API_BASE: 'api',
SYSTEM_NAME: 'Jetlinks',
LOGIN: 'LOGIN-STATUS',
DOC_URL: 'http://doc.jetlinks.cn',
BASE_CURD_MODAL_VISIBLE: 'BASE_CURD_MODAL_VISIBLE',
BASE_CURD_CURRENT: 'BASE_CURD_CURRENT',
BASE_CURD_MODEL: 'BASE_CURD_MODEL',
BASE_UPDATE_DATA: 'BASE_UPDATE_DATA',
GLOBAL_WEBSOCKET: 'GLOBAL-WEBSOCKET',
BIND_USER_STATE: 'false',
REFRESH_METADATA: 'refresh_metadata',
REFRESH_METADATA_TABLE: 'refresh_metadata_table',
GET_METADATA: 'get_metadata',
REFRESH_DEVICE: 'refresh_device',
AMAP_KEY: 'amap_key',
VERSION_CODE: 'version_code',
}
export default SystemConst;

160
src/views/demo/table/index.vue
View File

@ -1,32 +1,7 @@
<template>
<div class="box">
<JTable
:columns="[
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: 'ID',
dataIndex: 'id',
key: 'id',
scopedSlots: true
},
{
title: '分类',
dataIndex: 'classifiedName',
key: 'classifiedName',
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 250,
scopedSlots: true
}
]"
:actions="actions"
:columns="columns"
:request="request"
:rowSelection="{
selectedRowKeys: _selectedRowKeys,
@ -38,14 +13,21 @@
<a-button type="primary">新增</a-button>
</template>
<template #card="slotProps">
<CardBox :value="slotProps" @click="handleClick" :actions="slotProps.actions" v-bind="slotProps.row" :active="_selectedRowKeys.includes(slotProps.row.id)">
<CardBox
:value="slotProps"
@click="handleClick"
:actions="getActions(slotProps)"
v-bind="slotProps"
:active="_selectedRowKeys.includes(slotProps.id)"
:status="slotProps.state ? 'success' : 'error'"
>
<template #img>
<slot name="img">
<img :src="getImage('/device-product.png')" />
</slot>
</template>
<template #content>
<h3>{{slotProps.row.name}}</h3>
<h3>{{slotProps.name}}</h3>
<a-row>
<a-col :span="12">
<div class="card-item-content-text">
@ -53,27 +35,41 @@
</div>
<div>直连设备</div>
</a-col>
<a-col :span="12">
<div class="card-item-content-text">
产品名称
</div>
<div>测试固定地址</div>
</a-col>
</a-row>
</template>
<!-- <template #actions="item">
<a-popconfirm v-if="item.popConfirm" v-bind="item.popConfirm">
<a-button :disabled="item.disabled">
<DeleteOutlined v-if="item.key === 'delete'" />
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</template>
</a-button>
</a-popconfirm>
<template v-else>
<a-button :disabled="item.disabled">
<DeleteOutlined v-if="item.key === 'delete'" />
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</template>
</a-button>
</template>
</template> -->
</CardBox>
</template>
<template #id="slotProps">
<a>{{slotProps.row.id}}</a>
<a>{{slotProps.id}}</a>
</template>
<template #action="slotProps">
<a-space :size="16">
<a-tooltip v-for="i in slotProps.actions" :key="i.key" v-bind="i.tooltip">
<a-tooltip v-for="i in getActions(slotProps)" :key="i.key" v-bind="i.tooltip">
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
<a-button style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
<a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
</a-popconfirm>
<a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps.row)">
<AIcon :type="i.icon" />
<a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps)">
<a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
</a-button>
</a-tooltip>
</a-space>
@ -86,38 +82,34 @@
import server from "@/utils/request";
import type { ActionsType } from '@/components/Table/index.vue'
import { getImage } from '@/utils/comm';
import { DeleteOutlined } from '@ant-design/icons-vue'
const request = (data: any) => server.post(`/device-product/_query`, data)
const actions: ActionsType[] = [
const columns = [
{
key: 'edit',
// disabled: true,
text: "编辑",
tooltip: {
title: '编辑'
},
icon: 'icon-rizhifuwu'
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
key: 'import',
// disabled: true,
text: "导入",
tooltip: {
title: '导入'
},
icon: 'icon-xiazai'
title: 'ID',
dataIndex: 'id',
key: 'id',
scopedSlots: true
},
{
key: 'delete',
// disabled: true,
text: "删除",
tooltip: {
title: '删除'
},
popConfirm: {
title: '确认删除?'
},
}
title: '分类',
dataIndex: 'classifiedName',
key: 'classifiedName',
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 250,
scopedSlots: true
}
]
const _selectedRowKeys = ref<string[]>([])
@ -141,6 +133,46 @@ const handleClick = (dt: any) => {
}
}
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
if(!data){
return []
}
return [
{
key: 'edit',
text: "编辑",
tooltip: {
title: '编辑'
},
icon: 'icon-rizhifuwu'
},
{
key: 'import',
text: "导入",
tooltip: {
title: '导入'
},
icon: 'icon-xiazai'
},
{
key: 'delete',
// disabled: true,
text: "删除",
disabled: !!data?.state,
tooltip: {
title: !!data?.state ? '正常的产品不能删除' : '删除'
},
// popConfirm: {
// title: '确认删除?'
// },
icon: 'icon-huishouzhan'
}
]
}
const p = h('p', 'hi')
</script>

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

@ -25,6 +25,10 @@
:open-number="openAccess"
@confirm="againJumpPage"
/>
<FuncTestDialog
:open-number="openFunc"
@confirm="againJumpPage"
/>
</div>
</a-card>
</template>
@ -35,6 +39,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import AccessMethodDialog from './dialogs/AccessMethodDialog.vue';
import FuncTestDialog from './dialogs/FuncTestDialog.vue';
import { recommendList } from '../index';

34
src/views/home/components/dialogs/FuncTestDialog.vue
View File

@ -3,7 +3,7 @@
<a-modal
v-model:visible="visible"
title="选择产品"
style="width: 700px"
style="width: 1000px"
@ok="handleOk"
:getContainer="getContainer"
:maskClosable="false"
@ -11,34 +11,31 @@
<div class="search">
<a-select
v-model:value="form.key"
style="width: 100%"
style="width: 100px;margin-right: 20px;"
:options="productList"
/>
<a-select
v-model:value="form.relation"
style="width: 100%"
style="width: 100px;margin-right: 20px;"
:options="productList"
/>
<a-input v-model:value="form.keyValue" allow-clear />
<a-input v-model:value="form.keyValue" allow-clear style="width: 230px;margin-right: 50px;" />
<a-button type="primary" @click="clickSearch">
<a-button type="primary" @click="clickSearch" style="margin-right: 10px;">
<template #icon><SearchOutlined /></template>
搜索
</a-button>
<a-button type="primary" @click="clickReset">
<a-button @click="clickReset">
<template #icon><reload-outlined /></template>
重置
</a-button>
</div>
<JTable :columns="columns">
</JTable>
<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>
@ -65,10 +62,10 @@ const handleOk = () => {
watch(
() => props.openNumber,
() => {
visible.value = true;
clickReset();
getOptions();
clickSearch();
visible.value = true;
},
);
@ -122,4 +119,11 @@ const selectItem: deviceInfo | {} = {};
const getList = () => {};
</script>
<style lang="scss" scoped></style>
<style lang="less" scoped>
.func-test-dialog-container {
.search {
display: flex;
}
}
</style>

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

@ -6,8 +6,7 @@
<!-- <InitHome /> -->
<!-- <DeviceHome /> -->
<!-- <DevOpsHome /> -->
<!-- <ComprehensiveHome /> -->
<ApiPage />
<ComprehensiveHome />
</div>
</div>
</template>
@ -17,7 +16,6 @@ import InitHome from './components/InitHome/index.vue';
import DeviceHome from './components/DeviceHome/index.vue';
import DevOpsHome from './components/DevOpsHome/index.vue';
import ComprehensiveHome from './components/ComprehensiveHome/index.vue';
import ApiPage from '@/views/system/apiPage/index.vue'
</script>

13
src/views/init-home/data/interface.ts
View File

@ -6,7 +6,7 @@ export interface modalState {
port: string; // 本地端口
publicHost: string; // 公网地址
publicPort: number | null; // 公网端口
rules: Record<string, Rule[]>;
}
/**基本信息表单 */
@ -21,17 +21,26 @@ export interface formState {
}
/**
* logo上传表单
* 图片上传表单
*/
export interface logoState {
logoValue: string;
logoLoading: boolean;
backLoading: boolean;
iconLoading: boolean;
inLogo: boolean;
inIcon: boolean;
inBackground: boolean;
iconValue: string;
backValue: string;
backSize: number;
logoSize: number;
imageTypes:Array<string>;
iconTypes: Array<string>,
beforeLogoUpload:(file: UploadProps['beforeUpload']) => void
handleChangeLogo:(info: UploadChangeParam ) => void
beforeBackUpload:(file: UploadProps['beforeUpload']) => void
changeBackUpload:(info: UploadChangeParam ) => void
beforeIconUpload:(file: UploadProps['beforeUpload']) => void
changeIconUpload:(info: UploadChangeParam ) => void
}

583
src/views/init-home/index.vue
View File

@ -109,16 +109,44 @@
class="upload-image-border-logo"
>
<a-upload
name="file"
:action="
action
"
:headers="
headers
"
:showUploadList="
false
"
:beforeUpload="
beforeLogoUpload
"
@change="
handleChangeLogo
"
:accept="
imageTypes &&
imageTypes.length
? imageTypes.toString()
: ''
"
>
<div
class="upload-image-content-logo"
>
<div
class="loading-logo"
v-if="
logoLoading
"
>
<LoadingOutlined
style="
font-size: 28px;
"
/>
</div>
<div
class="upload-image"
v-if="
@ -166,7 +194,6 @@
</a-upload>
<div
v-if="
logoValue &&
logoLoading
"
>
@ -223,10 +250,45 @@
<div
class="upload-image-border-logo"
>
<a-upload>
<a-upload
name="file"
:action="
action
"
:headers="
headers
"
:showUploadList="
false
"
:beforeUpload="
beforeIconUpload
"
@change="
changeIconUpload
"
:accept="
iconTypes &&
iconTypes.length
? iconTypes.toString()
: ''
"
>
<div
class="upload-image-content-logo"
>
<div
v-if="
iconLoading
"
class="loading-icon"
>
<LoadingOutlined
style="
font-size: 28px;
"
/>
</div>
<div
class="upload-image-icon"
v-if="
@ -249,20 +311,7 @@
<div
v-else
>
<div
v-if="
logoLoading
"
>
<LoadingOutlined
style="
font-size: 28px;
"
/>
</div>
<div
v-else
>
<div>
<PlusOutlined
style="
font-size: 28px;
@ -298,16 +347,40 @@
class="upload-image-border-back"
>
<a-upload
@beforeUpload="
name="file"
:action="action"
:headers="headers"
:beforeUpload="
beforeBackUpload
"
:showUploadList="
false
"
@change="
changeBackUpload
"
:accept="
imageTypes &&
imageTypes.length
? imageTypes.toString()
: ''
"
>
<div
class="upload-image-content-back"
>
<div
v-if="
backLoading
"
class="loading-back"
>
<LoadingOutlined
style="
font-size: 28px;
"
/>
</div>
<div
class="upload-image"
v-if="
@ -328,18 +401,7 @@
点击修改
</div>
<div v-else>
<div
v-if="
logoLoading
"
>
<LoadingOutlined
style="
font-size: 28px;
"
/>
</div>
<div v-else>
<div>
<PlusOutlined
style="
font-size: 28px;
@ -349,6 +411,11 @@
</div>
</div>
</a-upload>
<!-- <div v-if="logoValue">
<div v-if="logoLoading">
<div class="upload-loading-mask"></div>
</div>
</div> -->
</div>
</div>
<div class="upload-tips">
@ -499,7 +566,7 @@
width="52vw"
:maskClosable="false"
@cancel="cancel"
@ok="handleOk"
@ok="saveCurrentData"
okText="确定"
cancelText="取消"
class="modal-style"
@ -516,10 +583,10 @@
</div>
<div style="margin-top: 20px">
<a-form
:model="ModalForm"
:validate-messages="message"
layout="vertical"
:model="modalForm"
ref="formRef"
:rules="rules"
:rules="rulesModle"
>
<a-row :span="24" :gutter="24">
<a-col :span="12">
@ -543,7 +610,7 @@
</template>
<a-input
v-model:value="
ModalForm.host
modalForm.host
"
:disabled="true"
/>
@ -570,7 +637,7 @@
</template>
<a-input
v-model:value="
ModalForm.publicHost
modalForm.publicHost
"
>
</a-input>
@ -597,9 +664,23 @@
</template>
<a-select
v-model:value="
ModalForm.port
modalForm.port
"
></a-select>
>
<a-select-option
v-for="item in optionPorts"
:key="item"
:value="
item.value
"
:label="
item.label
"
>{{
item.label
}}</a-select-option
>
</a-select>
</a-form-item>
<a-form-item
name="publicPort"
@ -623,7 +704,7 @@
</template>
<a-input-number
v-model:value="
ModalForm.publicPort
modalForm.publicPort
"
style="width: 100%"
/>
@ -640,6 +721,7 @@
type="primary"
class="btn-style"
@click="submitData"
:loading="isSucessBasic || isSucessInit || isSucessRole"
>确定</a-button
>
</div>
@ -654,19 +736,38 @@ import {
ExclamationCircleOutlined,
LoadingOutlined,
} from '@ant-design/icons-vue';
import { ROLEKEYS, RoleData } from './data/RoleData';
import RoleMenuData, { ROLEKEYS, RoleData } from './data/RoleData';
import type { Rule } from 'ant-design-vue/es/form';
import type {
FormInstance,
UploadChangeParam,
UploadProps,
Form,
} from 'ant-design-vue';
import { modalState, formState, logoState } from './data/interface';
import BaseMenu from './data/baseMenu';
import { getSystemPermission, save } from '@/api/initHome';
import {
getSystemPermission,
save,
addRole,
getRoleMenu,
updateRoleMenu,
getResourcesCurrent,
saveNetwork,
saveProtocol,
getProtocol,
saveAccessConfig,
saveProduct,
saveDevice,
changeDeploy,
deployDevice,
} from '@/api/initHome';
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
import { LocalStore } from '@/utils/comm';
import { message } from 'ant-design-vue';
const formRef = ref();
const menuRef = ref();
const formBasicRef = ref<FormInstance>();
const formBasicRef = ref();
/**
* 表单数据
*/
@ -710,7 +811,7 @@ const validateUrl = async (_rule: Rule, value: string) => {
return Promise.reject('请输入公网地址');
} else {
var reg = new RegExp(
/^(((?!(127\\.0\\.0\\.1)|(localhost)|(10\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3})|(172\\.((1[6-9])|(2\\d)|(3[01]))\\.\\d{1,3}\\.\\d{1,3})|(192\\.168\\.\\d{1,3}\\.\\d{1,3})).)*)(?:(?:\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.){3}(?:\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])$/,
/^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$/,
);
if (!reg.test(value)) {
return Promise.reject('请输入正确的公网地址');
@ -731,44 +832,44 @@ const validateNumber = async (_rule: Rule, value: string) => {
return Promise.resolve();
}
};
/**
* 初始化弹窗表单数据
*/
const ModalForm = reactive<modalState>({
const modalForm = reactive<modalState>({
host: '0.0.0.0',
port: '',
publicHost: '',
publicPort: null,
rules: {
host: [
{
required: true,
message: '请选择本地地址',
},
],
port: [
{
required: true,
message: '请选择本地端口',
},
],
publicHost: [
{
required: true,
validator: validateUrl,
trigger: 'change',
},
],
publicPort: [
{
required: true,
validator: validateNumber,
trigger: 'change',
},
],
},
});
const { rules } = toRefs(ModalForm);
const rulesModle = ref({
host: [
{
required: true,
message: '请选择本地地址',
},
],
port: [
{
required: true,
message: '请选择本地端口',
},
],
publicHost: [
{
required: true,
validator: validateUrl,
trigger: 'change',
},
],
publicPort: [
{
required: true,
validator: validateNumber,
trigger: 'change',
},
],
});
/**
* 默认打开第一个初始菜单
@ -777,6 +878,8 @@ const activeKey = ref<string>('1');
const spinning = ref<boolean>(false);
const visible = ref<boolean>(false);
const flag = ref<boolean>(false);
const action = ref<string>(`${BASE_API_PATH}/file/static`);
const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
/**
* 角色勾选数据
*/
@ -797,13 +900,6 @@ const showModal = () => {
}
};
/**
* 提交初始数据表单
*/
const handleOk = async () => {
const valid = await formRef.value.validate();
};
/**
* 表单取消事件
*/
@ -817,13 +913,34 @@ const cancel = () => {
const logoData = reactive<logoState>({
logoValue: '/public/logo.png',
logoLoading: false,
backLoading: false,
iconLoading: false,
inLogo: false,
inIcon: false,
inBackground: false,
backSize: 4,
logoSize: 1,
iconValue: '/public/favicon.ico',
backValue: '/public/images/login.png',
imageTypes: ['image/jpeg', 'image/png'],
iconTypes: ['image/x-icon'],
/**
* 图片上传改变事件
* logo格式校验
*/
beforeLogoUpload: (file) => {
const isType = logoData.imageTypes.includes(file.type);
if (!isType) {
message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
return false;
}
const isSize = file.size / 1024 / 1024 < 4;
if (!isSize) {
message.error(`图片大小必须小于${4}M`);
}
return isType && isSize;
},
/*
* logo上传改变事件
*/
handleChangeLogo: (info) => {
if (info.file.status === 'uploading') {
@ -838,33 +955,216 @@ const logoData = reactive<logoState>({
/**
* 背景图片上传之前
*/
beforeBackUpload: (file) => {},
beforeBackUpload: (file) => {
const isType = logoData.imageTypes.includes(file.type);
if (!isType) {
message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
return false;
}
const isSize = file.size / 1024 / 1024 < 4;
if (!isSize) {
message.error(`图片大小必须小于${4}M`);
}
return isType && isSize;
},
/**
* 背景图片发生改变
*/
changeBackUpload: (info) => {},
changeBackUpload: (info) => {
if (info.file.status === 'uploading') {
logoData.backLoading = true;
}
if (info.file.status === 'done') {
info.file.url = info.file.response?.result;
logoData.backLoading = false;
logoData.backValue = info.file.response?.result;
}
},
/**
* 上传之前
*/
beforeIconUpload: (file) => {
const isType = logoData.iconTypes.includes(file.type);
if (!isType) {
message.error(`请上传ico格式的图片`);
return false;
}
const isSize = file.size / 1024 / 1024 < 1;
if (!isSize) {
message.error(`图片大小必须小于${1}M`);
}
return isType && isSize;
},
/**
* 图标发生改变
*/
changeIconUpload: (info) => {
if (info.file.status === 'uploading') {
logoData.iconLoading = true;
}
if (info.file.status === 'done') {
info.file.url = info.file.response?.result;
logoData.iconLoading = true;
logoData.iconValue = info.file.response?.result;
}
},
});
const {
logoValue,
logoLoading,
iconLoading,
backLoading,
inLogo,
iconValue,
inIcon,
inBackground,
backValue,
handleChangeLogo,
beforeBackUpload,
changeBackUpload,
beforeLogoUpload,
beforeIconUpload,
changeIconUpload,
imageTypes,
iconTypes,
} = toRefs(logoData);
/**
* 提交基础表单
*/
const basicData = reactive({
isSucessBasic: false,
/**
* 提交基础表单数据
*/
saveBasicInfo: async () => {},
saveBasicInfo: async () => {
// return new Promise(async (resolve) => {
const vaild = await formBasicRef.value.validate();
console.log(vaild, 'vaild ');
if (vaild) {
const item = [
{
scope: 'front',
properties: {
...form,
apikey: '',
'base-path': '',
},
},
{
scope: 'amap',
properties: {
api: form.apikey,
},
},
{
scope: 'paths',
properties: {
'base-path': form.basePath,
},
},
];
const res = await save(item);
if (res.status === 200) {
const ico: any = document.querySelector('link[rel="icon"]');
if (ico !== null) {
ico.href = form.icon;
}
} else {
basicData.isSucessBasic = true;
}
} else {
basicData.isSucessBasic = true;
}
// });
},
});
/**
* 提交角色数据
*/
const roleData = reactive({
isSucessRole: false,
/**
* 根据菜单找角色
*/
findMenuByRole: (menu: any[], code: string): any => {
let _item = null;
menu.some((item) => {
if (item.code === code) {
_item = item;
return true;
}
if (item.children) {
const childrenItem = roleData.findMenuByRole(
item.children,
code,
);
if (childrenItem) {
_item = childrenItem;
return true;
}
return false;
}
return null;
});
return _item;
},
/**
* 保存角色
*/
addRoleData: async () => {
return new Promise((resolve) => {
if (!keys.value.length) {
return resolve(true);
}
let Count = 0;
keys.value.forEach(async (item, index) => {
const _itemData = RoleData[item];
// 添加该角色
const res = await addRole(_itemData);
if (res.status === 200) {
const menuTree = await getRoleMenu(res.result.id);
if (menuTree.status === 200) {
const _roleData = (RoleMenuData[item] as []).filter(
(roleItem: any) => {
const _menu = roleData.findMenuByRole(
menuTree.result,
roleItem.code,
);
if (_menu) {
roleItem.id = _menu.id;
roleItem.parentId = _menu.parentId;
roleItem.createTime = _menu.createTime;
return true;
}
return false;
},
);
//更新权限
const roleRes = await updateRoleMenu(res.result.id, {
menus: _roleData,
});
if (roleRes.status === 200) {
Count += 1;
}
if (index === keys.value.length - 1) {
resolve(Count === keys.value.length);
}
} else if (index === keys.value.length - 1) {
resolve(Count === keys.value.length);
}
} else if (index === keys.value.length - 1) {
resolve(Count === keys.value.length);
roleData.isSucessRole = true;
}
});
});
},
});
const { isSucessRole } = toRefs(roleData);
/**
* 获取菜单数据
*/
@ -882,7 +1182,6 @@ const menuDatas = reactive({
);
const _count = menuDatas.menuCount(newTree);
menuDatas.count = _count;
console.log(menuDatas.count, 'menuDatas.count');
}
},
/**
@ -918,16 +1217,118 @@ const menuDatas = reactive({
}, 0);
},
});
const { count } = toRefs(menuDatas);
/**
* 提交初始化数据
*/
const initialization = reactive({
isSucessInit: false,
optionPorts: [],
/**
* 查询端口数据
*/
getCurrentPort: async () => {
const resp = await getResourcesCurrent();
const current = resp?.result;
const _host =
current.find((item: any) => item.host === '0.0.0.0')?.ports[
'TCP'
] || [];
initialization.optionPorts = _host?.map((p: any) => ({
label: p,
value: p,
}));
},
/**
* 提交初始数据表单
*/
saveCurrentData: async () => {
// return new Promise(async (resolve) => {
const valid = await formRef.value.validate();
console.log(valid, 'valid');
// if (valid) {
// try {
// // 新增网络组件
// const network = await saveNetwork({
// type: 'MQTT_SERVER',
// shareCluster: true,
// name: 'MQTT网络组件',
// configuration: {
// host: '0.0.0.0',
// secure: false,
// port: modalForm.port,
// publicHost: modalForm.publicHost,
// publicPort: modalForm.publicPort,
// },
// });
// // 保存协议
// const protocol = await saveProtocol();
// let protocolItem: any = undefined;
// if (protocol.status === 200) {
// const proid = await getProtocol();
// if (proid.status === 200) {
// protocolItem = (proid?.result || []).find(
// (it: any) => it.name === 'JetLinks官方协议',
// );
// }
// }
// // 新增设备接入网关
// const accessConfig = await saveAccessConfig({
// name: 'MQTT类型设备接入网关',
// provider: 'mqtt-server-gateway',
// protocol: protocolItem?.id,
// transport: 'MQTT',
// channel: 'network',
// channelId: network?.result?.id,
// });
// // 新增产品
// const product = await saveProduct({
// name: 'MQTT产品',
// messageProtocol: protocolItem?.id,
// protocolName: protocolItem?.name,
// transportProtocol: 'MQTT',
// deviceType: 'device',
// accessId: accessConfig.result?.id,
// accessName: accessConfig.result?.name,
// accessProvider: 'mqtt-server-gateway',
// });
// // 新增设备
// const device = await saveDevice({
// name: 'MQTT设备',
// productId: product?.result?.id,
// productName: product?.result?.name,
// });
// if (device.status === 200) {
// changeDeploy(product.result.id);
// deployDevice(device.result.id);
// }
// flag.value = true;
// visible.value = false;
// } catch (e) {
// initialization.isSucessInit = true;
// // resolve(false);
// }
// }
initialization.isSucessInit = true;
},
});
const { optionPorts, saveCurrentData, isSucessInit } = toRefs(initialization);
/**
* 初始化
*/
menuDatas.getSystemPermissionData();
initialization.getCurrentPort();
/**
* 提交所有数据
*/
const submit = () => {};
const submitData = () => {
initialization.saveCurrentData();
roleData.addRoleData();
basicData.saveBasicInfo();
};
</script>
<style scoped lang="less">
.page-container {
@ -1073,6 +1474,13 @@ const submit = () => {};
padding: 8px;
background-color: rgba(0, 0, 0, 0.06);
cursor: pointer;
.loading-logo {
position: absolute;
top: 50%;
}
.loading-icon {
position: absolute;
}
.upload-image {
width: 100%;
height: 100%;
@ -1132,6 +1540,9 @@ const submit = () => {};
padding: 8px;
background-color: rgba(0, 0, 0, 0.06);
cursor: pointer;
.loading-back {
position: absolute;
}
.upload-image {
width: 100%;
height: 100%;

541
src/views/iot-card/Home/index.vue Normal file
View File

@ -0,0 +1,541 @@
<!-- 物联卡-首页 -->
<template>
<div class="page-container">
<a-row :gutter="24">
<a-col :span="14">
<div class="home-guide">
<Guide title="物联卡引导"></Guide>
<div
class="home-guide-items"
:style="`grid-template-columns: repeat(${
guideList ? guideList.length : 1
}, 1fr);`"
>
<div
v-for="(item, index) in guideList"
:key="index"
class="home-guide-item step-bar arrow-2 pointer"
@click="jumpPage(item)"
>
<div class="item-english">{{ item.english }}</div>
<div class="item-title">{{ item.name }}</div>
<div class="item-index">
<img :src="Image[index + 1]" />
</div>
</div>
</div>
</div>
</a-col>
<a-col :span="10">
<div class="home-statistics">
<Guide title="基础统计">
<template #extra>
<span class="extra-text">详情</span>
</template>
</Guide>
<div class="home-statistics-body">
<div class="home-guide-item">
<div class="item-english">昨日流量统计</div>
<div class="item-title">{{ currentSource }} M</div>
<div
class="item-index-echarts"
style="height: 75px; width: 110px"
>
<div class="chart" ref="todayFlowChart"></div>
</div>
</div>
<div class="home-guide-item">
<div class="item-english">物联卡</div>
<div class="item-content">
<div
v-for="iten in pieChartData"
:key="iten.key"
class="item-node"
>
<div class="item-node-text">
{{ iten.value }}
</div>
<div :class="`state ${iten.className}`">
{{ iten.name }}
</div>
</div>
</div>
<div
class="item-index-echarts"
style="height: 75px; width: 110px"
>
<div class="chart" ref="iotCardChart"></div>
</div>
</div>
</div>
</div>
</a-col>
<a-col :span="24" style="min-height: 580px">
<div class="home-body">
<Guide title="平台架构图" english="PLATFORM ARCHITECTURE DIAGRAM" />
<div class="home-body-img">
<img :src="getImage('/iot-card/iotcard-home.png')" />
</div>
</div>
</a-col>
</a-row>
</div>
</template>
<script setup lang="ts">
import { getImage } from '@/utils/comm';
import Guide from '../components/Guide.vue';
import { message } from 'ant-design-vue';
import moment from 'moment';
import { queryFlow, list } from '@/api/iot-card/home';
import * as echarts from 'echarts';
const router = useRouter();
const { proxy } = <any>getCurrentInstance();
interface GuideItemProps {
key: string;
name: string;
english: string;
url: string;
param?: Record<string, any>;
index?: number;
auth: boolean;
}
const Image = {
1: getImage('/home/1.png'),
2: getImage('/home/2.png'),
3: getImage('/home/3.png'),
};
const guideList = [
{
key: 'EQUIPMENT',
name: '平台对接',
english: 'STEP1',
auth: '',
url: '',
},
{
key: 'SCREEN',
name: '物联卡管理',
english: 'STEP2',
auth: '',
url: '',
param: { save: true },
},
{
key: 'CASCADE',
name: '操作记录',
english: 'STEP3',
auth: '',
url: '',
},
];
const currentSource = ref<number>(0);
const barChartData = ref<any[]>([]);
const pieChartData = ref<any[]>([
{
key: 'using',
name: '正常',
value: 0,
className: 'normal',
},
{
key: 'toBeActivated',
name: '未激活',
value: 0,
className: 'notActive',
},
{
key: 'deactivate',
name: '停用',
value: 0,
className: 'stopped',
},
]);
const jumpPage = (data: GuideItemProps) => {
if (data.url && data.auth) {
router.push(`${data.url}`, data.param);
} else {
message.warning('暂无权限，请联系管理员');
}
};
/**
* 获取昨日流量消耗
*/
const getTodayFlow = async () => {
const beginTime = moment().subtract(1, 'days').startOf('day').valueOf();
const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
resp.result.map((item: any) => {
currentSource.value += parseFloat(item.value.toFixed(2));
});
};
/**
* 获取最近15天流量消耗统计图数据
*/
const get15DaysTrafficConsumption = async () => {
const beginTime = moment().subtract(15, 'days').startOf('day').valueOf();
const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
barChartData.value = resp.result
.map((item: any) => ({
...item,
}))
.reverse();
createBarChart();
};
/**
* 获取物联卡状态数据
*/
const getStateCard = async () => {
Promise.all(
pieChartData.value.map((item) => {
const params = {
terms: [
{
terms: [
{
column: 'cardStateType',
termType: 'eq',
value: item.key,
},
],
},
],
};
return list(params);
}),
)
.then((resp) => {
resp.forEach((i: any, index) => {
if (i.success) {
pieChartData.value[index].value = i.result.total;
}
});
createPieChart();
})
.catch((err) => {
console.log(err);
});
};
/**
* 最近15天流量消耗统计图
*/
const createBarChart = () => {
const myChart = echarts.init(proxy.$refs.todayFlowChart);
const options = {
tooltip: {},
xAxis: {
show: false,
data: barChartData.value.map((m) => m.date),
},
yAxis: {
show: false,
},
series: [
{
name: '流量消耗',
type: 'bar',
color: '#FACD89',
// barWidth: '5%', // 设单柱状置宽度
showBackground: true, //设置柱状的背景虚拟
data: barChartData.value.map((m) => parseFloat(m.value.toFixed(2))),
},
],
};
myChart.setOption(options);
window.addEventListener('resize', function () {
myChart.resize();
});
};
/**
* 物联卡饼图
*/
const createPieChart = () => {
nextTick(() => {
const myChart = echarts.init(proxy.$refs.iotCardChart);
const options = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)',
},
color: ['#85a5ff', '#f29b55', '#c4c4c4'],
series: [
{
name: '',
type: 'pie',
avoidLabelOverlap: true, //是否启用防止标签重叠策略
radius: ['50%', '90%'],
center: ['50%', '50%'],
itemStyle: {
borderColor: 'rgba(255,255,255,1)',
borderWidth: 2,
},
label: {
normal: {
show: false,
},
},
data: pieChartData.value,
},
],
};
myChart.setOption(options);
window.addEventListener('resize', function () {
myChart.resize();
});
});
};
watch(
barChartData.value,
() => {
createBarChart();
},
{ deep: true },
);
getTodayFlow();
get15DaysTrafficConsumption();
getStateCard();
</script>
<style scoped lang="less">
.home-base {
position: relative;
padding: 24px 16px;
background-color: #fff;
}
.home-guide {
margin-bottom: 24px;
padding: 24px 16px;
background-color: #fff;
.home-guide-items {
display: grid;
grid-column-gap: 56px;
}
}
.home-guide-item {
position: relative;
padding: 16px;
background: linear-gradient(
135.62deg,
#f6f7fd 22.27%,
rgba(255, 255, 255, 0.86) 91.82%
);
border-radius: 2px;
box-shadow: 0 4px 18px #efefef;
.state {
position: relative;
padding-left: 8px;
&::before {
position: absolute;
top: 7px;
left: 0;
display: inline-block;
width: 6px;
height: 6px;
margin-right: 2px;
content: '';
}
&.normal::before {
background: #85a5ff;
}
&.notActive::before {
background: #f29b55;
}
&.stopped::before {
background: #c4c4c4;
}
}
&.pointer {
cursor: pointer;
}
.item-english {
color: #4f4f4f;
}
.item-content {
display: flex;
margin-top: 15px;
width: 80%;
}
.item-node {
min-width: 58px;
margin-right: 8px;
z-index: 1;
.item-node-text {
font-size: 14px;
font-weight: bold;
}
}
.item-title {
margin: 20px 0;
color: @text-color;
font-weight: 700;
font-size: 20px;
}
.item-index {
position: absolute;
right: 10%;
bottom: 0;
}
.item-index-echarts {
.item-index;
right: 12px;
bottom: 5%;
z-index: 0;
width: 50%;
.chart {
width: 100%;
height: 100%;
}
}
}
.home-body {
.home-base;
min-height: 444px;
margin-bottom: 24px;
// padding-bottom: 26.5%;
padding-bottom: 30%;
overflow: hidden;
border-bottom: 1px solid #2f54eb;
.home-body-img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
> img {
width: 100%;
height: 100%;
}
}
}
.home-statistics {
.home-base;
.extra-text {
cursor: pointer;
color: @primary-color;
}
.home-statistics-body {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
.step-item-after {
position: absolute;
top: 50%;
right: -60px;
width: 60px;
height: 40px;
transform: translateY(-50%);
content: ' ';
}
.home-step {
.home-base;
.home-step-items {
display: grid;
grid-column-gap: 66px;
.step-item {
display: flex;
flex-direction: column;
.step-item-title {
position: relative;
padding: 16px 24px;
color: #333;
font-weight: bold;
font-size: 14px;
background-color: #f8f9fd;
cursor: pointer;
.step-item-img {
position: absolute;
top: 0;
right: 0;
z-index: 1;
height: 100%;
img {
height: 100%;
}
}
> span {
position: relative;
z-index: 2;
}
}
.step-item-content {
flex-grow: 1;
height: auto;
padding: 24px;
border-right: 1px solid #e5edf4;
border-bottom: 1px solid #e5edf4;
border-left: 1px solid #e5edf4;
}
}
}
}
.step-bar {
position: relative;
&.arrow-1 {
&:not(:last-child) {
&::after {
.step-item-after;
background: url('/images/home/arrow-1.png') no-repeat center;
}
}
}
&.arrow-2 {
&:not(:last-child) {
&::after {
.step-item-after;
background: url('/images/home/arrow-2.png') no-repeat center;
}
}
}
}
</style>

55
src/views/iot-card/components/Guide.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<div class="home-title">
<div>{{ title }}</div>
<div class="extra-text">
<slot name="extra"></slot>
</div>
<div class="home-title-english">{{ english }}</div>
</div>
</template>
<script setup lang="ts" name="Guide">
interface guideProps {
title: string;
english?: string;
}
const props = defineProps<guideProps>();
</script>
<style scoped lang="less">
.home-title {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
margin-bottom: 12px;
padding-left: 18px;
font-weight: 700;
font-size: 18px;
&::after {
position: absolute;
top: 50%;
left: 0;
width: 8px;
height: 8px;
background-color: @primary-color;
border: 1px solid #b4c0da;
transform: translateY(-50%);
content: ' ';
}
.extra-text {
font-size: 14px;
font-weight: 400;
}
.home-title-english {
position: absolute;
top: 30px;
color: rgba(0, 0, 0, 0.3);
font-size: 12px;
}
}
</style>

203
src/views/system/apiPage/components/ApiDoes.vue
View File

@ -8,27 +8,27 @@
</div>
</div>
<p style="display: flex; justify-content: space-between">
<p>
<span class="label">请求数据类型</span>
<span class="value">{{
<span>{{
getContent(selectApi.requestBody) ||
'application/x-www-form-urlencoded'
}}</span>
<span class="label">响应数据类型</span>
<span class="value">{{ `["/"]` }}</span>
<span>{{ `["/"]` }}</span>
</p>
<div class="api-card">
<h5>请求参数</h5>
<div class="content">
<JTable
:columns="columns.request"
:dataSource="selectApi.parameters"
:columns="requestCard.columns"
:dataSource="requestCard.tableData"
noPagination
model="TABLE"
>
<template #required="slotProps">
<span>{{ slotProps.row.required + '' }}</span>
<span>{{ Boolean(slotProps.row.required) + '' }}</span>
</template>
<template #type="slotProps">
<span>{{ slotProps.row.schema.type }}</span>
@ -36,6 +36,39 @@
</JTable>
</div>
</div>
<div class="api-card">
<h5>响应状态</h5>
<div class="content">
<JTable
:columns="responseStatusCard.columns"
:dataSource="responseStatusCard.tableData"
noPagination
model="TABLE"
>
</JTable>
<a-tabs v-model:activeKey="responseStatusCard.activeKey">
<a-tab-pane
:key="key"
:tab="key"
v-for="key in tabs"
></a-tab-pane>
</a-tabs>
</div>
</div>
<div class="api-card">
<h5>响应参数</h5>
<div class="content">
<JTable
:columns="respParamsCard.columns"
:dataSource="respParamsCard.tableData"
noPagination
model="TABLE"
>
</JTable>
</div>
</div>
</div>
</template>
@ -49,11 +82,21 @@ const props = defineProps({
type: Object as PropType<apiDetailsType>,
required: true,
},
schemas: {
type: Object,
required: true,
},
});
const { selectApi } = toRefs(props);
const columns = {
request: [
type tableCardType = {
columns: object[];
tableData: object[];
activeKey?: any;
getData?: any;
};
const requestCard = reactive<tableCardType>({
columns: [
{
title: '参数名',
dataIndex: 'name',
@ -82,13 +125,136 @@ const columns = {
scopedSlots: true,
},
],
};
tableData: [],
getData: () => {
requestCard.tableData = props.selectApi.parameters;
},
});
const responseStatusCard = reactive<tableCardType>({
activeKey: '',
columns: [
{
title: '状态码',
dataIndex: 'code',
key: 'code',
},
{
title: '说明',
dataIndex: 'desc',
key: 'desc',
},
{
title: 'schema',
dataIndex: 'schema',
key: 'schema',
},
],
tableData: [],
getData: () => {
if (!Object.keys(props.selectApi.responses).length)
return (responseStatusCard.tableData = []);
const tableData = <any>[];
Object.entries(props.selectApi.responses || {}).forEach((item: any) => {
const desc = item[1].description;
const schema = item[1].content['*/*'].schema.$ref?.split('/') || '';
tableData.push({
code: item[0],
desc,
schema: schema && schema.pop(),
});
});
responseStatusCard.activeKey = tableData[0]?.code;
responseStatusCard.tableData = tableData;
},
});
const tabs = computed(() =>
responseStatusCard.tableData
.map((item: any) => item.code + '')
.filter((code: string) => code !== '400'),
);
const respParamsCard = reactive<tableCardType>({
columns: [
{
title: '参数名称',
dataIndex: 'paramsName',
},
{
title: '参数说明',
dataIndex: 'desc',
},
{
title: '类型',
dataIndex: 'paramsType',
},
],
tableData: [],
getData: (code: string) => {
type schemaObjType = {
paramsName: string;
paramsType: string;
desc: string;
children?: schemaObjType[];
};
const schemaName = responseStatusCard.tableData.find(
(item: any) => item.code === code,
).schema;
const schemas = toRaw(props.schemas);
function findData(schemaName: string) {
if (!schemaName || !schemas[schemaName]) {
return [];
}
const result: schemaObjType[] = [];
const schema = schemas[schemaName];
const basicType = ['string', 'integer', 'boolean'];
Object.entries(schema.properties).forEach((item: [string, any]) => {
const paramsType =
item[1].type ||
(item[1].$ref && item[1].$ref.split('/').pop()) ||
(item[1].items && item[1].items.$ref.split('/').pop()) ||
'';
const schemaObj: schemaObjType = {
paramsName: item[0],
paramsType,
desc: item[1].description || '',
};
if (!basicType.includes(paramsType))
schemaObj.children = findData(paramsType);
result.push(schemaObj);
});
console.log(result);
return result;
}
respParamsCard.tableData = findData(schemaName);
// console.log(respParamsCard.tableData);
},
});
console.log(selectApi.value);
const getContent = (data: any) => {
if (!data) return '';
return Object.keys(data.content)[0];
if (data && data.content) {
return Object.keys(data.content || {})[0];
}
return '';
};
onMounted(() => {
requestCard.getData();
responseStatusCard.getData();
});
watch(
() => props.selectApi,
() => {
requestCard.getData();
responseStatusCard.getData();
},
);
watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
n[0] && respParamsCard.getData(n[0]);
});
</script>
<style lang="less" scoped>
@ -103,13 +269,25 @@ const getContent = (data: any) => {
.input {
display: flex;
margin: 24px 0;
}
}
p {
display: flex;
justify-content: space-between;
font-size: 14px;
.label {
font-weight: bold;
}
}
.api-card {
margin-top: 24px;
h5 {
position: relative;
padding-left: 10px;
font-weight: 600;
font-size: 16px;
&::before {
position: absolute;
@ -125,7 +303,6 @@ const getContent = (data: any) => {
.content {
padding-left: 10px;
:deep(.jtable-body) {
padding: 0;

11
src/views/system/apiPage/components/ApiTest.vue
View File

@ -5,6 +5,7 @@
<div class="input">
<InputCard :value="selectApi.method" />
<a-input :value="selectApi?.url" disabled />
<span class="send">发送</span>
</div>
</div>
</div>
@ -36,7 +37,15 @@ const { selectApi } = toRefs(props);
.input {
display: flex;
.send {
width: 65px;
padding: 4px 15px;
font-size: 14px;
color: #fff;
background-color: #1890ff;
}
}
}
}
</style>
</style>

6
src/views/system/apiPage/components/ChooseApi.vue
View File

@ -43,9 +43,9 @@ const columns = [
},
];
const rowSelection: TableProps['rowSelection'] = {
// onChange: (selectedRowKeys, selectedRows) => {
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
// },
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
};
const jump = (row:object) => {

3
src/views/system/apiPage/components/LeftTree.vue
View File

@ -32,13 +32,14 @@ const getTreeData = () => {
Promise.all(allPromise).then((values) => {
values.forEach((item: any, i) => {
tree[i].children = combData(item?.paths);
tree[i].schemas = item.components.schemas
});
treeData.value = tree;
});
});
};
const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
emits('select', node.node.dataRef);
emits('select', node.node.dataRef, node.node?.parent.node.schemas);
};
onMounted(() => {

5
src/views/system/apiPage/index.d.ts vendored
View File

@ -1,9 +1,11 @@
export type treeNodeTpye = {
name: string;
key: string;
schemas?:object;
link?: string;
apiList?: object[];
children?: treeNodeTpye[];
};
export type methodType = {
[key: string]: object
@ -17,6 +19,7 @@ export type apiDetailsType = {
url: string;
method: string;
summary: string;
parameters: [];
parameters: any[];
requestBody?: any;
responses:object;
}

13
src/views/system/apiPage/index.vue
View File

@ -15,12 +15,12 @@
class="api-details"
v-show="selectedApi.url && tableData.length > 0"
>
<a-button @click="selectedApi = initSelectedApi"
<a-button @click="selectedApi = initSelectedApi" style="margin-bottom: 24px;"
>返回</a-button
>
<a-tabs v-model:activeKey="activeKey" type="card">
<a-tab-pane key="does" tab="文档">
<ApiDoes :select-api="selectedApi" />
<ApiDoes :select-api="selectedApi" :schemas="schemas" />
</a-tab-pane>
<a-tab-pane key="test" tab="调试">
<ApiTest :select-api="selectedApi" />
@ -40,7 +40,8 @@ import ApiDoes from './components/ApiDoes.vue';
import ApiTest from './components/ApiTest.vue';
const tableData = ref([]);
const treeSelect = (node: treeNodeTpye) => {
const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
schemas.value = nodeSchemas
if (!node.apiList) return;
const apiList: apiObjType[] = node.apiList as apiObjType[];
const table: any = [];
@ -61,10 +62,14 @@ const treeSelect = (node: treeNodeTpye) => {
};
const activeKey = ref('does');
const initSelectedApi = {
const schemas = ref({});
const initSelectedApi:apiDetailsType = {
url: '',
method: '',
summary: '',
parameters: [],
responses: {},
requestBody: {}
};
const selectedApi = ref<apiDetailsType>(initSelectedApi);