统计地区筛选条件

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

@@ -2,8 +2,11 @@
   <section class="needsStatistics">
     <ai-search-bar>
       <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">
@@ -35,20 +38,25 @@
       </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-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="开始日期"
@@ -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,7 +133,7 @@ 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) + '%'
@@ -134,13 +141,13 @@ export default {
           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) => {
@@ -327,6 +334,7 @@ export default {
     }
   },
   created() {
+    this.search.areaId = this.user.info.areaId
     this.dict.load('financialOrganizationType', 'financialLoanApplyStatus', 'financingDemandStatus')
   },
   mounted() {
@@ -344,13 +352,20 @@ export default {
   background: none !important;
   box-shadow: none !important;
 }
+
 .needsStatistics {
   padding: 20px;
   box-sizing: border-box;
   height: 100%;
   overflow-y: scroll;
+
+  .AiAreaGet {
+    width: 300px;
+  }
+
   .col-row {
     overflow: hidden;
+
     .item {
       display: inline-block;
       padding: 16px 24px;
@@ -361,6 +376,7 @@ export default {
       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;
@@ -369,6 +385,7 @@ export default {
         line-height: 24px;
         margin-bottom: 8px;
       }
+
       h2 {
         font-size: 24px;
         font-family: Arial-BoldMT, Arial;
@@ -377,24 +394,29 @@ export default {
         line-height: 32px;
       }
     }
+
     .item:nth-of-type(4n) {
       margin-right: 0;
     }
   }
+
   .chart-flex {
     display: flex;
     height: 280px;
     margin-bottom: 20px;
+
     .circle-chart {
       width: 440px;
       margin-right: 20px;
       height: 100%;
+
       .cir-flex {
         height: calc(100% - 56px);
         display: flex;
         padding: 20px;
         box-sizing: border-box;
         position: relative;
+
         .total-num {
           position: absolute;
           top: 90px;
@@ -402,18 +424,22 @@ export default {
           width: 100px;
           text-align: center;
         }
+
         #circleChart {
           width: calc(100% - 150px);
           height: 100%;
         }
+
         .cir-text {
           width: 150px;
           margin: 56px 0 0 40px;
+
           .info {
             width: 100%;
             display: flex;
             justify-content: space-between;
             margin-bottom: 8px;
+
             p {
               width: 100px;
               font-size: 14px;
@@ -421,6 +447,7 @@ export default {
               color: #666;
               line-height: 22px;
             }
+
             div {
               width: 50px;
               text-align: right;
@@ -429,9 +456,11 @@ export default {
         }
       }
     }
+
     .line-chart {
       height: 100%;
       width: calc(100% - 460px);
+
       #lineChart {
         height: calc(100% - 100px);
         padding-right: 20px;
@@ -439,26 +468,32 @@ export default {
       }
     }
   }
+
   .chart-column {
     margin-bottom: 20px;
     height: 320px;
+
     #columnChart {
       width: 100%;
       height: 220px;
     }
   }
+
   .table-content {
     width: 100%;
+
     .title {
       border-bottom: 1px solid #ddd;
     }
   }
+
   .tips-bg {
     display: inline-block;
     width: 8px;
     height: 8px;
     margin-right: 4px;
   }
+
   .header-title {
     width: 100%;
     text-align: center;
@@ -467,15 +502,18 @@ export default {
     font-family: MicrosoftYaHei;
     color: #333;
     line-height: 20px;
+
     .tips-bg:nth-of-type(2n) {
       margin-left: 24px;
     }
   }
+
   .chart-content {
     background: #FFF;
     box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
     border-radius: 4px;
   }
+
   .title {
     line-height: 56px;
     font-size: 16px;
@@ -483,12 +521,15 @@ export default {
     color: #222;
     padding-left: 16px;
   }
+
   .status0 {
     color: #f82;
   }
+
   .status1 {
     color: #2EA222;
   }
+
   .status2 {
     color: #f46;
   }