home new

package.json

@@ -22,6 +22,7 @@
     "copy-to-clipboard": "^3.3.1",
     "dayjs": "^1.8.35",
     "default-passive-events": "^1.0.10",
+    "echarts": "^4.8.0",
     "element-ui": "^2.13.2",
     "http-server": "^0.12.3",
     "i": "^0.3.6",
@@ -39,6 +40,7 @@
     "qrcodejs2": "0.0.2",
     "qs": "^6.8.0",
     "swiper": "^6.3.5",
+    "v-charts": "^1.19.0",
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
     "vue-awesome-swiper": "^4.1.1",

src/views/main/baseinfo/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <el-row>
+      <el-col>
+        <el-card header="运营数据">
+          <ve-histogram :data="chartData"></ve-histogram>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import veHistogram from 'v-charts/lib/line.common'
+
+export default {
+  components: {
+    've-histogram': veHistogram
+  },
+  data () {
+    let data = []
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/main/index.vue

@@ -1,194 +1,25 @@
 <template>
   <div class="m-container">
-    <h2 v-permission="'/main/main/allData/826'">
+    <h2>
       <div class="squrt"></div>首页
     </h2>
-    <div class="m-core"
-         v-permission="'/main/main/allData/826'">
-      <div class="itemWrap">
-        <div class="item">
-          <h4>
-            <p>分部乐团数</p> <img src=""
-                 alt="">
-          </h4>
-          <div class="infos">
-            <div class="info">
-              <p class="sub">全部</p>
-              <p class='msg'> {{ dataInfo.mdTotal }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">筹备中</p>
-              <p class='msg'>{{ dataInfo.prepare_num_ }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">进行中</p>
-              <p class='msg'>{{ dataInfo.progress_num_ }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">已完成</p>
-              <p class='msg'>{{ dataInfo.pause_num_ }}</p>
-            </div>
-          </div>
-        </div>
-        <!--  -->
-        <div class="item"
-             v-permission="'main/monthIncome'">
-          <h4>
-            <p>本月收入</p>
-            <img src=""
-                 alt="">
-          </h4>
-          <div class="infos">
-            <div class="info">
-              <p class="sub">收入笔数</p>
-              <p class='msg'>{{ dataInfo.incomeMap && dataInfo.incomeMap.total >= 0 ? dataInfo.incomeMap.total : '--' }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">收入金额</p>
-              <p class='msg'>{{ dataInfo.incomeMap && dataInfo.incomeMap.total_num_ >= 0 ? dataInfo.incomeMap.total_num_ : '--' }}</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="item"
-             v-permission="'main/monthExpenditure'">
-          <h4>
-            <p>本月支出</p>
-            <img src=""
-                 alt="">
-          </h4>
-          <div class="infos">
-            <div class="info">
-              <p class="sub">支出笔数</p>
-              <p class='msg'>{{ dataInfo.incomeExpendMap && dataInfo.incomeExpendMap.expend_num_ >= 0 ? dataInfo.incomeExpendMap.expend_num_ : '--' }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">支出金额</p>
-              <p class='msg'>{{ dataInfo.incomeExpendMap && dataInfo.incomeExpendMap.expend_total_ >= 0 ? dataInfo.incomeExpendMap.expend_total_ : '--' }}</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="item">
-          <h4>
-            <p>分部老师数</p>
-            <img src=""
-                 alt="">
-          </h4>
-          <div class="infos">
-            <div class="info">
-              <p class="sub">总计</p>
-              <p class='msg'>{{ dataInfo.teacherDatas && dataInfo.teacherDatas.total >= 0 ? dataInfo.teacherDatas.total : '--' }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">全职人数</p>
-              <p class='msg'>{{ dataInfo.teacherDatas && dataInfo.teacherDatas.full_time_num_ >= 0 ? dataInfo.teacherDatas.full_time_num_ : '--' }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">兼职人数</p>
-              <p class='msg'>{{ dataInfo.teacherDatas && dataInfo.teacherDatas.part_time_num_ >= 0 ? dataInfo.teacherDatas.part_time_num_ : '--' }}</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="item">
-          <h4>
-            <p>VIP课数</p>
-            <img src=""
-                 alt="">
-          </h4>
-          <div class="infos">
-            <div class="info">
-              <p class="sub">总计</p>
-              <p class='msg'>
-                {{ dataInfo.vdTotal }}
-              </p>
-            </div>
-            <div class="info">
-              <p class="sub">进行中</p>
-              <p class='msg'>{{ dataInfo.applying_num_ }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">已完成</p>
-              <p class='msg'>{{ dataInfo.finished_num_ }}</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="item">
-          <h4>
-            <p>试听课</p>
-            <img src=""
-                 alt="">
-          </h4>
-          <div class="infos">
-            <div class="info">
-              <p class="sub">总计</p>
-              <p class='msg'>{{ dataInfo.ddTotal }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">已预约</p>
-              <p class='msg'>{{ dataInfo.booked_num_ }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">未完成</p>
-              <p class='msg'>{{ dataInfo.unbooked_num_ }}</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="item">
-          <h4>
-            <p>分部学生数</p>
-            <img src=""
-                 alt="">
-          </h4>
-          <div class="infos">
-            <div class="info">
-              <p class="sub">总计</p>
-              <p class='msg'>{{ dataInfo.studentDatas && dataInfo.studentDatas.total_num_ >= 0 ? dataInfo.studentDatas.total_num_ : '--' }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">本月新增</p>
-              <p class='msg'>{{ dataInfo.studentDatas && dataInfo.studentDatas.new_num_ >= 0 ? dataInfo.studentDatas.new_num_ : '--' }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">本月退团</p>
-              <p class='msg'>{{ dataInfo.studentDatas && dataInfo.studentDatas.quit_num_ >= 0 ? dataInfo.studentDatas.quit_num_ : '--' }}</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="item">
-          <h4>
-            <p>本月预计上课</p>
-            <img src=""
-                 alt="">
-          </h4>
-          <div class="infos">
-            <div class="info">
-              <p class="sub">乐团课</p>
-              <p class='msg'>{{ dataInfo.musicGroupNum >= 0 ? dataInfo.musicGroupNum : '--' }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">VIP课</p>
-              <p class='msg'>{{ dataInfo.vipGroupNum >= 0 ? dataInfo.vipGroupNum : '--' }}</p>
-            </div>
-            <div class="info">
-              <p class="sub">试听课</p>
-              <p class='msg'>{{ dataInfo.demoGroupNum >= 0 ? dataInfo.demoGroupNum : '--' }}</p>
-            </div>
-          </div>
-        </div>
-
-      </div>
+    <div class="m-core">
+       <tab-router>
+        <el-tab-pane lazy label="基本信息" name="baseinfo">
+          <baseinfo/>
+        </el-tab-pane>
+      </tab-router>
     </div>
   </div>
 </template>
 <script>
 import { getIndex } from '@/api/user'
+import baseinfo from './baseinfo'
 export default {
   name: 'Main',
+  components: {
+    baseinfo
+  },
   data () {
     return {
       dataInfo: {}
@@ -200,71 +31,11 @@ export default {
   },
   methods: {
     __init () {
-      getIndex().then(res => {
-        if (res.code == 200) {
-          // this.dataInfo = res.data
-          let md = res.data.musicDatas || {},
-            vd = res.data.vipDatas || {},
-            dd = res.data.demoDatas || {}
-          let tempDate = {
-            mdTotal: (md.progress_num_ ? md.progress_num_ : 0) + (md.prepare_num_ ? md.prepare_num_ : 0) + (md.pause_num_ ? md.pause_num_ : 0),
-            progress_num_: md.progress_num_ >= 0 ? md.progress_num_ : '--',
-            prepare_num_: md.prepare_num_ >= 0 ? md.prepare_num_ : '--',
-            pause_num_: md.pause_num_ >= 0 ? md.pause_num_ : '--',
-            vdTotal: (vd.finished_num_ ? vd.finished_num_ : 0) + (vd.applying_num_ ? vd.applying_num_ : 0),
-            finished_num_: vd.finished_num_ >= 0 ? vd.finished_num_ : '--',
-            applying_num_: vd.applying_num_ >= 0 ? vd.applying_num_ : '--',
-            ddTotal: (dd.booked_num_ ? dd.booked_num_ : 0) + (dd.unbooked_num_ ? dd.unbooked_num_ : 0),
-            booked_num_: dd.booked_num_ >= 0 ? dd.booked_num_ : '--',
-            unbooked_num_: dd.unbooked_num_ >= 0 ? dd.unbooked_num_ : '--'
-          }
-          this.dataInfo = Object.assign(res.data, tempDate)
-        }
-      })
+
     }
   }
 }
 </script>
 <style lang="scss" scope>
-.itemWrap {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: wrap;
-  .item {
-    width: 333px;
-    height: 137px;
-    padding: 22px 28px 20px;
-    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
-    border-radius: 6px;
-    margin: 0 15px 3rem;
-    h4 {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      margin-bottom: 20px;
-      color: #323c47;
-      font-size: 14px;
-    }
-    .infos {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      .sub {
-        font-size: 14px;
-        line-height: 20px;
-        color: #aaa;
-        margin-bottom: 8px;
-      }
-      .msg {
-        font-size: 24px;
-        font-weight: 500;
-        color: rgba(68, 68, 68, 1);
-        line-height: 28px;
-        text-align: center;
-      }
-    }
-  }
-}
-</style>
+
+</style>