feat: 采集器 MODBUS、OPCUA表单，读写以及批量操作
This commit is contained in:
jackhoo_98
parent
ae959f9dcd
commit
4e51d021eb
|
|
@ -21,3 +21,24 @@ export const _validateField = (id: string, data?: any) =>
|
|||
server.get(`/data-collect/point/${id}/_validate`, data);
|
||||
|
||||
export const queryCodecProvider = () => server.get(`/things/collector/codecs`);
|
||||
|
||||
export const updatePoint = (id: string, data: any) =>
|
||||
server.put(`/data-collect/point/${id}`, data);
|
||||
|
||||
export const savePointBatch = (data: any) =>
|
||||
server.patch(`/data-collect/point`, data);
|
||||
|
||||
export const savePoint = (data: any) =>
|
||||
server.post(`/data-collect/point`, data);
|
||||
|
||||
export const batchDeletePoint = (data: any) =>
|
||||
server.post(`/data-collect/point/batch/_delete`, data);
|
||||
|
||||
export const removePoint = (id: string) =>
|
||||
server.remove(`/data-collect/point/${id}`);
|
||||
|
||||
export const readPoint = (collectorId: string, data: string[]) =>
|
||||
server.post(`/data-collect/collector/${collectorId}/points/_read`, data);
|
||||
|
||||
export const writePoint = (collectorId: string, data: string[]) =>
|
||||
server.post(`/data-collect/collector/${collectorId}/points/_write`, data);
|
||||
|
|
|
|||
|
|
@ -11,21 +11,10 @@
|
|||
:model="formData"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
:rules="ModBusRules"
|
||||
ref="formRef"
|
||||
>
|
||||
<j-form-item
|
||||
label="点位名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入点位名称',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-form-item label="点位名称" name="name">
|
||||
<j-input
|
||||
placeholder="请输入点位名称"
|
||||
v-model:value="formData.name"
|
||||
|
|
@ -34,12 +23,7 @@
|
|||
<j-form-item
|
||||
label="功能码"
|
||||
:name="['configuration', 'function']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择功能码',
|
||||
},
|
||||
]"
|
||||
:rules="ModBusRules.function"
|
||||
>
|
||||
<j-select
|
||||
style="width: 100%"
|
||||
|
|
@ -57,18 +41,11 @@
|
|||
</j-form-item>
|
||||
<j-form-item
|
||||
label="地址"
|
||||
:name="['configuration', 'parameter', 'address']"
|
||||
:name="['pointKey']"
|
||||
:rules="[
|
||||
...ModBusRules.pointKey,
|
||||
{
|
||||
required: true,
|
||||
message: '请输入地址',
|
||||
},
|
||||
{
|
||||
pattern: regOnlyNumber,
|
||||
message: '请输入0-255之间的正整数',
|
||||
},
|
||||
{
|
||||
validator: checkAddress,
|
||||
validator: checkPointKey,
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
|
|
@ -76,7 +53,7 @@
|
|||
<j-input-number
|
||||
style="width: 100%"
|
||||
placeholder="请输入地址"
|
||||
v-model:value="formData.configuration.parameter.address"
|
||||
v-model:value="formData.pointKey"
|
||||
:min="0"
|
||||
:max="255"
|
||||
/>
|
||||
|
|
@ -84,16 +61,7 @@
|
|||
<j-form-item
|
||||
label="寄存器数量"
|
||||
:name="['configuration', 'parameter', 'quantity']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入寄存器数量',
|
||||
},
|
||||
{
|
||||
pattern: regOnlyNumber,
|
||||
message: '请输入1-255之间的正整数',
|
||||
},
|
||||
]"
|
||||
:rules="ModBusRules.quantity"
|
||||
>
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
|
|
@ -104,12 +72,14 @@
|
|||
/>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
v-if="formData.configuration.function === 'HoldingRegisters'"
|
||||
label="数据类型"
|
||||
:name="['configuration', 'codec', 'provider']"
|
||||
:rules="[
|
||||
...ModBusRules.provider,
|
||||
{
|
||||
required: true,
|
||||
message: '请选择数据类型',
|
||||
validator: checkProvider,
|
||||
trigger: 'change',
|
||||
},
|
||||
]"
|
||||
>
|
||||
|
|
@ -131,31 +101,18 @@
|
|||
'configuration',
|
||||
'scaleFactor',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入缩放因子',
|
||||
},
|
||||
]"
|
||||
:rules="ModBusRules.scaleFactor"
|
||||
>
|
||||
<j-input
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
placeholder="请输入缩放因子"
|
||||
v-model:value="
|
||||
formData.configuration.codec.configuration.scaleFactor
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="访问类型"
|
||||
:name="['accessModes']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择访问类型',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<RadioCard
|
||||
<j-form-item label="访问类型" name="accessModes">
|
||||
<!-- <RadioCard
|
||||
layout="horizontal"
|
||||
:checkStyle="true"
|
||||
:options="[
|
||||
|
|
@ -163,42 +120,36 @@
|
|||
{ label: '写', value: 'write' },
|
||||
]"
|
||||
v-model="formData.accessModes"
|
||||
/>
|
||||
<!-- <j-card-select
|
||||
/> -->
|
||||
<j-checkbox-group
|
||||
v-model:value="formData.accessModes"
|
||||
:options="[
|
||||
{
|
||||
label: '读',
|
||||
value: 'read',
|
||||
iconUrl:
|
||||
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
},
|
||||
{
|
||||
label: '写',
|
||||
value: 'write',
|
||||
iconUrl:
|
||||
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
},
|
||||
{ label: '读', value: 'read' },
|
||||
{ label: '写', value: 'write' },
|
||||
]"
|
||||
multiple
|
||||
/> -->
|
||||
/>
|
||||
</j-form-item>
|
||||
|
||||
<!-- <j-form-item label="非标准协议写入配置" :name="['nspwc']"> -->
|
||||
<j-form-item :name="['nspwc']">
|
||||
<span>非标准协议写入配置</span>
|
||||
<j-form-item
|
||||
:name="['nspwc']"
|
||||
v-if="
|
||||
formData.accessModes?.includes('write') &&
|
||||
formData.configuration.function === 'HoldingRegisters'
|
||||
"
|
||||
>
|
||||
<span style="margin-right: 10px">非标准协议写入配置</span>
|
||||
<j-switch v-model:checked="formData.nspwc" />
|
||||
</j-form-item>
|
||||
|
||||
<j-form-item
|
||||
v-if="
|
||||
!!formData.nspwc &&
|
||||
formData.accessModes?.includes('write') &&
|
||||
formData.configuration.function === 'HoldingRegisters'
|
||||
"
|
||||
label="是否写入数据区长度"
|
||||
:name="['configuration', 'parameter', 'writeByteCount']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择是否写入数据区长度',
|
||||
},
|
||||
]"
|
||||
:rules="ModBusRules.writeByteCount"
|
||||
>
|
||||
<RadioCard
|
||||
layout="horizontal"
|
||||
|
|
@ -211,14 +162,14 @@
|
|||
/>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
v-if="
|
||||
!!formData.nspwc &&
|
||||
formData.accessModes?.includes('write') &&
|
||||
formData.configuration.function === 'HoldingRegisters'
|
||||
"
|
||||
label="自定义数据区长度（byte）"
|
||||
:name="['configuration', 'parameter', 'byteCount']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入自定义数据区长度（byte）',
|
||||
},
|
||||
]"
|
||||
:rules="ModBusRules.byteCount"
|
||||
>
|
||||
<j-input
|
||||
placeholder="请输入自定义数据区长度（byte）"
|
||||
|
|
@ -229,9 +180,10 @@
|
|||
label="采集频率"
|
||||
:name="['configuration', 'interval']"
|
||||
:rules="[
|
||||
...ModBusRules.interval,
|
||||
{
|
||||
required: true,
|
||||
message: '请输入采集频率',
|
||||
validator: checkLength,
|
||||
trigger: 'change',
|
||||
},
|
||||
]"
|
||||
>
|
||||
|
|
@ -240,6 +192,7 @@
|
|||
placeholder="请输入采集频率"
|
||||
v-model:value="formData.configuration.interval"
|
||||
:min="1"
|
||||
addon-after="ms"
|
||||
/>
|
||||
</j-form-item>
|
||||
|
||||
|
|
@ -279,22 +232,16 @@
|
|||
</j-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Form } from 'ant-design-vue';
|
||||
import {
|
||||
save,
|
||||
update,
|
||||
savePointBatch,
|
||||
updatePoint,
|
||||
_validateField,
|
||||
queryCodecProvider,
|
||||
} from '@/api/data-collect/collector';
|
||||
import { Store } from 'jetlinks-store';
|
||||
|
||||
const loading = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
const channelListAll = ref();
|
||||
const channelList = ref();
|
||||
const visibleEndian = ref(false);
|
||||
const visibleUnitId = ref(false);
|
||||
const providerList = ref([]);
|
||||
import { ModBusRules, checkProviderData } from '../../data.ts';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { Rule } from 'ant-design-vue/lib/form';
|
||||
import { cloneDeep, isArray } from 'lodash-es';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
|
|
@ -304,105 +251,72 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
const loading = ref(false);
|
||||
const providerList = ref([]);
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const id = props.data.id;
|
||||
const treeId = props.data.treeId;
|
||||
const collectorId = props.data.collectorId;
|
||||
const provider = props.data.provider;
|
||||
const oldPointKey = props.data.pointKey;
|
||||
|
||||
const formData = ref({
|
||||
name: '',
|
||||
configuration: {
|
||||
function: undefined,
|
||||
interval: '',
|
||||
interval: 3000,
|
||||
parameter: {
|
||||
address: '',
|
||||
quantity: '',
|
||||
quantity: 1,
|
||||
writeByteCount: '',
|
||||
byteCount: '',
|
||||
byteCount: 2,
|
||||
address: '',
|
||||
},
|
||||
codec: {
|
||||
provider: '',
|
||||
provider: undefined,
|
||||
configuration: {
|
||||
scaleFactor: '',
|
||||
scaleFactor: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
accessModes: undefined,
|
||||
nspwc: '',
|
||||
byte: '',
|
||||
features: '',
|
||||
pointKey: '',
|
||||
accessModes: [],
|
||||
nspwc: false,
|
||||
features: [],
|
||||
description: '',
|
||||
});
|
||||
|
||||
const regOnlyNumber = new RegExp(/^\d+$/);
|
||||
const onSubmit = async () => {
|
||||
const data = await formRef.value?.validate();
|
||||
|
||||
const checkAddress = (_rule: Rule, value: string): Promise<any> =>
|
||||
new Promise(async (resolve, reject) => {
|
||||
if (value) {
|
||||
const res = await _validateField(props.data.treeId, {
|
||||
pointKey: value,
|
||||
});
|
||||
return res.result.passed ? resolve('') : reject(res.result.reason);
|
||||
}
|
||||
});
|
||||
delete data?.nspwc;
|
||||
const { codec } = data?.configuration;
|
||||
|
||||
// const { resetFields, validate, validateInfos } = useForm(
|
||||
// formData,
|
||||
// reactive({
|
||||
// channelId: [
|
||||
// { required: true, message: '请选择所属通道', trigger: 'blur' },
|
||||
// ],
|
||||
// name: [
|
||||
// { required: true, message: '请输入采集器名称', trigger: 'blur' },
|
||||
// { max: 64, message: '最多可输入64个字符' },
|
||||
// ],
|
||||
// 'configuration.unitId': [
|
||||
// { required: true, message: '请输入从机地址', trigger: 'blur' },
|
||||
// {
|
||||
// pattern: regOnlyNumber,
|
||||
// message: '请输入0-255之间的正整数',
|
||||
// },
|
||||
// ],
|
||||
// 'circuitBreaker.type': [
|
||||
// { required: true, message: '请选择处理方式', trigger: 'blur' },
|
||||
// ],
|
||||
// 'configuration.endian': [
|
||||
// { required: true, message: '请选择高低位切换', trigger: 'blur' },
|
||||
// ],
|
||||
// description: [{ max: 200, message: '最多可输入200个字符' }],
|
||||
// }),
|
||||
// );
|
||||
const onSubmit = () => {
|
||||
// validate()
|
||||
// .then(async (res) => {
|
||||
// const { provider, name } = channelListAll.value.find(
|
||||
// (item) => item.id === formData.value.channelId,
|
||||
// );
|
||||
// const params = {
|
||||
// ...toRaw(formData.value),
|
||||
// provider,
|
||||
// channelName: name,
|
||||
// };
|
||||
// loading.value = true;
|
||||
// const response = !id
|
||||
// ? await save(params)
|
||||
// : await update(id, { ...props.data, ...params });
|
||||
// if (response.status === 200) {
|
||||
// emit('change', true);
|
||||
// }
|
||||
// loading.value = false;
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// loading.value = false;
|
||||
// });
|
||||
if (data?.configuration.function !== 'HoldingRegisters') {
|
||||
codec.provider = 'int8';
|
||||
}
|
||||
const params = {
|
||||
...props.data,
|
||||
...data,
|
||||
provider,
|
||||
collectorId,
|
||||
};
|
||||
|
||||
// address是多余字段，但是react版本上使用到了这个字段
|
||||
params.configuration.parameter = {
|
||||
...params.configuration.parameter,
|
||||
address: data?.pointKey,
|
||||
};
|
||||
|
||||
loading.value = true;
|
||||
const response = !id
|
||||
? await savePointBatch(params)
|
||||
: await updatePoint(id, { ...props.data, ...params });
|
||||
if (response.status === 200) {
|
||||
emit('change', true);
|
||||
}
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const getTypeTooltip = (value: string) =>
|
||||
value === 'LowerFrequency'
|
||||
? '连续20次异常，降低连接频率至原有频率的1/10（重试间隔不超过1分钟），故障处理后自动恢复至设定连接频率'
|
||||
: value === 'Break'
|
||||
? '连续10分钟异常，停止采集数据进入熔断状态，设备重新启用后恢复采集状态'
|
||||
: '忽略异常，保持原采集频率超时时间为5s';
|
||||
|
||||
const handleOk = () => {
|
||||
onSubmit();
|
||||
};
|
||||
|
|
@ -410,19 +324,42 @@ const handleCancel = () => {
|
|||
emit('change', false);
|
||||
};
|
||||
|
||||
// const getChannelNoPaging = async () => {
|
||||
// channelListAll.value = Store.get('channelListAll');
|
||||
// channelList.value = channelListAll.value.map((item) => ({
|
||||
// value: item.id,
|
||||
// label: item.name,
|
||||
// }));
|
||||
// };
|
||||
// getChannelNoPaging();
|
||||
const checkLength = (_rule: Rule, value: string): Promise<any> =>
|
||||
new Promise(async (resolve, reject) => {
|
||||
if (value) {
|
||||
return String(value).length > 64
|
||||
? reject('最多可输入64个字符')
|
||||
: resolve('');
|
||||
}
|
||||
});
|
||||
|
||||
const checkProvider = (_rule: Rule, value: string): Promise<any> =>
|
||||
new Promise(async (resolve, reject) => {
|
||||
if (value) {
|
||||
const { quantity } = formData.value.configuration.parameter;
|
||||
return checkProviderData[value] > Number(quantity) * 2
|
||||
? reject('数据类型长度需 <= 寄存器数量 * 2')
|
||||
: resolve('');
|
||||
}
|
||||
});
|
||||
|
||||
const checkPointKey = (_rule: Rule, value: string): Promise<any> =>
|
||||
new Promise(async (resolve, reject) => {
|
||||
if (value) {
|
||||
if (Number(oldPointKey) === Number(value)) return resolve('');
|
||||
const res = await _validateField(collectorId, {
|
||||
pointKey: value,
|
||||
});
|
||||
return res.result.passed ? resolve('') : reject(res.result.reason);
|
||||
}
|
||||
});
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
const getProviderList = async () => {
|
||||
const res = await queryCodecProvider();
|
||||
console.log(222, res.result);
|
||||
|
||||
providerList.value = res.result
|
||||
.filter((i) => i.id !== 'property')
|
||||
.map((item) => ({
|
||||
|
|
@ -432,20 +369,31 @@ const getProviderList = async () => {
|
|||
};
|
||||
getProviderList();
|
||||
|
||||
// watch(
|
||||
// () => formData.value.channelId,
|
||||
// (value) => {
|
||||
// const dt = channelListAll.value.find((item) => item.id === value);
|
||||
// visibleUnitId.value = visibleEndian.value =
|
||||
// dt?.provider && dt?.provider === 'MODBUS_TCP';
|
||||
// },
|
||||
// { deep: true },
|
||||
// );
|
||||
|
||||
watch(
|
||||
() => formData.value.configuration.parameter.quantity,
|
||||
(value) => {
|
||||
formData.value.configuration.parameter.byteCount = Number(value) * 2;
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
watch(
|
||||
() => props.data,
|
||||
(value) => {
|
||||
if (value.id) formData.value = value;
|
||||
if (value.id && value.provider === 'MODBUS_TCP') {
|
||||
const _value = cloneDeep(value);
|
||||
const { writeByteCount, byteCount } =
|
||||
_value.configuration.parameter;
|
||||
formData.value = _value;
|
||||
if (!!_value.accessModes[0]?.value) {
|
||||
formData.value.accessModes = value.accessModes.map(
|
||||
(i) => i.value,
|
||||
);
|
||||
}
|
||||
if (!!_value.features[0]?.value) {
|
||||
formData.value.features = value.features.map((i) => i.value);
|
||||
}
|
||||
formData.value.nspwc = !!writeByteCount || !!byteCount;
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,217 @@
|
|||
<template lang="">
|
||||
<j-modal title="编辑" :visible="true" width="700px" @cancel="handleCancel">
|
||||
<j-form
|
||||
class="form"
|
||||
layout="vertical"
|
||||
:model="formData"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
:rules="OPCUARules"
|
||||
ref="formRef"
|
||||
>
|
||||
<j-form-item label="点位名称" name="name">
|
||||
<j-input
|
||||
placeholder="请输入点位名称"
|
||||
v-model:value="formData.name"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item label="数据类型" :name="['configuration', 'type']">
|
||||
<j-select
|
||||
style="width: 100%"
|
||||
v-model:value="formData.configuration.type"
|
||||
:options="[
|
||||
{ value: 'Number', label: '数值类型' },
|
||||
{ value: 'DateTime', label: '时间类型' },
|
||||
{ value: 'Array', label: '数组类型' },
|
||||
{ value: 'String', label: '文本类型' },
|
||||
{ value: 'Boolean', label: '布尔' },
|
||||
]"
|
||||
placeholder="请选择数据类型"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
/>
|
||||
</j-form-item>
|
||||
|
||||
<j-form-item label="访问类型" name="accessModes">
|
||||
<j-checkbox-group
|
||||
v-model:value="formData.accessModes"
|
||||
:options="[
|
||||
{ label: '读', value: 'read' },
|
||||
{ label: '写', value: 'write' },
|
||||
{ label: '订阅', value: 'subscribe' },
|
||||
]"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="采集频率"
|
||||
:name="['configuration', 'interval']"
|
||||
:rules="[
|
||||
...OPCUARules.interval,
|
||||
{
|
||||
validator: checkLength,
|
||||
trigger: 'change',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
placeholder="请输入采集频率"
|
||||
v-model:value="formData.configuration.interval"
|
||||
:min="1"
|
||||
addon-after="ms"
|
||||
/>
|
||||
</j-form-item>
|
||||
|
||||
<a-form-item label="" :name="['features']">
|
||||
<a-checkbox-group v-model:value="formData.features">
|
||||
<a-checkbox value="changedOnly" name="type"
|
||||
>只推送变化的数据</a-checkbox
|
||||
>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
|
||||
<j-form-item label="说明" :name="['description']">
|
||||
<j-textarea
|
||||
placeholder="请输入说明"
|
||||
v-model:value="formData.description"
|
||||
:maxlength="200"
|
||||
:rows="3"
|
||||
showCount
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
<template #footer>
|
||||
<j-button key="back" @click="handleCancel">取消</j-button>
|
||||
<PermissionButton
|
||||
key="submit"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleOk"
|
||||
style="margin-left: 8px"
|
||||
:hasPermission="`DataCollect/Collector:${
|
||||
id ? 'update' : 'add'
|
||||
}`"
|
||||
>
|
||||
确认
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
savePoint,
|
||||
updatePoint,
|
||||
_validateField,
|
||||
} from '@/api/data-collect/collector';
|
||||
import { OPCUARules, checkProviderData } from '../../data.ts';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { Rule } from 'ant-design-vue/lib/form';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
const loading = ref(false);
|
||||
const providerList = ref([]);
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const id = props.data.id;
|
||||
const collectorId = props.data.collectorId;
|
||||
const provider = props.data.provider;
|
||||
|
||||
const formData = ref({
|
||||
name: '',
|
||||
configuration: {
|
||||
type: undefined,
|
||||
interval: 3000,
|
||||
},
|
||||
accessModes: [],
|
||||
features: [],
|
||||
description: '',
|
||||
});
|
||||
|
||||
const onSubmit = async () => {
|
||||
const data = await formRef.value?.validate();
|
||||
|
||||
const params = {
|
||||
...props.data,
|
||||
...data,
|
||||
provider,
|
||||
collectorId,
|
||||
};
|
||||
|
||||
loading.value = true;
|
||||
const response = !id
|
||||
? await savePoint(params)
|
||||
: await updatePoint(id, { ...props.data, ...params });
|
||||
if (response.status === 200) {
|
||||
emit('change', true);
|
||||
}
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
onSubmit();
|
||||
};
|
||||
const handleCancel = () => {
|
||||
emit('change', false);
|
||||
};
|
||||
|
||||
const checkLength = (_rule: Rule, value: string): Promise<any> =>
|
||||
new Promise(async (resolve, reject) => {
|
||||
if (value) {
|
||||
return String(value).length > 64
|
||||
? reject('最多可输入64个字符')
|
||||
: resolve('');
|
||||
}
|
||||
});
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(value) => {
|
||||
if (value.id && value.provider === 'OPC_UA') {
|
||||
const _value = cloneDeep(value);
|
||||
formData.value = _value;
|
||||
if (!!_value.accessModes[0]?.value) {
|
||||
formData.value.accessModes = value.accessModes.map(
|
||||
(i) => i.value,
|
||||
);
|
||||
}
|
||||
if (!!_value.features[0]?.value) {
|
||||
formData.value.features = value.features.map((i) => i.value);
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.form {
|
||||
.form-radio-button {
|
||||
width: 148px;
|
||||
height: 80px;
|
||||
padding: 0;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.form-upload-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.form-submit {
|
||||
background-color: @primary-color !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
<template lang="">
|
||||
<j-modal
|
||||
title="批量编辑"
|
||||
:visible="true"
|
||||
width="700px"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<div class="sizeText">
|
||||
将批量修改{{
|
||||
data.length
|
||||
}}条数据的访问类型、采集频率、只推送变化的数据
|
||||
</div>
|
||||
<j-form
|
||||
class="form"
|
||||
layout="vertical"
|
||||
:model="formData"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
ref="formRef"
|
||||
>
|
||||
<j-form-item label="访问类型" name="accessModes">
|
||||
<j-checkbox-group
|
||||
v-model:value="formData.accessModes"
|
||||
:options="[
|
||||
{ label: '读', value: 'read' },
|
||||
{ label: '写', value: 'write' },
|
||||
{ label: '订阅', value: 'subscribe' },
|
||||
]"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item :name="['interval']">
|
||||
<template #label>
|
||||
<span>
|
||||
采集频率
|
||||
<j-tooltip title="采集频率为0时不执行轮询任务">
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
placeholder="请输入采集频率"
|
||||
v-model:value="formData.interval"
|
||||
:min="1"
|
||||
addon-after="ms"
|
||||
/>
|
||||
</j-form-item>
|
||||
|
||||
<a-form-item label="" :name="['features']">
|
||||
<a-checkbox-group v-model:value="formData.features">
|
||||
<a-checkbox value="changedOnly" name="type"
|
||||
>只推送变化的数据</a-checkbox
|
||||
>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
</j-form>
|
||||
<template #footer>
|
||||
<j-button key="back" @click="handleCancel">取消</j-button>
|
||||
<PermissionButton
|
||||
key="submit"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleOk"
|
||||
style="margin-left: 8px"
|
||||
:hasPermission="`DataCollect/Collector:update`"
|
||||
>
|
||||
确认
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { savePointBatch } from '@/api/data-collect/collector';
|
||||
import { Rule } from 'ant-design-vue/lib/form';
|
||||
import { cloneDeep } from 'lodash';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
const loading = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const formData = ref({
|
||||
accessModes: [],
|
||||
interval: '',
|
||||
features: [],
|
||||
});
|
||||
|
||||
const checkLength = (_rule: Rule, value: string): Promise<any> =>
|
||||
new Promise(async (resolve, reject) => {
|
||||
if (value) {
|
||||
return String(value).length > 64
|
||||
? reject('最多可输入64个字符')
|
||||
: resolve('');
|
||||
}
|
||||
});
|
||||
|
||||
const onSubmit = async () => {
|
||||
const data = await formRef.value?.validate();
|
||||
const { accessModes, features, interval } = data;
|
||||
const ischange =
|
||||
accessModes.length !== 0 || features.length !== 0 || !!interval;
|
||||
if (ischange) {
|
||||
const params = cloneDeep(props.data);
|
||||
params.forEach((i: any) => {
|
||||
accessModes.length !== 0 && (i.accessModes = data.accessModes);
|
||||
features.length !== 0 && (i.features = data.features);
|
||||
if (!!interval) {
|
||||
i.interval = data.interval;
|
||||
i.configuration = {
|
||||
...i.configuration,
|
||||
interval: data.interval,
|
||||
};
|
||||
}
|
||||
});
|
||||
loading.value = true;
|
||||
const response = await savePointBatch(params);
|
||||
if (response.status === 200) {
|
||||
emit('change', true);
|
||||
}
|
||||
loading.value = false;
|
||||
} else {
|
||||
emit('change', true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
onSubmit();
|
||||
};
|
||||
const handleCancel = () => {
|
||||
emit('change', false);
|
||||
};
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sizeText {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,6 @@
|
|||
<template>
|
||||
<div class="card">
|
||||
<div
|
||||
class="card-warp"
|
||||
:class="{ active: active ? 'active' : '' }"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div class="card-warp" :class="{ active: active ? 'active' : '' }">
|
||||
<div class="card-content">
|
||||
<div class="card-header">
|
||||
<div class="card-header-left">
|
||||
|
|
@ -15,7 +11,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex">
|
||||
<div
|
||||
class="card-item"
|
||||
style="display: flex"
|
||||
@click="handleClick"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<div class="card-item-avatar">
|
||||
<slot name="img"> </slot>
|
||||
|
|
@ -169,7 +169,7 @@ const handleClick = () => {
|
|||
border: 1px solid #e6e6e6;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
// cursor: pointer;
|
||||
box-shadow: 0 0 24px rgba(#000, 0.1);
|
||||
|
||||
.card-mask {
|
||||
|
|
@ -214,6 +214,9 @@ const handleClick = () => {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
.card-item-avatar {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,169 @@
|
|||
<template lang="">
|
||||
<j-modal title="写入" :visible="true" width="500px" @cancel="handleCancel">
|
||||
<j-form
|
||||
class="form"
|
||||
layout="vertical"
|
||||
:model="formData"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
ref="formRef"
|
||||
>
|
||||
<j-form-item
|
||||
:label="data.name"
|
||||
name="value"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: `请输入${data.name}`,
|
||||
},
|
||||
]"
|
||||
v-if="
|
||||
data.provider === 'MODBUS_TCP' &&
|
||||
data?.configuration.function === 'Coils'
|
||||
"
|
||||
>
|
||||
<j-textarea
|
||||
placeholder="请输入"
|
||||
v-model:value="formData.value"
|
||||
:maxlength="200"
|
||||
:rows="3"
|
||||
showCount
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
:label="data.name"
|
||||
name="value"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: `请输入${data.name}`,
|
||||
},
|
||||
]"
|
||||
v-else
|
||||
>
|
||||
<j-input-number
|
||||
v-if="valueTypeArray.includes(valueType)"
|
||||
style="width: 100%"
|
||||
placeholder="请输入"
|
||||
v-model:value="formData.value"
|
||||
/>
|
||||
<j-select
|
||||
v-else-if="['boolean'].includes(valueType)"
|
||||
style="width: 100%"
|
||||
v-model:value="formData.value"
|
||||
:options="[
|
||||
{
|
||||
label: '是',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: '否',
|
||||
value: false,
|
||||
},
|
||||
]"
|
||||
placeholder="请选择"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
/>
|
||||
<j-date-picker
|
||||
v-else-if="['datetime'].includes(valueType)"
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
show-time
|
||||
placeholder="请选择"
|
||||
@change="onChange"
|
||||
/>
|
||||
|
||||
<j-input
|
||||
v-else
|
||||
placeholder="请输入"
|
||||
v-model:value="formData.value"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
<template #footer>
|
||||
<j-button key="back" @click="handleCancel">取消</j-button>
|
||||
<PermissionButton
|
||||
key="submit"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleOk"
|
||||
style="margin-left: 8px"
|
||||
:hasPermission="`DataCollect/Collector:update`"
|
||||
>
|
||||
确认
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import { writePoint } from '@/api/data-collect/collector';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const valueType: string = (
|
||||
props.data?.provider === 'OPC_UA'
|
||||
? props?.data?.configuration?.type || 'Number'
|
||||
: props.data?.configuration?.codec?.provider || 'int8'
|
||||
).toLocaleLowerCase();
|
||||
|
||||
const valueTypeArray = [
|
||||
'int8',
|
||||
'int16',
|
||||
'int32',
|
||||
'ieee754_float',
|
||||
'ieee754_double',
|
||||
'hex,',
|
||||
'number',
|
||||
];
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
const loading = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const collectorId = props.data.collectorId;
|
||||
const pointId = props.data.id;
|
||||
|
||||
const formData = ref({
|
||||
value: '',
|
||||
});
|
||||
|
||||
const onChange = (value: Dayjs, dateString: string) => {
|
||||
formData.value.value = dateString;
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
const data = await formRef.value?.validate();
|
||||
const params = {
|
||||
...data,
|
||||
pointId,
|
||||
};
|
||||
loading.value = true;
|
||||
const response = await writePoint(collectorId, [params]);
|
||||
if (response.status === 200) {
|
||||
emit('change', true);
|
||||
}
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
onSubmit();
|
||||
};
|
||||
const handleCancel = () => {
|
||||
emit('change', false);
|
||||
};
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<j-spin :spinning="spinning">
|
||||
<j-advanced-search
|
||||
:columns="columns"
|
||||
target="search"
|
||||
|
|
@ -15,6 +15,16 @@
|
|||
:request="queryPoint"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'id', order: 'desc' }],
|
||||
terms: [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
column: 'collectorId',
|
||||
value: props.data.id,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:params="params"
|
||||
:rowSelection="{
|
||||
|
|
@ -42,6 +52,7 @@
|
|||
<j-menu-item>
|
||||
<PermissionButton
|
||||
hasPermission="DataCollect/Collector:update"
|
||||
@click="handlBatchUpdate()"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="FormOutlined"
|
||||
|
|
@ -52,6 +63,10 @@
|
|||
<j-menu-item>
|
||||
<PermissionButton
|
||||
hasPermission="DataCollect/Collector:delete"
|
||||
:popConfirm="{
|
||||
title: `确定删除？`,
|
||||
onConfirm: () => handlDelete(),
|
||||
}"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="EditOutlined"
|
||||
|
|
@ -75,17 +90,6 @@
|
|||
:statusText="getState(slotProps)?.text"
|
||||
:statusNames="Object.fromEntries(colorMap.entries())"
|
||||
>
|
||||
<!-- <PointCardBox
|
||||
:showStatus="true"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps)"
|
||||
:active="_selectedRowKeys.includes(slotProps.id)"
|
||||
v-bind="slotProps"
|
||||
class="card-box"
|
||||
:status="getState(slotProps).value"
|
||||
:statusText="slotProps.runningState?.text"
|
||||
:statusNames="Object.fromEntries(colorMap.entries())"
|
||||
> -->
|
||||
<template #title>
|
||||
<slot name="title">
|
||||
<div class="card-box-title">
|
||||
|
|
@ -95,8 +99,19 @@
|
|||
</template>
|
||||
<template #action>
|
||||
<div class="card-box-action">
|
||||
<a><AIcon type="DeleteOutlined" /></a>
|
||||
<a><AIcon type="FormOutlined" /></a>
|
||||
<a>
|
||||
<j-popconfirm
|
||||
title="确定删除？"
|
||||
@confirm="handlDelete(slotProps.id)"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</j-popconfirm>
|
||||
</a>
|
||||
<a
|
||||
><AIcon
|
||||
@click="handlEdit(slotProps)"
|
||||
type="FormOutlined"
|
||||
/></a>
|
||||
</div>
|
||||
</template>
|
||||
<template #img>
|
||||
|
|
@ -112,8 +127,26 @@
|
|||
<div class="card-box-content">
|
||||
<div class="card-box-content-left">
|
||||
<span>--</span>
|
||||
<a><AIcon type="EditOutlined" /></a>
|
||||
<a><AIcon type="RedoOutlined" /></a>
|
||||
<a
|
||||
v-if="
|
||||
getAccessModes(slotProps).includes(
|
||||
'write',
|
||||
)
|
||||
"
|
||||
><AIcon
|
||||
@click.stop="clickEdit(slotProps)"
|
||||
type="EditOutlined"
|
||||
/></a>
|
||||
<a
|
||||
v-if="
|
||||
getAccessModes(slotProps).includes(
|
||||
'read',
|
||||
)
|
||||
"
|
||||
><AIcon
|
||||
@click.stop="clickRedo(slotProps)"
|
||||
type="RedoOutlined"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="card-box-content-right">
|
||||
<div
|
||||
|
|
@ -139,17 +172,41 @@
|
|||
:data="current"
|
||||
@change="saveChange"
|
||||
/>
|
||||
</div>
|
||||
<SaveOPCUA
|
||||
v-if="visibleSaveOPCUA"
|
||||
:data="current"
|
||||
@change="saveChange"
|
||||
/>
|
||||
<WritePoint
|
||||
v-if="visibleWritePoint"
|
||||
:data="current"
|
||||
@change="saveChange"
|
||||
/>
|
||||
<BatchUpdate
|
||||
v-if="visibleBatchUpdate"
|
||||
:data="current"
|
||||
@change="saveChange"
|
||||
/>
|
||||
</j-spin>
|
||||
</template>
|
||||
<script lang="ts" setup name="PointPage">
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { queryPoint } from '@/api/data-collect/collector';
|
||||
import {
|
||||
queryPoint,
|
||||
batchDeletePoint,
|
||||
removePoint,
|
||||
readPoint,
|
||||
} from '@/api/data-collect/collector';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useMenuStore } from 'store/menu';
|
||||
import PointCardBox from './components/PointCardBox/index.vue';
|
||||
import { colorMap, getState } from '../data.ts';
|
||||
import WritePoint from './components/WritePoint/index.vue';
|
||||
import BatchUpdate from './components/BatchUpdate/index.vue';
|
||||
import SaveModBus from './Save/SaveModBus.vue';
|
||||
import SaveOPCUA from './Save/SaveOPCUA.vue';
|
||||
import { colorMap, getState } from '../data.ts';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
|
|
@ -164,10 +221,15 @@ const params = ref<Record<string, any>>({});
|
|||
const opcImage = getImage('/DataCollect/device-opcua.png');
|
||||
const modbusImage = getImage('/DataCollect/device-modbus.png');
|
||||
const visibleSaveModBus = ref(false);
|
||||
const visibleSaveOPCUA = ref(false);
|
||||
const visibleWritePoint = ref(false);
|
||||
const visibleBatchUpdate = ref(false);
|
||||
const current = ref({});
|
||||
const accessModesOption = ref();
|
||||
const _selectedRowKeys = ref<string[]>([]);
|
||||
|
||||
const spinning = ref(false);
|
||||
|
||||
const accessModesMODBUS_TCP = [
|
||||
{
|
||||
label: '读',
|
||||
|
|
@ -179,11 +241,6 @@ const accessModesMODBUS_TCP = [
|
|||
},
|
||||
];
|
||||
|
||||
const accessModesOPC_UA = accessModesMODBUS_TCP.concat({
|
||||
label: '订阅',
|
||||
value: 'subscribe',
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
|
|
@ -256,81 +313,54 @@ const columns = [
|
|||
},
|
||||
];
|
||||
|
||||
// const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||
// if (!data) return [];
|
||||
// const state = data.state.value;
|
||||
// const stateText = state === 'enabled' ? '禁用' : '启用';
|
||||
// const actions = [
|
||||
// {
|
||||
// key: 'update',
|
||||
// text: '编辑',
|
||||
// tooltip: {
|
||||
// title: '编辑',
|
||||
// },
|
||||
// icon: 'EditOutlined',
|
||||
// onClick: () => {
|
||||
// handlEdit(data.id);
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// key: 'action',
|
||||
// text: stateText,
|
||||
// tooltip: {
|
||||
// title: stateText,
|
||||
// },
|
||||
// icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
|
||||
// popConfirm: {
|
||||
// title: `确认${stateText}?`,
|
||||
// onConfirm: async () => {
|
||||
// let res =
|
||||
// state === 'enabled'
|
||||
// ? await disable(data.id)
|
||||
// : await enalbe(data.id);
|
||||
// if (res.success) {
|
||||
// message.success('操作成功');
|
||||
// tableRef.value?.reload();
|
||||
// } else {
|
||||
// message.error('操作失败！');
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// key: 'delete',
|
||||
// text: '删除',
|
||||
// disabled: state === 'enabled',
|
||||
// tooltip: {
|
||||
// title: state === 'enabled' ? '正常的流媒体不能删除' : '删除',
|
||||
// },
|
||||
// popConfirm: {
|
||||
// title: '确认删除?',
|
||||
// onConfirm: async () => {
|
||||
// const res = await remove(data.id);
|
||||
// if (res.success) {
|
||||
// message.success('操作成功');
|
||||
// tableRef.value.reload();
|
||||
// } else {
|
||||
// message.error('操作失败！');
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// icon: 'DeleteOutlined',
|
||||
// },
|
||||
// ];
|
||||
// return actions;
|
||||
// };
|
||||
|
||||
const handlAdd = () => {
|
||||
visibleSaveModBus.value = true;
|
||||
current.value = {
|
||||
treeId: props.data.id,
|
||||
collectorId: props.data.id,
|
||||
provider: props.data?.provider || 'MODBUS_TCP',
|
||||
};
|
||||
};
|
||||
const handlEdit = (id: string) => {
|
||||
// menuStory.jumpPage(`media/Stream/Detail`, { id }, { view: false });
|
||||
const handlEdit = (data: Object) => {
|
||||
if (data?.provider === 'OPC_UA') {
|
||||
visibleSaveOPCUA.value = true;
|
||||
} else {
|
||||
visibleSaveModBus.value = true;
|
||||
}
|
||||
current.value = cloneDeep(data);
|
||||
};
|
||||
const handlEye = (id: string) => {
|
||||
// menuStory.jumpPage(`media/Stream/Detail`, { id }, { view: true });
|
||||
const handlDelete = async (data: string | undefined) => {
|
||||
spinning.value = true;
|
||||
const res = !data
|
||||
? await batchDeletePoint(_selectedRowKeys.value)
|
||||
: await removePoint(data as string);
|
||||
if (res.status === 200) {
|
||||
cancelSelect();
|
||||
tableRef.value?.reload();
|
||||
message.success('操作成功');
|
||||
}
|
||||
spinning.value = false;
|
||||
};
|
||||
|
||||
const handlBatchUpdate = () => {
|
||||
const dataSet = new Set(_selectedRowKeys.value);
|
||||
const dataMap = new Map();
|
||||
tableRef?.value?._dataSource.forEach((i) => {
|
||||
dataSet.has(i.id) && dataMap.set(i.id, i);
|
||||
});
|
||||
current.value = [...dataMap.values()];
|
||||
visibleBatchUpdate.value = true;
|
||||
};
|
||||
const clickEdit = async (data: object) => {
|
||||
visibleWritePoint.value = true;
|
||||
current.value = cloneDeep(data);
|
||||
};
|
||||
const clickRedo = async (data: object) => {
|
||||
const res = await readPoint(data?.collectorId, [data?.id]);
|
||||
if (res.status === 200) {
|
||||
cancelSelect();
|
||||
tableRef.value?.reload();
|
||||
message.success('操作成功');
|
||||
}
|
||||
};
|
||||
|
||||
const getQuantity = (item: Partial<Record<string, any>>) => {
|
||||
|
|
@ -345,11 +375,9 @@ const getScaleFactor = (item: Partial<Record<string, any>>) => {
|
|||
const { scaleFactor } = item.configuration?.codec?.configuration || '';
|
||||
return !!scaleFactor ? scaleFactor + '(缩放因子)' : '';
|
||||
};
|
||||
|
||||
const getRight1 = (item: Partial<Record<string, any>>) => {
|
||||
return !!getQuantity(item) || getAddress(item) || getScaleFactor(item);
|
||||
};
|
||||
|
||||
const getText = (item: Partial<Record<string, any>>) => {
|
||||
return (item?.accessModes || []).map((i) => i?.text).join(',');
|
||||
};
|
||||
|
|
@ -357,6 +385,9 @@ const getInterval = (item: Partial<Record<string, any>>) => {
|
|||
const { interval } = item.configuration || '';
|
||||
return !!interval ? '采集频率' + interval + 'ms' : '';
|
||||
};
|
||||
const getAccessModes = (item: Partial<Record<string, any>>) => {
|
||||
return item?.accessModes?.map((i) => i?.value);
|
||||
};
|
||||
|
||||
const getaccessModesOption = () => {
|
||||
return props.data?.provider !== 'MODBUS_TCP'
|
||||
|
|
@ -369,10 +400,13 @@ const getaccessModesOption = () => {
|
|||
|
||||
const saveChange = (value: object) => {
|
||||
visibleSaveModBus.value = false;
|
||||
visibleSaveOPCUA.value = false;
|
||||
visibleWritePoint.value = false;
|
||||
visibleBatchUpdate.value = false;
|
||||
current.value = {};
|
||||
if (value) {
|
||||
handleSearch(params.value);
|
||||
// message.success('操作成功');
|
||||
tableRef.value?.reload();
|
||||
message.success('操作成功');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -404,22 +438,10 @@ watch(
|
|||
label: '订阅',
|
||||
value: 'subscribe',
|
||||
});
|
||||
|
||||
params.value = {
|
||||
terms: [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
column: 'collectorId',
|
||||
value: value.id,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
tableRef?.value?.reload();
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
/**
|
||||
|
|
@ -435,9 +457,11 @@ const handleSearch = (e: any) => {
|
|||
min-width: 480px;
|
||||
a {
|
||||
color: #474747;
|
||||
z-index: 1;
|
||||
}
|
||||
a:hover {
|
||||
color: #315efb;
|
||||
z-index: 1;
|
||||
}
|
||||
.card-box-title {
|
||||
font-size: 18px;
|
||||
|
|
@ -459,7 +483,10 @@ const handleSearch = (e: any) => {
|
|||
height: 68px;
|
||||
padding-right: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.card-box-content-right {
|
||||
flex: 0.8;
|
||||
|
|
|
|||
|
|
@ -201,7 +201,6 @@ const onSubmit = () => {
|
|||
};
|
||||
|
||||
loading.value = true;
|
||||
|
||||
const response = !id
|
||||
? await save(params)
|
||||
: await update(id, { ...props.data, ...params });
|
||||
|
|
@ -238,6 +237,10 @@ const getChannelNoPaging = async () => {
|
|||
};
|
||||
getChannelNoPaging();
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => formData.value.channelId,
|
||||
(value) => {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
新增采集器
|
||||
</PermissionButton>
|
||||
</div>
|
||||
<a-spin :spinning="spinning">
|
||||
<j-spin :spinning="spinning">
|
||||
<a-tree
|
||||
:tree-data="defualtDataSource"
|
||||
v-model:selected-keys="selectedKeys"
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
</template>
|
||||
</a-tree>
|
||||
<j-empty v-else description="暂无数据" />
|
||||
</a-spin>
|
||||
</j-spin>
|
||||
<Save v-if="visible" :data="current" @change="saveChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -16,3 +16,128 @@ export const getState = (record: any) => {
|
|||
return {};
|
||||
}
|
||||
};
|
||||
|
||||
const regOnlyNumber = new RegExp(/^\d+$/);
|
||||
|
||||
export const checkProviderData = {
|
||||
int8: 1,
|
||||
int16: 2,
|
||||
int32: 4,
|
||||
int64: 8,
|
||||
ieee754_float: 4,
|
||||
ieee754_double: 8,
|
||||
hex: 1,
|
||||
};
|
||||
|
||||
export const ModBusRules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入点位名称',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多可输入64个字符',
|
||||
},
|
||||
],
|
||||
function: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择功能码',
|
||||
},
|
||||
],
|
||||
pointKey: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入地址',
|
||||
},
|
||||
{
|
||||
pattern: regOnlyNumber,
|
||||
message: '请输入0-255之间的正整数',
|
||||
},
|
||||
],
|
||||
quantity: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入寄存器数量',
|
||||
},
|
||||
{
|
||||
pattern: regOnlyNumber,
|
||||
message: '请输入1-255之间的正整数',
|
||||
},
|
||||
],
|
||||
provider: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择数据类型',
|
||||
},
|
||||
],
|
||||
scaleFactor: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入缩放因子',
|
||||
},
|
||||
],
|
||||
accessModes: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择访问类型',
|
||||
},
|
||||
],
|
||||
writeByteCount: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择是否写入数据区长度',
|
||||
},
|
||||
],
|
||||
byteCount: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入自定义数据区长度（byte）',
|
||||
},
|
||||
],
|
||||
interval: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入采集频率',
|
||||
},
|
||||
],
|
||||
|
||||
description: [{ max: 200, message: '最多可输入200个字符' }],
|
||||
};
|
||||
|
||||
export const OPCUARules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入点位名称',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多可输入64个字符',
|
||||
},
|
||||
],
|
||||
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择数据类型',
|
||||
},
|
||||
],
|
||||
|
||||
accessModes: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择访问类型',
|
||||
},
|
||||
],
|
||||
|
||||
interval: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入采集频率',
|
||||
},
|
||||
],
|
||||
|
||||
description: [{ max: 200, message: '最多可输入200个字符' }],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<Tree @change="changeTree" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<Point :data="data"></Point>
|
||||
<Point v-if="!!data" :data="data" />
|
||||
</div>
|
||||
</div>
|
||||
</page-container>
|
||||
|
|
@ -32,7 +32,6 @@ const changeTree = (row: any) => {
|
|||
.left {
|
||||
width: 300px;
|
||||
border-right: 1px #eeeeee solid;
|
||||
// padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
.right {
|
||||
|
|
|
|||
Loading…
Reference in New Issue