|
|
@ -106,7 +106,11 @@ |
|
|
<el-table :data="loginTableData1" style="width: 100%" :header-cell-style="headerCellStyle"> |
|
|
<el-table :data="loginTableData1" style="width: 100%" :header-cell-style="headerCellStyle"> |
|
|
<el-table-column prop="channel" label="来源渠道" align="center" /> |
|
|
<el-table-column prop="channel" label="来源渠道" align="center" /> |
|
|
<el-table-column prop="total" :label="statsTitle + '登录总数'" 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-column prop="percent" label="占比" align="center" /> |
|
|
</el-table> |
|
|
</el-table> |
|
|
</div> |
|
|
</div> |
|
|
@ -117,7 +121,11 @@ |
|
|
<el-table :data="loginTableData2" style="width: 100%" :header-cell-style="headerCellStyle"> |
|
|
<el-table :data="loginTableData2" style="width: 100%" :header-cell-style="headerCellStyle"> |
|
|
<el-table-column prop="channel" label="来源渠道" align="center" /> |
|
|
<el-table-column prop="channel" label="来源渠道" align="center" /> |
|
|
<el-table-column prop="total" :label="statsTitle + '登录会员数'" 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-column prop="rate" label="会员登录率" align="center" /> |
|
|
</el-table> |
|
|
</el-table> |
|
|
</div> |
|
|
</div> |
|
|
@ -128,7 +136,11 @@ |
|
|
<el-table :data="loginTableData3" style="width: 100%" :header-cell-style="headerCellStyle"> |
|
|
<el-table :data="loginTableData3" style="width: 100%" :header-cell-style="headerCellStyle"> |
|
|
<el-table-column prop="channel" label="来源渠道" align="center" /> |
|
|
<el-table-column prop="channel" label="来源渠道" align="center" /> |
|
|
<el-table-column prop="total" :label="statsTitle + '登录非网数'" 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-column prop="rate" label="非网登录率" align="center" /> |
|
|
</el-table> |
|
|
</el-table> |
|
|
</div> |
|
|
</div> |
|
|
@ -332,6 +344,18 @@ const getGrowthText = (growthStr) => { |
|
|
return `${prefix}${arrow} ${value}`; |
|
|
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) => { |
|
|
const formatDate = (date) => { |
|
|
if (!date) return ''; |
|
|
if (!date) return ''; |
|
|
@ -1199,6 +1223,10 @@ onMounted(() => { |
|
|
.card-tag.up { color: #52c41a; } |
|
|
.card-tag.up { color: #52c41a; } |
|
|
.card-tag.down { color: #ff4d4f; } |
|
|
.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 */ |
|
|
/* Sections */ |
|
|
.chart-section, .detail-section { |
|
|
.chart-section, .detail-section { |
|
|
background: #fff; |
|
|
background: #fff; |
|
|
|