LinYeFangHuo/src/views/demo/fire/firemonitor/Detail.vue

123 lines
3.1 KiB
Vue

<template>
<div class="p-4">
<a-row :gutter="40">
<a-col :span="14">
<a-divider orientation="left">基本信息</a-divider>
<a-descriptions bordered class="mt-4" :column="2" size="small">
<a-descriptions-item label="摄像头名称">
{{ detailInfo.name }}
</a-descriptions-item>
<a-descriptions-item label="功能分类">
{{ detailInfo.model }}
</a-descriptions-item>
<a-descriptions-item label="摄像头分类">
{{ detailInfo.cameraType }}
</a-descriptions-item>
<a-descriptions-item label="摄像头状态">
{{ detailInfo.status }}
</a-descriptions-item>
<a-descriptions-item label="设备厂商">
{{ detailInfo.manufacturer }}
</a-descriptions-item>
<a-descriptions-item label="设备序列号">
{{ detailInfo.serialNumber }}
</a-descriptions-item>
<a-descriptions-item label="设备通道">
{{ detailInfo.channel }}
</a-descriptions-item>
<a-descriptions-item label="平台IP">
{{ detailInfo.ip }}
</a-descriptions-item>
<a-descriptions-item label="平台端口">
{{ detailInfo.port }}
</a-descriptions-item>
<a-descriptions-item label="APPKey">
{{ detailInfo.appKey }}
</a-descriptions-item>
<a-descriptions-item label="APPSecret">
{{ detailInfo.appSecret }}
</a-descriptions-item>
<a-descriptions-item label="摄像头位置">
{{ detailInfo.lng }} , {{ detailInfo.lat }}
</a-descriptions-item>
<a-descriptions-item label="更新时间">
{{ detailInfo.updateTime }}
</a-descriptions-item>
<a-descriptions-item label="原始路径">
{{ detailInfo.regionPathName }}
</a-descriptions-item>
</a-descriptions>
</a-col>
<a-col :span="10">
<a-divider orientation="left">位置信息</a-divider>
<div class="map-container">
<Map :position="[detailInfo.lng,detailInfo.lat]"></Map>
</div>
</a-col>
</a-row>
</div>
</template>
<script setup lang="ts">
import { ref,defineProps,watch } from 'vue';
import Map from '../components/Map.vue';
const props = defineProps({
detailInfo:{
type:Object,
defaultValue:{},
}
});
const detailInfo: any = ref({});
detailInfo.value = props.detailInfo;
watch(
()=>props.detailInfo,
(newVal,oldVal)=>{
detailInfo.value = newVal;
}
)
console.log("detailInfo.value",detailInfo.value);
const dataSource = ref([]);
const columns = ref([
{
title: '人员名称',
dataIndex: 'name',
key: 'name',
},
{
title: '手机号',
dataIndex: 'account',
key: 'account',
},
]);
const form = ref({
content: '',
});
const examine = (status: number) => {
const params = {
status,
};
console.log(params);
};
</script>
<style scoped>
.map-container{
height:500px;
}
</style>