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

fix: 边缘端映射

This commit is contained in:
100011797 2023-03-29 15:01:25 +08:00
parent 00f7ca8824
commit fdc09d73d3
6 changed files with 288 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/views/device/Instance/Detail/EdgeMap/MSelect.vue
View File

@ -1,21 +1,25 @@
<template>
<j-select allowClear v-model:value="_value" @change="onChange" placeholder="请选择" style="width: 100%">
<j-select
allowClear
v-model:value="_value"
@change="onChange"
placeholder="请选择"
style="width: 100%"
>
<j-select-option
v-for="item in list"
v-bind="item"
:key="item.id"
:value="item.id"
:label="item.name"
:filter-option="filterOption"
showSearch
>{{ item.name }}</j-select-option
>
</j-select>
</template>
<script lang="ts" setup>
import {
edgeCollector,
edgePoint,
} from '@/api/device/instance';
import queryDataList from './utils';
const _props = defineProps({
modelValue: {
@ -33,15 +37,17 @@ const _props = defineProps({
edgeId: {
type: String,
default: '',
}
},
provider: {
type: String,
default: '',
},
});
const filterOption = (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
type Emits = {
(e: 'update:modelValue', data: string | undefined): void;
(e: 'update:provider', data: string | undefined): void;
(e: 'change', data: string | undefined): void;
};
const emit = defineEmits<Emits>();
@ -52,64 +58,16 @@ watchEffect(() => {
_value.value = _props.modelValue;
});
const onChange = (_val: string) => {
const onChange = (_val: string, _options: any) => {
emit('update:modelValue', _val);
};
const getCollector = async (_val: string) => {
if (!_val) {
return [];
} else {
const resp = await edgeCollector(_props.edgeId, {
terms: [
{
terms: [
{
column: 'channelId',
value: _val,
},
],
},
],
});
if (resp.status === 200) {
list.value = (resp.result as any[])?.[0] || []
}
}
};
const getPoint = async (_val: string) => {
if (!_val) {
return [];
} else {
const resp = await edgePoint(_props.edgeId, {
terms: [
{
terms: [
{
column: 'collectorId',
value: _val,
},
],
},
],
});
if (resp.status === 200) {
list.value = (resp.result as any[])?.[0] || []
}
}
emit('update:provider', _options?.provider);
emit('change', _val);
};
watchEffect(() => {
if (_props.id) {
if (_props.type === 'POINT') {
getPoint(_props.id);
} else {
getCollector(_props.id);
}
} else {
list.value = [];
}
queryDataList(_props.id, _props.edgeId, _props.type).then((_data: any) => {
list.value = _data;
});
});
</script>

191
src/views/device/Instance/Detail/EdgeMap/index.vue
View File

@ -31,7 +31,9 @@
v-model:value="record[column.dataIndex]"
placeholder="请选择"
allowClear
:filter-option="filterOption"
@change="
() => onChannelChange(index, 'channel')
"
>
<j-select-option
v-for="item in channelList"
@ -58,6 +60,10 @@
:id="record.channelId"
type="COLLECTOR"
:edgeId="instanceStore.current.parentId"
v-model:provider="record.provider"
@change="
onChannelChange(index, 'collector')
"
/>
</j-form-item>
</template>
@ -80,53 +86,74 @@
</j-form-item>
</template>
<template v-if="column.dataIndex === 'id'">
<template v-if="record[column.dataIndex]">
<j-badge
v-if="record[column.dataIndex]"
v-if="record.state.value === 'enabled'"
status="success"
text="已绑定"
text="在线"
/>
<j-badge
v-else
status="warning"
text="离线"
/>
</template>
<j-badge v-else status="error" text="未绑定" />
</template>
<template v-if="column.key === 'action'">
<j-space>
<PermissionButton
<j-tooltip
:title="
isPermission
? '解绑'
: '暂无权限，请联系管理员'
"
>
<j-popconfirm
title="确认解绑？"
:disabled="!record.id || !isPermission"
@confirm="unbind(record.id)"
>
<j-button
type="link"
:disabled="!record.id"
:popConfirm="{
title: '确认解绑？',
onConfirm: unbind(record.id),
}"
:disabled="
!record.id || !isPermission
"
style="padding: 0 5px"
hasPermission="device/Instance:update"
:tooltip="{
title: '解绑',
}"
>
<AIcon type="icon-jiebang" />
</PermissionButton>
</j-button>
</j-popconfirm>
</j-tooltip>
<template v-if="record.id">
<PermissionButton
type="link"
:disabled="!record.id"
style="padding: 0 5px"
:popConfirm="{
title:
<j-tooltip
:title="
isPermission
? record.state.value ===
'enabled'
? '禁用'
: '启用'
: '暂无权限，请联系管理员'
"
>
<j-popconfirm
:title="
record.state.value === 'enabled'
? '确认禁用？'
: '确认启用?',
onConfirm: onAction(record),
}"
hasPermission="device/Instance:update"
:tooltip="{
title:
record.state.value === 'enabled'
? '禁用'
: '启用',
}"
: '确认启用?'
"
:disabled="!isPermission"
@confirm="onAction(record)"
>
<j-button
type="link"
style="padding: 0 5px"
:disabled="!isPermission"
>
<AIcon
v-if="
record.state.value === 'enabled'
record.state.value ===
'enabled'
"
type="StopOutlined"
/>
@ -134,7 +161,9 @@
v-else
type="PlayCircleOutlined"
/>
</PermissionButton>
</j-button>
</j-popconfirm>
</j-tooltip>
</template>
</j-space>
</template>
@ -142,10 +171,10 @@
</j-table>
<div class="pagination">
<j-pagination
@change="onPageChange"
v-model:pageSize="pageSize"
v-model:current="current"
:total="metadata?.properties?.length || 0"
@change="onPageChange"
/>
</div>
</j-form>
@ -175,6 +204,8 @@ import {
import MSelect from './MSelect.vue';
import PatchMapping from './PatchMapping.vue';
import { onlyMessage } from '@/utils/comm';
import { cloneDeep } from 'lodash-es';
import { usePermissionStore } from '@/store/permission';
const columns = [
{
@ -214,19 +245,22 @@ const columns = [
},
];
const current = ref<number>(1);
const pageSize = ref<number>(10);
const permissionStore = usePermissionStore();
const filterOption = (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const isPermission = permissionStore.hasPermission('device/Instance:update');
const current = ref<number>(0);
const pageSize = ref<number>(10);
const instanceStore = useInstanceStore();
const metadata = JSON.parse(instanceStore.current?.metadata || '{}');
const loading = ref<boolean>(false);
const channelList = ref<any[]>([]);
const _properties = ref<any[]>([]);
const _properties = computed(() => {
const _cur = current.value >= 1 ? current.value : 1;
return metadata.properties.slice((_cur - 1) * 10, _cur * 10);
});
const modelRef = reactive<{
dataSource: any[];
@ -250,18 +284,9 @@ const getChannel = async () => {
}
};
const queryData = (cur: number) => {
_properties.value = metadata.properties.slice(
(cur > 0 ? cur - 1 : 0) * 10,
cur * 10,
);
handleSearch(_properties.value)
};
const handleSearch = async (array: any[]) => {
const handleSearch = async (_array: any[]) => {
loading.value = true;
getChannel();
const _metadata: any[] = array.map((item: any) => ({
const _metadata: any[] = _array.map((item: any) => ({
metadataId: item.id,
metadataName: `${item.name}(${item.id})`,
metadataType: 'property',
@ -297,11 +322,12 @@ const handleSearch = async (array: any[]) => {
};
const unbind = async (id: string) => {
if (id) {
const _deviceId = instanceStore.current.id;
if (id && _deviceId) {
const resp = await removeEdgeMap(
instanceStore.current?.parentId || '',
{
deviceId: instanceStore.current.id,
deviceId: _deviceId,
idList: [id],
},
);
@ -314,22 +340,31 @@ const unbind = async (id: string) => {
const onPatchBind = () => {
visible.value = false;
handleSearch(_properties.value);
onRefresh();
};
const onPageChange = (page: any) => {
queryData(page)
const onChannelChange = (_index: number, type: 'collector' | 'channel') => {
if (type === 'channel') {
modelRef.dataSource[_index].collectorId = undefined;
modelRef.dataSource[_index].pointId = undefined;
} else {
modelRef.dataSource[_index].pointId = undefined;
}
};
onMounted(() => {
_properties.value = metadata.properties.slice(0, 10);
getChannel();
handleSearch(_properties.value);
});
const onPageChange = () => {
handleSearch(_properties.value);
};
const onSave = () => {
formRef.value
.validate()
.then(async () => {
.then(async (_data: any) => {
const arr = toRaw(modelRef).dataSource.filter(
(i: any) => i.channelId,
);
@ -345,7 +380,7 @@ const onSave = () => {
);
if (resp.status === 200) {
onlyMessage('操作成功！', 'success');
handleSearch(_properties.value);
onRefresh();
}
}
})
@ -355,8 +390,9 @@ const onSave = () => {
};
const onAction = async (record: any) => {
const value = await formRef.value.validate();
const array = value.filter((item: any) => item.channelId);
const array = (modelRef.dataSource || [])?.filter(
(item: any) => item.channelId,
);
const findArray = array.find((item: any) => item.id === record?.id);
const arr = {
...findArray,
@ -374,9 +410,42 @@ const onAction = async (record: any) => {
);
if (resp.status === 200) {
onlyMessage('操作成功！', 'success');
handleSearch(_properties.value);
onRefresh();
}
};
const onRefresh = async () => {
loading.value = true;
if (modelRef.dataSource && modelRef.dataSource.length) {
const resp: any = await getEdgeMap(
instanceStore.current?.parentId || '',
{
deviceId: instanceStore.current.id,
query: {},
},
).catch(() => {
loading.value = false;
});
if (resp.status === 200) {
const arr = cloneDeep(modelRef.dataSource);
const array = resp.result?.[0].map((x: any) => {
const _item = arr.find(
(item: any) => item.metadataId === x.metadataId,
);
if (_item) {
return {
..._item,
...x,
};
} else {
return x;
}
});
modelRef.dataSource = array;
}
}
loading.value = false;
};
</script>
<style lang="less" scoped>

48
src/views/device/Instance/Detail/EdgeMap/utils.ts Normal file
View File

@ -0,0 +1,48 @@
import { edgeCollector, edgePoint } from "@/api/device/instance";
const channelMap = new Map()
const queryDataList = (_val: string, edgeId: string, type: string) => new Promise(async (resolve) => {
if (!_val || !edgeId || !type) {
resolve([])
} else {
if (channelMap.get(_val)) {
resolve(channelMap.get(_val))
} else {
let resp = undefined
if (type === 'POINT') {
resp = await edgePoint(edgeId, {
terms: [
{
terms: [
{
column: 'collectorId',
value: _val,
},
],
},
],
});
} else {
resp = await edgeCollector(edgeId, {
terms: [
{
terms: [
{
column: 'channelId',
value: _val,
},
],
},
],
});
}
if (resp && resp.status === 200) {
const _data = (resp.result as any[])?.[0] || []
channelMap.set(_val, _data)
resolve(_data)
}
}
}
})
export default queryDataList

70
src/views/device/Instance/index.vue
View File

@ -308,8 +308,8 @@ import dayjs from 'dayjs';
import BadgeStatus from '@/components/BadgeStatus/index.vue';
import BatchDropdown from '@/components/BatchDropdown/index.vue';
import { BatchActionsType } from '@/components/BatchDropdown/types';
import {useRouterParams} from "@/utils/hooks/useParams";
import { accessConfigTypeFilter } from '@/utils/setting'
import { useRouterParams } from '@/utils/hooks/useParams';
import { accessConfigTypeFilter } from '@/utils/setting';
const instanceRef = ref<Record<string, any>>({});
const params = ref<Record<string, any>>({});
@ -322,22 +322,22 @@ const operationVisible = ref<boolean>(false);
const api = ref<string>('');
const type = ref<string>('');
const isCheck = ref<boolean>(false);
const routerParams = useRouterParams()
const routerParams = useRouterParams();
const menuStory = useMenuStore();
const transformData = (arr: any[]): any[] => {
if(Array.isArray(arr) && arr.length){
if (Array.isArray(arr) && arr.length) {
return (arr || []).map((item: any) => {
return {
...item,
id: `classifiedId is ${item.id}`,
children: transformData(item.children)
}
})
children: transformData(item.children),
};
});
} else {
return []
return [];
}
}
};
const columns = [
{
@ -412,7 +412,7 @@ const columns = [
hideInTable: true,
search: {
type: 'treeSelect',
rename: 'productId$product-info',
// rename: 'productId$product-info',
options: () =>
new Promise((resolve) => {
queryTree({ paging: false }).then((resp: any) => {
@ -429,22 +429,24 @@ const columns = [
hideInTable: true,
search: {
type: 'select',
rename: 'productId$product-info',
// rename: 'productId$product-info',
options: () =>
new Promise((resolve) => {
getProviders().then((resp: any) => {
const data = resp.result || []
resolve(accessConfigTypeFilter(data).map(item => ({
const data = resp.result || [];
resolve(
accessConfigTypeFilter(data).map((item) => ({
...item,
value: `accessProvider is ${item.id}`
})))
value: `accessProvider is ${item.id}`,
})),
);
});
}),
},
},
{
key: 'productId$product-info',
dataIndex: 'productId$product-info',
key: 'accessId',
dataIndex: 'accessId',
title: '接入方式',
hideInTable: true,
search: {
@ -728,9 +730,9 @@ const syncDeviceStatus = () => {
};
const delSelectedDevice = async () => {
if(!_selectedRowKeys.value.length){
message.error('请选择设备')
return
if (!_selectedRowKeys.value.length) {
message.error('请选择设备');
return;
}
const resp = await batchDeleteDevice(_selectedRowKeys.value);
if (resp.status === 200) {
@ -754,9 +756,9 @@ const delSelectedDevice = async () => {
// };
const disabledSelectedDevice = async () => {
if(!_selectedRowKeys.value.length){
message.error('请选择设备')
return
if (!_selectedRowKeys.value.length) {
message.error('请选择设备');
return;
}
const resp = await batchUndeployDevice(_selectedRowKeys.value);
if (resp.status === 200) {
@ -842,7 +844,7 @@ const batchActions: BatchActionsType[] = [
popConfirm: {
title: '确认禁用选中设备?',
onConfirm: disabledSelectedDevice,
}
},
},
},
];
@ -853,7 +855,25 @@ const saveBtn = () => {
};
const handleSearch = (_params: any) => {
params.value = _params;
// params.value = _params;
const newParams = (_params?.terms as any[])?.map((item1) => {
item1.terms = item1.terms.map((item2: any) => {
if (
item2.column &&
['classifiedId', 'accessId', 'accessProvider'].includes(
item2.column,
)
) {
return {
...item2,
column: 'productId$product-info'
};
}
return item2;
});
return item1;
});
params.value = { terms: newParams || [] };
};
const onRefresh = () => {

26
src/views/media/Device/Save/SaveProduct.vue
View File

@ -70,9 +70,14 @@
<div class="gateway-box">
<div v-if="!gatewayList.length">
暂无数据，请先
<j-button type="link">
添加{{ providerType[props.channel] }} 接入网关
</j-button>
<PermissionButton
type="link"
style="padding: 0"
hasPermission="link/AccessConfig:add"
@click="onJump"
>
添加{{ providerType[props.channel] }}接入网关
</PermissionButton>
</div>
<div
class="gateway-item"
@ -156,6 +161,9 @@ import DeviceApi from '@/api/media/device';
import { getImage } from '@/utils/comm';
import { gatewayType } from '@/views/media/Device/typings';
import { providerType } from '../const';
import { useMenuStore } from '@/store/menu';
const menuStory = useMenuStore();
type Emits = {
(e: 'update:visible', data: boolean): void;
@ -234,8 +242,8 @@ watch(
if (val) {
getGatewayList();
} else {
_selectedRowKeys.value = []
extendFormItem.value = []
_selectedRowKeys.value = [];
extendFormItem.value = [];
emit('close');
}
},
@ -290,6 +298,14 @@ const handleCancel = () => {
_vis.value = false;
formRef.value.resetFields();
};
const onJump = () => {
menuStory.jumpPage(
`link/AccessConfig/Detail`,
{ id: ':id' },
{ view: false },
);
}
</script>
<style lang="less" scoped>

5
src/views/rule-engine/Scene/Save/action/Notify/variableItem/User.vue
View File

@ -43,6 +43,8 @@
:multiple="true"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:value="relationData"
showSearch
treeNodeFilterProp="title"
>
<template #title="{ key, username, title }">
<div
@ -69,6 +71,8 @@
:tree-data="treeData"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:value="relationData"
showSearch
treeNodeFilterProp="title"
>
<template #title="{ key, username, title }">
<div
@ -110,6 +114,7 @@
placeholder="请输入收件人邮箱,多个收件人用换行分隔"
:value="value?.value"
mode="tags"
max-tag-count="responsive"
@change="
(val) =>
onChange(