统计地区筛选条件

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

@@ -1,9 +1,12 @@
 <template>
   <section class="needsStatistics">
     <ai-search-bar>
-      <template #left>   
+      <template #left>
+        <ai-area-get :instance="instance" v-model="search.areaId" @change="page.current=1,getTableData()"
+                     :root="user.info.areaId" :clearable="false"/>
         <ai-select v-model="search.organizationId" placeholder="金融机构" clearable :prop="{label:'organizationName'}"
-          :action='"/appfinancialorganization/list?organizationId="+userOrgId' @change="page.current=1,getTableData()" :instance="instance"/>    
+                   :action='"/appfinancialorganization/list?organizationId="+userOrgId'
+                   @change="page.current=1,getTableData()" :instance="instance"/>
       </template>
     </ai-search-bar>
     <div class="col-row">
@@ -17,50 +20,55 @@
         <div class="title">融资需求发布主体占比</div>
         <div class="cir-flex">
           <div class="total-num">
-            <h2>{{applyInfo['总数'] || 0}}</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>{{applyInfo['企业融资'] || 0}}</div>
+              <div>{{ applyInfo['企业融资'] || 0 }}</div>
             </div>
             <div class="info">
               <p><span class="tips-bg" style="background: #FFB865;"></span>个人融资</p>
-              <div>{{applyInfo['个人融资'] || 0}}</div>
+              <div>{{ applyInfo['个人融资'] || 0 }}</div>
             </div>
           </div>
         </div>
       </div>
       <div class="line-chart chart-content">
         <div class="title">交易趋势</div>
-        <p class="header-title"><span class="tips-bg" style="background: #2891FF;"></span>申请笔数<span class="tips-bg" style="background: #26D52B;"></span>放款笔数</p>
+        <p class="header-title"><span class="tips-bg" style="background: #2891FF;"></span>申请笔数<span class="tips-bg"
+                                                                                                    style="background: #26D52B;"></span>放款笔数
+        </p>
         <div id="lineChart"></div>
       </div>
     </div>
     <div class="chart-column chart-content">
       <div class="title">机构融资对接量TOP10</div>
-      <p class="header-title"><span class="tips-bg" style="background: #2891FF;"></span>申请笔数<span class="tips-bg" style="background: #26D52B;"></span>放款笔数</p>
+      <p class="header-title"><span class="tips-bg" style="background: #2891FF;"></span>申请笔数<span class="tips-bg"
+                                                                                                  style="background: #26D52B;"></span>放款笔数
+      </p>
       <div id="columnChart"></div>
     </div>
     <div class="table-content chart-content">
       <div class="title">交易记录</div>
       <ai-search-bar style="padding:20px 20px 0 20px;">
         <template #left>
-          <ai-select v-model="search.status" placeholder="状态" clearable :selectList="$dict.getDict('financingDemandStatus')" @change="getList()"></ai-select>   
-         <ai-search label="申请时间">
+          <ai-select v-model="search.status" placeholder="状态" clearable
+                     :selectList="$dict.getDict('financingDemandStatus')" @change="getList()"></ai-select>
+          <ai-search label="申请时间">
             <el-date-picker size="small" placeholder="请选择" type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              style="width: 258px;"
-              value-format="yyyy-MM-dd"
-              v-model="stuTime"
-              @change="changeTime"/>
-          </ai-search>     
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            style="width: 258px;"
+                            value-format="yyyy-MM-dd"
+                            v-model="stuTime"
+                            @change="changeTime"/>
+          </ai-search>
         </template>
         <template #right>
-          <el-input size="small" placeholder="请输入居民名称或真实姓名" v-model="search.name" clearable @change="getList()"/> 
+          <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>
@@ -71,7 +79,7 @@
                 @getList="getList" :col-configs="colConfigs" :dict="dict" style="padding:0 20px 20px 20px;">
         <el-table-column slot="options" label="状态" fixed="right" width="100" align="center">
           <template slot-scope="{row}">
-            <span :class="`status${row.status}`">{{$dict.getLabel('financialLoanApplyStatus', row.status)}}</span>
+            <span :class="`status${row.status}`">{{ $dict.getLabel('financialLoanApplyStatus', row.status) }}</span>
           </template>
         </el-table-column>
       </ai-table>
@@ -89,14 +97,13 @@ export default {
     instance: Function,
     dict: Object,
     permissions: Function,
-    areaId: String
   },
   computed: {
     ...mapState(['user'])
   },
   data() {
     return {
-      search: {organizationId: '', name: '', createTimeStart: '', createTimeEnd: '', status: ''},
+      search: {organizationId: '', name: '', createTimeStart: '', createTimeEnd: '', status: '', areaId: ""},
       page: {current: 1, total: 10},
       circleChart: null,
       lineChart: null,
@@ -126,21 +133,21 @@ export default {
   },
   methods: {
     getTableData() {
-      this.instance.post(`/appfinancingdemand/staticFinancialDemandByOrganization?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
+      this.instance.post(`/appfinancingdemand/staticFinancialDemandByOrganization?areaId=${this.search.areaId}&organizationId=${this.search.organizationId}`).then(res => {
         if (res?.data) {
-          if(res.data['对接成功率']) {
-            res.data['对接成功率'] = Number( res.data['对接成功率'] * 100) + '%'
+          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 => {
+      this.instance.post(`/appfinancingdemand/staticFinancialDemandByApplyType?areaId=${this.search.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 => {
+      this.instance.post(`/appfinancingdemand/staticFinancialDemandByHot?areaId=${this.search.areaId}&organizationId=${this.search.organizationId}`).then(res => {
         if (res?.data) {
           var nameList = [], applyList = [], auditList = []
           res.data.map((item) => {
@@ -151,7 +158,7 @@ export default {
           this.columnChartInit(nameList, applyList, auditList)
         }
       })
-      this.instance.post(`/appfinancingdemand/staticFinancialDemandByMonth?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
+      this.instance.post(`/appfinancingdemand/staticFinancialDemandByMonth?areaId=${this.search.areaId}&organizationId=${this.search.organizationId}`).then(res => {
         if (res?.data) {
           var monthList = [], applyList = [], auditList = []
           res.data.map((item) => {
@@ -202,8 +209,8 @@ export default {
               }
             },
             data: [
-              { value: data['企业融资']},
-              { value: data['个人融资']},
+              {value: data['企业融资']},
+              {value: data['个人融资']},
             ]
           }
         ]
@@ -242,10 +249,10 @@ export default {
             name: '申请笔数',
             type: 'line',
             data: applyList,
-            itemStyle: { 
-              normal: { 
-                lineStyle:{ 
-                  color:'#2891FF'
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#2891FF'
                 }
               }
             }
@@ -255,10 +262,10 @@ export default {
             type: 'line',
             stack: 'Total',
             data: auditList,
-            itemStyle: { 
-              normal: { 
-                lineStyle:{ 
-                  color:'#26D52B'
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#26D52B'
                 }
               }
             }
@@ -304,13 +311,13 @@ export default {
           data: applyList,
           barWidth: 10,
         },
-        {
-          name: '放款数量',
-          type: 'bar',
-          barGap: 0,
-          data: auditList,
-          barWidth: 10,
-        }]
+          {
+            name: '放款数量',
+            type: 'bar',
+            barGap: 0,
+            data: auditList,
+            barWidth: 10,
+          }]
       };
 
       this.columnChart.setOption(option)
@@ -318,7 +325,7 @@ export default {
     changeTime() {
       this.search.createTimeStart = ''
       this.search.createTimeEnd = ''
-      if(this.stuTime.length) {
+      if (this.stuTime.length) {
         this.search.createTimeStart = this.stuTime[0]
         this.search.createTimeEnd = this.stuTime[1]
       }
@@ -327,10 +334,11 @@ export default {
     }
   },
   created() {
+    this.search.areaId = this.user.info.areaId
     this.dict.load('financialOrganizationType', 'financialLoanApplyStatus', 'financingDemandStatus')
   },
   mounted() {
-    if(this.user.financeUser && this.user.financeUser.id) {  //机构
+    if (this.user.financeUser && this.user.financeUser.id) {  //机构
       this.search.organizationId = this.user.financeUser.organizationId
       this.userOrgId = this.user.financeUser.organizationId
     }
@@ -340,18 +348,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  ::v-deep .ai-list .ai-list__content--right-wrapper{
-    background: none!important;
-    box-shadow: none!important;
-  }
+::v-deep .ai-list .ai-list__content--right-wrapper {
+  background: none !important;
+  box-shadow: none !important;
+}
+
 .needsStatistics {
   padding: 20px;
   box-sizing: border-box;
   height: 100%;
   overflow-y: scroll;
-  .col-row{
+
+  .AiAreaGet {
+    width: 300px;
+  }
+
+  .col-row {
     overflow: hidden;
-    .item{
+
+    .item {
       display: inline-block;
       padding: 16px 24px;
       width: calc(25% - 15px);
@@ -361,7 +376,8 @@ export default {
       box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
       border-radius: 4px;
       box-sizing: border-box;
-      p{
+
+      p {
         font-size: 16px;
         font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
         font-weight: bold;
@@ -369,7 +385,8 @@ export default {
         line-height: 24px;
         margin-bottom: 8px;
       }
-      h2{
+
+      h2 {
         font-size: 24px;
         font-family: Arial-BoldMT, Arial;
         font-weight: normal;
@@ -377,51 +394,61 @@ export default {
         line-height: 32px;
       }
     }
+
     .item:nth-of-type(4n) {
       margin-right: 0;
     }
   }
-  .chart-flex{
+
+  .chart-flex {
     display: flex;
     height: 280px;
     margin-bottom: 20px;
-    .circle-chart{
+
+    .circle-chart {
       width: 440px;
       margin-right: 20px;
       height: 100%;
-      .cir-flex{
+
+      .cir-flex {
         height: calc(100% - 56px);
         display: flex;
         padding: 20px;
         box-sizing: border-box;
         position: relative;
-        .total-num{
+
+        .total-num {
           position: absolute;
           top: 90px;
           left: 70px;
           width: 100px;
           text-align: center;
         }
-        #circleChart{
+
+        #circleChart {
           width: calc(100% - 150px);
           height: 100%;
         }
-        .cir-text{
+
+        .cir-text {
           width: 150px;
           margin: 56px 0 0 40px;
-          .info{
+
+          .info {
             width: 100%;
             display: flex;
             justify-content: space-between;
             margin-bottom: 8px;
-            p{
+
+            p {
               width: 100px;
               font-size: 14px;
               font-family: MicrosoftYaHei;
               color: #666;
               line-height: 22px;
             }
-            div{
+
+            div {
               width: 50px;
               text-align: right;
             }
@@ -429,37 +456,45 @@ export default {
         }
       }
     }
-    .line-chart{
+
+    .line-chart {
       height: 100%;
       width: calc(100% - 460px);
-      #lineChart{
+
+      #lineChart {
         height: calc(100% - 100px);
         padding-right: 20px;
         box-sizing: border-box;
       }
     }
   }
-  .chart-column{
+
+  .chart-column {
     margin-bottom: 20px;
     height: 320px;
-    #columnChart{
+
+    #columnChart {
       width: 100%;
       height: 220px;
     }
   }
-  .table-content{
+
+  .table-content {
     width: 100%;
-    .title{
+
+    .title {
       border-bottom: 1px solid #ddd;
     }
   }
-  .tips-bg{
+
+  .tips-bg {
     display: inline-block;
     width: 8px;
     height: 8px;
     margin-right: 4px;
   }
-  .header-title{
+
+  .header-title {
     width: 100%;
     text-align: center;
     height: 20px;
@@ -467,29 +502,35 @@ export default {
     font-family: MicrosoftYaHei;
     color: #333;
     line-height: 20px;
+
     .tips-bg:nth-of-type(2n) {
       margin-left: 24px;
     }
   }
-  .chart-content{
+
+  .chart-content {
     background: #FFF;
     box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
     border-radius: 4px;
   }
-  .title{
+
+  .title {
     line-height: 56px;
     font-size: 16px;
     font-family: MicrosoftYaHeiSemibold;
     color: #222;
     padding-left: 16px;
   }
-  .status0{
+
+  .status0 {
     color: #f82;
   }
-  .status1{
+
+  .status1 {
     color: #2EA222;
   }
-  .status2{
+
+  .status2 {
     color: #f46;
   }
 }