空数据处理

src/views/learning/item-crowd-analysis.vue

 <template>
   <div class="crowd-analysis-wrap">
-    <el-radio-group v-show="showData" class="crowd-radio" v-model="radio" size="small" @change="updateRadio">
+    <el-radio-group class="crowd-radio" v-model="radio" size="small" @change="updateRadio">
       <el-radio-button label="1">全部用户</el-radio-button>
       <el-radio-button label="2">参与项目</el-radio-button>
       <el-radio-button label="3">通过项目</el-radio-button>
     </el-radio-group>
+    <div v-show="!showData" class="empty">
+      <p>"没有相关数据，请重新选择查询范围"</p>
+    </div>
     <div class="chart" v-show="showData">
       <div class="item" id="education" ref="education"></div>
       <div class="item item-right" id="job" ref="job"></div>
@@ -65,6 +68,7 @@ export default {
     // commonUtil.resizeHeight();
     //父组件传值
     this.$on("search", () => {
+      vm.radio = 1;
       this.search();
     });
     this.$on("init", () => {
@@ -99,8 +103,10 @@ export default {
         if (res.code == "000000") {
           if(res.data.educationList.length == 0 && res.data.jobTitle.length == 0 ) {
             vm.$message("没有相关数据，请重新选择查询范围");
+            this.showData = false;
+          } else {
+            this.showData = true;
           }
-          this.showData = true;
           this.crowdData = res.data;
           setTimeout(function() {
             vm.educationDivision();
@@ -261,6 +267,12 @@ export default {
       }
     }
   }
+  .empty {
+    height: 300px;
+    line-height: 300px;
+    color: #FF3399;
+    text-align: center;
+  }
   .chart {
     position: relative;
     margin: 20px auto 0 auto;

src/views/learning/item-part-in.vue

 <template>
   <div class="part-in-wrap">
+     <div v-show="!showData" class="empty">
+      <p>"没有相关数据，请重新选择查询范围"</p>
+    </div>
     <div v-for="(item , index) in cardData" :key="index" class>
       <el-card class="box-card">
         <div slot="header" class="title">
@@ -88,7 +91,8 @@ export default {
         // },
       ],
       showChart: false,
-      showTable: false
+      showTable: false,
+      showData: false,
     };
   },
   created() {
@@ -132,6 +136,7 @@ export default {
         closeLoading(vm);
         if (res.code == "000000") {
           this.getCardData(res.data);
+          vm.showData = true;
           if(res.data.participateHospitalCount == 0 && res.data.participatePeopleCount == 0) {
             vm.$message("没有相关数据，请重新选择查询范围");
           }
@@ -232,6 +237,12 @@ export default {
   background: #fff;
   overflow: hidden;
   // padding: 10px;
+  .empty {
+    height: 300px;
+    line-height: 300px;
+    color: #FF3399;
+    text-align: center;
+  }
   .el-card {
     border-width: 0px;
   }