tianmucloudmobile/pages/device/alert.vue

<template>
  <view class="work-container">
    <view style="margin-top: 10px">
      <uni-card v-for="item in alertList" :title="item.deviceName" :extra="item.createTime">

        <view style="position: relative">
			<view>客户:{{item.deptName!==null?item.deptName:''}}</view>
			<view>手机号:{{item.phone!==null?item.phone:''}}</view>
          <view>报警名称:{{item.alertName}}</view>
          <view>报警级别:{{alertLevel[item.alertLevel-1]}}</view>
          <view v-if="item.status == 3">状态:已处理</view>
          <view v-if="item.status != 3">状态:未处理</view>

          <view v-if="item.status == 3" style="width: 50px;position: absolute;right:-10px;bottom:0px"><u-button @click="watchResult(item)" type="primary" :plain="true" size="mini" text="查看结果"></u-button>
          </view>
          <view v-if="item.status != 3" style="width: 50px;position: absolute;right:-10px;bottom:0px"><u-button @click="handle(item)" type="error" :plain="true" size="mini" text="处理"></u-button>
          </view>

        </view>
      </uni-card>
      <uni-load-more @clickLoadMore="getMore" :contentText="contenText" :status="loadStatus"></uni-load-more>

      <uni-popup ref="popup" type="dialog">
        <uni-popup-dialog title="输入处理结果" :value="chooseItem.remark" placeholder="请输入处理结果" mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import {getAlertList,handleAlert} from '@/api/device/device';
import UText from "../../uni_modules/uview-ui/components/u-text/u-text";
export default {
  components: {UText},
  data() {
    return {
      show:true,
      alertList:[],
      search:{
        deptName:""
      },
      alertLevel:['提醒通知','轻微问题','严重警告'],
      pageNum:1,
      pageSize:10,
      chooseItem: {},
      contenText:{contentdown: "点击加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"},
      loadStatus:"more"
    }
  },
  onLoad(){
    this.getAlertList();
  },
  methods: {
    getMore(){
      this.pageNum ++;
      this.getAlertList();
    },
    open(item) {
      this.chooseItem = item;
      this.$refs.popup.open()
    },
    close() {
      this.chooseItem = {};
      this.$refs.popup.close()
    },
    confirm(text){

      if(!text){
        uni.showToast({
          icon:"error",
          title:"请输入内容"
        })
        return;
      }
      let item = this.chooseItem;
      item.remark = text;
      this.close();
      handleAlert(item).then(res=>{
        if(res.code == 200){
          item.status = 3;
        }
      })
    },
    searchDept(){
      this.getDeptList();
    },
    watchResult(item){
      this.open(item);
    },
    handle(item){
      this.open(item);
    },
    getAlertList(){
      this.loadStatus = "loading"
      getAlertList(this.pageNum,this.pageSize).then(res=>{
		  console.log("res>>>"+JSON.stringify(res))
        if(res.total == this.alertList.length && res.total<this.pageSize){
          uni.showToast({
            icon:"none",
            title:"没有更多了"
          })
          this.loadStatus = "noMore"
          return;
        }
        this.loadStatus = "more"
        this.alertList = this.alertList.concat(res.rows);
		console.log('first:::>>>'+JSON.stringify(this.alertList[0]))
      });
    }
  }
}
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
.u-collapse-content{
  display: flex;
  flex-direction: column;
}
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
;
}

.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}
</style>