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

Merge pull request #66 from jetlinks/dev-hub 

fix: 修复网络组件、设备接入网关、协议管理部分bug
This commit is contained in:
胡彪 2023-03-21 18:08:45 +08:00 committed by GitHub
parent 7e2ea45ad8 d5b0a2b4d8
commit 0f796972f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 108 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/link/DashBoard/components/Cpu.vue
View File

@ -8,7 +8,7 @@
:allowClear="false"
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
v-model="data.time"
v-model:value="data.time"
>
<template #suffixIcon
><AIcon type="CalendarOutlined"
@ -51,7 +51,7 @@ m
<script lang="ts" setup name="Cpu">
import * as echarts from 'echarts';
import { dashboard } from '@/api/link/dashboard';
import moment from 'moment';
import dayjs from 'dayjs';
import {
getTimeFormat,
getTimeByType,
@ -75,6 +75,8 @@ const pickerTimeChange = () => {
const getCPUEcharts = async (val: any) => {
loading.value = true;
console.log(224, val);
const res: any = await dashboard(defulteParamsData('cpu', val));
if (res.success) {
const _cpuOptions = {};
@ -84,10 +86,11 @@ const getCPUEcharts = async (val: any) => {
const value = item.data.value;
const nodeID = item.data.clusterNodeId;
_cpuXAxis.add(
moment(value.timestamp).format(
dayjs(value.timestamp).format(
getTimeFormat(data.value.type),
),
);
if (!_cpuOptions[nodeID]) {
_cpuOptions[nodeID] = [];
}
@ -163,10 +166,9 @@ const handleCpuOptions = (optionsData: any, xAxis: any) => {
watch(
() => data.value.type,
(val) => {
const endTime = moment(new Date());
const startTime = getTimeByType(val);
data.value.time = [startTime, endTime];
(value) => {
const date = getTimeByType(value);
data.value.time = [dayjs(date), dayjs(new Date())];
},
{ immediate: true, deep: true },
);

13
src/views/link/DashBoard/components/Jvm.vue
View File

@ -8,7 +8,7 @@
:allowClear="false"
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
v-model="data.time"
v-model:value="data.time"
>
<template #suffixIcon
><AIcon type="CalendarOutlined"
@ -51,7 +51,7 @@
<script lang="ts" setup name="Jvm">
import * as echarts from 'echarts';
import { dashboard } from '@/api/link/dashboard';
import moment from 'moment';
import dayjs from 'dayjs';
import {
getTimeFormat,
getTimeByType,
@ -95,7 +95,7 @@ const getJVMEcharts = async (val: any) => {
_jvmOptions[nodeID] = [];
}
_jvmXAxis.add(
moment(value.timestamp).format(
dayjs(value.timestamp).format(
getTimeFormat(data.value.type),
),
);
@ -168,10 +168,9 @@ const handleJVMOptions = (optionsData: any, xAxis: any) => {
watch(
() => data.value.type,
(val) => {
const endTime = moment(new Date());
const startTime = getTimeByType(val);
data.value.time = [startTime, endTime];
(value) => {
const date = getTimeByType(value);
data.value.time = [dayjs(date), dayjs(new Date())];
},
{ immediate: true, deep: true },
);

11
src/views/link/DashBoard/components/Network.vue
View File

@ -33,7 +33,7 @@
:allowClear="false"
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
v-model="data.time.time"
v-model:value="data.time.time"
@change="pickerTimeChange"
>
<template #suffixIcon
@ -65,7 +65,7 @@ import {
areaStyle,
networkParams,
} from './tool.ts';
import moment from 'moment';
import dayjs from 'dayjs';
import * as echarts from 'echarts';
import { DataType } from '../typings.d';
@ -79,7 +79,7 @@ const data = ref<DataType>({
},
});
const isEmpty = ref(false);
const pickerTimeChange = () => {
const pickerTimeChange = (value: any) => {
data.value.time.type = undefined;
};
@ -173,9 +173,8 @@ const handleNetworkOptions = (optionsData: any, xAxis: any) => {
watch(
() => data.value.time.type,
(value) => {
const endTime = moment(new Date());
const startTime = getTimeByType(value);
data.value.time.time = [startTime, endTime];
const date = getTimeByType(value);
data.value.time.time = [dayjs(date), dayjs(new Date())];
},
{ immediate: true, deep: true },
);

32
src/views/link/DashBoard/components/tool.ts
View File

@ -1,7 +1,7 @@
import moment from 'moment';
import dayjs from 'dayjs';
import * as echarts from 'echarts';
export const getInterval = (type) => {
export const getInterval = (type: string) => {
switch (type) {
case 'year':
return '30d';
@ -14,7 +14,7 @@ export const getInterval = (type) => {
return '1h';
}
};
export const getTimeFormat = (type) => {
export const getTimeFormat = (type: string) => {
switch (type) {
case 'year':
return 'YYYY-MM-DD';
@ -28,22 +28,22 @@ export const getTimeFormat = (type) => {
}
};
export const getTimeByType = (type) => {
export const getTimeByType = (type: string) => {
switch (type) {
case 'hour':
return moment().subtract(1, 'hours');
return dayjs().subtract(1, 'hours');
case 'week':
return moment().subtract(6, 'days');
return dayjs().subtract(6, 'days');
case 'month':
return moment().subtract(29, 'days');
return dayjs().subtract(29, 'days');
case 'year':
return moment().subtract(365, 'days');
return dayjs().subtract(365, 'days');
default:
return moment().startOf('day');
return dayjs().startOf('day');
}
};
export const arrayReverse = (data) => {
export const arrayReverse = (data: string) => {
const newArray = [];
for (let i = data.length - 1; i >= 0; i--) {
newArray.push(data[i]);
@ -51,7 +51,7 @@ export const arrayReverse = (data) => {
return newArray;
};
export const networkParams = (val) => [
export const networkParams = (val: any) => [
{
dashboard: 'systemMonitor',
object: 'network',
@ -61,12 +61,12 @@ export const networkParams = (val) => [
params: {
type: val.type,
interval: getInterval(val.time.type),
from: moment(val.time.time[0]).valueOf(),
to: moment(val.time.time[1]).valueOf(),
from: dayjs(val.time.time[0]).valueOf(),
to: dayjs(val.time.time[1]).valueOf(),
},
},
];
export const defulteParamsData = (group, val) => [
export const defulteParamsData = (group: any, val: any) => [
{
dashboard: 'systemMonitor',
object: 'stats',
@ -74,8 +74,8 @@ export const defulteParamsData = (group, val) => [
dimension: 'history',
group,
params: {
from: moment(val.time[0]).valueOf(),
to: moment(val.time[1]).valueOf(),
from: dayjs(val.time[0]).valueOf(),
to: dayjs(val.time[1]).valueOf(),
},
},
];

6
src/views/link/Protocol/index.vue
View File

@ -125,6 +125,7 @@
style="padding: 0px"
@click="i.onClick"
type="link"
:danger="i.key === 'delete'"
:hasPermission="'link/Protocol:' + i.key"
>
<template #icon
@ -160,6 +161,7 @@ const columns = [
key: 'id',
search: {
type: 'string',
defaultTermType: 'eq',
},
width: 200,
fixed: 'left',
@ -230,6 +232,9 @@ const getActions = (
{
key: 'delete',
text: '删除',
tooltip: {
title: '删除',
},
popConfirm: {
title: '确认删除?',
onConfirm: async () => {
@ -281,7 +286,6 @@ const handleSearch = (e: any) => {
};
</script>
<style lang="less" scoped>
.card-item-content {
min-height: 100px;

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

@ -95,13 +95,23 @@
>
<j-collapse-panel
:key="cluster.id"
:header="`#${index + 1}.节点`"
:header="
cluster.serverId
? cluster.serverId
: `#${index + 1}.配置信息`
"
collapsible="header"
>
<template #extra v-if="!shareCluster">
<AIcon
@click="removeCluster(cluster)"
type="DeleteOutlined"
/>
<j-popconfirm
@confirm.prevent="
removeCluster(cluster)
"
>
<span class="delete-btn">
删除
</span>
</j-popconfirm>
</template>
<j-row :gutter="[24, 0]">
<j-col :span="12" v-if="!shareCluster">
@ -558,8 +568,8 @@
'secure',
formData.type,
)
? '开启TLS'
: '开启DTLS'
? '开启DTLS'
: '开启TLS'
"
:name="[
'cluster',
@ -801,7 +811,7 @@
>
<j-monaco-editor
theme="vs"
v-model:value="
v-model:modelValue="
cluster
.configuration
.parserConfiguration
@ -968,7 +978,12 @@
</j-collapse>
</div>
<j-form-item v-if="!shareCluster">
<j-button type="dashed" block @click="addCluster">
<j-button
type="primary"
block
ghost
@click="addCluster"
>
<AIcon type="PlusOutlined" />
新增
</j-button>
@ -1116,6 +1131,7 @@ const changeShareCluster = (value: boolean) => {
};
const changeType = (value: string) => {
getResourcesCurrent();
dynamicValidateForm.cluster = [{ ...cloneDeep(FormStates2), id: '1' }];
if (value !== 'MQTT_CLIENT') {
const { configuration } = dynamicValidateForm.cluster[0];
@ -1170,7 +1186,15 @@ const changeParserType = (value: string | undefined, index: number) => {
const saveData = async () => {
await formRef1.value?.validate();
const formRef2Data = await formRef2.value?.validate();
const formRef2Data = await formRef2.value?.validate().catch((err) => {
err.errorFields.forEach((item: any) => {
const activeId: any = dynamicValidateForm.cluster[item.name[1]].id;
if (!activeKey.value.includes(activeId)) {
activeKey.value.push(activeId); // 校验未通过的展开
}
});
});
const { configuration } = formRef2Data?.cluster[0];
const params = shareCluster.value
@ -1179,9 +1203,8 @@ const saveData = async () => {
loading.value = true;
const resp: any =
id === ':id'
? await save(params).catch(() => {})
: await update({ ...params, id }).catch(() => {});
id === ':id' ? await save(params) : await update({ ...params, id });
loading.value = false;
if (resp?.status === 200) {
onlyMessage('操作成功', 'success');
history.back();
@ -1194,7 +1217,6 @@ const saveData = async () => {
}
}
}
loading.value = false;
};
const getSupports = async () => {
@ -1243,6 +1265,10 @@ const getDetail = () => {
} else {
dynamicValidateForm.cluster = cluster;
}
if (dynamicValidateForm.cluster.length === 1) {
dynamicValidateForm.cluster[0].id = '1';
}
}
});
loading.value = false;
@ -1286,6 +1312,7 @@ watch(
},
{ deep: true, immediate: true },
);
watch(
() => NetworkType,
(value) => {
@ -1343,4 +1370,12 @@ watch(
margin-bottom: 20px;
background: #f4f4f4;
}
.delete-btn {
display: inline-block;
color: #e50012;
padding: 0px 8px;
background: #ffffff;
border: 1px solid #e50012;
border-radius: 2px;
}
</style>

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

@ -63,7 +63,7 @@ export const VisibleData = {
serverId: ['MQTT_CLIENT'],
remoteHost: ['MQTT_CLIENT'],
remotePort: ['MQTT_CLIENT'],
secure: ['TCP_SERVER', 'UDP', 'COAP_SERVER'],
secure: ['UDP', 'COAP_SERVER'],
username: ['MQTT_CLIENT'],
password: ['MQTT_CLIENT'],
topicPrefix: ['MQTT_CLIENT'],
@ -160,7 +160,7 @@ export const Rules = {
},
{
pattern: Validator.regIp || Validator.regDomain,
message: '请输入IP或者域名',
message: '请输入正确格式的域名或ip',
},
],
publicPort: [
@ -180,7 +180,7 @@ export const Rules = {
},
{
pattern: Validator.regIp || Validator.regDomain,
message: '请输入IP或者域名',
message: '请输入正确格式的域名或ip',
},
],
remotePort: [
@ -215,7 +215,8 @@ export const Rules = {
],
password: [
{
required: true,
// required: true,
required: false,
message: '请输入密码',
},
{

22
src/views/link/Type/index.vue
View File

@ -157,7 +157,7 @@
</template>
<template #shareCluster="slotProps">
{{
slotProps.shareCluster === true
slotProps.shareCluster === 'true'
? '共享配置'
: '独立配置'
}}
@ -185,10 +185,6 @@ const tableRef = ref<Record<string, any>>({});
const params = ref<Record<string, any>>({});
const options = ref([]);
// const statusMap = new Map();
// statusMap.set('enabled', 'processing');
// statusMap.set('disabled', 'error');
const columns = [
{
title: '名称',
@ -223,8 +219,8 @@ const columns = [
search: {
type: 'select',
options: [
{ label: '共享配置', value: true },
{ label: '独立配置', value: false },
{ label: '共享配置', value: 'true' },
{ label: '独立配置', value: 'false' },
],
},
},
@ -255,6 +251,9 @@ const columns = [
dataIndex: 'description',
key: 'description',
ellipsis: true,
search: {
type: 'string',
},
},
{
title: '操作',
@ -367,8 +366,13 @@ const getDetails = (slotProps: Partial<Record<string, any>>) => {
':' +
(cluster[0].configuration.publicPort ||
cluster[0].configuration.remotePort);
return headers + content;
let head = '远程:';
if (!!shareCluster) {
!!configuration.publicHost && (head = '公网:');
} else {
!!cluster[0].configuration.publicHos && (head = '公网:');
}
return head + headers + content;
};
const getSupports = async () => {