update
This commit is contained in:
aaron
parent
ffa5802451
commit
54be0f58f2
@ -1,85 +1,89 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<!-- 汇总卡片 -->
|
||||
<a-row :gutter="16">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
||||
<a-card class="card-community">
|
||||
<template #title>
|
||||
<span><home-outlined /> 运营小区数</span>
|
||||
</template>
|
||||
<div class="card-content community-content">
|
||||
<h2 class="community-data">{{ summaryData.community_count || 0 }}</h2>
|
||||
<div v-if="summaryData.set_names" class="set-tags">
|
||||
<span class="set-label"><environment-outlined /> 片区：</span>
|
||||
<a-tag v-for="(setName, index) in setNamesList" :key="index" color="blue">
|
||||
<div class="dashboard-card community-card">
|
||||
<div class="card-icon">
|
||||
<home-outlined />
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-title">运营小区数</div>
|
||||
<div class="card-value">{{ summaryData.community_count || 0 }}</div>
|
||||
<div v-if="summaryData.set_names" class="set-area">
|
||||
<div class="set-header">
|
||||
<environment-outlined class="set-icon" />
|
||||
<span>运营片区</span>
|
||||
</div>
|
||||
<div class="set-tags-container">
|
||||
<span
|
||||
v-for="(setName, index) in setNamesList"
|
||||
:key="index"
|
||||
class="set-tag"
|
||||
>
|
||||
{{ setName }}
|
||||
</a-tag>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
||||
<a-card class="card-orders">
|
||||
<template #title>
|
||||
<span><shopping-outlined /> 今日订单数</span>
|
||||
</template>
|
||||
<div class="card-content">
|
||||
<h2 class="orders-data">{{ summaryData.today_order_count || 0 }}</h2>
|
||||
<p v-if="summaryData.yesterday_order_count > 0" class="comparison-rate">
|
||||
同比昨日
|
||||
<a-tag :color="getComparisonColor(summaryData.today_order_count, summaryData.yesterday_order_count)">
|
||||
{{ getComparisonText(summaryData.today_order_count, summaryData.yesterday_order_count) }}
|
||||
</a-tag>
|
||||
</p>
|
||||
<div class="comparison-data">
|
||||
<div>
|
||||
<div class="dashboard-card orders-card">
|
||||
<div class="card-icon">
|
||||
<shopping-outlined />
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-title">今日订单数</div>
|
||||
<div class="card-value">{{ summaryData.today_order_count || 0 }}</div>
|
||||
<div class="card-footer">
|
||||
<div class="footer-item">
|
||||
<span>昨日：</span>
|
||||
<span>{{ summaryData.yesterday_order_count || 0 }}</span>
|
||||
<span class="highlight">{{ summaryData.yesterday_order_count || 0 }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="footer-item">
|
||||
<span>总计：</span>
|
||||
<span>{{ summaryData.total_order_count || 0 }}</span>
|
||||
<span class="highlight">{{ summaryData.total_order_count || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
||||
<a-card class="card-sales">
|
||||
<template #title>
|
||||
<span><dollar-outlined /> 今日销售金额</span>
|
||||
</template>
|
||||
<div class="card-content">
|
||||
<h2 class="sales-data">¥ {{ formatAmount(summaryData.today_order_amount) }}</h2>
|
||||
<p v-if="summaryData.yesterday_order_amount > 0" class="comparison-rate">
|
||||
同比昨日
|
||||
<a-tag :color="getComparisonColor(summaryData.today_order_amount, summaryData.yesterday_order_amount)">
|
||||
{{ getComparisonText(summaryData.today_order_amount, summaryData.yesterday_order_amount) }}
|
||||
</a-tag>
|
||||
</p>
|
||||
<div class="comparison-data">
|
||||
<div>
|
||||
<div class="dashboard-card sales-card">
|
||||
<div class="card-icon">
|
||||
<dollar-outlined />
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-title">今日销售金额</div>
|
||||
<div class="card-value">¥ {{ formatAmount(summaryData.today_order_amount) }}</div>
|
||||
<div class="card-footer">
|
||||
<div class="footer-item">
|
||||
<span>昨日：</span>
|
||||
<span>¥ {{ formatAmount(summaryData.yesterday_order_amount) }}</span>
|
||||
<span class="highlight">¥ {{ formatAmount(summaryData.yesterday_order_amount) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="footer-item">
|
||||
<span>总计：</span>
|
||||
<span>¥ {{ formatAmount(summaryData.total_order_amount) }}</span>
|
||||
<span class="highlight">¥ {{ formatAmount(summaryData.total_order_amount) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 小区列表 -->
|
||||
<a-card title="管理小区列表" style="margin-top: 16px">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="refreshData">
|
||||
<reload-outlined style="color: #fff;" />
|
||||
<div class="table-container">
|
||||
<div class="table-header">
|
||||
<div class="table-title">
|
||||
<home-outlined />
|
||||
<span>管理小区列表</span>
|
||||
</div>
|
||||
<a-button type="primary" @click="refreshData" class="refresh-button">
|
||||
<reload-outlined />
|
||||
刷新
|
||||
</a-button>
|
||||
</template>
|
||||
</div>
|
||||
<a-table
|
||||
:dataSource="communityList"
|
||||
:loading="loading"
|
||||
@ -93,43 +97,44 @@
|
||||
onChange: handlePageChange,
|
||||
onShowSizeChange: handlePageSizeChange
|
||||
}"
|
||||
rowKey="community_id"
|
||||
:rowKey="record => record.community_id"
|
||||
class="custom-table"
|
||||
>
|
||||
<a-table-column title="小区ID" dataIndex="community_id" key="community_id" width="100px" />
|
||||
<a-table-column title="小区名称" dataIndex="community_name" key="community_name">
|
||||
<template #default="{ text, record }">
|
||||
<span>{{ text }}</span>
|
||||
<template #default="{ text }">
|
||||
<span class="community-name">{{ text }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="用户数" key="user_count">
|
||||
<template #default="{ text, record }">
|
||||
{{ record.user_count || 0 }}
|
||||
<template #default="{ record }">
|
||||
<span class="user-count">{{ record.user_count || 0 }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="今日订单数" key="today_order_count">
|
||||
<template #default="{ text, record }">
|
||||
{{ record.today_order_count || 0 }}
|
||||
<template #default="{ record }">
|
||||
<span class="order-count today">{{ record.today_order_count || 0 }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="昨日订单数" key="yesterday_order_count">
|
||||
<template #default="{ text, record }">
|
||||
{{ record.yesterday_order_count || 0 }}
|
||||
<template #default="{ record }">
|
||||
<span class="order-count">{{ record.yesterday_order_count || 0 }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="今日收入" key="today_income">
|
||||
<template #default="{ text, record }">
|
||||
¥ {{ formatAmount(record.today_income) }}
|
||||
<template #default="{ record }">
|
||||
<span class="income today">¥ {{ formatAmount(record.today_income) }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="昨日收入" key="yesterday_income">
|
||||
<template #default="{ text, record }">
|
||||
¥ {{ formatAmount(record.yesterday_income) }}
|
||||
<template #default="{ record }">
|
||||
<span class="income">¥ {{ formatAmount(record.yesterday_income) }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="操作" key="action" width="120px" align="center">
|
||||
<template #default="{ record }">
|
||||
<a-button
|
||||
type="link"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="viewCommunityDetail(record.community_id)"
|
||||
class="detail-button"
|
||||
@ -140,7 +145,7 @@
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -297,9 +302,166 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
padding: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 新的卡片样式 */
|
||||
.dashboard-card {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.community-card .card-icon {
|
||||
background-color: rgba(82, 196, 26, 0.1);
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.orders-card .card-icon {
|
||||
background-color: rgba(24, 144, 255, 0.1);
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.sales-card .card-icon {
|
||||
background-color: rgba(250, 140, 22, 0.1);
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.community-card .card-value {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.orders-card .card-value {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.sales-card .card-value {
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: 500;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.set-area {
|
||||
margin-top: 12px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.set-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.set-icon {
|
||||
color: #52c41a;
|
||||
margin-right: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.set-tags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.set-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
/* 移除旧的片区样式 */
|
||||
.set-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.set-label {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.set-label .anticon {
|
||||
margin-right: 4px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.set-tags .ant-tag {
|
||||
margin-right: 0;
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 移除旧的卡片样式 */
|
||||
.card-content {
|
||||
text-align: center;
|
||||
min-height: 100px;
|
||||
@ -413,44 +575,134 @@ export default {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.set-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.set-label {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.set-label .anticon {
|
||||
margin-right: 4px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.set-tags .ant-tag {
|
||||
margin-right: 0;
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail-button {
|
||||
padding: 0 4px;
|
||||
height: auto;
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
background-color: #1890ff;
|
||||
border: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.detail-button:hover {
|
||||
background-color: #40a9ff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
|
||||
}
|
||||
|
||||
.detail-button .anticon {
|
||||
margin-right: 4px;
|
||||
margin-right: 6px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 新的表格样式 */
|
||||
.table-container {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
padding: 0;
|
||||
margin-top: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-title .anticon {
|
||||
margin-right: 12px;
|
||||
font-size: 20px;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.refresh-button .anticon {
|
||||
font-size: 14px;
|
||||
margin-right: 6px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 自定义表格样式 */
|
||||
.custom-table :deep(.ant-table) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-table :deep(.ant-table-thead > tr > th) {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
padding: 16px 16px;
|
||||
}
|
||||
|
||||
.custom-table :deep(.ant-table-tbody > tr > td) {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.custom-table :deep(.ant-table-tbody > tr:hover > td) {
|
||||
background-color: rgba(24, 144, 255, 0.05);
|
||||
}
|
||||
|
||||
.custom-table :deep(.ant-pagination) {
|
||||
margin: 16px 0;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* 单元格数据样式 */
|
||||
.community-name {
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.user-count {
|
||||
color: #722ed1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.order-count {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.order-count.today {
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.income {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.income.today {
|
||||
color: #fa8c16;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user