From be73e1692ebe367d45a0d6459402a5a3ac7edf81 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期五, 08 九月 2023 16:48:20 +0800
Subject: [PATCH] 出图接口对接调试
---
src/views/query/detailsQuery.vue | 15 +
src/api/api.js | 4
package.json | 2
src/assets/js/Map/menuTool.js | 2
src/views/export/exportList.vue | 212 ++++++++++++++++++++++++++
src/views/export/exportMap.vue | 224 +++++++++++++++++++++++-----
src/views/Index.vue | 11 +
src/store/index.ts | 1
8 files changed, 426 insertions(+), 45 deletions(-)
diff --git a/package.json b/package.json
index cbe5e1d..f305ff7 100644
--- a/package.json
+++ b/package.json
@@ -16,9 +16,11 @@
"axios": "^1.3.4",
"default-passive-events": "^2.0.0",
"element-plus": "^2.3.0",
+ "jquery": "^3.7.1",
"js-base64": "^3.7.5",
"jsencrypt": "^3.3.2",
"mitt": "^3.0.1",
+ "moment": "^2.29.4",
"ol": "^7.5.1",
"particles.vue3": "^2.9.3",
"terraformer-wkt-parser": "^1.2.1",
diff --git a/src/api/api.js b/src/api/api.js
index 7d9eb3d..8826121 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -86,3 +86,7 @@
}
+//鍦ㄧ嚎鍒跺浘=>鍒嗛〉鏌ヨ
+export function exportSelectByPage(params) {
+ return request.get('/export/selectByPage', { params: params });
+}
\ No newline at end of file
diff --git a/src/assets/js/Map/menuTool.js b/src/assets/js/Map/menuTool.js
index c55b42a..6bd167c 100644
--- a/src/assets/js/Map/menuTool.js
+++ b/src/assets/js/Map/menuTool.js
@@ -17,6 +17,7 @@
polyline: SmartEarth.Cesium.Color.fromCssColorString("#ffff0050"),
polygon: SmartEarth.Cesium.Color.fromCssColorString("#ffff0050"),
},
+ exportSquare: null,
topTools(res) {
this.toolFlag = res.id;
switch (res.id) {
@@ -366,6 +367,7 @@
var east1 = ss[2];
var north1 = ss[3];
var south1 = ss[1];
+ this.exportSquare = ss;
var geometry = Cesium.Rectangle.fromDegrees(west1, south1, east1, north1);
diff --git a/src/store/index.ts b/src/store/index.ts
index 934293f..e7ecb4e 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -40,6 +40,7 @@
entitiesData: {},
getData: {},
},
+ loading: false,
},
mutations: {
// SET_plotting(state, obj) {
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 694d895..849e942 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,5 +1,9 @@
<template>
- <div class="body_box">
+ <div
+ class="body_box"
+ v-loading="store.state.loading"
+ element-loading-background="rgba(0, 0, 0, 0.8)"
+ >
<export-map
v-if="layerExportshow"
@SETexportMap="SETexportMap"
@@ -12,7 +16,10 @@
v-if="layerSpatialshow"
@SETspatialClose="SETspatialClose"
></spatial-box>
- <coord-location v-if="layerLocationshow" @SETcoordClose="setCoordLocation">
+ <coord-location
+ v-if="layerLocationshow"
+ @SETcoordClose="setCoordLocation"
+ >
</coord-location>
<details-query v-if="store.state.details.showDetails"> </details-query>
<div v-if="store.state.isShowMap">
diff --git a/src/views/export/exportList.vue b/src/views/export/exportList.vue
index 7f12222..2010a69 100644
--- a/src/views/export/exportList.vue
+++ b/src/views/export/exportList.vue
@@ -12,6 +12,71 @@
<Close />
</el-icon>
</div>
+ <div class="exportContent spatialTable">
+ <div style="height:calc(100% - 130px) ; width: calc(100% - 25px); background: red; position: absolute;">
+ <el-table
+ ref="singleTable"
+ :data="exportable"
+ height="100%"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column
+ type="index"
+ width="100"
+ label="搴忓彿"
+ >
+ </el-table-column>
+ <el-table-column
+ property="descr"
+ label="鏍囬"
+ > </el-table-column>
+ <el-table-column
+ property="name"
+ label="鏂囦欢鍚嶇О"
+ > </el-table-column>
+ <el-table-column
+ property="createName"
+ label="鍑哄浘浜�"
+ >
+ </el-table-column>
+ <el-table-column
+ property="createTime"
+ :formatter="formatTime"
+ label="鏃ユ湡"
+ >
+ </el-table-column>
+
+ <el-table-column
+ label="鎿嶄綔"
+ width="120"
+ >
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ size="small"
+ @click.stop="downloadMap(scope.$index, scope.row)"
+ >涓嬭浇</el-button>
+
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <div class="pagination_box">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="listdata.pageIndex"
+ :page-sizes="[10, 20, 50, 100]"
+ :page-size="listdata.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="listdata.count"
+ >
+ </el-pagination>
+ </div>
+ </div>
+
+ </div>
</div>
</template>
@@ -26,19 +91,73 @@
} from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
-
+import { exportSelectByPage } from "@/api/api";
+import moment from "moment";
+import { getToken } from "@/utils/auth";
const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
const emits = defineEmits(["SETspatialClose"]);
+const listdata = ref({
+ pageIndex: 1,
+ pageSize: 10,
+ count: 0,
+});
+const exportable = ref([]);
+const handleSizeChange = (val) => {
+ listdata.value.pageIndex = 1;
+ listdata.value.pageSize = val;
+ getTableData();
+};
+const downloadMap = (index, rows) => {
+ var guid = rows.guid;
+ var token = "?token=" + getToken();
+ var a = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩鍏冪礌
+ a.style.display = "none"; // 璁剧疆鍏冪礌涓嶅彲瑙�
+ a.href = config.BASE_URL + "/export/downloadFile" + token + "&guid=" + guid;
+ document.body.appendChild(a); // 鍔犲叆
+ a.click(); // 瑙﹀彂鐐瑰嚮,涓嬭浇
+ document.body.removeChild(a); // 閲婃斁
+};
+const handleCurrentChange = (val) => {
+ listdata.value.pageIndex = val;
+ getTableData();
+};
+const setListDataStart = () => {
+ listdata.value = {
+ pageIndex: 1,
+ pageSize: 10,
+ count: 0,
+ };
+ getTableData();
+};
+const formatTime = (row, column) => {
+ let date = row[column.property];
+ if (date === undefined || date === null) {
+ return "";
+ }
+ return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss");
+};
+const handleSelectionChange = () => {};
+const getTableData = async () => {
+ const data = await exportSelectByPage(listdata.value);
+
+ exportable.value = data.result;
+
+ listdata.value.count = data.count;
+};
+
const setSpatialClose = () => {
store.state.setExportList = false;
};
+onMounted((res) => {
+ setListDataStart();
+});
</script>
<style lang="less" scoped>
.exportBox {
width: 800px;
height: 400px;
- display: flex;
+
position: absolute;
bottom: 10px;
right: 50px;
@@ -58,5 +177,94 @@
font-size: 16px;
}
}
+ .exportContent {
+ width: 100%;
+ height: calc(100% - 60px);
+ padding: 5px;
+ position: absolute;
+ .pagination_box {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ margin-top: 10px;
+ }
+ }
+ .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;
+ }
+ }
+ /deep/.el-pagination button {
+ background: transparent;
+ color: #d6e4ff;
+ }
+ /deep/.el-pager li {
+ background: transparent;
+ color: #d6e4ff;
+ }
+ /deep/.el-pager li.is-active {
+ color: #409eff;
+ }
+ /deep/.el-pagination__total {
+ color: #d6e4ff;
+ }
+ /deep/.el-pagination__goto {
+ color: #d6e4ff;
+ }
+ /deep/.el-pagination__classifier {
+ color: #d6e4ff;
+ }
+ /deep/.el-input.is-disabled .el-input__wrapper {
+ background: transparent !important;
+ color: #d6e4ff;
+ }
+ /deep/.el-input.is-disabled .el-input__inner {
+ color: #d6e4ff !important;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/export/exportMap.vue b/src/views/export/exportMap.vue
index 24de1f8..ea59f64 100644
--- a/src/views/export/exportMap.vue
+++ b/src/views/export/exportMap.vue
@@ -24,52 +24,21 @@
v-model="exportFrom.date"
style="width: 100%;"
type="date"
- placeholder="Pick a day"
+ :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> -->
- <el-input-number
- style="width: 100%;"
- v-model="exportFrom.name"
- :min="1"
- :max="10"
- />
- </div>
<p>瀵煎嚭鏍煎紡</p>
<div class="contentInput">
<el-select
style="width: 100%;"
- v-model="exportFrom.date"
+ v-model="exportFrom.type"
>
<el-option
label=".PNG"
@@ -81,20 +50,58 @@
<div class="contentInput">
<el-select
style="width: 100%;"
- v-model="exportFrom.date"
+ v-model="exportFrom.pageSize"
>
<el-option
- label="A4"
- value="A4"
- ></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"
@@ -123,23 +130,111 @@
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;
+ tableData.value = store.state.chekNowLayers;
+ 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 = [];
+ for (var i in tableData.value) {
+ if (tableData.value[i].tab) {
+ res.push(tableData.value[i].tab.replace("moon:", ""));
+ }
+ }
+
+ res.push("moon");
+ var obj = {
+ 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();
});
@@ -246,7 +341,56 @@
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);
diff --git a/src/views/query/detailsQuery.vue b/src/views/query/detailsQuery.vue
index 7c7fe18..413c334 100644
--- a/src/views/query/detailsQuery.vue
+++ b/src/views/query/detailsQuery.vue
@@ -38,6 +38,7 @@
defineProps,
defineEmits,
nextTick,
+ watch,
} from "vue";
import store from "@/store";
import {
@@ -181,12 +182,24 @@
const add0 = (m) => {
return m < 10 ? "0" + m : m;
};
-onMounted(() => {
+const setLayerStart = () => {
detailsData.value.gid = store.state.details.gid;
detailsData.value.name = store.state.details.tab.replaceAll("_", "");
getTableByEntity();
+};
+onMounted(() => {
+ setLayerStart();
});
+watch(
+ () => store.state.details,
+ (nVal, oVal) => {
+ if (nVal) {
+ setLayerStart();
+ }
+ },
+ { deep: true }
+);
</script>
<style lang="less" scoped>
--
Gitblit v1.9.3