This commit is contained in:
2025-09-02 10:01:05 +08:00
parent 1484bd44fc
commit ff5f583326
68 changed files with 983 additions and 14306 deletions

View File

@ -0,0 +1,262 @@
<template>
<div class="ModelSet">
<div class="box" v-draggable>
<div class="boxHeader nav">
<!-- <span></span> -->
<span class="label">{{ title }}</span>
<div class="close-box" @click="close">
<span class="close"></span>
<i>x</i>
</div>
</div>
<div class="boxBody">
<el-form :label-position="labelPosition" label-width="120px" :model="form">
<!-- label="请输入文本信息" -->
<el-form-item label="添加方式">
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-if="form.type != '点'" label="间距">
<el-input type="number" placeholder="请输入间距" v-model:number="form.spacing" @input="handleInput"></el-input>
</el-form-item>
</el-form>
<div style="display: flex;justify-content: flex-end;">
<el-button type="primary" @click="confirm">确认</el-button>
<el-button @click="cancel">取消</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ModelSet",
data() {
return {
labelPosition: "top",
form: {
type: "",
spacing: null
},
title: "",
options: [{
value: '点',
label: '点'
}, {
value: '线',
label: '线'
}, {
value: '面',
label: '面'
}
],
};
},
methods: {
handleInput(value) {
let filtered = value
.replace(/[^\d]/g, '') // 只保留数字
.replace(/^0+/, '') // 去除前导零
if (!filtered) {
this.form.spacing = 1;
} else {
// 将过滤后的字符串转为数字与1000比较取较小值
const num = parseInt(filtered, 10);
this.form.spacing = num > 1000 ? 1000 : num;
}
},
close() {
this.$changeComponentShow(".ModelSet", false);
},
cancel() {
this.$changeComponentShow(".ModelSet", false);
this.$sendChanel("ModelSetContent", null);
},
isOnlyWhitespace(str) {
// 使用正则表达式匹配一个或多个空白字符
const regex = /^\s+$/;
return regex.test(str);
},
confirm() {
//this.form.text去除空格
// this.form.text = this.form.text.replace(/\s+/g, "");
let bool = this.isOnlyWhitespace(this.form.number)
if (this.form.number <= 0 || bool) {
this.$message.warning("请输入内容");
return;
}
if (this.form.type == '点' ) {
this.form.spacing = null
}
this.$sendChanel("ModelSetContent", this.form);
this.$changeComponentShow(".ModelSet", false);
},
},
mounted() {
this.$recvChanel("ModelSetTitle", (text) => {
this.title = text;
console.log(localStorage.getItem("ModelSetContent"));
this.form = JSON.parse(localStorage.getItem("ModelSetContent")) || {
type: "",
spacing: null
};
});
},
};
</script>
<style lang="scss">
.ModelSet {
user-select: none;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
.el-input__inner {
background-color: transparent;
color: #fff;
padding: 0;
padding-left: 20px;
}
input::-webkit-inner-spin-button {
appearance: none !important;
}
input::-webkit-outer-spin-button {
appearance: none !important;
}
input[type='number'] {
appearance: textfield;
}
// 解决光标上移
.el-input__inner {
line-height: 1px !important;
}
.el-form-item {
margin-bottom: 10px;
}
.box {
width: 20vw;
display: flex;
flex-direction: column;
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
color: var(--color-sdk-auxiliary-public);
font-size: 14px;
// z-index: 999999;
background: linear-gradient(0deg, var(--color-sdk-bg-gradual)),
rgba(0, 0, 0, 0.6);
border: 1.5px solid;
border-image: linear-gradient(to bottom, var(--color-sdk-gradual)) 1;
text-align: left;
font-family: "sy-boldface";
.boxHeader {
display: flex;
justify-content: space-between;
font-size: 18px;
line-height: 46px;
padding: 5px 16px 5px 16px;
height: 46px;
.label {
font-family: "Ali-mother-counts-bold";
font-size: 18px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
text-align: left;
text-shadow: 0px 0px 9px rgb(20 118 255);
}
.close-box {
position: absolute;
top: -1px;
right: 0;
height: 30px;
cursor: pointer;
width: 30px;
border-radius: 0 0 0 90%;
overflow: hidden;
.close {
display: block;
width: 100%;
height: 100%;
background: rgba(var(--color-sdk-base-rgb), 1);
opacity: 0.5;
}
i {
font-style: normal;
font-size: 18px;
font-weight: 900;
position: absolute;
top: -13px;
left: 11px;
}
}
}
.boxBody {
flex: auto;
flex-direction: column;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
.el-form--label-top .el-form-item__label {
padding: 0;
}
.el-form-item__label {
color: #fff;
}
.el-textarea__inner {
max-height: 500px;
// overflow: hidden; /* 禁用滚动条 */
resize: none;
/* 禁止用户手动调整文本框的尺寸 */
background-color: transparent;
color: #fff;
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
}
.el-textarea__inner::scrollbar-width {
display: none;
}
.el-button {
background: rgba(var(--color-sdk-base-rgb), 0.2);
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
color: #ffffff;
padding: 8px 16px;
}
.el-button:hover {
border-color: rgba(var(--color-sdk-base-rgb), 1) !important;
}
}
}
}
</style>

View File

@ -3,7 +3,7 @@
<div class="box" v-draggable>
<div class="boxHeader nav">
<span></span>
<span class="boxHeaderTitle"></span>
<span class="boxHeaderTitle">军标选择</span>
<span class="closeBox">
<span @click="close"></span>
</span>
@ -255,7 +255,6 @@ export default {
this.selectedGraphLabelType = "";
// if (this.graphLabelTypeList.length !== 0) {
this.getGraphLabelTypeList();
this.$refs.myTree.setCurrentKey(this.graphLabelTypeList[0].type_id);
// } else {
// }
},
@ -263,7 +262,7 @@ export default {
handleClick() { },
selectImg({ key, url, name }) {
// 军标库图层
let jun_biao_id = "二维军标图层";
// let jun_biao_id = "二维军标图层";
//jun_biao_id: "67bee03d6370434d7e98bcda940e67e7"
// name: "a常用new_37 (23)"
// p_id: "8277e0910d750195b448797616e091ad"
@ -343,7 +342,9 @@ export default {
display: flex;
justify-content: center;
align-items: center;
.el-tree-node:focus>.el-tree-node__content{
background-color:transparent;
}
.box {
// width: 30vw;
// height: 23vw;
@ -389,9 +390,11 @@ export default {
display: inline-block;
width: 230px;
height: 34px;
background: url('../../assets/images/junbiaoTitle.png');
background: url('../../assets/images/titlebg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
line-height: 34px;
}
i {

View File

@ -120,8 +120,8 @@ export default {
handleClick() {
},
selectImg({ key, url, name, glbUrl }) {
let jun_biao_id = "三维军标图层"
console.log('glbUrlglbUrlglbUrl', glbUrl);
// let jun_biao_id = "三维军标图层"
// console.log('glbUrlglbUrlglbUrl', glbUrl);
//jun_biao_id: "67bee03d6370434d7e98bcda940e67e7"
// name: "a常用new_37 (23)"
// p_id: "8277e0910d750195b448797616e091ad"
@ -169,7 +169,7 @@ export default {
if ([0, 200].includes(res.code)) {
// cusRenderNode(DbOption)
// DbOption.p_id
cusAddNodes(this.treeObj,DbOption.p_id, [node])
cusAddNodes(this.treeObj, DbOption.p_id, [node])
}
});
}

View File

@ -3,7 +3,7 @@
<div class="box" v-draggable>
<div class="boxHeader nav">
<span></span>
<span class="boxHeaderTitle"></span>
<span class="boxHeaderTitle">模型选择</span>
<span>
<i class="el-icon-close" @click="close"></i>
</span>
@ -22,7 +22,7 @@
<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="itemBox" @click="editModel(model)">
<div class="imgbox">
<img :src="model.poster_url" alt=""></img>
</div>
@ -36,8 +36,8 @@
<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="editModel(model)" @dblclick="selectModel(model)">
<!-- @dblclick="selectModel(model)" -->
<div class="itemBox" @click="editModel(model)" >
<div class="imgbox" :class="{ selectModel: editModelId == model.model_id }">
<el-image :src="model.poster_url" alt=""></el-image>
<!-- + '?' + Math.random() -->
@ -92,37 +92,36 @@ export default {
},
methods: {
modelSet() {
if (this.editModelData) {
let url = this.editModelData.model_url;
let source_id = this.$md5(new Date().getTime() + this.editModelData.model_name);
console.log(this.editModelData, url, source_id);
let models = new YJ.Obj.BatchModel(window.Earth1, {
id: source_id,
url
}, function (data) {
console.log('data,url,source_id', data, url, source_id);
// this.renderModel(data, this.editModelData);
})
} else {
}
this.close();
this.$sendChanel("ModelSetTitle", "默认模型参数设置");
this.$changeComponentShow(".ModelSetBox", true);
this.$recvChanel("ModelSetContent", (data) => {
if (data) {
localStorage.setItem("ModelSetContent", JSON.stringify(data));
}
});
},
async renderModel(data, model) {
renderModel(that, data, model) {
// let p_id = '模型图层'
let selectedNode = getSelectedNode(this.treeObj);
let p_id = selectedNode
? nodeType[selectedNode.source_type].allowChildren
? selectedNode.source_id
: selectedNode.p_id
: -1;
? nodeType[selectedNode.source_type].allowChildren
? selectedNode.source_id
: selectedNode.p_id
: -1;
let z
if (data.positions.length>0) {
data.positions.forEach( async (position,index) => {
let source_id = this.$md5(new Date().getTime() + model.model_name+index);
if (data.type=="面") {
z = data.rotate.z;
}else if (data.type=="线") {
if (data.positions.length >= 100) {
that.$message.warning("添加模型数量过多,请减少数量后!");
return;
}
if (data.positions.length > 0) {
data.positions.forEach(async (position, index) => {
let source_id = this.$md5(new Date().getTime() + model.model_name + index);
if (data.type == "面") {
z = data.rotate;
} else if (data.type == "线") {
z = data.rotate[index];
} else if (data.type == "点") {
z = 0
}
let DbOption = {
source_id,
@ -139,7 +138,7 @@ export default {
url: model.model_url,
maximumScale: 1,
host: getIP(),
rotate:{
rotate: {
x: 0,
y: 0,
z
@ -163,8 +162,35 @@ export default {
}
},
editModel(model) {
this.editModelData = model;
this.editModelId = model.model_id;
let that = this
let form = JSON.parse(localStorage.getItem("ModelSetContent"))
if (form) {
let url = model.model_url;
let source_id = this.$md5(new Date().getTime() + model.model_name);
let op = {}
if (form.spacing) {
op = {
id: source_id,
url,
type: form.type,
spacing: form.spacing
}
} else {
op = {
id: source_id,
url,
type: form.type,
}
}
console.log('opopopopopopopopopopopopopop',op);
let models = new YJ.Obj.BatchModel(window.Earth1, op, function (data) {
that.renderModel(that, data, model);
})
this.close();
} else {
this.modelSet()
}
},
searchContent(val) {
if (val) {
@ -271,7 +297,7 @@ export default {
this.allModels = [];
this.modelTypeList = [];
this.activeName = "";
this.editModelData = null;
// this.editModelData = null;
this.editModelId = null;
this.$changeComponentShow(".modelBox", false);
},
@ -323,9 +349,11 @@ export default {
display: inline-block;
width: 230px;
height: 34px;
background: url('../../assets/images/title.png');
background: url('../../assets/images/titlebg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
line-height: 34px;
}
i {

View File

@ -0,0 +1,450 @@
<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;justify-content: space-between;">
<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" :class="{ selectModel: editModelId == model.model_id }">
<el-image :src="model.poster_url" alt=""></el-image>
<!-- + '?' + Math.random() -->
</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: [],
editModelData: null,
editModelId: null,
};
},
methods: {
modelSet() {
this.$sendChanel("ModelSetTitle", "默认模型参数设置");
this.$changeComponentShow(".ModelSetBox", true);
this.$recvChanel("ModelSetContent", (data) => {
if (data) {
localStorage.setItem("ModelSetContent", JSON.stringify(data));
}
});
},
renderModel(that, data, model) {
let p_id = '模型图层'
let z
if (data.positions.length >= 100) {
that.$message.warning("添加模型数量过多,请减少数量后!");
return;
}
if (data.positions.length > 0) {
data.positions.forEach(async (position, index) => {
let source_id = this.$md5(new Date().getTime() + model.model_name + index);
if (data.type == "面") {
z = data.rotate;
} else if (data.type == "线") {
z = data.rotate[index];
} else if (data.type == "点") {
z = 0
}
let DbOption = {
source_id,
source_name: model.model_name + index,
source_type: "model",
p_id,
};
let option = {
id: source_id,
position,
name: model.model_name + index,
show: true,
scale: 1,
url: model.model_url,
maximumScale: 1,
host: getIP(),
rotate: {
x: 0,
y: 0,
z
}
};
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);
addSource(node).then((res) => {
if ([0, 200].includes(res.code)) {
// cusRenderNode(DbOption) DbOption.p_id
cusAddNodes(this.treeObj, p_id, [node]);
}
});
});
}
},
editModel(model) {
let that = this
let form = JSON.parse(localStorage.getItem("ModelSetContent"))
if (form) {
let url = model.model_url;
let source_id = this.$md5(new Date().getTime() + model.model_name);
let op = {}
if (form.spacing) {
op = {
id: source_id,
url,
type: form.type,
spacing: form.spacing
}
} else {
op = {
id: source_id,
url,
type: form.type,
}
}
console.log('opopopopopopopopopopopopopop',op);
let models = new YJ.Obj.BatchModel(window.Earth1, op, function (data) {
that.renderModel(that, data, model);
})
this.close();
} else {
this.modelSet()
}
},
searchContent(val) {
if (val) {
this.searchRes = this.allModels.filter((item) => {
return item.model_name.indexOf(val) !== -1;
});
} else {
this.searchRes = [];
}
},
selectModel(model) {
let model_p_id = "模型图层"
console.log("选中了模型", model, this.type);
this.close();
if (this.type == "rightMenu") {
this.$sendChanel("selectModelg", model);
} else if (this.type == "rightMenuChange") {
this.$sendChanel("selectModelChangeg", 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) DbOption.p_id
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) => {
console.log('resresres',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.editModelData = null;
this.editModelId = null;
this.$changeComponentShow(".modelBoxg", 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/titlebg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
line-height: 34px;
}
i {
cursor: pointer;
}
}
.boxBody {
height: 500px;
flex: auto;
overflow-y: auto;
.modelSet {
.el-button {
background: rgba(var(--color-sdk-base-rgb), 0.2);
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
}
}
.selectModel {
border: 1px solid red !important;
}
.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;
border: 1px solid rgba(0, 0, 0, 0);
}
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;
display: flex;
flex-wrap: wrap;
}
.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>