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.
1579 Commits
7 Branches
139 MiB
 
 
Tree: 9e8e21f532
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '9e8e21f532'
${ noResults }
nsgk_mobile/src/views/homesteadSurvey/index.vue

591 lines
20 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 style="margin-top: 50px;">

  73.       <van-sticky style="margin-top: 20px;">

  74.         <van-search v-model="rwmcValue" placeholder="请输入任务名称"  @search="onSearch" ></van-search>

  75.       </van-sticky>

  76.     </div>

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

  78.       <van-list

  79.         v-model:loading="loading"

  80.         :finished="finished"

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

  82.         :immediate-check="false"

  83.         @load="onRefreshtask"

  84.       >

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

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

  87.           <template #title>

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

  89.           </template>

  90.           <template #default>

  91.             <van-circle

  92.               v-model="item.zjdslz"

  93.               :rate="chooseNum(item)"

  94.               :stroke-width="100"

  95.               :speed="100"

  96.               size="70%"

  97.               layer-color="#ebedf0"

  98.               :text="item.zjdwcsl!=0?(item.zjdwcsl == item.zjdsl?100+'%':( Math.round(((item.zjdwcsl/item.zjdsl)*100)))+'%'):0+'%'"

  99.             />

  100.           </template>

  101.           <template #label>

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

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

  104.           </template>

  105.         </van-cell>

  106.       </van-list>

  107. 

  108.     </div>

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

  110.       <van-list

  111.         v-model:loading="loading"

  112.         :finished="finished"

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

  114.         :immediate-check="false"

  115.         @load="onRefreshtask"

  116.       >

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

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

  119.           <template #title>

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

  121.           </template>

  122.           <template #default>

  123. 

  124.             <van-circle

  125.               v-model="item.zjdslz"

  126.               :rate="chooseNum(item)"

  127.               :stroke-width="100"

  128.               :speed="100"

  129.               size="70%"

  130.               layer-color="#ebedf0"

  131.               :text="item.zjdwcsl!=0?(item.zjdwcsl == item.zjdsl?100+'%':( Math.round(((item.zjdwcsl/item.zjdsl)*100)))+'%'):0+'%'"

  132.             />

  133.           </template>

  134.           <template #label>

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

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

  137.           </template>

  138.         </van-cell>

  139.       </van-list>

  140.     </div>

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

  142.       <van-list

  143.         v-model:loading="loading"

  144.         :finished="finished"

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

  146.         :immediate-check="false"

  147.         @load="onRefreshtask"

  148.       >

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

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

  151.           <template #title>

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

  153.           </template>

  154.           <template #default>

  155.             <van-circle

  156.               v-model="item.zjdslz"

  157.               :rate="chooseNum(item)"

  158.               :stroke-width="100"

  159.               :speed="100"

  160.               size="70%"

  161.               layer-color="#ebedf0"

  162.               :text="item.zjdwcsl!=0?(item.zjdwcsl == item.zjdsl?100+'%':( Math.round(((item.zjdwcsl/item.zjdsl)*100)))+'%'):0+'%'"

  163.             />

  164.           </template>

  165.           <template #label>

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

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

  168.           </template>

  169.         </van-cell>

  170.       </van-list>

  171.     </div>

  172. 

  173.   </div>

  174. </template>

  175. 

  176. <script>

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

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

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

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

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

  182.   import {Dialog} from "vant";

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

  184.   import axios from "axios";

  185.   export default {

  186.     name: "homesteadIndex",

  187.     components: {

  188.       CircleProccess

  189.     },

  190.     data() {

  191.       return {

  192.         currentRate1:0,

  193.         currentRate2:0,

  194.         currentRate3:0,

  195.         active: 1,

  196.         show: false,

  197.         loading: false,

  198.         finished: false,

  199.         checked:true,

  200.         rwmcValue:"",

  201.         zjdsl:100,

  202.         height:200,

  203.         phone:null,

  204.         activeKey:0,

  205.         currentRate: 0,

  206.         deptName:"全部乡镇",

  207.         showDropList:false,

  208.         total:0,

  209.         totalList:[],

  210.         xzList:[],

  211.         done:0,

  212.         doneList:[],

  213.         todo:0,

  214.         todoList:[],

  215.         gradientColor:{

  216. 

  217.         },

  218.         // 查询参数

  219.         queryParams: {

  220.           rwwczt: null,

  221.           rwfbzt:"PUBLISHED",

  222.           rwzxr:null

  223.         },

  224.         nickName:"",

  225.         text:0,

  226.         isLoadingtask:false,

  227.         countqb:1,

  228.         countyhc:1,

  229.         countwhc:1,

  230. 

  231.         //当前用户级别

  232.         businessLevel:1,

  233.         // 字典列表json

  234.         dictTypeList:null,

  235.       };

  236.     },

  237.     created(){

  238.       if(this.checked){

  239.         setTimeout(() => {

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

  241.           console.info(userId);

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

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

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

  245.           this.getList();

  246.         },1000)

  247.       }else{

  248. 

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

  250.         this.getList();

  251.       }

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

  253.         this.xzList = response.data

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

  255.         this.xzList.unshift(qbxz);

  256.       })

  257. 

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

  259.         this.dictTypeList = res.data

  260.       })

  261. 

  262.     },

  263.     mounted(){

  264. 

  265.       // 监听屏幕方向

  266.       let self = this;

  267.       window.addEventListener(

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

  269.         function() {

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

  271.             // 横屏

  272.           }

  273.         },

  274.         false

  275.       );

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

  277.         this.getBaseUrl()

  278.       }

  279.     },

  280.     methods: {

  281.       onSearch(){

  282.         // this.finished = false;

  283.         // this.loading = false;

  284.         // this.totalList = []

  285.         // this.doneList = [];

  286.         // this.todoList = [];

  287.         this.$set(this.queryParams, "rwmc", this.rwmcValue);

  288.         this.checkBadge();

  289.       },

  290.       getBaseUrl(){

  291.         let params={

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

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

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

  295.         })

  296.       },

  297.       qiehuan(deptId){

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

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

  300.         });

  301.       },

  302.       chooseNum(item){

  303.         let a = ((item.zjdwcsl/item.zjdsl)*100);

  304.         if(a === "NaN"){

  305.           return a = 0

  306.         }else{

  307.           return a = Math.round(a);

  308.         }

  309.       },

  310.       chooseColor(item){

  311.         let a = ((item.zjdwcsl/item.zjdsl)*100).toFixed()

  312.         if(a === "NaN" || a < 50){

  313.           return  '#FA5353'

  314.         }else if(a < 100){

  315.           return '#22B7F2'

  316.         }else{

  317.           return '#85d824'

  318.         }

  319.         return  '#FA5353'

  320.       },

  321.       chooseColor2(item){

  322.         let a = ((item.zjdwcsl/item.zjdsl)*100).toFixed()

  323.         if(a === "NaN" || a < 50){

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

  325.         }else if(a < 100){

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

  327.         }else{

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

  329.         }

  330.         return  '#FA5353'

  331.       },

  332.       onRefreshtask(){

  333.         this.isLoadingtask = false;

  334.         let _this = this

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

  336.           let params = {

  337.             "rwfbzt":"PUBLISHED",

  338.             "params":this.queryParams.params,

  339.             "rwmc":this.rwmcValue,

  340.             "parentId":this.queryParams.parentId,

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

  342.             "pageSize":4,

  343.           }

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

  345.             params.rwzxr = this.queryParams.rwzxr;

  346.           }

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

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

  349.               response.rows.map(function(item) {

  350.                 if(item.zjdwcsl === 0){

  351.                   item.zjdslz = 0;

  352.                 }else{

  353.                   item.zjdslz = 100;

  354.                 }

  355.                 _this.totalList.push(item)

  356.               })

  357.               this.countyhc++

  358.               this.loading = false;

  359.             }else{

  360.               this.finished = true;

  361.             }

  362.           });

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

  364.           let params = {

  365.             "rwwczt": "PUBLISHED",

  366.             "rwfbzt":"PUBLISHED",

  367.             "rwmc":this.rwmcValue,

  368.             "params":this.queryParams.params,

  369.             "parentId":this.queryParams.parentId,

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

  371.             "pageSize":4,

  372.           }

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

  374.             params.rwzxr = this.queryParams.rwzxr;

  375.           }

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

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

  378.               response.rows.map(function(item){

  379.                 if(item.zjdwcsl === 0){

  380.                   item.zjdslz = 0;

  381.                 }else{

  382.                   item.zjdslz = 100;

  383.                 }

  384.                 _this.doneList.push(item)

  385. 

  386.               })

  387.               this.countwhc++

  388.               this.loading = false;

  389.             }else{

  390.               this.finished = true;

  391.             }

  392.           });

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

  394.           let params = {

  395.             "rwwczt": "UNFINISHED",

  396.             "rwfbzt":"PUBLISHED",

  397.             "rwmc":this.rwmcValue,

  398.             "params":this.queryParams.params,

  399.             "parentId":this.queryParams.parentId,

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

  401.             "pageSize":4,

  402.           }

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

  404.             params.rwzxr = this.queryParams.rwzxr;

  405.           }

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

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

  408.               response.rows.map(function(item){

  409.                 if(item.zjdwcsl === 0){

  410.                   item.zjdslz = 0;

  411.                 }else{

  412.                   item.zjdslz = 100;

  413.                 }

  414.                 _this.todoList.push(item);

  415.               })

  416.               this.countqb++

  417.               this.loading = false;

  418.             }else{

  419.               this.finished = true

  420.             }

  421.           });

  422.         }

  423.       },

  424.       checkChange(e){

  425.         if(e){

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

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

  428.           this.getList();

  429.         }else{

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

  431.           this.getList();

  432.         }

  433.       },

  434.       setCookies(item){

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

  436.              Dialog.confirm({

  437.                title: '提示',

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

  439.              })

  440.                .then(() => {

  441.                  // on confirm

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

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

  444.                })

  445.                .catch(() => {

  446.                  // on cancel

  447.                });

  448.            }else{

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

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

  451.            }*/

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

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

  454.         let status = false;

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

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

  457.           ids.forEach(function(id){

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

  459.               status = true;

  460.             }

  461.           });

  462.         }

  463.         if(status){

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

  465.           this.qiehuan(item.deptId);

  466.         }else{

  467.           this.$dialog.alert({

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

  469.           });

  470.         }

  471. 

  472.       },

  473.       queryAllxz(){

  474.         if (this.showDropList) {

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

  476.         } else {

  477.           this.showDropList = true;

  478.         }

  479.       },

  480.       xzChange(val){

  481.         this.deptName = val.deptName;

  482.         this.showDropList = false;

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

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

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

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

  487.         }else{

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

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

  490.         }

  491.         this.getList();

  492.       },

  493.       checkBadge(){

  494.         // this.finished = false;

  495.         // this.loading = false;

  496.         // this.totalList = []

  497.         // this.doneList = [];

  498.         // this.todoList = [];

  499.         this.getList();

  500.       },

  501.       getList() {

  502.         this.totalList = []

  503.         this.doneList = [];

  504.         this.todoList = [];

  505.         this.countqb = 1;

  506.         this.countyhc = 1;

  507.         this.countwhc = 1;

  508.         this.finished = false;

  509.         this.loading = false;

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

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

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

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

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

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

  516.             this.done = response.wcs;

  517.             this.todo = response.dcs;

  518.             this.total = response.tableDataInfo.total;

  519.             this.totalList = response.tableDataInfo.rows.map(function(item){

  520.               if(item.zjdwcsl === 0){

  521.                 item.zjdslz = 0;

  522.               }else{

  523.                 item.zjdslz = 100;

  524.               }

  525.               return item;

  526.             });

  527.           });

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

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

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

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

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

  533.             this.total = response.wcs;

  534.             this.todo = response.dcs;

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

  536.             this.doneList = response.tableDataInfo.rows.map(function(item){

  537.               if(item.zjdwcsl === 0){

  538.                 item.zjdslz = 0;

  539.               }else{

  540.                 item.zjdslz = 100;

  541.               }

  542.               return item;

  543.             })

  544.           });

  545.         }else{

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

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

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

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

  550.             this.total = response.wcs;

  551.             this.done = response.dcs;

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

  553.             this.todoList = response.tableDataInfo.rows.map(function(item){

  554.               if(item.zjdwcsl === 0){

  555.                 item.zjdslz = 0;

  556.               }else{

  557.                 item.zjdslz = 100;

  558.               }

  559.               return item;

  560.             })

  561.           });

  562.         }

  563. 

  564.       },

  565.       gotoLink(){

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

  567.       },

  568.     },

  569.   }

  570. </script>

  571. 

  572. <style  scoped>

  573.   >>> .van-cell__title{

  574.     flex:3

  575.   }

  576.   >>> .sss {

  577.     display: flex;

  578.   }

  579.   >>> .title:before

  580.   {

  581.     content:"";

  582.     width: 6px;

  583.     height: 20PX;

  584.     background: #7ac943;

  585.     border-radius: 3px;

  586.     position:absolute;

  587.     left:0;

  588.     bottom:0;

  589.   }

  590. </style>