接口

src/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 import App from './App.vue'
+import './public/apis'
 import createStore from './store' // Vuex
 import createRouter from './router/router'
 import UsePlugin from 'runner/common/plugins'

src/pages/index/Left.vue

@@ -131,6 +131,15 @@ export default {
         }
     },
 
+    props: {
+        leftData: {
+            type: Object,
+            default () {
+                return {}
+            }
+        }
+    },
+
     data () {
         return {
             // 男女学员数量
@@ -405,15 +414,15 @@ export default {
 
     mounted () {
         this.init()
-        this.getAge()
-        this.getEdu()
-        this.getIndustry()
-        this.changeDegree('participate')
     },
 
     methods: {
         init () {
             this.dealGender()
+            this.getAge()
+            this.getEdu()
+            this.getIndustry()
+            this.changeDegree('participate')
         },
         // 求性别百分比
         dealGender () {

src/pages/index/index.vue

@@ -2,12 +2,14 @@
     <div class="index-page">
         <layout :layoutConf="layoutSize">
             <page-head title="张謇教育基地管理平台" slot="header" />
-            <!-- left -->
-            <left slot="left" />
-            <!-- center -->
-            <center slot="center" />
-            <!-- right -->
-            <right slot="right" />
+            <template v-if="fetchSuccess">
+                <!-- left -->
+                <left :leftData="leftData" slot="left" />
+                <!-- center -->
+                <center :centerData="centerData" slot="center" />
+                <!-- right -->
+                <right :rightData="rightData" slot="right" />
+            </template>
         </layout>
     </div>
 </template>
@@ -27,7 +29,15 @@ export default {
                 center: {
                     width: '100%'
                 }
-            }
+            },
+            // 接口获取是否成功标识
+            fetchSuccess: false,
+            // 左侧数据
+            leftData: {},
+            // 中间数据
+            centerData: {},
+            // 右侧数据
+            rightData: {}
         }
     },
 
@@ -35,6 +45,40 @@ export default {
         Left,
         Center,
         Right
+    },
+
+    mounted () {
+        this.init()
+    },
+
+    methods: {
+        async init () {
+            try {
+                const data = await this.fetch('managePlatform')
+                this.fetchSuccess = true
+                // 左侧数据
+                this.leftData = {
+                    gender: data.p1 || {}, // 男女比例
+                    age: data.p2 || {}, // 年龄结构
+                    edu: data.p3 || {}, // 学历情况
+                    party: data.p4 || {}, // 党派分布
+                    ethnic: data.p5 || {}, // 民族分布
+                    industry: data.p6 || {}, // 行业分布
+                    participate: data.p7 || {}, // 参与度
+                    active: data.p8 || {}, // 活跃度
+                    studentDemeanor: data.p9 || {}, // 学员风采
+                    starClass: data.p10 || {} // 明星班级
+                }
+                // 中间数据
+                this.centerData = {
+                }
+                // 右侧数据
+                this.rightData = {
+                }
+            } catch (err) {
+                console.log('managePlatform >', err)
+            }
+        }
     }
 }
 </script>

src/public/apis/index.js

@@ -4,12 +4,12 @@
 ;(function () {
     // 接口请求域名
     window.domain = {
-        stg: '', // 测试环境域名
-        prd: '' // 生产环境域名
+        stg: 'http://192.168.0.121:9000/', // 测试环境域名
+        prd: 'http://192.168.0.121:9000/' // 生产环境域名
     }
 
     // 接口请求路径
     window.apis = {
-
+        managePlatform: 'api/page1info'
     }
 })()