You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
763 lines
24 KiB
763 lines
24 KiB
<!--
|
|
监控站管理
|
|
|
|
目录位置：三维地图管理 -> 监控站管理
|
|
功能概述：场景管理，上帝视角，控制飞入，视角
|
|
-->
|
|
<template>
|
|
<div class="mainContainer">
|
|
<a-row>
|
|
<a-col :span="24" class="container1">
|
|
<span class="textdisplay">场景管理</span>
|
|
<!-- <a-input class="inputText" v-model:value="filter"></a-input>
|
|
|
|
<a-button type="primary" class="buttonQuery" @click="getDataSource">查询</a-button> -->
|
|
<a-button type="primary" class="addProject" @click="addScene">新增场景</a-button>
|
|
</a-col>
|
|
<hr class="hrDivider" />
|
|
<a-col :span="24" style="display: flex">
|
|
<div class="tree-container">
|
|
<a-tree :tree-data="treeData" :defaultExpandAll="true" v-model:selectedKeys="selectedKeys" @select="showDataSourceFilter"></a-tree>
|
|
</div>
|
|
<div class="table-container">
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
<!-- <a-tab-pane key="1" tab="详细信息">
|
|
|
|
<scene-info ref="sceneInfo" :parentCodeArr="parentCodeArr" :nextNodeIndex="nextNodeIndex"
|
|
:parentNodeCode="parentNodeCode" :subObject="subObject" @updateDataSource="getDataSource"
|
|
:disable="sceneInfoDisable">
|
|
<template #header>
|
|
<div class="scene-info-do">
|
|
<div v-if="sceneInfoDisable">
|
|
<a-tooltip placement="top">
|
|
<template slot="title">
|
|
<span>编辑</span>
|
|
</template>
|
|
<img :src="edit" class="actionImg" @click="sceneInfoDisableChange" />
|
|
</a-tooltip>
|
|
</div>
|
|
<div v-else>
|
|
<a-tooltip placement="top">
|
|
<template slot="title">
|
|
<span>确定</span>
|
|
</template>
|
|
<a>
|
|
<CheckOutlined class="scene-info-icon" @click="updateSubObj"></CheckOutlined>
|
|
</a>
|
|
</a-tooltip>
|
|
|
|
<a-tooltip placement="top">
|
|
<template slot="title">
|
|
<span>取消编辑</span>
|
|
</template>
|
|
<a>
|
|
<CloseOutlined class="scene-info-icon" @click="revserObj" />
|
|
</a>
|
|
</a-tooltip>
|
|
</div>
|
|
<div>
|
|
<a-tooltip placement="top">
|
|
<template slot="title">
|
|
<span>删除</span>
|
|
</template>
|
|
<img :src="deleteIcon" class="actionImg" @click="doSomething(record, 'delete')" />
|
|
</a-tooltip>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
</scene-info>
|
|
</a-tab-pane> -->
|
|
<a-tab-pane key="1" tab="子节点信息" :force-render="true">
|
|
<a-table :columns="columns" :dataSource="dataSource" :pagination="{ defaultPageSize: 5 }" rowKey="sceneId">
|
|
<template #action="{ text, record }">
|
|
<div class="action-div">
|
|
<a-tooltip placement="top">
|
|
<template slot="title">
|
|
<span>编辑</span>
|
|
</template>
|
|
<img :src="edit" class="actionImg" @click="doSomething(record, 'edit')" />
|
|
</a-tooltip>
|
|
<a-tooltip placement="top">
|
|
<template slot="title">
|
|
<span>删除</span>
|
|
</template>
|
|
<img :src="deleteIcon" class="actionImg" @click="showDeleteConfirm(record, 'delete')" />
|
|
</a-tooltip>
|
|
</div>
|
|
</template>
|
|
<template #xyz="{ text, record }">
|
|
<a-row>
|
|
<a-col :span="24" class="xyzContainer">
|
|
<span>中心经度：</span>
|
|
<a-tag color="#2db7f5">
|
|
{{ Number.parseFloat(record.xyz[0] == undefined ? 0 : record.xyz[0]).toFixed(6) }}
|
|
</a-tag>
|
|
</a-col>
|
|
<a-col :span="24" class="xyzContainer">
|
|
<span>中心纬度：</span>
|
|
<a-tag color="#87d068">
|
|
{{ Number.parseFloat(record.xyz[1] == undefined ? 0 : record.xyz[1]).toFixed(6) }}
|
|
</a-tag>
|
|
</a-col>
|
|
<a-col :span="24" class="xyzContainer">
|
|
<span>中心高度：</span>
|
|
<a-tag color="#108ee9">
|
|
{{ Number.parseFloat(record.xyz[2] == undefined ? 0 : record.xyz[2]).toFixed(6) }}
|
|
</a-tag>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
<template #rxyz="{ text, record }">
|
|
<a-row>
|
|
<a-col :span="24" class="xyzContainer">
|
|
<span>相机偏航角：</span>
|
|
<a-tag color="#2db7f5">
|
|
{{ Number.parseFloat(record.rxyz[0] == undefined ? 0 : record.rxyz[0]).toFixed(6) }}
|
|
</a-tag>
|
|
</a-col>
|
|
<a-col :span="24" class="xyzContainer">
|
|
<span>相机俯仰角：</span>
|
|
<a-tag color="#87d068">
|
|
{{ Number.parseFloat(record.rxyz[1] == undefined ? 0 : record.rxyz[1]).toFixed(6) }}
|
|
</a-tag>
|
|
</a-col>
|
|
<a-col :span="24" class="xyzContainer">
|
|
<span>相机翻转角：</span>
|
|
<a-tag color="#108ee9">
|
|
{{ Number.parseFloat(record.rxyz[2] == undefined ? 0 : record.rxyz[2]).toFixed(6) }}
|
|
</a-tag>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
<template #cxyz="{ text, record }">
|
|
<a-row>
|
|
<a-col :span="24" class="xyzContainer">
|
|
<span>相机经度：</span>
|
|
<a-tag color="#2db7f5">
|
|
{{ Number.parseFloat(record.cxyz[0] == undefined ? 0 : record.cxyz[0]).toFixed(6) }}
|
|
</a-tag>
|
|
</a-col>
|
|
<a-col :span="24" class="xyzContainer">
|
|
<span>相机纬度：</span>
|
|
<a-tag color="#87d068">
|
|
{{ Number.parseFloat(record.cxyz[1] == undefined ? 0 : record.cxyz[1]).toFixed(6) }}
|
|
</a-tag>
|
|
</a-col>
|
|
<a-col :span="24" class="xyzContainer">
|
|
<span>相机高度：</span>
|
|
<a-tag color="#108ee9">
|
|
{{ Number.parseFloat(record.cxyz[2] == undefined ? 0 : record.cxyz[2]).toFixed(4) }}
|
|
</a-tag>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
</a-table>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
<Model
|
|
:visible="visible"
|
|
:parentCodeArr="parentCodeArr"
|
|
:title="title"
|
|
:editInfo="doItem"
|
|
:nextNodeIndex="nextNodeIndex"
|
|
:parentNodeCode="selectedKeys[0]"
|
|
@closeWin="closeWin"
|
|
@updateDataSource="getDataSource"
|
|
>
|
|
</Model>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted, watch, createVNode } from 'vue';
|
|
import { message, Modal } from 'ant-design-vue';
|
|
import { defHttp } from '@/utils/http/axios';
|
|
import Model from './model/Modal.vue';
|
|
import SceneInfo from './model/sceneInfo/SenceInfo.vue';
|
|
import deleteIcon from '@/assets/images/delete.png';
|
|
import edit from '@/assets/images/edit.png';
|
|
import { CheckOutlined, CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
// import earthUtils from '@/utils/earthMap/earth';
|
|
// api接口
|
|
const querySceneList = (params) => {
|
|
return defHttp.get({ url: '/military/msMapScene/list', params }, { isTransformResponse: false });
|
|
};
|
|
const deleteScene = (params) => {
|
|
return defHttp.delete({ url: '/military/msMapScene/deleteBySceneCode', params }, { isTransformResponse: false });
|
|
};
|
|
|
|
const showDeleteConfirm = (record, doType) => {
|
|
Modal.confirm({
|
|
title: '删除',
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
content: '这将会删除此节点与它的子节点，你是否确认进行此操作？',
|
|
okText: '确认',
|
|
okType: 'danger',
|
|
cancelText: '取消',
|
|
onOk() {
|
|
doSomething(record, doType);
|
|
},
|
|
onCancel() {
|
|
console.log('Cancel');
|
|
},
|
|
});
|
|
};
|
|
|
|
// 查询条件
|
|
const filter = ref('');
|
|
// 表格列
|
|
const columns = [
|
|
// {
|
|
// title: '场景编号',
|
|
// dataIndex: 'sceneId',
|
|
// key: 'sceneId',
|
|
// align: 'center',
|
|
// width: '6%',
|
|
// },
|
|
// {
|
|
// title: '父场景编号',
|
|
// dataIndex: 'parentSceneCode',
|
|
// key: 'parentSceneCode',
|
|
// align: 'center',
|
|
// width: '6%',
|
|
// },
|
|
{
|
|
title: '场景名称',
|
|
dataIndex: 'sceneName',
|
|
key: 'sceneName',
|
|
width: '10%',
|
|
align: 'center',
|
|
// filters: filtersArr,
|
|
},
|
|
{
|
|
title: '视距',
|
|
dataIndex: 'distance',
|
|
key: 'distance',
|
|
align: 'center',
|
|
width: '10%',
|
|
},
|
|
{
|
|
title: '飞入时间',
|
|
dataIndex: 'flyTime',
|
|
key: 'flyTime',
|
|
align: 'center',
|
|
width: '6%',
|
|
},
|
|
{
|
|
title: '中心坐标',
|
|
dataIndex: 'xyz',
|
|
key: 'xyz',
|
|
slots: { customRender: 'xyz' },
|
|
align: 'center',
|
|
width: '14%',
|
|
},
|
|
{
|
|
title: '相机坐标',
|
|
dataIndex: 'cxyz',
|
|
key: 'cxyz',
|
|
slots: { customRender: 'cxyz' },
|
|
align: 'center',
|
|
width: '14%',
|
|
},
|
|
{
|
|
title: '相机角度',
|
|
dataIndex: 'rxyz',
|
|
key: 'rxyz',
|
|
slots: { customRender: 'rxyz' },
|
|
align: 'center',
|
|
width: '14%',
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
slots: { customRender: 'action' },
|
|
align: 'center',
|
|
width: '6%',
|
|
},
|
|
];
|
|
// 选中节点
|
|
const selectedKeys = ref(['00001']);
|
|
|
|
const parentCodeArr = ref([]);
|
|
// 表格数据源
|
|
const dataSource = ref([]);
|
|
// 树形图数据源
|
|
const treeData = ref([]);
|
|
// 下一个节点的下标
|
|
const nextNodeIndex = ref(1);
|
|
// 选中节点编码
|
|
const selectNodeCode = ref('00001');
|
|
// 原始数据根据父场景编码划分
|
|
const dataByParentCode = new Map();
|
|
// 原始数据更具编码划分
|
|
const dataByCode = new Map();
|
|
// 显示在表格中的数据
|
|
let allData = [];
|
|
// 根节点
|
|
const rootNodes = ref([]);
|
|
// 当前选中节点
|
|
let currentSelectNode = null;
|
|
// 传入弹窗数据
|
|
const subObject = ref({
|
|
sceneId: '',
|
|
sceneName: '',
|
|
parentSceneCode: '',
|
|
sceneType: 1,
|
|
viewDistance: 0,
|
|
duration: 0,
|
|
lon: 0,
|
|
lat: 0,
|
|
altitude: 0,
|
|
rotationX: 0,
|
|
rotationY: 0,
|
|
rotationZ: 0,
|
|
});
|
|
// 页签编码
|
|
const activeKey = ref('1');
|
|
// 场景信息只读
|
|
const sceneInfoDisable = ref(true);
|
|
const sceneInfoDisableChange = () => {
|
|
sceneInfoDisable.value = false;
|
|
};
|
|
// 场景信息ref
|
|
// const sceneInfo = ref(null);
|
|
// 更新传入的SubObj
|
|
const updateSubObj = function () {
|
|
sceneInfo.value.handleOk().then(() => {
|
|
closeChange();
|
|
getUpdateMySelf();
|
|
});
|
|
};
|
|
// 变为只读
|
|
const closeChange = function () {
|
|
sceneInfoDisable.value = true;
|
|
};
|
|
// 还原取消编辑的subObj
|
|
const revserObj = function () {
|
|
subObject.value = { ...dataByCode.get(selectNodeCode.value) };
|
|
closeChange();
|
|
};
|
|
// 获取数据和更新页面数据 isUpdateTree=true为更新选中节点下的子节点
|
|
const getDataSource = function (isUpdateTree = false) {
|
|
const params = { pageIndex: 1, pageSize: 9999 };
|
|
// 添加查询条件 父场景编码=选中编码
|
|
if (filter.value && filter.value.length > 0) {
|
|
params.parentSceneCode = filter.value;
|
|
}
|
|
// 查询返回数据
|
|
return querySceneList(params).then((res) => {
|
|
if (res.code == 200) {
|
|
allData = [];
|
|
const records = res.result.records;
|
|
// 全量更新清理数据
|
|
if (!isUpdateTree) {
|
|
dataByCode.clear();
|
|
dataByParentCode.clear();
|
|
rootNodes.value = [];
|
|
} else {
|
|
// 当前选中节点不为空，并且拥有下级节点时候，初始化下级节点
|
|
if (currentSelectNode && dataByParentCode.has(currentSelectNode.key)) {
|
|
dataByParentCode.set(currentSelectNode.key, []);
|
|
} else {
|
|
dataByParentCode.set('', []);
|
|
}
|
|
}
|
|
let addRootNode = null;
|
|
records.forEach((item) => {
|
|
const sceneId = item.sceneId;
|
|
// sceneCodes.push(sceneId);
|
|
const sceneName = item.sceneName;
|
|
const sceneType = item.sceneType;
|
|
const parentSceneCode = item.parentSceneCode;
|
|
parentCodeArr.value.push(sceneId);
|
|
const cxyz = [item.cameraLon, item.cameraLat, item.cameraAltitude];
|
|
const xyz = [item.lon, item.lat, item.altitude];
|
|
const rxyz = [item.rotationX, item.rotationY, item.rotationZ];
|
|
const distance = item.viewDistance;
|
|
const flyTime = item.duration;
|
|
const id = item.id;
|
|
const icon = item.icon;
|
|
|
|
// 创建对象
|
|
const obj = {
|
|
sceneId,
|
|
parentSceneCode,
|
|
sceneType,
|
|
sceneName,
|
|
cxyz,
|
|
xyz,
|
|
rxyz,
|
|
distance,
|
|
flyTime,
|
|
id,
|
|
icon,
|
|
};
|
|
if (selectedKeys.value[0] == '00001') {
|
|
if (parentSceneCode == '00001') {
|
|
allData.push(obj);
|
|
}
|
|
} else {
|
|
// 在表格中排除根节点
|
|
if (sceneId != '00001') {
|
|
allData.push(obj);
|
|
}
|
|
}
|
|
// dataByCode.set(sceneId, subObject);
|
|
if (!isUpdateTree) {
|
|
// 全量加载的所有根节点
|
|
if (sceneId.indexOf('-') == -1) {
|
|
rootNodes.value.push({
|
|
key: sceneId,
|
|
title: sceneName,
|
|
children: [],
|
|
});
|
|
}
|
|
} else {
|
|
// 增量新增的根节点
|
|
if (sceneId.indexOf('-') == -1) {
|
|
addRootNode = {
|
|
key: sceneId,
|
|
title: sceneName,
|
|
children: [],
|
|
};
|
|
}
|
|
}
|
|
// 向dataByParentCode中放入数据
|
|
if (dataByParentCode.has(parentSceneCode)) {
|
|
dataByParentCode.get(parentSceneCode).push(obj);
|
|
} else {
|
|
const datas = [obj];
|
|
dataByParentCode.set(parentSceneCode, datas);
|
|
}
|
|
});
|
|
if (!isUpdateTree) {
|
|
// 全量创建树
|
|
if (rootNodes.value.length > 0) {
|
|
// 创建树
|
|
createTreeData(rootNodes.value);
|
|
// 排序根节点找出下一个根节点的下标
|
|
rootNodes.value.sort((a, b) => {
|
|
return Number(a.key) - Number(b.key);
|
|
});
|
|
getRootMaxIndex();
|
|
// 更新树数据
|
|
treeData.value = rootNodes.value;
|
|
}
|
|
} else {
|
|
// 选中节点后新增
|
|
if (currentSelectNode) {
|
|
// 更新选中节点的子节点
|
|
updateTreeData(currentSelectNode);
|
|
// 设置树更新
|
|
treeData.value = [...treeData.value];
|
|
//获取当前节点数据
|
|
} else {
|
|
// 新增根节点
|
|
treeData.value = [...treeData.value, addRootNode];
|
|
}
|
|
}
|
|
|
|
// 设置表格更新
|
|
dataSource.value = allData;
|
|
} else {
|
|
message.error('无法获取到场景信息');
|
|
}
|
|
});
|
|
};
|
|
|
|
// 更新选中节点本身
|
|
const getUpdateMySelf = function () {
|
|
const params = { pageIndex: 1, pageSize: 9999 };
|
|
if (filter.value && filter.value.length > 0) {
|
|
// 新增查询条件
|
|
params.sceneId = filter.value;
|
|
}
|
|
querySceneList(params).then((res) => {
|
|
if (res.code == 200) {
|
|
const records = res.result.records;
|
|
const record = records[0];
|
|
if (record) {
|
|
// 成功请求时，修改该节点标题
|
|
currentSelectNode.title = record.sceneName;
|
|
// 更新原始数据
|
|
dataByCode.set(record.sceneId, record);
|
|
// 更新树
|
|
treeData.value = [...treeData.value];
|
|
}
|
|
}
|
|
});
|
|
};
|
|
// 计算下一个新增的根节点的下标
|
|
const getRootMaxIndex = function () {
|
|
nextNodeIndex.value = Number(rootNodes.value[rootNodes.value.length - 1].key) + 1;
|
|
};
|
|
// 创建树
|
|
const createTreeData = function (parentNodes) {
|
|
const pNodes = [];
|
|
parentNodes.forEach((pNode) => {
|
|
const childDatas = dataByParentCode.get(pNode.key);
|
|
if (childDatas != null) {
|
|
for (const childData of childDatas) {
|
|
const childNode = {
|
|
key: childData.sceneId,
|
|
title: childData.sceneName,
|
|
children: [],
|
|
};
|
|
pNode.children.push(childNode);
|
|
pNodes.push(childNode);
|
|
}
|
|
}
|
|
});
|
|
// 当前父节点集合的子节点集合大于0的时候在递归
|
|
if (pNodes.length > 0) {
|
|
createTreeData(pNodes);
|
|
}
|
|
};
|
|
// 更新选中节点的子节点
|
|
const updateTreeData = function (parentNodes) {
|
|
// 选中节点的子节点
|
|
const childNodes = parentNodes.children;
|
|
// 选中节点的子节点原始数据
|
|
const childDatas = dataByParentCode.get(parentNodes.key);
|
|
if (childDatas && childNodes) {
|
|
//当原始数据大于等于节点数时，走更新和新增逻辑
|
|
if (childDatas.length >= childNodes.length) {
|
|
for (const childData of childDatas) {
|
|
const found = childNodes.find((element) => element.key == childData.sceneId);
|
|
// 更新节点
|
|
if (found) {
|
|
found.title = childData.sceneName;
|
|
} else {
|
|
const childNode = {
|
|
key: childData.sceneId,
|
|
title: childData.sceneName,
|
|
children: [],
|
|
};
|
|
// 新增子节点
|
|
parentNodes.children.push(childNode);
|
|
}
|
|
}
|
|
} else {
|
|
// 当原始数据小于节点数时，走删除逻辑
|
|
// index要删除的下标
|
|
let index = 0;
|
|
for (const childNode of childNodes) {
|
|
const findIndex = childDatas.findIndex((element) => element.sceneId == childNode.key);
|
|
index++;
|
|
if (findIndex > -1) {
|
|
continue;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
//删除
|
|
childNodes.splice(index - 1, 1);
|
|
}
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
// 挂载后全量请求数据
|
|
getDataSource().then(() => {
|
|
if (treeData.value.length > 0) {
|
|
currentSelectNode = treeData.value[0];
|
|
}
|
|
});
|
|
});
|
|
// 对话框显隐
|
|
const visible = ref(false);
|
|
// 对话框标题
|
|
const title = ref('新增站点');
|
|
//新增场景
|
|
const addScene = function () {
|
|
//只有在树节点的数量大于0，并且没有选中节点的情况下提示用户
|
|
// console.log(treeData.value, selectedKeys.value);
|
|
if (treeData.value.length > 0 && selectedKeys.value.length == 0) {
|
|
message.warn('请先选中场景，再进行新增！');
|
|
return;
|
|
}
|
|
title.value = '新增站点';
|
|
// 新增前准备
|
|
beforeDo();
|
|
// 打开对话框
|
|
visible.value = true;
|
|
};
|
|
// 关闭对话框
|
|
const closeWin = function () {
|
|
visible.value = false;
|
|
doItem.value = null;
|
|
};
|
|
// 操作数据
|
|
const doItem = ref({});
|
|
const doSomething = function (item, doType) {
|
|
if (treeData.value.length > 0 && !selectedKeys.value) {
|
|
message.warn('请先选中场景，再进行修改！');
|
|
return;
|
|
}
|
|
if (doType === 'edit') {
|
|
doItem.value = item;
|
|
// console.log("doItem",item);
|
|
visible.value = true;
|
|
} else if (doType === 'delete') {
|
|
const formData = new FormData();
|
|
formData.append('sceneId', item.sceneId + '*');
|
|
deleteScene(formData).then((res) => {
|
|
if (res.code == 200) {
|
|
message.info('删除成功');
|
|
getDataSource(true);
|
|
}
|
|
});
|
|
} else if (doType === 'change') {
|
|
}
|
|
};
|
|
// 选中节点后，显示子节点
|
|
const showDataSourceFilter = function (selectedKeys, { selected, selectedNodes, node, event }) {
|
|
// 选中节点
|
|
if (selectedKeys.length > 0) {
|
|
// 记录当前节点
|
|
currentSelectNode = node.dataRef;
|
|
// 记录选中编码
|
|
selectNodeCode.value = selectedKeys[0];
|
|
// 过滤条件设置
|
|
filter.value = selectNodeCode.value;
|
|
// 更新选中节点的子节点
|
|
getDataSource(true);
|
|
// 更新下标
|
|
beforeDo();
|
|
// 设置传入数据
|
|
subObject.value = { ...dataByCode.get(selectNodeCode.value) };
|
|
// dataSource.value = dataByParentCode.get(selectNodeCode.value);
|
|
} else {
|
|
// 记录当前节点
|
|
currentSelectNode = treeData.value[0];
|
|
// 树节点大于0，却没有选中节点的情况下查询根节点下的子节点
|
|
// if (treeData.value.length > 0) {
|
|
|
|
// selectNodeCode.value = "00001";
|
|
// filter.value = "00001*";
|
|
// } else {
|
|
// // 查询所有
|
|
// selectNodeCode.value = "";
|
|
// filter.value = "";
|
|
// }
|
|
selectNodeCode.value = '';
|
|
filter.value = '';
|
|
// 执行数据源的更新
|
|
getDataSource();
|
|
}
|
|
};
|
|
// 新增前的准备
|
|
const beforeDo = function () {
|
|
// 获取当前选中子节点的集合
|
|
const childDatas = dataByParentCode.get(selectNodeCode.value);
|
|
if (childDatas && childDatas.length >= 0) {
|
|
const datas = [...childDatas];
|
|
if (datas.length > 0) {
|
|
// 排序
|
|
datas.sort((a, b) => {
|
|
const pathA = a.sceneId.split('-');
|
|
const aIndex = pathA[pathA.length - 1];
|
|
const pathB = b.sceneId.split('-');
|
|
const bIndex = pathB[pathB.length - 1];
|
|
return Number(bIndex) - Number(aIndex);
|
|
});
|
|
const maxPath = datas[0].sceneId.split('-');
|
|
// 更新下个新增子节点的作弊
|
|
nextNodeIndex.value = Number(maxPath[maxPath.length - 1]) + 1;
|
|
} else {
|
|
nextNodeIndex.value = 1;
|
|
}
|
|
} else {
|
|
// 没有子节点则下个坐标为1
|
|
nextNodeIndex.value = 1;
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.mainContainer {
|
|
max-height: 800px;
|
|
background-color: #fff;
|
|
padding: 8px;
|
|
}
|
|
|
|
.container1 {
|
|
position: relative;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.textdisplay {
|
|
color: #000;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.inputText {
|
|
width: 20%;
|
|
margin-left: 5%;
|
|
}
|
|
|
|
.buttonQuery {
|
|
margin-left: 1%;
|
|
}
|
|
|
|
.addProject {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.hrDivider {
|
|
border: 0.1rem #1aa391 solid;
|
|
}
|
|
|
|
.actionImg {
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xyzContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.xyzContainer > span:nth-child(2) {
|
|
width: 80px;
|
|
height: 22px;
|
|
}
|
|
|
|
.action-div {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.tree-container {
|
|
width: 15%;
|
|
overflow: auto;
|
|
max-height: 730px;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.table-container {
|
|
width: 85%;
|
|
}
|
|
|
|
.scene-info-do {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.scene-info-icon {
|
|
font-size: 24px;
|
|
}
|
|
</style>
|
|
|