298 lines
10 KiB
Vue
298 lines
10 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div style="width: 100%;height: 40px;display: flex;align-items: center">
|
|
<div class="select">
|
|
<div class="time">
|
|
<view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>
|
|
</div>
|
|
<!-- 时间选择器 -->
|
|
<!-- <picker mode="date" fields="day" :value="single" :end="endData" @change="bindDateChange" >-->
|
|
<!-- <view class="time">-->
|
|
<!-- <view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>-->
|
|
<!-- <image class="icon" src="/static/images/index/arrow_bottom.svg"></image>-->
|
|
<!-- </view>-->
|
|
<!-- </picker>-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list">
|
|
<div class="tabs">
|
|
<div :class="selectTab===1?'selectTab':'tabItem'" @click="handleTab(1)">{{`${startTime}时入区车流预警`}}</div>
|
|
<!-- 凌晨12点到1点之间查看 应该是23时到0时 这里做了个判断 -->
|
|
<div :class="selectTab===2?'selectTab':'tabItem'" @click="handleTab(2)">{{endTime===24?`${endTime - 1}-0时入区车流排行`:`0-${startTime}时入区车流排行`}}</div>
|
|
</div>
|
|
<div style="width: 100%;border-bottom: 1px solid #ccc;margin-top: 10px;padding-bottom: 4px">
|
|
<p class="notice" v-if="selectTab===1">注: 1个小时入区流量比4月同一时间流量增幅150%以上且每小时入区车辆超过100辆</p>
|
|
<p class="notice" v-if="selectTab===2">注: 前20个从今日零时起至今流量与月均同时段增幅情况</p>
|
|
</div>
|
|
|
|
<div style="height: calc(100vh - 130px);overflow: scroll;}">
|
|
<div v-if="selectTab===1" class="item" v-for="(item,index) in firstData" :key="index">
|
|
<div class="box" >
|
|
<text>{{index + 1}}、</text>
|
|
<div class="name">{{item.name}}<div class="normal">{{item.SERVERPART_REGION}}区</div></div>
|
|
<div class="enter">{{startTime}}时入区: {{item.VEHICLE_COUNT }}辆</div>
|
|
<div class="add">
|
|
<image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':Number(item.VEHICLE_RATE)===100?'':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
|
<text :class="item.VEHICLE_RATE > 150?'orangeRed':''"> {{ item.VEHICLE_RATE }}%</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="selectTab===2" class="item" v-for="(item,index) in secondData" :key="index">
|
|
<div class="box">
|
|
<text>{{index + 1}}、</text>
|
|
<div class="name">{{item.name}}<text class="normal">{{item.SERVERPART_REGION}}区</text></div>
|
|
<div class="enter">今日入区: {{item.VEHICLE_COUNT }}辆</div>
|
|
<div class="add">
|
|
<image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':Number(item.VEHICLE_RATE)===100?'':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
|
<text :class="item.VEHICLE_RATE > 150?'orangeRed':''"> {{ item.VEHICLE_RATE }}%</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
export default {
|
|
name: "specialCase",
|
|
data(){
|
|
return {
|
|
single:'',//显示时间
|
|
endData:'', // 结束时间
|
|
startTime:'',// 开始数据的时间
|
|
endTime:'',// 结束数据的时间
|
|
selectTab:1,// 选中的tab
|
|
firstData:[],// tab选项卡为1的时候的数据
|
|
secondData:[],// tab选项卡为2的时候的数据
|
|
queryTime:'',// 推送传入的时间
|
|
time:'',// 给接口的time
|
|
}
|
|
},
|
|
onLoad(query){
|
|
//传入的时间用在最上面的选择器上
|
|
this.queryTime = query.time
|
|
let date //如果有推送按照推送走 没推送 走当前时间
|
|
if(this.queryTime){
|
|
date = new Date(this.queryTime)
|
|
}else{
|
|
date = new Date()
|
|
}
|
|
const y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
let d = date.getDate()
|
|
if (m<10){
|
|
m = '0'+m
|
|
}
|
|
// 显示的时间范围 用当前的时间
|
|
|
|
let h = date.getHours()
|
|
// 如果小时减一小于0的话 天数也会往前移动一天
|
|
if (h-1<0){
|
|
d = d -1
|
|
}
|
|
if (d<10){
|
|
d = '0'+ d
|
|
}
|
|
this.endData = `${y}-${m}-${d}`
|
|
this.single = `${y}-${m}-${d}`
|
|
this.time = `${y}-${m}-${d}`
|
|
console.log('h',h)
|
|
// 12点的时候 等于0
|
|
if (h===0){
|
|
h = 24
|
|
}
|
|
if (this.queryTime){
|
|
this.startTime = h
|
|
}else{
|
|
this.startTime = h - 1
|
|
}
|
|
this.endTime = h
|
|
this.handleTab(1)
|
|
},
|
|
methods:{
|
|
// 时间器改变的方法
|
|
bindDateChange(e){
|
|
const date = new Date(e.detail.value)
|
|
let m = date.getMonth() + 1
|
|
if (m<10){
|
|
m = '0' + m
|
|
}
|
|
this.thisMonth = m
|
|
this.single = e.detail.value
|
|
let d = this.$util.getThisMonthDay(e.detail.value)
|
|
this.endData = e.detail.value + '-' + d
|
|
// 切换时间的时候把两个数组清空 这样更改时间之后可以展示新的数据
|
|
this.firstData = []
|
|
this.secondData = []
|
|
// 改变时间重新调数据的方法
|
|
this.onRefresh()
|
|
},
|
|
handleTab(val){
|
|
this.selectTab = val
|
|
if (val === 2 && this.secondData.length===0){
|
|
const req= {
|
|
StatisticsDate:this.time,
|
|
StatisticsHour:this.startTime,
|
|
StatisticsType:2
|
|
}
|
|
request.$webGet('CommercialApi/BigData/GetBayonetWarning',req).then(res=>{
|
|
res.Result_Data.List.forEach(item=>{
|
|
item.name = item.SERVERPART_NAME.split('服务区')[0]
|
|
})
|
|
this.secondData = res.Result_Data.List
|
|
console.log('this.secondData',this.secondData)
|
|
})
|
|
}else if(val === 1 && this.firstData.length===0){
|
|
const req= {
|
|
StatisticsDate:this.time,
|
|
StatisticsHour:this.startTime,
|
|
StatisticsType:1
|
|
}
|
|
request.$webGet('CommercialApi/BigData/GetBayonetWarning',req).then(res=>{
|
|
res.Result_Data.List.forEach(item=>{
|
|
item.name = item.SERVERPART_NAME.split('服务区')[0]
|
|
})
|
|
this.firstData = res.Result_Data.List
|
|
})
|
|
}
|
|
},
|
|
onRefresh(){
|
|
this.handleTab(this.selectTab)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 16px;
|
|
.select{
|
|
margin-left: 8px;
|
|
display: inline-block;
|
|
.time {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 4px;
|
|
.day {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #782717;
|
|
line-height: 44rpx;
|
|
margin-right: 4px;
|
|
}
|
|
.uni-input {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ae664e;
|
|
line-height: 36rpx;
|
|
}
|
|
.icon {
|
|
width: 24px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
.list{
|
|
.tabs{
|
|
width: 100%;
|
|
display: flex;
|
|
.tabItem{
|
|
width: 50%;
|
|
height: 40px;
|
|
font-size: 12px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
background: #f0f0f0;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
.selectTab{
|
|
width: 50%;
|
|
height: 40px;
|
|
font-size: 12px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
background: #fff;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
}
|
|
.item{
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 5px;
|
|
margin-top: 10px;
|
|
.box{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
.name{
|
|
width: 40%;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: baseline;
|
|
.normal{
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
.unit{
|
|
color:#ccc;
|
|
}
|
|
}
|
|
}
|
|
.enter{
|
|
font-size: 12px;
|
|
width: 30%;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
.add{
|
|
font-size: 12px;
|
|
width: 30%;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.orangeRed{
|
|
color:orangered;
|
|
}
|
|
.addIcon{
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
color:transparent;
|
|
}
|
|
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
|
::-webkit-scrollbar-track {
|
|
border-radius: 10px;
|
|
background-color:transparent;
|
|
}
|
|
|
|
/*定义滑块 内阴影+圆角*/
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background-color:transparent;
|
|
}
|
|
.notice{
|
|
font-size: 12px;
|
|
color: gray;
|
|
}
|
|
}
|
|
}
|
|
</style>
|