fix: 优化gateway的采集器新增,点位新增

This commit is contained in:
XieYongHong 2023-07-25 19:50:58 +08:00
parent ccbdef9f3c
commit 992e9a0aab
7 changed files with 192 additions and 164 deletions

View File

@ -61,3 +61,4 @@ export const scanOpcUAList = (data: any) =>
export const queryTypeList = () => server.get(`/data-collect/opc/data-types`); export const queryTypeList = () => server.get(`/data-collect/opc/data-types`);
export const getProviders = () => server.get('/data-collect/channel/gateway/codec/providers')

View File

@ -271,7 +271,7 @@ import {
import { ModBusRules, checkProviderData } from '../../data.ts'; import { ModBusRules, checkProviderData } from '../../data.ts';
import type { FormInstance } from 'ant-design-vue'; import type { FormInstance } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/lib/form'; import type { Rule } from 'ant-design-vue/lib/form';
import { cloneDeep } from 'lodash-es'; import {cloneDeep, omit} from 'lodash-es';
const props = defineProps({ const props = defineProps({
data: { data: {
@ -343,10 +343,18 @@ const handleOk = async () => {
// addressreact使 // addressreact使
params.configuration.parameter = { params.configuration.parameter = {
...params.configuration.parameter, ...params.configuration.parameter,
address: data?.pointKey, address: data?.pointKey,
}; };
if (props.data.provider === 'GATEWAY') {
const configuration = cloneDeep(params.configuration)
params.configuration = {
configuration: configuration,
interval: params.interval
}
}
loading.value = true; loading.value = true;
const response = !id const response = !id
? await savePointBatch(params).catch(() => {}) ? await savePointBatch(params).catch(() => {})
@ -439,22 +447,31 @@ watch(
watch( watch(
() => props.data, () => props.data,
(value) => { (value) => {
if (value.id && value.provider === 'MODBUS_TCP') { if (value.id && ['MODBUS_TCP', 'GATEWAY'].includes(value.provider)) {
const _value: any = cloneDeep(value); const _value: any = cloneDeep(value);
const { writeByteCount, byteCount } = const { writeByteCount, byteCount } =
_value.configuration.parameter; props.data.provider === 'GATEWAY' ? _value.configuration.configuration.parameter: _value.configuration.parameter;
if (props.data.provider === 'GATEWAY') {
formData.value = {
...omit(_value, ['configuration']),
..._value.configuration,
}
} else {
formData.value = _value; formData.value = _value;
if (!!_value.accessModes[0]?.value) { }
formData.value.accessModes = value.accessModes.map(
(i: any) => i.value, if (!!_value.accessModes[0]?.value) {
); formData.value.accessModes = value.accessModes.map(
} (i: any) => i.value,
if (!!_value.features[0]?.value) { );
formData.value.features = value.features.map( }
(i: any) => i.value, if (!!_value.features[0]?.value) {
); formData.value.features = value.features.map(
} (i: any) => i.value,
formData.value.nspwc = !!writeByteCount || !!byteCount; );
}
formData.value.nspwc = !!writeByteCount || !!byteCount;
} }
}, },
{ immediate: true, deep: true }, { immediate: true, deep: true },

View File

@ -40,114 +40,111 @@
v-model:value="formData.name" v-model:value="formData.name"
/> />
</j-form-item> </j-form-item>
<j-form-item
<template v-if="provider === 'GATEWAY'"> v-if="provider === 'GATEWAY'"
<j-form-item
label="通讯协议" label="通讯协议"
:name="['configuration', 'collectorProvider']" :name="['collectorProvider']"
:rules="[{ required: true, message: '请选择通讯协议' }]" :rules="[{ required: true, message: '请选择通讯协议' }]"
> >
<j-select <j-select
style="width: 100%" style="width: 100%"
v-model:value="formData.configuration.collectorProvider" v-model:value="formData.collectorProvider"
:options="providerListItems" :options="providerListItems"
placeholder="请选择通讯协议" placeholder="请选择通讯协议"
allowClear allowClear
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
:disabled="!!id" :disabled="!!id"
/> />
</j-form-item>
<j-form-item
v-if="visibleUnitId"
:name="['configuration', 'unitId']"
:rules="LeftTreeRules.unitId"
label="从机地址"
>
<j-input-number
style="width: 100%"
placeholder="请输入从机地址"
v-model:value="formData.configuration.unitId"
:min="0"
:max="255"
/>
</j-form-item>
<j-form-item
v-if="provider !== 'GATEWAY'"
:name="['configuration', 'inheritBreakerSpec', 'type']"
:rules="LeftTreeRules.type"
label="点位熔断处理"
>
<j-card-select
:showImage="false"
v-model:value="formData.configuration.inheritBreakerSpec.type"
:options="[
{ label: '降频', value: 'LowerFrequency' },
{ label: '断开', value: 'Break' },
{ label: '忽略', value: 'Ignore' },
]"
@change="changeCardSelectType"
/>
</j-form-item>
<p style="color: #616161" v-if="provider !== 'GATEWAY'">
{{ getTypeTooltip(formData.configuration.inheritBreakerSpec.type) }}
</p>
<j-form-item
v-if="visibleEndian"
:name="['configuration', 'endian']"
:rules="LeftTreeRules.endian"
label="双字高低位切换"
>
<j-card-select
:showImage="false"
v-model:value="formData.configuration.endian"
:options="[
{ label: 'AB', value: 'BIG' },
{ label: 'BA', value: 'LITTLE' },
]"
@change="changeCardSelectEndian"
:column="2"
/>
</j-form-item>
<j-form-item
v-if="visibleEndian"
:name="['configuration', 'endianIn']"
:rules="LeftTreeRules.endianIn"
label="单字高低位切换"
>
<j-card-select
:showImage="false"
v-model:value="formData.configuration.endianIn"
:options="[
{ label: 'AB', value: 'BIG' },
{ label: 'BA', value: 'LITTLE' },
]"
@change="changeCardSelectEndianIn"
:column="2"
/>
</j-form-item>
<div v-if="visibleEndian" style="color: #616161">
<p>当前内存布局: {{ endianData }}</p>
<p>
只有4字节数据类型(int32ieee754 float)
具有4种内存布局其它只有ABCDDCBA两种内存布局(以双字配置为准)
</p>
</div>
<j-form-item
:name="['configuration', 'requsetTimeout']"
label="请求超时时间配置"
>
<j-input-number
style="width: 100%"
placeholder="请输入请求超时时间配置"
v-model:value="formData.configuration.requsetTimeout"
addon-after="ms"
:max="2147483648"
:min="1"
/>
</j-form-item> </j-form-item>
</template>
<template v-else>
<j-form-item
v-if="visibleUnitId"
:name="['configuration', 'unitId']"
:rules="LeftTreeRules.unitId"
label="从机地址"
>
<j-input-number
style="width: 100%"
placeholder="请输入从机地址"
v-model:value="formData.configuration.unitId"
:min="0"
:max="255"
/>
</j-form-item>
<j-form-item
:name="['configuration', 'inheritBreakerSpec', 'type']"
:rules="LeftTreeRules.type"
label="点位熔断处理"
>
<j-card-select
:showImage="false"
v-model:value="formData.configuration.inheritBreakerSpec.type"
:options="[
{ label: '降频', value: 'LowerFrequency' },
{ label: '断开', value: 'Break' },
{ label: '忽略', value: 'Ignore' },
]"
@change="changeCardSelectType"
/>
</j-form-item>
<p style="color: #616161">
{{ getTypeTooltip(formData.configuration.inheritBreakerSpec.type) }}
</p>
<j-form-item
v-if="visibleEndian"
:name="['configuration', 'endian']"
:rules="LeftTreeRules.endian"
label="双字高低位切换"
>
<j-card-select
:showImage="false"
v-model:value="formData.configuration.endian"
:options="[
{ label: 'AB', value: 'BIG' },
{ label: 'BA', value: 'LITTLE' },
]"
@change="changeCardSelectEndian"
:column="2"
/>
</j-form-item>
<j-form-item
v-if="visibleEndian"
:name="['configuration', 'endianIn']"
:rules="LeftTreeRules.endianIn"
label="单字高低位切换"
>
<j-card-select
:showImage="false"
v-model:value="formData.configuration.endianIn"
:options="[
{ label: 'AB', value: 'BIG' },
{ label: 'BA', value: 'LITTLE' },
]"
@change="changeCardSelectEndianIn"
:column="2"
/>
</j-form-item>
<div v-if="visibleEndian" style="color: #616161">
<p>当前内存布局: {{ endianData }}</p>
<p>
只有4字节数据类型(int32ieee754 float)
具有4种内存布局其它只有ABCDDCBA两种内存布局(以双字配置为准)
</p>
</div>
<j-form-item
:name="['configuration', 'requsetTimeout']"
label="请求超时时间配置"
>
<j-input-number
style="width: 100%"
placeholder="请输入请求超时时间配置"
v-model:value="formData.configuration.requsetTimeout"
addon-after="ms"
:max="2147483648"
:min="1"
/>
</j-form-item>
</template>
<j-form-item label="说明" name="description"> <j-form-item label="说明" name="description">
<j-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
@ -176,11 +173,10 @@
</j-modal> </j-modal>
</template> </template>
<script lang="ts" name="CollectorTreeSave" setup> <script lang="ts" name="CollectorTreeSave" setup>
import { save, update } from '@/api/data-collect/collector'; import { save, update, getProviders } from '@/api/data-collect/collector';
import { LeftTreeRules } from '../../data'; import { LeftTreeRules } from '../../data';
import type { FormInstance } from 'ant-design-vue'; import type { FormInstance } from 'ant-design-vue';
import {cloneDeep} from "lodash-es"; import {cloneDeep, omit} from "lodash-es";
import {getProviders} from "@/api/data-collect/channel";
import {protocolList} from "@/utils/consts"; import {protocolList} from "@/utils/consts";
const loading = ref(false); const loading = ref(false);
@ -208,13 +204,7 @@ const providerListItems = ref()
const geyProviderList = async () => { const geyProviderList = async () => {
const resp: any = await getProviders(); const resp: any = await getProviders();
if (resp.success) { if (resp.success) {
const arr = resp.result.filter( providerListItems.value = resp.result.map((item: any) => ({ label: item.name, value: item.id }))
(item: any) => ['collector-gateway', 'modbus-tcp', 'opc-ua'].includes(item.id),
).map((it: any) => it.id);
console.log(arr, protocolList)
providerListItems.value = protocolList.filter((item: any) =>
arr.includes(item.alias),
);
} else { } else {
providerListItems.value = [] providerListItems.value = []
} }
@ -255,12 +245,12 @@ const endianData = computed(() => {
const formData = ref({ const formData = ref({
channelId: undefined, channelId: undefined,
name: '', name: '',
collectorProvider: undefined,
configuration: { configuration: {
unitId: '', unitId: '',
type: 'LowerFrequency', type: 'LowerFrequency',
endian: 'BIG', endian: 'BIG',
endianIn: 'BIG', endianIn: 'BIG',
collectorProvider: undefined,
requsetTimeout: 2000, requsetTimeout: 2000,
inheritBreakerSpec: { inheritBreakerSpec: {
type: 'LowerFrequency', type: 'LowerFrequency',
@ -274,34 +264,52 @@ const formData = ref({
}); });
const handleOk = async () => { const handleOk = async () => {
const data = await formRef.value?.validate(); const _data: any = await formRef.value?.validate();
if (_data) {
const { name } = _channelListAll.value.find(
(item: any) => item.id === formData.value.channelId,
);
let _copyData = _data
const { name } = _channelListAll.value.find( if (['GATEWAY'].includes(provider.value)) {
(item: any) => item.id === formData.value.channelId, const copyData = cloneDeep(_data)
); _copyData = omit(copyData, ['configuration', 'collectorProvider'])
if (['GATEWAY'].includes(data?.provider)) { _copyData.configuration = {
data.configuration.inheritBreakerSpec.type = 'Ignore' configuration: {
} ..._data.configuration,
inheritBreakerSpec: {
type: 'Ignore'
}
},
collectorProvider: _data.collectorProvider
}
}
const params = { const params = {
...data, ..._copyData,
provider: provider.value, provider: provider.value,
channelName: name, channelName: name,
circuitBreaker: { circuitBreaker: {
type: 'Ignore' type: 'Ignore'
} }
}; };
loading.value = true; loading.value = true;
const response = !id
? await save(params).catch(() => { success: false }) try {
: await update(id, { ...props.data, ...params }).catch(() => { success: false }); const response = !id
loading.value = false; ? await save(params)
if (response.success) { : await update(id, { ...props.data, ...params })
emit('change', true); loading.value = false;
if (response.success) {
emit('change', true);
}
} catch (e) {
loading.value = false;
}
} }
}; };
@ -337,7 +345,7 @@ watch(
(value) => { (value) => {
const dt = _channelListAll.value.find((item) => item.id === value); const dt = _channelListAll.value.find((item) => item.id === value);
visibleUnitId.value = visibleEndian.value = visibleUnitId.value = visibleEndian.value =
dt?.provider && dt?.provider === 'MODBUS_TCP'; dt?.provider && ['MODBUS_TCP', 'GATEWAY'].includes(dt?.provider);
}, },
{ deep: true }, { deep: true },
); );
@ -347,7 +355,7 @@ watch(
(value) => { (value) => {
if (value.id) { if (value.id) {
let copyValue = cloneDeep(value) let copyValue = cloneDeep(value)
if (!copyValue?.configuration?.inheritBreakerSpec) { if (!copyValue?.configuration?.inheritBreakerSpec && copyValue.provider !== 'GATEWAY') {
copyValue.configuration = { copyValue.configuration = {
...copyValue.configuration, ...copyValue.configuration,
inheritBreakerSpec: { inheritBreakerSpec: {
@ -356,12 +364,17 @@ watch(
} }
copyValue.circuitBreaker.type = 'Ignore' copyValue.circuitBreaker.type = 'Ignore'
} }
formData.value = copyValue
const item = props.channelListAll.find( if (copyValue.provider === 'GATEWAY') {
(item: any) => item.id === formData.value.channelId, formData.value = {
); ...omit(copyValue, ['configuration']),
provider.value = item?.provider ...copyValue.configuration,
}
} else {
formData.value = copyValue
}
provider.value = copyValue?.provider
}; };
}, },
{ immediate: true, deep: true }, { immediate: true, deep: true },

View File

@ -28,14 +28,9 @@
placeholder="请选择" placeholder="请选择"
allowClear allowClear
:filter-option="filterOption" :filter-option="filterOption"
:options="channelList"
@select="(_, option) => { record.provider = option.provider }"
> >
<j-select-option
v-for="item in channelList"
:key="item.value"
:value="item.value"
:label="item.label"
>{{ item.label }}</j-select-option
>
</j-select> </j-select>
</j-form-item> </j-form-item>
</template> </template>
@ -269,6 +264,7 @@ const onSave = () => {
(i: any) => i.channelId, (i: any) => i.channelId,
); );
if (arr && arr.length !== 0) { if (arr && arr.length !== 0) {
console.log(arr)
const resp = await saveMapping( const resp = await saveMapping(
instanceStore.current.id, instanceStore.current.id,
props.provider, props.provider,

View File

@ -139,7 +139,7 @@ const getTypeList = (result: Record<string, any>) => {
} else if (item.id === 'OneNet' || item.id === 'Ctwing') { } else if (item.id === 'OneNet' || item.id === 'Ctwing') {
item.type = 'cloud'; item.type = 'cloud';
cloud.push(item); cloud.push(item);
} else if (item.id === 'modbus-tcp' || item.id === 'opc-ua') { } else if (item.id === 'modbus-tcp' || item.id === 'opc-ua' || item.id === 'collector-gateway') {
item.type = 'channel'; item.type = 'channel';
channel.push(item); channel.push(item);
} else if ( } else if (

View File

@ -45,6 +45,7 @@ BackMap.set('gb28181-2016', getImage('/access/gb28181.png'));
BackMap.set('mqtt-client-gateway', getImage('/access/mqtt-broke.png')); BackMap.set('mqtt-client-gateway', getImage('/access/mqtt-broke.png'));
BackMap.set('edge-child-device', getImage('/access/child-device.png')); BackMap.set('edge-child-device', getImage('/access/child-device.png'));
BackMap.set('official-edge-gateway', getImage('/access/edge.png')); BackMap.set('official-edge-gateway', getImage('/access/edge.png'));
BackMap.set('collector-gateway', getImage('/access/collector-gateway.png'));
const descriptionList = { const descriptionList = {
'udp-device-gateway': 'udp-device-gateway':

View File

@ -94,7 +94,7 @@ export default defineConfig(({ mode}) => {
[env.VITE_APP_BASE_API]: { [env.VITE_APP_BASE_API]: {
// target: 'http://192.168.32.226:8844', // target: 'http://192.168.32.226:8844',
// target: 'http://192.168.32.244:8881', // target: 'http://192.168.32.244:8881',
// target: 'http://192.168.32.163:8844', //张季本地 // target: 'http://192.168.32.163:8844', //张季本地
// target: 'http://120.77.179.54:8844', // 120测试 // target: 'http://120.77.179.54:8844', // 120测试
target: 'http://192.168.33.46:8844', // 本地开发环境 target: 'http://192.168.33.46:8844', // 本地开发环境
ws: 'ws://192.168.33.46:8844', ws: 'ws://192.168.33.46:8844',