<template>
|
<el-dialog v-model="centerDialogVisible" :title="t('Fence.fenceInfo')" align-center width="1000" destroy-on-close center>
|
<div class="person-info">
|
<el-row>
|
<!-- 左侧地图区域 -->
|
<el-col :span="18">
|
<div id="mars3dContainer" class="mars3d-container" style="width: 100%; height: 600px"></div>
|
</el-col>
|
<!-- 右侧信息区域 -->
|
<el-col :span="6">
|
<div class="info-list">
|
<el-row>
|
<el-col :span="24">
|
<p>
|
<span>{{ t("Fence.name") }}:</span> {{ drawerProps.row.name }}
|
</p>
|
<p>
|
<span>{{ t("Fence.floor") }}:</span> {{ drawerProps.row.floor }}
|
</p>
|
<p>
|
<span>{{ t("Fence.type") }}:</span> {{ drawerProps.row.type }}
|
</p>
|
<p>
|
<span>{{ t("Fence.department") }}:</span> {{ drawerProps.row.bumen }}
|
</p>
|
<p>
|
<span>{{ t("Fence.height") }}:</span> {{ drawerProps.row.baoliu11 }}
|
</p>
|
<p>
|
<span>{{ t("Fence.shape") }}:</span> {{ drawerProps.row.shape }}
|
</p>
|
<p>
|
<span>{{ t("Fence.color") }}:</span> {{ drawerProps.row.color }}
|
</p>
|
<p>
|
<span>{{ t("Fence.effectiveTime") }}:</span> {{ drawerProps.row.start }}
|
</p>
|
<p>
|
<span>{{ t("Fence.expiryTime") }}:</span> {{ drawerProps.row.stop }}
|
</p>
|
<p>
|
<span>{{ t("Fence.xyCoordinates") }}:</span> {{ drawerProps.row.zuobiao }}
|
</p>
|
<p>
|
<span>{{ t("Fence.latLng") }}:</span> {{ drawerProps.row.baoliu8 }}
|
</p>
|
<p>
|
<span>{{ t("Config.time") }}:</span> {{ drawerProps.row.addtime }}
|
</p>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script lang="tsx" setup>
|
import { ref } from "vue";
|
import * as mars3d from "mars3d";
|
import "mars3d-space";
|
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
|
import "mars3d/mars3d.css";
|
import { useI18n } from "vue-i18n";
|
|
const { t } = useI18n({ useScope: "global" });
|
const centerDialogVisible = ref(false);
|
|
interface DrawerProps {
|
title: string;
|
isView: boolean;
|
initParam: Partial<User.ResUserList>;
|
row: Partial<User.ResUserList>;
|
api?: (params: any) => Promise<any>;
|
getTableList?: () => void;
|
}
|
|
let map;
|
let graphicLayerFence; //围栏
|
const drawerVisible = ref(false);
|
const drawerProps = ref<DrawerProps>({
|
isView: false,
|
initParam: {},
|
title: "",
|
row: {}
|
});
|
|
// 接收父组件传过来的参数
|
const acceptParams = (params: DrawerProps) => {
|
centerDialogVisible.value = true;
|
drawerProps.value = params;
|
drawerVisible.value = true;
|
const position = drawerProps.value.row.baoliu8.split(";")[1].split(",");
|
setTimeout(function () {
|
map = new mars3d.Map("mars3dContainer", {
|
scene: {
|
center: {
|
lat: position[1],
|
lng: position[0],
|
alt: 50,
|
heading: 360,
|
pitch: -90
|
}
|
},
|
basemaps: [
|
{
|
name: t("Fence.basemap.amapImage"),
|
type: "group",
|
layers: [
|
{ name: t("Fence.basemap.baseMap"), type: "gaode", layer: "img_d" },
|
{ name: t("Fence.basemap.annotation"), type: "gaode", layer: "img_z" }
|
]
|
},
|
{
|
name: t("Fence.basemap.amapVector"),
|
type: "gaode",
|
layer: "vec"
|
},
|
{
|
name: t("Fence.basemap.baiduImage"),
|
icon: "/hxzkuwb/view/Home/img/basemaps/gaode_img.png",
|
type: "group",
|
layers: [
|
{ name: t("Fence.basemap.baseMap"), type: "baidu", layer: "img_d" },
|
{ name: t("Fence.basemap.annotation"), type: "baidu", layer: "img_z" }
|
]
|
},
|
{
|
name: t("Fence.basemap.baiduVector"),
|
icon: "/hxzkuwb/view/Home/img/basemaps/gaode_vec.png",
|
type: "baidu",
|
layer: "vec"
|
},
|
{
|
name: t("Fence.basemap.arcgisImage"),
|
icon: "/hxzkuwb/view/Home/img/basemaps/esriWorldImagery.png",
|
type: "arcgis",
|
layer: "img_d",
|
enablePickFeatures: false,
|
show: true
|
}
|
]
|
});
|
//进行绘制当前围栏
|
graphicLayerFence = new mars3d.layer.GraphicLayer();
|
map.addLayer(graphicLayerFence);
|
let fence = [];
|
let fencesList = drawerProps.value.row.baoliu8.split(";");
|
for (let j = 0; j < fencesList.length; j++) {
|
const coordinateString = fencesList[j];
|
const [longitude, latitude] = coordinateString.split(",");
|
fence.push([parseFloat(longitude), parseFloat(latitude)]);
|
}
|
console.log(fence);
|
const graphic = new mars3d.graphic.PolygonPrimitive({
|
positions: fence,
|
style: {
|
closure: true,
|
color: "red",
|
opacity: 0.3,
|
label: {
|
text: drawerProps.value.row.name,
|
font_size: 18,
|
outline: true,
|
color: "#ffffff",
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_far: 500000,
|
distanceDisplayCondition_near: 0
|
}
|
}
|
});
|
graphicLayerFence.addGraphic(graphic);
|
console.log(map);
|
}, 500);
|
};
|
|
defineExpose({
|
acceptParams
|
});
|
</script>
|
|
<style scoped>
|
.person-info {
|
padding: 20px;
|
}
|
.image-container {
|
display: flex;
|
flex-direction: column;
|
gap: 20px;
|
align-items: center;
|
}
|
.person-image {
|
width: 120px;
|
height: 120px;
|
border-radius: 10px;
|
box-shadow: 0 0 8px rgb(0 0 0 / 20%);
|
}
|
.info-list {
|
padding: 0 20px;
|
}
|
.info-list p {
|
margin: 8px 0;
|
font-size: 14px;
|
}
|
.info-list p span {
|
margin-right: 10px;
|
font-weight: bold;
|
color: #333333;
|
}
|
</style>
|
