tqApp-webView/alarm/blindSpot/index.vue

<template>
  <view class="pageContainer">
	  <view class="search">
		<u-cell title="报警时间" :value="calendarStart + ' 至 ' + calendarEnd" style="height: 86rpx"
		  @click="$refs.calendarRef.show()">

		</u-cell>
		<tq-calendar ref="calendarRef" type="daterange" @confirm="(e) => {
		  calendarStart = e[0]
		  calendarEnd = e[1]
		  handleTableList()
		}">
		</tq-calendar>

		<u-cell title="车辆" :border="true" :isLink="true" @click="$refs.carChooseRef.show()">
		  <view slot="value">
			<!-- <u-form-item label="" prop="vehicleId"> -->
			  {{ plate }}
			<!-- </u-form-item> -->
		  </view>
		  <u-icon v-if="plate == ''" slot="right-icon" size="16" name="arrow-right"></u-icon>
		  <view v-else slot="right-icon" @click.stop="resetData" style="margin-left: 20rpx;">
			<u-icon size="16" name="close-circle"></u-icon>
		  </view>
		</u-cell>
		<tq-car-user ref="carChooseRef" :isGetIcon="true" @confirm="(data) => {
		  vehicleId = data.id
		  plate = data.label
		  handleTableList()
		}">
		</tq-car-user>
	</view>
    <view class="body">

      <view class="list" v-for="item in tableList" :key="item.id">
        <view style="
					  display: flex;
					  margin-bottom: 20rpx;
					  margin-top: 20rpx;">
          <view class="head" style="font-size: 26rpx">
            <text style="font-weight: bold;">车辆：{{ item.plate }}</text>
          </view>
          <view class="head" style="margin-left: 73rpx">
            <text style="font-weight: bold;">
              <text>{{ item.deptName }}</text>
            </text>
          </view>
        </view>
        <view style="
					  margin-bottom: 20rpx;
					    display: flex;
					">
          <view class="head" style="font-size: 26rpx">
            <text>司机：
              <text>
                {{ item.driverName }}
              </text>
            </text>
          </view>
          <view class="head" style="margin-left: 26rpx">
            <text>{{ item.driverPhone }}</text>
          </view>
        </view>
        <view>
          <view class="head" style="font-size: 26rpx;margin-bottom: 20rpx;">
            <text style="font-size: 30rpx; ">报警开始时间：{{ item.startTime }}</text>
          </view>
          <view class="head" style="font-size: 26rpx;margin-bottom: 20rpx;">
            <text style="font-size: 30rpx;">报警结束时间：{{ item.startTime }}</text>
          </view>
        </view>
        <view style="margin-bottom: 20rpx;">
          <view class="head" style="font-size: 26rpx">
            <view style="width: 20%;align-items: flex-start;">
              报警位置：
            </view>
            <text style="font-size: 30rpx;flex: 1;">{{ item.location }}</text>
          </view>
        </view>
        <view style="height: 90rpx;">
          <u-button type="primary" @click="seeAlarmDetails(item)">查看详情</u-button>
        </view>

      </view>
      <view class="nodata-warp" v-if="!tableList.length">
        <image :src="$getImages('/assetsMobile/images/no-data.png')" class="nodata-image"></image>
      </view>
		<u-loadmore :status="loadStatus" height="30"/>
    </view>

    <u-calendar :show="calendarShow" mode="range" :defaultDate="defaultDate" :maxDate="maxDate" minDate="2023-10-01"
      monthNum="24" @confirm="calendarChange" @close="onClose"></u-calendar>

  </view>
</template>

<script>
import { getBlindSpotList } from "@/api/alarm/blindSpot.js"
export default {
  components: {
  },
  props: {},
  data() {
    return {
      vehicleId: '',
      plate: '',
      tableList: [],
      calendarShow: false, // 日历
      calendarStart: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'),// 开始时间
      calendarEnd: this.dayjs().subtract(0, 'day').format('YYYY-MM-DD'), // 结束时间
      defaultDate: [this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'), this.dayjs().subtract(0, 'day').format('YYYY-MM-DD')],
      page: 1,
      size: 10,
      total: 0,
      maxDate: this.dayjs().subtract(0, 'day').format('YYYY-MM-DD'),
	  loadStatus: 'nomore', //loading nomore loadmore
    };
  },
  mounted() {
    this.handleTableList();
  },
  onReachBottom() {
    // 滚动到底部
    if (this.page * this.size < this.total) {
      this.page += 1;
      this.handleTableList();
    }
  },
  methods: {
    checkTime() {
      this.calendarShow = true
    },
    resetData() {
      this.vehicleId = ''
      this.plate = ''
      this.page = 1;
      this.tableList = [];
      this.handleTableList();
    },
    handleDataDetection(data) {
      // 数据检测
      return data == null || data == undefined ? "" : data;
    },
    async handleTableList() {
      // 获取列表
      // this.tableList = [];
	  this.loadStatus = 'loading'
	  
      let obj = {
        startTime: this.calendarStart == "" || this.calendarStart == null ?
          undefined : this.calendarStart + ' 00:00:00',
        endTime: this.calendarEnd == "" || this.calendarEnd == null ?
          undefined : this.calendarEnd + ' 23:59:59',
        plate: this.plate ? this.plate : undefined,
        vehicleId: this.vehicleId ? this.vehicleId : undefined,
        driverAdvanceType: 'BSD',
        page: this.page,
        size: 10
      };
      let res = await getBlindSpotList(obj);
     if (res.code == "0" && res.data.list) {
     		  
     		  res.data.list.map((e) => {
     		  	this.tableList.push({
     		  	    ...e,
     		  	});
     		  })
     		  
       // this.tableList = res.data.list
     		
       this.total = res.data.total;
       if (this.page * 10 >= this.total)  {
       	this.loadStatus = 'nomore'
       }
     }  else {
     			this.loadStatus = 'nomore'
     		}
    },
    calendarChange(e) {
      this.page = 1;
      this.tableList = [];
      // 修改日期
      this.calendarStart = e[0]; // 开始时间
      this.calendarEnd = e[1]; // 结束时间
      this.calendarShow = false;
      this.handleTableList();
    },
    onClose() {
      this.calendarShow = false;
      this.handleTableList();
    },
    seeAlarmDetails(item) {
      // 报警详情
      uni.navigateTo({
        url: `/alarm/blindSpot/detail?fid=${item.fileuuid}`
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.pageContainer {
  overflow: unset;
  // background-color: #fff;
}

.search {
  position: relative;
  padding: 0 0rpx;
  width: 100%;
  height: 166rpx;
  // display: flex;
  // align-items: center;
  background-color: #fff;
}

.head {
  height: 100%;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #333333;
  
}

.content {
  height: 100%;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #333333;
}

.body {
	margin-top: 20rpx;
  position: relative;
  padding: 10rpx;
  width: 100%;
  height: calc(100% - 172rpx);
  
}

.body .total {
  width: 100%;
  height: 65rpx;
  line-height: 65rpx;
  font-size: 26rpx;
  color: #999999;
}

.list {
	background-color: #fff;
  width: calc(100% - 90rpx);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32rpx;
  background-color: white;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}
.nodata-warp{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  .nodata-image{
    width: 218rpx;
    height: 150rpx;
  }
}
</style>