332 lines
9.0 KiB
Vue
332 lines
9.0 KiB
Vue
|
<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">
|
||
|
|
<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">
|
||
|
|
<el-image :src="model.poster_url + '?' + Math.random()" alt=""></el-image>
|
||
|
|
|
||
|
|
</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: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
searchContent(val) {
|
||
|
|
if (val) {
|
||
|
|
this.searchRes = this.allModels.filter((item) => {
|
||
|
|
return item.model_name.indexOf(val) !== -1;
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.searchRes = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
selectModel(model) {
|
||
|
|
console.log("选中了模型", model, this.type);
|
||
|
|
this.close();
|
||
|
|
if (this.type == "rightMenu") {
|
||
|
|
this.$sendChanel("selectModel", model);
|
||
|
|
} else if (this.type == "rightMenuChange") {
|
||
|
|
this.$sendChanel("selectModelChange", 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)
|
||
|
|
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) => {
|
||
|
|
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.$changeComponentShow(".modelBox", 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/title.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
i {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.boxBody {
|
||
|
|
height: 500px;
|
||
|
|
flex: auto;
|
||
|
|
overflow-y: auto;
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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>
|