用电量明细

pages.json

@@ -278,6 +278,14 @@
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
         	}
+        },
+        {
+        	"path" : "pages/equipmentDataMonitoring/electricityConsumptionDetail",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
         }
        
     ],

pages/equipmentDataMonitoring/electricityConsumptionDetail.vue

@@ -0,0 +1,193 @@
+<template>
+	<view>
+		<u-navbar title="用电量明细 (度)" title-color="#101010"></u-navbar>
+		<view class="dropdown">
+			<view class="dropdown-item" @click="show1=true">
+
+				<view class="text">
+					{{electricMeter}}
+				</view>
+				<view class="item-icon">
+					<u-icon name="arrow-down" color="#999999" v-if="show1==false"></u-icon>
+					<u-icon name="arrow-up" color="#999999" v-else></u-icon>
+				</view>
+			</view>
+			<view class="dropdown-item" @click="show2=true">
+				<view class="text">
+					{{month}}
+				</view>
+				<view class="icon">
+					<u-icon name="arrow-down" color="#999999" v-if="show2==false"></u-icon>
+					<u-icon name="arrow-up" color="#999999" v-else></u-icon>
+				</view>
+			</view>
+		</view>
+		<u-select v-model="show1" mode="single-column" :list="electricMeterList"></u-select>
+
+		<u-select v-model="show2" mode="single-column" :list="monthList"></u-select>
+
+		<view class="table-box">
+			<table class="table1">
+				<tr class="tr1">
+					<td class="td1"></td>
+					<td class="td2">起止码</td>
+					<td class="td3">度数</td>
+				</tr>
+				<tr v-for="(item,i) in list" :key="i">
+					<td class="td1">{{item.name}}</td>
+					<td class="td2">
+						{{item.startStop}}
+
+					</td>
+					<td class="td3">{{item.degrees}}度</td>
+				</tr>
+				<tr>
+					<td class="td1" colspan="2">二级表合计用电</td>
+
+					<td>60度</td>
+				</tr>
+
+				<tr style="font-weight: bold;">
+					<td class="td1" colspan="2">扣除后用电量</td>
+
+					<td>1.53度</td>
+				</tr>
+			</table>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				electricMeter: '11楼公摊电表',
+				month: '上月',
+				show1: false,
+				show2: false,
+				electricMeterList: [],
+				monthList: [],
+				list: [{
+						name: '11楼公摊电表',
+						startStop: '100-161.53',
+						degrees: 61.53
+					},
+					{
+						name: '二级表a',
+						startStop: '0-10',
+						degrees: 10
+					},
+					{
+						name: '二级表b',
+						startStop: '0-10',
+						degrees: 10
+					},
+					{
+						name: '二级表c',
+						startStop: '0-10',
+						degrees: 10
+					},
+					{
+						name: '二级表d',
+						startStop: '0-10',
+						degrees: 10
+					},
+					{
+						name: '二级表e',
+						startStop: '0-10',
+						degrees: 10
+					},
+					{
+						name: '二级表f',
+						startStop: '0-10',
+						degrees: 10
+					},
+
+				],
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background-color: #fff;
+	}
+
+	.dropdown {
+		background-color: #fff;
+		position: sticky;
+		top: 88rpx;
+		z-index: 999;
+		padding: 18rpx 46rpx;
+		display: flex;
+		border-bottom: 1px solid rgba(245, 245, 245, 1);
+
+		.dropdown-item {
+			width: 50%;
+			text-align: center;
+			height: 60rpx;
+			line-height: 60rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.text {
+				max-width: 80%;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+
+	.table-box {
+		padding: 24rpx 32rpx;
+	}
+
+	.table1 {
+
+		padding-bottom: 20rpx;
+		width: 100%;
+		border-collapse: collapse;
+
+		td {
+			border: 1px solid #e7e7e7;
+			text-align: end;
+			padding: 2px 8px;
+			height: 60rpx;
+
+		}
+
+		.td1 {
+			text-align: start;
+			width: 264rpx;
+		}
+
+		.td2 {
+			width: 240rpx;
+		}
+
+		.td3 {
+			width: 180rpx;
+			white-space: pre;
+		}
+
+		tr {
+			background-color: #f5f5f6
+		}
+
+		.tr1 {
+			text-align: end;
+			font-weight: bold;
+		}
+
+		tr:nth-child(even) {
+			background-color: #fff;
+		}
+	}
+</style>