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

Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

This commit is contained in:
JiangQiming 2023-01-13 11:49:39 +08:00
parent 5323a10c82 e01ab75de9
commit 83c75f1ae6
34 changed files with 6143 additions and 4446 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -29,7 +29,8 @@
"unplugin-auto-import": "^0.12.1", "unplugin-auto-import": "^0.12.1",
"unplugin-vue-components": "^0.22.12", "unplugin-vue-components": "^0.22.12",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-router": "^4.1.6" "vue-router": "^4.1.6",
"vue3-markdown-it": "^1.0.10"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^17.4.1", "@commitlint/cli": "^17.4.1",

10
src/api/device/instance.ts
View File

@ -1,4 +1,5 @@
import server from '@/utils/request' import server from '@/utils/request'
import { DeviceInstance } from '@/views/device/instance/typings'
/** /**
* 删除设备物模型 * 删除设备物模型
@ -13,4 +14,11 @@ export const deleteMetadata = (deviceId: string) => server.remove(`/device-insta
* @param data 物模型 * @param data 物模型
* @returns * @returns
*/ */
export const saveMetadata = (id: string, data: string) => server.put(`/device/instance/${id}/metadata`, data) export const saveMetadata = (id: string, data: string) => server.put(`/device/instance/${id}/metadata`, data)
/**
* 根据设备ID获取设备详情
* @param id 设备ID
* @returns 设备详情
*/
export const detail = (id: string) => server.get<DeviceInstance>(`/device-instance/${id}/detail`)

17
src/api/device/product.ts
View File

@ -1,5 +1,5 @@
import server from '@/utils/request' import server from '@/utils/request'
import type { DeviceMetadata } from '@/views/device/Product/typings' import { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
/** /**
* 根据条件查询产品（不带翻页） * 根据条件查询产品（不带翻页）
@ -23,4 +23,17 @@ export const convertMetadata = (direction: 'from' | 'to', type: string, data: an
* @param data 产品数据 * @param data 产品数据
* @returns * @returns
*/ */
export const modify = (id: string, data: any) => server.put(`/device-product/${id}`, data) export const modify = (id: string, data: any) => server.put(`/device-product/${id}`, data)
/**
*
* @returns
*/
export const getCodecs = () => server.get<{id: string, name: string}>('/device/product/metadata/codecs')
/**
* 根据产品ID获取产品详情
* @param id 产品ID
* @returns
*/
export const detail = (id: string) => server.get<ProductItem>(`/device-product/${id}`)

38
src/api/initHome.ts
View File

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

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

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

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

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

3
src/global.d.ts vendored
View File

@ -9,4 +9,5 @@ declare module '*.jpeg';
declare module '*.gif'; declare module '*.gif';
declare module '*.bmp'; declare module '*.bmp';
declare module '*.js'; 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', path: '/link/accessConfig/detail/add',
component: () => import('@/views/link/AccessConfig/Detail/index.vue') component: () => import('@/views/link/AccessConfig/Detail/index.vue')
}, },
// system 系统管理
{
path:'/system/api',
components: ()=>import('@/views/system/apiPage/index')
},
// 初始化 // 初始化
{ {
path: '/init-home', path: '/init-home',
component: () => import('@/views/init-home/index.vue') component: () => import('@/views/init-home/index.vue')
},
// 物联卡 iot-card
{
path: '/iot-card/home',
component: () => import('@/views/iot-card/Home/index.vue')
}, },
] ]

9
src/store/instance.ts
View File

@ -1,7 +1,12 @@
import { InstanceModel } from "@/views/device/instance/typings"; import { DeviceInstance, InstanceModel } from "@/views/device/instance/typings";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
export const useInstanceStore = defineStore({ export const useInstanceStore = defineStore({
id: 'device', id: 'device',
state: () => ({} as InstanceModel), state: () => ({} as InstanceModel),
}); actions: {
setCurrent(current: Partial<DeviceInstance>) {
this.current = current
}
}
})

14
src/store/product.ts Normal file
View File

@ -0,0 +1,14 @@
import { ProductItem } from "@/views/device/Product/typings";
import { defineStore } from "pinia";
export const useProductStore = defineStore({
id: 'product',
state: () => ({
current: {} as ProductItem | undefined
}),
actions: {
setCurrent(current: ProductItem) {
this.current = current
}
}
})

51
src/utils/consts.ts
View File

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

21
src/utils/utils.ts Normal file
View File

@ -0,0 +1,21 @@
/**
* 把数据下载成JSON
* @param record
* @param fileName
*/
export const downloadObject = (record: Record<string, any>, fileName: string, format?: string) => {
// 创建隐藏的可下载链接
const ghostLink = document.createElement('a');
ghostLink.download = `${fileName ? '' : record?.name}${fileName}_${moment(new Date()).format(
format || 'YYYY_MM_DD',
)}.json`;
ghostLink.style.display = 'none';
//字符串内容转成Blob地址
const blob = new Blob([JSON.stringify(record)]);
ghostLink.href = URL.createObjectURL(blob);
//触发点击
document.body.appendChild(ghostLink);
ghostLink.click();
//移除
document.body.removeChild(ghostLink);
};

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

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

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

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

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

@ -3,7 +3,7 @@
<a-modal <a-modal
v-model:visible="visible" v-model:visible="visible"
title="选择产品" title="选择产品"
style="width: 700px" style="width: 1000px"
@ok="handleOk" @ok="handleOk"
:getContainer="getContainer" :getContainer="getContainer"
:maskClosable="false" :maskClosable="false"
@ -11,34 +11,31 @@
<div class="search"> <div class="search">
<a-select <a-select
v-model:value="form.key" v-model:value="form.key"
style="width: 100%" style="width: 100px;margin-right: 20px;"
:options="productList" :options="productList"
/> />
<a-select <a-select
v-model:value="form.relation" v-model:value="form.relation"
style="width: 100%" style="width: 100px;margin-right: 20px;"
:options="productList" :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> <template #icon><SearchOutlined /></template>
搜索 搜索
</a-button> </a-button>
<a-button type="primary" @click="clickReset"> <a-button @click="clickReset">
<template #icon><reload-outlined /></template> <template #icon><reload-outlined /></template>
重置 重置
</a-button> </a-button>
</div> </div>
<JTable :columns="columns"> <JTable :columns="columns" model="TABLE"> </JTable>
</JTable>
<template #footer> <template #footer>
<a-button key="back" @click="visible = false">取消</a-button> <a-button key="back" @click="visible = false
<a-button key="submit" type="primary" @click="handleOk" ">取消</a-button>
>确认</a-button <a-button key="submit" type="primary" @click="handleOk">确认</a-button>
>
</template> </template>
</a-modal> </a-modal>
</template> </template>
@ -65,10 +62,10 @@ const handleOk = () => {
watch( watch(
() => props.openNumber, () => props.openNumber,
() => { () => {
visible.value = true;
clickReset(); clickReset();
getOptions(); getOptions();
clickSearch(); clickSearch();
visible.value = true;
}, },
); );
@ -122,4 +119,11 @@ const selectItem: deviceInfo | {} = {};
const getList = () => {}; const getList = () => {};
</script> </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 /> --> <!-- <InitHome /> -->
<!-- <DeviceHome /> --> <!-- <DeviceHome /> -->
<!-- <DevOpsHome /> --> <!-- <DevOpsHome /> -->
<!-- <ComprehensiveHome /> --> <ComprehensiveHome />
<ApiPage />
</div> </div>
</div> </div>
</template> </template>
@ -17,7 +16,6 @@ import InitHome from './components/InitHome/index.vue';
import DeviceHome from './components/DeviceHome/index.vue'; import DeviceHome from './components/DeviceHome/index.vue';
import DevOpsHome from './components/DevOpsHome/index.vue'; import DevOpsHome from './components/DevOpsHome/index.vue';
import ComprehensiveHome from './components/ComprehensiveHome/index.vue'; import ComprehensiveHome from './components/ComprehensiveHome/index.vue';
import ApiPage from '@/views/system/apiPage/index.vue'
</script> </script>

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

@ -6,7 +6,7 @@ export interface modalState {
port: string; // 本地端口 port: string; // 本地端口
publicHost: string; // 公网地址 publicHost: string; // 公网地址
publicPort: number | null; // 公网端口 publicPort: number | null; // 公网端口
rules: Record<string, Rule[]>;
} }
/**基本信息表单 */ /**基本信息表单 */
@ -21,17 +21,26 @@ export interface formState {
} }
/** /**
* logo上传表单 * 图片上传表单
*/ */
export interface logoState { export interface logoState {
logoValue: string; logoValue: string;
logoLoading: boolean; logoLoading: boolean;
backLoading: boolean;
iconLoading: boolean;
inLogo: boolean; inLogo: boolean;
inIcon: boolean; inIcon: boolean;
inBackground: boolean; inBackground: boolean;
iconValue: string; iconValue: string;
backValue: string; backValue: string;
backSize: number;
logoSize: number;
imageTypes:Array<string>;
iconTypes: Array<string>,
beforeLogoUpload:(file: UploadProps['beforeUpload']) => void
handleChangeLogo:(info: UploadChangeParam ) => void handleChangeLogo:(info: UploadChangeParam ) => void
beforeBackUpload:(file: UploadProps['beforeUpload']) => void beforeBackUpload:(file: UploadProps['beforeUpload']) => void
changeBackUpload:(info: UploadChangeParam ) => 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" class="upload-image-border-logo"
> >
<a-upload <a-upload
name="file"
:action="
action
"
:headers="
headers
"
:showUploadList=" :showUploadList="
false false
" "
:beforeUpload="
beforeLogoUpload
"
@change=" @change="
handleChangeLogo handleChangeLogo
" "
:accept="
imageTypes &&
imageTypes.length
? imageTypes.toString()
: ''
"
> >
<div <div
class="upload-image-content-logo" class="upload-image-content-logo"
> >
<div
class="loading-logo"
v-if="
logoLoading
"
>
<LoadingOutlined
style="
font-size: 28px;
"
/>
</div>
<div <div
class="upload-image" class="upload-image"
v-if=" v-if="
@ -166,7 +194,6 @@
</a-upload> </a-upload>
<div <div
v-if=" v-if="
logoValue &&
logoLoading logoLoading
" "
> >
@ -223,10 +250,45 @@
<div <div
class="upload-image-border-logo" 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 <div
class="upload-image-content-logo" class="upload-image-content-logo"
> >
<div
v-if="
iconLoading
"
class="loading-icon"
>
<LoadingOutlined
style="
font-size: 28px;
"
/>
</div>
<div <div
class="upload-image-icon" class="upload-image-icon"
v-if=" v-if="
@ -249,20 +311,7 @@
<div <div
v-else v-else
> >
<div <div>
v-if="
logoLoading
"
>
<LoadingOutlined
style="
font-size: 28px;
"
/>
</div>
<div
v-else
>
<PlusOutlined <PlusOutlined
style=" style="
font-size: 28px; font-size: 28px;
@ -298,16 +347,40 @@
class="upload-image-border-back" class="upload-image-border-back"
> >
<a-upload <a-upload
@beforeUpload=" name="file"
:action="action"
:headers="headers"
:beforeUpload="
beforeBackUpload beforeBackUpload
" "
:showUploadList="
false
"
@change=" @change="
changeBackUpload changeBackUpload
" "
:accept="
imageTypes &&
imageTypes.length
? imageTypes.toString()
: ''
"
> >
<div <div
class="upload-image-content-back" class="upload-image-content-back"
> >
<div
v-if="
backLoading
"
class="loading-back"
>
<LoadingOutlined
style="
font-size: 28px;
"
/>
</div>
<div <div
class="upload-image" class="upload-image"
v-if=" v-if="
@ -328,18 +401,7 @@
点击修改 点击修改
</div> </div>
<div v-else> <div v-else>
<div <div>
v-if="
logoLoading
"
>
<LoadingOutlined
style="
font-size: 28px;
"
/>
</div>
<div v-else>
<PlusOutlined <PlusOutlined
style=" style="
font-size: 28px; font-size: 28px;
@ -349,6 +411,11 @@
</div> </div>
</div> </div>
</a-upload> </a-upload>
<!-- <div v-if="logoValue">
<div v-if="logoLoading">
<div class="upload-loading-mask"></div>
</div>
</div> -->
</div> </div>
</div> </div>
<div class="upload-tips"> <div class="upload-tips">
@ -499,7 +566,7 @@
width="52vw" width="52vw"
:maskClosable="false" :maskClosable="false"
@cancel="cancel" @cancel="cancel"
@ok="handleOk" @ok="saveCurrentData"
okText="确定" okText="确定"
cancelText="取消" cancelText="取消"
class="modal-style" class="modal-style"
@ -516,10 +583,10 @@
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<a-form <a-form
:model="ModalForm" layout="vertical"
:validate-messages="message" :model="modalForm"
ref="formRef" ref="formRef"
:rules="rules" :rules="rulesModle"
> >
<a-row :span="24" :gutter="24"> <a-row :span="24" :gutter="24">
<a-col :span="12"> <a-col :span="12">
@ -543,7 +610,7 @@
</template> </template>
<a-input <a-input
v-model:value=" v-model:value="
ModalForm.host modalForm.host
" "
:disabled="true" :disabled="true"
/> />
@ -570,7 +637,7 @@
</template> </template>
<a-input <a-input
v-model:value=" v-model:value="
ModalForm.publicHost modalForm.publicHost
" "
> >
</a-input> </a-input>
@ -597,9 +664,23 @@
</template> </template>
<a-select <a-select
v-model:value=" 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>
<a-form-item <a-form-item
name="publicPort" name="publicPort"
@ -623,7 +704,7 @@
</template> </template>
<a-input-number <a-input-number
v-model:value=" v-model:value="
ModalForm.publicPort modalForm.publicPort
" "
style="width: 100%" style="width: 100%"
/> />
@ -640,6 +721,7 @@
type="primary" type="primary"
class="btn-style" class="btn-style"
@click="submitData" @click="submitData"
:loading="isSucessBasic || isSucessInit || isSucessRole"
>确定</a-button >确定</a-button
> >
</div> </div>
@ -654,19 +736,38 @@ import {
ExclamationCircleOutlined, ExclamationCircleOutlined,
LoadingOutlined, LoadingOutlined,
} from '@ant-design/icons-vue'; } 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 { Rule } from 'ant-design-vue/es/form';
import type { import type {
FormInstance, FormInstance,
UploadChangeParam, UploadChangeParam,
UploadProps, UploadProps,
Form,
} from 'ant-design-vue'; } from 'ant-design-vue';
import { modalState, formState, logoState } from './data/interface'; import { modalState, formState, logoState } from './data/interface';
import BaseMenu from './data/baseMenu'; 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 formRef = ref();
const menuRef = 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('请输入公网地址'); return Promise.reject('请输入公网地址');
} else { } else {
var reg = new RegExp( 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)) { if (!reg.test(value)) {
return Promise.reject('请输入正确的公网地址'); return Promise.reject('请输入正确的公网地址');
@ -731,44 +832,44 @@ const validateNumber = async (_rule: Rule, value: string) => {
return Promise.resolve(); return Promise.resolve();
} }
}; };
/** /**
* 初始化弹窗表单数据 * 初始化弹窗表单数据
*/ */
const ModalForm = reactive<modalState>({ const modalForm = reactive<modalState>({
host: '0.0.0.0', host: '0.0.0.0',
port: '', port: '',
publicHost: '', publicHost: '',
publicPort: null, 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 spinning = ref<boolean>(false);
const visible = ref<boolean>(false); const visible = ref<boolean>(false);
const flag = 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>({ const logoData = reactive<logoState>({
logoValue: '/public/logo.png', logoValue: '/public/logo.png',
logoLoading: false, logoLoading: false,
backLoading: false,
iconLoading: false,
inLogo: false, inLogo: false,
inIcon: false, inIcon: false,
inBackground: false, inBackground: false,
backSize: 4,
logoSize: 1,
iconValue: '/public/favicon.ico', iconValue: '/public/favicon.ico',
backValue: '/public/images/login.png', 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) => { handleChangeLogo: (info) => {
if (info.file.status === 'uploading') { 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 { const {
logoValue, logoValue,
logoLoading, logoLoading,
iconLoading,
backLoading,
inLogo, inLogo,
iconValue, iconValue,
inIcon, inIcon,
inBackground, inBackground,
backValue, backValue,
handleChangeLogo, handleChangeLogo,
beforeBackUpload,
changeBackUpload,
beforeLogoUpload,
beforeIconUpload,
changeIconUpload,
imageTypes,
iconTypes,
} = toRefs(logoData); } = toRefs(logoData);
/** /**
* 提交基础表单 * 提交基础表单
*/ */
const basicData = reactive({ 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); const _count = menuDatas.menuCount(newTree);
menuDatas.count = _count; menuDatas.count = _count;
console.log(menuDatas.count, 'menuDatas.count');
} }
}, },
/** /**
@ -918,16 +1217,118 @@ const menuDatas = reactive({
}, 0); }, 0);
}, },
}); });
const { count } = toRefs(menuDatas); 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(); menuDatas.getSystemPermissionData();
initialization.getCurrentPort();
/** /**
* 提交所有数据 * 提交所有数据
*/ */
const submit = () => {}; const submitData = () => {
initialization.saveCurrentData();
roleData.addRoleData();
basicData.saveBasicInfo();
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.page-container { .page-container {
@ -1073,6 +1474,13 @@ const submit = () => {};
padding: 8px; padding: 8px;
background-color: rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.06);
cursor: pointer; cursor: pointer;
.loading-logo {
position: absolute;
top: 50%;
}
.loading-icon {
position: absolute;
}
.upload-image { .upload-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -1132,6 +1540,9 @@ const submit = () => {};
padding: 8px; padding: 8px;
background-color: rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.06);
cursor: pointer; cursor: pointer;
.loading-back {
position: absolute;
}
.upload-image { .upload-image {
width: 100%; width: 100%;
height: 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>

79
src/views/link/AccessConfig/Detail/index.vue
View File

@ -9,7 +9,8 @@
</div> </div>
<div v-else> <div v-else>
<div v-if="!id"><a @click="goBack">返回</a></div> <div v-if="!id"><a @click="goBack">返回</a></div>
<AccessNetwork :provider="provider" :data="data" /> <AccessNetwork v-if="showType==='network'" :provider="provider" :data="data" />
<Media v-if="showType==='media'" :provider="provider" :data="data" />
</div> </div>
</a-card> </a-card>
</a-spin> </a-spin>
@ -17,10 +18,11 @@
<script lang="ts" setup name="AccessConfigDetail"> <script lang="ts" setup name="AccessConfigDetail">
import { getImage } from '@/utils/comm'; import { getImage } from '@/utils/comm';
import TitleComponent from '@/components/TitleComponent/index.vue';
import AccessNetwork from '../components/Network.vue'; import AccessNetwork from '../components/Network.vue';
import Provider from '../components/Provider/index.vue'; import Provider from '../components/Provider/index.vue';
import { getProviders, detail } from '@/api/link/accessConfig'; import { getProviders, detail } from '@/api/link/accessConfig';
import Media from '../components/Media/index.vue';
// const router = useRouter(); // const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -32,10 +34,14 @@ const type = ref(false);
const loading = ref(true); const loading = ref(true);
const provider = ref({}); const provider = ref({});
const data = ref({}); const data = ref({});
const showType = ref('')
const goProviders = (param: object) => { const goProviders = (param: object) => {
showType.value = param.type
provider.value = param; provider.value = param;
type.value = false; type.value = false;
console.log(1123,showType.value,param);
}; };
const goBack = () => { const goBack = () => {
@ -46,10 +52,69 @@ const goBack = () => {
const queryProviders = async () => { const queryProviders = async () => {
const resp = await getProviders(); const resp = await getProviders();
if (resp.status === 200) { if (resp.status === 200) {
dataSource.value = resp.result.filter( const media: any[] = [];
(item) => const network: any[] = [];
item.channel === 'network' || item.channel === 'child-device', const cloud: any[] = [];
); const channel: any[] = [];
const edge: any[] = [];
resp.result.map((item) => {
if (item.id === 'fixed-media' || item.id === 'gb28181-2016') {
item.type='media'
media.push(item);
} else if (item.id === 'OneNet' || item.id === 'Ctwing') {
item.type='cloud'
cloud.push(item);
} else if (item.id === 'modbus-tcp' || item.id === 'opc-ua') {
item.type='channel'
channel.push(item);
} else if (
item.id === 'official-edge-gateway' ||
item.id === 'edge-child-device'
) {
item.type='edge'
edge.push(item);
} else {
item.type='network'
network.push(item);
}
});
const list = [];
if (network.length) {
list.push({
// type: 'network',
list: [...network],
title: '自定义设备接入',
});
}
if (media.length) {
list.push({
// type: 'media',
list: [...media],
title: '视频类设备接入',
});
}
if (cloud.length) {
list.push({
// type: 'cloud',
list: [...cloud],
title: '云平台接入',
});
}
if (channel.length) {
list.push({
// type: 'channel',
list: [...channel],
title: '通道类设备接入',
});
}
if (edge.length) {
list.push({
// type: 'edge',
list: [...edge],
title: '官方接入',
});
}
dataSource.value = list
} }
}; };

162
src/views/link/AccessConfig/components/AccessCard/index.vue
View File

@ -1,86 +1,106 @@
<template> <template>
<a-card hoverable :class="['card-render', checked === data.id ? 'checked' : '']" @click="checkedChange(data.id)"> <a-card
<div class="title"> hoverable
<a-tooltip placement="topLeft" :title="data.name">{{ data.name }}</a-tooltip> :class="['card-render', checked === data.id ? 'checked' : '']"
</div> @click="checkedChange(data.id)"
<slot name="other"></slot> >
<div class="desc"> <div class="title">
<a-tooltip placement="topLeft" :title="data.description">{{ data.description }}</a-tooltip> <a-tooltip placement="topLeft" :title="data.name">{{
</div> data.name
<div class="checked-icon"> }}</a-tooltip>
<div><a-icon type="check" /></div> </div>
</div> <slot name="other"></slot>
</a-card> <div class="desc">
<a-tooltip placement="topLeft" :title="data.description">{{
data.description
}}</a-tooltip>
</div>
<div class="checked-icon">
<div><a-icon type="check" /></div>
</div>
</a-card>
</template> </template>
<script> <script lang="ts" setup name="AccessCard">
export default {
name: "AccessCard",
props: ['data', 'checked'], const emit = defineEmits(['checkedChange']);
methods: {
checkedChange(id){ const props = defineProps({
this.$emit('checkedChange', id) checked: {
} type: Array,
} default: () => [],
}; },
data: {
type: Object,
default: () => {},
},
});
console.log(1112,props);
const checkedChange=(id:string)=>{
emit('checkedChange', id);
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.card-render { .card-render {
width: 100%;
overflow: hidden;
background: url("/public/images/access/access.png") no-repeat;
background-size: 100% 100%;
min-height: 105px;
.title {
width: calc(100% - 88px);
overflow: hidden;
font-weight: 800;
white-space: nowrap;
text-overflow: ellipsis;
}
.desc {
width: 100%; width: 100%;
margin-top: 10px;
color: rgba(0, 0, 0, 0.55);
font-weight: 400;
font-size: 13px;
overflow: hidden; overflow: hidden;
white-space: nowrap; background: url('/public/images/access.png') no-repeat;
text-overflow: ellipsis; background-size: 100% 100%;
} min-height: 105px;
.checked-icon { .title {
position: absolute; width: calc(100% - 88px);
right: -22px; overflow: hidden;
bottom: -22px; font-weight: 800;
z-index: 2; white-space: nowrap;
display: none; text-overflow: ellipsis;
width: 44px; }
height: 44px;
color: #fff; .desc {
background-color: red; width: 100%;
background-color: #2f54eb; margin-top: 10px;
transform: rotate(-45deg); color: rgba(0, 0, 0, 0.55);
font-weight: 400;
> div { font-size: 13px;
position: relative; overflow: hidden;
height: 100%; white-space: nowrap;
transform: rotate(45deg); text-overflow: ellipsis;
font-size: 12px;
padding: 4px 0 0 6px;
} }
}
&.checked {
position: relative;
color: #2f54eb;
border-color: #2f54eb;
.checked-icon { .checked-icon {
display: block; position: absolute;
right: -22px;
bottom: -22px;
z-index: 2;
display: none;
width: 44px;
height: 44px;
color: #fff;
background-color: red;
background-color: #2f54eb;
transform: rotate(-45deg);
> div {
position: relative;
height: 100%;
transform: rotate(45deg);
font-size: 12px;
padding: 4px 0 0 6px;
}
}
&.checked {
position: relative;
color: #2f54eb;
border-color: #2f54eb;
.checked-icon {
display: block;
}
} }
}
} }
</style> </style>

30
src/views/link/AccessConfig/components/Media/index.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div style="margin-top: 10px">
111
</div>
</template>
<script lang="ts" setup name="AccessMedia">
const props = defineProps({
provider: {
type: Object,
default: () => {},
},
data: {
type: Object,
default: () => {},
},
});
const channel = ref(props.provider.channel)
console.log(211,props);
</script>
<style lang="less" scoped>
</style>

490
src/views/link/AccessConfig/components/Network.vue
View File

@ -35,18 +35,34 @@
: descriptionList[provider.id], : descriptionList[provider.id],
}" }"
> >
<div slot="other" class="other"> <template #other>
<a-tooltip placement="topLeft"> <div class="other">
<div <a-tooltip placement="topLeft">
slot="title"
v-if="
(item.addresses || []).length >
1
"
>
<div <div
v-for="i in item.addresses || v-if="
[]" (item.addresses || [])
.length > 1
"
>
<div
v-for="i in item.addresses ||
[]"
:key="i.address"
class="item"
>
<a-badge
:color="
i.health === -1
? 'red'
: 'green'
"
/>{{ i.address }}
</div>
</div>
<div
v-for="i in (
item.addresses || []
).slice(0, 1)"
:key="i.address" :key="i.address"
class="item" class="item"
> >
@ -56,34 +72,19 @@
? 'red' ? 'red'
: 'green' : 'green'
" "
/>{{ i.address }} :text="i.address"
/>
<span
v-if="
(item.addresses || [])
.length > 1
"
>...</span
>
</div> </div>
</div> </a-tooltip>
<div </div>
v-for="i in ( </template>
item.addresses || []
).slice(0, 1)"
:key="i.address"
class="item"
>
<a-badge
:color="
i.health === -1
? 'red'
: 'green'
"
:text="i.address"
/>
<span
v-if="
(item.addresses || [])
.length > 1
"
>...</span
>
</div>
</a-tooltip>
</div>
</access-card> </access-card>
</a-col> </a-col>
</a-row> </a-row>
@ -130,37 +131,31 @@
<a-col :span="12"> <a-col :span="12">
<title-component data="基本信息" /> <title-component data="基本信息" />
<div> <div>
<a-form :form="form" layout="vertical"> <a-form
<a-form-item label="名称"> ref="formRef"
:model="form"
layout="vertical"
>
<a-form-item
label="名称"
v-bind="validateInfos.name"
>
<a-input <a-input
v-model:value="form.name"
allowClear allowClear
placeholder="请输入名称" placeholder="请输入名称"
v-decorator="[
'name',
{
initialValue: data.name,
rules: [
{
required: true,
message:
'请输入名称!',
},
],
},
]"
/> />
</a-form-item> </a-form-item>
<a-form-item label="说明"> <a-form-item
label="说明"
v-bind="validateInfos.description"
>
<a-textarea <a-textarea
placeholder="请输入说明" placeholder="请输入说明"
:rows="4" :rows="4"
v-decorator="[ v-model:value="form.description"
'description', show-count
{ :maxlength="200"
initialValue:
data.description,
},
]"
/> />
</a-form-item> </a-form-item>
</a-form> </a-form>
@ -194,7 +189,8 @@
class="config-right-item-context" class="config-right-item-context"
v-if="config.document" v-if="config.document"
> >
{{ config.document }} <Markdown :source="config.document" />
</div> </div>
</div> </div>
<div <div
@ -259,7 +255,7 @@
:scroll="{ y: 300 }" :scroll="{ y: 300 }"
> >
<template <template
slot="stream" #stream
slot-scope="text, record" slot-scope="text, record"
> >
<span <span
@ -292,7 +288,7 @@
> >
下一步 下一步
</a-button> </a-button>
<a-button v-if="current === 2" type="primary" @click="save"> <a-button v-if="current === 2" type="primary" @click="saveData">
保存 保存
</a-button> </a-button>
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev"> <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
@ -317,8 +313,63 @@ import {
ProtocolMapping, ProtocolMapping,
} from '../Detail/data'; } from '../Detail/data';
import AccessCard from './AccessCard/index.vue'; import AccessCard from './AccessCard/index.vue';
import TitleComponent from '@/components/TitleComponent/index.vue';
import { message, Form } from 'ant-design-vue'; import { message, Form } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import Markdown from 'vue3-markdown-it';
//测试数据1
const resultList1 = [
{
id: '1610466717670780928',
name: '官方协议',
},
{
id: '1610205217785524224',
name: 'demo协议',
},
{
id: '1610204985806958592',
name: '水压协议',
},
{
id: '1605459961693745152',
name: '测试设备诊断日志显示',
},
{
id: '1582302200020783104',
name: 'demo',
},
{
id: '1581839391887794176',
name: '海康闸机协议',
},
{
id: '1567062365030637568',
name: '协议20220906160914',
},
{
id: '1561650927208628224',
name: 'local',
},
];
//测试数据2
// const result2 = {
// id: 'UDP',
// name: 'UDP',
// features: [],
// routes: [],
// metadata: '',
// };
const result2 = {
"id": "MQTT",
"name": "MQTT",
"features": [],
"routes": [],
"document": "# MQTT认证说明\r\nCONNECT报文:\r\n```text\r\nclientId: 设备ID\r\nusername: secureId+\"|\"+timestamp\r\npassword: md5(secureId+\"|\"+timestamp+\"|\"+secureKey)\r\n ```\r\n\r\n说明: secureId以及secureKey在创建设备产品或设备实例时进行配置. \r\ntimestamp为当前系统时间戳(毫秒),与系统时间不能相差5分钟.\r\nmd5为32位,不区分大小写.",
"metadata": "{\"functions\":[],\"name\":\"test\",\"description\":\"测试用\",\"id\":\"test\",\"properties\":[{\"valueType\":{\"round\":\"HALF_UP\",\"type\":\"double\"},\"name\":\"温度\",\"id\":\"t\"},{\"valueType\":{\"round\":\"HALF_UP\",\"type\":\"int\"},\"name\":\"状态\",\"id\":\"state\"}],\"events\":[],\"tags\":[]}"
}
function generateUUID() { function generateUUID() {
var d = new Date().getTime(); var d = new Date().getTime();
@ -349,7 +400,8 @@ const props = defineProps({
}, },
}); });
const formRef = ref<FormInstance>();
const useForm = Form.useForm;
const current = ref(0); const current = ref(0);
const stepCurrent = ref(0); const stepCurrent = ref(0);
@ -362,13 +414,21 @@ const procotolCurrent = ref('');
let config = ref({}); let config = ref({});
let columnsMQTT = ref([]); let columnsMQTT = ref([]);
const form = reactive({ const form = reactive({
name: 'access', name: '',
description: '', description: '',
}); });
const { resetFields, validate, validateInfos } = useForm(
form,
reactive({
name: [
{ required: true, message: '请输入证书名称', trigger: 'blur' },
{ max: 64, message: '最多可输入64个字符' },
],
}),
);
const queryNetworkList = async (id: string, params: object, data = {}) => { const queryNetworkList = async (id: string, params: object, data = {}) => {
console.log('queryNetworkList',NetworkTypeMapping.get(id), data, params);
const resp = await getNetworkList(NetworkTypeMapping.get(id), data, params); const resp = await getNetworkList(NetworkTypeMapping.get(id), data, params);
if (resp.status === 200) { if (resp.status === 200) {
networkList.value = resp.result; networkList.value = resp.result;
@ -377,15 +437,19 @@ const queryNetworkList = async (id: string, params: object, data = {}) => {
// const queryProcotolList=async(id:string, params:object) =>{ // const queryProcotolList=async(id:string, params:object) =>{
const queryProcotolList = async (id: string, params = {}) => { const queryProcotolList = async (id: string, params = {}) => {
const resp = await getProtocolList(ProtocolMapping.get(id), { // const resp = await getProtocolList(ProtocolMapping.get(id), {
...params, // ...params,
'sorts[0].name': 'createTime', // 'sorts[0].name': 'createTime',
'sorts[0].order': 'desc', // 'sorts[0].order': 'desc',
}); // });
if (resp.status === 200) { // if (resp.status === 200) {
procotolList.value = resp.result; // procotolList.value = resp.result;
allProcotolList.value = resp.result; // allProcotolList.value = resp.result;
} // }
//使用测试数据1
procotolList.value = resultList1;
allProcotolList.value = resultList1;
}; };
const addNetwork = () => { const addNetwork = () => {
@ -424,21 +488,6 @@ const checkedChange = (id: string) => {
}; };
const networkSearch = (value: string) => { const networkSearch = (value: string) => {
console.log('networkSearch',
props.provider.id,
{
include: networkCurrent.value || '',
},
{
terms: [
{
column: 'name$LIKE',
value: `%${value}%`,
},
],
},
);
queryNetworkList( queryNetworkList(
props.provider.id, props.provider.id,
{ {
@ -475,31 +524,28 @@ const procotolSearch = (value: string) => {
}; };
const saveData = () => { const saveData = () => {
form.validateFields(async (err, values) => { validate()
if (!err) { .then(async (values) => {
let resp = undefined; let resp = undefined;
let params = {
...props.data,
...values,
protocol: procotolCurrent.value,
channel: 'network', // 网络组件
channelId: networkCurrent.value,
};
if (props.data && props.data.id) { if (props.data && props.data.id) {
resp = await update({ resp = await update(params);
...props.data,
name: values.name,
description: values.description,
protocol: procotolCurrent.value,
channel: 'network', // 网络组件
channelId: networkCurrent.value,
});
} else { } else {
resp = await save({ params = {
name: values.name, ...params,
description: values.description,
provider: props.provider.id, provider: props.provider.id,
protocol: procotolCurrent.value,
transport: transport:
props.provider?.id === 'child-device' props.provider?.id === 'child-device'
? 'Gateway' ? 'Gateway'
: ProtocolMapping.get(props.provider.id), : ProtocolMapping.get(props.provider.id),
channel: 'network', // 网络组件 };
channelId: networkCurrent.value, resp = await save(params);
});
} }
if (resp.status === 200) { if (resp.status === 200) {
message.success('操作成功！'); message.success('操作成功！');
@ -511,88 +557,139 @@ const saveData = () => {
// this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] }) // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
} }
} }
} })
}); .catch((err) => {});
}; };
const next = async () => { const next = async () => {
if (current.value === 0) { if (current.value === 0) {
if (!networkCurrent.value) { if (!networkCurrent.value) {
message.error('请选择网络组件！'); message.error('请选择网络组件！');
} else { } else {
queryProcotolList(props.provider.id); queryProcotolList(props.provider.id);
current.value -= current.value; current.value = current.value + 1;
} }
} else if (current.value === 1) { } else if (current.value === 1) {
if (!procotolCurrent.value) { if (!procotolCurrent.value) {
message.error('请选择消息协议！'); message.error('请选择消息协议！');
} else { } else {
const resp = //使用测试数据2
props.provider.channel !== 'child-device' config.value = result2;
? await getConfigView( current.value = current.value + 1;
procotolCurrent.value, columnsMQTT = [
ProtocolMapping.get(props.provider.id), {
) title: '分组',
: await getChildConfigView(procotolCurrent.value); dataIndex: 'group',
if (resp.status === 200) { key: 'group',
config.value = resp.result; ellipsis: true,
current.value += current.value; align: 'center',
columnsMQTT = [ width: 100,
{ customRender: (value, row, index) => {
title: '分组', const obj = {
dataIndex: 'group', children: value,
key: 'group', attrs: {},
ellipsis: true, };
align: 'center', const list = (config && config.routes) || [];
width: 100, const arr = list.filter((res) => {
customRender: (value, row, index) => { return res.group == row.group;
const obj = { });
children: value, if (index == 0 || list[index - 1].group !== row.group) {
attrs: {}, obj.attrs.rowSpan = arr.length;
}; } else {
const list = (config && config.routes) || []; obj.attrs.rowSpan = 0;
const arr = list.filter((res) => { }
return res.group == row.group; return obj;
});
if (
index == 0 ||
list[index - 1].group !== row.group
) {
obj.attrs.rowSpan = arr.length;
} else {
obj.attrs.rowSpan = 0;
}
return obj;
},
}, },
{ },
title: 'topic', {
dataIndex: 'topic', title: 'topic',
key: 'topic', dataIndex: 'topic',
ellipsis: true, key: 'topic',
}, ellipsis: true,
{ },
title: '上下行', {
dataIndex: 'stream', title: '上下行',
key: 'stream', dataIndex: 'stream',
ellipsis: true, key: 'stream',
align: 'center', ellipsis: true,
width: 100, align: 'center',
scopedSlots: { customRender: 'stream' }, width: 100,
}, scopedSlots: { customRender: 'stream' },
{ },
title: '说明', {
dataIndex: 'description', title: '说明',
key: 'description', dataIndex: 'description',
ellipsis: true, key: 'description',
}, ellipsis: true,
]; },
} ];
// const resp =
// props.provider.channel !== 'child-device'
// ? await getConfigView(
// procotolCurrent.value,
// ProtocolMapping.get(props.provider.id),
// )
// : await getChildConfigView(procotolCurrent.value);
// if (resp.status === 200) {
// config.value = resp.result;
// current.value = current.value + 1;
// columnsMQTT = [
// {
// title: '分组',
// dataIndex: 'group',
// key: 'group',
// ellipsis: true,
// align: 'center',
// width: 100,
// customRender: (value, row, index) => {
// const obj = {
// children: value,
// attrs: {},
// };
// const list = (config && config.routes) || [];
// const arr = list.filter((res) => {
// return res.group == row.group;
// });
// if (
// index == 0 ||
// list[index - 1].group !== row.group
// ) {
// obj.attrs.rowSpan = arr.length;
// } else {
// obj.attrs.rowSpan = 0;
// }
// return obj;
// },
// },
// {
// title: 'topic',
// dataIndex: 'topic',
// key: 'topic',
// ellipsis: true,
// },
// {
// title: '上下行',
// dataIndex: 'stream',
// key: 'stream',
// ellipsis: true,
// align: 'center',
// width: 100,
// scopedSlots: { customRender: 'stream' },
// },
// {
// title: '说明',
// dataIndex: 'description',
// key: 'description',
// ellipsis: true,
// },
// ];
// }
} }
} }
}; };
const prev = () => { const prev = () => {
const currentValue = current.value; current.value = current.value - 1;
current.value -= currentValue;
}; };
onMounted(() => { onMounted(() => {
@ -601,10 +698,6 @@ onMounted(() => {
procotolCurrent.value = props.data.protocol; procotolCurrent.value = props.data.protocol;
current.value = 0; current.value = 0;
networkCurrent.value = props.data.channelId; networkCurrent.value = props.data.channelId;
console.log(11111111,props.provider.id, {
include: networkCurrent.value,
});
queryNetworkList(props.provider.id, { queryNetworkList(props.provider.id, {
include: networkCurrent.value, include: networkCurrent.value,
}); });
@ -618,18 +711,12 @@ onMounted(() => {
} else { } else {
if (props.provider?.id) { if (props.provider?.id) {
if (props.provider.channel !== 'child-device') { if (props.provider.channel !== 'child-device') {
console.log(3333333, props.provider.id, {
include: '',
});
queryNetworkList(props.provider.id, { queryNetworkList(props.provider.id, {
include: '', include: '',
}); });
steps.value = ['网络组件', '消息协议', '完成']; steps.value = ['网络组件', '消息协议', '完成'];
current.value = 0; current.value = 0;
} else { } else {
console.log(444444,props.provider.id);
steps.value = ['消息协议', '完成']; steps.value = ['消息协议', '完成'];
current.value = 1; current.value = 1;
queryProcotolList(props.provider.id); queryProcotolList(props.provider.id);
@ -638,25 +725,20 @@ onMounted(() => {
} }
}); });
// watch( watch(
// () => props.modelValue, current,
// (v) => { (v) => {
// keystoreBase64.value = v; if (props.provider.channel !== 'child-device') {
// }, stepCurrent.value = v;
// { } else {
// deep: true, stepCurrent.value = v - 1;
// immediate: true, }
// }, },
// ); {
// watch: { deep: true,
// current(val) { immediate: true,
// if (this.provider.channel !== 'child-device') { },
// this.stepCurrent = val );
// } else {
// this.stepCurrent = val - 1
// }
// },
// },
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

60
src/views/link/AccessConfig/components/Provider/index.vue
View File

@ -1,34 +1,36 @@
<template> <template>
<TitleComponent data="自定义设备接入"></TitleComponent> <div v-for="items in dataSource" :key="items.type">
<div> <a-card class="card-items">
<a-row :gutter="[24, 24]"> <TitleComponent :data="items.title"></TitleComponent>
<a-col :span="12" v-for="item in dataSource" :key="item.id"> <a-row :gutter="[24, 24]">
<div class="provider"> <a-col :span="12" v-for="item in items.list" :key="item.id">
<div class="box"> <div class="provider">
<div class="left"> <div class="box">
<div class="images"> <div class="left">
<img :src="backMap.get(item.id)" /> <div class="images">
</div> <img :src="backMap.get(item.id)" />
<div class="context">
<div class="title">
{{ item.name }}
</div> </div>
<div class="desc"> <div class="context">
<a-tooltip :title="item.description"> <div class="title">
{{ item.description || '' }} {{ item.name }}
</a-tooltip> </div>
<div class="desc">
<a-tooltip :title="item.description">
{{ item.description || '' }}
</a-tooltip>
</div>
</div> </div>
</div> </div>
</div> <div class="right">
<div class="right"> <a-button type="primary" @click="click(item)"
<a-button type="primary" @click="click(item)" >接入</a-button
>接入</a-button >
> </div>
</div> </div>
</div> </div>
</div> </a-col>
</a-col> </a-row>
</a-row> </a-card>
</div> </div>
</template> </template>
@ -38,8 +40,8 @@ import { getImage } from '@/utils/comm';
const props = defineProps({ const props = defineProps({
dataSource: { dataSource: {
type: Array, type: Object,
default: () => [], default: () => {},
}, },
}); });
@ -66,10 +68,12 @@ backMap.set('official-edge-gateway', getImage('/access/edge.png'));
const click = (value: object) => { const click = (value: object) => {
emit('onClick', value); emit('onClick', value);
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.card-items{
margin-bottom: 24px;
}
.provider { .provider {
position: relative; position: relative;
width: 100%; width: 100%;

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

@ -8,27 +8,27 @@
</div> </div>
</div> </div>
<p style="display: flex; justify-content: space-between"> <p>
<span class="label">请求数据类型</span> <span class="label">请求数据类型</span>
<span class="value">{{ <span>{{
getContent(selectApi.requestBody) || getContent(selectApi.requestBody) ||
'application/x-www-form-urlencoded' 'application/x-www-form-urlencoded'
}}</span> }}</span>
<span class="label">响应数据类型</span> <span class="label">响应数据类型</span>
<span class="value">{{ `["/"]` }}</span> <span>{{ `["/"]` }}</span>
</p> </p>
<div class="api-card"> <div class="api-card">
<h5>请求参数</h5> <h5>请求参数</h5>
<div class="content"> <div class="content">
<JTable <JTable
:columns="columns.request" :columns="requestCard.columns"
:dataSource="selectApi.parameters" :dataSource="requestCard.tableData"
noPagination noPagination
model="TABLE" model="TABLE"
> >
<template #required="slotProps"> <template #required="slotProps">
<span>{{ slotProps.row.required + '' }}</span> <span>{{ Boolean(slotProps.row.required) + '' }}</span>
</template> </template>
<template #type="slotProps"> <template #type="slotProps">
<span>{{ slotProps.row.schema.type }}</span> <span>{{ slotProps.row.schema.type }}</span>
@ -36,6 +36,39 @@
</JTable> </JTable>
</div> </div>
</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> </div>
</template> </template>
@ -49,11 +82,21 @@ const props = defineProps({
type: Object as PropType<apiDetailsType>, type: Object as PropType<apiDetailsType>,
required: true, required: true,
}, },
schemas: {
type: Object,
required: true,
},
}); });
const { selectApi } = toRefs(props); const { selectApi } = toRefs(props);
const columns = { type tableCardType = {
request: [ columns: object[];
tableData: object[];
activeKey?: any;
getData?: any;
};
const requestCard = reactive<tableCardType>({
columns: [
{ {
title: '参数名', title: '参数名',
dataIndex: 'name', dataIndex: 'name',
@ -82,13 +125,136 @@ const columns = {
scopedSlots: true, 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) => { const getContent = (data: any) => {
if (!data) return ''; if (data && data.content) {
return Object.keys(data.content)[0]; 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -103,13 +269,25 @@ const getContent = (data: any) => {
.input { .input {
display: flex; display: flex;
margin: 24px 0;
} }
} }
p {
display: flex;
justify-content: space-between;
font-size: 14px;
.label {
font-weight: bold;
}
}
.api-card { .api-card {
margin-top: 24px;
h5 { h5 {
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
font-weight: 600;
font-size: 16px;
&::before { &::before {
position: absolute; position: absolute;
@ -125,7 +303,6 @@ const getContent = (data: any) => {
.content { .content {
padding-left: 10px; padding-left: 10px;
:deep(.jtable-body) { :deep(.jtable-body) {
padding: 0; padding: 0;

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

@ -5,6 +5,7 @@
<div class="input"> <div class="input">
<InputCard :value="selectApi.method" /> <InputCard :value="selectApi.method" />
<a-input :value="selectApi?.url" disabled /> <a-input :value="selectApi?.url" disabled />
<span class="send">发送</span>
</div> </div>
</div> </div>
</div> </div>
@ -36,7 +37,15 @@ const { selectApi } = toRefs(props);
.input { .input {
display: flex; 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'] = { const rowSelection: TableProps['rowSelection'] = {
// onChange: (selectedRowKeys, selectedRows) => { onChange: (selectedRowKeys, selectedRows) => {
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
// }, },
}; };
const jump = (row:object) => { 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) => { Promise.all(allPromise).then((values) => {
values.forEach((item: any, i) => { values.forEach((item: any, i) => {
tree[i].children = combData(item?.paths); tree[i].children = combData(item?.paths);
tree[i].schemas = item.components.schemas
}); });
treeData.value = tree; treeData.value = tree;
}); });
}); });
}; };
const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => { const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
emits('select', node.node.dataRef); emits('select', node.node.dataRef, node.node?.parent.node.schemas);
}; };
onMounted(() => { onMounted(() => {

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

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

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

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

7826
yarn.lock
View File

File diff suppressed because it is too large Load Diff