| | |
| | | <template> |
| | | <view class="pages-scene"> |
| | | <view class="map-content" v-if="opSceneType =='' "> |
| | | <image class="img" src="/images/image 25.png" alt=" 图片" mode="aspectFit" /> |
| | | <view class="space">没有找到符合条件的地图</view> |
| | | |
| | | <image v-if="opType != 'extend'" class="img" src="/images/image_25.png" alt=" 图片" mode="aspectFit" /> |
| | | <image v-else class="img" :src="extendBase64Img" alt=" 图片" mode="aspectFit" /> |
| | | <view v-if="opType != 'extend'" class="space">没有找到符合条件的地图</view> |
| | | <!-- <view class="loading-view">{{mapserverIsOk?"构图程序准备就绪":"等待构图程序就绪..."}} |
| | | <view v-if="!mapserverIsOk" class="auto-circle"></view>:disabled="!mapserverIsOk" |
| | | </view> --> |
| | | <view class="text-button-group"> |
| | | <a-button type="primary" class="button" @click="clickStartConstructScene"> |
| | | 开始构建 |
| | | {{opType == 'extend'?"开始扩展":'开始构建'}} |
| | | </a-button> |
| | | <a-button type="primary" class="button" :disabled="loading && localSceneList.length == 0" |
| | | @click="clickDownloadScene" disabled> |
| | | <a-button v-if="opType != 'extend'" type="primary" class="button" |
| | | :disabled="loading && localSceneList.length == 0" @click="clickDownloadScene" disabled> |
| | | 下载场景 |
| | | </a-button> |
| | | </view> |
| | |
| | | <view class="tip">请输入场景名称</view> |
| | | <view class="name-input"> |
| | | <input ref="refInputName" :focus="true" placeholder="请输入场景名称" :value="sceneName" |
| | | @input="onInputName"></input> |
| | | @input="onInputName" /> |
| | | <uni-icons class="clear" color="#ccc" type="clear" size="20" v-if="showClearName" |
| | | @click="clickClearName"></uni-icons> |
| | | </view> |
| | |
| | | <view class="bottom-content" v-else-if="opSceneType =='scan'"> |
| | | <view class="tip">场景构建中</view> |
| | | <view> |
| | | 请操作搬运车扫描地图覆盖的区域 |
| | | <!-- 请操作搬运车扫描地图覆盖的区域 --> |
| | | {{mapCreatePhase}} |
| | | </view> |
| | | |
| | | <view class="text-button-group"> |
| | |
| | | </view> |
| | | </view> |
| | | <view class="bottom-content" v-else-if="opSceneType =='finish'"> |
| | | <view class="tip">场景构建完成</view> |
| | | <view> |
| | | 已成功构建“{{sceneName}}” |
| | | <view class="tip"> “{{sceneName}}”{{opType == "extend"?"场景扩展结束"+"":"场景构建结束"}}</view> |
| | | <!-- <view> 已成功构建“{{sceneName}}”</view> --> |
| | | <view class="loading-view"> |
| | | {{mapCreatePhase}} |
| | | <view v-if="mapServerPhase === 4" class="auto-circle"></view> |
| | | </view> |
| | | |
| | | <view class="text-button-group"> |
| | | <a-button type="primary" class="button" :disabled="loading" @click="clickFinish">构建完成</a-button> |
| | | <a-button type="primary" class="button" v-if="mapServerPhase === 6" |
| | | @click="clickRecreate">{{opType == "extend"?"重现扩展":"重现构建"}}</a-button> |
| | | <a-button type="primary" class="button" v-else :disabled=" mapServerPhase !==5 || loading" |
| | | @click="clickFinish">{{opType == "extend"?"扩展完成":"构建完成"}}</a-button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | createScene, |
| | | addMap, |
| | | stopMap, |
| | | delScene, |
| | | //getAgvState, |
| | | getMapLaserData, |
| | | saveDBData, |
| | | // checkMapServerIsStart, |
| | | // startOrStopMapServer, |
| | | // checkMapServerIsOk, |
| | | // checkSaveMapIsOk, |
| | | getMapServerPhase, |
| | | getMapUrl |
| | | |
| | | } from "@/api/vehicle.js" |
| | | export default { |
| | |
| | | ctxDataStr: "[]", |
| | | localSceneList: [], |
| | | positioningAgv: true, |
| | | robotPos: {} |
| | | robotPos: {}, |
| | | mapServerPhase: 1, |
| | | extendBase64Img: "", |
| | | saveMapIsOk: false, |
| | | destroyFlag: false, |
| | | |
| | | } |
| | | }, |
| | | computed: { |
| | | |
| | | mapCreatePhase() { |
| | | if (this.mapServerPhase == 1) { |
| | | return "场景构建服务:未启动" |
| | | } else if (this.mapServerPhase == 2) { |
| | | return "场景构建服务:启动中" |
| | | } else if (this.mapServerPhase == 3) { |
| | | return "场景构建中" |
| | | } else if (this.mapServerPhase == 4) { |
| | | return "场景构图保存中" |
| | | } else if (this.mapServerPhase == 5) { |
| | | return "场景构图保存成功" |
| | | } else if (this.mapServerPhase == 6) { |
| | | return "场景构图保存失败" |
| | | } else |
| | | return this.mapServerPhase |
| | | } |
| | | }, |
| | | watch: { |
| | | |
| | | }, |
| | | onLoad(option) { |
| | | console.log("scene load") |
| | | const _this = this |
| | | this.ip = option.ip || "" |
| | | uni.getSystemInfo({ |
| | |
| | | |
| | | }, |
| | | onUnload() { |
| | | |
| | | console.log("scene unload") |
| | | }, |
| | | onBackPress() { |
| | | |
| | |
| | | if (res) { |
| | | this.opSceneType = "" |
| | | if (this.opType != "") { |
| | | |
| | | uni.navigateBack({ |
| | | delta: 1, //返回层数,2则上上页 |
| | | }) |
| | |
| | | return true |
| | | |
| | | } else if (this.opSceneType == "finish") { |
| | | const eventChannel = this.getOpenerEventChannel(); |
| | | eventChannel.emit('create_finish', this.sceneName); |
| | | return false |
| | | if (this.destroyFlag) { |
| | | |
| | | const eventChannel = this.getOpenerEventChannel(); |
| | | eventChannel.emit('create_finish', this.sceneName); |
| | | return false |
| | | } else { |
| | | this.ctxDataStr = JSON.stringify([{ |
| | | method: "destroy", |
| | | }]) |
| | | return true |
| | | } |
| | | |
| | | } else { |
| | | return false |
| | | if (this.destroyFlag) |
| | | return false |
| | | else { |
| | | this.ctxDataStr = JSON.stringify([{ |
| | | method: "destroy", |
| | | }]) |
| | | return true |
| | | } |
| | | } |
| | | |
| | | }, |
| | |
| | | this.opSceneType = "add_name" |
| | | } |
| | | if (this.opType == "extend") { |
| | | this.mapServerPhase = 1 |
| | | await addMap(this.ip, this.sceneName, "extend") |
| | | this.checkMapServerPhase() |
| | | this.opSceneType = 'scan' |
| | | } |
| | | // if (this.opType == "extend") { |
| | | // // const infoMap = await this.loadMapInfo(this.sceneName) |
| | | // // if (infoMap.filedata) { |
| | | // // var base64Image = infoMap.filedata |
| | | // // if (base64Image.indexOf("data:image/png;base64,") < 0) { |
| | | // // base64Image = "data:image/png;base64," + infoMap.filedata |
| | | // // } |
| | | // // this.extendBase64Img = base64Image |
| | | // // } |
| | | |
| | | // } |
| | | |
| | | } |
| | | |
| | | this.refreshMapLaserData() |
| | |
| | | showError(ex) |
| | | } |
| | | }, |
| | | async loadMapInfo(id) { |
| | | try { |
| | | const info = await getMapUrl(this.ip, id) |
| | | return info |
| | | } catch (ex) { |
| | | |
| | | return {} |
| | | } |
| | | }, |
| | | async checkMapServerPhase() { |
| | | try { |
| | | |
| | | const res = await getMapServerPhase(this.ip) |
| | | this.mapServerPhase = res || 1 |
| | | if(this.opSceneType === "finish") |
| | | { |
| | | if (this.mapServerPhase === 5 || this.mapServerPhase === 6) { |
| | | this.saveMapIsOk = true |
| | | return |
| | | } |
| | | } |
| | | setTimeout(this.checkMapServerPhase, 1000); |
| | | } catch (ex) { |
| | | showToast(ex) |
| | | setTimeout(this.checkMapServerPhase, 1000); |
| | | } |
| | | }, |
| | | |
| | | receiveRenderData(param) { |
| | | console.log('接收到视图层的数据:', param); |
| | | if (param.method == "set_backgroud_progress") { |
| | | |
| | | if (param.method === "destroy_complete") { |
| | | if (param.param) { |
| | | this.destroyFlag = true |
| | | uni.navigateBack({ |
| | | delta: 1 |
| | | }) |
| | | } |
| | | } else if (param.method == "set_backgroud_progress") { |
| | | if (param.type == "start") { |
| | | this.setData({ |
| | | bgProgressPercent: 50, |
| | |
| | | }, 500) |
| | | |
| | | } else if (param.type == "error") { |
| | | console.log("set_backgroud_progress error") |
| | | this.setData({ |
| | | bgProgressPercent: 0, |
| | | bgLoading: false |
| | | }) |
| | | const now = new Date() |
| | | const date = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}` |
| | | showToast("加载底图失败") |
| | | const log = { |
| | | date, |
| | | method: `POST`, |
| | | url: "app/log/load_img", |
| | | param: param.msg, |
| | | statusCode: 100, |
| | | data: "加载底图失败" |
| | | } |
| | | const listLog = session.getValue("request_log") || [] |
| | | listLog.unshift(log) |
| | | session.setValue("request_log", listLog) |
| | | |
| | | } |
| | | |
| | | } else if (param.method == "cancel_positioning_agv") { |
| | | this.positioningAgv = false |
| | | //this.positioningAgv = false |
| | | } else if (param.method == "show_log") { |
| | | const listLog = session.getValue("request_log") || [] |
| | | listLog.unshift(param.data) |
| | | session.setValue("request_log", listLog) |
| | | } |
| | | }, |
| | | |
| | |
| | | return [] |
| | | } |
| | | }, |
| | | clickStartConstructScene() { |
| | | this.opSceneType = "add_name" |
| | | async clickStartConstructScene() { |
| | | try { |
| | | this.mapId = "" |
| | | if (this.opType == "extend") { |
| | | this.mapServerPhase = 1 |
| | | await addMap(this.ip, this.sceneName, "extend") |
| | | this.checkMapServerPhase() |
| | | this.opSceneType = 'scan' |
| | | } else { |
| | | this.opSceneType = "add_name" |
| | | } |
| | | } catch (ex) { |
| | | showError(ex) |
| | | } |
| | | }, |
| | | async clickDownloadScene() { |
| | | try { |
| | |
| | | this.sceneName = name |
| | | await createScene(this.ip, name, 1) |
| | | await addMap(this.ip, name) |
| | | this.checkMapServerPhase() |
| | | uni.showLoading({ |
| | | title: "开始扫描地图" |
| | | }) |
| | | this.mapId = "" |
| | | this.opSceneType = 'scan' |
| | | |
| | | |
| | |
| | | uni.setNavigationBarTitle({ |
| | | title: this.sceneName |
| | | }) |
| | | this.saveMapIsOk = false |
| | | await stopMap(this.ip, this.sceneName) |
| | | if (this.opType == "extend") { |
| | | this.opSceneType = "" |
| | | const eventChannel = this.getOpenerEventChannel(); |
| | | eventChannel.emit('create_finish', this.sceneName); |
| | | uni.navigateBack({ |
| | | delta: 1, //返回层数,2则上上页 |
| | | }) |
| | | } |
| | | //this.mapServerPhase = 4 |
| | | //this.checkMapServerPhase(); |
| | | // if (this.opType == "extend") { |
| | | // this.opSceneType = "" |
| | | // const eventChannel = this.getOpenerEventChannel(); |
| | | // eventChannel.emit('create_finish', this.sceneName); |
| | | // uni.navigateBack({ |
| | | // delta: 1, //返回层数,2则上上页 |
| | | // }) |
| | | // } |
| | | |
| | | } catch (ex) { |
| | | |
| | | console.log(ex) |
| | | showModal("请检查车辆连接,并重新开始构建场景", "场景构建失败", false, "确定").then((res) => { |
| | | this.opSceneType = '' |
| | | if (this.opType != "") { |
| | | uni.navigateBack({ |
| | | delta: 1, //返回层数,2则上上页 |
| | | }) |
| | | } |
| | | |
| | | }) |
| | | } finally { |
| | | this.loading = false |
| | |
| | | delta: 1, //返回层数,2则上上页 |
| | | }) |
| | | } catch (ex) { |
| | | showModal("请检查车辆连接,并重新开始构建场景", "场景构建失败", false, "确定").then((res) => { |
| | | this.opSceneType = '' |
| | | if (this.opType != "") { |
| | | uni.navigateBack({ |
| | | delta: 1, //返回层数,2则上上页 |
| | | }) |
| | | } |
| | | }) |
| | | console.log(ex) |
| | | } finally { |
| | | this.loading = false |
| | | uni.hideLoading() |
| | | } |
| | | |
| | | |
| | | }, |
| | | async clickRecreate() { |
| | | try { |
| | | if (this.opType == "extend") { |
| | | this.mapServerPhase = 1 |
| | | await addMap(this.ip, this.sceneName, "extend") |
| | | this.checkMapServerPhase() |
| | | this.opSceneType = 'scan' |
| | | } else { |
| | | this.mapServerPhase = 1 |
| | | await delScene(this.ip, this.sceneName) |
| | | await createScene(this.ip, this.sceneName, 1) |
| | | await addMap(this.ip, this.sceneName) |
| | | this.checkMapServerPhase() |
| | | this.opSceneType = 'scan' |
| | | } |
| | | } catch (ex) { |
| | | console.log(ex) |
| | | } |
| | | }, |
| | | |
| | | |
| | | async loadMapLaserData() { |
| | | try { |
| | | const info = await getMapLaserData(this.ip, this.mapId) |
| | | return info |
| | | } catch (ex) { |
| | | showError(ex) |
| | | showToast(ex) |
| | | return {} |
| | | } |
| | | }, |
| | |
| | | const data = await this.loadMapLaserData() |
| | | |
| | | const listCtrData = [] |
| | | let newMap = false |
| | | if (data.base_map?.image_base64) { |
| | | this.robotPos = {} |
| | | newMap = true |
| | | const mapData = data.base_map.image_base64 //this.mapId ?"terdy": |
| | | this.mapId = data.base_map.map_id |
| | | |
| | | listCtrData.push({ |
| | | method: "background", |
| | | param: { |
| | | proportion: 1, |
| | | img_proportion: 1, |
| | | max_x: data.base_map.width, |
| | | max_y: data.base_map.height, |
| | | max_x: data.base_map.width || 100, |
| | | max_y: data.base_map.height || 100, |
| | | min_x: 0, |
| | | min_y: 0, |
| | | img_x: data.base_map.width, |
| | | img_y: data.base_map.height, |
| | | filedata: data.base_map.image_base64 |
| | | img_x: data.base_map.width || 100, |
| | | img_y: data.base_map.height || 100, |
| | | filedata: mapData |
| | | } |
| | | }) |
| | | |
| | | listCtrData.push({ |
| | | method: "point_trajectory", |
| | | param: data.base_map.trajectoryPoints || |
| | | [] //[ [[2,2],[6,2],[10,2],[14,2],[18,2],[2,6],[2,10],[2,14],[2,18],] |
| | | }) |
| | | |
| | | } |
| | | listCtrData.push({ |
| | | method: "agv_laser", |
| | | param: data.robot_pose |
| | | }) |
| | | |
| | | listCtrData.push({ |
| | | method: "point_cloud", |
| | | param: data.point_cloud |
| | | }) |
| | | if (this.positioningAgv) { |
| | | listCtrData.push({ |
| | | method: "move_pt_visible", |
| | | param: { |
| | | x: data.robot_pose.x, |
| | | y: data.robot_pose.y, |
| | | width:50, |
| | | height:50, |
| | | } |
| | | }) |
| | | } |
| | | |
| | | |
| | | if (data.robot_pose) { |
| | | listCtrData.push({ |
| | | method: "agv_laser", |
| | | param: data.robot_pose |
| | | }) |
| | | if (newMap) { |
| | | listCtrData.push({ |
| | | method: "move_pt_center", |
| | | param: { |
| | | x: data.robot_pose.x, |
| | | y: data.robot_pose.y, |
| | | } |
| | | }) |
| | | } else { |
| | | if (this.positioningAgv) { |
| | | listCtrData.push({ |
| | | method: "move_pt_visible", |
| | | param: { |
| | | x: data.robot_pose.x, |
| | | y: data.robot_pose.y, |
| | | width: 50, |
| | | height: 50, |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | |
| | | } |
| | | // console.log("ctxDataStr",listCtrData.length) |
| | | this.ctxDataStr = JSON.stringify(listCtrData) |
| | | this.robotPos = { |
| | | x: data.robot_pose.x, |
| | | y: data.robot_pose.y |
| | | if (data.robot_pose) { |
| | | this.robotPos = { |
| | | x: data.robot_pose.x, |
| | | y: data.robot_pose.y |
| | | } |
| | | } |
| | | } |
| | | |
| | | setTimeout(this.refreshMapLaserData, 1000); |
| | | } catch (ex) { |
| | | showError(ex).then((res) => { |
| | | setTimeout(this.refreshMapLaserData, 1000); |
| | | }) |
| | | showToast(ex) |
| | | setTimeout(this.refreshMapLaserData, 1000); |
| | | } |
| | | }, |
| | | async clickVehiclePosition() { |
| | |
| | | justify-content: center; |
| | | |
| | | |
| | | |
| | | .text-button-group { |
| | | display: flex; |
| | | width: 100%; |
| | |
| | | |
| | | } |
| | | |
| | | .loading-view { |
| | | display: flex; |
| | | flex-direction: row; |
| | | |
| | | .auto-circle { |
| | | margin-left: 20rpx; |
| | | width: 50rpx; |
| | | height: 50rpx; |
| | | border-radius: 50%; |
| | | border: 10rpx solid #1890FF; |
| | | border-top-color: transparent; |
| | | animation: drawCircle 1s infinite linear; |
| | | } |
| | | |
| | | @keyframes drawCircle { |
| | | 0% { |
| | | transform: rotate(0deg); |
| | | } |
| | | |
| | | 100% { |
| | | transform: rotate(360deg); |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | |
| | | .bottom { |
| | | position: fixed; |