<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 class="el-icon-d-arrow-right"></i></el-link>
|
<br />
|
<el-link
|
@click="setTransLeft"
|
:underline="false"
|
><i 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 leftBox">
|
<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="small"
|
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="small"
|
@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, 50, 100]"
|
: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,
|
// "管道空间分析"
|
// );
|
var val = Cesium.Cartesian3.fromDegrees(
|
res[0],
|
res[1]
|
);
|
var point = Viewer.entities.add({
|
position: val,
|
billboard: {
|
// 图像地址，URI或Canvas的属性
|
image: SmartEarthRootUrl + "Workers/image/mark.png",
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
// 大小是否以米为单位
|
sizeInMeters: false,
|
// 相对于坐标的垂直位置
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
// 相对于坐标的水平位置
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
// 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
|
scale: 1.0,
|
// 是否显示
|
show: true,
|
},
|
});
|
point.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
|
this.$store.state.pipelineEntity.push(point);
|
sgworld.Navigate.flyToObj(point);
|
},
|
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;
|
}
|
}
|
|
.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;
|
}
|
|
.country-group {
|
display: flex;
|
justify-content: center;
|
|
.country-group-item {
|
margin: 4px 0;
|
}
|
}
|
}
|
</style>
|
