pns-web/src/views/map/maplist/navigation.vue

<template>
	<div class="main">
		<el-row>
			<el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1" style="position: relative;">
				<div class="main-menu">
					<div class="img-container" :class="{ 'active': activeIndex === 0 }" @click="openDraSetting"><img
							src="@/assets/icons/img/setting.png" class="notification__image" width="22px" height="22px" />
						<span class="notification__title">功能</span>
					</div>
					<div class="img-container" :class="{ 'active': activeIndex === 1 }" @click="openPoint"><img
							src="@/assets/icons/img/post.png" class="notification__image" width="22px" height="22px" />
						<span class="notification__title">目标点</span>
					</div>
					<div class="img-container" :class="{ 'active': activeIndex === 2 }" @click="openTask"><img
							src="@/assets/icons/img/task.png" class="notification__image" width="22px" height="22px" />
						<span class="notification__title">任务</span>
					</div>
					<div class="img-container" :class="{ 'active': activeIndex === 3 }" @click="initNavigation"><img
							src="@/assets/icons/img/init.png" class="notification__image" width="22px" height="22px" />
						<span class="notification__title">初始化</span>
					</div>
					<div class="img-container" @click="restNavigation"><img src="@/assets/icons/img/restart.png"
							class="notification__image" width="22px" height="22px" />
						<span class="notification__title">重启</span>
					</div>
					<div class="img-container" @click="offNavigation"><img src="@/assets/icons/img/off.png"
							class="notification__image" width="22px" height="22px" />
						<span class="notification__title">结束</span>
					</div>
				</div>
				<!-- 功能设置 -->
				<div class="drawer" v-show="settingDrawer" style="width: 200px;">
					<div style="position: relative;">
						<p>点云</p>
						<el-radio-group v-model="settingParams.pointCloud" size="mini">
							<el-radio-button :label="true">开</el-radio-button>
							<el-radio-button :label="false">关</el-radio-button>
						</el-radio-group>
						<p>底图</p>
						<el-radio-group v-model="settingParams.baseMap" size="mini">
							<el-radio-button :label="true">开</el-radio-button>
							<el-radio-button :label="false">关</el-radio-button>
						</el-radio-group>
						<p>点ID</p>
						<el-radio-group v-model="settingParams.pointId" size="mini">
							<el-radio-button :label="true">开</el-radio-button>
							<el-radio-button :label="false">关</el-radio-button>
						</el-radio-group>
						<p>位置跟随</p>
						<el-radio-group v-model="settingParams.follow" size="mini">
							<el-radio-button :label="true">开</el-radio-button>
							<el-radio-button :label="false">关</el-radio-button>
						</el-radio-group>
						<p>网络邻居</p>
						<el-radio-group v-model="settingParams.network" size="mini">
							<el-radio-button :label="true">开</el-radio-button>
							<el-radio-button :label="false">关</el-radio-button>
						</el-radio-group>
					</div>
					<div class="drawer-close" @click="closeDra('hand')"><i class="el-icon-close"></i></div>
				</div>
				<!-- 目标点 -->
				<div class="drawer" v-show="pointDrawer" style="width: 450px;">
					<div style="position: relative;">
						<div style="width: 100%;margin-bottom: 10px;">
							<!-- <el-tooltip class="item" effect="dark" content="将点位显示在地图上" placement="top">
								<el-button type="primary" icon="el-icon-search" size="mini" :disabled="multiple"></el-button>
							</el-tooltip> -->
							<el-tooltip class="item" effect="dark" content="上移" placement="top">
								<el-button type="primary" icon="el-icon-top" size="mini" :disabled="single" @click="moveUp"></el-button>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="下移" placement="top">
								<el-button type="primary" icon="el-icon-bottom" size="mini" :disabled="single"
									@click="moveDown"></el-button>
							</el-tooltip>
							<el-popconfirm title="批量删除选中点位数据？" @confirm="removePoint">
								<el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" slot="reference"
									style="margin-left: 10px;"></el-button>
							</el-popconfirm>
						</div>
						<el-table ref="multipleTable" :data="pointList" tooltip-effect="dark" style="width: 100%" max-height="200px"
							@selection-change="handleSelectionChange" border>
							<el-table-column type="selection" width="45" align="center">
							</el-table-column>
							<el-table-column label="编号" width="60" show-overflow-tooltip align="center">
								<template slot-scope="scope">{{ scope.row.id }}</template>
							</el-table-column>
							<el-table-column label="x坐标" width="90" show-overflow-tooltip align="center">
								<template slot-scope="scope">{{ scope.row.x }}</template>
							</el-table-column>
							<el-table-column label="y坐标" width="90" show-overflow-tooltip align="center">
								<template slot-scope="scope">{{ scope.row.y }}</template>
							</el-table-column>
							<el-table-column label="操作" show-overflow-tooltip align="center">
								<template slot-scope="scope">
									<el-button size="mini" type="text" icon="el-icon-edit" @click="editPoint(scope.row)"
										style="margin-right: 10px;">编辑</el-button>
									<el-popconfirm title="删除当前点位数据？" @confirm="removePoint(scope.row)">
										<el-button size="mini" type="text" icon="el-icon-edit" slot="reference">删除</el-button>
									</el-popconfirm>
								</template>
							</el-table-column>
						</el-table>
						<div style="width: 100%;margin-top: 10px;">
							<el-button type="warning" icon="el-icon-caret-right" size="mini" :disabled="single">立即前往</el-button>
							<el-button type="success" icon="el-icon-folder-add" size="mini" :disabled="multiple"
								@click="taskGenerateDiaShow = true">生成任务</el-button>
							<el-button type="success" icon="el-icon-thumb" size="mini" @click="mapSelectEle('open')"
								v-if="!pointSelectionEnabled">地图选点模式</el-button>
							<el-button type="danger" icon="el-icon-thumb" size="mini" @click="mapSelectEle('close')"
								v-else>关闭选点模式</el-button>
						</div>
					</div>
					<div class="drawer-close" @click="closeDra('hand')"><i class="el-icon-close"></i></div>
				</div>
				<!-- 任务 -->
				<div class="drawer" v-if="taskDrawer" style="width: 300px;">
					<div style="position: relative;">
						<el-empty description="暂无创建的任务!" v-if="taskDataList.length < 1"></el-empty>
						<el-collapse v-else>
							<el-collapse-item v-for="(item, index) in taskDataList" :name="index" :key="item.taskId">
								<template slot="title"><span>任务名:{{ item.taskName }}</span>
									<el-tag type="info" v-if="item.status == 1" size="mini" class="task-status-tag">空闲中</el-tag><el-tag
										type="success" v-else size="mini" class="task-status-tag">执行中</el-tag>
								</template>
								<div class="collapse-content-div">
									<el-button type="danger" size="mini" icon="el-icon-delete"
										@click="removeTaskItem(item)">删除</el-button>
									<el-button type="warning" size="mini" icon="el-icon-view">查看</el-button>
									<el-button type="success" size="mini" icon="el-icon-caret-right" :disabled="item.status == 0"
										@click="executeTask(item)">执行</el-button>
								</div>
							</el-collapse-item>
						</el-collapse>
					</div>
					<div class="drawer-close" @click="closeDra('hand')" style="right: 1px;top: 1px;"><i class="el-icon-close"></i>
					</div>
				</div>
			</el-col>
			<el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23">
				<div class="main-content">
					<!-- 当前操作类型标记 -->
					<div class="hand-ment-mark">
						<el-tag type="danger" effect="dark" size="mini" v-if="nowHandMenu">{{ nowHandMenu }}</el-tag>
					</div>
					<OlMap ref="olmap" :width="olWidth + 'px'" :height="olHeight + 'px'" backgroundColor="#F5F5F5" :mapName="mapName"
						:pointSwitch="settingParams.pointId" :baseLayerShow="settingParams.baseMap"
						:pointSelectionEnabled="pointSelectionEnabled" :poseInitEnable="poseInitEnable" @addNowPoint="addNowPoint"
						:isRobotFollow="settingParams.follow" @initNavigationResult="initNavigationResult"></OlMap>
				</div>
			</el-col>
		</el-row>
		<el-dialog title="目标点编辑" :visible.sync="pointEditDiaShow" width="360px">
			<el-row>
				<span class="point-edit-span">x坐标(m)</span><el-input v-model="pointEditData.x" placeholder="请输入x坐标" size="mini"
					class="point-edit-input"></el-input>
			</el-row>
			<span class="point-edit-span">y坐标(m)</span><el-input v-model="pointEditData.y" placeholder="请输入y坐标"
				size="mini"></el-input>
			<span class="point-edit-span">规划类型</span><el-select v-model="pointEditData.type" placeholder="请选择" size="mini">
				<el-option v-for="item in planOptions" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<span class="point-edit-span">添加动作</span>
			<div v-for="(item, index) in pointEditData.actionMenuList" style="margin-bottom: 8px;" class="action-menu">
				<el-select v-model="item.value" placeholder="请选择" size="mini" @change="changeAction(index)">
					<el-option v-for="item in actionOptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-tooltip class="item" effect="dark" content="输入等待时间(秒)" placement="top">
					<el-input v-model="item.other" placeholder="时间(秒)" size="mini" style="width: 60px;margin-left: 5px;"
						class="action-menu_input" v-if="'other' in item"></el-input>
				</el-tooltip>
				<el-button type="info" icon="el-icon-plus" circle size="mini" style="margin-left: 5px;padding: 5px;"
					@click="appendActionMenu"></el-button>
				<el-button type="info" icon="el-icon-minus" circle size="mini" style="margin-left: 5px;padding: 5px;"
					@click="removeActionMenu(index)" v-if="index > 0"></el-button>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="pointEditDiaShow = false">取 消</el-button>
				<el-button type="primary" @click="submitEditPoint">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="创建任务" :visible.sync="taskGenerateDiaShow" width="400px">
			<el-row>
				<span class="point-edit-span">任务名称</span><el-input v-model="generateTaskParam.taskName" placeholder="请输入任务名"
					size="mini" class="point-edit-input" style="width: 50%;"></el-input>
				<span class="point-edit-span">执行次数</span><el-input-number v-model="generateTaskParam.count"
					controls-position="right" :min="1" :max="100" size="mini" style="width: 50%;"></el-input-number>
				<span class="point-edit-span">开始时间</span><el-time-picker v-model="generateTaskParam.time" :picker-options="{
					selectableRange: '00:00:00 - 23:59:59'
				}" placeholder="选择时间" size="mini">
				</el-time-picker>
				<span class="point-edit-span">执行日期</span>
				<el-checkbox-group v-model="generateTaskParam.date" style="margin-bottom: 10px;">
					<el-checkbox label="1">周一</el-checkbox>
					<el-checkbox label="2">周二</el-checkbox>
					<el-checkbox label="3">周三</el-checkbox>
					<el-checkbox label="4">周四</el-checkbox>
					<el-checkbox label="5">周五</el-checkbox>
					<el-checkbox label="6">周六</el-checkbox>
					<el-checkbox label="7">周日</el-checkbox>
				</el-checkbox-group>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeTaskGenerate()">取 消</el-button>
				<el-button type="primary" @click="submitTaskGenerate">确 定</el-button>
			</span>
		</el-dialog>
		<div class="info-dra-class-all">
			<el-drawer title="实时信息" :visible.sync="infoDrawer" :direction="'rtl'" :modal="false" :size="'100%'"
				:wrapperClosable="false" custom-class="navigation-info-dra-class" :modal-append-to-body="false">
				<div class="info-dra-class_content">
					<div style="margin-bottom: 20px;">
						<div class="info-dra_title">
							<div
								style="height: 20px;width: 5px;background-color: #6565FC;margin-right: 5px;border-radius: 4px 4px 0 0;">
							</div><span>当前地图</span>
						</div>
						<span class="info-dra_content">shanghai</span>
					</div>
					<div style="margin-bottom: 20px;">
						<div class="info-dra_title">
							<div
								style="height: 20px;width: 5px;background-color: #6565FC;margin-right: 5px;border-radius: 4px 4px 0 0;">
							</div><span>当前任务</span>
						</div>
						<span class="info-dra_content">测试任务</span>
					</div>
					<div style="margin-bottom: 20px;">
						<div class="info-dra_title">
							<div
								style="height: 20px;width: 5px;background-color: #6565FC;margin-right: 5px;border-radius: 4px 4px 0 0;">
							</div><span>实时信息</span>
						</div>
						<span class="info-dra_content info-dra_content_title">速度: <span
								class="info-dra_content_other">0.35m/s</span></span>
						<span class="info-dra_content info-dra_content_title">速度指令: <span
								class="info-dra_content_other">0.22m/s</span></span>
						<span class="info-dra_content info-dra_content_title">坐标: <span class="info-dra_content_other">(1.813,
								-63.931,
								0.000)</span></span>
						<span class="info-dra_content info-dra_content_title">航向: <span
								class="info-dra_content_other">-79.6°</span></span>
						<span class="info-dra_content info-dra_content_title">累计里程: <span
								class="info-dra_content_other">5965352.00m</span></span>
						<span class="info-dra_content info-dra_content_title">配准误差: <span
								class="info-dra_content_other">10.000</span></span>
						<span class="info-dra_content info-dra_content_title">电量: <span
								class="info-dra_content_other">67%</span></span>
					</div>
				</div>
			</el-drawer>
		</div>
		<!-- 展开抽屉 -->
		<div class="fixed-right-center" @click="showInfoDra" v-if="!infoDrawer">
			<i class="el-icon-arrow-left"></i>
		</div>
	</div>
</template>

<script>
import OlMap from "@/components/OlMap";

export default {
	name: "Navigation",
	components: {
		OlMap
	},
	data() {
		return {
			activeIndex: -1, // 默认为没有激活的项
			settingDrawer: false,
			pointDrawer: false,
			taskDrawer: false,
			infoDrawer: true,
			pointEditDiaShow: false,
			taskGenerateDiaShow: false,
			// 是否开启地图选点
			pointSelectionEnabled: false,
			// 是否开启位置初始化功能
			poseInitEnable: false,
			// 功能设置参数
			settingParams: {
				pointCloud: false,
				baseMap: true,
				pointId: false,
				follow: false,
				network: false
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			taskDataList: [],
			// 目标点的编辑数据
			pointEditData: {
				id: '',
				x: '',
				y: '',
				type: '',
				// 添加动作菜单列表 (other:追加参数,例如原定等待选项的等待时间)
				actionMenuList: []
			},
			// 生成任务的参数
			generateTaskParam: {
				taskId: '',
				taskName: '',
				count: 1,
				time: '',
				date: []  // 1-7分别指代周一到周末
			},
			// 点位列表
			pointList: [],
			pointIds: [],
			// 路径类型
			planOptions: [
				{ label: '自由路径', value: 0 },
				{ label: '路网路径', value: 1 }
			],
			// 动作类型
			actionOptions: [
				{ label: '原地等待', value: 0 },
				{ label: '开始录制', value: 1 },
				{ label: '结束录制', value: 2 },
				{ label: '添加建图轨迹', value: 3 },
				{ label: '挂钩挂载', value: 4 },
				{ label: '挂钩卸载', value: 5 }
			],
			olWidth: 0,  // 用于存储宽度的变量
			olHeight: 0,
			nowHandMenu: '',
			mapName: this.$route.params.mapName || ''  // 地图名称
		};
	},
	created() {

	},
	mounted() {
		const mapId = this.$route.params.mapId;	
		this.updateOlCss();
		window.addEventListener('resize', this.updateOlCss);
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.updateOlCss);
	},
	methods: {
		updateOlCss() {
			const element = this.$el.querySelector('.main-content');
			this.olWidth = element.offsetWidth;
			this.olHeight = element.offsetHeight;
		},
		openDraSetting() {
			this.poseInitEnable = false;
			this.activeIndex = this.activeIndex == 0 ? -1 : 0;
			if (this.settingDrawer) {
				this.nowHandMenu = ''
				this.settingDrawer = false;
				return;
			}
			this.closeDra()
			this.nowHandMenu = '功能菜单操作'
			this.settingDrawer = true;
		},
		openPoint() {
			this.poseInitEnable = false
			this.activeIndex = this.activeIndex == 1 ? -1 : 1;
			if (this.pointDrawer) {
				this.pointDrawer = false;
				this.nowHandMenu = ''
				return;
			}
			this.closeDra()
			this.nowHandMenu = '目标点操作'
			this.pointDrawer = true;
		},
		openTask() {
			this.poseInitEnable = false
			this.activeIndex = this.activeIndex == 2 ? -1 : 2;
			if (this.taskDrawer) {
				this.taskDrawer = false;
				this.nowHandMenu = ''
				return;
			}
			this.closeDra()
			this.nowHandMenu = '任务操作'
			this.taskDrawer = true;
		},
		/**
		 * 关闭左侧菜单的抽屉
		 * type 类型(hand手动,auto自动)
		 */
		closeDra(type) {
			this.settingDrawer = false;
			this.pointDrawer = false;
			this.taskDrawer = false;
			if (type == 'hand') {
				this.activeIndex = -1;
			}
			this.nowHandMenu = ''
		},
		handleSelectionChange(selection) {
			this.pointIds = selection.map(item => item.id)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		// 点位编辑
		editPoint(row) {
			this.pointEditDiaShow = true;
			this.pointEditData.id = row.id;
			this.pointEditData.x = row.x;
			this.pointEditData.y = row.y;
			this.pointEditData.type = row.type;
			this.pointEditData.actionMenuList = row.action
		},
		// 点位删除
		removePoint(row) {
			const idArr = [];
			const ids = row?.id || this.pointIds;
			if (ids) {
				idArr.push(...(Array.isArray(ids) ? ids : [ids]));
				idArr.forEach(id => {
					let indexToRemove = this.pointList.findIndex(item => item?.id === id);
					if (indexToRemove !== -1) {
						this.pointList.splice(indexToRemove, 1);
						if (this.pointList.length < 1) {
							// 重置地图的id计数器
							this.$refs.olmap.restIdNum();
						}
						this.$refs.olmap.removeIconHtmlById("pose-" + id);
					}
				});
			}
		},
		// 点位上移
		moveUp() {
			const index = this.pointList.findIndex(point => point.id == this.pointIds[0]);
			if (index !== -1 && index > 0) {
				let temp = this.pointList[index];
				this.$set(this.pointList, index, this.pointList[index - 1]);
				this.$set(this.pointList, index - 1, temp);
			}
		},
		// 点位下移
		moveDown() {
			const index = this.pointList.findIndex(point => point.id == this.pointIds[0]);
			if (index !== -1 && index < this.pointList.length - 1) {
				let temp = this.pointList[index];
				this.$set(this.pointList, index, this.pointList[index + 1]);
				this.$set(this.pointList, index + 1, temp);
			}
		},
		// 追加动作按钮
		appendActionMenu() {
			this.pointEditData.actionMenuList.push({ value: 0, other: 0 })
		},
		// 删除追加动作按钮
		removeActionMenu(index) {
			this.pointEditData.actionMenuList.splice(index, 1);
		},
		// 修改动作下拉值
		changeAction(index) {
			// 判断当前修改后是否是原定等待,如果不是则删除other属性
			let item = this.pointEditData.actionMenuList[index];
			if (item && 'other' in item) {
				delete item.other;  // 删除 'other' 属性
			} else {
				item.other = 0;
			}
		},
		clearActionDia() {
			this.pointEditData.id = '';
			this.pointEditData.x = '';
			this.pointEditData.y = '';
			this.pointEditData.type = '';
			this.pointEditData.actionMenuList = [];
		},
		// 提交点位修改
		submitEditPoint() {
			this.pointEditDiaShow = false;
			// 模拟数据修改
			const point = this.pointList.find(item => item.id === this.pointEditData.id);
			if (this.pointEditData.actionMenuList)
				if (point) {
					// 找到对应元素，更新数据(真实情况下发请求修改,然后重新查询点位列表)
					point.x = this.pointEditData.x;
					point.y = this.pointEditData.y;
					point.type = this.pointEditData.type;
					point.action = this.pointEditData.actionMenuList;
					this.$modal.msgSuccess("当前点位数据已修改");
				}
		},
		// 生成任务
		submitTaskGenerate() {
			// 查询当前选择的id对应的点位对象数据
			const orderedPoints = this.pointIds.map(id => this.pointList.find(point => point.id === id));
			if (!this.generateTaskParam.taskName || !this.generateTaskParam.count || !this.generateTaskParam.time || this.generateTaskParam.date.length < 1) {
				this.$message({
					message: '请完善任务数据!',
					type: 'warning'
				});
				return;
			}
			this.generateTaskParam.taskId = Math.floor(Math.random() * 10001);
			let taskData = {
				taskId: this.generateTaskParam.taskId,
				taskName: this.generateTaskParam.taskName,
				count: this.generateTaskParam.count,
				time: this.generateTaskParam.time,
				date: this.generateTaskParam.date,
				status: 1,
				points: orderedPoints
			}
			// 实际使用需要提交任务后等待后端添加完毕然后查询列表,这里临时用push
			this.taskDataList.push(taskData)
			this.restGenerateParam();
			this.taskGenerateDiaShow = false;
			this.pointIds = [];
			this.$modal.msgSuccess("点位任务创建成功");
		},
		// 初始化导航
		initNavigation() {
			this.closeDra()
			if (this.poseInitEnable) {
				this.poseInitEnable = false;
				this.nowHandMenu = ''
			} else {
				this.poseInitEnable = true;
				this.nowHandMenu = '初始化导航'
			}
			this.pointSelectionEnabled = false;
			this.activeIndex = this.activeIndex == 3 ? -1 : 3;
		},
		// 重启导航
		restNavigation() {
			this.$confirm('将重启当前导航, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				customClass: 'el-message-box-cust',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '导航已重启!'
				});
			}).catch(() => { });
		},
		// 关闭导航
		offNavigation() {
			this.$confirm('将关闭当前导航, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				customClass: 'el-message-box-cust',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '导航已关闭!'
				});
			}).catch(() => { });
		},
		// 关闭任务生成弹窗
		closeTaskGenerate() {
			this.taskGenerateDiaShow = false;
			this.restGenerateParam();
		},
		// 重置任务创建弹窗数据
		restGenerateParam() {
			this.generateTaskParam = {
				taskId: '',
				taskName: '',
				number: 1,
				time: '',
				date: []  // 1-7分别指代周一到周末
			}
		},
		// 任务删除
		removeTaskItem(data) {
			this.$confirm('删除名为' + data.taskName + '的任务', '删除', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				customClass: 'el-message-box-cust',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '已删除!'
				});
				this.taskDataList = this.taskDataList.filter(task => task.taskId !== data.taskId);
			}).catch(() => { });
		},
		// 执行任务
		executeTask(data) {
			this.$confirm('开始执行任务' + data.taskName + '?', '执行', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				customClass: 'el-message-box-cust',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '任务已开始执行!'
				});
				this.taskDataList.forEach(task => {
					if (task.taskId === data.taskId) {
						task.status = 0;
					}
				});
			}).catch(() => { });
		},
		// 展开右侧实时信息
		showInfoDra() {
			this.infoDrawer = true;
		},
		test() {
			console.log(this.set);
		},
		// 开启地图选点
		mapSelectEle(type) {
			if (type == 'open') {
				this.pointSelectionEnabled = true;
				this.poseInitEnable = false;
				this.$notify({
					title: '地图选择',
					message: '已开启选择模式',
					type: 'success',
					duration: 1000
				});
			} else {
				this.pointSelectionEnabled = false;
				this.$notify.info({
					title: '关闭选择',
					message: '已关闭选择模式',
					duration: 1000
				});
			}
		},
		// 将当前选择的点位数据添加到点位列表中 
		// currentCoordinate 坐标信息 currentPlace 画布位置信息
		addNowPoint(currentCoordinate, currentPlace) {
			let coordData = {
				id: currentCoordinate[0],
				x: currentCoordinate[1].toFixed(3),
				y: currentCoordinate[2].toFixed(3),
				placeX: currentPlace[0].toFixed(3),
				placeY: currentPlace[1].toFixed(3),
				type: 0,
				action: [{ value: 0, other: 0 }]
			}
			this.pointList.push(coordData);
		},
		/**
		 * 位姿初始化操作绘制的回执
		 * @param position 坐标
		 * @param angle 角度
		 */
		initNavigationResult(position, angle) {
			console.log(position);
			console.log(angle);
		}
	}
};
</script>

<style scoped>
.point-edit-span {
	display: block;
	margin: 10px 0;
	font-weight: bold;
}

.drawer {
	height: 100%;
	position: absolute;
	top: 0;
	left: 100%;
	/* box-shadow: 4px 4px 12px rgba(201, 201, 201, 0.2); */
	/* 右边和下边的阴影 */
	border-radius: 0 0 12px 0;
	border-left: 1px solid #F0F0F0;
	padding: 8px 15px;
	border-right: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
	overflow-y: auto;
	background-color: #fff;
	z-index: 1000;
}

.drawer-close {
	position: absolute;
	right: 3px;
	top: 3px;
	cursor: pointer;
}

.drawer-title {
	position: absolute;
	top: -23px;
	left: -8px;
	font-size: 13px;
	font-weight: bold;
	color: #838383;
}

.drawer p {
	font-size: 13px;
	border-left: 5px #D1D1D1 solid;
	padding-left: 5px;
	margin: 8px 0;
	border-radius: 3px 0 0 3px;
}

.img-container {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* 垂直居中子元素 */
	border-radius: 7px;
	background: linear-gradient(135deg, #00bcd4, #009688);
	cursor: pointer;
	width: 70%;
	aspect-ratio: 1;
	/* 设置宽高比为1，即高度和宽度相等 */
	margin-top: 10px;
}

.img-container:hover {
	transform: scale(1.02);
	/* 鼠标悬停时放大 */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
	/* 增加阴影效果 */
	background-color: #00796b;
	/* 改变背景颜色 */
}

.img-container:active {
	transform: scale(0.98);
	/* 点击时缩小 */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	/* 点击时加深阴影 */
	background-color: #004d40;
	/* 点击时改变背景颜色 */
	filter: brightness(1.1);
	/* 点击时稍微增加亮度 */
}

.img-container img {
	opacity: 1;
}

.img-container span {
	font-size: 12px;
	color: #ffffff;
	font-weight: bold;
}

/* 激活时的样式 */
.img-container.active {
	background: linear-gradient(135deg, #007d8d, #004b43);
}

.explore-unit {
	margin-left: 8px;
}

::v-deep .el-dialog__body {
	padding: 20px 20px 0 20px;
}

::v-deep .download-map .el-dialog__body {
	padding: 10px 20px 0 20px !important;
}

::v-deep .el-table--medium .el-table__cell {
	padding: 6px 0;
}

::v-deep .action-menu .action-menu_input .el-input__inner {
	padding: 0 5px;
}

.task-status-tag {
	margin-left: 20px;
}

::v-deep .drawer .el-collapse-item__header {
	height: 38px;
	line-height: 38px;
	color: #767676;
	font-weight: bold;
}

::v-deep .drawer .el-collapse-item__content {
	text-align: left;
	padding-bottom: 10px;
}

::v-deep .drawer .el-collapse {
	border: 1px solid #EBEEF5;
	padding: 0 8px;
	border-radius: 5px;
}

.collapse-content-div {
	margin-top: 0;
}

::v-deep .collapse-content-div .el-button--mini {
	padding: 4px 10px;
}

.fixed-right-center {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 255, 0.6);
	color: white;
	border-radius: 6px 0 0 6px;
	cursor: pointer;
}

.info-dra-class_content {
	padding: 0 20px 20px 20px;
}

.info-dra_title {
	display: flex;
	/* 启用 Flexbox 布局 */
	justify-content: flex-start;
	/* 水平从左排列 */
	align-items: center;
	color: #8a8a8a;
	font-size: 15px;
	font-weight: bold;
	border-bottom: 2px solid #B9B9FF;
	margin-bottom: 10px;
}

.info-dra_content {
	color: #5A5A5A;
	font-size: 14px;
	margin-left: 8px;
	display: block;
	margin-bottom: 8px;
}

.info-dra_content_title {
	font-weight: bold;
}

.info-dra_content_other {
	font-weight: 400;
}

.hand-ment-mark {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 1000;
}

::v-deep .info-dra-class-all .el-drawer__wrapper {
	width: 15%;
	left: 85%;
}

@media (max-width: 1599px) {
	::v-deep .info-dra-class-all .el-drawer__wrapper {
		width: 18%;
		left: 82%;
	}
}

@media (max-width: 1269px) {
	::v-deep .info-dra-class-all .el-drawer__wrapper {
		width: 21%;
		left: 79%;
	}
}

@media (max-width: 1000px) {
	::v-deep .info-dra-class-all .el-drawer__wrapper {
		width: 24%;
		left: 76%;
	}
}

.notification__title {
	font-size: 1.2rem;
	/* 默认字体大小 */
}

.main-content {
	width: 100%;
	min-height: calc(100vh - 84px);
	overflow: hidden;
	position: relative;
}

.main {
	width: 100%;
	min-height: calc(100vh - 84px);
	min-width: 1500px;
	overflow-x: auto;
}

.main-menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
</style>

<style>
.navigation-info-dra-class {
	background-color: #ffffff;
	box-shadow: none;
	border-radius: 5px 0 0 5px;
}

.navigation-info-dra-class .el-drawer__header {
	margin-bottom: 20px;
}
</style>