|
|
@@ -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>
|
wkyy