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