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