front/front-vue/src/views/home.vue

<template>
<div id="" class="zap-home__main">
    <!-- 平台 -->
    <div v-if="company.scyType == '00'">

        <!-- 数据 -->
        <div v-hasPermi="['system:home:companyData']">
            <div class="zap-home__title">平台数据统计</div>
            <el-row :gutter="20">
                <!-- 第一行 -->
                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="zap-card">
                        <div class="zap-card__title">入驻企业总数</div>
                        <div class="zap-card__wrap zap-card__blue">
                            <span class="zap-card__num">{{companyNum}}</span>
                            <span class="zap-card__unit">家</span>
                        </div>
                    </div>
                </el-col>
                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="zap-card">
                        <div class="zap-card__title">入驻核心企业数</div>
                        <div class="zap-card__wrap zap-card__pink">
                            <span class="zap-card__num">{{coreNum}}</span>
                            <span class="zap-card__unit">家</span>
                        </div>
                    </div>
                </el-col>
                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="zap-card">
                        <div class="zap-card__title">入驻供应商</div>
                        <div class="zap-card__wrap zap-card__gold">
                            <span class="zap-card__num">{{supplierNum}}</span>
                            <span class="zap-card__unit">家</span>
                        </div>
                    </div>
                </el-col>
                <!-- 第二行 -->
                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="zap-card">
                        <div class="zap-card__title">平台总授信额度</div>
                        <div class="zap-card__wrap zap-card__gold">
                            <span class="zap-card__num">{{handleInput(creditLineAll)}}</span>
                            <span class="zap-card__unit">元</span>
                        </div>
                    </div>
                </el-col>
                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="zap-card">
                        <div class="zap-card__title">平台可用授信额度</div>
                        <div class="zap-card__wrap zap-card__pink">
                            <span class="zap-card__num">{{handleInput(getsubNum())}}</span>
                            <span class="zap-card__unit">元</span>
                        </div>
                    </div>
                </el-col>
                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="zap-card">
                        <div class="zap-card__title">平台放款金额</div>
                        <div class="zap-card__wrap zap-card__pink">
                            <span class="zap-card__num">{{handleInput(getAllLoanBalance())}}</span>
                            <span class="zap-card__unit">元</span>
                        </div>
                    </div>
                </el-col>
                <!-- 第三行 -->
                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="zap-card">
                        <div class="zap-card__title">发起融资业务</div>
                        <div class="zap-card__wrap zap-card__blue">
                            <span class="zap-card__num">{{financeNum}}</span>
                            <span class="zap-card__unit">笔</span>
                        </div>
                    </div>
                </el-col>
                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="zap-card">
                        <div class="zap-card__title">平台开立融信</div>
                        <div class="zap-card__wrap zap-card__gold">
                            <span class="zap-card__num">{{handleInput(getFinancedNumAll())}}</span>
                            <span class="zap-card__unit">元</span>
                        </div>
                    </div>
                </el-col>
                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="zap-card">
                        <div class="zap-card__title">未融资额度</div>
                        <div class="zap-card__wrap zap-card__pink">
                            <span class="zap-card__num">{{handleInput(getNotUseAmt())}}</span>
                            <span class="zap-card__unit">元</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 平台待办 -->
        <el-row style="margin-bottom: 20px" v-hasPermi="['system:home:companyWork']">
            <div class="zap-bg" style="padding: 0 30px;">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="我的待办" name="first" style="height:400px">
                        <el-table :data="workList" :show-header="false">
                            <el-table-column label="标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <el-badge is-dot class="item" v-if="scope.row.snyrUserStatus == '0'"></el-badge>
                                    <span>{{ scope.row.noticeTitle }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="时间" align="center" prop="createTime" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <span>{{ parseTime(new Date(scope.row.createTime)) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" @click="handleDetail(scope.row)" style="color:red">去办理</el-button>
                                    <!-- v-if="scope.row.openUrl" -->
                                </template>
                            </el-table-column>
                        </el-table>

                        <pagination
                            v-show="workTotal>0"
                            :total="workTotal"
                            :page.sync="queryParamsWork.pageNum"
                            :limit.sync="queryParamsWork.pageSize"
                            :pager-count="5"
                            :page-sizes="[5]"
                            @pagination="getWorkList" />
                    </el-tab-pane>
                    <el-tab-pane label="消息" name="second" style="height:400px">
                        <el-table :data="noticeList" :show-header="false">
                            <el-table-column label="标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
                            <el-table-column label="时间" align="center" prop="createTime" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <span>{{ parseTime(new Date(scope.row.createTime)) }}</span>
                                </template>
                            </el-table-column>
                        </el-table>

                        <pagination
                            v-show="noticeTotal>0"
                            :total="noticeTotal"
                            :page.sync="queryParamsNotice.pageNum"
                            :limit.sync="queryParamsNotice.pageSize"
                            :pager-count="5"
                            :page-sizes="[5]"
                            @pagination="getNoticeList" />
                    </el-tab-pane>
                    <el-tab-pane label="已办记录" name="third" style="height:400px">
                        <el-table :data="oldWorkList" :show-header="false">
                            <el-table-column label="标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
                            <el-table-column label="时间" align="center" prop="createTime" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <span>{{ parseTime(new Date(scope.row.createTime)) }}</span>
                                </template>
                            </el-table-column>
                        </el-table>

                        <pagination
                            v-show="oldWorkTotal>0"
                            :total="oldWorkTotal"
                            :page.sync="queryParamsOldWork.pageNum"
                            :limit.sync="queryParamsOldWork.pageSize"
                            :pager-count="5"
                            :page-sizes="[5]"
                            @pagination="getOldWorkList" />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-row>

        <!-- 平台统计图 -->
        <div v-hasPermi="['system:home:companyChart']">
            <!-- 平台资金统计扇形图 -->
            <el-row class="zap-home-chart">
                <el-col>
                    <div class="zap-home-chart__title">平台资金统计</div>
                    <div id="echartPie" style="width: 100%;height: 490px"></div>
                </el-col>
            </el-row>

            <!-- 平台用户统计 -->
            <el-row class="zap-home-chart zap-home-chart--space">
                <el-col>
                    <div class="zap-home-chart__title">
                        <div class="zap-home-chart__wrap">
                            平台用户统计
                            <el-select class="zap-home-chart__select" v-model="dateType" @change="getCompanyReport">
                                <el-option v-for="(item,index) in dateTypeList" :key="index" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="zap-home-chart__legend">
                            <span class="zap-home-chart__circle zap-home-chart__circle--blue"></span>
                            <span class="zap-home-chart__text">供应商</span>
                            <span class="zap-home-chart__circle zap-home-chart__circle--green zap-home-chart__circle--margin"></span>
                            <span class="zap-home-chart__text">核心企业</span>
                        </div>
                    </div>
                    <div id="echarBarUser" style="width: 100%;height: 490px"></div>
                </el-col>
            </el-row>

            <!-- 平台业务统计 -->
            <el-row class="zap-home-chart zap-home-chart--space">
                <el-col>
                    <div class="zap-home-chart__title">
                        <div class="zap-home-chart__wrap">
                            平台业务统计
                            <el-select class="zap-home-chart__select" v-model="financeDateType" @change="getFinanceRecordMonth">
                                <el-option v-for="(item,index) in dateTypeList" :key="index" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="zap-home-chart__legend">
                            <span class="zap-home-chart__circle zap-home-chart__circle--blue"></span>
                            <span class="zap-home-chart__text">融资开立</span>
                            <span class="zap-home-chart__circle zap-home-chart__circle--green zap-home-chart__circle--margin"></span>
                            <span class="zap-home-chart__text">融资还款</span>
                        </div>
                    </div>
                    <div id="echarBarBusiness" style="width: 100%;height: 490px"></div>
                </el-col>
            </el-row>
            <!-- 核心企业可用额度比例 -->
            <el-row class="zap-home-chart zap-home-chart--space">
                <el-col>
                    <div class="zap-home-chart__title">
                        <div class="zap-home-chart__wrap">
                            核心企业可用额度比例
                            <el-input class="zap-home-chart__search" placeholder="请输入" suffix-icon="el-icon-search" v-model="input1">
                            </el-input>
                        </div>
                        <div class="zap-home-chart__legend">
                            <span class="zap-home-chart__circle zap-home-chart__circle--blue"></span>
                            <span class="zap-home-chart__text">可用额度</span>
                            <span class="zap-home-chart__circle zap-home-chart__circle--green zap-home-chart__circle--margin"></span>
                            <span class="zap-home-chart__text">已用额度</span>
                        </div>
                    </div>
                    <div id="echarBarCore" style="width: 100%;height: 490px"></div>
                </el-col>
            </el-row>
        </div>
    </div>

    <!-- 核心企业 -->
    <div v-if="company.scyType == '01'" class="zap-margin">
        <el-row :gutter="20">
            <el-col :span="12">
                <home-statistics type="rongxin" title="招采融信统计" :options="hxDateTypeList" @change="changeFxHxDateType">
                    <el-row>
                        <el-col :span="12" class="zap-card" @click="toCreditLine()">
                            <div class="zap-card__title">总授信额度(元)</div>
                            <div class="zap-card__wrap zap-card__blue">
                                <span class="zap-card__num">{{handleInput(hxCreditLineAll)}}</span>
                            </div>
                        </el-col>
                        <el-col :span="12" class="zap-card" @click="toCreditLine()">
                            <div class="zap-card__title">可用授信额度(元)</div>
                            <div class="zap-card__wrap zap-card__pink">
                                <span class="zap-card__num">{{handleInput(usableAmount)}}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="zap-line"></div>
                    <el-row>
                        <el-col :span="12">
                            <div class="zap-card" @click="toCredit()">
                                <div class="zap-card__title">我开立的融信(元)</div>
                                <div class="zap-card__wrap zap-card__blue">
                                    <span class="zap-card__num">{{handleInput(hxCreditAll)}}</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="zap-card">
                                <div class="zap-card__title">30天内待还款(元)</div>
                                <div class="zap-card__wrap zap-card__pink">
                                    <span class="zap-card__num">{{handleInput(hxPendingMoney)}}</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <div class="zap-card">
                                <div class="zap-card__title">已融资金额(元)</div>
                                <div class="zap-card__wrap zap-card__blue">
                                    <span class="zap-card__num">{{handleInput(hxHasRaised)}}</span>
                                    <span class="zap-card__unit">元</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12" v-if="hxDateType != '00'">
                            <div class="zap-card">
                                <div class="zap-card__title">还款金额(元)</div>
                                <div class="zap-card__wrap zap-card__pink">
                                    <span class="zap-card__num">{{handleInput(hxRepayment)}}</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </home-statistics>
            </el-col>
            <el-col :span="12">
                <home-statistics type="rongzheng" title="招采融证统计" :options="hxDateTypeList" @change="changeZxHxDateType">
                    <el-row>
                        <el-col :span="12">
                            <div class="zap-card">
                                <div class="zap-card__title">总授信额度(元)</div>
                                <div class="zap-card__wrap zap-card__blue">
                                    <span class="zap-card__num">{{handleInput(hxCreditLineAllForward)}}</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="zap-card">
                                <div class="zap-card__title">可用授信额度(元)</div>
                                <div class="zap-card__wrap zap-card__pink">
                                    <span class="zap-card__num">{{handleInput(usableAmountForward)}}</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="zap-line"></div>
                    <el-row>
                        <el-col :span="12">
                            <div class="zap-card">
                                <div class="zap-card__title">我确权的(元)</div>
                                <div class="zap-card__wrap zap-card__blue">
                                    <span class="zap-card__num">{{handleInput(hxCreditAllForward)}}</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="zap-card">
                                <div class="zap-card__title">30天内待还款(元)</div>
                                <div class="zap-card__wrap zap-card__pink">
                                    <span class="zap-card__num">{{handleInput(hxPendingMoneyForward)}}</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <div class="zap-card">
                                <div class="zap-card__title">已融资金额(元)</div>
                                <div class="zap-card__wrap zap-card__blue">
                                    <span class="zap-card__num">{{handleInput(hxHasRaisedForward)}}</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </home-statistics>
            </el-col>
        </el-row>
        <!-- 我的待办、消息 -->
        <el-row class="zap-list mt20">
            <div class="text item">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="我的待办" name="first" style="height:400px">
                        <el-table :data="workList" :show-header="false">
                            <el-table-column label="标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <el-badge is-dot class="item" v-if="scope.row.snyrUserStatus == '0'"></el-badge>
                                    <span>{{ scope.row.noticeTitle }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="时间" align="center" prop="createTime" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <span>{{ parseTime(new Date(scope.row.createTime)) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" @click="handleDetail(scope.row)" style="color:red">去办理</el-button>
                                    <!-- v-if="scope.row.openUrl" -->
                                </template>
                            </el-table-column>
                        </el-table>

                        <pagination
                            v-show="workTotal>0"
                            :total="workTotal"
                            :page.sync="queryParamsWork.pageNum"
                            :limit.sync="queryParamsWork.pageSize"
                            :pager-count="5"
                            :page-sizes="[5]"
                            @pagination="getWorkList" />
                    </el-tab-pane>
                    <el-tab-pane label="消息" name="second" style="height:400px">
                        <el-table :data="noticeList" :show-header="false">
                            <el-table-column label="标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
                            <el-table-column label="时间" align="center" prop="createTime" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <span>{{ parseTime(new Date(scope.row.createTime)) }}</span>
                                </template>
                            </el-table-column>
                        </el-table>

                        <pagination
                            v-show="noticeTotal>0"
                            :total="noticeTotal"
                            :page.sync="queryParamsNotice.pageNum"
                            :limit.sync="queryParamsNotice.pageSize"
                            :pager-count="5"
                            :page-sizes="[5]"
                            @pagination="getNoticeList" />
                    </el-tab-pane>
                    <el-tab-pane label="已办记录" name="third" style="height:400px">
                        <el-table :data="oldWorkList" :show-header="false">
                            <el-table-column label="标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
                            <el-table-column label="时间" align="center" prop="createTime" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <span>{{ parseTime(new Date(scope.row.createTime)) }}</span>
                                </template>
                            </el-table-column>
                        </el-table>

                        <pagination
                            v-show="oldWorkTotal>0"
                            :total="oldWorkTotal"
                            :page.sync="queryParamsOldWork.pageNum"
                            :limit.sync="queryParamsOldWork.pageSize"
                            :pager-count="5"
                            :page-sizes="[5]"
                            @pagination="getOldWorkList" />
                    </el-tab-pane>
                    <el-tab-pane label="30天内待还款汇总" name="fourth" style="height:400px">
                        <el-table :data="expiredList" :show-header="true">
                            <el-table-column label="融资编号" align="center" prop="zfrNumber" :show-overflow-tooltip="true" />
                            <el-table-column label="金额" align="center" prop="zfrLoanAmount" :show-overflow-tooltip="true" />
                            <el-table-column label="到期日期" align="center" prop="zfiExpireDate" :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" icon="el-icon-info" @click="handleInfo(scope.row)">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <pagination
                            v-show="expiredTotal>0"
                            :total="expiredTotal"
                            :page.sync="queryParamsExpired.pageNum"
                            :limit.sync="queryParamsExpired.pageSize"
                            :pager-count="5"
                            :page-sizes="[5]"
                            @pagination="getExpiredList" />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-row>
    </div>

    <!-- 融资企业 -->
    <div v-if="company.scyType == '02'" class="zap-margin">
        <el-row :gutter="20">
            <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                <div class="zap-card" @click="toCredit()">
                    <div class="zap-card__title">持有融信额度</div>
                    <div class="zap-card__wrap zap-card__blue">
                        <span class="zap-card__num">{{handleInput(effectBalance)}}</span>
                        <span class="zap-card__unit">元</span>
                    </div>
                </div>
            </el-col>
            <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                <div class="zap-card" @click="toFinanceRecord()">
                    <div class="zap-card__title">融资中额度</div>
                    <div class="zap-card__wrap zap-card__pink">
                        <span class="zap-card__num">{{handleInput(availableBalance)}}</span>
                        <span class="zap-card__unit">元</span>
                    </div>
                </div>
            </el-col>
            <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">

                <div class="zap-card" @click="toFinanceRecord()">
                    <div class="zap-card__title">已融资额度</div>
                    <div class="zap-card__wrap zap-card__blue">
                        <span class="zap-card__num">{{handleInput(loanBalance)}}</span>
                        <span class="zap-card__unit">元</span>
                    </div>
                </div>
            </el-col>
            <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                <div class="zap-card" @click="toCredit()">
                    <div class="zap-card__title">即将到期融资额度(30天)</div>
                    <div class="zap-card__wrap zap-card__pink">
                        <span class="zap-card__num">{{handleInput(expiredBalance)}}</span>
                        <span class="zap-card__unit">元</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="zap-form">
            <el-tabs v-model="activeName">
                <el-tab-pane label="我的待办" name="first" style="height:400px">
                    <el-table :data="workList" :show-header="false">
                        <el-table-column label="标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-badge is-dot class="item" v-if="scope.row.snyrUserStatus == '0'"></el-badge>
                                <span>{{ scope.row.noticeTitle }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="时间" align="center" prop="createTime" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span>{{ parseTime(new Date(scope.row.createTime)) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" @click="handleDetail(scope.row)" style="color:red">去办理</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination
                        v-show="workTotal>0"
                        :total="workTotal"
                        :page.sync="queryParamsWork.pageNum"
                        :limit.sync="queryParamsWork.pageSize"
                        :pager-count="5"
                        :page-sizes="[5]"
                        @pagination="getWorkList" />
                </el-tab-pane>
                <el-tab-pane label="消息" name="second" style="height:400px">
                    <el-table :data="noticeList" :show-header="false">
                        <el-table-column label="标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
                        <el-table-column label="时间" align="center" prop="createTime" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span>{{ parseTime(new Date(scope.row.createTime)) }}</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination
                        v-show="noticeTotal>0"
                        :total="noticeTotal"
                        :page.sync="queryParamsNotice.pageNum"
                        :limit.sync="queryParamsNotice.pageSize"
                        :pager-count="5"
                        :page-sizes="[5]"
                        @pagination="getNoticeList" />
                </el-tab-pane>
                <el-tab-pane label="已办记录" name="third" style="height:400px">
                    <el-table :data="oldWorkList" :show-header="false">
                        <el-table-column label="标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
                        <el-table-column label="时间" align="center" prop="createTime" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span>{{ parseTime(new Date(scope.row.createTime)) }}</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination
                        v-show="oldWorkTotal>0"
                        :total="oldWorkTotal"
                        :page.sync="queryParamsOldWork.pageNum"
                        :limit.sync="queryParamsOldWork.pageSize"
                        :pager-count="5"
                        :page-sizes="[5]"
                        @pagination="getOldWorkList" />
                </el-tab-pane>
                <el-tab-pane label="30天内到期融信汇总" name="fourth" style="height:400px">
                    <el-table :data="expiredList" :show-header="true">
                        <el-table-column label="融信编号" align="center" prop="zfiNumber" :show-overflow-tooltip="true" />
                        <el-table-column label="金额" align="center" prop="zfiAmount" :show-overflow-tooltip="true" />
                        <el-table-column label="到期日期" align="center" prop="zfiExpireDate" :show-overflow-tooltip="true">
                            <!--  <template slot-scope="scope">
                                        <span>{{ parseTime(new Date(scope.row.afiExpireDate), '{y}-{m}-{d}') }}</span>
                                    </template> -->
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" icon="el-icon-info" @click="handleCreditDetail(scope.row)">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination
                        v-show="expiredTotal>0"
                        :total="expiredTotal"
                        :page.sync="queryParamsExpired.pageNum"
                        :limit.sync="queryParamsExpired.pageSize"
                        :pager-count="5"
                        :page-sizes="[5]"
                        @pagination="getExpiredList" />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <!-- 资方 -->
    <div v-if="company.scyType == '03'" class="zap-margin">
        <el-row :gutter="20">
            <!-- 第一行 -->
            <el-col :xs="24" :sm="12" :md="8" :lg="8">
                <div class="zap-card">
                    <div class="zap-card__title">总授信额度</div>
                    <div class="zap-card__wrap zap-card__blue">
                        <span class="zap-card__num">{{handleInput(creditLineAll)}}</span>
                        <span class="zap-card__unit">元</span>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8">
                <div class="zap-card">
                    <div class="zap-card__title">已用额度</div>
                    <div class="zap-card__wrap zap-card__gold">
                        <span class="zap-card__num">{{handleInput(getFinancedNum())}}</span>
                        <span class="zap-card__unit">元</span>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8">
                <div class="zap-card">
                    <div class="zap-card__title">可用额度</div>
                    <div class="zap-card__wrap zap-card__pink">
                        <span class="zap-card__num">{{handleInput(getsubNum())}}</span>
                        <span class="zap-card__unit">元</span>
                    </div>
                </div>
            </el-col>
            <!-- 第二行 -->
            <el-col :xs="24" :sm="12" :md="8" :lg="8">
                <div class="zap-card">
                    <div class="zap-card__title">即将到期融资额度(30天)</div>
                    <div class="zap-card__wrap zap-card__blue">
                        <span class="zap-card__num">{{handleInput(expiredBalance)}}</span>
                        <span class="zap-card__unit">元</span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>

    <el-dialog title="待办处理" :visible.sync="openWork" width="500px" append-to-body>
        <work-deal :tableId="tableId" :workType="workType" :noticeId="noticeId" @cancelOpen="cancel"></work-deal>
    </el-dialog>
</div>
</template>

<script>
import * as echarts from 'echarts';
import {
    getCreditLineAll,
    getAvailableBalance,
    getEffectBalance,
    getLoanBalance,
    getLoseEffectBalance,
    getReturnBalance,
    getFinanceAmount,
    getFinanceAmountAll,
    getExpiredBalance,
    getCoreCreditLine,
    getCreditLineList,
    getCreditLineNumList,
    financeRecordMonth,
    getExpiredList,
    listCreditLineAll,
    listCreditAll,
    listHasRaised,
    listRepayment,
    listPendingRepayment
} from '@/api/service/report/credit'
import {
    getCompanyNum,
    getFinanceSupplier,
    getFinanceNum,
    getCompanyReport
} from '@/api/service/report/company'
import {
    getOwnCompany
} from "@/api/common/company";
import {
    accAdd,
    accSub
} from "@/utils/calculation";
import {
    listNotice,
    readWork
} from '@/api/system/notice'
import {
    amtformat
} from "@/utils/amtCommon"
import EchartPie from '@/components/Echart/pie/index'
import EchartBar from '@/components/Echart/bar/index'
import HomeStatistics from '@/components/HomeStatistics/index.vue'
import {
    EventBus
} from '@/util/event-bus.js'
import WorkDeal from "@/views/workDeal";
import {
    getRouters
} from '@/api/menu'
import Cookies from 'js-cookie'
export default {
    components: {
        EchartPie,
        EchartBar,
        WorkDeal,
        HomeStatistics
    },
    data() {
        return {
            widthSize: '500px',
            heightSize: '280px',
            companyNum: 0,
            supplierNum: 0,
            coreNum: 0,
            financeSupplierNum: 0,
            availableBalance: 0,
            availableBalanceForward: 0,
            loanBalance: 0,
            loanBalanceForward: 0,
            effectBalance: 0,
            effectBalanceForward: 0,
            financeNum: 0,
            expiredBalance: 0,
            loseEffectBalance: 0,
            returnBalance: 0,
            financeAmountList: [],
            companyDataList: [],
            dateType: "00",
            financeDateType: "00",
            dateTypeList: [{
                    label: "周",
                    value: "00"
                },
                {
                    label: "年",
                    value: "01"
                }
            ],
            hxDateType: "00",
            hxDateTypeList: [{
                    label: "实时",
                    value: "00"
                },
                {
                    label: "年度",
                    value: "01"
                },
                {
                    label: "历史",
                    value: "02"
                }
            ],
            companyExtraOption: {
                xAxis: [{
                    data: [],
                }],
                legend: {},
            },
            coreFinanceAmountList: [],
            coreFinanceAmountExtraOption: {
                yAxis: [{
                    type: "category",
                    data: [],
                }],
                xAxis: [{
                    type: "value",
                }],
                legend: {},
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    },
                    interval: 0,
                    //设置字数限制
                    formatter: function (value) {
                        if (value.length > 8) {
                            return value.substring(0, 7) + "...";
                        } else {
                            return value;
                        }
                    }
                },
            },
            dataList: [],
            yearDataList: [],
            monthDataList: [],
            extraOption: {
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    left: "left",
                    right: 10,
                    top: 20,
                    bottom: 20,
                },
            },
            yearExtraOption: {
                xAxis: [{
                    data: [],
                }],
                legend: {},
            },
            monthExtraOption: {
                xAxis: [{
                    data: [],
                }],
                legend: {},
            },
            creditLineAll: 0,
            creditLineAllForward: 0,
            creditLineList: [],
            creditLineTotal: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 5
            },
            creditLineNumList: [],
            creditLineNumTotal: 0,
            queryParamsNum: {
                pageNum: 1,
                pageSize: 5
            },
            workList: [],
            workTotal: 0,
            queryParamsWork: {
                pageNum: 1,
                pageSize: 5,
                type: '00'
            },
            noticeList: [],
            noticeTotal: 0,
            queryParamsNotice: {
                pageNum: 1,
                pageSize: 5,
                type: '01'
            },
            oldWorkList: [],
            oldWorkTotal: 0,
            queryParamsOldWork: {
                pageNum: 1,
                pageSize: 5,
                type: '00',
                status: '1'
            },
            expiredList: [],
            expiredTotal: 0,
            queryParamsExpired: {
                pageNum: 1,
                pageSize: 5,
            },
            activeName: 'first',
            company: {},
            openWork: false,
            workUrl: null,
            workType: null,
            tableId: null,
            noticeId: null,
            //权限展示
            companyData: true,
            companyWork: true,
            companyChart: true,
            input1: '',
            //核心企业
            hxCreditLineAll: 0, //授信总额度反向
            hxCreditLineAllForward: 0, // 授信总额度正向
            usableAmount: 0, //可用授信额度反向
            usableAmountForward: 0, //可用授信额度正向
            hxCreditAll: 0, //我开立的融信
            hxPendingMoney: 0, //30天内待还款反向
            hxPendingMoneyForward: 0, //30天内待还款正向
            hxCreditAllForward: 0, //我确权的
            hxHasRaised: 0, //已融资金额反向
            hxHasRaisedForward: 0, //已融资金额正向
            hxRepayment: 0, //已放款金额

        }
    },
    created: function () {
        var children = [];
        this.$store.state.permission.routes.map((item) => {
            if (this.$route.matched[0] && item.alwaysShow && this.$route.matched[0].path == item.path) {
                children = item.children
            }
        });
        if (children && children.length != 0) {
            EventBus.$emit('on-click-higher', {
                children: children,
                basepath: this.$route.matched[0].path
            })
        }
        this.selectHome()
    },
    activated() {
        this.selectHome()
    },
    mounted() {},
    methods: {
        initChartPie(data, name, color, formatter) {
            let chartPie = document.getElementById('echartPie');
            let myChart = echarts.init(chartPie);
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}： {d}%'
                },
                color: color,
                label: {
                    alignTo: 'edge',
                    formatter: formatter,
                    minMargin: 5,
                    edgeDistance: 10,
                    rich: {
                        name: {
                            lineHeight: 14,
                            fontSize: 14,
                            color: '#333'
                        },
                        percent: {
                            lineHeight: 14,
                            fontSize: 14,
                        },
                        percentUnit: {
                            lineHeight: 34,
                            fontSize: 14,
                        },
                        unit: {
                            lineHeight: 46,
                            fontSize: 22,
                        }
                    }
                },
                series: [{
                    name: name,
                    type: 'pie',
                    radius: '50%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            myChart.setOption(option);
        },
        getShow() {
            getRouters().then(res => {
                // this.data = res.data
                this.setName(res.data)
                this.expandedKeys.forEach(element => {
                    this.$set(this, element, true)
                });
            })
        },
        setName(datas) { //遍历树  获取id数组
            for (var i in datas) {
                if (datas[i].path == 'reportStatistics') {
                    this.expandedKeys.push(datas[i].component)
                }
                if (datas[i].children) {
                    this.setName(datas[i].children);
                }
            }
        },
        //查询各角色首页模块
        selectHome() {
            //查询企业类型
            getOwnCompany().then((response) => {
                this.company = response.data;
            }).then((response) => {
                //平台
                if (this.company.scyType == '00') {
                    //入驻企业数量
                    this.getCompanyNum()
                    //入驻供应商数量
                    this.getSupplierNum()
                    //入驻核心企业数量
                    this.getCoreNum()
                    //融资开立月度统计 -- 柱状图
                    this.getFinanceRecordMonth()
                    //已融资供应商数量
                    this.getFinanceSupplier()
                    //融资中金额
                    this.getAvailableBalance()
                    //已放款金额
                    this.getLoanBalance()
                    //已生效金额
                    this.getEffectBalance()
                    //已失效金额
                    this.getLoseEffectBalance()
                    //已还款金额
                    this.getReturnBalance()
                    //融资业务数量
                    this.getFinanceNum()
                    //授信总额度
                    this.getCreditLineAll()
                    //平台资金 -- 饼图
                    this.getFinanceAmount()
                    //平台用户统计 -- 柱状图
                    this.getCompanyReport()
                    //核心企业额度比例 -- 柱状图
                    this.getFinanceAmountAll()
                    //查询待办
                    this.getWorkList()
                    //查询消息
                    this.getNoticeList()
                    //查询已办
                    this.getOldWorkList()
                    //核心企业
                } else if (this.company.scyType == '01') {
                    this.changeFxHxDateType("00")
                    this.changeZxHxDateType("00")
                    //融资中金额
                    this.getAvailableBalance()
                    //融资中金额 -- 正向保理
                    this.getAvailableBalanceForward()
                    //已放款金额
                    this.getLoanBalance()
                    //已放款金额 -- 正向保理
                    this.getLoanBalanceForward()
                    //已生效金额
                    this.getEffectBalance()
                    //已生效金额 -- 正向保理
                    this.getEffectBalanceForward()
                    //融信授权额度 -- 饼图
                    this.getCreditLine()
                    //融信授权额度 -- 列表
                    this.getList()
                    //融信统计 -- 列表
                    this.getNumList()
                    //融资开立月度统计 -- 柱状图
                    this.getFinanceRecord()
                    //融资开立年度统计 -- 柱状图
                    this.getFinanceRecordYear()
                    //即将到期额度（30天）
                    this.getExpiredBalance()
                    this.getExpiredList()
                    //查询待办
                    this.getWorkList()
                    //查询消息
                    this.getNoticeList()
                    //查询已办
                    this.getOldWorkList()
                    //融资企业
                } else if (this.company.scyType == '02') {
                    //授信总额度
                    this.getCreditLineAll()
                    //融资中金额
                    this.getAvailableBalance()
                    //已放款金额
                    this.getLoanBalance()
                    //已生效金额
                    this.getEffectBalance()
                    //即将到期额度（30天）
                    this.getExpiredBalance()
                    //即将到期额度（30天）-- 列表
                    this.getExpiredList()
                    //查询待办
                    this.getWorkList()
                    //查询消息
                    this.getNoticeList()
                    //查询已办
                    this.getOldWorkList()
                    //资方
                } else if (this.company.scyType == '03') {
                    //授信总额度
                    this.getCreditLineAll()
                    //融资中金额
                    this.getAvailableBalance()
                    //已放款金额
                    this.getLoanBalance()
                    //已生效金额
                    this.getEffectBalance()
                    //即将到期额度（30天）
                    this.getExpiredBalance()
                }

            });
        },
        changeFxHxDateType(hxDateType) {
            this.hxDateType = hxDateType;
            //授信总额度
            this.listCreditLineAll()
            //我开立的融信
            this.listCreditAll()
            //已融资金额
            this.listHasRaised()
            //已放款
            this.listRepayment()
            //30天内待还款反向
            this.listPendingRepayment()
        },
        changeZxHxDateType(hxDateType) {
            this.hxDateType = hxDateType;
            //授信总额度 -- 正向保理
            this.listCreditLineAllForward()
            //我确权的
            this.listCreditAllForward()
            //30天内待还款正向
            this.listPendingRepaymentForward()
            //已融资金额 正向
            this.listHasRaisedForward()
        },
        //入驻企业数量
        getCompanyNum() {
            getCompanyNum().then((response) => {
                this.companyNum = response.data.num
            });
        },
        //入驻供应商数量
        getSupplierNum() {
            let queryParams = {}
            queryParams.type = "02"
            getCompanyNum(queryParams).then((response) => {
                this.supplierNum = response.data.num
            });
        },
        //入驻核心企业数量
        getCoreNum() {
            let queryParams = {}
            queryParams.type = "01"
            getCompanyNum(queryParams).then((response) => {
                this.coreNum = response.data.num
            });
        },
        //已融资供应商数量
        getFinanceSupplier() {
            getFinanceSupplier().then((response) => {
                this.financeSupplierNum = response.data.num
            });
        },
        //融资中金额
        getAvailableBalance() {
            getAvailableBalance().then(response => {
                this.availableBalance = response.data.allAmount
            })
        },
        //融资中金额 -- 正向保理
        getAvailableBalanceForward() {
            let queryParams = {}
            queryParams.zfpType = "0"
            getAvailableBalance(queryParams).then(res => {
                this.availableBalanceForward = res.data.allAmount
            })
        },
        //已生效金额
        getEffectBalance() {
            getEffectBalance().then(response => {
                this.effectBalance = response.data.allAmount
            })
        },
        //已生效金额 -- 正向保理
        getEffectBalanceForward() {
            let queryParams = {}
            queryParams.zfpType = "0"
            getEffectBalance(queryParams).then(res => {
                this.effectBalanceForward = res.data.allAmount
            })
        },
        //已放款金额
        getLoanBalance() {
            getLoanBalance().then(response => {
                this.loanBalance = response.data.allAmount
            })
        },
        //已放款金额 -- 正向保理
        getLoanBalanceForward() {
            let queryParams = {}
            queryParams.zfpType = "0"
            getLoanBalance(queryParams).then(res => {
                this.loanBalanceForward = res.data.allAmount
            })
        },
        //已失效金额
        getLoseEffectBalance() {
            getLoseEffectBalance().then(response => {
                this.loseEffectBalance = response.data.allAmount
            })
        },
        //已还款金额
        getReturnBalance() {
            getReturnBalance().then(response => {
                this.returnBalance = response.data.allAmount
            })
        },
        //融资业务数量
        getFinanceNum() {
            getFinanceNum().then(response => {
                this.financeNum = response.data.num
            })
        },
        //授信总额度
        getCreditLineAll() {
            getCreditLineAll().then(res => {
                this.creditLineAll = res.data.allAmount
            })
        },
        //授信总额度 -- 正向保理
        getCreditLineAllForward() {
            let queryParams = {}
            queryParams.zfpType = "0"
            getCreditLineAll(queryParams).then(res => {
                this.creditLineAllForward = res.data.allAmount
            })
        },
        //核心企业授信总额度 -- 反向
        listCreditLineAll() {
            let queryParams = {}
            listCreditLineAll(queryParams).then(res => {
                this.hxCreditLineAll = res.data.allAmount;
                this.usableAmount = res.data.usableAmount;
            })
        },
        //核心企业授信总额度 -- 正向保理
        listCreditLineAllForward() {
            let queryParams = {}
            queryParams.zfpType = '0'
            listCreditLineAll(queryParams).then(res => {
                this.hxCreditLineAllForward = res.data.allAmountForward
                this.usableAmountForward = res.data.usableAmountForward;
            })
        },
        //核心企业我开立的融信
        listCreditAll() {
            let queryParams = {}
            queryParams.hxDateType = this.hxDateType
            listCreditAll(queryParams).then(res => {
                this.hxCreditAll = res.data.allAmount;
            })
        },
        //核心企业我确权的
        listCreditAllForward() {
            let queryParams = {}
            queryParams.zfpType = '0'
            queryParams.hxDateType = this.hxDateType
            listCreditAll(queryParams).then(res => {
                this.hxCreditAllForward = res.data.allAmount;
            })
        },
        //核心企业已融资金额反向
        listHasRaised() {
            let queryParams = {}
            queryParams.hxDateType = this.hxDateType
            listHasRaised(queryParams).then(res => {
                this.hxHasRaised = res.data.allAmount;
            })
        },
        //核心企业已融资金额正向
        listHasRaisedForward() {
            let queryParams = {}
            queryParams.zfpType = '0'
            queryParams.hxDateType = this.hxDateType
            listHasRaised(queryParams).then(res => {
                this.hxHasRaisedForward = res.data.allAmount;
            })
        },
        //核心企业已放款金额
        listPendingRepayment() {
            listPendingRepayment().then(res => {
                this.hxPendingMoney = res.data.allAmount;
            })
        },
        //核心企业已放款金额
        listPendingRepaymentForward() {
            let queryParams = {}
            queryParams.zfpType = '0'
            listPendingRepayment(queryParams).then(res => {
                this.hxPendingMoneyForward = res.data.allAmount;
            })
        },
        //核心企业已放款金额
        listRepayment() {
            let queryParams = {}
            queryParams.hxDateType = this.hxDateType
            listRepayment(queryParams).then(res => {
                this.hxRepayment = res.data.allAmount;
            })
        },
        //平台放款金额
        getAllLoanBalance() {
            return accAdd(this.loanBalance, this.returnBalance, 2)
        },
        //未融资金额
        getNotUseAmt() {
            return accAdd(this.effectBalance, this.loseEffectBalance, 2)
        },
        //平台开立融信
        getFinancedNumAll() {
            return accAdd(accAdd(accAdd(accAdd(this.effectBalance, this.availableBalance, 2), this.loanBalance, 2), this.loseEffectBalance, 2), this.returnBalance, 2)
        },
        //开立金额
        getFinancedNum() {
            return accAdd(accAdd(this.effectBalance, this.availableBalance, 2), this.loanBalance, 2)
        },
        //开立金额 -- 正向保理
        getFinancedNumForward() {
            return accAdd(accAdd(this.effectBalanceForward, this.availableBalanceForward, 2), this.loanBalanceForward, 2)
        },
        //剩余授信额度
        getsubNum() {
            return accSub(this.creditLineAll, this.getFinancedNum(), 2)
        },
        //剩余授信额度 -- 正向保理
        getsubNumForward() {
            return accSub(this.creditLineAllForward, this.getFinancedNumForward(), 2)
        },
        //平台资金 -- 饼图
        getFinanceAmount() {
            getFinanceAmount().then(response => {
                this.financeAmountList = response.data;
                this.initChartPie(response.data, '平台资金统计', ["#f9b51d", "#30d894", "#ff6d8a", "#4280f2"], '{name|{b}}\n{unit|{c} 元}')
            })
        },
        //平台用户统计 -- 柱状图
        getCompanyReport() {
            let queryParams = {}
            queryParams.dateType = this.dateType
            getCompanyReport(queryParams).then((response) => {
                this.companyDataList = response.data.dataList
                this.companyExtraOption.xAxis[0].data = response.data.dateList
                this.iniEcharBar('echarBarUser', response.data.dataList, response.data.dateList)
            });
        },
        iniEcharBar(id, series, dateList) {
            // 时间选择是周的时候进行转换 YYYY-MM-D 2 MM.D
            if (this.dateType === '00') {
                dateList = dateList.map(item => {
                    let arr = item.split('-').slice(1)
                    return arr.join('.')
                })
            }

            let _series = series.map(item => {
                item.type = 'bar'
                item.barWidth = 12
                item.barGap = '25%'
                return item
            })
            // _series.push({
            //     name: '供应商',
            //     type: 'line',
            //     yAxisIndex: 1,
            //     data: _series[0].data.map(item => {
            //         return item / eval(_series[0].data.join('+')) * 100
            //     })
            // })
            // _series.push({
            //     name: '核心企业',
            //     type: 'line',
            //     yAxisIndex: 1,
            //     data: _series[1].data.map(item => {
            //         return item / eval(_series[1].data.join('+')) * 100
            //     })
            // })
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                color: ["#4280f2", "#30d894"],
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false //y轴坐标点消失
                    },
                    data: dateList,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        margin: 34,
                        fontSize: 16,
                        color: '#666666',
                    },
                }],
                yAxis: [{
                        type: 'value',
                        name: '',
                        axisLine: {
                            show: false //y轴线消失
                        },
                        axisTick: {
                            show: false //y轴坐标点消失
                        },
                        axisLabel: {
                            margin: 11,
                            fontSize: 16,
                            color: '#666666',
                            formatter: '{value}'
                        },
                        splitLine: {
                            lineStyle: {
                                color: ['#e5e5e5'],
                                width: 2
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '',
                        axisLine: {
                            show: false //y轴线消失
                        },
                        axisTick: {
                            show: false //y轴坐标点消失
                        },
                        // min: 0,
                        // max: 100,
                        // axisLabel: {
                        //     margin: 11,
                        //     fontSize: 16,
                        //     color: '#666666',
                        //     formatter: '{value}%'
                        // },
                        splitLine: {
                            lineStyle: {
                                color: ['#e5e5e5'],
                                width: 2
                            }
                        }
                    }
                ],
                series: _series
            };
            let chartBar = document.getElementById(id);
            let myChart = echarts.init(chartBar);
            myChart.clear()
            myChart.setOption(option)
        },
        iniEchartBarCore(series, dateList) {
            if (this.financeDateType === '00') {
                dateList = dateList.map(item => {
                    let arr = item.split('-').slice(1)
                    return arr.join('.')
                })
            }
            var barCore = document.getElementById('echarBarCore');
            var myChart = echarts.init(barCore);
            let _series = series.map(item => {
                item.type = 'bar'
                item.barWidth = 75

                item.label = {
                    show: true
                }
                return item
            })
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                color: ["#4280f2", "#30d894"],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: dateList,
                    axisLine: {
                        show: false //y轴线消失
                    },
                    axisTick: {
                        show: false //y轴坐标点消失
                    },
                    axisLabel: {
                        margin: 34,
                        fontSize: 16,
                        color: '#666666',
                    },
                }],
                yAxis: [{
                    show: false
                }],
                series: _series
            };

            option && myChart.setOption(option);
        },
        //核心企业额度比例 -- 柱状图
        getFinanceAmountAll() {
            let queryParams = {}
            queryParams.pageNum = 1
            queryParams.pageSize = 5
            getFinanceAmountAll(queryParams).then((response) => {
                this.coreFinanceAmountList = response.data.dataList
                this.coreFinanceAmountExtraOption.yAxis[0].data = response.data.dateList

                this.iniEchartBarCore(response.data.dataList, response.data.dateList)
            });
        },
        //融资开立月度统计 -- 柱状图
        getFinanceRecordMonth() {
            let queryParams = {}
            queryParams.dateType = this.financeDateType
            financeRecordMonth(queryParams).then((response) => {
                this.yearDataList = response.data.dataList
                this.yearExtraOption.xAxis[0].data = response.data.dateList
                this.iniEcharBar('echarBarBusiness', response.data.dataList, response.data.dateList)
            });
        },
        //查询待办
        getWorkList() {
            listNotice(this.queryParamsWork).then((response) => {
                this.workList = response.rows
                this.workTotal = response.total
            });
        },
        //查询消息
        getNoticeList() {
            listNotice(this.queryParamsNotice).then((response) => {
                this.noticeList = response.rows
                this.noticeTotal = response.total
            });
        },
        //查询已办
        getOldWorkList() {
            listNotice(this.queryParamsOldWork).then((response) => {
                this.oldWorkList = response.rows
                this.oldWorkTotal = response.total
            });
        },
        //企业即将到期额度（30天） -- 列表
        getExpiredList() {
            getExpiredList(this.queryParamsExpired).then(response => {
                this.expiredList = response.data.records;
                this.expiredTotal = response.data.total
            })
        },
        //即将到期额度（30天）
        getExpiredBalance() {
            getExpiredBalance().then(response => {
                this.expiredBalance = response.data.allAmount
            })
        },
        //融资开立年度统计 -- 柱状图
        getFinanceRecordYear() {
            let queryParams = {}
            queryParams.dateType = "01"
            financeRecordMonth(queryParams).then((response) => {
                this.monthDataList = response.data.dataList
                this.monthExtraOption.xAxis[0].data = response.data.dateList
                this.initEchartBarCapital('echartBarCapital', response.data.dataList, response.data.dateList)
            });
        },
        //融资开立月度统计 -- 柱状图
        getFinanceRecord() {
            let queryParams = {}
            queryParams.dateType = "03"
            financeRecordMonth(queryParams).then((response) => {
                this.monthDataList = response.data.dataList
                this.monthExtraOption.xAxis[0].data = response.data.dateList
                this.initEchartBarCapital('echartBarCapitalDay', response.data.dataList, response.data.dateList, true)
            });
        },
        initEchartBarCapital(id, series, dateList, transform) {
            if (transform) {
                // 时间选择是周的时候进行转换 YYYY-MM-D 2 MM.D
                dateList = dateList.map(item => {
                    let arr = item.split('-').slice(1)
                    return arr.join('.')
                })
            }
            let _series = series.map(item => {
                item.type = 'bar'
                item.barWidth = 12
                item.barGap = '20%'
                return item
            })
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {
                    left: '20%'
                },
                color: ["#4280f2", "#fb738a"],
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false //y轴坐标点消失
                    },
                    data: dateList,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        margin: 34,
                        fontSize: 16,
                        color: '#666666',
                    },
                }],
                yAxis: [{
                        type: 'value',
                        name: '',
                        axisLine: {
                            show: false //y轴线消失
                        },
                        axisTick: {
                            show: false //y轴坐标点消失
                        },
                        axisLabel: {
                            margin: 11,
                            fontSize: 16,
                            color: '#666666',
                            formatter: '{value}'
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: ['#e5e5e5'],
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '',
                        axisLine: {
                            show: false //y轴线消失
                        },
                        axisTick: {
                            show: false //y轴坐标点消失
                        },
                        axisLabel: {
                            margin: 11,
                            fontSize: 16,
                            color: '#666666',
                            formatter: '{value}%'
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: ['#e5e5e5'],
                            }
                        }
                    }
                ],
                series: _series
            };
            let chartBar = document.getElementById(id);
            let myChart = echarts.init(chartBar);
            myChart.clear()
            myChart.setOption(option)
        },
        //融信授权额度 -- 饼图
        getCreditLine() {
            getCoreCreditLine().then(response => {
                this.dataList = response.data;
                this.initChartPie(response.data, '融信授权额度', ['#ff6d8a', '#4280f2'], '{percent|{d}%}\n{percentUnit|{c} 元}')
            })
        },
        //融信授权额度 -- 列表
        getList() {
            getCreditLineList(this.queryParams).then(response => {
                this.creditLineList = response.data.records;
                this.creditLineTotal = response.data.total
            })
        },
        //融信统计 -- 列表
        getNumList() {
            getCreditLineNumList(this.queryParamsNum).then(response => {
                this.creditLineNumList = response.data.records;
                this.creditLineNumTotal = response.data.total
            })
        },
        /* 金额展示 */
        handleInput(str) {
            return amtformat(str, 2, ".", ",");
        },
        /** 详情按钮操作 */
        handleDetail(row) {
            if (row.openType == '00') {
                this.openWork = true
                this.noticeId = row.noticeId
                this.workType = row.workType
                this.tableId = row.tableId
                readWork(row.noticeId).then(response => {
                    this.getWorkList()
                });
            } else if (row.openType == '01') {
                this.$router.push({
                    path: row.openUrl
                });
                readWork(row.noticeId).then(response => {
                    this.getWorkList()
                });
            }
        },
        // 取消按钮
        cancel() {
            this.getWorkList()
            this.openWork = false;
        },
        //去融信
        toCredit() {
            this.$router.push({
                path: "/Bill/credit"
            });
        },
        //去授信
        toCreditLine() {
            this.$router.push({
                path: "/Bill/creditLine"
            });
        },
        //去还款
        toRepayment() {
            this.$router.push({
                path: "/Bill/repayment"
            });
        },
        //去融资
        toFinanceRecord() {
            this.$router.push({
                path: "/Bill/financeRecord"
            });
        },
        /** 详情按钮操作 */
        handleInfo(row) {
            const zfrId = row.zfrId;
            Cookies.set("/repayment/detailRepayment/" + zfrId + "/", this.$route.fullPath);
            this.$router.push({
                path: "/repayment/detailRepayment/" + zfrId + "/"
            });
        },
        /** 详情按钮操作 */
        handleCreditDetail(row) {
            const zfiId = row.zfiId;
            Cookies.set("/credit/creditDetail/" + zfiId + "/", this.$route.fullPath);
            this.$router.push({
                path: "/credit/creditDetail/" + zfiId + "/"
            });
        },
    },
};
</script>

<style>
.labelData .el-collapse-item__header {
    height: 200px;
}

.app-main {
    padding: 0 25px 30px 20px;
    background-color: #f4f5f6;
}
</style><style lang="scss">
.zap-home__main .el-input--medium .el-input__inner {
    font-size: 16px;
    border-color: transparent;
}

.zap-home__main .el-col {
    margin-bottom: 0 !important;
}

.zap-card {
    margin-bottom: 0 !important;
    padding: 30px 50px;
    background-color: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
}

.zap-card__title {
    font-size: 16px;
    font-weight: normal;
    color: #333333;
}

.zap-card__wrap {
    margin-top: 16px;
    font-size: 0;
}

.zap-card__slash,
.zap-card__num {
    display: inline-block;
    line-height: 1;
    font-size: 28px;
    font-weight: bold;
}

.zap-card__slash {
    padding: 0 8px;
}

.zap-card__unit {
    display: inline-block;
    line-height: 1;
    font-size: 20px;
}

.zap-card__blue {
    color: #2259BF;
}

.zap-card__gold {
    color: #e6a71b;
}

.zap-card__pink {
    color: #FF2F2F;
}

.zap-home__main {
    .el-col {
        margin-bottom: 20px;
    }

    .zap-home__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 78px;
        font-size: 18px;
        color: #333333;
    }

    .zap-home-chart {
        background-color: #ffffff;
    }

    .zap-home-chart__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 78px;
        padding: 0 30px;
        font-size: 18px;
        color: #333333;
        white-space: nowrap;
    }

    .zap-home-chart__title--middle {
        height: 58px;
    }

    .zap-home-chart__title--align-left {
        justify-content: flex-start;
    }

    .zap-home-chart--space {
        margin-top: 20px;
    }

    .zap-home-chart__wrap {
        display: flex;
        align-items: center;
    }

    .zap-home-chart__select {
        width: 116px;
        height: 40px;
        margin-left: 26px;
        background-image: linear-gradient(#ffffff,
                #ffffff),
            linear-gradient(#71befe,
                #71befe);
        background-blend-mode: normal,
            normal;
        border: solid 1px #ebebeb;

        .el-input--medium .el-input__inner {
            line-height: 38px;
            height: 38px;
            font-size: 14px;
        }
    }

    // 自定义图例
    .zap-home-chart__legend {
        display: flex;
        align-items: center;
    }

    .zap-home-chart__circle {
        display: inline-block;
        width: 11px;
        height: 11px;
        border-radius: 50%;
    }

    .zap-home-chart__circle--blue {
        background-color: #4280f2;
    }

    .zap-home-chart__circle--green {
        background-color: #30d894;
    }

    .zap-home-chart__circle--red {
        background-color: #ff6d8a;
    }

    .zap-home-chart__circle--margin {
        margin-left: 25px;
    }

    .zap-home-chart__text {
        margin-left: 10px;
        font-size: 14px;
        color: #666666;
    }

    .zap-home-chart__search {
        width: 199px;
        height: 40px;
        margin-left: 30px;
        background-image: linear-gradient(#ffffff,
                #ffffff),
            linear-gradient(#71befe,
                #71befe);
        background-blend-mode: normal,
            normal;
        border: solid 1px #ebebeb;

        .zap-home .el-input--medium .el-input__inner {
            height: 38px;
            line-height: 38px;
            font-size: 14px;
        }
    }

    .zap-margin {
        margin-top: 25px;
    }

    // 消息列表
    .el-card__body {
        padding: 0 18px;
    }

    .el-tabs__item {
        height: 54px;
        line-height: 54px;
        font-size: 16px;
        color: #666;
    }

    .el-table th.el-table__cell.is-leaf,
    .el-table td.el-table__cell {
        text-align: left;
        border-bottom: 1px dashed #999999;
    }

    .zap-padding-clear {
        padding: 0;
    }

    .zap-list {
        padding: 0 18px;
        background-color: #ffffff;
    }

    .zap-chart-quto {
        height: 358px;
    }

    .zap-statistics {
        height: 358px;
        padding: 0 20px;
    }

    .zap-padding {
        padding: 0 20px;
    }

    .zap-bg {
        background-color: #fff;
    }
}

.zap-home__main .mb20 {
    margin-bottom: 20px !important;
}
</style>