zhgdyunapp/components/tree-node/cameraIndex.vue

 <template>
 	<view class="tree-content-compontent">
 		<view class="content-box" :class="{ 'content-box_project': item.type == 2 }"
 			:style="`padding-left: ${treeIndex * 30}rpx;`" @click="toggleNodes(item)">
 			<view class="box-text">
 				<image v-if="item.deviceState == 1" class="img" src="/static/bodyWornCamera/bodyWornCamera_online.png"
 					mode=""></image>
 				<image v-else-if="item.deviceState == 2" class="img"
 					src="/static/bodyWornCamera/bodyWornCamera_offline.png" mode=""></image>
 				<text>{{ item.name }}</text>
 				<text v-if="item.type == 1">({{ deviceStateNum(item) }}/{{ item.children.length || 0 }})</text>
 			</view>
 			<view @click.stop="expandFn">
 				<!-- <u-icon name="arrow-right" color="#B3B3B3" size="40"
					v-if="!expanded && item.children && item.children.length" style="margin-right: 10rpx;"></u-icon>
				<u-icon name="arrow-down" color="#B3B3B3" size="40"
					v-if="expanded && item.children && item.children.length" style="margin-right: 10rpx;"></u-icon> -->
 				<u-icon v-if="!expanded && item.children && item.children.length" name="arrow-right" color="#B3B3B3"
 					size="40"></u-icon>
 				<u-icon v-if="expanded && item.children && item.children.length" name="arrow-down" color="#B3B3B3"
 					size="40"></u-icon>
 			</view>
 			<image v-if="(!item.children || !item.children.length) && !iconShow" style="width: 55rpx; height: 40rpx"
 				src="../../static/videoControlIcon/videoIcon1.png" mode="">
 			</image>
 			<!-- <image style="width:80rpx;height:80rpx;float:left" src="../../static/icon-down-black.png" mode="">
			</image> -->
 		</view>
 		<view class="sub-component">
 			<view :class="{ expandedStyle: expanded == true }"
 				v-if="item.children && item.children.length && expanded">
 				<TreeMenu :pageType="pageType" :iconShow="iconShow" v-for="(child, index) in item.children"
 					:key="child.id" :item="child" :treeIndex="treeIndex + 1" :expandedIndex="index"
 					@clickItem="clickTreeItem"></TreeMenu>
 			</view>
 		</view>
 	</view>
 </template>

 <script>
 	import TreeMenu from "./areaIndex.vue";
 	export default {
 		name: "TreeMenu",
 		components: {
 			TreeMenu,
 		},
 		props: ["item", "pageType", "treeIndex", "iconShow", "expandedIndex"],
 		data() {
 			return {
 				expanded: false,
 			};
 		},
 		mounted() {
 			if (this.expandedIndex == 0) {
 				this.expanded = true;
 			}
 		},
 		methods: {
 			clickTreeItem(item) {
 				console.log(item, 777888);
 				if (!item.deviceState) return;
 				this.$emit("clickItem", item);
 				// uni.navigateTo({
 				// 	url: `/pages/videoManage/videoGroup?&sn=${item.projectSn}`
 				// })
 			},
 			expandFn(e) {
 				console.log(e, 666);
 				this.expanded = !this.expanded;
 			},
 			toggleNodes(item) {
				if (item.type != 2) return;
 				this.$emit("clickItem", item);
 			},
 		},
 		computed: {
 			deviceStateNum() {
 				return (row) => {
 					return row.children.filter(item => item.deviceState == 1).length;
 				}
 			}
 		}
 	};
 </script>

 <style lang="scss" scoped>
 	.tree-content-compontent {
 		background: white;
 		border-bottom: 2rpx solid #f7f7f7;

 		.content-box {
 			display: flex;
 			align-items: center;
 			justify-content: start;
 			padding: 16rpx 26rpx;
 			position: relative;

 			// border-bottom: 2px solid #D6D6D6;
 			>.box-text {
 				font-family: PingFang SC, PingFang SC;
 				font-weight: 500;
 				font-size: 30rpx;
 				color: #1a1a1a;
 				margin-right: auto;
 				display: inline-block;
 				flex: 1;
 				white-space: nowrap;
 				overflow: hidden;
 				text-overflow: ellipsis;
				display: flex;
				align-items: center;

 				.img {
 					width: 28rpx;
 					height: 34rpx;
 					margin-right: 10rpx;
 				}
 			}

 			.box-text1 {
 				font-weight: 500;
 				font-size: 28rpx;
 				color: #b3b3b3;
 				padding: 0 28rpx;
 			}
 		}

 		.content-box_project {
 			background-color: #f2f3f7;
 			border-bottom: 1px solid #fff;
 		}

 		.sub-component {
 			background: #ffffff;

 			.tree-content-compontent {
 				background: #ffffff;
 				border: none;
 			}
 		}

 		.expandedStyle {
 			// padding-left: 60rpx;
 		}
 	}
 </style>