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>
					选择电站：<picker mode="selector" :range="stationData" 
					range-key="stationName"
					:value="index" @change="handlerChangeStation">
								<view style="color: royalblue;">{{ stationData[index].stationName }}</view>
							</picker>
				</view> -->
				<view class="card-box">
					<uni-section title="电站列表" type="line" padding="0 0 5px 0">
						<!-- <uni-card title="">
							<template v-slot:title>
								<uni-list>
									<uni-list-item showArrow clickable :title="station.stationName" @click="goNext" />
								</uni-list>
							</template>
							<view class="station-info">
								<view class="flex station-info-item">
									<text class="left">装机容量(MW)：</text>
									<text>{{ station.capacity }}</text>
								</view>
								<view class="flex station-info-item">
									<text class="left">当日功率(kW)：</text>
									<text>{{ station.dayPower }}</text>
								</view>
								<view class="flex station-info-item">
									<text class="left">当日发电(kWh)：</text>
									<text>{{ station.dayElectricity }}</text>
								</view>
								<view class="flex station-info-item">
									<text class="left">累计发电(kWh)：</text>
									<text>{{ station.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 class="station-box-list">
							<uni-card title="" v-for="item 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'
	const stationDetailInfo = {
	  '1052758018': [
	    {
	      id: '1',
	      stationName: '伟创力北厂1区'
	    }, {
	      id: '3',
	      stationName: '伟创力北厂2区'
	    },
	    {
	      id: '4',
	      stationName: '伟创力南厂区'
	    },
	    {
	      id: '5',
	      stationName: '伟创力超毅厂区'
	    },
	  ],
	  '1052758019': [
	    {
	      id: '6',
	      stationName: '7# 厂房'
	    },{
	      id: '7',
	      stationName: '8# 厂房'
	    },
	    {
	      id: '8',
	      stationName: '15#-1 厂房'
	    }, {
	      id: '9',
	      stationName: '15#-2 厂房'
	    }],
	  '1052758020': [
	    {
	      id: '25',
	      stationName: '总装车间'
	    },
	    {
	      id: '26',
	      stationName: '综合车间'
	    },],
	  '1052758021': [
	    {
	      id: '10',
	      stationName: '红塔一期电房'
	    },{
	      id: '11',
	      stationName: '红塔二期电房'
	    },],
	  '1052758022': [
	    {
	      id: '27',
	      stationName: '林殷厂区'
	    },],
	  '1052758023': [
	    {
	      id: '18',
	      stationName: 'A栋'
	    },
	    {
	      id: '19',
	      stationName: 'C2'
	    },
	    {
	      id: '20',
	      stationName: 'C3'
	    },
	    {
	      id: '21',
	      stationName: '食堂'
	    },],
	  '1052758025': [
	    {
	      id: '12',
	      stationName: 'A16'
	    }, {
	      id: '13',
	      stationName: 'D3'
	    }, {
	      id: '14',
	      stationName: 'A20'
	    }, {
	      id: '15',
	      stationName: 'A7'
	    }],
	  '1052758026': [
	    {
	      id: '16',
	      stationName: 'A3'
	    },{
	      id: '17',
	      stationName: 'C3'
	    }],
	   '1052758027': [
	     {
	       id: '2',
	       stationName: '堂悠口园区'
	     },],
	   '1052758028': [
	     {
	       id: '22',
	       stationName: '枫泾总厂1、2号楼'
	     },
	     {
	       id: '23',
	       stationName: '枫泾总厂5号楼'
	     },
	    ],
	   '1052758029': [ {
	     id: '24',
	     stationName: '枫泾兴塔厂'
	   }],
	}
	
	export default {
		data() {
			return {
				modalName: null,
				index: 0,
				station: {}
				
			}
		},
		mixins: [_mixin],
		created() {
			this.getStationList()
		},
		methods: {
			getStationList() {
				getStationList({
					pageSize:20
				}).then(res => {
					this.stationData = res.data.result.records.filter(v => {
							return !v.stationName.includes('户用光伏电站')
					        }).map(v => {
								v.children = stationDetailInfo[v.id]
								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-y: scroll;
}
.card-box {
	// margin-top: 50px;
	// max-height: 90vh;
	// overflow-y: scroll;
}
.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;
			font-weight: 600;
		}
		
	}
}
</style>