首页展示开发

src/views/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="statistics-dashboard">
     <!-- 数据概览 (Data Overview) -->
-    <el-card class="overview-section" shadow="never">
-      <el-row :gutter="20">
-        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="companybox">
+    <el-card class="overview-section" shadow="never" v-if="showCompany || showAsset || showOperate || showResource">
+      <el-row :gutter="20" v-if="showCompany || showAsset">
+        <el-col :xs="24" :sm="24" :md="companyColSpan" :lg="companyColSpan" :xl="companyColSpan" class="companybox" v-if="showCompany">
           <img src="../assets/images/topbg.png" alt="" class="topimg">
           <img src="../assets/images/topbg.png" alt="" class="bottomimg">
           <div class="companyboxtitle">
@@ -75,7 +75,7 @@
         </el-col>
 
 
-        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="propertyboxtitle">
+        <el-col :xs="24" :sm="24" :md="assetColSpan" :lg="assetColSpan" :xl="assetColSpan" class="propertyboxtitle" v-if="showAsset">
           <div class="property_title">
             资产概览
           </div>
@@ -105,8 +105,8 @@
         </el-col>
       </el-row>
 
-      <el-row :gutter="20">
-        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
+      <el-row :gutter="20" v-if="showOperate || showResource">
+        <el-col :xs="24" :sm="24" :md="operateColSpan" :lg="operateColSpan" :xl="operateColSpan" v-if="showOperate">
           <div class="operatetitle">
             经营数据
             <span>
@@ -190,7 +190,7 @@
         </el-col>
 
 
-        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" style="padding-left: 15px;">
+        <el-col :xs="24" :sm="24" :md="resourceColSpan" :lg="resourceColSpan" :xl="resourceColSpan" style="padding-left: 15px;" v-if="showResource">
 
           <div class="internetbox">
             <div class="internet-cardtop">
@@ -245,6 +245,7 @@
       </el-row>
     </el-card>
     <!-- 分析概览 (Analysis Overview) -->
+    <template v-if="showAnalysis">
     <div class="analysis-section" shadow="never">
       <div slot="header" class="header">
         <div>分析概览</div>
@@ -519,7 +520,8 @@
         </el-col>
       </el-row>
     </transition>
-    <el-row :gutter="20" class="charts-section">
+    </template>
+    <el-row :gutter="20" class="charts-section" v-if="showOperate">
       <el-col :span="12">
         <el-card shadow="never">
           <div slot="header" class="chart-header">
@@ -557,7 +559,7 @@
         </el-card>
       </el-col>
     </el-row>
-    <br/>
+    <br v-if="showOperate"/>
 
     <el-dialog
       title="店铺协议消息提示"
@@ -589,6 +591,7 @@ import { listDept } from '@/api/system/dept'
 import { listCompany } from '@/api/his/company'
 import { getConfigByKey } from '@/api/system/config'
 import {listStore} from '@/api/hisStore/store'
+import { checkPermi } from '@/utils/permission'
 
 
 const viewCharOption = {
@@ -921,6 +924,36 @@ const redPackageOption = {
 export default {
   name: 'StatisticsDashboard',
   components: {CountTo},
+  computed: {
+    // 首页模块权限：平台管理员在角色中勾选后才展示对应统计
+    showCompany() {
+      return checkPermi(['index:company:view'])
+    },
+    showAsset() {
+      return checkPermi(['index:asset:view'])
+    },
+    showOperate() {
+      return checkPermi(['index:operate:view'])
+    },
+    showResource() {
+      return checkPermi(['index:resource:view'])
+    },
+    showAnalysis() {
+      return checkPermi(['index:analysis:view'])
+    },
+    companyColSpan() {
+      return this.showAsset ? 16 : 24
+    },
+    assetColSpan() {
+      return this.showCompany ? 8 : 24
+    },
+    operateColSpan() {
+      return this.showResource ? 16 : 24
+    },
+    resourceColSpan() {
+      return this.showOperate ? 8 : 24
+    }
+  },
   data() {
     return {
       redPackage: 0,
@@ -1033,13 +1066,17 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.initViewerChart()
-      this.initDealerChart()
-      this.initCourseWatchChart();
-      this.initAnswerRedPackViewerChart();
-      this.initAnswerRedPackMoneyViewerChart();
-      this.initThisMonthOrderChart();
-      this.initThisMonthRecvChart()
+      if (this.showAnalysis) {
+        this.initViewerChart()
+        this.initDealerChart()
+        this.initCourseWatchChart();
+        this.initAnswerRedPackViewerChart();
+        this.initAnswerRedPackMoneyViewerChart();
+      }
+      if (this.showOperate) {
+        this.initThisMonthOrderChart();
+        this.initThisMonthRecvChart()
+      }
 
       // 监听窗口大小变化，重新渲染图表
       window.addEventListener('resize', () => {
@@ -1050,14 +1087,16 @@ export default {
   },
   created() {
     this.refresh();
-    listDept().then(res => {
-      this.deptInitOptions = res.data;
-      listCompany().then(res => {
-        this.companyIntiOptions = res.rows;
-        this.getDeptOptions(this.intiDeptId);
-        this.getCompanyOptions(this.intiDeptId);
+    if (this.showAnalysis || this.showCompany) {
+      listDept().then(res => {
+        this.deptInitOptions = res.data;
+        listCompany().then(res => {
+          this.companyIntiOptions = res.rows;
+          this.getDeptOptions(this.intiDeptId);
+          this.getCompanyOptions(this.intiDeptId);
+        });
       });
-    });
+    }
     getConfigByKey("medicalMall.func.switch").then(response => {
       if(response.data && response.data.configValue) {
         this.medicalMallConfig = JSON.parse(response.data.configValue);
@@ -1071,14 +1110,21 @@ export default {
         this.handleNoticeInfo();
       }
     })
-    listStore().then(response => {
-      this.storeOptions = response.rows;
-    });
-    this.statisticsStroe();
-    this.statisticsUser();
+    if (this.showOperate) {
+      listStore().then(response => {
+        this.storeOptions = response.rows;
+      });
+      this.statisticsStroe();
+    }
+    if (this.showCompany || this.showResource) {
+      this.statisticsUser();
+    }
   },
   methods: {
     statisticsUser(){
+      if (!this.showCompany && !this.showResource) {
+        return;
+      }
       getStatisticsUser({deptId:this.deptId,companyId:this.companyId}).then(res => {
         this.manualTotalUser = res.data.manualTotalUser;
         this.manualTodayUser = res.data.manualTodayUser;
@@ -1089,6 +1135,9 @@ export default {
       })
     },
     statisticsStroe(){
+      if (!this.showOperate) {
+        return;
+      }
       getStatisticsStroe({storeId:this.storeId}).then(res => {
         this.goodsTotalNum = res.data.goodsTotalNum;
         this.orderTotalNum = res.data.orderTotalNum;
@@ -1299,101 +1348,112 @@ export default {
       }
     },
     refresh() {
-      rechargeComsumption(this.staticParam).then(res => {
-        if (res.code === 200) {
-          this.balance = res.data.balance;
-          this.todayComsumption = res.data.todayComsumption;
-          this.yesterdayComsumption = res.data.yesterdayComsumption;
-          let calculateRemainingDays1 = this.calculateRemainingDays(this.balance, this.todayComsumption, this.yesterdayComsumption);
-          this.percentage = calculateRemainingDays1.percentage;
-          this.remainMessage = calculateRemainingDays1.message;
-        }
-      });
+      if (this.showAsset) {
+        rechargeComsumption(this.staticParam).then(res => {
+          if (res.code === 200) {
+            this.balance = res.data.balance;
+            this.todayComsumption = res.data.todayComsumption;
+            this.yesterdayComsumption = res.data.yesterdayComsumption;
+            let calculateRemainingDays1 = this.calculateRemainingDays(this.balance, this.todayComsumption, this.yesterdayComsumption);
+            this.percentage = calculateRemainingDays1.percentage;
+            this.remainMessage = calculateRemainingDays1.message;
+          }
+        });
+      }
 
-      trafficLog(this.staticParam).then(res => {
-        if (res.code === 200) {
-          this.todayTraffic = res.data.today;
-          this.thisMonthTraffic = res.data.thisMonth;
-          this.trafficCount = res.data.traffic;
-        }
-      })
+      if (this.showResource) {
+        trafficLog(this.staticParam).then(res => {
+          if (res.code === 200) {
+            this.todayTraffic = res.data.today;
+            this.thisMonthTraffic = res.data.thisMonth;
+            this.trafficCount = res.data.traffic;
+          }
+        })
+        smsBalance(this.staticParam).then(res => {
+          if (res.code === 200) {
+            if (res.data == null) {
+              this.smsRemainCount = 0;
+            } else {
+              this.smsRemainCount = res.data;
+            }
+          }
+        })
+      }
 
-      dealerAggregated(this.staticParam).then(res => {
-        if (res.code === 200) {
-          this.dealderCount = res.data.dealderCount ?? 0;
-          this.groupMgrCount = res.data.groupMgrCount ?? 0;
-          this.memberCount = res.data.memberCount ?? 0;
-          this.qwMemberNum = res.data.qwMemberNum ?? 0;
-          const totalNum = res.data.padTotalNum;
-          //-1 不限 null 未设置
-          if(totalNum != null && totalNum !== -1 && totalNum > 0){
-            this.padTotalNum = totalNum;
-          }else{
-            this.padTotalNum = '不限';
+      if (this.showCompany) {
+        dealerAggregated(this.staticParam).then(res => {
+          if (res.code === 200) {
+            this.dealderCount = res.data.dealderCount ?? 0;
+            this.groupMgrCount = res.data.groupMgrCount ?? 0;
+            this.memberCount = res.data.memberCount ?? 0;
+            this.qwMemberNum = res.data.qwMemberNum ?? 0;
+            const totalNum = res.data.padTotalNum;
+            //-1 不限 null 未设置
+            if(totalNum != null && totalNum !== -1 && totalNum > 0){
+              this.padTotalNum = totalNum;
+            }else{
+              this.padTotalNum = '不限';
+            }
+            this.padUsedNum = res.data.padUsedNum ?? 0;
+            this.padInfo = res.data.padInfo;
+            this.normalNum = res.data.normalNum ?? 0;
+            this.blackNum = res.data.blackNum ?? 0;
+            this.todayIncreaseUserNum = res.data.todayIncreaseUserNum ?? 0;
+            // this.orderTotalNum = res.data.orderTotalNum ?? 0;
+            this.todayOrderNum = res.data.todayOrderNum ?? 0;
+            // this.recvTotalNum = res.data.recvTotalNum ?? 0;
+            this.recvTodayNum = res.data.recvTodayNum ?? 0;
           }
-          this.padUsedNum = res.data.padUsedNum ?? 0;
-          this.padInfo = res.data.padInfo;
-          this.normalNum = res.data.normalNum ?? 0;
-          this.blackNum = res.data.blackNum ?? 0;
-          this.todayIncreaseUserNum = res.data.todayIncreaseUserNum ?? 0;
-          // this.orderTotalNum = res.data.orderTotalNum ?? 0;
-          this.todayOrderNum = res.data.todayOrderNum ?? 0;
-          // this.recvTotalNum = res.data.recvTotalNum ?? 0;
-          this.recvTodayNum = res.data.recvTodayNum ?? 0;
-        }
-      })
-      let param = this.getParam();
+        })
+      }
 
-      // 获取当前日期时间
-      const today = dayjs();
-      param.startTime = this.formatDate(today);
-      param.endTime = this.formatDate(today);
-      analysisPreview(param).then(res => {
-        if (res.code === 200) {
-          this.watchUserCount = res.data.watchUserCount;
-          this.completedUserCount = res.data.completedUserCount;
-          this.completedRate = res.data.completedRate;
-          this.watchCount = res.data.watchCount;
-          this.completedCount = res.data.completedCount;
-          this.answerMemberCount = res.data.answerMemberCount;
-          this.correctUserCount = res.data.correctUserCount;
-          this.correctRate = res.data.correctRate;
-          this.rewardCount = res.data.rewardCount;
-          this.rewardMoney = res.data.rewardMoney;
-          this.watchRate = res.data.watchRate;
-        }
-      })
-      smsBalance(this.staticParam).then(res => {
-        if (res.code === 200) {
-          if (res.data == null) {
-            this.smsRemainCount = 0;
-          } else {
-            this.smsRemainCount = res.data;
+      if (this.showAnalysis) {
+        let param = this.getParam();
+
+        // 获取当前日期时间
+        const today = dayjs();
+        param.startTime = this.formatDate(today);
+        param.endTime = this.formatDate(today);
+        analysisPreview(param).then(res => {
+          if (res.code === 200) {
+            this.watchUserCount = res.data.watchUserCount;
+            this.completedUserCount = res.data.completedUserCount;
+            this.completedRate = res.data.completedRate;
+            this.watchCount = res.data.watchCount;
+            this.completedCount = res.data.completedCount;
+            this.answerMemberCount = res.data.answerMemberCount;
+            this.correctUserCount = res.data.correctUserCount;
+            this.correctRate = res.data.correctRate;
+            this.rewardCount = res.data.rewardCount;
+            this.rewardMoney = res.data.rewardMoney;
+            this.watchRate = res.data.watchRate;
           }
-        }
-      })
-      authorizationInfo(this.staticParam).then(res => {
-        if (res.code === 200 && res.data != null) {
-          this.todayWatchUserCount = res.data.todayWatchUserCount || 0;
-          this.versionLimit = res.data.versionLimit || 0;
-          if(this.versionLimit){
-            this.versionLimitPercent = this.todayWatchUserCount/this.versionLimit;
+        })
+        authorizationInfo(this.staticParam).then(res => {
+          if (res.code === 200 && res.data != null) {
+            this.todayWatchUserCount = res.data.todayWatchUserCount || 0;
+            this.versionLimit = res.data.versionLimit || 0;
+            if(this.versionLimit){
+              this.versionLimitPercent = this.todayWatchUserCount/this.versionLimit;
+            }
           }
-        }
-      })
+        })
 
-      this.handleCourseWatchChart()
-      this.handleViewChartData()
+        this.handleCourseWatchChart()
+        this.handleViewChartData()
 
-      // 经销商会员观看TOP10
-      this.handleDealerChartData()
+        // 经销商会员观看TOP10
+        this.handleDealerChartData()
 
-      this.handleAnswerRedPackViewerChart()
+        this.handleAnswerRedPackViewerChart()
 
-      this.handleAnswerRedPackMoneyViewerChart()
+        this.handleAnswerRedPackMoneyViewerChart()
+      }
 
-      this.handleThisMonthRecvCount();
-      this.handleThisMonthOrderCount();
+      if (this.showOperate) {
+        this.handleThisMonthRecvCount();
+        this.handleThisMonthOrderCount();
+      }
 
     },
     /**
@@ -1501,6 +1561,9 @@ export default {
     },
     // 分析概览
     handleAnalysis(e) {
+      if (!this.showAnalysis) {
+        return;
+      }
 
       let param = this.getParam();
       analysisPreview(param).then(res => {
@@ -1629,6 +1692,9 @@ export default {
       })
     },
     handleViewChartData() {
+      if (!this.viewerChart) {
+        return;
+      }
       let param = this.getParam();
 
       watchEndPlayTrend({ ...param }).then(res => {
@@ -1647,33 +1713,54 @@ export default {
 
     },
     initThisMonthOrderChart() {
+      if (!this.$refs.viewerOrderChart) {
+        return;
+      }
       this.thisMonthOrderChart = echarts.init(this.$refs.viewerOrderChart)
       this.thisMonthOrderChart.setOption(thisMonthOrderCountOption)
     },
     initThisMonthRecvChart() {
+      if (!this.$refs.viewerReceiveChart) {
+        return;
+      }
       this.thisMonthRecvChart = echarts.init(this.$refs.viewerReceiveChart)
       this.thisMonthRecvChart.setOption(thisMonthOrderCountOption)
     },
     initViewerChart() {
+      if (!this.$refs.viewerChart) {
+        return;
+      }
       this.viewerChart = echarts.init(this.$refs.viewerChart)
       this.viewerChart.setOption(viewCharOption)
     },
     initDealerChart() {
+      if (!this.$refs.dealerChart) {
+        return;
+      }
       this.dealerChart = echarts.init(this.$refs.dealerChart)
 
       this.dealerChart.setOption(dealerOption)
     },
     initCourseWatchChart() {
+      if (!this.$refs.courseWatchChart) {
+        return;
+      }
       this.courseWatchChart = echarts.init(this.$refs.courseWatchChart)
 
       this.courseWatchChart.setOption(courseWatchOption)
     },
     initAnswerRedPackViewerChart() {
+      if (!this.$refs.answerRedPackViewerChart) {
+        return;
+      }
       this.answerRedPackViewerChart = echarts.init(this.$refs.answerRedPackViewerChart)
 
       this.answerRedPackViewerChart.setOption(redPackageOption)
     },
     initAnswerRedPackMoneyViewerChart() {
+      if (!this.$refs.answerRedPackMoneyViewerChart) {
+        return;
+      }
       this.answerRedPackMoneyViewerChart = echarts.init(this.$refs.answerRedPackMoneyViewerChart)
 
       this.answerRedPackMoneyViewerChart.setOption(lineChartOption)