MicroCommunityWeb/public/pages/report/dataReport/dataReport.html

<div>
    <div>
        <div class="bg-white flex justify-between padding">
            <div class="flex justify-start">
                <div>
                    <span>统计时间：</span>
                    <span>
                        <input v-model="dataReportInfo.conditions.startDate" type="text" readonly class="startDate"
                            style="border: none; outline: none;">
                    </span>
                    <span>至：</span>
                    <span>
                        <input v-model="dataReportInfo.conditions.endDate" type="text" readonly class="endDate"
                            style="border: none; outline: none;"></span>
                </div>
                <div v-if="dataReportInfo.communitys.length>1">
                    <select class="form-control-sm form-control input-s-sm inline"
                        v-model="dataReportInfo.conditions.communityId" @change="_changCommunity()">
                        <option disabled selected value="">{{vc.i18n('请选择小区','reportFeeSummary')}}</option>
                        <option v-for="(item,index) in dataReportInfo.communitys" :key="index"
                            v-bind:value="item.communityId">
                            {{item.name}}
                        </option>
                    </select>
                </div>
            </div>
            <div>
                <span class="hand" :class="{'vc-active':dataReportInfo.curDay == 'today'}"
                    @click="_changeDate('today')">今日</span>
                <span :class="{'vc-active':dataReportInfo.curDay == 'yesterday'}" class="hand"
                    @click="_changeDate('yesterday')">昨日</span>
                <span :class="{'vc-active':dataReportInfo.curDay == 'seven'}" class="hand"
                    @click="_changeDate('seven')">近7日</span>
                <span :class="{'vc-active':dataReportInfo.curDay == 'thirty'}" class="hand"
                    @click="_changeDate('thirty')">近30日</span>
            </div>
        </div>
        <div class="flex justify-between margin-bottom">
            <div class="bg-white margin-top-sm data-report-i border-radius">
                <div class="data-report-i-t">费用类统计</div>
                <div class="flex justify-between flex-wrap">
                    <div v-for="(item,index) in dataReportInfo.fees" :key="index"
                        class=" border-radius data-report-item" style="border:1px solid #4297E5">
                        <div class="data-report-item-title">{{item.name}}</div>
                        <div class="data-report-item-value">{{item.value}}</div>
                    </div>
                </div>
            </div>
            <div class="bg-white margin-top-sm data-report-i border-radius">
                <div class="data-report-i-t">工单类统计</div>
                <div class="flex justify-between flex-wrap">
                    <div v-for="(item,index) in dataReportInfo.orders" :key="index"
                        class=" border-radius data-report-item" style="border:1px solid #4297E5">
                        <div class="data-report-item-title">{{item.name}}</div>
                        <div class="data-report-item-value">{{item.value}}</div>
                    </div>
                </div>
            </div>
            <div class="bg-white margin-top-sm data-report-i border-radius">
                <div class="data-report-i-t">出入统计</div>
                <div class="flex justify-between flex-wrap">
                    <div v-for="(item,index) in dataReportInfo.inouts" :key="index"
                        class=" border-radius data-report-item" style="border:1px solid #4297E5">
                        <div class="data-report-item-title">{{item.name}}</div>
                        <div class="data-report-item-value">{{item.value}}</div>
                    </div>
                </div>
            </div>
            <div class="bg-white margin-top-sm data-report-i border-radius">
                <div class="data-report-i-t">其他统计</div>
                <div class="flex justify-between flex-wrap">
                    <div v-for="(item,index) in dataReportInfo.others" :key="index"
                        class=" border-radius data-report-item" style="border:1px solid #4297E5">
                        <div class="data-report-item-title">{{item.name}}</div>
                        <div class="data-report-item-value">{{item.value}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white padding">
            <div class="">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link"
                            v-bind:class="{active:dataReportInfo._currentTab == 'dataReportEarnedStatistics'}"
                            v-on:click="changeTab('dataReportEarnedStatistics')">
                            <vc:i18n name="实收统计" namespace="dataReport"></vc:i18n>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"
                            v-bind:class="{active:dataReportInfo._currentTab == 'dataReportEarnedDetailStatistics'}"
                            v-on:click="changeTab('dataReportEarnedDetailStatistics')">
                            <vc:i18n name="实收明细" namespace="dataReport"></vc:i18n>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"
                            v-bind:class="{active:dataReportInfo._currentTab == 'dataReportEarnedWayStatistics'}"
                            v-on:click="changeTab('dataReportEarnedWayStatistics')">
                            <vc:i18n name="收款方式统计" namespace="dataReport"></vc:i18n>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"
                            v-bind:class="{active:dataReportInfo._currentTab == 'dataReportOweStatistics'}"
                            v-on:click="changeTab('dataReportOweStatistics')">
                            <vc:i18n name="欠费统计" namespace="dataReport"></vc:i18n>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"
                            v-bind:class="{active:dataReportInfo._currentTab == 'dataReportOweDetailStatistics'}"
                            v-on:click="changeTab('dataReportOweDetailStatistics')">
                            <vc:i18n name="欠费明细" namespace="dataReport"></vc:i18n>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"
                            v-bind:class="{active:dataReportInfo._currentTab == 'dataReportFeeStatistics'}"
                            v-on:click="changeTab('dataReportFeeStatistics')">
                            <vc:i18n name="收缴情况" namespace="dataReport"></vc:i18n>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"
                            v-bind:class="{active:dataReportInfo._currentTab == 'dataMonthReceivedStatistics'}"
                            v-on:click="changeTab('dataMonthReceivedStatistics')">
                            <vc:i18n name="月实收明细" namespace="dataReport"></vc:i18n>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"
                            v-bind:class="{active:dataReportInfo._currentTab == 'dataMonthOweStatistics'}"
                            v-on:click="changeTab('dataMonthOweStatistics')">
                            <vc:i18n name="月欠费明细" namespace="dataReport"></vc:i18n>
                        </a>
                    </li>
                </ul>
            </div>
            <div v-if="dataReportInfo._currentTab == 'dataReportEarnedStatistics'">
                <vc:create path="report/dataReportEarnedStatistics"></vc:create>
            </div>
            <div v-if="dataReportInfo._currentTab == 'dataReportEarnedDetailStatistics'">
                <vc:create path="report/dataReportEarnedDetailStatistics"></vc:create>
            </div>
            <div v-if="dataReportInfo._currentTab == 'dataReportEarnedWayStatistics'">
                <vc:create path="report/dataReportEarnedWayStatistics"></vc:create>
            </div>
            <div v-if="dataReportInfo._currentTab == 'dataReportOweStatistics'">
                <vc:create path="report/dataReportOweStatistics"></vc:create>
            </div>
            <div v-if="dataReportInfo._currentTab == 'dataReportOweDetailStatistics'">
                <vc:create path="report/dataReportOweDetailStatistics"></vc:create>
            </div>
            <div v-if="dataReportInfo._currentTab == 'dataReportFeeStatistics'">
                <vc:create path="report/dataReportFeeStatistics"></vc:create>
            </div>
            <div v-if="dataReportInfo._currentTab == 'dataMonthReceivedStatistics'">
                <vc:create path="report/dataMonthReceivedStatistics"></vc:create>
            </div>
            <div v-if="dataReportInfo._currentTab == 'dataMonthOweStatistics'">
                <vc:create path="report/dataMonthOweStatistics"></vc:create>
            </div>
        </div>
    </div>
</div>