添加地块缓存和选择逻辑
This commit is contained in:
Iruka
parent
baeb93e976
commit
ee6dc2b3cf
4
App.vue
4
App.vue
@ -1,11 +1,11 @@
|
||||
<script>
|
||||
import land from "@/utils/land.js"
|
||||
import indexUtil from "@/utils/indexUtil.js"
|
||||
import mqttUtil from "@/utils/mqttUtil.js"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
land: new land(), //全局地块列表管理
|
||||
indexData: new indexUtil(), //全局地块列表管理
|
||||
mqtt: null,
|
||||
mqttObj: {
|
||||
topics: []
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<u-popup mode="left" :show="show" @close="close">
|
||||
<u-collapse ref="refCollapse" :value="showValue" @change="changeItem" @open="openItem" @close="closeItem"
|
||||
<u-collapse ref="refCollapse" :value="showIndex" @change="changeItem" @open="openItem" @close="closeItem"
|
||||
accordion>
|
||||
<u-collapse-item v-for="(item,i) in list" :name="i">
|
||||
<u-collapse-item v-for="(item,i) in indexData.list" :name="i">
|
||||
<template v-slot:icon>
|
||||
<view class="iconfont icon-qiye icon"></view>
|
||||
</template>
|
||||
@ -13,15 +13,17 @@
|
||||
<u-badge numberType="overflow" type="primary" max="999" :showZero="true"
|
||||
:value="item.children.length" />
|
||||
</template>
|
||||
<view class="u-collapse-content" v-if="item.id == selectCId">
|
||||
<view class="u-collapse-content" v-if="showId[item.id]">
|
||||
<u-list>
|
||||
<u-list-item v-for="item2 in item.children">
|
||||
<u-cell @click="select(item2)">
|
||||
<u-cell @click="select(i,item2)">
|
||||
<template v-slot:icon>
|
||||
<view class="iconfont icon-ditu icon"></view>
|
||||
</template>
|
||||
<template v-slot:title>
|
||||
{{item2.name}}
|
||||
<view :class="[item2.id == indexData.selectItem.id ? 'checked':'']">
|
||||
{{item2.name}}
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right-icon>
|
||||
<u-badge numberType="overflow" type="success" max="999" :showZero="true"
|
||||
@ -32,7 +34,6 @@
|
||||
</u-list>
|
||||
</view>
|
||||
</u-collapse-item>
|
||||
|
||||
</u-collapse>
|
||||
</u-popup>
|
||||
</template>
|
||||
@ -53,49 +54,57 @@
|
||||
return {
|
||||
user: store.state.user.user,
|
||||
show: false,
|
||||
showValue: null,
|
||||
list: getApp().land.list,
|
||||
selectCId: getApp().land.selectCId,
|
||||
selectItem: getApp().land.selectItem,
|
||||
showIndex: null,
|
||||
showId: {},
|
||||
indexData: getApp().indexData,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const that = this;
|
||||
getApp().land.getList(that.user.userId);
|
||||
that.list = getApp().land.list;
|
||||
that.selectCId = getApp().land.selectCId;
|
||||
that.selectItem = getApp().land.selectItem;
|
||||
this.indexData.getList(this.user.userId);
|
||||
if (this.indexData.selectItem) {
|
||||
this.showId[this.indexData.selectItem.companyId] = true;
|
||||
} else {
|
||||
this.showId[this.indexData.list.id] = true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//打开弹窗
|
||||
open() {
|
||||
console.log("open:", this.list);
|
||||
if (this.list.length > 0) {
|
||||
this.showIndex = this.indexData.showIndex;
|
||||
if (this.indexData.list.length > 0) {
|
||||
this.show = true;
|
||||
} else {
|
||||
this.$toast("无数据");
|
||||
}
|
||||
},
|
||||
//关闭弹窗
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
select(item) {
|
||||
this.selectItem = item;
|
||||
getApp().land.setStorage(2, item);
|
||||
this.$emit("select", item);
|
||||
//选中数据
|
||||
select(index, item) {
|
||||
let oldItem = this.indexData.selectItem;
|
||||
this.indexData.selectItem = item;
|
||||
this.indexData.showIndex = index;
|
||||
if (item.id != oldItem.id) {
|
||||
this.indexData.setStorage(2, item);
|
||||
this.$emit("select", item);
|
||||
uni.$emit("notify-updates-land");
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
changeItem(e) {
|
||||
console.log("changeItem:", e);
|
||||
},
|
||||
//打开行变化
|
||||
changeItem(e) {},
|
||||
//打开行
|
||||
openItem(e) {
|
||||
this.showValue = e;
|
||||
this.selectCId = this.list[e].id;
|
||||
this.showIndex = e;
|
||||
this.showId[this.indexData.list[e].id] = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.refCollapse.init();
|
||||
})
|
||||
},
|
||||
closeItem(e) {
|
||||
this.showValue = null;
|
||||
closeItem(e) { //折叠行
|
||||
this.showIndex = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -137,5 +146,9 @@
|
||||
color: #39ac4f;
|
||||
}
|
||||
}
|
||||
|
||||
.checked {
|
||||
border-bottom: 2px solid #66ccff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,7 @@
|
||||
<!-- 弹窗 -->
|
||||
<view>
|
||||
<!-- 地块选择 -->
|
||||
<custom-select-land ref="refLand" @select=""></custom-select-land>
|
||||
<custom-select-land ref="refLand" @select="selectLand"></custom-select-land>
|
||||
<!-- 角度 -->
|
||||
<custom-angle-slider ref="refAngleSlider" mode="bottom" @close="" @confirm="angleSliderConfirm" />
|
||||
</view>
|
||||
@ -28,6 +28,9 @@
|
||||
openLand() {
|
||||
this.$refs.refLand.open();
|
||||
},
|
||||
selectLand(e) {
|
||||
console.error('selectLand', e);
|
||||
},
|
||||
change(e) {
|
||||
console.log('change', e);
|
||||
},
|
||||
@ -36,7 +39,8 @@
|
||||
url: `/pages/index-list/index-list`
|
||||
})
|
||||
},
|
||||
toQRCode() {},
|
||||
angleSliderConfirm() {},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -382,7 +382,7 @@
|
||||
<!-- 弹窗 -->
|
||||
<view>
|
||||
<!-- 地块选择 -->
|
||||
<custom-select-land ref="refLand" @select=""></custom-select-land>
|
||||
<custom-select-land ref="refLand"></custom-select-land>
|
||||
<!-- 角度 -->
|
||||
<custom-angle-slider ref="refAngleSlider" mode="bottom" @close="" @confirm="angleSliderConfirm" />
|
||||
</view>
|
||||
@ -399,10 +399,16 @@
|
||||
landList: [1, 2, 3],
|
||||
value: false,
|
||||
sliderValue: 1,
|
||||
landDataChange: true,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// uni.$emit("mqtt-link");
|
||||
uni.$off("notify-updates-land");
|
||||
uni.$on("notify-updates-land", () => {
|
||||
console.error("更新数据")
|
||||
this.landDataChange = true;
|
||||
});
|
||||
},
|
||||
onShow() {
|
||||
// #ifdef APP-PLUS
|
||||
|
||||
@ -6,37 +6,40 @@ import {
|
||||
getManagerGroundList,
|
||||
} from "@/api/index.js"
|
||||
|
||||
class land {
|
||||
class indexUtil {
|
||||
static isFirst = true //是否第一次加载
|
||||
static userId = null;
|
||||
static list = [];
|
||||
static selectCId = null;
|
||||
static selectItem = null;
|
||||
static userId = null; //用户id
|
||||
static list = []; //列表
|
||||
static showIndex = null; //默认显示的面板索引
|
||||
static selectItem = null; //选中的数据
|
||||
static isDataChange = false; //数据是否改变
|
||||
|
||||
//接收创建来的数据
|
||||
constructor() {
|
||||
this.isFirst = true;
|
||||
this.userId = null;
|
||||
this.list = [];
|
||||
this.selectCId = null;
|
||||
this.showIndex = null;
|
||||
this.selectItem = null;
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
getList(userId) {
|
||||
console.error("isFirst:",this.isFirst);
|
||||
uni.showLoading();
|
||||
this.userId = userId;
|
||||
if (this.isFirst) {
|
||||
const lands = uni.getStorageSync(constant.lands);
|
||||
if (lands && lands.userId == userId) {
|
||||
this.list = lands.data;
|
||||
}
|
||||
this.selectItem = uni.getStorageSync(constant.landItem) || null;
|
||||
this.showIndex = this.findLandIndex(this.list, this.selectItem);
|
||||
}
|
||||
uni.hideLoading();
|
||||
if (this.isFirst) {
|
||||
this.isFirst = false;
|
||||
this.getNewList(userId);
|
||||
}
|
||||
console.error("list:",this.list);
|
||||
}
|
||||
|
||||
// 获取最新数据
|
||||
@ -56,29 +59,31 @@ class land {
|
||||
// console.error("land:", land);
|
||||
if (land.data.length) {
|
||||
this.handleData(companys, land.data);
|
||||
// 持久化到本地缓存中
|
||||
this.setStorage(1, {
|
||||
userId: this.userId,
|
||||
data: this.list,
|
||||
});
|
||||
this.setStorage(2, this.selectItem);
|
||||
} else {
|
||||
commonUtils.toast("无数据");
|
||||
// 持久化到本地缓存中
|
||||
this.setStorage(1, null);
|
||||
this.setStorage(2, null);
|
||||
this.list = null;
|
||||
this.selectItem = null;
|
||||
}
|
||||
} else {
|
||||
commonUtils.toast("无数据");
|
||||
this.setStorage(1, null);
|
||||
this.setStorage(2, null);
|
||||
this.list = null;
|
||||
this.selectItem = null;
|
||||
}
|
||||
// 持久化到本地缓存中
|
||||
if (this.list) {
|
||||
this.setStorage(1, {
|
||||
userId: this.userId,
|
||||
data: this.list,
|
||||
});
|
||||
} else {
|
||||
this.setStorage(1, null);
|
||||
}
|
||||
this.setStorage(2, this.selectItem);
|
||||
}
|
||||
|
||||
// 组织数据
|
||||
handleData(companys, lands) {
|
||||
let id = null;
|
||||
let selectCId = null;
|
||||
let selectItem = null;
|
||||
const landItem = uni.getStorageSync(constant.landItem);
|
||||
if (landItem) {
|
||||
@ -125,15 +130,27 @@ class land {
|
||||
let index = 0;
|
||||
while (!selectItem) {
|
||||
if (companys[index].children.length) {
|
||||
companys[index].isLoad = true;
|
||||
companys[index].children[0].isSelect = true;
|
||||
selectItem = companys[index].children[0];
|
||||
}
|
||||
}
|
||||
|
||||
this.selectCId = selectItem.companyId;
|
||||
this.list = companys;
|
||||
this.selectItem = selectItem;
|
||||
this.showIndex = this.findLandIndex(this.list, this.selectItem);
|
||||
}
|
||||
|
||||
//寻找默认显示的行
|
||||
findLandIndex(list, item) {
|
||||
let showIndex = null
|
||||
if (list.length && item) {
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
if (list[i].id == item.companyId) {
|
||||
showIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return showIndex;
|
||||
}
|
||||
|
||||
// 缓存数据
|
||||
@ -145,7 +162,6 @@ class land {
|
||||
} else {
|
||||
commonUtils.toast("数据持久化异常");
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
export default land
|
||||
export default indexUtil
|
||||
Loading…
Reference in New Issue
Block a user