fix: 边缘端映射组件替换
This commit is contained in:
100011797
parent
7d10dc3e6e
commit
60751783c2
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<a-select allowClear v-model:value="_value" @change="onChange" placeholder="请选择" style="width: 100%">
|
||||
<a-select-option
|
||||
<j-select allowClear v-model:value="_value" @change="onChange" placeholder="请选择" style="width: 100%">
|
||||
<j-select-option
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
:filter-option="filterOption"
|
||||
>{{ item.name }}</a-select-option
|
||||
>{{ item.name }}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</j-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
width="900px"
|
||||
title="批量映射"
|
||||
visible
|
||||
|
|
@ -10,49 +10,49 @@
|
|||
<div class="map-tree-top">
|
||||
采集器的点位名称与属性名称一致时将自动映射绑定；有多个采集器点位名称与属性名称一致时以第1个采集器的点位数据进行绑定
|
||||
</div>
|
||||
<a-spin :spinning="loading">
|
||||
<j-spin :spinning="loading">
|
||||
<div class="map-tree-content">
|
||||
<a-card class="map-tree-content-card" title="源数据">
|
||||
<a-tree
|
||||
<j-card class="map-tree-content-card" title="源数据">
|
||||
<j-tree
|
||||
checkable
|
||||
:height="300"
|
||||
:tree-data="dataSource"
|
||||
:checkedKeys="checkedKeys"
|
||||
@check="onCheck"
|
||||
/>
|
||||
</a-card>
|
||||
</j-card>
|
||||
<div style="width: 100px">
|
||||
<a-button
|
||||
<j-button
|
||||
:disabled="rightList.length >= leftList.length"
|
||||
@click="onRight"
|
||||
>加入右侧</a-button
|
||||
>加入右侧</j-button
|
||||
>
|
||||
</div>
|
||||
<a-card class="map-tree-content-card" title="采集器">
|
||||
<a-list
|
||||
<j-card class="map-tree-content-card" title="采集器">
|
||||
<j-list
|
||||
size="small"
|
||||
:data-source="rightList"
|
||||
class="map-tree-content-card-list"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<j-list-item>
|
||||
{{ item.title }}
|
||||
<template #actions>
|
||||
<a-popconfirm
|
||||
<j-popconfirm
|
||||
title="确定删除?"
|
||||
@confirm="_delete(item.key)"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</a-popconfirm>
|
||||
</j-popconfirm>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</j-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</j-list>
|
||||
</j-card>
|
||||
</div>
|
||||
</a-spin>
|
||||
</j-spin>
|
||||
</div>
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,46 +1,46 @@
|
|||
<template>
|
||||
<a-spin :spinning="loading" v-if="metadata.properties.length">
|
||||
<a-card>
|
||||
<j-spin :spinning="loading" v-if="metadata.properties.length">
|
||||
<j-card>
|
||||
<template #extra>
|
||||
<a-space>
|
||||
<a-button @click="visible = true">批量映射</a-button>
|
||||
<a-button type="primary" @click="onSave">保存</a-button>
|
||||
</a-space>
|
||||
<j-space>
|
||||
<j-button @click="visible = true">批量映射</j-button>
|
||||
<j-button type="primary" @click="onSave">保存</j-button>
|
||||
</j-space>
|
||||
</template>
|
||||
<a-form ref="formRef" :model="modelRef">
|
||||
<a-table :dataSource="modelRef.dataSource" :columns="columns">
|
||||
<j-form ref="formRef" :model="modelRef">
|
||||
<j-table :dataSource="modelRef.dataSource" :columns="columns">
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.key === 'collectorId'">
|
||||
采集器
|
||||
<a-tooltip title="边缘网关代理的真实物理设备">
|
||||
<j-tooltip title="边缘网关代理的真实物理设备">
|
||||
<AIcon type="QuestionCircleOutlined" />
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'channelId'">
|
||||
<a-form-item
|
||||
<j-form-item
|
||||
:name="['dataSource', index, 'channelId']"
|
||||
>
|
||||
<a-select
|
||||
<j-select
|
||||
style="width: 100%"
|
||||
v-model:value="record[column.dataIndex]"
|
||||
placeholder="请选择"
|
||||
allowClear
|
||||
:filter-option="filterOption"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
v-for="item in channelList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>{{ item.label }}</a-select-option
|
||||
>{{ item.label }}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'collectorId'">
|
||||
<a-form-item
|
||||
<j-form-item
|
||||
:name="['dataSource', index, 'collectorId']"
|
||||
:rules="[
|
||||
{
|
||||
|
|
@ -55,10 +55,10 @@
|
|||
type="COLLECTOR"
|
||||
:edgeId="instanceStore.current.parentId"
|
||||
/>
|
||||
</a-form-item>
|
||||
</j-form-item>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'pointId'">
|
||||
<a-form-item
|
||||
<j-form-item
|
||||
:name="['dataSource', index, 'pointId']"
|
||||
:rules="[
|
||||
{
|
||||
|
|
@ -73,33 +73,33 @@
|
|||
type="POINT"
|
||||
:edgeId="instanceStore.current.parentId"
|
||||
/>
|
||||
</a-form-item>
|
||||
</j-form-item>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'id'">
|
||||
<a-badge
|
||||
<j-badge
|
||||
v-if="record[column.dataIndex]"
|
||||
status="success"
|
||||
text="已绑定"
|
||||
/>
|
||||
<a-badge v-else status="error" text="未绑定" />
|
||||
<j-badge v-else status="error" text="未绑定" />
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-tooltip title="解绑">
|
||||
<a-popconfirm
|
||||
<j-tooltip title="解绑">
|
||||
<j-popconfirm
|
||||
title="确认解绑"
|
||||
:disabled="!record.id"
|
||||
@confirm="unbind(record.id)"
|
||||
>
|
||||
<a-button type="link" :disabled="!record.id"
|
||||
<j-button type="link" :disabled="!record.id"
|
||||
><AIcon type="icon-jiebang"
|
||||
/></a-button>
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
/></j-button>
|
||||
</j-popconfirm>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</j-table>
|
||||
</j-form>
|
||||
</j-card>
|
||||
<PatchMapping
|
||||
:deviceId="instanceStore.current.id"
|
||||
v-if="visible"
|
||||
|
|
@ -108,10 +108,10 @@
|
|||
:metaData="modelRef.dataSource"
|
||||
:edgeId="instanceStore.current.parentId"
|
||||
/>
|
||||
</a-spin>
|
||||
<a-card v-else>
|
||||
</j-spin>
|
||||
<j-card v-else>
|
||||
<JEmpty description='暂无数据，请配置物模型' style="margin: 10% 0" />
|
||||
</a-card>
|
||||
</j-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -7,41 +7,31 @@
|
|||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<div>
|
||||
<template
|
||||
v-if="['valueType', 'name'].includes(column.dataIndex)"
|
||||
>
|
||||
<span>{{ text }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<ParamsDropdown
|
||||
placeholder="请选择"
|
||||
:options="[]"
|
||||
:tabsOptions="tabOptions"
|
||||
:metricOption="upperOptions(record.valueType)"
|
||||
v-model:value="record.value"
|
||||
>
|
||||
<template v-slot="{label}">
|
||||
<j-input :value="label" />
|
||||
</template>
|
||||
</ParamsDropdown>
|
||||
</template>
|
||||
</div>
|
||||
<template v-if="column.dataIndex === 'name'">
|
||||
<span>{{ text }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'valueType'">
|
||||
<span>{{ record.valueType.type }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<FunctionItem
|
||||
:builtInList="builtInList"
|
||||
@change="onChange"
|
||||
:source="record.source"
|
||||
:data="record"
|
||||
v-model:value="record.value"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</j-table>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PropType } from 'vue';
|
||||
import ParamsDropdown from '../../../components/ParamsDropdown';
|
||||
|
||||
type Emits = {
|
||||
(e: 'update:modelValue', data: Record<string, any>[]): void;
|
||||
};
|
||||
const _emit = defineEmits<Emits>();
|
||||
import FunctionItem from './FunctionItem.vue';
|
||||
|
||||
const _props = defineProps({
|
||||
modelValue: {
|
||||
value: {
|
||||
type: Array as PropType<Record<string, any>[]>,
|
||||
default: () => undefined,
|
||||
},
|
||||
|
|
@ -49,20 +39,13 @@ const _props = defineProps({
|
|||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
functions: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const tabOptions = [
|
||||
{
|
||||
label: '手动输入',
|
||||
component: 'string',
|
||||
key: 'fixed',
|
||||
},
|
||||
{
|
||||
label: '内置参数',
|
||||
component: 'tree',
|
||||
key: 'upper',
|
||||
},
|
||||
];
|
||||
const emit = defineEmits(['update:value']);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -82,33 +65,29 @@ const columns = [
|
|||
},
|
||||
];
|
||||
|
||||
const dataSource = computed({
|
||||
get: () => {
|
||||
return _props.modelValue || [];
|
||||
},
|
||||
set: (val: any) => {
|
||||
_emit('update:modelValue', val);
|
||||
},
|
||||
const dataSource = ref<any[]>([]);
|
||||
|
||||
watchEffect(() => {
|
||||
const list = (_props.functions || []).map((item: any) => {
|
||||
const _item = _props.value?.find((i) => i.name === item?.id) || {};
|
||||
return {
|
||||
...item,
|
||||
..._item,
|
||||
name: item.name,
|
||||
};
|
||||
});
|
||||
dataSource.value = list;
|
||||
});
|
||||
|
||||
const filterParamsData = (type?: string, data?: any[]): any[] => {
|
||||
if (type && data) {
|
||||
return data.filter((item) => {
|
||||
if (item.children) {
|
||||
const _children = filterParamsData(type, item.children);
|
||||
item.children = _children;
|
||||
return _children.length ? true : false;
|
||||
} else if (item.type === type) {
|
||||
// optionMap.current.set(item.id, item);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
return data || [];
|
||||
};
|
||||
|
||||
const upperOptions = (_type: string) => {
|
||||
return filterParamsData(_type, _props?.builtInList) || [];
|
||||
const onChange = () => {
|
||||
const arr = [...dataSource.value].map((item) => {
|
||||
return {
|
||||
name: item.id,
|
||||
source: item.source,
|
||||
upperKey: item.upperKey || item.value,
|
||||
value: item.value,
|
||||
};
|
||||
});
|
||||
emit('update:value', arr);
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<ParamsDropdown
|
||||
placeholder="请选择"
|
||||
:options="handleOptions"
|
||||
:tabsOptions="tabOptions"
|
||||
:metricOptions="upperOptions"
|
||||
v-model:value="_value"
|
||||
v-model:source="_source"
|
||||
@select="onChange"
|
||||
>
|
||||
<template v-slot="{ label }">
|
||||
<j-input :value="label" />
|
||||
</template>
|
||||
</ParamsDropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ParamsDropdown from '../../../components/ParamsDropdown';
|
||||
import { handleParamsData } from './index';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
builtInList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
},
|
||||
source: {
|
||||
type: String,
|
||||
default: 'fixed',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:value', 'update:source', 'change']);
|
||||
|
||||
const _value = ref();
|
||||
const _source = ref();
|
||||
|
||||
const tabOptions = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: '手动输入',
|
||||
component: props.data?.valueType?.type,
|
||||
key: 'fixed',
|
||||
},
|
||||
{
|
||||
label: '内置参数',
|
||||
component: 'tree',
|
||||
key: 'upper',
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const handleOptions = computed(() => {
|
||||
const _item = props.data?.valueType || 'int';
|
||||
const _type = _item?.type;
|
||||
if (_type === 'boolean') {
|
||||
return [
|
||||
{
|
||||
label: _item.trueText || true,
|
||||
value: _item.trueValue || true,
|
||||
},
|
||||
{
|
||||
label: _item.falseText || false,
|
||||
value: _item.falseValue || false,
|
||||
},
|
||||
];
|
||||
}
|
||||
if (_type === 'enum') {
|
||||
return _item?.elements.map((i: any) => {
|
||||
return {
|
||||
label: i.text,
|
||||
value: i.value,
|
||||
};
|
||||
});
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
const filterParamsData = (type?: string, data?: any[]): any[] => {
|
||||
if (type && data) {
|
||||
const list = data.filter((item) => {
|
||||
if (item.children) {
|
||||
const _children = filterParamsData(type, item.children);
|
||||
item.children = _children;
|
||||
return _children.length ? true : false;
|
||||
} else if (item.type === type) {
|
||||
// optionMap.current.set(item.id, item);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
return handleParamsData(list);
|
||||
}
|
||||
return data || [];
|
||||
};
|
||||
|
||||
const upperOptions = computed(() => {
|
||||
return filterParamsData(props.data.valueType?.type, props?.builtInList);
|
||||
});
|
||||
|
||||
const onChange = () => {
|
||||
emit('update:value', _value.value);
|
||||
emit('update:source', _source.value);
|
||||
emit('change', { source: _source.value, value: _value.value });
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
_value.value = props.value;
|
||||
_source.value = props.source || 'fixed';
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,50 +1,59 @@
|
|||
<template>
|
||||
<div>
|
||||
<j-form :layout="'vertical'" ref="formRef" :model="modelRef">
|
||||
<j-row>
|
||||
<j-col :span="11">
|
||||
<j-form-item
|
||||
:name="['message', 'properties']"
|
||||
label="读取属性"
|
||||
:rules="[{ required: true, message: '请选择读取属性' }]"
|
||||
<j-form
|
||||
:layout="'vertical'"
|
||||
ref="propertyFormRef"
|
||||
:model="propertyModelRef"
|
||||
>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
name="properties"
|
||||
label="读取属性"
|
||||
:rules="[{ required: true, message: '请选择读取属性' }]"
|
||||
>
|
||||
<j-select
|
||||
showSearch
|
||||
placeholder="请选择属性"
|
||||
v-model:value="propertyModelRef.properties"
|
||||
@change="onChange"
|
||||
>
|
||||
<j-select
|
||||
showSearch
|
||||
placeholder="请选择属性"
|
||||
v-model:value="modelRef.properties"
|
||||
<j-select-option
|
||||
v-for="item in metadata?.properties || []"
|
||||
:value="item?.id"
|
||||
:key="item?.id"
|
||||
>{{ item?.name }}</j-select-option
|
||||
>
|
||||
<j-select-option
|
||||
v-for="item in metadata?.properties || []"
|
||||
:value="item?.id"
|
||||
:key="item?.id"
|
||||
>{{ item?.name }}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="2"></j-col>
|
||||
<j-col :span="11">
|
||||
<j-form-item
|
||||
:name="['message', 'propertiesValue']"
|
||||
label="属性值"
|
||||
:rules="[{ required: true, message: '请选择' }]"
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12" v-if="propertyModelRef.properties">
|
||||
<j-form-item
|
||||
name="propertiesValue"
|
||||
label="属性值"
|
||||
:rules="[{ required: true, message: '请选择' }]"
|
||||
>
|
||||
<ParamsDropdown
|
||||
placeholder="请选择"
|
||||
:options="handleOptions"
|
||||
:tabsOptions="tabOptions"
|
||||
:metricOption="upperOptions"
|
||||
v-model:value="propertyModelRef.propertiesValue"
|
||||
v-model:source="propertyModelRef.source"
|
||||
@change="onValueChange"
|
||||
>
|
||||
<ParamsDropdown
|
||||
icon="icon-canshu"
|
||||
placeholder="请选择"
|
||||
:options="[]"
|
||||
:tabsOptions="tabOptions"
|
||||
:metricOption="upperOptions(getType)"
|
||||
v-model:value="modelRef.propertiesValue"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
</div>
|
||||
<template v-slot="{ label }">
|
||||
<j-input :value="label" />
|
||||
</template>
|
||||
</ParamsDropdown>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ParamsDropdown from '../../../components/ParamsDropdown';
|
||||
import { handleParamsData } from './index';
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
|
|
@ -60,37 +69,44 @@ const props = defineProps({
|
|||
},
|
||||
builtInList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const emit = defineEmits(['update:value']);
|
||||
|
||||
const modelRef = reactive({
|
||||
properties: '',
|
||||
propertiesValue: '',
|
||||
source: '',
|
||||
const propertyFormRef = ref();
|
||||
|
||||
const propertyModelRef = reactive({
|
||||
properties: undefined,
|
||||
propertiesValue: undefined,
|
||||
source: 'fixed',
|
||||
});
|
||||
|
||||
const tabOptions = [
|
||||
{
|
||||
label: '手动输入',
|
||||
component: 'string',
|
||||
key: 'fixed',
|
||||
},
|
||||
{
|
||||
label: '内置参数',
|
||||
component: 'tree',
|
||||
key: 'upper',
|
||||
},
|
||||
];
|
||||
const getType = computed(() => {
|
||||
return props.metadata.properties.find((item: any) => item.id === modelRef.properties)?.valueType?.type
|
||||
})
|
||||
return props.metadata.properties.find(
|
||||
(item: any) => item.id === propertyModelRef.properties,
|
||||
);
|
||||
});
|
||||
|
||||
const tabOptions = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: '手动输入',
|
||||
component: getType.value?.valueType?.type,
|
||||
key: 'fixed',
|
||||
},
|
||||
{
|
||||
label: '内置参数',
|
||||
component: 'tree',
|
||||
key: 'upper',
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const filterParamsData = (type?: string, data?: any[]): any[] => {
|
||||
if (type && data) {
|
||||
return data.filter((item) => {
|
||||
const list = data.filter((item) => {
|
||||
if (item.children) {
|
||||
const _children = filterParamsData(type, item.children);
|
||||
item.children = _children;
|
||||
|
|
@ -101,40 +117,74 @@ const filterParamsData = (type?: string, data?: any[]): any[] => {
|
|||
}
|
||||
return false;
|
||||
});
|
||||
return handleParamsData(list);
|
||||
}
|
||||
return data || [];
|
||||
};
|
||||
|
||||
const upperOptions = (type: string) => {
|
||||
return filterParamsData(type, props?.builtInList) || []
|
||||
}
|
||||
const upperOptions = computed(() => {
|
||||
return filterParamsData(getType.value?.valueType?.type, props?.builtInList);
|
||||
});
|
||||
|
||||
const handleOptions = computed(() => {
|
||||
const _item = getType.value?.valueType;
|
||||
const _type = _item?.type;
|
||||
if (_type === 'boolean') {
|
||||
return [
|
||||
{
|
||||
label: _item.trueText,
|
||||
value: _item.trueValue,
|
||||
},
|
||||
{
|
||||
label: _item.falseText,
|
||||
value: _item.falseValue,
|
||||
},
|
||||
];
|
||||
}
|
||||
if (_type === 'enum') {
|
||||
return _item?.elements.map((i: any) => {
|
||||
return {
|
||||
label: i.text,
|
||||
value: i.value,
|
||||
};
|
||||
});
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
const onChange = () => {
|
||||
propertyModelRef.propertiesValue = undefined;
|
||||
propertyModelRef.source = 'fixed'
|
||||
emit('update:value', {
|
||||
[`${propertyModelRef.properties}`]: {
|
||||
value: propertyModelRef?.propertiesValue,
|
||||
source: propertyModelRef?.source,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const onValueChange = () => {
|
||||
const obj = {
|
||||
[`${propertyModelRef.properties}`]: {
|
||||
value: propertyModelRef?.propertiesValue,
|
||||
source: propertyModelRef?.source,
|
||||
},
|
||||
}
|
||||
emit('update:value', obj);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(newVal) => {
|
||||
const _keys = Object.keys(newVal)?.[0];
|
||||
if (_keys) {
|
||||
(modelRef.properties = _keys),
|
||||
(modelRef.propertiesValue = newVal[_keys]?.value);
|
||||
modelRef.source = newVal[_keys]?.source;
|
||||
if (newVal) {
|
||||
const _keys = Object.keys(newVal)?.[0];
|
||||
if (_keys) {
|
||||
propertyModelRef.properties = _keys as any;
|
||||
propertyModelRef.propertiesValue = newVal[_keys]?.value;
|
||||
propertyModelRef.source = newVal[_keys]?.source;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
);
|
||||
|
||||
const onFormSave = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async (_data: any) => {
|
||||
// 处理回传数据
|
||||
resolve(_data);
|
||||
})
|
||||
.catch((err: any) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({ onFormSave });
|
||||
</script>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
export const handleParamsData = (data: any[]): any[] => {
|
||||
return data?.map(item => {
|
||||
return {
|
||||
...item,
|
||||
key: item.column,
|
||||
disabled: !!item.children?.length,
|
||||
children: handleParamsData(item.children)
|
||||
}
|
||||
}) || []
|
||||
}
|
||||
|
|
@ -22,7 +22,6 @@
|
|||
showSearch
|
||||
placeholder="请选择功能"
|
||||
v-model:value="modelRef.message.functionId"
|
||||
@change="(val) => onFunctionChange(val, [])"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="item in metadata?.functions || []"
|
||||
|
|
@ -37,7 +36,11 @@
|
|||
:name="['message', 'inputs']"
|
||||
:rules="[{ required: true, message: '请输入功能值' }]"
|
||||
>
|
||||
<EditTable v-model:modelValue="modelRef.message.inputs" :builtInList="builtInList" />
|
||||
<EditTable
|
||||
:functions="functions"
|
||||
v-model:value="modelRef.message.inputs"
|
||||
:builtInList="builtInList"
|
||||
/>
|
||||
</j-form-item>
|
||||
</template>
|
||||
<template v-else-if="deviceMessageType === 'READ_PROPERTY'">
|
||||
|
|
@ -79,7 +82,7 @@ import EditTable from './EditTable.vue';
|
|||
import WriteProperty from './WriteProperty.vue';
|
||||
import { queryBuiltInParams } from '@/api/rule-engine/scene';
|
||||
import { useSceneStore } from '@/store/scene';
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const sceneStore = useSceneStore();
|
||||
const { data } = storeToRefs(sceneStore);
|
||||
|
|
@ -149,22 +152,31 @@ const deviceMessageType = computed(() => {
|
|||
|
||||
const builtInList = ref<any[]>([]);
|
||||
|
||||
const onFunctionChange = (val: string, values?: any[]) => {
|
||||
const functions = computed(() => {
|
||||
const _item = (metadata.value?.functions || []).find((item: any) => {
|
||||
return val === item.id;
|
||||
return modelRef.message?.functionId === item.id;
|
||||
});
|
||||
const list = (_item?.inputs || []).map((item: any) => {
|
||||
const _a = values?.find((i) => i.name === item.id);
|
||||
return {
|
||||
id: item.id,
|
||||
value: _a?.value,
|
||||
valueType: item?.valueType?.type,
|
||||
..._a,
|
||||
name: item.name,
|
||||
};
|
||||
return _item?.inputs || [];
|
||||
});
|
||||
|
||||
const _property = computed(() => {
|
||||
const _item = (metadata.value?.properties || []).find((item: any) => {
|
||||
if (deviceMessageType.value === 'WRITE_PROPERTY') {
|
||||
return (
|
||||
Object.keys(modelRef.message.properties || {})?.[0] === item.id
|
||||
);
|
||||
}
|
||||
return modelRef.message?.properties === item.id;
|
||||
});
|
||||
modelRef.message.inputs = list;
|
||||
};
|
||||
return _item;
|
||||
});
|
||||
|
||||
const _function = computed(() => {
|
||||
const _item = (metadata.value?.functions || []).find((item: any) => {
|
||||
return modelRef.message?.functionId === item.id;
|
||||
});
|
||||
return _item;
|
||||
});
|
||||
|
||||
const onMessageTypeChange = (val: string) => {
|
||||
if (['WRITE_PROPERTY', 'INVOKE_FUNCTION'].includes(val)) {
|
||||
|
|
@ -175,22 +187,18 @@ const onMessageTypeChange = (val: string) => {
|
|||
};
|
||||
queryBuiltInParams(unref(data), _params).then((res: any) => {
|
||||
if (res.status === 200) {
|
||||
builtInList.value = res.result
|
||||
builtInList.value = res.result;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => [
|
||||
props.values?.productDetail,
|
||||
props.values.selectorValues,
|
||||
props.values?.selector,
|
||||
],
|
||||
([newVal1, newVal2, newVal3]) => {
|
||||
if (newVal1?.id) {
|
||||
if (newVal3?.selector === 'fixed') {
|
||||
const id = newVal2?.[0]?.value;
|
||||
() => props.values,
|
||||
(newVal) => {
|
||||
if (newVal?.productDetail?.id) {
|
||||
if (newVal?.selector === 'fixed') {
|
||||
const id = newVal?.selectorValues?.[0]?.value;
|
||||
if (id) {
|
||||
detail(id).then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
|
|
@ -201,7 +209,9 @@ watch(
|
|||
});
|
||||
}
|
||||
} else {
|
||||
metadata.value = JSON.parse(newVal1?.metadata || '{}');
|
||||
metadata.value = JSON.parse(
|
||||
newVal?.productDetail?.metadata || '{}',
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -211,24 +221,36 @@ watch(
|
|||
watch(
|
||||
() => props.values?.message,
|
||||
(newVal) => {
|
||||
console.log(newVal)
|
||||
if (newVal?.messageType) {
|
||||
modelRef.message = newVal;
|
||||
if (newVal.messageType === 'INVOKE_FUNCTION' && newVal.functionId) {
|
||||
onFunctionChange(newVal.functionId, newVal?.inputs);
|
||||
if (newVal.messageType === 'READ_PROPERTY') {
|
||||
modelRef.message.properties = newVal.properties?.[0];
|
||||
}
|
||||
onMessageTypeChange(newVal.messageType)
|
||||
onMessageTypeChange(newVal.messageType);
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const onFormSave = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async (_data: any) => {
|
||||
resolve(_data);
|
||||
.then((_data: any) => {
|
||||
// 处理三种情况的值的格式
|
||||
const _properties = _data.message.properties || modelRef.message.properties
|
||||
const obj = {
|
||||
message: {
|
||||
...modelRef.message,
|
||||
..._data.message,
|
||||
properties: _data.message.messageType === 'READ_PROPERTY' ? [_properties] : _properties,
|
||||
propertiesName:
|
||||
deviceMessageType.value === 'INVOKE_FUNCTION'
|
||||
? _function.value?.name
|
||||
: _property.value?.name,
|
||||
},
|
||||
}
|
||||
resolve(obj);
|
||||
})
|
||||
.catch((err: any) => {
|
||||
reject(err);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
target="scene-trigger-device-device"
|
||||
/>
|
||||
<j-divider style="margin: 0" />
|
||||
<j-pro-table
|
||||
<JProTable
|
||||
ref="actionRef"
|
||||
model="CARD"
|
||||
:columns="columns"
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</JProTable>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='Product'>
|
||||
|
|
@ -180,7 +180,6 @@ watchEffect(() => {
|
|||
<style scoped lang='less'>
|
||||
.search {
|
||||
margin-bottom: 0;
|
||||
padding-right: 0px;
|
||||
padding-left: 0px;
|
||||
padding: 0 0 24px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<j-select
|
||||
placeholder="请选择关系"
|
||||
:options="relationList"
|
||||
show-search
|
||||
:value="value ? value[0]?.value?.relation : undefined"
|
||||
@change="onRelationChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import NoticeApi from '@/api/notice/config';
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [{value: {}}]
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:value', 'change']);
|
||||
const relationList = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
queryRelationList()
|
||||
})
|
||||
|
||||
const queryRelationList = () => {
|
||||
NoticeApi.getRelationUsers({
|
||||
paging: false,
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms: [{ termType: 'eq', column: 'objectTypeName', value: '设备' }],
|
||||
}).then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
relationList.value = (resp.result as any[]).map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.relation,
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onRelationChange = (val: any, options: any) => {
|
||||
const _values = [
|
||||
{
|
||||
value: {
|
||||
objectType: 'user',
|
||||
relation: val,
|
||||
},
|
||||
},
|
||||
];
|
||||
emit('update:value', _values);
|
||||
emit('change', _values, options);
|
||||
};
|
||||
</script>
|
||||
|
|
@ -30,13 +30,7 @@
|
|||
name="selectorValues"
|
||||
:rules="[{ required: true, message: '请选择关系' }]"
|
||||
>
|
||||
<j-select
|
||||
placeholder="请选择关系"
|
||||
v-model:value="modelRef.selectorValues"
|
||||
:options="relationList"
|
||||
show-search
|
||||
@change="onRelationChange"
|
||||
/>
|
||||
<RelationSelect @change="onRelationChange" v-model:value="modelRef.selectorValues" />
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
v-else-if="modelRef.selector === 'tag'"
|
||||
|
|
@ -86,6 +80,7 @@ import { getImage } from '@/utils/comm';
|
|||
import NoticeApi from '@/api/notice/config';
|
||||
import Device from './Device.vue';
|
||||
import Tag from './Tag.vue';
|
||||
import RelationSelect from './RelationSelect.vue'
|
||||
|
||||
const props = defineProps({
|
||||
values: {
|
||||
|
|
@ -130,7 +125,6 @@ const modelRef = reactive({
|
|||
const list = ref<any[]>([]);
|
||||
const builtInList = ref<any[]>([]);
|
||||
const tagList = ref<any[]>([]);
|
||||
const relationList = ref<any[]>([]);
|
||||
|
||||
const TypeList = [
|
||||
{
|
||||
|
|
@ -199,27 +193,10 @@ const sourceChangeEvent = async () => {
|
|||
const array = filterTree(resp.result as any[]);
|
||||
//判断相同产品才有按变量
|
||||
// if (props.formProductId === DeviceModel.productId)// TODO
|
||||
builtInList.value = array;
|
||||
builtInList.value = [] // array;
|
||||
}
|
||||
};
|
||||
|
||||
const queryRelationList = () => {
|
||||
NoticeApi.getRelationUsers({
|
||||
paging: false,
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms: [{ termType: 'eq', column: 'objectTypeName', value: '设备' }],
|
||||
}).then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
relationList.value = (resp.result as any[]).map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.relation,
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const filterType = async () => {
|
||||
const _list = TypeList.filter((item) => item.value === 'fixed');
|
||||
if (unref(data)?.trigger?.type === 'device') {
|
||||
|
|
@ -266,11 +243,8 @@ const filterType = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
const onSelectorChange = (val: string) => {
|
||||
const onSelectorChange = () => {
|
||||
modelRef.selectorValues = undefined;
|
||||
if (val === 'relation') {
|
||||
queryRelationList();
|
||||
}
|
||||
};
|
||||
|
||||
const onDeviceChange = (_detail: any) => {
|
||||
|
|
@ -306,7 +280,7 @@ const onTagChange = (val: any[], arr: any[]) => {
|
|||
if (arr) {
|
||||
tagList.value = arr;
|
||||
}
|
||||
emits('save', unref(modelRef), {});
|
||||
emits('save', unref(modelRef), {}, {tagList: tagList.value});
|
||||
};
|
||||
|
||||
const onVariableChange = (val: any, node: any) => {
|
||||
|
|
|
|||
|
|
@ -154,23 +154,23 @@ const onSave = (_data: any) => {
|
|||
productName: DeviceModel.productDetail.name,
|
||||
relationName: DeviceModel.relationName,
|
||||
triggerName: data.value.options?.trigger?.name || '触发设备',
|
||||
taglist: [],
|
||||
tagList: [],
|
||||
columns: [],
|
||||
otherColumns: [],
|
||||
};
|
||||
_options.name = DeviceModel.deviceDetail?.name;
|
||||
_options.name = DeviceModel.deviceDetail?.name || DeviceModel.selectorValues?.[0]?.name;
|
||||
const _type = _data.message.messageType;
|
||||
if (_type === 'INVOKE_FUNCTION') {
|
||||
_options.type = '执行';
|
||||
_options.properties = DeviceModel.propertiesName;
|
||||
_options.properties = _data.message.propertiesName;
|
||||
}
|
||||
if (_type === 'READ_PROPERTY') {
|
||||
_options.type = '读取';
|
||||
_options.properties = DeviceModel.propertiesName;
|
||||
_options.properties = _data.message.propertiesName;
|
||||
}
|
||||
if (_type === 'WRITE_PROPERTY') {
|
||||
_options.type = '设置';
|
||||
_options.properties = DeviceModel.propertiesName;
|
||||
_options.properties = _data.message.propertiesName;
|
||||
_options.propertiesValue =
|
||||
typeof DeviceModel.propertiesValue === 'object'
|
||||
? JSON.stringify(DeviceModel.propertiesValue)
|
||||
|
|
@ -183,7 +183,7 @@ const onSave = (_data: any) => {
|
|||
}
|
||||
}
|
||||
if (_options.selector === 'tag') {
|
||||
_options.taglist = DeviceModel.tagList.map((it) => ({
|
||||
_options.tagList = DeviceModel.tagList.map((it) => ({
|
||||
name: it.column || it.name,
|
||||
type: it.type ? (it.type === 'and' ? '并且' : '或者') : '',
|
||||
value: it.value,
|
||||
|
|
@ -205,6 +205,10 @@ const save = async (step?: number) => {
|
|||
if (deviceRef.value) {
|
||||
await deviceRef.value?.onFormSave();
|
||||
current.value = 2;
|
||||
} else {
|
||||
if(DeviceModel.selector === 'fixed' && DeviceModel.selectorValues?.length){
|
||||
current.value = 2;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (actionRef.value) {
|
||||
|
|
@ -228,8 +232,8 @@ const prev = () => {
|
|||
|
||||
const saveClick = () => save();
|
||||
|
||||
const onDeviceSave = (_data: any, _detail: any) => {
|
||||
Object.assign(DeviceModel, _data);
|
||||
const onDeviceSave = (_data: any, _detail: any, obj?: any) => {
|
||||
Object.assign(DeviceModel, {..._data, ...obj});
|
||||
DeviceModel.deviceDetail = _detail;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue