iot-ui-vue/src/views/device/Instance/Detail/Info/index.vue

105 lines
3.5 KiB
Vue

<template>
<j-descriptions bordered>
<template #title>
设备信息
<PermissionButton
type="link"
@click="visible = true"
hasPermission="device/Instance:update"
>
<template #icon><AIcon type="EditOutlined" /></template>
编辑
</PermissionButton>
</template>
<j-descriptions-item label="设备ID">{{
instanceStore.current?.id
}}</j-descriptions-item>
<j-descriptions-item label="产品名称">{{
instanceStore.current?.productName
}}</j-descriptions-item>
<j-descriptions-item label="产品分类">{{
instanceStore.current?.classifiedName
}}</j-descriptions-item>
<j-descriptions-item label="设备类型">{{
instanceStore.current?.deviceType?.text
}}</j-descriptions-item>
<j-descriptions-item label="固件版本">{{
instanceStore.current?.firmwareInfo?.version
}}</j-descriptions-item>
<j-descriptions-item label="连接协议">{{
instanceStore.current?.transport
}}</j-descriptions-item>
<j-descriptions-item label="消息协议">{{
instanceStore.current?.protocolName
}}</j-descriptions-item>
<j-descriptions-item label="创建时间">{{
instanceStore.current?.createTime
? moment(instanceStore.current?.createTime).format(
'YYYY-MM-DD HH:mm:ss',
)
: ''
}}</j-descriptions-item>
<j-descriptions-item label="注册时间">{{
instanceStore.current?.registerTime
? moment(instanceStore.current?.registerTime).format(
'YYYY-MM-DD HH:mm:ss',
)
: ''
}}</j-descriptions-item>
<j-descriptions-item label="最后上线时间">{{
instanceStore.current?.onlineTime
? moment(instanceStore.current?.onlineTime).format(
'YYYY-MM-DD HH:mm:ss',
)
: ''
}}</j-descriptions-item>
<j-descriptions-item
label="父设备"
v-if="
instanceStore.current?.deviceType?.value === 'childrenDevice'
"
>{{ instanceStore.current?.parentId }}</j-descriptions-item
>
<j-descriptions-item label="说明">{{
instanceStore.current?.description
}}</j-descriptions-item>
</j-descriptions>
<Config />
<Tags
v-if="
instanceStore.current?.tags &&
instanceStore.current?.tags.length > 0
"
/>
<Relation
v-if="
instanceStore.current?.relations &&
instanceStore.current?.relations.length > 0
"
/>
<Save
v-if="visible"
:data="instanceStore.current"
@close="visible = false"
@save="saveBtn"
/>
</template>
<script lang="ts" setup>
import { useInstanceStore } from '@/store/instance';
import Save from '../../Save/index.vue';
import Config from './components/Config/index.vue';
import Tags from './components/Tags/index.vue';
import Relation from './components/Relation/index.vue';
import moment from 'moment';
const visible = ref<boolean>(false);
const instanceStore = useInstanceStore();
const saveBtn = () => {
if (instanceStore.current?.id) {
instanceStore.refresh(instanceStore.current?.id);
}
visible.value = false;
};
</script>