02/24 首页修改

src/views/main/baseinfo/index.vue

@@ -35,33 +35,33 @@
     <!-- 这里显示选项卡 -->
     <empty desc="暂无统计数据" v-if="isEmpty"/>
     <el-row v-else class="rows" :gutter="20">
-      <el-col :xs="24" :sm="24" :md="9" :xl="9">
+      <el-col :xs="24" :sm="24" :md="24" :xl="9">
         <studentbaseinfo :data="dataInfo" />
       </el-col>
-      <el-col :xs="24" :sm="24" :md="6" :xl="6">
+      <el-col :xs="24" :sm="24" :md="24" :xl="6">
           <operate :data="dataInfo"/>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="9" :xl="9">
+      <el-col :xs="24" :sm="24" :md="24" :xl="9">
         <hrdata :data="dataInfo"/>
       </el-col>
-        <el-col :xs="24" :sm="24" :md="12">
-        <student :data="dataInfo"/>
-      </el-col>
-        <el-col :xs="24" :sm="24" :md="12">
-        <student :data="dataInfo"/>
+        <el-col :xs="24" :sm="24" :md="24" :xl="12">
+        <surplusCourse :data="dataInfo"/>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="12">
-        <student :data="dataInfo"/>
+        <el-col :xs="24" :sm="24" :md="24" :xl="12">
+        <useCourse :data="dataInfo"/>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :xl="12">
+      <el-col :xs="24" :sm="24" :md="24" :xl="12">
         <management :data="dataInfo"/>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="12">
+      <el-col :xs="24" :sm="24" :md="24" :xl="12">
         <business :data="dataInfo"/>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="12">
+      <el-col :xs="24" :sm="24" :md="24" :xl="12">
         <curriculum :data="dataInfo"/>
       </el-col>
+       <el-col :xs="24" :sm="24" :md="24" :xl="12">
+        <student :data="dataInfo"/>
+      </el-col>
       <!-- <el-col :xs="24" :sm="24" :md="12">
         <operate :data="dataInfo"/>
       </el-col> -->
@@ -80,6 +80,8 @@ import hrdata from './hr'
 import student from './student'
 import curriculum from './curriculum'
 import studentbaseinfo from './studentBaseinfo'
+import surplusCourse from './surplusCourse'
+import useCourse from './useCourse'
 import { getTimes } from '@/utils'
 import { descs } from '../constant'
 
@@ -99,7 +101,9 @@ export default {
     hrdata,
     student,
     curriculum,
-    studentbaseinfo
+    studentbaseinfo,
+    surplusCourse,
+    useCourse
   },
   data () {
     return {
@@ -199,13 +203,16 @@ export default {
       padding: 0;
     }
   }
-
+  /deep/.el-card__header{
+    padding: 0 20px!important
+  }
 </style>
 <style lang="scss">
   .box {
   display: flex;
   flex-direction: row;
   align-items: center;
+  height: 55px; line-height: 55px;
   .shape {
       margin-right: 10px;
       height: 18px;

src/views/main/baseinfo/management.vue

@@ -1,19 +1,36 @@
 <template>
-  <el-card header="经营数据">
+  <el-card header="">
+    <div slot="header" class="clearfix">
+      <searchHeader />
+    </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">
+      <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=".3" placement="top">
-            <i style="margin-left: 5px;cursor: pointer;" class="el-icon-warning-outline"/>
+          {{ 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" :decimals="2"/>
+          <count-to :endVal="item.percent" :decimals="2" />
         </span>
       </statistic-item>
     </statistic>
-    <ve-line :settings="{
+    <ve-line
+      :settings="{
         area: true,
       }"
       :data="chartData"
@@ -25,80 +42,87 @@
   </el-card>
 </template>
 <script>
-import 'echarts/lib/component/dataZoom'
-import countTo from 'vue-count-to'
-import veLine from 'v-charts/lib/line.common'
+import "echarts/lib/component/dataZoom";
+import countTo from "vue-count-to";
+import veLine from "v-charts/lib/line.common";
+import searchHeader from "./modals/searchHeader";
 export default {
-  props: ['data'],
+  props: ["data"],
   components: {
-    've-line': veLine,
-    'count-to': countTo
+    "ve-line": veLine,
+    "count-to": countTo,
+    searchHeader,
   },
   computed: {
     items() {
       return {
-        FINANCE_AMOUNT: this.data['FINANCE_AMOUNT'] || {},
-        FINANCE_BALANCE_AMOUNT: this.data['FINANCE_BALANCE_AMOUNT'] || {},
-        FINANCE_PAY: this.data['FINANCE_PAY'] || {},
-      }
+        FINANCE_AMOUNT: this.data["FINANCE_AMOUNT"] || {},
+        FINANCE_BALANCE_AMOUNT: this.data["FINANCE_BALANCE_AMOUNT"] || {},
+        FINANCE_PAY: this.data["FINANCE_PAY"] || {},
+      };
     },
     chartExtend() {
       return {
         tooltip: {
-          formatter: item => {
-            return [item[0].axisValueLabel, ...item.map(d => {
-              return `<br/>${d.marker}${d.seriesName}: ${this.$helpers.numeral(d.value[1]).format('0,0.00')}`
-            })].join('')
-          }
-        }
-      }
+          formatter: (item) => {
+            return [
+              item[0].axisValueLabel,
+              ...item.map((d) => {
+                return `<br/>${d.marker}${
+                  d.seriesName
+                }: ${this.$helpers.numeral(d.value[1]).format("0,0.00")}`;
+              }),
+            ].join("");
+          },
+        },
+      };
     },
     dataZoom() {
       return [
         {
-          type: 'slider',
+          type: "slider",
           start: 50,
-          end: 100
-        }
-      ]
+          end: 100,
+        },
+      ];
     },
     chartData() {
-      const values = Object.values(this.items)
-      const months = {}
+      const values = Object.values(this.items);
+      const months = {};
       for (const item of values) {
-        for (const row of (item.indexMonthData || [])) {
-          const key = this.$helpers.dayjs(row.month).format('YYYY-MM-DD')
+        for (const row of item.indexMonthData || []) {
+          const key = this.$helpers.dayjs(row.month).format("YYYY-MM-DD");
           if (!months[key]) {
             months[key] = {
-              '日期': key,
-            }
+              日期: key,
+            };
           }
-          months[key][item.title] = row.percent
+          months[key][item.title] = row.percent;
         }
       }
       return {
-        columns: ['日期', ...values.map(item => item.title)],
-        rows: Object.values(months)
-      }
+        columns: ["日期", ...values.map((item) => item.title)],
+        rows: Object.values(months),
+      };
     },
     dataEmpty() {
-      return !this.chartData.rows.length
+      return !this.chartData.rows.length;
     },
   },
-  data () {
+  data() {
     return {
-      active: 'SHOULD_INCOME_MONEY',
-    }
+      active: "SHOULD_INCOME_MONEY",
+    };
   },
-}
+};
 </script>
 <style lang="less" scoped>
-  // .statistic{
-  //   /deep/ .statistic-content{
-  //     cursor: pointer;
-  //     &.active > span{
-  //       color: #14928a !important;
-  //     }
-  //   }
-  // }
+// .statistic{
+//   /deep/ .statistic-content{
+//     cursor: pointer;
+//     &.active > span{
+//       color: #14928a !important;
+//     }
+//   }
+// }
 </style>

src/views/main/baseinfo/modals/searchHeader.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="titleWrap">
+    <div class="box">
+      <span class="shape"></span>
+      <span>经营数据</span>
+    </div>
+    <div class="right">
+      <el-radio-group v-model="timer" size="mini">
+        <el-radio-button label="本月"></el-radio-button>
+        <el-radio-button label="本年度"></el-radio-button>
+        <el-radio-button label="去年"></el-radio-button>
+      </el-radio-group>
+      <el-date-picker
+      v-model="dates"
+      type="daterange"
+      style="width:300px;"
+      range-separator="-"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期" size="mini">
+    </el-date-picker>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      timer:'',
+      dates:[]
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.titleWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  .right {
+    margin-top: 15px;
+  }
+}
+</style>

src/views/main/baseinfo/surplusCourse.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <div class="box">
+          <span class='shape'></span>
+          <span>剩余课时</span>
+        </div>
+
+      </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>
+    </el-card>
+  </div>
+</template>
+<script>
+import countTo from "vue-count-to";
+export default {
+  props: ["data"],
+  components: {
+    "count-to": countTo,
+  },
+  data() {
+    return {
+      active:''
+    };
+  },
+  computed: {
+    dataEmpty() {
+      return !this.chartData.rows.length;
+    },
+    //         CHARGE_STUDENT_CHANGE_RATE: this.data['CHARGE_STUDENT_CHANGE_RATE'] || {},
+    //    ACTIVATION_RATE: this.data['ACTIVATION_RATE'] || {},
+    items() {
+      return {
+        SURPLUS_COURSE_NUM: this.data['SURPLUS_COURSE_NUM'] || {},
+        SURPLUS_MUSIC_COURSE_NUM: this.data['SURPLUS_MUSIC_COURSE_NUM'] || {},
+        SURPLUS_VIP_COURSE_NUM: this.data['SURPLUS_VIP_COURSE_NUM'] || {},
+        SURPLUS_PRACTICE_COURSE_NUM: this.data['SURPLUS_PRACTICE_COURSE_NUM'] || {},
+      }
+    },
+  },
+};
+</script>

src/views/main/baseinfo/useCourse.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <div class="box">
+          <span class='shape'></span>
+          <span>已消耗课时</span>
+        </div>
+
+      </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>
+    </el-card>
+  </div>
+</template>
+<script>
+import countTo from "vue-count-to";
+export default {
+  props: ["data"],
+  components: {
+    "count-to": countTo,
+  },
+  data() {
+    return {
+      active:''
+    };
+  },
+  computed: {
+    dataEmpty() {
+      return !this.chartData.rows.length;
+    },
+    //         CHARGE_STUDENT_CHANGE_RATE: this.data['CHARGE_STUDENT_CHANGE_RATE'] || {},
+    //    ACTIVATION_RATE: this.data['ACTIVATION_RATE'] || {},
+    items() {
+      return {
+        OVER_COURSE_NUM: this.data['OVER_COURSE_NUM'] || {},
+        OVER_MUSIC_COURSE_NUM: this.data['OVER_MUSIC_COURSE_NUM'] || {},
+        OVER_VIP_COURSE_NUM: this.data['OVER_VIP_COURSE_NUM'] || {},
+        OVER_PRACTICE_COURSE_NUM: this.data['OVER_PRACTICE_COURSE_NUM'] || {},
+      }
+    },
+  },
+};
+</script>