<template>
|
<view class="pages-map-teaching">
|
<view class="view-content">
|
<view class="map-content">
|
<view class="content">
|
<view class="fabric" :message="ctxDataStr" :change:message="ctx.receiveMsg" id="canvasMap"></view>
|
<view class="loading-overlay" v-if="bgLoading">
|
<view class="loading-content">
|
<view class="loading-spinner"></view>
|
<text>加载中... {{ bgProgressPercent }}%</text>
|
</view>
|
</view>
|
<view class="position-site" v-if="mapOperationType =='add_station_pos' "
|
@click="clickPositionStation">
|
<text class="ico my-location-rounded"></text>
|
|
获取搬运车位置和朝向
|
</view>
|
<view class="position" @click="clickVehiclePosition">
|
<text class="ico my-location-rounded"></text>
|
</view>
|
<view v-if="this.mapOperationType ==''" class="teaching-path-show"
|
:class="showTeachingPathFlag?'selected':''" @click="clickShowTeachingPath">
|
<text class="ico layer"></text>
|
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="bottom">
|
<template v-if="mapOperationType =='public_teaching' || mapOperationType =='station_teaching'">
|
<view class="bottom-content" v-if="teachingStatus =='teaching'">
|
<view class="tip">路径记录中...</view>
|
<view v-if="mapOperationType =='public_teaching'">
|
<view>正在记录搬运车行进路径，可随时切换主路/支路示教，完成后点按钮以结束示教。在示教过程中可以添加站点。</view>
|
<view class="switch-type">
|
<view class="switch-button-group">
|
<view class="switch-button"
|
:class="teachingModeCur.main_road ==1?'switch-button-checked':''"
|
@click="onTeachingModeMainRoad(1)">主路示教</view>
|
<view class="switch-button "
|
:class="teachingModeCur.main_road ==0?'switch-button-checked':''"
|
@click="onTeachingModeMainRoad(0)">支路示教</view>
|
</view>
|
</view>
|
</view>
|
|
<view v-else>
|
正在记录搬运车行进路径，完成后点按钮以结束示教
|
</view>
|
<view class="text-button-group">
|
<a-button v-if="mapOperationType =='public_teaching'" type="ghost" class="button"
|
@click="clickAddStation">添加站点</a-button>
|
<a-button type="primary" class="button" @click="clickTeachingEnd">结束记录</a-button>
|
</view>
|
</view>
|
<view class="bottom-content" v-else-if="teachingStatus =='end'">
|
<view class="tip">路径记录完成</view>
|
<view>
|
要将该段路径保存为示教路径吗？
|
</view>
|
<view class="text-button-group">
|
<a-button type="primary" class="button" @click="clickTeachingSave">保存为示教路径</a-button>
|
<a-button type="ghost" class="button" @click="clickTeachingReset">重新记录</a-button>
|
</view>
|
</view>
|
<view class="bottom-content" v-else-if="teachingStatus =='save'">
|
<view class="tip">示教完成</view>
|
<view>
|
已将路径保存为示教路径
|
</view>
|
<view class="text-button-group">
|
<a-button type="primary" class="button" @click="clickTeachingFinish">完成</a-button>
|
</view>
|
</view>
|
<template v-else>
|
<view class="bottom-content" v-if=" mapOperationType =='station_teaching'">
|
<view class="tip">请选择示教路线的起点和终点</view>
|
<view class="row-group">
|
<view class="coordinate">
|
<text class="name">起点:</text>
|
<a @click="clickStartStation">
|
{{startStationID ? stationName(startStationID) : "请选择起点"}}
|
</a>
|
</view>
|
<view class="coordinate">
|
<text class="name">终点:</text>
|
<a @click="clickEndStation">
|
{{endStationID ? stationName(endStationID) : "请选择终点"}}
|
</a>
|
|
</view>
|
</view>
|
<view>请将搬运车移至起点，点“开始记录”后将车开到终点，此次行进路线将作为所选站点间的示教路线。</view>
|
<view class="text-button-group">
|
<a-button type="primary" :disabled="startStationID=='' || endStationID==''" class="button"
|
@click="clickTeachingStart">开始记录</a-button>
|
</view>
|
</view>
|
<view class="bottom-content" v-else>
|
<view class="tip">即将开始公共示教</view>
|
<view>
|
请选择要进行主路还是支路示教，点【开始记录】后将记录搬运车的行进路线作为公共示教路线。开始记录后可随时切换主路/支路示教。
|
</view>
|
<view class="text-button-group">
|
<view class="switch-type">
|
<view class="switch-button-group">
|
<view class="switch-button"
|
:class="teachingModeCur.main_road ==1?'switch-button-checked':''"
|
@click="onTeachingModeMainRoad(1)">主路示教</view>
|
<view class="switch-button "
|
:class="teachingModeCur.main_road ==0?'switch-button-checked':''"
|
@click="onTeachingModeMainRoad(0)">支路示教</view>
|
</view>
|
</view>
|
<a-button type="primary" class="button" @click="clickTeachingStart">开始记录</a-button>
|
</view>
|
</view>
|
</template>
|
</template>
|
<view class="bottom-content" v-else-if="mapOperationType =='add_station_name' ">
|
<view class="tip">请输入站点名称</view>
|
<view class="name-input">
|
<input ref="refInputName" :focus="true" placeholder="输入站点名称" :value="stationEdit.name"
|
@input="onInputStationName"/>
|
<uni-icons class="clear" color="#ccc" type="clear" size="20" v-if="stationEdit.name"
|
@click="clickClearStationName"></uni-icons>
|
</view>
|
<view class="text-button-group">
|
<a-button class="button" @click="clickStationNameCancel">取消</a-button>
|
<a-button type="primary" class="button" :disabled="stationEdit.name.trim() == ''"
|
@click="clickStationNameOK">确定</a-button>
|
</view>
|
</view>
|
<view class="bottom-content" v-else-if="mapOperationType =='add_station_pos'">
|
<view class="tip">调节位置</view>
|
<view class="row-group">
|
<view class="coordinate">
|
<text class="name">横坐标:</text>
|
<input ref="refInputX" class="number-input" type="number" :value="stationEdit.x"
|
@input="onInputStationX" :maxlength="4"/>
|
<uni-icons class="clear" color="#ccc" type="clear" size="20"
|
v-if="stationEdit.x && stationEdit.x!='0'" @click="clickClearStationX"></uni-icons>
|
</view>
|
<view class="coordinate">
|
<text class="name">竖坐标:</text>
|
<input ref="refInputX" class="number-input" type="number" :value="stationEdit.y"
|
@input="onInputStationY" :maxlength="4"/>
|
<uni-icons class="clear" color="#ccc" type="clear" size="20"
|
v-if="stationEdit.y&& stationEdit.y!='0'" @click="clickClearStationY"></uni-icons>
|
</view>
|
</view>
|
|
<view class="tip">调节朝向</view>
|
<view class="angle-group">
|
<image class="img-angle" :src="angleSvg" alt="SVG 图片" />
|
<image class="img-angle-pos" src="/images/Frame_153.svg" alt="SVG 图片"
|
@touchstart="handleAngleTouchStart" @touchmove="handleAngleTouchMove" />
|
</view>
|
</view>
|
<view class="bottom-content" v-else-if="mapOperationType =='edit_teaching'">正在编辑示教路线</view>
|
<view class="bottom-content" v-else>
|
<view class="img-button-group">
|
<view fill="none" class="button" @click="clickStationTeaching">
|
<text class="ico conversion-path"></text>
|
<view class="text">站点示教</view>
|
</view>
|
<view type="text" class="button " @click="clickPublicTeaching">
|
<text class="ico edit-road-outline-rounded"></text>
|
<view class="text">公共示教</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view>
|
<uni-popup ref="refPopupPicker" background-color="transparent" maskBackgroundColor="rgba(0, 0, 0, 0.2)">
|
<view class="popup-content" @click="closePopupPicker">
|
<picker-view class="popup-content-view" :style="{'margin-left':pickerView.left +'px'}"
|
:indicator-style="indicatorStyle" :value="pickerView.value" @change="bindPickerChange">
|
<picker-view-column>
|
<view class="item" @click="clickPickerViewItem(index)"
|
v-for="(item,index) in pickerView.list" :key="index">{{item.name}}</view>
|
</picker-view-column>
|
|
</picker-view>
|
</view>
|
</uni-popup>
|
<uni-popup ref="refPopupCalibration">
|
<view class="popup-dialog">
|
<view class="popup-dialog-title">
|
<text class="uni-dialog-title-text">是否要校准站点位置？</text>
|
</view>
|
<view class="popup-dialog-content">
|
检测到{{calibratioStationTypeName}}位置朝向与所选站点有偏差，是否将站点位置朝向校准到当前值？
|
</view>
|
<view class="popup-dialog-button-group">
|
|
<view class="popup-dialog-button" @click="clickCalibration">
|
校准
|
</view>
|
<view class="popup-dialog-button" @click="clickNoCalibration">
|
不校准
|
</view>
|
<view class="popup-dialog-button" @click="clickBackTeaching">
|
回到示教
|
</view>
|
</view>
|
</view>
|
</uni-popup>
|
<uni-popup ref="refPopupOperateTeaching" background-color="transparent"
|
maskBackgroundColor="rgba(0, 0, 0, 0.2)">
|
<view class="popup-content">
|
<view class="popup-content-btn">
|
<view class="img-button-group">
|
<view fill="none" class="button" @click.stop="clickTeachingEdit">
|
<text class="ico edit-line"></text>
|
<view class="text">编辑</view>
|
</view>
|
<view fill="none" class="button" @click.stop="clickTeachingDelete">
|
<text class="ico red delete-outline "></text>
|
<view class="text">删除</view>
|
</view>
|
|
</view>
|
</view>
|
|
</view>
|
</uni-popup>
|
|
</view>
|
</view>
|
</template>
|
<script src="./js/ctx.js" module="ctx" lang="renderjs"></script>
|
<script>
|
import {
|
showToast,
|
showModal,
|
showError,
|
showInfo
|
} from "@/comm/utils.js"
|
// import OIFabric from "@/components/oi-fabric/index.vue"
|
import {
|
Button
|
} from 'antd-mobile-vue-next'
|
|
import {
|
getMapUrl,
|
stations,
|
addStation,
|
updateStation,
|
getAgvState,
|
getTeachingMode,
|
teachingModeFlag,
|
delTeachingMode,
|
delTeachingModeData,
|
checkAgvLocationDistanceError,
|
|
} from "@/api/vehicle.js"
|
import {
|
async
|
} from "rxjs"
|
export default {
|
name: "PagesMapTeaching",
|
components: {
|
'a-button': Button
|
},
|
data() {
|
return {
|
indicatorStyle: `height: 75rpx;`,
|
navigationBarTitle: "",
|
vehicleIp: "",
|
sceneId: "",
|
ctxDataStr: "[]",
|
mapOperationType: "",
|
teachingStatus: "",
|
teachingMode: {},
|
teachingModeCur: {},
|
|
startStationID: "",
|
endStationID: "",
|
calibratioStationType: "",
|
pickerView: {
|
type: "",
|
list: [],
|
value: []
|
},
|
stationEdit: {
|
stationID: "",
|
name: "",
|
x: 0,
|
y: 0,
|
angle: 0
|
},
|
showClearName: false,
|
stationList: [],
|
angleSvg: "/static/images/angle0.svg",
|
windowWidth: 375,
|
bgProgressPercent: 0,
|
bgLoading: true,
|
showTeachingPathFlag: false
|
|
}
|
},
|
computed: {
|
getMaxStationNo() {
|
let num = 0
|
this.stationList.forEach((item) => {
|
if (num < item.stationID) {
|
num = item.stationID
|
}
|
})
|
return num
|
},
|
},
|
watch: {
|
mapOperationType(val) {
|
let name = "路径示教"
|
if (val == "public_teaching") {
|
name = "公共示教"
|
} else if (val == "station_teaching") {
|
name = "站点示教"
|
} else if (val == "add_station_name" || val == "add_station_pos") {
|
name = "添加站点"
|
}
|
this.setData({
|
navigationBarTitle: name
|
})
|
},
|
navigationBarTitle(val) {
|
uni.setNavigationBarTitle({
|
title: val
|
})
|
},
|
calibratioStationTypeName() {
|
if (this.calibratioStationType == "start") {
|
return "起点"
|
} else if (this.calibratioStationType == "end") {
|
return "终点"
|
} else {
|
return "站点"
|
}
|
},
|
},
|
onBackPress() {
|
const _this = this
|
if (this.mapOperationType == "") {
|
return false
|
|
} else if (this.mapOperationType == "edit_teaching") {
|
return false
|
} else if (this.mapOperationType == "add_station_name" || this.mapOperationType == "add_station_pos") {
|
this.mapOperationType = "public_teaching"
|
return false
|
} else if (this.mapOperationType == "public_teaching" || this.mapOperationType == "station_teaching") {
|
|
|
if (this.teachingStatus) {
|
|
showModal("已记录的路径将会被删除。", "是否要退出示教？").then((res) => {
|
if (res) {
|
this.ctxDataStr = JSON.stringify([{
|
method: "teaching_finish",
|
}])
|
if (this.mapOperationType == "public_teaching") {
|
clearInterval(this.refreshIntervalId)
|
this.refreshIntervalId = 0
|
}
|
|
|
this.mapOperationType = ""
|
}
|
})
|
} else {
|
this.ctxDataStr = JSON.stringify([{
|
method: "teaching_finish",
|
}])
|
|
this.mapOperationType = ""
|
}
|
|
}
|
if (this.mapOperationType == "add_station_name") {
|
this.mapOperationType = "public_teaching"
|
}
|
return true
|
},
|
|
onLoad(option) {
|
this.vehicleIp = option.ip || ""
|
this.sceneId = option.sceneId || ""
|
this.mapOperationType = ""
|
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 {
|
this.setData({
|
bgProgressPercent: 0,
|
bgLoading: true
|
})
|
const infoAgv = await this.loadAgvState()
|
const stationLst = await this.loadStations()
|
const infoMap = await this.loadMapInfo(this.sceneId)
|
if (!infoMap.fileData) {
|
this.setData({
|
bgProgressPercent: 0,
|
bgLoading: false
|
})
|
}
|
this.stationList = stationLst
|
this.teachingMode = await this.loadTeachingMode()
|
this.ctxDataStr = JSON.stringify([{
|
method: "init",
|
param: {
|
editMode: true
|
}
|
}, {
|
method: "background",
|
param: infoMap
|
},
|
{
|
method: "update_agv_state",
|
param: infoAgv
|
},
|
{
|
method: "add_station",
|
param: stationLst
|
},
|
{
|
method: "public_teaching_path",
|
param: this.teachingMode.Public || []
|
|
},
|
{
|
method: "station_teaching_path",
|
param: this.teachingMode.Stations || []
|
|
},
|
{
|
method: "set_selectable",
|
param: false
|
},
|
|
{
|
method: "move_pt_center",
|
param: {
|
x: infoAgv.x,
|
y: infoAgv.y
|
}
|
}
|
])
|
|
|
|
} catch (ex) {
|
this.setData({
|
bgProgressPercent: 0,
|
bgLoading: false
|
})
|
showError(ex)
|
}
|
},
|
async loadAgvState() {
|
try {
|
const info = await getAgvState(this.vehicleIp)
|
return info
|
} catch (ex) {
|
showError(ex)
|
return {}
|
}
|
},
|
async loadStations() {
|
try {
|
const info = await stations(this.vehicleIp)
|
return info.station_list || []
|
} catch (ex) {
|
showError(ex)
|
return []
|
}
|
},
|
async loadMapInfo(id) {
|
try {
|
const info = await getMapUrl(this.vehicleIp, id)
|
return info
|
} catch (ex) {
|
showError(ex)
|
return {}
|
}
|
},
|
async loadTeachingMode() {
|
try {
|
const {
|
data
|
} = await getTeachingMode(this.vehicleIp)
|
return data || {
|
Public: [],
|
Stations: []
|
}
|
|
} catch (ex) {
|
showError(ex)
|
return {
|
Public: [],
|
Stations: []
|
}
|
}
|
},
|
async reloadTeachingMode() {
|
try {
|
this.teachingMode = await this.loadTeachingMode()
|
this.ctxDataStr = JSON.stringify([{
|
method: "public_teaching_path",
|
param: this.teachingMode.Public || []
|
},
|
{
|
method: "station_teaching_path",
|
param: this.teachingMode.Stations || []
|
}
|
])
|
|
} catch (ex) {
|
showError(ex)
|
|
}
|
},
|
stationName(id) {
|
const curIndex = this.stationList.findIndex((a) => a.stationID == id)
|
if (curIndex > -1) {
|
return this.stationList[curIndex].name
|
}
|
return ""
|
|
},
|
receiveRenderData(param) {
|
console.log('接收到视图层的数据：', param);
|
if (param.method == "set_backgroud_progress") {
|
if (param.type == "start") {
|
this.setData({
|
bgProgressPercent: 0,
|
bgLoading: true
|
})
|
} else if (param.type == "progress") {
|
this.setData({
|
bgProgressPercent: param.percent || 0
|
})
|
} else if (param.type == "end") {
|
this.setData({
|
bgProgressPercent: 0,
|
bgLoading: false
|
})
|
} else if (param.type == "error") {
|
this.setData({
|
bgProgressPercent: 0,
|
bgLoading: false
|
})
|
}
|
|
} else if (param.method == "select_station") {
|
if (param.select) {
|
if (!this.startStationID) {
|
this.startStationID = param.data.stationID
|
} else if (!this.endStationID) {
|
this.endStationID = param.data.stationID
|
}
|
|
const list = []
|
if (this.startStationID)
|
list.push(this.startStationID)
|
if (this.endStationID)
|
list.push(this.endStationID)
|
this.ctxDataStr = JSON.stringify([{
|
method: "mark_station",
|
param: list
|
}])
|
|
} else {
|
if (this.startStationID == param.data.stationID) {
|
this.startStationID = ""
|
} else if (this.endStationID == param.data.stationID) {
|
this.endStationID = ""
|
}
|
const list = []
|
if (this.startStationID)
|
list.push(this.startStationID)
|
if (this.endStationID)
|
list.push(this.endStationID)
|
this.ctxDataStr = JSON.stringify([{
|
method: "mark_station",
|
param: list
|
}])
|
|
}
|
|
} else if (param.method == "update_station") {
|
this.stationEdit.stationID = param.station?.stationID
|
this.stationEdit.angle = param.station.angle
|
this.stationEdit.x = param.station.x
|
this.stationEdit.y = param.station.y
|
} else if (param.method == "edit_finish") {
|
if (param.cmd == "ok") {
|
if (param.type == "station") {
|
this.stationEdit.stationID = param.data?.stationID
|
this.stationEdit.name = param.data?.name
|
this.stationEdit.angle = param.data?.angle || 0
|
this.stationEdit.x = param.data?.x
|
this.stationEdit.y = param.data?.y
|
|
const angle = this.getStantardAngle(this.stationEdit.angle * 180 / 3.14)
|
|
this.angleSvg = `/static/images/angle${angle}.svg`
|
this.clickStationPositonOk()
|
this.refreshIntervalId = setInterval(() => {
|
this.refreshAgvPosition()
|
}, 5000)
|
} else if (param.type == "edit_teaching") {
|
|
this.removeTeachingModeData(param.data)
|
this.ctxDataStr = JSON.stringify([])
|
this.mapOperationType = ""
|
}
|
} else if (param.cmd == "cancel") {
|
if (param.type == "edit_teaching") {
|
this.ctxDataStr = JSON.stringify([])
|
this.mapOperationType = ""
|
} else {
|
this.ctxDataStr = JSON.stringify([{
|
method: "remove_station",
|
param: [{
|
stationID: this.stationEdit.stationID
|
}],
|
}])
|
this.stationEdit.stationID = ""
|
this.mapOperationType = 'public_teaching'
|
this.refreshIntervalId = setInterval(() => {
|
this.refreshAgvPosition()
|
}, 5000)
|
}
|
|
}
|
} else if (param.method == "select_teaching_path") {
|
console.log("point",param.point)
|
if (param.type == "station") {
|
|
this.selectTeachingMode = {
|
mode: "Stations",
|
name: param.data?.name || "",
|
src_dst: param.data?.src_dst || "",
|
point: param.point
|
}
|
|
} else if (param.type == "public") {
|
this.selectTeachingMode = {
|
mode: "Public",
|
name: param.data?.name || "",
|
point: param.point
|
}
|
}
|
|
this.$refs.refPopupOperateTeaching.open("bottom")
|
}
|
},
|
clickTeachingDelete() {
|
this.$refs.refPopupOperateTeaching.close()
|
this.removeTeachingMode(this.selectTeachingMode)
|
},
|
clickTeachingEdit() {
|
this.$refs.refPopupOperateTeaching.close()
|
this.mapOperationType = "edit_teaching"
|
this.ctxDataStr = JSON.stringify([{
|
method: "edit_teaching",
|
param: this.selectTeachingMode,
|
}])
|
},
|
|
async removeTeachingMode(item) {
|
try {
|
await delTeachingMode(this.vehicleIp, [item])
|
this.ctxDataStr = JSON.stringify([{
|
method: "remove_teaching_path",
|
param: item,
|
}])
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
async removeTeachingModeData(data) {
|
try {
|
await delTeachingModeData(this.vehicleIp, data)
|
this.reloadTeachingMode()
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
clickPublicTeaching() {
|
|
this.teachingStatus = ""
|
this.teachingModeCur = {
|
mode: "Public",
|
main_road: 1,
|
}
|
this.mapOperationType = "public_teaching"
|
this.ctxDataStr = JSON.stringify([{
|
method: "set_selectable",
|
param: false,
|
}, {
|
method: "public_teaching",
|
}])
|
|
|
},
|
clickStationTeaching() {
|
|
this.startStationID = ""
|
this.endStationID = ""
|
this.teachingStatus = ""
|
this.mapOperationType = "station_teaching"
|
this.ctxDataStr = JSON.stringify([{
|
method: "station_teaching",
|
}])
|
|
|
|
},
|
async clickStationPositonOk() {
|
try {
|
await this.stationAdd(this.stationEdit)
|
this.ctxDataStr = JSON.stringify([{
|
method: "set_selectable",
|
param: false,
|
}])
|
this.mapOperationType = 'public_teaching'
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
async stationAdd(item) {
|
try {
|
await addStation(this.vehicleIp, item)
|
await updateStation(this.vehicleIp, item)
|
this.stationList.push({
|
stationID: item.stationID,
|
name: item.name,
|
angle: item.angle,
|
x: item.y,
|
y: item.x
|
})
|
|
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
async teachingStart(mode) {
|
try {
|
if (mode == "Stations") {
|
const res = await checkAgvLocationDistanceError(this.vehicleIp, this.startStationID)
|
if (res?.error) {
|
this.calibratioStationType = "start"
|
this.$refs.refPopupCalibration.open()
|
} else {
|
// const name =
|
// `${ this.stationName(this.startStationID)}_${ this.stationName(this.endStationID)}`
|
|
this.teachingModeCur = {
|
mode: "Stations",
|
src_dst: `${this.startStationID}_${this.endStationID}`,
|
name: "",
|
teaching_flag: 1,
|
}
|
this.ctxDataStr = JSON.stringify([{
|
method: "set_selectable",
|
param: false,
|
}])
|
const res2 = await teachingModeFlag(this.vehicleIp, this.teachingModeCur)
|
if (res2?.name)
|
this.teachingModeCur.name = res2.name
|
}
|
} else {
|
// const name = `示教_${new Date().getTime()}`
|
const main_road = this.teachingModeCur.main_road
|
this.teachingModeCur = {
|
mode: "Public",
|
src_dst: ``,
|
name: "",
|
teaching_flag: 1,
|
main_road
|
}
|
const res2 = await teachingModeFlag(this.vehicleIp, this.teachingModeCur)
|
if (res2?.name)
|
this.teachingModeCur.name = res2.name
|
}
|
|
} catch (ex) {
|
showError(ex)
|
}
|
|
},
|
async teachingEnd(mode) {
|
try {
|
if (mode == "Stations") {
|
const res = await checkAgvLocationDistanceError(this.vehicleIp, this.endStationID)
|
if (res.error) {
|
this.calibratioStationType = "end"
|
this.$refs.refPopupCalibration.open()
|
} else {
|
this.askTeachingBiDirection(this.teachingModeCur)
|
}
|
} else {
|
this.askTeachingBiDirection(this.teachingModeCur)
|
}
|
} catch (ex) {
|
showError(ex)
|
}
|
|
},
|
async onTeachingModeMainRoad(val) {
|
try {
|
if (this.teachingStatus) {
|
|
if (this.teachingModeCur.main_road == val) {
|
return
|
}
|
this.teachingModeCur.main_road = val
|
this.teachingModeCur.teaching_flag = 1
|
this.teachingModeCur.mode = "Public"
|
const res = await teachingModeFlag(this.vehicleIp, this.teachingModeCur)
|
if (val == 0)
|
showToast("已将该路段路径保存为主路示教路线")
|
else
|
showToast("已将该路段路径保存为支路示教路线")
|
if (res?.name)
|
this.teachingModeCur.name = res.name
|
} else {
|
this.teachingModeCur.main_road = val
|
}
|
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
|
async refreshAgvPosition() {
|
const _this = this
|
try {
|
const agv = await this.loadAgvState()
|
this.ctxDataStr = JSON.stringify([{
|
method: "update_agv_state",
|
param: agv
|
}])
|
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
|
async clickTeachingStart() {
|
|
const _this = this
|
try {
|
if (this.mapOperationType == "station_teaching") {
|
const stationTeaching = this.teachingMode?.Stations || []
|
const srcDst = `${this.startStationID}_${this.endStationID}`
|
const name =
|
`${ this.stationName(this.startStationID)}_${ this.stationName(this.endStationID)}`
|
|
const curIndex = stationTeaching.findIndex((a) => a.src_dst == srcDst)
|
console.log(srcDst, curIndex, stationTeaching)
|
if (curIndex > -1) {
|
showModal("该站点间已有示教路径，重新记录会覆盖之前的路径。", "是否要重新记录？").then(async (res) => {
|
if (res) {
|
try {
|
_this.teachingStatus = "teaching"
|
await delTeachingMode(this.vehicleIp, [{
|
mode: "Stations",
|
name,
|
src_dst: srcDst
|
|
}])
|
stationTeaching.splice(curIndex, 1)
|
_this.teachingStart("Stations")
|
} catch (ex) {
|
showError(ex)
|
}
|
|
} else {
|
|
_this.teachingStatus = ""
|
}
|
})
|
} else {
|
_this.teachingStatus = "teaching"
|
_this.teachingStart("Stations")
|
}
|
|
} else {
|
this.teachingStatus = "teaching"
|
_this.teachingStart("Public")
|
await this.refreshAgvPosition()
|
this.refreshIntervalId = setInterval(() => {
|
this.refreshAgvPosition()
|
}, 5000)
|
|
|
}
|
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
clickTeachingEnd() {
|
if (this.mapOperationType == "station_teaching") {
|
this.teachingEnd("Stations")
|
} else {
|
clearInterval(this.refreshIntervalId)
|
this.refreshIntervalId = 0
|
this.teachingEnd("Public")
|
}
|
|
},
|
clickTeachingReset() {
|
const _this = this
|
showModal("已记录的路径将会被删除。", "是否要重新记录？").then(async (res) => {
|
if (res) {
|
try {
|
await delTeachingMode(_this.vehicleIp, [_this.teachingModeCur])
|
_this.teachingStatus = ""
|
_this.reloadTeachingMode()
|
|
} catch (ex) {
|
showError(ex)
|
}
|
} else {
|
_this.teachingStatus = "save"
|
}
|
})
|
|
},
|
async clickTeachingSave() {
|
|
this.teachingStatus = "save"
|
try {} catch (ex) {
|
showError(ex)
|
}
|
|
},
|
clickTeachingFinish() {
|
this.mapOperationType = ""
|
this.ctxDataStr = JSON.stringify([{
|
method: "teaching_finish",
|
}])
|
// const eventChannel = this.getOpenerEventChannel();
|
// eventChannel.emit('add');
|
// uni.navigateBack({
|
// delta: 1, //返回层数，2则上上页
|
// })
|
},
|
clickEndStation(e) {
|
const list = this.stationList.filter((a) => a.stationID != this.startStationID)
|
let index = -1
|
|
if (this.endStationID) {
|
index = list.findIndex((a) => a.stationID == this.endStationID)
|
if (index < 0) {
|
index = -1
|
}
|
|
} else {
|
index = -1
|
}
|
this.pickerView = {
|
type: "endStation",
|
list,
|
value: [index],
|
left: e.target.offsetLeft - 150,
|
}
|
this.$refs.refPopupPicker.open("bottom")
|
},
|
clickStartStation(e) {
|
const list = this.stationList.filter((a) => a.stationID != this.endStationID)
|
let index = -1
|
|
if (this.startStationID) {
|
index = list.findIndex((a) => a.stationID == this.startStationID)
|
if (index < 0) {
|
index = -1
|
}
|
|
} else {
|
index = -1
|
}
|
this.pickerView = {
|
type: "startStation",
|
list,
|
value: [index],
|
left: e.target.offsetLeft + 50,
|
}
|
this.$refs.refPopupPicker.open("bottom")
|
},
|
clickAddStation() {
|
// const _this = this
|
this.mapOperationType = "add_station_name"
|
clearInterval(this.refreshIntervalId)
|
this.refreshIntervalId = 0
|
// uni.navigateTo({
|
// url: `/pages/station/index?ip=${this.vehicleIp}&isAdd=1`,
|
// events: {
|
// // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
|
// add: function(data) {
|
// _this.stationList.push({
|
// stationID: data.stationID,
|
// name: data.name,
|
// x: data.x,
|
// y: data.y,
|
// angle: data.angle
|
// })
|
// },
|
// }
|
// })
|
},
|
bindPickerChange(e) {
|
const val = e.detail.value
|
|
const val2 = val[0]
|
|
this.pickerView.value = [val2]
|
console.log(val2, val)
|
if (this.pickerView.type == "startStation") {
|
this.startStationID = this.pickerView.list[val2].stationID
|
const list = [this.startStationID]
|
if (this.endStationID)
|
list.push(this.endStationID)
|
|
this.ctxDataStr = JSON.stringify([{
|
method: "mark_station",
|
param: list
|
}])
|
} else if (this.pickerView.type == "endStation") {
|
this.endStationID = this.pickerView.list[val2].stationID
|
const list = [this.endStationID]
|
if (this.startStationID)
|
list.push(this.startStationID)
|
|
this.ctxDataStr = JSON.stringify([{
|
method: "mark_station",
|
param: list
|
}])
|
}
|
},
|
clickPickerViewItem(index) {
|
if (index == this.pickerView.value) {
|
this.$refs.refPopupPicker.close()
|
}
|
},
|
closePopupPicker() {
|
this.$refs.refPopupPicker.close()
|
},
|
async clickCalibration() {
|
try {
|
this.$refs.refPopupCalibration.close()
|
if (this.calibratioStationType == "start") {
|
const curIndex = list.findIndex((a) => a.stationID == this.startStationID)
|
if (curIndex > -1) {
|
const station = {}
|
station.stationID = list[curIndex].stationID
|
station.name = list[curIndex].name
|
const infoAgv = await getAgvState(this.vehicleIp)
|
station.angle = infoAgv.angle
|
station.x = infoAgv.x
|
station.y = infoAgv.y
|
await updateStation(this.vehicleIp, station)
|
showToast(`${station.name}位置已更新`)
|
list[curIndex].angle = infoAgv.angle
|
list[curIndex].x = infoAgv.x
|
list[curIndex].y = infoAgv.y
|
this.ctxDataStr = JSON.stringify([{
|
method: "update_agv_state",
|
param: infoAgv
|
},
|
{
|
method: "update_station",
|
param: [station]
|
},
|
|
])
|
|
}
|
const name =
|
`${ this.stationName(this.startStationID)}_${ this.stationName(this.endStationID)}`
|
|
this.teachingModeCur = {
|
mode: "Stations",
|
src_dst: `${this.startStationID}_${this.endStationID}`,
|
name,
|
teaching_flag: 1
|
}
|
await teachingModeFlag(this.vehicleIp, this.teachingModeCur)
|
} else if (this.calibratioStationType == "end") {
|
const curIndex = list.findIndex((a) => a.stationID == this.endStationID)
|
if (curIndex > -1) {
|
const station = {}
|
station.stationID = list[curIndex].stationID
|
station.name = list[curIndex].name
|
const infoAgv = await getAgvState(this.vehicleIp)
|
station.angle = infoAgv.angle
|
station.x = infoAgv.x
|
station.y = infoAgv.y
|
await updateStation(this.vehicleIp, station)
|
showToast(`${station.name}位置已更新`)
|
list[curIndex].angle = infoAgv.angle
|
list[curIndex].x = infoAgv.x
|
list[curIndex].y = infoAgv.y
|
this.ctxDataStr = JSON.stringify([{
|
method: "update_agv_state",
|
param: infoAgv
|
},
|
{
|
method: "update_station",
|
param: [station]
|
},
|
|
])
|
}
|
this.askTeachingBiDirection(this.teachingModeCur)
|
|
}
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
|
async clickNoCalibration() {
|
try {
|
this.$refs.refPopupCalibration.close()
|
if (this.calibratioStationType == "start") {
|
const name =
|
`${ this.stationName(this.startStationID)}_${ this.stationName(this.endStationID)}`
|
this.teachingModeCur = {
|
mode: "Stations",
|
src_dst: `${this.startStationID}_${this.endStationID}`,
|
name,
|
teaching_flag: 1
|
}
|
this.ctxDataStr = JSON.stringify([{
|
method: "set_selectable",
|
param: false,
|
}])
|
await teachingModeFlag(this.vehicleIp, this.teachingModeCur)
|
|
} else if (this.calibratioStationType == "end") {
|
this.askTeachingBiDirection(this.teachingModeCur)
|
|
}
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
askTeachingBiDirection(teachingMode) {
|
showModal("选择当前示教路线类型?", "示教结束", true, "双向路线", "单向路线").then((res) => {
|
if (res) {
|
teachingMode.bidirection = "1"
|
} else {
|
teachingMode.bidirection = "0"
|
}
|
teachingMode.teaching_flag = 0
|
this.finishTeaching(teachingMode)
|
})
|
|
},
|
async finishTeaching(teachingMode) {
|
try {
|
await teachingModeFlag(this.vehicleIp, teachingMode)
|
this.reloadTeachingMode()
|
this.teachingStatus = "end"
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
clickBackTeaching() {
|
this.$refs.refPopupCalibration.close()
|
this.teachingStatus = ""
|
},
|
clickStationNameCancel() {
|
if (this.mapOperationType == "add_station_name") {
|
this.mapOperationType = "public_teaching"
|
}
|
},
|
async clickStationNameOK() {
|
try {
|
const name = this.stationEdit.name.trim()
|
if (!name) {
|
showToast("站点名称还未输入")
|
return
|
}
|
if (this.mapOperationType == 'add_station_name') {
|
const agv = await this.loadAgvState()
|
this.stationEdit = {
|
stationID: this.getMaxStationNo + 1,
|
name: name,
|
x: agv.x || 0,
|
y: agv.y || 0,
|
angle: agv.angle || 0,
|
}
|
const angle2 = this.getStantardAngle(this.stationEdit.angle * 180 /3.14)
|
this.angleSvg = `/static/images/angle${angle2}.svg`
|
this.ctxDataStr = JSON.stringify([{
|
method: "update_agv_state",
|
param: agv
|
}, {
|
method: "update_station",
|
param: [this.stationEdit]
|
}, {
|
method: "edit_station_pos",
|
param: this.stationEdit
|
}, {
|
method: "move_pt_center",
|
param: {
|
x: agv.x,
|
y: agv.y
|
}
|
}])
|
this.mapOperationType = "add_station_pos"
|
}
|
|
} catch (ex) {
|
showError(ex)
|
}
|
|
},
|
|
clickClearStationName() {
|
this.stationEdit.name = ""
|
this.showClearName = false
|
},
|
onInputStationName(event) {
|
this.stationEdit.name = event.detail.value.trim();
|
if (this.stationEdit.name)
|
this.showClearName = true
|
else
|
this.showClearName = false
|
},
|
onInputStationX(event) {
|
console.log(event)
|
this.stationEdit.x = Number(event.detail.value);
|
console.log(this.stationEdit.x)
|
this.ctxDataStr = JSON.stringify([{
|
method: "update_station",
|
param: [this.stationEdit]
|
}, {
|
method: "move_pt_center",
|
param: {
|
x: this.stationEdit.x,
|
y: this.stationEdit.y
|
}
|
}])
|
},
|
|
onInputStationY(event) {
|
this.stationEdit.y = Number(event.detail.value);
|
console.log(this.stationEdit.y)
|
this.ctxDataStr = JSON.stringify([{
|
method: "update_station",
|
param: [this.stationEdit]
|
}, {
|
method: "move_pt_center",
|
param: {
|
x: this.stationEdit.x,
|
y: this.stationEdit.y
|
}
|
}])
|
},
|
clickClearStationX() {
|
this.stationEdit.x = 0
|
this.ctxDataStr = JSON.stringify([{
|
method: "update_station",
|
param: [this.stationEdit]
|
}, {
|
method: "move_pt_center",
|
param: {
|
x: this.stationEdit.x,
|
y: this.stationEdit.y
|
}
|
}])
|
},
|
clickClearStationY() {
|
this.stationEdit.y = 0
|
this.ctxDataStr = JSON.stringify([{
|
method: "update_station",
|
param: [this.stationEdit]
|
}, {
|
method: "move_pt_center",
|
param: {
|
x: this.stationEdit.x,
|
y: this.stationEdit.y
|
}
|
}])
|
},
|
getStantardAngle(angle) {
|
let resAngle = 0
|
if (angle < -157.5) {
|
resAngle = 180
|
} else if (angle < -112.5) {
|
resAngle = -135
|
} else if (angle < -67.5) {
|
resAngle = -90
|
} else if (angle < -22.5) {
|
resAngle = -45
|
} else if (angle < 22.5) {
|
resAngle = 0
|
} else if (angle < 67.5) {
|
resAngle = 45
|
} else if (angle < 112.5) {
|
resAngle = 90
|
} else if (angle < 157.5) {
|
resAngle = 135
|
} else if (angle <= 180) {
|
resAngle = 180
|
} else {
|
resAngle = 0
|
}
|
return resAngle
|
|
},
|
|
touchAngleChange(e) {
|
let angle = 0
|
|
const ptX = e.touches[0].clientX
|
|
const offX = ptX // ptX - e.target.offsetLeft
|
const offW = 300 / 16
|
const centerPt = this.windowWidth / 2
|
if (offX < centerPt - 8 * offW) {
|
return
|
} else if (offX < centerPt - 7 * offW) {
|
angle = 180
|
} else if (offX < centerPt - 5 * offW) {
|
angle = -135
|
} else if (offX < centerPt - 3 * offW) {
|
angle = -90
|
} else if (offX <= centerPt - offW) {
|
angle = -45
|
} else if (offX < centerPt + offW) {
|
angle = 0
|
} else if (offX < centerPt + 3 * offW) {
|
angle = 45
|
} else if (offX < centerPt + 5 * offW) {
|
angle = 90
|
} else if (offX < centerPt + 7 * offW) {
|
angle = 135
|
} else if (offX <= centerPt + 8 * offW) {
|
angle = 180
|
} else {
|
return
|
}
|
this.stationEdit.angle = angle * 3.14 / 180
|
|
|
this.angleSvg = `/static/images/angle${angle}.svg`
|
this.ctxDataStr = JSON.stringify([{
|
method: "update_station",
|
param: [this.stationEdit]
|
}])
|
},
|
handleAngleTouchStart(e) {
|
// console.log("handleAngleTouchStart", e)
|
this.touchAngleChange(e)
|
|
},
|
handleAngleTouchMove(e) {
|
// console.log("handleAngleTouchMove", e)
|
this.touchAngleChange(e)
|
},
|
|
async clickVehiclePosition() {
|
try {
|
const infoAgv = await this.loadAgvState()
|
this.ctxDataStr = JSON.stringify([{
|
method: "update_agv_state",
|
param: infoAgv
|
}, {
|
method: "move_pt_center",
|
param: {
|
x: infoAgv.x,
|
y: infoAgv.y
|
}
|
}])
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
async clickShowTeachingPath() {
|
try {
|
if (this.showTeachingPathFlag) {
|
this.ctxDataStr = JSON.stringify([{
|
method: "show_teaching_path",
|
param: {
|
show: false
|
}
|
}])
|
this.showTeachingPathFlag = false
|
return
|
}
|
this.showTeachingPathFlag = true
|
this.teachingMode = await this.loadTeachingMode()
|
this.ctxDataStr = JSON.stringify([{
|
method: "public_teaching_path",
|
param: this.teachingMode.Public || []
|
},
|
{
|
method: "station_teaching_path",
|
param: this.teachingMode.Stations || []
|
}, {
|
method: "show_teaching_path",
|
param: {
|
show: true
|
}
|
}
|
])
|
console.log(this.ctxDataStr)
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
async clickPositionStation() {
|
try {
|
const infoAgv = await this.loadAgvState()
|
this.stationEdit.x = infoAgv.x
|
this.stationEdit.y = infoAgv.y
|
this.stationEdit.angle = infoAgv.angle
|
const angle = this.getStantardAngle(this.stationEdit.angle * 180 /
|
3.14)
|
this.angleSvg = `/static/images/angle${angle}.svg`
|
this.ctxDataStr = JSON.stringify([{
|
method: "update_agv_state",
|
param: infoAgv
|
}, {
|
method: "update_station",
|
param: [this.stationEdit]
|
},
|
{
|
method: "move_pt_center",
|
param: {
|
x: infoAgv.x,
|
y: infoAgv.y
|
}
|
}
|
|
|
])
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.pages-map-teaching {
|
display: flex;
|
width: 750rpx;
|
height: 100vh;
|
background-color: #fff;
|
position: relative;
|
|
.uni-navbar-container-inner {
|
display: flex;
|
flex: 1;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
font-size: 40rpx;
|
overflow: hidden;
|
font-weight: 700;
|
color: #333;
|
|
.icon {
|
width: 30rpx;
|
height: 16rpx;
|
}
|
}
|
|
.uni-nav-bar-text {
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
|
.view-content {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: #ddd;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.map-content {
|
width: 100%;
|
display: flex;
|
flex: 1;
|
position: relative;
|
background-color: #aaa000;
|
|
.loading-overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: rgba(0, 0, 0, 0.5);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 999;
|
|
.loading-content {
|
background-color: #fff;
|
padding: 60rpx 100rpx;
|
border-radius: 20rpx;
|
text-align: center;
|
}
|
|
.loading-spinner {
|
width: 120rpx;
|
height: 120rpx;
|
border: 20rpx solid #f3f3f3;
|
border-top: 20rpx solid #1890FF;
|
border-radius: 50%;
|
animation: spin 1s linear infinite;
|
margin: 0 auto 40rpx;
|
}
|
|
@keyframes spin {
|
0% {
|
transform: rotate(0deg);
|
}
|
|
100% {
|
transform: rotate(360deg);
|
}
|
}
|
|
}
|
|
|
.content {
|
overflow: auto;
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
top: 0;
|
background-color: #ee000e;
|
|
.fabric {
|
width: 100%;
|
height: 100%;
|
background-color: #fff;
|
}
|
|
.position {
|
position: absolute;
|
right: 50rpx;
|
bottom: 400rpx;
|
|
|
.ico {
|
font-size: 65rpx;
|
color: #1890FF;
|
}
|
}
|
|
.teaching-path-show {
|
position: absolute;
|
right: 50rpx;
|
top: 100rpx;
|
padding: 12rpx;
|
border: 1px solid #1890FF;
|
border-radius: 36rpx;
|
width: 72rpx;
|
height: 72rpx;
|
background-color: #fff;
|
|
.ico {
|
font-size: 40rpx;
|
color: #1890FF;
|
}
|
}
|
|
.selected {
|
background-color: #1890FF20;
|
}
|
}
|
|
|
}
|
|
.no-content {
|
margin-top: 50px;
|
padding: 20rpx 40rpx;
|
align-items: center;
|
text-align: center;
|
display: flex;
|
flex-direction: column;
|
font-size: 30rpx;
|
font-weight: 400;
|
background-color: #000fff;
|
|
.title {
|
font-size: 40rpx;
|
margin-bottom: 10rpx;
|
}
|
|
|
}
|
|
.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;
|
}
|
|
.row-group {
|
display: flex;
|
flex-direction: row;
|
margin: 10rpx 0;
|
|
}
|
|
.disabled {
|
color: #ccc !important;
|
}
|
|
.angle-group {
|
padding: 10rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.img-angle {
|
width: 128rpx;
|
height: 42rpx;
|
margin-bottom: 10rpx;
|
}
|
|
.img-angle-pos {
|
width: 300px;
|
height: 64rpx;
|
margin: 10rpx;
|
}
|
|
}
|
|
.coordinate {
|
flex: 1;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
// .name{
|
// padding: 10rpx 0;
|
|
// }
|
}
|
|
.number-input {
|
flex: 1;
|
background-color: #fff;
|
padding: 10rpx;
|
border-radius: 8rpx;
|
color: #1890FF;
|
}
|
|
|
.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;
|
}
|
}
|
}
|
|
.img-button-group {
|
display: flex;
|
//width: 100%;
|
flex-direction: row;
|
border-radius: 10px;
|
border: 1px solid #fff;
|
font-size: 30rpx !important;
|
justify-content: space-around;
|
|
.button {
|
margin: 10rpx 20rpx;
|
height: 144rpx !important;
|
border: 0;
|
display: flex;
|
flex-direction: column;
|
background-color: #00000000;
|
|
.img {
|
margin: auto;
|
width: 72rpx;
|
height: 72rpx;
|
|
}
|
|
.ico {
|
margin: auto;
|
font-size: 72rpx;
|
color: #1890FF;
|
}
|
|
.text {
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
|
.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);
|
border-radius: 30rpx;
|
}
|
|
.am-button {
|
border-radius: 30px;
|
}
|
|
.am-button-ghost {
|
border: 1px solid #1677ff !important;
|
}
|
}
|
|
.switch-type {
|
width: 100%;
|
align-items: center;
|
vertical-align: middle;
|
|
.switch-button-group {
|
width: 96%;
|
height: 32px;
|
border: 1px solid #dfdfdf;
|
border-radius: 16px;
|
background-color: #dfdfdf;
|
display: flex;
|
flex: row;
|
|
.switch-button {
|
flex: 1;
|
border-radius: 16px;
|
color: #000000A5;
|
height: 32px;
|
line-height: 32px;
|
text-align: center;
|
}
|
|
.switch-button-checked {
|
box-shadow: 0px 2px 8px 0px #0000000C;
|
background-color: #fff;
|
color: #262626;
|
}
|
|
}
|
|
}
|
}
|
|
|
.popup-content {
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
background-color: transparent;
|
}
|
|
.popup-dialog {
|
width: 300px;
|
border-radius: 11px;
|
background-color: #fff;
|
|
.popup-dialog-title {
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
padding-top: 15px;
|
font-size: 18px;
|
font-weight: 500;
|
}
|
|
.popup-dialog-content {
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
padding: 10px;
|
}
|
|
.popup-dialog-button-group {
|
display: flex;
|
flex-direction: column;
|
|
.popup-dialog-button {
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
height: 45px;
|
border-top: 1px solid #f5f5f5;
|
color: #1890FF;
|
}
|
}
|
|
}
|
|
.popup-content-view {
|
width: 150px;
|
height: 150px;
|
border-radius: 10rpx;
|
padding: 10rpx 20rpx;
|
background-color: #fff;
|
|
.item {
|
line-height: 75rpx;
|
text-align: center;
|
border: 0;
|
|
}
|
}
|
|
.popup-content-btn {
|
margin-bottom: 20rpx;
|
margin-left: 50rpx;
|
width: 600rpx;
|
background-color: #fff;
|
border-radius: 5px;
|
display: flex;
|
|
.img-button-group {
|
display: flex;
|
//width: 100%;
|
flex-direction: row;
|
border-radius: 10px;
|
border: 1px solid #fff;
|
font-size: 30rpx !important;
|
// justify-content: space-around;
|
margin: auto;
|
|
.button {
|
margin: 10rpx 50rpx;
|
|
height: 144rpx !important;
|
border: 0;
|
display: flex;
|
flex-direction: column;
|
background-color: #00000000;
|
|
.ico {
|
margin: auto;
|
font-size: 72rpx;
|
color: #1890FF;
|
}
|
|
.red {
|
color: #ff0000 !important;
|
}
|
|
.text {
|
margin: auto;
|
|
}
|
}
|
|
}
|
|
}
|
|
}
|
</style>
|
