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

This commit is contained in:
easy 2023-02-20 19:58:57 +08:00
commit e5e096b0d0
22 changed files with 1988 additions and 4409 deletions

View File

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

View File

@ -97,7 +97,7 @@ export const _import = (configId: any, params: any) => server.get(`/network/card
* @param format xlsxcsv
* @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

View File

@ -0,0 +1,5 @@
import server from '@/utils/request';
/**
*
*/
export const queryLevel = () => server.get('/alarm/config/default/level');

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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);
}
}
},
);

View File

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

View File

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

View File

@ -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之间的正整数',
},
],
};

View File

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

View File

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

View File

@ -13,6 +13,7 @@
sorts: [{ name: 'createTime', order: 'desc' }],
}"
:params="params"
:gridColumn="3"
>
<template #headerTitle>
<a-space>

View File

@ -13,6 +13,7 @@
sorts: [{ name: 'createTime', order: 'desc' }],
}"
:params="params"
:gridColumn="3"
>
<template #headerTitle>
<a-space>

View File

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

View File

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