nh-uniapp/pages/station/list.vue

<template>
	<view>
		<uni-nav-bar left-icon="left" fixed="true" title="电站列表" @clickLeft="handleClickLeft"></uni-nav-bar>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<view class="station-box">
				<view class="card-box">
					<uni-section title="电站列表" type="line" padding="0 0 5px 0">
						<view class="station-box-list">
							<uni-card title=""
							class="arrow animation-slide-right"
							:style="[{animationDelay: '0.'+ index +'s'}]"
							v-for="(item, index) in stationData" :key="item.id">
									<template v-slot:title>
										<uni-list>
											<uni-list-item showArrow clickable :title="item.stationName" @click="goNext(item.id)" />
										</uni-list>
									</template>
								<!-- 	<image style="width: 100%;" :src="cover"></image> -->
									<view class="station-info">
										<view class="flex station-info-item">
											<text class="left">装机容量(MW)：</text>
											<text class="right">{{ item.capacity }}</text>
										</view>
										<view class="flex station-info-item">
											<text class="left">当日发电(kWh)：</text>
											<text class="right">{{ item.dayElectricity }}</text>
										</view>
										<view class="flex station-info-item">
											<text class="left">当日功率(kW)：</text>
											<text >{{ item.dayPower }}</text>
										</view>

										<view class="flex station-info-item">
											<text class="left">累计发电(kWh)：</text>
											<text>{{ item.totalElectricity }}</text>
										</view>
										<!-- <view class="flex station-info-item">
											<text class="left">光照强度(W/m^2)：</text>
											<text>{{ station.irradiationLevel }}</text>
										</view> -->
									</view>
								</uni-card>
						</view>

					</uni-section>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>

	import { getStationList } from '@/api/modules/station.js'
	import _mixin from './mixin.js'
	import { STATION_LIST　} from './config'
	export default {
		data() {
			return {
				modalName: null,
				index: 0,
				station: {}

			}
		},
		mixins: [_mixin],
		created() {
			this.getStationList()
		},
		methods: {
			getStationList() {
				const userInfo = uni.getStorageSync('login_user_info')
				const username = userInfo.username
				const filterStation = [
					{
						username: 'hailun',
						stationId: ['1052758024'],
						stationName: '海伦'
					},
					{
						username: 'hanzhong',
						stationId: ['1052758028', '1052758029'],
						stationName: '汉钟'
					},
				]
				const filterStationItem = filterStation.some(v => v.username === username) && filterStation.filter(v => v.username === username)[0]
				getStationList({
					pageSize:20
				}).then(res => {
					this.stationData = res.data.result.records.filter(v => {
							return !v.stationName.includes('户用光伏电站')
					        }).map(v => {
								v.children = STATION_LIST[v.id]
								return v
					        }).filter(v => {
								if (filterStationItem) {
									return v.stationName.includes(filterStationItem.stationName)
								}
								return v
							})
					this.station = this.stationData[this.index]
					uni.setStorageSync('_pro_stations', this.stationData)
				})
			},
			handleClickLeft() {
				this.$router.replace('/')
			},
			handlerChangeStation(e) {
				this.index = e.detail.value
				this.station = this.stationData[this.index]
			},
			goNext(id) {
				this.$router.push({
					name: 'stationListItem1',
					query: {
						id
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.station-box {
	position: relative;
	padding: 10px 0;
	color: #333;
}
.station-box-list {
	position: relative;
	width: 100%;
	max-height: 85vh;
	overflow-x: hidden;
	overflow-y: scroll;
}
.card-box {
	// margin-top: 50px;
	// max-height: 90vh;
	// overflow-y: scroll;
}
/deep/ .uni-card {
	padding: 0 !important;
}
.station-info {
	// margin-top: 20px;
	display: flex;
	// flex-direction:column;
	flex-wrap: wrap;
	color: #888;
	.station-info-item {

		font-size: 12px;
		width: 50%;
		vertical-align: middle;
		line-height: 2.5;
		// &:not(:first-child) {
		// 	// margin-top: 10px;
		// 	border-top: 1px  dashed #cedefb;
		// 	vertical-align: middle;
		// 	line-height: 2.5;
		// }
		&:nth-child(3), &:nth-child(4) {
			width: 100%;
			border-top: 1px  dashed #cedefb;
		}
		.left {
			// width: 130px;
			text-align: justify;
		}
		.right {
			color: #4aaf0b;
			// letter-spacing: 2upx;
		}

	}
}
</style>