<template>
|
<div class="expiort" v-drag="true">
|
<div class="leftMenu">
|
<div class="menuTitle">地图设计</div>
|
<div class="menmuContent">
|
<div class="contentTitle">
|
<div class="contentImg">
|
|
</div>
|
图件信息
|
</div>
|
<div class="contentBox">
|
<p>地图名称</p>
|
<div class="contentInput">
|
<el-input v-model="exportFrom.name"></el-input>
|
</div>
|
<p>制作日期</p>
|
<div class="contentInput">
|
<!-- <el-input v-model="exportFrom.date"></el-input> -->
|
<el-date-picker v-model="exportFrom.date" style="width: 100%;" type="date" :clearable="false" />
|
</div>
|
|
</div>
|
<div class="contentTitle">
|
<div class="contentImg"></div>
|
打印设置
|
</div>
|
<div class="contentBox">
|
<p>导出格式</p>
|
<div class="contentInput">
|
<el-select style="width: 100%;" v-model="exportFrom.type">
|
<el-option label=".PNG" value="png"></el-option>
|
</el-select>
|
</div>
|
<p>纸张设置</p>
|
<div class="contentInput">
|
<el-select style="width: 100%;" v-model="exportFrom.pageSize">
|
<el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
|
</el-select>
|
</div>
|
<p>旋转角度</p>
|
<div class="contentInput">
|
<el-input v-model="exportFrom.role" placeholder="请输入旋转角度(0-360)"></el-input>
|
</div>
|
</div>
|
|
<div class="contentTitle">
|
<div class="contentImg"></div>
|
图层列表
|
</div>
|
<div class="contentBox spatialTable" style="height: 15vh; overflow: auto;">
|
<el-table ref="singleTableRef" :data="tableData" highlight-current-row style="width: 100%"
|
height="calc(100% - 1px)">
|
<el-table-column type="index" label="序号" width="100" />
|
<el-table-column property="cnName" label="图层名称" />
|
</el-table>
|
</div>
|
</div>
|
|
<div class="menuButton">
|
<el-button size="small" type="primary" @click.stop="setInsertExporLayer">确认</el-button>
|
<el-button size="small" type="primary" class="delbtn" @click="editExport">取消</el-button>
|
</div>
|
</div>
|
<div class="rightMap">
|
<el-image style="width: 100%; height: 100%;" :src="url" fit="fill" />
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import store from "@/store";
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import { getToken } from "@/utils/auth";
|
import canvas2image from "@/assets/js/canvas2image";
|
import $ from "jquery";
|
import menuTool from "@/assets/js/Map/menuTool";
|
const emits = defineEmits(["SETexportMap"]);
|
import { ElMessage } from "element-plus";
|
const exportFrom = ref({
|
name: "",
|
pageSize: "A4",
|
role: "0",
|
type: "png",
|
date: new Date(),
|
xmin: null,
|
ymin: null,
|
xmax: null,
|
ymax: null,
|
});
|
const url = ref("");
|
const editExport = () => {
|
emits("SETexportMap", false);
|
};
|
const options = [
|
{
|
value: "A0",
|
name: "A0",
|
},
|
{
|
value: "A1",
|
name: "A1",
|
},
|
{
|
value: "A2",
|
name: "A2",
|
},
|
{
|
value: "A3",
|
name: "A3",
|
},
|
{
|
value: "A4",
|
name: "A4",
|
},
|
];
|
const tableData = ref([]);
|
const setImgStart = () => {
|
// window.Viewer.scene.render();
|
const myCanvas = window.Viewer.scene.canvas;
|
var res = canvas2image.convertToImage(myCanvas, "869", "783", "png");
|
url.value = res.src;
|
//
|
|
|
var layers = store.state.chekNowLayers
|
var tabLayer = layers.filter((rs) => {
|
console.log(rs)
|
if (!rs.shpType && rs.isLayer == 1) {
|
return rs
|
}
|
})
|
tableData.value = tabLayer.reverse();
|
var val = menuTool.exportSquare;
|
exportFrom.value.xmin = val[0];
|
exportFrom.value.ymin = val[1];
|
exportFrom.value.xmax = val[2];
|
exportFrom.value.ymax = val[3];
|
};
|
|
const setInsertExporLayer = () => {
|
emits("SETexportMap", false);
|
store.state.loading = true;
|
var token = "?token=" + getToken();
|
var res = [];
|
var ids = [];
|
for (var i in tableData.value) {
|
if (tableData.value[i].tab) {
|
res.push(tableData.value[i].tab.replace("moon:", ""));
|
|
}
|
if (!tableData.value[i].shpType) {
|
ids.push(tableData.value[i].id);
|
}
|
}
|
|
res.push();
|
var obj = {
|
layerIds: ids,
|
token: token.replace("?token=", ""),
|
title: exportFrom.value.name,
|
pageSize: exportFrom.value.pageSize,
|
date: exportFrom.value.date,
|
layers: res.toString(),
|
rotation: exportFrom.value.role,
|
xmin: exportFrom.value.xmin,
|
ymin: exportFrom.value.ymin,
|
xmax: exportFrom.value.xmax,
|
ymax: exportFrom.value.ymax,
|
};
|
|
$.ajax({
|
async: true,
|
url: config.BASE_URL + "/export/insertMap" + token,
|
type: "POST",
|
data: JSON.stringify(obj),
|
contentType: "application/json",
|
dataType: "json",
|
error: function () { },
|
success: (rs) => {
|
store.state.loading = false;
|
var value = "code = " + rs.code + ", result = " + rs.result;
|
if ((rs.code = 200)) {
|
ElMessage({
|
message: "出图成功,请到出图列表查看并下载",
|
type: "success",
|
});
|
} else {
|
ElMessage.error(value);
|
}
|
},
|
});
|
};
|
|
onMounted((res) => {
|
setImgStart();
|
});
|
</script>
|
|
|
|
<style lang="less" scoped>
|
.expiort {
|
width: 1227px;
|
height: 783px;
|
display: flex;
|
position: absolute;
|
top: 50%;
|
left: 20%;
|
transform: translateX(-50%);
|
transform: translateY(-50%);
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
z-index: 10;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
}
|
|
.leftMenu {
|
width: 358px;
|
height: 100%;
|
border-right: 1px solid #d6e4ff;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.rightMap {
|
height: calc(100% - 20px);
|
width: 849px;
|
border-right: 1px solid #d6e4ff;
|
padding: 10px;
|
}
|
|
.menmuContent {
|
flex: 1;
|
width: 100%;
|
margin-top: 2px;
|
overflow: auto;
|
|
.contentTitle {
|
font-size: 16px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #ffffff;
|
height: 42px;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
background: #0e151f;
|
margin: 2px 0px;
|
}
|
|
.contentBox {
|
margin: 5px 7px;
|
width: calc(100% - 76px);
|
|
background: #1e2a3d;
|
padding: 14px 23px 5px 39px;
|
|
p {
|
font-size: 12px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #d6e4ff;
|
line-height: 9px;
|
margin-bottom: 10px;
|
}
|
|
.contentInput {
|
margin-bottom: 10px;
|
}
|
}
|
|
.contentImg {
|
width: 22px;
|
height: 22px;
|
background: url("../../assets/img/leftBtn/矩形 8 拷贝 3.png") no-repeat;
|
margin-top: 9px;
|
margin-left: 16px;
|
margin-right: 9px;
|
font-size: 16px;
|
font-family: Source Han Sans CN;
|
}
|
}
|
|
.menuButton {
|
padding: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.el-button {
|
height: 37px;
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #234066;
|
border-radius: 2px;
|
font-size: 16px;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
|
.el-button:hover {
|
border: 1px solid #689cff;
|
}
|
|
.delbtn {
|
background: rgba(245, 108, 108, 0.2);
|
border: 1px solid #5a0914;
|
}
|
}
|
|
.spatialTable {
|
margin-top: 10px;
|
width: 100%;
|
height: calc(100% - 35px);
|
position: relative;
|
|
.el-table /deep/ .el-table__header-wrapper tr th {
|
background-color: rgba(38, 47, 71, 1) !important;
|
color: #d6e4ff;
|
}
|
|
// 修改每行样式：
|
.el-table /deep/ .el-table__row {
|
background-color: rgba(38, 47, 71, 1) !important;
|
color: #d6e4ff;
|
}
|
|
.el-table /deep/ .el-table__body tr.current-row>td {
|
background-color: rgba(38, 47, 71, 1) !important;
|
}
|
|
.el-table /deep/ .el-table__body tr:hover>td {
|
background-color: rgba(38, 47, 71, 1) !important;
|
}
|
|
// 修改表格每行边框的样式：
|
.el-table /deep/ td,
|
.el-table /deep/ th.is-leaf {
|
// border-bottom: 1px solid #409eff;
|
// border-right: 1px solid #409eff;
|
}
|
|
.el-table /deep/ .el-table__cell {
|
padding: 8px 0;
|
}
|
|
// 设置表格每行的高度：
|
.el-table /deep/ .el-table__header tr,
|
.el-table /deep/ .el-table__header th {
|
height: 50px;
|
}
|
|
.el-table__body tr,
|
.el-table__body td {
|
height: 50px;
|
padding: 0;
|
}
|
|
// 设置表格边框颜色：
|
|
.el-table--border::after,
|
.el-table--group::after {
|
width: 0;
|
}
|
|
.el-table::before {
|
height: 0;
|
}
|
}
|
|
.menuTitle {
|
width: calc(100% - 30px);
|
|
background: #0e151f;
|
font-size: 18px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
padding: 10px;
|
padding-left: 28px;
|
}
|
|
::-webkit-scrollbar {
|
width: 10px;
|
}
|
|
/* Change the scrollbar background color here */
|
::-webkit-scrollbar-track {
|
background-color: rgba(0, 0, 0, 0);
|
}
|
|
/* Change the scrollbar button color and roundedness here */
|
::-webkit-scrollbar-thumb {
|
background-color: rgba(104, 156, 255, 0.2);
|
border-radius: 0.5rem;
|
}
|
</style>
|
