update
This commit is contained in:
aaron
parent
ffa5802451
commit
54be0f58f2
@ -1,85 +1,89 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dashboard">
|
<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-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
||||||
<a-card class="card-community">
|
<div class="dashboard-card community-card">
|
||||||
<template #title>
|
<div class="card-icon">
|
||||||
<span><home-outlined /> 运营小区数</span>
|
<home-outlined />
|
||||||
</template>
|
</div>
|
||||||
<div class="card-content community-content">
|
<div class="card-info">
|
||||||
<h2 class="community-data">{{ summaryData.community_count || 0 }}</h2>
|
<div class="card-title">运营小区数</div>
|
||||||
<div v-if="summaryData.set_names" class="set-tags">
|
<div class="card-value">{{ summaryData.community_count || 0 }}</div>
|
||||||
<span class="set-label"><environment-outlined /> 片区：</span>
|
<div v-if="summaryData.set_names" class="set-area">
|
||||||
<a-tag v-for="(setName, index) in setNamesList" :key="index" color="blue">
|
<div class="set-header">
|
||||||
{{ setName }}
|
<environment-outlined class="set-icon" />
|
||||||
</a-tag>
|
<span>运营片区</span>
|
||||||
|
</div>
|
||||||
|
<div class="set-tags-container">
|
||||||
|
<span
|
||||||
|
v-for="(setName, index) in setNamesList"
|
||||||
|
:key="index"
|
||||||
|
class="set-tag"
|
||||||
|
>
|
||||||
|
{{ setName }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
||||||
<a-card class="card-orders">
|
<div class="dashboard-card orders-card">
|
||||||
<template #title>
|
<div class="card-icon">
|
||||||
<span><shopping-outlined /> 今日订单数</span>
|
<shopping-outlined />
|
||||||
</template>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-info">
|
||||||
<h2 class="orders-data">{{ summaryData.today_order_count || 0 }}</h2>
|
<div class="card-title">今日订单数</div>
|
||||||
<p v-if="summaryData.yesterday_order_count > 0" class="comparison-rate">
|
<div class="card-value">{{ summaryData.today_order_count || 0 }}</div>
|
||||||
同比昨日
|
<div class="card-footer">
|
||||||
<a-tag :color="getComparisonColor(summaryData.today_order_count, summaryData.yesterday_order_count)">
|
<div class="footer-item">
|
||||||
{{ getComparisonText(summaryData.today_order_count, summaryData.yesterday_order_count) }}
|
|
||||||
</a-tag>
|
|
||||||
</p>
|
|
||||||
<div class="comparison-data">
|
|
||||||
<div>
|
|
||||||
<span>昨日：</span>
|
<span>昨日：</span>
|
||||||
<span>{{ summaryData.yesterday_order_count || 0 }}</span>
|
<span class="highlight">{{ summaryData.yesterday_order_count || 0 }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="footer-item">
|
||||||
<span>总计：</span>
|
<span>总计：</span>
|
||||||
<span>{{ summaryData.total_order_count || 0 }}</span>
|
<span class="highlight">{{ summaryData.total_order_count || 0 }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
||||||
<a-card class="card-sales">
|
<div class="dashboard-card sales-card">
|
||||||
<template #title>
|
<div class="card-icon">
|
||||||
<span><dollar-outlined /> 今日销售金额</span>
|
<dollar-outlined />
|
||||||
</template>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-info">
|
||||||
<h2 class="sales-data">¥ {{ formatAmount(summaryData.today_order_amount) }}</h2>
|
<div class="card-title">今日销售金额</div>
|
||||||
<p v-if="summaryData.yesterday_order_amount > 0" class="comparison-rate">
|
<div class="card-value">¥ {{ formatAmount(summaryData.today_order_amount) }}</div>
|
||||||
同比昨日
|
<div class="card-footer">
|
||||||
<a-tag :color="getComparisonColor(summaryData.today_order_amount, summaryData.yesterday_order_amount)">
|
<div class="footer-item">
|
||||||
{{ getComparisonText(summaryData.today_order_amount, summaryData.yesterday_order_amount) }}
|
|
||||||
</a-tag>
|
|
||||||
</p>
|
|
||||||
<div class="comparison-data">
|
|
||||||
<div>
|
|
||||||
<span>昨日：</span>
|
<span>昨日：</span>
|
||||||
<span>¥ {{ formatAmount(summaryData.yesterday_order_amount) }}</span>
|
<span class="highlight">¥ {{ formatAmount(summaryData.yesterday_order_amount) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="footer-item">
|
||||||
<span>总计：</span>
|
<span>总计：</span>
|
||||||
<span>¥ {{ formatAmount(summaryData.total_order_amount) }}</span>
|
<span class="highlight">¥ {{ formatAmount(summaryData.total_order_amount) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
|
||||||
<!-- 小区列表 -->
|
<!-- 小区列表 -->
|
||||||
<a-card title="管理小区列表" style="margin-top: 16px">
|
<div class="table-container">
|
||||||
<template #extra>
|
<div class="table-header">
|
||||||
<a-button type="primary" @click="refreshData">
|
<div class="table-title">
|
||||||
<reload-outlined style="color: #fff;" />
|
<home-outlined />
|
||||||
|
<span>管理小区列表</span>
|
||||||
|
</div>
|
||||||
|
<a-button type="primary" @click="refreshData" class="refresh-button">
|
||||||
|
<reload-outlined />
|
||||||
刷新
|
刷新
|
||||||
</a-button>
|
</a-button>
|
||||||
</template>
|
</div>
|
||||||
<a-table
|
<a-table
|
||||||
:dataSource="communityList"
|
:dataSource="communityList"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
@ -93,43 +97,44 @@
|
|||||||
onChange: handlePageChange,
|
onChange: handlePageChange,
|
||||||
onShowSizeChange: handlePageSizeChange
|
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="小区ID" dataIndex="community_id" key="community_id" width="100px" />
|
||||||
<a-table-column title="小区名称" dataIndex="community_name" key="community_name">
|
<a-table-column title="小区名称" dataIndex="community_name" key="community_name">
|
||||||
<template #default="{ text, record }">
|
<template #default="{ text }">
|
||||||
<span>{{ text }}</span>
|
<span class="community-name">{{ text }}</span>
|
||||||
</template>
|
</template>
|
||||||
</a-table-column>
|
</a-table-column>
|
||||||
<a-table-column title="用户数" key="user_count">
|
<a-table-column title="用户数" key="user_count">
|
||||||
<template #default="{ text, record }">
|
<template #default="{ record }">
|
||||||
{{ record.user_count || 0 }}
|
<span class="user-count">{{ record.user_count || 0 }}</span>
|
||||||
</template>
|
</template>
|
||||||
</a-table-column>
|
</a-table-column>
|
||||||
<a-table-column title="今日订单数" key="today_order_count">
|
<a-table-column title="今日订单数" key="today_order_count">
|
||||||
<template #default="{ text, record }">
|
<template #default="{ record }">
|
||||||
{{ record.today_order_count || 0 }}
|
<span class="order-count today">{{ record.today_order_count || 0 }}</span>
|
||||||
</template>
|
</template>
|
||||||
</a-table-column>
|
</a-table-column>
|
||||||
<a-table-column title="昨日订单数" key="yesterday_order_count">
|
<a-table-column title="昨日订单数" key="yesterday_order_count">
|
||||||
<template #default="{ text, record }">
|
<template #default="{ record }">
|
||||||
{{ record.yesterday_order_count || 0 }}
|
<span class="order-count">{{ record.yesterday_order_count || 0 }}</span>
|
||||||
</template>
|
</template>
|
||||||
</a-table-column>
|
</a-table-column>
|
||||||
<a-table-column title="今日收入" key="today_income">
|
<a-table-column title="今日收入" key="today_income">
|
||||||
<template #default="{ text, record }">
|
<template #default="{ record }">
|
||||||
¥ {{ formatAmount(record.today_income) }}
|
<span class="income today">¥ {{ formatAmount(record.today_income) }}</span>
|
||||||
</template>
|
</template>
|
||||||
</a-table-column>
|
</a-table-column>
|
||||||
<a-table-column title="昨日收入" key="yesterday_income">
|
<a-table-column title="昨日收入" key="yesterday_income">
|
||||||
<template #default="{ text, record }">
|
<template #default="{ record }">
|
||||||
¥ {{ formatAmount(record.yesterday_income) }}
|
<span class="income">¥ {{ formatAmount(record.yesterday_income) }}</span>
|
||||||
</template>
|
</template>
|
||||||
</a-table-column>
|
</a-table-column>
|
||||||
<a-table-column title="操作" key="action" width="120px" align="center">
|
<a-table-column title="操作" key="action" width="120px" align="center">
|
||||||
<template #default="{ record }">
|
<template #default="{ record }">
|
||||||
<a-button
|
<a-button
|
||||||
type="link"
|
type="primary"
|
||||||
size="small"
|
size="small"
|
||||||
@click="viewCommunityDetail(record.community_id)"
|
@click="viewCommunityDetail(record.community_id)"
|
||||||
class="detail-button"
|
class="detail-button"
|
||||||
@ -140,7 +145,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</a-table-column>
|
</a-table-column>
|
||||||
</a-table>
|
</a-table>
|
||||||
</a-card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -297,9 +302,166 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.dashboard {
|
.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 {
|
.card-content {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
@ -413,44 +575,134 @@ export default {
|
|||||||
transform: translateX(3px);
|
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 {
|
.detail-button {
|
||||||
padding: 0 4px;
|
padding: 0 12px;
|
||||||
height: auto;
|
height: 32px;
|
||||||
|
border-radius: 6px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 0 auto;
|
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 {
|
.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>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user