用户统计样式等

src/views/dataStatistics/userStatistics/index.vue

@@ -4,6 +4,9 @@
     <summaryStatistics></summaryStatistics>
     <Search :search="moreSearch" :reset="moreReset">
       <template v-slot:body>
+        <div v-if="rolesIdentify.includes('optimizer')" class="w-full m-3 text-gray-500">
+          *列表统计的是所有小程序对应日期的数据
+        </div>
         <el-form-item label="时间">
           <el-date-picker unlink-panels clearable @change="timeChange" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
             v-model="query.time" type="daterange" :shortcuts="shortcuts" range-separator="To" start-placeholder="开始时间"
@@ -24,136 +27,137 @@
         </el-form-item>
       </template>
       <template v-slot:extra_button>
-        <exportExcel api="statistic/users/list"  v-action="'statistic.UserStatistics.export'" sheet_name="充值统计" :title_obj="titleObj"
-          :extro_params="{ is_all: true, ...query }">
+        <exportExcel api="statistic/users/list" v-action="'statistic.UserStatistics.export'" sheet_name="充值统计"
+          :title_obj="titleObj" :extro_params="{ is_all: true, ...query }">
         </exportExcel>
       </template>
-     
+      <template v-slot:content>
+        <div style="margin:8px 6px;">
+          <el-card shadow="hover" :body-style="{ padding: '20px' }">
+            <div class="stat-wrapper">
+              <div>所选时间段内累计充新增用户数:
+                <span class="ml-2 mr-4 stat">{{ statisticalData.new_user_num || '暂无数据' }}</span>
+              </div>
+              <div>累计新用户充值人数:
+                <span class="ml-2 mr-4 stat">{{ statisticalData.new_user_recharge_num || '暂无数据' }}</span>
+              </div>
+            </div>
+          </el-card>
+        </div>
+        <div class="table-default">
+          <el-table :data="tableData" class="mt-3" v-loading="loading">
+            <el-table-column prop="date" min-width="120px" label="时间" />
+            <el-table-column prop="username" label="优化师" min-width="160px" />
+            <el-table-column prop="miniprogram_name" label="小程序名称" min-width="160px" />
+            <el-table-column label="当日新增用户数" prop="new_user_num" min-width="160px">
+              <template #header>
+                <div class="flex items-center">
+                  <el-tooltip placement="top">
+                    <template #content>
+                      当天的新增用户<br />
+                    </template>
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                  <span>当日新增用户数</span>
+                </div>
+              </template>
+              <template #default="scope">
+                <div class="wrapper">
+                  <div>{{ scope.row.new_user_num }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="当日新增用户充值人数" prop="pay_count" min-width="180px">
+              <template #header>
+                <div class="flex items-center">
+                  <el-tooltip placement="top">
+                    <template #content>
+                      当日新增用户充值人数<br />
+                    </template>
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                  <span>当日新增用户充值人数</span>
+
+                </div>
+              </template>
+              <template #default="scope">
+                <div class="wrapper">
+                  <div>{{ scope.row.new_user_recharge_num }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="当日新增用户充率" prop="recharge_rate" min-width="180px">
+              <template #header>
+                <div class="flex items-center">
+                  <el-tooltip placement="top">
+                    <template #content>
+                      当日新增用户充率<br />
+                    </template>
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                  <span>当日新增用户充率</span>
+
+                </div>
+              </template>
+              <template #default="scope">
+                <div class="wrapper">
+                  <div>{{ scope.row.recharge_rate }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="当日新增用户充总额" prop="new_user_recharge_total" min-width="180px">
+              <template #header>
+                <div class="flex items-center">
+                  <el-tooltip placement="top">
+                    <template #content>
+                      当日新增用户充总额<br />
+                    </template>
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                  <span>当日新增用户充总额</span>
+
+                </div>
+              </template>
+              <template #default="scope">
+                <div class="wrapper">
+                  <div>{{ scope.row.new_user_recharge_total }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="新增用户人均充值" prop="recharge_mean" min-width="180px">
+              <template #header>
+                <div class="flex items-center">
+                  <el-tooltip placement="top">
+                    <template #content>
+                      新增用户人均充值<br />
+                    </template>
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                  <span>新增用户人均充值</span>
+
+                </div>
+              </template>
+              <template #default="scope">
+                <div class="wrapper">
+                  <div>{{ scope.row.recharge_mean }}</div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <Paginate />
+        </div>
+      </template>
     </Search>
-	<div style="margin:8px 6px;">
-	          <el-card shadow="hover" :body-style="{ padding: '20px' }">
-	            <div class="stat-wrapper">
-	              <div>所选时间段内累计充新增用户数:
-	                <span class="ml-2 mr-4 stat">{{ statisticalData.new_user_num || '暂无数据' }}</span>
-	              </div>
-	              <div>累计新用户充值人数:
-	                <span class="ml-2 mr-4 stat">{{ statisticalData.new_user_recharge_num || '暂无数据' }}</span>
-	              </div>
-	            </div>
-	          </el-card>
-	        </div>
-	        <div class="table-default" >
-	          <el-table :data="tableData" class="mt-3" v-loading="loading">
-	            <el-table-column prop="date" min-width="120px" label="时间" />
-	            <el-table-column prop="username" label="优化师" min-width="160px" />
-	            <el-table-column prop="miniprogram_name" label="小程序名称" min-width="160px" />
-	            <el-table-column label="当日新增用户数" prop="new_user_num" min-width="160px">
-	              <template #header>
-	                <div class="flex items-center">
-						<el-tooltip placement="top">
-						  <template #content>
-						    当天的新增用户<br />
-						  </template>
-						  <el-icon>
-						    <InfoFilled />
-						  </el-icon>
-						</el-tooltip>
-	                  <span>当日新增用户数</span>
-	                </div>
-	              </template>
-	              <template #default="scope">
-	                <div class="wrapper">
-	                  <div>{{ scope.row.new_user_num }}</div>
-	                </div>
-	              </template>
-	            </el-table-column>
-	            <el-table-column label="当日新增用户充值人数" prop="pay_count" min-width="180px">
-	              <template #header>
-	                <div class="flex items-center">
-						<el-tooltip placement="top">
-						  <template #content>
-						    当日新增用户充值人数<br />
-						  </template>
-						  <el-icon>
-						    <InfoFilled />
-						  </el-icon>
-						</el-tooltip>
-	                  <span>当日新增用户充值人数</span>
-	                  
-	                </div>
-	              </template>
-	              <template #default="scope">
-	                <div class="wrapper">
-	                  <div>{{ scope.row.new_user_recharge_num }}</div>
-	                </div>
-	              </template>
-	            </el-table-column>
-	           <el-table-column label="当日新增用户充率" prop="recharge_rate" min-width="180px">
-	             <template #header>
-	               <div class="flex items-center">
-	           		<el-tooltip placement="top">
-	           		  <template #content>
-	           		    当日新增用户充率<br />
-	           		  </template>
-	           		  <el-icon>
-	           		    <InfoFilled />
-	           		  </el-icon>
-	           		</el-tooltip>
-	                 <span>当日新增用户充率</span>
-	                 
-	               </div>
-	             </template>
-	             <template #default="scope">
-	               <div class="wrapper">
-	                 <div>{{ scope.row.recharge_rate }}</div>
-	               </div>
-	             </template>
-	           </el-table-column>
-	           	<el-table-column label="当日新增用户充总额" prop="new_user_recharge_total" min-width="180px">
-	           	  <template #header>
-	           	    <div class="flex items-center">
-	           			<el-tooltip placement="top">
-	           			  <template #content>
-	           			    当日新增用户充总额<br />
-	           			  </template>
-	           			  <el-icon>
-	           			    <InfoFilled />
-	           			  </el-icon>
-	           			</el-tooltip>
-	           	      <span>当日新增用户充总额</span>
-	           	      
-	           	    </div>
-	           	  </template>
-	           	  <template #default="scope">
-	           	    <div class="wrapper">
-	           	      <div>{{ scope.row.new_user_recharge_total }}</div>
-	           	    </div>
-	           	  </template>
-	           	</el-table-column>
-				<el-table-column label="新增用户人均充值" prop="recharge_mean" min-width="180px">
-				  <template #header>
-				    <div class="flex items-center">
-						<el-tooltip placement="top">
-						  <template #content>
-						    新增用户人均充值<br />
-						  </template>
-						  <el-icon>
-						    <InfoFilled />
-						  </el-icon>
-						</el-tooltip>
-				      <span>新增用户人均充值</span>
-				      
-				    </div>
-				  </template>
-				  <template #default="scope">
-				    <div class="wrapper">
-				      <div>{{ scope.row.recharge_mean }}</div>
-				    </div>
-				  </template>
-				</el-table-column>		   
-	          </el-table>
-	          <Paginate />
-	        </div>
   </div>
 </template>
 

src/views/dataStatistics/userStatistics/summaryStatistics.vue

@@ -1,190 +1,195 @@
 <template>
-  <div class="flex w-full card-wrapper">
-    <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.todayCharge'">
-      <template #header>
-        <div class="flex items-center justify-between card-header">
-          <div class="flex items-center">
-			  <el-tooltip placement="top">
-			    <template #content>
-			      截至当前时间，今日新增用户数量<br />
-			    </template>
-			    <el-icon>
-			      <InfoFilled />
-			    </el-icon>
-			  </el-tooltip>
-            <span>今日新增用户</span>
+  <div class="w-full card-wrapper">
+    <div v-if="rolesIdentify.includes('optimizer')" class="w-full text-gray-500">
+      *上半部分统计的是当前小程序的数据
+    </div>
+    <div class="flex">
+      <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.todayCharge'">
+        <template #header>
+          <div class="flex items-center justify-between card-header">
+            <div class="flex items-center">
+              <el-tooltip placement="top">
+                <template #content>
+                  截至当前时间，今日新增用户数量<br />
+                </template>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+              </el-tooltip>
+              <span>今日新增用户</span>
+            </div>
+            <p class="text-red-300">{{ timer.seconds }}s后刷新</p>
           </div>
-          <p class="text-red-300">{{ timer.seconds }}s后刷新</p>
-        </div>
-      </template>
-      <div class="money-wrapper">{{ todayChargeData.new_user_num || '0' }}</div>
-      <div class="flex items-center justify-between">
-        <div>
-          <!-- <p class="text-lg font-bold">普通充值</p> -->
-          <div>
-			<el-tooltip placement="top">
-				<template #content>
-				  新增用户中进行充值的人数<br />
-				</template>
-				<el-icon>
-				  <InfoFilled />
-				</el-icon>
-			</el-tooltip>
-            <span class="text-sm">充值人数：</span>
-		
-            <span class="text-base">{{ todayChargeData.new_user_recharge_num || '0' }}人</span>
-          </div>
-          <div>
-            <span class="text-sm">会员充值：</span>
-            <span class="text-base">{{ todayChargeData.recharge_vip_num || '0' }}人</span>
-          </div>
-          <div>
-            <span class="text-sm">普通充值：</span>
-            <span class="text-base">{{ todayChargeData.recharge_coin_num || '0' }}人</span>
-          </div>
-        </div>
-        <div>
-          <!-- <p class="text-lg font-bold">会员充值</p> -->
+        </template>
+        <div class="money-wrapper">{{ todayChargeData.new_user_num || '0' }}</div>
+        <div class="flex items-center justify-between">
           <div>
-			  <el-tooltip placement="top">
-			  	<template #content>
-			  	  新增用户当天充值金额<br />
-			  	</template>
-			  	<el-icon>
-			  	  <InfoFilled />
-			  	</el-icon>
-			  </el-tooltip>
-            <span class="text-sm">充值金额：</span>
-            <span class="text-base">{{ todayChargeData.new_user_recharge_total || '-' }}</span>
-          </div>
-          <div>
-			  <el-tooltip placement="top">
-			  	<template #content>
-			  	  新增用户当天充值金额/新用户当天充值人数<br />
-			  	</template>
-			  	<el-icon>
-			  	  <InfoFilled />
-			  	</el-icon>
-			  </el-tooltip>
-            <span class="text-sm">人均充值：</span>
-            <span class="text-base">{{ todayChargeData.recharge_mean || '-' }}</span>
+            <!-- <p class="text-lg font-bold">普通充值</p> -->
+            <div>
+              <el-tooltip placement="top">
+                <template #content>
+                  新增用户中进行充值的人数<br />
+                </template>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+              </el-tooltip>
+              <span class="text-sm">充值人数：</span>
+
+              <span class="text-base">{{ todayChargeData.new_user_recharge_num || '0' }}人</span>
+            </div>
+            <div>
+              <span class="text-sm">会员充值：</span>
+              <span class="text-base">{{ todayChargeData.recharge_vip_num || '0' }}人</span>
+            </div>
+            <div>
+              <span class="text-sm">普通充值：</span>
+              <span class="text-base">{{ todayChargeData.recharge_coin_num || '0' }}人</span>
+            </div>
           </div>
           <div>
-			  <el-tooltip placement="top">
-			  	<template #content>
-			  	  充值人数/新增用户数<br />
-			  	</template>
-			  	<el-icon>
-			  	  <InfoFilled />
-			  	</el-icon>
-			  </el-tooltip>
-            <span class="text-sm">充值率：</span>
-            <span class="text-base">{{ todayChargeData.recharge_rate || '-' }}</span>
-          </div>
-        </div>
-      </div>
-    </el-card>
-    <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.currentMonthCharge'">
-      <template #header>
-        <div class="flex items-center justify-between card-header">
-          <div class="flex items-center">
-            <span>本月新增用户</span>
-            <el-tooltip placement="top">
-              <template #content>
-                本月截至昨日的累计新增用户数量<br />
-              </template>
-              <el-icon>
-                <InfoFilled />
-              </el-icon>
-            </el-tooltip>
-            <span class="ml-2 text-red-300">(不包含当日)</span>
+            <!-- <p class="text-lg font-bold">会员充值</p> -->
+            <div>
+              <el-tooltip placement="top">
+                <template #content>
+                  新增用户当天充值金额<br />
+                </template>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+              </el-tooltip>
+              <span class="text-sm">充值金额：</span>
+              <span class="text-base">{{ todayChargeData.new_user_recharge_total || '-' }}</span>
+            </div>
+            <div>
+              <el-tooltip placement="top">
+                <template #content>
+                  新增用户当天充值金额/新用户当天充值人数<br />
+                </template>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+              </el-tooltip>
+              <span class="text-sm">人均充值：</span>
+              <span class="text-base">{{ todayChargeData.recharge_mean || '-' }}</span>
+            </div>
+            <div>
+              <el-tooltip placement="top">
+                <template #content>
+                  充值人数/新增用户数<br />
+                </template>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+              </el-tooltip>
+              <span class="text-sm">充值率：</span>
+              <span class="text-base">{{ todayChargeData.recharge_rate || '-' }}</span>
+            </div>
           </div>
         </div>
-      </template>
-      <div class="money-wrapper">{{ currentMonth.new_user_num || '-' }}</div>
-      <div class="flex items-center justify-between">
-        <div>
-          
-          <div>
-            <span class="text-sm">充值人数：</span>
-            <span class="text-base">{{ currentMonth.new_user_recharge_num || '-' }}人</span>
-          </div>
-          <div>
-            <span class="text-sm">会员充值：</span>
-            <span class="text-base">{{ currentMonth.new_user_recharge_vip_num || '-' }}人</span>
+      </el-card>
+      <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.currentMonthCharge'">
+        <template #header>
+          <div class="flex items-center justify-between card-header">
+            <div class="flex items-center">
+              <span>本月新增用户</span>
+              <el-tooltip placement="top">
+                <template #content>
+                  本月截至昨日的累计新增用户数量<br />
+                </template>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+              </el-tooltip>
+              <span class="ml-2 text-red-300">(不包含当日)</span>
+            </div>
           </div>
+        </template>
+        <div class="money-wrapper">{{ currentMonth.new_user_num || '-' }}</div>
+        <div class="flex items-center justify-between">
           <div>
-            <span class="text-sm">普通充值：</span>
-            <span class="text-base">{{ currentMonth.new_user_recharge_coin_num || '-' }}人</span>
-          </div>
-        </div>
-       
-      </div>
-    </el-card>
-    <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.lastMonthCharge'">
-      <template #header>
-        <div class="flex items-center justify-between card-header">
-          <div class="flex items-center">
-            <span>上月新增用户</span>
-            <el-tooltip placement="top">
-              <template #content>
-                上月的累计新增用户数量<br />
-              </template>
-              <el-icon>
-                <InfoFilled />
-              </el-icon>
-            </el-tooltip>
+
+            <div>
+              <span class="text-sm">充值人数：</span>
+              <span class="text-base">{{ currentMonth.new_user_recharge_num || '-' }}人</span>
+            </div>
+            <div>
+              <span class="text-sm">会员充值：</span>
+              <span class="text-base">{{ currentMonth.new_user_recharge_vip_num || '-' }}人</span>
+            </div>
+            <div>
+              <span class="text-sm">普通充值：</span>
+              <span class="text-base">{{ currentMonth.new_user_recharge_coin_num || '-' }}人</span>
+            </div>
           </div>
+
         </div>
-      </template>
-      <div class="money-wrapper">{{ lastMonth.new_user_num || '-' }}</div>
-      <div class="flex items-center justify-between">
-        <div>
-          <div>
-            <span class="text-sm">充值人数：</span>
-            <span class="text-base">{{ lastMonth.new_user_recharge_num || '-' }}人</span>
-          </div>
-          <div>
-            <span class="text-sm">会员充值：</span>
-            <span class="text-base">{{ lastMonth.new_user_recharge_vip_num || '-' }}人</span>
+      </el-card>
+      <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.lastMonthCharge'">
+        <template #header>
+          <div class="flex items-center justify-between card-header">
+            <div class="flex items-center">
+              <span>上月新增用户</span>
+              <el-tooltip placement="top">
+                <template #content>
+                  上月的累计新增用户数量<br />
+                </template>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
           </div>
+        </template>
+        <div class="money-wrapper">{{ lastMonth.new_user_num || '-' }}</div>
+        <div class="flex items-center justify-between">
           <div>
-            <span class="text-sm">普通充值：</span>
-            <span class="text-base">{{ lastMonth.new_user_recharge_coin_num || '-' }}人</span>
+            <div>
+              <span class="text-sm">充值人数：</span>
+              <span class="text-base">{{ lastMonth.new_user_recharge_num || '-' }}人</span>
+            </div>
+            <div>
+              <span class="text-sm">会员充值：</span>
+              <span class="text-base">{{ lastMonth.new_user_recharge_vip_num || '-' }}人</span>
+            </div>
+            <div>
+              <span class="text-sm">普通充值：</span>
+              <span class="text-base">{{ lastMonth.new_user_recharge_coin_num || '-' }}人</span>
+            </div>
           </div>
         </div>
-      </div>
-    </el-card>
-    <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.totalCharge'">
-      <template #header>
-        <div class="flex items-center justify-between card-header">
-          <div class="flex items-center">
-            <span>累计新增用户</span>
-            <el-tooltip placement="top">
-              <template #content>
-                昨日及之前的所有累计新增用户数量<br />
-              </template>
-              <el-icon>
-                <InfoFilled />
-              </el-icon>
-            </el-tooltip>
-            <span class="ml-2 text-red-300">(不包含当日)</span>
+      </el-card>
+      <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.totalCharge'">
+        <template #header>
+          <div class="flex items-center justify-between card-header">
+            <div class="flex items-center">
+              <span>累计新增用户</span>
+              <el-tooltip placement="top">
+                <template #content>
+                  昨日及之前的所有累计新增用户数量<br />
+                </template>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+              </el-tooltip>
+              <span class="ml-2 text-red-300">(不包含当日)</span>
+            </div>
           </div>
-        </div>
-      </template>
-      <div class="money-wrapper">{{ totalData.new_user_total || '-' }}</div>
-      <div class="flex items-center justify-between">
-        <div>
-        
+        </template>
+        <div class="money-wrapper">{{ totalData.new_user_total || '-' }}</div>
+        <div class="flex items-center justify-between">
           <div>
-            <span class="text-sm">累计充值人数：</span>
-            <span class="text-base">{{ totalData.recharge_user_total || '-' }}人</span>
+
+            <div>
+              <span class="text-sm">累计充值人数：</span>
+              <span class="text-base">{{ totalData.recharge_user_total || '-' }}人</span>
+            </div>
+
           </div>
-         
+
         </div>
-       
-      </div>
-    </el-card>
+      </el-card>
+    </div>
   </div>
 </template>
 
@@ -192,6 +197,7 @@
 import { checkPermission } from '@/directives/permission';
 import { InfoFilled } from '@element-plus/icons-vue';
 import { useCountdownTimer } from '@/utils/timerUtils';
+import Cache from '@/support/cache'
 import {
   statisticUserTodayData,
   statisticUserHistoryData,
@@ -201,6 +207,7 @@ const todayChargeData = ref({})
 const currentMonth = ref({})
 const lastMonth = ref({})
 const totalData = ref({})
+const miniprogram_idJ = ref(0)
 const rolesIdentify = inject('rolesIdentify')
 const refreshInterface = (): void => {
   initTodayCharge()
@@ -208,32 +215,24 @@ const refreshInterface = (): void => {
 const timer = useCountdownTimer(60, refreshInterface);
 
 const initTodayCharge = () => {
- 
-  statisticUserTodayData().then(res => {
+
+  statisticUserTodayData({ miniprogram_id: miniprogram_idJ.value }).then(res => {
     todayChargeData.value = res.data
   })
 }
 const init = () => {
-  
-    statisticUserHistoryData().then(res => {
-		currentMonth.value = res.data.month;
-		lastMonth.value = res.data.lastMonth;
-		totalData.value = res.data.history;
-    })
-  // }
-  // if (checkPermission('statistic.chargeTJ.lastMonthCharge')) {
-  //   statisticChargeLastMonthCharge().then(res => {
-  //     lastMonthChargeData.value = res.data;
-  //   })
-  // }
-  // if (checkPermission('statistic.chargeTJ.totalCharge')) {
-  //   statisticChargeTotalCharge().then(res => {
-  //     totalChargeData.value = res.data;
-  //   })
-  // }
+
+  statisticUserHistoryData({ miniprogram_id: miniprogram_idJ.value }).then(res => {
+    currentMonth.value = res.data.month;
+    lastMonth.value = res.data.lastMonth;
+    totalData.value = res.data.history;
+  })
 }
 
 onMounted(() => {
+  if (JSON.parse(Cache.get('nav_data'))?.app.id) {
+    miniprogram_idJ.value = JSON.parse(Cache.get('nav_data'))?.app.id
+  }
   init()
   initTodayCharge()
 });