nsgk_mobile/src/views/homesteadSurvey/index.vue

<template>
  <div class="app-container">
      <div style="width: 100%;
    color:#fff;
    padding:20px;
    background: linear-gradient(134deg,#7ac943 1%, #22b7f2);">
        <van-row>
          <van-col span="6">
            <van-image
              width="60"
              height="60"
              round
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
          </van-col>
          <van-col span="14">
            <p style="margin-top: 10px;">调查员.采集员</p>
            <p>{{nickName}}</p>
          </van-col>
          <van-col span="2" style="text-align:center;">
            <van-icon name="setting-o" style="margin-top:10px" @click="gotoLink" size="30"/>
          </van-col>
        </van-row>
      </div>
      <div style="background:#F5F5F5; padding-top:10px;">
      <van-row style="text-align:center;margin:20px;background:#fff;padding:15px;border-radius:15px;">
        <van-col span="8">
          <van-badge :content="total">
            <img
              width="50"
              height="50"
              :src="require('../../assets/images/housesteadSurvey/task1.png')"
              @click="active=1"
            />
          </van-badge>
          <p>全部任务</p>
        </van-col>
        <van-col span="8">
          <van-badge :content="done">
            <img
              width="50"
              height="50"
              :src="require('../../assets/images/housesteadSurvey/task2.png')"
              @click="active=2"
            />
          </van-badge>
          <p>已完成</p>
        </van-col>
        <van-col span="8" >
          <van-badge :content="todo">
            <img
              width="50"
              height="50"
              :src="require('../../assets/images/housesteadSurvey/task3.png')"
              @click="active=3"
            />
          </van-badge>
          <p>待调查</p>
        </van-col>
      </van-row>
      <div style="margin:20px;">
        <p class="title" style="position:relative;padding-left:20px;line-height:32px;">任务列表</p>
      </div>
      </div>

    <div v-if="active==1" style="height:calc( 100vh - 350px);overflow-y:auto;">
      <van-cell  v-for="(item,index) in totalList" :key="index" :title="item.deptName" size="small" @click.native="setCookies(item)" :to="{name:'homesteadList'}"style="border-radius: 16px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px">
        <template #default>
        </template>
        <template #label>
          开始时间:{{item.planBeginTime}} 结束时间：{{item.planEndTime}}
        </template>
        <template #icon>
          <van-icon name="clock" color="#22b7f2" style="margin-top:10px;margin-right:10px;"/>
        </template>
      </van-cell>
    </div>
    <div v-if="active==2" style="height:calc( 100vh - 350px);overflow-y:auto;">
      <van-cell  v-for=" (item,index) in doneList" :key="index" :title="item.deptName" size="small" :to="{name:'homesteadList',params:{item:item}}" style="border-radius: 16px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px">
        <template #default>
        </template>
        <template #label>
          开始时间:{{item.planBeginTime}}
        </template>
        <template #icon>
          <van-icon name="clock" color="#22b7f2" style="margin-top:10px;margin-right:10px;"/>
        </template>
      </van-cell>
    </div>
    <div v-if="active==3" style="height:calc( 100vh - 350px);overflow-y:auto;">
      <van-cell  v-for=" (item,index) in todoList" :key="index" :title="item.deptName" size="small" :to="{name:'homesteadList',params:{item:item}}" style="border-radius: 16px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px">
        <template #default>
        </template>
        <template #label>
          开始时间:{{item.planBeginTime}}
        </template>
        <template #icon>
          <van-icon name="clock" color="#22b7f2" style="margin-top:10px;margin-right:10px;"/>
        </template>
      </van-cell>
    </div>

  </div>
</template>

<script>
  import {addTask, complete, delTask, exportTask, getTask, listTask, publish, updateTask} from "@/api/homesteadSurvey/index";
  import {getInfo} from "../../api/login";
  // import circleProccess from "@/components/circleProccess.vue";
    export default {
      name: "homesteadIndex",
      components: {
        // circleProccess
      },
      data() {
        return {
          active: 1,
          show: false,
          loading: false,
          finished: false,
          height:200,
          phone:null,
          activeKey:0,
          currentRate: 0,
          total:0,
          totalList:[],
          done:0,
          doneList:[],
          todo:0,
          todoList:[],
          // 查询参数
          queryParams: {
            // 分页
            pageNum: 1,
            pageSize: 10,
            // 查询排序
            orderByColumn: "id",
            isAsc: "desc",
            deptId: null,
            deptName: null,
            title: null,
            createUserId: null,
            updateUserId: null,
            taskStatus: null,
            taskPublishStatus:"PUBLISHED",

          },
          nickName:"",
          text:0,
        };
      },
      mounted(){
        // 监听屏幕方向
        let self = this;
        window.addEventListener(
          "onorientationchange" in window ? "orientationchange" : "resize",
          function() {
            if (window.orientation === 90 || window.orientation === -90) {
              // 横屏
            }
          },
          false
        );
        getInfo().then(response => {
          this.nickName = response.user.nickName
        });
        this.getList();
      },
      methods: {
        setCookies(item){
          this.$cookies.set("item",JSON.stringify(item));
        },
        getList() {
          listTask(this.queryParams).then(response => {
            this.total = response.total
            this.totalList = response.rows
            this.done = 0;
            this.doneList = [];
            this.todo = 0;
            this.todoList = [];
            response.rows.map(res => {
              if(res.taskStatus == "FINISHED"){
                this.done+=1
                this.doneList.push(res);
              }else{
                this.todo+=1
                this.todoList.push(res);
              }
            })
          });
        },
        gotoLink(){
          this.$router.push('/homesteadSurvey/settle')
        },
        _isMobile() {
          this.phone = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        },
      },
    }
</script>

<style  scoped>
  >>> .sss {
    display: flex;
  }
  >>> .title:before
  {
    content:"";
    width: 6px;
    height: 32px;
    background: #7ac943;
    border-radius: 3px;
    position:absolute;
    left:0;
    bottom:0;
  }
</style>