zhangzl
/
nsgk_mobile
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
移动端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1470 Commits
7 Branches
79 MiB
 
 
Tree: 155d9cf56d
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '155d9cf56d'
${ noResults }
nsgk_mobile/src/views/homesteadSurvey/index.vue

534 lines
19 KiB
Raw Blame History 

  1. <template>

  2.   <div class="app-container">

  3.     <div style="width: 100%;color:#fff;padding:15px 0;background: linear-gradient(134deg,#7ac943 1%, #22b7f2);">

  4.       <div style="width: 95%;margin: 0 auto;display: flex;align-items: center;">

  5.         <van-image

  6.           width="60"

  7.           height="60"

  8.           round

  9.           src="https://img.yzcdn.cn/vant/leaf.jpg"

  10.         />

  11.         <div style="margin-left: 15px;">

  12.           <p style="margin-top: 10px;font-size: 16px;">{{nickName}}

  13.             <span style="font-size: 16px;" v-if="businessLevel=='1'">·调查员</span>

  14.             <span style="font-size: 16px;" v-if="businessLevel=='2'">·审核员</span>

  15.           </p>

  16.         </div>

  17.         <van-icon name="setting-o" style="margin-left: auto;" @click="gotoLink" size="25"/>

  18.       </div>

  19.     </div>

  20.     <div style="background:#F5F5F5;width: 95%;margin: 20px auto 0;border-radius: 15px;overflow: hidden;">

  21.       <van-grid :column-num="3" :border="false">

  22.         <van-grid-item>

  23.           <van-badge :content="total">

  24.             <img

  25.               width="50"

  26.               height="50"

  27.               :src="require('../../assets/images/housesteadSurvey/task1.png')"

  28.               @click="active=1,checkBadge()"

  29.             />

  30.           </van-badge>

  31.           <p id="basetext" :style="{color:(active==1?'#7AC943':'#000'),fontSize:'14px',marginTop:'5px'}">全部任务</p>

  32.         </van-grid-item>

  33.         <van-grid-item>

  34.           <van-badge :content="done">

  35.             <img

  36.               width="50"

  37.               height="50"

  38.               :src="require('../../assets/images/housesteadSurvey/task2.png')"

  39.               @click="active=2,checkBadge()"

  40.             />

  41.           </van-badge>

  42.           <p :style="{color:(active==2?'#7AC943':'#000'),fontSize:'14px',marginTop:'5px'}">已完成</p>

  43.         </van-grid-item>

  44.         <van-grid-item>

  45.           <van-badge :content="todo">

  46.             <img

  47.               width="50"

  48.               height="50"

  49.               :src="require('../../assets/images/housesteadSurvey/task3.png')"

  50.               @click="active=3,checkBadge()"

  51.             />

  52.           </van-badge>

  53.           <p :style="{color:(active==3?'#7AC943':'#000'),fontSize:'14px',marginTop:'5px'}">待调查</p>

  54.         </van-grid-item>

  55.       </van-grid>

  56.     </div>

  57.     <div style="margin:20px;">

  58.       <div style="float:left;font-size: 16px;">任务列表</div>

  59.       <div style="float:left;font-size: 16px;margin-left: 25%;">

  60.         <span @click="queryAllxz()">{{deptName}}</span>

  61.         <div id="dropList" v-if="showDropList"  style="width: 28vw; position: absolute; z-index: 99; left: 55%; margin-left: -16vw; border: 1px solid #E2E0E0;" >

  62.           <van-cell id="vanCell"  v-for="(item, index) in xzList" :key="index" @click="xzChange(item)" style="position: relative; z-index: 999;">

  63.             {{item.deptName}}

  64.           </van-cell>

  65.         </div>

  66. 

  67.       </div>

  68.       <div style="float:right;font-size: 16px;">

  69.         <van-checkbox v-model="checked"   @change="checkChange">仅我</van-checkbox>

  70.       </div>

  71.     </div>

  72.     <div v-if="active==1" style="height:calc( 100vh - 350px);margin-top: 14%;overflow-y:auto;">

  73.         <van-list

  74.           v-model:loading="loading"

  75.           :finished="finished"

  76.           finished-text="没有更多了"

  77.           :immediate-check="false"

  78.           @load="onRefreshtask"

  79.         >

  80.       <van-cell  v-for="(item,index) in totalList" :key="item.id" size="small" @click.native="setCookies(item)" style="border-radius: 16px;

  81.     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:95%;margin:0px auto 20px;height: 110px;">

  82.         <template #title>

  83.           <div>{{item.rwmc}}  <span :style="{'color':chooseColor(item),'background':chooseColor2(item),'display':'inline-block','padding':'4px 2px','line-height':'1','border-radius':'5px'}">{{item.zjdwcsl}}/{{item.zjdsl}}</span></div>

  84.         </template>

  85.         <template #default>

  86.           <van-circle

  87.             v-model="item.reportZrzNumber"

  88.             :rate="item.reportNhNumber"

  89.             :stroke-width="100"

  90.             :speed="100"

  91.             size="70%"

  92.             layer-color="#ebedf0"

  93.             :color="chooseColor(item)"

  94.             :text="item.zjdwcsl!=0?(item.zjdwcsl == item.zjdsl?100+'%':(((item.zjdwcsl/item.zjdsl)*100).toFixed(2))+'%'):0+'%'"

  95.           />

  96.         </template>

  97.         <template #label>

  98.           <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>

  99.           <p style="display: flex;align-items: center;margin-top: 5px;"><van-icon name="manager" color="#22b7f2" style="margin-right:5px;"/>{{item.rwzxr}}</p>

  100.         </template>

  101.       </van-cell>

  102.         </van-list>

  103. 

  104.     </div>

  105.     <div v-if="active==2" style="height:calc( 100vh - 350px);margin-top: 14%;overflow-y:auto;">

  106.       <van-list

  107.         v-model:loading="loading"

  108.         :finished="finished"

  109.         finished-text="没有更多了"

  110.         :immediate-check="false"

  111.         @load="onRefreshtask"

  112.       >

  113.       <van-cell  v-for="(item,index) in doneList" :key="item.id" size="small" @click.native="setCookies(item)" style="border-radius: 16px;

  114.     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:95%;margin:0px auto 20px;height: 110px;">

  115.         <template #title>

  116.           <div>{{item.rwmc}}     <span :style="{'color':chooseColor(item),'background':chooseColor2(item),'display':'inline-block','padding':'4px 2px','line-height':'1','border-radius':'5px'}">{{item.zjdwcsl}}/{{item.zjdsl}}</span></div>

  117.         </template>

  118.         <template #default>

  119. 

  120.           <van-circle

  121.             v-model="item.reportZrzNumber"

  122.             :rate="item.reportNhNumber"

  123.             :stroke-width="100"

  124.             :speed="100"

  125.             size="70%"

  126.             layer-color="#ebedf0"

  127.             :color="chooseColor(item)"

  128.             :text="item.zjdwcsl!=0?(item.zjdwcsl == item.zjdsl?100+'%':(((item.zjdwcsl/item.zjdsl)*100).toFixed(2))+'%'):0+'%'"

  129.           />

  130.         </template>

  131.         <template #label>

  132.           <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>

  133.           <p style="display: flex;align-items: center;margin-top: 5px;"><van-icon name="manager" color="#22b7f2" style="margin-right:5px;"/>{{item.rwzxr}}</p>

  134.         </template>

  135.       </van-cell>

  136.       </van-list>

  137.     </div>

  138.     <div v-if="active==3" style="height:calc( 100vh - 350px);margin-top: 14%;overflow-y:auto;">

  139.       <van-list

  140.         v-model:loading="loading"

  141.         :finished="finished"

  142.         finished-text="没有更多了"

  143.         :immediate-check="false"

  144.         @load="onRefreshtask"

  145.       >

  146.       <van-cell  v-for="(item,index) in todoList" :key="item.id" size="small" @click.native="setCookies(item)" style="border-radius: 16px;

  147.     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:95%;margin:0px auto 20px;height: 110px;">

  148.         <template #title>

  149.           <div>{{item.rwmc}}   <span :style="{'color':chooseColor(item),'background':chooseColor2(item),'display':'inline-block','padding':'4px 2px','line-height':'1','border-radius':'5px'}">{{item.zjdwcsl}}/{{item.zjdsl}}</span></div>

  150.         </template>

  151.         <template #default>

  152.           <van-circle

  153.             v-model="item.reportZrzNumber"

  154.             :rate="item.reportNhNumber"

  155.             :stroke-width="100"

  156.             :speed="100"

  157.             size="70%"

  158.             layer-color="#ebedf0"

  159.             :color="chooseColor(item)"

  160.             :text="item.zjdwcsl!=0?(item.zjdwcsl == item.zjdsl?100+'%':(((item.zjdwcsl/item.zjdsl)*100).toFixed(2))+'%'):0+'%'"

  161.           />

  162.         </template>

  163.         <template #label>

  164.           <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>

  165.           <p style="display: flex;align-items: center;margin-top: 5px;"><van-icon name="manager" color="#22b7f2" style="margin-right:5px;"/>{{item.rwzxr}}</p>

  166.         </template>

  167.       </van-cell>

  168.       </van-list>

  169.     </div>

  170. 

  171.   </div>

  172. </template>

  173. 

  174. <script>

  175.   import {listTask,mobileList,getTownInfo, publish, updateTask, userList} from "@/api/homesteadSurvey/index";

  176.   import {changeDept} from "@/api/homesteadSurvey/zjdzd";

  177.   import {getInfo} from "../../api/login";

  178.   import CircleProccess from "@/components/circleProccess.vue";

  179.   import {updateUserPwd} from "../../api/onlineHome/my";

  180.   import {Dialog} from "vant";

  181.   import {sysConfig} from "../../api/homesteadSurvey";

  182.   import axios from "axios";

  183.     export default {

  184.       name: "homesteadIndex",

  185.       components: {

  186.         CircleProccess

  187.       },

  188.       data() {

  189.         return {

  190.           currentRate1:0,

  191.           currentRate2:0,

  192.           currentRate3:0,

  193.           active: 1,

  194.           show: false,

  195.           loading: false,

  196.           finished: false,

  197.           checked:true,

  198.           height:200,

  199.           phone:null,

  200.           activeKey:0,

  201.           currentRate: 0,

  202.           deptName:"全部乡镇",

  203.           showDropList:false,

  204.           total:0,

  205.           totalList:[],

  206.           xzList:[],

  207.           done:0,

  208.           doneList:[],

  209.           todo:0,

  210.           todoList:[],

  211.           gradientColor:{

  212. 

  213.           },

  214.           // 查询参数

  215.           queryParams: {

  216.             rwwczt: null,

  217.             rwfbzt:"PUBLISHED",

  218.             rwzxr:null

  219.           },

  220.           nickName:"",

  221.           text:0,

  222.           isLoadingtask:false,

  223.           countqb:1,

  224.           countyhc:1,

  225.           countwhc:1,

  226. 

  227.           //当前用户级别

  228.           businessLevel:1,

  229.           // 字典列表json

  230.           dictTypeList:null,

  231.         };

  232.       },

  233.       created(){

  234.         if(this.checked){

  235.           setTimeout(() => {

  236.             let userId = this.$store.state.user.userId;

  237.             console.info(userId);

  238.             this.nickName = this.$store.state.user.nickName;

  239.             this.$set(this.queryParams, "rwzxr", userId);

  240.             this.$set(this.queryParams, "params", {deptId:100});

  241.             this.getList();

  242.           },1000)

  243.         }else{

  244. 

  245.           this.$set(this.queryParams, "rwzxr", null);

  246.           this.getList();

  247.         }

  248.         getTownInfo(100).then(response => {

  249.           this.xzList = response.data

  250.           let qbxz = {deptId:100,deptName:"全部乡镇"}

  251.           this.xzList.unshift(qbxz);

  252.         })

  253. 

  254.         axios.get('../static/dictyType.json').then(res => {

  255.           this.dictTypeList = res.data

  256.         })

  257. 

  258.      },

  259.       mounted(){

  260. 

  261.         // 监听屏幕方向

  262.         let self = this;

  263.         window.addEventListener(

  264.           "onorientationchange" in window ? "orientationchange" : "resize",

  265.           function() {

  266.             if (window.orientation === 90 || window.orientation === -90) {

  267.               // 横屏

  268.             }

  269.           },

  270.           false

  271.         );

  272.         if(this.$cookies.get("url")==null||this.$cookies.get("url")==""){

  273.           this.getBaseUrl()

  274.         }

  275.       },

  276.       methods: {

  277.         getBaseUrl(){

  278.           let params={

  279.             configKey: "system.attachment.url"}

  280.           sysConfig(params).then(response => {

  281.             this.$cookies.set("url",response.rows[0].configValue)

  282.           })

  283.         },

  284.         qiehuan(deptId){

  285.           changeDept(deptId).then(response => {

  286.             this.$router.push({name:'homesteadList'})

  287.           });

  288.         },

  289.         chooseValue(item){

  290.             let a = ((item.confirmZjdzdNumber/item.reportZjdzdNumber)*100).toFixed()

  291.           return a

  292.         },

  293.         chooseColor(item){

  294.           let a = ((item.confirmZjdzdNumber/item.reportZjdzdNumber)*100).toFixed()

  295.             if(a < 50){

  296.               return  '#FA5353'

  297.             }else if(a < 100){

  298.               return '#22B7F2'

  299.             }else{

  300.               return '#85d824'

  301.             }

  302.           return  '#FA5353'

  303.         },

  304.         chooseColor2(item){

  305.           let a = ((item.confirmZjdzdNumber/item.reportZjdzdNumber)*100).toFixed()

  306.             if(a < 50){

  307.               return  'rgba(250,83,83,0.22)'

  308.             }else if(a < 100){

  309.               return 'rgba(34,183,242,0.22)'

  310.             }else{

  311.               return 'rgba(122,201,67,0.22)'

  312.             }

  313.           return  '#FA5353'

  314.         },

  315.         onRefreshtask(){

  316.           this.isLoadingtask = false;

  317.           let _this = this

  318.           if(this.active==1 && this.loading ){

  319.             let params = {

  320.               "rwfbzt":"PUBLISHED",

  321.               "params":this.queryParams.params,

  322.               "parentId":this.queryParams.parentId,

  323.               "pageNum": this.countyhc+1,

  324.               "pageSize":4,

  325.             }

  326.             if(this.queryParams.rwzxr != null){

  327.               params.rwzxr = this.queryParams.rwzxr;

  328.             }

  329.             listTask(params).then((response) => {

  330.               if(response.rows.length>0&&this.totalList.length<response.total){

  331.                 response.rows.map(res => {

  332.                   this.totalList.push(res)

  333.                 })

  334.                 this.countyhc++

  335.                 this.loading = false;

  336.               }else{

  337.                 this.finished = true;

  338.               }

  339.             });

  340.           }else if(this.active==2 && this.loading){

  341.             let params = {

  342.               "rwwczt": "PUBLISHED",

  343.               "rwfbzt":"PUBLISHED",

  344.               "params":this.queryParams.params,

  345.               "parentId":this.queryParams.parentId,

  346.               "pageNum": this.countwhc+1,

  347.               "pageSize":4,

  348.             }

  349.             if(this.queryParams.rwzxr != null){

  350.               params.rwzxr = this.queryParams.rwzxr;

  351.             }

  352.             listTask(params).then((response) => {

  353.               if(response.rows.lenght>0&&this.doneList.length<response.total){

  354.                 response.rows.map(res => {

  355.                   this.doneList.push(res)

  356.                 })

  357.                 this.countwhc++

  358.                 this.loading = false;

  359.               }else{

  360.                 this.finished = true;

  361.               }

  362.             });

  363.           }else if(this.active==3 && this.loading){

  364.             let params = {

  365.               "rwwczt": "UNFINISHED",

  366.               "rwfbzt":"PUBLISHED",

  367.               "params":this.queryParams.params,

  368.               "parentId":this.queryParams.parentId,

  369.               "pageNum": this.countqb+1,

  370.               "pageSize":4,

  371.             }

  372.             if(this.queryParams.rwzxr != null){

  373.               params.rwzxr = this.queryParams.rwzxr;

  374.             }

  375.             listTask(params).then((response) => {

  376.               if(response.rows.length>0&&this.todoList.length<response.total){

  377.                 response.rows.map(res => {

  378.                   this.todoList.push(res)

  379.                 })

  380.                 this.countqb++

  381.                 this.loading = false;

  382.               }else{

  383.                 this.finished = true

  384.               }

  385.             });

  386.           }

  387.         },

  388.         checkChange(e){

  389.           if(e){

  390.             let userId = this.$store.state.user.userId;

  391.             this.$set(this.queryParams, "rwzxr", userId);

  392.             this.getList();

  393.           }else{

  394.             this.$set(this.queryParams, "rwzxr", null);

  395.             this.getList();

  396.           }

  397.         },

  398.         setCookies(item){

  399.        /*   if(this.$cookies.get("upload")==null||this.$cookies.get("upload")==0){

  400.             Dialog.confirm({

  401.               title: '提示',

  402.               message: '当前未选择批量上传，可能会由于网络原因上传图片缓慢，是否继续？',

  403.             })

  404.               .then(() => {

  405.                 // on confirm

  406.                 this.$router.push({name:'homesteadList'})

  407.                 this.$cookies.set("item",JSON.stringify(item));

  408.               })

  409.               .catch(() => {

  410.                 // on cancel

  411.               });

  412.           }else{

  413.             this.$router.push({name:'homesteadList'})

  414.             this.$cookies.set("item",JSON.stringify(item));

  415.           }*/

  416.           let userId = this.$store.state.user.userId;

  417.           // let businessLevel = this.$store.getters.businessLevel;

  418.           let status = false;

  419.           if(item.rwzxrIds != null && item.rwzxrIds !== ""){

  420.             let ids = item.rwzxrIds.split(",");

  421.             ids.forEach(function(id){

  422.               if(userId === parseInt(id)){

  423.                 status = true;

  424.               }

  425.             });

  426.           }

  427.           if(status){

  428.             localStorage.setItem("surveyItem",JSON.stringify(item));

  429.             this.qiehuan(item.deptId);

  430.           }else{

  431.             this.$dialog.alert({

  432.               message: "没有该任务的调查权限！",

  433.             });

  434.           }

  435. 

  436.         },

  437.         queryAllxz(){

  438.           if (this.showDropList) {

  439.             this.showDropList = false;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示

  440.           } else {

  441.             this.showDropList = true;

  442.           }

  443.         },

  444.         xzChange(val){

  445.           this.deptName = val.deptName;

  446.           this.showDropList = false;

  447.           this.$set(this.queryParams, "deptId", null);

  448.           if(val.deptId != 100){

  449.             this.$set(this.queryParams, "parentId", val.deptId);

  450.             this.$set(this.queryParams, "params", {deptId:null});

  451.           }else{

  452.             this.$set(this.queryParams, "parentId", null);

  453.             this.$set(this.queryParams, "params", {deptId:val.deptId});

  454.           }

  455.           this.getList();

  456.         },

  457.         checkBadge(){

  458.           this.finished = false;

  459.           this.loading = false;

  460.           this.totalList = []

  461.           this.doneList = [];

  462.           this.todoList = [];

  463.           this.getList();

  464.         },

  465.         getList() {

  466.           this.totalList = []

  467.           this.doneList = [];

  468.           this.todoList = [];

  469.           this.countqb = 1;

  470.           this.countyhc = 1;

  471.           this.countwhc = 1;

  472.           this.finished = false;

  473.           this.loading = false;

  474.           if(this.active==1) {

  475.             this.$set(this.queryParams, "rwfbzt", "PUBLISHED");

  476.             this.$set(this.queryParams, "rwwczt", null);

  477.             this.$set(this.queryParams, "pageNum",  this.countyhc);

  478.             this.$set(this.queryParams, "pageSize",  4);

  479.             mobileList(this.queryParams).then(response => {

  480.               this.done = response.wcs;

  481.               this.todo = response.dcs;

  482.               this.total = response.tableDataInfo.total;

  483.               this.totalList = response.tableDataInfo.rows;

  484.             });

  485.           }else if(this.active==2) {

  486.             this.$set(this.queryParams, "rwwczt", "FINISHED");

  487.             this.$set(this.queryParams, "rwfbzt", "PUBLISHED");

  488.             this.$set(this.queryParams, "pageNum",  this.countwhc);

  489.             mobileList(this.queryParams).then(response => {

  490.               this.total = response.wcs;

  491.               this.todo = response.dcs;

  492.               this.done = response.tableDataInfo.total;

  493.               this.doneList = response.tableDataInfo.rows;

  494.             });

  495.           }else{

  496.             this.$set(this.queryParams, "rwwczt", "UNFINISHED");

  497.             this.$set(this.queryParams, "rwfbzt", "PUBLISHED");

  498.             this.$set(this.queryParams, "pageNum",  this.countqb);

  499.             mobileList(this.queryParams).then(response => {

  500.               this.total = response.wcs;

  501.               this.done = response.dcs;

  502.               this.todo = response.tableDataInfo.total;

  503.               this.todoList = response.tableDataInfo.rows;

  504.             });

  505.           }

  506. 

  507.         },

  508.         gotoLink(){

  509.           this.$router.push('/homesteadSurvey/settle')

  510.         },

  511.       },

  512.     }

  513. </script>

  514. 

  515. <style  scoped>

  516.   >>> .van-cell__title{

  517.     flex:3

  518.   }

  519.   >>> .sss {

  520.     display: flex;

  521.   }

  522.   >>> .title:before

  523.   {

  524.     content:"";

  525.     width: 6px;

  526.     height: 20PX;

  527.     background: #7ac943;

  528.     border-radius: 3px;

  529.     position:absolute;

  530.     left:0;

  531.     bottom:0;

  532.   }

  533. </style>