最新
This commit is contained in:
262
src/renderer/components/dialog/ModelSet.vue
Normal file
262
src/renderer/components/dialog/ModelSet.vue
Normal file
@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div class="ModelSet">
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<!-- <span></span> -->
|
||||
<span class="label">{{ title }}</span>
|
||||
<div class="close-box" @click="close">
|
||||
<span class="close"></span>
|
||||
<i>x</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxBody">
|
||||
<el-form :label-position="labelPosition" label-width="120px" :model="form">
|
||||
<!-- label="请输入文本信息" -->
|
||||
<el-form-item label="添加方式">
|
||||
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;">
|
||||
<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 v-if="form.type != '点'" label="间距">
|
||||
<el-input type="number" placeholder="请输入间距" v-model:number="form.spacing" @input="handleInput"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="display: flex;justify-content: flex-end;">
|
||||
<el-button type="primary" @click="confirm">确认</el-button>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ModelSet",
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "top",
|
||||
form: {
|
||||
type: "",
|
||||
spacing: null
|
||||
},
|
||||
title: "",
|
||||
options: [{
|
||||
value: '点',
|
||||
label: '点'
|
||||
}, {
|
||||
value: '线',
|
||||
label: '线'
|
||||
}, {
|
||||
value: '面',
|
||||
label: '面'
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleInput(value) {
|
||||
let filtered = value
|
||||
.replace(/[^\d]/g, '') // 只保留数字
|
||||
.replace(/^0+/, '') // 去除前导零
|
||||
|
||||
if (!filtered) {
|
||||
this.form.spacing = 1;
|
||||
} else {
|
||||
// 将过滤后的字符串转为数字,与1000比较取较小值
|
||||
const num = parseInt(filtered, 10);
|
||||
this.form.spacing = num > 1000 ? 1000 : num;
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.$changeComponentShow(".ModelSet", false);
|
||||
},
|
||||
cancel() {
|
||||
this.$changeComponentShow(".ModelSet", false);
|
||||
this.$sendChanel("ModelSetContent", null);
|
||||
},
|
||||
isOnlyWhitespace(str) {
|
||||
// 使用正则表达式匹配一个或多个空白字符
|
||||
const regex = /^\s+$/;
|
||||
return regex.test(str);
|
||||
},
|
||||
confirm() {
|
||||
//this.form.text去除空格
|
||||
// this.form.text = this.form.text.replace(/\s+/g, "");
|
||||
let bool = this.isOnlyWhitespace(this.form.number)
|
||||
if (this.form.number <= 0 || bool) {
|
||||
this.$message.warning("请输入内容");
|
||||
return;
|
||||
}
|
||||
if (this.form.type == '点' ) {
|
||||
this.form.spacing = null
|
||||
}
|
||||
this.$sendChanel("ModelSetContent", this.form);
|
||||
this.$changeComponentShow(".ModelSet", false);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$recvChanel("ModelSetTitle", (text) => {
|
||||
this.title = text;
|
||||
console.log(localStorage.getItem("ModelSetContent"));
|
||||
this.form = JSON.parse(localStorage.getItem("ModelSetContent")) || {
|
||||
type: "",
|
||||
spacing: null
|
||||
};
|
||||
});
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ModelSet {
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.el-input__inner {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
input::-webkit-inner-spin-button {
|
||||
appearance: none !important;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button {
|
||||
appearance: none !important;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
// 解决光标上移
|
||||
.el-input__inner {
|
||||
line-height: 1px !important;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 20vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--color-sdk-auxiliary-public);
|
||||
font-size: 14px;
|
||||
// z-index: 999999;
|
||||
background: linear-gradient(0deg, var(--color-sdk-bg-gradual)),
|
||||
rgba(0, 0, 0, 0.6);
|
||||
border: 1.5px solid;
|
||||
border-image: linear-gradient(to bottom, var(--color-sdk-gradual)) 1;
|
||||
text-align: left;
|
||||
font-family: "sy-boldface";
|
||||
|
||||
.boxHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
line-height: 46px;
|
||||
padding: 5px 16px 5px 16px;
|
||||
height: 46px;
|
||||
|
||||
.label {
|
||||
font-family: "Ali-mother-counts-bold";
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
text-shadow: 0px 0px 9px rgb(20 118 255);
|
||||
}
|
||||
|
||||
.close-box {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
border-radius: 0 0 0 90%;
|
||||
overflow: hidden;
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(var(--color-sdk-base-rgb), 1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody {
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
max-height: 500px;
|
||||
// overflow: hidden; /* 禁用滚动条 */
|
||||
resize: none;
|
||||
/* 禁止用户手动调整文本框的尺寸 */
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
}
|
||||
|
||||
.el-textarea__inner::scrollbar-width {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
background: rgba(var(--color-sdk-base-rgb), 0.2);
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
color: #ffffff;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.el-button:hover {
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -3,7 +3,7 @@
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<span></span>
|
||||
<span class="boxHeaderTitle"></span>
|
||||
<span class="boxHeaderTitle">军标选择</span>
|
||||
<span class="closeBox">
|
||||
<span @click="close">✕</span>
|
||||
</span>
|
||||
@ -255,7 +255,6 @@ export default {
|
||||
this.selectedGraphLabelType = "";
|
||||
// if (this.graphLabelTypeList.length !== 0) {
|
||||
this.getGraphLabelTypeList();
|
||||
this.$refs.myTree.setCurrentKey(this.graphLabelTypeList[0].type_id);
|
||||
// } else {
|
||||
// }
|
||||
},
|
||||
@ -263,7 +262,7 @@ export default {
|
||||
handleClick() { },
|
||||
selectImg({ key, url, name }) {
|
||||
// 军标库图层
|
||||
let jun_biao_id = "二维军标图层";
|
||||
// let jun_biao_id = "二维军标图层";
|
||||
//jun_biao_id: "67bee03d6370434d7e98bcda940e67e7"
|
||||
// name: "a常用new_37 (23)"
|
||||
// p_id: "8277e0910d750195b448797616e091ad"
|
||||
@ -343,7 +342,9 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.el-tree-node:focus>.el-tree-node__content{
|
||||
background-color:transparent;
|
||||
}
|
||||
.box {
|
||||
// width: 30vw;
|
||||
// height: 23vw;
|
||||
@ -389,9 +390,11 @@ export default {
|
||||
display: inline-block;
|
||||
width: 230px;
|
||||
height: 34px;
|
||||
background: url('../../assets/images/junbiaoTitle.png');
|
||||
background: url('../../assets/images/titlebg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
i {
|
||||
|
@ -120,8 +120,8 @@ export default {
|
||||
handleClick() {
|
||||
},
|
||||
selectImg({ key, url, name, glbUrl }) {
|
||||
let jun_biao_id = "三维军标图层"
|
||||
console.log('glbUrlglbUrlglbUrl', glbUrl);
|
||||
// let jun_biao_id = "三维军标图层"
|
||||
// console.log('glbUrlglbUrlglbUrl', glbUrl);
|
||||
//jun_biao_id: "67bee03d6370434d7e98bcda940e67e7"
|
||||
// name: "a常用new_37 (23)"
|
||||
// p_id: "8277e0910d750195b448797616e091ad"
|
||||
@ -169,7 +169,7 @@ export default {
|
||||
if ([0, 200].includes(res.code)) {
|
||||
// cusRenderNode(DbOption)
|
||||
// DbOption.p_id
|
||||
cusAddNodes(this.treeObj,DbOption.p_id, [node])
|
||||
cusAddNodes(this.treeObj, DbOption.p_id, [node])
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<span></span>
|
||||
<span class="boxHeaderTitle"></span>
|
||||
<span class="boxHeaderTitle">模型选择</span>
|
||||
<span>
|
||||
<i class="el-icon-close" @click="close"></i>
|
||||
</span>
|
||||
@ -22,7 +22,7 @@
|
||||
<template v-if="searchRes.length">
|
||||
<div class="el-collapse-item__content">
|
||||
<template v-for="model in searchRes">
|
||||
<div class="itemBox" @click="selectModel(model)">
|
||||
<div class="itemBox" @click="editModel(model)">
|
||||
<div class="imgbox">
|
||||
<img :src="model.poster_url" alt=""></img>
|
||||
</div>
|
||||
@ -36,8 +36,8 @@
|
||||
<template v-for="item in modelTypeList">
|
||||
<el-collapse-item :title="item.type_name" :name="item.type_id">
|
||||
<template v-for="model in item.children">
|
||||
<!-- -->
|
||||
<div class="itemBox" @click="editModel(model)" @dblclick="selectModel(model)">
|
||||
<!-- @dblclick="selectModel(model)" -->
|
||||
<div class="itemBox" @click="editModel(model)" >
|
||||
<div class="imgbox" :class="{ selectModel: editModelId == model.model_id }">
|
||||
<el-image :src="model.poster_url" alt=""></el-image>
|
||||
<!-- + '?' + Math.random() -->
|
||||
@ -92,37 +92,36 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
modelSet() {
|
||||
if (this.editModelData) {
|
||||
let url = this.editModelData.model_url;
|
||||
let source_id = this.$md5(new Date().getTime() + this.editModelData.model_name);
|
||||
console.log(this.editModelData, url, source_id);
|
||||
let models = new YJ.Obj.BatchModel(window.Earth1, {
|
||||
id: source_id,
|
||||
url
|
||||
}, function (data) {
|
||||
console.log('data,url,source_id', data, url, source_id);
|
||||
// this.renderModel(data, this.editModelData);
|
||||
})
|
||||
} else {
|
||||
|
||||
}
|
||||
this.close();
|
||||
this.$sendChanel("ModelSetTitle", "默认模型参数设置");
|
||||
this.$changeComponentShow(".ModelSetBox", true);
|
||||
this.$recvChanel("ModelSetContent", (data) => {
|
||||
if (data) {
|
||||
localStorage.setItem("ModelSetContent", JSON.stringify(data));
|
||||
}
|
||||
});
|
||||
},
|
||||
async renderModel(data, model) {
|
||||
renderModel(that, data, model) {
|
||||
// let p_id = '模型图层'
|
||||
let selectedNode = getSelectedNode(this.treeObj);
|
||||
let p_id = selectedNode
|
||||
? nodeType[selectedNode.source_type].allowChildren
|
||||
? selectedNode.source_id
|
||||
: selectedNode.p_id
|
||||
: -1;
|
||||
? nodeType[selectedNode.source_type].allowChildren
|
||||
? selectedNode.source_id
|
||||
: selectedNode.p_id
|
||||
: -1;
|
||||
let z
|
||||
if (data.positions.length>0) {
|
||||
data.positions.forEach( async (position,index) => {
|
||||
let source_id = this.$md5(new Date().getTime() + model.model_name+index);
|
||||
if (data.type=="面") {
|
||||
z = data.rotate.z;
|
||||
}else if (data.type=="线") {
|
||||
if (data.positions.length >= 100) {
|
||||
that.$message.warning("添加模型数量过多,请减少数量后!");
|
||||
return;
|
||||
}
|
||||
if (data.positions.length > 0) {
|
||||
data.positions.forEach(async (position, index) => {
|
||||
let source_id = this.$md5(new Date().getTime() + model.model_name + index);
|
||||
if (data.type == "面") {
|
||||
z = data.rotate;
|
||||
} else if (data.type == "线") {
|
||||
z = data.rotate[index];
|
||||
} else if (data.type == "点") {
|
||||
z = 0
|
||||
}
|
||||
let DbOption = {
|
||||
source_id,
|
||||
@ -139,7 +138,7 @@ export default {
|
||||
url: model.model_url,
|
||||
maximumScale: 1,
|
||||
host: getIP(),
|
||||
rotate:{
|
||||
rotate: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z
|
||||
@ -163,8 +162,35 @@ export default {
|
||||
}
|
||||
},
|
||||
editModel(model) {
|
||||
this.editModelData = model;
|
||||
this.editModelId = model.model_id;
|
||||
let that = this
|
||||
let form = JSON.parse(localStorage.getItem("ModelSetContent"))
|
||||
if (form) {
|
||||
let url = model.model_url;
|
||||
let source_id = this.$md5(new Date().getTime() + model.model_name);
|
||||
let op = {}
|
||||
if (form.spacing) {
|
||||
op = {
|
||||
id: source_id,
|
||||
url,
|
||||
type: form.type,
|
||||
spacing: form.spacing
|
||||
}
|
||||
} else {
|
||||
op = {
|
||||
id: source_id,
|
||||
url,
|
||||
type: form.type,
|
||||
}
|
||||
}
|
||||
console.log('opopopopopopopopopopopopopop',op);
|
||||
|
||||
let models = new YJ.Obj.BatchModel(window.Earth1, op, function (data) {
|
||||
that.renderModel(that, data, model);
|
||||
})
|
||||
this.close();
|
||||
} else {
|
||||
this.modelSet()
|
||||
}
|
||||
},
|
||||
searchContent(val) {
|
||||
if (val) {
|
||||
@ -271,7 +297,7 @@ export default {
|
||||
this.allModels = [];
|
||||
this.modelTypeList = [];
|
||||
this.activeName = "";
|
||||
this.editModelData = null;
|
||||
// this.editModelData = null;
|
||||
this.editModelId = null;
|
||||
this.$changeComponentShow(".modelBox", false);
|
||||
},
|
||||
@ -323,9 +349,11 @@ export default {
|
||||
display: inline-block;
|
||||
width: 230px;
|
||||
height: 34px;
|
||||
background: url('../../assets/images/title.png');
|
||||
background: url('../../assets/images/titlebg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
i {
|
||||
|
450
src/renderer/components/dialog/modelg.vue
Normal file
450
src/renderer/components/dialog/modelg.vue
Normal file
@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div class="model666">
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<span></span>
|
||||
<span class="boxHeaderTitle">模型选择</span>
|
||||
<span>
|
||||
<i class="el-icon-close" @click="close"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="boxBody custom_scroll_bar">
|
||||
<div style="display: flex;justify-content: space-between;">
|
||||
<el-input size="small" suffix-icon="el-icon-search" placeholder="输入关键字进行过滤" @input="searchContent"
|
||||
v-model="filterText">
|
||||
</el-input>
|
||||
<!--<el-button type="primary" @click="searchContent('type')" size="small">搜类型</el-button>-->
|
||||
<!--<el-button type="primary" @click="searchContent('junbiao')" size="small">搜军标</el-button>-->
|
||||
</div>
|
||||
<template v-if="searchRes.length">
|
||||
<div class="el-collapse-item__content">
|
||||
<template v-for="model in searchRes">
|
||||
<div class="itemBox" @click="selectModel(model)">
|
||||
<div class="imgbox">
|
||||
<img :src="model.poster_url" alt=""></img>
|
||||
</div>
|
||||
<span>{{ model.model_name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-collapse v-model="activeName" accordion v-if="!filterText" @change="openModel">
|
||||
<template v-for="item in modelTypeList">
|
||||
<el-collapse-item :title="item.type_name" :name="item.type_id">
|
||||
<template v-for="model in item.children">
|
||||
<!-- -->
|
||||
<div class="itemBox" @click="selectModel(model)">
|
||||
<div class="imgbox" :class="{ selectModel: editModelId == model.model_id }">
|
||||
<el-image :src="model.poster_url" alt=""></el-image>
|
||||
<!-- + '?' + Math.random() -->
|
||||
</div>
|
||||
<span>{{ model.model_name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="!item.children || item.children.length == 0">
|
||||
<div style="height: 60px;visibility: hidden"></div>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
</template>
|
||||
</el-collapse>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getModelType } from "../../api/gisAPI";
|
||||
import {
|
||||
getSelectedNode,
|
||||
cusAddNodes,
|
||||
getNodeData,
|
||||
nodeType,
|
||||
} from "../Tree/treeNode";
|
||||
import { addSource } from "@/api/gisAPI";
|
||||
import { leftClick } from "../Tree/entityClick";
|
||||
import { getIP } from "../../utils";
|
||||
|
||||
export default {
|
||||
name: "model",
|
||||
data() {
|
||||
return {
|
||||
treeObj: null,
|
||||
activeName: "",
|
||||
filterText: "",
|
||||
modelTypeList: [],
|
||||
data: [],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
type: "",
|
||||
allModels: [],
|
||||
searchRes: [],
|
||||
arrModel: [],
|
||||
editModelData: null,
|
||||
editModelId: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
modelSet() {
|
||||
this.$sendChanel("ModelSetTitle", "默认模型参数设置");
|
||||
this.$changeComponentShow(".ModelSetBox", true);
|
||||
this.$recvChanel("ModelSetContent", (data) => {
|
||||
if (data) {
|
||||
localStorage.setItem("ModelSetContent", JSON.stringify(data));
|
||||
}
|
||||
});
|
||||
},
|
||||
renderModel(that, data, model) {
|
||||
let p_id = '模型图层'
|
||||
let z
|
||||
if (data.positions.length >= 100) {
|
||||
that.$message.warning("添加模型数量过多,请减少数量后!");
|
||||
return;
|
||||
}
|
||||
if (data.positions.length > 0) {
|
||||
data.positions.forEach(async (position, index) => {
|
||||
let source_id = this.$md5(new Date().getTime() + model.model_name + index);
|
||||
if (data.type == "面") {
|
||||
z = data.rotate;
|
||||
} else if (data.type == "线") {
|
||||
z = data.rotate[index];
|
||||
} else if (data.type == "点") {
|
||||
z = 0
|
||||
}
|
||||
let DbOption = {
|
||||
source_id,
|
||||
source_name: model.model_name + index,
|
||||
source_type: "model",
|
||||
p_id,
|
||||
};
|
||||
let option = {
|
||||
id: source_id,
|
||||
position,
|
||||
name: model.model_name + index,
|
||||
show: true,
|
||||
scale: 1,
|
||||
url: model.model_url,
|
||||
maximumScale: 1,
|
||||
host: getIP(),
|
||||
rotate: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z
|
||||
}
|
||||
};
|
||||
let Model = await new YJ.Obj.Model(window.Earth1, option);
|
||||
window._entityMap.set(option.id, Model);
|
||||
Model.onClick = () => {
|
||||
leftClick(node);
|
||||
};
|
||||
let detailOption = JSON.parse(JSON.stringify(Model.options));
|
||||
detailOption.url = model.model_id + ".glb";
|
||||
let node = getNodeData(DbOption, detailOption);
|
||||
addSource(node).then((res) => {
|
||||
if ([0, 200].includes(res.code)) {
|
||||
// cusRenderNode(DbOption) DbOption.p_id
|
||||
cusAddNodes(this.treeObj, p_id, [node]);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
editModel(model) {
|
||||
let that = this
|
||||
let form = JSON.parse(localStorage.getItem("ModelSetContent"))
|
||||
if (form) {
|
||||
let url = model.model_url;
|
||||
let source_id = this.$md5(new Date().getTime() + model.model_name);
|
||||
let op = {}
|
||||
if (form.spacing) {
|
||||
op = {
|
||||
id: source_id,
|
||||
url,
|
||||
type: form.type,
|
||||
spacing: form.spacing
|
||||
}
|
||||
} else {
|
||||
op = {
|
||||
id: source_id,
|
||||
url,
|
||||
type: form.type,
|
||||
}
|
||||
}
|
||||
console.log('opopopopopopopopopopopopopop',op);
|
||||
|
||||
let models = new YJ.Obj.BatchModel(window.Earth1, op, function (data) {
|
||||
that.renderModel(that, data, model);
|
||||
})
|
||||
this.close();
|
||||
} else {
|
||||
this.modelSet()
|
||||
}
|
||||
},
|
||||
searchContent(val) {
|
||||
if (val) {
|
||||
this.searchRes = this.allModels.filter((item) => {
|
||||
return item.model_name.indexOf(val) !== -1;
|
||||
});
|
||||
} else {
|
||||
this.searchRes = [];
|
||||
}
|
||||
},
|
||||
selectModel(model) {
|
||||
let model_p_id = "模型图层"
|
||||
console.log("选中了模型", model, this.type);
|
||||
this.close();
|
||||
if (this.type == "rightMenu") {
|
||||
this.$sendChanel("selectModelg", model);
|
||||
} else if (this.type == "rightMenuChange") {
|
||||
this.$sendChanel("selectModelChangeg", model);
|
||||
} else {
|
||||
let selectedNode = getSelectedNode(this.treeObj);
|
||||
new YJ.Draw.DrawPoint(window.Earth1).start(async (err, position) => {
|
||||
if (err == null || err != false) {
|
||||
let source_id = this.$md5(new Date().getTime() + model.model_name);
|
||||
let p_id = selectedNode
|
||||
? nodeType[selectedNode.source_type].allowChildren
|
||||
? selectedNode.source_id
|
||||
: selectedNode.p_id
|
||||
: -1;
|
||||
let DbOption = {
|
||||
source_id,
|
||||
source_name: model.model_name,
|
||||
source_type: "model",
|
||||
p_id,
|
||||
};
|
||||
|
||||
let option = {
|
||||
id: source_id,
|
||||
position,
|
||||
name: model.model_name,
|
||||
show: true,
|
||||
scale: 1,
|
||||
url: model.model_url,
|
||||
maximumScale: 1,
|
||||
host: getIP(),
|
||||
};
|
||||
let Model = await new YJ.Obj.Model(window.Earth1, option);
|
||||
window._entityMap.set(option.id, Model);
|
||||
Model.onClick = () => {
|
||||
leftClick(node);
|
||||
};
|
||||
let detailOption = JSON.parse(JSON.stringify(Model.options));
|
||||
detailOption.url = model.model_id + ".glb";
|
||||
let node = getNodeData(DbOption, detailOption);
|
||||
console.log(node);
|
||||
addSource(node).then((res) => {
|
||||
if ([0, 200].includes(res.code)) {
|
||||
// cusRenderNode(DbOption) DbOption.p_id
|
||||
cusAddNodes(this.treeObj, DbOption.p_id, [node]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
openModel(val) {
|
||||
if (val) {
|
||||
let arr = this.arrModel
|
||||
.filter((item) => item.type_id == val)
|
||||
.map((item) => item.children)
|
||||
.flat();
|
||||
this.modelTypeList.forEach((item) => {
|
||||
if (item.type_id == val) {
|
||||
item.children = arr;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
open(key = "second") {
|
||||
this.searchRes = [];
|
||||
this.allModels = [];
|
||||
this.modelTypeList = [];
|
||||
this.arrModel = [];
|
||||
this.filterText = "";
|
||||
this.type = key;
|
||||
getModelType((res) => {
|
||||
console.log('resresres',res);
|
||||
|
||||
if (res.list) {
|
||||
this.arrModel = res.list;
|
||||
this.modelTypeList = res.list.map(({ children, ...rest }) => rest);
|
||||
this.modelTypeList[0].children = res.list[0].children;
|
||||
console.log(this.modelTypeList);
|
||||
res.list.forEach((item) => {
|
||||
if (item.children)
|
||||
this.allModels = this.allModels.concat(item.children);
|
||||
});
|
||||
// this.modelTotal = res.total.list[0].length
|
||||
}
|
||||
});
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
},
|
||||
close() {
|
||||
this.searchRes = [];
|
||||
this.allModels = [];
|
||||
this.modelTypeList = [];
|
||||
this.activeName = "";
|
||||
// this.editModelData = null;
|
||||
this.editModelId = null;
|
||||
this.$changeComponentShow(".modelBoxg", false);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// this.open()
|
||||
this.$recvChanel("getTreeObj", (treeObj) => {
|
||||
this.treeObj = treeObj;
|
||||
// this.$removeChanel("getTreeObj")
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.model666 {
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.box {
|
||||
width: 30vw;
|
||||
height: 21vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: 16px;
|
||||
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
|
||||
padding: 10px;
|
||||
border: 1.5px solid rgba(0, 255, 255, 1);
|
||||
|
||||
.boxHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
padding: 0.5vh 0;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 22px;
|
||||
|
||||
.boxHeaderTitle {
|
||||
display: inline-block;
|
||||
width: 230px;
|
||||
height: 34px;
|
||||
background: url('../../assets/images/titlebg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody {
|
||||
height: 500px;
|
||||
flex: auto;
|
||||
overflow-y: auto;
|
||||
|
||||
.modelSet {
|
||||
.el-button {
|
||||
background: rgba(var(--color-sdk-base-rgb), 0.2);
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.selectModel {
|
||||
border: 1px solid red !important;
|
||||
}
|
||||
|
||||
.itemBox {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
.imgbox {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 5px;
|
||||
background: url('../../assets/images/modelbg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
/* 确保超出容器的文本被裁剪 */
|
||||
white-space: nowrap;
|
||||
/* 确保文本在一行内显示 */
|
||||
text-overflow: ellipsis;
|
||||
/* 使用省略号表示文本超出 */
|
||||
}
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 50%;
|
||||
margin-bottom: 18px;
|
||||
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(0, 255, 255, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-input__inner::placeholder {
|
||||
color: rgba(173, 241, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.boxBody::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 255, 255, 1) !important;
|
||||
}
|
||||
|
||||
.boxBody::-webkit-scrollbar-track {
|
||||
background: rgba(0, 51, 51, .1) !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user