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

This commit is contained in:
xieyonghong 2023-02-21 19:46:38 +08:00
parent 80b7436717 ee89ea27b0
commit 4599a01de7
51 changed files with 4401 additions and 2431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.cjs
View File

@ -19,5 +19,8 @@ module.exports = {
rules: {
// override/add rules settings here, such as:
},
globals: {
NodeJS: 'readonly'
}
};

2
package.json
View File

@ -45,7 +45,7 @@
"@commitlint/config-conventional": "^17.4.0",
"@types/lodash-es": "^4.17.6",
"@types/moment": "^2.13.0",
"@types/node": "^18.11.17",
"@types/node": "^18.14.0",
"@vitejs/plugin-vue": "^4.0.0",
"@vuemap/unplugin-resolver": "^1.0.4",
"autoprefixer": "^10.4.13",

BIN
public/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

9
src/api/comm.ts
View File

@ -27,4 +27,11 @@ export const deleteSearchHistory = (target:string, id:string) => server.remove<S
/**
* 获取当前系统版本
*/
export const systemVersion = () => server.get<{edition?: string}>('/system/version')
export const systemVersion = () => server.get<{edition?: string}>('/system/version')
/**
* 聚合查询
* @param data
* @returns
*/
export const queryDashboard = (data: Record<string, any>) => server.post(`/dashboard/_multi`, data)

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

@ -315,6 +315,31 @@ export const getGatewayDetail = (id: string) => server.get(`/gateway/device/${id
*/
export const getUnit = () => server.get<UnitType[]>(`/protocol/units`)
/**
* 执行功能
* @param deviceId 设备id
* @param functionId 功能id
* @param data
* @returns
*/
export const executeFunctions = (deviceId: string, functionId: string, data: any) => server.post(`/device/invoked/${deviceId}/function/${functionId}`, data)
/**
* 读取属性
* @param deviceId 设备id
* @param data
* @returns
*/
export const readProperties = (deviceId: string, data: any) => server.post(`/device/instance/${deviceId}/properties/_read`, data)
/**
* 设置属性
* @param deviceId 设备id
* @param data
* @returns
*/
export const settingProperties = (deviceId: string, data: any) => server.put(`/device/instance/${deviceId}/property`, data)
/**
* 设备功能-执行
* @param id 设备id
@ -322,4 +347,4 @@ export const getUnit = () => server.get<UnitType[]>(`/protocol/units`)
* @param data
* @returns
*/
export const execute = (id: string, action: string, data: any) => server.post(`/device/invoked/${id}/function/${action}`, data)
export const execute = (id: string, action: string, data: any) => server.post(`/device/invoked/${id}/function/${action}`, data)

2
src/api/initHome.ts
View File

@ -31,7 +31,7 @@ export const getSystemPermission = () =>server.get(`/system/resources/permission
export const saveNetwork = (data: any) => server.post(`/network/config`, data)
// 保存协议
export const saveProtocol = () => server.post(`/protocol/default-protocol/_save`,)
export const saveProtocol = () => server.post(`/protocol/default-protocol/_save`)
// 新增设备接入网关
export const saveAccessConfig = (data: any) => server.post(`/gateway/device`, data)

6
src/api/link/type.ts
View File

@ -30,3 +30,9 @@ export const allResources = () => server.get(`/network/resources/alive/_all`);
export const certificates = () =>
server.get(`/network/certificate/_query/no-paging?paging=false`);
export const save = (data: Object) => server.post(`/network/config`, data);
export const update = (data: Object) => server.patch(`/network/config`, data);
export const detail = (id: string) => server.get(`/network/config/${id}`);

15
src/api/system/dataSource.ts
View File

@ -3,9 +3,22 @@ import server from '@/utils/request';
// 获取数据源列表
export const getDataSourceList_api = (data: object) => server.post(`/datasource/config/_query/`, data);
// 获取数据源信息
export const getDataSourceInfo_api = (id: string) => server.get(`/datasource/config/${id}`);
// 获取数据库类型字典
export const getDataTypeDict_api = () => server.get(`/datasource/config/types`);
// 修改数据源状态
export const changeStatus_api = (id:string, status:'_disable'|'_enable') => server.put(`/datasource/config/${id}/${status}`);
export const changeStatus_api = (id: string, status: '_disable' | '_enable') => server.put(`/datasource/config/${id}/${status}`);
// 新增/更新数据源
export const saveDataSource_api = (data: any) => data.id ? server.patch(`datasource/config`, data) : server.post(`/datasource/config`, data)
// 删除数据源
export const delDataSource_api = (id: string) => server.remove(`/datasource/config/${id}`);
// 获取左侧树
export const rdbTree_api = (id: string) => server.get(`/datasource/rdb/${id}/tables?includeColumns=false`);
// 获取右侧表格
export const rdbTables_api = (id: string,key:string) => server.get(`/datasource/rdb/${id}/table/${key}`);
// 保存表格
export const saveTable_api = (id: string,data:object) => server.patch(`/datasource/rdb/${id}/table`,data);

127
src/utils/websocket.ts Normal file
View File

@ -0,0 +1,127 @@
import { Observable } from 'rxjs'
import { BASE_API_PATH } from '@/utils/variable';
import { notification } from 'ant-design-vue';
import { getToken } from '@/utils/comm';
let ws: any = null
let count = 0 // 重连计数
let timer: NodeJS.Timeout = null
let lockReconnect = false // 避免重复连接
const total = 100 // 重连总次数
const subs = {}
const timeout = 5000
const tempQueue: any[] = [] // websocket未连接上时，缓存消息列
export const initWebSocket = () => {
if (ws) {
return ws
}
const token = getToken()
const url = `${document.location.protocol.replace('http', 'ws')}//${document.location.host}${BASE_API_PATH}/messaging/${token}?:X_Access_Token=${token}`;
if (count < total) {
count += 1
ws = new WebSocket(url)
ws.onopen = () => {
count = 0
timer = setInterval(heartCheck, 2000)
if (tempQueue.length > 0) {
for (let i = tempQueue.length - 1; i >= 0; i--) {
ws.send(tempQueue[i])
tempQueue.splice(i, 1)
}
}
}
ws.onclose = () => {
console.log('onerror', count)
ws = null
reconnect()
}
ws.onmessage = (msg: Record<string, any>) => {
const data = JSON.parse(msg.data)
if (data.type === 'error') {
notification.error({ key: 'wserr', message: data.message })
}
if (subs[data.requestId]) {
if (data.type === 'complete') {
subs[data.requestId].forEach((item: Record<string, any>) => {
item.complete()
})
} else if (data.type === 'result') {
subs[data.requestId].forEach((element: Record<string, any>) => {
element.next(data)
})
}
}
}
ws.onerror = () => {
console.log('onerror', count)
ws = null
reconnect()
}
return ws
}
}
export const getWebSocket = (id: string, topic: string, parameter: Record<string, any>) => new Observable(subscriber => {
if (!subs[id]) {
subs[id] = []
}
subs[id].push({
next(val: Record<string, any>) {
subscriber.next(val)
},
complete() {
subscriber.complete()
}
})
const msg = JSON.stringify({ id, topic, parameter, type: 'sub' })
const thisWs = initWebSocket()
if (thisWs) {
if (thisWs.readyState === WebSocket.OPEN) {
thisWs.send(msg)
} else {
tempQueue.push(msg)
}
}
return () => {
const unsub = JSON.stringify({ id, type: 'unsub' })
delete subs[id]
if (thisWs) {
thisWs.send(unsub)
}
}
})
/**
* 重连
*/
function reconnect() {
timer && clearInterval(timer)
if (lockReconnect) {
return
}
lockReconnect = true
timer = setTimeout(() => {
initWebSocket()
lockReconnect = false
}, timeout * count)
}
/**
* 心跳检测
*/
function heartCheck() {
if (ws) {
ws.send(JSON.stringify({ type: 'ping' }))
}
}

11
src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue
View File

@ -72,18 +72,9 @@ const columns = [
},
];
// const dataSource = ref<Record<any, any>[]>(_props.modelValue || []);
const dataSource = computed({
get: () => {
return _props.modelValue || {
messageType: undefined,
message: {
properties: undefined,
functionId: undefined,
inputs: []
}
}
return _props.modelValue || []
},
set: (val: any) => {
_emit('update:modelValue', val);

223
src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue
View File

@ -1,60 +1,118 @@
<template>
<div class="function">
<a-form
:layout="'vertical'"
ref="formRef"
:model="modelRef"
>
<a-form :layout="'vertical'" ref="formRef" :model="modelRef">
<a-row :gutter="24">
<a-col :span="6">
<a-form-item name="messageType" :rules="{
required: true,
message: '请选择',
}">
<a-select placeholder="请选择" v-model:value="modelRef.messageType" show-search :filter-option="filterOption">
<a-select-option value="READ_PROPERTY">读取属性</a-select-option>
<a-select-option value="WRITE_PROPERTY">修改属性</a-select-option>
<a-select-option value="INVOKE_FUNCTION">调用功能</a-select-option>
<a-form-item
name="type"
:rules="{
required: true,
message: '请选择',
}"
>
<a-select
placeholder="请选择"
v-model:value="modelRef.type"
show-search
:filter-option="filterOption"
>
<a-select-option value="READ_PROPERTY"
>读取属性</a-select-option
>
<a-select-option value="WRITE_PROPERTY"
>修改属性</a-select-option
>
<a-select-option value="INVOKE_FUNCTION"
>调用功能</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :span="6" v-if="['READ_PROPERTY','WRITE_PROPERTY'].includes(modelRef.messageType)">
<a-form-item :name="['message', 'properties']" :rules="{
required: true,
message: '请选择属性',
}">
<a-select placeholder="请选择属性" v-model:value="modelRef.message.properties" show-search :filter-option="filterOption">
<a-select-option v-for="i in (metadata?.properties) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</a-select-option>
<a-col
:span="6"
v-if="
['READ_PROPERTY', 'WRITE_PROPERTY'].includes(
modelRef.type,
)
"
>
<a-form-item
name="properties"
:rules="{
required: true,
message: '请选择属性',
}"
>
<a-select
placeholder="请选择属性"
v-model:value="modelRef.properties"
show-search
:filter-option="filterOption"
>
<a-select-option
v-for="i in metadata?.properties || []"
:key="i.id"
:value="i.id"
:label="i.name"
>{{ i.name }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :span="6" v-if="modelRef.messageType === 'WRITE_PROPERTY'">
<a-form-item :name="['message', 'value']" :rules="{
required: true,
message: '请输入值',
}">
<a-input />
<a-col :span="6" v-if="modelRef.type === 'WRITE_PROPERTY'">
<a-form-item
name="propertyValue"
:rules="{
required: true,
message: '请输入值',
}"
>
<a-input v-model:value="propertyValue" />
</a-form-item>
</a-col>
<a-col :span="6" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
<a-form-item :name="['message', 'functionId']" :rules="{
required: true,
message: '请选择功能',
}">
<a-select placeholder="请选择功能" v-model:value="modelRef.message.functionId" show-search :filter-option="filterOption" @change="funcChange">
<a-select-option v-for="i in (metadata?.functions) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</a-select-option>
<a-col :span="6" v-if="modelRef.type === 'INVOKE_FUNCTION'">
<a-form-item
name="function"
:rules="{
required: true,
message: '请选择功能',
}"
>
<a-select
placeholder="请选择功能"
v-model:value="modelRef.function"
show-search
:filter-option="filterOption"
@change="funcChange"
>
<a-select-option
v-for="i in metadata?.functions || []"
:key="i.id"
:value="i.id"
:label="i.name"
>{{ i.name }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :span="4">
<a-button type="primary" @click="saveBtn">发送</a-button>
</a-col>
<a-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION' && modelRef.message.functionId">
<a-form-item :name="['message', 'inputs']" label="参数列表" :rules="{
required: true,
message: '请输入参数列表',
}">
<EditTable v-model="modelRef.message.inputs"/>
<a-col
:span="24"
v-if="
modelRef.type === 'INVOKE_FUNCTION' && modelRef.function && modelRef.inputs.length
"
>
<a-form-item
name="inputs"
label="参数列表"
:rules="{
required: true,
message: '请输入参数列表',
}"
>
<EditTable v-model="modelRef.inputs" />
</a-form-item>
</a-col>
</a-row>
@ -64,9 +122,14 @@
<script lang="ts" setup>
import { useInstanceStore } from '@/store/instance';
import EditTable from './EditTable.vue'
import EditTable from './EditTable.vue';
import {
executeFunctions,
readProperties,
settingProperties,
} from '@/api/device/instance';
const instanceStore = useInstanceStore()
const instanceStore = useInstanceStore();
const formRef = ref();
@ -80,48 +143,78 @@ type Emits = {
const emit = defineEmits<Emits>();
const modelRef = reactive({
messageType: undefined,
message: {
properties: undefined,
functionId: undefined,
inputs: []
}
})
type: undefined,
properties: undefined,
function: undefined,
inputs: [],
propertyValue: undefined,
});
const metadata = computed(() => {
return JSON.parse(instanceStore.current?.metadata || '{}')
})
return JSON.parse(instanceStore.current?.metadata || '{}');
});
const funcChange = (val: string) => {
if(val){
const arr = metadata.value?.functions.find((item: any) => item.id === val)?.inputs || []
if (val) {
const arr =
metadata.value?.functions.find((item: any) => item.id === val)
?.inputs || [];
const list = arr.map((item: any) => {
return {
id: item.id,
name: item.name,
value: undefined,
valueType: item?.valueType?.type,
}
})
modelRef.message.inputs = list
};
});
modelRef.inputs = list;
}
}
};
const saveBtn = () => {
formRef.value.validate()
.then(() => {
console.log(toRaw(modelRef))
})
}
defineExpose({ saveBtn })
formRef.value.validate().then(async () => {
const values = toRaw(modelRef);
let _inputs: any[] = [];
if (modelRef.inputs.length) {
_inputs = modelRef.inputs.filter((i: any) => !i.value);
if (_inputs.length) {
return;
}
}
if (values.type === 'INVOKE_FUNCTION') {
const list = (modelRef.inputs || []).filter((it: any) => !!it.value);
const obj = {};
list.map((it: any) => {
obj[it.id] = it.value;
});
await executeFunctions(
instanceStore.current.id || '',
values?.function || '',
{
...obj,
},
);
} else {
if (values.type === 'READ_PROPERTY') {
await readProperties(instanceStore.current?.id || '', [
values.properties,
]);
} else {
await settingProperties(instanceStore.current?.id || '', {
[values.properties || '']: values.propertyValue,
});
}
}
});
};
defineExpose({ saveBtn });
</script>
<style lang="less" scoped>
.function {
padding: 15px;
background-color: #e7eaec;
padding: 15px;
background-color: #e7eaec;
}
</style>

6
src/views/device/Instance/Detail/Diagnose/Message/index.vue
View File

@ -24,7 +24,7 @@
<a-col :span="8">
<div class="right-log">
<TitleComponent data="日志" />
<div :style="{ marginTop: 10 }">
<div :style="{ marginTop: '10px' }">
<template v-if="logList.length">
<Log v-for="item in logList" :data="item" :key="item.key" />
</template>
@ -61,6 +61,10 @@ const messageArr = computed(() => {
return arr.map(i => { return {...message[i], key: i}})
})
const subscribeLog = () => {
}
</script>

20
src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx
View File

@ -20,7 +20,7 @@ const ManualInspection = defineComponent({
<>
<div style={{ flex: 1 }}>
<div class={styles.alert}>
<span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
<span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
请检查配置项是否填写正确，若您确定该项无需诊断可
<Button type="link" style="padding: 0"
onClick={() => {
@ -30,7 +30,7 @@ const ManualInspection = defineComponent({
忽略
</Button>
</div>
<div style={{ marginTop: 10 }}>
<div style={{ marginTop: '10px' }}>
<Descriptions title={data?.data?.name} layout="vertical" bordered>
{(data?.data?.properties || []).map((item: any) => (
<Descriptions.Item
@ -45,7 +45,7 @@ const ManualInspection = defineComponent({
</div>
{data?.data?.description ? (
<div
style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
>
<h4>诊断项说明</h4>
<p>{data?.data?.description}</p>
@ -60,7 +60,7 @@ const ManualInspection = defineComponent({
<>
<div style={{ flex: 1 }}>
<div class={styles.alert}>
<span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
<span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
请检查配置项是否填写正确，若您确定该项无需诊断可
<Button type="link" style="padding: 0"
onClick={() => {
@ -70,7 +70,7 @@ const ManualInspection = defineComponent({
忽略
</Button>
</div>
<div style={{ marginTop: 10 }}>
<div style={{ marginTop: '10px' }}>
<Descriptions title={data?.data?.name} layout="vertical" bordered>
{data.configuration?.provider === 'OneNet' ? (
<>
@ -105,7 +105,7 @@ const ManualInspection = defineComponent({
</div>
{data?.configuration?.configuration?.description ? (
<div
style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
>
<h4>诊断项说明</h4>
<p>{data?.configuration?.configuration?.description}</p>
@ -120,7 +120,7 @@ const ManualInspection = defineComponent({
<>
<div style={{ flex: 1 }}>
<div class={styles.alert}>
<span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
<span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
请检查配置项是否填写正确，若您确定该项无需诊断可
<Button type="link" style="padding: 0"
onClick={() => {
@ -130,7 +130,7 @@ const ManualInspection = defineComponent({
忽略
</Button>
</div>
<div style={{ marginTop: 10 }}>
<div style={{ marginTop: '10px' }}>
<Descriptions title={data?.data?.name} layout="vertical" bordered>
{data?.configuration?.configuration?.shareCluster ? (
<>
@ -180,9 +180,9 @@ const ManualInspection = defineComponent({
</Descriptions>
</div>
</div>
{data?.configuration?.configuration.description ? (
{data?.configuration?.description ? (
<div
style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
>
<h4>诊断项说明</h4>
<p>{data?.configuration?.description}</p>

107
src/views/device/Instance/Detail/Diagnose/Status/index.tsx
View File

@ -10,6 +10,7 @@ import { _deploy as _deployProduct } from "@/api/device/product"
import _ from "lodash"
import DiagnosticAdvice from './DiagnosticAdvice'
import ManualInspection from './ManualInspection'
import { deployDevice } from "@/api/initHome"
type TypeProps = 'network' | 'child-device' | 'media' | 'cloud' | 'channel'
@ -29,9 +30,9 @@ const Status = defineComponent({
const status = ref<'loading' | 'finish'>('loading')
const device = ref(instanceStore.current)
const gateway = ref<Partial<Record<string, any>>>() // 网关信息
const parent = ref<Partial<Record<string, any>>>() // 父设备
const product = ref<Partial<Record<string, any>>>() // 产品
const gateway = ref<Partial<Record<string, any>>>({}) // 网关信息
const parent = ref<Partial<Record<string, any>>>({}) // 父设备
const product = ref<Partial<Record<string, any>>>({}) // 产品
const artificialVisible = ref<boolean>(false)
const artificialData = ref<Partial<Record<string, any>>>()
@ -1332,7 +1333,7 @@ const Status = defineComponent({
unref(device)?.accessProvider &&
gatewayList.includes(unref(device).accessProvider as string)
) {
const response = await queryProtocolDetail(unref(device).protocol, 'MQTT');
const response: any = await queryProtocolDetail(unref(device).protocol, 'MQTT');
if (response.status === 200) {
if ((response.result?.routes || []).length > 0) {
item.push(
@ -1521,9 +1522,103 @@ const Status = defineComponent({
<TitleComponent data="连接详情" />
<Space>
{
status.value === 'finish' && unref(device).state?.value !== 'online' && <Button type="primary">一键修复</Button>
status.value === 'finish' && unref(device).state?.value !== 'online' && <Button type="primary" onClick={async () => {
let flag: boolean = true;
if (
Object.keys(unref(gateway)).length > 0 &&
unref(gateway)?.state?.value !== 'enabled'
) {
const resp = await startGateway(unref(device).accessId || '');
if (resp.status === 200) {
list.value = modifyArrayList(list.value, {
key: 'gateway',
name: '设备接入网关',
desc: '诊断设备接入网关状态是否正常，禁用状态将导致连接失败',
status: 'success',
text: '正常',
info: null,
});
} else {
flag = false;
}
}
if (unref(product)?.state !== 1) {
const resp = await _deployProduct(unref(device).productId || '');
if (resp.status === 200) {
list.value = modifyArrayList(list.value, {
key: 'product',
name: '产品状态',
desc: '诊断产品状态是否正常，禁用状态将导致设备连接失败',
status: 'success',
text: '正常',
info: null,
});
} else {
flag = false;
}
}
if (unref(device)?.state?.value === 'notActive') {
const resp = await deployDevice(unref(device)?.id || '');
if (resp.status === 200) {
unref(device).state = { value: 'offline', text: '离线' };
list.value = modifyArrayList(list.value, {
key: 'device',
name: '设备状态',
desc: '诊断设备状态是否正常，禁用状态将导致设备连接失败',
status: 'success',
text: '正常',
info: null,
});
} else {
flag = false;
}
}
if (props.providerType === 'network' || props.providerType === 'child-device') {
const address = unref(gateway)?.channelInfo?.addresses || [];
const _label = address.some((i: any) => i.health === -1);
const __label = address.every((i: any) => i.health === 1);
const health = _label ? -1 : __label ? 1 : 0;
if (health === -1 && unref(gateway)?.channelId) {
const res = await startNetwork(unref(gateway)?.channelId);
if (res.status === 200) {
list.value = modifyArrayList(list.value, {
key: 'network',
name: '网络组件',
desc: '诊断网络组件配置是否正确，配置错误将导致设备连接失败',
status: 'success',
text: '正常',
info: null,
});
} else {
flag = false;
}
}
}
if (props.providerType === 'child-device' && unref(device)?.parentId) {
if (unref(parent)?.state?.value === 'notActive') {
const resp = await deployDevice(unref(device)?.parentId || '');
if (resp.status === 200) {
list.value = modifyArrayList(list.value, {
key: 'parent-device',
name: '网关父设备',
desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
status: 'success',
text: '正常',
info: null,
});
} else {
flag = false;
}
}
}
if (flag) {
message.success('操作成功！');
}
}}>一键修复</Button>
}
<Button>重新诊断</Button>
<Button onClick={() => {
handleSearch()
}}>重新诊断</Button>
</Space>
</div>
<div class={styles["statusContent"]}>

21
src/views/device/Instance/Detail/Running/Property/PropertyCard.vue
View File

@ -1,6 +1,6 @@
<template>
<a-card :hoverable="true" class="card-box">
<a-spin :spinning="loading">
<!-- <a-spin :spinning="loading"> -->
<div class="card-container">
<div class="header">
<div class="title">{{ _props.data.name }}</div>
@ -24,14 +24,14 @@
</div>
</div>
<div class="value">
<ValueRender :data="data" />
<ValueRender :data="data" :value="_props.data" />
</div>
<div class="bottom">
<div style="color: rgba(0, 0, 0, .65); font-size: 12px">更新时间</div>
<div class="time-value">{{data?.time || '--'}}</div>
<div class="time-value">{{_props?.data?.timeString || '--'}}</div>
</div>
</div>
</a-spin>
<!-- </a-spin> -->
</a-card>
</template>
@ -47,13 +47,14 @@ const _props = defineProps({
default: () => []
},
});
const loading = ref<boolean>(true);
// const loading = ref<boolean>(true);
watchEffect(() => {
if (_props.data.name) {
loading.value = false;
}
});
// watchEffect(() => {
// if (_props.data) {
// console.log(_props.data)
// loading.value = false;
// }
// });
</script>
<style lang="less" scoped>

7
src/views/device/Instance/Detail/Running/Property/ValueRender.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="value">
{{value}}
{{value?.value || '--'}}
</div>
</template>
@ -13,8 +13,8 @@ const _data = defineProps({
default: () => {},
},
value: {
type: [Object, String, Number],
default: '--'
type: Object,
default: () => {}
},
type: {
type: String,
@ -40,6 +40,7 @@ imgMap.set('obj', getImage('/running/obj.png'));
const imgList = ['.jpg', '.png', '.swf', '.tiff'];
const videoList = ['.m3u8', '.flv', '.mp4', '.rmvb', '.mvb'];
const fileList = ['.txt', '.doc', '.xls', '.pdf', '.ppt', '.docx', '.xlsx', '.pptx'];
</script>
<style lang="less" scoped>

403
src/views/device/Instance/Detail/Running/Property/index.vue
View File

@ -1,74 +1,95 @@
<template>
<JTable
:columns="columns"
:dataSource="dataSource"
:bodyStyle="{padding: '0 0 0 20px'}"
>
<template #headerTitle>
<a-input-search
placeholder="请输入名称"
style="width: 300px; margin-bottom: 10px"
@search="onSearch"
v-model:value="value"
:allowClear="true"
/>
</template>
<template #card="slotProps">
<PropertyCard :data="slotProps" :actions="getActions(slotProps)" />
</template>
<template #value="slotProps">
<ValueRender :data="slotProps" />
</template>
<template #time="slotProps">
{{slotProps.time || '--'}}
</template>
<template #action="slotProps">
<a-space :size="16">
<a-tooltip
v-for="i in getActions(slotProps)"
:key="i.key"
v-bind="i.tooltip"
>
<a-button
style="padding: 0"
type="link"
:disabled="i.disabled"
@click="i.onClick && i.onClick(slotProps)"
<a-spin :spinning="loading">
<JTable
:columns="columns"
:dataSource="dataSource"
:bodyStyle="{ padding: '0 0 0 20px' }"
>
<template #headerTitle>
<a-input-search
placeholder="请输入名称"
style="width: 300px; margin-bottom: 10px"
@search="onSearch"
v-model:value="value"
:allowClear="true"
/>
</template>
<template #card="slotProps">
<PropertyCard
:data="{ ...slotProps, ...propertyValue[slotProps?.id] }"
:actions="getActions(slotProps)"
/>
</template>
<template #value="slotProps">
<ValueRender
:data="slotProps"
:value="propertyValue[slotProps?.id]"
/>
</template>
<template #time="slotProps">
{{ propertyValue[slotProps?.id]?.timeString || '--' }}
</template>
<template #action="slotProps">
<a-space :size="16">
<a-tooltip
v-for="i in getActions(slotProps)"
:key="i.key"
v-bind="i.tooltip"
>
<AIcon :type="i.icon" />
</a-button>
</a-tooltip>
</a-space>
</template>
<template #paginationRender>
<a-pagination
size="small"
:total="total"
:showQuickJumper="false"
:showSizeChanger="true"
:current="pageIndex + 1"
:pageSize="pageSize"
:pageSizeOptions="['8', '12', '24', '60', '100']"
:show-total="(num) => `第 ${pageIndex * pageSize + 1} - ${(pageIndex + 1) * pageSize > num ? num : (pageIndex + 1) * pageSize} 条/总共 ${num} 条`"
@change="pageChange"
/>
</template>
</JTable>
<a-button
style="padding: 0"
type="link"
:disabled="i.disabled"
@click="i.onClick && i.onClick(slotProps)"
>
<AIcon :type="i.icon" />
</a-button>
</a-tooltip>
</a-space>
</template>
<template #paginationRender>
<a-pagination
size="small"
:total="total"
:showQuickJumper="false"
:showSizeChanger="true"
:current="pageIndex + 1"
:pageSize="pageSize"
:pageSizeOptions="['8', '12', '24', '60', '100']"
:show-total="
(num) =>
`第 ${pageIndex * pageSize + 1} - ${
(pageIndex + 1) * pageSize > num
? num
: (pageIndex + 1) * pageSize
} 条/总共 ${num} 条`
"
@change="pageChange"
/>
</template>
</JTable>
</a-spin>
<Save v-if="editVisible" @close="editVisible = false" :data="currentInfo" />
<Indicators v-if="indicatorVisible" @close="indicatorVisible = false" :data="currentInfo" />
<Indicators
v-if="indicatorVisible"
@close="indicatorVisible = false"
:data="currentInfo"
/>
</template>
<script lang="ts" setup>
import _ from "lodash"
import { PropertyData } from "../../../typings"
import PropertyCard from './PropertyCard.vue'
import ValueRender from './ValueRender.vue'
import Save from './Save.vue'
import Indicators from './Indicators.vue'
import { getProperty } from '@/api/device/instance'
import { useInstanceStore } from "@/store/instance"
import { message } from "ant-design-vue"
import _, { groupBy, throttle, toArray } from 'lodash-es';
import { PropertyData } from '../../../typings';
import PropertyCard from './PropertyCard.vue';
import ValueRender from './ValueRender.vue';
import Save from './Save.vue';
import Indicators from './Indicators.vue';
import { getProperty } from '@/api/device/instance';
import { useInstanceStore } from '@/store/instance';
import { message } from 'ant-design-vue';
import { getWebSocket } from '@/utils/websocket';
import { map } from 'rxjs/operators';
import { queryDashboard } from '@/api/comm';
const columns = [
{
title: '名称',
@ -79,7 +100,7 @@ const columns = [
title: '值',
dataIndex: 'value',
key: 'value',
scopedSlots: true
scopedSlots: true,
},
{
title: '更新时间',
@ -93,29 +114,35 @@ const columns = [
key: 'action',
scopedSlots: true,
},
]
];
const _data = defineProps({
data: {
type: Array,
default: () => []
}
})
const value = ref<string>('')
const dataSource = ref<PropertyData[]>([])
const _dataSource = ref<PropertyData[]>([])
const pageIndex = ref<number>(0)
const pageSize = ref<number>(8)
const total = ref<number>(0)
const editVisible = ref<boolean>(false) // 编辑
const detailVisible = ref<boolean>(false) // 详情
const currentInfo = ref<Record<string, any>>({})
const instanceStore = useInstanceStore()
const indicatorVisible = ref<boolean>(false) // 指标
default: () => [],
},
});
const value = ref<string>('');
const dataSource = ref<PropertyData[]>([]);
const _dataSource = ref<PropertyData[]>([]);
const pageIndex = ref<number>(0);
const pageSize = ref<number>(8);
const total = ref<number>(0);
const editVisible = ref<boolean>(false); // 编辑
const detailVisible = ref<boolean>(false); // 详情
const currentInfo = ref<Record<string, any>>({});
const instanceStore = useInstanceStore();
const indicatorVisible = ref<boolean>(false); // 指标
const loading = ref<boolean>(false);
const propertyValue = ref<Record<string, any>>({});
const subRef = ref();
const list = ref<any[]>([]);
const getActions = (data: Partial<Record<string, any>>) => {
const arr = []
if(data.expands?.type?.includes('write')){
const arr = [];
if (data.expands?.type?.includes('write')) {
arr.push({
key: 'edit',
tooltip: {
@ -123,14 +150,23 @@ const getActions = (data: Partial<Record<string, any>>) => {
},
icon: 'EditOutlined',
onClick: () => {
editVisible.value = true
currentInfo.value = data
editVisible.value = true;
currentInfo.value = data;
},
})
});
}
if((data.expands?.metrics || []).length && ['int', 'long', 'float', 'double', 'string', 'boolean', 'date'].includes(
data.valueType?.type || '',
)){
if (
(data.expands?.metrics || []).length &&
[
'int',
'long',
'float',
'double',
'string',
'boolean',
'date',
].includes(data.valueType?.type || '')
) {
arr.push({
key: 'metrics',
tooltip: {
@ -138,12 +174,12 @@ const getActions = (data: Partial<Record<string, any>>) => {
},
icon: 'ClockCircleOutlined',
onClick: () => {
indicatorVisible.value = true
currentInfo.value = data
indicatorVisible.value = true;
currentInfo.value = data;
},
})
});
}
if(data.expands?.type?.includes('read')){
if (data.expands?.type?.includes('read')) {
arr.push({
key: 'read',
tooltip: {
@ -151,14 +187,17 @@ const getActions = (data: Partial<Record<string, any>>) => {
},
icon: 'SyncOutlined',
onClick: async () => {
if(instanceStore.current.id && data.id){
const resp = await getProperty(instanceStore.current.id, data.id)
if(resp.status === 200){
message.success('操作成功！')
if (instanceStore.current.id && data.id) {
const resp = await getProperty(
instanceStore.current.id,
data.id,
);
if (resp.status === 200) {
message.success('操作成功！');
}
}
},
})
});
}
arr.push({
key: 'detail',
@ -168,56 +207,132 @@ const getActions = (data: Partial<Record<string, any>>) => {
},
icon: 'BarsOutlined',
onClick: () => {
detailVisible.value = true
currentInfo.value = data
detailVisible.value = true;
currentInfo.value = data;
},
})
return arr
}
const query = (page: number, size: number, value: string) => {
pageIndex.value = page || 0
pageSize.value = size || 8
const _from = pageIndex.value * pageSize.value
const _to = (pageIndex.value + 1) * pageSize.value
const arr = _.cloneDeep(_dataSource.value)
if(value){
const li = arr.filter((i: any) => {
return i?.name.indexOf(value) !== -1;
})
dataSource.value = li.slice(_from, _to)
total.value = li.length
} else {
dataSource.value = arr.slice(_from, _to)
total.value = arr.length
}
}
const pageChange = (page: number, size: number) => {
if(size === pageSize.value) {
query(page - 1, size, value.value)
} else {
query(0, size, value.value)
}
}
watch(() => _data.data,
(newVal) => {
if(newVal.length) {
_dataSource.value = newVal as PropertyData[]
query(0, 8, value.value)
}
}, {
deep: true,
immediate: true
})
const onSearch = () => {
query(0, 8, value.value)
});
return arr;
};
// const valueChange = (arr: Record<string, any>[]) => {
// (arr || [])
// .sort((a: any, b: any) => a.timestamp - b.timestamp)
// .forEach((item: any) => {
// const { value } = item;
// propertyValue.value[value?.property] = { ...item, ...value };
// });
// list.value = []
// };
const subscribeProperty = () => {
const id = `instance-info-property-${instanceStore.current.id}-${
instanceStore.current.productId
}-${dataSource.value.map((i: Record<string, any>) => i.id).join('-')}`;
const topic = `/dashboard/device/${instanceStore.current.productId}/properties/realTime`;
subRef.value = getWebSocket(id, topic, {
deviceId: instanceStore.current.id,
properties: dataSource.value.map((i: Record<string, any>) => i.id),
history: 1,
})
?.pipe(map((res: any) => res.payload))
.subscribe((payload) => {
list.value = [...list.value, payload];
unref(list).sort((a: any, b: any) => a.timestamp - b.timestamp)
.forEach((item: any) => {
const { value } = item;
propertyValue.value[value?.property] = { ...item, ...value };
});
// list.value = [...list.value, payload];
// throttle(valueChange(list.value), 500);
});
};
const getDashboard = async () => {
const param = [
{
dashboard: 'device',
object: instanceStore.current.productId,
measurement: 'properties',
dimension: 'history',
params: {
deviceId: instanceStore.current.id,
history: 1,
properties: dataSource.value.map((i: any) => i.id),
},
},
];
loading.value = true;
const resp: Record<string, any> = await queryDashboard(param);
if (resp.status === 200) {
const t1 = (resp.result || []).map((item: any) => {
return {
timeString: item.data?.timeString,
timestamp: item.data?.timestamp,
...item?.data?.value,
};
});
const obj = {};
toArray(groupBy(t1, 'property'))
.map((item) => {
return {
list: item.sort((a, b) => b.timestamp - a.timestamp),
property: item[0].property,
};
})
.forEach((i) => {
obj[i.property] = i.list[0];
});
propertyValue.value = { ...unref(propertyValue), ...obj };
}
subscribeProperty();
loading.value = false;
};
const query = (page: number, size: number, value: string) => {
pageIndex.value = page || 0;
pageSize.value = size || 8;
const _from = pageIndex.value * pageSize.value;
const _to = (pageIndex.value + 1) * pageSize.value;
const arr = _.cloneDeep(_dataSource.value);
if (unref(value)) {
const li = arr.filter((i: any) => {
return i?.name.indexOf(unref(value)) !== -1;
});
dataSource.value = li.slice(_from, _to);
total.value = li.length;
} else {
dataSource.value = arr.slice(_from, _to);
total.value = arr.length;
}
getDashboard();
};
const pageChange = (page: number, size: number) => {
if (size === pageSize.value) {
query(page - 1, size, value.value);
} else {
query(0, size, value.value);
}
};
watch(
() => _data.data,
(newVal) => {
if (newVal.length) {
_dataSource.value = newVal as PropertyData[];
query(0, 8, value.value);
}
},
{
deep: true,
immediate: true,
},
);
const onSearch = () => {
query(0, 8, value.value);
};
</script>
<style scoped lang="less">
</style>

101
src/views/init-home/Basic/index.vue
View File

@ -83,15 +83,15 @@
</div>
<div
class="upload-image"
v-if="logoValue"
v-if="form.logo"
:style="
logoValue
? `background-image: url(${logoValue});`
form.logo
? `background-image: url(${form.logo});`
: ''
"
></div>
<div
v-if="logoValue"
v-if="form.logo"
class="upload-image-mask"
>
点击修改
@ -162,15 +162,15 @@
</div>
<div
class="upload-image-icon"
v-if="iconValue"
v-if="form.ico"
:style="
iconValue
? `background-image: url(${iconValue});`
form.ico
? `background-image: url(${form.ico});`
: ''
"
></div>
<div
v-if="iconValue"
v-if="form.ico"
class="upload-image-mask"
>
点击修改
@ -221,15 +221,15 @@
</div>
<div
class="upload-image"
v-if="backValue"
v-if="form.background"
:style="
backValue
? `background-image: url(${backValue});`
form.background
? `background-image: url(${form.background});`
: ''
"
></div>
<div
v-if="backValue"
v-if="form.background"
class="upload-image-mask"
>
点击修改
@ -256,6 +256,7 @@
import { modalState, formState, logoState } from '../data/interface';
import { getImage } from '@/utils/comm.ts';
import { Form } from 'ant-design-vue';
import { FILE_UPLOAD } from '@/api/comm';
import {
getSystemPermission,
save,
@ -275,18 +276,18 @@ import {
} from '@/api/initHome';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { message } from 'ant-design-vue';
import { LocalStore } from '@/utils/comm';
import { TOKEN_KEY } from '@/utils/variable';
const formRef = ref();
const menuRef = ref();
const formBasicRef = ref();
const useForm = Form.useForm;
const iconValue = ref('/public/favicon.ico');
const backValue = ref('/public/images/login.png');
const logoValue = ref('/public/logo.png');
const logoLoading = ref(false);
const backLoading = ref(false);
const iconLoading = ref(false);
const imageTypes = ref(['image/jpeg', 'image/png']);
const iconTypes = ref(['image/x-icon']);
const headers = ref({ 'X-Access-Token': LocalStore.get(TOKEN_KEY) });
/**
* 表单数据
*/
@ -295,17 +296,11 @@ const form = ref<formState>({
headerTheme: 'light',
apikey: '',
basePath: `${window.location.origin}/api`,
logo: '',
icon: '',
logo: getImage('/logo.png'),
ico: getImage('/favicon.ico'),
background:getImage('/login.png')
});
const rulesFrom = ref({
title: [
{
required: true,
message: '请输入系统名称',
trigger: 'change',
},
],
headerTheme: [
{
required: true,
@ -328,14 +323,15 @@ const { resetFields, validate, validateInfos } = useForm(
/**
* 提交数据
*/
const saveBasicInfo = async () => {
const saveBasicInfo = () =>{
return new Promise( async (resolve) => {
validate()
.then(async () => {
const item = [
{
scope: 'front',
properties: {
...form,
...form.value,
apikey: '',
'base-path': '',
},
@ -343,32 +339,32 @@ const saveBasicInfo = async () => {
{
scope: 'amap',
properties: {
api: form.apikey,
api: form.value.apikey,
},
},
{
scope: 'paths',
properties: {
'base-path': form.basePath,
'base-path': form.value.basePath,
},
},
];
const res = await save(item);
if (res.status === 200) {
resolve(true);
const ico: any = document.querySelector('link[rel="icon"]');
if (ico !== null) {
ico.href = form.icon;
ico.href = form.value.ico;
}
}else {
resolve(false);
}
// basicData.isSucessBasic = 3;
// } else {
// basicData.isSucessBasic = 2;
// }
})
.catch((error: ValidateErrorEntity<formState>) => {
// basicData.isSucessBasic = 2;
resolve(false);
});
};
})
}
/**
* logo格式校验
*/
@ -395,14 +391,41 @@ const handleChangeLogo = (info: any) => {
if (info.file.status === 'done') {
info.file.url = info.file.response?.result;
logoLoading.value = false;
logoValue.value = info.file.response?.result;
form.value.logo = info.file.response?.result;
}
};
/**
* 浏览器页签上传之前
*/
const beforeIconUpload = (file:any) => {
const isType = iconTypes.value.includes(file.type);
if(!isType){
message.error('请上传ico格式的图片');
return false;
}
const isSize = file.size / 1024 / 1024 < 1;
if(!isSize){
message.error('支持1M以内的图片');
}
return isType && isSize;
}
/**
* 浏览器页签发生改变
*/
const changeIconUpload = (info: any) => {
if (info.file.status === 'uploading') {
iconLoading.value = true;
}
if (info.file.status === 'done') {
info.file.url = info.file.response?.result;
iconLoading.value = false;
form.value.ico = info.file.response?.result;
}
}
/**
* 背景图片上传之前
*/
const beforeBackUpload = (file: any) => {
const beforeBackUpload = (file: any) => {
const isType = imageTypes.value.includes(file.type);
if (!isType) {
message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
@ -424,7 +447,7 @@ const changeBackUpload = (info: any) => {
if (info.file.status === 'done') {
info.file.url = info.file.response?.result;
backLoading.value = false;
backValue.value = info.file.response?.result;
form.value.background = info.file.response?.result;
}
};
defineExpose({

349
src/views/init-home/InitData/index.vue Normal file
View File

@ -0,0 +1,349 @@
<template>
<div>
<img
class="init-data-img"
@click="showModal"
:src="
flag
? getImage('/init-home/data-enabled.png')
: getImage('/init-home/data-disabled.png')
"
/>
</div>
<!-- 初始数据提交表单 -->
<a-modal
v-model:visible="visible"
title="初始数据"
width="52vw"
:maskClosable="false"
@cancel="cancel"
@ok="save"
okText="确定"
cancelText="取消"
class="modal-style"
v-bind="layout"
>
<div class="data-content">
<p class="data-p-style">
<ExclamationCircleOutlined style="margin: 0 0 0 5px" />
初始化数据包括MQTT产品、MQTT设备、MQTT类型设备接入网关、MQTT网络组件、Jetlinks
官方协议
</p>
</div>
<div style="margin-top: 20px">
<a-form
layout="vertical"
:model="modalForm"
ref="formRef"
:rules="rulesModle"
>
<a-row :span="24" :gutter="24">
<a-col :span="12">
<a-form-item name="host">
<template #label>
<span>本地地址 </span>
<a-tooltip
title="绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0"
>
<img
class="img-style"
:src="getImage('/init-home/mark.png')"
/>
</a-tooltip>
</template>
<a-input
v-model:value="modalForm.host"
:disabled="true"
/>
</a-form-item>
<a-form-item name="publicHost">
<template #label>
<span>公网地址 </span>
<a-tooltip
title="对外提供访问的地址内网环境时填写服务器的内网IP地址"
>
<img
class="img-style"
:src="getImage('/init-home/mark.png')"
/>
</a-tooltip>
</template>
<a-input v-model:value="modalForm.publicHost">
</a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item name="port">
<template #label>
<span>本地端口 </span>
<a-tooltip title="监听指定端口的请求">
<img
class="img-style"
:src="getImage('/init-home/mark.png')"
/>
</a-tooltip>
</template>
<a-select v-model:value="modalForm.port">
<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">
<template #label>
<span>公网端口 </span>
<a-tooltip title="对外提供访问的端口">
<img
class="img-style"
:src="getImage('/init-home/mark.png')"
/>
</a-tooltip>
</template>
<a-input-number
v-model:value="modalForm.publicPort"
style="width: 100%"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>
</a-modal>
</template>
<script lang="ts" setup>
import { getImage } from '@/utils/comm';
import {
saveNetwork,
getResourcesCurrent,
saveProtocol,
getProtocol,
saveAccessConfig,
saveProduct,
saveDevice,
changeDeploy,
deployDevice,
} from '@/api/initHome';
import { modalState } from '../data/interface';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import type { Rule } from 'ant-design-vue/es/form';
import { message } from 'ant-design-vue/es';
const formRef = ref();
/**
* 初始化数据状态
*/
const flag = ref<boolean>(false);
const visible = ref<boolean>(false);
/**
* 初始化弹窗表单数据
*/
const modalForm = reactive<modalState>({
host: '0.0.0.0',
port: '',
publicHost: '',
publicPort: null,
});
/**
* 校验官网地址
*/
const validateUrl = async (_rule: Rule, value: string) => {
if (!value) {
return Promise.reject('请输入公网地址');
} else {
var reg = new RegExp(
/^(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('请输入正确的公网地址');
}
return Promise.resolve();
}
};
/**
* 校验数字
*/
const validateNumber = async (_rule: Rule, value: string) => {
if (!value) {
return Promise.reject('请输入公网端口');
} else {
if (Number(value) < 1 || Number(value) > 65535) {
return Promise.reject('请输入1~65535的正整数');
}
return Promise.resolve();
}
};
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',
},
],
});
/**
* 初始数据弹窗点击事件
*/
const showModal = () => {
if (flag.value) {
flag.value = false;
} else {
visible.value = true;
}
};
/**
* 表单取消事件
*/
const cancel = () => {
formRef.value.resetFields();
};
/**
* 提交初始化数据
*/
const initialization = reactive({
isSucessInit: 0,
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,
}));
},
});
/**
* 提交初始数据表单
*/
const saveCurrentData = () => {
return new Promise(async (resolve) => {
if (!flag.value) {
return resolve(true);
}
formRef.value
.validate()
.then(async () => {
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) {
await changeDeploy(product.result.id);
await deployDevice(device.result.id);
}
resolve(device.status == 200);
} catch (e) {
resolve(false);
}
})
.catch((error: ValidateErrorEntity<modalState>) => {
resolve(false);
});
});
};
const { optionPorts, isSucessInit } = toRefs(initialization);
const save = () => {
message.success('保存成功');
flag.value = true;
visible.value = false;
};
/**
* 初始化
*/
initialization.getCurrentPort();
defineExpose({
save: saveCurrentData,
});
</script>
<style lang="less" scoped>
.init-data-img {
width: 300px;
}
.modal-style {
.data-content {
background: rgb(236, 237, 238);
.data-p-style {
padding: 10px;
}
}
}
</style>

80
src/views/init-home/Menu/index.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<div class="menu-style">
<div class="menu-img">
<img :src="getImage('/init-home/menu.png')" />
</div>
<div class="menu-info">
<b>系统初始化{{ count }}个菜单</b>
<div>初始化后的菜单可在“菜单管理”页面进行维护管理</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { getImage } from '@/utils/comm';
import BaseMenu from '../data/baseMenu';
import { getSystemPermission } from '@/api/initHome'
/**
* 获取菜单数据
*/
const menuDatas = reactive({
count: 0,
/**
* 获取当前系统权限信息
*/
getSystemPermissionData: async () => {
const resp = await getSystemPermission();
if (resp.status === 200) {
const newTree = menuDatas.filterMenu(
resp.result.map((item: any) => JSON.parse(item).id),
BaseMenu,
);
const _count = menuDatas.menuCount(newTree);
menuDatas.count = _count;
}
},
/**
* 过滤菜单
*/
filterMenu: (permissions: string[], menus: any[]) => {
return menus.filter((item) => {
let isShow = false;
if (item.showPage && item.showPage.length) {
isShow = item.showPage.every((pItem: any) => {
return permissions.includes(pItem);
});
}
if (item.children) {
item.children = menuDatas.filterMenu(
permissions,
item.children,
);
}
return isShow || !!item.children?.length;
});
},
/**
* 计算菜单数量
*/
menuCount: (menus: any[]) => {
return menus.reduce((pre, next) => {
let _count = 1;
if (next.children) {
_count = menuDatas.menuCount(next.children);
}
return pre + _count;
}, 0);
},
});
const { count } = toRefs(menuDatas);
menuDatas.getSystemPermissionData();
</script>
<style lang="less" scoped>
.menu-style {
display: flex;
align-items: center;
.menu-img {
margin-right: 16px;
}
}
</style>

204
src/views/init-home/Role/index.vue Normal file
View File

@ -0,0 +1,204 @@
<template>
<div class="init-home-role">
<a-checkbox-group @change="getCheckValue">
<div class="init-home-role-content">
<div
class="role-item role-item-1"
:style="
keys.includes('device')
? 'background-color: #f5f5f5;'
: ''
"
>
<div class="role-item-title">
<a-checkbox :value="ROLEKEYS.device"></a-checkbox>
<div class="role-title">设备接入岗</div>
</div>
<div class="role-item-content"></div>
<div class="role-item-footer">
该角色负责设备接入模块的维护管理
</div>
</div>
<div
class="role-item role-item-2"
:style="
keys.includes('link')
? 'background-color: #f5f5f5;'
: ''
"
>
<div class="role-item-title">
<a-checkbox :value="ROLEKEYS.link"></a-checkbox>
<div class="role-title">运维管理岗</div>
</div>
<div class="role-item-content"></div>
<div class="role-item-footer">
该角色负责系统运维模块的维护管理
</div>
</div>
<div
class="role-item role-item-3"
:style="
keys.includes('complex')
? 'background-color: #f5f5f5;'
: ''
"
>
<div class="role-item-title">
<a-checkbox :value="ROLEKEYS.complex"></a-checkbox>
<div class="role-title">综合管理岗</div>
</div>
<div class="role-item-content"></div>
<div class="role-item-footer">
该角色负责系统运维和设备接入模块的维护管理
</div>
</div>
</div>
</a-checkbox-group>
</div>
</template>
<script lang="ts" setup>
import RoleMenuData, { ROLEKEYS, RoleData } from '../data/RoleData';
import { updateRoleMenu, addRole, getRoleMenu } from '@/api/initHome';
/**
* 角色勾选数据
*/
const keys = ref([]);
/**
* 获取角色选择数据
*/
const getCheckValue = (val: any) => {
keys.value = val;
};
/**
* 根据菜单找角色
*/
const 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 = findMenuByRole(item.children, code);
if (childrenItem) {
_item = childrenItem;
return true;
}
return false;
}
return null;
});
return _item;
};
/**
* 保存角色
*/
const 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 = 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 = 2;
}
});
});
};
defineExpose({
submitRole: addRoleData,
});
</script>
<style lang="less" scoped>
.init-home-role {
.init-home-role-content {
display: flex;
grid-gap: 24px;
gap: 24px;
}
.role-item-1 {
background-image: url(/images/init-home/role1.png);
}
.role-item-2 {
background-image: url(/images/init-home/role2.png);
}
.role-item-3 {
background-image: url(/images/init-home/role3.png);
}
.role-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 30px;
padding: 24px;
background-repeat: no-repeat;
background-position: 50%;
background-size: 370px;
border: 1px solid #f5f5f5;
.role-item-title {
display: flex;
.role-title {
flex: 1 1 auto;
font-weight: 700;
font-size: 16px;
}
}
.role-item-content {
width: 250px;
height: 260px;
margin-top: 24px;
}
.role-item-footer {
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
color: #999;
font-size: 12px;
text-align: center;
}
}
}
</style>

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

@ -16,7 +16,8 @@ export interface formState {
apikey: string; // 高德 API key
basePath: string; // 系统后台访问的URL
logo: string; // 系统logo
icon: string; // 浏览器页签
ico: string; // 浏览器页签
background:string; //登录背景
}
/**

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

File diff suppressed because it is too large Load Diff

2297
src/views/link/Type/Detail/index.vue
View File

File diff suppressed because it is too large Load Diff

7
src/views/link/Type/data.ts
View File

@ -10,7 +10,7 @@ export const Configuration = {
username: '',
password: '',
topicPrefix: '',
maxMessageSize: '',
maxMessageSize: 8192,
certId: undefined,
privateKeyAlias: '',
clientId: '',
@ -76,7 +76,6 @@ export const VisibleData = {
length: ['LENGTH_FIELD'],
offset: ['LENGTH_FIELD'],
little: ['LENGTH_FIELD'],
secureSpan12: ['MQTT_CLIENT', 'MQTT_SERVER'],
};
export const ParserTypeOptions = [
@ -226,8 +225,8 @@ export const Rules = {
],
maxMessageSize: [
{
max: 64,
message: '最大可输入64个字符',
required: true,
message: '请输入最大消息长度',
},
],
secure: [

4
src/views/link/Type/type.d.ts vendored
View File

@ -10,7 +10,7 @@ export interface ConfigurationType {
username: string;
password: string;
topicPrefix: string;
maxMessageSize: string;
maxMessageSize: string | number;
certId: string | undefined;
privateKeyAlias: string;
clientId: string;
@ -21,7 +21,7 @@ export interface ConfigurationType {
size: string;
length: string;
offset: string;
little: string | boolean;
little: string | boolean | undefined;
};
}

316
src/views/system/Api/components/ApiDoes.vue Normal file
View File

@ -0,0 +1,316 @@
<template>
<div class="api-does-container">
<div class="top">
<h5>{{ selectApi.summary }}</h5>
<div class="input">
<InputCard :value="selectApi.method" />
<a-input :value="selectApi?.url" disabled />
</div>
</div>
<p>
<span class="label">请求数据类型</span>
<span>{{
getContent(selectApi.requestBody) ||
'application/x-www-form-urlencoded'
}}</span>
<span class="label">响应数据类型</span>
<span>{{ `["/"]` }}</span>
</p>
<div class="api-card">
<h5>请求参数</h5>
<div class="content">
<JTable
:columns="requestCard.columns"
:dataSource="requestCard.tableData"
noPagination
model="TABLE"
>
<template #required="slotProps">
<span>{{ Boolean(slotProps.row.required) + '' }}</span>
</template>
<template #type="slotProps">
<span>{{ slotProps.row.schema.type }}</span>
</template>
</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>
<script setup lang="ts">
import type { apiDetailsType } from '../typing';
import InputCard from './InputCard.vue';
import { PropType } from 'vue';
const props = defineProps({
selectApi: {
type: Object as PropType<apiDetailsType>,
required: true,
},
schemas: {
type: Object,
required: true,
},
});
const { selectApi } = toRefs(props);
type tableCardType = {
columns: object[];
tableData: object[];
activeKey?: any;
getData?: any;
};
const requestCard = reactive<tableCardType>({
columns: [
{
title: '参数名',
dataIndex: 'name',
key: 'name',
},
{
title: '参数说明',
dataIndex: 'description',
key: 'description',
},
{
title: '请求类型',
dataIndex: 'in',
key: 'in',
},
{
title: '是否必须',
dataIndex: 'required',
key: 'required',
scopedSlots: true,
},
{
title: '参数类型',
dataIndex: 'type',
key: 'type',
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);
},
});
const getContent = (data: any) => {
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>
.api-does-container {
.top {
width: 100%;
h5 {
font-weight: bold;
font-size: 16px;
}
.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;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: #1d39c4;
border-radius: 0 3px 3px 0;
content: ' ';
}
}
.content {
padding-left: 10px;
:deep(.jtable-body) {
padding: 0;
.jtable-body-header {
display: none;
}
}
}
}
}
</style>

51
src/views/system/Api/components/ApiTest.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<div class="api-test-container">
<div class="top">
<h5>{{ selectApi.summary }}</h5>
<div class="input">
<InputCard :value="selectApi.method" />
<a-input :value="selectApi?.url" disabled />
<span class="send">发送</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { apiDetailsType } from '../typing';
import InputCard from './InputCard.vue';
import { PropType } from 'vue';
const props = defineProps({
selectApi: {
type: Object as PropType<apiDetailsType>,
required: true,
},
});
const { selectApi } = toRefs(props);
</script>
<style lang="less" scoped>
.api-test-container {
.top {
width: 100%;
h5 {
font-weight: bold;
font-size: 16px;
}
.input {
display: flex;
.send {
width: 65px;
padding: 4px 15px;
font-size: 14px;
color: #fff;
background-color: #1890ff;
}
}
}
}
</style>

65
src/views/system/Api/components/ChooseApi.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="choose-api-container">
<JTable
:columns="columns"
:dataSource="props.tableData"
:rowSelection="rowSelection"
noPagination
model="TABLE"
>
<template #url="slotProps">
<span
style="color: #1d39c4; cursor: pointer"
@click="jump(slotProps.row)"
>{{ slotProps.row.url }}</span
>
</template>
</JTable>
<a-button type="primary">保存</a-button>
</div>
</template>
<script setup lang="ts">
import { TableProps } from 'ant-design-vue';
const emits = defineEmits(['update:clickApi'])
const props = defineProps({
tableData: Array,
clickApi: Object
});
const columns = [
{
title: 'API',
dataIndex: 'url',
key: 'url',
scopedSlots: true,
},
{
title: '说明',
dataIndex: 'summary',
key: 'summary',
},
];
const rowSelection: TableProps['rowSelection'] = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
};
const jump = (row:object) => {
emits('update:clickApi',row)
};
</script>
<style lang="less" scoped>
.choose-api-container {
height: 100%;
:deep(.jtable-body-header) {
display: none !important;
}
}
</style>

35
src/views/system/Api/components/InputCard.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<span class="input-card-container" :class="props.value">
{{ props.value?.toLocaleUpperCase() }}
</span>
</template>
<script setup lang="ts">
const props = defineProps({
value: String,
});
</script>
<style lang="less" scoped>
.input-card-container {
padding: 4px 15px;
font-size: 14px;
color: #fff;
&.get {
background-color: #1890ff;
}
&.put {
background-color: #fa8c16;
}
&.post {
background-color: #52c41a;
}
&.delete {
background-color: #f5222d;
}
&.patch {
background-color: #a0d911;
}
}
</style>

96
src/views/system/Api/components/LeftTree.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<a-tree
:tree-data="treeData"
@select="clickSelectItem"
showLine
class="left-tree-container"
>
<template #title="{ name }">
{{ name }}
</template>
</a-tree>
</template>
<script setup lang="ts">
import { TreeProps } from 'ant-design-vue';
import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
import { treeNodeTpye } from '../typing';
const emits = defineEmits(['select']);
const treeData = ref<TreeProps['treeData']>([]);
const getTreeData = () => {
let tree: treeNodeTpye[] = [];
getTreeOne_api().then((resp: any) => {
tree = resp.urls.map((item: any) => ({
...item,
key: item.url,
}));
const allPromise = tree.map((item) => getTreeTwo_api(item.name));
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, node.node?.parent.node.schemas);
};
onMounted(() => {
getTreeData();
});
const combData = (dataSource: object) => {
const apiList: treeNodeTpye[] = [];
const keys = Object.keys(dataSource);
keys.forEach((key) => {
const method = Object.keys(dataSource[key] || {})[0];
const name = dataSource[key][method].tags[0];
let apiObj: treeNodeTpye | undefined = apiList.find(
(item) => item.name === name,
);
if (apiObj) {
apiObj.apiList?.push({
url: key,
method: dataSource[key],
});
} else {
apiObj = {
name,
key: name,
apiList: [
{
url: key,
method: dataSource[key],
},
],
};
apiList.push(apiObj);
}
});
return apiList;
};
</script>
<style lang="less">
.left-tree-container {
border-right: 1px solid #e9e9e9;
height: calc(100vh - 150px);
overflow-y: auto;
.ant-tree-list {
.ant-tree-list-holder-inner {
.ant-tree-switcher-noop {
display: none !important;
}
}
}
}
</style>

84
src/views/system/Api/index.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<a-card class="api-page-container">
api
<a-row :gutter="24">
<a-col :span="5">
<LeftTree @select="treeSelect" />
</a-col>
<a-col :span="19">
<ChooseApi
v-show="!selectedApi.url"
v-model:click-api="selectedApi"
:table-data="tableData"
/>
<div
class="api-details"
v-show="selectedApi.url && tableData.length > 0"
>
<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" :schemas="schemas" />
</a-tab-pane>
<a-tab-pane key="test" tab="调试">
<ApiTest :select-api="selectedApi" />
</a-tab-pane>
</a-tabs>
</div>
</a-col>
</a-row>
</a-card>
</template>
<script setup lang="ts" name="apiPage">
import type { treeNodeTpye, apiObjType, apiDetailsType } from './typing';
import LeftTree from './components/LeftTree.vue';
import ChooseApi from './components/ChooseApi.vue';
import ApiDoes from './components/ApiDoes.vue';
import ApiTest from './components/ApiTest.vue';
const tableData = ref([]);
const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
schemas.value = nodeSchemas
if (!node.apiList) return;
const apiList: apiObjType[] = node.apiList as apiObjType[];
const table: any = [];
// 将对象形式的数据转换为表格需要的形式
apiList?.forEach((apiItem) => {
const { method, url } = apiItem;
for (const key in method) {
if (Object.prototype.hasOwnProperty.call(method, key)) {
table.push({
...method[key],
url,
method: key,
});
}
}
});
tableData.value = table;
};
const activeKey = ref('does');
const schemas = ref({});
const initSelectedApi:apiDetailsType = {
url: '',
method: '',
summary: '',
parameters: [],
responses: {},
requestBody: {}
};
const selectedApi = ref<apiDetailsType>(initSelectedApi);
watch(tableData, () => (selectedApi.value = initSelectedApi));
</script>
<style scoped>
.api-page-container {
height: 100%;
}
</style>

0
src/views/system/apiPage/index.d.ts → src/views/system/Api/typing.d.ts vendored
View File

316
src/views/system/Apply/Api/components/ApiDoes.vue Normal file
View File

@ -0,0 +1,316 @@
<template>
<div class="api-does-container">
<div class="top">
<h5>{{ selectApi.summary }}</h5>
<div class="input">
<InputCard :value="selectApi.method" />
<a-input :value="selectApi?.url" disabled />
</div>
</div>
<p>
<span class="label">请求数据类型</span>
<span>{{
getContent(selectApi.requestBody) ||
'application/x-www-form-urlencoded'
}}</span>
<span class="label">响应数据类型</span>
<span>{{ `["/"]` }}</span>
</p>
<div class="api-card">
<h5>请求参数</h5>
<div class="content">
<JTable
:columns="requestCard.columns"
:dataSource="requestCard.tableData"
noPagination
model="TABLE"
>
<template #required="slotProps">
<span>{{ Boolean(slotProps.row.required) + '' }}</span>
</template>
<template #type="slotProps">
<span>{{ slotProps.row.schema.type }}</span>
</template>
</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>
<script setup lang="ts">
import type { apiDetailsType } from '../typing';
import InputCard from './InputCard.vue';
import { PropType } from 'vue';
const props = defineProps({
selectApi: {
type: Object as PropType<apiDetailsType>,
required: true,
},
schemas: {
type: Object,
required: true,
},
});
const { selectApi } = toRefs(props);
type tableCardType = {
columns: object[];
tableData: object[];
activeKey?: any;
getData?: any;
};
const requestCard = reactive<tableCardType>({
columns: [
{
title: '参数名',
dataIndex: 'name',
key: 'name',
},
{
title: '参数说明',
dataIndex: 'description',
key: 'description',
},
{
title: '请求类型',
dataIndex: 'in',
key: 'in',
},
{
title: '是否必须',
dataIndex: 'required',
key: 'required',
scopedSlots: true,
},
{
title: '参数类型',
dataIndex: 'type',
key: 'type',
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);
},
});
const getContent = (data: any) => {
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>
.api-does-container {
.top {
width: 100%;
h5 {
font-weight: bold;
font-size: 16px;
}
.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;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: #1d39c4;
border-radius: 0 3px 3px 0;
content: ' ';
}
}
.content {
padding-left: 10px;
:deep(.jtable-body) {
padding: 0;
.jtable-body-header {
display: none;
}
}
}
}
}
</style>

51
src/views/system/Apply/Api/components/ApiTest.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<div class="api-test-container">
<div class="top">
<h5>{{ selectApi.summary }}</h5>
<div class="input">
<InputCard :value="selectApi.method" />
<a-input :value="selectApi?.url" disabled />
<span class="send">发送</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { apiDetailsType } from '../typing';
import InputCard from './InputCard.vue';
import { PropType } from 'vue';
const props = defineProps({
selectApi: {
type: Object as PropType<apiDetailsType>,
required: true,
},
});
const { selectApi } = toRefs(props);
</script>
<style lang="less" scoped>
.api-test-container {
.top {
width: 100%;
h5 {
font-weight: bold;
font-size: 16px;
}
.input {
display: flex;
.send {
width: 65px;
padding: 4px 15px;
font-size: 14px;
color: #fff;
background-color: #1890ff;
}
}
}
}
</style>

65
src/views/system/Apply/Api/components/ChooseApi.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="choose-api-container">
<JTable
:columns="columns"
:dataSource="props.tableData"
:rowSelection="rowSelection"
noPagination
model="TABLE"
>
<template #url="slotProps">
<span
style="color: #1d39c4; cursor: pointer"
@click="jump(slotProps.row)"
>{{ slotProps.row.url }}</span
>
</template>
</JTable>
<a-button type="primary">保存</a-button>
</div>
</template>
<script setup lang="ts">
import { TableProps } from 'ant-design-vue';
const emits = defineEmits(['update:clickApi'])
const props = defineProps({
tableData: Array,
clickApi: Object
});
const columns = [
{
title: 'API',
dataIndex: 'url',
key: 'url',
scopedSlots: true,
},
{
title: '说明',
dataIndex: 'summary',
key: 'summary',
},
];
const rowSelection: TableProps['rowSelection'] = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
};
const jump = (row:object) => {
emits('update:clickApi',row)
};
</script>
<style lang="less" scoped>
.choose-api-container {
height: 100%;
:deep(.jtable-body-header) {
display: none !important;
}
}
</style>

35
src/views/system/Apply/Api/components/InputCard.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<span class="input-card-container" :class="props.value">
{{ props.value?.toLocaleUpperCase() }}
</span>
</template>
<script setup lang="ts">
const props = defineProps({
value: String,
});
</script>
<style lang="less" scoped>
.input-card-container {
padding: 4px 15px;
font-size: 14px;
color: #fff;
&.get {
background-color: #1890ff;
}
&.put {
background-color: #fa8c16;
}
&.post {
background-color: #52c41a;
}
&.delete {
background-color: #f5222d;
}
&.patch {
background-color: #a0d911;
}
}
</style>

96
src/views/system/Apply/Api/components/LeftTree.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<a-tree
:tree-data="treeData"
@select="clickSelectItem"
showLine
class="left-tree-container"
>
<template #title="{ name }">
{{ name }}
</template>
</a-tree>
</template>
<script setup lang="ts">
import { TreeProps } from 'ant-design-vue';
import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
import { treeNodeTpye } from '../typing';
const emits = defineEmits(['select']);
const treeData = ref<TreeProps['treeData']>([]);
const getTreeData = () => {
let tree: treeNodeTpye[] = [];
getTreeOne_api().then((resp: any) => {
tree = resp.urls.map((item: any) => ({
...item,
key: item.url,
}));
const allPromise = tree.map((item) => getTreeTwo_api(item.name));
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, node.node?.parent.node.schemas);
};
onMounted(() => {
getTreeData();
});
const combData = (dataSource: object) => {
const apiList: treeNodeTpye[] = [];
const keys = Object.keys(dataSource);
keys.forEach((key) => {
const method = Object.keys(dataSource[key] || {})[0];
const name = dataSource[key][method].tags[0];
let apiObj: treeNodeTpye | undefined = apiList.find(
(item) => item.name === name,
);
if (apiObj) {
apiObj.apiList?.push({
url: key,
method: dataSource[key],
});
} else {
apiObj = {
name,
key: name,
apiList: [
{
url: key,
method: dataSource[key],
},
],
};
apiList.push(apiObj);
}
});
return apiList;
};
</script>
<style lang="less">
.left-tree-container {
border-right: 1px solid #e9e9e9;
height: calc(100vh - 150px);
overflow-y: auto;
.ant-tree-list {
.ant-tree-list-holder-inner {
.ant-tree-switcher-noop {
display: none !important;
}
}
}
}
</style>

84
src/views/system/Apply/Api/index.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<a-card class="api-page-container">
apply/api
<a-row :gutter="24">
<a-col :span="5">
<LeftTree @select="treeSelect" />
</a-col>
<a-col :span="19">
<ChooseApi
v-show="!selectedApi.url"
v-model:click-api="selectedApi"
:table-data="tableData"
/>
<div
class="api-details"
v-show="selectedApi.url && tableData.length > 0"
>
<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" :schemas="schemas" />
</a-tab-pane>
<a-tab-pane key="test" tab="调试">
<ApiTest :select-api="selectedApi" />
</a-tab-pane>
</a-tabs>
</div>
</a-col>
</a-row>
</a-card>
</template>
<script setup lang="ts" name="apiPage">
import type { treeNodeTpye, apiObjType, apiDetailsType } from './typing';
import LeftTree from './components/LeftTree.vue';
import ChooseApi from './components/ChooseApi.vue';
import ApiDoes from './components/ApiDoes.vue';
import ApiTest from './components/ApiTest.vue';
const tableData = ref([]);
const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
schemas.value = nodeSchemas
if (!node.apiList) return;
const apiList: apiObjType[] = node.apiList as apiObjType[];
const table: any = [];
// 将对象形式的数据转换为表格需要的形式
apiList?.forEach((apiItem) => {
const { method, url } = apiItem;
for (const key in method) {
if (Object.prototype.hasOwnProperty.call(method, key)) {
table.push({
...method[key],
url,
method: key,
});
}
}
});
tableData.value = table;
};
const activeKey = ref('does');
const schemas = ref({});
const initSelectedApi:apiDetailsType = {
url: '',
method: '',
summary: '',
parameters: [],
responses: {},
requestBody: {}
};
const selectedApi = ref<apiDetailsType>(initSelectedApi);
watch(tableData, () => (selectedApi.value = initSelectedApi));
</script>
<style scoped>
.api-page-container {
height: 100%;
}
</style>

25
src/views/system/Apply/Api/typing.d.ts vendored Normal file
View File

@ -0,0 +1,25 @@
export type treeNodeTpye = {
name: string;
key: string;
schemas?:object;
link?: string;
apiList?: object[];
children?: treeNodeTpye[];
};
export type methodType = {
[key: string]: object
}
export type apiObjType = {
url: string,
method: methodType
}
export type apiDetailsType = {
url: string;
method: string;
summary: string;
parameters: any[];
requestBody?: any;
responses:object;
}

398
src/views/system/DataSource/Management/index.vue Normal file
View File

@ -0,0 +1,398 @@
<template>
<a-card class="mangement-container">
<div class="left">
<a-input-search
v-model:value="leftData.searchValue"
placeholder="请输入"
style="margin-bottom: 24px"
/>
<!-- 使用v-if用于解决异步加载数据后不展开的问题 -->
<a-tree
v-if="leftData.treeData.length > 0"
showLine
defaultExpandAll
:tree-data="leftData.treeData"
v-model:selectedKeys="leftData.selectedKeys"
@select="leftData.onSelect"
>
<template #title="{ dataRef }">
<div
v-if="dataRef.root"
:style="`
justify-content: space-between;
display: flex;
align-items: center;
`"
>
<span>
{{ dataRef.title }}
</span>
<AIcon
type="PlusOutlined"
style="color: #1d39c4"
@click="leftData.addTable"
/>
</div>
<span v-else>
{{ dataRef.title }}
</span>
</template>
</a-tree>
</div>
<div class="right">
<div class="btns">
<a-button type="primary" @click="table.clickSave"
>保存</a-button
>
</div>
<JTable
ref="tableRef"
:columns="table.columns"
model="TABLE"
:dataSource="table.data"
>
<template #name="slotProps">
<a-input
:disabled="slotProps.scale !== undefined"
v-model:value="slotProps.name"
placeholder="请输入名称"
:maxlength="64"
/>
</template>
<template #type="slotProps">
<a-input
v-model:value="slotProps.type"
placeholder="请输入类型"
:maxlength="64"
/>
</template>
<template #length="slotProps">
<a-input-number
v-model:value="slotProps.length"
:min="0"
:max="99999"
/>
</template>
<template #precision="slotProps">
<a-input-number
v-model:value="slotProps.precision"
:min="0"
:max="99999"
/>
</template>
<template #notnull="slotProps">
<a-radio-group
v-model:value="slotProps.notnull"
button-style="solid"
>
<a-radio-button :value="true">是</a-radio-button>
<a-radio-button :value="false">否</a-radio-button>
</a-radio-group>
</template>
<template #comment="slotProps">
<a-input
v-model:value="slotProps.comment"
placeholder="请输入说明"
/>
</template>
<template #action="slotProps">
<PermissionButton
:uhasPermission="`{permission}:delete`"
type="link"
:tooltip="{ title: '删除' }"
:popConfirm="{
title: `确认删除`,
onConfirm: () => table.clickDel(slotProps),
}"
:disabled="slotProps.status"
>
<AIcon type="DeleteOutlined" />
</PermissionButton>
</template>
</JTable>
<a-botton class="add-row" @click="table.addRow">
<AIcon type="PlusOutlined" /> 新增行
</a-botton>
</div>
</a-card>
<div class="dialogs">
<a-modal
v-model:visible="dialog.visible"
title="新增"
@ok="dialog.handleOk"
>
<a-form :model="dialog.form" ref="addFormRef">
<a-form-item
label="名称"
name="name"
:rules="[
{
required: true,
message: '请输入名称',
trigger: 'change',
},
{
max: 64,
message: '最多可输入64个字符',
trigger: 'change',
},
{
pattern: /^[0-9].*$/,
message: '不能以数字开头',
trigger: 'change',
},
{
pattern: /^\w+$/,
message: '名称只能由数字、字母、下划线、中划线组成',
trigger: 'change',
},
]"
>
<a-input
v-model:value="dialog.form.name"
placeholder="请输入名称"
/>
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script setup lang="ts" name="Management">
import {
getDataSourceInfo_api,
rdbTree_api,
rdbTables_api,
saveTable_api,
} from '@/api/system/dataSource';
import { FormInstance, message } from 'ant-design-vue';
import { DataNode } from 'ant-design-vue/lib/tree';
import type { dbColumnType, dictItemType, sourceItemType } from '../typing';
const id = useRoute().query.id as string;
const info = reactive({
data: {} as sourceItemType,
init: () => {
id &&
getDataSourceInfo_api(id).then((resp: any) => {
info.data = resp.result;
});
},
});
const leftData = reactive({
searchValue: '',
sourceTree: [] as dictItemType[],
treeData: [] as DataNode[],
selectedKeys: [] as string[],
oldKey: '',
init: () => {
leftData.getTree();
watch(
[
() => leftData.searchValue,
() => leftData.sourceTree,
() => info.data,
],
(n) => {
if (leftData.sourceTree.length < 1 || !info.data.shareConfig)
return;
let filterArr = [];
if (leftData.searchValue) {
filterArr = leftData.sourceTree.filter((item) =>
item.name.includes(n[0]),
);
} else filterArr = leftData.sourceTree;
leftData.treeData = [
{
title: info.data.shareConfig.schema,
key: info.data.shareConfig.schema,
root: true,
children: filterArr.map((item) => ({
title: item.name,
key: item.name,
})),
},
];
leftData.selectedKeys = [filterArr[0].name];
leftData.onSelect([filterArr[0].name]);
},
{},
);
},
getTree: () => {
rdbTree_api(id)
.then((resp: any) => {
leftData.sourceTree = resp.result;
})
.catch(() => {});
},
onSelect: (selectedKeys: string[], e?: any) => {
if (e?.node?.root) {
leftData.selectedKeys = [leftData.oldKey];
return;
}
leftData.oldKey = selectedKeys[0];
const key = selectedKeys[0];
table.getTabelData(key);
},
addTable: (e: Event) => {
e.stopPropagation();
},
});
const table = reactive({
columns: [
{
title: '列名',
dataIndex: 'name',
key: 'name',
scopedSlots: true,
},
{
title: '类型',
dataIndex: 'type',
key: 'type',
scopedSlots: true,
},
{
title: '长度',
dataIndex: 'length',
key: 'length',
scopedSlots: true,
},
{
title: '精度',
dataIndex: 'precision',
key: 'precision',
scopedSlots: true,
},
{
title: '不能为空',
dataIndex: 'notnull',
key: 'notnull',
scopedSlots: true,
},
{
title: '说明',
dataIndex: 'comment',
key: 'comment',
scopedSlots: true,
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
scopedSlots: true,
},
],
data: [] as dbColumnType[],
getTabelData: (key: string) => {
rdbTables_api(id, key).then((resp: any) => {
table.data = resp.result.columns;
});
},
addRow: () => {
const initData: dbColumnType = {
precision: 0,
length: 0,
notnull: false,
type: '',
comment: '',
name: '',
};
table.data.push(initData);
},
clickSave: () => {
const params = {
name: leftData.selectedKeys[0],
columns: table.data,
};
saveTable_api(id, params).then(() => {
table.getTabelData(params.name);
});
},
clickDel: (row: any) => {},
});
const addFormRef = ref<FormInstance>();
const dialog = reactive({
visible: false,
form: {
name: '',
},
handleOk: () => {
addFormRef.value &&
addFormRef.value.validate().then(() => {
const name = dialog.form.name;
leftData.sourceTree.unshift({
id: name,
name,
});
leftData.oldKey = name;
leftData.selectedKeys = [name];
table.data = [];
});
},
});
init();
function init() {
info.init();
leftData.init();
}
</script>
<style lang="less" scoped>
.mangement-container {
padding: 24px;
background-color: transparent;
:deep(.ant-card-body) {
display: flex;
background-color: #fff;
.left {
flex-basis: 280px;
padding-right: 24px;
box-sizing: border-box;
.ant-tree-treenode {
width: 100%;
.ant-tree-switcher-noop {
display: none;
}
.ant-tree-node-content-wrapper {
width: 100%;
.ant-tree-title {
width: 100%;
}
}
&:first-child .ant-tree-node-selected {
background-color: transparent;
}
}
}
.right {
width: calc(100% - 280px);
box-sizing: border-box;
border-left: 1px solid #f0f0f0;
.btns {
display: flex;
justify-content: right;
padding: 0px 24px;
}
.add-row {
display: block;
text-align: center;
width: 100%;
cursor: pointer;
}
}
}
}
</style>

40
src/views/system/DataSource/components/EditDialog.vue
View File

@ -34,9 +34,9 @@
>
<a-select
v-model:value="form.data.typeId"
style="width: 120px"
:options="form.typeOptions"
placeholder="请选择类型"
:disabled="!!form.data.id"
/>
</a-form-item>
</a-col>
@ -83,7 +83,7 @@
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-row :gutter="24" v-show="form.data.typeId">
<a-col :span="12">
<a-form-item
:name="['shareConfig', 'username']"
@ -179,28 +179,42 @@
</template>
<script setup lang="ts">
import { getDataTypeDict_api } from '@/api/system/dataSource';
import {
getDataTypeDict_api,
saveDataSource_api,
} from '@/api/system/dataSource';
import { FormInstance, message } from 'ant-design-vue';
import type { dictItemType, optionItemType, sourceItemType } from '../typing';
const emits = defineEmits(['confirm']);
// 弹窗相关
const dialog = {
title: '',
loading: ref<boolean>(false),
visible: ref<boolean>(false),
handleOk: () => {},
handleOk: () => {
formRef.value?.validate().then(() => {
form.submit();
});
},
// 打开弹窗
changeVisible: (row: sourceItemType) => {
openDialog: (row: sourceItemType) => {
if (row.id) dialog.title = '编辑数据源';
else dialog.title = '新增数据源';
form.data = { ...row };
dialog.visible.value = true;
nextTick(() => {
formRef.value?.clearValidate();
dialog.visible.value = true;
});
},
};
// 将打开弹窗的操作暴露给父组件
defineExpose({
openDialog: dialog.changeVisible,
openDialog: dialog.openDialog,
});
const formRef = ref<FormInstance>();
const form = reactive({
data: {
shareConfig: {},
@ -217,8 +231,16 @@ const form = reactive({
}));
});
},
submit: () => {
dialog.loading.value = true;
saveDataSource_api(form.data)
.then(() => {
message.success('操作成功');
emits('confirm');
dialog.visible.value = false;
})
.finally(() => (dialog.loading.value = false));
},
});
form.getTypeOption();
</script>
<style scoped></style>

20
src/views/system/DataSource/index.vue
View File

@ -66,6 +66,7 @@
`/system/DataSource/Management?id=${slotProps.id}`,
)
"
:disabled="slotProps?.typeId === 'rabbitmq' || !table.getRowStatus(slotProps)"
>
<AIcon type="icon-ziyuankuguanli" />
</PermissionButton>
@ -131,10 +132,11 @@ import {
getDataSourceList_api,
getDataTypeDict_api,
changeStatus_api,
delDataSource_api
} from '@/api/system/dataSource';
import { message } from 'ant-design-vue';
const permission = 'system/Relationship';
const permission = 'system/DataSource';
const router = useRouter();
@ -226,6 +228,7 @@ const table = {
title: '说明',
dataIndex: 'description',
key: 'description',
ellipsis: true,
},
{
title: '状态',
@ -240,6 +243,7 @@ const table = {
key: 'action',
scopedSlots: true,
width: '200px',
fixed:'right'
},
],
@ -265,16 +269,16 @@ const table = {
},
// 打开编辑弹窗
openDialog: (row: sourceItemType | {}) => {
editDialogRef.value.openDialog({shareConfig:{},...row});
editDialogRef.value.openDialog({ shareConfig: {}, ...row });
},
// 删除
clickDel: (row: sourceItemType) => {
// delRelation_api(row.id).then((resp: any) => {
// if (resp.status === 200) {
// tableRef.value?.reload();
// message.success('操作成功!');
// }
// });
delDataSource_api(row.id as string).then((resp: any) => {
if (resp.status === 200) {
tableRef.value?.reload();
message.success('操作成功!');
}
});
},
clickChangeStatus: (row: sourceItemType) => {
const status = row.state.value === 'enabled' ? '_disable' : '_enable';

31
src/views/system/DataSource/typing.d.ts vendored
View File

@ -1,6 +1,7 @@
export type dictItemType = {
id: string,
name: string
name: string,
children?: dictItemType
}
export type optionItemType = {
label: string,
@ -11,14 +12,26 @@ export type sourceItemType = {
name: string,
state: { text: string, value: "enabled" | 'disabled' },
typeId: string,
shareConfig:{
url:string,
adminUrl:string,
addresses:string,
username:string,
password:string,
virtualHost:string,
schema:string
shareConfig: {
url: string,
adminUrl: string,
addresses: string,
username: string,
password: string,
virtualHost: string,
schema: string
}
description: string
}
// 数据库字段
export type dbColumnType = {
previousName?: string,
type: String,
length: number,
precision: number,
notnull: boolean,
comment: string,
name: string,
scale?:number
}

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

@ -73,7 +73,7 @@
</template>
<script setup lang="ts">
import { apiDetailsType } from '../index';
import type { apiDetailsType } from '../typing';
import InputCard from './InputCard.vue';
import { PropType } from 'vue';
@ -200,7 +200,7 @@ const respParamsCard = reactive<tableCardType>({
const schemaName = responseStatusCard.tableData.find(
(item: any) => item.code === code,
).schema;
)?.schema;
const schemas = toRaw(props.schemas);
function findData(schemaName: string) {
if (!schemaName || !schemas[schemaName]) {

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

@ -12,7 +12,7 @@
</template>
<script setup lang="ts">
import { apiDetailsType } from '../index';
import { apiDetailsType } from '../typing';
import InputCard from './InputCard.vue';
import { PropType } from 'vue';

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

@ -15,7 +15,7 @@
import { TreeProps } from 'ant-design-vue';
import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
import { treeNodeTpye } from '../index';
import { treeNodeTpye } from '../typing';
const emits = defineEmits(['select']);

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

@ -33,7 +33,7 @@
</template>
<script setup lang="ts" name="apiPage">
import { treeNodeTpye, apiObjType, apiDetailsType } from './index';
import type { treeNodeTpye, apiObjType, apiDetailsType } from './typing';
import LeftTree from './components/LeftTree.vue';
import ChooseApi from './components/ChooseApi.vue';
import ApiDoes from './components/ApiDoes.vue';

25
src/views/system/apiPage/typing.d.ts vendored Normal file
View File

@ -0,0 +1,25 @@
export type treeNodeTpye = {
name: string;
key: string;
schemas?:object;
link?: string;
apiList?: object[];
children?: treeNodeTpye[];
};
export type methodType = {
[key: string]: object
}
export type apiObjType = {
url: string,
method: methodType
}
export type apiDetailsType = {
url: string;
method: string;
summary: string;
parameters: any[];
requestBody?: any;
responses:object;
}

4
vite.config.ts
View File

@ -86,7 +86,9 @@ export default defineConfig(({ mode}) => {
// target: 'http://192.168.32.244:8881',
// target: 'http://47.112.135.104:5096', // opcua
// target: 'http://120.77.179.54:8844', // 120测试
target: 'http://47.108.63.174:8845', // 测试
// target: 'http://47.108.63.174:8845', // 测试
target: 'http://120.77.179.54:8844',
ws: 'ws://120.77.179.54:8844',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}

7
yarn.lock
View File

@ -956,11 +956,16 @@
dependencies:
moment "*"
"@types/node@*", "@types/node@^18.11.17":
"@types/node@*":
version "18.11.18"
resolved "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz"
integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
"@types/node@^18.14.0":
version "18.14.0"
resolved "https://registry.npmmirror.com/@types/node/-/node-18.14.0.tgz#94c47b9217bbac49d4a67a967fdcdeed89ebb7d0"
integrity sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A==
"@types/normalize-package-data@^2.4.0":
version "2.4.1"
resolved "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"