ahyd_DIB/pages/commercialBI/specialCase.vue

<template>
    <div class="main">
        <div class="top">
            <image class="bg" src="/static/images/newCommercial/specialBg.png"/>
      <div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
        <image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
        <div class="timeSelect">
          <img class="selectIcon" src="/static/images/newCommercial/selectDate.png"/>
          <picker mode="date" :value="searchText"  :end="lastDay" @change="changeAllProvinceSearch" >
            <view class="time">
              <view class="text">{{ searchText }}</view>
              <image class="icon" src="/static/images/newCommercial/arrow_bottom.svg"></image>
            </view>
          </picker>
        </div>
      </div>

      <div class="topBox">
        <div class="boxLeft">
          <div class="headerTitle">实时分析</div>
          <span class="notice">注: 1个小时入区流量比5月同一时间流量增幅150%以上且每小时入区车辆超过100辆</span>
        </div>
        <div class="boxRight">
          <span class="day">{{showDay}}</span>
          <image class="dayBox" src="/static/images/newCommercial/dayBox.png"/>
        </div>
      </div>
    </div>
  </div>





<!--  <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>-->
<!--              &lt;!&ndash;  时间选择器  &ndash;&gt;-->
<!--              &lt;!&ndash;          <picker mode="date" fields="day" :value="single" :end="endData"  @change="bindDateChange" >&ndash;&gt;-->
<!--              &lt;!&ndash;              <view class="time">&ndash;&gt;-->
<!--              &lt;!&ndash;                  <view class="uni-input"  style="background: transparent;padding: 0;height:100%">{{ single }}</view>&ndash;&gt;-->
<!--              &lt;!&ndash;                  <image class="icon" src="/static/images/index/arrow_bottom.svg"></image>&ndash;&gt;-->
<!--              &lt;!&ndash;              </view>&ndash;&gt;-->
<!--              &lt;!&ndash;          </picker>&ndash;&gt;-->
<!--          </div>-->
<!--      </div>-->

<!--      <div class="list">-->
<!--          <div class="tabs">-->
<!--              <div :class="selectTab===1?'selectTab':'tabItem'"  @click="handleTab(1)">{{`${startTime}时入区车流预警`}}</div>-->
<!--                &lt;!&ndash;  凌晨12点到1点之间查看 应该是23时到0时 这里做了个判断  &ndash;&gt;-->
<!--              <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(){
      const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
      return {
          single:'',//显示时间
          endData:'', // 结束时间
          startTime:'',// 开始数据的时间
          endTime:'',// 结束数据的时间
          selectTab:1,// 选中的tab
          firstData:[],// tab选项卡为1的时候的数据
          secondData:[],// tab选项卡为2的时候的数据
          queryTime:'',// 推送传入的时间
          time:'',// 给接口的time
          statusBarHeight:'',
          menu:'',
          searchText:'',
          showDay:''// 顶部右侧显示的日期
      }
    },
    onLoad(query){
        //  获取手机参数对页面进行适配
        let systemInfo = uni.getSystemInfoSync()
        this.statusBarHeight = Number(systemInfo.statusBarHeight)
        this.menu = uni.getMenuButtonBoundingClientRect()
        let storeTime = uni.getStorageSync('lastDay')
        if (storeTime){
          this.time = storeTime
        }
        this.searchText = this.time

        const date  = new Date(this.time)
        let d = date.getDate()
        if (d<10){
          d = '0'+d
        }
        this.showDay = d

        //传入的时间用在最上面的选择器上
        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%;
  .top{
    width: 100%;
    height: 212px;
    position: relative;
    .bg{
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .header{
      position: absolute;
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .backArrow{
        width: 24px;
        height: 24px;
        margin-right: 16px;
      }
      .timeSelect{
        display: flex;
        align-items: center;
        .selectIcon{
          width: 16px;
          height: 16px;
        }
        .time{
          display: flex;
          align-items: center;
          .text{
            margin: 0 5px;
            color: #fff;
          }
          .icon{
            width: 18px;
            height: 18px;
          }
        }
      }
    }
    .topBox{
      position: absolute;
      left: 16px;
      top: 100px;
      width: calc(100% - 32px);
      display: flex;
      align-items: center;
      .boxLeft{
        .headerTitle{
          font-size: 24px;
          font-family: AlimamaShuHeiTi;
          color: #FEFFFE;
          font-weight: bold;
          line-height: 24px;
          margin-bottom: 6px;
        }
        .notice{
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 16px;
          display: inline-block;
          width: 70%;
        }
      }
      .boxRight{
        width: 70px;
        height: 50px;
        position: relative;
        .day{
          font-size: 24px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #21ADBA;
          line-height: 28px;
          position: absolute;
          top: 50%;left: 50%;
          transform: translate(-14px,-7px);
          z-index:3;
        }
        .dayBox{
          position: absolute;
          top: 0;left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}




//.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>