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 :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 :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 :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 :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 :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">平台放款金额</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 :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 :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 :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 :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(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" @click="toCreditLine()">
                        <div class="zap-card__title">可用授权额度</div>
                        <div class="zap-card__wrap zap-card__gold">
                            <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" @click="toRepayment()">
                        <div class="zap-card__title">即将到期付款</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-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">{{workTotal}}</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" @click="toCreditLine()">
                        <div class="zap-card__title">可用授权额度(正向保理)</div>
                        <div class="zap-card__wrap zap-card__gold">
                            <span class="zap-card__num">{{handleInput(getsubNumForward())}}</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" @click="toCreditLine()">
                        <div class="zap-card__title">总授权额度(正向保理)</div>
                        <div class="zap-card__wrap zap-card__pink">
                            <span class="zap-card__num">{{handleInput(creditLineAllForward)}}</span>
                            <span class="zap-card__unit">元</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <!-- 我的待办、消息 -->
            <el-row class="zap-list">
                <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="zfiNumber" :show-overflow-tooltip="true"/>
                                <el-table-column label="金额" align="center" prop="afiAmount" :show-overflow-tooltip="true"/>
                                <el-table-column label="到期时间" align="center" prop="afiExpireDate" :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="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>
            <!-- 融信授权额度、融信统计 -->
            <!-- <el-row class="zap-margin" :gutter="20">
                <el-col class="zap-chart-quto" :xs="24" :sm="16" :md="16" :lg="16">
                    <div style="padding: 0 20px;background: #fff;" class="zap-home-chart__title zap-home-chart__title--align-left zap-padding-clear zap-home-chart__title--middle">
                        融信授权额度
                        <span class="zap-home-chart__circle zap-home-chart__circle--blue" style="margin-left: 45px"></span>
                        <span class="zap-home-chart__text">可用</span>
                        <span class="zap-home-chart__circle zap-home-chart__circle--red zap-home-chart__circle--margin"></span>
                        <span class="zap-home-chart__text">已用</span>
                    </div>
                    <el-row style="background: #fff;padding-right: 20px;height: 300px;">
                        <el-col :span="12">
                            <div id="echartPie" style="height: 300px;"></div>
                        </el-col>
                        <el-col :span="12">
                            <div style="height:300px;">
                                <el-table :data="creditLineList">
                                    <el-table-column label="渠道名称" align="center" prop="managementName" :show-overflow-tooltip="true"/>
                                    <el-table-column label="额度" align="center" prop="allAmount" :show-overflow-tooltip="true"/>
                                    <el-table-column label="可用金额" align="center" prop="subAmount" :show-overflow-tooltip="true"/>
                                    <el-table-column label="已用金额" align="center" prop="availableAmount" :show-overflow-tooltip="true"/>
                                </el-table>
                                
                                <pagination
                                v-show="creditLineTotal>0"
                                :total="creditLineTotal"
                                :page.sync="queryParams.pageNum"
                                :limit.sync="queryParams.pageSize"
                                :pager-count="5"
                                :page-sizes="[5]"
                                @pagination="getList"
                                />
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col class="zap-statistics" :xs="24" :sm="8" :md="8" :lg="8">
                    <div style="background: #fff;padding: 0 20px;" class="zap-home-chart__title zap-home-chart__title--align-left zap-padding-clear zap-home-chart__title--middle">
                        融信统计
                    </div>
                    <div style="height:300px;background: #fff;padding: 0 20px;">
                        <el-table :data="creditLineNumList">
                            <el-table-column label="渠道名称" align="center" prop="managementName" :show-overflow-tooltip="true"/>
                            <el-table-column label="数量" align="center" prop="num" :show-overflow-tooltip="true"/>
                            <el-table-column label="额度" align="center" prop="allAmount" :show-overflow-tooltip="true"/>
                        </el-table>
                        
                        <pagination
                        v-show="creditLineNumTotal>0"
                        :total="creditLineNumTotal"
                        :page.sync="queryParamsNum.pageNum"
                        :limit.sync="queryParamsNum.pageSize"
                        :pager-count="5"
                        :page-sizes="[5]"
                        @pagination="getNumList"
                        />
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="zap-bg zap-padding zap-home-chart__title zap-home-chart__title--align-left zap-padding-clear zap-home-chart__title--middle">
                        融资开立资金表(年)
                        <span class="zap-home-chart__circle zap-home-chart__circle--blue" style="margin-left: 45px"></span>
                        <span class="zap-home-chart__text">开立额度</span>
                        <span class="zap-home-chart__circle zap-home-chart__circle--red zap-home-chart__circle--margin"></span>
                        <span class="zap-home-chart__text">还款额度</span>
                    </div>
                    <div id="echartBarCapital" class="zap-bg " style="height: 300px"></div>
                </el-col>
                <el-col :span="12">
                    <div class="zap-bg zap-padding zap-home-chart__title zap-home-chart__title--align-left zap-padding-clear zap-home-chart__title--middle">
                        融资开立资金表(30天内)
                        <span class="zap-home-chart__circle zap-home-chart__circle--blue" style="margin-left: 45px"></span>
                        <span class="zap-home-chart__text">开立额度</span>
                        <span class="zap-home-chart__circle zap-home-chart__circle--red zap-home-chart__circle--margin"></span>
                        <span class="zap-home-chart__text">还款额度</span>
                    </div>
                    <div id="echartBarCapitalDay" class="zap-bg " style="height: 300px"></div>
                </el-col>
            </el-row> -->
        </div>

        <!-- 融资企业 -->
        <div v-if="company.scyType == '02'" class="zap-margin">
            <el-row :gutter="20">
                <!-- 第一行 -->
                <el-col :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 :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__gold">
                            <span class="zap-card__num">{{handleInput(availableBalance)}}</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" @click="toFinanceRecord()">
                        <div class="zap-card__title">已融资额度</div>
                        <div class="zap-card__wrap zap-card__pink">
                            <span class="zap-card__num">{{handleInput(loanBalance)}}</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" @click="toRepayment()">
                        <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>
            <el-card class="box-card" style="width:93%;margin:0.6%;float:left;">
                <!-- <div slot="header" class="clearfix">
                </div> -->
                <div class="text item" style="height:auto">
                    <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="afiAmount" :show-overflow-tooltip="true"/>
                                <el-table-column label="到期时间" align="center" prop="afiExpireDate" :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="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-card>
        </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 } 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 { 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
  },
    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"}
            ],
            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: ''
        }
    },
    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.getCreditLineAll()
                    //授信总额度 -- 正向保理
                    this.getCreditLineAllForward()
                    //融资中金额
                    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()
                    //即将到期额度（30天）-- 列表
                    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()
                }
                
            });
        },
        //入驻企业数量
        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
            })
        },
        //平台放款金额
        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/finance/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+"/"});
        },
    },
};
</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-card{
    padding: 40px 28px 42px;
    height: 160px;
    background-color: #ffffff;
    box-sizing: border-box;
}
.zap-card__title{
    font-size: 18px;
    font-weight: normal;
    color: #666666;
}
.zap-card__wrap{
    margin-top: 30px;
    font-size: 0;
}
.zap-card__slash,
.zap-card__num{
    display: inline-block;
    line-height: 1;
    font-size: 40px;
}
.zap-card__slash{
    padding: 0 8px;
}
.zap-card__unit{
    display: inline-block;
    line-height: 1;
    font-size: 20px;
}
.zap-card__blue{
    color: #4280f2;
}
.zap-card__gold{
    color: #e6a71b;   
}
.zap-card__pink{
    color: #fb738a;
}
.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{
        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;
    }
}

</style>