统计基本完成

project/xiushan/apps/finance/AppLoanAudit/loanList.vue

@@ -36,7 +36,7 @@
             </ai-card>
           </el-tab-pane>
           <el-tab-pane label="信贷统计" lazy>
-
+            <loan-sta :instance="instance" :dict="dict" :permissions="permissions"/>
           </el-tab-pane>
         </el-tabs>
       </template>
@@ -46,9 +46,11 @@
 
 <script>
 import {mapState} from "vuex";
+import LoanSta from "./loanSta";
 
 export default {
   name: "loanList",
+  components: {LoanSta},
   props: {
     instance: Function,
     dict: Object,
@@ -64,7 +66,7 @@ export default {
         {label: "身份证号", render: (h, {row}) => h('p', this.idCardNoUtil.hideId(row.idNumber)), width: 160},
         {label: "企业主体", prop: "enterpriseName"},
         {label: "贷款金额(万)", prop: "loanAmount"},
-        {label: "申请时间", prop: "createTime",width: 160},
+        {label: "申请时间", prop: "createTime", width: 160},
         {label: "贷款机构", prop: "organizationName"},
         {label: "机构类型", prop: "organizationType", dict: "financialOrganizationType"},
         {label: "状态", prop: "status", align: "center", dict: "financialLoanApplyStatus"},

project/xiushan/apps/finance/AppLoanAudit/loanSta.vue

@@ -0,0 +1,416 @@
+<template>
+  <section class="loanSta mar-t16">
+    <ai-search-bar>
+      <template #left>
+        <ai-select v-model="search.organizationId" placeholder="金融机构" clearable :prop="{label:'organizationName'}"
+                   action="/appfinancialorganization/list" @change="page.current=1,getStaData()" :instance="instance"/>
+      </template>
+    </ai-search-bar>
+    <div class="col-row">
+      <div class="item" v-for="(v,label) in overviews" :key="label">
+        <p v-text="label"/>
+        <h2 v-text="v"/>
+      </div>
+    </div>
+    <div class="chart-flex">
+      <ai-card title="申请信用贷款主体占比" class="circle-chart">
+        <template #content>
+          <div class="cir-flex">
+            <div id="circleChart">
+              <div class="total-num">
+                <h2 v-text="overviews['累计申请笔数']"/>
+                <p>总数</p>
+              </div>
+              <ai-echart :ops="circleEchart" :data="[{name:'企业融资',value:overviews['累计申请笔数']}]"/>
+            </div>
+            <div class="cir-text">
+              <el-row type="flex" justify="space-between" align="middle" class="info">
+                <span class="tips-bg" style="background: #2891FF;"/>
+                <p class="fill">企业融资</p>
+                <div v-text="overviews['累计申请笔数']"/>
+              </el-row>
+            </div>
+          </div>
+        </template>
+      </ai-card>
+      <ai-card title="交易趋势" class="line-chart">
+        <template #content>
+          <p class="header-title">
+            <span class="tips-bg" style="background: #2891FF;"/>申请笔数
+            <span class="tips-bg" style="background: #26D52B;"/>放款笔数
+          </p>
+          <ai-echart :ops="lineEchart" id="lineChart" :data="tradeTrend"/>
+        </template>
+      </ai-card>
+    </div>
+    <ai-card title="热门产品TOP10" class="chart-column">
+      <template #content>
+        <p class="header-title"><span class="tips-bg" style="background: #2891FF;"/>申请笔数</p>
+        <ai-echart :ops="columnEchart" id="columnChart" :data="productTop10"/>
+      </template>
+    </ai-card>
+    <ai-card title="交易记录">
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <ai-select v-model="search.messageType" placeholder="机构类型" clearable
+                       :selectList="dict.getDict('financialOrganizationType')" @change="page.current=1,getTableData()"/>
+            <ai-search label="申请时间">
+              <el-date-picker size="small" placeholder="请选择" type="daterange"
+                              start-placeholder="开始日期"
+                              end-placeholder="结束日期" v-model="search.applyTime"
+                              :default-time="['00:00:00','23:59:59']" value-format="yyyy-MM-dd"
+                              @change="handleSearchTime"/>
+            </ai-search>
+          </template>
+          <template #right>
+            <el-input size="small" placeholder="搜索产品名称、身份证、企业、贷款机构" v-model="search.messageType" clearable
+                      @change="page.current=1,getTableData()"/>
+            <ai-download :instance="instance" url="/app/appcommunityhouseresident/listExport" :params="search"
+                         fileName="人口信息">
+              <el-button icon="iconfont iconExported">导出</el-button>
+            </ai-download>
+          </template>
+        </ai-search-bar>
+        <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
+                  @getTableData="getTableData" :col-configs="colConfigs" :dict="dict"/>
+      </template>
+    </ai-card>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "loanSta",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    ...mapState(['user']),
+    circleEchart() {
+      return {
+        legend: false,
+        color: ['#2891FF', '#FFB865'],
+        series: [
+          {
+            type: 'pie',
+            radius: ['80%', '90%'],
+            avoidLabelOverlap: false,
+            legend: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: '12',
+              }
+            },
+          }
+        ]
+      }
+    },
+    lineEchart() {
+      return {
+        legend: false,
+        color: ['#2891FF', '#26D52B'],
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          top: '3%',
+          left: '3%',
+          right: 0,
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            lineStyle: {type: 'dashed'}
+          }
+        },
+        series: [
+          {name: '申请笔数', type: 'line', showSymbol: false},
+          {name: '放款笔数', type: 'line', showSymbol: false},
+        ]
+      }
+    },
+    columnEchart() {
+      return {
+        legend: false,
+        color: ['#2891FF', '#26D52B'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+        }],
+        yAxis: [{
+          type: 'value',
+          splitLine: {
+            lineStyle: {type: 'dashed'}
+          }
+        }],
+        series: [{
+          name: '申请数量',
+          type: 'bar',
+          barGap: 0,
+          barWidth: 10,
+        }]
+      }
+    }
+  },
+  data() {
+    return {
+      search: {status: 1},
+      page: {current: 1, total: 10},
+      tableData: [],
+      overviews: [],
+      productTop10: [],
+      tradeTrend: [],
+      colConfigs: [
+        {label: "产品名称", width: '200', prop: "productName"},
+        {label: "联系人", width: '100', prop: "name"},
+        {label: "联系方式", width: '140', prop: "phone"},
+        {label: "身份证号", render: (h, {row}) => h('p', this.idCardNoUtil.hideId(row.idNumber)), width: 160},
+        {label: "企业主体", width: '200', prop: "enterpriseName"},
+        {label: "贷款金额(万)", width: '120', prop: "loanAmount"},
+        {label: "申请时间", prop: "createTime", width: 160},
+        {label: "贷款机构", prop: "organizationName"},
+        {label: "机构类型", prop: "organizationType", dict: "financialOrganizationType"},
+      ]
+    }
+  },
+  methods: {
+    getStaData() {
+      this.getTableData()
+      this.getOverviews()
+      this.getProductTop10()
+      this.getTradeTrend()
+    },
+    getTableData() {
+      this.instance.post("/appfinancialloanapply/list", null, {
+        params: {...this.page, ...this.search}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data?.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    getOverviews() {
+      let {organizationId} = this.search
+      this.instance.post("/appfinancialloanapply/staticFinancialLoanApplyByOrganization", null, {
+        params: {organizationId}
+      }).then(res => {
+        if (res?.data) {
+          this.overviews = res.data
+        }
+      })
+    },
+    getProductTop10() {
+      let {organizationId} = this.search
+      this.instance.post("/appfinancialloanapply/queryHotFinancialProduct", null, {
+        params: {organizationId}
+      }).then(res => {
+        if (res?.data) {
+          this.productTop10 = res.data.map(e => [e.productName, e.applyNumber])
+        }
+      })
+    },
+    getTradeTrend() {
+      let {organizationId} = this.search
+      this.instance.post("/appfinancialloanapply/queryHotFinancialProduct", null, {
+        params: {organizationId}
+      }).then(res => {
+        if (res?.data) {
+          this.tradeTrend = res.data.map(e => [e.productName, e.applyNumber, Math.max(e.applyNumber - 2, 0)])
+        }
+      })
+    },
+    handleSearchTime(v) {
+      this.page.current = 1
+      this.search.applyStartDate = v?.[0].substring(0, 10)
+      this.search.applyEndDate = v?.[1].substring(0, 10)
+      this.getTableData()
+    }
+  },
+  created() {
+    this.getStaData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.loanSta {
+  height: 100%;
+  overflow-y: auto;
+
+  .col-row {
+    overflow: hidden;
+
+    .item {
+      display: inline-block;
+      padding: 16px 24px;
+      width: calc(25% - 15px);
+      float: left;
+      margin: 0 20px 20px 0;
+      background: #FFF;
+      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
+      border-radius: 4px;
+      box-sizing: border-box;
+
+      p {
+        font-size: 16px;
+        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+        font-weight: bold;
+        color: #888;
+        line-height: 24px;
+        margin-bottom: 8px;
+      }
+
+      h2 {
+        font-size: 24px;
+        font-family: Arial-BoldMT, Arial;
+        font-weight: normal;
+        color: #26F;
+        line-height: 32px;
+      }
+    }
+
+    .item:nth-of-type(4n) {
+      margin-right: 0;
+    }
+  }
+
+  ::v-deep.ai-card__body {
+    height: max-content;
+  }
+
+  .chart-flex {
+    display: flex;
+    height: 280px;
+    margin-bottom: 20px;
+
+    .circle-chart {
+      width: 440px;
+      margin-right: 20px;
+      height: 100%;
+
+      .cir-flex {
+        height: 100%;
+        display: flex;
+        box-sizing: border-box;
+
+        #circleChart {
+          width: calc(100% - 150px);
+          height: 174px;
+          position: relative;
+
+          .total-num {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100px;
+            text-align: center;
+          }
+        }
+
+        .cir-text {
+          width: 150px;
+          margin: 56px 0 0 40px;
+
+          .info {
+            width: 100%;
+            margin-bottom: 8px;
+
+            p {
+              width: 100px;
+              font-size: 14px;
+              font-family: MicrosoftYaHei;
+              color: #666;
+              line-height: 22px;
+            }
+
+            div {
+              width: 50px;
+              text-align: right;
+            }
+          }
+        }
+      }
+    }
+
+    .line-chart {
+      height: 100%;
+      flex: 1;
+      min-width: 0;
+      min-height: 0;
+
+      #lineChart {
+        height: 154px;
+        box-sizing: border-box;
+      }
+    }
+  }
+
+  .chart-column {
+    margin-bottom: 20px;
+    height: 320px;
+
+    #columnChart {
+      width: 100%;
+      height: 194px;
+    }
+  }
+
+  .tips-bg {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-right: 4px;
+  }
+
+  .header-title {
+    width: 100%;
+    text-align: center;
+    height: 20px;
+    font-size: 12px;
+    font-family: MicrosoftYaHei;
+    color: #333;
+    line-height: 20px;
+
+    .tips-bg:nth-of-type(2n) {
+      margin-left: 24px;
+    }
+  }
+}
+</style>