289 lines
6.4 KiB
Vue
289 lines
6.4 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="liebiaos" v-if="list.length">
|
||
<scroll-view :style="{height:scorllheight + 'rpx'}" scroll-y="true" class="scroll-Y">
|
||
<view class="list_item" v-for="(it,i) in list" :key="i">
|
||
<view class="list_item_top">
|
||
<view class="list_item_left">
|
||
<image v-if="it[0].stationType == 'orient'" src="../../static/zd.png" mode=""></image>
|
||
<image v-if="it[0].stationType == 'livestock'" src="../../static/zhandian_icon_xuqin.png" mode=""></image>
|
||
<view class="item_right">
|
||
<view class="right_top">
|
||
{{it[0].stationName}}
|
||
</view>
|
||
<view class="right_bot">
|
||
<image src="../../static/shebei_icon_shebei.png" mode=""></image>
|
||
<view class="">设备数量：{{it.length}} 个</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="state">
|
||
<view class="">
|
||
在线
|
||
</view>
|
||
<image src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image>
|
||
</view> -->
|
||
</view>
|
||
<view class="botcontent">
|
||
<block v-for="(item,index) in it" :key="index">
|
||
<view class="botcontent_left" @click="todetail(item,index)">
|
||
<view class="botleft_left">
|
||
<view class="botleftleft_top">
|
||
<image :src="baseUrl + '/applet/common/static/' + item.deviceInfo.deviceIcon" mode=""></image>
|
||
</view>
|
||
<view class="botleftleft_bot">
|
||
<view class="botleft_bottop">
|
||
{{item.deployDes}}
|
||
</view>
|
||
<!-- <view class="botleft_botbot">
|
||
型号：{{item.deviceInfo.deviceModel}}
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</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:[],
|
||
listsiol:[]
|
||
}
|
||
},
|
||
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()
|
||
},
|
||
methods:{
|
||
getList(){
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
|
||
// 使用 Promise.all 同时发起两个请求
|
||
Promise.all([
|
||
this.$http.get('/applet/survStationInfo/deviceList'),
|
||
this.$http.get('/applet/survStationInfo/fdeviceList')
|
||
]).then(([res1, res2]) => {
|
||
// 合并两个数组
|
||
this.list = res1.data.data.concat(res2.data.data);
|
||
uni.hideLoading();
|
||
}).catch(error => {
|
||
console.error('请求失败:', error);
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
todetail(item,index){
|
||
uni.navigateTo({
|
||
url:'/packDetail/pages/vidio/detail?item=' + encodeURIComponent(JSON.stringify(item))
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
height: 100%;
|
||
}
|
||
.container{
|
||
height: 100%;
|
||
// overflow-y: scroll;
|
||
// overflow-x: hidden;
|
||
}
|
||
.bgimg{
|
||
width: 100%;
|
||
height: 3631rpx;
|
||
}
|
||
.liebiaos{
|
||
padding: 28rpx 32rpx;
|
||
}
|
||
.list_item{
|
||
width: 100%;
|
||
padding: 37rpx 34rpx 28rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 34rpx;
|
||
margin-bottom: 25rpx;
|
||
position: relative;
|
||
}
|
||
.list_item:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
.list_item_top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
.list_item_left{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.list_item_left image{
|
||
width: 73rpx;
|
||
height: 73rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
.item_right{
|
||
height: 76rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.right_top{
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 500;
|
||
color: #2F3841;
|
||
}
|
||
.right_bot{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 400;
|
||
color: #9CA9BE;
|
||
}
|
||
.right_bot image{
|
||
height: 26rpx;
|
||
width: 24rpx;
|
||
margin-right: 11rpx;
|
||
}
|
||
.jt{
|
||
width: 40rpx;
|
||
height: 48rpx;
|
||
}
|
||
.state{
|
||
background: #F6F6F6;
|
||
border-top-left-radius: 26rpx;
|
||
border-bottom-left-radius: 26rpx;
|
||
width: 171rpx;
|
||
height: 52rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 400;
|
||
color: #5F7088;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 24rpx;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
top: 31rpx;
|
||
right: -32rpx;
|
||
}
|
||
.zt{
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 18rpx;
|
||
}
|
||
.botcontent{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
.botcontent_left{
|
||
width: 48%;
|
||
background: #F8F8F8;
|
||
border-radius: 24rpx;
|
||
padding: 44rpx 5rpx 44rpx 5rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.botcontent_left image{
|
||
width: 61rpx;
|
||
height: 61rpx;
|
||
}
|
||
.botleftleft_top{
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
.botleftleft_top image{
|
||
width: 65rpx;
|
||
height: 65rpx;
|
||
}
|
||
.botleftleft_bot{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.botleft_bottop{
|
||
width: 70%;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
.botleft_botbot{
|
||
width: 60%;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 400;
|
||
color: #9CA9BE;
|
||
margin-top: 17rpx;
|
||
word-break: break-all;
|
||
// text-align: center;
|
||
}
|
||
.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> |