两清三化

src/api/plotPremisesMobile/index.js

@@ -23,3 +23,20 @@ export function getDept(id) {
     method: 'get'
   })
 }
+
+// 查询部门下拉树结构
+export function treeselect() {
+  return request({
+    url: '/depositm/dept/treeselect',
+    method: 'get'
+  })
+}
+
+// 数据获取
+export function plotPremisesStatistics(query) {
+  return request({
+    url: '/home/mobile/plotPremises/statistics',
+    method: 'get',
+    params: query
+  })
+}

src/views/plotPremisesMobile/index.vue

@@ -4,16 +4,29 @@
 
     <div class="top_address" @click="showAddress=true">
       <i class="address_icon"></i>
-      <p>羊亭</p>
-      <p>/北上夼</p>
+      <p>{{deptName}}</p>
     </div>
 
+    <!--选择当前区域弹窗-->
+    <van-popup v-model="showAddress" position="bottom">
+      <van-cascader
+        v-model="villageValue"
+        title="请选择"
+        :options="addrOptions"
+        @close="showAddress = false"
+        @finish="onConfirmDept"
+        active-color="#1989fa"
+        :field-names="hcAreaInfoFieldName"
+      />
+    </van-popup>
+
+    <!--当前区域详情弹窗-->
     <van-popup v-model="show" position="bottom" :overlay="false" round>
       <div class="pop_main">
 
         <div class="pop_title">
           <i class="address_icon"></i>
-          <p>羊亭镇-北上夼村</p>
+          <p>{{deptName}}</p>
         </div>
 
         <div class="pop_content">
@@ -22,12 +35,12 @@
             <div class="pop_content_left_box">
               <div>
                 <p>农房 <span>(栋)</span></p>
-                <p class="num">352</p>
+                <p class="num">{{detail.zzs}}</p>
               </div>
               <span class="border"></span>
               <div>
                 <p>可租 <span>(栋)</span></p>
-                <p class="num" @click="showList = true,activeName='nf'">71</p>
+                <p class="num" @click="deptId == 100?'':(showList = true,activeName='nf')">{{detail.kzs}}</p>
               </div>
             </div>
           </div>
@@ -36,12 +49,12 @@
             <div class="pop_content_left_box">
               <div>
                 <p>农地 <span>(亩)</span></p>
-                <p class="num">352</p>
+                <p class="num">{{detail.landArea}}</p>
               </div>
               <span class="border"></span>
               <div>
                 <p>可租 <span>(亩)</span></p>
-                <p class="num" @click="showList = true,activeName='nd'">71</p>
+                <p class="num" @click="deptId == 100?'':(showList = true,activeName='nd')">{{detail.rentableArea}}</p>
               </div>
             </div>
           </div>
@@ -50,12 +63,13 @@
       </div>
     </van-popup>
 
+    <!--租地详情弹窗-->
     <van-popup v-model="showZD" closeable position="bottom" :closed="show=true" :overlay="false" round>
       <div class="pop_main">
 
         <div class="pop_title">
           <i class="address_icon"></i>
-          <p>羊亭镇-北上夼村-107</p>
+          <p>{{deptName}}-{{ndItem.id}}</p>
         </div>
 
         <div class="pop_content_zd">
@@ -64,15 +78,15 @@
           <div class="pop_content_zd_right">
             <van-row type="flex" justify="space-between">
               <van-col>租地位置：</van-col>
-              <van-col>北上夼村</van-col>
+              <van-col>{{deptName}}</van-col>
             </van-row>
             <van-row type="flex" justify="space-between">
               <van-col>租地编号：</van-col>
-              <van-col class="num">310</van-col>
+              <van-col class="num">{{ndItem.id}}</van-col>
             </van-row>
             <van-row type="flex" justify="space-between">
               <van-col>租地面积：</van-col>
-              <van-col class="num">12亩</van-col>
+              <van-col class="num">{{ndItem.scmjm}}亩</van-col>
             </van-row>
             <van-row type="flex" justify="space-between">
               <van-col>咨询代表：</van-col>
@@ -89,12 +103,13 @@
       </div>
     </van-popup>
 
+    <!--租房详情弹窗-->
     <van-popup v-model="showZF" closeable position="bottom" :closed="show=true" :overlay="false" round>
       <div class="pop_main">
 
         <div class="pop_title">
           <i class="address_icon"></i>
-          <p>羊亭镇-北上夼村-107</p>
+          <p>{{deptName}}-{{nfItem.id}}</p>
         </div>
 
         <div class="pop_content_zd">
@@ -103,15 +118,15 @@
           <div class="pop_content_zd_right">
             <van-row type="flex" justify="space-between">
               <van-col>租房位置：</van-col>
-              <van-col>北上夼村</van-col>
+              <van-col>{{deptName}}</van-col>
             </van-row>
             <van-row type="flex" justify="space-between">
               <van-col>租房编号：</van-col>
-              <van-col class="num">310</van-col>
+              <van-col class="num">{{nfItem.id}}</van-col>
             </van-row>
             <van-row type="flex" justify="space-between">
               <van-col>租房面积：</van-col>
-              <van-col class="num">12亩</van-col>
+              <van-col class="num">{{nfItem.zdmj}}㎡</van-col>
             </van-row>
             <van-row type="flex" justify="space-between">
               <van-col>咨询代表：</van-col>
@@ -128,23 +143,43 @@
       </div>
     </van-popup>
 
+    <!--农房农地右侧列表弹窗-->
     <van-popup v-model="showList" close-icon="../../../static/images/plotPremises/plotPremises_icon_03.png" closeable position="right" :closed="show=true" :overlay="false" round :style="{ width: '45%' , height: '60%' , background:'#ffffff' }">
       <div class="pop_main_right">
 
         <p class="pop_title" :style="{color:activeName=='nf'?'#1B65F8':'#FF7321'}">{{activeName=='nf'?'待租农房':'待租农地'}}</p>
 
-        <div class="pop_content_right">
+        <div class="pop_content_right" v-if="activeName=='nf'">
+          <van-row>
+            <van-col span="12" class="num">编号</van-col>
+            <van-col span="12" style="text-align: left;">面积（㎡）</van-col>
+          </van-row>
+          <!--     待租农房列表     -->
+          <van-row v-for="(item,index) in detail.rentableHomestead"
+                   :key="index"
+                   @click="listChange(index,'nf',item)"
+                   :class="{ active: selectChooseOrder == index }"
+                   align="center"
+          >
+            <van-col span="12" class="num">{{item.id}}</van-col>
+            <van-col span="12" style="text-align: left;" class="num">{{item.zdmj}}</van-col>
+          </van-row>
+        </div>
+
+        <div class="pop_content_right" v-else>
           <van-row>
-            <van-col span="8" offset="4">编号</van-col>
-            <van-col span="9" offset="3">面积</van-col>
+            <van-col span="12" class="num">编号</van-col>
+            <van-col span="12" style="text-align: left;">面积（亩）</van-col>
           </van-row>
-          <van-row v-for="(item,index) in 20"
+          <!--     待租农房列表     -->
+          <van-row v-for="(item,index) in detail.rentableLand"
                    :key="index"
-                   @click="listChange(index)"
+                   @click="listChange(index,'nd',item)"
                    :class="{ active: selectChooseOrder == index }"
+                   align="center"
           >
-            <van-col span="8" offset="4" class="num">101</van-col>
-            <van-col span="9" offset="3" class="num">3亩</van-col>
+            <van-col span="12" class="num">{{item.id}}</van-col>
+            <van-col span="12" style="text-align: left;" class="num">{{item.scmjm}}</van-col>
           </van-row>
         </div>
 
@@ -157,9 +192,9 @@
       </div>
     </van-popup>
 
-    <van-popup v-model="showAddress" position="bottom" round>
-      <van-picker show-toolbar title="村镇选择" :columns="columns" />
-    </van-popup>
+<!--    <van-popup v-model="showAddress" position="bottom" round>-->
+<!--      <van-picker show-toolbar title="村镇选择" :columns="columns" />-->
+<!--    </van-popup>-->
 
   </div>
 </template>
@@ -167,8 +202,7 @@
 <script>
 import $ from "jquery";
 import { getConfigKey } from "@/utils/data";
-import { treeselect } from "@/api/agriculturalTrusteeship";
-import { getDept } from "@/api/plotPremisesMobile";
+import { getDept , treeselect , plotPremisesStatistics } from "@/api/plotPremisesMobile";
 
 export default {
   data() {
@@ -232,7 +266,20 @@ export default {
       deptInfo: {
         leader: null,                                   // 联系人
         phone: null                                     // 电话
-      }
+      },
+
+      deptName:'',
+      deptId:'',
+      detail:{},
+      villageValue: "",
+      hcAreaInfoFieldName: {
+        text: "label",
+        value: "value",
+        children: "children",
+      },
+      deptOptions:[],
+      nfItem:{},
+      ndItem:{},
     };
   },
   created() {
@@ -250,19 +297,40 @@ export default {
     // 获取部门下拉树列表
     treeselect().then(response => {
       this.addrOptions = response.data;
+      this.deptId = response.data[0].id;
+      this.deptName = response.data[0].label;
       // 初始化地图
       this.initMap();
+      this.getData();
+
     });
   },
   methods: {
+    getData(){
+      plotPremisesStatistics({deptId:this.deptId}).then(response => {
+        this.detail = response.data;
+      });
+    },
+    onConfirmDept({ selectedOptions }){
+
+      this.deptId = selectedOptions[selectedOptions.length-1].id;
+      this.deptName = selectedOptions.map((option) => option.label).join('/');
+      this.getData();
+      this.showAddress = false;
+
+    },
+
     tabChange(name){
       this.activeName = name;
+      this.selectChooseOrder = -1;
     },
-    listChange(id){
+    listChange(id,type,data){
       this.selectChooseOrder = id;
       this.show = false;
       this.showZF = false;
-      this.showZD = true;
+      this.showZD = false;
+      if (type=='nf'){this.showZF = true;this.nfItem = data;}
+      if (type=='nd'){this.showZD = true;this.ndItem = data;}
     },
     //获取geoserver的地址
     getGeoServerUrl() {
@@ -812,7 +880,7 @@ export default {
                 }
               }
               &:last-child{
-                font-size: 3vh;
+                font-size: 4vw;
                 color: #333333;
               }
             }
@@ -861,6 +929,7 @@ export default {
       .van-row{
         padding: 1vh 0;
       }
+      .num{text-align: center;}
     }
 
     .pop_btn_right{