nsgk_mobile/src/views/homesteadSurvey/index.vue

<template>
  <div class="app-container">
    <div style="width: 100%;color:#fff;padding:15px 0;background: linear-gradient(134deg,#7ac943 1%, #22b7f2);">
      <div style="width: 95%;margin: 0 auto;display: flex;align-items: center;">
        <van-image
          width="60"
          height="60"
          round
          src="https://img.yzcdn.cn/vant/leaf.jpg"
        />
        <div style="margin-left: 15px;">
          <p style="font-size: 16px;" v-if="businessLevel=='1'">调查员·采集员</p>
          <p style="font-size: 16px;" v-if="businessLevel=='2'">审核员</p>
          <p style="margin-top: 10px;font-size: 16px;">{{nickName}}</p>
        </div>
        <van-icon name="setting-o" style="margin-left: auto;" @click="gotoLink" size="25"/>
      </div>
    </div>
    <div style="background:#F5F5F5;width: 95%;margin: 20px auto 0;border-radius: 15px;overflow: hidden;">
      <van-grid :column-num="3" :border="false">
        <van-grid-item>
          <van-badge :content="total">
            <img
              width="50"
              height="50"
              :src="require('../../assets/images/housesteadSurvey/task1.png')"
              @click="active=1,getList()"
            />
          </van-badge>
          <p id="basetext" :style="{color:(active==1?'#7AC943':'#000'),fontSize:'14px',marginTop:'5px'}">全部任务</p>
        </van-grid-item>
        <van-grid-item>
          <van-badge :content="done">
            <img
              width="50"
              height="50"
              :src="require('../../assets/images/housesteadSurvey/task2.png')"
              @click="active=2,getList()"
            />
          </van-badge>
          <p :style="{color:(active==2?'#7AC943':'#000'),fontSize:'14px',marginTop:'5px'}">已完成</p>
        </van-grid-item>
        <van-grid-item>
          <van-badge :content="todo">
            <img
              width="50"
              height="50"
              :src="require('../../assets/images/housesteadSurvey/task3.png')"
              @click="active=3,getList()"
            />
          </van-badge>
          <p :style="{color:(active==3?'#7AC943':'#000'),fontSize:'14px',marginTop:'5px'}">待调查</p>
        </van-grid-item>
      </van-grid>
    </div>
    <div style="margin:20px;">
      <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;">任务列表</p>
    </div>
    <div v-if="active==1" style="height:calc( 100vh - 350px);overflow-y:auto;">
      <van-pull-refresh v-model="isLoadingtask" @refresh="onRefreshtask" :immediate-check="false">
      <van-cell  v-for="(item,index) in totalList" :key="item.id" size="small" @click.native="setCookies(item)" style="border-radius: 16px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:95%;margin:0px auto 20px;height: 110px;">
        <template #title>
          <div>{{item.deptName}}</div>
        </template>
        <template #default>
          <p :style="{'color':chooseColor(item),'background':chooseColor2(item),'display':'inline-block','padding':'4px 2px','line-height':'1','border-radius':'5px'}">
            {{item.confirmZjdzdNumber}}/{{item.reportZjdzdNumber}}
          </p>
          <van-circle
            v-model="item.reportZrzNumber"
            :rate="item.reportNhNumber"
            :stroke-width="100"
            :speed="100"
            size="70%"
            layer-color="#ebedf0"
            :color="chooseColor(item)"
            :text="item.reportZjdzdNumber!=null?(((item.confirmZjdzdNumber/item.reportZjdzdNumber)*100).toFixed())+'%':0+'%'"
          />
        </template>
        <template #label>
          <p style="display: flex;align-items: center;margin-top: 5px;"><van-icon name="clock" color="#22b7f2" style="margin-right:5px;"/>{{item.jhkssj}}~{{item.jhjssj}}</p>
          <p style="display: flex;align-items: center;margin-top: 5px;"><van-icon name="manager" color="#22b7f2" style="margin-right:5px;"/>{{item.rwzxr}}</p>
        </template>
      </van-cell>
      </van-pull-refresh>
    </div>
    <div v-if="active==2" style="height:calc( 100vh - 350px);overflow-y:auto;">
      <van-pull-refresh v-model="isLoadingtask" @refresh="onRefreshtask">
      <van-cell  v-for="(item,index) in doneList" :key="item.id" size="small" @click.native="setCookies(item)" style="border-radius: 16px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:95%;margin:0px auto 20px;height: 110px;">
        <template #title>
          <div>{{item.deptName}}</div>
        </template>
        <template #default>
          <p :style="{'color':chooseColor(item),'background':chooseColor2(item),'display':'inline-block','padding':'4px 2px','line-height':'1','border-radius':'5px'}">
            {{item.confirmZjdzdNumber}}/{{item.reportZjdzdNumber}}
          </p>
          <van-circle
            v-model="item.reportZrzNumber"
            :rate="item.reportNhNumber"
            :stroke-width="100"
            :speed="100"
            size="70%"
            layer-color="#ebedf0"
            :color="chooseColor(item)"
            :text="item.reportZjdzdNumber!=null?(((item.confirmZjdzdNumber/item.reportZjdzdNumber)*100).toFixed())+'%':0+'%'"
          />
        </template>
        <template #label>
          <p style="display: flex;align-items: center;margin-top: 5px;"><van-icon name="clock" color="#22b7f2" style="margin-right:5px;"/>{{item.jhkssj}}~{{item.jhjssj}}</p>
          <p style="display: flex;align-items: center;margin-top: 5px;"><van-icon name="manager" color="#22b7f2" style="margin-right:5px;"/>{{item.rwzxr}}</p>
        </template>
      </van-cell>
      </van-pull-refresh>
    </div>
    <div v-if="active==3" style="height:calc( 100vh - 350px);overflow-y:auto;">
      <van-pull-refresh v-model="isLoadingtask" @refresh="onRefreshtask">
      <van-cell  v-for="(item,index) in todoList" :key="item.id" size="small" @click.native="setCookies(item)" style="border-radius: 16px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:95%;margin:0px auto 20px;height: 110px;">
        <template #title>
          <div>{{item.deptName}}</div>
        </template>
        <template #default>
          <p :style="{'color':chooseColor(item),'background':chooseColor2(item),'display':'inline-block','padding':'4px 2px','line-height':'1','border-radius':'5px'}">
            {{item.confirmZjdzdNumber}}/{{item.reportZjdzdNumber}}
          </p>
          <van-circle
            v-model="item.reportZrzNumber"
            :rate="item.reportNhNumber"
            :stroke-width="100"
            :speed="100"
            size="70%"
            layer-color="#ebedf0"
            :color="chooseColor(item)"
            :text="item.reportZjdzdNumber!=null?(((item.confirmZjdzdNumber/item.reportZjdzdNumber)*100).toFixed())+'%':0+'%'"
          />
        </template>
        <template #label>
          <p style="display: flex;align-items: center;margin-top: 5px;"><van-icon name="clock" color="#22b7f2" style="margin-right:5px;"/>{{item.jhkssj}}~{{item.jhjssj}}</p>
          <p style="display: flex;align-items: center;margin-top: 5px;"><van-icon name="manager" color="#22b7f2" style="margin-right:5px;"/>{{item.rwzxr}}</p>
        </template>
      </van-cell>
      </van-pull-refresh>
    </div>

  </div>
</template>

<script>
  import {addTask, complete, delTask, exportTask, getTask, listTask, publish, updateTask, userList} from "@/api/homesteadSurvey/index";
  import {getInfo} from "../../api/login";
  import CircleProccess from "@/components/circleProccess.vue";
  import {updateUserPwd} from "../../api/onlineHome/my";
  import {Dialog} from "vant";
  import {sysConfig} from "../../api/homesteadSurvey";
  import axios from "axios";
    export default {
      name: "homesteadIndex",
      components: {
        CircleProccess
      },
      data() {
        return {
          currentRate1:0,
          currentRate2:0,
          currentRate3:0,
          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:[],
          gradientColor:{

          },
          // 查询参数
          queryParams: {
            rwwczt: null,
            rwfbzt:"PUBLISHED",
            taskExecutor:null
          },
          nickName:"",
          text:0,
          isLoadingtask:false,
          countqb:0,
          countyhc:0,
          countwhc:0,

          //宅调人员列表
          taskExecutortions:[],
          //当前用户级别
          businessLevel:1,
          // 字典列表json
          dictTypeList:null,
        };
      },
      created(){
        userList().then(response => {
          this.taskExecutortions = response.data
        })
        getInfo().then(response => {
          this.nickName = response.user.nickName
          this.businessLevel = response.user.businessLevel
          this.$cookies.set("businessLevel",this.businessLevel)
          this.queryParams.taskExecutor = response.user.userName
          this.getList();
        });
        axios.get('../static/dictyType.json').then(res => {
          this.dictTypeList = res.data
        })
     },
      mounted(){

        // 监听屏幕方向
        let self = this;
        window.addEventListener(
          "onorientationchange" in window ? "orientationchange" : "resize",
          function() {
            if (window.orientation === 90 || window.orientation === -90) {
              // 横屏
            }
          },
          false
        );
        if(this.$cookies.get("url")==null||this.$cookies.get("url")==""){
          this.getBaseUrl()
        }
      },
      methods: {
        getBaseUrl(){
          let params={
            configKey: "system.attachment.url"}
          sysConfig(params).then(response => {
            this.$cookies.set("url",response.rows[0].configValue)
          })
        },
        chooseValue(item){
            let a = ((item.confirmZjdzdNumber/item.reportZjdzdNumber)*100).toFixed()
          return a
        },
        chooseColor(item){
          let a = ((item.confirmZjdzdNumber/item.reportZjdzdNumber)*100).toFixed()
            if(a < 50){
              return  '#FA5353'
            }else if(a < 100){
              return '#22B7F2'
            }else{
              return '#85d824'
            }
          return  '#FA5353'
        },
        chooseColor2(item){
          let a = ((item.confirmZjdzdNumber/item.reportZjdzdNumber)*100).toFixed()
            if(a < 50){
              return  'rgba(250,83,83,0.22)'
            }else if(a < 100){
              return 'rgba(34,183,242,0.22)'
            }else{
              return 'rgba(122,201,67,0.22)'
            }
          return  '#FA5353'
        },
        taskExecutorChange(row){
          if(row.taskExecutor!=null&&row.taskExecutor!=""&&row.taskExecutor.length>1){
            var actions = [];
            row.taskExecutor.map(res => {
              for(let i = 0;i<this.taskExecutortions.length;i++){
                if(res == this.taskExecutortions[i].userName){
                  actions.push(this.taskExecutortions[i].nickName)
                }
              }
            })
            return actions.join(',');
          }else{
            var actions = [];
            Object.keys(this.taskExecutortions).some((key) => {
              if (this.taskExecutortions[key].userName == ('' + row.taskExecutor)) {
                actions.push(this.taskExecutortions[key].nickName);
                return true;
              }
            })
            return actions.join(',');
          }
        },
        onRefreshtask(){
          this.isLoadingtask = false;
          let _this = this
          if(this.active==1){
            let params = {
              "rwwczt": "FINISHED",
              "rwfbzt":"PUBLISHED",
              "pageNum": this.countyhc+1,
              "pageSize":10,
            }
            listTask(params).then((response) => {
              if(response.rows.length>0&&this.doneList.length<response.total){
                response.rows.map(res => {
                  this.doneList.unshift(res)
                })
                this.countyhc++
              }
            });
          }else if(this.active==2){
            let params = {
              "rwwczt": "UNFINISHED",
              "rwfbzt":"PUBLISHED",
              "pageNum": this.countwhc+1,
              "pageSize":10,
            }
            listTask(params).then((response) => {
              if(response.rows.lenght>0&&this.todoList.length<response.total){
                response.rows.map(res => {
                  this.todoList.unshift(res)
                })
                this.countwhc++
              }
            });
          }else{
            let params = {
              "rwfbzt":"PUBLISHED",
              "pageNum": this.countqb+1,
              "pageSize":10,
            }
            listTask(params).then((response) => {
              if(response.rows.length>0&&this.totalList.length<response.total){
                response.rows.map(res => {
                  this.totalList.unshift(res)
                })
                this.countqb++
              }
            });
          }
        },
        setCookies(item){
       /*   if(this.$cookies.get("upload")==null||this.$cookies.get("upload")==0){
            Dialog.confirm({
              title: '提示',
              message: '当前未选择批量上传，可能会由于网络原因上传图片缓慢，是否继续？',
            })
              .then(() => {
                // on confirm
                this.$router.push({name:'homesteadList'})
                this.$cookies.set("item",JSON.stringify(item));
              })
              .catch(() => {
                // on cancel
              });
          }else{
            this.$router.push({name:'homesteadList'})
            this.$cookies.set("item",JSON.stringify(item));
          }*/
          this.$cookies.set("item","");
          this.$cookies.set("item",JSON.stringify(item));
          this.$router.push({name:'homesteadList'})
        },
        getList() {
          this.totalList = []
          this.doneList = [];
          this.todoList = [];
          listTask(this.queryParams).then(response => {
            this.total = response.total
            this.done = 0;
            this.todo = 0;
            response.rows.map(res => {
              if(res.taskStatus == "FINISHED"){
                this.done+=1
                this.doneList.push(res);
              }else{
                this.todo+=1
                this.todoList.push(res);
              }
              if(res.taskExecutor!=null&&res.taskExecutor!=''){
                res.taskExecutor = res.taskExecutor.split(',')
              }
            })
          this.totalList = response.rows
          });
        },
        gotoLink(){
          this.$router.push('/homesteadSurvey/settle')
        },
      },
    }
</script>

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