nsgk_mobile/src/views/lawEnforcement/monitor/monitor.vue

<template>
    <div class="home_wrapper">
        <div class="header_main">
          监控
        </div>
      <div class="jg"></div>

      <div class="main1">
        <p class="tit">设备</p>
        <!--      <p class="content">农业农村管理方面法律及法规规定的行政处罚</p>-->
        <van-grid :column-num="2" :border="false">
          <van-grid-item>
            <div class="onDiv">
              <img src="../../../../static/images/lawEnforcement/icon/monitor_icon_01.png"/>
              <div class="onDiv_text">
                <p>{{monitorList.length}}<span>台</span></p>
                <p>在线设备</p>
              </div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="onDiv outDiv">
              <img src="../../../../static/images/lawEnforcement/icon/monitor_icon_01.png"/>
              <div class="onDiv_text">
                <p>{{monitorList2.length}}<span>台</span></p>
                <p>离线设备</p>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </div>

      <van-tabs v-model="active" animated>
        <van-tab title="在线设备">
          <div class="onList" v-for="(item,index) in monitorList" :key="index" @click="openAlert">
            <div class="onList_tit">
              <img src="../../../../static/images/lawEnforcement/icon/monitor_icon_02.png" alt="">
              <p>{{item.belongTeam}}</p>
            </div>
            <p class="onList_num">{{item.monitorCode}}</p>
            <p class="onList_time">接入时间：{{item.createTime.substr(0,10)}}</p>
          </div>
        </van-tab>
        <van-tab title="离线设备">
          <div class="onList offList" v-for="(item,index) in monitorList2" :key="index" @click="openAlert">
            <div class="onList_tit">
              <img src="../../../../static/images/lawEnforcement/icon/monitor_icon_02.png" alt="">
              <p>{{item.belongTeam}}</p>
            </div>
            <p class="onList_num">{{item.monitorCode}}</p>
            <p class="onList_time">最近时间：{{item.createTime.substr(0,10)}}</p>
          </div>
        </van-tab>
      </van-tabs>

      <div style="height: 20PX"></div>
      <lawNew></lawNew>
    </div>
</template>

<script>
  import lawNew from "@/components/common/lawNew_footer";
  import {getMonitor} from "@/api/lawEnforcement";
  import request from "@/utils/request";
  export default {
    name: "caseAllocation",
    components: {
      lawNew
    },
    data() {
      return {
        active: 0,
        queryParams:{
          sysNormalDisable:'0'
        },
        queryParams2:{
          sysNormalDisable:'1'
        },
        monitorList:[],
        monitorList2:[],
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList(){
        getMonitor(this.queryParams).then(response => {
          console.log(response)
          this.monitorList = response.rows;
        });
        getMonitor(this.queryParams2).then(response => {
          console.log(response)
          this.monitorList2 = response.rows;
        });
      },
      openAlert(){
        this.$dialog.alert({
          message: '暂未开通功能',
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .jg{
    height: 116px;
  }
  .onDiv{
    display: flex;
    width: 90%;
    background-image: linear-gradient(to right, #F57F65 , #F9A96D);
    justify-content: center;
    align-items: center;
    border-radius: 8PX;
    padding: 12PX 0 15PX;
    .onDiv_text{
      margin-left: 10%;
      p{
        color: #ffffff;
        line-height: 1;
        &:first-child{
          font-size: 32PX;
          margin-bottom: 5PX;
          span{
            font-size: 14PX;
          }
        }
      }
    }
  }
  .outDiv{
    background:#C9C9C9;
  }
  .onList{
    background: #1D6FE9 url("../../../../static/images/lawEnforcement/icon/monitor_icon_03.png") no-repeat;
    background-position: right 5% top 40%;
    width: 46%;
    padding: 3% 5%;
    color: #ffffff;
    border-radius: 10PX;
    float: left;
    margin: 4% 2% 0;
    .onList_tit{
      display: flex;
      align-items: center;
      p{
        margin-left: 5PX;
      }
    }
    .onList_num{
      font-size: 28PX;
      margin: 5PX 0;
    }
  }
  .offList{
    background: #C9C9C9 url("../../../../static/images/lawEnforcement/icon/monitor_icon_04.png") no-repeat;
    background-position: right 5% top 40%;
  }
  /deep/ .van-tabs--line .van-tabs__wrap{
    border-radius: 100rem;
  }
  /deep/ .van-tab{
    z-index: 1;
  }
  /deep/ .van-tab--active{
    color: #1D6FE9;
  }
  /deep/ .van-tabs__nav{
    background: #ECECEC;
  }
  /deep/ .van-tabs__line{
    background: #fff;
    border-radius: 100rem;
    z-index: 0;
    width: 47%;
    height: 60%;
    bottom: 0.5rem;
  }
.home_wrapper{
    background: #F6F6F6;
    min-height: 100vh;
    width: 100vw;
    padding: 0 3% 0.2rem;
    .header_main{
        height: 116px;
        background: url('../../../../static/images/lawEnforcement/new/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        z-index: 999;
        .return_btn{
            width: 24px;
            height: 43.2px;
            background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }
        .add_btn{
            width: 56.4px;
            height: 40.8px;
            background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
            background-size: 47px 34px;
            position: absolute;
            right: 38px;
            top: 36px;
        }
    }
}
.main1{
   padding: 0 3%;
   margin: 25PX auto 0;
   .content{
     color: #878787;
     padding-left: 2%;
     margin-top: 10PX;
   }
   /deep/ .van-grid-item__content{
     background: transparent;
     padding-left: 0;
     padding-right: 0;
     p{
       /*color: #333333;*/
       font-size: 14PX;
     }
   }
 }
.tit{
  font-weight: bold;
  font-size: 16PX;
  padding: 0 2%;
  background: url("../../../../static/images/lawEnforcement/new/index_icon_18.png") no-repeat left center;
  line-height: 1;
}
.main_box{
  width: 100%;
  margin: 0 auto;
  border-radius: 10PX;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  overflow: hidden;
  background-color: #FFF;
  margin-top: 10PX;
  p,/deep/ .van-grid-item__text{
    font-size: .35rem;
    color: #646566;
  }
  .custom-title{
    font-size: 17PX;
    color: #333333;
    vertical-align: middle;
    line-height: 1;
    position: relative;
  }
  .tap{
    color: #1D6FE9;
  }
  .bgBlue{
    display: block;
    position: absolute;
    width: 17PX;
    height: 17PX;
    border-radius: 50%;
    background-color: rgba(29,111,233,0.26);
    top: -2PX;
    right: -8PX;
  }
}
</style>