刷新修改

monitorMobile/components/tki-tree/tki-tree.vue

@@ -3,18 +3,24 @@
 		<view class="tki-tree-mask" :class="{'show':showTree}" @tap="_cancel"></view>
 		<view class="tki-tree-cnt" :class="{'show':showTree}">
 			<view class="tki-tree-bar">
-				<view class="tki-tree-bar-cancel" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_cancel">取消</view>
+				<view class="tki-tree-bar-cancel" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_cancel">取消
+				</view>
 				<view class="tki-tree-bar-title" :style="{'color':titleColor}">{{title}}</view>
-				<view class="tki-tree-bar-confirm" :style="{'color':confirmColor}" hover-class="hover-c" @tap="_confirm">确定</view>
+				<view class="tki-tree-bar-confirm" :style="{'color':confirmColor}" hover-class="hover-c"
+					@tap="_confirm">确定</view>
 			</view>
+
 			<view class="tki-tree-view">
+				<!-- <view style="">
+					<u-search height="90rpx" @change="searChange(searchText,treeList)" :inputStyle="{fontSize:'30rpx'}"
+						v-model="searchText" placeholder="请输入" shape="square" :showAction="false"></u-search>
+				</view> -->
 				<scroll-view class="tki-tree-view-sc" :scroll-y="true">
 					<block v-for="(item, index) in treeList" :key="index">
 						<view class="tki-tree-item" :style="[{
 							paddingLeft: item.rank*15 + 'px',
 							zIndex: item.rank*-1 +50
-						}]"
-						 :class="{
+						}]" :class="{
 							border: border === true,
 							show: item.show,
 							last: item.lastRank,
@@ -22,14 +28,21 @@
 							open: item.open,
 						}">
 							<view class="tki-tree-label" @tap.stop="_treeItemTap(item, index)">
-								<image class="tki-tree-icon" :src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon"></image>
+								<image class="tki-tree-icon"
+									:src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon">
+								</image>
 								{{item.name}}
 							</view>
-							<view class="tki-tree-check" @tap.stop="_treeItemSelect(item, index)" v-if="selectParent?true:item.lastRank">
-								<view class="tki-tree-check-yes" v-if="item.checked" :class="{'radio':!multiple}" :style="{'border-color':confirmColor}">
-									<view class="tki-tree-check-yes-b" :style="{'background-color':confirmColor}"><u-icon name="checkbox-mark" color="#ffffff" size="16"></u-icon></view>
+							<view class="tki-tree-check" @tap.stop="_treeItemSelect(item, index)"
+								v-if="selectParent?true:item.lastRank">
+								<view class="tki-tree-check-yes" v-if="item.checked" :class="{'radio':!multiple}"
+									:style="{'border-color':confirmColor}">
+									<view class="tki-tree-check-yes-b" :style="{'background-color':confirmColor}">
+										<u-icon name="checkbox-mark" color="#ffffff" size="16"></u-icon>
+									</view>
 								</view>
-								<view class="tki-tree-check-no" v-else :class="{'radio':!multiple}" :style="{'border-color':confirmColor}"></view>
+								<view class="tki-tree-check-no" v-else :class="{'radio':!multiple}"
+									:style="{'border-color':confirmColor}"></view>
 							</view>
 						</view>
 					</block>
@@ -108,10 +121,12 @@
 				showTree: false,
 				treeList: [],
 				selectIndex: -1,
+				searchText: ''
 			}
 		},
 		computed: {},
 		methods: {
+			
 			_show() {
 				this.showTree = true
 			},
@@ -268,13 +283,39 @@
 					this.treeList[i].checked = v.orChecked
 				})
 			},
-			_initTree(range = this.range){
+			_initTree(range = this.range) {
 				this.treeList = [];
 				this._renderTreeList(range);
 				this.$nextTick(() => {
 					this._defaultSelect(range)
 				})
-			}
+			},
+			// searChange(value, data) {
+			// 	// this.treeList = this.filterTree(value, data)
+			// },
+			filterTree(val, tree, newArr = []) {
+				if (!(tree.length && val)) { // 如果搜索关键字为空直接返回源数据
+					return tree
+				}
+				for (let item of tree) {
+					if (item.name.indexOf(val) > -1) { // 匹配到关键字的逻辑
+						newArr.push(item) // 如果匹配到就在数值中添加记录
+						continue // 匹配到了就退出循环了此时如果有子集也会一并带着
+					}
+			
+					if (item.children && item.children.length) { // 如果父级节点没有匹配到就看看是否有子集，然后做递归
+						let subArr = this.filterTree(val, item.children) // 缓存递归后的子集数组
+						if (subArr && subArr.length) { // 如果子集数据有匹配到的节点
+							let node = {
+								...item,
+								children: subArr
+							} // 关键逻辑，缓存父节点同时将递归后的子节点作为新值
+							newArr.push(node) // 添加进数组
+						}
+					}
+				}
+				return newArr
+			},
 		},
 		watch: {
 			range(list) {
@@ -290,6 +331,19 @@
 					this._reTreeList();
 				}
 			},
+			// searchText: {
+			// 	handler(newValue, oldValue) {
+			// 		console.log(111)
+			// 		console.log(this.treeList,11)
+			// 		console.log(this.range,11)
+			// 		// let arr = JSON.parse(JSON.stringify(this.treeList))
+			// 		this.filterTrees = this.filterTree(newValue, this.range)
+			// 		console.log(this.range,22)
+			// 		console.log(this.treeList,22)
+			// 	},
+			// 	deep: true
+
+			// }
 		},
 		mounted() {
 			this._initTree();
@@ -299,4 +353,4 @@
 
 <style scoped>
 	@import "./style.css";
-</style>
+</style>

monitorMobile/pages.json

@@ -41,6 +41,7 @@
 		{
 			"path": "pages/earlyWarning/index",
 			"style": {
+				"enablePullDownRefresh": true,
 				"navigationStyle": "custom"
 			}
 		},
@@ -102,6 +103,7 @@
 		{
 			"path": "pages/monitor/index",
 			"style": {
+				"enablePullDownRefresh": true,
 				"navigationBarTitleText": "监控管理"
 			}
 		},

monitorMobile/pages/earlyWarning/index.vue

@@ -10,7 +10,7 @@
 				<image src="@/static/image/earlyWarning/logo.png" mode="heightFix"></image>
 			</view>
 		</view>
-		<view class="contentBox" @touchmove.stop @touch.stop>
+		<view class="contentBox">
 			<view class="warningInfo">
 				<view class="searchBox">
 					<view class="searchLine" @click="openSearch">
@@ -172,9 +172,9 @@
 					<!-- </scroll-view> -->
 					<!-- </u-pull-refresh> -->
 				</view>
-				<selectSearch ref="selectSearchBox" :cellVisible="false" v-model="searchForm.alarmType"
-					:options="warnOption" :title.sync="searchForm.$alarmType" placeholder="预警类型"
-					search-placeholder="预警类型" />
+				<selectSearch ref="selectSearchBox" :cellVisible="false"
+					v-model="searchForm.alarmType" :options="warnOption" :title.sync="searchForm.$alarmType"
+					placeholder="预警类型" search-placeholder="预警类型" />
 				<selectRadio ref="selectRadioBox" :cellVisible="false" v-model="searchForm.warnHand"
 					:options="handOption" :title.sync="searchForm.$warnHand" placeholder="处理状态" />
 			</view>
@@ -196,7 +196,7 @@
 		},
 		data() {
 			return {
-				searchValue: '',
+				searchValue: '全部',
 				isShowSearch: false,
 				isTriggered: true,
 				searchForm: {
@@ -210,7 +210,12 @@
 					pageNum: 1,
 					pageSize: 10
 				},
-				warnOption: [],
+				warnOption: [
+					{
+						label: '全部',
+						value: ''
+					}
+				],
 				handOption: [{
 						label: '已处理',
 						value: 1
@@ -239,36 +244,22 @@
 			},
 		},
 		onLoad() {
+			console.log(this.searchForm.$alarmType)
 			// 获取预警类型
 			this.getWarnTypeList()
 			// 隐藏导航栏
 			this.loadmore()
 		},
+		onPullDownRefresh() {
+			uni.stopPullDownRefresh()
+			this.status = 'loadmore'
+			this.searchForm.pageNum = 1;
+			this.warnList = []
+			this.loadmore()
+		},
 		methods: {
-
-			onRefresh() {
-				// this.refreshing = true;
-				console.log('下拉刷新')
-			},
-			// 执行刷新操作
-			doRefresh() {
-				console.log('正在刷新...');
-				// 这里执行刷新数据的逻辑
-				this.searchForm.pageNum = 1;
-				this.warnList = [];
-				this.loadmore()
-				setTimeout(() => {
-					// 刷新数据完成后，调用restore或abort方法结束刷新状态
-					this.restore();
-				}, 2000);
-			},
-			// 刷新结束，恢复scroll-view
-			restore() {
-				console.log('刷新结束');
-			},
-			// 刷新结束，取消scroll-view的刷新状态
-			abort() {
-				console.log('取消刷新');
+			selectChange(e) {
+				console.log(e, 2323)
 			},
 			// 预览图片
 			previewImage(url, index) {
@@ -317,16 +308,17 @@
 					} = res;
 
 					if (code == 200) {
-						this.warnOption = data.map(item => {
+						let arr = data.map(item => {
 							return {
 								label: item.name,
 								value: item.code
 							};
 						})
-						this.warnOption.unshift({
-							label: '全部',
-							value: ''
-						})
+						this.warnOption = [...this.warnOption,...arr]
+						// this.warnOption.unshift({
+						// 	label: '全部',
+						// 	value: ''
+						// })
 					}
 				});
 

monitorMobile/pages/monitor/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view @touchmove.stop@touch.stop class="inspectionCenter">
+	<view class="inspectionCenter">
 		<view v-show="showVideo" class="poupBox">
 			<view class="contentBox">
 				<view id="url-player-test"></view>
@@ -125,7 +125,7 @@
 
 			</view>
 		</u-modal> -->
-		<tki-tree ref="tkitree" :selectParent="selectParent" :multiple="multiple" :range="treelist" :foldAll="flod"
+		<tki-tree ref="tkitree" title="摄像头分组" :selectParent="selectParent" :multiple="multiple" :range="treelist" :foldAll="flod"
 			rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree>
 	</view>
 </template>
@@ -154,6 +154,7 @@
 				videoTitle: '',
 				isShowSearch: false,
 				searchForm: {
+					groupName: '全部',
 					groupId: '',
 					pageNum: 1,
 					pageSize: 10
@@ -183,6 +184,13 @@
 			// 获取列表数据
 			this.loadmore()
 		},
+		onPullDownRefresh(){
+			uni.stopPullDownRefresh()
+			this.status = 'loadmore'
+			this.searchForm.pageNum = 1;
+			this.monitorList = []
+			this.loadmore()
+		},
 		methods: {
 			
 			setVideo() {
@@ -296,7 +304,7 @@
 			getGroupList() {
 			  groupList({}).then((res) => {
 			    if (res.code == 200) {
-			      this.treelist = [...[{id: "",name: "全部"}], ...res.data];
+			      this.treelist = [...[{id: "",name: "全部",checked: true}], ...res.data];
 			    }
 			  });
 			},