<template>
|
<div class="container">
|
<div class="model-panel-list">
|
<el-row :gutter="10">
|
<el-button
|
icon="el-icon-plus"
|
size="small"
|
type="primary"
|
@click="showCreateHandle"
|
>
|
添加
|
</el-button>
|
<el-button
|
icon="el-icon-delete"
|
size="small"
|
type="danger"
|
@click="clearHandle"
|
>
|
清空
|
</el-button>
|
<el-button
|
icon="el-icon-view"
|
size="small"
|
:type="showModel ? 'success' : 'info'"
|
@click="toggleVisible"
|
>
|
{{ showModel ? "隐藏" : "显示" }}
|
</el-button>
|
</el-row>
|
<el-row :gutter="10" v-for="model in models" :key="model.link">
|
<el-col :span="12">
|
{{ model.name || " " }}
|
</el-col>
|
<el-col :span="10" style="textAlign:right">
|
<el-button
|
icon="el-icon-s-promotion"
|
size="mini"
|
circle
|
@click="() => focusHandle(model.id)"
|
/>
|
<el-button
|
icon="el-icon-view"
|
size="mini"
|
:type="model.visible ? 'primary' : 'default'"
|
circle
|
@click="() => toggleModelVisible(model.id)"
|
/>
|
<el-button
|
icon="el-icon-delete"
|
type="danger"
|
size="mini"
|
circle
|
@click="() => removeHandle(model.id)"
|
/>
|
</el-col>
|
</el-row>
|
</div>
|
<el-dialog
|
:visible="showCreatePanel"
|
width="380px"
|
title="添加模型"
|
:append-to-body="true"
|
:close-on-click-modal="false"
|
:before-close="closeCreateHandle"
|
>
|
<p>模型名称</p>
|
<el-input v-model="model.name" placeholder="模型名称" />
|
<p>模型地址</p>
|
<el-input v-model="model.link" placeholder="请输入模型地址" />
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="closeCreateHandle">取 消</el-button>
|
<el-button type="primary" @click="createHandle">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { global } from "../../global";
|
|
export default {
|
components: {
|
|
},
|
data() {
|
return {
|
model: {
|
id: "",
|
name: "",
|
link: "",
|
},
|
showCreatePanel: false,
|
showModel: true,
|
};
|
},
|
computed: {
|
timestamp() {
|
return this.$store.state.map.timestamp;
|
},
|
models() {
|
return this.timestamp && global.map ? global.map.models : [];
|
}
|
},
|
mounted() {
|
this.beginSet()
|
},
|
methods: {
|
beginSet() {
|
this.focusHandle(this.models[0].id)
|
},
|
editHandle(model) {
|
if (!global.map) return;
|
this.model = {
|
id: model.id,
|
name: model.name,
|
link: model.link,
|
};
|
this.showCreatePanel = true;
|
},
|
removeHandle(id) {
|
if (!global.map) return;
|
global.map.removeModel(id);
|
this.$store.dispatch("map/updateTimestamp");
|
},
|
closeCreateHandle() {
|
this.showCreatePanel = false;
|
this._initModel();
|
},
|
showCreateHandle() {
|
this.showCreatePanel = true;
|
},
|
toggleModelVisible(id) {
|
var model = global.map.getModel(id);
|
if(model) {
|
global.map.setModelVisible(id, !model.visible);
|
}
|
this.$store.dispatch("map/updateTimestamp");
|
},
|
_initModel() {
|
this.model = {
|
id: null,
|
name: "",
|
link: "",
|
};
|
},
|
createHandle() {
|
if(!global.map) return;
|
let map = global.map;
|
const { link, name } = this.model;
|
this.closeCreateHandle();
|
map.addModel({
|
name: name,
|
link: link,
|
});
|
this.$store.dispatch("map/updateTimestamp");
|
},
|
toggleVisible() {
|
this.showModel = !this.showModel;
|
if (global.map) {
|
this.models.forEach((model) => {
|
global.map.setModelVisible(model.id, this.showModel);
|
});
|
}
|
this.$store.dispatch("map/updateTimestamp");
|
},
|
focusHandle(id) {
|
if (global.map) {
|
global.map.flyToModel(id);
|
}
|
},
|
clearHandle() {
|
if (global.map) {
|
this.models.forEach((model) => {
|
global.removeModel(model.id);
|
});
|
}
|
this.$store.dispatch("map/updateTimestamp");
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.images img{
|
width: 36px;
|
height: auto;
|
margin:0px 5px;
|
cursor: pointer;
|
}
|
|
.model-panel-list > div {
|
margin-bottom: 5px;
|
padding: 5px 0 5px 0;
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
}
|
|
.image-list {
|
margin: 20px 0;
|
}
|
|
.image-list ul , .image-list li{
|
margin:0;
|
padding:0;
|
list-style:none;
|
}
|
|
.image-list li {
|
display: inline-block;
|
margin: 0 5px 5px 5px;
|
cursor: pointer;
|
padding: 5px 8px;
|
border-radius: 3px;
|
}
|
|
.image-list li img {
|
width: 32px;
|
height: 32px;
|
}
|
|
.image-list li:hover,
|
.image-list li.active {
|
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
|
}
|
|
</style>
|
