381 lines
12 KiB
Vue
381 lines
12 KiB
Vue
<template>
|
|
<div class="junbiao3d" ref="junbiao3d">
|
|
<div class="box" v-draggable>
|
|
<div class="boxHeader nav">
|
|
<span></span>
|
|
<span class="title">三维军标</span>
|
|
<span class="closeBox">
|
|
<span @click="close">✕</span>
|
|
</span>
|
|
</div>
|
|
<div class="boxBody">
|
|
<div class="contentBox">
|
|
<!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
|
<template v-for="item in tabs">
|
|
<el-tab-pane :label="item.label" :name="item.key">
|
|
<div class="imgItemBox custom_scroll_bar">
|
|
<div class="imgItem" v-for="item in iconList[item.key]" @click="selectImg(item)">
|
|
<img :src="item.url" alt="" :title="item.name">
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</template>
|
|
</el-tabs> -->
|
|
<template v-for="item in tabs">
|
|
<div class="imgItemBox custom_scroll_bar">
|
|
<div class="imgItem" v-for="item in iconList[item.key]" @click="selectImg(item)">
|
|
<div class="imgBox">
|
|
<img :src="item.url" alt="" :title="item.name">
|
|
<div class="label">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getSelectedNode, getNodeData, cusAddNodes, cusRenderNode, nodeType } from "@/components/Tree/treeNode";
|
|
import { addSource, delSource } from "@/api/gisAPI";
|
|
import { getGraphLabelType } from "../../api/gisAPI";
|
|
import { getIP } from "../../utils";
|
|
import { leftClick, rightClick, tileClick, vrLeftClick } from "../Tree/entityClick";
|
|
export default {
|
|
name: "junbiao",
|
|
data() {
|
|
return {
|
|
yuanshishuju: [],
|
|
allGraphLabels: [],
|
|
graphLabelTypeList: [],
|
|
graphLabelProps: {
|
|
id: 'type_id',
|
|
children: 'sonNode',
|
|
label: 'type_name'
|
|
},
|
|
graphLabelDataMaps: new Map(),
|
|
graphTableData: [],
|
|
filterText: "",
|
|
selectedGraphLabelType: "",
|
|
|
|
tabs: [],
|
|
treeObj: null,
|
|
|
|
activeName: "",
|
|
|
|
iconList: {}
|
|
}
|
|
},
|
|
watch: {
|
|
/* filterText(val) {
|
|
if (!val)
|
|
this.$refs.myTree.filter(val);
|
|
}*/
|
|
},
|
|
methods: {
|
|
searchContent(val) {
|
|
/* if (key == 'type') {
|
|
this.$refs.myTree.filter(val);
|
|
if (!val) {
|
|
let arr = this.graphLabelTypeList.filter(item => {
|
|
return item.type_id == this.selectedGraphLabelType
|
|
})
|
|
console.log(arr)
|
|
if (arr.length)
|
|
this.graphTableData = arr[0].children
|
|
}
|
|
} else {*/
|
|
console.log("搜索值", val)
|
|
if (val) {
|
|
this.graphTableData = this.allGraphLabels
|
|
this.graphTableData = this.graphTableData.filter((item) => {
|
|
return item.name.indexOf(val) !== -1;
|
|
})
|
|
} else {
|
|
console.log(this.graphLabelTypeList)
|
|
console.log(this.graphLabelDataMaps)
|
|
if (this.selectedGraphLabelType) {
|
|
this.yuanshishuju.forEach(item => {
|
|
if (this.selectedGraphLabelType == item.type_id) {
|
|
this.graphTableData = []
|
|
if (item.children)
|
|
this.graphTableData = item.children
|
|
console.log('this.graphTableDatathis.graphTableDatathis.graphTableData', this.graphTableData);
|
|
}
|
|
})
|
|
|
|
} else {
|
|
this.graphTableData = []
|
|
}
|
|
|
|
}
|
|
// }
|
|
},
|
|
handleClick() {
|
|
},
|
|
selectImg({ key, url, name, glbUrl }) {
|
|
// let jun_biao_id = "三维军标图层"
|
|
// console.log('glbUrlglbUrlglbUrl', glbUrl);
|
|
//jun_biao_id: "67bee03d6370434d7e98bcda940e67e7"
|
|
// name: "a常用new_37 (23)"
|
|
// p_id: "8277e0910d750195b448797616e091ad"
|
|
// url: "http://localhost:8890/yjearth4.0/api/v1/junbiao_2d/static/67bee03d6370434d7e98bcda940e67e7"
|
|
this.close()
|
|
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() + name);
|
|
let p_id = selectedNode
|
|
? nodeType[selectedNode.source_type].allowChildren
|
|
? selectedNode.source_id
|
|
: selectedNode.p_id
|
|
: -1;
|
|
let DbOption = {
|
|
source_id,
|
|
source_name: name,
|
|
source_type: "model",
|
|
p_id,
|
|
};
|
|
|
|
let option = {
|
|
id: source_id,
|
|
position,
|
|
name: name,
|
|
show: true,
|
|
scale: 1,
|
|
url: glbUrl,
|
|
maximumScale: 1,
|
|
host: getIP(),
|
|
isJunBiao: true
|
|
};
|
|
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 = glbUrl
|
|
let node = getNodeData(DbOption, detailOption)
|
|
let detail = JSON.parse(node.detail)
|
|
detail.isJunBiao = true
|
|
node.detail = JSON.stringify(detail)
|
|
addSource(node).then((res) => {
|
|
if ([0, 200].includes(res.code)) {
|
|
// cusRenderNode(DbOption)
|
|
// DbOption.p_id
|
|
cusAddNodes(this.treeObj, DbOption.p_id, [node])
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
close() {
|
|
console.log("close")
|
|
this.$changeComponentShow(".junbiao3dBox", false)
|
|
// this.$changeComponentShow("#modal", false)
|
|
},
|
|
open() {
|
|
this.tabs = []
|
|
this.iconList = {};
|
|
let dirObj = {
|
|
dirName: "junbiao_3d/img",
|
|
}
|
|
for (const dirObjElement in dirObj) {
|
|
this.tabs.push({
|
|
label: dirObj[dirObjElement] == 'junbiao_3d/img' ? "三维军标" : "其他军标",
|
|
key: dirObj[dirObjElement],
|
|
icons: []
|
|
})
|
|
}
|
|
this.activeName = this.tabs[0].key
|
|
console.log(this.tabs, "this.tabsthis.tabsthis.tabs");
|
|
|
|
// $changeComponentShow("#modal", true)
|
|
this.$sendElectronChanel("requireGEMarkerName", dirObj)
|
|
this.$recvElectronChanel("dirFiles", (e, res) => {
|
|
for (const resKey in res) {
|
|
res[resKey].forEach((item, index) => {
|
|
let arr = item.split('/')
|
|
console.log(arr);
|
|
let obj = {
|
|
name: arr[arr.length - 1].split(".")[0],
|
|
url: "http://localhost:" + window.staticPort + "/" + item,
|
|
key: item,
|
|
glbUrl: "http://localhost:" + window.staticPort + "/" + arr[0] + "/glb/" + arr[arr.length - 1].split(".")[0] + ".glb"
|
|
}
|
|
res[resKey][index] = obj
|
|
})
|
|
}
|
|
this.iconList = res
|
|
// window.$root_home_index.$refs.selectImg.init(res, selected)
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$recvChanel("getTreeObj", (treeObj) => {
|
|
console.log(treeObj)
|
|
this.treeObj = treeObj
|
|
this.$removeChanel("getTreeObj")
|
|
})
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.junbiao3d {
|
|
user-select: none;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
|
|
.box {
|
|
width: 30vw;
|
|
height: 23vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 45%;
|
|
transform: translate(-50%, -50%);
|
|
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);
|
|
box-sizing: border-box;
|
|
|
|
|
|
.boxHeader {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
color: #fff;
|
|
|
|
font-size: 18px;
|
|
padding: .5vh 0;
|
|
|
|
.title {
|
|
width: 100%;
|
|
height: 30px;
|
|
text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
|
|
font-family: 'alimamashuheiti';
|
|
}
|
|
|
|
i {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.closeBox {
|
|
right: 0;
|
|
top: -1px;
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 28px;
|
|
height: 26px;
|
|
border-radius: 0 0 0 90%;
|
|
background: #00ffff8f;
|
|
|
|
&>span {
|
|
font-size: 18px;
|
|
position: absolute;
|
|
right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.boxBody {
|
|
overflow-y: scroll;
|
|
flex: auto;
|
|
flex-direction: column;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.contentBox {
|
|
width: 100%;
|
|
flex: auto;
|
|
display: flex;
|
|
}
|
|
|
|
.typeBox {
|
|
&>div {
|
|
height: 340px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
width: 150px;
|
|
}
|
|
|
|
.imgItemBox {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
//justify-content: space-between;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.imgItem {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-self: center;
|
|
text-align: center;
|
|
border: 1px solid transparent;
|
|
width: 20%;
|
|
|
|
//height: 100px;
|
|
.imgBox {
|
|
img {
|
|
width: 80px;
|
|
align-self: center;
|
|
}
|
|
}
|
|
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
|
|
// & {
|
|
// border-color: red;
|
|
// }
|
|
}
|
|
|
|
.label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.boxBody::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.boxBody::-webkit-scrollbar-thumb {
|
|
background-color: #00ffff;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.boxBody::-webkit-scrollbar-track {
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
.el-tree-node__label {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
}
|
|
</style> |