|
|
@@ -1,143 +1,6 @@
|
|
|
<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" @click="goto">立即前往</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="navigation-container">
|
|
|
+ <div class="map-stage" ref="mapStage">
|
|
|
<div class="main-content">
|
|
|
<!-- 当前操作类型标记 -->
|
|
|
<div class="hand-ment-mark">
|
|
|
@@ -201,7 +64,6 @@
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
-
|
|
|
<!-- 目标点编辑对话框 -->
|
|
|
<el-dialog
|
|
|
title="目标点编辑"
|
|
|
@@ -401,6 +263,8 @@
|
|
|
<el-button @click="taskViewDiaShow = false" size="medium">关 闭</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
+ </div>
|
|
|
+ <MqttComp ref="mqtt" :topics="topics" @message-received="onMessage" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -689,7 +553,7 @@ export default {
|
|
|
// },2,false);
|
|
|
// this.$refs.olmap.drawPoint()
|
|
|
// }
|
|
|
- this.$refs.olmap.drawTrackLine(-15.491 , -57.526,10.209 , -123.223)
|
|
|
+ // this.$refs.olmap.drawTrackLine(-15.491 , -57.526,10.209 , -123.223)
|
|
|
},
|
|
|
onMessage({ topic, message }) {
|
|
|
// console.log("收到消息:", topic, message);
|
|
|
@@ -728,6 +592,8 @@ export default {
|
|
|
},
|
|
|
updateOlCss() {
|
|
|
const element = this.$el.querySelector('.map-stage');
|
|
|
+ console.log("地图容器尺寸:", element);
|
|
|
+
|
|
|
this.olWidth = element.offsetWidth;
|
|
|
this.olHeight = element.offsetHeight;
|
|
|
},
|
|
|
@@ -1821,7 +1687,7 @@ export default {
|
|
|
|
|
|
.map-stage {
|
|
|
position: relative;
|
|
|
- width: 100%;
|
|
|
+ width: 100%;
|
|
|
height: calc(100vh - 84px);
|
|
|
min-height: 600px;
|
|
|
overflow: hidden;
|