报警管理页面设备下拉改为设备树

pages/work/alarm/listAlarm.vue

@@ -1,10 +1,11 @@
 <template>
 	<view class="card-group">
 		<u-tabs :list="tabList" @click="tabListClick"></u-tabs>
-		<view class="search-container">
-			<uni-data-select v-model="equipId" placeholder="请选择监测设备" :localdata="equipList"
-				@change="equipChange"></uni-data-select>
-		</view>
+		<u-popup :show="show" mode="bottom" :closeable = "closeable" @open= "openPopup" @close="closePopup">
+			<ly-tree :tree-data="treeData" :ready="ready" node-key="id" :props="props"
+				:expandOnClickNode="expandOnClickNode" @node-click="handleNodeClick"></ly-tree>
+		</u-popup>
+		<u-button @click="show = true">{{equipName}}</u-button>
 		<view class="card-group" v-if="total === 0">
 			<leruge-empty text="暂无数据" type="minus"></leruge-empty>
 		</view>
@@ -57,14 +58,30 @@
 	} from "@/api/alarm/alarm.js";
 
 	import {
-		listAllInfo
+		listAllInfo,
+		getEquipTree
 	} from "@/api/equip/equip.js"
 
 	export default {
 		data() {
 			return {
+				//是否显示关闭按钮
+				closeable: true,
+				//是否显示弹窗
+				show: false,
+				//树形结构数据
+				treeData: [],
+				ready: false,
+				props: function() {
+					return {
+						label: 'equipName',
+						children: 'childList'
+					}
+				},
+				expandOnClickNode: false,
 				flag: null,
 				equipId: null,
+				equipName: "选择设备",
 				//加载到最后一条
 				finished: false,
 				tipText: "正在加载...",
@@ -97,13 +114,26 @@
 		onShow() {
 			this.alarmList = [];
 			this.getAlarmList();
-			this.getEquipList();
+			// this.getEquipList();
 		},
 		// onLoad(opts) {
 		// 	this.flag = opts.flag;
 		// },
 		methods: {
-			tabListClick(item){
+			openPopup(){
+				this.getEquipList();
+			},
+			closePopup(){
+				this.show = false;
+			},
+			handleNodeClick(obj) {
+				this.equipName = obj.label;
+				this.equipId = obj.key;
+				this.show = false;
+				this.alarmList = [];
+				this.getAlarmList();
+			},
+			tabListClick(item) {
 				this.finished = true;
 				this.alarmList = []
 				this.tabIndex = item.index;
@@ -120,15 +150,26 @@
 				this.getAlarmList();
 			},
 			getEquipList() {
-				listAllInfo().then((res) => {
-					const list = res.data;
-					list.forEach((item) => {
-						const element = {
-							value: item.id,
-							text: item.equipName
-						}
-						this.equipList.push(element);
-					})
+				// listAllInfo().then((res) => {
+				// 	const list = res.data;
+				// 	list.forEach((item) => {
+				// 		const element = {
+				// 			value: item.id,
+				// 			text: item.equipName
+				// 		}
+				// 		this.equipList.push(element);
+				// 	})
+				// })
+				this.ready = false;
+				this.treeData = [
+					{
+						"id":null,
+						"equipName": "所有设备"
+					}
+				];
+				getEquipTree(this.queryParams).then((res) => {
+					this.treeData = this.treeData.concat(res);
+					this.ready = true;
 				})
 			},
 			//前往详情页