<template>
|
<Popup
|
ref="pop"
|
:title="title"
|
:shadow="false"
|
:left="left"
|
width="390px"
|
@close="close(true)"
|
showBtn="true"
|
@yes="addData"
|
@cancel="close(false)"
|
>
|
<el-form ref="form" label-width="105px">
|
<div v-if="!list.length" style="text-align: center; margin-bottom: 20px">
|
<el-upload
|
action=""
|
:auto-upload="false"
|
:show-file-list="false"
|
:on-change="importData"
|
accept=".json"
|
>
|
<el-button type="primary">导入图层</el-button>
|
</el-upload>
|
</div>
|
<div v-else>
|
<!-- <el-form-item label="最小可视:">
|
<el-input-number
|
:min="0"
|
v-model="near"
|
@change="edit('near')"
|
placeholder="可选"
|
></el-input-number>
|
</el-form-item> -->
|
<el-form-item label="最远可视:">
|
<el-input-number
|
:min="0"
|
v-model="far"
|
@change="edit('far')"
|
placeholder="可选"
|
></el-input-number>
|
</el-form-item>
|
<el-collapse v-model="active" accordion>
|
<el-collapse-item
|
v-for="(item, index) in list"
|
:key="index"
|
:title="item.name"
|
:name="index"
|
>
|
<el-form-item label="半径:">
|
<el-input v-model="item.children[0].PSIZE"></el-input>
|
</el-form-item>
|
<el-form-item label="颜色:">
|
<el-color-picker
|
v-model="item.children[0].color"
|
></el-color-picker>
|
</el-form-item>
|
<el-form-item label="高度:">
|
<el-input-number
|
v-model="item.children[0].height"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="item.children[1]" label="模型:">
|
<el-input v-model="item.children[1].modelurl"></el-input>
|
</el-form-item>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</el-form>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup";
|
export default {
|
name: "ImportPolylineVolume",
|
components: {
|
Popup,
|
},
|
data() {
|
return {
|
title: "导入管线数据",
|
left: "calc(100% - 420px)",
|
active: 0,
|
near: 0,
|
far: 1000,
|
list: [],
|
};
|
},
|
mounted() {},
|
methods: {
|
// 关闭弹窗
|
close(isCloseBtn) {
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
!isCloseBtn && this.$refs.pop.close();
|
},
|
importData(file) {
|
let reader = new FileReader();
|
reader.onload = (e) => {
|
let data = JSON.parse(e.target.result);
|
this.list = data.children;
|
};
|
reader.readAsText(file.raw);
|
},
|
// 打开弹窗
|
open() {
|
this.close(true);
|
this.$refs.pop.open();
|
},
|
// 添加数据
|
addData() {
|
let data = {
|
id: sgworld.Core.getuid(),
|
name: "管线",
|
children: [],
|
};
|
|
this.list.forEach((item) => {
|
let parentNode = {
|
id: sgworld.Core.getuid(),
|
name: item.name,
|
children: [],
|
};
|
let polylineNode, modelNode;
|
if (item.children[0]) {
|
polylineNode = {
|
id: sgworld.Core.getuid(),
|
name: item.children[0].name,
|
sourceType: "geojson",
|
class: "polylineVolume",
|
urls: item.children[0].url,
|
color: item.children[0].color,
|
near: 0,
|
far: this.far,
|
connect: true,
|
radius: item.children[0].PSIZE,
|
height: item.children[0].height,
|
radiusScale: 0.001,
|
};
|
parentNode.children.push(polylineNode);
|
}
|
if (item.children[1]) {
|
modelNode = {
|
id: sgworld.Core.getuid(),
|
name: item.children[1].name,
|
sourceType: "geojson",
|
class: "model",
|
urls: item.children[1].url,
|
model: item.children[1].modelurl,
|
pointHeight: item.children[1].height,
|
};
|
parentNode.children.push(modelNode);
|
}
|
data.children.push(parentNode);
|
});
|
if (data.children.length) {
|
this.$emit("success", data);
|
}
|
|
this.close(false, true);
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.el-form {
|
margin-top: 20px;
|
margin-right: 10px;
|
width: 380px;
|
|
.el-collapse {
|
border-top: 1px solid rgba(32, 160, 255, 0.6);
|
border-bottom: unset;
|
width: 90%;
|
margin: 0 auto;
|
|
/deep/ .el-collapse-item__header {
|
border-bottom: 1px solid rgba(32, 160, 255, 0.6);
|
background-color: unset;
|
color: #fff;
|
}
|
|
/deep/ .el-collapse-item__wrap {
|
background-color: unset;
|
border-bottom: 1px solid rgba(32, 160, 255, 0.6);
|
|
.el-collapse-item__content {
|
color: #fff;
|
padding: 10px 0;
|
}
|
}
|
}
|
}
|
</style>
|
