feat: 标签编辑和关系编辑
This commit is contained in:
parent
0626348328
commit
f381453bce
Before Width: | Height: | Size: 544 B After Width: | Height: | Size: 544 B |
|
@ -120,3 +120,50 @@ export const update = (data: Partial<DeviceInstance>) => data.id ? server.patch(
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export const getConfigMetadata = (id: string) => server.get(`/device-instance/${id}/config-metadata`)
|
export const getConfigMetadata = (id: string) => server.get(`/device-instance/${id}/config-metadata`)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 断开连接
|
||||||
|
* @param id 设备id
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const _disconnect = (id: string) => server.post(`/device-instance/${id}/disconnect`)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询用户列表
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const queryUserListNoPaging = () => server.post(`/user/_query/no-paging`, {
|
||||||
|
paging: false,
|
||||||
|
sorts: [{name: 'name', order: "asc"}]
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 保存设备关系
|
||||||
|
* @param id 设备id
|
||||||
|
* @param data
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const saveRelations = (id: string, data: Record<string, any>) => server.patch(`/device/instance/${id}/relations`, data)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 修改标签
|
||||||
|
* @param id 设备id
|
||||||
|
* @param data
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const saveTags = (id: string, data: Record<string, any>) => server.patch(`/device/instance/${id}/tag`, data)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除标签
|
||||||
|
* @param deviceId 设备id
|
||||||
|
* @param id 标签id
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const delTags = (deviceId: string, id: string) => server.remove(`/device/instance/${deviceId}/tag/${id}`)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 恢复默认配置
|
||||||
|
* @param deviceId 设备id
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const configurationReset = (deviceId: string) => server.put(`/device-instance/${deviceId}/configuration/_reset`)
|
|
@ -333,7 +333,7 @@ const JTable = defineComponent<JTableProps>({
|
||||||
total={total.value}
|
total={total.value}
|
||||||
showQuickJumper={false}
|
showQuickJumper={false}
|
||||||
showSizeChanger={true}
|
showSizeChanger={true}
|
||||||
current={pageIndex.value}
|
current={pageIndex.value + 1}
|
||||||
pageSize={pageSize.value}
|
pageSize={pageSize.value}
|
||||||
pageSizeOptions={['12', '24', '48', '60', '100']}
|
pageSizeOptions={['12', '24', '48', '60', '100']}
|
||||||
showTotal={(num) => {
|
showTotal={(num) => {
|
||||||
|
@ -345,7 +345,7 @@ const JTable = defineComponent<JTableProps>({
|
||||||
handleSearch({
|
handleSearch({
|
||||||
...props.params,
|
...props.params,
|
||||||
pageSize: size,
|
pageSize: size,
|
||||||
pageIndex: pageSize.value === size ? page : 0
|
pageIndex: pageSize.value === size ? (page ? page - 1 : 0) : 0
|
||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -4,8 +4,12 @@
|
||||||
<div style="font-size: 16px; font-weight: 700">配置</div>
|
<div style="font-size: 16px; font-weight: 700">配置</div>
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑</a-button>
|
<a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑</a-button>
|
||||||
|
<a-popconfirm title="确认重新应用该配置?" @confirm="deployBtn">
|
||||||
<a-button type="link" v-if="instanceStore.detail.current?.value !== 'notActive'"><AIcon type="CheckOutlined" />应用配置<a-tooltip title="修改配置后需重新应用后才能生效。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
|
<a-button type="link" v-if="instanceStore.detail.current?.value !== 'notActive'"><AIcon type="CheckOutlined" />应用配置<a-tooltip title="修改配置后需重新应用后才能生效。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
<a-popconfirm title="确认恢复默认配置?" @confirm="resetBtn">
|
||||||
<a-button type="link" v-if="instanceStore.detail.aloneConfiguration"><AIcon type="SyncOutlined" />恢复默认<a-tooltip title="该设备单独编辑过配置信息,点击此将恢复成默认的配置信息,请谨慎操作。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
|
<a-button type="link" v-if="instanceStore.detail.aloneConfiguration"><AIcon type="SyncOutlined" />恢复默认<a-tooltip title="该设备单独编辑过配置信息,点击此将恢复成默认的配置信息,请谨慎操作。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
|
||||||
|
</a-popconfirm>
|
||||||
</a-space>
|
</a-space>
|
||||||
</div>
|
</div>
|
||||||
<a-descriptions bordered size="small" v-for="i in config" :key="i.name">
|
<a-descriptions bordered size="small" v-for="i in config" :key="i.name">
|
||||||
|
@ -28,7 +32,8 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useInstanceStore } from "@/store/instance"
|
import { useInstanceStore } from "@/store/instance"
|
||||||
import { ConfigMetadata } from "@/views/device/Product/typings"
|
import { ConfigMetadata } from "@/views/device/Product/typings"
|
||||||
import { getConfigMetadata } from '@/api/device/instance'
|
import { getConfigMetadata, _deploy, configurationReset } from '@/api/device/instance'
|
||||||
|
import { message } from "ant-design-vue"
|
||||||
|
|
||||||
const instanceStore = useInstanceStore()
|
const instanceStore = useInstanceStore()
|
||||||
const visible = ref<boolean>(false)
|
const visible = ref<boolean>(false)
|
||||||
|
@ -36,11 +41,11 @@ const config = ref<ConfigMetadata[]>([])
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
if(instanceStore.current.id){
|
if(instanceStore.current.id){
|
||||||
// getConfigMetadata(instanceStore.current.id).then(resp => {
|
getConfigMetadata(instanceStore.current.id).then(resp => {
|
||||||
// if(resp.status === 200){
|
if(resp.status === 200){
|
||||||
// config.value = resp?.result as ConfigMetadata[]
|
config.value = resp?.result as ConfigMetadata[]
|
||||||
// }
|
}
|
||||||
// })
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -54,4 +59,23 @@ const isExit = (property: string) => {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const deployBtn = async () => {
|
||||||
|
if(instanceStore.current.id){
|
||||||
|
const resp = await _deploy(instanceStore.current.id)
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('操作成功')
|
||||||
|
instanceStore.refresh(instanceStore.current.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetBtn = async () => {
|
||||||
|
if(instanceStore.current.id){
|
||||||
|
const resp = await configurationReset(instanceStore.current.id)
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('恢复默认配置成功')
|
||||||
|
instanceStore.refresh(instanceStore.current.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
|
@ -0,0 +1,125 @@
|
||||||
|
<template>
|
||||||
|
<a-drawer placement="right" :closable="false" :visible="true">
|
||||||
|
<template #title>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
><AIcon
|
||||||
|
type="CloseOutlined"
|
||||||
|
style="margin-right: 5px"
|
||||||
|
@click="onClose"
|
||||||
|
/>编辑</span
|
||||||
|
>
|
||||||
|
<a-button type="primary" @click="saveBtn">保存</a-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<a-form layout="vertical" ref="formRef" :model="modelRef">
|
||||||
|
<a-form-item
|
||||||
|
:name="item.relation"
|
||||||
|
:label="item.relationName"
|
||||||
|
v-for="(item, index) in dataSource"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<a-select
|
||||||
|
showSearch
|
||||||
|
mode="multiple"
|
||||||
|
v-model:value="modelRef[item.relation]"
|
||||||
|
:placeholder="`请选择${item.relationName}`"
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
:value="item.value"
|
||||||
|
v-for="item in userList"
|
||||||
|
:key="item.id"
|
||||||
|
>{{ item.name }}</a-select-option
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { queryUserListNoPaging, saveRelations } from '@/api/device/instance';
|
||||||
|
import { useInstanceStore } from '@/store/instance';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['close', 'save']);
|
||||||
|
|
||||||
|
const formRef = ref();
|
||||||
|
const modelRef = reactive({});
|
||||||
|
const userList = ref<Record<string, any>[]>([]);
|
||||||
|
|
||||||
|
const instanceStore = useInstanceStore();
|
||||||
|
|
||||||
|
const dataSource = ref<Record<any, any>[]>([]);
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
const arr = (instanceStore.current?.relations || [])
|
||||||
|
dataSource.value = arr as Record<any, any>[];
|
||||||
|
arr.map((item) => {
|
||||||
|
modelRef[item.relation] = [
|
||||||
|
...(item?.related || []).map((i: any) => JSON.stringify(i)),
|
||||||
|
];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
queryUserListNoPaging().then((resp) => {
|
||||||
|
if (resp.status === 200) {
|
||||||
|
userList.value = (resp.result as Record<string, any>[]).map(
|
||||||
|
(item) => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
label: item.name,
|
||||||
|
value: JSON.stringify({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
emit('close');
|
||||||
|
formRef.value.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveBtn = () => {
|
||||||
|
formRef.value.validate().then(async () => {
|
||||||
|
const values = toRaw(modelRef);
|
||||||
|
if (Object.keys(values).length > 0) {
|
||||||
|
const param: any[] = [];
|
||||||
|
Object.keys(values).forEach((key) => {
|
||||||
|
const item = dataSource.value.find((i) => i.relation === key);
|
||||||
|
const items = (values[key] || []).map((i: string) =>
|
||||||
|
JSON.parse(i),
|
||||||
|
);
|
||||||
|
if (item) {
|
||||||
|
param.push({
|
||||||
|
relatedType: 'user',
|
||||||
|
relation: item.relation,
|
||||||
|
description: '',
|
||||||
|
related: [...items],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if(param.length && instanceStore.current.id){
|
||||||
|
const resp = await saveRelations(instanceStore.current.id, param);
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('操作成功!');
|
||||||
|
emit('save');
|
||||||
|
formRef.value.resetFields();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -7,17 +7,27 @@
|
||||||
</template>
|
</template>
|
||||||
<a-descriptions-item :span="1" v-for="item in dataSource" :key="item.objectId" :label="item.relationName">{{ item?.related ? (item?.related || []).map(i => i.name).join(',') : '' }}</a-descriptions-item>
|
<a-descriptions-item :span="1" v-for="item in dataSource" :key="item.objectId" :label="item.relationName">{{ item?.related ? (item?.related || []).map(i => i.name).join(',') : '' }}</a-descriptions-item>
|
||||||
</a-descriptions>
|
</a-descriptions>
|
||||||
|
<Save v-if="visible" @save="saveBtn" @close="visible = false" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useInstanceStore } from "@/store/instance"
|
import { useInstanceStore } from "@/store/instance"
|
||||||
|
import Save from './Save.vue'
|
||||||
const instanceStore = useInstanceStore()
|
const instanceStore = useInstanceStore()
|
||||||
|
|
||||||
const dataSource = ref<Record<any, any>[]>([])
|
const dataSource = ref<Record<any, any>[]>([])
|
||||||
|
const visible = ref<boolean>(false);
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
const arr = (instanceStore.current?.relations || []).reverse()
|
const arr = (instanceStore.current?.relations || []).reverse()
|
||||||
dataSource.value = arr as Record<any, any>[]
|
dataSource.value = arr as Record<any, any>[]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const saveBtn = () => {
|
||||||
|
visible.value = false
|
||||||
|
if(instanceStore.current.id){
|
||||||
|
instanceStore.refresh(instanceStore.current.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -0,0 +1,117 @@
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
:width="1000"
|
||||||
|
:visible="true"
|
||||||
|
title="编辑标签"
|
||||||
|
@ok="handleOk"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
>
|
||||||
|
<a-table
|
||||||
|
rowKey="id"
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="dataSource"
|
||||||
|
bordered
|
||||||
|
:pagination="false"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, text, record }">
|
||||||
|
<div style="width: 280px">
|
||||||
|
<template v-if="['key', 'name'].includes(column.dataIndex)">
|
||||||
|
<span>{{ text }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<ValueItem
|
||||||
|
v-model:modelValue="record.value"
|
||||||
|
:itemType="record.type"
|
||||||
|
:options="
|
||||||
|
record.type === 'enum'
|
||||||
|
? (record?.dataType?.elements || []).map(
|
||||||
|
(item) => {
|
||||||
|
return {
|
||||||
|
label: item.text,
|
||||||
|
value: item.value,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
)
|
||||||
|
: record.type === 'boolean'
|
||||||
|
? [
|
||||||
|
{ label: '是', value: true },
|
||||||
|
{ label: '否', value: false },
|
||||||
|
]
|
||||||
|
: undefined
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useInstanceStore } from '@/store/instance';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import _ from 'lodash';
|
||||||
|
import { saveTags, delTags } from '@/api/device/instance'
|
||||||
|
|
||||||
|
const emit = defineEmits(['close', 'save']);
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: 'ID',
|
||||||
|
dataIndex: 'key',
|
||||||
|
with: '33%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
with: '33%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '值',
|
||||||
|
dataIndex: 'value',
|
||||||
|
with: '34%',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const instanceStore = useInstanceStore();
|
||||||
|
|
||||||
|
const dataSource = ref<Record<any, any>[]>([]);
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
const arr = instanceStore.current?.tags || [];
|
||||||
|
dataSource.value = _.cloneDeep(arr);
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleOk = async () => {
|
||||||
|
if (dataSource.value.length) {
|
||||||
|
const list = (dataSource.value || [])
|
||||||
|
.filter((item: any) => item?.key && item?.value)
|
||||||
|
.map((i: any) => {
|
||||||
|
const { dataType, ...extra } = i;
|
||||||
|
return { ...extra };
|
||||||
|
});
|
||||||
|
if (list.length) {
|
||||||
|
// 填值
|
||||||
|
const resp = await saveTags(instanceStore.current?.id || '', list);
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('操作成功!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const _list = (dataSource.value || []).filter((item: any) => item?.key && !item?.value);
|
||||||
|
if (_list.length) {
|
||||||
|
// 删除值
|
||||||
|
_list.map(async (item: any) => {
|
||||||
|
if (item.id) {
|
||||||
|
await delTags(instanceStore.current?.id || '', item.id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
emit('save');
|
||||||
|
} else {
|
||||||
|
emit('close');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
emit('close');
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -1,3 +1,34 @@
|
||||||
<template>
|
<template>
|
||||||
tags
|
<div style="margin-top: 20px">
|
||||||
|
<a-descriptions bordered>
|
||||||
|
<template #title>
|
||||||
|
标签
|
||||||
|
<a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑</a-button>
|
||||||
|
</template>
|
||||||
|
<a-descriptions-item :span="1" v-for="item in dataSource" :key="item.key" :label="`${item.name}(${item.key})`">{{ item?.value }}</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
<Save v-if="visible" @close="visible = false" @save="saveBtn" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useInstanceStore } from "@/store/instance"
|
||||||
|
import Save from './Save.vue'
|
||||||
|
|
||||||
|
const instanceStore = useInstanceStore()
|
||||||
|
|
||||||
|
const dataSource = ref<Record<any, any>[]>([])
|
||||||
|
const visible = ref<boolean>(false)
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
const arr = (instanceStore.current?.tags || [])
|
||||||
|
dataSource.value = arr as Record<any, any>[]
|
||||||
|
})
|
||||||
|
|
||||||
|
const saveBtn = () => {
|
||||||
|
visible.value = false
|
||||||
|
if(instanceStore.current.id){
|
||||||
|
instanceStore.refresh(instanceStore.current.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
|
@ -1,7 +1,40 @@
|
||||||
<template>
|
<template>
|
||||||
<page-container :tabList="list" @back="onBack" :tabActiveKey="instanceStore.active" @tabChange="onTabChange">
|
<page-container :tabList="list" @back="onBack" :tabActiveKey="instanceStore.active" @tabChange="onTabChange">
|
||||||
<template #subTitle><div>{{instanceStore.current.name}}</div></template>
|
<template #title>
|
||||||
<component :is="instanceStore.tabActiveKey" />
|
<div>
|
||||||
|
<div style="display: flex; align-items: center;">
|
||||||
|
<div>{{instanceStore.current.name}}</div>
|
||||||
|
<a-divider type="vertical" />
|
||||||
|
<a-space>
|
||||||
|
<a-badge :text="instanceStore.current.state?.text" :status="statusMap.get(instanceStore.current.state?.value)" />
|
||||||
|
<a-popconfirm title="确认启用设备" @confirm="handleAction" v-if="instanceStore.current.state?.value === 'notActive'">
|
||||||
|
<a-button type="link">启用设备</a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
<a-popconfirm title="确认断开连接" @confirm="handleDisconnect" v-if="instanceStore.current.state?.value === 'online'">
|
||||||
|
<a-button type="link">断开连接</a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
<a-tooltip v-if="instanceStore.current?.accessProvider === 'child-device' &&
|
||||||
|
instanceStore.current?.state?.value === 'offline'" :title="instanceStore.current?.features?.find((item) => item.id === 'selfManageState')
|
||||||
|
? '该设备的在线状态与父设备(网关设备)保持一致'
|
||||||
|
: '该设备在线状态由设备自身运行状态决定,不继承父设备(网关设备)的在线状态'">
|
||||||
|
<AIcon type="QuestionCircleOutlined" style="font-size: 14px" />
|
||||||
|
</a-tooltip>
|
||||||
|
</a-space>
|
||||||
|
</div>
|
||||||
|
<div style="padding-top: 10px">
|
||||||
|
<a-descriptions size="small" :column="4">
|
||||||
|
<a-descriptions-item label="ID">{{ instanceStore.current.id }}</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="所属产品">
|
||||||
|
<a-button style="margin-top: -5px; padding: 0" type="link" @click="jumpProduct">{{ instanceStore.current.productName }}</a-button>
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #extra>
|
||||||
|
<img @click="handleRefresh" :src="getImage('/device/instance/button.png')" style="margin-right: 20px; cursor: pointer;" />
|
||||||
|
</template>
|
||||||
|
<component :is="tabs[instanceStore.tabActiveKey]" />
|
||||||
</page-container>
|
</page-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -9,9 +42,18 @@
|
||||||
import { useInstanceStore } from '@/store/instance';
|
import { useInstanceStore } from '@/store/instance';
|
||||||
import Info from './Info/index.vue';
|
import Info from './Info/index.vue';
|
||||||
import Metadata from '../../components/Metadata/index.vue';
|
import Metadata from '../../components/Metadata/index.vue';
|
||||||
|
import { _deploy, _disconnect } from '@/api/device/instance'
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import { getImage } from '@/utils/comm';
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const instanceStore = useInstanceStore()
|
const instanceStore = useInstanceStore()
|
||||||
|
|
||||||
|
const statusMap = new Map();
|
||||||
|
statusMap.set('online', 'processing');
|
||||||
|
statusMap.set('offline', 'error');
|
||||||
|
statusMap.set('notActive', 'warning');
|
||||||
|
|
||||||
const list = [
|
const list = [
|
||||||
{
|
{
|
||||||
key: 'Info',
|
key: 'Info',
|
||||||
|
@ -46,4 +88,35 @@ const onBack = () => {
|
||||||
const onTabChange = (e: string) => {
|
const onTabChange = (e: string) => {
|
||||||
instanceStore.tabActiveKey = e
|
instanceStore.tabActiveKey = e
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleAction = async () => {
|
||||||
|
if(instanceStore.current.id){
|
||||||
|
const resp = await _deploy(instanceStore.current.id)
|
||||||
|
if(resp.status === 200){
|
||||||
|
message.success('操作成功!')
|
||||||
|
instanceStore.refresh(instanceStore.current.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDisconnect = async () => {
|
||||||
|
if(instanceStore.current.id){
|
||||||
|
const resp = await _disconnect(instanceStore.current.id)
|
||||||
|
if(resp.status === 200){
|
||||||
|
message.success('操作成功!')
|
||||||
|
instanceStore.refresh(instanceStore.current.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRefresh = async () => {
|
||||||
|
if(instanceStore.current.id){
|
||||||
|
await instanceStore.refresh(instanceStore.current.id)
|
||||||
|
message.success('操作成功')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const jumpProduct = () => {
|
||||||
|
message.warn('暂未开发')
|
||||||
|
}
|
||||||
</script>
|
</script>
|
|
@ -101,8 +101,8 @@
|
||||||
:actions="getActions(slotProps, 'card')"
|
:actions="getActions(slotProps, 'card')"
|
||||||
v-bind="slotProps"
|
v-bind="slotProps"
|
||||||
:active="_selectedRowKeys.includes(slotProps.id)"
|
:active="_selectedRowKeys.includes(slotProps.id)"
|
||||||
:status="slotProps.state.value"
|
:status="slotProps.state?.value"
|
||||||
:statusText="slotProps.state.text"
|
:statusText="slotProps.state?.text"
|
||||||
:statusNames="{
|
:statusNames="{
|
||||||
online: 'success',
|
online: 'success',
|
||||||
offline: 'error',
|
offline: 'error',
|
||||||
|
@ -126,7 +126,7 @@
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<div class="card-item-content-text">设备类型</div>
|
<div class="card-item-content-text">设备类型</div>
|
||||||
<div>{{ slotProps.deviceType.text }}</div>
|
<div>{{ slotProps.deviceType?.text }}</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<div class="card-item-content-text">产品名称</div>
|
<div class="card-item-content-text">产品名称</div>
|
||||||
|
@ -151,7 +151,7 @@
|
||||||
/>
|
/>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<AIcon :type="item.icon" />
|
<AIcon :type="item.icon" />
|
||||||
<span>{{ item.text }}</span>
|
<span>{{ item?.text }}</span>
|
||||||
</template>
|
</template>
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-popconfirm>
|
</a-popconfirm>
|
||||||
|
@ -166,7 +166,7 @@
|
||||||
/>
|
/>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<AIcon :type="item.icon" />
|
<AIcon :type="item.icon" />
|
||||||
<span>{{ item.text }}</span>
|
<span>{{ item?.text }}</span>
|
||||||
</template>
|
</template>
|
||||||
</a-button>
|
</a-button>
|
||||||
</template>
|
</template>
|
||||||
|
@ -176,8 +176,8 @@
|
||||||
</template>
|
</template>
|
||||||
<template #state="slotProps">
|
<template #state="slotProps">
|
||||||
<a-badge
|
<a-badge
|
||||||
:text="slotProps.state === 1 ? ' 正常' : '禁用'"
|
:text="slotProps.state?.text"
|
||||||
:status="statusMap.get(slotProps.state)"
|
:status="statusMap.get(slotProps.state?.value)"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #action="slotProps">
|
<template #action="slotProps">
|
||||||
|
@ -228,7 +228,7 @@
|
||||||
:api="api"
|
:api="api"
|
||||||
:type="type"
|
:type="type"
|
||||||
/>
|
/>
|
||||||
<Save v-if="visible" :data="current" />
|
<Save v-if="visible" :data="current" @close="visible = false" @save="saveBtn" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
@ -263,8 +263,10 @@ const api = ref<string>('');
|
||||||
const type = ref<string>('');
|
const type = ref<string>('');
|
||||||
|
|
||||||
const statusMap = new Map();
|
const statusMap = new Map();
|
||||||
statusMap.set(1, 'processing');
|
statusMap.set('online', 'processing');
|
||||||
statusMap.set(0, 'error');
|
statusMap.set('offline', 'error');
|
||||||
|
statusMap.set('notActive', 'warning');
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: 'ID',
|
title: 'ID',
|
||||||
|
@ -399,9 +401,9 @@ const getActions = (
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'action',
|
key: 'action',
|
||||||
text: data.state.value !== 'notActive' ? '禁用' : '启用',
|
text: data.state?.value !== 'notActive' ? '禁用' : '启用',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: data.state.value !== 'notActive' ? '禁用' : '启用',
|
title: data.state?.value !== 'notActive' ? '禁用' : '启用',
|
||||||
},
|
},
|
||||||
icon:
|
icon:
|
||||||
data.state.value !== 'notActive'
|
data.state.value !== 'notActive'
|
||||||
|
@ -430,7 +432,7 @@ const getActions = (
|
||||||
{
|
{
|
||||||
key: 'delete',
|
key: 'delete',
|
||||||
text: '删除',
|
text: '删除',
|
||||||
disabled: data.state.value !== 'notActive',
|
disabled: data.state?.value !== 'notActive',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title:
|
title:
|
||||||
data.state.value !== 'notActive'
|
data.state.value !== 'notActive'
|
||||||
|
|
Loading…
Reference in New Issue