Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
commit
e5e096b0d0
|
@ -314,3 +314,12 @@ export const getGatewayDetail = (id: string) => server.get(`/gateway/device/${id
|
|||
* @returns 单位列表
|
||||
*/
|
||||
export const getUnit = () => server.get<UnitType[]>(`/protocol/units`)
|
||||
|
||||
/**
|
||||
* 设备功能-执行
|
||||
* @param id 设备id
|
||||
* @param action
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const execute = (id: string, action: string, data: any) => server.post(`/device/invoked/${id}/function/${action}`, data)
|
|
@ -97,7 +97,7 @@ export const _import = (configId: any, params: any) => server.get(`/network/card
|
|||
* @param format 类型 xlsx、csv
|
||||
* @param params
|
||||
*/
|
||||
export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, 'blob');
|
||||
export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, { responseType: 'blob' });
|
||||
|
||||
/**
|
||||
* 验证iccid
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
import server from '@/utils/request';
|
||||
/**
|
||||
* 查询等级
|
||||
*/
|
||||
export const queryLevel = () => server.get('/alarm/config/default/level');
|
|
@ -59,6 +59,20 @@ onMounted(() => {
|
|||
emit('update:modelValue', value);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 代码格式化
|
||||
*/
|
||||
const editorFormat = () => {
|
||||
if (!instance) return;
|
||||
instance.getAction('editor.action.formatDocument')?.run();
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
setTimeout(() => {
|
||||
editorFormat();
|
||||
}, 300);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { ProductItem } from "@/views/device/Product/typings";
|
||||
import { defineStore } from "pinia";
|
||||
import { detail} from '@/api/device/product'
|
||||
import { detail , getDeviceNumber} from '@/api/device/product'
|
||||
import encodeQuery from "@/utils/encodeQuery";
|
||||
|
||||
export const useProductStore = defineStore({
|
||||
id: 'product',
|
||||
|
@ -16,9 +17,13 @@ export const useProductStore = defineStore({
|
|||
},
|
||||
async refresh(id: string) {
|
||||
const resp = await detail(id)
|
||||
const res = await getDeviceNumber(encodeQuery({ terms: { productId: id } }))
|
||||
if(resp.status === 200){
|
||||
this.current = resp.result
|
||||
this.detail = resp.result
|
||||
if(res.status === 200){
|
||||
this.current.count = res.result
|
||||
}
|
||||
}
|
||||
},
|
||||
setTabActiveKey(key: string) {
|
||||
|
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<a-tabs v-model="activeKey" tab-position="left">
|
||||
<a-tab-pane
|
||||
v-for="func in newFunctions"
|
||||
:key="func.id"
|
||||
:tab="func.name"
|
||||
>
|
||||
<a-row :gutter="30">
|
||||
<a-col :span="15">
|
||||
<MonacoEditor
|
||||
:ref="`monacoEditor${func.id}`"
|
||||
v-model="func.json"
|
||||
theme="vs-dark"
|
||||
style="height: 400px"
|
||||
/>
|
||||
<div class="editor-btn">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleExecute(func)"
|
||||
>
|
||||
执行
|
||||
</a-button>
|
||||
<a-button
|
||||
type="default"
|
||||
@click="handleClear(func)"
|
||||
>
|
||||
清空
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="9">
|
||||
<h6>执行结果:</h6>
|
||||
<span class="execute-result">
|
||||
{{ func.executeResult }}
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ComponentInternalInstance } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import { execute } from '@/api/device/instance';
|
||||
|
||||
const instanceStore = useInstanceStore();
|
||||
const route = useRoute();
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const activeKey = ref('');
|
||||
// 物模型数据
|
||||
const metadata = computed(() => JSON.parse(instanceStore.detail.metadata));
|
||||
|
||||
// 设备功能数据处理
|
||||
const newFunctions = computed(() => {
|
||||
const result: any = [];
|
||||
metadata.value.functions?.forEach((func: any) => {
|
||||
const obj = {};
|
||||
const jsonData = func.inputs || func.properties;
|
||||
for (const jsonItem of jsonData) {
|
||||
const type = jsonItem.valueType ? jsonItem.valueType.type : '-';
|
||||
obj[jsonItem.id] = setInitValue(type, jsonItem['json']);
|
||||
}
|
||||
|
||||
result.push({
|
||||
...func,
|
||||
json: JSON.stringify(obj),
|
||||
executeResult: '',
|
||||
});
|
||||
});
|
||||
// console.log('newFunctions: ', result);
|
||||
return result;
|
||||
});
|
||||
|
||||
/**
|
||||
* 根据数据类型, 赋初始值
|
||||
* @param type
|
||||
* @param json
|
||||
*/
|
||||
const setInitValue = (type: string, json?: any) => {
|
||||
let initVal: any = '';
|
||||
if (['int', 'long', 'float', 'double'].includes(type)) {
|
||||
initVal = 0;
|
||||
} else if (
|
||||
['string', 'date', 'enum', 'password', 'geoPoint'].includes(type)
|
||||
) {
|
||||
initVal = '';
|
||||
} else if (['boolean'].includes(type)) {
|
||||
initVal = false;
|
||||
} else if (['array'].includes(type)) {
|
||||
initVal = [];
|
||||
} else if (['object'].includes(type)) {
|
||||
initVal = {};
|
||||
if (json) {
|
||||
const childObj = json['properties'][0];
|
||||
initVal[childObj.id] = setInitValue(childObj.valueType.type);
|
||||
}
|
||||
}
|
||||
return initVal;
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行
|
||||
*/
|
||||
const handleExecute = async (func: any) => {
|
||||
const { success, result } = await execute(
|
||||
route.params.id as string,
|
||||
func.id,
|
||||
JSON.parse(func.json),
|
||||
);
|
||||
if (!success) return;
|
||||
message.success('操作成功');
|
||||
func.executeResult = result instanceof Array ? result[0] : result;
|
||||
proxy?.$forceUpdate();
|
||||
};
|
||||
/**
|
||||
* 清空
|
||||
*/
|
||||
const handleClear = (func: any) => {
|
||||
func.json = '';
|
||||
proxy?.$forceUpdate();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wrapper {
|
||||
.editor-btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.execute-result {
|
||||
display: inline-block;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
padding: 4px 11px;
|
||||
min-height: 140px;
|
||||
width: 100%;
|
||||
max-height: 450px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,233 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="tips">
|
||||
<a-space>
|
||||
<AIcon type="QuestionCircleOutlined" />
|
||||
<span>精简模式下参数只支持输入框的方式录入</span>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-tabs v-model="activeKey" tab-position="left">
|
||||
<a-tab-pane
|
||||
v-for="func in newFunctions"
|
||||
:key="func.id"
|
||||
:tab="func.name"
|
||||
>
|
||||
<a-row :gutter="30">
|
||||
<a-col :span="15">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="func.table"
|
||||
:pagination="false"
|
||||
rowKey="id"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.dataIndex === 'type'">
|
||||
<span>{{ record.type }}</span>
|
||||
<a-tooltip v-if="record.type === 'object'">
|
||||
<template slot="title">
|
||||
请按照json格式输入
|
||||
</template>
|
||||
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
:style="{
|
||||
marginLeft: '5px',
|
||||
cursor: 'help',
|
||||
}"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'value'">
|
||||
<ValueItem
|
||||
:ref="`valueItemRef${record.id}`"
|
||||
v-model:modelValue="record.value"
|
||||
:itemType="record.type"
|
||||
:options="
|
||||
record.type === 'enum'
|
||||
? (
|
||||
record?.options
|
||||
?.elements || []
|
||||
).map((item:any) => ({
|
||||
label: item.text,
|
||||
value: item.value,
|
||||
}))
|
||||
: record.type === 'boolean'
|
||||
? [
|
||||
{
|
||||
label: '是',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: '否',
|
||||
value: false,
|
||||
},
|
||||
]
|
||||
: undefined
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="editor-btn">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleExecute(func)"
|
||||
>
|
||||
执行
|
||||
</a-button>
|
||||
<a-button
|
||||
type="default"
|
||||
@click="handleClear(func)"
|
||||
>
|
||||
清空
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="9">
|
||||
<h6>执行结果:</h6>
|
||||
<span class="execute-result">
|
||||
{{ func.executeResult }}
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ComponentInternalInstance } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import { execute } from '@/api/device/instance';
|
||||
|
||||
const instanceStore = useInstanceStore();
|
||||
const route = useRoute();
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const activeKey = ref('');
|
||||
// 物模型数据
|
||||
const metadata = computed(() => JSON.parse(instanceStore.detail.metadata));
|
||||
const columns = ref([
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '输入类型',
|
||||
dataIndex: 'type',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '值',
|
||||
dataIndex: 'value',
|
||||
},
|
||||
]);
|
||||
|
||||
// 设备功能数据处理
|
||||
const newFunctions = computed(() => {
|
||||
const result: any = [];
|
||||
metadata.value.functions?.forEach((func: any) => {
|
||||
const array = [];
|
||||
const tableData = func.inputs || func.properties;
|
||||
for (const tableItem of tableData) {
|
||||
const type = tableItem.valueType ? tableItem.valueType.type : '-';
|
||||
if (type === 'boolean') {
|
||||
tableItem.valueType.elements = [
|
||||
{
|
||||
text: tableItem.valueType.trueText,
|
||||
value: String(tableItem.valueType.trueValue),
|
||||
},
|
||||
{
|
||||
text: tableItem.valueType.falseText,
|
||||
value: String(tableItem.valueType.falseValue),
|
||||
},
|
||||
];
|
||||
}
|
||||
array.push({
|
||||
id: tableItem.id,
|
||||
name: tableItem.name,
|
||||
type: type,
|
||||
format: tableItem.valueType
|
||||
? tableItem.valueType.format
|
||||
: undefined,
|
||||
options: tableItem.valueType
|
||||
? tableItem.valueType.elements
|
||||
: undefined,
|
||||
json:
|
||||
type === 'object'
|
||||
? tableItem['json']?.['properties'][0]
|
||||
: undefined,
|
||||
value: undefined,
|
||||
});
|
||||
}
|
||||
|
||||
result.push({
|
||||
...func,
|
||||
table: array,
|
||||
executeResult: '',
|
||||
});
|
||||
});
|
||||
// console.log('newFunctions: ', result)
|
||||
return result;
|
||||
});
|
||||
|
||||
/**
|
||||
* 执行
|
||||
*/
|
||||
const handleExecute = async (func: any) => {
|
||||
const obj = {};
|
||||
func.table.forEach((item: any) => {
|
||||
if (item.type === 'object') {
|
||||
obj[item.id] = JSON.parse(item.value);
|
||||
} else {
|
||||
obj[item.id] = item.value;
|
||||
}
|
||||
});
|
||||
const { success, result } = await execute(
|
||||
route.params.id as string,
|
||||
func.id,
|
||||
obj,
|
||||
);
|
||||
if (!success) return;
|
||||
message.success('操作成功');
|
||||
func.executeResult = result instanceof Array ? result[0] : result;
|
||||
proxy?.$forceUpdate();
|
||||
};
|
||||
/**
|
||||
* 清空
|
||||
*/
|
||||
const handleClear = (func: any) => {
|
||||
func.table.forEach((item: any) => {
|
||||
item.value = undefined;
|
||||
proxy.$refs[`valueItemRef${item.id}`][0].myValue = undefined;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wrapper {
|
||||
.tips {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.editor-btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.execute-result {
|
||||
display: inline-block;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
padding: 4px 11px;
|
||||
min-height: 140px;
|
||||
width: 100%;
|
||||
max-height: 450px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<a-card>
|
||||
<a-empty
|
||||
v-if="!metadata || (metadata && !metadata.functions)"
|
||||
style="margin-top: 100px"
|
||||
>
|
||||
<template #description>
|
||||
暂无数据,请配置
|
||||
<a @click="emits('onJump', 'Metadata')">物模型</a>
|
||||
</template>
|
||||
</a-empty>
|
||||
<template v-else>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="Simple" tab="精简模式" />
|
||||
<a-tab-pane key="Advance" tab="高级模式" />
|
||||
</a-tabs>
|
||||
<component :is="tabs[activeKey]" />
|
||||
</template>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import Simple from './components/Simple.vue';
|
||||
import Advance from './components/Advance.vue';
|
||||
|
||||
const instanceStore = useInstanceStore();
|
||||
const emits = defineEmits(['onJump']);
|
||||
|
||||
const metadata = computed(() => JSON.parse(instanceStore.detail.metadata));
|
||||
|
||||
const activeKey = ref('Simple');
|
||||
const tabs = {
|
||||
Simple,
|
||||
Advance,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
|
@ -34,7 +34,7 @@
|
|||
<template #extra>
|
||||
<img @click="handleRefresh" :src="getImage('/device/button.png')" style="margin-right: 20px; cursor: pointer;" />
|
||||
</template>
|
||||
<component :is="tabs[instanceStore.tabActiveKey]" v-bind="{ type: 'device' }" />
|
||||
<component :is="tabs[instanceStore.tabActiveKey]" v-bind="{ type: 'device' }" @onJump="onTabChange" />
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
@ -45,6 +45,7 @@ import Running from './Running/index.vue'
|
|||
import Metadata from '../../components/Metadata/index.vue';
|
||||
import ChildDevice from './ChildDevice/index.vue';
|
||||
import Diagnose from './Diagnose/index.vue'
|
||||
import Function from './Function/index.vue'
|
||||
import { _deploy, _disconnect } from '@/api/device/instance'
|
||||
import { message } from 'ant-design-vue';
|
||||
import { getImage } from '@/utils/comm';
|
||||
|
@ -70,6 +71,10 @@ const list = [
|
|||
key: 'Metadata',
|
||||
tab: '物模型'
|
||||
},
|
||||
{
|
||||
key: 'Function',
|
||||
tab: '设备功能'
|
||||
},
|
||||
{
|
||||
key: 'ChildDevice',
|
||||
tab: '子设备'
|
||||
|
@ -85,7 +90,8 @@ const tabs = {
|
|||
Metadata,
|
||||
Running,
|
||||
ChildDevice,
|
||||
Diagnose
|
||||
Diagnose,
|
||||
Function
|
||||
}
|
||||
|
||||
watch(
|
||||
|
|
|
@ -29,10 +29,10 @@
|
|||
}}</a-button>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">{{
|
||||
productStore.current.createTime
|
||||
moment(productStore.current.createTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="更新时间">{{
|
||||
productStore.current.modifyTime
|
||||
moment(productStore.current.modifyTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}</a-descriptions-item>
|
||||
|
||||
<a-descriptions-item label="说明" :span="3">
|
||||
|
@ -47,6 +47,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { useProductStore } from '@/store/product';
|
||||
import Save from '../../Save/index.vue';
|
||||
import moment from 'moment';
|
||||
import {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
|
|
|
@ -60,7 +60,7 @@
|
|||
<!-- 显示md文件内容 -->
|
||||
<div
|
||||
v-if="config?.document"
|
||||
v-html="config?.document"
|
||||
v-html="markdownToHtml"
|
||||
></div>
|
||||
</div>
|
||||
<div class="item-style">
|
||||
|
@ -385,10 +385,11 @@ const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);
|
|||
const visible = ref<boolean>(false);
|
||||
const listData = ref<string[]>([]);
|
||||
const access = ref({});
|
||||
const config = ref({});
|
||||
const config = ref<any>({});
|
||||
const metadata = ref<ConfigMetadata[]>([]);
|
||||
const dataSource = ref<string[]>([]);
|
||||
const storageList = ref<any[]>([]);
|
||||
const markdownToHtml = shallowRef('');
|
||||
const current = ref({
|
||||
id: productStore.current?.accessId,
|
||||
name: productStore.current?.accessName,
|
||||
|
@ -805,6 +806,9 @@ const getConfigDetail = async (
|
|||
(resp) => {
|
||||
if (resp.status === 200) {
|
||||
config.value = resp.result;
|
||||
if (config.value?.document) {
|
||||
markdownToHtml.value = marked(config.value.document);
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<page-container
|
||||
:tabList="list"
|
||||
@back="onBack"
|
||||
:tabActiveKey="productStore.active"
|
||||
:tabActiveKey="productStore.tabActiveKey"
|
||||
@tabChange="onTabChange"
|
||||
>
|
||||
<template #title>
|
||||
|
@ -129,6 +129,7 @@ watch(
|
|||
() => route.params.id,
|
||||
(newId) => {
|
||||
if (newId) {
|
||||
console.log(newId);
|
||||
productStore.tabActiveKey = 'Info';
|
||||
productStore.refresh(newId as string);
|
||||
}
|
||||
|
|
|
@ -45,8 +45,9 @@ const handleOk = () => {
|
|||
console.log(props.data);
|
||||
_export(type.value, props.data).then((res: any) => {
|
||||
if (res) {
|
||||
const blob = new Blob([res.data], { type: type.value });
|
||||
const blob = new Blob([res], { type: type.value });
|
||||
const url = URL.createObjectURL(blob);
|
||||
console.log(url);
|
||||
downloadFileByUrl(
|
||||
url,
|
||||
`物联卡管理-${moment(new Date()).format(
|
||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
@ -1,7 +1,7 @@
|
|||
const configuration = {
|
||||
export const Configuration = {
|
||||
parserType: undefined,
|
||||
port: undefined,
|
||||
host: '0.0.0.0',
|
||||
host: undefined,
|
||||
publicPort: '',
|
||||
publicHost: '',
|
||||
remoteHost: '',
|
||||
|
@ -11,7 +11,7 @@ const configuration = {
|
|||
password: '',
|
||||
topicPrefix: '',
|
||||
maxMessageSize: '',
|
||||
certId: '',
|
||||
certId: undefined,
|
||||
privateKeyAlias: '',
|
||||
clientId: '',
|
||||
parserConfiguration: {
|
||||
|
@ -29,24 +29,21 @@ export const FormStates = {
|
|||
name: '',
|
||||
type: 'UDP',
|
||||
shareCluster: true,
|
||||
// configuration,
|
||||
description: '',
|
||||
};
|
||||
|
||||
export const FormStates2 = {
|
||||
serverId: undefined,
|
||||
configuration,
|
||||
configuration: Configuration,
|
||||
};
|
||||
|
||||
|
||||
|
||||
// export const DefaultCluster = {
|
||||
|
||||
// }
|
||||
export const DefaultFormStates = {
|
||||
...FormStates,
|
||||
cluster: [{ ...FormStates2, id: 1 }],
|
||||
};
|
||||
export const TCPList = [
|
||||
'TCP_SERVER',
|
||||
'WEB_SOCKET_SERVER',
|
||||
'HTTP_SERVER',
|
||||
'MQTT_SERVER',
|
||||
];
|
||||
export const UDPList = ['UDP', 'COAP_SERVER'];
|
||||
|
||||
const VisibleMost = [
|
||||
'COAP_SERVER',
|
||||
|
@ -63,6 +60,7 @@ export const VisibleData = {
|
|||
host: VisibleMost,
|
||||
publicPort: VisibleMost,
|
||||
publicHost: VisibleMost,
|
||||
serverId: ['MQTT_CLIENT'],
|
||||
remoteHost: ['MQTT_CLIENT'],
|
||||
remotePort: ['MQTT_CLIENT'],
|
||||
secure: ['TCP_SERVER', 'UDP', 'COAP_SERVER'],
|
||||
|
@ -114,3 +112,193 @@ export const Validator = {
|
|||
),
|
||||
regOnlyNumber: new RegExp(/^\d+$/),
|
||||
};
|
||||
|
||||
export const Rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择类型',
|
||||
},
|
||||
],
|
||||
shareCluster: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择集群',
|
||||
},
|
||||
],
|
||||
host: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择本地地址',
|
||||
},
|
||||
],
|
||||
port: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择本地端口',
|
||||
},
|
||||
],
|
||||
publicHost: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入公网地址',
|
||||
},
|
||||
{
|
||||
pattern: Validator.regIp || Validator.regDomain,
|
||||
message: '请输入IP或者域名',
|
||||
},
|
||||
],
|
||||
publicPort: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入公网端口',
|
||||
},
|
||||
{
|
||||
pattern: Validator.regOnlyNumber,
|
||||
message: '请输入1-65535之间的正整数',
|
||||
},
|
||||
],
|
||||
remoteHost: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入远程地址',
|
||||
},
|
||||
{
|
||||
pattern: Validator.regIp || Validator.regDomain,
|
||||
message: '请输入IP或者域名',
|
||||
},
|
||||
],
|
||||
remotePort: [
|
||||
{
|
||||
required: true,
|
||||
message: '输入远程端口',
|
||||
},
|
||||
{
|
||||
pattern: Validator.regOnlyNumber,
|
||||
message: '请输入1-65535之间的正整数',
|
||||
},
|
||||
],
|
||||
clientId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入ClientId',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
],
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
],
|
||||
topicPrefix: [
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
],
|
||||
maxMessageSize: [
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
],
|
||||
secure: [
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
certId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择证书',
|
||||
},
|
||||
],
|
||||
privateKeyAlias: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入私钥别名',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
],
|
||||
parserType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择粘拆包规则',
|
||||
},
|
||||
],
|
||||
delimited: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分隔符',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
],
|
||||
lang: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择脚本语言',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
],
|
||||
script: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入脚本',
|
||||
},
|
||||
],
|
||||
size: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入长度值',
|
||||
},
|
||||
],
|
||||
length: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择长度',
|
||||
},
|
||||
],
|
||||
offset: [
|
||||
{
|
||||
pattern: Validator.regOnlyNumber,
|
||||
message: '请输入0-65535之间的正整数',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
@ -1,31 +1,38 @@
|
|||
export interface Form2 {
|
||||
id: number;
|
||||
serverId: string | undefined;
|
||||
configuration: {
|
||||
parserType: undefined;
|
||||
port: undefined;
|
||||
host: string;
|
||||
publicPort: string;
|
||||
publicHost: string;
|
||||
remoteHost: string;
|
||||
remotePort: string;
|
||||
secure: boolean;
|
||||
username: string;
|
||||
password: string;
|
||||
topicPrefix: string;
|
||||
maxMessageSize: string;
|
||||
certId: string;
|
||||
privateKeyAlias: string;
|
||||
clientId: string;
|
||||
parserConfiguration: {
|
||||
delimited: string;
|
||||
lang: string;
|
||||
script: string;
|
||||
size: string;
|
||||
length: string;
|
||||
offset: string;
|
||||
little: string | boolean;
|
||||
};
|
||||
export interface ConfigurationType {
|
||||
parserType: string | undefined;
|
||||
port: string | undefined;
|
||||
host: string | undefined;;
|
||||
publicPort: string;
|
||||
publicHost: string;
|
||||
remoteHost: string;
|
||||
remotePort: string;
|
||||
secure: boolean;
|
||||
username: string;
|
||||
password: string;
|
||||
topicPrefix: string;
|
||||
maxMessageSize: string;
|
||||
certId: string | undefined;
|
||||
privateKeyAlias: string;
|
||||
clientId: string;
|
||||
parserConfiguration: {
|
||||
delimited: string;
|
||||
lang: string;
|
||||
script: string;
|
||||
size: string;
|
||||
length: string;
|
||||
offset: string;
|
||||
little: string | boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export interface FormDataType {
|
||||
name: string;
|
||||
type: string;
|
||||
shareCluster: boolean;
|
||||
description: string;
|
||||
}
|
||||
export interface FormData2Type {
|
||||
id?: number | string;
|
||||
serverId?: string | undefined;
|
||||
configuration: ConfigurationType;
|
||||
}
|
||||
|
|
|
@ -355,8 +355,6 @@ const getDetail = async () => {
|
|||
// console.log('res: ', res);
|
||||
formData.value = res.result;
|
||||
formData.value.channel = res.result.provider;
|
||||
console.log('formData.value: ', formData.value);
|
||||
// validate();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
@ -368,8 +366,8 @@ onMounted(() => {
|
|||
*/
|
||||
const btnLoading = ref<boolean>(false);
|
||||
const handleSubmit = () => {
|
||||
console.log('formData.value: ', formData.value);
|
||||
validate()
|
||||
const form = useForm(formData.value, formRules.value);
|
||||
form.validate()
|
||||
.then(async () => {
|
||||
btnLoading.value = true;
|
||||
let res;
|
||||
|
@ -378,7 +376,6 @@ const handleSubmit = () => {
|
|||
} else {
|
||||
res = await DeviceApi.update(formData.value);
|
||||
}
|
||||
// console.log('res: ', res);
|
||||
if (res?.success) {
|
||||
message.success('保存成功');
|
||||
router.back();
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:gridColumn="3"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-space>
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:gridColumn="3"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-space>
|
||||
|
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<page-container :tabList="list" @tabChange="onTabChange">
|
||||
<div v-if="true">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="14">
|
||||
<div class="alarm-level">
|
||||
<a-card :headStyle="{ borderBottom: 'none' }" :bodyStyle="{paddingTop:0}">
|
||||
<template #title>
|
||||
<div class="alarmLevelTitle">告警级别配置</div>
|
||||
</template>
|
||||
<div
|
||||
v-for="(item, i) in levels"
|
||||
:key="i"
|
||||
class="alarmInputItem"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
:src="
|
||||
getImage(`/alarm/alarm${i + 1}.png`)
|
||||
"
|
||||
alt=""
|
||||
/>
|
||||
<span>{{ `级别${i + 1}` }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<a-input type="text" v-model:value="item.title" :maxlength=64></a-input>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="10">123</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { queryLevel } from '@/api/rule-engine/config';
|
||||
const list = ref([
|
||||
{
|
||||
key: 'config',
|
||||
tab: '告警级别',
|
||||
},
|
||||
{
|
||||
key: 'io',
|
||||
tab: '数据流转',
|
||||
},
|
||||
]);
|
||||
interface levelsObj {
|
||||
level: number;
|
||||
title?: string;
|
||||
}
|
||||
let levels = ref<levelsObj[]>([]);
|
||||
const getAlarmLevel = () => {
|
||||
queryLevel().then((res: any) => {
|
||||
if (res.status == 200) {
|
||||
levels.value = res.result.levels;
|
||||
}
|
||||
});
|
||||
};
|
||||
getAlarmLevel();
|
||||
const onTabChange = (e: string) => {};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.alarm-level {
|
||||
padding: 24px;
|
||||
}
|
||||
.alarmLevelTitle {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.alarmLevelTitle::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: #1d39c4;
|
||||
border-radius: 0 3px 3px 0;
|
||||
content: ' ';
|
||||
}
|
||||
.alarmInputItem {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,26 @@
|
|||
import { BaseItem } from '@/utils/typings';
|
||||
|
||||
type LevelItem = {
|
||||
level: number;
|
||||
title: string;
|
||||
};
|
||||
|
||||
type IOConfigItem = {
|
||||
id?: string;
|
||||
address: string;
|
||||
topic: string;
|
||||
username: string;
|
||||
password: string;
|
||||
};
|
||||
type IOItem = {
|
||||
alarmConfigId: string;
|
||||
sourceType: string;
|
||||
config: Partial<{
|
||||
type: string;
|
||||
dataSourceId: string;
|
||||
config: Partial<IOConfigItem>;
|
||||
}>;
|
||||
exchangeType: 'consume' | 'producer'; //订阅|推送
|
||||
state: 'disable' | 'enabled'; //禁用|正常
|
||||
description: string;
|
||||
} & BaseItem;
|
Loading…
Reference in New Issue