|
@@ -0,0 +1,700 @@
|
|
|
|
|
+<template >
|
|
|
|
|
+ <div id="" class="zap-home__main">
|
|
|
|
|
+ <!-- 融信授权额度、融信统计 -->
|
|
|
|
|
+ <el-col class="zap-chart-quto" :xs="24" :sm="12" :md="12" :lg="12" style="margin-top:25px">
|
|
|
|
|
+ <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: 678px;">
|
|
|
|
|
+ <el-col :span="24">
|
|
|
|
|
+ <div id="echartPie" style="height: 300px;"></div>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="24">
|
|
|
|
|
+ <div style="height:300px;padding: 0 20px;">
|
|
|
|
|
+ <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="12" :md="12" :lg="12" style="margin-top:25px">
|
|
|
|
|
+ <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 class="zap-statistics" :xs="24" :sm="12" :md="12" :lg="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-col :xs="24" :sm="12" :md="12" :lg="12">
|
|
|
|
|
+ <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>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+<script>
|
|
|
|
|
+import * as echarts from 'echarts';
|
|
|
|
|
+import { getCoreCreditLine, getCreditLineList, getCreditLineNumList, financeRecordMonth } from '@/api/service/report/credit'
|
|
|
|
|
+import { amtformat } from "@/utils/amtCommon"
|
|
|
|
|
+import EchartPie from '@/components/Echart/pie/index'
|
|
|
|
|
+import EchartBar from '@/components/Echart/bar/index'
|
|
|
|
|
+export default {
|
|
|
|
|
+ components: {
|
|
|
|
|
+ EchartPie,
|
|
|
|
|
+ EchartBar,
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ dateType: "00",
|
|
|
|
|
+ financeDateType: "00",
|
|
|
|
|
+ dataList:[],
|
|
|
|
|
+ creditLineList:[],
|
|
|
|
|
+ creditLineTotal:0,
|
|
|
|
|
+ queryParams:{
|
|
|
|
|
+ pageNum:1,
|
|
|
|
|
+ pageSize:5
|
|
|
|
|
+ },
|
|
|
|
|
+ creditLineNumList:[],
|
|
|
|
|
+ creditLineNumTotal:0,
|
|
|
|
|
+ queryParamsNum:{
|
|
|
|
|
+ pageNum:1,
|
|
|
|
|
+ pageSize:5
|
|
|
|
|
+ },
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ created: function () {
|
|
|
|
|
+ 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);
|
|
|
|
|
+ },
|
|
|
|
|
+ //查询各角色首页模块
|
|
|
|
|
+ selectHome(){
|
|
|
|
|
+ //融信授权额度 -- 饼图
|
|
|
|
|
+ this.getCreditLine()
|
|
|
|
|
+ //融信授权额度 -- 列表
|
|
|
|
|
+ this.getList()
|
|
|
|
|
+ //融信统计 -- 列表
|
|
|
|
|
+ this.getNumList()
|
|
|
|
|
+ //融资开立月度统计 -- 柱状图
|
|
|
|
|
+ this.getFinanceRecord()
|
|
|
|
|
+ //融资开立年度统计 -- 柱状图
|
|
|
|
|
+ this.getFinanceRecordYear()
|
|
|
|
|
+ },
|
|
|
|
|
+ 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);
|
|
|
|
|
+ },
|
|
|
|
|
+ //融资开立年度统计 -- 柱状图
|
|
|
|
|
+ getFinanceRecordYear(){
|
|
|
|
|
+ let queryParams = {}
|
|
|
|
|
+ queryParams.dateType = "01"
|
|
|
|
|
+ financeRecordMonth(queryParams).then((response) => {
|
|
|
|
|
+ this.initEchartBarCapital('echartBarCapital', response.data.dataList, response.data.dateList)
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ //融资开立月度统计 -- 柱状图
|
|
|
|
|
+ getFinanceRecord(){
|
|
|
|
|
+ let queryParams = {}
|
|
|
|
|
+ queryParams.dateType = "03"
|
|
|
|
|
+ financeRecordMonth(queryParams).then((response) => {
|
|
|
|
|
+ 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, ".", ",");
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+};
|
|
|
|
|
+</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: 720px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .zap-statistics{
|
|
|
|
|
+ height: 358px;
|
|
|
|
|
+ padding: 0 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .zap-padding{
|
|
|
|
|
+ padding: 0 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .zap-bg{
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+</style>
|
dudm