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
+199 -10
View File
@@ -17,7 +17,9 @@
<!-- 左侧面板 -->
<div class="left-panel">
<!-- 总体情况 -->
<div class="summary-section">
<div class="flex-d">
<!-- <transition name="slide-left"> -->
<div class="summary-section" v-show="showallChart">
<h3 class="section-title" style="margin-bottom: 10px">总体情况</h3>
<div class="summary-grid">
<div class="summary-item">
@@ -46,9 +48,19 @@
</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 class="chart-section">
<div class="flex-d">
<!-- <transition name="slide-left"> -->
<div class="chart-section" v-show="showPublisherChart">
<div class="chart-header">
<h3 class="section-title">询单计数</h3>
<div class="chart-controls">
@@ -65,6 +77,14 @@
</div>
<div ref="publisherChartRef" class="chart-container"></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 class="show-chart-btn">
<button class="toggle-btn" @click="toggleFollowUpChart">
@@ -76,23 +96,47 @@
<!-- 右侧面板 -->
<div class="right-panel">
<!-- 各渠道计数 -->
<div class="chart-section">
<div class="flex-d-r">
<!-- <transition name="slide-right"> -->
<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 class="chart-section">
<div class="flex-d-r">
<div class="icons" v-if="showOrdersChart" @click="toggleOrdersChart">
<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>
<!-- 跟单人计数图表区域 -->
<transition name="slide-up">
<div class="full-width-chart-section" v-show="showFollowUpChart">
<div class="chart-header">
<h3 class="section-title">跟单人计数</h3>
</div>
<div ref="followUpChartRef" class="full-width-chart-container"></div>
</div>
</transition>
</div>
</template>
@@ -103,7 +147,11 @@
import worldGeoJson from '@/assets/geo/world.json'
import { manageService } from '@/api/adminApi'
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
interface CountryData {
name: string
@@ -191,7 +239,49 @@
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() {
showFollowUpChart.value = !showFollowUpChart.value
@@ -1005,6 +1095,65 @@
</script>
<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 {
position: relative;
min-height: 100vh;
@@ -1095,7 +1244,7 @@
border-radius: 12px;
padding: 20px;
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 {
display: flex;
@@ -1153,7 +1302,7 @@
border-radius: 12px;
padding: 20px;
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 {
font-size: 16px;
font-weight: bold;
@@ -1193,7 +1342,7 @@
border-radius: 12px;
padding: 20px;
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 {
display: flex;
@@ -1250,10 +1399,50 @@
width: 100%;
top: auto;
right: auto;
}
.summary-grid {
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>