Browse Source

用户类登录统计-登录数据页面中的3个表中,新增的人数是正数时是绿色,负数是红色,0是黑色。

zhaowenkang/feature-20260206140254-后台AI复盘二期
songjie 4 weeks ago
parent
commit
fc0a09cc7a
  1. 34
      src/views/PlatformData/UserLoginStats.vue

34
src/views/PlatformData/UserLoginStats.vue

@ -106,7 +106,11 @@
<el-table :data="loginTableData1" style="width: 100%" :header-cell-style="headerCellStyle">
<el-table-column prop="channel" label="来源渠道" align="center" />
<el-table-column prop="total" :label="statsTitle + '登录总数'" align="center" />
<el-table-column prop="dailyNew" label="较昨日新增" align="center" />
<el-table-column prop="dailyNew" label="较昨日新增" align="center">
<template #default="scope">
<span :class="getValueColorClass(scope.row.dailyNew)">{{ scope.row.dailyNew }}</span>
</template>
</el-table-column>
<el-table-column prop="percent" label="占比" align="center" />
</el-table>
</div>
@ -117,7 +121,11 @@
<el-table :data="loginTableData2" style="width: 100%" :header-cell-style="headerCellStyle">
<el-table-column prop="channel" label="来源渠道" align="center" />
<el-table-column prop="total" :label="statsTitle + '登录会员数'" align="center" />
<el-table-column prop="dailyNew" label="较昨日新增" align="center" />
<el-table-column prop="dailyNew" label="较昨日新增" align="center">
<template #default="scope">
<span :class="getValueColorClass(scope.row.dailyNew)">{{ scope.row.dailyNew }}</span>
</template>
</el-table-column>
<el-table-column prop="rate" label="会员登录率" align="center" />
</el-table>
</div>
@ -128,7 +136,11 @@
<el-table :data="loginTableData3" style="width: 100%" :header-cell-style="headerCellStyle">
<el-table-column prop="channel" label="来源渠道" align="center" />
<el-table-column prop="total" :label="statsTitle + '登录非网数'" align="center" />
<el-table-column prop="dailyNew" label="较昨日新增" align="center" />
<el-table-column prop="dailyNew" label="较昨日新增" align="center">
<template #default="scope">
<span :class="getValueColorClass(scope.row.dailyNew)">{{ scope.row.dailyNew }}</span>
</template>
</el-table-column>
<el-table-column prop="rate" label="非网登录率" align="center" />
</el-table>
</div>
@ -332,6 +344,18 @@ const getGrowthText = (growthStr) => {
return `${prefix}${arrow} ${value}`;
};
//
const getValueColorClass = (val) => {
if (!val || val === '-') return '';
const strVal = String(val);
if (strVal.startsWith('+')) return 'text-green';
if (strVal.startsWith('-')) return 'text-red';
if (strVal === '0') return 'text-black';
// 0+
if (!isNaN(parseFloat(strVal)) && parseFloat(strVal) > 0) return 'text-green';
return '';
};
//
const formatDate = (date) => {
if (!date) return '';
@ -1199,6 +1223,10 @@ onMounted(() => {
.card-tag.up { color: #52c41a; }
.card-tag.down { color: #ff4d4f; }
.text-red { color: #ff4d4f; font-weight: bold; }
.text-green { color: #52c41a; font-weight: bold; }
.text-black { color: #333; font-weight: bold; }
/* Sections */
.chart-section, .detail-section {
background: #fff;

Loading…
Cancel
Save