首页再造

1

src/views/main/baseinfo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <save-form inline :model="search" @submit="FetchDetail" @reset="reset" saveKey="/main/main/baseInfo">
-      <el-form-item prop="year">
+      <!-- <el-form-item prop="year">
         <el-date-picker
           v-model="search.dates"
           type="daterange"
@@ -12,7 +12,7 @@
           end-placeholder="结束日期"
           :picker-options="pickerOptions">
         </el-date-picker>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item prop="organId">
         <el-select
           clearable
@@ -29,11 +29,21 @@
       <el-button native-type="submit" type="primary">搜索</el-button>
       <el-button native-type="reset" type="danger">重置</el-button>
     </save-form>
-    <el-alert type="info" :closable="false" style="margin-bottom: 20px;">
+    <!-- <el-alert type="info" :closable="false" style="margin-bottom: 20px;">
       每日0点更新前一日数据
-    </el-alert>
+    </el-alert> -->
+    <!-- 这里显示选项卡 -->
     <empty desc="暂无统计数据" v-if="isEmpty"/>
     <el-row v-else class="rows" :gutter="20">
+      <el-col :xs="24" :sm="24" :md="9" :xl="9">
+        <studentbaseinfo :data="dataInfo" />
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="6" :xl="6">
+        <studentbaseinfo :data="dataInfo" />
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="9" :xl="9">
+        <studentbaseinfo :data="dataInfo" />
+      </el-col>
       <el-col :xs="24" :sm="24" :md="12">
         <student :data="dataInfo"/>
       </el-col>
@@ -63,9 +73,11 @@ import management from './management'
 import hrdata from './hr'
 import student from './student'
 import curriculum from './curriculum'
+import studentbaseinfo from './studentBaseinfo'
 import { getTimes } from '@/utils'
 import { descs } from '../constant'
 
+
 const getInitDate = () => {
   const end = new Date();
   const start = new Date();
@@ -81,6 +93,7 @@ export default {
     hrdata,
     student,
     curriculum,
+    studentbaseinfo
   },
   data () {
     return {

src/views/main/baseinfo/student.vue

@@ -99,6 +99,7 @@ export default {
           months[key][item.title] = row.percent
         }
       }
+      console.log( Object.values(months))
       return {
         columns: ['日期', ...values.map(item => item.title)],
         rows: Object.values(months)

src/views/main/baseinfo/studentBaseinfo.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span>学员数据</span>
+      </div>
+      <statistic :col="5" class="statistic" :cols="0">
+        <statistic-item
+          v-for="(item, key) in items"
+          :key="key"
+          :class="{ active: active === key }"
+          @click="active = key"
+        >
+          <span>
+            {{ item.title }}
+            <el-tooltip
+              v-if="item.desc"
+              :content="item.desc"
+              :open-delay="0.3"
+              placement="top"
+            >
+              <i
+                style="margin-left: 5px; cursor: pointer"
+                class="el-icon-warning-outline"
+              />
+            </el-tooltip>
+          </span>
+          <span>
+            <count-to :endVal="item.percent" />
+          </span>
+        </statistic-item>
+        <statistic-item>
+          <span>
+            {{ data["STUDENT_CONVERSION"].title }}
+            <el-tooltip
+              v-if="data['STUDENT_CONVERSION'].desc"
+              :content="data['STUDENT_CONVERSION'].desc"
+              :open-delay="0.3"
+              placement="top"
+            >
+              <i
+                style="margin-left: 5px; cursor: pointer"
+                class="el-icon-warning-outline"
+              />
+            </el-tooltip>
+          </span>
+          <span>
+            <count-to :endVal="data['STUDENT_CONVERSION'].percent" />%
+          </span>
+        </statistic-item>
+      </statistic>
+    </el-card>
+  </div>
+</template>
+<script>
+import countTo from "vue-count-to";
+export default {
+  props: ["data"],
+  components: {
+    "count-to": countTo,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    dataEmpty() {
+      return !this.chartData.rows.length;
+    },
+    items() {
+      return {
+        MUSIC_GROUP_STUDENT: this.data['MUSIC_GROUP_STUDENT'] || {},
+        OTHER_STUDENT: this.data['OTHER_STUDENT'] || {},
+        NEWLY_STUDENT_NUM: this.data['NEWLY_STUDENT_NUM'] || {},
+        QUIT_MUSIC_GROUP_STUDENT_NUM: this.data['QUIT_MUSIC_GROUP_STUDENT_NUM'] || {},
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>