integrated_traffic_uniapp/pages/application/key-project-management/AI-warning/list.vue

<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
      <block slot="backText">返回</block>
      <block slot="content">AI报警处置</block>
    </cu-custom>
    <view class="top-fixed">
      <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
        <view class="flex text-center">
          <view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect" :data-id="index">
            {{tabNav[index]}}
          </view>
        </view>
      </scroll-view>
      <view class="line"></view>
    </view>
    <view class="linehigh"></view>
    <scroll-view class="dy-scroll" @scrolltolower="scrolltolower" scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
      <view v-if="list.length>0" >
        <view class="dy-list">
          <view v-for="(item,index) of list" :key="index" :data-id="item.INSPECTION_ID" @click="$noMultipleClicks(goToDetail,item.AIWARNING_ID)" class="dy-list-item p20">
            <view class="dy-title-flex align-center">
              <text>{{item.OUTSOURCED_NAME}}</text>
            </view>
            <view class="dy-subtitle-flex">
              <text> 视频名称：{{ item.VIDEONAME }}</text>
            </view>
            <view class="dy-subtitle-flex">
              <text>报警类型：{{ item.TYPE }}</text>
            </view>
            <view class="dy-subtitle-flex">
              <text>报警时间：{{item.CREATTIME}}</text>
            </view>
            <view class="dy-subtitle-flex" style="height: 34upx;">
              <text>处置状态：{{ item.STATUS === "0" ? "待处理" : "已处理" }}</text>
              <text>
                <button v-if="item.STATUS === '1'" class="cu-btn bg-blue margin-tb-sm sm" @click="$noMultipleClicks(goToDetail,item.AIWARNING_ID)">查看</button>
                <button v-if="item.STATUS === '0'" class="cu-btn bg-blue margin-tb-sm sm" @click="$noMultipleClicks(goToDetail,item.AIWARNING_ID)">处置</button>
              </text>

            </view>
          </view>
        </view>
      </view>
      <view v-else-if="dataFlag=='noData'" class="dy-null">
        <view class="dy-null-img">
          <image :src="background[dataFlag].url" mode=""></image>
        </view>
        <view class="dy-null-title">
          {{background[dataFlag].msg}}
        </view>
      </view>
      <view class="cu-tabbar-height"></view>
    </scroll-view>
  </view>
</template>

<script>
  import {
    basePath ,
	loginSession,
    loginUser,
  } from '@/common/tool.js';
  export default {
    data() {
      return {
        tabNav: ['待处置', '已处置'],
        TabCur: 0,
        scrollLeft: 0,
        showRight: false,
        dataFlag:'noData',
        sTop:0,
        totalHeight:0,
        list:[],//返回数据
        page:1,//分页参数--页数
        rows:10,//分页参数--每页数据条数
        totalCount:0,//分页参数--初始化页数
        isEnd:false,//防止多次刷新
        totalPage: 0, //分页参数--分页数量
        NameLikes : '',
        noClick:true,
      }
    },
	onReady() {
		let that=this;
		let CustomBar = this.CustomBar;
		uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
			success(res) { //成功回调函数
				let titleH=uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名（class/id）
				titleH.boundingClientRect(data=>{
					that.totalHeight = data.height+CustomBar
				}).exec()
			}
		})
	},
    onShow() {
      //页面显示或从后台跳回小程序时显示此页面时触发，从跳转页面返回时触发，不能传递参数
      var _this = this;
      _this.background = require('@/common/background.json');
      _this.showCount = 10;
      _this.currentPage = 1;
      _this.list = [];
      _this.isEnd = false;
      _this.getData();
      loginSession();
    },
    methods:{
      tabSelect(e) {
        console.info(e)
        this.TabCur = e.currentTarget.dataset.id;
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
        this.getQuery();
      },
      async getData(){
        var _this = this;
        if (_this.isEnd) {
          return
        }else{
          this.isEnd =true;
        }
        uni.showLoading({
          title: "加载中..."
        });//加载中动画
        uni.request({
          url: basePath + '/app/aiwarning/list?showCount='+_this.showCount+'&currentPage='+_this.currentPage ,
          method: 'POST',
          dataType: 'json',
          header: {
            'Content-type': 'application/x-www-form-urlencoded'
          },
          data: {
            loginUserId : loginUser.USER_ID,
            STATUS : this.TabCur
          },
          success: (res) => {
            uni.hideLoading();//结束加载中动画
            // if (res.data != null) {
            //   _this.list = res.data.varList
            // }
			if (res.data != null) {
				_this.totalPage = res.data.page.totalPage;
				if(_this.list.length == 0){
					_this.list = res.data.varList;
				}else{
					if(res.data.varList != null){
						_this.list2 = res.data.varList;
						_this.list = _this.list.concat(_this.list2);
					}
				}
			}

          }
        })
      },
      // 滑动到底方法
      scrolltolower(){
        var _this = this;
        _this.showCount = 10;
        _this.currentPage = _this.currentPage + 1;
        _this.isEnd = false;
        if(_this.totalPage >= _this.currentPage){
          _this.getData();//开始分页查询
        }
      },
      InputBlur(e){
        this.NameLikes = e.detail.value
      },
      getQuery(){	//搜索按钮事件
        var _this = this;
        _this.showCount = 10;
        _this.currentPage = 1;
        _this.list = [];
        _this.isEnd = false;
        _this.getData();
      },
      //跳转事件
      goToDetail(e) {
        uni.navigateTo({
          url: '/pages/application/key-project-management/AI-warning/detail?AIWARNING_ID='+e
        });
      },
    }
  }
</script>

<style scoped>
  .linehigh{
    height:50px
  }
</style>