首页平台数据修改

front-vue/src/layout/index.vue

@@ -15,8 +15,24 @@
         <img class="zap-home-header__icon" src="../assets/images/nav_icon1.png" alt="">
         <img class="zap-home-header__icon" src="../assets/images/nav_icon2.png" alt=""> -->
         <!-- <user /> -->
-        <img class="zap-avatar" :src="avatar" alt="">
-        <P class="zap-username">{{name}}</P>
+        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+          <div class="zap-user-wrapper">
+              <img class="zap-avatar" :src="avatar" alt="">
+              <P class="zap-username">{{name}}</P>
+              <i class="el-icon-caret-bottom" />
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <router-link to="/user/profile">
+              <el-dropdown-item>个人中心</el-dropdown-item>
+            </router-link>
+            <!-- <el-dropdown-item @click.native="setting = true">
+              <span>布局设置</span>
+            </el-dropdown-item> -->
+            <el-dropdown-item divided @click.native="logout">
+              <span>退出登录</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
       </div>
     </div>
     <!-- </el-header> -->
@@ -91,6 +107,17 @@ export default {
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    },
+    async logout() {
+        this.$confirm('确定注销并退出系统吗？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        }).then(() => {
+            this.$store.dispatch('LogOut').then(() => {
+            location.href = '/home';
+            })
+        })
     }
   }
 }
@@ -229,8 +256,17 @@ export default {
   }
   .zap-username{
     margin-left: 10px;
-    margin-right: 24px;
     font-size: 14px;
     color: #ffffff;
   }
+  .zap-user-wrapper{
+    display: flex;
+    align-items: center;
+    padding-right: 24px;
+    cursor: pointer;
+  }
+  .el-icon-caret-bottom{
+    margin-left: 4px;
+    color: #ffffff;
+  }
 </style>

front-vue/src/views/home.vue

@@ -1,87 +1,107 @@
 <template >
-    <div id="">
+    <div id="" class="zap-home__main">
         <!-- 平台 -->
         <div v-if="company.scyType == '00'">
-            <el-card class="box-card" style="width:30.2%;margin:0.6%;float:left;">
-                <div slot="header" class="clearfix">
-                    <span style="color: #666ee8; font-weight: bold;">入驻企业总数</span>
-                </div>
-                <div class="text item" style="height:100px">
-                    <span style="color: #666ee8; font-weight: bold;">{{companyNum}}</span>
-                </div>
-            </el-card>
-            <el-card class="box-card" style="width:30.2%;margin:0.6%;float:left;">
-                <div slot="header" class="clearfix">
-                    <span style="color: #666ee8; font-weight: bold;">已融资/供应商入驻数量</span>
-                </div>
-                <div class="text item" style="height:100px">
-                    <span style="color: #666ee8; font-weight: bold;">{{financeSupplierNum + '/' + supplierNum}}</span>
-                </div>
-            </el-card>
-            <el-card class="box-card" style="width:30.2%;margin:0.6%;float:left;">
-                <div slot="header" class="clearfix">
-                    <span style="color: #666ee8; font-weight: bold;">入驻核心企业数</span>
-                </div>
-                <div class="text item" style="height:100px">
-                    <span style="color: #666ee8; font-weight: bold;">{{coreNum}}</span>
-                </div>
-            </el-card>
-            <el-card class="box-card" style="width:30.2%;margin:0.6%;float:left;">
-                <div slot="header" class="clearfix">
-                    <span style="color: #666ee8; font-weight: bold;">总融资金额</span>
-                </div>
-                <div class="text item" style="height:100px">
-                    <span style="color: #666ee8; font-weight: bold;">{{handleInput(getFinancedNum())}}</span>
-                </div>
-            </el-card>
-            <el-card class="box-card" style="width:30.2%;margin:0.6%;float:left;">
-                <div slot="header" class="clearfix">
-                    <span style="color: #666ee8; font-weight: bold;">融资中金额</span>
-                </div>
-                <div class="text item" style="height:100px">
-                    <span style="color: #666ee8; font-weight: bold;">{{handleInput(availableBalance)}}</span>
-                </div>
-            </el-card>
-            <el-card class="box-card" style="width:30.2%;margin:0.6%;float:left;">
-                <div slot="header" class="clearfix">
-                    <span style="color: #666ee8; font-weight: bold;">已放款金额</span>
-                </div>
-                <div class="text item" style="height:100px">
-                    <span style="color: #666ee8; font-weight: bold;">{{handleInput(loanBalance)}}</span>
-                </div>
-            </el-card>
-            <el-card class="box-card" style="width:30.2%;margin:0.6%;float:left;">
-                <div slot="header" class="clearfix">
-                    <span style="color: #666ee8; font-weight: bold;">发起融资业务数</span>
-                </div>
-                <div class="text item" style="height:100px">
-                    <span style="color: #666ee8; font-weight: bold;">{{financeNum}}</span>
-                </div>
-            </el-card>
-            <el-card class="box-card" style="width:30.2%;margin:0.6%;float:left;">
-                <div slot="header" class="clearfix">
-                    <span style="color: #666ee8; font-weight: bold;">核心企业总授信额度</span>
-                </div>
-                <div class="text item" style="height:100px">
-                    <span style="color: #666ee8; font-weight: bold;">{{handleInput(creditLineAll)}}</span>
-                </div>
-            </el-card>
-            <el-card class="box-card" style="width:30.2%;margin:0.6%;float:left;">
-                <div slot="header" class="clearfix">
-                    <span style="color: #666ee8; font-weight: bold;">剩余可用授信</span>
-                </div>
-                <div class="text item" style="height:100px">
-                    <span style="color: #666ee8; font-weight: bold;">{{handleInput(getsubNum())}}</span>
-                </div>
-            </el-card>
-            <el-card class="box-card" style="width:93%;margin:0.6%;float:left;">
-                <div slot="header" class="clearfix">
-                    <span style="color: #666ee8; font-weight: bold;">平台资金统计</span>
-                </div>
-                <div class="text item" style="height:650px">
-                    <echart-pie :series-data="financeAmountList" :extra-option="extraOption"/>
-                </div>
-            </el-card>
+            <div class="zap-home__title">平台数据统计</div>
+            <el-row :gutter="20">
+                <!-- 第一行 -->
+                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                    <div class="zap-card">
+                        <div class="zap-card__title">入驻企业总数</div>
+                        <div class="zap-card__wrap zap-card__blue">
+                            <span class="zap-card__num">{{companyNum}}</span>
+                            <span class="zap-card__unit">个</span>
+                        </div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                    <div class="zap-card">
+                        <div class="zap-card__title">已融资/供应商入驻数量</div>
+                        <div class="zap-card__wrap zap-card__gold">
+                            <span class="zap-card__num">{{financeSupplierNum}}</span>
+                            <span class="zap-card__unit">万</span>
+                            <span class="zap-card__slash">/</span>
+                            <span class="zap-card__num">{{supplierNum}}</span>
+                            <span class="zap-card__unit">个</span>
+                        </div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                    <div class="zap-card">
+                        <div class="zap-card__title">入驻核心企业数</div>
+                        <div class="zap-card__wrap zap-card__pink">
+                            <span class="zap-card__num">{{coreNum}}</span>
+                            <span class="zap-card__unit">个</span>
+                        </div>
+                    </div>
+                </el-col>
+                <!-- 第二行 -->
+                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                    <div class="zap-card">
+                        <div class="zap-card__title">总融资金额</div>
+                        <div class="zap-card__wrap zap-card__blue">
+                            <span class="zap-card__num">{{handleInput(getFinancedNum())}}</span>
+                            <span class="zap-card__unit">万</span>
+                        </div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                    <div class="zap-card">
+                        <div class="zap-card__title">融资中金额</div>
+                        <div class="zap-card__wrap zap-card__gold">
+                            <span class="zap-card__num">{{handleInput(availableBalance)}}</span>
+                            <span class="zap-card__unit">万</span>
+                        </div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                    <div class="zap-card">
+                        <div class="zap-card__title">已放款金额</div>
+                        <div class="zap-card__wrap zap-card__pink">
+                            <span class="zap-card__num">{{handleInput(loanBalance)}}</span>
+                            <span class="zap-card__unit">个</span>
+                        </div>
+                    </div>
+                </el-col>
+                <!-- 第三行 -->
+                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                    <div class="zap-card">
+                        <div class="zap-card__title">发起融资业务数</div>
+                        <div class="zap-card__wrap zap-card__blue">
+                            <span class="zap-card__num">{{financeNum}}</span>
+                            <span class="zap-card__unit">笔</span>
+                        </div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                    <div class="zap-card">
+                        <div class="zap-card__title">核心企业总授信额度</div>
+                        <div class="zap-card__wrap zap-card__gold">
+                            <span class="zap-card__num">{{handleInput(creditLineAll)}}</span>
+                            <span class="zap-card__unit">万</span>
+                        </div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                    <div class="zap-card">
+                        <div class="zap-card__title">剩余可用授信</div>
+                        <div class="zap-card__wrap zap-card__pink">
+                            <span class="zap-card__num">{{handleInput(getsubNum())}}</span>
+                            <span class="zap-card__unit">万</span>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+           
+           <!-- 平台资金统计扇形图 -->
+            <el-row class="zap-home-chart">
+                <el-col>
+                    <div class="zap-home-chart__title">平台资金统计</div>
+                    <div id="echartPie" style="width: 100%;height: 490px"></div>
+                    <!-- <echart-pie :series-data="financeAmountList" :extra-option="extraOption"/> -->
+                </el-col>
+            </el-row>
+                
             <el-card class="box-card" style="width:93%;margin:0.6%;float:left;">
                 <div slot="header" class="clearfix">
                     <span style="color: #666ee8; font-weight: bold;">平台用户统计</span>
@@ -425,6 +445,7 @@
     </div>
 </template>
 <script>
+import * as echarts from 'echarts';
 import { getCreditLineAll, getAvailableBalance, getEffectBalance, getLoanBalance, getFinanceAmount, getFinanceAmountAll, getExpiredBalance, getCoreCreditLine, getCreditLineList, getCreditLineNumList, financeRecordMonth } from '@/api/service/report/credit'
 import { getCompanyNum, getFinanceSupplier, getFinanceNum, getCompanyReport } from '@/api/service/report/company'
 import { getOwnCompany } from "@/api/common/company";
@@ -571,6 +592,39 @@ export default {
     mounted() {
     },
     methods: {
+        initChartPie () {
+            console.log(this.financeAmountList, 9999)
+            let chartPie = document.getElementById('echartPie');
+            let myChart = echarts.init(chartPie);
+            let option = {
+                tooltip: {
+                    trigger: 'item'
+                },
+                color: ["#f9b51d", "#30d894", "#ff6d8a", "#4280f2"],
+                series: [
+                    {
+                        name: '访问来源',
+                        type: 'pie',
+                        radius: '50%',
+                        data: [
+                            {value: 1048, name: '搜索引擎'},
+                            {value: 735, name: '直接访问'},
+                            {value: 580, name: '邮件营销'},
+                            {value: 484, name: '联盟广告'},
+                            {value: 300, name: '视频广告'}
+                        ], // this.financeAmountList
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ]
+            };
+            myChart.setOption(option);
+        },
         //查询各角色首页模块
         selectHome(){
             //查询企业类型
@@ -785,6 +839,7 @@ export default {
         getFinanceAmount(){
             getFinanceAmount().then(response => {
                 this.financeAmountList = response.data;
+                this.initChartPie()
             })
         },
         //平台用户统计 -- 柱状图
@@ -884,4 +939,67 @@ export default {
 .labelData .el-collapse-item__header{
     height: 200px;
 }
+.app-main{
+    padding: 0 25px 30px 20px;
+    background-color: #f4f5f6;
+}
+</style>
+<style lang="scss" scroped>
+.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{
+    padding-top: 30px;
+    padding-bottom: 30px;
+    font-size: 18px;
+    color: #333333;
+}
+.zap-home-chart{
+    background-color: #ffffff;
+}
+.zap-home-chart__title{
+    padding: 30px;
+    font-size: 18px;
+    color: #333333;
+}
 </style>

front-vue/src/views/login.vue

@@ -28,6 +28,14 @@
                                             <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                                         </el-input>
                                     </el-form-item>
+                                     <el-form-item prop="code">
+                                        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 53%;" @keyup.enter.native="handleLogin">
+                                            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+                                        </el-input>
+                                        <div class="login-code">
+                                            <img :src="codeUrl" @click="getCode" class="login-code-img" />
+                                        </div>
+                                    </el-form-item>
                                     <el-form-item style="width:100%;margin-bottom: 0;">
                                         <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
                                      </el-form-item>
@@ -253,18 +261,6 @@ export default {
                       this.loading = false;
                       return;
                     }
-
-                     if (this.codeDialogVisible) {
-                        if (!this.loginForm.code) {
-                            this.loading = false
-                            return this.msgError("请输入验证码!");
-                        } else {
-                            this.codeDialogVisible = false
-                        }
-                    } else {
-                        this.loading = false;
-                        return this.codeDialogVisible = true
-                    }
                   // 短信验证码登陆
                   } else{
                     this.loginForm.type = "1";
@@ -305,12 +301,12 @@ export default {
                             // 认证通过
                             if (data.loginUser.sysUser.companyStatus == "00") {
                                 console.log(this.redirect,"AAAAA")
-                              if(this.redirect == '/home'){
-                                  this.$router.push({ path: "/homePage"+this.redirect || "/" });
-                              }else{
-                                  this.$router.push({ path: this.redirect || "/" });
-                              }
-                            //   this.$router.push({ path: this.redirect || "/" });
+                            //   if(this.redirect == '/home'){
+                            //       this.$router.push({ path: "/homePage"+this.redirect || "/" });
+                            //   }else{
+                            //       this.$router.push({ path: this.redirect || "/" });
+                            //   }
+                              this.$router.push({ path: this.redirect || "/" });
                             // 认证未通过
                             } else {
                               console.log("未认证通过!")
@@ -341,6 +337,18 @@ export default {
           })
       },
       changeLoginType(e){
+
+          if (this.activeName === 'login_password') {
+              this.loginRules.code = [
+                    {
+                        required: true,
+                        trigger: "change",
+                        message: "验证码不能为空",
+                    },
+                ]
+          } else {
+              delete this.loginRules.code
+          }
         this.getCode();
       },
       sendMessage(){
@@ -406,7 +414,7 @@ export default {
 
         });
       }
-    },
+    }
 };
 </script>
 <style rel="stylesheet/scss" lang="scss">
@@ -493,7 +501,7 @@ export default {
     // 内部供应链
     .zap-tabs{
         width: 410px;
-        height: 480px;
+        min-height: 480px;
         padding: 10px 48px 46px;
         box-sizing: border-box;
         background-image: linear-gradient(