update
This commit is contained in:
ylj20011123
parent
43c76f2f6b
commit
24cb57ea15
@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<view class="supplier-category">
|
||||
<!-- 品类销量排行 -->
|
||||
<view class="chart-title">品类销量排行</view>
|
||||
<view class="ranking-list">
|
||||
<view v-for="(item, index) in categoryRanking" :key="index" class="ranking-item">
|
||||
<view class="ranking-index"
|
||||
:class="['rank-' + (index + 1), index === 0 ? 'rank-gold' : index === 1 ? 'rank-silver' : index === 2 ? 'rank-bronze' : '']">
|
||||
{{ index + 1 }}</view>
|
||||
<view class="ranking-content">
|
||||
<text class="ranking-name">{{ item.name }}</text>
|
||||
<view class="ranking-bar">
|
||||
<view class="ranking-progress" :style="{ width: item.percentage + '%' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ranking-value">
|
||||
<text class="ranking-amount">¥{{ formatAmount(item.amount) }}</text>
|
||||
<text class="ranking-percent">{{ item.percentage }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 库存预警 -->
|
||||
<view class="alert-cards">
|
||||
<view class="alert-card-item slow">
|
||||
<view class="alert-card-icon">📦</view>
|
||||
<view class="alert-card-content">
|
||||
<text class="alert-card-label">滞销品</text>
|
||||
<text class="alert-card-value">{{ alertData.slowMoving || 0 }}个</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="alert-card-item shortage">
|
||||
<view class="alert-card-icon">⚠️</view>
|
||||
<view class="alert-card-content">
|
||||
<text class="alert-card-label">缺货风险</text>
|
||||
<text class="alert-card-value">{{ alertData.shortage || 0 }}个</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 库存周转率 -->
|
||||
<view class="chart-title">库存周转率</view>
|
||||
<view class="chart-section">
|
||||
<view class="chart-container">
|
||||
<ChartLoading v-if="isLoading" text="数据加载中..." />
|
||||
<QiunDataCharts v-else type="column" :opts="turnoverOpts" :chartData="turnoverData" :canvas2d="true"
|
||||
:inScrollView="true" canvasId="turnoverChart" tooltipFormat="turnoverChart" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||||
import ChartLoading from './ChartLoading.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
QiunDataCharts,
|
||||
ChartLoading
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
categoryRanking: [
|
||||
{ name: '食品饮料', amount: 1568000, percentage: 100 },
|
||||
{ name: '日用百货', amount: 1285000, percentage: 82 },
|
||||
{ name: '汽车用品', amount: 982000, percentage: 63 },
|
||||
{ name: '文化用品', amount: 763000, percentage: 49 },
|
||||
{ name: '其他商品', amount: 456000, percentage: 29 }
|
||||
],
|
||||
alertData: {
|
||||
slowMoving: 23,
|
||||
shortage: 5
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
selectTime: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 库存周转率数据
|
||||
turnoverData() {
|
||||
return {
|
||||
categories: ['食品', '日用', '汽车', '文化', '其他'],
|
||||
series: [{
|
||||
name: '周转天数',
|
||||
data: [8, 12, 15, 18, 25]
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
// 库存周转率配置
|
||||
turnoverOpts() {
|
||||
return {
|
||||
color: ['#1890FF'],
|
||||
padding: [15, 15, 15, 15],
|
||||
dataLabel: true,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
showTitle: true,
|
||||
data: [{
|
||||
min: 0,
|
||||
title: '周转天数',
|
||||
titleFontSize: 12,
|
||||
titleOffsetY: -5
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: 'group',
|
||||
width: 15,
|
||||
barBorderCircle: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async loadData() {
|
||||
this.isLoading = true
|
||||
setTimeout(() => {
|
||||
this.isLoading = false
|
||||
}, 500)
|
||||
},
|
||||
|
||||
// 格式化金额
|
||||
formatAmount(amount) {
|
||||
if (!amount && amount !== 0) return '0'
|
||||
return Number(amount).toLocaleString('zh-CN')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@text-primary: #333;
|
||||
@text-secondary: #666;
|
||||
@bg-white: #ffffff;
|
||||
|
||||
.supplier-category {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.ranking-list {
|
||||
background: @bg-white;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.ranking-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-index {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
background: #E8E8E8;
|
||||
color: @text-primary;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.rank-gold {
|
||||
background: linear-gradient(135deg, #FFD700, #FFA500);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.rank-silver {
|
||||
background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.rank-bronze {
|
||||
background: linear-gradient(135deg, #CD7F32, #B8860B);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ranking-name {
|
||||
font-size: 26rpx;
|
||||
color: @text-primary;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.ranking-bar {
|
||||
width: 100%;
|
||||
height: 16rpx;
|
||||
background: #F0F0F0;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ranking-progress {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #9B7EDE, #B794F4);
|
||||
border-radius: 8rpx;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.ranking-value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.ranking-amount {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
}
|
||||
|
||||
.ranking-percent {
|
||||
font-size: 22rpx;
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
.alert-cards {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.alert-card-item {
|
||||
flex: 1;
|
||||
background: @bg-white;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
text-align: center;
|
||||
|
||||
&.slow {
|
||||
border-left: 6rpx solid #FAAD14;
|
||||
}
|
||||
|
||||
&.shortage {
|
||||
border-left: 6rpx solid #FF4D4F;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-card-icon {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.alert-card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.alert-card-label {
|
||||
font-size: 24rpx;
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
.alert-card-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
background: @bg-white;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 24rpx 0;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<view class="supplier-cooperation">
|
||||
<!-- 合作时长分布 -->
|
||||
<view class="chart-title">合作时长分布</view>
|
||||
<view class="chart-section">
|
||||
<view class="chart-container">
|
||||
<ChartLoading v-if="isLoading" text="数据加载中..." />
|
||||
<QiunDataCharts v-else type="pie" :opts="durationPieOpts" :chartData="durationPieData" :canvas2d="true"
|
||||
:inScrollView="true" canvasId="durationPieChart" tooltipFormat="durationPieChart" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 供应商依赖度 -->
|
||||
<view class="chart-title">TOP5供应商依赖度</view>
|
||||
<view class="chart-section">
|
||||
<view class="chart-container">
|
||||
<ChartLoading v-if="isLoading" text="数据加载中..." />
|
||||
<QiunDataCharts v-else type="column" :opts="dependencyOpts" :chartData="dependencyData" :canvas2d="true"
|
||||
:inScrollView="true" canvasId="dependencyChart" tooltipFormat="dependencyChart" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 合作统计卡片 -->
|
||||
<view class="cooperation-cards">
|
||||
<view class="cooperation-card long-term">
|
||||
<view class="cooperation-icon">🤝</view>
|
||||
<view class="cooperation-content">
|
||||
<text class="cooperation-title">长期合作</text>
|
||||
<view class="cooperation-value">
|
||||
<text class="cooperation-number">{{ cooperationData.longTerm || 0 }}</text>
|
||||
<text class="cooperation-unit">个</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cooperation-card new-supplier">
|
||||
<view class="cooperation-icon">✨</view>
|
||||
<view class="cooperation-content">
|
||||
<text class="cooperation-title">新增供应商</text>
|
||||
<view class="cooperation-value">
|
||||
<text class="cooperation-number">{{ cooperationData.newSuppliers || 0 }}</text>
|
||||
<text class="cooperation-unit">个</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||||
import ChartLoading from './ChartLoading.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
QiunDataCharts,
|
||||
ChartLoading
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
cooperationData: {
|
||||
longTerm: 68,
|
||||
newSuppliers: 15
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
selectTime: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 合作时长分布数据
|
||||
durationPieData() {
|
||||
return {
|
||||
series: [{
|
||||
data: [
|
||||
{ name: '3年以上', value: 45 },
|
||||
{ name: '1-3年', value: 38 },
|
||||
{ name: '1年以内', value: 45 }
|
||||
]
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
// 合作时长分布配置
|
||||
durationPieOpts() {
|
||||
return {
|
||||
color: ['#9B7EDE', '#52C41A', '#1890FF'],
|
||||
padding: [15, 15, 15, 15],
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
float: 'center',
|
||||
padding: 5,
|
||||
margin: 10
|
||||
},
|
||||
extra: {
|
||||
pie: {
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 0,
|
||||
border: true,
|
||||
borderWidth: 0,
|
||||
borderColor: '#FFFFFF'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 供应商依赖度数据
|
||||
dependencyData() {
|
||||
return {
|
||||
categories: ['供应商A', '供应商B', '供应商C', '供应商D', '供应商E'],
|
||||
series: [{
|
||||
name: '销售占比',
|
||||
data: [28, 22, 18, 15, 12]
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
// 供应商依赖度配置
|
||||
dependencyOpts() {
|
||||
return {
|
||||
color: ['#FF8F6F'],
|
||||
padding: [15, 15, 15, 15],
|
||||
dataLabel: false,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
showTitle: true,
|
||||
data: [{
|
||||
min: 0,
|
||||
max: 30,
|
||||
title: '占比(%)',
|
||||
titleFontSize: 12,
|
||||
titleOffsetY: -5
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: 'group',
|
||||
width: 15,
|
||||
barBorderCircle: true,
|
||||
linearType: 'custom',
|
||||
customColor: ['#FF8F6F', '#FF6B45']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async loadData() {
|
||||
this.isLoading = true
|
||||
setTimeout(() => {
|
||||
this.isLoading = false
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@text-primary: #333;
|
||||
@text-secondary: #666;
|
||||
@bg-white: #ffffff;
|
||||
|
||||
.supplier-cooperation {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
background: @bg-white;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 24rpx 0;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.cooperation-cards {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.cooperation-card {
|
||||
flex: 1;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
|
||||
&.long-term {
|
||||
background: linear-gradient(135deg, #9B7EDE, #B794F4);
|
||||
}
|
||||
|
||||
&.new-supplier {
|
||||
background: linear-gradient(135deg, #1890FF, #40A9FF);
|
||||
}
|
||||
}
|
||||
|
||||
.cooperation-icon {
|
||||
font-size: 48rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cooperation-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cooperation-title {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cooperation-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.cooperation-number {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cooperation-unit {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<view class="supplier-overview">
|
||||
<view class="section-title">供应链概览</view>
|
||||
|
||||
<!-- 核心KPI卡片 -->
|
||||
<view class="metrics-row">
|
||||
<view class="metric-card">
|
||||
<text class="metric-value" style="color: #9B7EDE;">{{ kpiData.totalSuppliers || 0 }}</text>
|
||||
<text class="metric-label">合作供应商/个</text>
|
||||
</view>
|
||||
<view class="metric-card">
|
||||
<text class="metric-value" style="color: #52C41A;">{{ kpiData.avgDeliveryRate || 0 }}%</text>
|
||||
<text class="metric-label">平均送达率</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="metrics-row">
|
||||
<view class="metric-card">
|
||||
<text class="metric-value" style="color: #1890FF;">{{ kpiData.inventoryTurnover || 0 }}</text>
|
||||
<text class="metric-label">库存周转/天</text>
|
||||
</view>
|
||||
<view class="metric-card">
|
||||
<text class="metric-value" style="color: #FF8F6F;">¥{{ formatMoney(kpiData.monthlyPurchase) }}</text>
|
||||
<text class="metric-label">本月采购额</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 供应商类别分布 -->
|
||||
<view class="chart-title">供应商类别分布</view>
|
||||
<view class="chart-section">
|
||||
<view class="chart-container">
|
||||
<!-- 图表加载效果 -->
|
||||
<ChartLoading v-if="isLoading" text="数据加载中..." />
|
||||
<!-- 实际饼图 -->
|
||||
<QiunDataCharts v-else type="pie" :opts="categoryPieOpts" :chartData="categoryPieData" :canvas2d="true"
|
||||
:inScrollView="true" canvasId="supplierCategoryPie" tooltipFormat="supplierCategoryPie" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预警提示 -->
|
||||
<!-- <view class="alert-card">
|
||||
<view class="alert-icon">⚠️</view>
|
||||
<view class="alert-content">
|
||||
<text class="alert-title">预警提示</text>
|
||||
<view class="alert-value">
|
||||
<text class="alert-number">{{ alertData.totalAlerts || 0 }}</text>
|
||||
<text class="alert-unit">个异常</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||||
import ChartLoading from './ChartLoading.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
QiunDataCharts,
|
||||
ChartLoading
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
kpiData: {
|
||||
totalSuppliers: 128,
|
||||
avgDeliveryRate: 95.6,
|
||||
inventoryTurnover: 12,
|
||||
monthlyPurchase: 2800000
|
||||
},
|
||||
alertData: {
|
||||
totalAlerts: 3
|
||||
},
|
||||
categoryData: [
|
||||
{ name: '食品供应商', value: 35 },
|
||||
{ name: '日用品供应商', value: 28 },
|
||||
{ name: '服务类供应商', value: 22 },
|
||||
{ name: '设备供应商', value: 18 },
|
||||
{ name: '其他', value: 25 }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
selectTime: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 供应商类别饼图数据
|
||||
categoryPieData() {
|
||||
return {
|
||||
series: [{
|
||||
data: this.categoryData.filter(item => item.value > 0)
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
// 供应商类别饼图配置
|
||||
categoryPieOpts() {
|
||||
return {
|
||||
color: ['#9B7EDE', '#52C41A', '#1890FF', '#FF8F6F', '#FAAD14'],
|
||||
padding: [15, 15, 15, 15],
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
float: 'center',
|
||||
padding: 5,
|
||||
margin: 10
|
||||
},
|
||||
extra: {
|
||||
pie: {
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
labelWidth: 0,
|
||||
border: true,
|
||||
borderWidth: 0,
|
||||
borderColor: '#FFFFFF'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async loadData() {
|
||||
this.isLoading = true
|
||||
// TODO: 实际API调用
|
||||
setTimeout(() => {
|
||||
this.isLoading = false
|
||||
}, 500)
|
||||
},
|
||||
|
||||
// 格式化金额,添加千分号
|
||||
formatMoney(amount) {
|
||||
if (!amount && amount !== 0) return '0'
|
||||
return Number(amount).toLocaleString('zh-CN')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@text-primary: #333;
|
||||
@text-secondary: #666;
|
||||
@bg-white: #ffffff;
|
||||
|
||||
.supplier-overview {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.metrics-row {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
flex: 1;
|
||||
background: @bg-white;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 24rpx;
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
background: @bg-white;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 24rpx 0;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.alert-card {
|
||||
background: linear-gradient(135deg, #FF8F6F, #FF4D4F);
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
font-size: 48rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.alert-number {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.alert-unit {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<view class="supplier-performance">
|
||||
<!-- 送达率趋势 -->
|
||||
<view class="chart-title">送达率趋势</view>
|
||||
<view class="chart-section">
|
||||
<view class="chart-container">
|
||||
<ChartLoading v-if="isLoading" text="数据加载中..." />
|
||||
<QiunDataCharts v-else type="line" :opts="deliveryTrendOpts" :chartData="deliveryTrendData"
|
||||
:canvas2d="true" :inScrollView="true" canvasId="deliveryTrendChart"
|
||||
:tooltipFormat="formatDeliveryTooltip" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 供应商评分TOP10 -->
|
||||
<view class="chart-title">供应商评分TOP10</view>
|
||||
<view class="chart-section">
|
||||
<view class="chart-container">
|
||||
<ChartLoading v-if="isLoading" text="数据加载中..." />
|
||||
<QiunDataCharts v-else type="bar" :opts="scoreRankOpts" :chartData="scoreRankData" :canvas2d="true"
|
||||
:inScrollView="true" canvasId="scoreRankChart" tooltipFormat="scoreRankChart" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 绩效统计卡片 -->
|
||||
<view class="performance-cards">
|
||||
<view class="performance-card excellent">
|
||||
<view class="performance-icon">✓</view>
|
||||
<view class="performance-content">
|
||||
<text class="performance-title">优秀供应商</text>
|
||||
<view class="performance-value">
|
||||
<text class="performance-number">{{ performanceData.excellent || 0 }}</text>
|
||||
<text class="performance-unit">个</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="performance-card warning">
|
||||
<view class="performance-icon">!</view>
|
||||
<view class="performance-content">
|
||||
<text class="performance-title">待改进</text>
|
||||
<view class="performance-value">
|
||||
<text class="performance-number">{{ performanceData.needImprovement || 0 }}</text>
|
||||
<text class="performance-unit">个</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||||
import ChartLoading from './ChartLoading.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
QiunDataCharts,
|
||||
ChartLoading
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
performanceData: {
|
||||
excellent: 85,
|
||||
needImprovement: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
selectTime: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 送达率趋势数据
|
||||
deliveryTrendData() {
|
||||
return {
|
||||
categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
series: [{
|
||||
name: '送达率',
|
||||
data: [92.5, 93.2, 94.1, 95.3, 94.8, 95.6, 96.2, 95.8, 96.5, 97.1, 96.8, 97.3]
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
// 送达率趋势配置
|
||||
deliveryTrendOpts() {
|
||||
return {
|
||||
color: ['#9B7EDE'],
|
||||
padding: [15, 15, 15, 15],
|
||||
dataLabel: false,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
itemCount: 12,
|
||||
fontSize: 10
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
showTitle: true,
|
||||
data: [{
|
||||
min: 90,
|
||||
max: 100,
|
||||
title: '送达率(%)',
|
||||
titleFontSize: 12,
|
||||
titleOffsetY: -5
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
extra: {
|
||||
line: {
|
||||
type: 'curve',
|
||||
width: 2,
|
||||
activeType: 'hollow'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 供应商评分数据
|
||||
scoreRankData() {
|
||||
return {
|
||||
categories: ['供应商A', '供应商B', '供应商C', '供应商D', '供应商E', '供应商F', '供应商G', '供应商H', '供应商I', '供应商J'],
|
||||
series: [{
|
||||
name: '综合评分',
|
||||
data: [98, 96, 94, 92, 90, 88, 86, 84, 82, 80]
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
// 供应商评分配置
|
||||
scoreRankOpts() {
|
||||
return {
|
||||
color: ['#52C41A'],
|
||||
padding: [15, 15, 15, 15],
|
||||
dataLabel: true,
|
||||
type: 'bar',
|
||||
xAxis: {
|
||||
boundaryGap: 'justify',
|
||||
disableGrid: false,
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitNumber: 5,
|
||||
fontSize: 10
|
||||
},
|
||||
yAxis: {
|
||||
data: [{
|
||||
fontSize: 10
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
extra: {
|
||||
bar: {
|
||||
type: 'group',
|
||||
width: 10,
|
||||
barBorderCircle: true,
|
||||
linearType: 'custom',
|
||||
linearOpacity: 1,
|
||||
customColor: ['#52C41A', '#73D13D']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async loadData() {
|
||||
this.isLoading = true
|
||||
setTimeout(() => {
|
||||
this.isLoading = false
|
||||
}, 500)
|
||||
},
|
||||
|
||||
// 自定义tooltip格式
|
||||
formatDeliveryTooltip(item, category, index, opts) {
|
||||
if (item.data && category) {
|
||||
return `${category} 送达率:${item.data}%`
|
||||
}
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@text-primary: #333;
|
||||
@text-secondary: #666;
|
||||
@bg-white: #ffffff;
|
||||
|
||||
.supplier-performance {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
background: @bg-white;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 24rpx 0;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.performance-cards {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.performance-card {
|
||||
flex: 1;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
|
||||
&.excellent {
|
||||
background: linear-gradient(135deg, #52C41A, #73D13D);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: linear-gradient(135deg, #FF8F6F, #FF4D4F);
|
||||
}
|
||||
}
|
||||
|
||||
.performance-icon {
|
||||
font-size: 48rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.performance-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.performance-title {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.performance-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.performance-number {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.performance-unit {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<view class="supplier-ranking">
|
||||
<!-- 供应商销量TOP10 -->
|
||||
<view class="chart-title">供应商销量TOP10</view>
|
||||
<view class="ranking-cards">
|
||||
<view v-for="(item, index) in supplierRanking" :key="index" class="ranking-card">
|
||||
<view class="ranking-medal">
|
||||
<text v-if="index < 3" class="medal-icon">{{ getMedalIcon(index) }}</text>
|
||||
<text v-else class="medal-number">{{ index + 1 }}</text>
|
||||
</view>
|
||||
<view class="ranking-info">
|
||||
<text class="ranking-supplier-name">{{ item.name }}</text>
|
||||
<view class="ranking-data-row">
|
||||
<view class="data-group">
|
||||
<text class="data-label">销售额:</text>
|
||||
<text class="data-value sales">¥{{ item.sales }}</text>
|
||||
<view class="data-growth" :class="item.growth >= 0 ? 'growth-up' : 'growth-down'">
|
||||
<text class="growth-arrow">{{ item.growth >= 0 ? '↑' : '↓' }}</text>
|
||||
<text class="growth-value">{{ Math.abs(item.growth) }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="data-divider"></view>
|
||||
<view class="data-group">
|
||||
<text class="data-label">销量:</text>
|
||||
<text class="data-value quantity">{{ item.quantity }}</text>
|
||||
<view class="data-growth" :class="item.quantityGrowth >= 0 ? 'growth-up' : 'growth-down'">
|
||||
<text class="growth-arrow">{{ item.quantityGrowth >= 0 ? '↑' : '↓' }}</text>
|
||||
<text class="growth-value">{{ Math.abs(item.quantityGrowth) }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 品类销量TOP5 -->
|
||||
<view class="chart-title">品类销量TOP5</view>
|
||||
<view class="chart-section">
|
||||
<view class="chart-container">
|
||||
<ChartLoading v-if="isLoading" text="数据加载中..." />
|
||||
<QiunDataCharts v-else type="column" :opts="categoryRankOpts" :chartData="categoryRankData"
|
||||
:canvas2d="true" :inScrollView="true" canvasId="categoryRankChart"
|
||||
tooltipFormat="categoryRankChart" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||||
import ChartLoading from './ChartLoading.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
QiunDataCharts,
|
||||
ChartLoading
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
supplierRanking: [
|
||||
{ name: '优质食品供应商', sales: '186.5万', growth: 15.6, quantity: '12,580件', quantityGrowth: 18.2 },
|
||||
{ name: '日用百货批发商', sales: '158.2万', growth: 12.3, quantity: '9,856件', quantityGrowth: 10.5 },
|
||||
{ name: '汽车用品专营店', sales: '142.8万', growth: 8.7, quantity: '8,234件', quantityGrowth: 6.8 },
|
||||
{ name: '文化用品供应商', sales: '128.5万', growth: -2.1, quantity: '7,652件', quantityGrowth: -1.5 },
|
||||
{ name: '特色商品供应商', sales: '115.3万', growth: 18.9, quantity: '6,890件', quantityGrowth: 22.3 },
|
||||
{ name: '进口食品供应商', sales: '98.6万', growth: 6.5, quantity: '5,432件', quantityGrowth: 8.2 },
|
||||
{ name: '地方特产供应商', sales: '86.2万', growth: 22.4, quantity: '4,876件', quantityGrowth: 25.6 },
|
||||
{ name: '快消品批发商', sales: '75.8万', growth: 4.2, quantity: '4,123件', quantityGrowth: 3.8 },
|
||||
{ name: '品牌代理商', sales: '68.5万', growth: -5.3, quantity: '3,654件', quantityGrowth: -6.2 },
|
||||
{ name: '综合供应商', sales: '56.3万', growth: 9.8, quantity: '3,012件', quantityGrowth: 11.5 }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
selectTime: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 品类销量TOP5数据
|
||||
categoryRankData() {
|
||||
return {
|
||||
categories: ['食品饮料', '日用百货', '汽车用品', '文化用品', '其他商品'],
|
||||
series: [{
|
||||
name: '销量',
|
||||
data: [12580, 9856, 8234, 7652, 5432]
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
// 品类销量配置
|
||||
categoryRankOpts() {
|
||||
return {
|
||||
color: ['#9B7EDE'],
|
||||
padding: [15, 15, 15, 15],
|
||||
dataLabel: false,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
scrollShow: true
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
showTitle: true,
|
||||
data: [{
|
||||
min: 0,
|
||||
title: '销量(件)',
|
||||
titleFontSize: 12,
|
||||
titleOffsetY: -5
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: 'group',
|
||||
width: 15,
|
||||
barBorderCircle: true,
|
||||
linearType: 'custom',
|
||||
customColor: ['#9B7EDE', '#B794F4']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async loadData() {
|
||||
this.isLoading = true
|
||||
setTimeout(() => {
|
||||
this.isLoading = false
|
||||
}, 500)
|
||||
},
|
||||
|
||||
getMedalIcon(index) {
|
||||
const medals = ['🥇', '🥈', '🥉']
|
||||
return medals[index] || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@text-primary: #333;
|
||||
@text-secondary: #666;
|
||||
@bg-white: #ffffff;
|
||||
|
||||
.supplier-ranking {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.ranking-cards {
|
||||
background: @bg-white;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.ranking-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-medal {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.medal-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.medal-number {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
background: #F0F0F0;
|
||||
color: @text-secondary;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ranking-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ranking-supplier-name {
|
||||
font-size: 26rpx;
|
||||
color: @text-primary;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.ranking-data-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.data-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.data-label {
|
||||
font-size: 22rpx;
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
|
||||
&.sales {
|
||||
color: #9B7EDE;
|
||||
}
|
||||
|
||||
&.quantity {
|
||||
color: #1890FF;
|
||||
}
|
||||
}
|
||||
|
||||
.data-divider {
|
||||
width: 1rpx;
|
||||
height: 24rpx;
|
||||
background: #E8E8E8;
|
||||
}
|
||||
|
||||
.data-growth {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rpx;
|
||||
padding: 2rpx 6rpx;
|
||||
border-radius: 4rpx;
|
||||
font-size: 18rpx;
|
||||
|
||||
&.growth-up {
|
||||
background: rgba(82, 196, 26, 0.1);
|
||||
color: #52C41A;
|
||||
}
|
||||
|
||||
&.growth-down {
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
color: #FF4D4F;
|
||||
}
|
||||
}
|
||||
|
||||
.growth-arrow {
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
.growth-value {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
background: @bg-white;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 24rpx 0;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@ -125,6 +125,24 @@
|
||||
<FestivalRevenueSumInfo />
|
||||
</view>
|
||||
|
||||
<!-- 供应链生态全景 -->
|
||||
<view v-else-if="tab.key === 'supplierAnalysis'" class="tab-content">
|
||||
<view id="supplier-overview" class="section-anchor"></view>
|
||||
<SupplierOverview :selectTime="selectTime" />
|
||||
|
||||
<view id="supplier-performance" class="section-anchor"></view>
|
||||
<SupplierPerformance :selectTime="selectTime" />
|
||||
|
||||
<view id="supplier-category" class="section-anchor"></view>
|
||||
<SupplierCategory :selectTime="selectTime" />
|
||||
|
||||
<view id="supplier-ranking" class="section-anchor"></view>
|
||||
<SupplierRanking :selectTime="selectTime" />
|
||||
|
||||
<view id="supplier-cooperation" class="section-anchor"></view>
|
||||
<SupplierCooperation :selectTime="selectTime" />
|
||||
</view>
|
||||
|
||||
<!-- 商户电商生态全景 -->
|
||||
<view v-else-if="tab.key === 'mallOperation'" class="tab-content">
|
||||
<view id="member-mall" class="section-anchor"></view>
|
||||
@ -181,6 +199,11 @@ import SupplierListBox from './components/SupplierListBox.vue'
|
||||
import MallOrderStatistics from './components/MallOrderStatistics.vue'
|
||||
import ThisMonthBenefits from './components/ThisMonthBenefits.vue'
|
||||
import AnalysisOfMember from './components/AnalysisOfMember.vue'
|
||||
import SupplierOverview from './components/SupplierOverview.vue'
|
||||
import SupplierPerformance from './components/SupplierPerformance.vue'
|
||||
import SupplierCategory from './components/SupplierCategory.vue'
|
||||
import SupplierRanking from './components/SupplierRanking.vue'
|
||||
import SupplierCooperation from './components/SupplierCooperation.vue'
|
||||
import moment from 'moment'
|
||||
|
||||
|
||||
@ -210,7 +233,12 @@ export default {
|
||||
SupplierListBox,
|
||||
MallOrderStatistics,
|
||||
ThisMonthBenefits,
|
||||
AnalysisOfMember
|
||||
AnalysisOfMember,
|
||||
SupplierOverview,
|
||||
SupplierPerformance,
|
||||
SupplierCategory,
|
||||
SupplierRanking,
|
||||
SupplierCooperation
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -221,6 +249,7 @@ export default {
|
||||
{ name: '运营中心', key: 'business' },
|
||||
{ name: '客群画像', key: 'customerProfile' },
|
||||
{ name: '经营分析', key: 'businessRevenue' },
|
||||
{ name: '供应链生态', key: 'supplierAnalysis' },
|
||||
{ name: '电商生态', key: 'mallOperation' },
|
||||
],
|
||||
// 各个Tab对应的导航栏数据
|
||||
@ -249,6 +278,13 @@ export default {
|
||||
{ id: 'business-structure', name: '业态' },// 业态结构
|
||||
{ id: 'festival-revenue-sum-info', name: '节假日' },// 节假日营收
|
||||
],
|
||||
supplierAnalysis: [
|
||||
{ id: 'supplier-overview', name: '概览' },// 供应商概览
|
||||
{ id: 'supplier-performance', name: '绩效' },// 供应商绩效
|
||||
{ id: 'supplier-category', name: '分类' },// 供应商分类
|
||||
{ id: 'supplier-ranking', name: '排名' },// 供应商排名
|
||||
{ id: 'supplier-cooperation', name: '合作' },// 合作分析
|
||||
],
|
||||
mallOperation: [
|
||||
{ id: 'member-mall', name: '商城' },// 会员商城
|
||||
{ id: 'hot-product-list', name: '榜单' },// 商品榜单
|
||||
@ -263,6 +299,7 @@ export default {
|
||||
business: '#6F86FF',
|
||||
customerProfile: '#FF8F6F',
|
||||
businessRevenue: '#38C9A4',
|
||||
supplierAnalysis: '#9B7EDE',
|
||||
mallOperation: '#F1C84C'
|
||||
},
|
||||
// 当前活动的导航项
|
||||
@ -276,6 +313,7 @@ export default {
|
||||
business: '',
|
||||
customerProfile: '',
|
||||
businessRevenue: '',
|
||||
supplierAnalysis: '',
|
||||
mallOperation: ''
|
||||
},
|
||||
tabScrollPosition: 0,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user