smart_storage_app/pages/home-page/device-list/index.vue

<template>
	<view style="height: 100%;">
		<u-navbar :is-back="true" :background="background" :border-bottom="false" :custom-back="toback">
			<view class="slot-wrap">
				<stationDropdow disabled style="width: 100%" ref="dropdow" />
			</view>
		</u-navbar>
		<zero-loading v-if="loading"></zero-loading>

		<view v-else style="height: calc(100% - 100rpx);">

			<luyj-tree :props="treeProps" :searchPlaceholder="$t('homePage.device.inputNameQuery')" :trees="deviceArr" @lookDetail="toDetail">
			</luyj-tree>
		</view>
	</view>
</template>

<script>
	import stationDropdow from "@/components/station-dropdow/index.vue";
	export default {
		components: {
			stationDropdow
		},
		data() {
			return {
				stationId: null,
				deviceArr: [],
				PCSstatus: [],
				loading: false,
				treeProps: {
					id: 'srcId',
					label: 'name',
					children: 'children',
					multiple: false,
					checkStrictly: false,
					nodes: false
				},
				background: {
					backgroundColor: "#0ea17e",
				},
			};
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
		},
		watch: {
			currentStation: {
				handler(val) {
					this.stationId = val.id;
					this.GetPageDevice();
				},
				deep: true,
				immediate: true,
			},
		},
		onLoad() {},
		onShow() {},

		methods: {
			toback() {
				uni.navigateBack({
					delta: 1
				})
			},
			toDetail(item) {
				let type = ""
					if (item.deviceType?.includes("pcs")) {
						type = "pcs";
					} else if (item.deviceType?.includes("stack") ) {
						type = "cluster";
					} else if (item.deviceType?.includes("bms") && this.stationId === 349 ) {
						type = "stack";
					} else if (item.deviceType?.includes("pack")) {
						type = "pack";
					} else if (item.deviceType?.includes("air_condition")) {
						type = "air";
					} else if (item.deviceType?.includes("ele_meter") ) {
						type = "ammeter";
					} else if (item.deviceType?.includes("emu" )) {
						type = "emu";
					} else if (item.deviceType?.includes("storage_fire") ) {
						type = "storage";
					} else if (item.deviceType?.includes("basic") ) {
						type = "anything"
					} else if (item.deviceType?.includes("mttp") || item.deviceType?.includes("mppt")) {
						type = "mttp"
					}
				
				if (type) {
					uni.setStorage({
						key: 'deviceName', //本地缓存中的指定的 key
						data: item.name
					})
					uni.navigateTo({
						url: `/pages/home-page/device-detail/index?srcId=${item.srcId}&type=${type}`,
					});
				}

			},
			// processData(node) {
			//     if (node.isContainCol === 1) {
			//         node.children.push({name: "属性", children: [], deviceType:node.deviceType ? node.deviceType : 'basic',srcId:node.srcId }); // 添加一个空对象
			//     }
			//     // 递归处理子节点
			//     node.children.forEach(child => {
			// 		if(child.isContainCol || child.deviceType.includes("pack")){
			// 			this.processData(child);
			// 		}

			//     });
			//     return node;
			// },
			async GetPageDevice() {
				this.loading = true;
				try {
					const res = await this.$u.api.deviceList.GetPageDevice({
						stationId: this.stationId,
					});
					this.deviceArr = res.data[0].children
				} catch (e) {
					//TODO handle the exception
				} finally {
					this.loading = false;
				}
			},
		},
	};
</script>

<style lang="scss">
	page {
		height: 100% !important;
	}
</style>
<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;

		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
		/deep/ .u-input__input {
			color: #fff !important;
		}
	}
</style>