xinyouhe/art-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改 仪表盘页面样式

Browse Source
This commit is contained in:
浅念
2025-08-04 18:05:07 +08:00
parent e5548f95e4
commit 7542d80e38
3 changed files with 248 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/img/admin/Vector.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 313 B

src/assets/img/admin/Vector1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 B

src/views/dashboard/console/index.vue
+248 -59
View File
@@ -17,53 +17,73 @@
<!-- 左侧面板 --> <!-- 左侧面板 -->
<div class="left-panel"> <div class="left-panel">
<!-- 总体情况 --> <!-- 总体情况 -->
<div class="summary-section"> <div class="flex-d">
<h3 class="section-title" style="margin-bottom: 10px">总体情况</h3> <!-- <transition name="slide-left"> -->
<div class="summary-grid"> <div class="summary-section" v-show="showallChart">
<div class="summary-item"> <h3 class="section-title" style="margin-bottom: 10px">总体情况</h3>
<div class="summary-number">{{statisticswholedata.totals}}</div> <div class="summary-grid">
<div class="summary-label">总单数</div> <div class="summary-item">
</div> <div class="summary-number">{{ statisticswholedata.totals }}</div>
<div class="summary-item"> <div class="summary-label">总单数</div>
<div class="summary-number">{{statisticswholedata.channelCount}}</div> </div>
<div class="summary-label">渠道总数</div> <div class="summary-item">
</div> <div class="summary-number">{{ statisticswholedata.channelCount }}</div>
<div class="summary-item"> <div class="summary-label">渠道总数</div>
<div class="summary-number">{{statisticswholedata.todayCount}}</div> </div>
<div class="summary-label">今日录单</div> <div class="summary-item">
</div> <div class="summary-number">{{ statisticswholedata.todayCount }}</div>
<div class="summary-item"> <div class="summary-label">今日录单</div>
<div class="summary-number">{{statisticswholedata.releaseCount}}</div> </div>
<div class="summary-label">发布人总数</div> <div class="summary-item">
</div> <div class="summary-number">{{ statisticswholedata.releaseCount }}</div>
<div class="summary-item"> <div class="summary-label">发布人总数</div>
<div class="summary-number">{{statisticswholedata.countryCount}}</div> </div>
<div class="summary-label">国家总数</div> <div class="summary-item">
</div> <div class="summary-number">{{ statisticswholedata.countryCount }}</div>
<div class="summary-item"> <div class="summary-label">国家总数</div>
<div class="summary-number">{{statisticswholedata.trackCount}}</div> </div>
<div class="summary-label">跟单人总数</div> <div class="summary-item">
<div class="summary-number">{{ statisticswholedata.trackCount }}</div>
<div class="summary-label">跟单人总数</div>
</div>
</div>
</div> </div>
<!-- </transition> -->
<div class="icons1" v-if="!showallChart" @click="showallChart = !showallChart" >
<img src="@/assets/img/admin/Vector1.png" alt="" />
</div>
<div class="icons" v-if="showallChart" @click="showallChart = !showallChart" >
<img src="@/assets/img/admin/Vector.png" alt=""/>
</div> </div>
</div> </div>
<!-- 发布人计数 --> <!-- 发布人计数 -->
<div class="chart-section"> <div class="flex-d">
<div class="chart-header"> <!-- <transition name="slide-left"> -->
<h3 class="section-title">询单计数</h3> <div class="chart-section" v-show="showPublisherChart">
<div class="chart-controls"> <div class="chart-header">
<ElSelect <h3 class="section-title">询单计数</h3>
v-model="publisherFilter" <div class="chart-controls">
class="filter-select" <ElSelect
@change="updatePublisherChart" v-model="publisherFilter"
> class="filter-select"
<ElOption label="全部" value="0" /> @change="updatePublisherChart"
<ElOption label="合塑" value="1" /> >
<ElOption label="派卡" value="3" /> <ElOption label="全部" value="0" />
</ElSelect> <ElOption label="合塑" value="1" />
<ElOption label="派卡" value="3" />
</ElSelect>
</div>
</div>
<div ref="publisherChartRef" class="chart-container"></div>
</div> </div>
<!-- </transition> -->
<div class="icons1" v-if="!showPublisherChart" @click="togglePublisherChart" >
<img src="@/assets/img/admin/Vector1.png" alt="" />
</div>
<div class="icons" v-if="showPublisherChart" @click="togglePublisherChart" >
<img src="@/assets/img/admin/Vector.png" alt=""/>
</div> </div>
<div ref="publisherChartRef" class="chart-container"></div>
</div> </div>
<!-- 跟单人计数显示/隐藏按钮，单独放置 --> <!-- 跟单人计数显示/隐藏按钮，单独放置 -->
<div class="show-chart-btn"> <div class="show-chart-btn">
@@ -76,23 +96,47 @@
<!-- 右侧面板 --> <!-- 右侧面板 -->
<div class="right-panel"> <div class="right-panel">
<!-- 各渠道计数 --> <!-- 各渠道计数 -->
<div class="chart-section"> <div class="flex-d-r">
<h3 class="section-title" style="margin-bottom: 10px">各渠道计数</h3> <!-- <transition name="slide-right"> -->
<div ref="channelChartRef" class="chart-container"></div>
<div class="icons" v-if="showchannelChart" @click="toggleshowchannelChart">
<img src="@/assets/img/admin/Vector1.png" alt=""/>
</div>
<div class="chart-section" v-show="showchannelChart">
<h3 class="section-title" style="margin-bottom: 10px">各渠道计数</h3>
<div ref="channelChartRef" class="chart-container"></div>
</div>
<div class="icons1" v-if="!showchannelChart" @click="toggleshowchannelChart">
<img src="@/assets/img/admin/Vector.png" alt="" />
</div>
<!-- </transition> -->
</div> </div>
<!-- 每日录单 --> <!-- 每日录单 -->
<div class="chart-section"> <div class="flex-d-r">
<h3 class="section-title" style="line-height: 36px">每日录单</h3> <div class="icons" v-if="showOrdersChart" @click="toggleOrdersChart">
<div ref="dailyOrdersChartRef" class="chart-container"></div> <img src="@/assets/img/admin/Vector1.png" alt=""/>
</div>
<!-- <transition name="slide-right"> -->
<div class="chart-section" v-show="showOrdersChart">
<h3 class="section-title" style="line-height: 36px">每日录单</h3>
<div ref="dailyOrdersChartRef" class="chart-container"></div>
</div>
<!-- </transition> -->
<div class="icons1" v-if="!showOrdersChart" @click="toggleOrdersChart">
<img src="@/assets/img/admin/Vector.png" alt="" />
</div>
</div> </div>
</div> </div>
<!-- 跟单人计数图表区域 --> <!-- 跟单人计数图表区域 -->
<div class="full-width-chart-section" v-show="showFollowUpChart"> <transition name="slide-up">
<div class="chart-header"> <div class="full-width-chart-section" v-show="showFollowUpChart">
<h3 class="section-title">跟单人计数</h3> <div class="chart-header">
<h3 class="section-title">跟单人计数</h3>
</div>
<div ref="followUpChartRef" class="full-width-chart-container"></div>
</div> </div>
<div ref="followUpChartRef" class="full-width-chart-container"></div> </transition>
</div>
</div> </div>
</template> </template>
@@ -103,7 +147,11 @@
import worldGeoJson from '@/assets/geo/world.json' import worldGeoJson from '@/assets/geo/world.json'
import { manageService } from '@/api/adminApi' import { manageService } from '@/api/adminApi'
defineOptions({ name: 'DataStatistics' }) defineOptions({ name: 'DataStatistics' })
// 图表显示状态
const showallChart = ref(true)
const showchannelChart = ref(true)
const showPublisherChart = ref(true)
const showOrdersChart = ref(true)
// Define interfaces for the data structures // Define interfaces for the data structures
interface CountryData { interface CountryData {
name: string name: string
@@ -191,7 +239,49 @@
weekday: 'long' weekday: 'long'
}) })
} }
// 切换发布人图表显示状态
function togglePublisherChart() {
showPublisherChart.value = !showPublisherChart.value
if (showPublisherChart.value) {
nextTick(() => {
setTimeout(() => {
initPublisherChart(inquirycountdata)
// 关键：强制resize一次，确保图表自适应容器
setTimeout(() => {
publisherChart?.resize()
}, 50)
}, 100)
})
}
}
function toggleshowchannelChart() {
showchannelChart.value = !showchannelChart.value
if (showchannelChart.value) {
nextTick(() => {
setTimeout(() => {
initChannelChart(channelcountdata)
// 关键：强制resize一次，确保图表自适应容器
setTimeout(() => {
channelChart?.resize()
}, 50)
}, 100)
})
}
}
function toggleOrdersChart() {
showOrdersChart.value = !showOrdersChart.value
if (showOrdersChart.value) {
nextTick(() => {
setTimeout(() => {
initDailyOrdersChart(daycountdata)
// 关键：强制resize一次，确保图表自适应容器
setTimeout(() => {
dailyOrdersChart?.resize()
}, 50)
}, 100)
})
}
}
// 切换跟单人图表显示状态 // 切换跟单人图表显示状态
function toggleFollowUpChart() { function toggleFollowUpChart() {
showFollowUpChart.value = !showFollowUpChart.value showFollowUpChart.value = !showFollowUpChart.value
@@ -1005,6 +1095,65 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.flex-d {
display: flex;
align-items: center;
height: 274px;
.icons {
padding: 10px 5px;
background: rgba(93, 135, 255, 0.1);
border-radius:0px 5px 5px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.icons1 {
padding: 10px 5px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
cursor: pointer;
}
// .icons i {
// font-size: 26px;
// font-weight: bold;
// color: #5d87ff;
// cursor: pointer;
// }
.chart-section {
flex: 1;
}
}
.flex-d-r {
display: flex;
align-items: center;
height: 274px;
justify-content: end;
.icons {
text-align: right;
padding: 10px 5px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
background: #fff;
border-radius:5px 0px 0px 5px;
cursor: pointer;
}
.icons1 {
text-align: right;
padding: 10px 5px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
cursor: pointer;
}
.icons i {
font-size: 26px;
font-weight: bold;
color: #5d87ff;
cursor: pointer;
}
.chart-section {
flex: 1;
}
}
.data-statistics { .data-statistics {
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
@@ -1095,7 +1244,7 @@
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3); // border: 1px solid rgba(255, 255, 255, 0.3);
.chart-header { .chart-header {
display: flex; display: flex;
@@ -1153,7 +1302,7 @@
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3); // border: 1px solid rgba(255, 255, 255, 0.3);
.section-title { .section-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
@@ -1193,7 +1342,7 @@
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3); // border: 1px solid rgba(255, 255, 255, 0.3);
.chart-header { .chart-header {
display: flex; display: flex;
@@ -1250,10 +1399,50 @@
width: 100%; width: 100%;
top: auto; top: auto;
right: auto; right: auto;
}
.summary-grid { .summary-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
}
} }
} }
// 丝滑动画定义
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active,
.slide-up-enter-active,
.slide-up-leave-active {
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-left-enter-from {
transform: translateX(-100%);
opacity: 0;
}
.slide-left-leave-to {
transform: translateX(-100%);
opacity: 0;
}
.slide-right-enter-from {
transform: translateX(100%);
opacity: 0;
}
.slide-right-leave-to {
transform: translateX(100%);
opacity: 0;
}
.slide-up-enter-from {
transform: translateY(100%);
opacity: 0;
}
.slide-up-leave-to {
transform: translateY(100%);
opacity: 0;
}
</style> </style>