UI

src/views/leader.vue

@@ -15,20 +15,20 @@
           <div class="i-list-con h-25">
             <div id="personnel-chart" style="width: 100%;height:12vh;"></div>
             <div class="d-l-con-icon">
-              <div class="icon-con w-50" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2==0" @click="getForestLeader(item.jobValue,item.jobType)">
+              <div class="icon-con w-50" :class="{on:iconCurrentIndex1==item.jobValue}" v-for="(item,index) in visuForestCloudRYBO"   @click="getForestLeader(item.jobValue,item.jobType)">
                 <div class="icon icon-mid el-icon-user"></div>
                 <div class="icon-text">
                   <h5>{{item.job}}</h5>
                   <h6>{{item.number}}</h6>
                 </div>
               </div>
-              <div class="icon-con w-50  m-btm-no" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+              <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
                 <div class="icon icon-mid el-icon-user"></div>
                 <div class="icon-text">
                   <h5>{{item.job}}</h5>
                   <h6>{{item.number}}</h6>
                 </div>
-              </div>
+              </div> -->
             </div>
           </div>
         </div>
@@ -40,7 +40,7 @@
         <div class="forthis">
           <div class="i-list-con h-27">
             <div class="d-l-con-icon">
-              <div class="icon-con" v-for="(item,index) in peopleList" @click="getLeaderTrack(item.userId)">
+              <div class="icon-con" :class="{on:listCurrentIndex1==item.userId}" v-for="(item,index) in peopleList" @click="getLeaderTrack(item.userId)">
                 <div class="icon icon-mid el-icon-user"></div>
                 <div class="icon-text personnel-name">
                   <h6>{{item.nickName}}</h6>
@@ -64,7 +64,7 @@
           <div class="i-list-con h-73">
 
             <div class="h-19 overflow-y">
-              <div class="d-l-con" v-for="(item,index) in xunLinListOne" @click="setConnectList(item.planLine)">
+              <div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"  v-for="(item,index) in xunLinListOne" @click="setConnectList(item.planLine,item.planName)">
                 <div class="d-l-l-text">
                   <i class="i-small"></i>
                   <h4>{{item.planName}}</h4>
@@ -111,6 +111,9 @@
     },
     data() {
       return {
+		iconCurrentIndex1:'',
+		listCurrentIndex1:'',
+		listCurrentIndex2:'',
         //左右缩进
         indentStyle: '',
         indentleft: '',
@@ -175,20 +178,23 @@
         //获取巡林计划
         getPlanList().then(res => {
           this.xunLinListOne=res.data
-          console.log(res.data)
+          console.log(res.data.visuForestCloudRYBO)
         })
       },
       //获取左侧人员列表
       getForestLeader(linJob,linType) {
+		this.iconCurrentIndex1 = linJob
         this.peopleList=[];
         getForestLeader(linJob,linType).then(res => {
           this.peopleList=res.data
         })
+		console.log( '56665464654564',this.peopleList)
         this.connectList=[]
         this.$refs.supermap.clearC();
       },
       //点击左侧人员列表获取轨迹
       getLeaderTrack(userId) {
+		this.listCurrentIndex1 = userId
         let that=this
         this.connectList=[]
         getLeaderTrack(userId).then(res => {
@@ -210,7 +216,8 @@
         })
       },
 
-      setConnectList(points){
+      setConnectList(points,planName){
+		this.listCurrentIndex2 = planName
         this.connectList=[]
         if(points!=null&&points!=""){
           this.connectList=JSON.parse(points);