ylj/ccy_DIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ylj:309cdacdc94d9310735b5205972759d19b908939
Branches Tags
ylj:main
..
compare: ylj:e9e165827c0f1f2b6fe49d81e6beb0b093188e29
Branches Tags
ylj:main

No commits in common. "309cdacdc94d9310735b5205972759d19b908939" and "e9e165827c0f1f2b6fe49d81e6beb0b093188e29" have entirely different histories.
309cdacdc9 ... e9e165827c

14 changed files with 112 additions and 411 deletions
Show Stats Expand all files Collapse all files

2
pages/DigitalIntelligenceDashboard/components/BrandDetail.vue
View File

@ -38,7 +38,7 @@
<ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 品牌列表内容 -->
<view v-else>
<view class="brand-item" v-for="(item, index) in brandListData.slice(0, 3)" :key="index"
<view class="brand-item" v-for="(item, index) in brandListData" :key="index"
:style="{ marginBottom: index + 1 === brandListData.length ? '0' : '20rpx' }">
<view class=" brand-left">
<image class="brand-icon" :src="item.BRAND_INTRO || defaultImg" mode="aspectFill" />

8
pages/DigitalIntelligenceDashboard/components/BusinessCase.vue
View File

@ -7,7 +7,8 @@
<!-- 营收特征分析图表 -->
<view class="chart-container">
<!-- <view style="width:100%;height: 80rpx;">
<view style="width:100%;height: 80rpx;">
<!-- 选择器 -->
<picker mode="selector" :range="tabList" range-key="label" :value="getCurrentPickerIndex()"
@change="handlePickerChange" class="picker-container">
<view class="picker-display">
@ -15,7 +16,8 @@
<text class="picker-arrow">▼</text>
</view>
</picker>
</view> -->
</view>
<view style="width:100%;height: 400rpx;">
<!-- 图表加载效果 -->
@ -51,7 +53,7 @@ export default {
{ label: "客单量", value: 2 },
{ label: "客单均价", value: 3 }
],
selectTab: 3, // 当前选中的Tab
selectTab: 1, // 当前选中的Tab
// 当前请求来的实际数据
realData: {},

63
pages/DigitalIntelligenceDashboard/components/CustomerConsumptionPreferences.vue
View File

@ -2,8 +2,7 @@
<view class="customer-consumption-preferences">
<!-- 客群消费偏好标题 -->
<view class="section-header">
<!-- <text class="section-title">客群消费偏好</text> -->
<text class="section-title">近10日单品营收Top5</text>
<text class="section-title">客群消费偏好</text>
</view>
<!-- 客群消费偏好图表 -->
@ -63,8 +62,7 @@ export default {
name: '客单占比',
data: this.rawData.seriesData
}
],
]
}
},
@ -108,8 +106,7 @@ export default {
activeBgOpacity: 0.08,
barBorderRadius: [4, 4, 0, 0]
}
},
realData: this.rawData.realData
}
}
}
},
@ -132,23 +129,14 @@ export default {
methods: {
// 获取客群消费偏好数据
async handleGetCustomerConsumptionPreferencesData() {
// const req = {
// ProvinceCode: '530000',
// StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'd').format('YYYY-MM-DD') : moment().subtract(1, 'd').format('YYYY-MM-DD'),
// ServerpartId: "" // 暂时为空，如果需要传入服务区ID可以在这里添加
// }
const req = {
startDate: moment().subtract(10, 'd').format('YYYY-MM-DD'),
endDate: moment().format('YYYY-MM-DD'),
ServerpartShopIds: "5670,5527,5548,5519,5520,5547,5531,5546,7078,7248,5522,6974,5549,5529,5528,7069,5521,6033,5530,5502,6972,7092,7091,6971,5759,5760,6968,6969,7089,7088,6970,7090,5747,6044,6045,6046,6047,7156,5746,7160,6950,6952,6031,6026,5715,5716,6056,6052,6050,6053,6057,6051,6058,6054,6939,6940,7064,7065,6936,6937,6948,6949,5736,6954,7129,7134,7132,7133,5733,5735,7208,7212,5732,5740,5741,5742,7357,7356,5738,5739"
ProvinceCode: '530000',
StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'd').format('YYYY-MM-DD') : moment().subtract(1, 'd').format('YYYY-MM-DD'),
ServerpartId: "" // 暂时为空，如果需要传入服务区ID可以在这里添加
}
this.isLoading = true
const data = await this.getBusinessTradeRevenue(req);
this.isLoading = false
// 处理数据
@ -158,7 +146,7 @@ export default {
// 发起API请求获取业态客单偏好数据
async getBusinessTradeRevenue(params) {
const data = await request.$webGet(
"EShangApiMain/Sales/GetCommodityTypeSummary",
"CommercialApi/Revenue/GetBusinessTradeRevenue",
params
);
return data || {}
@ -170,23 +158,13 @@ export default {
let seriesData = []
let realData = []
console.log('datadatadadasda321312312', data);
// 处理数据：获取业态客单偏好数据
// if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
if (data.List && data.List.length > 0) {
let list = data.List.slice(0, 5) // 只取前10条
list = this.sortByKey(list, 'Total_SellAmountRate', 'desc')
console.log('djaksdjaksdjal', list);
if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
let list = data.BusinessTradeRank.slice(0, 5) // 只取前10条
list.forEach((item) => {
// category.push(item.name)
// seriesData.push(Number(item.value))
// realData.push(item.value)
category.push(item.CommodityType_Name.split(']')[1])
seriesData.push(Number(item.Total_SellAmountRate))
realData.push(item.Total_SellAmount)
category.push(item.name)
seriesData.push(Number(item.value))
realData.push(item.value)
})
}
@ -197,24 +175,7 @@ export default {
realData: realData
}
},
/**
* 对象数组排序方法
* @param {Array} arr - 要排序的对象数组
* @param {String} key - 按哪个字段排序
* @param {String} order - 排序方式：'asc' 正序，'desc' 倒序
*/
sortByKey(arr, key, order = 'asc') {
return arr.sort((a, b) => {
const valA = a[key];
const valB = b[key];
if (valA === valB) return 0;
if (order === 'asc') {
return valA > valB ? 1 : -1;
}
return valA < valB ? 1 : -1; // desc
});
}
}
}
</script>

48
pages/DigitalIntelligenceDashboard/components/MemberMall.vue
View File

@ -64,7 +64,7 @@
<view class="member-consumption-item">
<view class="member-consumption-label">会员总销售额/元</view>
<view class="member-consumption-progress2"></view>
<view class="member-consumption-value">{{ memberData.totalSalesAmount }}</view>
<view class="member-consumption-value">{{ formatMoney(memberData.totalSalesAmount || 0) }}</view>
</view>
</view>
@ -104,19 +104,19 @@
</view>
<view class="member-overview-item">
<view class="member-overview-item-top">{{ memberData.avgAmount || 0 }}</view>
<view class="member-overview-item-bottom">人均消费</view>
</view>
<view class="member-overview-item">
<view class="member-overview-item-top">{{ (memberData.repurchaseRate || 0) }}</view>
<view class="member-overview-item-top">{{ formatMoney(memberData.avgAmount || 0) }}</view>
<view class="member-overview-item-bottom">客单价</view>
</view>
<view class="member-overview-item">
<view class="member-overview-item-top">{{ (memberData.totalAmount || 0) + '%' }}</view>
<view class="member-overview-item-top">{{ (memberData.repurchaseRate || 0) + '%' }}</view>
<view class="member-overview-item-bottom">会员复购率</view>
</view>
<view class="member-overview-item">
<view class="member-overview-item-top">{{ formatMoney(memberData.totalAmount || 0) }}</view>
<view class="member-overview-item-bottom">总销售额</view>
</view>
</view>
</view>
</template>
@ -186,22 +186,22 @@ export default {
async getMemberMallData(params) {
// 写死数据返回
const mockData = {
totalMembers: 15071,
monthNewMembers: 146,
newMembersCount: 270,
openCount: 3203,
newPeopleCount: 757,
visitCount: 1914,
consumptionCount: 104,
totalSalesAmount: '47, 550.60',
unionMembers: 1782,
memberRatio: 11.82,
conversionRate: 32.17,
growthRate: 0.97,
buyPeopleCount: 99,
avgAmount: 480.31,
repurchaseRate: 461.66,
totalAmount: 2.02
totalMembers: 12733,
monthNewMembers: 56,
newMembersCount: 94,
openCount: 2716,
newPeopleCount: 624,
visitCount: 884,
consumptionCount: 133,
totalSalesAmount: 27734.10,
unionMembers: 512,
memberRatio: 4.02,
conversionRate: 15.06,
growthRate: 0.74,
buyPeopleCount: 23,
avgAmount: 208.53,
repurchaseRate: 29.17,
totalAmount: 1205.83
}
return mockData || {}

6
pages/DigitalIntelligenceDashboard/components/OverviewOfServiceArea.vue
View File

@ -25,10 +25,6 @@
<text class="metric-value" style="color: #1aba80;">{{ serviceData.WaterStationCount || 0 }}</text>
<text class="metric-label">加水站/座</text>
</view>
<view class="metric-card">
<text class="metric-value" style="color: #1aba80;">24</text>
<text class="metric-label">加油站/座</text>
</view>
</view>
<!-- 服务区类型统计 - 第三行 -->
@ -45,8 +41,6 @@
<text class="metric-value" style="color: #757575;">{{ serviceData.ClosedCount || 0 }}</text>
<text class="metric-label">关停/座</text>
</view>
<view class="metric-card" style="background-color: transparent;box-shadow: none;">
</view>
</view>
<!-- 设备设施分布图 -->

67
pages/DigitalIntelligenceDashboard/components/PreferenceType.vue
View File

@ -58,12 +58,12 @@ export default {
return {
categories: this.rawData.category.map(item => item.name),
series: [
// {
// name: '男性',
// data: this.rawData.seriesDataMan
// },
{
name: '偏好类型',
name: '男性',
data: this.rawData.seriesDataMan
},
{
name: '女性',
data: this.rawData.seriesData
}
]
@ -128,22 +128,15 @@ export default {
methods: {
// 获取偏好类型数据
async handleGetPreferenceTypeData() {
// const req = {
// statisticsType: 1,
// startMonth: this.selectTime ? moment(this.selectTime).startOf('y').format('YYYYMM') : moment().startOf('y').format('YYYYMM'),
// endMonth: this.selectTime ? moment(this.selectTime).format('YYYYMM') : moment().format('YYYYMM'),
// provinceCode: '530000',
// showTradeLevel: 1,
// fromRedis: true
// }
const req = {
ProvinceCode: '530000',
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
statisticsType: 1,
startMonth: this.selectTime ? moment(this.selectTime).startOf('y').format('YYYYMM') : moment().startOf('y').format('YYYYMM'),
endMonth: this.selectTime ? moment(this.selectTime).format('YYYYMM') : moment().format('YYYYMM'),
provinceCode: '530000',
showTradeLevel: 1,
fromRedis: true
}
this.isLoading = true
const data = await this.getCustomerSaleRatio(req);
this.isLoading = false
@ -155,8 +148,7 @@ export default {
// 发起API请求获取客群消费偏好数据
async getCustomerSaleRatio(params) {
const data = await request.$webGet(
// "CommercialApi/Customer/GetCustomerSaleRatio",
"CommercialApi/Revenue/GetBusinessTradeRevenue",
"CommercialApi/Customer/GetCustomerSaleRatio",
params
);
return data || {}
@ -169,36 +161,21 @@ export default {
let seriesDataMan = []
let max = 0
console.log('datadatadatadata', data);
// 处理数据：获取客群消费偏好数据
// let list = data.CustomerSaleList || []
let list = data.BusinessTradeRank || []
let list = data.CustomerSaleList || []
if (list && list.length > 0) {
list.forEach((item) => {
if (Number(item.value) > max) {
max = Number(item.value)
// 计算最大值
if (item.FemaleRatio > max) {
max = item.FemaleRatio
}
if (item.MaleRatio > max) {
max = item.MaleRatio
}
// category.push({ name: item.BusinessTradeName, max: 100 })
category.push({ name: item.name, max: 100 })
seriesData.push(Number(item.value))
// // 计算最大值
// if (item.FemaleRatio > max) {
// max = item.FemaleRatio
// }
// if (item.MaleRatio > max) {
// max = item.MaleRatio
// }
// category.push({ name: item.BusinessTradeName, max: 100 })
// seriesData.push(Number(item.FemaleRatio))
// seriesDataMan.push(Number(item.MaleRatio))
category.push({ name: item.BusinessTradeName, max: 100 })
seriesData.push(Number(item.FemaleRatio))
seriesDataMan.push(Number(item.MaleRatio))
})
}

5
pages/DigitalIntelligenceDashboard/components/RegionalRevenue.vue
View File

@ -163,7 +163,6 @@ export default {
let seriesData = []
let legendData = []
console.log('dadasdjifhdlsk', data);
// 处理数据：获取区域营收占比数据
if (data && data.length > 0) {
@ -181,12 +180,12 @@ export default {
let percentage = Number(((subItem.TotalRevenue.Revenue_Amount / sum) * 100).toFixed(2))
seriesData.push({
name: subItem.Serverpart_Name.split('管理单元')[0],
name: subItem.Serverpart_Name,
value: revenueAmount
})
legendData.push({
name: subItem.Serverpart_Name.split('管理单元')[0],
name: subItem.Serverpart_Name,
value: percentage + '%'
})
})

30
pages/DigitalIntelligenceDashboard/components/SupplierListBox.vue
View File

@ -10,32 +10,28 @@
<!-- 第一行：经销商、品牌方 -->
<view class="supplier-message-box-top">
<view class="supplier-message-box-top-item">
<view class="supplier-message-box-top-item-label">电商及工会福利/家</view>
<!-- <view class="supplier-message-box-top-item-value" style="color: #56BCE6;">{{ supplierObj.dealer ||
0 }}</view> -->
<view class="supplier-message-box-top-item-value" style="color: #56BCE6;">14</view>
<view class="supplier-message-box-top-item-label">经销商/家</view>
<view class="supplier-message-box-top-item-value" style="color: #56BCE6;">{{ supplierObj.dealer ||
0 }}</view>
</view>
<view class="supplier-message-box-top-item">
<view class="supplier-message-box-top-item-label">绿色云品品牌厂家/家</view>
<!-- <view class="supplier-message-box-top-item-value" style="color: #ef5a0d;">{{ supplierObj.brandSide
|| 0 }}</view> -->
<view class="supplier-message-box-top-item-value" style="color: #ef5a0d;">14</view>
<view class="supplier-message-box-top-item-label">品牌方/家</view>
<view class="supplier-message-box-top-item-value" style="color: #ef5a0d;">{{ supplierObj.brandSide
|| 0 }}</view>
</view>
</view>
<!-- 第二行：自有品牌水、零售批发类 -->
<view class="supplier-message-box-top" style="margin-top: 20rpx;">
<view class="supplier-message-box-top-item">
<view class="supplier-message-box-top-item-label">自有水品牌厂家/家</view>
<!-- <view class="supplier-message-box-top-item-value" style="color: #56BCE6;">{{
supplierObj.privateLabelWater || 0 }}</view> -->
<view class="supplier-message-box-top-item-value" style="color: #56BCE6;">2</view>
<view class="supplier-message-box-top-item-label">自有品牌水/家</view>
<view class="supplier-message-box-top-item-value" style="color: #56BCE6;">{{
supplierObj.privateLabelWater || 0 }}</view>
</view>
<view class="supplier-message-box-top-item">
<view class="supplier-message-box-top-item-label">快消品零售批发/家</view>
<!-- <view class="supplier-message-box-top-item-value" style="color: #ef5a0d;">{{
supplierObj.retailAndWholesale || 0 }}</view> -->
<view class="supplier-message-box-top-item-value" style="color: #ef5a0d;">28</view>
<view class="supplier-message-box-top-item-label">零售批发类/家</view>
<view class="supplier-message-box-top-item-value" style="color: #ef5a0d;">{{
supplierObj.retailAndWholesale || 0 }}</view>
</view>
</view>
</view>
@ -126,7 +122,7 @@ export default {
const req = {
ProvinceCode: "530000",
type: 'encryption',
StatisticsMonth: "202505",
StatisticsMonth: this.selectTime ? moment(this.selectTime).format('YYYYMM') : "202505",
}
// 这里使用模拟数据，实际应该调用真实的API

4
pages/DigitalIntelligenceDashboard/components/ThisMonthBenefits.vue
View File

@ -11,7 +11,7 @@
<view class="core-category-box">
<!-- 本月福利金发放额度 -->
<!-- <view class="benefits-header">
<view class="benefits-header">
<view class="benefits-left">
<text class="benefits-title">本月福利金发放额度</text>
</view>
@ -21,7 +21,7 @@
}}</text>
<text class="benefits-unit">元</text>
</view>
</view> -->
</view>
<view class="chart-container">
<!-- 图表加载效果 -->

3
pages/DigitalIntelligenceDashboard/components/TradingAlert.vue
View File

@ -222,9 +222,6 @@ export default {
width: 30%;
font-size: 24rpx;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.item-type {

27
pages/DigitalIntelligenceDashboard/components/TrendOfTrafficFlow.vue
View File

@ -232,9 +232,8 @@ export default {
}
// 生成12个月的对比数据
if (currentData && currentData.length > 0) {
currentData.forEach(item => {
const month = `${item.Statistics_Month}月`;
for (let i = 1; i <= 12; i++) {
const month = `${i}月`;
const currentMonthData = currentDataMap[month] || { value: 0, realValue: 0 };
const previousMonthData = previousDataMap[month] || { value: 0, realValue: 0 };
@ -251,30 +250,8 @@ export default {
previousYearValue: previousMonthData.value,
growthRate: growthRate
});
});
}
// for (let i = 1; i <= 12; i++) {
// const month = `${i}月`;
// const currentMonthData = currentDataMap[month] || { value: 0, realValue: 0 };
// const previousMonthData = previousDataMap[month] || { value: 0, realValue: 0 };
// let growthRate = '0.00';
// if (previousMonthData.realValue > 0 && currentMonthData.realValue > 0) {
// growthRate = (((currentMonthData.realValue - previousMonthData.realValue) / previousMonthData.realValue) * 100).toFixed(2);
// totalGrowthRate += parseFloat(growthRate);
// validMonthCount++;
// }
// monthlyData.push({
// month: month,
// currentYearValue: currentMonthData.value,
// previousYearValue: previousMonthData.value,
// growthRate: growthRate
// });
// }
// 计算平均增长率
const averageGrowth = validMonthCount > 0 ? (totalGrowthRate / validMonthCount).toFixed(2) : '0.00';

9
pages/DigitalIntelligenceDashboard/components/VehiclesEntering.vue
View File

@ -218,22 +218,17 @@ export default {
// 当前年份数据请求
const currentReq = {
StartDate: this.selectTime ? moment(this.selectTime).startOf('y').format('YYYY-MM-DD') : moment().startOf('y').format('YYYY-MM-DD'),
EndDate: this.selectTime ? moment(this.selectTime).endOf('M').format('YYYY-MM-DD') : moment().endOf('M').format('YYYY-MM-DD'),
EndDate: this.selectTime ? moment(this.selectTime).endOf('m').format('YYYY-MM-DD') : moment().endOf('m').format('YYYY-MM-DD'),
ProvinceCode: 530000
}
// 去年数据请求
const lastYearReq = {
StartDate: this.selectTime ? moment(this.selectTime).subtract(1, 'y').startOf('y').format('YYYY-MM-DD') : moment().subtract(1, 'y').startOf('y').format('YYYY-MM-DD'),
EndDate: this.selectTime ? moment(this.selectTime).subtract(1, 'y').endOf('M').format('YYYY-MM-DD') : moment().subtract(1, 'y').endOf('M').format('YYYY-MM-DD'),
EndDate: this.selectTime ? moment(this.selectTime).subtract(1, 'y').endOf('y').format('YYYY-MM-DD') : moment().subtract(1, 'y').endOf('y').format('YYYY-MM-DD'),
ProvinceCode: 530000
}
console.log('currentReqcurrentReqcurrentReq1111', currentReq);
console.log('lastYearReqlastYearReqlastYearReq222', lastYearReq);
// 并行调用两个API
const [currentData, lastYearData] = await Promise.all([
this.getMonthAnalysis(currentReq),

2
pages/DigitalIntelligenceDashboard/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
View File

@ -138,7 +138,7 @@ const cfu = {
return `${category}\n${item.name}：${item.data}${item.name === '客单量' ? '单' : '辆'}`
},
"customerConsumptionPreferencesChart": function (item, category, index, opts) {
return `${category}\n${item.name}：${item.data}%，${opts.realData[index].toLocaleString()}元`
return `${category}\n${item.name}：${item.data}%`
},
"PreferenceType": function (item, category, index, opts) {
return `${item.name}\n${category}占比：${item.data}%`

223
pages/everdayRenven/AnhuiIndex.vue
View File

@ -297,7 +297,6 @@ export default {
regionProgress: null,
tradeType: null,
areaProgress: null,
areaColors: ['#FFAC37', '#d8ece9', '#f7f5f6', '#b2b7e3', '#F4B27A', '#F3B1C9', '#e0e3f7', '#FFE886', '#f7f5f6', '#8E44AD', '#3498DB', '#E67E22', '#16A085', '#27AE60', '#2980B9', '#8E44AD', '#2C3E50', '#F39C12', '#D35400', '#C0392B'],
bayonetProgress: null,
modelProgress: null,
isup: true,
@ -409,22 +408,6 @@ export default {
}
const ctx = uni.createCanvasContext(obj.id, this);
data.series = data.series.concat(obj.data)
// 针对不同图表使用不同配置
const isAreaChart = obj.id === 'areaCont'; // nowTab为3的图表
const legendConfig = isAreaChart ? {
show: true, // areaCont显示图例
padding: 5,
lineHeight: 11,
margin: 10,
position: 'right' // 图例显示在右侧
} : {
show: false, // 其他图表不显示图例
padding: 5,
lineHeight: 11,
margin: 0,
};
rincanvas[obj.id] = new uCharts({
// 小程序图表工具
// $this: this,
@ -433,21 +416,27 @@ export default {
color: obj.colors,
type: 'ring',
fontSize: 12,
padding: [15, 25, 25, 15],
legend: legendConfig,
padding: [15, 15, 25, 15],
legend: {
show: false,
padding: 5,
lineHeight: 11,
margin: 0,
},
background: '#FFFFFF',
pixelRatio: 1,
series: data.series,
animation: false,
width: uni.upx2px(686),
height: uni.upx2px(510),
dataLabel: !isAreaChart, // areaCont不显示引导线，其他图表显示引导线
dataLabel: true,
extra: {
ring: {
ringWidth: 40,
labelWidth: isAreaChart ? 0 : 15, // areaCont为0隐藏引导线，其他图表为15显示引导线
labelWidth: 16,
border: true,
borderWidth: 1,
borderColor: '#fff'
}
},
@ -587,10 +576,11 @@ export default {
const [aprogressList, apieList] = this.getProgressData(busniessAreaPie, totalData.cashPay)
this.areaProgress = aprogressList
// 区域营收分析
var colors3 = ['#FFAC37', '#d8ece9', '#f7f5f6', '#b2b7e3', '#F4B27A', '#F3B1C9', '#e0e3f7', '#FFE886', '#f7f5f6'];
this.showPie({
id: 'areaCont',
data: apieList,
colors: this.areaColors,
colors: colors3,
});
// 安徽省本级显示的内容
@ -614,7 +604,6 @@ export default {
_data1.push({
...n,
name: n.name.split('管理单元')[0],
textColor: '#999',
formatter: function (arg) {
@ -1814,191 +1803,6 @@ canvas.operation-content {
background: white;
}
/* 图表和图例的容器 - 左右布局 */
.chart-with-legend {
display: flex;
gap: 20rpx;
align-items: flex-start;
}
.chart-container-side {
background: #f8f9fa;
border-radius: 16rpx;
padding: 24rpx;
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
border: 1rpx solid rgba(0, 0, 0, 0.04);
flex: 2;
min-width: 0;
}
.modern-chart-side {
width: 100%;
height: 500rpx;
border-radius: 8rpx;
background: white;
}
/* 右侧图例容器 */
.legend-container-right {
flex: 1;
background: #f8f9fa;
border-radius: 16rpx;
padding: 20rpx;
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
border: 1rpx solid rgba(0, 0, 0, 0.04);
height: 500rpx;
display: flex;
flex-direction: column;
}
.legend-title {
font-size: 26rpx;
font-weight: 600;
color: #2c3e50;
margin-bottom: 20rpx;
padding-bottom: 10rpx;
border-bottom: 1rpx solid #e9ecef;
}
.legend-items {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.legend-item-side {
display: flex;
align-items: center;
padding: 16rpx 0;
margin-bottom: 16rpx;
border-bottom: 1rpx solid #f0f0f0;
transition: all 0.3s ease;
}
.legend-item-side:last-child {
margin-bottom: 0;
border-bottom: none;
}
.legend-item-side:hover {
background: rgba(39, 178, 95, 0.05);
transform: translateX(4rpx);
}
.legend-color-side {
width: 24rpx;
height: 24rpx;
border-radius: 6rpx;
margin-right: 16rpx;
flex-shrink: 0;
border: 2rpx solid #fff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.legend-info-side {
flex: 1;
min-width: 0;
}
.legend-name-side {
font-size: 24rpx;
font-weight: 600;
color: #2c3e50;
margin-bottom: 6rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.legend-stats-side {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12rpx;
}
.legend-percentage-side {
font-size: 22rpx;
font-weight: 600;
color: #27B25F;
font-family: 'DIN Alternate', 'Bahnschrift', monospace;
}
.legend-amount-side {
font-size: 20rpx;
color: #666;
font-family: 'DIN Alternate', 'Bahnschrift', monospace;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 120rpx;
text-align: right;
}
/* 紧凑版数据卡片 */
.data-cards-compact {
display: flex;
flex-wrap: wrap;
margin: -4rpx;
margin-top: 16rpx;
}
.data-card-compact {
background: white;
border-radius: 8rpx;
padding: 12rpx 16rpx;
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.04);
border: 1rpx solid rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
gap: 16rpx;
width: calc(50% - 8rpx);
margin: 4rpx;
}
.category-name-compact {
font-size: 22rpx;
font-weight: 600;
color: #2c3e50;
min-width: 80rpx;
}
.percentage-compact {
font-size: 20rpx;
font-weight: 600;
color: #27B25F;
font-family: 'DIN Alternate', 'Bahnschrift', monospace;
min-width: 60rpx;
text-align: right;
}
.amount-compact {
font-size: 22rpx;
font-weight: 700;
color: #27B25F;
font-family: 'DIN Alternate', 'Bahnsicht', monospace;
min-width: 100rpx;
text-align: right;
}
.progress-bar-compact {
flex: 1;
height: 6rpx;
background-color: #f0f0f0;
border-radius: 3rpx;
overflow: hidden;
min-width: 60rpx;
}
.progress-fill-compact {
height: 100%;
border-radius: 3rpx;
background: #27B25F;
transition: width 0.6s ease;
}
/* 数据卡片布局 - 使用flex替代grid */
.data-cards {
display: flex;
@ -2037,7 +1841,7 @@ canvas.operation-content {
}
.category-name {
font-size: 26rpx;
font-size: 28rpx;
font-weight: 600;
color: #2c3e50;
}
@ -2550,7 +2354,6 @@ canvas.operation-content {
font-weight: 600;
}
/* 微信小程序兼容性修正 - 移除不支持的特性 */
/* 移除 @media 查询，改用 flex 替代 grid */
</style>