ahyd_DIB/pages/commercialBI/specialCase.vue

<template>
  <div class="main">
    <div class="top">
        <image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/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="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDate.png"/>
            <picker mode="date" :value="searchText"  :end="lastDay" @change="bindDateChange" >
              <view class="time">
                <view class="text">{{ searchText }}</view>
                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>
              </view>
            </picker>
          </div>
        </div>
        <div class="topBox">
          <div class="boxLeft" style="width: 100%">
            <div class="headerTitle">实时分析</div>
<!--            注: 1个小时入区流量比5月同一时间流量增幅150%以上且每小时入区车辆超过100辆-->
              <span class="notice" v-if="selectTab===1">{{ `注: 1个小时入区流量比${showMonth}月同一时间流量增幅150%以上且每小时入区车辆超过100辆` }}</span>
              <span class="notice" v-if="selectTab===2">注: 前20个从今日零时起至今流量与月均同时段增幅情况</span>
          </div>
          <div class="boxRight">
            <span class="day">{{showDay}}</span>
            <image class="dayBox" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/dayBox.png"/>
          </div>
        </div>
    </div>

    <div class="content">
      <div class="contentTab">
        <div :class="selectTab===1?'selectTab tabItem':'tabItem'" @click="handleTab(1)">{{`${startTime}时入区车流预警`}}</div>
        <div :class="selectTab===2?'selectTab tabItem':'tabItem'" @click="handleTab(2)">{{endTime===24?`${endTime - 1}-0时入区车流排行`:`0-${startTime}时入区车流排行`}}</div>
      </div>
<!--      <div class="noticeBox">-->

<!--      </div>-->

      <div class="contentList" v-if="selectTab===1">
        <div class="contentItem" :style="{borderBottom:index + 1===tableList.length?'0px solid #EEEEEE':'1px solid #EEEEEE'}" v-for="(item,index) in tableList" :key="index">
          <div class="index">
            <div class="boxBg" v-if="index<=2"></div>
            <span class="indexText" :style="{fontWeight:index<=2?'bold':'normal',color:index<=2?'#160002':'#786B6C'}">{{index + 1}}</span>
          </div>
          <div class="serviceBox">
            <span class="name">{{item.name}}</span>
            <span class="position">{{item.SERVERPART_REGION}}区</span>
          </div>
          <div class="numberBox">
            <span class="number">{{item.VEHICLE_COUNT}}</span>
            <span class="unit">/辆</span>
          </div>
          <div class="addBox">
            <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>
            <span class="add">{{item.VEHICLE_RATE}}%</span>
          </div>
        </div>
      </div>

      <div class="contentList" v-if="selectTab===2">
        <div class="contentItem" v-for="(item,index) in tableList" :key="index">
          <div class="index">
            <div class="boxBg" v-if="index<=2"></div>
            <span class="indexText" :style="{fontWeight:index<=2?'bold':'normal'}">{{index + 1}}</span>
          </div>
          <div class="serviceBox">
            <span class="name">{{item.name}}</span>
            <span class="position">{{item.SERVERPART_REGION}}区</span>
          </div>
          <div class="numberBox">
            <span class="number">{{item.VEHICLE_COUNT}}</span>
            <span class="unit">/辆</span>
          </div>
          <div class="addBox">
            <image v-if="item.VEHICLE_RATE!==0" class="addIcon"  :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>
            <span class="add">{{item.VEHICLE_RATE===0?'-':item.VEHICLE_RATE+'%'}}</span>
          </div>
        </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
        tableList:[],// 表格数据
        time:'',// 给接口的time
        statusBarHeight:'',
        menu:'',
        searchText:'',
        showMonth:'',// 上个月
        showDay:''// 顶部右侧显示的日期
      }
    },
    onLoad(){
      //  获取手机参数对页面进行适配
      let systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = Number(systemInfo.statusBarHeight)
      this.menu = uni.getMenuButtonBoundingClientRect()

      // let storeTime = uni.getStorageSync('lastDay')
      // if (storeTime){
      //   this.time = storeTime
      // }
      const currentDate = new Date()
      // 拿到当前小时的前一小时
      let y = currentDate.getFullYear()
      let nowM = currentDate.getMonth() + 1
      if (nowM<10){
        nowM = '0'+nowM
      }
      let nowD = currentDate.getDate()
      if (nowD<10){
        nowD = '0'+nowD
      }
      this.time = `${y}-${nowM}-${nowD}`
      this.searchText = this.time
      // this.searchText = '2023-06-21'
      const date  = new Date(this.time)
      let m = date.getMonth()
      this.showMonth = m
      let d = date.getDate()
      if (d<10){
        d = '0'+d
      }
      this.showDay = d
      const nowDate = new Date()
      let h = nowDate.getHours()
      this.startTime = h-1
      if (this.startTime===0){
        this.searchText = `${y}-${nowM}-${nowD-1}`
      }
      // this.startTime = 19
      //传入的时间用在最上面的选择器上
      this.handleTab(1)
    },
    methods:{
        // 时间器改变的方法
        bindDateChange(e){
          const date = new Date(e.detail.value)
          let m = date.getMonth()
          this.showMonth = m
          const d = date.getDate()
          this.searchText = e.detail.value
          this.showDay = d
          // 改变时间重新调数据的方法
          this.onRefresh()
        },
        handleTab(val){
            this.selectTab = val
            if (val === 2 ){
                const req= {
                  StatisticsDate:this.searchText,
                  StatisticsHour:this.startTime,
                  StatisticsType: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 = res.Result_Data.List
                })
            }else if(val === 1 ){
                const req= {
                  StatisticsDate:this.searchText,
                  StatisticsHour:this.startTime,
                  StatisticsType:1,
                  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 = res.Result_Data.List
                })
            }
        },
        onRefresh(){
            this.handleTab(this.selectTab)
        },
      handleBack(){
        uni.navigateBack({
          delta: 1
        });
      }
    }
}
</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(-50%,-7px);
          z-index:3;
        }
        .dayBox{
          position: absolute;
          top: 0;left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .content{
    width: 100%;
    height: calc(100vh - 212px);
    box-sizing: border-box;
    padding: 16px;
    .contentTab{
      width: 100%;
      height: 38px;
      border-radius: 4px;
      background: #F3F1F5;
      box-sizing: border-box;
      padding: 4px;
      display: flex;
      .tabItem{
        width: 50%;
        height: 100%;
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #786B6C;
        line-height: 30px;
        border-radius: 4px;
      }
      .selectTab{
        background: #fff;
        color: #21ADBA!important;
      }
    }
    .noticeBox{
      width: 100%;
      border-bottom: 1px solid #ccc;
      margin-top: 4px;
      .notice{
        font-size: 12px;
        color: gray;
      }
    }
    .contentList{
      width: 100%;
      border-radius: 8px;
      margin-top: 16px;
      padding-bottom: 16px;
      overflow: hidden;
      .contentItem{
        background: #fff;
        padding: 19px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .index{
          width: 16px;
          height: 16px;
          position: relative;
          .boxBg{
            width: 16px;
            height: 16px;
            background: #10BFCE;
            filter: blur(4px);
            position: absolute;
            top: 0;left: 0;
          }
          .indexText{
            position: absolute;
            top: 50%;left: 50%;
            transform: translate(-50%,-50%);
            z-index: 2;
            font-size: 16px;
            font-family: DingTalk-JinBuTi, DingTalk;
            font-weight: normal;
            color: #160002;
            line-height: 20px;
          }
        }
        .serviceBox{
          width: 35%;
          display: inline-block;
          margin-left: 8px;
          .name{
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #160002;
            line-height: 26px;
          }
          .position{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 20px;
          }
        }
        .numberBox{
          width: 30%;
          .number{
            font-size: 20px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #160002;
            line-height: 24px;
          }
          .unit{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #A69E9F;
            line-height: 20px;
            margin-left: 2px;
          }
        }
        .addBox{
          width: calc(30% - 20px);
          display: flex;
          align-items: center;
          .addIcon{
            width: 14px;
            height: 14px;
          }
          .add{
            font-size: 20px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #E83944;
            line-height: 24px;
          }
        }
      }
    }
  }
}




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