首页优化

src/views/main/baseinfo/business.vue

@@ -13,10 +13,11 @@
         </span>
       </statistic-item>
     </statistic>
-    <ve-histogram style="width: 100%;" height="350px" :data="chartData"></ve-histogram>
+    <ve-histogram style="width: 100%;" height="350px" :data="chartData" :data-empty="dataEmpty"></ve-histogram>
   </el-card>
 </template>
 <script>
+import 'v-charts/lib/style.css'
 import countTo from 'vue-count-to'
 import veHistogram from 'v-charts/lib/histogram.common'
 export default {
@@ -53,7 +54,10 @@ export default {
         columns: ['月份', ...values.map(item => item.title)],
         rows: Object.values(months)
       }
-    }
+    },
+    dataEmpty() {
+      return !this.chartData.rows.length
+    },
   },
   data () {
     return {

src/views/main/baseinfo/curriculum.vue

@@ -16,7 +16,7 @@
     <ve-line :settings="{
       area: true,
       stack: { '课程': ['乐团课', 'VIP课', '网管课'] },
-    }" :data="chartData" height="350px"/>
+    }" :data="chartData" height="350px" :data-empty="dataEmpty"/>
   </el-card>
 </template>
 <script>
@@ -55,7 +55,10 @@ export default {
         columns: ['月份', ...values.map(item => item.title)],
         rows: Object.values(months)
       }
-    }
+    },
+    dataEmpty() {
+      return !this.chartData.rows.length
+    },
   },
   data () {
     return {

src/views/main/baseinfo/hr.vue

@@ -13,7 +13,7 @@
         </span>
       </statistic-item>
     </statistic>
-    <ve-histogram style="width: 100%;" height="350px" :data="chartData"></ve-histogram>
+    <ve-histogram style="width: 100%;" height="350px" :data="chartData" :data-empty="dataEmpty"></ve-histogram>
   </el-card>
 </template>
 <script>
@@ -53,7 +53,10 @@ export default {
         columns: ['月份', ...values.map(item => item.title)],
         rows: Object.values(months)
       }
-    }
+    },
+    dataEmpty() {
+      return !this.chartData.rows.length
+    },
   },
   data () {
     return {

src/views/main/baseinfo/management.vue

@@ -16,7 +16,7 @@
     <ve-line :settings="{
       area: true,
       stack: { '金额': ['应收金额', '预收金额', '预付金额', '应付金额', '营收金额'] },
-    }" :data="chartData" height="350px"/>
+    }" :data="chartData" height="350px" :data-empty="dataEmpty"/>
   </el-card>
 </template>
 <script>
@@ -57,7 +57,10 @@ export default {
         columns: ['月份', ...values.map(item => item.title)],
         rows: Object.values(months)
       }
-    }
+    },
+    dataEmpty() {
+      return !this.chartData.rows.length
+    },
   },
   data () {
     return {

src/views/main/baseinfo/operate.vue

@@ -13,7 +13,7 @@
         </span>
       </statistic-item>
     </statistic>
-    <ve-histogram style="width: 100%;" height="350px" :data="chartData"></ve-histogram>
+    <ve-histogram style="width: 100%;" height="350px" :data="chartData" :data-empty="dataEmpty"></ve-histogram>
   </el-card>
 </template>
 <script>
@@ -53,7 +53,10 @@ export default {
         columns: ['月份', ...values.map(item => item.title)],
         rows: Object.values(months)
       }
-    }
+    },
+    dataEmpty() {
+      return !this.chartData.rows.length
+    },
   },
   data () {
     return {

src/views/main/baseinfo/student.vue

@@ -21,8 +21,8 @@
         </span>
       </statistic-item>
     </statistic>
-    <ve-histogram v-if="isHistogram" style="width: 100%;" height="350px" :data="chartData"></ve-histogram>
-    <ve-funnel v-else style="width: 100%;" height="350px" :data="funnelData"></ve-funnel>
+    <ve-histogram v-if="isHistogram" style="width: 100%;" height="350px" :data="chartData" :data-empty="dataEmpty"></ve-histogram>
+    <ve-funnel v-else style="width: 100%;" height="350px" :data="funnelData" :data-empty="dataEmpty"></ve-funnel>
   </el-card>
 </template>
 <script>
@@ -46,7 +46,7 @@ export default {
     },
     chartData() {
       const data = this.data[this.active] || {}
-      const values = Object.values(this.items)
+      const values = Object.values(this.items).filter(item => item.dataType !== 'STUDENT_CONVERSION')
       const months = {}
       for (const item of values) {
         for (const row of (item.indexMonthData || [])) {
@@ -65,16 +65,18 @@ export default {
       }
     },
     funnelData() {
+      const { indexMonthData = [] } = this.data['STUDENT_CONVERSION'] || {}
       return {
-        columns: ['状态', '数值'],
-        rows: [
-          { '状态': '展示', '数值': 900 },
-          { '状态': '访问', '数值': 600 },
-          { '状态': '点击', '数值': 300 },
-          { '状态': '订单', '数值': 100 }
-        ]
+        columns: ['类型', '数值'],
+        rows: indexMonthData.map(item => ({
+          '类型': item.title,
+          '数值': item.percent
+        }))
       }
-    }
+    },
+    dataEmpty() {
+      return !this.chartData.rows.length
+    },
   },
   data () {
     return {