统计是否显示

src/views/indexEcharts/index.vue

 <template>
 <div class="chart-index">
   <el-row class="top-info"  :gutter="20">
-    <el-col :span="8">
+    <el-col :span="8" v-if="checkedReport.includes('total_number_of_users')">
       <card label="总用户">{{echartsInfo.selectUserCount}}</card>
     </el-col>
-    <el-col :span="8">
+    <el-col :span="8" v-if="checkedReport.includes('total_number_of_registered_users')">
       <card label="总注册用户">{{echartsInfo.selectRegisteredCount}}</card>
     </el-col>
-    <el-col :span="8">
+    <el-col :span="8" v-if="checkedReport.includes('total_number_of_registered_users')">
       <card label="最近7天新增" @click.native="toNewUsers" class="under-line" >{{echartsInfo.selectRecentlyCount}}</card>
     </el-col>
   </el-row>
-  <user-source mode="report" subtitle="最近七天" @click.native="toUserSource"></user-source>
-  <user-behavior class="marginTB" mode="lines" :select-building="true" @click.native="toBehaviorAnalysis" subtitle="最近七天"></user-behavior>
+  <user-source mode="report" subtitle="最近七天" @click.native="toUserSource"  v-if="checkedReport.includes('user_source')"></user-source>
+  <user-behavior class="marginTB" mode="lines" :select-building="true" @click.native="toBehaviorAnalysis" subtitle="最近七天" v-if="checkedReport.includes('user_behavior')"></user-behavior>
  <el-row :gutter="20">
-    <el-col :span="12">
+    <el-col :span="12" v-if="checkedReport.includes('active_users')">
       <user-active></user-active>
     </el-col>
-    <el-col :span="12">
+    <el-col :span="12"  v-if="checkedReport.includes('conversion_rate')">
       <user-conversion></user-conversion>
     </el-col>
-    <el-col :span="12">
+    <el-col :span="12" v-if="checkedReport.includes('sex_ratio')">
       <user-sex></user-sex>
     </el-col>
-    <el-col :span="12">
+    <el-col :span="12" v-if="checkedReport.includes('urban_distribution')">
       <user-city></user-city>
     </el-col>
   </el-row>
-  <new-users class="marginTB" mode="table"></new-users>
-  <intentional-customers class="marginTB"></intentional-customers>
+  <new-users class="marginTB" mode="table" v-if="checkedReport.includes('number_of_new_users')"></new-users>
+  <intentional-customers class="marginTB" v-if="checkedReport.includes('intentional_user')"></intentional-customers>
 </div>
 </template>
 
 import apis from "../../config/api";
 import { mapState } from "vuex";
 import Echarts from "echarts";
+const { mapActions: mapReportActions } = createNamespacedHelpers("report");
 const {
   mapState: mapIndexEchartsState,
   mapActions: mapIndexEchartsActions
   },
   data() {
     return {
+        pageNavi: {
+            current: 1,
+            size: 200,
+            total: 0
+        },
+        checkedReport: [] // 是否展示报表
     };
   },
   computed: {
   },
   methods: {
     ...mapIndexEchartsActions(["getIndexEcharts", "setDetailNull"]),
+    ...mapReportActions(["getReportList", "getReportCheckedList", "saveCheckedReport"]),
     initPage() {
       this.setDetailNull();
       this.getIndexEcharts().then(window.console.log);;
     toBehaviorAnalysis() {
       this.$router.push({ name: "behaviorAnalysis" });
     },
+    getCheckedList() { // 获取是否展示报表
+          const pageNumber = this.pageNavi.current || 1;
+          const pageSize = this.pageNavi.size;
+          this.getReportCheckedList({
+              pageNumber,
+              pageSize
+          }).then(res => {
+             const { records, ...pageNavi } = res;
+
+             this.checkedReport = (records || []).map((x) => x.reportCode);
+             this.pageNavi = pageNavi;
+          }).catch(err => {
+                  this.$notify.error(err.msg || err.message);
+          });
+    }
   },
   mounted() {
     this.initPage();
+    this.getCheckedList()
   }
 };
 </script>