126 lines
2.6 KiB
Vue
126 lines
2.6 KiB
Vue
<template>
|
|
<div class="main-content">
|
|
<div class="main-content-title">
|
|
<span>地图打印</span>
|
|
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
|
|
</div>
|
|
<div class="btn-operate">
|
|
<el-button type="primary" @click="downLoadImg">存为图片</el-button>
|
|
<el-button type="primary" @click="printImg">打印</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
//引入cesium基础库
|
|
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
|
|
import * as Cesium from "mars3d-cesium";
|
|
//导入mars3d主库
|
|
import "mars3d/dist/mars3d.css";
|
|
import * as mars3d from "mars3d";
|
|
import { ref, watch, onMounted, onUnmounted } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
import { GlobalStore } from "@/stores";
|
|
import printJS from "print-js";
|
|
const importRef = ref();
|
|
const globalStore = GlobalStore();
|
|
const props = defineProps(["mapInstance"]);
|
|
const emits = defineEmits(["hiddenConfim"]);
|
|
let map: any = props.mapInstance;
|
|
onMounted(() => {});
|
|
// 打印
|
|
const printImg = () => {
|
|
printJS({
|
|
printable: "mars3dContainer",
|
|
type: "html",
|
|
targetStyles: ["*"],
|
|
maxWidth: 2500,
|
|
style: "@page{size:auto; margin: 0;}" + "@media print { @page {size: landscape } }"
|
|
});
|
|
};
|
|
// 导出图片
|
|
const downLoadImg = () => {
|
|
map.expImage();
|
|
};
|
|
const closeDiv = () => {
|
|
emits("hiddenConfim");
|
|
};
|
|
onUnmounted(() => {
|
|
map = null;
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@mixin flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
// 菜单弹框出现动画
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
.main-content {
|
|
position: absolute;
|
|
top: 142px;
|
|
right: 28px;
|
|
padding-bottom: 10px;
|
|
background-image: none !important;
|
|
border: 1px solid #008aff70;
|
|
border-radius: 2px !important;
|
|
background-color: rgba(23, 49, 71, 0.8);
|
|
width: 300px;
|
|
box-shadow: 0 4px 15px 1px #02213bb3;
|
|
animation: fadeIn 1s;
|
|
&-title {
|
|
@include flex;
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: 0 5px 0 10px;
|
|
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
span {
|
|
font-size: 16px;
|
|
color: #0089fe;
|
|
margin-right: auto;
|
|
}
|
|
:deep() {
|
|
.el-icon {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.btn-operate {
|
|
@include flex;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
:deep() {
|
|
.el-button {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// element 组件样式
|
|
:deep() {
|
|
.el-input__wrapper {
|
|
background-color: transparent;
|
|
}
|
|
.el-input__inner {
|
|
color: white;
|
|
}
|
|
.el-button {
|
|
background: rgba(51, 89, 181, 0.6);
|
|
border-radius: 6px;
|
|
border: 0;
|
|
}
|
|
}
|
|
</style>
|