图表交互功能完善

src/views/dataSearch.vue

@@ -26,13 +26,13 @@
           </el-radio-group>
         </div>
         <div class="left4" v-if="radio == '数据样品集'">
-          <div v-for="(item, index) in dataList" :key="index" class="left4_1" @click="openList(item)">
+          <div v-for="(item, index) in dataList" :key="index" :id="item.tsy_id" class="left4_1" @click="openList(item, 'list')">
             <div class="left4_top">
-              <p>{{ item.dataset_name }} <span class="mileage">{{ item.file_total }}</span></p>
+              <p :style="currentSample === item.tsy_id ? 'color: #409eff' : ''">{{ item.dataset_name }} <span class="mileage">{{ item.file_total }}</span></p>
               <span class="org">{{ item.create_time }}</span>
             </div>
-            <ul v-if="currenId == item.tsy_id && fold">
+            <ul v-show="currenId == item.tsy_id && fold">
-              <li :class="sample.tsy_id == currenSample ? 'bg-color' : ''" class="sample"
+              <li :class="sample.tsy_id == currenSample ? 'bg-color' : ''" class="sample" :id="sample.tsy_id"
                 v-for="(sample, i) in item.sampleArray" :key="i" @click.stop="onSample(sample)">{{ sample.sample_name }}
               </li>
             </ul>
@@ -75,7 +75,7 @@
           </div>
         </div>
         <div class="left4" v-if="radio == '航次'">
-          <div v-for="(item, index) in dataList" :key="index" class="left4_1" @click="turnDeatilPage(item)">
+          <div v-for="(item, index) in dataList" :key="index" class="left4_1" :id="item.tsy_id" @click="turnDeatilPage(item)">
             <div class="left4_top">
               <p :style="currentVoyage === item.tsy_id ? 'color: #409eff' : ''">{{ item.voyage_name }} <span
                   class="mileage">{{ item.voyage_mileage }}海里</span></p>
@@ -256,6 +256,7 @@ export default {
       chooseStation: null,
       chooseLine: null,
       currentVoyage: null, // 当前选中的航次
+      currentSample: null, // 当前选中的数据样品集合
       // 地图图层基础地址
       CesiumHostAddr: '',
       // 保存自定义底图
@@ -560,6 +561,21 @@ export default {
         if (type === '航次航线') {
           this.currentVoyage = pickedObject.id._id
         }
+        if (type === '数据样品集航线') {
+          this.currentSample = pickedObject.id._id
+        }
+        if (type === '样品航线' || type === 'point') {
+          // 循环匹配数据样品集，展开对应数据样品
+          this.dataList.forEach(item => {
+            item.sampleArray.forEach(i => {
+              if (pickedObject.id._id == i.tsy_id) {
+                this.openList(item, 'map')
+              }
+            })
+          })
+        } else {
+          this.scrollTo(pickedObject.id._id)
+        }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
       // 叠加叠加影像服务
@@ -665,7 +681,8 @@ export default {
       this.show = false
     },
     // 展开数据样品列表
-    openList(item) {
+    openList(item, type) {
+      if (type === 'list') {
         if (this.currenId == item.tsy_id) {
           this.fold = !this.fold
         } else {
@@ -675,6 +692,15 @@ export default {
             this.job = item.job_type
           }
         }
+      } else {
+        this.fold = true
+        this.currenId = item.tsy_id
+        this.job = item.job_type
+        // this.scrollTo(item.tsy_id)
+        setTimeout(() => {
+          this.scrollTo(this.currenSample)
+        }, 500)
+      }
     },
     // 选中样品列表数据
     onSample(sample) {
@@ -710,6 +736,13 @@ export default {
     },
     goHome() {
       this.$router.push({ name: 'home' })
+    },
+    scrollTo(sectionId) {
+      const element = document.getElementById(sectionId);
+      console.log(element)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
     }
   }
 }

src/views/dataTransfer/sampleDataset.vue

@@ -39,7 +39,7 @@
           :disabled="disabledUpload"
           :auto-upload="false"
           :on-change="changeFile"
-          :on-error='fileErr'
+          :on-error="fileErr"
           :on-exceed="handleExceed"
           :file-list="fileList1"
           :data="fileData"