<template>
|
<view class="pages-backup">
|
<view class="switch-type">
|
<view class="switch-button-group">
|
<view class="switch-button" v-for="(page,index) in pageList" :key="page.name"
|
:class="curPageIndex ==index?'switch-button-checked':''" @click="onSelectPage(index)">
|
{{page.name}}
|
</view>
|
|
</view>
|
</view>
|
<swiper circular indicator-dots class="swiper" :current="curPageIndex" @change="changePageSwiper">
|
<swiper-item class="swiper-item">
|
<view class="list">
|
<view class="list-tip">{{pageList[0].title}}</view>
|
<view class="list-view" v-if="pageList[0].list.length > 0">
|
<view class="list-item" v-for="(item,index) in pageList[0].list" :key="index"
|
@click="clickSceneItem(index)">
|
<view class="list-name">{{item}}</view>
|
|
<uni-icons v-if="sceneIndex === index" type="checkmarkempty" size="20"
|
color="#1890FF"></uni-icons>
|
</view>
|
</view>
|
<view class="list-no-content" v-else>
|
<!-- <image class="img" src="/images/icon-park-outline_attention.svg" alt=" 图片" mode="aspectFit" />-->
|
<uni-icons color="#ccc" type="info" size="128"></uni-icons>
|
<view class="space">没有找到符合条件的场景</view>
|
</view>
|
<view class="list-tip">请选择上传到手机端的场景</view>
|
<view>
|
|
<a-button :disabled="loading|| sceneIndex < 0" type="primary" class="button"
|
@click="clickSaveToLocal">上传至手机端</a-button>
|
</view>
|
</view>
|
|
</swiper-item>
|
<swiper-item class="swiper-item">
|
<view class="list">
|
<view class="ist-tip">{{pageList[1].title}}</view>
|
<view class="list-view" v-if="pageList[1].list.length > 0">
|
<view class="list-item" v-for="(item,index) in pageList[1].list" :key="index"
|
@click="clickSceneItem2(index)">
|
<view class="list-name">{{item.name}}</view>
|
|
<uni-icons v-if="sceneIndex2 === index" type="checkmarkempty" size="20"
|
color="#1890FF"></uni-icons>
|
</view>
|
</view>
|
<view class="list-no-content" v-else>
|
<!-- <image class="img" src="/images/icon-park-outline_attention.svg" alt=" 图片" mode="aspectFit" />-->
|
<uni-icons color="#ccc" type="info" size="128"></uni-icons>
|
<view class="space">没有找到符合条件的场景</view>
|
</view>
|
<view class="list-tip">请选择下载到车辆端的场景</view>
|
<view>
|
<a-button :disabled="loading|| sceneIndex2< 0" type="primary" class="button"
|
@click="clickSaveToVehicle">下载至车辆端</a-button>
|
</view>
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
session,
|
showToast,
|
showModal,
|
showInfo,
|
showError
|
} from "@/comm/utils.js"
|
import {
|
getAllScene,
|
handoffScene,
|
saveDBData,
|
getDBData
|
} from "@/api/vehicle.js"
|
import {
|
Button
|
} from 'antd-mobile-vue-next'
|
export default {
|
name: "PagesBackup",
|
components: {
|
'a-button': Button
|
},
|
data() {
|
return {
|
loading: false,
|
sceneIndex: -1,
|
sceneIndex2: -1,
|
curPageIndex: 0,
|
pageList: [{
|
name: "上传场景",
|
title: "ES-GO1场景列表",
|
list: []
|
}, {
|
name: "下载场景",
|
title: "手机端保存的场景列表",
|
list: []
|
}]
|
}
|
},
|
computed: {},
|
onLoad(option) {
|
this.ip = option.ip || ""
|
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.pageList[0].list = await this.loadScene()
|
this.pageList[1].list = await this.loadLocalScene()
|
|
console.log(this.pageList[1].list)
|
} catch (ex) {
|
showError(ex)
|
}
|
},
|
async loadScene() {
|
try {
|
const res = await getAllScene(this.ip) || []
|
const list = res?.sceneList || []
|
return list
|
} catch (ex) {
|
showError(ex)
|
return []
|
}
|
},
|
async loadLocalScene() {
|
try {
|
const list = session.getValue("scene_db") || []
|
return list
|
} catch (ex) {
|
showError(ex)
|
return []
|
}
|
},
|
changePageSwiper(evt) {
|
if (this.loading)
|
return
|
let index = evt.target.current || evt.detail.current;
|
this.setData({
|
curPageIndex: index
|
})
|
},
|
|
onSelectPage(index) {
|
if (this.loading)
|
return
|
this.setData({
|
curPageIndex: index
|
})
|
},
|
clickSceneItem(index) {
|
if (this.loading)
|
return
|
this.setData({
|
sceneIndex: index
|
})
|
},
|
clickSceneItem2(index) {
|
if (this.loading)
|
return
|
this.setData({
|
sceneIndex2: index
|
})
|
},
|
|
clickSaveToLocal() {
|
const _this = this
|
let list = this.pageList[1].list
|
if (list.length > 0) {
|
showModal(`上传该场景会替换掉当前已上传的场景`, "是否要覆盖场景？").then(async (res) => {
|
if (res) {
|
_this.saveToLocal(this.sceneIndex)
|
}
|
})
|
|
return
|
}
|
_this.saveToLocal(this.sceneIndex)
|
},
|
async saveToLocal(index) {
|
try {
|
this.setData({
|
loading: true
|
})
|
uni.showLoading({
|
title:"正在上传场景"
|
})
|
const scene = this.pageList[0].list[index]
|
await handoffScene(this.ip, "", scene)
|
session.setValue("scene_db", [])
|
const res = await getDBData(this.ip)
|
const list = [{
|
name: scene,
|
data: res ||[]
|
}]
|
session.setValue("scene_db", list)
|
this.pageList[1].list = list
|
this.sceneIndex2 = -1
|
showToast(`上传场景[${scene}]成功`)
|
} catch (ex) {
|
showError(ex)
|
|
}
|
finally {
|
this.setData({
|
loading: false
|
})
|
uni.hideLoading()
|
}
|
|
},
|
clickSaveToVehicle() {
|
const _this = this
|
const scene = this.pageList[1].list[this.sceneIndex2].name
|
let list = this.pageList[0].list
|
const curIndex = list.findIndex((a) => a == scene)
|
console.log(curIndex, scene,list)
|
if (curIndex > -1) {
|
showModal(`下载该场景会替换掉已下载的同名场景。`, "是否要覆盖场景？").then(async (res) => {
|
if (res) {
|
_this.saveToVehicle(this.sceneIndex2)
|
}
|
})
|
|
return
|
}
|
_this.saveToVehicle(this.sceneIndex2)
|
},
|
async saveToVehicle(index) {
|
try {
|
this.setData({
|
loading: true
|
})
|
uni.showLoading({
|
title:"正在下载场景"
|
})
|
|
const data = this.pageList[1].list[index].data
|
const scene = this.pageList[1].list[index].name
|
await saveDBData(this.ip, data)
|
this.pageList[0].list.push(scene)
|
showToast(`下载场景[${scene}]成功`)
|
|
} catch (ex) {
|
showError(ex)
|
}
|
finally {
|
this.setData({
|
loading: false
|
})
|
uni.hideLoading()
|
}
|
|
},
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pages-backup {
|
display: flex;
|
width: 750rpx;
|
height: 100vh;
|
flex-direction: column;
|
background-color: #F5F5F5;
|
|
.switch-type {
|
width: calc(100% - 40rpx);
|
margin: 20rpx 20rpx 10rpx 20rpx;
|
align-items: center;
|
vertical-align: middle;
|
|
.switch-button-group {
|
height: 32px;
|
border: 1px solid #dfdfdf;
|
border-radius: 15rpx;
|
background-color: #dfdfdf;
|
display: flex;
|
flex: row;
|
|
.switch-button {
|
flex: 1;
|
border-radius: 15rpx;
|
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;
|
}
|
|
}
|
|
}
|
|
.swiper {
|
|
width: calc(100% - 20rpx);
|
margin: 10rpx;
|
|
display: flex;
|
flex: 1;
|
}
|
|
.list {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
padding: 0 10rpx;
|
|
.list-tip {
|
width: 100%;
|
padding: 15rpx;
|
color: #888;
|
}
|
|
.list-view {
|
width: 100%;
|
//flex: 1;
|
border-radius: 10rpx;
|
overflow: auto;
|
background-color: #fff;
|
max-height:500rpx ;
|
.list-item {
|
|
border-bottom: 1px solid #ddd;
|
display: flex;
|
flex-direction: row;
|
padding:20rpx;
|
|
.list-name {
|
flex: 1;
|
margin-right: 20rpx;
|
font-size: 32rpx;
|
font-weight: 700;
|
padding:10rpx 0;
|
}
|
}
|
|
.list-item:last-child {
|
border-bottom: 0;
|
/* 右下角 */
|
}
|
}
|
|
.list-no-content {
|
flex: 1;
|
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;
|
}
|
|
}
|
|
.am-button {
|
border-radius: 90rpx;
|
height: 90rpx;
|
line-height: 60rpx;
|
}
|
|
}
|
|
|
|
}
|
</style>
|
