update: 累计客流百分比

main
dkwang 2026-10-21 13:09:27 +08:00
parent 727a768e7d
commit 4fe21d5bd8
4 changed files with 50 additions and 18 deletions

View File

@ -26,7 +26,7 @@ export function processYunyingInfo(dataList) {
const redData = getTimeValues(item.maxDay) const redData = getTimeValues(item.maxDay)
const maxValue = redData[currentTimeIndex] const maxValue = redData[currentTimeIndex]
const compareMaxValue = yellowData[currentTimeIndex] const comparePercent = item.compareDay?.totalSum ? parseFloat(item.compareDay.totalSum) : 0
const totalSum = item.today?.totalSum ? parseFloat(item.today.totalSum) : 0 const totalSum = item.today?.totalSum ? parseFloat(item.today.totalSum) : 0
const total = barData.reduce((sum, val) => sum + val, 0) const total = barData.reduce((sum, val) => sum + val, 0)
const totalStr = Math.floor(total).toString() const totalStr = Math.floor(total).toString()
@ -45,7 +45,7 @@ export function processYunyingInfo(dataList) {
compareDate: item.compareDate || '', compareDate: item.compareDate || '',
maxDate: item.maxDay?.maxDate || '', maxDate: item.maxDay?.maxDate || '',
maxValue, maxValue,
compareMaxValue, comparePercent,
totalSum totalSum
} }
}) })

View File

@ -44,6 +44,7 @@ const currentTime = ref('')
const weatherInfo = ref({}) const weatherInfo = ref({})
const noticeList = ref([]) const noticeList = ref([])
const currentNoticeIndex = ref(0) const currentNoticeIndex = ref(0)
const marqueeDuration = ref(30) // 默认动画时间
let noticeTimer = null let noticeTimer = null
let timeTimer = null let timeTimer = null
@ -97,6 +98,7 @@ const fetchTaskNotice = async () => {
if (data && data.content) { if (data && data.content) {
const textContent = data.content.replace(/<[^>]+>/g, '') const textContent = data.content.replace(/<[^>]+>/g, '')
noticeList.value = [textContent] noticeList.value = [textContent]
calculateMarqueeDuration(textContent)
startNoticeScroll() startNoticeScroll()
} }
} }
@ -105,6 +107,27 @@ const fetchTaskNotice = async () => {
} }
} }
const calculateMarqueeDuration = (text) => {
// 创建一个临时元素测量文字宽度
const temp = document.createElement('div')
temp.style.cssText = `
position: absolute;
visibility: hidden;
font-size: 40px;
white-space: nowrap;
font-weight: normal;
`
temp.textContent = text
document.body.appendChild(temp)
const textWidth = temp.offsetWidth
document.body.removeChild(temp)
// 计算总移动距离(容器宽度 + 文字宽度)
const totalDistance = 1300 + textWidth
// 按 100px/s 的速度计算动画时间
marqueeDuration.value = totalDistance / 100
}
const startNoticeScroll = () => { const startNoticeScroll = () => {
if (noticeList.value.length <= 1) return if (noticeList.value.length <= 1) return
@ -221,18 +244,18 @@ onUnmounted(() => {
font-size: 40px; font-size: 40px;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
white-space: nowrap; white-space: nowrap;
animation: marquee 20s linear infinite; animation: marquee 30s linear infinite;
} }
} }
} }
@keyframes marquee { @keyframes marquee {
0% { 0% {
transform: translateX(100%); transform: translateX(1300px);
} }
100% { 100% {
transform: translateX(-100%); transform: translateX(calc(-100% - 1300px));
} }
} }

View File

@ -46,10 +46,10 @@ const chartRefs = ref([])
const xLabels = ['6', '8', '10', '12', '14', '16', '18', '20', '22', '24'] const xLabels = ['6', '8', '10', '12', '14', '16', '18', '20', '22', '24']
const chartDataList = ref([ const chartDataList = ref([
{ number: 0, barData: [], yellowData: [], redData: [], digits: [], compareDate: '', maxDate: '', maxValue: 0, compareMaxValue: 0 }, { number: 0, barData: [], yellowData: [], redData: [], digits: [], compareDate: '', maxDate: '', maxValue: 0, comparePercent: 0 },
{ number: 0, barData: [], yellowData: [], redData: [], digits: [], compareDate: '', maxDate: '', maxValue: 0, compareMaxValue: 0 }, { number: 0, barData: [], yellowData: [], redData: [], digits: [], compareDate: '', maxDate: '', maxValue: 0, comparePercent: 0 },
{ number: 0, barData: [], yellowData: [], redData: [], digits: [], compareDate: '', maxDate: '', maxValue: 0, compareMaxValue: 0 }, { number: 0, barData: [], yellowData: [], redData: [], digits: [], compareDate: '', maxDate: '', maxValue: 0, comparePercent: 0 },
{ number: 0, barData: [], yellowData: [], redData: [], digits: [], compareDate: '', maxDate: '', maxValue: 0, compareMaxValue: 0 } { number: 0, barData: [], yellowData: [], redData: [], digits: [], compareDate: '', maxDate: '', maxValue: 0, comparePercent: 0 }
]) ])
const charts = ref(chartDataList.value) const charts = ref(chartDataList.value)
@ -74,21 +74,28 @@ const getNumberBoxTextColor = (number) => {
} }
const getBaifenbiPercentage = (chart) => { const getBaifenbiPercentage = (chart) => {
if (!chart.compareMaxValue || chart.compareMaxValue === 0) { if (!chart.comparePercent || chart.comparePercent === 0) {
console.log('百分比计算: comparePercent 为 0 或空,返回 0.00')
return '0.00' return '0.00'
} }
console.log("今日客流累计 对比 对比日当前时间点客流:", chart.totalSum, chart.compareMaxValue)
const percentage = ((chart.totalSum - chart.comparePercent) / chart.comparePercent) * 100
const percentage = ((chart.totalSum - chart.compareMaxValue) / chart.compareMaxValue) * 100
// return Math.abs(percentage).toFixed(2) console.log('====== 百分比计算详情 ======')
console.log('今日累计客流 (totalSum):', chart.totalSum)
console.log('对比日累计客流 (comparePercent):', chart.comparePercent)
console.log('差值:', chart.totalSum - chart.comparePercent)
console.log('计算结果:', percentage.toFixed(2) + '%')
console.log('===========================')
return percentage.toFixed(2) return percentage.toFixed(2)
} }
const getBaifenbiColorStyle = (chart) => { const getBaifenbiColorStyle = (chart) => {
if (!chart.compareMaxValue || chart.compareMaxValue === 0) { if (!chart.comparePercent || chart.comparePercent === 0) {
return { color: '#ffffff', fontWeight: 'bold' } return { color: '#ffffff', fontWeight: 'bold' }
} }
const percentage = (chart.totalSum - chart.compareMaxValue) / chart.compareMaxValue const percentage = (chart.totalSum - chart.comparePercent) / chart.comparePercent
if (percentage > 0) { if (percentage > 0) {
return { color: '#ff3333', fontWeight: 'bold' } return { color: '#ff3333', fontWeight: 'bold' }
} else if (percentage < 0) { } else if (percentage < 0) {
@ -107,7 +114,7 @@ const processData = (dataList) => {
compareDate: item.compareDate, compareDate: item.compareDate,
maxDate: item.maxDate, maxDate: item.maxDate,
maxValue: item.maxValue, maxValue: item.maxValue,
compareMaxValue: item.compareMaxValue, comparePercent: item.comparePercent,
totalSum: item.totalSum totalSum: item.totalSum
})) }))
} }

View File

@ -16,7 +16,9 @@ export default defineConfig({
open: true, open: true,
proxy: { proxy: {
'/juntech-ysdp': { '/juntech-ysdp': {
target: 'http://101.133.172.2:8082', target: 'http://192.168.16.193:8888',
// (binyu使用,切换时注释上面那行,取消注释下面这行)
// target: 'http://101.133.172.2:8082',
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path rewrite: (path) => path
} }