宅基地手机端盘活方式功能增加

src/api/onlineHome/homestead/circulation.js

@@ -32,7 +32,22 @@ export function zjdzd(){
     method:'get'
   })
 }
-
+// 查询权利人列表
+export function obligeeList(query) {
+  return request({
+    url: '/house/obligee/obligeeHouselist',
+    method: 'get',
+    params: query
+  })
+}
+// 条件查询使用权人列表
+export function selectTHouseBaseObligeeMapList(query) {
+  return request({
+    url: '/house/obligee/selectTHouseBaseObligeeMapList',
+    method: 'get',
+    params: query
+  })
+}
 //权利人代码
 export function getByZjddm(data){
   return request({

src/api/onlineHome/phfs/phfs.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+//查询列表
+export function getList(data){
+  return request({
+    url:'/house/phxxb/list',
+    method:'get',
+    params:data
+  })
+}

src/components/Map/MapGisObtain.vue

@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <p class="fuTitle">地块位置</p>
+    <div id="full-screen-acceptance" style="width: 100%;height:45vh;position:relative;">
+        <div :id=this.uuidMap style="width: 100%;height: 100%"></div>
+      </div>
+    <div id="info" > <button type="button" @click="showHistoryDown">保 存</button></div>
+  </div>
+</template>
+
+<script>
+  import {getQueryLand} from "@/api/homesteadSurvey/zjdzd";
+  import {selectTHouseBaseObligeeMapList} from "@/api/onlineHome/homestead/circulation";
+  import {getByLyZjddm } from "@/api/onlineHome/homestead/circulation";
+import $ from "jquery";
+
+export default {
+  components: {
+    getQueryLand,getByLyZjddm
+  },
+  data() {
+    return {
+      uuidMap: this.guidProduct(),
+      map:this.guidProduct(),
+      showHistoryTable: false,
+      closeMoule: null,
+    };
+  },
+  props: ['theGeom','shqrxm'],
+  methods: {
+    //地图加载
+    guidProduct(){
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = Math.random() * 16 | 0,
+          v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+      });
+    },
+    //地图查看
+    drawingLyPaceCountryDarw() {
+      //加载地图编辑
+      var that = this;
+      console.info(this.shqrxm);
+      selectTHouseBaseObligeeMapList({shyqrdbxm:this.shqrxm}).then((response) => {
+        if (response.code == 200) {
+
+          document.getElementById(that.uuidMap).innerHTML = '';
+          var hc_land;
+          var projection = new ol.proj.Projection({
+            //地图投影类型
+            code: "EPSG:3857",
+            units: "degrees",
+            //extent:extent
+          });
+
+          var aerial = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              url: "http://t{0-7}.tianditu.com/img_w/wmts?" +
+                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "卫星影像图",
+            resolution:Math.random() * 0.00000001
+          });
+
+          var yingxzi = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "天地图文字标注--卫星影像图",
+            resolution:Math.random() * 0.00000001
+          });
+          if (response.data.length > 0) {
+            //setTimeout(() => {
+            for (var i = 0; response.data.length > i; i++) {
+              //加载地图
+              that.map = new ol.Map({
+                controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
+                layers: [aerial, yingxzi],
+                projection: projection,
+                target: that.uuidMap,
+                view: new ol.View({
+                  //center: ol.proj.fromLonLat([115.452752, 31.789033]),
+                  zoom: 15,
+                  minZoom: 5, //地图缩小限制
+                  maxZoom: 18.3, //地图放大限制
+                }),
+                interactions: ol.interaction.defaults({
+                  pinchRotate: false // 移动端禁止地图旋转
+                }),
+                //view: new ol.View({ol.view.getResolution() + Math.random() * 0.00000001)});//随机数缩放实现刷新
+              });
+              //图层查询定位开始 ---------start
+              hc_land = new ol.layer.Vector({
+                title: "add Layer",
+                source: new ol.source.Vector({
+                  projection: projection,
+                  features: new ol.format.GeoJSON().readFeatures("{\n" +
+                    "    \"type\": \"Feature\",\n" +
+                    "    \"geometry\":" + response.data[i].zjdzd.theGeom + "}"),
+                }),
+                resolution:Math.random() * 0.00000001,
+                style: new ol.style.Style({
+                  fill: new ol.style.Fill({
+                    //矢量图层填充颜色，以及透明度
+                    color: "rgba(204, 255, 204,0.3)",
+                  }),
+                  stroke: new ol.style.Stroke({
+                    //边界样式
+                    color: "#CCFF66",
+                    width: 3,
+                  }),
+                }),
+              });
+              that.map.addLayer(hc_land);
+              var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
+              var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
+              var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
+              var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
+              //定位查询位置
+              var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
+              that.map.getView().animate({
+                // 只设置需要的属性即可
+                center: center, // 中心点
+                zoom: 16.9, // 缩放级别
+                rotation: undefined, // 缩放完成view视图旋转弧度
+                duration: 1000, // 缩放持续时间，默认不需要设置
+                resolution:Math.random() * 0.00000001,
+              });
+            }
+            that.map.on("singleclick", function (evt) {
+              console.info(1111111);
+              let feature = that.map.forEachFeatureAtPixel(
+                evt.pixel,
+                (feature) => feature
+              );
+              document.getElementById(that.uuidMap).innerHTML = '';
+
+              if (feature) {
+                that.map.removeLayer(geo_zjdzd);
+                this.closeMoule= null;
+                //图层查询定位开始 ---------start
+                geo_zjdzd = new ol.layer.Vector({
+                  title: "add Layer",
+                  source: new ol.source.Vector({
+                    projection: projection,
+                    features: new ol.format.GeoJSON().readFeatures("{\n" +
+                      "    \"type\": \"Feature\",\n" +
+                      "    \"geometry\":" + feature.values_.zjdzd.theGeom + "}"),
+                  }),
+                  style: new ol.style.Style({
+                    fill: new ol.style.Fill({
+                      //矢量图层填充颜色，以及透明度
+                      color: "rgb(204, 255, 255,0.5)",
+                    }),
+                    stroke: new ol.style.Stroke({
+                      //边界样式
+                      color: "#00FFFF",
+                      width: 8,
+                    }),
+                  }),
+                });
+                that.map.addLayer(geo_zjdzd);
+                that.closeMoule = feature.values_.zjddm;
+              }
+            });
+          }
+          var geo_zjdzd;
+          console.log("1111");
+        }
+      });
+    },
+    showHistoryDown() {
+      this.showHistoryTable = false;
+      this.$emit('closeMoule', this.closeMoule);
+      this.closeMoule = null;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style scoped>
+#that.message {
+  width: 100%;
+  height: 100%;
+}
+.fuTitle {
+  border-top: 1px solid #e9e9e9;
+  text-align: center;
+  padding: 10px 0px 0px 0px;
+  font-size: 36px;
+  color: #999;
+}
+.ant-btn-red {
+  position: relative;
+  display: inline-block;
+  background: #D0EEFF;
+  border: 1px solid #99D3F5;
+  border-radius: 4px;
+  padding: 4px 12px;
+  overflow: hidden;
+  color: #1E88C7;
+  text-decoration: none;
+  text-indent: 0;
+  line-height: 20px;
+
+}
+#land-btn-wrap{
+  position: absolute;
+  right: 3%;
+  top: 5%;
+  z-index: 2000;
+}
+</style>

src/router/index.js

@@ -942,6 +942,24 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/onlineHome/homestead/paidUtilize/paidUtilizeAdd'], resolve)
   },
+  {
+    path: '/zzjyList',
+    name: 'zzjyList',
+    meta: {
+      title: '自主经营列表',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/phfs/zzjy/zzjyList'], resolve)
+  },
+  {
+    path: '/zzjyAdd',
+    name: 'zzjyAdd',
+    meta: {
+      title: '添加自主经营',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/phfs/zzjy/zzjyAdd'], resolve)
+  },
   {
     path: '/task',
     name: 'task',

src/views/onlineHome/phfs/zzjy/zzjyAdd.vue

@@ -0,0 +1,416 @@
+<template>
+  <div class="app-container">
+    <van-nav-bar
+      left-arrow
+      fixed
+      placeholder
+      @click-left="$router.back(-1)"
+    >
+      <template #title>
+        <p style="font-weight: bold;">添加自主经营</p>
+      </template>
+    </van-nav-bar>
+    <van-form ref="_Form">
+    <div class="main_box">
+
+                  <van-field
+                     v-model="circulation.zcfmc"
+                     label="申请人姓名"
+                    placeholder="请输入申请人姓名"
+                     @input="remoteTransfereeMethod"
+                     :rules="[{ required: true }]" required
+                  />
+
+
+                     <van-cell  v-for="item in getObligeeOptions"
+                       :key="item.shyqrdbxm"
+                      @click="shyqrdmxmChange(item)"
+                    >
+                       {{item.shyqrdbxm}}
+                     </van-cell>
+
+      <van-popup v-model="showshyqrdm" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="shyqrdmDictionaries"
+          @confirm="onConfirmShyqrdm"
+          @cancel="showshyqrdm = false"
+        />
+      </van-popup>
+      <van-field
+        readonly
+        v-model="circulation.zjddm"
+        label="宅基地代码"
+        input-align="right"
+      >
+        <template #button>
+          <van-button size="small" @click="mapLook"  @closeMoule="closeMoule" type="primary">选择宅基地</van-button>
+        </template>
+      </van-field>
+      <van-popup v-model="showzjddm" position="bottom" >
+        <van-picker
+          show-toolbar
+          :columns="zjdDictionaries"
+          @confirm="onConfirmZjddm"
+          @cancel="showzjddm = false"
+        />
+      </van-popup>
+<!--      <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto"/>-->
+<!--      <van-field-->
+<!--        readonly-->
+<!--        clickable-->
+<!--        v-model="zjlx"-->
+<!--        label="申请人证件类型"-->
+<!--        placeholder="请选择"-->
+<!--        @click="showzjlx = true"-->
+<!--        input-align="right"-->
+<!--        right-icon="arrow-down"-->
+<!--        label-width="auto" :rules="[{ required: true }]" required-->
+<!--      />-->
+<!--      <van-popup v-model="showzjlx" position="bottom">-->
+<!--        <van-picker-->
+<!--          show-toolbar-->
+<!--          :columns="zjlxDictionaries"-->
+<!--          @confirm="onConfirmZjlx"-->
+<!--          @cancel="showzjlx = false"-->
+<!--        />-->
+<!--      </van-popup>-->
+<!--      <van-field v-model="circulation.sqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
+<!--      <van-field v-model="circulation.ycsyfs" label="有偿使用方式" placeholder="有偿使用方式" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
+
+
+<!--      <van-cell title="是否一户多宅">-->
+<!--        <template #right-icon>-->
+<!--&lt;!&ndash;          @change="designPaperChange"&ndash;&gt;-->
+<!--          <van-radio-group v-model="circulation.sfyhdz" direction="horizontal">-->
+<!--            <van-radio name="Y">是</van-radio>-->
+<!--            <van-radio name="N">否</van-radio  >-->
+<!--          </van-radio-group>-->
+<!--        </template>-->
+<!--      </van-cell>-->
+
+<!--      <van-field-->
+<!--        readonly-->
+<!--        clickable-->
+<!--        name="picker"-->
+<!--        v-model="circulation.ycsykssj"-->
+<!--        label="有偿使用开始时间"-->
+<!--        placeholder="选择开始时间"-->
+<!--        @click="showycsykssj = true"-->
+<!--        input-align="right"-->
+<!--        right-icon="arrow-down"-->
+<!--        label-width="auto" :rules="[{ required: true }]" required-->
+<!--      />-->
+<!--      <van-popup v-model="showycsykssj" position="bottom">-->
+<!--        <van-datetime-picker-->
+<!--          :value="new Date"-->
+<!--          type="date"-->
+<!--          title="选择年月日"-->
+<!--          @confirm="onConfirmYcsykssj"-->
+<!--          @cancel="showycsykssj = false"-->
+<!--        />-->
+<!--      </van-popup>-->
+
+<!--      <van-field-->
+<!--        readonly-->
+<!--        clickable-->
+<!--        name="picker"-->
+<!--        v-model="circulation.ycsydqsj"-->
+<!--        label="有偿使用到期时间"-->
+<!--        placeholder="选择到期时间"-->
+<!--        @click="showycsydqsj = true"-->
+<!--        input-align="right"-->
+<!--        right-icon="arrow-down"-->
+<!--        label-width="auto" :rules="[{ required: true }]" required-->
+<!--      />-->
+<!--      <van-popup v-model="showycsydqsj" position="bottom">-->
+<!--        <van-datetime-picker-->
+<!--          :value="new Date"-->
+<!--          type="date"-->
+<!--          title="选择年月日"-->
+<!--          @confirm="onConfirmYcsydqsj"-->
+<!--          @cancel="showycsydqsj = false"-->
+<!--        />-->
+<!--      </van-popup>-->
+<!--      <van-dialog v-model:show="mapShow" show-cancel-button>-->
+<!--        <MapGisObtain ref="zjdProductResh" :shqrxm="circulation.zcfmc"></MapGisObtain>-->
+<!--      </van-dialog>-->
+<!--      <van-field v-model="circulation.ycsymj" label="有偿使用面积(㎡)" placeholder="请输入有偿使用面积㎡" input-align="right" label-width="auto" type="number"/>-->
+<!--      <van-field v-model="circulation.ycsymjdj" label="有偿使用面积单价(元)" placeholder="请输入有偿使用面积单价" input-align="right" label-width="auto" type="number"/>-->
+<!--      <van-field v-model="circulation.ycsyfy" label="有偿使用费用(元)" placeholder="请输入有偿使用费用" input-align="right" label-width="auto" type="number"/>-->
+<!--      <van-field v-model="circulation.fkfs" label="付款方式" placeholder="请输入付款方式" input-align="right" label-width="auto"/>-->
+<!--      <van-field v-model="circulation.bz" label="备注" placeholder="请输入内容" input-align="right" label-width="auto"/>-->
+
+    </div>
+    </van-form>
+
+    <div style="padding: 16px 0;">
+      <van-row>
+        <van-col span="12" align="center">
+          <van-button type="info" color="#B4B0B0" native-type="submit" class="submitButton" @click="goEdit">取消</van-button>
+        </van-col>
+        <van-col span="12" align="center">
+          <van-button type="info" native-type="submit" class="submitButton" @click="goSubmit">保存</van-button>
+        </van-col>
+      </van-row>
+      <div class="clear"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { zjdzd, obligeeList } from "@/api/onlineHome/homestead/circulation";
+  import { ycsyAdd , listByDeptId } from "@/api/onlineHome/homestead/paidUtilize";
+  import MapGisObtain from "@/components/Map/MapGisObtain";
+  import {Notify} from "vant";
+  export default {
+    name: "paidUtilizeAdd",
+    components: { MapGisObtain,},
+    props: {
+      columns: {
+        type: Array,
+        default: function () {
+          return []
+        }
+      },
+      selectValue: {
+        type: [String, Number],
+        default: ''
+      },
+      option: {
+        type: Object,
+        default: function () {
+          return { label: 'label', value: 'value' }
+        }
+      },
+      isSearch: {
+        type: Boolean,
+        default: false
+      },
+      offOption: { // 关闭option配置key-value;当数据是非集合的数组的时候，开启
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        tcqllxDictionaries:[],//退出权利类型
+        tclxDictionaries:[],//退出类型
+        tcfsDictionaries:[],//退出方式
+        zjlxDictionaries:[],//申请人证件类型
+        bcfsDictionaries:[],//补偿方式
+        zjdDictionaries:[],//宅基地代码
+        shyqrdmDictionaries:[],//使用权人
+        getObligeeOptions:[],
+
+        tcqllx:'',
+        tclx:'',
+        tcfs:'',
+        zjlx:'',
+        bcfs:'',
+        zjddm:'',
+        showzcfmc:false,
+        showtcqllx: false,
+        showtclx: false,
+        showtcfs: false,
+        showzjlx: false,
+        showbcfs: false,
+        showzjddm: false,
+        showshyqrdm: false,
+        showycsykssj: false,
+        showycsydqsj: false,
+        columnsData: [],
+        circulation:{},
+        mapShow: false,
+      };
+    },
+    created() {
+      this.getDictionaries();
+    },
+    methods: {
+      getDictionaries(){
+          //退出权利类型
+          this.houseGetDicts("tcqllx").then((res) => {
+            for (var i = 0; i < res.data.length; i++) {
+              this.tcqllxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+            }
+          });
+          //退出类型
+          this.houseGetDicts("tclx").then((res) => {
+            for (var i = 0; i < res.data.length; i++) {
+              this.tclxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+            }
+          });
+          //退出方式
+          this.houseGetDicts("tcfs").then((res) => {
+            for (var i = 0; i < res.data.length; i++) {
+              this.tcfsDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+            }
+          });
+          //申请人证件类型
+          this.houseGetDicts("zjlx").then((res) => {
+            for (var i = 0; i < res.data.length; i++) {
+              this.zjlxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+            }
+          });
+          //补偿方式
+          this.houseGetDicts("bcfs").then((res) => {
+            for (var i = 0; i < res.data.length; i++) {
+              this.bcfsDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+            }
+          });
+          //宅基地代码
+          zjdzd().then(zjdRes => {
+            for (let i = 0; i < zjdRes.rows.length; i++) {
+              this.zjdDictionaries.push(zjdRes.rows[i].zjddm);
+            }
+          });
+          //使用权人代码
+          listByDeptId().then(zjdRes => {
+            for (let i = 0; i < zjdRes.rows.length; i++) {
+              this.shyqrdmDictionaries.push(zjdRes.rows[i].shyqrdm);
+            }
+          });
+      },
+      onConfirmZjddm(data){
+        console.log(data)
+        this.circulation.zjddm = data;
+        this.showzjddm = false;
+      },
+      onConfirmZjlx(data){
+        this.zjlx = data.text;
+        this.circulation.sqrzjlx = data.value;
+        this.showzjlx = false;
+      },
+      onConfirmTcqllx(data){
+        this.tcqllx = data.text;
+        this.circulation.tcqllx = data.value;
+        this.showtcqllx = false;
+      },
+      onConfirmTclx(data){
+        this.tclx = data.text;
+        this.circulation.tclx = data.value;
+        this.showtclx = false;
+      },
+      onConfirmTcfs(data){
+        this.tcfs = data.text;
+        this.circulation.tcfs = data.value;
+        this.showtcfs = false;
+      },
+      onConfirmBcfs(data){
+        this.bcfs = data.text;
+        this.circulation.bcfs = data.value;
+        this.showbcfs = false;
+      },
+      onConfirmShyqrdm(data){
+        this.circulation.shyqrdm = data;
+        this.showshyqrdm = false;
+      },
+      onConfirmYcsykssj(data){
+        this.circulation.ycsykssj = this.getNowFormatDate(data).substr(0,10);
+        this.showycsykssj = false;
+      },
+      onConfirmYcsydqsj(data){
+        this.circulation.ycsydqsj = this.getNowFormatDate(data).substr(0,10);
+        this.showycsydqsj = false;
+      },
+      goEdit(){
+        window.location.replace("paidUtilizeList")
+      },
+      mapLook(){
+        this.mapShow =true;
+        setTimeout(() => {
+          this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
+        },1000)
+      },
+      /** 查找地图中宅基地 */
+      closeMoule: function (data) {
+          console.info(data);
+      },
+      /** 模糊查询人员信息 */
+      remoteTransfereeMethod(query) {
+        let _this = this;
+        if (query !== "") {
+          let queryMember = {
+            hzxm : query,
+          };
+          this.searchLoading = true;
+          obligeeList({shyqrdbxm:query,status:2}).then((response) => {
+            this.searchLoading = false;
+            if (response.code == 200) {
+              this.getObligeeOptions = response.rows.map((item) => {
+                // _this.$set(_this.form, "zcfxb", item.xb);
+                // _this.$set(_this.form, "zcfdh", item.dh);
+                // _this.$set(_this.form, "zcfzjhm", item.shyqrdbzjhm);
+                // _this.$set(_this.form, "zcfdm", item.nhdm);
+                return {
+                  zcfxb:item.xb,
+                  zcfdh:item.dh,
+                  zcfzjhm:item.shyqrdbzjhm,
+                  zcfdm:item.nhdm,
+                  shyqrdbxm: item.shyqrdbxm,
+                  shyqrdm: item.shyqrdm
+                };
+              });
+            }
+          });
+        } else {
+          this.getObligeeOptions = [];
+        }
+      },
+      clearFrom() {
+        // this.initData();
+        this.getObligeeOptions = [];
+      },
+      shyqrdmxmChange(val){
+        this.$set(this.circulation, "zcfxb", val.zcfxb);
+        this.$set(this.circulation, "zcfdh", val.zcfdh);
+        this.$set(this.circulation, "zcfzjhm", val.zcfzjhm);
+        this.$set(this.circulation, "zcfdm", val.zcfdm);
+        this.$set(this.circulation, "zcfmc", val.shyqrdbxm);
+        this.getObligeeOptions=[];
+      },
+      goSubmit(){
+        this.$refs._Form.validate().then(() => {
+        ycsyAdd(this.circulation).then(response => {
+          if(response.code = 200){
+            this.$toast.success('新增成功');
+            setTimeout(function(){
+              window.location.replace("paidUtilizeList")
+            },1000)
+          }
+        });
+        }).catch((e) => {
+          Notify({ type: 'danger', message: '请填写完整的表单项' });
+        });
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    padding: 2% 0;
+  }
+  .main_title{
+    font-size: 0.4rem;
+    color: #1D6FE9;
+    margin: 0.2rem 6%;
+    position: relative;
+  }
+  .main_box{
+    width: 96%;
+    margin: 0 auto;
+    border-radius: 6px;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+    overflow: hidden;
+    background-color: #FFF;
+  }
+  .submitButton{
+    width: 80%;
+    margin: 0 auto;
+    background-color: #1D6FE9;
+
+  }
+
+</style>

src/views/onlineHome/phfs/zzjy/zzjyList.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="app-container">
+    <van-nav-bar
+      left-arrow
+      fixed
+      placeholder
+      @click-left="$router.back(-1)"
+      @click-right="goAdd"
+    >
+      <template #title>
+        <p style="font-weight: bold;">自主经营</p>
+      </template>
+              <template #right>
+                <van-icon name="add" size="18" />
+              </template>
+    </van-nav-bar>
+    <van-list
+      v-model="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="getList"
+    >
+      <van-swipe-cell v-for="(item,index) in applicationList" :key="index">
+        <van-cell :title="item.zjddm" center :to="{name:'paidUtilizeDteail', query: {id:item.id}}" >
+          <template #icon>
+            <div class="icon" style="background:#FFA63E;width: 45px;">
+              <van-icon name="../../../../static/images/onlineHome/icon_zzjy.png" size="30" color="#539FFD" style="margin-left: 3px;margin-top: 3px;" />
+            </div>
+          </template>
+          <template #label>
+            <p>{{item.zcfmc}}{{item.zcfdh}}</p>
+          </template>
+        </van-cell>
+        <!--          <template #right>-->
+        <!--            <van-row>-->
+        <!--              <van-col>-->
+        <!--                <van-button color="#7DDA4F" v-if="item.auditStatus=='草稿'" square text="提交" @click="goSubmit(item.id,index)" type="primary" class="delete-button" />-->
+        <!--              </van-col>-->
+        <!--              <van-col>-->
+        <!--                <van-button square text="修改" v-if="item.auditStatus=='草稿'" :to="{name:'paidUtilizeModify', query: {id:item.id}}" type="info" class="delete-button" />-->
+        <!--              </van-col>-->
+        <!--              <van-col>-->
+        <!--                <van-button square text="删除" v-if="item.auditStatus=='草稿'" @click="deleteList(item.id,index)" type="danger" class="delete-button" />-->
+        <!--              </van-col>-->
+        <!--            </van-row>-->
+        <!--          </template>-->
+      </van-swipe-cell>
+    </van-list>
+  </div>
+</template>
+
+<script>
+  import { getList } from "@/api/onlineHome/phfs/phfs";
+  import {getGeoServerConfigKey} from "@/api/system/config";
+  export default {
+    name: "paidUtilizeList",
+    data() {
+      return {
+        applicationList:[],
+        houseApplyStatus:[],
+        sexStatus:[],
+        tclxStatus:[],
+        tcfsStatus:[],
+        auditStatus:[],
+        loading: false,
+        finished: false,
+        queryParams:{
+          pageNum:1,
+          pageSize:10,
+          orderByColumn:'id',
+          isAsc:'desc'
+        },
+        //地图服务地址
+        mapGeoServerUrl:"",
+      };
+    },
+    created() {
+      this.houseGetDicts("sex").then((res) => {
+        this.sexStatus = res.data;
+      });
+
+    },
+    methods: {
+      goAdd(){
+        window.location = 'zzjyAdd';
+      },
+      getList(){
+        setTimeout(() => {
+          getList(this.queryParams).then(response => {
+            console.log(response)
+            for (var i = 0; i < response.rows.length; i++) {
+              response.rows[i].zcfxb = this.selectDictLabel(this.sexStatus, response.rows[i].zcfxb)
+              this.applicationList.push(response.rows[i]);
+              console.log(this.applicationList);
+            }
+            if(this.applicationList.length >= response.total){
+              this.finished = true;
+              return;
+            }else{
+              this.loading = false;
+              this.queryParams.pageNum += 1 ;
+            }
+          });
+        }, 1000);
+      },
+      deleteList(id,index){
+        this.$dialog.confirm({
+          message: '您确认删除申请草稿？',
+        })
+          .then(() => {
+            // on confirm
+            this.applicationList.splice(index,1)
+            removeList(id).then(res => {
+              if(res.code = 200){
+                this.$toast.success('删除成功');
+              }
+            });
+          })
+          .catch(() => {
+            // on cancel
+          });
+      },
+      goSubmit(id,index){
+        this.$dialog.confirm({
+          message: '您确认提交草稿？',
+        })
+          .then(() => {
+            // on confirm
+            submitApply(id).then(res => {
+              if(res.code = 200){
+                this.$toast.success('提交成功！');
+                setTimeout(function(){
+                  history.go(0)
+                },2000)
+              }
+            });
+          })
+          .catch(() => {
+            // on cancel
+          });
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    padding: 0.2rem 3%;
+  }
+  /deep/.van-cell__title{
+    flex: 0.7;
+  }
+  /deep/.van-cell__title span{
+    font-family: Arial;
+    font-size: 0.4rem;
+    font-weight: normal;
+  }
+  /deep/.van-cell__value{
+    flex: 0.3;
+    color: #1D6FE9;
+    font-weight: bold;
+  }
+  /deep/.van-swipe-cell{
+    margin-bottom: 0.2rem;
+    border-radius: 0.2rem;
+    overflow: hidden;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+  }
+  /deep/van-ellipsis{
+    font-weight: bold;
+  }
+  .delete-button {
+    height: 100%;
+  }
+  .van-row{
+    height: 100%;
+  }
+  .van-col{
+    height: 100%;
+  }
+</style>

src/views/onlineHome/workbench.vue

@@ -523,6 +523,63 @@
           </van-grid-item>-->
         </van-grid>
       </van-row>
+      <van-row  class="indexCard">
+        <van-cell style="border-radius: 6px;">
+          <template #title>
+            <p style="font-weight: bold;font-size: 18px;display: inline-block">盘活方式</p>
+          </template>
+        </van-cell>
+        <van-grid :border="false">
+          <van-grid-item text="自主经营" @click="applicationList('zzjyList')">
+            <div slot="default">
+              <div class="icon" style="background:#FFA63E;">
+                <img src="../../../static/images/onlineHome/icon_zzjy.png" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">自主经营</p>
+          </van-grid-item>
+          <van-grid-item text="出租经营" @click="applicationList('utilization')">
+            <div slot="default">
+              <div class="icon" style="background:#7dda4f;">
+                <img src="../../../static/images/onlineHome/icon_czjy.png" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">出租经营</p>
+          </van-grid-item>
+          <van-grid-item text="入股经营" @click="applicationList('homesteadUtilize')">
+            <div slot="default">
+              <div class="icon" style="background:#7790FE;">
+                <img src="../../../static/images/onlineHome/icon_rgjy.png" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">入股经营</p>
+          </van-grid-item>
+          <van-grid-item text="合作经营" @click="applicationList('homesteadUtilize')">
+            <div slot="default">
+              <div class="icon" style="background:#3AC2DB;">
+                <img src="../../../static/images/onlineHome/icon_hzjy.png" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">合作经营</p>
+          </van-grid-item>
+          <van-grid-item text="整治利用" @click="applicationList('homesteadUtilize')">
+            <div slot="default">
+              <div class="icon" style="background:#FF6446;">
+                <img src="../../../static/images/onlineHome/icon_zzly.png" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">整治利用</p>
+          </van-grid-item>
+          <!--          <van-grid-item text="公示信息" :to="{name:'informationList'}" >
+                      <div slot="default">
+                        <div class="icon" style="background:#c568f5">
+                          <img src="../../../static/images/onlineHome/icon_Z8.png" alt />
+                        </div>
+                      </div>
+                      <p style="margin-top: 5px;color: #666666;">公示信息</p>
+                    </van-grid-item>-->
+        </van-grid>
+      </van-row>
 
       <van-row  class="indexCard">
         <van-cell style="border-radius: 6px;">
@@ -651,6 +708,8 @@
               this.$router.push({ path: "/supervisionList" });
             } else if (data == 'paidUtilizeList') {
               this.$router.push({ path: "/paidUtilizeList" });
+            }else if (data == 'zzjyList') {
+              this.$router.push({ path: "/zzjyList" });
             }
           } else {
             this.$dialog.alert({