26

src/views/monitor/components/box-2.vue

@@ -33,7 +33,7 @@
 
         <div class="tree-box">
           <div class="tree-item" v-for="(item, i) in regionList" :key="i">
-            <div class="tree-item__node" @click="handleRegions(i)">
+            <div class="tree-item__node" @click.stop="handleRegions(i)">
               <img
                 class="tree-item__icon"
                 :class="{ 'tree-item__icon-up': item.show }"
@@ -43,15 +43,31 @@
               <span class="tree-item__name">{{ item.regions }}</span>
             </div>
             <div v-if="item.show" class="tree-item__child">
+				<div class="tree-item__child-item"  v-for="(resource, x) in item.resourcesList">
+					<div class="new-title" @click.stop="handleRegList(resource,i,x)">
+						<img
+						  class="tree-item__icon"
+						  :class="{ 'tree-item__icon-up': resource.show }"
+						  src="@/assets/images/arrow-down.png"
+						  alt=""
+						/>
+						{{resource.regions}}
+					
+					</div>
+					<div v-if="resource.show">
 						<div
 						   class="tree-item__child-item"
-                v-for="(resource, x) in item.videoResources"
+						   v-for="(res, x) in resource.videoResources"
 						   :key="x"
-                @click="handleCamera(resource.cameraIndexCode,resource)"
+						   @click.stop="handleCamera(res.cameraIndexCode,res)"
 						 >
-                {{ resource.cameraName || resource.cameraIndexCode }}
+						   {{ res.cameraName || res.cameraIndexCode }}
 						 </div>
 					</div>
+					
+				</div>
+            
+            </div>
           </div>
         </div>
       </div>
@@ -350,6 +366,9 @@
   const handleRegions = (e) => {
     regionList.value[e].show = !regionList.value[e].show
   }
+  const handleRegList = (item,i,x)=>{
+	  regionList.value[i].resourcesList[x].show = !regionList.value[i].resourcesList[x].show
+  }
   const handleCamera = async (itemCode,resource) => {
 	  console.log(resource,'resourceresourceresourceresourceresourceresource')
     show.value = true
@@ -487,10 +506,11 @@
       cameraName: cameraName.value,
       businessScenicArea: params.businessScenicArea
     })
-	console.log(params.businessScenicArea,'测收拾收拾')
+	console.log(res.data,'测收拾收拾')
     regionList.value = res.data
 	regionList.value.videoResources = res.data.videoResources
 	regionList.value[0].show = true
+	regionList.value[0].resourcesList[0].show = true
 	if(search=='search'){
 		regionList.value.forEach((item,index)=>{
 			item.show = true
@@ -543,6 +563,15 @@
 </script>
 
 <style lang="scss" scoped>
+	.new-title{
+		margin-bottom:vh(20);
+		color:#fff;
+	}
+	.tree-item__child-item{
+		.new-title:last-child{
+			margin:0;
+		}
+	}
   .action {
     &-box {
       margin-top: vh(16);
@@ -701,7 +730,7 @@
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            display: flex;
+            // display: flex;
             align-items: flex-start;
             &:nth-last-of-type(1) {
               padding: vh(0) vw(20);