update: 累计客流百分比
parent
727a768e7d
commit
4fe21d5bd8
|
|
@ -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
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue