<template>
|
<div class="pipeLineBox">
|
<div class="headerBox">
|
<div class="elFrom">
|
<el-form
|
ref="form"
|
:model="ruleFrom"
|
label-width="120px"
|
>
|
<el-form-item label="管道中心线">
|
<el-select
|
@change="selectChange"
|
v-model="ruleFrom.value1"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in options1"
|
:key="item.gid"
|
:label="item.pipeName"
|
:value="item.pipeName"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="选取管道">
|
<el-select
|
@change="selectChange1"
|
v-model="ruleFrom.value2"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in options2"
|
:key="item.gid"
|
:label="item.segName"
|
:value="item.gid"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div style="display:flex">
|
<div class="transBox">
|
<label>基础数据图层</label>
|
<div class="checkBox">
|
<ul>
|
<li
|
@click="checkLeft(item)"
|
:class="{checkhover:checkedLeftflag == item.id}"
|
v-for='(item,index) in cities'
|
:label="item.label"
|
:key="item.id"
|
>{{item.label}}</li>
|
</ul>
|
</div>
|
</div>
|
<div class="transInfo">
|
<div>
|
<el-link
|
@click="setTransRight"
|
:underline="false"
|
><i
|
style="color:white"
|
class="el-icon-d-arrow-right"
|
></i></el-link>
|
<br />
|
<el-link
|
@click="setTransLeft"
|
:underline="false"
|
><i
|
style="color:white"
|
class="el-icon-d-arrow-left"
|
></i></el-link>
|
</div>
|
</div>
|
<div class="transBox">
|
<label>分析图层</label>
|
<div class="checkBox">
|
<ul>
|
<li
|
@click="checkRight(item)"
|
:class="{checkhover:checkedRightflag == item.id}"
|
v-for='(item,index) in citiyData'
|
:label="item.label"
|
:key="item.id"
|
>{{item.label}}</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div class="sureButton">
|
|
<div class="suerBox">
|
<el-button
|
@click="setAnalysis"
|
size="small"
|
>分析</el-button>
|
<el-button
|
@click="clearAnalysis"
|
size="small"
|
>取消</el-button>
|
</div>
|
|
</div>
|
</div>
|
<div class="contentBox">
|
<div class="contentRight">
|
<ul>
|
<li
|
@click="setlistChange(item)"
|
:class="{checkhover:listflag == item.id}"
|
v-for="item in listData"
|
>{{item.label}}</li>
|
</ul>
|
</div>
|
|
<div class="contentLeft">
|
<div style="float:right;padding:2px">
|
<el-button
|
@click="showDialogVivable()"
|
size="mini"
|
type="info"
|
>下载</el-button>
|
<!-- <el-button
|
size="mini"
|
type="info"
|
>整表下载</el-button> -->
|
<!-- <el-button
|
size="mini"
|
type="info"
|
>删除</el-button> -->
|
</div>
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
height="70%"
|
>
|
<el-table-column
|
align="center"
|
type="index"
|
:label="$t('operatManage.ELM.index')"
|
width="70px"
|
/>
|
<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
|
prop="acrossName"
|
label="被穿越地物名称"
|
width="180"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="acrossLength"
|
label="穿越长度"
|
width="100"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="pipeName"
|
label="管线名称"
|
width="180"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="segName"
|
label="管段名称"
|
width="180"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="remarks"
|
label="备注"
|
width="100"
|
>
|
</el-table-column>
|
</el-table>
|
<div
|
class="pagination_box"
|
style="margin-top:10px"
|
>
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pageData.pageIndex"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="pageData.pageCount"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
|
<el-dialog
|
:title="$t('common.passworld')"
|
:visible.sync="dialogVisible"
|
width="30%"
|
:before-close="handleClose"
|
:modal="false"
|
:show-close="false"
|
>
|
<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
|
type="info"
|
size="small"
|
@click="download "
|
>{{$t('common.confirm')}}</el-button>
|
<el-button
|
type="info"
|
size="small"
|
@click="closeDialog "
|
>{{$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 WKT from 'terraformer-wkt-parser'
|
import { getToken } from "@/utils/auth";
|
import { pipelines_selectSegNames, pipeline_selectPipeAnalysis, sign_getPublicKey, pipeline_downloadReq } from '../../api/api.js';
|
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 {
|
rules: {
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { validator: passwordValidator, trigger: 'blur' }],
|
repassword: [
|
{ required: true, message: '请输入确认密码', trigger: 'blur' },
|
{ validator: repasswordValidator, trigger: 'blur' },
|
],
|
},
|
dialogVisible: false,
|
codeForm: {
|
repassword: '', password: ''
|
},
|
ruleFrom: {
|
value1: '',
|
value2: ''
|
},
|
options1: [],
|
options2: [],
|
checkList: [],
|
checkData: [{
|
id: 1,
|
label: '铁路(dlg_25w_lrrl)',
|
tabs: 'dlg_25w_lrrl',
|
tabdesc: '铁路',
|
table: 'bd.dlg_25w_lrrl',
|
checked: false,
|
}, {
|
id: 2,
|
label: '公路(dlg_25w_lrdl)',
|
tabs: 'dlg_25w_lrdl',
|
tabdesc: '公路',
|
table: 'bd.dlg_25w_lrdl',
|
checked: false,
|
}, {
|
id: 3,
|
label: '水系线(dlg_25w_hydl)',
|
tabs: 'dlg_25w_hydl',
|
tabdesc: '水系线',
|
table: 'bd.dlg_25w_hydl',
|
checked: false,
|
}, {
|
id: 4,
|
label: '水系面(dlg_25w_hyda)',
|
tabs: 'dlg_25w_hyda',
|
tabdesc: '水系面',
|
table: 'bd.dlg_25w_hyda',
|
checked: false,
|
}],
|
citiyData: [],
|
cities: [],
|
checkedCities: [],
|
tableData: [],
|
leftChecked: null,
|
rightChecked: null,
|
checkedLeftflag: null,
|
checkedRightflag: null,
|
analyGid: null,
|
listData: [],
|
listflag: null,
|
featureData: [],
|
pageData: {
|
pageIndex: 1,
|
pageSize: 10,
|
pageCount: 0
|
},
|
multipleSelection: [],
|
featurTable: null,
|
featureLayer: [],
|
}
|
},
|
methods: {
|
spaceLocation(index, row) {
|
var wkt = row.wkt;
|
// var wkt = 'POINT(115.18478138905392 40.57482771162533)'
|
// var wkt = 'MULTIPOINT(115.93358953162945 40.479862914876286,115.92324938088053 40.47513850651151)'
|
//var wkt = 'LINESTRING(116.29963795744581 40.412471126263874,116.30084981880705 40.411513388032716)'
|
// var wkt = 'MULTILINESTRING((115.87321225794265 40.452276576555455,115.87744445061348 40.45421026272125),(115.87918147829747 40.45500390957606,115.87983275512077 40.455301477546435))'
|
var geojson = WKT.parse(wkt);
|
|
this.claerAll();
|
switch (geojson.type) {
|
case 'Point':
|
this.setShowImagePoint(geojson.coordinates)
|
break;
|
case 'MultiPoint':
|
for (var i in geojson.coordinates) {
|
this.setShowImagePoint(geojson.coordinates[i])
|
}
|
break;
|
case 'LineString':
|
this.setShowImageLine(geojson.coordinates)
|
break;
|
case 'MultiLineString':
|
for (var i in geojson.coordinates) {
|
this.setShowImageLine(geojson.coordinates[i])
|
}
|
|
break;
|
}
|
},
|
setShowImagePoint(res) {
|
var obj = { X: res[0], Y: res[1], Altitude: 1000 }
|
var imageLabel = sgworld.Creator.CreateImageLabel(obj, SmartEarthRootUrl + "Workers/image/mark.png", {}, 0, "管道空间分析");
|
this.$store.state.pipelineEntity.push(imageLabel.item)
|
sgworld.Navigate.flyToObj(imageLabel.item);
|
},
|
setShowImageLine(res) {
|
var obj = [];
|
for (var i in res) {
|
obj.push({ x: res[i][0], y: res[i][1], z: 1000 })
|
}
|
var line = sgworld.Creator.createPolyline(obj, "#ffff00", 1, 0, "管道空间分析");
|
this.$store.state.pipelineEntity.push(line.item)
|
sgworld.Navigate.flyToObj(line.item);
|
},
|
claerAll() {
|
for (var i in this.$store.state.pipelineEntity) {
|
var item = this.$store.state.pipelineEntity[i]
|
sgworld.Viewer.entities.remove(item);
|
}
|
this.$store.state.pipelineEntity = [];
|
},
|
async signGetPublicKey() {
|
const res = await sign_getPublicKey();
|
if (res && res.code == 200) {
|
window.encrypt = new JSEncrypt();
|
encrypt.setPublicKey(res.result);
|
}
|
},
|
async download() {
|
|
var std = [];
|
for (var i in this.listData) {
|
|
std.push(this.listData[i].table)
|
}
|
var obj = {
|
pwd: encrypt.encrypt(this.codeForm.password),
|
gid: this.analyGid,
|
tabs: std
|
};
|
const data = await pipeline_downloadReq(obj);
|
if (data.code != 200) {
|
|
this.$message.error("下载请求失败");
|
this.closeDialog();
|
|
return;
|
}
|
this.closeDialog();
|
|
var token = getToken();
|
var url =
|
BASE_URL +
|
"/pipeline/downloadFile?token=" +
|
token +
|
"&guid=" +
|
data.result +
|
"&pwd=" +
|
encodeURIComponent(obj.pwd);
|
|
$("#Iframe1").attr("src", url).click();
|
// this.$store.state.loading = false;
|
},
|
showDialogVivable() {
|
if (this.listData.length == 0) return
|
this.dialogVisible = true
|
},
|
handleClose() {
|
this.$confirm('确认关闭？')
|
.then(_ => {
|
this.closeDialog()
|
})
|
.catch(_ => { });
|
},
|
closeDialog() {
|
this.dialogVisible = false
|
this.codeForm = {
|
repassword: '', password: ''
|
}
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
setTransLeft() {
|
if (this.rightChecked == null) return
|
this.cities.push(this.rightChecked)
|
this.citiyData.forEach((value, index, array) => {
|
if (value.label == this.rightChecked.label) {
|
array.splice(index, 1)
|
}
|
});
|
this.checkedLeftflag = null;
|
this.rightChecked = null
|
|
},
|
setTransRight() {
|
if (this.leftChecked == null) return
|
this.citiyData.push(this.leftChecked)
|
this.cities.forEach((value, index, array) => {
|
if (value.label == this.leftChecked.label) {
|
array.splice(index, 1)
|
}
|
});
|
this.checkedRightflag = null;
|
this.leftChecked = null
|
},
|
checkLeft(res) {
|
this.checkedLeftflag = res.id;
|
this.leftChecked = res;
|
},
|
checkRight(res) {
|
this.checkedRightflag = res.id;
|
this.rightChecked = res;
|
},
|
selectChange(res) {
|
this.changeSelect2(res)
|
},
|
selectChange1(res) {
|
|
this.analyGid = res;
|
},
|
changeSelect2(res) {
|
this.options2 = [];
|
var value = this.featureLayer;
|
for (var i in value) {
|
if (value[i].pipeName == res) {
|
this.options2.push(value[i])
|
}
|
}
|
this.ruleFrom.value2 = this.options2[0].segName;
|
this.analyGid = this.options2[0].gid;
|
},
|
clearAnalysis() {
|
this.tableData = [];
|
this.listData = [];
|
|
this.cities = [{
|
id: 1,
|
label: '铁路(dlg_25w_lrrl)',
|
tabs: 'dlg_25w_lrrl',
|
tabdesc: '铁路',
|
table: 'bd.dlg_25w_lrrl',
|
checked: false,
|
}, {
|
id: 2,
|
label: '公路(dlg_25w_lrdl)',
|
tabs: 'dlg_25w_lrdl',
|
tabdesc: '公路',
|
table: 'bd.dlg_25w_lrdl',
|
checked: false,
|
}, {
|
id: 3,
|
label: '水系线(dlg_25w_hydl)',
|
tabs: 'dlg_25w_hydl',
|
tabdesc: '水系线',
|
table: 'bd.dlg_25w_hydl',
|
checked: false,
|
}, {
|
id: 4,
|
label: '水系面(dlg_25w_hyda)',
|
tabs: 'dlg_25w_hyda',
|
tabdesc: '水系面',
|
table: 'bd.dlg_25w_hyda',
|
checked: false,
|
}];
|
this.citiyData = [];
|
this.getAllData();
|
this.listflag = null;
|
this.checkedRightflag = null;
|
this.checkedLeftflag = null;
|
this.pageData = {
|
pageIndex: 1,
|
pageSize: 10,
|
pageCount: 0
|
}
|
},
|
|
async setAnalysis() {
|
if (this.citiyData.length == 0) {
|
this.$message.error('请选择要分析的图层!');
|
}
|
var std = [];
|
var listTable = [];
|
for (var i in this.citiyData) {
|
std.push(this.citiyData[i].table)
|
listTable.push(this.citiyData[i])
|
}
|
this.listData = listTable;
|
this.listflag = this.listData[0].id
|
var obj = {
|
gid: this.analyGid,
|
tabs: std
|
}
|
const data = await pipeline_selectPipeAnalysis(obj);
|
if (data.code != 200) {
|
this.$message.error('列表调用失败');
|
}
|
this.featureData = data.result;
|
this.featurTable = this.featureData[this.listData[0].table]
|
this.pageData.pageCount = this.featurTable.length;
|
this.pageData.pageIndex = 1;
|
this.pageData.pageSize = 10;
|
this.changePageData();
|
},
|
setlistChange(res) {
|
this.listflag = res.id
|
this.featurTable = this.featureData[res.table]
|
this.pageData.pageCount = this.featurTable.length;
|
this.pageData.pageIndex = 1;
|
this.pageData.pageSize = 10;
|
this.changePageData();
|
},
|
changePageData() {
|
var start = (this.pageData.pageIndex - 1) * this.pageData.pageSize;
|
var end = start + this.pageData.pageSize;
|
this.tableData = this.featurTable.slice(start, end);
|
},
|
handleSizeChange(val) {
|
this.pageData.pageIndex = 1;
|
this.pageData.pageSize = val;
|
this.changePageData();
|
},
|
handleCurrentChange(val) {
|
this.pageData.pageIndex = val;
|
this.changePageData();
|
},
|
async getAllData() {
|
|
const data = await pipelines_selectSegNames();
|
if (data.code != 200) {
|
this.$message.error('列表调用失败');
|
}
|
var std = [];
|
var str = [];
|
var result = data.result;
|
for (var i in result) {
|
if (std.indexOf(result[i].pipeName) == -1) {
|
std.push(result[i].pipeName);
|
str.push(result[i])
|
}
|
}
|
this.featureLayer = data.result;
|
this.options1 = str;
|
this.ruleFrom.value1 = this.options1[0].pipeName;
|
this.changeSelect2(this.ruleFrom.value1)
|
},
|
},
|
mounted() {
|
|
this.cities = [{
|
id: 1,
|
label: '铁路(dlg_25w_lrrl)',
|
tabs: 'dlg_25w_lrrl',
|
tabdesc: '铁路',
|
table: 'bd.dlg_25w_lrrl',
|
checked: false,
|
}, {
|
id: 2,
|
label: '公路(dlg_25w_lrdl)',
|
tabs: 'dlg_25w_lrdl',
|
tabdesc: '公路',
|
table: 'bd.dlg_25w_lrdl',
|
checked: false,
|
}, {
|
id: 3,
|
label: '水系线(dlg_25w_hydl)',
|
tabs: 'dlg_25w_hydl',
|
tabdesc: '水系线',
|
table: 'bd.dlg_25w_hydl',
|
checked: false,
|
}, {
|
id: 4,
|
label: '水系面(dlg_25w_hyda)',
|
tabs: 'dlg_25w_hyda',
|
tabdesc: '水系面',
|
table: 'bd.dlg_25w_hyda',
|
checked: false,
|
}];
|
this.getAllData();
|
this.signGetPublicKey();
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.pipeLineBox {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
padding: 0;
|
margin: 0;
|
.headerBox {
|
width: 100%;
|
height: 130px;
|
display: flex;
|
justify-content: space-around;
|
.elFrom {
|
width: 300px;
|
height: 130%;
|
}
|
.transBox {
|
width: 200px;
|
height: 100%;
|
.checkBox {
|
width: 100%;
|
height: 90px;
|
border: 1px solid white;
|
border-radius: 5px;
|
overflow-y: auto;
|
}
|
|
label {
|
color: white;
|
}
|
}
|
|
.transInfo {
|
padding: 5px;
|
display: flex;
|
align-items: center;
|
}
|
.sureButton {
|
display: flex;
|
align-items: center;
|
height: 100%;
|
.suerBox {
|
width: 100%;
|
height: 40px;
|
}
|
}
|
}
|
.contentBox {
|
width: 100%;
|
height: 266px;
|
|
display: flex;
|
.contentRight {
|
width: 30%;
|
height: 100%;
|
border: 1px solid white;
|
overflow: auto;
|
}
|
.contentLeft {
|
width: 70%;
|
height: 100%;
|
}
|
}
|
.checkhover {
|
color: #409eff;
|
}
|
/deep/ .el-select .el-input__inner {
|
border-color: #fff !important;
|
}
|
/deep/.el-button {
|
background: #303030;
|
color: white;
|
}
|
/deep/.el-form-item__label {
|
color: white;
|
}
|
// 设置输入框的背景色、字体颜色、边框属性设置；
|
/deep/.el-input__inner {
|
background-color: transparent !important ;
|
color: #fff;
|
border: 1px solid;
|
}
|
/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: 10px;
|
/*滚动条高度*/
|
}
|
/*定义滚动条轨道 内阴影+圆角*/
|
.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;
|
}
|
}
|
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
|
color: #fff;
|
}
|
/deep/.el-checkbox__label {
|
float: right;
|
}
|
.country-group {
|
display: flex;
|
justify-content: center;
|
|
.country-group-item {
|
margin: 4px 0;
|
}
|
}
|
.pagination_box {
|
margin-top: 20px;
|
/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;
|
}
|
}
|
/deep/ .el-dialog {
|
background: #303030;
|
}
|
/deep/.el-range-editor.is-active,
|
.el-range-editor.is-active:hover,
|
.el-select .el-input.is-focus .el-input__inner {
|
border: 1px solid;
|
}
|
/deep/.el-dialog__title {
|
color: white;
|
}
|
}
|
</style>
|
