<template>
|
<div class="menuPop">
|
<div class="leftBox">
|
<ul>
|
<li
|
v-for="(item, index) in option"
|
@click="setTableChange(item)"
|
class="leftBoxLi"
|
>
|
{{ item.label }}
|
</li>
|
</ul>
|
</div>
|
<div class="rightBox">
|
|
<div class="tableBox">
|
<el-table
|
:data="tableData"
|
ref="dialogPayChannel"
|
height="300px"
|
style="width: 100%"
|
>
|
<el-table-column
|
align="center"
|
type="index"
|
label="序号"
|
width="50"
|
/>
|
<el-table-column label="定位" width="100" align="center">
|
<template slot-scope="scope">
|
<el-button
|
icon="el-icon-map-location"
|
size="mini"
|
@click="spaceLocation(scope.$index, scope.row)"
|
></el-button>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-for="(item, index) in attributeData"
|
:key="index"
|
:label="item.alias"
|
:prop="item.field"
|
show-overflow-tooltip
|
align="center"
|
></el-table-column>
|
</el-table>
|
</div>
|
<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="pageCount"
|
>
|
</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 {
|
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,
|
pageCount: 0,
|
},
|
attributeData: [],
|
option: [],
|
tableData: [],
|
listdata: {
|
pageIndex: 1,
|
pageSize: 10,
|
name: null,
|
srid: 4326,
|
wkt: null,
|
filter: null,
|
},
|
pageCount: 0,
|
querylayer: null,
|
queryTable: [],
|
domainsLayer: [],
|
optionx: [],
|
imagePoint: null,
|
};
|
},
|
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;
|
this.listdata.name = null;
|
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;
|
this.listdata.name = this.option[0].entity;
|
|
this.getTableDateHidder();
|
},
|
async getTableDateHidder() {
|
const data = await inquiry_selectFields({ name: this.listdata.name });
|
if (data.code != 200) {
|
this.$message.error('列表调用失败');
|
}
|
const data1 = await inquiry_selectDomains({ name: this.listdata.name });
|
if (data1.code != 200) {
|
this.$message.error('列表调用失败');
|
}
|
this.optionx = [];
|
this.attributeData = [];
|
var valadata = data.result;
|
var laydomain = data1.result;
|
|
for (var i in valadata) {
|
if (valadata[i].showtype == 1) {
|
if (
|
valadata[i].domainNa != null &&
|
valadata[i].domainNa != undefined
|
) {
|
for (var j in laydomain) {
|
if (laydomain[j].domName == valadata[i].domainNa) {
|
valadata[i].domainNa = laydomain[j].codeDesc;
|
}
|
}
|
}
|
this.optionx.push(valadata[i]);
|
this.attributeData.push(valadata[i]);
|
}
|
}
|
this.getTableData();
|
},
|
async spaceLocation(index, row) {
|
var param = {
|
gid: row.gid,
|
name: this.listdata.name,
|
};
|
const data = await dataQuerySelectWktById(param);
|
if (data.code != 200) {
|
this.$message.error('列表调用失败');
|
}
|
|
var val1 = decr(data.result);
|
if (val1) {
|
if (this.imagePoint != null) {
|
sgworld.Creator.DeleteObject(this.imagePoint);
|
this.imagePoint = null;
|
}
|
var wkt = this.$wkt.parse(val1);
|
this.setMapLoaction(wkt);
|
}
|
},
|
setMapLoaction(res) {
|
var coord = res.coordinates;
|
if (res.type == 'Point') {
|
this.imagePoint = sgworld.Creator.CreateLabel(
|
{ X: coord[0], Y: coord[1], Altitude: 2000 },
|
'',
|
SmartEarthRootUrl + 'Workers/image/mark.png',
|
{
|
disableDepthTestDistance: Infinity,
|
scale: 0.8,
|
},
|
0,
|
'巡检点'
|
);
|
sgworld.Navigate.flyToObj(this.imagePoint.item);
|
}
|
},
|
setTableChange(res) {
|
this.listdata.pageIndex = 1;
|
this.listdata.pageSize = 10;
|
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 dataQuery_selectByPage(this.listdata);
|
if (data.code != 200) {
|
this.$message.error('列表调用失败');
|
}
|
|
var val_Data = data.result;
|
for (var i in val_Data) {
|
var valste = val_Data[i];
|
for (var j in this.optionx) {
|
if (
|
this.optionx[j].domainNa != null &&
|
this.optionx[j].domainNa != undefined
|
) {
|
valste[this.optionx[j].field] = this.optionx[j].domainNa;
|
}
|
}
|
}
|
this.pageCount = data.count;
|
this.tableData = data.result;
|
this.$refs.dialogPayChannel.doLayout();
|
},
|
closeMenuBox() {
|
if (this.imagePoint != null) {
|
sgworld.Creator.DeleteObject(this.imagePoint);
|
this.imagePoint = null;
|
}
|
sgworld.Creator.SimpleGraphic.clear();
|
this.$store.state.mapPopBoolean = false;
|
this.$store.state.mapPopBoxFlag = null;
|
},
|
},
|
created() {
|
this.setTableAll();
|
},
|
mounted() {
|
this.$bus.$on('changeMapMenuTop', (res) => {
|
if (res == 'true') {
|
this.setTableAll();
|
}
|
});
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.menuPop {
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
border: 1px solid gray;
|
float: left;
|
.leftBox {
|
width: 20%;
|
height: 100%;
|
overflow: auto;
|
float: left;
|
border-right: 1px solid gray;
|
li {
|
color: white;
|
line-height: 20px;
|
border-bottom: 1px solid gray;
|
padding: 5px;
|
background: rgba(255, 255, 255, 0.2);
|
}
|
li:hover {
|
color: #409eff;
|
background: rgba(128, 128, 128, 0.2);
|
}
|
}
|
|
.rightBox {
|
width: calc(80% - 1px);
|
height: 100%;
|
float: left;
|
.rightTitle {
|
padding: 5px;
|
color: white;
|
width: 100%;
|
}
|
.tableBox {
|
height: 327px;
|
}
|
.rightPage {
|
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;
|
color: white;
|
}
|
}
|
/deep/ .el-table {
|
background-color: transparent;
|
|
th,
|
td {
|
background-color: transparent;
|
}
|
.el-table__expanded-cell {
|
background-color: transparent !important;
|
}
|
|
// 表头背景色
|
th.el-table__cell {
|
background-color: #303030;
|
color: #fff;
|
}
|
tr > td {
|
background-color: #303030;
|
color: #fff;
|
}
|
|
// 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;
|
}
|
}
|
}
|
</style>
|
<style lang="less"></style>
|
<style scoped lang="less"></style>
|
