128 lines
4.4 KiB
Vue
128 lines
4.4 KiB
Vue
<template>
|
|
<page-container :tabList="list" @back="onBack" :tabActiveKey="instanceStore.active" @tabChange="onTabChange">
|
|
<template #title>
|
|
<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/button.png')" style="margin-right: 20px; cursor: pointer;" />
|
|
</template>
|
|
<component :is="tabs[instanceStore.tabActiveKey]" />
|
|
</page-container>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useInstanceStore } from '@/store/instance';
|
|
import Info from './Info/index.vue';
|
|
import Running from './Running/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 instanceStore = useInstanceStore()
|
|
|
|
const statusMap = new Map();
|
|
statusMap.set('online', 'processing');
|
|
statusMap.set('offline', 'error');
|
|
statusMap.set('notActive', 'warning');
|
|
|
|
const list = [
|
|
{
|
|
key: 'Info',
|
|
tab: '实例信息'
|
|
},
|
|
{
|
|
key: 'Running',
|
|
tab: '运行状态'
|
|
},
|
|
{
|
|
key: 'Metadata',
|
|
tab: '物模型'
|
|
}
|
|
]
|
|
|
|
const tabs = {
|
|
Info,
|
|
Metadata,
|
|
Running
|
|
}
|
|
|
|
watch(
|
|
() => route.params.id,
|
|
(newId) => {
|
|
if(newId){
|
|
instanceStore.tabActiveKey = 'Info'
|
|
instanceStore.refresh(newId as string)
|
|
}
|
|
},
|
|
{immediate: true, deep: true}
|
|
);
|
|
|
|
const onBack = () => {
|
|
|
|
}
|
|
|
|
const onTabChange = (e: string) => {
|
|
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> |