创建新仓库
This commit is contained in:
331
src/renderer/components/dialog/model.vue
Normal file
331
src/renderer/components/dialog/model.vue
Normal file
@ -0,0 +1,331 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user