<template>
|
<el-dialog v-model="centerDialogVisible" :title="t('Warning.alarmDetails')" width="1000" align-center>
|
<!-- 告警信息内容 -->
|
<div style="height: 600px; box-shadow: var(--el-border-color-light) 0 0 10px">
|
<el-splitter>
|
<el-splitter-panel collapsible>
|
<el-splitter layout="vertical">
|
<el-splitter-panel collapsible size="100">
|
<div class="demo-panel">
|
<el-descriptions title="" :column="3" border>
|
<el-descriptions-item :label="t('Warning.type')" label-align="right" align="center">
|
{{ drawerProps.row.type }}
|
</el-descriptions-item>
|
<el-descriptions-item :label="t('Warning.name')" label-align="right" align="center">
|
{{ drawerProps.row.baoliu10 }}
|
</el-descriptions-item>
|
<el-descriptions-item :label="t('Warning.id')" label-align="right" align="center">
|
{{ drawerProps.row.objectid }}
|
</el-descriptions-item>
|
<el-descriptions-item :label="t('Warning.status')" label-align="right" align="center">
|
{{ drawerProps.row.status }}
|
</el-descriptions-item>
|
<el-descriptions-item :label="t('Warning.fenceName')" label-align="right" align="center">
|
{{ drawerProps.row.baoliu2 }}
|
</el-descriptions-item>
|
<el-descriptions-item :label="t('Config.time')" label-align="right" align="center">
|
{{ drawerProps.row.time }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
</el-splitter-panel>
|
<el-splitter-panel collapsible size="500">
|
<div class="demo-panel">
|
<div id="mars3dContainer" class="mars3d-container" style="height: 500px"></div>
|
</div>
|
</el-splitter-panel>
|
</el-splitter>
|
</el-splitter-panel>
|
</el-splitter>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="centerDialogVisible = false"> {{ t("Config.close") }} </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts" name="UserDrawer">
|
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 cichu from "./images/cichu.png";
|
import { useI18n } from "vue-i18n";
|
|
const { t } = useI18n({ useScope: "global" });
|
|
// import { ElMessage, FormInstance } from "element-plus";
|
import { User } from "@/api/interface";
|
const centerDialogVisible = ref(false);
|
let map;
|
let graphicLayer;
|
|
interface DrawerProps {
|
title: string;
|
isView: boolean;
|
row: Partial<User.ResUserList>;
|
api?: (params: any) => Promise<any>;
|
getTableList?: () => void;
|
}
|
|
const drawerVisible = ref(false);
|
const drawerProps = ref<DrawerProps>({
|
isView: false,
|
title: "",
|
row: {}
|
});
|
|
// 接收父组件传过来的参数
|
const acceptParams = (params: DrawerProps) => {
|
drawerProps.value = params;
|
drawerVisible.value = true;
|
centerDialogVisible.value = true;
|
setTimeout(function () {
|
const position = drawerProps.value.row.baoliu1.split(";");
|
map = new mars3d.Map("mars3dContainer", {
|
scene: {
|
center: {
|
lat: position[1],
|
lng: position[0],
|
alt: 100,
|
heading: 360,
|
pitch: -90
|
}
|
},
|
basemaps: [
|
{
|
name: t("Warning.basemap.amapImage"),
|
type: "group",
|
layers: [
|
{ name: t("Warning.basemap.baseMap"), type: "gaode", layer: "img_d" },
|
{ name: t("Warning.basemap.annotation"), type: "gaode", layer: "img_z" }
|
]
|
},
|
{
|
name: t("Warning.basemap.amapVector"),
|
type: "gaode",
|
layer: "vec"
|
},
|
{
|
name: t("Warning.basemap.baiduImage"),
|
icon: "/hxzkuwb/view/Home/img/basemaps/gaode_img.png",
|
type: "group",
|
layers: [
|
{ name: t("Warning.basemap.baseMap"), type: "baidu", layer: "img_d" },
|
{ name: t("Warning.basemap.annotation"), type: "baidu", layer: "img_z" }
|
]
|
},
|
{
|
name: t("Warning.basemap.baiduVector"),
|
icon: "/hxzkuwb/view/Home/img/basemaps/gaode_vec.png",
|
type: "baidu",
|
layer: "vec"
|
},
|
{
|
name: t("Warning.basemap.arcgisImage"),
|
icon: "/hxzkuwb/view/Home/img/basemaps/esriWorldImagery.png",
|
type: "arcgis",
|
layer: "img_d",
|
enablePickFeatures: false,
|
show: true
|
}
|
]
|
});
|
// 创建矢量数据图层
|
graphicLayer = new mars3d.layer.GraphicLayer({
|
allowDrillPick: true // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
|
});
|
map.addLayer(graphicLayer);
|
const graphic = new mars3d.graphic.BillboardEntity({
|
position: [position[0], position[1]],
|
style: {
|
image: cichu,
|
scale: 0.2
|
}
|
});
|
graphicLayer.addGraphic(graphic);
|
console.log(map);
|
}, 100);
|
};
|
|
defineExpose({
|
acceptParams
|
});
|
</script>
|
