|
@@ -1,273 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="pages" :style="{ height: screenHeight + 'px' }" v-if="dataList">
|
|
|
- <view class="pages-left" :style="{ height: screenHeight + 'px' }">
|
|
|
- <scroll-view :style="{ height: screenHeight + 'px' }" scroll-y class="pages-left" :show-scrollbar="false">
|
|
|
- <view class="pages-left-li" v-for="(item, index) in dataList" :key="index" @click="tabClick(item, index)">
|
|
|
- <text class="pages-left-li-txt" :class="{ 'pages-left-li-act': tabIndex == index }">{{ item.name }}</text>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- <view class="pages-right">
|
|
|
- <scroll-view :style="{ height: screenHeight + 'px' }" scroll-y class="pages-right" :scroll-top="scrollTop" scroll-with-animation @scroll="scrollChange">
|
|
|
- <view class="pages-right-ul" ref="pagesRight" v-for="(item, index) in dataList" :key="index">
|
|
|
- <text class="pages-right-head">{{ item.name }}</text>
|
|
|
- <view class="pages-right-box">
|
|
|
- <view class="pages-right-box-div" v-for="(child, childIndex) in item.list" :key="childIndex" :style="{background:child.status == 1 ?'#F5FAFF' :'#F0F0F0'}" >
|
|
|
- <view class="pages-right-box-div-t">
|
|
|
- <text class="t1">{{child.modelName}}</text>
|
|
|
- <checkbox-group @change="(e) =>changeCheck(child,e)">
|
|
|
- <label>
|
|
|
- <checkbox style="transform: scale(0.6);" :value="child.robotNo" :checked="child.followed == 1" />
|
|
|
- </label>
|
|
|
- </checkbox-group>
|
|
|
- </view>
|
|
|
- <view style="display: flex;align-items: center;justify-content: center;">
|
|
|
- <view class="pages-right-box-div-img" :style="{background:child.status == 1 ?'#0581FD' :'#D5D5D5'}" >
|
|
|
- <image class="img" src="../../static/robot.png" mode=""></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <text class="pages-right-box-div-name">{{child.robotName}}</text>
|
|
|
- <view class="pages-right-box-div-line">
|
|
|
- <text></text>
|
|
|
- <text class="t2" :style="{background:child.status == 1 ?'#449F34' :'#818181'}">{{child.status == 1 ? '在线' :'离线'}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- <view class="pages-right-li" :style="'width:' + 530 / 3 + 'rpx;'" v-for="(child, childIndex) in item.list" :key="childIndex">
|
|
|
- <image :src="child.image" class="pages-right-li-img" />
|
|
|
- <text class="pages-right-li-txt">{{ child.name }}</text>
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view :style="{ height: scrollHeight + 'px' }"></view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
- import {followRobot,unfollowRobot} from '@/common/api.js'
|
|
|
- // #ifdef APP-PLUS
|
|
|
- const dom = weex.requireModule('dom')
|
|
|
- // #endif
|
|
|
- /**
|
|
|
- * 兼容 nvue 获取节点信息
|
|
|
- * */
|
|
|
- function getNvueQuery(type) {
|
|
|
- return new Promise(resolve => {
|
|
|
- dom.getComponentRect(type, option => resolve(option))
|
|
|
- })
|
|
|
- }
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- screenHeight: 0,
|
|
|
- tabIndex: 0,
|
|
|
- scrollTop: 0,
|
|
|
- scrollHeight: 0, // 计算末尾列表高度
|
|
|
- scrollList: [], // 记录右侧滚动距离
|
|
|
- viewModel: null,
|
|
|
- timer: null // scroll 滚动倒计时
|
|
|
- }
|
|
|
- },
|
|
|
- props:{
|
|
|
- dataList:{
|
|
|
- type:Array,
|
|
|
- default(){
|
|
|
- return []
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.screenHeight = uni.getSystemInfoSync().windowHeight
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.init()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- changeCheck(child,e){
|
|
|
- if(child.followed == 0){
|
|
|
- followRobot({
|
|
|
- userId:this.$store.state.Token,
|
|
|
- robotId:child.robotId
|
|
|
- }).then(res =>{
|
|
|
- child.followed = 1
|
|
|
- uni.$emit("backhome")
|
|
|
- }).catch(e =>{
|
|
|
- child.followed = 0
|
|
|
- })
|
|
|
- }
|
|
|
- else{
|
|
|
- unfollowRobot({
|
|
|
- userId:this.$store.state.Token,
|
|
|
- robotId:child.robotId
|
|
|
- }).then(res =>{
|
|
|
- uni.$emit("backhome")
|
|
|
- child.followed = 0
|
|
|
- }).catch(e =>{
|
|
|
- child.followed = 1
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- init() {
|
|
|
- setTimeout(() => {
|
|
|
- this.getRightQuery()
|
|
|
- }, 100)
|
|
|
- },
|
|
|
- async getRightQuery() {
|
|
|
- // #ifdef APP-NVUE || APP-PLUS-NVUE
|
|
|
- let list = []
|
|
|
- for (let i in this.dataList) {
|
|
|
- let result = await getNvueQuery(this.$refs.pagesRight[i])
|
|
|
- list.push({
|
|
|
- top: Math.round(result.size.top),
|
|
|
- height: Math.round(result.size.height)
|
|
|
- })
|
|
|
- }
|
|
|
- this.scrollList = list
|
|
|
- // #endif
|
|
|
- // #ifndef APP-NVUE || APP-PLUS-NVUE
|
|
|
- var selectorQuery = uni.createSelectorQuery()
|
|
|
- selectorQuery.selectAll('.pages-right-ul').boundingClientRect(data => {
|
|
|
- this.scrollList = data.map(item => {
|
|
|
- return {
|
|
|
- top: Math.round(item.top),
|
|
|
- height: Math.round(item.height)
|
|
|
- }
|
|
|
- })
|
|
|
- }).exec()
|
|
|
- // #endif
|
|
|
- let listHeight = this.scrollList[this.scrollList.length - 1].height
|
|
|
- this.scrollHeight = this.screenHeight - listHeight
|
|
|
- },
|
|
|
- tabClick(item, index) {
|
|
|
- this.scrollTop = this.scrollList[index].top
|
|
|
- },
|
|
|
- scrollChange(ev) {
|
|
|
- var scorllTop = Math.round(ev.detail.scrollTop)
|
|
|
- for (var i = 0; i < this.scrollList.length; i++) {
|
|
|
- if (this.scrollList[i].top <= scorllTop && scorllTop < (this.scrollList[i].top + this.scrollList[i].height)) {
|
|
|
- this.tabIndex = i
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
- .pages {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- &-left {
|
|
|
- width: 220rpx;
|
|
|
- background-color: #E8E8E8;
|
|
|
- box-sizing: border-box;
|
|
|
- &-li {
|
|
|
- height: 95rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- &-txt {
|
|
|
- line-height: 95rpx;
|
|
|
- text-align: center;
|
|
|
- color: #000000;
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &-act {
|
|
|
- color: #0581FD;
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-right {
|
|
|
- width: 530rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- &-ul {
|
|
|
- width: 530rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &-head {
|
|
|
- font-size: 24rpx;
|
|
|
- padding: 20rpx 30rpx;
|
|
|
- color: #BBBBBB;
|
|
|
- }
|
|
|
-
|
|
|
- &-box {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- &-div{
|
|
|
- background: #F5FAFF;
|
|
|
- position: relative;
|
|
|
- border: 1px solid #44A2FF;
|
|
|
- padding: 30rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- margin:30rpx;
|
|
|
- &-t{
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- .t1{
|
|
|
- font-size: 28rpx;
|
|
|
- color: #000000;
|
|
|
- }
|
|
|
- }
|
|
|
- &-img{
|
|
|
- background: #0581FD;
|
|
|
- width: 120rpx;
|
|
|
- height: 108rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin:20rpx 0rpx;
|
|
|
- align-items: center;
|
|
|
- border-radius: 20rpx;
|
|
|
- .img{
|
|
|
- width: 86rpx;
|
|
|
- height: 86rpx;
|
|
|
- margin-top: -10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- &-name{
|
|
|
- font-size: 26rpx;
|
|
|
- text-align: center;
|
|
|
- color: #000000;
|
|
|
- }
|
|
|
- &-line{
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- .t2{
|
|
|
- color: #fff;
|
|
|
- background: #449F34;
|
|
|
- border-radius: 8rpx;
|
|
|
- width: 70rpx;
|
|
|
- padding: 3rpx 0;;
|
|
|
- text-align: center;
|
|
|
- font-size: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- &-li {
|
|
|
- height: 200rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- &-img {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &-txt {
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|