|
|
@@ -1,7 +1,8 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, ref } from 'vue';
|
|
|
+import { onMounted, ref, useTemplateRef } from 'vue';
|
|
|
import { message } from 'ant-design-vue';
|
|
|
|
|
|
+import ConfirmModal from '@/components/ConfirmModal.vue';
|
|
|
import SvgIcon from '@/components/SvgIcon.vue';
|
|
|
import { useRequest } from '@/hooks/request';
|
|
|
import { t } from '@/i18n';
|
|
|
@@ -170,7 +171,7 @@ const customizationColumns = [
|
|
|
|
|
|
const protocolEquipmentColumns = [
|
|
|
{
|
|
|
- title: t('common.sequenceNumber'),
|
|
|
+ title: t('common.serialNumber'),
|
|
|
dataIndex: 'index',
|
|
|
key: 'index',
|
|
|
ellipsis: true,
|
|
|
@@ -215,6 +216,10 @@ interface GatewayList {
|
|
|
linkLists: PhysicalInterfaceList[];
|
|
|
}
|
|
|
|
|
|
+const modalGatewayRef = useTemplateRef('modalGateway');
|
|
|
+const modalEquipmentRef = useTemplateRef('modalEquipment');
|
|
|
+const modalCustomizationRef = useTemplateRef('modalCustomization');
|
|
|
+
|
|
|
const props = defineProps<UseGuideStepItemProps<EquipmentInformationForm>>();
|
|
|
const gatewayList = ref<GatewayList[]>([]);
|
|
|
const monitorAssociationGatewayList = ref<ListEquipmentParametersItem[]>([]);
|
|
|
@@ -249,6 +254,9 @@ const controlEquipmentLsit = ref<Key[]>([]);
|
|
|
const open = ref<boolean>(false);
|
|
|
const open1 = ref<boolean>(false);
|
|
|
const open2 = ref<boolean>(false);
|
|
|
+const gatewayIndex = ref<number>(0);
|
|
|
+const equipmentIndex = ref<number>(0);
|
|
|
+const customizationIndex = ref<number>(0);
|
|
|
|
|
|
let gatewayId: number;
|
|
|
|
|
|
@@ -287,6 +295,15 @@ const selectParameters = (value: number, id: number) => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const queryReset = (value: string) => {
|
|
|
+ if (value === 'monitor') {
|
|
|
+ monitorSearchContent.value = '';
|
|
|
+ } else if (value === 'control') {
|
|
|
+ controlSearchContent.value = '';
|
|
|
+ }
|
|
|
+ fuzzyQuery(value);
|
|
|
+};
|
|
|
+
|
|
|
const fuzzyQuery = (value: string) => {
|
|
|
if (value === 'monitor') {
|
|
|
listEquipmentParameters.value = listAllEquipmentParameters.value.filter((item) =>
|
|
|
@@ -362,25 +379,20 @@ const postGatewayLinkProtocolList = (linkId: number, id: number, monitorType: st
|
|
|
};
|
|
|
|
|
|
const gatewayDelete = (divId: number, linkDeleteId: number, index: number) => {
|
|
|
- gatewayList.value.splice(index, 1);
|
|
|
- monitorAssociationGatewayList.value = monitorAssociationGatewayList.value.filter(
|
|
|
- (item) => item.gatewayId === divId && item.linkId !== linkDeleteId,
|
|
|
- );
|
|
|
- controlAssociationGatewayList.value = controlAssociationGatewayList.value.filter(
|
|
|
- (item) => item.gatewayId === divId && item.linkId !== linkDeleteId,
|
|
|
- );
|
|
|
+ modalGatewayRef.value?.showView();
|
|
|
+ gatewayIndex.value = index;
|
|
|
+ gatewayId = divId;
|
|
|
+ linkId = linkDeleteId;
|
|
|
};
|
|
|
|
|
|
const customizationDelete = (index: number) => {
|
|
|
- customizationData.value.splice(index, 1);
|
|
|
+ modalCustomizationRef.value?.showView();
|
|
|
+ customizationIndex.value = index;
|
|
|
};
|
|
|
|
|
|
const gatewayDevDelete = (index: number) => {
|
|
|
- if (agreementListKey.value === 'monitoring') {
|
|
|
- monitorAssociationGatewayList.value.splice(index, 1);
|
|
|
- } else {
|
|
|
- controlAssociationGatewayList.value.splice(index, 1);
|
|
|
- }
|
|
|
+ modalEquipmentRef.value?.showView();
|
|
|
+ equipmentIndex.value = index;
|
|
|
};
|
|
|
|
|
|
const handleOk = () => {
|
|
|
@@ -512,6 +524,7 @@ const serialNumberAdd = (value: SelectValue, option: DefaultOptionType, index: n
|
|
|
|
|
|
gatewayList.value[index].links = links;
|
|
|
gatewayList.value[index].linkLists = links;
|
|
|
+ gatewayList.value[index].linkName = '';
|
|
|
};
|
|
|
|
|
|
const obtainParamValueListAutomatic = (linkId: number) => {
|
|
|
@@ -531,6 +544,20 @@ const linkSwitch = (value: SelectValue, option: DefaultOptionType, index: number
|
|
|
gatewayId = divId;
|
|
|
gatewayList.value[index].linkId = option.linkId;
|
|
|
gatewayList.value[index].modelNameShow = false;
|
|
|
+
|
|
|
+ // 创建gatewayList的键集合
|
|
|
+ const bKeys = new Set(gatewayList.value.map((item) => `${item.divId},${item.linkId}`));
|
|
|
+
|
|
|
+ // 过滤数组
|
|
|
+ const monitor = monitorAssociationGatewayList.value.filter((item) => bKeys.has(`${item.gatewayId},${item.linkId}`));
|
|
|
+
|
|
|
+ monitorAssociationGatewayList.value = monitor;
|
|
|
+
|
|
|
+ // 过滤数组
|
|
|
+ const control = controlAssociationGatewayList.value.filter((item) => bKeys.has(`${item.gatewayId},${item.linkId}`));
|
|
|
+
|
|
|
+ controlAssociationGatewayList.value = control;
|
|
|
+
|
|
|
obtainParamValueListAutomatic(option.linkId);
|
|
|
};
|
|
|
|
|
|
@@ -618,7 +645,7 @@ const arrayIdFiltering = (a: Key[], b: ListEquipmentParametersItem[]) => {
|
|
|
const validateParams = () => {
|
|
|
const errors: string[] = [];
|
|
|
const codes = new Set<string>();
|
|
|
- const names = new Set<string>();
|
|
|
+
|
|
|
const dataList = [
|
|
|
...monitorAssociationGatewayList.value,
|
|
|
...controlAssociationGatewayList.value,
|
|
|
@@ -629,11 +656,8 @@ const validateParams = () => {
|
|
|
if (codes.has(param.deviceParamCode)) {
|
|
|
errors.push(`设备参数编码:" ${param.deviceParamCode} "重复`);
|
|
|
}
|
|
|
- if (names.has(param.deviceParamName)) {
|
|
|
- errors.push(`设备参数名称:" ${param.deviceParamName} "重复`);
|
|
|
- }
|
|
|
+
|
|
|
codes.add(param.deviceParamCode);
|
|
|
- names.add(param.deviceParamName);
|
|
|
});
|
|
|
|
|
|
return errors;
|
|
|
@@ -645,16 +669,19 @@ const finish = async () => {
|
|
|
...controlAssociationGatewayList.value,
|
|
|
...customizationData.value,
|
|
|
];
|
|
|
+ if (gatewayList.value.some((item) => item.linkName == '')) {
|
|
|
+ throw new Error('物理接口不能为空！');
|
|
|
+ }
|
|
|
|
|
|
+ if ([...monitorAssociationGatewayList.value, ...controlAssociationGatewayList.value].length === 0) {
|
|
|
+ throw new Error('配置设备参数不能为空！');
|
|
|
+ }
|
|
|
if (dataList.some((item) => item.deviceParamCode == '')) {
|
|
|
throw new Error('设备参数编码不能为空！');
|
|
|
}
|
|
|
- if (dataList.some((item) => item.deviceParamName == '')) {
|
|
|
- throw new Error('设备参数名称不能为空！');
|
|
|
- }
|
|
|
const valueList = validateParams();
|
|
|
if (valueList.length) {
|
|
|
- throw new Error('设备参数名称或设备参数编码存在重复项！');
|
|
|
+ throw new Error('设备参数编码存在重复项！');
|
|
|
}
|
|
|
|
|
|
deviceParamGroups.value = [];
|
|
|
@@ -806,7 +833,31 @@ const addAutomaticMatching = () => {
|
|
|
open2.value = false;
|
|
|
};
|
|
|
|
|
|
-const openChange = () => {};
|
|
|
+const confirmGateway = () => {
|
|
|
+ gatewayList.value.splice(gatewayIndex.value, 1);
|
|
|
+ monitorAssociationGatewayList.value = monitorAssociationGatewayList.value.filter(
|
|
|
+ (item) => !(item.gatewayId === gatewayId && item.linkId === linkId),
|
|
|
+ );
|
|
|
+ controlAssociationGatewayList.value = controlAssociationGatewayList.value.filter(
|
|
|
+ (item) => !(item.gatewayId === gatewayId && item.linkId === linkId),
|
|
|
+ );
|
|
|
+ modalGatewayRef.value?.hideView();
|
|
|
+};
|
|
|
+
|
|
|
+const confirmEquipment = () => {
|
|
|
+ if (agreementListKey.value === 'monitoring') {
|
|
|
+ monitorAssociationGatewayList.value.splice(equipmentIndex.value, 1);
|
|
|
+ } else {
|
|
|
+ controlAssociationGatewayList.value.splice(equipmentIndex.value, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ modalEquipmentRef.value?.hideView();
|
|
|
+};
|
|
|
+
|
|
|
+const confirmCustomization = () => {
|
|
|
+ customizationData.value.splice(customizationIndex.value, 1);
|
|
|
+ modalCustomizationRef.value?.hideView();
|
|
|
+};
|
|
|
|
|
|
onMounted(() => {
|
|
|
handleRequest(async () => {
|
|
|
@@ -1092,7 +1143,7 @@ onMounted(() => {
|
|
|
{{ index + 1 }}
|
|
|
</template>
|
|
|
<template v-else-if="column.key === 'deviceParamCode'">
|
|
|
- <ATooltip :destroy-tooltip-on-hide="true" @openChange="openChange">
|
|
|
+ <ATooltip :destroy-tooltip-on-hide="true">
|
|
|
<template #title>{{ record.deviceParamCode }}</template>
|
|
|
</ATooltip>
|
|
|
<AInput
|
|
|
@@ -1181,16 +1232,25 @@ onMounted(() => {
|
|
|
<div class="gateway-parameters-left">
|
|
|
<ATabs v-model:active-key="agreementKey">
|
|
|
<ATabPane key="monitoring" :tab="$t('createDevice.dataMonitoring')">
|
|
|
- <AInput
|
|
|
- :placeholder="$t('common.search')"
|
|
|
- v-model:value="monitorSearchContent"
|
|
|
- class="gateway-parameters-left-bottom"
|
|
|
- allow-clear
|
|
|
- >
|
|
|
- <template #prefix>
|
|
|
- <SvgIcon class="search-svg" @click="fuzzyQuery('monitor')" name="search-o" />
|
|
|
- </template>
|
|
|
- </AInput>
|
|
|
+ <AFlex justify="space-between" align="center" class="gateway-parameters-left-bottom">
|
|
|
+ <AInput
|
|
|
+ placeholder="清输入网关参数名称搜索"
|
|
|
+ v-model:value="monitorSearchContent"
|
|
|
+ class="input-width"
|
|
|
+ allow-clear
|
|
|
+ >
|
|
|
+ <template #prefix>
|
|
|
+ <SvgIcon class="search-svg" name="search-o" />
|
|
|
+ </template>
|
|
|
+ </AInput>
|
|
|
+ <div>
|
|
|
+ <AButton class="button-margin" type="primary" @click="fuzzyQuery('monitor')">
|
|
|
+ {{ $t('common.query') }}
|
|
|
+ </AButton>
|
|
|
+ <AButton type="primary" ghost @click="queryReset('monitor')">{{ $t('common.reset') }}</AButton>
|
|
|
+ </div>
|
|
|
+ </AFlex>
|
|
|
+
|
|
|
<ATable
|
|
|
:row-selection="{
|
|
|
type: 'checkbox',
|
|
|
@@ -1211,16 +1271,26 @@ onMounted(() => {
|
|
|
</ATable>
|
|
|
</ATabPane>
|
|
|
<ATabPane key="remote" :tab="$t('createDevice.remoteControl')" force-render>
|
|
|
- <AInput
|
|
|
- :placeholder="$t('common.search')"
|
|
|
- v-model:value="controlSearchContent"
|
|
|
- class="gateway-parameters-left-bottom"
|
|
|
- allow-clear
|
|
|
- >
|
|
|
- <template #prefix>
|
|
|
- <SvgIcon class="search-svg" @click="fuzzyQuery('control')" name="search-o" />
|
|
|
- </template>
|
|
|
- </AInput>
|
|
|
+ <AFlex justify="space-between" align="center" class="gateway-parameters-left-bottom">
|
|
|
+ <AInput
|
|
|
+ placeholder="清输入网关参数名称搜索"
|
|
|
+ class="input-width"
|
|
|
+ v-model:value="controlSearchContent"
|
|
|
+ allow-clear
|
|
|
+ >
|
|
|
+ <template #prefix>
|
|
|
+ <SvgIcon class="search-svg" name="search-o" />
|
|
|
+ </template>
|
|
|
+ </AInput>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <AButton class="button-margin" type="primary" @click="fuzzyQuery('control')">
|
|
|
+ {{ $t('common.query') }}
|
|
|
+ </AButton>
|
|
|
+ <AButton type="primary" ghost @click="queryReset('control')">{{ $t('common.reset') }}</AButton>
|
|
|
+ </div>
|
|
|
+ </AFlex>
|
|
|
+
|
|
|
<ATable
|
|
|
:row-selection="{
|
|
|
type: 'checkbox',
|
|
|
@@ -1352,10 +1422,39 @@ onMounted(() => {
|
|
|
</template>
|
|
|
<div class="description">{{ $t('createDevice.matchParameters') }}</div>
|
|
|
</AModal>
|
|
|
+
|
|
|
+ <ConfirmModal
|
|
|
+ ref="modalGateway"
|
|
|
+ :title="$t('common.deleteConfirmation')"
|
|
|
+ :description-text="$t('common.confirmDeletion')"
|
|
|
+ :icon="{ name: 'delete' }"
|
|
|
+ :icon-bg-color="'#F56C6C'"
|
|
|
+ @confirm="confirmGateway"
|
|
|
+ />
|
|
|
+ <ConfirmModal
|
|
|
+ ref="modalEquipment"
|
|
|
+ :title="$t('common.deleteConfirmation')"
|
|
|
+ :description-text="$t('common.confirmDeletion')"
|
|
|
+ :icon="{ name: 'delete' }"
|
|
|
+ :icon-bg-color="'#F56C6C'"
|
|
|
+ @confirm="confirmEquipment"
|
|
|
+ />
|
|
|
+ <ConfirmModal
|
|
|
+ ref="modalCustomization"
|
|
|
+ :title="$t('common.deleteConfirmation')"
|
|
|
+ :description-text="$t('common.confirmDeletion')"
|
|
|
+ :icon="{ name: 'delete' }"
|
|
|
+ :icon-bg-color="'#F56C6C'"
|
|
|
+ @confirm="confirmCustomization"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.button-margin {
|
|
|
+ margin-right: 12px;
|
|
|
+}
|
|
|
+
|
|
|
.footer-div-top {
|
|
|
margin-top: 24px;
|
|
|
}
|
|
|
@@ -1377,6 +1476,10 @@ onMounted(() => {
|
|
|
padding-bottom: 24px;
|
|
|
}
|
|
|
|
|
|
+.input-width {
|
|
|
+ width: 256px;
|
|
|
+}
|
|
|
+
|
|
|
.gateway-parameters-left-bottom {
|
|
|
margin-bottom: 16px;
|
|
|
}
|
wangshun