<template>
|
<Popup ref="pop" :title="title" width="355px" left="calc(100% - 360px)">
|
<div class="ModelLibrary">
|
<!-- <div class="btnDiv" v-if="!isPathModel">
|
<div class="btn">
|
<el-upload
|
action=""
|
:auto-upload="false"
|
:show-file-list="false"
|
:on-change="openFile"
|
accept=".json"
|
>
|
<el-button type="primary" icon="el-icon-upload">上传</el-button>
|
</el-upload>
|
</div>
|
<div class="btn">
|
<el-button type="primary" icon="el-icon-s-order" @click="save"
|
>保存</el-button
|
>
|
</div>
|
<div class="btn">
|
<el-button
|
type="primary"
|
icon="el-icon-delete-solid"
|
@click="deleteEntities"
|
>清空</el-button
|
>
|
</div>
|
</div> -->
|
<div class="selectorDiv">
|
<el-select
|
v-model="selectResult"
|
@change="handleSelect"
|
:popper-append-to-body="false"
|
>
|
<el-option
|
v-for="(item, index) in modelTypes"
|
:key="index"
|
:label="item.name + '(' + item.data.length + ')'"
|
:value="index"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="content">
|
<div
|
class="pngDiv"
|
v-for="(item, index) in models"
|
:key="index"
|
:title="item.name"
|
@click="btnClick(item.name, item.model)"
|
>
|
<img :src="modelRootSrc + item.img" width="144px" height="144px" />
|
</div>
|
</div>
|
</div>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from '@tools/Popup.vue';
|
import axios from 'axios';
|
import Bus from './Bus';
|
var ModelLibraryURL = 'http://183.162.245.49:8099/ModelLibrary/';
|
var typeName = '';
|
export default {
|
name: 'ModelLibrary',
|
components: {
|
Popup,
|
},
|
data() {
|
return {
|
isPathModel: false, //是否为路径动画中的模型选择
|
title: '模型库',
|
selectResult: 0, // 被选择的结果
|
modelTypes: [],
|
models: [],
|
modelRootSrc: ModelLibraryURL + 'image/',
|
selected: '',
|
};
|
},
|
methods: {
|
open(isPathModel = false) {
|
this.isPathModel = isPathModel;
|
this.$refs.pop.open();
|
axios({
|
method: 'get',
|
url: ModelLibraryURL + 'config.json',
|
}).then((data) => {
|
this.modelTypes = data.data;
|
this.models = this.modelTypes[0].data;
|
typeName = this.modelTypes[0].name;
|
});
|
window.ModelEdit = new parent.SmartEarth.ModelEdit(parent.Viewer);
|
},
|
close() {
|
this.$refs.pop.close();
|
},
|
//保存
|
save() {
|
sgworld.Creator.SimpleGraphic.save();
|
},
|
// 下拉框选择
|
handleSelect(index) {
|
this.models = this.modelTypes[index].data;
|
typeName = this.modelTypes[index].name;
|
},
|
// 图片点击
|
btnClick(name, model) {
|
let modelURL = ModelLibraryURL + typeName + '/' + model;
|
if (this.isPathModel) {
|
Bus.$emit('getModel', modelURL);
|
this.close();
|
return;
|
}
|
sgworld.Creator.createSimpleGraphic(
|
'model',
|
{
|
url: modelURL,
|
name: name,
|
},
|
(entity) => {
|
let style = sgworld.Creator.SimpleGraphic.getStyle(entity);
|
let data = {
|
id: entity.id,
|
name: name,
|
sourceType: 'SimpleGraphic',
|
class: style.type,
|
style: style,
|
item: entity,
|
};
|
sgworld.Navigate.flyToObj(data);
|
Bus.$emit('addOtherData', '对象', data);
|
}
|
);
|
},
|
// 打开文件
|
openFile(file) {
|
sgworld.Creator.SimpleGraphic.open(file.raw);
|
},
|
deleteEntities() {
|
sgworld.Creator.SimpleGraphic.clear();
|
},
|
showInfo(isshow, event, name) {
|
this.isShowInfo = isshow;
|
this.mousex = event.clientX;
|
this.mousey = event.clientY - 25;
|
if (name) {
|
this.name = name;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.btnDiv {
|
padding-bottom: 10px;
|
border-bottom: 2px solid white;
|
display: flex;
|
justify-content: space-evenly;
|
}
|
.btn {
|
padding-inline: 12px;
|
padding-top: 10px;
|
display: inline-block;
|
}
|
/deep/ .el-select {
|
margin-left: 7px;
|
}
|
/deep/ .el-input__inner {
|
width: 323px !important;
|
}
|
.selectorDiv {
|
padding-top: 10px;
|
padding-bottom: 10px;
|
}
|
.content {
|
height: 300px;
|
width: 343px;
|
overflow-y: auto;
|
.info {
|
color: black;
|
background-color: white;
|
border-radius: 5px;
|
position: fixed;
|
z-index: 999999;
|
.modelname {
|
display: block;
|
margin: 1px 3px;
|
}
|
}
|
&::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 8px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 8px;
|
scrollbar-arrow-color: red;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: #797979;
|
scrollbar-arrow-color: red;
|
}
|
|
&::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
}
|
.pngDiv {
|
width: 144px;
|
height: 144px;
|
margin: 7px;
|
border: 1px solid white;
|
display: inline-block;
|
cursor: pointer;
|
}
|
.el-select-dropdown__item {
|
background-color: rgb(71, 71, 71) !important;
|
color: white !important;
|
}
|
.el-select-dropdown__item:hover {
|
background-color: rgb(107, 107, 107) !important;
|
}
|
/deep/ .el-select-dropdown__list {
|
padding: 0;
|
background-color: rgb(71, 71, 71) !important;
|
}
|
/deep/ .el-popper[x-placement^='bottom'] .popper__arrow::after {
|
border-bottom-color: rgb(71, 71, 71) !important;
|
}
|
/deep/ .el-select-dropdown {
|
border: none;
|
}
|
</style>
|
