shaun-sheep hace 5 años
padre
commit
832ad3181a
Se han modificado 1 ficheros con 34 adiciones y 36 borrados
  1. 34 36
      src/views/ready/collectsetting/index.vue

+ 34 - 36
src/views/ready/collectsetting/index.vue

@@ -62,24 +62,22 @@
         <!--                    </el-tab-pane>-->
         <!--                </el-tabs>  -->
 
-        <!--              test-->
+        <!--锚点-->
         <div v-if="labelKey.length && tabsFalg">
-          <el-steps
-              :space="60"
-              direction="vertical"
-              :active="stepActive"
-              process-status="finish"
-              finish-status="wait"
+          <el-tabs
+              v-model="stepActive"
+              tab-position="right"
               class="reset-steps"
+              @tab-click="jump"
+
           >
-            <el-step
+            <el-tab-pane
+                :label="item.FirstName || '信息'"
+                :name="index | numToStr"
                 v-for="(item,index) in labelKey"
                 :key="item.FirstName"
-                :title="item.FirstName || '信息'"
-                @click.native="jump(index)"
-            >
-            </el-step>
-          </el-steps>
+            />
+          </el-tabs>
           <section
               v-for="(item,index) in labelKey"
               :key="index"
@@ -104,9 +102,10 @@
                 </el-checkbox>
               </ul>
             </div>
+
           </section>
         </div>
-        <!--/test-->
+        <!--/锚点-->
         <div v-else class="center" style="margin-top:260px;">
           <i class="icon-wushuju iconfont"></i> 请选择设备族
         </div>
@@ -147,7 +146,7 @@
     data() {
       return {
         value: "property",
-        stepActive: 0,
+        stepActive: '0',
         options: [{
           label: "设备",
           value: "Equipment"
@@ -572,6 +571,11 @@
       let listener = document.querySelector('.right_main')
       listener.addEventListener('scroll', this.onScroll)
     },
+    filters: {
+      numToStr(index) {
+        return index.toString()
+      }
+    },
     methods: {
       chooseMedicine(val) {
         this.getAllFamily()
@@ -882,10 +886,10 @@
         }
         return arrRslt;
       },
-      jump(index) {
-        this.stepActive = index
+      jump(tab, event) {
+        this.stepActive = tab.index
         let jump = document.querySelectorAll('.d_jump'),
-          total = jump[index].offsetTop,// 获取需要滚动的距离
+          total = jump[tab.index].offsetTop,// 获取需要滚动的距离
           listener = document.querySelector('.right_main'),
           distance = listener.scrollTop,
           step = total / 50;
@@ -904,7 +908,6 @@
             setTimeout(smoothDown, 10)
           } else {
             listener.scrollTop = total
-            window.pageYOffset = total
           }
         }
 
@@ -915,30 +918,24 @@
             setTimeout(smoothUp, 10)
           } else {
             listener.scrollTop = total
-            window.pageYOffset = total
           }
         }
       },
       onScroll() {
         let scrolled = document.querySelector('.right_main').scrollTop
-        console.log(scrolled, '==')
-
-        // if (scrolled >= 1960) {
-        //   this.stepActive = 5
-        // } else if (scrolled < 1960 && scrolled >= 1660) {
-        //   this.stepActive = 4
-        // } else if (scrolled < 1660 && scrolled >= 1260) {
-        //   this.stepActive = 3
-        // } else if (scrolled < 1260 && scrolled >= 960) {
-        //   this.stepActive = 2
-        // } else if (scrolled < 960 && scrolled >= 560) {
-        //   this.stepActive = 1
-        // } else {
-        //   this.stepActive = 0
-        // }
+        let jump = document.querySelectorAll('.d_jump')
+        // let active = Array.from(jump).findIndex((item, index) => {
+        //   return item.offsetTop > scrolled ? index : ''
+        // })
+        // this.stepActive = active.toString()
+        for (let i = 0; i < jump.length; i++) {
+          if (jump[i].offsetTop >= scrolled) {
+            this.stepActive = i.toString()
+            break
+          }
+        }
       }
     },
-
     watch: {
       projectId() {
         this.getAllFamily()
@@ -995,6 +992,7 @@
     }
 
     .reset-steps {
+      height: 100%;
       float: right;
       position: fixed;
       top: 25px;