<template>
|
<view class="pages-map-scene-create">
|
<view class="scene-content" v-if="opSceneType =='' ">
|
<image class="img" src="/images/image 25.png" alt=" 图片" mode="aspectFit" />
|
<view class="space">没有找到符合条件的地图</view>
|
<view class="text-button-group">
|
<a-button type="primary" class="button" @click="clickStartConstructScene">
|
开始构建
|
</a-button>
|
<a-button type="primary" class="button" @click="clickDownloadScene" disabled>
|
下载场景
|
</a-button>
|
</view>
|
|
</view>
|
<view class="bottom">
|
<view class="bottom-content" v-if="opSceneType =='add_name' ">
|
<view class="tip">请输入场景名称</view>
|
<view class="name-input">
|
<input ref="refInputName" :focus="true" placeholder="请输入场景名称" :value="sceneName"
|
@input="onInputName"></input>
|
<uni-icons class="clear" color="#ccc" type="clear" size="20" v-if="showClearName"
|
@click="clickClearName"></uni-icons>
|
</view>
|
<view class="text-button-group">
|
<a-button type="primary" class="button" :disabled="sceneName.trim() == ''"
|
@click="clickNameOK">确认</a-button>
|
<a-button type="ghost" class="button" @click="clickNameCancel">取消</a-button>
|
|
</view>
|
</view>
|
<view class="bottom-content" v-else-if="opSceneType =='scan'">
|
<view class="tip">场景构建中</view>
|
<view>
|
请操作搬运车扫描地图覆盖的区域
|
</view>
|
|
<view class="text-button-group">
|
<a-button type="primary" class="button" @click="clickScanFinish">扫描完成</a-button>
|
</view>
|
</view>
|
<view class="bottom-content" v-else-if="opSceneType =='finish'">
|
<view class="tip">场景构建完成</view>
|
<view>
|
已成功构建“{{sceneName}}”
|
</view>
|
|
<view class="text-button-group">
|
<a-button type="primary" class="button" @click="clickFinish">构建完成</a-button>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
<script>
|
import {
|
showToast,
|
showModal,
|
session,
|
} from "@/comm/utils.js"
|
import {
|
Button
|
} from 'antd-mobile-vue-next'
|
|
import {
|
createScene,
|
addMap,
|
stopMap,
|
//getAgvState,
|
getMapLaserData
|
|
} from "@/api/vehicle.js"
|
export default {
|
name: "PagesMapSceneCreate",
|
components: {
|
'a-button': Button
|
},
|
props: {
|
ip: {
|
type: String,
|
default () {
|
return ''
|
}
|
},
|
opSceneType: {
|
type: String,
|
default () {
|
return ''
|
}
|
},
|
},
|
data() {
|
return {
|
windowWidth: 375,
|
sceneName: "",
|
showClearName: false,
|
|
}
|
},
|
computed: {
|
|
},
|
mounted() {
|
const _this = this
|
uni.getSystemInfo({
|
success(e) {
|
_this.windowWidth = e.windowWidth
|
},
|
|
})
|
this.loadData()
|
|
},
|
methods: {
|
setData(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
async loadData() {
|
try {
|
|
|
} catch (ex) {
|
|
this.showError(ex)
|
}
|
},
|
async loadMapLaserData() {
|
try {
|
const info = await getMapLaserData(this.ip)
|
return info
|
} catch (ex) {
|
this.showError(ex)
|
return {}
|
}
|
},
|
|
|
|
clickStartConstructScene() {
|
this.$emit('update:opSceneType', "add_name");
|
},
|
clickDownloadScene() {
|
showToast("未实现")
|
},
|
|
clickNameCancel() {
|
uni.navigateBack({
|
delta: 1, //返回层数，2则上上页
|
})
|
},
|
async clickNameOK() {
|
try {
|
const name = this.sceneName.trim()
|
if (!name) {
|
showToast("站点名称还未输入")
|
return
|
}
|
this.sceneName = name
|
await createScene(this.ip, name, 1)
|
this.$emit('update:opSceneType', "scan");
|
} catch (ex) {
|
this.showError(ex)
|
}
|
|
},
|
clickClearName() {
|
this.sceneName = ""
|
this.showClearName = false
|
},
|
onInputName(event) {
|
this.sceneName = event.detail.value;
|
if (this.sceneName)
|
this.showClearName = true
|
else
|
this.showClearName = false
|
},
|
async clickScanFinish() {
|
try {
|
this.$emit('update:opSceneType', "finish");
|
uni.setNavigationBarTitle({
|
title: this.sceneName
|
})
|
await createScene(this.ip, this.sceneName, 0)
|
} catch (ex) {
|
|
showModal("请检查车辆连接，并重新开始构建场景", "场景构建失败", false, "确定").then((res) => {
|
this.$emit('update:opSceneType', "add_name");
|
})
|
}
|
|
},
|
clickFinish() {
|
this.$emit('create-ok', this.sceneName);
|
this.sceneName = ""
|
},
|
showError(ex) {
|
console.log(ex)
|
let exStr = JSON.stringify(ex)
|
if (exStr == "{}")
|
exStr = ex
|
let tip = typeof ex.msg == "string" ? ex.msg : exStr
|
showModal(tip, "错误", false, "确定")
|
},
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.pages-map-scene-create {
|
display: flex;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
background-color: #fff;
|
.scene-content {
|
width: 100%;
|
display: flex;
|
flex: 1;
|
flex-direction: column;
|
margin: auto;
|
align-items: center;
|
justify-content: center;
|
|
.text-button-group {
|
display: flex;
|
width: 100%;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
font-size: 30rpx !important;
|
|
.button {
|
margin-top: 20rpx;
|
width: 375rpx;
|
}
|
}
|
|
}
|
|
|
.bottom {
|
position: fixed;
|
left: 50rpx;
|
right: 50rpx;
|
bottom: 20rpx;
|
display: flex;
|
|
.bottom-content {
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
// justify-content: center;
|
// align-items: center;
|
padding: 0 10rpx;
|
padding-bottom: 10rpx;
|
background-color: #fff;
|
border-radius: 10rpx;
|
//background-color: #eee;
|
|
.title {
|
font-size: 40rpx;
|
margin-bottom: 10rpx;
|
}
|
|
.tip {
|
color: #888;
|
margin: 10rpx;
|
text-align: left;
|
}
|
|
|
.disabled {
|
color: #ccc !important;
|
}
|
|
.name-input {
|
width: calc(100% - 20rpx);
|
margin-bottom: 10rpx;
|
background-color: #fff;
|
padding: 10rpx;
|
border-radius: 8rpx;
|
display: flex;
|
flex-direction: row;
|
color: #1890FF;
|
|
input {
|
flex: 1;
|
}
|
}
|
}
|
|
|
.text-button-group {
|
display: flex;
|
width: 100%;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
font-size: 30rpx !important;
|
|
.button {
|
margin: auto;
|
margin-top: 20rpx;
|
width: calc(100% - 10rpx);
|
}
|
|
.am-button {
|
border-radius: 30px;
|
}
|
|
.am-button-ghost {
|
border: 1px solid #1677ff !important;
|
|
}
|
}
|
|
|
}
|
|
|
}
|
</style>
|
