354 lines
7.8 KiB
Vue
354 lines
7.8 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="liebiaos" v-if="List.length != 0">
|
||
<scroll-view :style="{height:scorllheight + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
|
||
<view class="item_jklist" v-for="(item,index) in List" :key="index">
|
||
<view class="itembox_top">
|
||
<view class="top_box">
|
||
<image src="../../static/sxt.png" mode=""></image>
|
||
<view class="title">
|
||
{{item.stationName}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bot_box">
|
||
<view class="bot_left" v-for="(it,i) in item.depUrlArr" :key="i" @click="todetail(it,i,item)">
|
||
<view class="botleft_bot">
|
||
<view class="">
|
||
{{item.depDesArr[i]}}
|
||
</view>
|
||
</view>
|
||
<view class="botleft_top">
|
||
<image src="../../static/mrt.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="load">
|
||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="zwsj" v-else>
|
||
<view class="inzwsj">
|
||
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
|
||
<view class="zwsjtext">
|
||
暂无数据
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import api from "@/api/api"
|
||
import configService from '@/common/service/config.service.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
height: 0,
|
||
scorllheight: 0,
|
||
baseUrl: configService.apiUrl,
|
||
allNum: '',
|
||
isLastpage: '',
|
||
intervalId: null,
|
||
loadStatus: 'more', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
|
||
isLoadMore: false, //是否加载中
|
||
show: false,
|
||
show1: false,
|
||
top: 0,
|
||
List: [],
|
||
pageNo: 1,
|
||
pageSize: 4,
|
||
token: '',
|
||
sxtlist: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
uni.getSystemInfo({
|
||
success: res => {
|
||
var pxToRpxScale = 750 / res.windowWidth
|
||
var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
|
||
var navigationHeight = 44 * pxToRpxScale
|
||
this.height = res.windowHeight * pxToRpxScale //将px 转换rpx
|
||
console.log(this.height, ktxStatusHeight, navigationHeight)
|
||
this.scorllheight = this.height
|
||
}
|
||
});
|
||
this.getList()
|
||
this.getToken()
|
||
},
|
||
onShow() {
|
||
uni.getSystemInfo({
|
||
success: res => {
|
||
var pxToRpxScale = 750 / res.windowWidth
|
||
var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
|
||
var navigationHeight = 44 * pxToRpxScale
|
||
this.height = res.windowHeight * pxToRpxScale //将px 转换rpx
|
||
console.log(this.height, ktxStatusHeight, navigationHeight)
|
||
this.scorllheight = this.height
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
getToken() {
|
||
this.$http.post('/applet/ysyun/getYsToken').then(res => {
|
||
this.token = res.data.data.ysToken
|
||
})
|
||
},
|
||
getList() {
|
||
let params = {}
|
||
params.pageNo = this.pageNo
|
||
params.pageSize = this.pageSize
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
this.List = []
|
||
this.$http.get('/applet/survDeviceDeploy/list', {
|
||
params: params
|
||
}).then(res => {
|
||
if (res.data.code == 0) {
|
||
var data = res.data.data
|
||
this.List = this.List.concat(data)
|
||
if (data.length != 0) {
|
||
this.allNum = Number(data.length) / Number(this.pageSize) + '';
|
||
console.log(this.allNum, '总页数')
|
||
if (this.allNum.indexOf('.') == -1) {
|
||
this.allNum = this.allNum;
|
||
console.log(this.allNum, 'if')
|
||
} else {
|
||
this.allNum = parseInt(Number(this.allNum) + 1);
|
||
console.log(this.allNum, 'else')
|
||
}
|
||
console.log(this.pageNo, this.allNum, '156156')
|
||
if (this.pageNo == this.allNum) {
|
||
this.isLastpage = true;
|
||
this.loadStatus = 'nomore'
|
||
console.log(this.isLastpage, 'true', 'nomore')
|
||
} else {
|
||
this.isLastpage = false;
|
||
// this.isLoadMore=true
|
||
this.loadStatus = 'more'
|
||
console.log(this.isLastpage, 'false')
|
||
}
|
||
} else {
|
||
this.isLastpage = true;
|
||
this.loadStatus = 'nomore'
|
||
}
|
||
}
|
||
uni.hideLoading();
|
||
this.isRefresher = false
|
||
})
|
||
},
|
||
lower() {
|
||
console.log("最后一页了，取消下拉功能");
|
||
// 最后一页了，取消下拉功能
|
||
if (this.isLastpage) {
|
||
return
|
||
}
|
||
clearInterval(this.intervalId);
|
||
var num = 1;
|
||
this.intervalId = setInterval(() => {
|
||
num = num + 1;
|
||
}, 1000)
|
||
console.log(this.intervalId, num)
|
||
this.pageNo = this.pageNo + 1;
|
||
let params = {}
|
||
params.pageNo = this.pageNo
|
||
params.pageSize = this.pageSize
|
||
this.$http.get('/applet/survDeviceDeploy/list', {
|
||
params: params
|
||
}).then(res => {
|
||
if (res.data.code == 0) {
|
||
var data = res.data.data
|
||
this.List = this.List.concat(data)
|
||
if (data.length != 0) {
|
||
if (this.pageNo == this.allNum) {
|
||
this.isLastpage = true;
|
||
this.loadStatus = 'nomore'
|
||
console.log(this.isLastpage, 'true')
|
||
} else {
|
||
this.isLastpage = false;
|
||
// this.isLoadMore=true
|
||
this.loadStatus = 'more'
|
||
console.log(this.isLastpage, 'false')
|
||
}
|
||
} else {
|
||
this.isLastpage = true;
|
||
this.loadStatus = 'nomore'
|
||
}
|
||
}
|
||
})
|
||
},
|
||
todetail(it, i, val) {
|
||
let item = it.split('-')
|
||
// utils_config.config.h5LinkIp
|
||
var obj = {
|
||
url: "https://m.ilhzn.cn/#/pages/cameraView/ysyCamera",
|
||
deployDes: val.stationName + '-' + val.depDesArr[i],
|
||
ysToken: this.token,
|
||
deviceIotUrl: item[0]
|
||
};
|
||
const queryString = Object.keys(obj).map((key) =>
|
||
`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join("&");
|
||
const webviewUrl = `/packDetail1/pages/device/index4?${queryString}`;
|
||
uni.navigateTo({
|
||
url: webviewUrl
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
height: 100%;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.container {
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.bgimg {
|
||
width: 100%;
|
||
height: 2135rpx;
|
||
}
|
||
|
||
.item_jklist {
|
||
padding: 0rpx 20rpx 0rpx;
|
||
background-color: #ffffff;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.item_jklist {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.itembox_top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
padding: 20rpx 0;
|
||
color: #8b95ea;
|
||
}
|
||
|
||
.top_box {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.top_box image {
|
||
width: 38rpx;
|
||
height: 40rpx;
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
.bot_box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.bot_left {
|
||
width: 48%;
|
||
border: 4rpx solid #f0f0f0;
|
||
border-radius: 4rpx;
|
||
// margin-top: 30rpx;
|
||
// box-shadow: 5px 5px 5px #0000001a;
|
||
}
|
||
|
||
// .bot_left:first-child{
|
||
// margin-top: 12rpx;
|
||
// }
|
||
// .bot_left:nth-child(2){
|
||
// margin-top: 12rpx;
|
||
// }
|
||
.botleft_top {
|
||
width: 100%;
|
||
height: 214rpx;
|
||
}
|
||
|
||
.botleft_top image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.botleft_bot {
|
||
padding: 16rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 26rpx;
|
||
color: #414141;
|
||
border-bottom: 2rpx solid #f0f0f0;
|
||
}
|
||
|
||
.botleft_bot image {
|
||
width: 36rpx;
|
||
height: 40rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
|
||
.item_jklist1 {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.bot_box1 {
|
||
height: 464rpx;
|
||
border-top-left-radius: 28rpx;
|
||
border-top-right-radius: 28rpx;
|
||
box-shadow: 5px 5px 5px #0000001a;
|
||
}
|
||
|
||
.botleft_top1 {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-top-left-radius: 28rpx;
|
||
border-top-right-radius: 28rpx;
|
||
}
|
||
|
||
.botleft_top1 image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-top-left-radius: 28rpx;
|
||
border-top-right-radius: 28rpx;
|
||
}
|
||
|
||
.load {
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
color: #c6c6c6;
|
||
}
|
||
|
||
.zwsj {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
padding: 60% 170rpx 0;
|
||
}
|
||
|
||
.inzwsj {
|
||
width: 100%;
|
||
}
|
||
|
||
.zwsjimg {
|
||
width: 100%;
|
||
height: 224rpx;
|
||
margin-bottom: 37rpx;
|
||
}
|
||
|
||
.zwsjtext {
|
||
width: 100%;
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 31rpx;
|
||
text-align: center;
|
||
}
|
||
</style> |