From b7e62ad2625121586b1254dab69b3c3d38da71de Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期二, 31 十月 2023 17:31:10 +0800
Subject: [PATCH] 投影图层修改，在线制图修改
---
src/views/export/exportMap.vue | 324 ++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 257 insertions(+), 67 deletions(-)
diff --git a/src/views/export/exportMap.vue b/src/views/export/exportMap.vue
index 9a11ad6..a253d5d 100644
--- a/src/views/export/exportMap.vue
+++ b/src/views/export/exportMap.vue
@@ -1,13 +1,12 @@
<template>
- <div
- class="expiort"
- v-drag="true"
- >
+ <div class="expiort" v-drag="true">
<div class="leftMenu">
<div class="menuTitle">鍦板浘璁捐</div>
<div class="menmuContent">
<div class="contentTitle">
- <div class="contentImg"></div>
+ <div class="contentImg">
+
+ </div>
鍥句欢淇℃伅
</div>
<div class="contentBox">
@@ -17,86 +16,59 @@
</div>
<p>鍒朵綔鏃ユ湡</p>
<div class="contentInput">
- <el-input v-model="exportFrom.date"></el-input>
+ <!-- <el-input v-model="exportFrom.date"></el-input> -->
+ <el-date-picker v-model="exportFrom.date" style="width: 100%;" type="date" :clearable="false" />
</div>
- <p>鍒朵綔鍗曚綅</p>
- <div class="contentInput">
- <el-input v-model="exportFrom.dep"></el-input>
- </div>
- </div>
- <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>
- </div>
- <p>鍥句緥</p>
- <div class="contentInput">
- <el-input v-model="exportFrom.dep"></el-input>
- </div>
+
</div>
<div class="contentTitle">
<div class="contentImg"></div>
鎵撳嵃璁剧疆
</div>
<div class="contentBox">
- <p>DPI</p>
- <div class="contentInput">
- <el-input v-model="exportFrom.name"></el-input>
- </div>
<p>瀵煎嚭鏍煎紡</p>
<div class="contentInput">
- <el-select
- style="width: 100%;"
- v-model="exportFrom.date"
- >
- <el-option
- label=".PNG"
- value="png"
- ></el-option>
+ <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.date"
- >
- <el-option
- label="A4"
- value="A4"
- ></el-option>
+ <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"
- >纭</el-button>
- <el-button
- size="small"
- type="primary"
- class="delbtn"
- @click="editExport"
- >鍙栨秷</el-button>
+ <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,
@@ -105,16 +77,152 @@
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: "",
- date: "",
- dep: "",
+ 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) => {
+ 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 format = (shijianchuo) => {
+ //shijianchuo鏄暣鏁帮紝鍚﹀垯瑕乸arseInt杞崲
+ var time = new Date(shijianchuo);
+ var y = time.getFullYear();
+ var m = time.getMonth() + 1;
+ var d = time.getDate();
+ var h = time.getHours();
+ var mm = time.getMinutes();
+ var s = time.getSeconds();
+ return (
+ y +
+ '-' +
+ add0(m) +
+ '-' +
+ add0(d)
+ );
+}
+//鏍煎紡鍖栨椂闂�
+const add0 = (m) => {
+ return m < 10 ? '0' + m : m;
+}
+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 nowDate = format(exportFrom.value.date)
+ var obj = {
+ layerIds: ids,
+ token: token.replace("?token=", ""),
+ title: exportFrom.value.name,
+ pageSize: exportFrom.value.pageSize,
+ date: nowDate,
+ 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>
@@ -132,7 +240,9 @@
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%;
@@ -140,6 +250,14 @@
display: flex;
flex-direction: column;
}
+
+.rightMap {
+ height: calc(100% - 20px);
+ width: 849px;
+ border-right: 1px solid #d6e4ff;
+ padding: 10px;
+}
+
.menmuContent {
flex: 1;
width: 100%;
@@ -147,7 +265,7 @@
overflow: auto;
.contentTitle {
- font-size: 20px;
+ font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 300;
color: #ffffff;
@@ -158,12 +276,14 @@
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;
@@ -172,6 +292,7 @@
line-height: 9px;
margin-bottom: 10px;
}
+
.contentInput {
margin-bottom: 10px;
}
@@ -184,13 +305,17 @@
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);
@@ -200,33 +325,98 @@
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);
- height: 42px;
- background: #0e151f;
- font-size: 24px;
+ 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);
--
Gitblit v1.9.3