融资统计

project/xiushan/apps/financing/AppFinancingNeeds/AppFinancingNeeds.vue

@@ -8,7 +8,7 @@
         <el-tabs class="tabs-page" v-model="currIndex">
           <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label" :name="String(i)">
             <component :is="tab.comp" v-if="currIndex==i" :ref="currIndex" :instance="instance" :dict="dict"
-                       :permissions="permissions" :listType="tab.value" @goPage="goPage"/>
+                       :permissions="permissions" :listType="tab.value" @goPage="goPage" :areaId="areaId"/>
           </el-tab-pane>
         </el-tabs>
       </template>
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-
+import {mapState} from "vuex";
 import NeedsDetail from "./needsDetail";
 import NeedsList from "./needsList";
 import NeedsStatistics from "./needsStatistics";
@@ -48,6 +48,7 @@ export default {
     }
   },
   computed: {
+    ...mapState(['user']),
     tabs() {
       return [
         {
@@ -65,7 +66,9 @@ export default {
     }
   },
   created() {
+    console.log(this.user)
     this.dict.load("productRepaymentTimeline", "financialFundPurpose","financingDemandApplyType", "enterpriseType", "dishonestPersonSituation", "administrativeSanctionType")
+    this.areaId = this.user.info.areaId || ''
   },
   methods: {
     goPage(obj) {

project/xiushan/apps/financing/AppFinancingNeeds/needsStatistics.vue

@@ -2,41 +2,14 @@
   <section class="needsStatistics">
     <ai-search-bar>
       <template #left>   
-        <ai-select v-model="search.messageType" placeholder="金融机构" clearable :selectList="$dict.getDict('dlbResourceType')" @change="getTableData()"></ai-select>          
+         <ai-select v-model="search.organizationId" placeholder="金融机构" clearable :prop="{label:'organizationName'}"
+                   action="/appfinancialorganization/list" @change="page.current=1,getTableData()" :instance="instance"/>    
       </template>
     </ai-search-bar>
     <div class="col-row">
-      <div class="item">
-        <p>累计发布需求</p>
-        <h2>20</h2>
-      </div>
-      <div class="item">
-        <p>累计发布需求</p>
-        <h2>20</h2>
-      </div>
-      <div class="item">
-        <p>累计发布需求</p>
-        <h2>20</h2>
-      </div>
-      <div class="item">
-        <p>累计发布需求</p>
-        <h2>20</h2>
-      </div>
-      <div class="item">
-        <p>累计发布需求</p>
-        <h2>20</h2>
-      </div>
-      <div class="item">
-        <p>累计发布需求</p>
-        <h2>20</h2>
-      </div>
-      <div class="item">
-        <p>累计发布需求</p>
-        <h2>20</h2>
-      </div>
-      <div class="item">
-        <p>累计发布需求</p>
-        <h2>20</h2>
+      <div class="item" v-for="(v,label) in cloList" :key="label">
+        <p v-text="label"/>
+        <h2 v-text="v"/>
       </div>
     </div>
     <div class="chart-flex">
@@ -44,18 +17,18 @@
         <div class="title">融资需求发布主体占比</div>
         <div class="cir-flex">
           <div class="total-num">
-            <h2>108</h2>
+            <h2>{{applyInfo['总数'] || 0}}</h2>
             <p>总数</p>
           </div>
           <div id="circleChart"></div>
           <div class="cir-text">
             <div class="info">
               <p><span class="tips-bg" style="background: #2891FF;"></span>企业融资</p>
-              <div>65</div>
+              <div>{{applyInfo['企业融资'] || 0}}</div>
             </div>
             <div class="info">
               <p><span class="tips-bg" style="background: #FFB865;"></span>个人融资</p>
-              <div>65</div>
+              <div>{{applyInfo['个人融资'] || 0}}</div>
             </div>
           </div>
         </div>
@@ -75,7 +48,7 @@
       <div class="title">交易记录</div>
       <ai-search-bar style="padding:20px 20px 0 20px;">
         <template #left>
-          <ai-select v-model="search.messageType" placeholder="金融机构" clearable :selectList="$dict.getDict('dlbResourceType')" @change="getTableData()"></ai-select>   
+          <ai-select v-model="search.organizationType" placeholder="机构类型" clearable :selectList="$dict.getDict('financialOrganizationType')" @change="getList()"></ai-select>   
          <ai-search label="申请时间">
             <el-date-picker size="small" placeholder="请选择" type="daterange"
               start-placeholder="开始日期"
@@ -83,22 +56,22 @@
               style="width: 258px;"
               value-format="yyyy-MM-dd"
               v-model="stuTime"
-              @change="page.current=1,getList()"/>
+              @change="changeTime"/>
           </ai-search>     
         </template>
         <template #right>
-          <el-input size="small" placeholder="搜索企业名称" v-model="search.messageType" clearable @change="getList()"/> 
-          <ai-download :instance="instance" url="/app/appcommunityhouseresident/listExport" :params="search"
+          <el-input size="small" placeholder="请输入居民名称或真实姓名" v-model="search.name" clearable @change="getList()"/> 
+          <!-- <ai-download :instance="instance" url="/app/appcommunityhouseresident/listExport" :params="search"
             fileName="人口信息">
             <el-button icon="iconfont iconExported">导出</el-button>
-          </ai-download>        
+          </ai-download>         -->
         </template>
       </ai-search-bar>
       <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                 @getList="getList" :col-configs="colConfigs" :dict="dict" style="padding:0 20px 20px 20px;">
-        <el-table-column slot="options" label="状态" fixed="right" width="100">
+        <el-table-column slot="options" label="状态" fixed="right" width="100" align="center">
           <template slot-scope="{row}">
-            <el-button type="text">详情</el-button>
+            <span :class="`status${row.status}`">{{$dict.getLabel('financialLoanApplyStatus', row.status)}}</span>
           </template>
         </el-table-column>
       </ai-table>
@@ -115,43 +88,82 @@ export default {
   props: {
     instance: Function,
     dict: Object,
-    permissions: Function
+    permissions: Function,
+    areaId: String
   },
   computed: {
     ...mapState(['user'])
   },
   data() {
     return {
-      search: {messageType: ''},
+      search: {organizationId: '', name: '', createTimeStart: '', createTimeEnd: '', organizationType: ''},
       page: {current: 1, total: 10},
       circleChart: null,
       lineChart: null,
       columnChart: null,
       tableData: [],
       colConfigs: [
-        {label: "产品名称", width: '200', prop: "enterpriseName"},
-        {label: "联系人", width: '100', prop: "areaName"},
-        {label: "联系方式", width: '140', prop: "loanAmount"},
-        {label: "身份证号", width: '180', prop: "createTime"},
-        {label: "企业主体", width: '200', prop: "name"},
-        {label: "贷款金额(万)", width: '120', prop: "phone"},
-        {label: "申请时间", width: '180', prop: "remark"},
-        {label: "贷款机构", width: '200', prop: "remark"},
-        {label: "机构类型", width: '200', prop: "remark"},
+        // {label: "产品名称", width: '200', prop: "enterpriseName"},
+        {label: "联系人", width: '100', prop: "name"},
+        {label: "联系方式", width: '140', prop: "phone"},
+        {label: "身份证号", width: '180', prop: "idNumber"},
+        {label: "企业主体", width: '200', prop: "enterpriseName"},
+        {label: "贷款金额(万)", width: '120', prop: "loanAmount"},
+        {label: "申请时间", width: '180', prop: "createTime"},
+        {label: "贷款机构", width: '200', prop: "organizationName"},
+        {label: "机构类型", width: '200', prop: "organizationType", dict:'financialOrganizationType'},
         {slot: "options"}
       ],
+      cloList: [],
+      applyInfo: {},
+      demandInfo: {},
+      staticInfo: {},
+      stuTime: []
     }
   },
   methods: {
     getTableData() {
-      this.circleChartInit()
-      this.lineChartInit()
-      this.columnChartInit()
+      this.instance.post(`/appfinancingdemand/staticFinancialDemandByOrganization?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
+        if (res?.data) {
+          if(res.data['对接成功率']) {
+            res.data['对接成功率'] = Number( res.data['对接成功率'] * 100) + '%'
+          }
+          this.cloList = res.data
+        }
+      })
+      this.instance.post(`/appfinancingdemand/staticFinancialDemandByApplyType?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
+        if (res?.data) {
+          this.applyInfo = res.data
+          this.circleChartInit(this.applyInfo)
+        }
+      })
+      this.instance.post(`/appfinancingdemand/staticFinancialDemandByHot?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
+        if (res?.data) {
+          var nameList = [], applyList = [], auditList = []
+          res.data.map((item) => {
+            nameList.push(item.organizationName)
+            applyList.push(item.applyNumber)
+            auditList.push(item.auditNumber)
+          })
+          this.columnChartInit(nameList, applyList, auditList)
+        }
+      })
+      this.instance.post(`/appfinancingdemand/staticFinancialDemandByMonth?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
+        if (res?.data) {
+          var monthList = [], applyList = [], auditList = []
+          res.data.map((item) => {
+            monthList.push(item.month)
+            applyList.push(item.applyNumber)
+            auditList.push(item.auditNumber)
+          })
+          this.lineChartInit(monthList, applyList, auditList)
+        }
+      })
       this.getList()
     },
     getList() {
       this.instance.post("/appfinancingdemand/list", null, {
-        params: {...this.page, ...this.search, status: 0}
+        params: {...this.page, ...this.search}
       }).then(res => {
         if (res?.data) {
           this.tableData = res.data?.records
@@ -159,7 +171,7 @@ export default {
         }
       })
     },
-    circleChartInit() {
+    circleChartInit(data) {
       this.circleChart = echarts.init(document.getElementById('circleChart'))
       if (!this.circleChart) {
         return this.circleChart.dispose();
@@ -187,8 +199,8 @@ export default {
               }
             },
             data: [
-              { value: 180},
-              { value: 20},
+              { value: data['企业融资']},
+              { value: data['个人融资']},
             ]
           }
         ]
@@ -197,7 +209,7 @@ export default {
 
       this.circleChart.setOption(option)
     },
-    lineChartInit() {
+    lineChartInit(monthList, applyList, auditList) {
       this.lineChart = echarts.init(document.getElementById('lineChart'))
       if (!this.lineChart) {
         return this.lineChart.dispose();
@@ -217,7 +229,7 @@ export default {
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['2020-07', '2020-08', '2020-09', '2020-10', '2020-11']
+          data: monthList
         },
         yAxis: {
           type: 'value'
@@ -226,7 +238,7 @@ export default {
           {
             name: '申请笔数',
             type: 'line',
-            data: [120, 132, 101, 134, 90, 230, 210],
+            data: applyList,
             itemStyle: { 
               normal: { 
                 lineStyle:{ 
@@ -239,7 +251,7 @@ export default {
             name: '放款笔数',
             type: 'line',
             stack: 'Total',
-            data: [220, 182, 191, 234, 290, 330, 310],
+            data: auditList,
             itemStyle: { 
               normal: { 
                 lineStyle:{ 
@@ -252,7 +264,7 @@ export default {
       };
       this.lineChart.setOption(option)
     },
-    columnChartInit() {
+    columnChartInit(nameList, applyList, auditList) {
       this.columnChart = echarts.init(document.getElementById('columnChart'))
       if (!this.columnChart) {
         return this.columnChart.dispose();
@@ -277,7 +289,7 @@ export default {
           axisTick: {
             show: false
           },
-          data: ['重庆银行秀山支行', '哈尔滨银行秀山支行', '重庆银行五岳广场支行', '重庆秀山北银村镇银行']
+          data: nameList
         }],
         yAxis: [{
           type: 'value'
@@ -286,22 +298,38 @@ export default {
           name: '申请数量',
           type: 'bar',
           barGap: 0,
-          data: [100, 80, 90, 100, 60],
+          data: applyList,
           barWidth: 10,
         },
         {
           name: '放款数量',
           type: 'bar',
           barGap: 0,
-          data: [100, 80, 90, 100, 60],
+          data: auditList,
           barWidth: 10,
         }]
       };
 
       this.columnChart.setOption(option)
+    },
+    changeTime() {
+      this.search.createTimeStart = ''
+      this.search.createTimeEnd = ''
+      if(this.stuTime.length) {
+        this.search.createTimeStart = this.stuTime[0]
+        this.search.createTimeEnd = this.stuTime[1]
+      }
+      this.page.current = 1
+      this.getList()
     }
   },
+  created() {
+    this.dict.load('financialOrganizationType', 'financialLoanApplyStatus')
+  },
   mounted() {
+    if(this.user.financeUser.id) {  //机构
+      this.search.organizationId = this.user.financeUser.organizationId
+    }
     this.getTableData()
   }
 }
@@ -451,5 +479,14 @@ export default {
     color: #222;
     padding-left: 16px;
   }
+  .status0{
+    color: #f82;
+  }
+  .status1{
+    color: #2EA222;
+  }
+  .status2{
+    color: #f46;
+  }
 }
 </style>