调整首页

.env.development

@@ -2,6 +2,6 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://172.23.62.181:8868'
+VUE_APP_BASE_API = 'http://172.24.31.87:9968'
 VUE_APP_ACCESS_TOKEN_PREFIX = 'Bearer '
 

src/api/dashboard.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getIndex(data) {
+  return request({
+    url: '/v1/dashboard/index',
+    method: 'get',
+    data
+  })
+}

src/lang/en.js

@@ -177,5 +177,29 @@ export default {
     tagsView: 'Open Tags-View',
     fixedHeader: 'Fixed Header',
     sidebarLogo: 'Sidebar Logo'
+  },
+  empLevels: {
+    // 级别配置
+    '67BE1C6C21F81B32E055736AECE8644D':  'No Rank',
+    'E121497617216708615': '1-Star Director',
+    '67BE5FE7857C216AE055736AECE8644D': '2-Star Director',
+    'E121497617216708616': '3-Star Director',
+    '67BE6A4D03C52288E055736AECE8644D': '4-Star Director',
+    '67BE6EA2070D22EBE055736AECE8644D': '5-Star Director',
+    '67BE742A336F2370E055736AECE8644D': '6-Star Director',
+    '67BE805032C22492E055736AECE8644D': '7-Star Director'
+  },
+  decLvs: {
+    // 等级配置
+    '67ABCB8C1F7D5519E055736AECE8644D': 'Elite',
+    '67ABCCE20A9F5553E055736AECE8644D': 'Pro',
+    '67ABCE0ECE705575E055736AECE8644D': 'VIP'
+  },
+  dashboard: {
+    highestDirector: 'Highest Director',
+    memberLevel: 'Member Level',
+    payCycle: 'Current Pay Cycle',
+    remainBv: 'Remain BV',
+    activeDeadline: 'Active Deadline Date'
   }
 }

src/lang/zh.js

@@ -177,5 +177,29 @@ export default {
     tagsView: '开启 Tags-View',
     fixedHeader: '固定 Header',
     sidebarLogo: '侧边栏 Logo'
+  },
+  empLevels: {
+    // 级别配置
+    '67BE1C6C21F81B32E055736AECE8644D':  '无级别',
+    'E121497617216708615': '1星经理',
+    '67BE5FE7857C216AE055736AECE8644D': '2星经理',
+    'E121497617216708616': '3星经理',
+    '67BE6A4D03C52288E055736AECE8644D': '4星经理',
+    '67BE6EA2070D22EBE055736AECE8644D': '5星经理',
+    '67BE742A336F2370E055736AECE8644D': '6星经理',
+    '67BE805032C22492E055736AECE8644D': '7星经理'
+  },
+  decLvs: {
+    // 等级配置
+    '67ABCB8C1F7D5519E055736AECE8644D': '银卡',
+    '67ABCCE20A9F5553E055736AECE8644D': '金卡',
+    '67ABCE0ECE705575E055736AECE8644D': '钻卡'
+  },
+  dashboard: {
+    highestDirector: '最高级别',
+    memberLevel: '会员级别',
+    payCycle: '当前业绩期',
+    remainBv: '剩余PV',
+    activeDeadline: '活跃日期截止'
   }
 }

src/store/modules/dashboard.js

@@ -0,0 +1,29 @@
+import { getIndex } from '@/api/dashboard'
+
+const state = {
+  
+}
+
+const mutations = {
+
+}
+
+const actions = {
+  getIndex({ commit }, data) {
+    return new Promise((resolve, reject) => {
+        getIndex({}).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/views/dashboard/admin/components/PanelGroup.vue

@@ -1,54 +1,77 @@
 <template>
   <el-row :gutter="40" class="panel-group">
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+      <div class="card-panel">
         <div class="card-panel-icon-wrapper icon-people">
           <svg-icon icon-class="peoples" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            New Visits
+            {{ $t('dashboard.highestDirector') }}
+          </div>
+          <div class="">
+            {{ $t(`empLevels.${heightEmpLv}`) }}
           </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
         </div>
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('messages')">
+      <div class="card-panel">
         <div class="card-panel-icon-wrapper icon-message">
           <svg-icon icon-class="message" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            Messages
+            {{ $t('dashboard.memberLevel') }}
+          </div>
+          <div class="">
+            {{ $t(`decLvs.${decLv}`) }}
           </div>
-          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
         </div>
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+      <div class="card-panel">
         <div class="card-panel-icon-wrapper icon-money">
           <svg-icon icon-class="money" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            Purchases
+            {{ $t('dashboard.payCycle') }}
+          </div>
+          <div class="">
+            {{ cycle }}
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            {{ $t('dashboard.remainBv') }}
+          </div>
+          <div class="">
+            {{ rmBv }}
           </div>
-          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
         </div>
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
+      <div class="card-panel">
         <div class="card-panel-icon-wrapper icon-shopping">
           <svg-icon icon-class="shopping" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            Shoppings
+            {{ $t('dashboard.activeDeadline') }}
+          </div>
+          <div class="">
+            {{ endTime }}
           </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
         </div>
       </div>
     </el-col>
@@ -59,13 +82,26 @@
 import CountTo from 'vue-count-to'
 
 export default {
+  props: {
+    heightEmpLv : String,
+    decLv: String,
+    cycle: String,
+    rmBv: String | Number,
+    endTime: String
+  },
+  data() {
+    return {
+      showHeightEmpLvId: ''
+    }
+  }, 
+  created() {
+    
+  },
   components: {
     CountTo
   },
   methods: {
-    handleSetLineChartData(type) {
-      this.$emit('handleSetLineChartData', type)
-    }
+    
   }
 }
 </script>
@@ -78,6 +114,11 @@ export default {
     margin-bottom: 32px;
   }
 
+  .card-panel-description .card-panel-text {
+    font-size: 13px;
+    line-height: 12px !important;
+  }
+
   .card-panel {
     height: 108px;
     cursor: pointer;
@@ -129,7 +170,7 @@ export default {
 
     .card-panel-icon-wrapper {
       float: left;
-      margin: 14px 0 0 14px;
+      // margin: 14px 0 0 14px;
       padding: 16px;
       transition: all 0.38s ease-out;
       border-radius: 6px;
@@ -137,7 +178,7 @@ export default {
 
     .card-panel-icon {
       float: left;
-      font-size: 48px;
+      font-size: 39px;
     }
 
     .card-panel-description {
@@ -161,7 +202,7 @@ export default {
 }
 
 @media (max-width:550px) {
-  .card-panel-description {
+  .card-panel-icon-wrapper{
     display: none;
   }
 
@@ -177,5 +218,13 @@ export default {
       float: none !important;
     }
   }
+  .card-panel-description {
+    text-align: center;
+    margin: 18px 0px 0px 0px !important;
+    float: none !important;
+  }
+  .card-panel-text {
+    font-size: 13px !important;
+  }
 }
 </style>

src/views/dashboard/admin/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner class="github-corner" />
+    <!-- <github-corner class="github-corner" /> -->
 
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+    <panel-group @handleSetLineChartData="handleSetLineChartData" :rmBv="rmBv" :endTime="endTime" :heightEmpLv='heightEmpLv' :decLv="decLv" :key="num" :cycle="cycle" />
 
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
       <line-chart :chart-data="lineChartData" />
-    </el-row>
+    </el-row> -->
 
-    <el-row :gutter="32">
+    <!-- <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
           <raddar-chart />
@@ -24,7 +24,7 @@
           <bar-chart />
         </div>
       </el-col>
-    </el-row>
+    </el-row> -->
 
     <el-row :gutter="8">
       <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
@@ -50,6 +50,7 @@ import BarChart from './components/BarChart'
 import TransactionTable from './components/TransactionTable'
 import TodoList from './components/TodoList'
 import BoxCard from './components/BoxCard'
+import i18n from '@/lang'
 
 const lineChartData = {
   newVisitis: {
@@ -85,9 +86,43 @@ export default {
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      lineChartData: lineChartData.newVisitis,
+      myEmpLv: {'ID': 0, 'LEVEL_NAME': null, 'ICON_TYPE': 0, 'ICON_NUM': 0},
+      slides: [],
+      news: [],
+      periodNum: '',
+      decLvName: '',
+      myRemainPv: '',
+      activeEnd: '',
+      baseEmpLevels: [],
+      heightEmpLv: '', // 最高级别
+      decLv:'', // 当前等级
+      cycle: '',//当前业绩期
+      rmBv: '',
+      endTime: '',
+      num: 0
     }
   },
+  created(){
+    this.$store.dispatch('dashboard/getIndex', {})
+    .then(response => {
+      this.num++
+      let ret = response.data
+      this.slides = ret.slides
+      this.news = ret.news
+      this.periodNum = ret.periodNum
+      this.decLvName = ret.decLvName
+      this.myRemainPv = ret.myRemainPv
+      this.activeEnd = ret.activeEnd
+      this.decLv = ret.decLv
+      this.heightEmpLv = ret.empLv
+      this.cycle = ret.periodNum
+      this.rmBv = ret.myRemainPv
+      this.endTime = ret.activeEnd
+    })
+    .catch((error) => {
+    })
+  },
   methods: {
     handleSetLineChartData(type) {
       this.lineChartData = lineChartData[type]