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