update
This commit is contained in:
ylj20011123
parent
236f33ac16
commit
d32a8bd1a0
@ -7,21 +7,31 @@
|
||||
@click="handleBack" />
|
||||
<div class="timeSelect">
|
||||
<!-- <img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDate.png"/>-->
|
||||
<picker mode="date" :value="searchText" :end="lastDay" @change="bindDateChange">
|
||||
<picker mode="date" :value="searchText" :start="'2025-01-01'" :end="lastDay" @change="bindDateChange">
|
||||
<view class="time">
|
||||
<view class="text">{{ searchText }}</view>
|
||||
<img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/timeDown.png" />
|
||||
</view>
|
||||
</picker>
|
||||
</div>
|
||||
</div>on
|
||||
</div>
|
||||
<div class="topBox">
|
||||
<div class="boxLeft">
|
||||
<div class="headerTitle">实时车流预警</div>
|
||||
<div class="dimensionBox">
|
||||
<div class="dimensionItem" :class="selectDimension === 1 ? 'selectDimension' : ''"
|
||||
@click="handleDimension(1)">实时预警</div>
|
||||
<div class="dimensionItem" v-if="isShowFestivalTab" :class="selectDimension === 2 ? 'selectDimension' : ''"
|
||||
@click="handleDimension(2)">节日同期</div>
|
||||
<div class="dimensionItem" v-if="isShowFestivalTab" :class="selectDimension === 3 ? 'selectDimension' : ''"
|
||||
@click="handleDimension(3)">昨日对比</div>
|
||||
</div>
|
||||
<!-- 注: 1个小时入区流量比5月同一时间流量增幅150%以上且每小时入区车辆超过100辆-->
|
||||
<span class="notice" v-if="selectTab === 1">{{ `注: 1个小时入区流量比上月同一时间流量增幅150%以上且每小时入区车辆超过100辆`
|
||||
<span class="notice" v-if="selectTab === 1">{{ selectDimension === 1 ? `注:
|
||||
1个小时入区流量比上月同一时间流量增幅150%以上且每小时入区车辆超过100辆` : selectDimension === 2 ? `注: 1个小时入区流量比去年节日同期增幅情况` : `注:
|
||||
1个小时入区流量比昨日同时段增幅情况`
|
||||
}}</span>
|
||||
<span class="notice" v-if="selectTab === 2">注: 前20个从今日零时起至今流量与月均同时段增幅情况</span>
|
||||
<span class="notice" v-if="selectTab === 2">{{ selectDimension === 1 ? `注: 前20个从今日零时起至今流量与月均同时段增幅情况` :
|
||||
selectDimension === 2 ? `注: 前20个从节日零时起至今流量与去年节日同期增幅情况` : `注: 前20个从今日零时起至今流量与昨日同时段增幅情况` }}</span>
|
||||
</div>
|
||||
<div class="boxRight">
|
||||
<span class="day">{{ showDay }}</span>
|
||||
@ -53,7 +63,8 @@
|
||||
:src="sortNumber === 1 ? 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectSortIcon.png' : 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/sortIcon.png'" />
|
||||
</div>
|
||||
<div class="sortItem">
|
||||
<span class="sortItemText" @click="handleChangeSort(2)">月均</span>
|
||||
<span class="sortItemText" @click="handleChangeSort(2)">{{ selectDimension === 1 ? '月均' :
|
||||
selectDimension === 2 ? '同比' : selectDimension === 3 ? '昨日' : '' }}</span>
|
||||
<img class="sortIcon" :style="{ transform: sortType === 1 ? '' : `rotate(-180deg)` }"
|
||||
:src="sortNumber === 2 ? 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectSortIcon.png' : 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/sortIcon.png'" />
|
||||
</div>
|
||||
@ -157,6 +168,30 @@ export default {
|
||||
serviceList: [],// 服务区列表
|
||||
sortType: 1,// 1正序 2倒序
|
||||
sortNumber: 1,// 1当月 2月均 3增幅
|
||||
selectDimension: 1, // 1: 实时车流, 2: 节日对比, 3: 昨日对比
|
||||
festivalList: [
|
||||
{ label: "25年元旦", start: "2024-12-31", end: "2025-01-02", value: "1", currentYear: 2025, compareYear: 2024 },
|
||||
{ label: "25年春运", start: "2025-01-14", end: "2025-02-22", value: "2", currentYear: 2025, compareYear: 2024 },
|
||||
{ label: "25年清明", start: "2025-04-03", end: "2025-04-07", value: "3", currentYear: 2025, compareYear: 2024 },
|
||||
{ label: "25年劳动", start: "2025-04-30", end: "2025-05-06", value: "4", currentYear: 2025, compareYear: 2024 },
|
||||
{ label: "25年端午", start: "2025-05-30", end: "2025-06-03", value: "5", currentYear: 2025, compareYear: 2024 },
|
||||
{ label: "25年暑假", start: "2025-07-01", end: "2025-08-31", value: "6", currentYear: 2025, compareYear: 2024 },
|
||||
{ label: "25年国庆", start: "2025-09-30", end: "2025-10-09", value: "8", currentYear: 2025, compareYear: 2024 },
|
||||
|
||||
|
||||
{ label: "26年元旦", start: "2025-12-31", end: "2026-01-04", value: "1", currentYear: 2026, compareYear: 2025 },
|
||||
{ label: "26年春运", start: "2026-02-02", end: "2026-03-14", value: "2", currentYear: 2026, compareYear: 2025 },
|
||||
{ label: "26年清明", start: "2026-04-03", end: "2026-04-07", value: "3", currentYear: 2026, compareYear: 2025 },
|
||||
{ label: "26年劳动", start: "2026-04-30", end: "2026-05-06", value: "4", currentYear: 2026, compareYear: 2025 },
|
||||
{ label: "26年端午", start: "2026-06-18", end: "2026-06-22", value: "5", currentYear: 2026, compareYear: 2025 },
|
||||
{ label: "26年暑假", start: "2026-07-01", end: "2026-08-31", value: "6", currentYear: 2026, compareYear: 2025 },
|
||||
{ label: "26年中秋", start: "2026-09-24", end: "2026-09-28", value: "7", currentYear: 2026, compareYear: 2025 },
|
||||
{ label: "26年国庆", start: "2026-09-30", end: "2026-10-08", value: "8", currentYear: 2026, compareYear: 2025 },
|
||||
], // 节日列表
|
||||
isShowFestivalTab: false,// 判断当前天 是否显示 节假日的tab
|
||||
nowFestival: "",// 当前的节日
|
||||
currentYear: "",// 当前年
|
||||
compareYear: "",// 比较年
|
||||
}
|
||||
},
|
||||
async onLoad() {
|
||||
@ -189,6 +224,18 @@ export default {
|
||||
// this.time = storeTime
|
||||
// }
|
||||
const currentDate = new Date()
|
||||
// 判断今日是否在某个节假日中
|
||||
this.festivalList.forEach(item => {
|
||||
let startTime = new Date(item.start).getTime()
|
||||
let endTime = new Date(item.end).getTime()
|
||||
if (currentDate.getTime() >= startTime && currentDate.getTime() <= endTime) {
|
||||
this.isShowFestivalTab = true
|
||||
this.nowFestival = item.value
|
||||
this.currentYear = item.currentYear
|
||||
this.compareYear = item.compareYear
|
||||
}
|
||||
})
|
||||
|
||||
// 拿到当前小时的前一小时
|
||||
let y = currentDate.getFullYear()
|
||||
let nowM = currentDate.getMonth() + 1
|
||||
@ -244,7 +291,44 @@ export default {
|
||||
},
|
||||
// 时间器改变的方法
|
||||
bindDateChange(e) {
|
||||
console.log('e.detail.valuee.detail.value', e.detail.value);
|
||||
|
||||
// 判断一下 选择的时间 是否在一个节假日里面
|
||||
let isInFestival = false
|
||||
let nowF = ""
|
||||
let currentYearStr = ''
|
||||
let compareYearStr = ''
|
||||
this.festivalList.forEach(item => {
|
||||
let startTime = new Date(item.start).getTime()
|
||||
let endTime = new Date(item.end).getTime()
|
||||
let currentDate = new Date(e.detail.value)
|
||||
if (currentDate.getTime() >= startTime && currentDate.getTime() <= endTime) {
|
||||
isInFestival = true
|
||||
nowF = item.value
|
||||
currentYearStr = item.currentYear
|
||||
compareYearStr = item.compareYear
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const date = new Date(e.detail.value)
|
||||
|
||||
if (isInFestival) {
|
||||
this.isShowFestivalTab = true
|
||||
this.nowFestival = nowF
|
||||
this.currentYear = currentYearStr
|
||||
this.compareYear = compareYearStr
|
||||
} else {
|
||||
this.selectDimension = 1
|
||||
this.selectTab = 1
|
||||
this.isShowFestivalTab = false
|
||||
this.nowFestival = ""
|
||||
let y = date.getFullYear()
|
||||
this.currentYear = y
|
||||
this.compareYear = y - 1
|
||||
}
|
||||
|
||||
|
||||
let m = date.getMonth()
|
||||
this.showMonth = m === 0 ? 12 : m
|
||||
const d = date.getDate()
|
||||
@ -253,43 +337,73 @@ export default {
|
||||
// 改变时间重新调数据的方法
|
||||
this.onRefresh()
|
||||
},
|
||||
handleTab(val) {
|
||||
async handleTab(val) {
|
||||
this.selectTab = val
|
||||
uni.showLoading({
|
||||
title: '正在加载'
|
||||
})
|
||||
if (val === 2) {
|
||||
const req = {
|
||||
|
||||
let req = {}
|
||||
let data
|
||||
if (this.selectDimension === 1) {
|
||||
req = {
|
||||
StatisticsDate: this.startTime === 0 ? moment(this.searchText).subtract(1, 'day').format('YYYY-MM-DD') : this.searchText,
|
||||
StatisticsHour: this.startTime === 0 ? 23 : this.startTime - 1,
|
||||
StatisticsType: 2,
|
||||
ShowCount: 20
|
||||
StatisticsType: val, // 1: 预警, 2: 排行
|
||||
ShowCount: 20,
|
||||
}
|
||||
request.$webGet('CommercialApi/BigData/GetBayonetWarning', req).then(res => {
|
||||
res.Result_Data.List.forEach(item => {
|
||||
item.name = item.SERVERPART_NAME.split('服务区')[0]
|
||||
})
|
||||
this.tableList = this.handleList(res.Result_Data.List, this.serviceList)
|
||||
this.tableList = this.handleSortList(this.tableList)
|
||||
uni.hideLoading()
|
||||
})
|
||||
} else if (val === 1) {
|
||||
const req = {
|
||||
data = await request.$webGet('CommercialApi/BigData/GetBayonetWarning', req)
|
||||
} else {
|
||||
|
||||
let newVal = ''
|
||||
if (this.selectDimension === 2) {
|
||||
newVal = val === 1 ? 3 : 4
|
||||
} else if (this.selectDimension === 3) {
|
||||
newVal = val === 1 ? 5 : 6
|
||||
}
|
||||
|
||||
req = {
|
||||
StatisticsDate: this.startTime === 0 ? moment(this.searchText).subtract(1, 'day').format('YYYY-MM-DD') : this.searchText,
|
||||
StatisticsHour: this.startTime === 0 ? 23 : this.startTime - 1,
|
||||
StatisticsType: 1,
|
||||
ShowCount: 20
|
||||
StatisticsType: newVal, // 1: 预警, 2: 排行
|
||||
HolidayType: this.nowFestival,
|
||||
curYear: this.currentYear,
|
||||
compareYear: this.compareYear,
|
||||
ShowCount: 20,
|
||||
}
|
||||
request.$webGet('CommercialApi/BigData/GetBayonetWarning', req).then(res => {
|
||||
res.Result_Data.List.forEach(item => {
|
||||
item.name = item.SERVERPART_NAME.split('服务区')[0]
|
||||
})
|
||||
this.tableList = this.handleList(res.Result_Data.List, this.serviceList)
|
||||
this.tableList = this.handleSortList(this.tableList)
|
||||
uni.hideLoading()
|
||||
})
|
||||
data = await request.$webGet('CommercialApi/BigData/GetHolidayBayonetWarning', req)
|
||||
}
|
||||
|
||||
if (data.Result_Data && data.Result_Data.List) {
|
||||
data.Result_Data.List.forEach(item => {
|
||||
item.name = item.SERVERPART_NAME.split('服务区')[0]
|
||||
})
|
||||
this.tableList = this.handleList(data.Result_Data.List, this.serviceList)
|
||||
this.tableList = this.handleSortList(this.tableList)
|
||||
} else {
|
||||
this.tableList = []
|
||||
}
|
||||
uni.hideLoading()
|
||||
|
||||
// request.$webGet('CommercialApi/BigData/GetBayonetWarning', req).then(res => {
|
||||
// if (res.Result_Data && res.Result_Data.List) {
|
||||
// res.Result_Data.List.forEach(item => {
|
||||
// item.name = item.SERVERPART_NAME.split('服务区')[0]
|
||||
// })
|
||||
// this.tableList = this.handleList(res.Result_Data.List, this.serviceList)
|
||||
// this.tableList = this.handleSortList(this.tableList)
|
||||
// } else {
|
||||
// this.tableList = []
|
||||
// }
|
||||
// uni.hideLoading()
|
||||
// }).catch(() => {
|
||||
// uni.hideLoading()
|
||||
// })
|
||||
|
||||
},
|
||||
handleDimension(val) {
|
||||
this.selectDimension = val
|
||||
this.handleTab(this.selectTab)
|
||||
},
|
||||
onRefresh() {
|
||||
this.handleTab(this.selectTab)
|
||||
@ -473,7 +587,34 @@ export default {
|
||||
color: #FEFFFE;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dimensionBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.dimensionItem {
|
||||
padding: 8rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: AlimamaShuHeiTi;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 32rpx;
|
||||
margin-right: 12rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.selectDimension {
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.2) 100%);
|
||||
border: 1px solid #FFFFFF;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
@ -544,8 +685,9 @@ export default {
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 30rpx;
|
||||
padding: 32rpx 26rpx;
|
||||
padding: 32rpx 10rpx;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.selectTab {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user