用户管理页面展示优化
This commit is contained in:
parent
f4745a253c
commit
427c04cc5d
|
|
@ -2,13 +2,6 @@
|
|||
<div class="app-container">
|
||||
<el-form size="small" :inline="true" ref="queryForm" :model="queryParams">
|
||||
<el-form-item label="项目名称" prop="projectId">
|
||||
<!-- <el-input
|
||||
clearable
|
||||
placeholder="请输入项目名称"
|
||||
v-model="queryParams.proName"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/> -->
|
||||
|
||||
<el-select
|
||||
placeholder="请选择项目名称"
|
||||
style="width: 240px"
|
||||
|
|
@ -18,22 +11,6 @@
|
|||
<el-option :key="item.id" :value="item.id" :label="item.name" v-for="item in projectSelectList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="所属单位" prop="unit">
|
||||
<el-input
|
||||
clearable
|
||||
placeholder="请输入所属单位"
|
||||
v-model="queryParams.unit"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>-->
|
||||
<!-- <el-form-item label="负责人" prop="chargePerson">-->
|
||||
<!-- <el-input-->
|
||||
<!-- clearable-->
|
||||
<!-- placeholder="请输入负责人"-->
|
||||
<!-- v-model="queryParams.chargePerson"-->
|
||||
<!-- @keyup.enter.native="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<el-form-item label="设计人" prop="designer">
|
||||
<el-input
|
||||
|
|
@ -59,7 +36,6 @@
|
|||
模型预览
|
||||
</el-button>
|
||||
</el-col>
|
||||
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getModelList"></right-toolbar> -->
|
||||
</el-row>
|
||||
|
||||
<el-table border row-key="id" v-loading="loading" :data="modelList" default-expand-all>
|
||||
|
|
@ -97,16 +73,6 @@
|
|||
{{ row.modelUrl ? '查看模型' : '上传模型' }}
|
||||
</el-button>
|
||||
|
||||
<!-- <el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(row)"
|
||||
v-if="row.level != 1"
|
||||
>
|
||||
修改
|
||||
</el-button> -->
|
||||
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
|
|
@ -121,14 +87,6 @@ v-if="row.level != 1"
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- <pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getModelList"
|
||||
/> -->
|
||||
|
||||
<el-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="项目名称" prop="proName">
|
||||
|
|
@ -169,7 +127,6 @@ v-show="total > 0"
|
|||
@refreshParentList="getModelList"
|
||||
/>
|
||||
</el-dialog>
|
||||
<!-- 添加或修改岗位对话框 -->
|
||||
<el-dialog
|
||||
width="40%"
|
||||
append-to-body
|
||||
|
|
@ -208,16 +165,13 @@ v-show="total > 0"
|
|||
<div id="map-container-batch" class="model-map-container"></div>
|
||||
</div>
|
||||
<!-- 单独查看模型时，只显示地图容器，不显示树形 -->
|
||||
<div id="map-container-single" v-else style="min-height: 76vh;"></div>
|
||||
|
||||
<!-- <dxf-viewer :entities="dxfPreviewUrl"></dxf-viewer> -->
|
||||
<div id="map-container-single" v-else class="single-map-container"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddOrEditForm from './addOrEditForm.vue'
|
||||
// import UseOrReturnForm from './useOrReturnForm.vue'
|
||||
import UseOrReturnForm from './useOrReturnFormNew.vue'
|
||||
import UseRecordTable from './useRecordTable.vue'
|
||||
import DxfViewer from './DxfViewer.vue'
|
||||
|
|
@ -294,11 +248,6 @@ export default {
|
|||
level: 1,
|
||||
count: 2,
|
||||
children: [
|
||||
// {
|
||||
// label: '节点1',
|
||||
// id: 1,
|
||||
// level: 2,
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -356,28 +305,12 @@ export default {
|
|||
},
|
||||
// 查看模型按钮（单独查看，不显示树形）
|
||||
handleViewModel(row) {
|
||||
/* const modelUrl = row.modelUrl
|
||||
if (!modelUrl || !modelUrl.endsWith('.dxf')) {
|
||||
this.$modal.msgWarning('模型地址无效或不是DXF文件')
|
||||
return
|
||||
} */
|
||||
/* 新需求 重新做 上面建议不要删除 有需要直接可以查看 */
|
||||
// openView({ id: row.id })
|
||||
// .then((response) => {
|
||||
// this.dxfPreviewUrl = response.data
|
||||
// this.viewDialogVisible = true
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// // console.error('获取项目详情失败:', error)
|
||||
// })
|
||||
|
||||
// 标记为非批量预览（不显示树形）
|
||||
this.isBatchPreview = false
|
||||
openView({ id: row.id })
|
||||
.then((res) => {
|
||||
this.modelPreviewInfoList = res.data
|
||||
this.modelPreviewVisible = true
|
||||
|
||||
console.log('res', res.data)
|
||||
this.initMap()
|
||||
})
|
||||
|
|
@ -420,7 +353,6 @@ return
|
|||
},
|
||||
|
||||
// 获取模型列表
|
||||
// 生成 UUID，备用当 nodeId 缺失时
|
||||
generateUUID() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
const r = (Math.random() * 16) | 0
|
||||
|
|
@ -429,8 +361,6 @@ return
|
|||
})
|
||||
},
|
||||
|
||||
// 获取模型列表
|
||||
// 获取模型列表 - 最终优化版
|
||||
// 获取模型列表 - 最终优化版
|
||||
async getModelList() {
|
||||
this.loading = true
|
||||
|
|
@ -439,70 +369,12 @@ return
|
|||
console.log(res, '模型列表')
|
||||
this.loading = false
|
||||
this.modelList = this.onBuildTree(res)
|
||||
// getModelListApi(this.queryParams)
|
||||
// .then((response) => {
|
||||
// const rawList = response.rows || []
|
||||
|
||||
// // 增强型递归处理
|
||||
// const formatNodes = (nodes, level = 2) => {
|
||||
// // 从第二级开始
|
||||
// if (!Array.isArray(nodes)) return []
|
||||
|
||||
// return nodes
|
||||
// .filter((item) => item && item.nodeId) // 过滤无效节点
|
||||
// .map((item) => ({
|
||||
// ...item,
|
||||
// id: item.nodeId,
|
||||
// name: item.nodeName || '未命名节点',
|
||||
// level: level, // 添加层级标记
|
||||
// // 递归处理子节点，层级+1
|
||||
// nodes: formatNodes(item.nodes || item.children || [], level + 1),
|
||||
// }))
|
||||
// }
|
||||
|
||||
// // 处理项目层数据
|
||||
// const formatted = rawList.map((project) => {
|
||||
// const children = project.children || []
|
||||
|
||||
// // 获取层级名称（项目级才需要）
|
||||
// let levelName = ''
|
||||
// let nodeCount = ''
|
||||
// if (this.levelList && this.levelList.length > 0) {
|
||||
// const levelConfig = this.levelList.find(
|
||||
// (item) => item.configId == project.level, // 注意类型匹配
|
||||
// )
|
||||
// levelName = levelConfig ? levelConfig.configName : ''
|
||||
// }
|
||||
|
||||
// return {
|
||||
// ...project,
|
||||
// id: project.projectId,
|
||||
// name: project.proName || '未命名项目',
|
||||
// level: 1, // 项目级标记为1
|
||||
// levelName: project.levelName, // 添加层级名称
|
||||
// nodes: formatNodes(children),
|
||||
// rawData: project,
|
||||
// nodeCount: project.nodeCount,
|
||||
// }
|
||||
// })
|
||||
|
||||
// this.modelList = formatted
|
||||
// this.total = response.total
|
||||
// this.loading = false
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error('获取模型列表失败:', error)
|
||||
// this.loading = false
|
||||
// this.$message.error('模型数据加载失败，请重试')
|
||||
// })
|
||||
},
|
||||
// 上传按钮
|
||||
handleUploadModel(row) {
|
||||
this.$nextTick(() => {
|
||||
this.currentProjectId = row.id || null
|
||||
this.useOrReturnFormVisible = true
|
||||
// 找到子组件并调用它的 resetForm 方法 (如果存在)
|
||||
// 确保 useOrReturnFormComponentRef 存在且 resetForm 是一个函数
|
||||
if (
|
||||
this.$refs.useOrReturnFormComponentRef &&
|
||||
typeof this.$refs.useOrReturnFormComponentRef.resetForm === 'function'
|
||||
|
|
@ -527,7 +399,6 @@ return
|
|||
|
||||
const editForm = { deviceName: proName, id, level, nodeCount }
|
||||
this.$nextTick(() => {
|
||||
// 确保 addOrEditComponentRef 存在
|
||||
if (this.$refs.addOrEditComponentRef) {
|
||||
this.$refs.addOrEditComponentRef.setFormData(editForm)
|
||||
}
|
||||
|
|
@ -543,9 +414,6 @@ return
|
|||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = '修改项目'
|
||||
// 注意：这里 form.level 的赋值可能需要根据您的实际数据结构调整
|
||||
// 比如，如果 response.data.level 是 configId，则可以直接赋值
|
||||
// this.form.level = response.data.level;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('获取项目详情失败:', error)
|
||||
|
|
@ -557,15 +425,6 @@ return
|
|||
this.$modal
|
||||
.confirm('是否确认删除当前节点数据吗？')
|
||||
.then(async () => {
|
||||
// 根据 row.level 判断是删除项目还是删除模型节点
|
||||
// let res
|
||||
// if (row.level === 1) {
|
||||
// // 假设 level 1 是项目
|
||||
// res = await delProject(row.id) // 使用 delProject API 删除项目
|
||||
// } else {
|
||||
// res = await delModelApi({ id: row.id }) // 使用 delModelApi 删除模型节点
|
||||
// }
|
||||
|
||||
const res = await delModelApi({ id })
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
|
|
@ -592,11 +451,6 @@ return
|
|||
|
||||
// 关闭领用或归还对话框 (UseOrReturnForm)
|
||||
closeUseOrReturnFormDialog() {
|
||||
// 这个方法现在由 @closeUseOrReturnFormDialog="useOrReturnFormVisible = false" 直接处理，
|
||||
// 如果还需要 resetForm，可以取消注释下面两行并确保子组件有此方法
|
||||
// if (this.$refs.useOrReturnFormComponentRef) {
|
||||
// this.$refs.useOrReturnFormComponentRef.resetForm();
|
||||
// }
|
||||
this.useOrReturnFormVisible = false
|
||||
},
|
||||
|
||||
|
|
@ -738,7 +592,6 @@ return
|
|||
getAllChildNodeIds(node) {
|
||||
let nodeIds = []
|
||||
// 先添加当前节点ID（如果需要包含当前节点自身模型）
|
||||
// 若只需子节点，可注释此行
|
||||
nodeIds.push(node.id)
|
||||
// 递归遍历子节点
|
||||
if (node.children && node.children.length > 0) {
|
||||
|
|
@ -751,11 +604,6 @@ return
|
|||
|
||||
// 节点勾选状态变化事件（修改：支持父节点勾选，加载所有子节点）
|
||||
handleNodeCheckChange(node, checked) {
|
||||
// 移除原有的末级节点校验，允许所有节点触发
|
||||
// if (!node || !node.isLeaf || Number(node.nodelevel) !== Number(node.nodeCount)) {
|
||||
// return
|
||||
// }
|
||||
|
||||
// 1. 递归获取当前节点下所有子节点ID
|
||||
const allChildIds = this.getAllChildNodeIds(node);
|
||||
|
||||
|
|
@ -844,30 +692,20 @@ return
|
|||
this.modelPreviewVisible = true
|
||||
|
||||
this.initMap()
|
||||
|
||||
// 加载所有模型数据
|
||||
// openViewAll({ projectId: selectedProjectId })
|
||||
// .then((res) => {
|
||||
// this.modelPreviewInfoList = res.data
|
||||
// this.modelPreviewVisible = true
|
||||
// this.initMap()
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.error('获取模型详情失败:', err)
|
||||
// })
|
||||
// this.modelPreviewVisible = true
|
||||
//
|
||||
// // 百度地图初始化
|
||||
// this.initMap()
|
||||
},
|
||||
|
||||
// 预览弹框关闭
|
||||
onCloseMapView() {
|
||||
// 销毁地图实例
|
||||
// 销毁地图实例并清除DOM残留
|
||||
if (this.map) {
|
||||
this.map.clearOverlays()
|
||||
this.map = null
|
||||
}
|
||||
// 清空两个地图容器的内容，消除样式残留
|
||||
const batchMapContainer = document.getElementById('map-container-batch')
|
||||
const singleMapContainer = document.getElementById('map-container-single')
|
||||
if (batchMapContainer) batchMapContainer.innerHTML = ''
|
||||
if (singleMapContainer) singleMapContainer.innerHTML = ''
|
||||
// 清空勾选状态
|
||||
this.checkedNodeIds = []
|
||||
if (this.$refs.projectTree) {
|
||||
|
|
@ -893,6 +731,10 @@ return
|
|||
|
||||
// 根据是否批量预览，选择不同的地图容器
|
||||
const mapContainerId = this.isBatchPreview ? 'map-container-batch' : 'map-container-single'
|
||||
// 先清空目标容器，避免残留
|
||||
const targetContainer = document.getElementById(mapContainerId)
|
||||
if (targetContainer) targetContainer.innerHTML = ''
|
||||
// 重新创建地图实例
|
||||
this.map = new BMapGL.Map(mapContainerId) // 创建地图实例
|
||||
this.map.setMapType(BMAP_EARTH_MAP) // 地球模式
|
||||
this.map.setDisplayOptions({
|
||||
|
|
@ -955,18 +797,6 @@ return
|
|||
},
|
||||
)
|
||||
this.map.addOverlay(line)
|
||||
// const arcPoints = this.generateArcPoints(
|
||||
// item.center,
|
||||
// item.radius,
|
||||
// item.start_point,
|
||||
// item.end_point,
|
||||
// )
|
||||
// const arcPolyline = new BMapGL.Polyline(arcPoints, {
|
||||
// strokeColor: 'red',
|
||||
// strokeWeight: 2,
|
||||
// strokeOpacity: 0.8,
|
||||
// })
|
||||
// this.map.addOverlay(arcPolyline)
|
||||
} else {
|
||||
// 如果没有起点和终点，则绘制完整圆（备用方案）
|
||||
const circle = new BMapGL.Circle(
|
||||
|
|
@ -982,48 +812,12 @@ return
|
|||
}
|
||||
}
|
||||
})
|
||||
|
||||
// if (pointList.points && pointList.points.length > 0) {
|
||||
// // 提取坐标点和角度信息
|
||||
// const pointsWithAngles = pointList.points.map((point) => {
|
||||
// const [lng, lat, , , angle] = point // 提取经度、纬度和角度
|
||||
// return {
|
||||
// point: new BMapGL.Point(lng, lat),
|
||||
// angle: angle || 40, // 角度信息
|
||||
// }
|
||||
// })
|
||||
|
||||
// console.log(pointsWithAngles, 'pointsWithAngles')
|
||||
|
||||
// // 根据颜色设置线条样式
|
||||
// const getColorByIndex = (colorIndex) => {
|
||||
// const colors = ['red', 'yellow', 'green', 'cyan', 'blue', 'magenta', 'white', 'gray']
|
||||
// return colors[colorIndex] || 'red'
|
||||
// }
|
||||
|
||||
// // 生成一个0-7的随机整数作为颜色索引
|
||||
// const colorIndex = Math.floor(Math.random() * 7)
|
||||
|
||||
// // 创建带弧度的多段线
|
||||
// const curvedLinePoints = this.createCurvedLine(pointsWithAngles)
|
||||
|
||||
// // 创建多段线（带弧度）
|
||||
// const polyline = new BMapGL.Polyline(curvedLinePoints, {
|
||||
// strokeColor: getColorByIndex(colorIndex),
|
||||
// strokeWeight: 2,
|
||||
// strokeOpacity: 0.8,
|
||||
// strokeStyle: 'solid',
|
||||
// })
|
||||
|
||||
// this.map.addOverlay(polyline)
|
||||
// }
|
||||
} else if (item.entityType === 'LINE') {
|
||||
const geometry = JSON.parse(item.geometry)
|
||||
const start = geometry.start
|
||||
const end = geometry.end
|
||||
|
||||
// 转换坐标
|
||||
|
||||
const polyline = new BMapGL.Polyline(
|
||||
[new BMapGL.Point(start[0], start[1]), new BMapGL.Point(end[0], end[1])],
|
||||
{ strokeColor: 'red', strokeWeight: 2, strokeOpacity: 0.8 },
|
||||
|
|
@ -1035,7 +829,6 @@ return
|
|||
const radius = geometry.radius
|
||||
|
||||
// 转换中心点坐标
|
||||
|
||||
if (center.length > 0) {
|
||||
const circle = new BMapGL.Circle(new BMapGL.Point(center[0], center[1]), radius, {
|
||||
strokeColor: 'blue',
|
||||
|
|
@ -1135,13 +928,6 @@ return
|
|||
// 计算当前视图的最佳缩放级别
|
||||
const viewport = this.map.getViewport(points)
|
||||
|
||||
// 调整缩放级别：在最佳级别基础上增加n级（值越大视角越近）
|
||||
const zoomOffset = 2 // 视角拉近的幅度（建议1-3）
|
||||
// const adjustedZoom = Math.min(
|
||||
// viewport.zoom + zoomOffset,
|
||||
// this.map.getMaxZoom(), // 不超过地图最大缩放级别
|
||||
// )
|
||||
|
||||
const adjustedZoom = Math.min(
|
||||
16, // 直接设置一个较大的固定值（如18）
|
||||
this.map.getMaxZoom(),
|
||||
|
|
@ -1248,19 +1034,15 @@ return
|
|||
}
|
||||
|
||||
// 确定绘制方向：默认按较小角度差的方向绘制
|
||||
// 如果角度差大于 π（180度），则反向绘制
|
||||
if (Math.abs(angleDiff) > Math.PI) {
|
||||
angleDiff = angleDiff > 0 ? angleDiff - 2 * Math.PI : angleDiff + 2 * Math.PI
|
||||
}
|
||||
|
||||
// 计算实际半径（度单位）
|
||||
// 如果半径单位是米，需要转换为度
|
||||
// 1度纬度约等于111公里，1度经度在当前位置约等于111*cos(lat)公里
|
||||
const latRad = (centerPoint.lat * Math.PI) / 180
|
||||
const metersPerDegreeLat = 111000 // 每度纬度约111公里
|
||||
|
||||
// 判断半径单位：如果半径值很大（>1），可能是米；如果很小（<0.1），可能是度
|
||||
// 这里假设如果半径大于1，则是米单位，需要转换
|
||||
let radiusInDegrees = radius
|
||||
if (radius > 1) {
|
||||
// 假设是米单位，转换为度
|
||||
|
|
@ -1281,7 +1063,6 @@ return
|
|||
const angle = startAngle + angleDiff * t
|
||||
|
||||
// 计算圆弧上的点坐标
|
||||
// 考虑经纬度的差异，使用正确的转换
|
||||
const deltaLng = (radiusInDegrees * Math.cos(angle)) / Math.cos(latRad)
|
||||
const deltaLat = radiusInDegrees * Math.sin(angle)
|
||||
const x = centerPoint.lng + deltaLng
|
||||
|
|
@ -1323,8 +1104,11 @@ return
|
|||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
#map-container-single {
|
||||
/* 单独地图容器样式 */
|
||||
.single-map-container {
|
||||
min-height: 76vh;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 模型预览弹窗样式（仅批量预览时生效） */
|
||||
|
|
@ -1332,6 +1116,8 @@ return
|
|||
display: flex;
|
||||
height: 76vh;
|
||||
gap: 10px;
|
||||
position: relative; /* 建立层级上下文 */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.model-tree-container {
|
||||
|
|
@ -1341,17 +1127,25 @@ return
|
|||
border-radius: 4px;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
background-color: #ffffff; /* 强制设置白色背景 */
|
||||
position: relative; /* 建立层级上下文 */
|
||||
z-index: 10; /* 高于地图容器，防止被覆盖 */
|
||||
flex-shrink: 0; /* 防止树形容器被挤压变形 */
|
||||
}
|
||||
|
||||
.model-map-container {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
position: relative; /* 建立层级上下文 */
|
||||
z-index: 1; /* 低于树形容器 */
|
||||
}
|
||||
|
||||
/* 树形组件样式优化 */
|
||||
::v-deep .model-tree {
|
||||
--el-tree-node-content-hover-bg-color: #f5f7fa;
|
||||
position: relative;
|
||||
z-index: 11; /* 确保树形内容高于容器 */
|
||||
}
|
||||
|
||||
::v-deep .model-tree .el-tree-node__checkbox {
|
||||
|
|
|
|||
Loading…
Reference in New Issue