From c960e2add5751edbe728dd5d297079b36544d11a Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 20 十二月 2022 17:40:17 +0800
Subject: [PATCH] 1
---
src/views/exportMap/index.vue | 793 ++++++++++++++++++++++----------------
src/views/Archive/index.vue | 66 ++
src/store/index.js | 1
src/views/Synthesis/LeftMenu.vue | 31
src/components/MapView/mapMenuPop.vue | 237 +++++++++++
src/views/Thematic/index.js | 2
src/views/datamanage/SpatialData.vue | 27
7 files changed, 769 insertions(+), 388 deletions(-)
diff --git a/src/components/MapView/mapMenuPop.vue b/src/components/MapView/mapMenuPop.vue
index 32774f6..adf0b5a 100644
--- a/src/components/MapView/mapMenuPop.vue
+++ b/src/components/MapView/mapMenuPop.vue
@@ -17,9 +17,21 @@
<el-link @click="closeMenuBox" :underline="false" class="boxClose"
><i class="el-icon-close"></i>
</el-link>
+ <el-link
+ :underline="false"
+ v-show="$store.state.download"
+ @click="dialogVisible = true"
+ class="boxClose"
+ ><i class="el-icon-download"></i>
+ </el-link>
</div>
<div class="tableBox">
- <el-table :data="tableData" style="height: 100%; width: 100%">
+ <el-table
+ :data="tableData"
+ ref="dialogPayChannel"
+ height="230px"
+ style="width: 100%"
+ >
<el-table-column
align="center"
type="index"
@@ -45,33 +57,117 @@
></el-table-column>
</el-table>
</div>
- <!-- <div class="rightPage"> -->
- <!-- <el-pagination
+ <div class="pagination_box">
+ <el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
- :current-page="listPage.pageIndex"
+ :current-page="listdata.pageIndex"
:page-sizes="[10, 20, 30, 40]"
- :page-size="listPage.pageSize"
+ :page-size="listdata.pageSize"
layout="total, sizes, prev, pager, next, jumper"
- :total="listPage.pageCount"
+ :total="pageCount"
>
- </el-pagination> -->
- <!-- </div> -->
+ </el-pagination>
+ </div>
</div>
+ <el-dialog
+ :title="$t('common.passworld')"
+ :visible.sync="dialogVisible"
+ width="30%"
+ top="35vh"
+ :modal="false"
+ :before-close="handleCloseDown"
+ >
+ <el-form
+ :model="codeForm"
+ :rules="rules"
+ ref="codeForm"
+ label-width="100px"
+ class="codeForm"
+ >
+ <el-form-item :label="$t('common.passworld')" prop="password">
+ <el-input
+ type="password"
+ v-model="codeForm.password"
+ show-password
+ ></el-input>
+ </el-form-item>
+ <el-form-item :label="$t('common.SPassword')" prop="repassword">
+ <el-input
+ type="password"
+ v-model="codeForm.repassword"
+ show-password
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ class="primary"
+ size="small"
+ @click="download('codeForm')"
+ >{{ $t('common.confirm') }}</el-button
+ >
+ <el-button type="info" size="small" @click="closeDown('codeForm')">{{
+ $t('common.cancel')
+ }}</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ <iframe
+ id="Iframe1"
+ src=""
+ style="display: none; border: 0; padding: 0; height: 0; width: 0"
+ ></iframe>
</div>
</template>
<script>
import {
- dataQuerySelectByPage,
+ dataQuery_selectByPage,
inquiry_selectDomains,
inquiry_selectFields,
dataQuerySelectWktById,
+ sign_getPublicKey,
+ dataLib_selectDownloadFile,
decr,
} from '../../api/api.js';
+import { getToken } from '@/utils/auth';
+import $ from 'jquery';
export default {
data() {
+ var repasswordValidator = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('璇峰啀娆¤緭鍏ュ瘑鐮�'));
+ } else if (value !== this.codeForm.password) {
+ callback(new Error('涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!'));
+ } else {
+ callback();
+ }
+ };
+ var passwordValidator = (rule, value, callback) => {
+ var passwordreg =
+ /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{12,20}$/;
+ if (!passwordreg.test(value)) {
+ callback(new Error('瀵嗙爜蹇呴』鐢辨暟瀛椼�佸瓧姣嶃�佺壒娈婂瓧绗︾粍鍚�,璇疯緭鍏�13-20浣�'));
+ } else {
+ callback();
+ }
+ };
return {
+ dialogVisible: false,
+ codeForm: {
+ password: '',
+ repassword: '',
+ },
+ rules: {
+ password: [
+ { required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' },
+ { validator: passwordValidator, trigger: 'blur' },
+ ],
+ repassword: [
+ { required: true, message: '璇疯緭鍏ョ‘璁ゅ瘑鐮�', trigger: 'blur' },
+ { validator: repasswordValidator, trigger: 'blur' },
+ ],
+ },
listPage: {
pageSize: 10,
pageIndex: 1,
@@ -88,6 +184,7 @@
wkt: null,
filter: null,
},
+ pageCount: 0,
querylayer: null,
queryTable: [],
domainsLayer: [],
@@ -96,6 +193,74 @@
};
},
methods: {
+ async signGetPublicKey() {
+ const res = await sign_getPublicKey();
+ if (res && res.code == 200) {
+ window.encrypt = new JSEncrypt();
+ encrypt.setPublicKey(res.result);
+ }
+ },
+ download() {
+ if (this.codeForm.password == '') return;
+ var obj = {
+ pwd: encrypt.encrypt(this.codeForm.password),
+ entities: [],
+ wkt: this.listdata.wkt,
+ };
+ for (var i in this.option) {
+ obj.entities.push(this.option[i].entity);
+ }
+ var token = getToken();
+ var that = this;
+ $.ajax(BASE_URL + '/dataLib/downloadDbReq?token=' + token, {
+ type: 'post',
+ data: JSON.stringify(obj),
+ async: true,
+ cache: false,
+ processData: false,
+ contentType: false,
+ success: (res) => {
+ if (res.code != 200) {
+ return;
+ }
+ this.selectDownloadFile(res.result, obj.pwd);
+ },
+ });
+ },
+ async selectDownloadFile(rsid, rspwd) {
+ var downObj = {
+ guid: rsid,
+ pwd: encodeURIComponent(rspwd),
+ };
+ const data = await dataLib_selectDownloadFile(downObj);
+ if (data.code != 200) {
+ this.$message.error('涓嬭浇璇锋眰澶辫触');
+ return;
+ }
+ this.closeDown();
+ var token = getToken();
+ var url =
+ BASE_URL +
+ '/dataLib/downloadFile?token=' +
+ token +
+ '&guid=' +
+ rsid +
+ '&pwd=' +
+ encodeURIComponent(rspwd);
+ $('#Iframe1').attr('src', url).click();
+ },
+ handleCloseDown() {
+ this.$confirm('纭鍏抽棴锛�')
+ .then((_) => {
+ this.closeDown();
+ })
+ .catch((_) => {});
+ },
+ closeDown() {
+ this.dialogVisible = false;
+ this.codeForm.password = '';
+ this.codeForm.repassword = '';
+ },
startTableMssage() {
this.listdata.pageIndex = 1;
this.listdata.pageSize = 10;
@@ -103,11 +268,11 @@
this.option = [];
},
setTableAll() {
+ this.signGetPublicKey();
this.startTableMssage();
this.listdata.wkt = this.$store.state.mapMenuShpFile;
this.querylayer = this.$store.state.mapSpaceQueryLayer;
this.option = this.$store.state.mapSpaceQueryLayer;
- debugger;
this.listdata.name = this.option[0].entity;
this.getTableDateHidder();
@@ -187,10 +352,19 @@
this.listdata.name = res.entity;
this.getTableDateHidder();
},
+ handleSizeChange(val) {
+ this.listdata.pageIndex = 1;
+ this.listdata.pageSize = val;
+ this.getTableData();
+ },
+ handleCurrentChange(val) {
+ this.listdata.pageIndex = val;
+ this.getTableData();
+ },
async getTableData() {
this.tableData = [];
- const data = await dataQuerySelectByPage(this.listdata);
+ const data = await dataQuery_selectByPage(this.listdata);
if (data.code != 200) {
this.$message.error('鍒楄〃璋冪敤澶辫触');
}
@@ -207,7 +381,9 @@
}
}
}
+ this.pageCount = data.count;
this.tableData = data.result;
+ this.$refs.dialogPayChannel.doLayout();
},
closeMenuBox() {
if (this.imagePoint != null) {
@@ -273,11 +449,46 @@
height: 327px;
}
.rightPage {
- position: absolute;
- bottom: 10px;
margin-left: 50px;
/*涓嶅彲鐐瑰嚮鐨�*/
}
+ .pagination_box {
+ position: absolute;
+ bottom: 10px;
+ /deep/.el-input__inner {
+ background-color: transparent !important;
+ border: 1px solid;
+ color: white;
+ }
+ /deep/.el-pagination__total {
+ color: white;
+ }
+ /deep/.el-pagination__jump {
+ color: white;
+ }
+ /deep/.el-pager li.active {
+ color: #409eff;
+ }
+ /deep/.el-pager li {
+ color: white;
+ background: transparent;
+ }
+ /deep/.el-pager li {
+ color: white;
+ }
+ /deep/.btn-prev {
+ background: transparent;
+ }
+ /deep/.btn-next {
+ background: transparent;
+ }
+ /deep/.btn-next i {
+ color: white;
+ }
+ /deep/.btn-prev i {
+ color: white;
+ }
+ }
.boxClose {
float: right;
margin-right: 20px;
diff --git a/src/store/index.js b/src/store/index.js
index b2d20f0..3705119 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -44,6 +44,7 @@
uname: null,
//椤圭洰绠＄悊
projeOl: null,
+ download: false,
},
mutations: {
//鑾峰彇鏉冮檺鍚堥泦
diff --git a/src/views/Archive/index.vue b/src/views/Archive/index.vue
index 4adec2e..565591d 100644
--- a/src/views/Archive/index.vue
+++ b/src/views/Archive/index.vue
@@ -225,7 +225,7 @@
</el-table>
</div>
</div>
- <div class="panerPage">
+ <div class="panerPage" v-show="!isMenuActive">
<div class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@@ -590,6 +590,10 @@
{ validator: repasswordValidator, trigger: 'blur' },
],
},
+ upAttach:{
+ tabName:null,
+ eventid:null,
+ }
};
},
computed: {
@@ -644,12 +648,28 @@
this.showMapVisible =true;
this.$store.state.mapMenuBoolean = true;
this.$store.state.mapMenuBoxFlag = '1';
+ this.$store.state.mapPopBoolean = false;
+ this.$store.state.mapPopBoxFlag = null;
+ this.$store.state.download = true;
+
},
handleMapClose(){
- this.dialogMapVisible =false;
+ this.$confirm('纭鍏抽棴锛�')
+ .then((_) => {
+ this.closeMapDown();
+ })
+ .catch((_) => {});
+
+
+ },
+ closeMapDown(){
+ this.dialogMapVisible =false;
this.showMapVisible =false;
this.$store.state.mapMenuBoolean = false;
this.$store.state.mapMenuBoxFlag = null;
+ this.$store.state.download = false;
+ this.$store.state.mapPopBoolean = false;
+ this.$store.state.mapPopBoxFlag = null;
},
moreEvent(res) {
switch (res) {
@@ -755,7 +775,6 @@
for (var i in this.multipleSelection1) {
std.push(this.multipleSelection1[i].id)
}
- debugger
var obj = {
pwd: encrypt.encrypt(this.codeForm.repassword),
ids: std
@@ -771,9 +790,8 @@
guid: res.result,
pwd: encodeURIComponent(encrypt.encrypt(this.codeForm.repassword))
}
- debugger
- const data = await dataLib_selectDownloadFile(downObj)
+ const data = await dataLib_selectDownloadFile(downObj)
if (data.code != 200) {
this.$message.error('涓嬭浇璇锋眰澶辫触');
return
@@ -856,6 +874,7 @@
this.listTypeData.pageIndex = 1;
this.listTypeData.pageSize = 10;
this.dialogtitle = res.tabDesc + '(' + res.tab + ')';
+ this.upAttach.tabName= res.ns+"."+res.tab;
this.filedsLayer = this.getCollapseDomFiled();
this.getCollapseTable(this.filedsLayer);
@@ -877,7 +896,12 @@
this.itemdetail = std;
this.innerVisible = true;
},
- getAttachTable() {
+ getAttachTable(index, row) {
+ if(row.eventid != null){
+ this.upAttach.eventid = row.eventid;
+ }else{
+ this.upAttach.eventid ="";
+ }
this.outerVisible = true;
this.getAttacthFlieList();
},
@@ -905,7 +929,7 @@
formData.append('file', fs.files[i]); // fs.files[i].name,file
}
- $.ajax(BASE_URL + "/dataQuery/uploadFiles?token=" + token + "&tabName=lf.sys_style&eventid=fa25979a5ef8b43ba82a0be35b3fb0d4", {
+ $.ajax(BASE_URL + "/dataQuery/uploadFiles?token=" + token + "&tabName="+this.upAttach.tabName+"&eventid="+this.upAttach.eventid, {
type: "post",
data: formData,
async: true,
@@ -918,13 +942,16 @@
type: 'success'
});
document.getElementById("insertFile").value = "";
- this.formInline = {
+ this.fromfile = {
file: '',
}
this.getAttacthFlieList();
},
error: (e) => {
document.getElementById("insertFile").value = "";
+ this.fromfile = {
+ file: '',
+ }
this.$message.error('闄勪欢娣诲姞澶辫触');
}
});
@@ -932,10 +959,7 @@
async getAttacthFlieList(){
- var obj = {
- tabName: 'lf.sys_style',
- eventid: 'fa25979a5ef8b43ba82a0be35b3fb0d4'
- }
+ var obj =this.upAttach;
const res = await dataLib_selectFiles(obj);
if (res.code != 200) {
this.$message.error('鍒楄〃璋冪敤澶辫触');
@@ -967,9 +991,9 @@
this.attributeData = val;
});
if (this.ruleForm.name != null) {
- this.listData.filter = 'name like ' + this.ruleForm.name;
+ this.listTypeData.filter = 'name like ' + this.ruleForm.name;
} else {
- this.listData.filter = null;
+ this.listTypeData.filter = null;
}
const data = await dataLib_selectByPage(this.listTypeData);
@@ -977,8 +1001,10 @@
this.$message.error('璋冪敤鍒楄〃澶辫触,璇疯仈绯诲伐浣滀汉鍛�!');
return;
}
+
var res_val = this.attributeData;
this.count1 = data.count;
+
for (var i in data.result) {
let val_Data = data.result[i];
@@ -1012,9 +1038,11 @@
this.$message.error('鍒楄〃璋冪敤澶辫触');
return;
}
+
const domains = await dataLib_selectDomains({
name: this.listTypeData.name,
});
+
if (domains.code != 200) {
this.$message.error('鍒楄〃璋冪敤澶辫触');
return;
@@ -1032,7 +1060,15 @@
}
return std;
},
-
+ //鍊煎煙瀛楁鍖归厤
+ getDomainNaFild(res, result) {
+ for (var i in result) {
+ if (result[i].domName == res) {
+ return result[i].codeDesc;
+ }
+ }
+ return null;
+ },
handleSizeChange(res) {
this.listData.pageIndex = 1;
this.listData.pageSize = res;
diff --git a/src/views/Synthesis/LeftMenu.vue b/src/views/Synthesis/LeftMenu.vue
index bb14176..96982d6 100644
--- a/src/views/Synthesis/LeftMenu.vue
+++ b/src/views/Synthesis/LeftMenu.vue
@@ -443,21 +443,22 @@
let files = evt.target.files;
if (files.length > 0) {
let file = evt.target.files[0];
- let fileReader = new FileReader();
- fileReader.readAsDataURL(file);
- fileReader.onload = () => {
- sgworld.Viewer.dataSources
- .add(
- Cesium.KmlDataSource.load(fileReader.result, {
- camera: sgworld.Viewer.scene.camera,
- canvas: sgworld.Viewer.scene.canvas,
- })
- )
- .then((KmlDataSource) => {
- console.log(KmlDataSource);
- // let entities = kmlDataSource.entities;
- });
- };
+ sgworld.Creator.addKmlLayer('kml鏁版嵁', file, true);
+ // let fileReader = new FileReader();
+ // fileReader.readAsDataURL(file);
+ // fileReader.onload = () => {
+ // sgworld.Viewer.dataSources
+ // .add(
+ // Cesium.KmlDataSource.load(fileReader.result, {
+ // camera: sgworld.Viewer.scene.camera,
+ // canvas: sgworld.Viewer.scene.canvas,
+ // })
+ // )
+ // .then((KmlDataSource) => {
+ // console.log(KmlDataSource);
+ // // let entities = kmlDataSource.entities;
+ // });
+ // };
}
// fileInput.value = null;
};
diff --git a/src/views/Thematic/index.js b/src/views/Thematic/index.js
index 9f7d95f..fa55ba3 100644
--- a/src/views/Thematic/index.js
+++ b/src/views/Thematic/index.js
@@ -17,7 +17,7 @@
{ id: 'a13', name: '澶у睆瑙嗗浘', layer: [11, 12, 13, 14] },
{ id: 'a1', name: '鍏ㄧ悆绠＄綉鍥�', layer: [11, 12], index: '1' },
{ id: 'a2', name: '鍏ㄧ悆椤圭洰瓒宠抗鍥�', layer: [13, 14], index: '2' },
- { id: 'a3', name: '鍏ㄥ浗瀹樼綉鍥�', layer: [11, 13], index: '3' },
+ { id: 'a3', name: '鍏ㄥ浗绠＄綉鍥�', layer: [11, 13], index: '3' },
{ id: 'a4', name: '鍏ㄥ浗椤圭洰瓒宠抗鍥�', layer: [12, 14], index: '4' },
{ id: 'a5', name: '绠￠亾鍩虹鏁版嵁缁熻鍜屽垎鏋�', layer: [11, 12, 13] },
{ id: 'a6', name: '鍏ㄥ浗椤圭洰鏌辩姸鍥�', layer: [11, 12, 14] },
diff --git a/src/views/datamanage/SpatialData.vue b/src/views/datamanage/SpatialData.vue
index b88d160..ed4f8a5 100644
--- a/src/views/datamanage/SpatialData.vue
+++ b/src/views/datamanage/SpatialData.vue
@@ -52,9 +52,10 @@
<el-table
ref="filterTable"
:data="tableData"
- height="90%"
+ height="500px"
border
style="width: 100%"
+
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
@@ -75,7 +76,7 @@
>{{$t('common.details')}}</el-link
>
<el-link class="elLink"
- @click="getAttachTable"
+ @click="getAttachTable(scope.$index, scope.row)"
style="margin-left: 20px; "
>{{$t('common.enclosure')}}</el-link
>
@@ -256,7 +257,6 @@
showinfoBox: false,
itemdetail: {},
- tableData: [],
attributeData: [],
currentPage: 1,
searchName: '',
@@ -272,6 +272,10 @@
},
getClickTable: null,
attacgSelection: [],
+ upAttach:{
+ tabName:null,
+ eventid:null,
+ }
};
},
created() {
@@ -305,7 +309,7 @@
formData.append('file', fs.files[i]); // fs.files[i].name,file
}
- $.ajax(BASE_URL + "/dataQuery/uploadFiles?token=" + token + "&tabName=lf.sys_style&eventid=fa25979a5ef8b43ba82a0be35b3fb0d4", {
+ $.ajax(BASE_URL + "/dataQuery/uploadFiles?token=" + token + "&tabName= "+this.upAttach.tabName+"&eventid="+this.upAttach.eventid, {
type: "post",
data: formData,
async: true,
@@ -330,10 +334,7 @@
});
},
async getAttacthFlieList() {
- var obj = {
- tabName: 'lf.sys_style',
- eventid: 'fa25979a5ef8b43ba82a0be35b3fb0d4'
- }
+ var obj =this.upAttach
const res = await dataQuery_selectFiles(obj);
if (res.code != 200) {
this.$message.error('鍒楄〃璋冪敤澶辫触');
@@ -343,7 +344,12 @@
},
- getAttachTable() {
+ getAttachTable(index, row) {
+ if(row.eventid != null){
+ this.upAttach.eventid = row.eventid;
+ }else{
+ this.upAttach.eventid = '';
+ }
this.getAttacthFlieList();
this.dialogFormVisible = true;
},
@@ -396,6 +402,7 @@
this.listData.pageIndex =1;
this.listData.pageSize=10;
this.count = 0;
+this.upAttach.tabName= data.ns+"."+data.tab;
this.filedsLayer = this.getCollapseDomFiled(); //鑾峰彇姣忎釜琛ㄥ瓧娈靛悕绉板強闃堝��
//鑾峰彇table淇℃伅
@@ -428,7 +435,9 @@
}
}
}
+
this.tableData = data.result;
+ this.$refs.filterTable.doLayout();
},
//鑾峰彇姣忎釜琛ㄥ瓧娈靛悕绉板強闃堝��
async getCollapseDomFiled() {
diff --git a/src/views/exportMap/index.vue b/src/views/exportMap/index.vue
index 738dddd..4f60428 100644
--- a/src/views/exportMap/index.vue
+++ b/src/views/exportMap/index.vue
@@ -1,196 +1,201 @@
<template>
- <div class="exportmap">
- <div id="mapView" class="mapView">
- <div class="topMenu">
- <el-form :inline="true" :model="formInline" class="demo-form-inline">
- <el-form-item>
- <el-link
- style="color: white"
- @click="setLeftMenu"
- :underline="false"
- >鍥惧眰</el-link
+ <div
+ id="mapView"
+ class="MapBox"
+ v-loading="loading"
+ element-loading-spinner="el-icon-loading"
+ element-loading-background="rgba(0, 0, 0, 0.8)"
+ >
+ <div class="topMenu">
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
+ <el-form-item>
+ <el-link
+ style="color: white"
+ @click="showLeftMenu(1)"
+ :underline="false"
+ title="鍥惧眰鍒楄〃"
+ ><i class="el-icon-s-operation"></i
+ ></el-link>
+ </el-form-item>
+ <el-form-item label="姣斾緥灏�">
+ <el-select v-model="value" placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
>
- </el-form-item>
- <el-form-item>
- <el-link
- style="color: white"
- @click="changeMenulayer"
- :underline="false"
- ><i class="el-icon-menu"></i>搴曞浘</el-link
- >
- </el-form-item>
- <el-form-item>
- <el-select v-model="value" placeholder="璇烽�夋嫨">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-link style="color: white" :underline="false"
- ><i class="el-icon-rank"></i>
- </el-link>
- </el-form-item>
- <el-form-item>
- <el-link
- style="color: white"
- @click="showMapApply = true"
- :underline="false"
- >鍑哄浘鐢宠
- </el-link></el-form-item
- >
- <el-form-item>
- <el-link
- style="color: white"
- @click="getShowMapList"
- :underline="false"
- >鍑哄浘鍒楄〃</el-link
- ></el-form-item
- >
- <el-form-item label="鏃嬭浆">
- <el-input
- v-model="formInline.role"
- placeholder="璇疯緭鍏ュ唴瀹�"
- ></el-input>
- </el-form-item>
- <el-form-item>
- <el-button plain size="mini" @click="setMapRole">鏃嬭浆</el-button>
- <el-button plain size="mini" @click="setMapAddDraw()"
- >缁樺埗</el-button
- >
- <el-button plain size="mini" @click="setMapRemoveDraw()"
- >娓呴櫎</el-button
- >
- <!-- <el-button plain size="mini" @click="setExportMapLayer"
- >鍑哄浘</el-button
- > -->
- </el-form-item>
- </el-form>
- </div>
- <div class="leftMeu" v-if="showleftMenu">
- <div class="topHeader">
- <div style="float: left">鍥惧眰</div>
- <div style="float: right">
- <el-link @click="showleftMenu = false" :underline="false"
- ><i class="el-icon-close"></i
- ></el-link>
- </div>
- <div style="float: right; margin-right: 5%">
- <el-link :underline="false" @click="changeRowType"
- ><i
- :class="
- rowtype == true ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
- "
- ></i
- ></el-link>
- </div>
- </div>
- <div class="topContent" v-if="rowtype">
- <el-tree
- :data="data"
- show-checkbox
- node-key="id"
- :props="defaultProps"
- :default-expanded-keys="[1]"
- @check-change="handleTreeNodeClick"
- >
- </el-tree>
- </div>
- </div>
- <div class="mapApplay" v-if="showMapApply">
- <label>鍑哄浘鐢宠</label>
- <el-divider />
- <el-form ref="form" :model="form" label-width="80px">
- <el-form-item label="鍑哄浘鍚嶇О">
- <el-input v-model="form.name"></el-input>
- </el-form-item>
- <el-form-item>
- <el-table
- ref="singleTable"
- :data="tableData"
- style="width: 100%"
- height="200"
- >
- <el-table-column type="index" label="搴忓彿" width="50">
- </el-table-column>
+ </el-option>
+ </el-select>
+ </el-form-item>
- <el-table-column property="name" label="鍥惧眰鍚嶇О">
- </el-table-column>
- </el-table>
- </el-form-item>
+ <el-form-item>
+ <el-link
+ style="color: white"
+ @click="setMapAddDraw()"
+ :underline="false"
+ ><i class="el-icon-edit-outline"></i>缁樺埗</el-link
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-link
+ :disabled="layerExtent == null"
+ style="color: white"
+ @click="setMapRemoveDraw()"
+ :underline="false"
+ title="鍥惧眰鍒楄〃"
+ ><i class="el-icon-delete"></i>娓呴櫎</el-link
+ >
+ </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="setMapApply">绔嬪嵆鍒涘缓</el-button>
- <el-button @click="showMapApply = false">鍙栨秷</el-button>
- </el-form-item>
- </el-form>
- </div>
- <div class="mapApplay" v-if="showMapList">
- <div>
- <label>鍑哄浘鍒楄〃</label>
- <div style="float: right">
- <el-link @click="showMapList = false" :underline="false"
- ><i class="el-icon-close"></i
- ></el-link>
- </div>
- </div>
- <el-divider />
- <el-table
- ref="singleTable"
- :data="exportable"
- style="width: 100%"
- height="200"
- @selection-change="handleSelectionChange"
+ <el-form-item>
+ <el-link
+ style="color: white"
+ @click="showMapApply = true"
+ :underline="false"
+ :disabled="layerExtent == null"
+ >鍑哄浘鐢宠
+ </el-link></el-form-item
>
- <el-table-column type="index" width="50" label="搴忓彿">
- </el-table-column>
- <el-table-column property="name" label="鍚嶇О"> </el-table-column>
- <el-table-column property="type" label="绫诲瀷"> </el-table-column>
- <el-table-column
- property="createTime"
- :formatter="formatTime"
- label="鏃ユ湡"
+ <el-form-item>
+ <el-link
+ style="color: white"
+ @click="getShowMapList"
+ :underline="false"
+ >鍑哄浘鍒楄〃</el-link
+ ></el-form-item
+ >
+ <el-form-item>
+ <el-link
+ style="color: white"
+ @click="changeMenulayer"
+ :underline="false"
+ v-show="isActive"
+ >褰卞儚</el-link
>
- </el-table-column>
- <el-table-column property="descr" label="鎻忚堪"> </el-table-column>
- <el-table-column label="鎿嶄綔" width="120">
- <template slot-scope="scope">
- <el-button
- @click.native.prevent="downloadMap(scope.$index, scope.row)"
- type="text"
- size="small"
- >
- 涓嬭浇
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- <div class="block">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="listdata.pageIndex"
- :page-sizes="[10, 20, 30, 40]"
- :page-size="listdata.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="count"
+ <el-link
+ style="color: white"
+ v-show="!isActive"
+ @click="changeMenulayer"
+ :underline="false"
+ >鐭㈤噺</el-link
>
- </el-pagination>
+ </el-form-item>
+ <el-form-item label="鏃嬭浆瑙掑害">
+ <el-input
+ v-model="formInline.role"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ @change="setMapRole"
+ ></el-input>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div
+ id="leftMenu"
+ class="left_Menu"
+ :class="{ left_main_show: !leftMenuOpen }"
+ >
+ <div class="menu_content">
+ <div class="topHeader" v-show="lefMenuContent">
+ <div>鍥惧眰鍒楄〃</div>
+ <div @click="showLeftMenu(2)"><i class="el-icon-s-fold"></i></div>
+ </div>
+ <el-divider></el-divider>
+ <div class="bottomContent">
+ <div style="width: 100%" v-show="lefMenuContent">
+ <el-tree
+ :data="data"
+ show-checkbox
+ node-key="id"
+ :props="defaultProps"
+ :default-expanded-keys="[1]"
+ @check-change="handleTreeNodeClick"
+ ref="tree"
+ >
+ </el-tree>
+ </div>
</div>
</div>
- <div
- @click="changeMenulayer"
- class="center CenDiv"
- :class="{ center1: centerFlag }"
+ </div>
+
+ <div class="mapApplay" v-if="showMapApply">
+ <label>鍑哄浘鐢宠</label>
+ <el-divider />
+ <el-form ref="form" :model="form" label-width="80px">
+ <el-form-item label="鍑哄浘鍚嶇О">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-table
+ ref="singleTable"
+ :data="tableData"
+ style="width: 100%"
+ height="200"
+ >
+ <el-table-column type="index" label="搴忓彿" width="50">
+ </el-table-column>
+
+ <el-table-column property="name" label="鍥惧眰鍚嶇О">
+ </el-table-column>
+ </el-table>
+ </el-form-item>
+
+ <el-form-item>
+ <el-button type="primary" @click="setMapApply">绔嬪嵆鍒涘缓</el-button>
+ <el-button @click="showMapApply = false">鍙栨秷</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div class="mapApplay" v-if="showMapList">
+ <div>
+ <label>鍑哄浘鍒楄〃</label>
+ <div style="float: right">
+ <el-link @click="showMapList = false" :underline="false"
+ ><i style="color: white" class="el-icon-close"></i
+ ></el-link>
+ </div>
+ </div>
+ <el-divider />
+ <el-table
+ ref="singleTable"
+ :data="exportable"
+ style="width: 100%"
+ height="200"
+ @selection-change="handleSelectionChange"
>
- <div
- id="cenBg"
- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
- ></div>
+ <el-table-column type="index" width="50" label="搴忓彿">
+ </el-table-column>
+ <el-table-column property="name" label="鍚嶇О"> </el-table-column>
+ <el-table-column property="type" label="绫诲瀷"> </el-table-column>
+ <el-table-column
+ property="createTime"
+ :formatter="formatTime"
+ label="鏃ユ湡"
+ >
+ </el-table-column>
+ <el-table-column property="descr" label="鎻忚堪"> </el-table-column>
+ <el-table-column label="鎿嶄綔" width="120">
+ <template slot-scope="scope">
+ <el-link
+ style="color: white"
+ @click.native.prevent="downloadMap(scope.$index, scope.row)"
+ :underline="false"
+ >涓嬭浇</el-link
+ >
+ </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, 30, 40]"
+ :page-size="listdata.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="count"
+ >
+ </el-pagination>
</div>
</div>
@@ -245,6 +250,8 @@
export default {
data() {
return {
+ lefMenuContent: false,
+ leftMenuOpen: false,
dialogVisible: false,
showleftMenu: false,
showMapApply: false,
@@ -253,6 +260,7 @@
isActive: true,
isMenuLayer: false,
rowtype: true,
+ loading: false,
form: {},
formInline: { role: '' },
layerform: {},
@@ -266,8 +274,26 @@
id: 1,
label: '鍥惧眰',
children: [
- { label: '绔欏満', value: '绔欏満' },
- { label: '绠￠亾涓績绾�', value: '绠￠亾涓績绾�' },
+ {
+ id: '11',
+ label: '绔欏満',
+ value: '绔欏満',
+ layer: 'LF:m_sitepoint',
+ box: [
+ 84.21228790283203, 30.412200927734375, 121.11393737792969,
+ 41.46569061279297,
+ ],
+ },
+ {
+ id: '12',
+ label: '绠￠亾涓績绾�',
+ value: '绠￠亾涓績绾�',
+ layer: 'LF:m_pipeline',
+ box: [
+ 25.245140075683594, 11.197434425354004, 121.11258697509766,
+ 49.65690231323242,
+ ],
+ },
],
},
],
@@ -290,8 +316,50 @@
},
mounted() {
this.initMap();
+ this.showMapLayer();
},
methods: {
+ showMapLayer() {
+ var val = this.data[0].children;
+ var std = [];
+ for (var i = val.length - 1; i >= 0; i--) {
+ var layer2 = new Image({
+ name: val[i].label,
+ source: new ImageWMS({
+ crossOrigin: 'anonymous',
+ url: geoServerURl,
+
+ params: {
+ FORMAT: 'image/png',
+ VERSION: '1.1.1',
+ LAYERS: val[i].layer,
+ },
+ }),
+ });
+ mapView.addLayer(layer2);
+ std.push(val[i].id);
+ }
+ this.$refs.tree.setCheckedKeys(std);
+ },
+ showLeftMenu(res) {
+ switch (res) {
+ case 1:
+ this.leftMenuOpen = !this.leftMenuOpen;
+ break;
+ case 2:
+ this.leftMenuOpen = false;
+ break;
+ }
+ if (this.leftMenuOpen == true) {
+ setTimeout(() => {
+ this.lefMenuContent = true;
+ }, 200);
+ } else {
+ setTimeout(() => {
+ this.lefMenuContent = false;
+ }, 1100);
+ }
+ },
formatTime(row, column) {
let date = row[column.property];
if (date === undefined || date === null) {
@@ -314,11 +382,12 @@
async getShowMapList() {
this.showMapList = true;
const data = await exportSelectByPage(this.listdata);
- debugger;
+
this.exportable = data.result;
this.count = data.count;
},
+
setExportMapLayer(res) {
var token = '?token=' + getToken();
var data = {
@@ -346,13 +415,16 @@
dataType: 'json',
error: function () {},
success: (rs) => {
+ this.loading = false;
var value = 'code = ' + rs.code + ', result = ' + rs.result;
if ((rs.code = 200)) {
this.$message({
message: value,
type: 'success',
});
+ this.setMapRemoveDraw();
} else {
+ this.loading = false;
this.$message.error(value);
}
},
@@ -373,6 +445,7 @@
if (this.draw != null) {
mapView.removeLayer(this.vector);
}
+ this.layerExtent = null;
},
setMapAddDraw() {
@@ -410,7 +483,11 @@
});
},
setMapRole() {
+ if (this.formInline.role == '') {
+ this.formInline.role = '0';
+ }
var value = parseFloat(this.formInline.role);
+
var role = (Math.PI / 180) * value;
mapView.getView().setRotation(role);
},
@@ -419,6 +496,7 @@
this.$message.error('璇烽�夋嫨鍑哄浘鑼冨洿');
return;
}
+ this.loading = true;
var val_data = [];
for (var i in this.tableData) {
val_data.push(this.tableData[i].name);
@@ -436,41 +514,22 @@
},
handleClose() {},
handleTreeNodeClick(data, nodes) {
- if (data.label == '鍥惧眰') return;
-
- if (nodes == true) {
- this.arrList.push({
- name: data.label,
- });
-
- var wmsLayer = new Image({
- source: new ImageWMS({
- ratio: 1,
- url: data.resource,
- crossOrigin: 'anonymous',
- params: {
- VERSION: '1.3.0',
- FORMAT: 'image/png',
- LAYERS: '',
- srs: 'EPSG:4326',
- tiled: true,
- styles: '',
- },
- }),
- });
- wmsLayer.name = data.label;
- mapView.addLayer(wmsLayer);
- } else {
- this.arrList.some((item, i) => {
- if (item.name === data.label) {
- this.arrList.splice(i, 1);
- }
- });
- var len = mapView.getAllLayers();
- for (var i in len) {
- var layer = mapView.getLayers().item(i);
- if (layer.name == data.label) {
- mapView.removeLayer(layer);
+ if (data.children != null) return;
+ var layers = mapView.getAllLayers();
+ for (var i in layers) {
+ var layer = layers[i];
+ if (layer.values_.name == data.label) {
+ layer.setVisible(nodes); //鏄剧ず鍥惧眰
+ if (nodes == true) {
+ this.arrList.push({
+ name: data.label,
+ });
+ } else {
+ this.arrList.some((item, i) => {
+ if (item.name === data.label) {
+ this.arrList.splice(i, 1);
+ }
+ });
}
}
}
@@ -551,141 +610,205 @@
};
</script>
-<style lang="less">
-.exportmap {
+<style lang="less" scoped>
+.MapBox {
width: 100%;
height: 100%;
- background: white;
- margin: 0;
- padding: 0;
- overflow: hidden;
position: absolute;
- .mapView {
+ .topMenu {
+ z-index: 40;
+ position: absolute;
+ background: rgba(0, 0, 0, 0.5);
width: 100%;
- height: 100%;
- .topMenu {
- background: rgba(0, 0, 0, 0.5);
- z-index: 40;
- position: absolute;
- left: 40%;
- top: 3%;
- padding-top: 1%;
- padding-left: 1%;
- padding-right: 1%;
- }
- .mapApplay {
- width: 40%;
- position: absolute;
- background: rgba(0, 0, 0, 0.5);
- z-index: 40;
- top: 15%;
- margin-left: 20%;
- padding: 1%;
- label {
+ height: 70px;
+ padding-left: 20px;
+ }
+ .left_Menu {
+ z-index: 40;
+ width: 300px;
+ background: rgba(0, 0, 0, 0.5);
+ height: calc(100% - 220px);
+ position: fixed;
+ left: 0;
+ bottom: 5px;
+ display: flex;
+ transition: width 2s;
+ .menu_content {
+ width: 100%;
+ height: 100%;
+ .topHeader {
+ margin: 10px;
+ display: flex;
+ justify-content: space-between;
color: white;
}
+ .bottomContent {
+ width: calc(100% - 40px);
+ height: calc(93% - 40px);
+ padding: 20px;
+ display: flex;
+ justify-content: space-between;
+ }
+ .CenDiv {
+ height: 40px;
+ width: 60px;
+ margin: 2%;
+ border-radius: 5px;
+
+ align-self: flex-end;
+ }
+ .CenDiv:hover {
+ border: 1px solid #409eff;
+ }
+ .active {
+ height: 40px;
+ width: 60px;
+ background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+ }
+ .menuLayer {
+ height: 40px;
+ width: 60px;
+ background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+ }
}
- .mapList {
- width: 40%;
- position: absolute;
- background: rgba(0, 0, 0, 0.5);
- z-index: 40;
- top: 15%;
- margin-left: 20%;
- padding: 1%;
- }
- .leftMeu {
- position: absolute;
- width: 13%;
- z-index: 40;
- top: 10%;
- margin-left: 1%;
- border-radius: 5px;
- padding: 1%;
- }
- .topHeader {
- padding: 5%;
- background: rgba(0, 0, 0, 0.5);
- width: 100%;
- border-radius: 5px;
+ }
+ .left_main_show {
+ width: 0px;
+ z-index: 20;
+ }
+ .mapApplay {
+ width: 40%;
+ position: absolute;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 40;
+ top: 15%;
+ margin-left: 30%;
+ padding: 1%;
+ label {
color: white;
- height: 25px;
- border: 1px solid gray;
}
- .topContent {
- background: rgba(0, 0, 0, 0.5);
- width: 100%;
- padding: 5%;
- border-radius: 5px;
- border: 1px solid gray;
+ }
+ /deep/.el-form-item__label {
+ color: white;
+ line-height: 70px;
+ }
+ /deep/.el-form-item__content {
+ line-height: 70px;
+ }
+ /deep/.el-input__inner {
+ background-color: transparent !important ;
+ color: #fff;
+ border: 1px solid;
+ }
+ /deep/ .el-select .el-input__inner {
+ border-color: #fff !important;
+ }
+ /deep/ .el-divider--horizontal {
+ margin: 5px 0px;
+ }
+ /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+ /deep/ .el-table {
+ background-color: transparent;
+
+ th,
+ td {
+ background-color: transparent;
+ }
+ .el-table__expanded-cell {
+ background-color: transparent !important;
}
- .el-icon-close {
- color: white;
+ // 琛ㄥご鑳屾櫙鑹�
+ th.el-table__cell {
+ background-color: #303030;
+
+ color: #fff;
}
- .el-icon-arrow-down {
- color: white;
- }
- .el-icon-arrow-up {
- color: white;
+ tr > td {
+ background-color: #303030;
+ color: #fff;
}
- .contentHeader {
- border-top: 1px solid gray;
- padding: 3%;
- width: 94%;
+ // hover鏁堟灉
+ tr:hover > td {
+ background-color: rgba(255, 255, 255, 0.3) !important;
+ }
+
+ tbody tr:hover {
+ background-color: rgba(255, 255, 255, 0.3) !important;
+ // text-align: center;
+ }
+
+ // 婊氬姩鏉″楂�
+ .el-table__body-wrapper::-webkit-scrollbar {
+ width: 5px;
+ height: 5px;
+ }
+
+ .el-table__body-wrapper::-webkit-scrollbar {
+ width: 5px;
+ /*婊氬姩鏉″搴�*/
+ height: 5px;
+ /*婊氬姩鏉￠珮搴�*/
+ }
+ /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+ .el-table__body-wrapper::-webkit-scrollbar-track {
+ box-shadow: 0px 1px 3px #216fe6 inset;
+ /*婊氬姩鏉＄殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
+ border-radius: 10px;
+ }
+
+ /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+ box-shadow: 0px 1px 3px #216fe6 inset;
+ border-radius: 6px;
+ background-color: #216fe6;
+ }
+ }
+ .pagination_box {
+ margin-top: 20px;
+ /deep/.el-input__inner {
+ background-color: transparent !important;
+ border: 1px solid;
color: white;
}
- .center {
- margin-left: 1%;
+ /deep/.el-pagination__total {
+ color: white;
}
- .CenDiv {
- position: absolute;
- bottom: 3%;
- height: 40px;
- width: 60px;
- z-index: 101;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- box-shadow: 3px 3px 6px #666;
- border: 1px solid rgba(204, 204, 204, 0.76);
- border-radius: 5px;
- cursor: pointer;
+ /deep/.el-pagination__jump {
+ color: white;
}
- .center1 {
- margin-left: 1%;
+ /deep/.el-pager li.active {
+ color: #409eff;
}
- .right {
- position: absolute;
- top: 50px;
- right: 0;
- width: 20%;
- height: calc(100% - 50px);
-
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+ /deep/.el-pager li {
+ color: white;
+ background: transparent;
}
- .CenDiv:hover {
- border: 1px solid #409eff;
+ /deep/.el-pager li {
+ color: white;
}
- // .active {
- // width: 100%;
- // height: 100%;
- // background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
- // position: absolute;
- // background-size: 100% 100%;
- // border-radius: 5px;
- // }
- // .menuLayer {
- // width: 100%;
- // height: 100%;
- // background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
- // position: absolute;
- // background-size: 100% 100%;
- // border-radius: 5px;
- // }
+ /deep/.btn-prev {
+ background: transparent;
+ }
+ /deep/.btn-next {
+ background: transparent;
+ }
+ /deep/.btn-next i {
+ color: white;
+ }
+ /deep/.btn-prev i {
+ color: white;
+ }
+ }
+ /deep/.el-loading-spinner i {
+ color: #409eff !important;
}
}
</style>
--
Gitblit v1.9.3