integrated_traffic_uniapp/pages/application/ai-call-the-police/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="select-fixed top-fixed">
      <view class="cu-bar search bg-white">
        <view class="search-form radius" style="margin-left: 0;">
          <text class="cuIcon-search"></text>
          <input :value="NameLikes" @input="InputBlur" placeholder="请输入关键字"
                 confirm-type="search"></input>
        </view>
        <view class="action">
          <button class="cu-btn bg-blue shadow-blur radius" @click="getQuery">搜索</button>
          <button class="cu-btn bg-green shadow-blur radius" style="margin-left: 10upx;" @click="reset">重置</button>
        </view>
      </view>
      <view class="line"></view>
    </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.BLINDBOARD_ID" class="dy-list-item p20" @click="$noMultipleClicks(goToDetail,item)">
            <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>
        </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,corpinfoId,loginSession,formatDate,loginUser,findDeptName,findUserName
} from '@/common/tool.js';
import tkiTree from "@/components/select-tree/select-tree.vue"
export default {
  components: {
    tkiTree
  },
  data() {
    return {
      showRight: false,
      dataFlag:'noData',
      sTop:0,
      totalHeight:0,
      list:[],//返回数据
      page:1,//分页参数--页数
      rows:10,//分页参数--每页数据条数
      totalCount:0,//分页参数--初始化页数
      isEnd:false,//防止多次刷新
      totalPage:0,//分页参数--分页数量
      NameLikes : '',
      noClick:true,
      sindex:-1,
      STATUS:'',
      showStatus: '',
    }
  },
  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._data.sTop=data.height  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
          that.totalHeight = data.height+CustomBar
        }).exec()
      }
    })
  },
  onShow() {
    var _this = this;
    _this.background = require('@/common/background.json');
    _this.showCount = -1;
    _this.currentPage = 1;
    _this.list = [];
    _this.isEnd = false;
    _this.getData();
    loginSession();
  },

  filters: {
    formatDate(time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  methods: {
    //跳转事件
    goToDetail(item) {
        uni.navigateTo({
          url: '/pages/application/ai-call-the-police/view?AIWARNING_ID='+item.AIWARNING_ID
        });
    },
    getQuery(){	//搜索按钮事件
      var _this = this;
      _this.showCount = -1;
      _this.currentPage = 1;
      _this.list = [];
      _this.isEnd = false;
      _this.getData();
    },
    reset(){
      var _this = this;
      _this.NameLikes = '';
      _this.list = [];
      _this.isEnd = false;
      _this.getData()
    },
    InputBlur(e){
      this.NameLikes = e.detail.value
    },
    // 滑动到底方法
    scrolltolower(){
      var _this = this;
      _this.showCount = -1;
      _this.currentPage = _this.currentPage + 1;
      _this.isEnd = false;
      if(_this.totalPage >= _this.currentPage){
        _this.getData();//开始分页查询
      }
    },
    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: {
          tm:new Date().getTime(),
          KEYWORDS : _this.NameLikes, //关键字模糊查询
          CORPINFO_ID:loginUser.CORPINFO_ID,
          USER_ID:loginUser.USER_ID,
        },
        success: (res) => {
          uni.hideLoading();//结束加载中动画
          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);
              }
            }
          }

        }
      })
    },
  }
}
</script>

<style>
.dy-card {
  background-color: #fff;
  border-radius: 10upx;
  margin: 30upx
}

.dy-card-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  min-height: 80upx;
  line-height: 80upx;
  padding: 0 30upx;
}

.dy-card-content {
  padding: 0upx 30upx 30upx;

}

.dy-card-content-item {
  margin-top: 20upx;
}

.dy-card-content-item .title {
  display: flex;
  align-items: center;
}

.dy-card-content-item .title .l {
  width: 10upx;
  height: 30upx;
  border-radius: 20upx;
  background-color: #666;
  margin-right: 10upx;
}

.dy-card-content-item .content {
  background-color: #F1F1F1;
  padding: 10upx 14upx;
  margin-top: 14upx;
  line-height: 1.6;
}

.dy-card-content-item .name text {
  background-color: #F1F1F1;
  padding: 10upx 14upx;
  margin-top: 14upx;
  line-height: 1.6;
  display: inline-block;
}

.dy-card-foot {
  border-top: 1px solid #eee;
  padding: 30upx;
}

.p20 {
  padding: 40upx;
}

.step-top {
  width: 100%;
  border-bottom: 1px solid #eee;
  background: #f9f9f9;
  padding: 20upx;
}

.step-item-container {
  width: 100%;
  padding: 20upx;

}

.step-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20upx 40upx;
}


.step-item-wrap {
  width: 100%;
  border-left: 1px solid #ccc;
  min-height: 100upx;
  position: relative;
  display: flex;
  flex-direction: row;
}

.step-item-wrap.active .step-item-wrap-doter .step-item-wrap-dot {
  background: #4cc9fb;
}

.step-item-wrap.success .step-item-wrap-doter .step-item-wrap-dot {
  background: #5db174;
}

.step-item-wrap.erroractive .step-item-wrap-doter .step-item-wrap-dot {
  background: red;
}

.step-item-wrap.active {
  border-left: 1px solid #5db174;
}

.step-item-wrap.activeing {
  border-left: 1px solid #ccc;
}

.step-item-wrap:last-child {
  border: none;
}

.step-item-wrap-doter {
  width: 30upx;
  height: 30upx;
  border-radius: 100%;
  background: #fff;
  position: absolute;
  top: 0upx;
  left: -12upx;
  text-align: center;
  padding-top: 5upx;

}

.step-item-wrap-dot {
  width: 20upx;
  height: 20upx;
  background: #c0c4cc;
  border-radius: 100%;
}

.step-item-wrap-right {
  margin-left: 40upx;
  margin-top: -5upx;
  padding-bottom: 60upx;
}


.step-item-wrap-right-info {
  color: #999;
  margin-top: 10upx;
}
.step-item-wrap.active .step-item-wrap-right,.step-item-wrap.active .step-item-wrap-right-info {
  color: #4cc9fb;
}

.step-item-wrap.success .step-item-wrap-right,.step-item-wrap.success .step-item-wrap-right-info {
  color: #5db174;
}

.step-item-wrap.erroractive .step-item-wrap-right,.step-item-wrap.erroractive .step-item-wrap-right-info {
  color: red;
}
</style>