Project-Annex/energyManagement/src/views/settlementAudit/electricityAudit.vue

<template>
    <div class="main">
        <template v-if="!showDialog">
            <div class="search">
                <el-select v-model="mixins_query.communityId" placeholder="选择社区" clearable>
                    <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
                </el-select>
                <el-date-picker
                    v-model="times"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="选择开始日期"
                    end-placeholder="选择结束日期"
                    @change="effectiveDateToggle"
                ></el-date-picker>
                <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
            </div>
            <zz-table
                :cols="cols"
                :settings="{ showIndex: true, stripe: true }"
                :loading="mixins_onQuery"
                :data="mixins_list"
                :pageset="mixins_pageset"
                @page-change="pageChange"
            >
                <template slot="settledateRange" slot-scope="scope">
                    <span>{{ timeformat(scope.row.clearingStartDate) }} - {{ timeformat(scope.row.clearingEndDate) }}</span>
                </template>
                <template slot-scope="scope" slot="auditNumberPercent">
                    <div class="progress_clickzone">
                        <el-progress
                            :stroke-width="6"
                            color="#29B6FF"
                            :percentage="
                                scope.row.numberOfWaterMetersReviewed > 0
                                    ? (scope.row.numberOfWaterMetersReviewed / scope.row.totalWaterMeters).toFixed(2) * 100
                                    : 0
                            "
                        ></el-progress>
                    </div>
                </template>
                <template slot-scope="scope" slot="opt">
                    <div class="opt">
                        <el-tooltip class="item" effect="light" placement="bottom" content="审核">
                            <i class="zoniot_font zoniot-icon-yanshou" @click="lookPage(scope.row)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </template>

        <auditnum :params="dialogParams" :userinfo="userinfo" v-else @close="showDialog = false"></auditnum>
    </div>
</template>

<script>
import list from '@utils/list.js';
import auditnum from './setPage/auditnum';
export default {
    mixins: [list],
    components: {
        auditnum
    },
    data() {
        return {
            showDialog: false,
            dialogParams: {},
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '计量周期',
                    prop: 'settledateRange',
                    slot: 'settledateRange'
                },
                {
                    label: '电表数量',
                    prop: 'totalWaterMeters'
                },
                {
                    label: '审核',
                    prop: 'auditNumberPercent',
                    slot: 'auditNumberPercent'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            mixins_post: 'post',
            communityArr: [],
            times: []
        };
    },
    created() {
        this.getorgTree();
        this.mixins_dataUrl = '/sc-energy/measurementInstance/page';
        this.mixins_query.type = 2;
        this.mixins_search();
    },
    mounted() {},
    methods: {
        getorgTree() {
            this.$http
                .get('/sc-community/assets/community/list')
                .then((data) => {
                    this.communityArr = data.data;
                    this.$store.commit('setAreaSelect', data.data);
                })

                .catch(function () {});
        },
        timeformat(val) {
            return this.$moment(val).format('YYYY-MM-DD HH:mm:ss');
        },
        effectiveDateToggle(va) {
            let arr = va;
            if (!arr) {
                arr = ['', ''];
            }
            this.mixins_query.clearingStartDate = !!arr[0] ? arr[0] : null;
             this.mixins_query.clearingEndDate = !!arr[1] ? arr[1] + 'T23:59:59' : '';
        },
        lookPage(row) {
            this.showDialog = true;
            this.dialogParams = row;
        }
    }
};
</script>
<style scoped lang='scss'>
@import '@assets/css/public-style.scss';
.search {
    .zz-tab-button {
        margin-right: 20px;
    }
}
</style>