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

update

Browse Source
This commit is contained in:
ylj20011123 2025-09-04 18:45:15 +08:00
parent 42f254afb9
commit f82ab7bb6a
7 changed files with 1696 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
common/utils.js
View File

@ -65,7 +65,7 @@ import request from '@/util/index.js'
// } // }
const netChange = () => { const netChange = () => {
uni.onNetworkStatusChange(function(res) { uni.onNetworkStatusChange(function (res) {
// console.log(res.isConnected) // console.log(res.isConnected)
store.mutations.isConnect(res.isConnected) store.mutations.isConnect(res.isConnected)
if (!res.isConnected) { if (!res.isConnected) {
@ -187,25 +187,25 @@ function addUserBehaviorNew(obj) {
} }
obj.visitChannels = store.state.visitChannels obj.visitChannels = store.state.visitChannels
let userDate = store.state.userData let userDate = store.state.userData
console.log('userDate123',userDate) console.log('userDate123', userDate)
let baseInfo = uni.getStorageSync('userInfo') let baseInfo = uni.getStorageSync('userInfo')
let req = { let req = {
userName:userDate.UserName, userName: userDate.UserName,
phoneNumber:userDate.Membership_Phone, phoneNumber: userDate.Membership_Phone,
userId:userDate.UserId ? userDate.UserId:'', userId: userDate.UserId ? userDate.UserId : '',
wechatAppId:'wxa99ef047735c031e', wechatAppId: 'wxa99ef047735c031e',
intoRoute:obj.intoRoute, intoRoute: obj.intoRoute,
outtoRoute:obj.outtoRoute, outtoRoute: obj.outtoRoute,
visitChannels:obj.visitChannels, visitChannels: obj.visitChannels,
behaviorRecordDesc:'', behaviorRecordDesc: '',
LoginIP: baseInfo.ip || '', LoginIP: baseInfo.ip || '',
LoginPlace: (baseInfo.prov ? baseInfo.prov : '' ) + (baseInfo.prov && baseInfo.city ? '-' : '') + (baseInfo.city ? baseInfo.city : ''), LoginPlace: (baseInfo.prov ? baseInfo.prov : '') + (baseInfo.prov && baseInfo.city ? '-' : '') + (baseInfo.city ? baseInfo.city : ''),
SOURCE_PLATFORM: '驿行畅旅' SOURCE_PLATFORM: '驿行畅旅'
} }
console.log('req',req) console.log('req', req)
request.$webGet('CommercialApi/UserBehavior/AddUserBehavior',req).then(() => { request.$webGet('CommercialApi/UserBehavior/AddUserBehavior', req).then(() => {
}) })
} }
@ -232,7 +232,7 @@ async function getFieldEnumByField(params) {
} }
// 不四舍五入 保留两位小数的金额化方法 // 不四舍五入 保留两位小数的金额化方法
function getMoney(money){ function getMoney(money) {
if (!money || isNaN(money)) return "0.00"; if (!money || isNaN(money)) return "0.00";
let num = parseFloat(money + '') + ''; let num = parseFloat(money + '') + '';
num = parseInt(money * 100 + '') / 100 + '' num = parseInt(money * 100 + '') / 100 + ''
@ -255,32 +255,32 @@ function getMoney(money){
return num; return num;
} }
function getMoneyTest(money){ function getMoneyTest(money) {
console.log('money',money) console.log('money', money)
if (!money || isNaN(money)) return "0.00"; if (!money || isNaN(money)) return "0.00";
let realMoney = 0 let realMoney = 0
if(money.toString().indexOf('.')>0){ if (money.toString().indexOf('.') > 0) {
let num_per = money.toString().substring(0, money.toString().indexOf('.')) let num_per = money.toString().substring(0, money.toString().indexOf('.'))
let num_next = money.toString().substring(money.toString().indexOf('.') + 1).padEnd(2, '0') let num_next = money.toString().substring(money.toString().indexOf('.') + 1).padEnd(2, '0')
console.log('num_per',num_per) console.log('num_per', num_per)
console.log('num_next',num_next) console.log('num_next', num_next)
realMoney = Number(num_per + '.' + num_next).toFixed(2) realMoney = Number(num_per + '.' + num_next).toFixed(2)
}else{ } else {
realMoney = money realMoney = money
} }
console.log('realMoney',realMoney) console.log('realMoney', realMoney)
let num = realMoney let num = realMoney
// let num = parseFloat(realMoney + '') + ''; // let num = parseFloat(realMoney + '') + '';
// num = (parseInt(realMoney * 100 + '') / 100).toFixed(2) + '' // num = (parseInt(realMoney * 100 + '') / 100).toFixed(2) + ''
console.log('num',num) console.log('num', num)
let reg = /(-?\d+)(\d{3})/; let reg = /(-?\d+)(\d{3})/;
while (reg.test(num)) { while (reg.test(num)) {
num = num.replace(reg, "$1,$2"); num = num.replace(reg, "$1,$2");
} }
let idx = num.indexOf('.') let idx = num.indexOf('.')
console.log('idx',idx) console.log('idx', idx)
if (idx === -1) { if (idx === -1) {
num = num + '.00' num = num + '.00'
} }
@ -289,8 +289,8 @@ function getMoneyTest(money){
let num_per = num.substring(0, idx) + '.' let num_per = num.substring(0, idx) + '.'
let num_next = num.substring(idx + 1).padEnd(2, '0') let num_next = num.substring(idx + 1).padEnd(2, '0')
console.log('num_per',num_per) console.log('num_per', num_per)
console.log('num_next',num_next) console.log('num_next', num_next)
num = num_per + num_next num = num_per + num_next
} }
@ -305,6 +305,45 @@ function playVideo(opt) {
return new EZUIPlayer(opt) return new EZUIPlayer(opt)
} }
// 得到这个月有多少天
function getThisMonthDay(value) {
let date = new Date(value)
let y = date.getFullYear()
let m = date.getMonth() + 1
let howDay;
let flag = false
if (y % 4 === 0 && y % 100 !== 0 || y % 400 === 0) {
flag = true
}
switch (m) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
howDay = 31
break
case 4:
case 6:
case 9:
case 11:
howDay = 30
break
case 2:
if (flag) {
howDay = 29
} else {
howDay = 28
}
break
}
return howDay
}
export default { export default {
netChange, netChange,
cutDate, cutDate,
@ -318,5 +357,6 @@ export default {
getFieldEnumByField, // 获取枚举参数 getFieldEnumByField, // 获取枚举参数
// calculateDistance, // calculateDistance,
// bMapToQQMap, // bMapToQQMap,
playVideo playVideo,
getThisMonthDay
} }

745
pages/everdayRenven/AnhuiIndex.vue
View File

@ -11,7 +11,7 @@
</view> </view>
</view> </view>
<view class="page-body" v-if="showPage"> <view class="page-body page-fade-in" v-if="showPage">
<AnhHead :today="today" :headMsg="headMsg" :lastDay="lastDay" :groupType="theRequest && theRequest.GroupType" <AnhHead :today="today" :headMsg="headMsg" :lastDay="lastDay" :groupType="theRequest && theRequest.GroupType"
:provinceCode="theRequest && theRequest.ProvinceCode" @bindDateChange="bindDateChange" :isup="isup" :provinceCode="theRequest && theRequest.ProvinceCode" @bindDateChange="bindDateChange" :isup="isup"
:nowDay="nowDay" :selectDate="theRequest && theRequest.time" @toggle="toggleCard" :currentMoney="currentMoney"> :nowDay="nowDay" :selectDate="theRequest && theRequest.time" @toggle="toggleCard" :currentMoney="currentMoney">
@ -56,8 +56,8 @@
<view class="content-wrapper"> <view class="content-wrapper">
<view class="chart-section" v-show="nowTab == 1" <view class="chart-section" v-show="nowTab == 1"
v-if="modelProgress.length > 0 && theRequest.ProvinceCode == 340000"> v-if="modelProgress.length > 0 && theRequest.ProvinceCode == 340000">
<view class="chart-container"> <view class="chart-container chart-optimized">
<canvas canvas-id="modelCont" id="modelCont" class="modern-chart" <canvas canvas-id="modelCont" id="modelCont" class="modern-chart performance-chart"
@touchstart="touchPie($event, 'modelCont')"></canvas> @touchstart="touchPie($event, 'modelCont')"></canvas>
</view> </view>
<view class="data-cards"> <view class="data-cards">
@ -68,14 +68,15 @@
</view> </view>
<view class="amount">￥{{ item.data }}</view> <view class="amount">￥{{ item.data }}</view>
<view class="progress-bar"> <view class="progress-bar">
<view class="progress-fill" :style="{ 'width': item.bili + '%' }"></view> <view class="progress-fill progress-animated" :class="'progress-delay-' + o"
:style="{ 'width': showPage ? item.bili + '%' : '0%' }"></view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="chart-section" v-show="nowTab == 2" v-if="regionProgress.length > 0"> <view class="chart-section" v-show="nowTab == 2" v-if="regionProgress.length > 0">
<view class="chart-container"> <view class="chart-container chart-optimized">
<canvas canvas-id="businessCont" id="businessCont" class="modern-chart" <canvas canvas-id="businessCont" id="businessCont" class="modern-chart performance-chart"
@touchstart="touchPie($event, 'businessCont')"></canvas> @touchstart="touchPie($event, 'businessCont')"></canvas>
</view> </view>
<view class="data-cards"> <view class="data-cards">
@ -86,14 +87,15 @@
</view> </view>
<view class="amount">￥{{ item.data }}</view> <view class="amount">￥{{ item.data }}</view>
<view class="progress-bar"> <view class="progress-bar">
<view class="progress-fill" :style="{ 'width': item.bili + '%' }"></view> <view class="progress-fill progress-animated" :class="'progress-delay-' + o"
:style="{ 'width': showPage ? item.bili + '%' : '0%' }"></view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="chart-section" v-show="nowTab == 3" v-if="areaProgress.length > 0"> <view class="chart-section" v-show="nowTab == 3" v-if="areaProgress.length > 0">
<view class="chart-container"> <view class="chart-container chart-optimized">
<canvas canvas-id="areaCont" id="areaCont" class="modern-chart" <canvas canvas-id="areaCont" id="areaCont" class="modern-chart performance-chart"
@touchstart="touchPie($event, 'areaCont')"></canvas> @touchstart="touchPie($event, 'areaCont')"></canvas>
</view> </view>
<view class="data-cards"> <view class="data-cards">
@ -104,12 +106,15 @@
</view> </view>
<view class="amount">￥{{ item.data }}</view> <view class="amount">￥{{ item.data }}</view>
<view class="progress-bar"> <view class="progress-bar">
<view class="progress-fill" :style="{ 'width': item.bili + '%' }"></view> <view class="progress-fill progress-animated" :class="'progress-delay-' + o"
:style="{ 'width': showPage ? item.bili + '%' : '0%' }"></view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="traffic-analysis" v-show="nowTab == 4" v-if="bayonetProgress && bayonetProgress.length > 0"> <!-- 车流分析区域 - 修复显示问题 -->
<view v-if="theRequest.ProvinceCode == 340000 && theRequest.GroupType == 1000" v-show="nowTab == 4">
<view class="traffic-analysis" v-if="bayonetProgress && bayonetProgress.length > 0">
<view class="traffic-header"> <view class="traffic-header">
<view class="traffic-title"> <view class="traffic-title">
<view class="traffic-icon">🚗</view> <view class="traffic-icon">🚗</view>
@ -126,7 +131,6 @@
<!-- 区域标题 --> <!-- 区域标题 -->
<view class="region-header" @click="toggleRegionCollapse(item)"> <view class="region-header" @click="toggleRegionCollapse(item)">
<view class="region-badge"> <view class="region-badge">
<view class="region-icon">🗺️</view>
<view class="region-title">{{ item.name }}</view> <view class="region-title">{{ item.name }}</view>
</view> </view>
<view class="region-actions"> <view class="region-actions">
@ -136,23 +140,27 @@
</view> </view>
<!-- 服务区列表 --> <!-- 服务区列表 -->
<view class="service-areas" v-if="!item.collapsed"> <view class="service-areas service-areas-expand" v-if="!item.collapsed">
<view class="service-area-item" v-for="(child, idx) in item.list" :key="idx"> <view class="service-area-item service-item-slide" v-for="(child, idx) in item.list"
<view class="service-header" @click="toggleServiceArea(item, idx)"> :key="idx" :style="'animation-delay: ' + (idx * 0.1) + 's'">
<view class="service-header service-header-interactive"
@click="toggleServiceArea(item, idx)">
<view class="service-info"> <view class="service-info">
<view class="service-name">{{ child.name }}</view> <view class="service-name">{{ child.name }}</view>
<view class="service-ratio">占比 {{ child.bili }}%</view> <view class="service-ratio">占比 {{ child.bili }}%</view>
</view> </view>
<view class="service-actions"> <view class="service-actions">
<view class="flow-stats"> <view class="flow-stats">
<view class="flow-item"> <view class="flow-item flow-item-counter">
<text class="flow-label">入区</text> <text class="flow-label">入区</text>
<text class="flow-value">{{ child.data }}</text> <text class="flow-value" :class="'counter-animate-' + o + '-' + idx">{{ child.data
}}</text>
</view> </view>
<view class="flow-divider">|</view> <view class="flow-divider">|</view>
<view class="flow-item"> <view class="flow-item flow-item-counter">
<text class="flow-label">断面</text> <text class="flow-label">断面</text>
<text class="flow-value">{{ child.flow }}</text> <text class="flow-value" :class="'counter-animate-' + o + '-' + idx">{{ child.flow
}}</text>
</view> </view>
</view> </view>
<view class="expand-arrow" :class="{ 'expanded': child.expanded }">▼</view> <view class="expand-arrow" :class="{ 'expanded': child.expanded }">▼</view>
@ -160,26 +168,35 @@
</view> </view>
<!-- 方向车流数据 --> <!-- 方向车流数据 -->
<view class="direction-list" v-if="child.expanded && child.list && child.list.length > 0"> <view class="direction-list direction-expand-animation"
<view class="direction-item" v-for="(direction, didx) in child.list" :key="didx"> v-if="child.expanded && child.list && child.list.length > 0">
<view class="direction-item direction-item-slide" v-for="(direction, didx) in child.list"
:key="didx" :style="'animation-delay: ' + (didx * 0.1) + 's'">
<view class="direction-header"> <view class="direction-header">
<view class="direction-info"> <view class="direction-info">
<text class="direction-name">{{ direction.name }}区</text> <text class="direction-name">{{ direction.name }}区</text>
<text class="direction-percent">{{ direction.bili }}%</text> <text class="direction-percent direction-percent-highlight">{{ direction.bili
}}%</text>
</view> </view>
<view class="vehicle-stats"> <view class="vehicle-stats">
<view class="vehicle-type-group"> <view class="vehicle-type-group">
<view class="vehicle-type-item"> <view class="vehicle-type-item vehicle-item-bounce"
:style="'animation-delay: ' + (didx * 0.1 + 0.2) + 's'">
<text class="vehicle-type-label">大型车</text> <text class="vehicle-type-label">大型车</text>
<text class="vehicle-count-value">{{ direction.LargeVehicle_Count }}</text> <text class="vehicle-count-value vehicle-count-pulse">{{
direction.LargeVehicle_Count }}</text>
</view> </view>
<view class="vehicle-type-item"> <view class="vehicle-type-item vehicle-item-bounce"
:style="'animation-delay: ' + (didx * 0.1 + 0.3) + 's'">
<text class="vehicle-type-label">中型车</text> <text class="vehicle-type-label">中型车</text>
<text class="vehicle-count-value">{{ direction.MediumVehicle_Count }}</text> <text class="vehicle-count-value vehicle-count-pulse">{{
direction.MediumVehicle_Count }}</text>
</view> </view>
<view class="vehicle-type-item"> <view class="vehicle-type-item vehicle-item-bounce"
:style="'animation-delay: ' + (didx * 0.1 + 0.4) + 's'">
<text class="vehicle-type-label">小型车</text> <text class="vehicle-type-label">小型车</text>
<text class="vehicle-count-value">{{ direction.MinVehicle_Count }}</text> <text class="vehicle-count-value vehicle-count-pulse">{{
direction.MinVehicle_Count }}</text>
</view> </view>
</view> </view>
</view> </view>
@ -192,6 +209,12 @@
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<!-- 无数据提示 -->
<view class="no-traffic-data" v-if="!bayonetProgress || bayonetProgress.length === 0">
<view class="no-data-icon">🚗</view>
<text class="no-data-text">暂无车流分析数据</text>
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -237,9 +260,10 @@
</view> </view>
</template> </template>
<template v-else-if="theRequest && theRequest.GroupType == 1000"> <template v-else-if="theRequest && theRequest.GroupType == 1000">
<view class="region-list" v-show="regionShow1"> <view class="region-list list-fade-in" v-show="regionShow1">
<block v-for="(item, i) in regionList" :key="i"> <block v-for="(item, i) in regionList" :key="i">
<view class="region-card" @click="toggleRegion(item)"> <view class="region-card region-card-slide" @click="toggleRegion(item)"
:style="'animation-delay: ' + (i * 0.1) + 's'">
<view class="region-main"> <view class="region-main">
<view class="region-info"> <view class="region-info">
<view class="region-name">{{ item.name }}</view> <view class="region-name">{{ item.name }}</view>
@ -266,9 +290,10 @@
</view> </view>
</view> </view>
</view> </view>
<view class="service-sublist" v-show="item.show"> <view class="service-sublist expand-collapse" v-show="item.show">
<view class="subservice-card" v-for="(child, index) in item.child" <view class="subservice-card subservice-slide" v-for="(child, index) in item.child"
:class="{ 'visited': child.visited }" :key="index" @click.stop="toDetail(child)"> :class="{ 'visited': child.visited }" :key="index" @click.stop="toDetail(child)"
:style="'animation-delay: ' + (index * 0.05) + 's'">
<view class="subservice-info"> <view class="subservice-info">
<view class="subservice-name">{{ child.serverpart_Name }}</view> <view class="subservice-name">{{ child.serverpart_Name }}</view>
<view class="subservice-revenue">￥{{ $util.fmoney(child.cashpay, 2) }} <view class="subservice-revenue">￥{{ $util.fmoney(child.cashpay, 2) }}
@ -337,7 +362,7 @@ export default {
regionProgress: null, regionProgress: null,
tradeType: null, tradeType: null,
areaProgress: null, areaProgress: null,
bayonetProgress: null, bayonetProgress: [], // 初始化为空数组
modelProgress: null, modelProgress: null,
isup: true, isup: true,
wechatPushSalesList: null, // 甘肃单品排行数据 wechatPushSalesList: null, // 甘肃单品排行数据
@ -619,6 +644,20 @@ export default {
}, },
selectTab(name, index) { selectTab(name, index) {
this[name] = index this[name] = index
// 当切换到车流分析标签时，强制触发响应式更新
if (name === 'nowTab' && index === 4) {
console.log('切换到车流分析标签')
console.log('当前bayonetProgress:', this.bayonetProgress)
console.log('bayonetProgress类型:', typeof this.bayonetProgress)
console.log('bayonetProgress长度:', this.bayonetProgress ? this.bayonetProgress.length : 'null/undefined')
console.log('条件判断结果:')
console.log('- 有数据条件:', !!(this.bayonetProgress && this.bayonetProgress.length > 0))
console.log('- 无数据条件:', !!(!this.bayonetProgress || this.bayonetProgress.length === 0))
// 使用$nextTick确保DOM更新
this.$nextTick(() => {
console.log('车流分析DOM更新完成')
})
}
}, },
toggleRegion(item) { toggleRegion(item) {
// 使用Vue.set确保响应式更新 // 使用Vue.set确保响应式更新
@ -668,10 +707,9 @@ export default {
} }
const ctx = uni.createCanvasContext(obj.id, this); const ctx = uni.createCanvasContext(obj.id, this);
data.series = data.series.concat(obj.data) data.series = data.series.concat(obj.data)
// 微信小程序专用优化配置 - 完全去除动画和过渡效果
rincanvas[obj.id] = new uCharts({ rincanvas[obj.id] = new uCharts({
// 小程序图表工具
// $this: this,
// canvasId: obj.id,
context: ctx, context: ctx,
color: obj.colors, color: obj.colors,
type: 'ring', type: 'ring',
@ -684,23 +722,47 @@ export default {
margin: 0, margin: 0,
}, },
background: '#FFFFFF', background: '#FFFFFF',
pixelRatio: 1, pixelRatio: 1, // 使用较低的像素比率减少渲染负担
series: data.series, series: data.series,
animation: false,
width: uni.upx2px(686), width: uni.upx2px(686),
height: uni.upx2px(510), height: uni.upx2px(510),
dataLabel: true, dataLabel: true,
// 核心性能优化 - 完全禁用所有动画和交互
animation: false, // 禁用所有动画
animationDuration: 0, // 动画时长为0
animationEasing: 'linear', // 使用最简单的缓动函数
enableScroll: false, // 禁用滚动
enableMarkLine: false, // 禁用标记线
enableDataLabel: true, // 仅启用数据标签
disableTouch: true, // 禁用触摸交互以提高性能
extra: { extra: {
ring: { ring: {
ringWidth: 40, ringWidth: 40,
labelWidth: 16, labelWidth: 16,
border: true, border: true,
borderWidth: 1, borderWidth: 1,
borderColor: '#fff',
borderColor: '#fff' // 完全禁用交互效果
activeOpacity: 1, // 禁用透明度变化
activeRadius: 0, // 禁用半径变化
// 微信小程序特殊优化
linearGradient: false, // 禁用渐变以提高渲染性能
disableAnimation: true // uCharts自定义禁用动画参数
} }
}, },
// 微信小程序Canvas优化
onRenderComplete: function () {
// 渲染完成后立即绘制，避免视觉延迟
ctx.draw(false);
}
}); });
// 立即绘制，不使用回调以避免异步延迟
ctx.draw(false);
console.log('图表立即渲染完成:', obj.id);
}, },
getDetail(obj) { getDetail(obj) {
console.log('obj', obj) console.log('obj', obj)
@ -832,9 +894,11 @@ export default {
// 饼图分析及数据条形分析 // 饼图分析及数据条形分析
const [progressList, pieList] = this.getProgressData(busniessTypePie, totalData.cashPay) const [progressList, pieList] = this.getProgressData(busniessTypePie, totalData.cashPay)
this.modelProgress = progressList this.modelProgress = progressList
// 延迟渲染图表，优化首屏加载 // 优化图表渲染，减少卡顿
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { // 使用requestAnimationFrame优化渲染时机
const renderCharts = () => {
try {
// 经营类型分析 // 经营类型分析
var colors1 = ['#FFAC37', '#6B75B8']; var colors1 = ['#FFAC37', '#6B75B8'];
if (pieList.length > 0) { if (pieList.length > 0) {
@ -845,7 +909,8 @@ export default {
}); });
} }
// 饼图分析及数据条形分析 // 由于已优化单个图表性能，现在可以立即渲染所有图表
// 第二个图表 - 饼图分析及数据条形分析
const [tprogressList, tpieList] = this.getProgressData(busniessTradePie, totalData.cashPay) const [tprogressList, tpieList] = this.getProgressData(busniessTradePie, totalData.cashPay)
this.regionProgress = tprogressList this.regionProgress = tprogressList
@ -859,7 +924,7 @@ export default {
}); });
} }
// 饼图分析及数据条形分析 // 第三个图表 - 区域营收分析（立即渲染）
const [aprogressList, apieList] = this.getProgressData(busniessAreaPie, totalData.cashPay) const [aprogressList, apieList] = this.getProgressData(busniessAreaPie, totalData.cashPay)
this.areaProgress = aprogressList this.areaProgress = aprogressList
@ -872,14 +937,39 @@ export default {
colors: colors3, colors: colors3,
}); });
} }
}, 100); } catch (error) {
console.error('图表渲染出错:', error);
uni.hideLoading();
}
};
// 立即执行图表渲染，无需延时
renderCharts();
}); });
// 安徽省本级显示的内容 // 安徽省本级显示的内容
if (this.theRequest.GroupType == 1000 && this.theRequest.ProvinceCode == 340000) { if (this.theRequest.GroupType == 1000 && this.theRequest.ProvinceCode == 340000) {
// 显示片区车流量数据分析 // 显示片区车流量数据分析
console.log('处理车流分析数据:', bayonetPie)
console.log('bayonetPie类型和长度:', typeof bayonetPie, bayonetPie ? bayonetPie.length : 'null/undefined')
if (bayonetPie && bayonetPie.length > 0) {
console.log('开始处理车流数据...')
const [bayonetList] = this.getBayonetData(bayonetPie) const [bayonetList] = this.getBayonetData(bayonetPie)
this.bayonetProgress = bayonetList console.log('getBayonetData返回结果:', bayonetList)
console.log('bayonetList长度:', bayonetList ? bayonetList.length : 'null/undefined')
// 使用Vue.set确保响应式更新
this.$set(this, 'bayonetProgress', bayonetList || [])
console.log('最终设置bayonetProgress:', this.bayonetProgress)
console.log('bayonetProgress.length:', this.bayonetProgress.length)
} else {
// 没有数据时设置为空数组
this.$set(this, 'bayonetProgress', [])
console.log('无车流分析数据，设置为空数组，bayonetPie:', bayonetPie)
}
} else {
// 不是安徽本级的情况，确保数据为空
console.log('不是安徽本级，清空车流数据')
this.$set(this, 'bayonetProgress', [])
} }
// 数据加载完成后显示页面并隐藏loading // 数据加载完成后显示页面并隐藏loading
@ -1431,6 +1521,64 @@ text.fs12 {
line-height: 1.2; line-height: 1.2;
} }
/* 图表性能优化样式 */
/* 性能优化的图表容器 */
.chart-optimized {
/* 减少重绘和回流 */
transform: translateZ(0);
will-change: auto;
backface-visibility: hidden;
/* 避免子元素的布局计算影响 */
contain: layout style paint;
}
/* 性能优化的Canvas */
.performance-chart {
/* 硬件加速 */
transform: translate3d(0, 0, 0);
/* 减少触摸延迟 */
touch-action: manipulation;
/* 优化渲染性能 */
image-rendering: optimizeSpeed;
image-rendering: -webkit-optimize-contrast;
/* 固定尺寸避免重新计算 */
width: 686rpx !important;
height: 510rpx !important;
/* 避免内容重排 */
flex-shrink: 0;
}
/* 减少动画对图表的影响 */
.chart-container.chart-scale-in {
/* 简化入场动画，减少性能消耗 */
animation-duration: 0.3s;
animation-timing-function: ease-out;
}
/* 图表加载态优化 */
.chart-section {
/* 预留空间避免布局跳动 */
min-height: 510rpx;
/* 减少layout thrashing */
contain: layout;
}
/* 禁用不必要的交互效果 */
.performance-chart:active,
.performance-chart:hover,
.performance-chart:focus {
/* 移除默认的交互反馈 */
transform: translate3d(0, 0, 0) !important;
transition: none !important;
}
.heade-text { .heade-text {
text-align: right; text-align: right;
line-height: 1; line-height: 1;
@ -1494,9 +1642,9 @@ text.fs12 {
.modle-title { .modle-title {
padding: 0 32rpx 24rpx 32rpx; padding: 0 32rpx 24rpx 32rpx;
font-size: 32rpx; font-size: 28rpx;
font-weight: 600; font-weight: 700;
color: #333; color: #2c3e50;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 32rpx 20rpx 0 20rpx; margin: 32rpx 20rpx 0 20rpx;
@ -1600,9 +1748,9 @@ text.fs12 {
text-align: right; text-align: right;
.strong-text { .strong-text {
font-size: 32rpx; font-size: 28rpx;
font-weight: 600; font-weight: 700;
color: #333; color: #2c3e50;
font-family: 'DIN Alternate', 'Bahnschrift', sans-serif; font-family: 'DIN Alternate', 'Bahnschrift', sans-serif;
} }
} }
@ -2356,7 +2504,7 @@ canvas.operation-content {
} }
.category-name { .category-name {
font-size: 28rpx; font-size: 26rpx;
font-weight: 600; font-weight: 600;
color: #2c3e50; color: #2c3e50;
} }
@ -2369,7 +2517,7 @@ canvas.operation-content {
} }
.amount { .amount {
font-size: 32rpx; font-size: 26rpx;
font-weight: 700; font-weight: 700;
color: #27B25F; color: #27B25F;
font-family: 'DIN Alternate', 'Bahnschrift', monospace; font-family: 'DIN Alternate', 'Bahnschrift', monospace;
@ -2477,8 +2625,8 @@ canvas.operation-content {
} }
.region-title { .region-title {
font-size: 26rpx; font-size: 28rpx;
font-weight: 600; font-weight: 700;
color: #2c3e50; color: #2c3e50;
} }
@ -2715,8 +2863,8 @@ canvas.operation-content {
} }
.upload-text { .upload-text {
font-size: 32rpx; font-size: 28rpx;
font-weight: 600; font-weight: 700;
color: #2c3e50; color: #2c3e50;
} }
@ -2892,13 +3040,13 @@ canvas.operation-content {
} }
.region-name { .region-name {
font-size: 30rpx; font-size: 26rpx;
font-weight: 600; font-weight: 600;
color: #2c3e50; color: #2c3e50;
} }
.region-revenue { .region-revenue {
font-size: 32rpx; font-size: 24rpx;
font-weight: 700; font-weight: 700;
color: #27B25F; color: #27B25F;
font-family: 'DIN Alternate', 'Bahnschrift', monospace; font-family: 'DIN Alternate', 'Bahnschrift', monospace;
@ -3065,4 +3213,479 @@ canvas.operation-content {
background-position: -200% 0; background-position: -200% 0;
} }
} }
/* 页面入场动画 */
.page-fade-in {
animation: pageSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
opacity: 0;
transform: translateY(30px);
}
@keyframes pageSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 分析容器滑入动画 */
.slide-up-animation {
animation: slideUpFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
opacity: 0;
transform: translateY(20px);
}
@keyframes slideUpFade {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Tab淡入动画 */
.tab-fade-in {
animation: tabFadeIn 0.5s ease-out 0.4s forwards;
opacity: 0;
}
@keyframes tabFadeIn {
to {
opacity: 1;
}
}
/* Tab切换动画 */
.tab-item {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform: scale(1);
}
.tab-item.active {
transform: scale(1.05);
}
.tab-item:active {
transform: scale(0.95);
}
/* 图表容器动画 */
.chart-fade-in {
animation: chartFadeIn 0.6s ease-out forwards;
opacity: 0;
}
@keyframes chartFadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.chart-scale-in {
animation: chartScaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
opacity: 0;
transform: scale(0.8);
}
@keyframes chartScaleIn {
to {
opacity: 1;
transform: scale(1);
}
}
/* 数据卡片动画 */
.card-slide-up {
animation: cardSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
opacity: 0;
transform: translateY(30px);
}
@keyframes cardSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.data-card {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.data-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
/* 进度条动画 */
.progress-fill {
transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
width: 0;
}
.progress-delay-0 {
transition-delay: 0.8s;
}
.progress-delay-1 {
transition-delay: 0.9s;
}
.progress-delay-2 {
transition-delay: 1.0s;
}
.progress-delay-3 {
transition-delay: 1.1s;
}
.progress-delay-4 {
transition-delay: 1.2s;
}
/* 卡片交错动画 */
.cards-stagger .data-card:nth-child(1) {
animation-delay: 0.1s;
}
.cards-stagger .data-card:nth-child(2) {
animation-delay: 0.2s;
}
.cards-stagger .data-card:nth-child(3) {
animation-delay: 0.3s;
}
.cards-stagger .data-card:nth-child(4) {
animation-delay: 0.4s;
}
.cards-stagger .data-card:nth-child(5) {
animation-delay: 0.5s;
}
/* 区域列表动画 */
.list-fade-in {
animation: listFadeIn 0.6s ease-out 0.6s forwards;
opacity: 0;
}
@keyframes listFadeIn {
to {
opacity: 1;
}
}
.region-card-slide {
animation: regionSlideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
opacity: 0;
transform: translateY(20px);
}
@keyframes regionSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 展开收起动画 */
.expand-indicator {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.expand-indicator.expanded {
transform: rotate(180deg);
}
.service-sublist {
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.subservice-slide {
animation: subserviceSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
opacity: 0;
transform: translateX(-10px);
}
@keyframes subserviceSlideIn {
to {
opacity: 1;
transform: translateX(0);
}
}
/* 卡片悬浮效果优化 */
.region-card {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.region-card:active {
transform: scale(0.98);
opacity: 0.9;
}
.subservice-card {
transition: all 0.2s ease-out;
}
.subservice-card:active {
transform: translateX(5px);
background-color: rgba(0, 0, 0, 0.05);
}
/* 车流分析动画效果 */
.traffic-fade-in {
animation: trafficFadeIn 0.6s ease-out forwards;
opacity: 0;
}
@keyframes trafficFadeIn {
to {
opacity: 1;
}
}
.traffic-header-slide {
animation: trafficHeaderSlide 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
opacity: 0;
transform: translateY(-20px);
}
@keyframes trafficHeaderSlide {
to {
opacity: 1;
transform: translateY(0);
}
}
.traffic-icon-bounce {
animation: trafficIconBounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s forwards;
transform: scale(0.8);
}
@keyframes trafficIconBounce {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.traffic-summary-fade {
animation: summaryFadeIn 0.5s ease-out 0.8s forwards;
opacity: 0;
}
@keyframes summaryFadeIn {
to {
opacity: 1;
}
}
.traffic-region-slide {
animation: regionSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
opacity: 0;
transform: translateX(-30px);
}
@keyframes regionSlideIn {
to {
opacity: 1;
transform: translateX(0);
}
}
/* 区域卡片交互动画 */
.region-header {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.region-header:active {
transform: scale(0.98);
background-color: rgba(0, 0, 0, 0.05);
}
.region-arrow {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.region-arrow.collapsed {
transform: rotate(-90deg);
}
/* 服务区展开动画 */
.service-areas-expand {
animation: serviceAreasExpand 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
overflow: hidden;
max-height: 0;
}
@keyframes serviceAreasExpand {
to {
max-height: 1000px;
}
}
.service-item-slide {
animation: serviceItemSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
opacity: 0;
transform: translateY(15px);
}
@keyframes serviceItemSlide {
to {
opacity: 1;
transform: translateY(0);
}
}
.service-header-interactive {
transition: all 0.2s ease-out;
}
.service-header-interactive:active {
transform: scale(0.98);
background-color: rgba(0, 0, 0, 0.03);
}
/* 数值动画效果 */
.flow-item-counter .flow-value {
animation: counterPulse 0.8s ease-out 1.5s forwards;
transform: scale(1);
}
/* 无车流数据提示样式 */
.no-traffic-data {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80rpx 40rpx;
background: #f8f9fa;
border-radius: 12rpx;
margin: 20rpx;
}
.no-data-icon {
font-size: 48rpx;
margin-bottom: 16rpx;
opacity: 0.6;
}
.no-data-text {
font-size: 26rpx;
color: #6c757d;
text-align: center;
}
@keyframes counterPulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
color: #1890ff;
}
100% {
transform: scale(1);
}
}
.expand-arrow {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.expand-arrow.expanded {
transform: rotate(180deg);
}
/* 方向数据展开动画 */
.direction-expand-animation {
animation: directionExpand 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
overflow: hidden;
max-height: 0;
}
@keyframes directionExpand {
to {
max-height: 500px;
}
}
.direction-item-slide {
animation: directionItemSlide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
opacity: 0;
transform: translateX(20px);
}
@keyframes directionItemSlide {
to {
opacity: 1;
transform: translateX(0);
}
}
.direction-percent-highlight {
animation: percentHighlight 1s ease-in-out 1s forwards;
position: relative;
}
@keyframes percentHighlight {
0%,
100% {
color: inherit;
}
50% {
color: #52c41a;
font-weight: bold;
}
}
/* 车型数据弹跳动画 */
.vehicle-item-bounce {
animation: vehicleItemBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
opacity: 0;
transform: scale(0.8) translateY(10px);
}
@keyframes vehicleItemBounce {
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.vehicle-count-pulse {
animation: vehicleCountPulse 2s ease-in-out infinite;
}
@keyframes vehicleCountPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.7;
color: #1890ff;
}
}
</style> </style>

508
pages/everdayRenven/AnhuiServerpart.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view :class="'province-theme-' + currentProvinceCode" scroll-with-animation v-if="showPage"> <view :class="'province-theme-' + currentProvinceCode" scroll-with-animation v-if="showPage">
<view class="page-body"> <view class="page-body page-enter">
<div class="box-card" :style="'opacity:' + (1 - opacity) + ';'"> <div class="box-card card-enter" :style="'opacity:' + (1 - opacity) + ';'">
<div class="box-top-title"> <div class="box-top-title">
<span class="box-center-title">{{ sMsg.serverpartname }}</span> <span class="box-center-title">{{ sMsg.serverpartname }}</span>
<picker mode="date" @change="bindDateChange" :value="theRequest && theRequest.time" :start="startTime" <picker mode="date" @change="bindDateChange" :value="theRequest && theRequest.time" :start="startTime"
@ -10,7 +10,7 @@
</picker> </picker>
</div> </div>
<view class="top-card"> <view class="top-card data-card-enter">
<div class="box-center-box"> <div class="box-center-box">
<div class="uni-flex ai-center jc-between" style="margin-bottom: 8rpx;"> <div class="uni-flex ai-center jc-between" style="margin-bottom: 8rpx;">
<div class="main-amount-title">对客营收(元)</div> <div class="main-amount-title">对客营收(元)</div>
@ -36,37 +36,37 @@
</div> </div>
<div class="uni-flex jc-between box-center-box"> <div class="uni-flex jc-between box-center-box">
<div class="check-unit"> <div class="check-unit metric-enter">
<text>长款金额</text> <text>长款金额</text>
<div class="check-price-color">{{ $util.fmoney(sMsg.diffMorePrice, 2) }} <text>元</text></div> <div class="check-price-color">{{ $util.fmoney(sMsg.diffMorePrice, 2) }} <text>元</text></div>
</div> </div>
<div class="check-unit"> <div class="check-unit metric-enter">
<text>短款金额</text> <text>短款金额</text>
<div class="check-price-color">{{ $util.fmoney(sMsg.diffLessPrice, 2) }} <text>元</text></div> <div class="check-price-color">{{ $util.fmoney(sMsg.diffLessPrice, 2) }} <text>元</text></div>
</div> </div>
<div class="check-unit"> <div class="check-unit metric-enter">
<text>客单交易</text> <text>客单交易</text>
<div class="check-price-color">{{ $util.fmoney(sMsg.ticketCount, 0) }} <text>笔</text></div> <div class="check-price-color">{{ $util.fmoney(sMsg.ticketCount, 0) }} <text>笔</text></div>
</div> </div>
<div class="check-unit"> <div class="check-unit metric-enter">
<text>客单均价</text> <text>客单均价</text>
<div class="check-price-color">{{ $util.fmoney(sMsg.tickave, 2) }} <text>元</text></div> <div class="check-price-color">{{ $util.fmoney(sMsg.tickave, 2) }} <text>元</text></div>
</div> </div>
</div> </div>
<div class="uni-flex jc-between box-center-box mt8"> <div class="uni-flex jc-between box-center-box mt8">
<div class="check-unit"> <div class="check-unit metric-enter">
<text>优惠金额</text> <text>优惠金额</text>
<div class="check-price-color">{{ $util.fmoney(sMsg.totalOffAmount, 2) }} <text>元</text></div> <div class="check-price-color">{{ $util.fmoney(sMsg.totalOffAmount, 2) }} <text>元</text></div>
</div> </div>
<div class="check-unit"> <div class="check-unit metric-enter">
<text>移动支付</text> <text>移动支付</text>
<div class="check-price-color">{{ $util.fmoney(sMsg.mobilePayment, 2) }} <text>元</text></div> <div class="check-price-color">{{ $util.fmoney(sMsg.mobilePayment, 2) }} <text>元</text></div>
</div> </div>
<div class="check-unit"> <div class="check-unit metric-enter">
<text>商品出售</text> <text>商品出售</text>
<div class="check-price-color">{{ $util.fmoney(sMsg.totalCount, 0) }} <text>件</text></div> <div class="check-price-color">{{ $util.fmoney(sMsg.totalCount, 0) }} <text>件</text></div>
</div> </div>
<div class="check-unit"> <div class="check-unit metric-enter">
<text>商品均价</text> <text>商品均价</text>
<div class="check-price-color">{{ $util.fmoney(sMsg.countave, 2) }} <text>元</text></div> <div class="check-price-color">{{ $util.fmoney(sMsg.countave, 2) }} <text>元</text></div>
</div> </div>
@ -82,11 +82,11 @@
<template v-if="cateBrandList.length"> <template v-if="cateBrandList.length">
<template v-if="theRequest.ProvinceCode == '340000'"> <template v-if="theRequest.ProvinceCode == '340000'">
<view class="uni-flex ai-center analysis-tabs"> <view class="uni-flex ai-center analysis-tabs tabs-enter">
<!-- <view @tap="changeTab(3)" class="tab" :class="{'active': nowTab==3}">经营模式</view> --> <!-- <view @tap="changeTab(3)" class="tab" :class="{'active': nowTab==3}">经营模式</view> -->
<view @tap="changeTab(4)" class="tab" :class="{ 'active': nowTab == 4 }">车流分析</view> <view @tap="changeTab(4)" class="tab tab-slide" :class="{ 'active': nowTab == 4 }">车流分析</view>
<view @tap="changeTab(1)" class="tab" :class="{ 'active': nowTab == 1 }">经营分析</view> <view @tap="changeTab(1)" class="tab tab-slide" :class="{ 'active': nowTab == 1 }">经营分析</view>
<view @tap="changeTab(2)" class="tab" :class="{ 'active': nowTab == 2 }">客群分析</view> <view @tap="changeTab(2)" class="tab tab-slide" :class="{ 'active': nowTab == 2 }">客群分析</view>
</view> </view>
<!-- <view class="pie-content" v-show="nowTab==3"> <!-- <view class="pie-content" v-show="nowTab==3">
@ -98,36 +98,33 @@
</view> --> </view> -->
</template> </template>
<!-- 经营分析内容 -->
<view v-show="nowTab == 1"> <view v-show="nowTab == 1">
<!-- 安徽省 --> <!-- 安徽省 -->
<div class="pie-content"> <div class="pie-content">
<div class="model-busniess">经营业态占比</div> <div class="model-busniess">经营业态占比</div>
<ServiceRevenuePie ref="serviceRevenuePie" v-if="ServiceRevenueData.length == 2 && nowTab == 1" <ServiceRevenuePie ref="serviceRevenuePie" v-show="ServiceRevenueData && ServiceRevenueData.length >= 2"
:data="ServiceRevenueData" @selectCate="selectCate" /> :data="ServiceRevenueData" @selectCate="selectCate" />
<!-- 其余省份 --> <!-- 其余省份 -->
<!-- <canvas v-else-if="sellData.length>0" canvas-id="sellCate" id="sellCate" class="operation-cate-content" @click="touchPie($event,'sellCate')"></canvas> --> <!-- <canvas v-else-if="sellData.length>0" canvas-id="sellCate" id="sellCate" class="operation-cate-content" @click="touchPie($event,'sellCate')"></canvas> -->
<div class="model-busniess"> <div class="model-busniess progress-section-enter">
<div>经营模式占比</div> <div>经营模式占比</div>
<div class="progress-content"> <div class="progress-content">
<div class="progress-left" :style="'width: ' + operationModel[0].bili + '%;'"></div> <div class="progress-left" :style="'width: ' + operationModel[0].bili + '%;'"></div>
<div class="progress-right" :style="'width: ' + operationModel[1].bili + '%;'"></div> <div class="progress-right" :style="'width: ' + operationModel[1].bili + '%;'"></div>
</div> </div>
<div class="uni-flex jc-between"> <div class="uni-flex jc-between">
<div style="color: #667ED5;font-size: 26rpx;">{{ operationModel[0].name }}: <span <div style="color: #667ED5;">{{ operationModel[0].name }}: <span style="font-size: 32rpx;">{{
style="font-size: 26rpx;">{{
operationModel[0].bili }}</span>%</div> operationModel[0].bili }}</span>%</div>
<div style="color: #F3AF50;font-size: 26rpx;" v-if="operationModel[1].name">{{ operationModel[1].name <div style="color: #F3AF50;" v-if="operationModel[1].name">{{ operationModel[1].name }}:
}}: <span style="font-size: 32rpx;">{{ operationModel[1].bili }}</span>%
<span style="font-size: 26rpx;">{{ operationModel[1].bili }}</span>%
</div> </div>
</div> </div>
<div class="uni-flex jc-between"> <div class="uni-flex jc-between">
<div style="margin-bottom: 0;font-size: 24rpx;"><span style="font-size: 26rpx;">{{ <div style="margin-bottom: 0;"><span style="font-size: 32rpx;">{{ operationModel[0].data
operationModel[0].data
}}</span>元 }}</span>元
</div> </div>
<div style="margin-bottom: 0;font-size: 24rpx;" v-if="operationModel[1].data"><span <div style="margin-bottom: 0;" v-if="operationModel[1].data"><span style="font-size: 32rpx;">{{
style="font-size: 26rpx;">{{
operationModel[1].data operationModel[1].data
}}</span>元 }}</span>元
</div> </div>
@ -135,17 +132,19 @@
</div> </div>
</div> </div>
<!-- 品牌列表 --> <!-- 品牌列表 -->
<div class="shop-box"> <div class="shop-box brand-list-enter">
<scroll-view scroll-x class="tab-shop" scroll-with-animation :scroll-left="scrollLeft"> <scroll-view scroll-x class="tab-shop tab-shop-slide" scroll-with-animation :scroll-left="scrollLeft">
<div v-for="(n, i) in cateBrandList" :key="i" :id="`tabNum${i}`" class="cate-name" <div v-for="(n, i) in cateBrandList" :key="i" :id="`tabNum${i}`" class="cate-name brand-tab-stagger"
:class="{ 'active': nowShop == i }" @click="selectCate(i)">{{ n.Bussiness_Name }}</div> :class="{ 'active': nowShop == i }" @click="selectCate(i)"
:style="'animation-delay: ' + (i * 0.05) + 's'">{{
n.Bussiness_Name }}</div>
</scroll-view> </scroll-view>
<div class="tab-content" v-if="cateBrandList.length"> <div class="tab-content brand-cards-container" v-if="cateBrandList.length">
<div class="shop-card" v-for="(m, i) in cateBrandList[nowShop].listBrandModel" :key="i" <div class="shop-card brand-card-stagger" v-for="(m, i) in cateBrandList[nowShop].listBrandModel" :key="i"
@click="toBrandPage(m, i)"> @click="toBrandPage(m, i)" :style="'animation-delay: ' + (i * 0.08) + 's'">
<div> <div class="brand-icon-wrapper">
<image v-if="m.Brand_ICO" :src="m.Brand_ICO" mode="aspectFit"></image> <image v-if="m.Brand_ICO" :src="m.Brand_ICO" mode="aspectFit" class="brand-icon"></image>
<image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image> <image v-else src="/static/images/revenue/home.png" mode="aspectFit" class="brand-icon"></image>
</div> </div>
<div class="shop-name">{{ m.Brand_Name }}</div> <div class="shop-name">{{ m.Brand_Name }}</div>
<div class="price-num">¥ {{ m.Revenue_Amount ? $util.fmoney(m.Revenue_Amount, 2) : '0.00' }} <div class="price-num">¥ {{ m.Revenue_Amount ? $util.fmoney(m.Revenue_Amount, 2) : '0.00' }}
@ -155,10 +154,10 @@
</div> </div>
</view> </view>
<view class="" v-show="nowTab == 2"> <view class="tab-content-fade" v-show="nowTab == 2">
<CustomerAnalysis ref="customerAna" :show="nowTab == 2" /> <CustomerAnalysis ref="customerAna" :show="nowTab == 2" />
</view> </view>
<view class="" v-show="nowTab == 4"> <view class="tab-content-fade" v-show="nowTab == 4">
<CarAnalysis ref="carAna" :show="nowTab == 4" /> <CarAnalysis ref="carAna" :show="nowTab == 4" />
</view> </view>
@ -320,8 +319,7 @@ export default {
let d = date.getDate() - 1 let d = date.getDate() - 1
if (d - 8 < 0) { if (d - 8 < 0) {
let num = 8 - d let num = 8 - d
m = m - 1 let changeMonth = m - 1
let changeMonth = m
if (changeMonth < 10) { if (changeMonth < 10) {
changeMonth = '0' + changeMonth changeMonth = '0' + changeMonth
} }
@ -338,8 +336,13 @@ export default {
day = d - 8 day = d - 8
startTime = `${y}-${m}-${day}` startTime = `${y}-${m}-${day}`
} }
console.log('mmm', m);
this.startTime = startTime this.startTime = startTime
this.endTime = `${y}-${m}-${d}` this.endTime = `${y}-${m}-${d}`
console.log('this.startTimethis.startTime', this.startTime);
console.log('this.startTimethis.endTime', this.endTime);
}, },
@ -368,7 +371,6 @@ export default {
changeTab(value) { changeTab(value) {
this.nowTab = value this.nowTab = value
if (value == 2) { if (value == 2) {
let opt = this.theRequest let opt = this.theRequest
const params = { const params = {
serverpartId: opt.ServerpartIds, serverpartId: opt.ServerpartIds,
@ -480,8 +482,15 @@ export default {
let colors1 = ['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3']; let colors1 = ['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3'];
let list = [] let list = []
let list2 = [] let list2 = []
// 检查数据有效性
if (!_this.pageData || !_this.pageData.listBusinessModel) {
console.warn('pageData 或 listBusinessModel 无效')
return
}
_this.pageData.listBusinessModel.map((m, i) => { _this.pageData.listBusinessModel.map((m, i) => {
if (m.Revenue_Amount != 0) { if (m.Revenue_Amount && m.Revenue_Amount != 0) {
let n = { let n = {
name: m.Bussiness_Name, name: m.Bussiness_Name,
data: m.Revenue_Amount data: m.Revenue_Amount
@ -506,24 +515,43 @@ export default {
} }
}) })
if (list2.length > 0) {
_this.ServiceRevenueData.push(list2)
_this.sellData = list
// 构建完整的数据数组
let fullServiceRevenueData = []
// 添加第一层数据
if (list2.length > 0) {
fullServiceRevenueData.push(list2)
_this.sellData = list
console.log('第一层数据准备:', list2)
} }
// 添加第二层数据
if (_this.pageData.listCurBusinessModel && _this.pageData.listCurBusinessModel.length > 0) { if (_this.pageData.listCurBusinessModel && _this.pageData.listCurBusinessModel.length > 0) {
let list = [] let list3 = []
_this.pageData.listCurBusinessModel.map(m => { _this.pageData.listCurBusinessModel.map(m => {
if (m.Revenue_Amount != 0) { if (m.Revenue_Amount && m.Revenue_Amount != 0) {
let n = { let n = {
name: m.Bussiness_Name, name: m.Bussiness_Name,
value: m.Revenue_Amount value: m.Revenue_Amount
} }
list.push(n) list3.push(n)
} }
}) })
_this.ServiceRevenueData.push(list) if (list3.length > 0) {
fullServiceRevenueData.push(list3)
console.log('第二层数据准备:', list3)
} }
}
// 一次性设置完整数据，确保响应式更新
if (fullServiceRevenueData.length > 0) {
_this.$set(_this, 'ServiceRevenueData', fullServiceRevenueData)
console.log('operationFn设置完整数据:', fullServiceRevenueData)
}
console.log('最终 ServiceRevenueData:', _this.ServiceRevenueData)
if (list.length > 0) { if (list.length > 0) {
_this.showPie({ _this.showPie({
id: 'sellCate', id: 'sellCate',
@ -670,7 +698,7 @@ export default {
_this.pageData = res.Result_Data _this.pageData = res.Result_Data
if (res.Result_Data.listBusinessModel) { if (res.Result_Data.listBusinessModel) {
let list = JSON.parse(JSON.stringify(res.Result_Data.listBusinessModel)) let list = JSON.parse(JSON.stringify(res.Result_Data.listBusinessModel))
console.log('list', list) console.log('获取到业务数据:', list)
if (list.length > 0) { if (list.length > 0) {
let all = { let all = {
Bussiness_Name: '全部', Bussiness_Name: '全部',
@ -687,12 +715,18 @@ export default {
} }
}) })
_this.cateBrandList = [all, ...list] _this.cateBrandList = [all, ...list]
// 确保在数据设置后调用 operationFn
_this.$nextTick(() => {
_this.operationFn() _this.operationFn()
})
return return
} }
return return
} }
// 没有数据时清空相关数据
_this.cateBrandList = [] _this.cateBrandList = []
_this.$set(_this, 'ServiceRevenueData', [])
}) })
}, },
// 获取头部卡片 展示信息 // 获取头部卡片 展示信息
@ -727,8 +761,11 @@ export default {
colors: colors1, colors: colors1,
}); });
// 经营业态 // 经营业态
// this.ServiceRevenueData = [] if (busniessTradeFathPie && busniessTradeFathPie.length > 0 && busniessTradePie && busniessTradePie.length > 0) {
this.ServiceRevenueData = [busniessTradeFathPie, busniessTradePie] this.$set(this, 'ServiceRevenueData', [busniessTradeFathPie, busniessTradePie])
} else {
this.$set(this, 'ServiceRevenueData', [])
}
if (totalData.uploadCount !== totalData.totalUploadCount) { if (totalData.uploadCount !== totalData.totalUploadCount) {
this.getUnUpLoadShops(theRequest) this.getUnUpLoadShops(theRequest)
@ -1476,7 +1513,6 @@ cover-view.page-title {
padding: 8rpx 24rpx; padding: 8rpx 24rpx;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 12rpx; border-radius: 12rpx;
font-size: 28rpx;
border: 1rpx solid #f0f0f0; border: 1rpx solid #f0f0f0;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
} }
@ -1507,4 +1543,370 @@ cover-view.page-title {
background: linear-gradient(90deg, #ff9f43, #ffb84d); background: linear-gradient(90deg, #ff9f43, #ffb84d);
border-radius: 0 6rpx 6rpx 0; border-radius: 0 6rpx 6rpx 0;
} }
/* 动画效果 - UniApp微信小程序兼容版本 */
/* 页面入场动画 */
@keyframes pageEnter {
0% {
opacity: 0;
transform: translateY(50rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.page-enter {
animation: pageEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* 卡片入场动画 */
@keyframes cardEnter {
0% {
opacity: 0;
transform: translateY(30rpx) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.card-enter {
animation: cardEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
opacity: 0;
}
/* 数据卡片动画 */
@keyframes dataCardEnter {
0% {
opacity: 0;
transform: translateY(20rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.data-card-enter {
animation: dataCardEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
opacity: 0;
}
/* 指标动画 */
@keyframes metricEnter {
0% {
opacity: 0;
transform: translateY(15rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.metric-enter:nth-child(1) {
animation: metricEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
opacity: 0;
}
.metric-enter:nth-child(2) {
animation: metricEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
opacity: 0;
}
.metric-enter:nth-child(3) {
animation: metricEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
opacity: 0;
}
.metric-enter:nth-child(4) {
animation: metricEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
opacity: 0;
}
/* Tab标签页动画 */
@keyframes tabsEnter {
0% {
opacity: 0;
transform: translateY(20rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.tabs-enter {
animation: tabsEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
opacity: 0;
}
@keyframes tabSlide {
0% {
opacity: 0;
transform: translateX(-20rpx);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.tab-slide:nth-child(1) {
animation: tabSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
opacity: 0;
}
.tab-slide:nth-child(2) {
animation: tabSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
opacity: 0;
}
.tab-slide:nth-child(3) {
animation: tabSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
opacity: 0;
}
/* Tab内容淡入动画 */
@keyframes tabContentFade {
0% {
opacity: 0;
transform: translateY(10rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.tab-content-fade {
animation: tabContentFade 0.4s ease-out forwards;
}
/* 图表容器动画 */
@keyframes chartContainerEnter {
0% {
opacity: 0;
transform: translateY(30rpx) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.chart-container-enter {
animation: chartContainerEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
opacity: 0;
}
/* 标题滑入动画 */
@keyframes titleSlideIn {
0% {
opacity: 0;
transform: translateX(-30rpx);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.title-slide-in {
animation: titleSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
opacity: 0;
}
/* 进度条区域动画 */
@keyframes progressSectionEnter {
0% {
opacity: 0;
transform: translateY(20rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.progress-section-enter {
animation: progressSectionEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
opacity: 0;
}
/* 品牌列表动画 */
@keyframes brandListEnter {
0% {
opacity: 0;
transform: translateY(25rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.brand-list-enter {
animation: brandListEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s forwards;
opacity: 0;
}
/* 品牌卡片错列动画 */
@keyframes brandCardStagger {
0% {
opacity: 0;
transform: translateY(20rpx) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.brand-card-stagger {
animation: brandCardStagger 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s forwards;
opacity: 0;
}
/* 交互反馈动画 */
.tab-slide:active,
.brand-card-stagger:active {
transform: scale(0.98);
transition: transform 0.1s ease-out;
}
/* 图表加载状态 */
.chart-loading {
display: flex;
justify-content: center;
align-items: center;
height: 300rpx;
color: #999;
font-size: 28rpx;
}
/* 品牌标签页动画 */
@keyframes tabShopSlide {
0% {
opacity: 0;
transform: translateY(15rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.tab-shop-slide {
animation: tabShopSlide 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.1s forwards;
opacity: 0;
}
/* 品牌标签错列动画 */
@keyframes brandTabStagger {
0% {
opacity: 0;
transform: translateX(-15rpx);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.brand-tab-stagger {
animation: brandTabStagger 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s forwards;
opacity: 0;
}
/* 品牌卡片容器动画 */
@keyframes brandCardsContainer {
0% {
opacity: 0;
transform: translateY(20rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.brand-cards-container {
animation: brandCardsContainer 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.3s forwards;
opacity: 0;
}
/* 品牌图标包装器动画 */
@keyframes brandIconWrapper {
0% {
opacity: 0;
transform: scale(0.8) rotate(-5deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
.brand-icon-wrapper {
animation: brandIconWrapper 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
animation-delay: inherit;
}
.brand-icon {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 品牌卡片悬浮效果增强 */
.brand-card-stagger:active .brand-icon-wrapper {
transform: scale(0.9) rotate(2deg);
}
.brand-card-stagger:active .shop-name {
transform: translateY(2rpx);
}
.brand-card-stagger:active .price-num {
transform: scale(1.05);
}
/* 品牌标签活跃状态动画 */
.brand-tab-stagger.active {
animation: brandTabStagger 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
tabActivePulse 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
}
@keyframes tabActivePulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
</style> </style>

38
pages/everdayRenven/components/RankContent.vue
View File

@ -6,11 +6,11 @@
<view class="tab-icon">🏪</view> <view class="tab-icon">🏪</view>
<text class="tab-text">商超</text> <text class="tab-text">商超</text>
</view> </view>
<view class="tab-item" @tap="selectTab(2000)" :class="{ 'active': nowRank == 2000 }"> <view class="tab-item" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }">
<view class="tab-icon">🍽️</view> <view class="tab-icon">🍽️</view>
<text class="tab-text">餐饮</text> <text class="tab-text">餐饮</text>
</view> </view>
<view class="tab-item" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }"> <view class="tab-item" @tap="selectTab(2000)" :class="{ 'active': nowRank == 2000 }">
<view class="tab-icon">🍿</view> <view class="tab-icon">🍿</view>
<text class="tab-text">小吃</text> <text class="tab-text">小吃</text>
</view> </view>
@ -85,7 +85,7 @@ export default {
/* 现代化选项卡 */ /* 现代化选项卡 */
.ranking-tabs { .ranking-tabs {
display: flex; display: flex;
background: #fff; background: #f8f9fa;
border-radius: 12rpx; border-radius: 12rpx;
padding: 6rpx; padding: 6rpx;
margin: 0 20rpx 24rpx; margin: 0 20rpx 24rpx;
@ -105,12 +105,12 @@ export default {
cursor: pointer; cursor: pointer;
&.active { &.active {
background: linear-gradient(135deg, #27B25F, #4CCC7F); background: linear-gradient(135deg, #27B25F, #4CCC7F) !important;
box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3); box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3) !important;
transform: translateY(-2rpx); transform: translateY(-2rpx);
.tab-text { .tab-text {
color: #fff; color: #fff !important;
font-weight: 600; font-weight: 600;
} }
@ -260,7 +260,7 @@ export default {
} }
.item-name { .item-name {
font-size: 24rpx; font-size: 28rpx;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
margin-bottom: 12rpx; margin-bottom: 12rpx;
@ -338,7 +338,8 @@ export default {
/* 主题色支持 - 通过全局主题类控制 */ /* 主题色支持 - 通过全局主题类控制 */
:global(.province-theme-330200) .tab-item.active { :global(.province-theme-330200) .tab-item.active {
background: linear-gradient(135deg, #1890FF, #69C0FF); background: linear-gradient(135deg, #1890FF, #69C0FF) !important;
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3) !important;
.stat-value.sales-amount { .stat-value.sales-amount {
color: #1890FF; color: #1890FF;
@ -346,7 +347,8 @@ export default {
} }
:global(.province-theme-340000) .tab-item.active { :global(.province-theme-340000) .tab-item.active {
background: linear-gradient(135deg, #748ED6, #91A7E3); background: linear-gradient(135deg, #748ED6, #91A7E3) !important;
box-shadow: 0 4rpx 12rpx rgba(116, 142, 214, 0.3) !important;
.stat-value.sales-amount { .stat-value.sales-amount {
color: #748ED6; color: #748ED6;
@ -354,7 +356,8 @@ export default {
} }
:global(.province-theme-500000) .tab-item.active { :global(.province-theme-500000) .tab-item.active {
background: linear-gradient(135deg, #FA541C, #FF7A45); background: linear-gradient(135deg, #FA541C, #FF7A45) !important;
box-shadow: 0 4rpx 12rpx rgba(250, 84, 28, 0.3) !important;
.stat-value.sales-amount { .stat-value.sales-amount {
color: #FA541C; color: #FA541C;
@ -362,7 +365,8 @@ export default {
} }
:global(.province-theme-510000) .tab-item.active { :global(.province-theme-510000) .tab-item.active {
background: linear-gradient(135deg, #FA8C16, #FFA940); background: linear-gradient(135deg, #FA8C16, #FFA940) !important;
box-shadow: 0 4rpx 12rpx rgba(250, 140, 22, 0.3) !important;
.stat-value.sales-amount { .stat-value.sales-amount {
color: #FA8C16; color: #FA8C16;
@ -370,7 +374,8 @@ export default {
} }
:global(.province-theme-520000) .tab-item.active { :global(.province-theme-520000) .tab-item.active {
background: linear-gradient(135deg, #52C41A, #73D13D); background: linear-gradient(135deg, #52C41A, #73D13D) !important;
box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3) !important;
.stat-value.sales-amount { .stat-value.sales-amount {
color: #52C41A; color: #52C41A;
@ -378,7 +383,8 @@ export default {
} }
:global(.province-theme-530000) .tab-item.active { :global(.province-theme-530000) .tab-item.active {
background: linear-gradient(135deg, #27B25F, #4CCC7F); background: linear-gradient(135deg, #27B25F, #4CCC7F) !important;
box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3) !important;
.stat-value.sales-amount { .stat-value.sales-amount {
color: #27B25F; color: #27B25F;
@ -386,7 +392,8 @@ export default {
} }
:global(.province-theme-630000) .tab-item.active { :global(.province-theme-630000) .tab-item.active {
background: linear-gradient(135deg, #13C2C2, #36CFC9); background: linear-gradient(135deg, #13C2C2, #36CFC9) !important;
box-shadow: 0 4rpx 12rpx rgba(19, 194, 194, 0.3) !important;
.stat-value.sales-amount { .stat-value.sales-amount {
color: #13C2C2; color: #13C2C2;
@ -394,7 +401,8 @@ export default {
} }
:global(.province-theme-734100) .tab-item.active { :global(.province-theme-734100) .tab-item.active {
background: linear-gradient(135deg, #E91E63, #F06292); background: linear-gradient(135deg, #E91E63, #F06292) !important;
box-shadow: 0 4rpx 12rpx rgba(233, 30, 99, 0.3) !important;
.stat-value.sales-amount { .stat-value.sales-amount {
color: #E91E63; color: #E91E63;

185
pages/everdayRenven/components/listUnit.vue
View File

@ -1,11 +1,12 @@
<template> <template>
<div> <div>
<div class="analysis-cell" @tap="toggleShow" :class="{ 'active': item.show }" :style="activeCellStyleStr"> <div class="analysis-cell cell-enter" @tap="toggleShow" :class="{ 'active': item.show }"
<div class="shop-title" :class="'theme-' + provinceCode"> :style="activeCellStyleStr">
<div class="shop-title title-slide" :class="'theme-' + provinceCode">
<span> {{ (i > 8 ? i + 1 : '0' + (i + 1)) + ' ' + item.SHOPNAME }}</span> <span> {{ (i > 8 ? i + 1 : '0' + (i + 1)) + ' ' + item.SHOPNAME }}</span>
<p> <p>
<span v-show="item.UNACCOUNT_SIGN">￥</span> <span v-show="item.UNACCOUNT_SIGN">￥</span>
<span class="cell-price" :style="priceStyleStr">{{ <span class="cell-price price-highlight" :style="priceStyleStr">{{
item.UNACCOUNT_SIGN item.UNACCOUNT_SIGN
? $util.fmoney(item.CASHPAY_TOTAL, 2) : '无结账信息' }}</span> ? $util.fmoney(item.CASHPAY_TOTAL, 2) : '无结账信息' }}</span>
<image src="/static/images/effective/true.png" mode="aspectFit" class="" v-if='item.SHOWDEAL_SIGN'> <image src="/static/images/effective/true.png" mode="aspectFit" class="" v-if='item.SHOWDEAL_SIGN'>
@ -14,11 +15,11 @@
</p> </p>
</div> </div>
<p v-if="item.detail.length > 0" style="line-height: 1.2;"> <p v-if="item.detail.length > 0" style="line-height: 1.2;" class="tags-container">
<span v-for="(child, index) in item.detail" :key="index" class="atribute-tag">{{ child }} </span> <span v-for="(child, index) in item.detail" :key="index" class="atribute-tag">{{ child }} </span>
</p> </p>
</div> </div>
<div class="analysis-detail" v-show="item.show"> <div class="analysis-detail" v-if="item.show">
<div class="detail-unit" v-for="(unit, o) in item.ShopEndAccountList" :key="o"> <div class="detail-unit" v-for="(unit, o) in item.ShopEndAccountList" :key="o">
<div class="uni-inline-flex"> <div class="uni-inline-flex">
<span class="detail-title">结账时间：</span> <span class="detail-title">结账时间：</span>
@ -31,24 +32,23 @@
</div> </div>
<block v-if="unit.DESCRIPTION_DATE"> <block v-if="unit.DESCRIPTION_DATE">
<div class="detail-title">日结校验：{{ unit.DESCRIPTION_DATE }}</div> <div class="detail-title" style="font-size: 24rpx;">日结校验：{{ unit.DESCRIPTION_DATE }}</div>
<p><span class="detail-title">{{ unit.DESCRIPTION_STAFF }}：</span><span style="font-size: 24rpx;">{{ <p><span class="detail-title" style="font-size: 24rpx;">{{ unit.DESCRIPTION_STAFF }}：</span><span>{{
unit.DIFFERENCE_REASON unit.DIFFERENCE_REASON
}}</span> }}</span>
</p> </p>
</block> </block>
<block v-if="unit.APPROVE_DATE"> <block v-if="unit.APPROVE_DATE">
<div><span class="detail-title">日结审核：{{ unit.APPROVE_DATE }}</span></div> <div><span class="detail-title" style="font-size: 24rpx;">日结审核：{{ unit.APPROVE_DATE }}</span></div>
<p><span class="detail-title" style="font-size: 24rpx;">{{ unit.APPROVE_STAFF }}：</span><span <p><span class="detail-title" style="font-size: 24rpx;">{{ unit.APPROVE_STAFF }}：</span><span>{{
style="font-size: 24rpx;">{{
unit.APPROVED_INFO }}</span> unit.APPROVED_INFO }}</span>
</p> </p>
</block> </block>
<div> <div>
<p class="detail-short-info" v-show="unit.FACTAMOUNT_SALE">单品报表：<text <p class="detail-short-info" v-show="unit.FACTAMOUNT_SALE" style="font-size: 24rpx;"> 单品报表：<text
class="uni-icon uni-icon-checkmarkempty"></text></p> class="uni-icon uni-icon-checkmarkempty" style="font-size: 24rpx;"></text></p>
<p class="detail-short-info" v-show="unit.FACTAMOUNT_CIGARETTE">香烟数据：<span <p class="detail-short-info" v-show="unit.FACTAMOUNT_CIGARETTE" style="font-size: 24rpx;">香烟数据：<span
class="uni-icon uni-icon-checkmarkempty"></span></p> class="uni-icon uni-icon-checkmarkempty" style="font-size: 24rpx;"></span></p>
</div> </div>
<div><span class="detail-title detail-short-info" style="font-size: 24rpx;">稽核次数：{{ unit.CHECK_COUNT }} <div><span class="detail-title detail-short-info" style="font-size: 24rpx;">稽核次数：{{ unit.CHECK_COUNT }}
次</span><span class="detail-short-info" style="font-size: 24rpx;">长短款额：{{ 次</span><span class="detail-short-info" style="font-size: 24rpx;">长短款额：{{
@ -128,7 +128,7 @@ export default {
// 动态样式字符串（小程序兼容） // 动态样式字符串（小程序兼容）
activeCellStyleStr() { activeCellStyleStr() {
if (!this.item.show) return '' if (!this.item || !this.item.show) return ''
return `border: 2rpx solid ${this.themeColors.primary}; box-shadow: 0 4px 20px rgba(${this.hexToRgb(this.themeColors.primary)}, 0.15);` return `border: 2rpx solid ${this.themeColors.primary}; box-shadow: 0 4px 20px rgba(${this.hexToRgb(this.themeColors.primary)}, 0.15);`
}, },
@ -376,4 +376,159 @@ export default {
font-size: 28rpx; font-size: 28rpx;
} }
} }
/* 动画效果 - listUnit组件 */
/* 单元格入场动画 */
@keyframes cellEnter {
0% {
opacity: 0;
transform: translateY(20rpx) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.cell-enter {
animation: cellEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
opacity: 0;
}
/* 标题滑入动画 */
@keyframes titleSlide {
0% {
opacity: 0;
transform: translateX(-15rpx);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.title-slide {
animation: titleSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
opacity: 0;
}
/* 价格高亮动画 */
@keyframes priceHighlight {
0% {
opacity: 0;
transform: scale(0.8);
}
50% {
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.price-highlight {
animation: priceHighlight 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s forwards;
opacity: 0;
}
/* 标签容器动画 */
@keyframes tagsContainer {
0% {
opacity: 0;
transform: translateY(10rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.tags-container {
animation: tagsContainer 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
opacity: 0;
}
/* 标签弹跳动画 */
@keyframes tagBounce {
0% {
opacity: 0;
transform: translateY(-10rpx) scale(0.8);
}
60% {
transform: translateY(2rpx) scale(1.05);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.tag-bounce {
animation: tagBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
opacity: 0;
}
/* 详情展开动画 */
@keyframes detailExpand {
0% {
opacity: 0;
max-height: 0;
transform: translateY(-20rpx);
}
100% {
opacity: 1;
max-height: 2000rpx;
transform: translateY(0);
}
}
.detail-expand {
animation: detailExpand 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
overflow: hidden;
}
/* 详情单元淡入动画 */
@keyframes unitFadeIn {
0% {
opacity: 0;
transform: translateY(15rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.unit-fade-in {
animation: unitFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
opacity: 0;
}
/* 交互反馈动画 */
.cell-enter:active {
transform: scale(0.98);
transition: transform 0.1s ease-out;
}
.tag-bounce:hover {
transform: translateY(-2rpx) scale(1.02);
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 单元格活跃状态增强 */
.analysis-cell.active {
transform: translateY(-2rpx);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
</style> </style>

235
pages/everdayRenven/serviceDetail.vue
View File

@ -1,25 +1,21 @@
<template> <template>
<div :class="'province-theme-' + currentProvinceCode" v-if="showPage"> <div :class="'province-theme-' + currentProvinceCode" v-if="showPage">
<div class="page-body"> <div class="page-body page-enter">
<div class="service-brand-box"> <div class="service-brand-box brand-header-enter">
<div class="uni-flex align-center"> <div class="uni-flex align-center brand-info-slide">
<div class="band-name brand-name-slide">{{ pageMsg.ShopEndaccountList &&
<image v-if="pageMsg.Brand_ICO" :src="pageMsg.Brand_ICO" mode="aspectFit"></image> pageMsg.ShopEndaccountList.length > 0 ?
<image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image>
<!-- <div class="band-name">{{ pageMsg.Brand_Name }}</div> -->
<div class="band-name">{{ pageMsg.ShopEndaccountList && pageMsg.ShopEndaccountList.length > 0 ?
pageMsg.ShopEndaccountList[0].SERVERPART_NAME : "" }}</div> pageMsg.ShopEndaccountList[0].SERVERPART_NAME : "" }}</div>
</div> </div>
<div class="price-num">{{ pageMsg.Revenue_Amount ? $util.fmoney(pageMsg.Revenue_Amount, 2) : '0.00' }} <div class="price-num price-count-up">{{ pageMsg.Revenue_Amount ? $util.fmoney(pageMsg.Revenue_Amount,
</div> 2) : '0.00' }}</div>
</div> </div>
<!--服务区门店分析--> <!--服务区门店分析-->
<div style="margin-top: 0 20rpx;padding: 0 16rpx"> <div style="margin-top: 0 20rpx;padding: 0 16rpx" class="shop-list-container">
<shopCell v-for="(item, i) in pageMsg.ShopEndaccountList" :key="i" :item='item' @toggleShow="toggleShow" <shopCell v-for="(item, i) in pageMsg.ShopEndaccountList" :key="i" :item='item' @toggleShow="toggleShow"
:i='i' :provinceCode='currentProvinceCode'></shopCell> :i='i' :provinceCode='currentProvinceCode' class="shop-item-stagger"
:style="'animation-delay: ' + (i * 0.1 + 0.8) + 's'" v-if="item"></shopCell>
</div> </div>
</div> </div>
@ -33,7 +29,9 @@ export default {
return { return {
showPage: false, showPage: false,
pageMsg: {}, pageMsg: {
ShopEndaccountList: [] // 初始化为空数组，确保响应式
},
currentProvinceCode: '', // 当前省份代码 currentProvinceCode: '', // 当前省份代码
keyJson: { keyJson: {
SHOWMORE_SIGN: { 1: '【长款】', 2: '【异常长款】' }, // 长款 SHOWMORE_SIGN: { 1: '【长款】', 2: '【异常长款】' }, // 长款
@ -120,10 +118,18 @@ export default {
return this.provinceTheme return this.provinceTheme
}, },
toggleShow(i) { toggleShow(i) {
if (!this.pageMsg.ShopEndaccountList || !this.pageMsg.ShopEndaccountList[i]) {
return
}
let item = this.pageMsg.ShopEndaccountList[i] let currentItem = this.pageMsg.ShopEndaccountList[i]
item.show = !item.show let newShowState = !currentItem.show
this.$forceUpdate()
// 使用Vue.set确保响应式更新
this.$set(this.pageMsg.ShopEndaccountList, i, {
...currentItem,
show: newShowState
})
}, },
@ -148,12 +154,16 @@ export default {
}).then(res => { }).then(res => {
uni.hideLoading() uni.hideLoading()
if (res.Result_Code != 100) return if (res.Result_Code != 100) return
res.Result_Data.ShopEndaccountList.map(n => {
n.show = true // 处理数据，确保响应式属性正确设置
n.detail = this.getDetail(n) res.Result_Data.ShopEndaccountList.forEach((n, index) => {
// 使用Vue.set确保响应式
_this.$set(n, 'show', false)
_this.$set(n, 'detail', _this.getDetail(n))
}) })
_this.pageMsg = res.Result_Data
console.log('_this.pageMsg_this.pageMsg_this.pageMsg', _this.pageMsg); // 设置页面数据
_this.$set(_this, 'pageMsg', res.Result_Data)
_this.showPage = true _this.showPage = true
}) })
@ -169,13 +179,20 @@ export default {
}).then(res => { }).then(res => {
uni.hideLoading() uni.hideLoading()
if (res.Result_Code != 100) return if (res.Result_Code != 100) return
res.Result_Data.listBrandShopModel.map(n => {
n.show = true // 处理品牌门店数据，确保响应式属性正确设置
n.detail = this.getDetail(n) res.Result_Data.listBrandShopModel.forEach((n, index) => {
// 使用Vue.set确保响应式
_this.$set(n, 'show', false)
_this.$set(n, 'detail', _this.getDetail(n))
}) })
// 设置数据结构
res.Result_Data.ShopEndaccountList = res.Result_Data.listBrandShopModel res.Result_Data.ShopEndaccountList = res.Result_Data.listBrandShopModel
_this.pageMsg = res.Result_Data
console.log('_this.pageMsg_this.pageMsg_this.pageMsg', _this.pageMsg); // 设置页面数据
_this.$set(_this, 'pageMsg', res.Result_Data)
_this.showPage = true _this.showPage = true
}) })
}, },
@ -318,11 +335,171 @@ export default {
.price-num { .price-num {
color: #fff; color: #fff;
font-size: 28rpx; font-size: 32rpx;
font-weight: 700; font-weight: 700;
font-family: 'PingFang SC', sans-serif; font-family: 'PingFang SC', sans-serif;
position: relative; position: relative;
z-index: 2; z-index: 2;
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
} }
/* 动画效果 - UniApp微信小程序兼容版本 */
/* 页面入场动画 */
@keyframes pageEnter {
0% {
opacity: 0;
transform: translateY(30rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.page-enter {
animation: pageEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* 品牌头部动画 */
@keyframes brandHeaderEnter {
0% {
opacity: 0;
transform: translateY(-30rpx) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.brand-header-enter {
animation: brandHeaderEnter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
opacity: 0;
}
/* 品牌信息滑入动画 */
@keyframes brandInfoSlide {
0% {
opacity: 0;
transform: translateX(-20rpx);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.brand-info-slide {
animation: brandInfoSlide 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
opacity: 0;
}
/* 品牌图标弹跳动画 */
@keyframes brandIconBounce {
0% {
opacity: 0;
transform: scale(0.3) rotate(-10deg);
}
50% {
transform: scale(1.1) rotate(5deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
.brand-icon-bounce {
animation: brandIconBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s forwards;
opacity: 0;
}
/* 品牌名称滑入动画 */
@keyframes brandNameSlide {
0% {
opacity: 0;
transform: translateX(-15rpx);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.brand-name-slide {
animation: brandNameSlide 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
opacity: 0;
}
/* 价格数字计数动画 */
@keyframes priceCountUp {
0% {
opacity: 0;
transform: translateY(10rpx) scale(0.8);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.price-count-up {
animation: priceCountUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
opacity: 0;
}
/* 门店列表容器动画 */
@keyframes shopListContainer {
0% {
opacity: 0;
transform: translateY(30rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.shop-list-container {
animation: shopListContainer 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
opacity: 0;
}
/* 门店项目错列动画 */
@keyframes shopItemStagger {
0% {
opacity: 0;
transform: translateX(-30rpx) scale(0.95);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.shop-item-stagger {
animation: shopItemStagger 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
opacity: 0;
}
/* 交互反馈动画 */
.brand-header-enter:active {
transform: scale(0.98);
transition: transform 0.1s ease-out;
}
.brand-icon-bounce:active {
transform: scale(0.9) rotate(5deg);
transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
</style> </style>