<template>
|
<view class="pages-teaching-list">
|
<view class="view-content">
|
<view class="list-content" v-if="teachingPublic.length + teachingStation.length > 0">
|
<uni-swipe-action class="list">
|
<uni-swipe-action-item class="list-item"
|
:class="{'selected':selTeachingName == item.name,'border-top':index!= 0}"
|
v-for="(item,index) in teachingPublic" :key="index" :auto-close="true"
|
@click.stop="clickTeachingItem(item)">
|
<view class="item-title">{{item.name}}</view>
|
<view class="item-text">{{getTeachingSrcDst(item)}}</view>
|
<template v-slot:right>
|
<view class="btn-del" @click="clickDelTeachingMode('Public',item)">删除</view>
|
</template>
|
</uni-swipe-action-item>
|
<uni-swipe-action-item class="list-item"
|
:class="{'selected':selTeachingName == item.name,'border-top':index!= 0}"
|
v-for="(item,index) in teachingStation" :key="index" :auto-close="true"
|
@click.stop="clickTeachingItem(item)">
|
<view class="item-title">{{item.name}}</view>
|
<view class="item-text">{{getTeachingSrcDst(item)}}</view>
|
<template v-slot:right>
|
<view class="btn-del" @click="clickDelTeachingMode('Stations',item)">删除</view>
|
</template>
|
</uni-swipe-action-item>
|
</uni-swipe-action>
|
</view>
|
<view class="list-no-content" v-else>
|
<uni-icons color="#ccc" type="info" size="128"></uni-icons>
|
<view class="space">还没有示教</view>
|
</view>
|
<view class="position-add" @click="clickAddTeaching" @touchstart='btnAddTouchStart'
|
@touchmove='btnAddTouchMove'
|
:style="{transform:`translate(${btnAddInfo.x}px,${btnAddInfo.y}px) scale(1)`}">
|
<uni-icons class="img" type="plus-filled" size="80" color="#1890FF"></uni-icons>
|
</view>
|
</view>
|
|
|
</view>
|
</template>
|
<script>
|
import {
|
showToast,
|
showModal,
|
session,
|
} from "@/comm/utils.js"
|
import {
|
Button
|
} from 'antd-mobile-vue-next'
|
|
import {
|
getTeachingMode,
|
delTeachingMode
|
} from "@/api/vehicle.js"
|
export default {
|
name: "PagesTeachingList",
|
components: {
|
'a-button': Button,
|
},
|
data() {
|
return {
|
ip: "",
|
teachingPublic: [],
|
teachingStation: [],
|
selTeachingName: "",
|
isEditTeaching: false,
|
btnAddInfo: {
|
lx: 0,
|
ly: 0,
|
x: 0,
|
y: 0
|
},
|
}
|
},
|
computed: {
|
|
},
|
watch: {
|
|
},
|
onLoad(option) {
|
const _this = this
|
this.ip = option.ip || ""
|
|
uni.setNavigationBarTitle({
|
title: "示教路线列表"
|
})
|
|
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 {
|
let btninfo = session.getValue('teaching_btn_add')
|
if (btninfo) {
|
|
if (btninfo.x > 10) {
|
btninfo.x = 10
|
}
|
if (btninfo.x > 40) {
|
btninfo.x = 40
|
}
|
this.btnAddInfo = btninfo
|
}
|
await this.loadTeachingMode()
|
|
} catch (ex) {
|
|
this.showError(ex)
|
}
|
},
|
|
async loadTeachingMode() {
|
try {
|
const {
|
data
|
} = await getTeachingMode(this.ip)
|
this.teachingPublic = data?.Public || []
|
this.teachingStation = data?.Stations || []
|
} catch (ex) {
|
this.showError(ex)
|
}
|
},
|
clickAddTeaching() {
|
const _this = this
|
uni.navigateTo({
|
url: `/pages/teaching/index?ip=${this.ip}`,
|
events: {
|
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
|
add: function(data) {
|
_this.loadTeachingMode()
|
},
|
}
|
|
})
|
},
|
btnAddTouchStart(e) {
|
this.btnAddInfo.lx = e.touches[0].clientX;
|
this.btnAddInfo.ly = e.touches[0].clientY;
|
},
|
btnAddTouchMove(e) {
|
|
if (this.btnAddInfo.ly < 40) {
|
|
this.btnAddInfo.x += (e.touches[0].clientX - this.btnAddInfo.lx)
|
this.btnAddInfo.lx = e.touches[0].clientX;
|
this.btnAddInfo.ly = e.touches[0].clientY;
|
if (this.btnAddInfo.x < 50 - this.windowWidth) {
|
this.btnAddInfo.x = 50 - this.windowWidth
|
}
|
if (this.btnAddInfo.x > 40) {
|
this.btnAddInfo.x = 40
|
}
|
session.setValue('teaching_btn_add', this.btnAddInfo)
|
return
|
}
|
if (this.btnAddInfo.lx < 40) {
|
this.btnAddInfo.y += (e.touches[0].clientY - this.btnAddInfo.ly)
|
this.btnAddInfo.lx = e.touches[0].clientX;
|
this.btnAddInfo.ly = e.touches[0].clientY;
|
if (this.btnAddInfo.y > 80) {
|
this.btnAddInfo.y = 80
|
}
|
session.setValue('teaching_btn_add', this.btnAddInfo)
|
return
|
}
|
|
this.btnAddInfo.x += (e.touches[0].clientX - this.btnAddInfo.lx)
|
this.btnAddInfo.y += (e.touches[0].clientY - this.btnAddInfo.ly)
|
this.btnAddInfo.lx = e.touches[0].clientX;
|
this.btnAddInfo.ly = e.touches[0].clientY;
|
|
|
if (this.btnAddInfo.x < 50 - this.windowWidth) {
|
this.btnAddInfo.x = 50 - this.windowWidth
|
}
|
if (this.btnAddInfo.x > 40) {
|
this.btnAddInfo.x = 40
|
}
|
if (this.btnAddInfo.y > 80) {
|
this.btnAddInfo.y = 80
|
}
|
session.setValue('teaching_btn_add', this.btnAddInfo)
|
},
|
|
clickTeachingItem(item) {
|
this.setData({
|
isAdd: false
|
})
|
this.selTeachingName = item.name
|
|
},
|
getTeachingSrcDst(item) {
|
const list = item.pos_list || []
|
let tip = ""
|
if (list.length > 1) {
|
tip = `(${Number(list[0].x).toFixed(2)},${Number(list[0].y).toFixed(2)}) (${Number(list[1].x).toFixed(2)},${Number(list[1].y).toFixed(2)})`
|
}
|
if (list.length == 1) {
|
tip = `(${Number(list[0].x).toFixed(2)},${Number(list[0].y).toFixed(2)})`
|
}
|
return tip
|
},
|
clickDelTeachingMode(mode, item) {
|
showModal("确认删除示教", "警告").then((res) => {
|
if (res) {
|
this.deleteTeachingMode(mode, item)
|
}
|
})
|
},
|
|
async deleteTeachingMode(mode, item) {
|
try {
|
item.mode = mode
|
await delTeachingMode(this.ip, [item])
|
if (mode == "Public") {
|
const list = this.teachingPublic
|
const index = list.findIndex((a) => {
|
return a.name == item.name
|
})
|
if (index < 0)
|
return
|
list.splice(index, 1)
|
this.teachingPublic = [...list]
|
|
} else if (mode == "Stations") {
|
const list = this.teachingStation
|
const index = list.findIndex((a) => {
|
return a.name == item.name
|
})
|
if (index < 0)
|
return
|
list.splice(index, 1)
|
this.teachingStation = [...list]
|
|
}
|
|
} catch (ex) {
|
this.showError(ex)
|
}
|
|
},
|
|
showError(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-teaching-list {
|
display: flex;
|
width: 750rpx;
|
height: 100vh;
|
position: relative;
|
|
.view-content {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
display: flex;
|
flex-direction: column;
|
|
.position-add {
|
position: fixed;
|
right: 10px;
|
bottom: 40px;
|
}
|
}
|
|
.map-content {
|
width: 100%;
|
display: flex;
|
flex: 1;
|
position: relative;
|
|
.content {
|
overflow: auto;
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
top: 0;
|
|
.fabric {
|
width: 100%;
|
height: 100%;
|
background-color: #fff;
|
}
|
}
|
|
.position-site {
|
display: flex;
|
position: absolute;
|
margin: 2rpx;
|
right: 40rpx;
|
bottom: 500rpx;
|
flex-direction: row;
|
padding: 10rpx;
|
border-radius: 10rpx;
|
background-color: #fff;
|
border: 2rpx solid #1890FF;
|
justify-content: center;
|
align-items: center;
|
color: #1890FF;
|
font-size: 32rpx;
|
|
.img {
|
width: 40rpx;
|
height: 40rpx;
|
margin: 0 10rpx;
|
}
|
}
|
|
|
|
}
|
|
.list-content {
|
display: flex;
|
width: 100%;
|
padding: 20rpx;
|
flex: 1;
|
flex-direction: column;
|
overflow-y: auto;
|
overflow-x: hidden;
|
|
.list {
|
border-radius: 10px;
|
background-color: #fff;
|
|
|
|
.list-item {
|
padding: 10rpx 0;
|
|
.item-title {
|
font-size: 32rpx;
|
padding: 10rpx 20rpx;
|
}
|
|
|
.item-text {
|
font-size: 28rpx;
|
color: #888;
|
padding: 10rpx 20rpx;
|
}
|
}
|
|
.border-top {
|
border-top: 1px solid #ddd;
|
}
|
|
.selected {
|
background-color: #eee;
|
}
|
|
.btn-del {
|
margin: 0 10rpx;
|
display: flex;
|
padding: 0 10rpx;
|
background-color: #FF4D4F;
|
font-weight: 700;
|
color: #fff;
|
justify-content: center;
|
align-items: center;
|
}
|
|
}
|
}
|
|
.list-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;
|
|
.img {
|
width: 212rpx;
|
height: 212rpx;
|
color: #ddd;
|
}
|
|
.space {
|
margin-top: 20rpx;
|
}
|
|
}
|
|
.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;
|
|
|
|
}
|
|
.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;
|
|
}
|
}
|
|
}
|
|
|
}
|
|
}
|
</style>
|
