nsgk_mobile/src/views/homesteadSurvey/list.vue

<template>
  <div class="app-container">
    <div class="bannerBg" style="">
      <van-nav-bar
        style="background:transparent;border-bottom-width:0;"
        @click-left="onClickLeft"
      >
        <template #left>
          <van-icon name="arrow-left" size="18" color="#fff" />
        </template>
        <template #title>
          <p style="color:#fff">{{item.deptName}}</p>
        </template>
      </van-nav-bar>
      <div style="display:flex;width:94%;margin:0 auto;justify-content:space-between;padding: 10px 0">
        <div :class="{activeBtn : activeBtn==1,disactiveBtn :activeBtn!=1 }" @click="activeBtn=1"><van-icon size="15" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn1'+(activeBtn!=1?'1':'')+'.png')" />
          入户核查
        </div>
        <div :class="{activeBtn : activeBtn==2,disactiveBtn :activeBtn!=2 }" @click="activeBtn=2,getShyqr()"><van-icon size="15" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn2'+(activeBtn!=2?'2':'')+'.png')" />
          农户信息
        </div>
        <div :class="{activeBtn : activeBtn==3,disactiveBtn :activeBtn!=3 }" @click="activeBtn=3,getSyqr()"> <van-icon size="15" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn3'+(activeBtn!=3?'3':'')+'.png')" />
          所有权人
        </div>
        <div :class="{activeBtn : activeBtn==4,disactiveBtn :activeBtn!=4 }"  @click="activeBtn=4,mapShow()">
          <van-icon size="15" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn4'+(activeBtn!=4?'4':'')+'.png')" />
          切换地图
        </div>
      </div>
    </div>
    <div v-if="activeBtn==1">
      <van-search v-model="zjdvalue" placeholder="请输入搜索关键词" show-action @search="onSearchzjd">
        <template #action>
          <van-icon name="add" color="rgba(122,201,67,1)" size="55" @click="onClickzjd" style="vertical-align:middle;"/>
        </template>
      </van-search>
      <van-tabs v-model="active" sticky title-active-color="#7AC943" color="#7AC943" swipeable @click="getZjdList">
        <van-tab title="全部" >
          <van-cell  v-for="(item,index) in list" :key="index" size="small" @click.native="setCookies(item)" :to="{name:'homesteadAdd'}"  style="border-radius: 16px;
          box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px">
            <template #title>
              <p style="color:#22B7F2">{{item.syqr}}</p>
            </template>
            <template #default>
              <van-button v-if="item.houseDataConfirmStatus=='CONFIRMED'" plain round color="#7AC943" size="mini" style="vertical-align:middle;margin-top:15px;">查看详情</van-button>
              <van-button v-if="item.houseDataConfirmStatus!='CONFIRMED'"plain round color="#FA5353" size="mini" style="vertical-align:middle;margin-top:15px;">开始调查</van-button>
            </template>
            <template #label>
              <p>宅基地代码  {{item.zjddm}} </p>
              <p>宗地面积 {{item.zdmj}}㎡ </p>
            </template>
            <template #icon>
              <van-icon name="clock" color="#22b7f2" style="margin-top:10px;margin-right:10px;"/>
            </template>
          </van-cell>
        </van-tab>
        <van-tab title="已核查" >
          <van-cell  v-for="(item,index) in list1" :key="index" size="small" @click.native="setCookies(item)" :to="{name:'homesteadAdd'}"  style="border-radius: 16px;
          box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px">
            <template #title>
              <p style="color:#22B7F2">{{item.syqr}}</p>
            </template>
            <template #default>
              <van-button v-if="item.houseDataConfirmStatus=='CONFIRMED'" plain round color="#7AC943" size="mini" style="vertical-align:middle;margin-top:15px;">查看详情</van-button>
              <van-button v-if="item.houseDataConfirmStatus!='CONFIRMED'"plain round color="#FA5353" size="mini" style="vertical-align:middle;margin-top:15px;">开始调查</van-button>
            </template>
            <template #label>
              <p>宅基地代码  {{item.zjddm}} </p>
              <p>宗地面积 {{item.zdmj}}㎡ </p>
            </template>
            <template #icon>
              <van-icon name="clock" color="#22b7f2" style="margin-top:10px;margin-right:10px;"/>
            </template>
          </van-cell>
        </van-tab>
        <van-tab title="未核查">
          <van-cell  v-for="(item,index) in list2" :key="index" size="small" @click.native="setCookies(item)" :to="{name:'homesteadAdd'}"  style="border-radius: 16px;
          box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px">
            <template #title>
              <p style="color:#22B7F2">{{item.syqr}}</p>
            </template>
            <template #default>
              <van-button v-if="item.houseDataConfirmStatus=='CONFIRMED'" plain round color="#7AC943" size="mini" style="vertical-align:middle;margin-top:15px;">查看详情</van-button>
              <van-button v-if="item.houseDataConfirmStatus!='CONFIRMED'"plain round color="#FA5353" size="mini" style="vertical-align:middle;margin-top:15px;">开始调查</van-button>
            </template>
            <template #label>
              <p>宅基地代码  {{item.zjddm}} </p>
              <p>宗地面积 {{item.zdmj}}㎡ </p>
            </template>
            <template #icon>
              <van-icon name="clock" color="#22b7f2" style="margin-top:10px;margin-right:10px;"/>
            </template>
          </van-cell>
        </van-tab>
      </van-tabs>
    </div>
    <div v-if="activeBtn==2" >
      <van-search v-model="syqrvalue" placeholder="请输入农户姓名或证件号" show-action @search="onSearchnh">
        <template #action>
          <van-icon name="add" color="rgba(122,201,67,1)" size="55" @click="onClicksyqr" style="vertical-align:middle;"/>
        </template>
      </van-search>
      <van-cell  v-for="(item,index) in syqrlist" :key="index" size="small"  style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px">
        <template #title>
          <p style="color:#22B7F2">{{item.shyqrdbxm}}</p>
        </template>
        <template #default>
          <van-button plain round color="#7AC943" size="mini" style="vertical-align:middle;margin-top:15px;" @click="showsyqr=true,form1=item">查看详情</van-button>
        </template>
        <template #label>
          <p>证件号码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{item.shyqrdbzjhm}} </p>
          <p>农户代码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{item.nhdm}}&nbsp&nbsp&nbsp&nbsp性别{{item.xb}}</p>
        </template>
        <template #icon>
          <van-icon name="clock" color="#22b7f2" style="margin-top:10px;margin-right:10px;"/>
        </template>
      </van-cell>
    </div>
    <div v-if="activeBtn==3">
      <van-form @submit="onSubmitsyqr">
        <div style="border-radius: 16px;
          box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;padding:5px;background:#fff;">
          <van-field
            v-model="qlrform.qydm"
            name="区域代码"
            label="区域代码"
            required
            placeholder="区域代码"
            input-align="right"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="qlrform.suyqrdm"
            name="所有权人代码"
            label="所有权人代码"
            required
            placeholder="所有权人代码"
            input-align="right"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="qlrform.suyqrmc"
            name="所有权人名称"
            label="所有权人名称"
            required
            placeholder="所有权人名称"
            input-align="right"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="qlrform.suyqxzName"
            name="所有权性质"
            label="所有权性质"
            required
            placeholder="所有权性质"
            input-align="right"
            :rules="[{ required: true, message: '' }]"
            @click="showsuyqxz = true"
          />
          <van-field
            v-model="qlrform.suyqxz"
            style="display:none"
          />
          <van-popup v-model="showsuyqxz" position="bottom">
            <van-picker
              show-toolbar
              :columns="suyqxzOptions"
              value-key="dictLabel"
              @confirm="onConfirmsuyqxz"
              @cancel="showsuyqxz = false"
            />
          </van-popup>
          <van-field
            v-model="qlrform.dbrxm"
            name="代表人姓名"
            label="代表人姓名"
            required
            placeholder="代表人姓名"
            input-align="right"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="qlrform.dbrzjlx"
            style="display:none"
          />
          <van-field
            v-model="qlrform.dbrzjlxName"
            name="代表人证件类型"
            label="代表人证件类型"
            required
            placeholder="代表人证件类型"
            input-align="right"
            :rules="[{ required: true, message: '' }]"
            @click="showdbrzjlx = true"
          />
          <van-popup v-model="showdbrzjlx" position="bottom">
            <van-picker
              show-toolbar
              :columns="zjlxOptions"
              value-key="dictLabel"
              @confirm="onConfirmdbrzjlx"
              @cancel="showdbrzjlx = false"
            />
          </van-popup>
          <van-field
            v-model="qlrform.dbrzjhm"
            name="代表人证件号码"
            label="代表人证件号码"
            required
            placeholder="代表人证件号码"
            input-align="right"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="qlrform.dbrlxdh"
            name="代表人联系电话"
            label="代表人联系电话"
            placeholder="代表人联系电话"
            input-align="right"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="qlrform.dbrtxdz"
            name="代表人通讯地址"
            label="代表人通讯地址"
            required
            placeholder="代表人通讯地址"
            input-align="right"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="qlrform.dbryzbm"
            name="代表人邮政编码"
            label="代表人邮政编码"
            required
            placeholder="代表人邮政编码"
            input-align="right"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field name="radio" label="是否成立农村集体经济组织" required input-align="right">
            <template #input>
              <van-radio-group v-model="qlrform.sfclncjtjjzz" direction="horizontal">
                <van-radio name="1">是</van-radio>
                <van-radio name="2">否 </van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="qlrform.dlrxm"
            name="代理人姓名"
            label="代理人姓名"
            placeholder="代理人姓名"
            input-align="right"
          />
          <van-field
            v-model="qlrform.dlrzjlx"
            style="display:none"
          />
          <van-field
            v-model="qlrform.dlrzjlxName"
            name="代理人证件类型"
            label="代理人证件类型"
            placeholder="代理人证件类型"
            input-align="right"
            @click="showdlrzjlx = true"
          />
          <van-popup v-model="showdlrzjlx" position="bottom">
            <van-picker
              show-toolbar
              :columns="zjlxOptions"
              value-key="dictLabel"
              @confirm="onConfirmdlrzjlx"
              @cancel="showdlrzjlx = false"
            />
          </van-popup>
          <van-field
            v-model="qlrform.dlrzjhm"
            name="代理人证件号码"
            label="代理人证件号码"
            placeholder="代理人证件号码"
            input-align="right"
          />
          <van-field
            v-model="qlrform.dlrlxdh"
            name="代理人联系电话"
            label="代理人联系电话"
            placeholder="代理人联系电话"
            input-align="right"
          />
          <van-field
            v-model="qlrform.dlrtxdz"
            name="代理人通讯地址"
            label="代理人通讯地址"
            placeholder="代理人通讯地址"
            input-align="right"
          />
          <van-field
            v-model="qlrform.dlryzbm"
            name="代理人邮政编码"
            label="代理人邮政编码"
            placeholder="代理人邮政编码"
            input-align="right"
          />
        </div>
      <div style="border-radius: 16px;
          box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;padding:5px;background:#fff;">
        <van-field
          v-model="qlrform.ncjtjjzzdm"
          name="农村集体经济组织代码"
          label="农村集体经济组织代码"
          placeholder="农村集体经济组织代码"
          input-align="right"
        />
        <van-field
          v-model="qlrform.ncjtjjzzmc"
          name="农村集体经济组织名称"
          label="农村集体经济组织名称"
          placeholder="农村集体经济组织名称"
          input-align="right"
        />
        <van-field
          v-model="qlrform.fbfdm"
          name="发包方代码"
          label="发包方代码"
          placeholder="发包方代码"
          input-align="right"
        />
        <van-field
          v-model="qlrform.fbfmc"
          name="发包方名称"
          label="发包方名称"
          placeholder="发包方名称"
          input-align="right"
        />
        <van-field
          v-model="qlrform.sjlyName"
          name="数据来源"
          label="数据来源"
          placeholder="数据来源"
          input-align="right"
          @click="showsjly = true"
        />
        <van-field
          v-model="qlrform.sjly"
          style="display:none"
        />
        <van-popup v-model="showsjly" position="bottom">
          <van-picker
            show-toolbar
            :columns="sjlyOptions"
            value-key="dictLabel"
            @confirm="onConfirmsjly"
            @cancel="showsjly = false"
          />
        </van-popup>
        <van-field
          v-model="qlrform.bz"
          name="备注"
          label="备注"
          placeholder="备注"
          input-align="right"
        />
      </div>
        <div style="margin: 16px;">
          <van-button round block color="#7AC943" native-type="submit">保存</van-button>
        </div>
      </van-form>
    </div>
    <div v-if="activeBtn==4">
        <div id="mapWrapAll" style="width: 100%;height: 100vh"></div>
      <!--图层-->
      <div class="rightZoom_wrap">
        <img src="../../assets/images/housesteadSurvey/tool1.png">
        <div class="amplification" @click="selectionPushMap">图层</div>
      </div>
      <!--放大缩小-->
      <div class="mapZoom_wrap">
        <div class="qtMap" @click="">
          <img src="../../assets/images/housesteadSurvey/tool2.png">
          <p>全图</p>
        </div>
        <div class="clMap" @click="" id="area">
          <img src="../../assets/images/housesteadSurvey/tool3.png">
          <p>测量</p>
        </div>
        <div class="hcMap" @click="">
          <img src="../../assets/images/housesteadSurvey/tool4.png">
          <p>核查</p>
        </div>
        <div class="htMap" @click="" id="htMapAll">
          <img src="../../assets/images/housesteadSurvey/tool5.png">
          <p>绘图</p>
        </div>
        <div class="dwMap" @click="" id="dwMapAll">
          <img src="../../assets/images/housesteadSurvey/tool6.png">
          <p>定位</p>
        </div>
      </div>

      <!--列表拉取详情-->
      <div class="homesteadList_wrap" v-show="homesteadListStatus">
        <div class="main_m">
          <div class="title_m">
            <div class="more_icon" @click="homesteadListShrink"></div>
            <div class="name">筛选列表</div>
          </div>

          <div style="padding: 10px 15px;">
            <van-checkbox name="all" shape="square">全选</van-checkbox>
            <div style="height: 15px;"></div>
            <van-checkbox-group v-model="checked">
              <van-checkbox name="a" shape="square" style="margin-bottom: 5px;">
                <template #default>
                  附属设施<span style="display: inline-block;background: red;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
                </template>
              </van-checkbox>
              <van-checkbox name="b" shape="square" style="margin-bottom: 5px;">
                <template #default>
                  自<i style="margin-right: 0.5em;"></i>然<i style="margin-right: 0.5em;"></i>幢<span style="display: inline-block;background: red;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
                </template>
              </van-checkbox>
              <van-checkbox name="b" shape="square" style="margin-bottom: 5px;">
                <template #default>
                  宅<i style="margin-right: 0.5em;"></i>基<i style="margin-right: 0.5em;"></i>地<span style="display: inline-block;background: red;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
                </template>
              </van-checkbox>
            </van-checkbox-group>
          </div>
<!--          <div class="noInfo_data">-->
<!--            <div class="checkbox">-->
<!--              &lt;!&ndash; 全选与不全选模块 &ndash;&gt;-->
<!--              <div class="thead-checkbox" @click="checkClick">-->
<!--                <input type="checkbox" class="checkall">全选-->
<!--              </div>-->
<!--              &lt;!&ndash; 小复选框选 &ndash;&gt;-->
<!--              <div class="item-list-checkbox">-->
<!--                <div class="item-checkbox"><input type="checkbox" @click="checkClick('fsssMap')" class="checkitem">附属设施</div>-->
<!--                <div class="item-checkbox"  @click="checkClick('zrzMap')"><input type="checkbox" class="checkitem">自然幢</div>-->
<!--                <div class="item-checkbox"  @click="checkClick('zjdMap')"><input type="checkbox" class="checkitem">宅基地</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
<!--      &lt;!&ndash;列表 定位&ndash;&gt;-->
<!--      <div class="rightIcon_wrap">-->
<!--        &lt;!&ndash; <div class="positioning_wrap">-->
<!--          <div class="icon"></div>-->
<!--        </div> &ndash;&gt;-->
<!--        <div class="selectionIcon_wrap" @click="selectionPush">-->
<!--          <div class="icon"></div>-->
<!--          <div class="text">列表</div>-->
<!--        </div>-->
<!--      </div>-->
      <van-overlay :show="selectionIconShow" @click="homesteadListShrink" />
    </div>
    <van-popup v-model="show1" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="show1=!show1"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">户主信息</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="margin:20px;">
        <van-form @submit="onSubmit">
          <p class="title" style="position:relative;padding-left:20px;line-height:32px;">户主信息</p>
          <van-field
            v-model="hzform.hzxm"
            name="户主名称"
            label="户主名称"
            placeholder="户主名称"
            required
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="hzform.hzzjlx"
            name="户主证件类型"
            label="户主证件类型"
            placeholder="户主证件类型"
            input-align="right"
            required
            :rules="[{ required: true, message: '' }]"
            @click="showhzzjlx = true"
          />
          <van-popup v-model="showhzzjlx" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showhzzjlx = false"
            />
          </van-popup>
          <van-field
            v-model="hzform.hzzjhm"
            name="户主证件号码"
            label="户主证件号码"
            placeholder="户主证件号码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="hzform.txdz"
            name="通讯地址"
            label="通讯地址"
            placeholder="通讯地址"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="hzform.hncysl"
            name="户内成员数量"
            label="户内成员数量"
            placeholder="户内成员数量"
            :rules="[{ required: true, message: '' }]"
          />
          <div style="text-align:center;overflow:auto;">
            <van-button plain round color="#7AC943" size="mini" style="margin:0 auto;">查看户内成员信息</van-button>
          </div>
          <div style="margin: 16px;">
            <van-button round block color="#7AC943" native-type="submit">保存</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model="showsyqr" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="showsyqr=!showsyqr"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">{{form1.zjddm?"":"新增"}}使用权利人</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="margin:20px;">
        <van-form @submit="onSubmit">
          <p class="title" style="position:relative;padding-left:20px;line-height:32px;">使用权人</p>
          <van-field
            v-model="form1.suyqrdm"
            name="所有权人代码"
            label="所有权人代码"
            placeholder="所有权人代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.nhdm"
            name="农户代码"
            label="农户代码"
            placeholder="农户代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.zjddm"
            name="宅基地代码"
            label="宅基地代码"
            placeholder="宅基地代码"
            :rules="[{ required: true, message: '' }]"
          />

          <van-field
            v-model="form1.nmfwdm"
            name="农民房屋代码"
            label="农民房屋代码"
            placeholder="农民房屋代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.shyqrdbxm"
            name="使用权人代表姓名"
            label="使用权人代表姓名"
            placeholder="使用权人代表姓名"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.shyqrdbzjlx"
            name="使用权人代表证件类型"
            label="使用权人代表证件类型"
            placeholder="使用权人代表证件类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.shyqrdbzjhm"
            name="使用权人代表证件号码"
            label="使用权人代表证件号码"
            placeholder="使用权人代表证件号码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.bdcdyh"
            name="不动产单元号"
            label="不动产单元号"
            placeholder="不动产单元号"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.bdcqzh"
            name="不动产权证号"
            label="不动产权证号"
            placeholder="不动产权证号"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.qzysxlh"
            name="权证印刷序列号"
            label="权证印刷序列号"
            placeholder="权证印刷序列号"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.fzjg"
            name="发证机关"
            label="发证机关"
            placeholder="发证机关"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.sshy"
            name="所属行业"
            label="所属行业"
            placeholder="所属行业"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field name="radio" label="国家/地区">
            <template #input>
              <van-radio-group v-model="form1.gj" direction="horizontal">
                <van-radio name="1">中国</van-radio>
                <van-radio name="2">其他</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="form1.qlbl"
            name="权利比例"
            label="权利比例"
            placeholder="权利比例"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.hjszss"
            name="户籍所在省市"
            label="户籍所在省市"
            placeholder="户籍所在省市"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field name="radio" label="性别">
            <template #input>
              <van-radio-group v-model="form1.xb" direction="horizontal">
                <van-radio name="1">男</van-radio>
                <van-radio name="2">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="form1.dh"
            name="电话"
            label="电话"
            placeholder="电话"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.dz"
            name="地址"
            label="地址"
            placeholder="地址"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.ftzdmj"
            name="分摊宗地面积"
            label="分摊宗地面积"
            placeholder="分摊宗地面积"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.sfsyqrzjgy"
            name="是否使用权人之间共有"
            label="是否使用权人之间共有"
            placeholder="是否使用权人之间共有"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.qlrlx"
            name="权利人类型"
            label="权利人类型"
            placeholder="权利人类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.gyfs"
            name="共有方式"
            label="共有方式"
            placeholder="共有方式"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.sfbncjtjjzzcy"
            name="是否本农村集体经济组织成员"
            label="是否本农村集体经济组织成员"
            placeholder="是否本农村集体经济组织成员"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.hklx"
            name="户口类型"
            label="户口类型"
            placeholder="户口类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.bz"
            name="备注"
            label="备注"
            placeholder="备注"
            :rules="[{ required: true, message: '' }]"
          />
          <div style="text-align:center;overflow:auto;">
            <van-button plain round color="#7AC943" size="mini" style="margin:0 auto;" native-type="button" @click="showhncylist=true">查看户内成员列表</van-button>
          </div>
          <div style="margin: 16px;">
            <van-button round block color="#7AC943" native-type="submit">保存</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model="showhncylist" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="showhncylist=!showhncylist"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">户内成员列表</p>
          </template>
        </van-nav-bar>
      </div>
      <van-swipe-cell v-for="(item,index) in hncylist" :key="index" @click.native="showPopuphncy" style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px auto;background:#fff;">
        <div style="padding:20px;">
          <p style="color:#22B7F2;font-size:20px;line-height:30px;"><van-icon name="wap-home" color="#22b7f2" size="20" style="margin-right:10px;"/>刘茂强</p>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">证件号码</p>
            <p  style="flex:1;text-align:right;">4413215200216562255Z00026</p>
          </div>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">权利人类型</p>
            <p style="flex:1;text-align:right;">个人</p>
          </div>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
      <div style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;background:#fff;padding:20px;">
        <div style="text-align:center;" >
          <p style="color:#22B7F2;font-size:20px;line-height:30px;" @click="showPopuphncy"><van-icon name="plus" color="#22b7f2" size="20" style="margin-right:10px;"/>添加户内成员信息</p>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="showhncy" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="showhncy=!showhncy"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">户内成员</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="margin:20px;">
        <van-form @submit="onSubmit">
          <van-field
            v-model="form5.nhdm"
            name="农户代码"
            label="农户代码"
            placeholder="农户代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.xm"
            name="姓名"
            label="姓名"
            placeholder="姓名"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.zjlx"
            name="证件类型"
            label="证件类型"
            placeholder="证件类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.yhzgx"
            name="与户主关系"
            label="与户主关系"
            placeholder="与户主关系"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.zjhm"
            name="证件号码"
            label="证件号码"
            placeholder="证件号码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.xb"
            name="性别"
            label="性别"
            placeholder="性别"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.lxdh"
            name="联系电话"
            label="联系电话"
            placeholder="联系电话"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.hklx"
            name="户口类型"
            label="户口类型"
            placeholder="户口类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.hyzk"
            name="婚姻状况"
            label="婚姻状况"
            placeholder="婚姻状况"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.jzwqk"
            name="建筑物情况"
            label="建筑物情况"
            placeholder="建筑物情况"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.sfbjtjjzzcy"
            name="是否本集体经济组织成员"
            label="是否本集体经济组织成员"
            placeholder="是否本集体经济组织成员"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.cybz"
            name="成员备注"
            label="成员备注"
            placeholder="成员备注"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.cybzsm"
            name="成员备注说明"
            label="成员备注说明"
            placeholder="成员备注说明"
            :rules="[{ required: true, message: '' }]"
          />
          <div style="margin: 16px;">
            <van-button round block color="#7AC943" native-type="submit">保存</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
    import { currentLocation,} from "@/api/homestead/index";
    import {listZjdzd,getQueryLand} from "@/api/homesteadSurvey/zjdzd";
    import {listShyqr} from "@/api/homesteadSurvey/shyqr";
    import {listSuyqr,updateSuyqr,addSuyqr} from "@/api/homesteadSurvey/suyqr";
    import {listZrz,getZrzZjdDmList} from "@/api/homesteadSurvey/zrz";
    import {listFsss,getFsssZjdDmList} from "@/api/homesteadSurvey/fsss";
    import { listTown, getTown } from "@/api/homesteadSurvey/town";
    import { listVillage} from "@/api/homesteadSurvey/village";
    import $ from "jquery";
    export default {
      name: "homesteadList",
      data() {
        return {
          checked:[],
          // 使用权人表单弹出
          showsyqr:false,
          showhncylist:false,
          showhncy:false,
          activeBtn:1,
          value:'',
          // 宅基地搜索框
          zjdvalue:"",
          // 使用权人搜索框
          syqrvalue:"",
          active:null,
          // 全部列表
          list:[],
          // 已核查列表
          list1:[],
          // 未核查列表
          list2:[],
          // 使用权人列表
          syqrlist:[],
          // 户内成员表单
          form5: {},
          // 户内成员列表
          hncylist:[11,1,1],
          currentRate:20,
          geoJson:null,
          // 使用权人
          form1:[],
          // 户主列表
          hzform:{},
          // 权利人列表
          qlrform:[],
          // 权利人性质弹出框
          showsuyqxz:false,
          // 代理人证件类型弹出框
          showdlrzjlx:false,
          // 代表人证件类型弹出框
          showdbrzjlx:false,
          // 数据来源弹出框
          showsjly:false,
          // 证件类型字典
          zjlxOptions: [],
          // 所有权性质字典
          suyqxzOption: [],
          // 数据来源字典
          sjlyOptions:[],
          columns:[],
          show1:false,
          showhzzjlx: false,
          // 路由传过来的任务基本信息。
          item: {},
          //地图使用 --start
          openMap: false,
          mapTheGeomZrzId: null,
          mapTheGeomZjdId: null,
          mapTheGeomFsssId: null,
          drawInsert:null,
          mapZjdData:{},
          mapZrzData:{},
          mapFsssData:{},
          mapHaDataValue:false,
          mapHasDateStatus: 0, //0附属设施  1自然幢  2宅基地
          selectionIconShow:false,
          homesteadListStatus:false,
          //地图绘制状态
          draw: {
            drawMapPolygon: false, //绘制地图
          },
          mapTownList: null,
          mapVillageList: null,
          coordinate: "",
          //地图使用 --end
        };
      },
      mounted(){
        currentLocation().then((res) => {
          if (res.code == 200) {
            let content = res.data;
            this.geoJson = content.geoJson;
          }
        });
      },
      created(){
        this.getDicts("zjlx").then(response => {
          this.zjlxOptions = response.data;
        });
        this.getDicts("qsxz").then(response => {
          this.suyqxzOptions = response.data;
        });
        this.getDicts("sjly").then(response => {
          this.sjlyOptions = response.data;
        });
        this.item = this.$cookies.get("item");
        this.getZjdList();
      },
      methods: {
        setCookies(item){
          this.$cookies.set("search",JSON.stringify(item));
        },
        // 入户核查搜索框新增。
        onClickzjd(){
          this.$cookies.remove("search");
          this.$router.push({name:'homesteadAdd'});

        },
        // 农户信息搜索框新增。
        onClicksyqr(){
          this.showsyqr = true;
          this.form1 = {};
        },
        // 返回
        onClickLeft(){
          this.$router.push('/homesteadSurvey/index');
        },
        onConfirmdbrzjlx(value){
          this.qlrform.dbrzjlxName = value.dictLabel
          this.qlrform.dbrzjlx = value.dictValue
          this.showdbrzjlx = false
        },
        onConfirmsuyqxz(value){
          this.qlrform.suyqxzName = value.dictLabel
          this.qlrform.suyqxz = value.dictValue
          this.showsuyqxz = false
        },
        onConfirmdlrzjlx(value){
          this.qlrform.dlrzjlxName = value.dictLabel
          this.qlrform.dlrzjlx = value.dictValue
          this.showdlrzjlx = false
        },
        onConfirmsjly(value){
          this.qlrform.sjlyName = value.dictLabel
          this.qlrform.sjly = value.dictValue
          this.showsjly = false
        },
        // 所有权人保存
        onSubmitsyqr(){
          if(this.qlrform.id!=null){
            updateSuyqr(this.qlrform).then(
              response => {
                let _this =this
                this.$toast({
                  icon: 'success', // 找到自己需要的图标
                  message: '修改成功',
                  duration:"1000"
                })
              }
            );
          }else{
            addSuyqr(this.qlrform).then(
              response => {
                let _this =this
                this.$toast({
                  icon: 'success', // 找到自己需要的图标
                  message: '保存成功',
                  duration:"1000"
                })
              }
            );
          }
        },
        // 查询所有权人
        getSyqr(){
          let params = {
            "deptId" : this.item.deptId
          }
          this.qlrform={}
          listSuyqr(params).then((response) => {
            this.qlrform = response.rows[0]
            this.zjlxOptions.map(res => {
              if(res.dictValue == this.qlrform.dbrzjlx){
                this.qlrform.dbrzjlxName = res.dictLabel
              }
              if(res.dictValue == this.qlrform.dlrzjlx){
                this.qlrform.dlrzjlxName = res.dictLabel
              }
            })
            this.suyqxzOptions.map(res => {
              if(res.dictValue == this.qlrform.suyqxz){
                this.qlrform.suyqxzName = res.dictLabel
              }
            })
            this.sjlyOptions.map(res => {
              if(res.dictValue == this.qlrform.sjly){
                this.qlrform.sjlyName = res.dictLabel
              }
            })
          });
        },
        // 查询使用权人
        getShyqr(){
          let params = {
            "deptId" : this.item.deptId
          }
          listShyqr(params).then((response) => {
            this.syqrlist = response.rows
          });
        },
        // 农户信息搜索框
        onSearchnh(){
          let params = {
            "deptId" : this.item.deptId,
            "syqrValue" : this.syqrvalue
          }
          listShyqr(params).then((response) => {
            this.syqrlist = response.rows
          });
        },
        // 宅基地搜索框
        onSearchzjd(){
          if(this.active==1){
            let params = {
              "deptId" : this.item.deptId,
              "houserDataConfirmStatus" : "CONFIRMED",
              "syqr" : this.zjdvalue
            }
            listZjdzd(params).then((response) => {
              if (response.code == 200) {
                this.list1 = response.rows
              }
            });
          }else if(this.active==2){
            let params = {
              "deptId" : this.item.deptId,
              "houserDataConfirmStatus" : "UNCONFIRMED",
              "syqr" : this.zjdvalue
            }
            listZjdzd(params).then((response) => {
              if (response.code == 200) {
                this.list2 = response.rows
              }
            });
          }else{
            let params = {
              "deptId" : this.item.deptId,
              "syqr" : this.zjdvalue
            }
            listZjdzd(params).then((response) => {
              if (response.code == 200) {
                this.list = response.rows
              }
            });
          }
        },
        // 户内成员弹窗
        showPopuphncy(){
          this.showhncy = true
        },
        getZjdList(){
           if(this.active==1){
            let params = {
              "deptId" : this.item.deptId,
              "houseDataConfirmStatus" : "CONFIRMED"
            }
            listZjdzd(params).then((response) => {
              if (response.code == 200) {
                this.list1 = response.rows
              }
            });
          }else if(this.active==2){
            let params = {
              "deptId" : this.item.deptId,
              "houseDataConfirmStatus" : "UNCONFIRMED"
            }
            listZjdzd(params).then((response) => {
              if (response.code == 200) {
                this.list2 = response.rows
              }
            });
          }else{
               let params = {
                 "deptId" : this.item.deptId,
               }
               listZjdzd(params).then((response) => {
                 if (response.code == 200) {
                   this.list = response.rows
                 }
               });
           }
        },
        onConfirm(){},
        onSubmit(){},
        mapShow() {
          //镇边界获取
          listTown().then(response => {
            if (response.code == 200) {
              this.mapTownList = response.rows;
              //村边界获取
              listVillage(this.queryParams).then(response => {
                this.mapVillageList = response.rows;
                listZjdzd().then((response) => {
                  if (response.code == 200) {
                    this.mapTheGeomZjdId= response.rows;
                    listZrz().then((response) => {
                      if (response.code == 200) {
                        this.mapTheGeomZrzId = response.rows;
                        listFsss().then((response) => {
                          if (response.code == 200) {
                            this.mapTheGeomFsssId = response.rows;
                          }
                          setTimeout(() => {
                            this.GetMapsInit();
                          }, 300);
                        });
                      }
                    });
                  }
                });
              });
            }
          });
        },
        //地图加载 -----start
        GetMapsInit() {
          //加载地图编辑
          var that = this;
          var map;
          // document.getElementById("mapAll").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://t0.tianditu.gov.cn/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: "卫星影像图",
          });

          var yingxzi = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
            }),
            isGroup: true,
            name: "天地图文字标注--卫星影像图",
          });
          //加载地图
          map = new ol.Map({
            controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
            layers: [aerial, yingxzi],
            projection: projection,
            target: "mapWrapAll",
            view: new ol.View({
              //center: ol.proj.fromLonLat([115.452752, 31.789033]),
              zoom: 15,
              minZoom: 0, //地图缩小限制
              maxZoom: 18.3, //地图放大限制
            }),
          });
          //判断当前账套是否有数据
          var mapTalkAbout = true;
          //获取镇界线----start
          if(this.mapTownList.length >0){
            for (var i = 0; this.mapTownList.length > i; i++) {
              if (this.mapTownList[i] != null && this.mapTownList[i].theGeom != null && this.mapTownList[i].theGeom != "") {
                mapTalkAbout =false;
                this.mapTownList[i].createBy = 'mapTownList';
                var theGeomLine= this.mapTownList[i].theGeom.replaceAll("MultiPolygon","LineString");
                theGeomLine = theGeomLine.replaceAll("[[[[","[[");
                theGeomLine = theGeomLine.replaceAll("]]]]","]]");
                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\":" + theGeomLine + ",    \"properties\":" + JSON.stringify(this.mapTownList[i]) + "}"),
                  }),
                  style: new ol.style.Style({
                    fill: new ol.style.Fill({
                      //矢量图层填充颜色，以及透明度
                      color: "#AE57A4",
                    }),
                    stroke: new ol.style.Stroke({
                      //边界样式
                      color: "#FF0000",
                      width: 3,
                    }),
                    // text: new ol.style.Text({
                    //   text: this.mapTownList[i].xzqmc,
                    //   font: '30px sans-serif',
                    //   textAlign: "center",
                    //   textBaseline: "middle",
                    //   //font: 'verdana',
                    //   fill: new ol.style.Fill({
                    //     color: "#ff0000"
                    //   }),
                    //   // backgroundFill: new ol.style.Fill({
                    //   //   color: "#ff0000"
                    //   // }),
                    //   font: "30px sans-serif",
                    //   stroke: new ol.style.Stroke({
                    //     color: "#ffffff"
                    //     // width: 3
                    //   }),
                    //   offsetX: parseInt(0, 10),
                    //   offsetY: parseInt(0, 10),
                    //   placement: "line", //point 则自动计算面的中心k点然后标注  line 则根据面要素的边进行标注
                    //   overflow: false //超出面的部分不显示
                    //}),
                  }),
                });
                map.addLayer(hc_land);
                //console.log(hc_land.values_.source.featuresRtree_.rbush_.data);
                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]); //获取边界区域的中心位置
                // console.log(center);
                map.getView().animate({
                  // 只设置需要的属性即可
                  center: center, // 中心点
                  zoom: 9.8, // 缩放级别
                  rotation: undefined, // 缩放完成view视图旋转弧度
                  duration: 1000, // 缩放持续时间，默认不需要设置
                });
              }
            }
          }
          //获取镇界线----end
          //获取村界线----start
          if(this.mapVillageList.length >0){
            for (var i = 0; this.mapVillageList.length > i; i++) {
              if (this.mapVillageList[i] != null && this.mapVillageList[i].theGeom != null && this.mapVillageList[i].theGeom != "") {
                mapTalkAbout =false;
                this.mapVillageList[i].createBy = 'mapVillageList';
                var theGeomLine= this.mapVillageList[i].theGeom.replaceAll("MultiPolygon","LineString");
                theGeomLine = theGeomLine.replaceAll("[[[[","[[");
                theGeomLine = theGeomLine.replaceAll("]]]]","]]");
                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\":" + theGeomLine + ",    \"properties\":" + JSON.stringify(this.mapVillageList[i]) + "}"),
                  }),
                  style: new ol.style.Style({
                    fill: new ol.style.Fill({
                      //矢量图层填充颜色，以及透明度
                      color: "#AE57A4",
                    }),
                    stroke: new ol.style.Stroke({
                      //边界样式
                      color: "#ff00ff",
                      width: 3,
                    }),
                    // text: new ol.style.Text({
                    //   text: this.mapVillageList[i].dcmj,
                    //   font: '30px sans-serif',
                    //   textAlign: "center",
                    //   textBaseline: "middle",
                    //   //font: 'verdana',
                    //   fill: new ol.style.Fill({
                    //     color: "#ff00ff"
                    //   }),
                    //   // backgroundFill: new ol.style.Fill({
                    //   //   color: "#ff0000"
                    //   // }),
                    //   font: "30px sans-serif",
                    //   stroke: new ol.style.Stroke({
                    //     color: "#ffffff"
                    //     // width: 3
                    //   }),
                    //   offsetX: parseInt(0, 10),
                    //   offsetY: parseInt(0, 10),
                    //   placement: "line", //point 则自动计算面的中心k点然后标注  line 则根据面要素的边进行标注
                    //   overflow: false //超出面的部分不显示
                    // }),
                  }),
                });
                map.addLayer(hc_land);
              }
            }
          }
          // //获取村界线----end
          //宅基地定位开始 ---------start
          if(this.mapTheGeomZjdId.length >0) {
            for (var i = 0; this.mapTheGeomZjdId.length > i; i++) {
              if (this.mapTheGeomZjdId[i] !=null && this.mapTheGeomZjdId[i].theGeom != null && this.mapTheGeomZjdId[i].theGeom != "") {
                mapTalkAbout =false;
                this.mapTheGeomZjdId[i].createBy = 'mapTheGeomZjdId';
                var styleYqr = "";
                if(this.mapTheGeomZjdId[i].houseDataConfirmStatus == "CONFIRMED"){
                  styleYqr = new ol.style.Style({
                    fill: new ol.style.Fill({
                      //矢量图层填充颜色，以及透明度
                      color: "#AE57A4",
                    }),
                    stroke: new ol.style.Stroke({
                      //边界样式
                      color: "#28FF28",
                      width: 3,
                    }),
                  });
                } else {
                  styleYqr = new ol.style.Style({
                    fill: new ol.style.Fill({
                      //矢量图层填充颜色，以及透明度
                      color: "#AE57A4",
                    }),
                    stroke: new ol.style.Stroke({
                      //边界样式
                      color: "rgba(255, 45, 45,1)",
                      width: 3,
                    }),
                  });
                }
                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\":" + this.mapTheGeomZjdId[i].theGeom + ",    \"properties\":" + JSON.stringify(this.mapTheGeomZjdId[i]) + "}"),
                  }),
                  style: styleYqr
                });
                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]); //获取边界区域的中心位置
                // map.getView().animate({
                //   // 只设置需要的属性即可
                //   center: center, // 中心点
                //   zoom: 15.8, // 缩放级别
                //   rotation: undefined, // 缩放完成view视图旋转弧度
                //   duration: 1000, // 缩放持续时间，默认不需要设置
                // });
                //自然幢定位开始 ---------start
                getZrzZjdDmList(this.mapTheGeomZjdId[i].zjddm).then((response) => {
                  if (response.code == 200) {
                    this.mapTheGeomZrzId = response.data;
                    if(this.mapTheGeomZrzId.length >0) {
                      for (var i = 0; this.mapTheGeomZrzId.length > i; i++) {
                        if (this.mapTheGeomZrzId[i] !=null && this.mapTheGeomZrzId[i].theGeom != null && this.mapTheGeomZrzId[i].theGeom != "") {
                          this.mapTheGeomZrzId[i].createBy = 'mapTheGeomZrzId';
                          var styleZrz = "";
                          if(this.mapTheGeomZjdId[i].houseDataConfirmStatus == "CONFIRMED"){
                            styleZrz = new ol.style.Style({
                              fill: new ol.style.Fill({
                                //矢量图层填充颜色，以及透明度
                                color: "#FFD306",
                              }),
                              stroke: new ol.style.Stroke({
                                //边界样式
                                color: "#28FF28",
                                width: 3,
                              }),
                            });
                          } else {
                            styleZrz = new ol.style.Style({
                              fill: new ol.style.Fill({
                                //矢量图层填充颜色，以及透明度
                                color: "#FFD306",
                              }),
                              stroke: new ol.style.Stroke({
                                //边界样式
                                color: "rgba(255, 45, 45,1)",
                                width: 3,
                              }),
                            });
                          }
                          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\":" + this.mapTheGeomZrzId[i].theGeom + ",    \"properties\":" + JSON.stringify(this.mapTheGeomZrzId[i]) + "}"),
                            }),
                            style: styleZrz
                          });
                          map.addLayer(hc_land);
                        }
                      }
                    }
                  }
                });
                //自然幢定位结束 ---------end

                //附属设施定位开始 ---------start
                getFsssZjdDmList(this.mapTheGeomZjdId[i].zjddm).then((response) => {
                  if (response.code == 200) {
                    this.mapTheGeomFsssId = response.data;
                    if(this.mapTheGeomFsssId.length >0) {
                      for (var i = 0; this.mapTheGeomFsssId.length > i; i++) {
                        if (this.mapTheGeomFsssId[i] !=null && this.mapTheGeomFsssId[i].theGeom != null && this.mapTheGeomFsssId[i].theGeom != "") {
                          this.mapTheGeomFsssId[i].createBy = 'mapTheGeomFsssId';
                          var styleFsss = "";
                          if(this.mapTheGeomZjdId[i].houseDataConfirmStatus == "CONFIRMED"){
                            styleFsss = new ol.style.Style({
                              fill: new ol.style.Fill({
                                //矢量图层填充颜色，以及透明度
                                color: "#00FFFF",
                              }),
                              stroke: new ol.style.Stroke({
                                //边界样式
                                color: "#28FF28",
                                width: 3,
                              }),
                            });
                          } else {
                            styleFsss = new ol.style.Style({
                              fill: new ol.style.Fill({
                                //矢量图层填充颜色，以及透明度
                                color: "#00FFFF",
                              }),
                              stroke: new ol.style.Stroke({
                                //边界样式
                                color: "rgba(255, 45, 45,1)",
                                width: 3,
                              }),
                            });
                          }
                          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\":" + this.mapTheGeomFsssId[i].theGeom + ",    \"properties\":" + JSON.stringify(this.mapTheGeomFsssId[i]) + "}"),
                            }),
                            style: styleFsss
                          });
                          map.addLayer(hc_land);
                        }
                      }
                    }
                  }
                });
                //附属设施定位结束 ---------end
              }
            }
          }
          //宅基地定位结束 ---------end

          //地图操作定义------------start
          //定位定义------------start
          var Zb;
          var latitude;
          var longitude;
          var vector_drawing;
          //定位定义------------end

          //绘图定义---------------start
          var drawing;
          var draw_map;
          //绘图定义---------------end

          //测面绘图定义------------start
          var draw_cm;
          //定义矢量图层
          var vector;
          //创建一个帮助提示信息对象
          var helpTooltip;
          //创建一个测量提示信息对象
          var measureTooltip;
          //创建一个帮助提示框对象
          var helpTooltipElement;
          //测出距离
          var measureTooltipElement;
          //测面绘图定义-----------end

          //地图操作定义------------end
          //定位当前位置 ------start
          $("#dwMapAll").on("click", function () {
            console.log("进入定位图层")
            //删除测量记录操作--------start
            //将矢量图层从图中删除
            //map.removeLayer(helpTooltip);
            map.removeLayer(vector);
            map.removeInteraction(draw_cm);
            //map.removeOverlay(helpTooltipElement);
            //map.removeLayer(measureTooltip);
            //删除测量记录操作--------end
            //删除绘制图层画图操作-------start
            map.removeInteraction(draw_map);
            map.removeLayer(drawing);
            //删除绘制图层画图操作-------end

            //开始定位当前位置
            navigator.geolocation.getCurrentPosition(function(position) {
              latitude = position.coords.latitude;// 获取纬度
              longitude = position.coords.longitude;// 获取经度
            });
            if(latitude !=null && longitude !=null && latitude !="" && longitude !=""){
              Zb = [longitude,latitude];
            }else {
              Zb =[115.452752, 31.789033];
            }
            //矢量标注样式设置函数，设置image为图标ol.style.Icon
            function createLabelStyle() {
              return new ol.style.Style({
                image: new ol.style.Icon({
                  //设置图标偏移
                  anchor: [0.5, 1],
                  //标注样式的起点位置
                  anchorOrigin: "top-right",
                  //X方向单位：分数
                  anchorXUnits: "fraction",
                  //Y方向单位：像素
                  anchorYUnits: "pixels",
                  //偏移起点位置的方向
                  offsetOrigin: "top-right",
                  //透明度
                  opacity: 0.9,
                  //图片路径
                  src: require("../../assets/images/housesteadSurvey/mark.png"),
                }),
                text: new ol.style.Text({
                  textAlign: "center", //位置
                  textBaseline: "middle", //基准线
                  font: "normal 12px 微软雅黑", //文字样式
                  //text: "标注点", //文本内容
                  fill: new ol.style.Fill({
                    //文本填充样式（即文字颜色)
                    color: "#ff0000",
                  }),
                }),
                zIndex: 9999,
              });
            }
            var newcenterFeature = new ol.Feature({
              geometry: new ol.geom.Point(ol.proj.fromLonLat(Zb)), //几何信息
              name: "标注点",
            });
            var sourceMapLook = new ol.source.Vector({wrapX: false});
            vector_drawing = new ol.layer.Vector({
              source: sourceMapLook,
            });
            map.addLayer(vector_drawing);
            newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
            sourceMapLook.addFeature(newcenterFeature);
            map.getView().animate({
              // 只设置需要的属性即可
              center: ol.proj.fromLonLat(Zb), // 中心点
              zoom: 17.8, // 缩放级别
              rotation: undefined, // 缩放完成view视图旋转弧度
              duration: 1000, // 缩放持续时间，默认不需要设置
            });
          });
          //定位当前位置 ------end

      //开始绘制图层- -----start
      $("#htMapAll").on("click", function () {
        console.log("进入绘制图层")
        //删除之前 测距操作添加map中的绘图  --------start
        //map.removeLayer(helpTooltip);
        map.removeLayer(vector);
        map.removeInteraction(draw_cm);
        //map.removeOverlay(helpTooltipElement);
        map.removeLayer(measureTooltipElement);
        //删除之前 测距操作添加map中的绘图  --------end

      //删除之前画图图层,重新绘制图层
        map.removeInteraction(draw_map);
        map.removeLayer(drawing);
        //var source = new ol.source.Vector({wrapX: false});
        drawing = new ol.layer.Vector({
          source: new ol.source.Vector(),
        });
        map.addLayer(drawing);

        function addInteraction() {
          draw_map = new ol.interaction.Draw({
            source: drawing.getSource(),
            type: "Polygon",
          });
          draw_map.on("drawend", function (evt) {
            var feature = evt.feature;
            var geometry = feature.getGeometry();
            that.coordinate = geometry.getCoordinates();
            //_this.coordinateList = coordinate.toString();
            //提示当前坐标是否绘制完成
            if(that.coordinate != "" && that.coordinate !=null) {
              htMapAllFu();
            }else {
              console.log("6");
              $("#htMapAll").trigger("click");
            }
          });
          map.addInteraction(draw_map);
        }

        function htMapAllFu() {
            //that.drawMapPolygonFun();
            //绘制多边形地图
            that.$dialog
              .confirm({
                title: "提示",
                message: "是否重新绘制画图",
              })
              .then(() => {
                //$("#drawRemove").trigger("click");
                map.removeLayer(drawing);
                that.coordinate = "";
              })
              .catch(() => {
                //删除画图点
                map.removeInteraction(draw_map);
              });
        }

        addInteraction();
      });
      //开始绘制图层- -----end

      //清除画图鼠标点击事件
      // $("#drawRemove").click(function () {
      //   map.removeLayer(drawing);
      // });
      //

          //获取类型开始  侧面-----------------------------------------------------------------start
          $("#area").click(function () {
            console.log("进入测面")
            //删除绘制图层画图操作-------start
            map.removeInteraction(draw_map);
            map.removeLayer(drawing);
            //删除绘制图层画图操作-------end
            //开始绘制 测面--------------------------------------------------------------start
            //定义矢量数据源
            var source = new ol.source.Vector();

            vector = new ol.layer.Vector({
              source: source,
              style: new ol.style.Style({
                fill: new ol.style.Fill({
                  color: "rgba(255,255,255,0.2)",
                }),
                stroke: new ol.style.Stroke({
                  color: "#e21e0a",
                  width: 2,
                }),
                //image: new ol.style.Circle({
                // radius: 7,
                // fill: new ol.style.Fill({
                //  color:'#ffcc33'
                // })
                //})
              }),
            });

            //将矢量图层添加到地图中   线的颜色加入map中
            map.addLayer(vector);

            var sketch;

            var continuePolygonMsg = "单击以继续绘制多边形";

            /**
             * Message to show when the user is drawing a line.
             * @type {string}
             */
              //var continueLineMsg = '单击继续绘制直线';

              //鼠标移动触发的函数
            var pointerMoveHandler = function (evt) {
                //Indicates if the map is currently being dragged.
                //Only set for POINTERDRAG and POINTERMOVE events. Default is false.
                //如果是平移地图则直接结束
                if (evt.dragging) {
                  return;
                }
                //帮助提示信息
                var helpMsg = "单击开始绘图";

                if (sketch) {
                  //Get the feature's default geometry.
                  //A feature may have any number of named geometries.
                  //获取绘图对象的几何要素
                  var geom = sketch.getGeometry();
                  //如果当前绘制的几何要素是多边形，则将绘制提示信息设置为多边形绘制提示信息
                  //如果当前绘制的几何要素是多线段，则将绘制提示信息设置为多线段绘制提示信息
                  helpMsg = continuePolygonMsg;
                }
                //设置帮助提示要素的内标签为帮助提示信息
                helpTooltipElement.innerHTML = helpMsg;
                //设置帮助提示信息的位置
                //The coordinate in view projection corresponding to the original browser event.
                helpTooltip.setPosition(evt.coordinate);
                //移除帮助提示要素的隐藏样式
                $(helpTooltipElement).removeClass("hidden");
              };

            map.on("pointermove", pointerMoveHandler);

            map.getViewport().addEventListener("mouseout", function () {
              helpTooltipElement.classList.add("hidden");
            });

            //添加交互式绘图对象的函数
            function addInteraction() {
              // 获取当前选择的绘制类型
              //var type = typeSelect.value == 'length' ? 'Polygon' : 'LineString';
              //创建一个交互式绘图对象
              var type = "Polygon";
              draw_cm = new ol.interaction.Draw({
                //绘制的数据源
                source: source,
                //绘制类型
                type: type,
                //样式
                style: new ol.style.Style({
                  fill: new ol.style.Fill({
                    color: "rgba(255,255,255,0.2)",
                  }),
                  stroke: new ol.style.Stroke({
                    color: "rgba(0,0,0,0.5)",
                    lineDash: [10, 10],
                    width: 2,
                  }),
                  //  image: new ol.style.Circle({
                  //   radius: 5,
                  //   stroke: new ol.style.Stroke({
                  //	color:'rgba(0,0,0,0.7)'
                  // }),
                  // fill: new ol.style.Fill({
                  //color: 'rgba(255,255,255,0.2)'
                  // })
                  //})
                }),
              });
              //将交互绘图对象添加到地图中
              map.addInteraction(draw_cm);

              //创建测量提示框
              createMeasureTooltip();
              //创建帮助提示框
              createHelpTooltip();

              //定义一个事件监听
              var listener;
              //定义一个控制鼠标点击次数的变量
              var count = 0;
              //绘制开始事件
              draw_cm.on(
                "drawstart",
                function (evt) {
                  //The feature being drawn.
                  sketch = evt.feature;
                  //提示框的坐标
                  var tooltipCoord = evt.coordinate;
                  //监听几何要素的change事件
                  //Increases the revision counter and dispatches a 'change' event.

                  listener = sketch.getGeometry().on("change", function (evt) {
                    //The event target.
                    //获取绘制的几何对象
                    var geom = evt.target;
                    //定义一个输出对象，用于记录面积和长度
                    var output;
                    map.removeEventListener("singleclick");
                    map.removeEventListener("dblclick");
                    //输出多边形的面积
                    output = formatArea(geom);
                    //Return an interior point of the polygon.
                    //获取多变形内部点的坐标
                    tooltipCoord = geom.getInteriorPoint().getCoordinates();

                    //设置测量提示框的内标签为最终输出结果
                    measureTooltipElement.innerHTML = output;
                    //设置测量提示信息的位置坐标
                    measureTooltip.setPosition(tooltipCoord);
                  });

                  //地图单击事件
                  map.on("singleclick", function (evt) {
                    //设置测量提示信息的位置坐标，用来确定鼠标点击后测量提示框的位置
                    measureTooltip.setPosition(evt.coordinate);
                    //如果是第一次点击，则设置测量提示框的文本内容为起点
                    if (count == 0) {
                      measureTooltipElement.innerHTML = "起点";
                    }
                    //根据鼠标点击位置生成一个点
                    var point = new ol.geom.Point(evt.coordinate);
                    //将该点要素添加到矢量数据源中
                    source.addFeature(new ol.Feature(point));
                    //更改测量提示框的样式，使测量提示框可见
                    measureTooltipElement.className = "tooltip tooltip-static";
                    //创建测量提示框
                    createMeasureTooltip();
                    //点击次数增加
                    count++;
                  });

                  //地图双击事件
                  map.on("dblclick", function (evt) {
                    //根据
                    var point = new ol.geom.Point(evt.coordinate);
                    source.addFeature(new ol.Feature(point));
                  });
                },
                this
              );
              //绘制结束事件
              draw_cm.on(
                "drawend",
                function (evt) {
                  count = 0;
                  //设置测量提示框的样式
                  measureTooltipElement.className = "tooltip tooltip-static";
                  //Set the offset for this overlay.
                  //设置偏移量
                  measureTooltip.setOffset([0, -7]);
                  //清空绘制要素
                  sketch = null;
                  //清空测量提示要素
                  measureTooltipElement = null;
                  //创建测量提示框
                  createMeasureTooltip();
                  //Removes an event listener using the key returned by on() or once().
                  //移除事件监听
                  ol.Observable.unByKey(listener);
                  //移除地图单击事件
                  map.removeEventListener("singleclick");
                },
                this
              );
            }
            /**
             * Creates a new help tooltip
             */
            function createHelpTooltip() {
              if (helpTooltipElement) {
                helpTooltipElement.parentNode.removeChild(helpTooltipElement);
              }
              helpTooltipElement = document.createElement("div");
              helpTooltipElement.className = "ol-tooltip hidden";
              helpTooltip = new ol.Overlay({
                element: helpTooltipElement,
                offset: [15, 0],
                positioning: "center-left",
              });
              map.addOverlay(helpTooltip);
            }

            /**
             * Creates a new measure tooltip
             */
            function createMeasureTooltip() {
              if (measureTooltipElement) {
                measureTooltipElement.parentNode.removeChild(measureTooltipElement);
              }
              measureTooltipElement = document.createElement("div");
              measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";
              measureTooltip = new ol.Overlay({
                element: measureTooltipElement,
                offset: [0, -15],
                positioning: "bottom-center",
              });
              map.addOverlay(measureTooltip);
            }

            //格式化测量面积
            var formatArea = function (polygon) {
              //定义面积变量
              var area;
              //获取平面面积
              area = polygon.getArea();
              //定义输出变量
              var output;
              //当面积大于10000时，转换为平方千米，否则为平方米
              if (area > 10000) {
                output =
                  Math.round((area / 1000000) * 100) / 100 + " " + "km<sup>2</sup>";
              } else {
                output = Math.round(area * 100) / 100 + " " + "m<sup>2</sup>";
              }
              return output;
            };

            addInteraction();
          });
          //侧面结束-----------------------------------------------------------------end

          // //点击查询详细信息
          map.on("singleclick", function (evt) {
            let feature = map.forEachFeatureAtPixel(
              evt.pixel,
              (feature) => feature
            );
            if (feature) {
              //移除之前的绘制对象
              // map.removeInteraction(draw);
              // //将帮助提示的覆盖标注从地图中删除
              // map.removeOverlay(helpTooltip);
              // //将测量提示的覆盖标注从地图中删除
              // map.removeOverlay(measureTooltip);
            }
          });
          // map.on("singleclick", function (evt) {
          //   let feature = map.forEachFeatureAtPixel(
          //     evt.pixel,
          //     (feature) => feature
          //   );
          //   if(feature) {
          //     document.getElementById("info").innerHTML = "";
          //     that.mapHaDataValue = true;
          //     var ifConsole = feature.values_.createBy;
          //     if (ifConsole =="mapTheGeomFsssId") {
          //       let obj = {};
          //       that.mapHasDateStatus = 0;
          //       obj.deptName = feature.values_.deptName;//行政区划名称
          //       obj.zjddm = feature.values_.zjddm;//宅基地代码
          //       obj.houseDataConfirmStatus = feature.values_.houseDataConfirmStatus; //状态
          //       obj.fssslx = feature.values_.fssslx; //附属设施类型
          //       obj.jzmj = feature.values_.jzmj; //建筑面积
          //       obj.qsly = feature.values_.qsly;//权属来源
          //       obj.fwzt = feature.values_.fwzt; //房屋状态
          //       obj.sfsp = feature.values_.sfsp; //是否审批
          //       obj.sffz = feature.values_.sffz; //是否发证
          //       obj.jglx = feature.values_.jglx; //结构类型
          //       obj.sfzzsy = feature.values_.sfzzsy; //是否正在使用
          //       obj.jzwqk = feature.values_.jzwqk; //建筑物情况
          //       obj.tdzk = feature.values_.tdzk; //审批或建设前土地状况
          //       obj.sfsgcf = feature.values_.sfsgcf; //是否受过处罚
          //       obj.sysNormalDisable = feature.values_.sysNormalDisable; //是否停用
          //       //附属设施类型字典项
          //       that.getDicts("fsss_type").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.fssslx !=null && obj.fssslx !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.fssslx == assetTypeOptions[i].dictValue) {
          //               obj.fssslx = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //权属类型字典项
          //       that.getDicts("acquisition_method").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.qsly !=null && obj.qsly !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.qsly == assetTypeOptions[i].dictValue) {
          //               obj.qsly = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //房屋状态字典项
          //       that.getDicts("fwzt").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.fwzt !=null && obj.fwzt !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.fwzt == assetTypeOptions[i].dictValue) {
          //               obj.fwzt = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //是否审批字典项
          //       that.getDicts("sys_yes_no").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.sfsp !=null && obj.sfsp !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.sfsp == assetTypeOptions[i].dictValue) {
          //               obj.sfsp = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //是否发证字典项
          //       that.getDicts("sys_yes_no").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.sffz !=null && obj.sffz !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.sffz == assetTypeOptions[i].dictValue) {
          //               obj.sffz = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //结构类型字典项
          //       that.getDicts("house_jglx").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.jglx !=null && obj.jglx !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.jglx == assetTypeOptions[i].dictValue) {
          //               obj.jglx = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //是否正在使用字典项
          //       that.getDicts("sys_yes_no").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.sfzzsy !=null && obj.sfzzsy !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.sfzzsy == assetTypeOptions[i].dictValue) {
          //               obj.sfzzsy = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //房屋状态字典项
          //       that.getDicts("fwzt").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.fwzt !=null && obj.fwzt !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.fwzt == assetTypeOptions[i].dictValue) {
          //               obj.fwzt = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //土地状况字典项
          //       that.getDicts("land_state").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.tdzk !=null && obj.tdzk !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.tdzk == assetTypeOptions[i].dictValue) {
          //               obj.tdzk = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //是否受过处罚字典项
          //       that.getDicts("land_state").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.sfsgcf !=null && obj.sfsgcf !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.sfsgcf == assetTypeOptions[i].dictValue) {
          //               obj.sfsgcf = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       that.mapFsssData = obj;
          //     } else if(ifConsole =="mapTheGeomZrzId"){
          //       let obj = {};
          //       that.mapHasDateStatus = 1;
          //       obj.deptName = feature.values_.deptName;//部门名称
          //       obj.zjddm = feature.values_.zjddm;//宅基地代码
          //       obj.nmfwzh = feature.values_.nmfwzh;//农民房屋幢号
          //       obj.zrzh = feature.values_.zrzh;//自然幢号
          //       obj.jgrq = feature.values_.jgrq;//竣工日期
          //       obj.jzwgd = feature.values_.jzwgd;//建筑物高度
          //       obj.zzdmj = feature.values_.zzdmj;//幢占地面积
          //       obj.zydmj = feature.values_.zydmj;//幢用地面积
          //       obj.scjzmj = feature.values_.scjzmj;//实测建筑面积
          //       obj.zcs = feature.values_.zcs;//总层数
          //       obj.dscs = feature.values_.dscs;//地上层数
          //       obj.dxcs = feature.values_.dxcs;//地下层数
          //       obj.fwjg = feature.values_.fwjg;//房屋结构
          //       obj.sjly = feature.values_.sjly;//数据来源
          //       obj.status = feature.values_.status;//状态
          //       obj.houseDataConfirmStatus = feature.values_.houseDataConfirmStatus;//数据调查确认状态
          //       //字典项转化
          //       //房屋结构字典项
          //       that.getDicts("housing_structure").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.fwjg !=null && obj.fwjg !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.fwjg == assetTypeOptions[i].dictValue) {
          //               obj.fwjg = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //房屋结构字典项
          //       that.getDicts("sjly").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.sjly !=null && obj.sjly !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.sjly == assetTypeOptions[i].dictValue) {
          //               obj.sjly = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       that.mapZrzData = obj;
          //     } else if(ifConsole =="mapTheGeomZjdId"){
          //       let obj = {};
          //       that.mapHasDateStatus = 2;
          //       obj.deptName = feature.values_.deptName;//行政区划名称
          //       obj.suyqrdm = feature.values_.suyqrdm;//所有权人代码
          //       obj.nhdm = feature.values_.nhdm;//农户代码
          //       obj.zjddm = feature.values_.zjddm;//宅基地代码
          //       obj.zdbh = feature.values_.zdbh;//宗地编号
          //       obj.zddm = feature.values_.zddm;//宗地代码
          //       obj.zl = feature.values_.zl;//坐落
          //       obj.zldwdm = feature.values_.zldwdm;//坐落单位代码
          //       obj.zdmj = feature.values_.zdmj;//宗地面积
          //       obj.yt = feature.values_.yt;//用途
          //       obj.ytmc = feature.values_.ytmc;//用途名称
          //       obj.dj = feature.values_.dj;//宗地编号
          //       obj.jg = feature.values_.jg;//价格万元
          //       obj.qllx = feature.values_.qllx;//权利类型
          //       obj.qlxz = feature.values_.qlxz;//权利性质
          //       obj.qlsdfs = feature.values_.qlsdfs;//权利设定方式
          //       obj.rjl = feature.values_.rjl;//容积率
          //       obj.jzmd = feature.values_.jzmd;//建筑密度
          //       obj.jzxg = feature.values_.jzxg;//建筑限高
          //       obj.zdszd = feature.values_.zdszd;//宗地四至-东
          //       obj.zdszn = feature.values_.zdszn;//宗地四至-南
          //       obj.zdszx = feature.values_.zdszx;//宗地四至-西
          //       obj.zdszb = feature.values_.zdszb;//宗地四至-北
          //       obj.zdt = feature.values_.zdt;//宗地图
          //       obj.tfh = feature.values_.tfh;//图幅号
          //       obj.djh = feature.values_.djh;//地籍号
          //       obj.sjly = feature.values_.sjly;//数据来源
          //       obj.lyzk = feature.values_.lyzk;//当前利用状况
          //       obj.xzkssj = feature.values_.xzkssj;//闲置开始时间
          //       obj.sffz = feature.values_.sffz;//是否发证
          //       obj.zjdzsh = feature.values_.zjdzsh;//宅基地证书号
          //       obj.zjdxctp = feature.values_.zjdxctp;//宅基地现场图片
          //       obj.zjdqdfs = feature.values_.zjdqdfs;//宅基地取得方式
          //       obj.bccjl = feature.values_.bccjl;//被惩处经历
          //       obj.bccbz = feature.values_.bccbz;//被惩处备注
          //       obj.yctcyx = feature.values_.yctcyx;//有偿退出意向
          //       obj.zjdpzmj = feature.values_.zjdpzmj;//宅基地批准面积
          //       obj.zjdxzyy = feature.values_.zjdxzyy;//宅基地闲置原因
          //       obj.lzyx = feature.values_.lzyx;//流转意向
          //       obj.sysNormalDisable = feature.values_.sysNormalDisable;//是否停用
          //       //字典项转化
          //       //是否发证字典项
          //       that.getDicts("sys_yes_no").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.sffz !=null && obj.sffz !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.sffz == assetTypeOptions[i].dictValue) {
          //               obj.sffz = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //利用状态字典项
          //       that.getDicts("zjdlyzk").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.lyzk !=null && obj.lyzk !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.lyzk == assetTypeOptions[i].dictValue) {
          //               obj.lyzk = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //流转意向字典项
          //       that.getDicts("is_have").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.lzyx !=null && obj.lzyx !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.lzyx == assetTypeOptions[i].dictValue) {
          //               obj.lzyx = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //有偿退出意向字典项
          //       that.getDicts("is_have").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.yctcyx !=null && obj.yctcyx !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.yctcyx == assetTypeOptions[i].dictValue) {
          //               obj.yctcyx = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //被惩处经历字典项
          //       that.getDicts("is_have").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.bccjl !=null && obj.bccjl !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.bccjl == assetTypeOptions[i].dictValue) {
          //               obj.bccjl = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //宅基地取得方式字典项
          //       that.getDicts("acquisition_method").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.zjdqdfs !=null && obj.zjdqdfs !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.zjdqdfs == assetTypeOptions[i].dictValue) {
          //               obj.zjdqdfs = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //权利设定方式字典项
          //       that.getDicts("right_setting_mode").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.qlsdfs !=null && obj.qlsdfs !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.qlsdfs == assetTypeOptions[i].dictValue) {
          //               obj.qlsdfs = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       //数据来源字典项
          //       that.getDicts("sjly").then((response) => {
          //         var assetTypeOptions = response.data;
          //         if(obj.sjly !=null && obj.sjly !=""){
          //           for(var i=0;assetTypeOptions.length >i; i++){
          //             if(obj.sjly == assetTypeOptions[i].dictValue) {
          //               obj.sjly = assetTypeOptions[i].dictLabel;
          //               break;
          //             }
          //           }
          //         }
          //       });
          //       that.mapZjdData = obj;
          //     } else {
          //       that.mapHaDataValue = false;
          //     }
          //   }else {
          //     that.mapHaDataValue = false;
          //   }
          // });
          //当前账套没有任何空间数据
          if(mapTalkAbout){
            let deptName = this.$store.state.user.loginDeptId + "";
            getQueryLand(deptName).then((response) => {
              if (response.code == 200) {
                let InsertCode = response.data;
                if (InsertCode != null) {
                  var lat = InsertCode.lat;
                  var lng = InsertCode.lng;
                  var center;
                  if(lat !=null && lng !=null && lat !="" && lng !=""){
                    center = [lng,lat];
                  }else {
                    center =[115.452752, 31.789033];
                  }
                  map.getView().animate({
                    // 只设置需要的属性即可
                    center: ol.proj.fromLonLat(center), // 中心点
                    zoom: 17.9, // 缩放级别
                    rotation: undefined, // 缩放完成view视图旋转弧度
                    duration: 1000, // 缩放持续时间，默认不需要设置
                  });
                }
              }
            });
          }
        },

        /*右侧列表 --展开收缩*/
        selectionPushMap() {
          this.selectionIconShow = true;
          this.homesteadListStatus = true;
          $(".homesteadList_wrap").animate(
            {
              right: "0",
            },
            300
          );
        },
        homesteadListShrink() {
          this.selectionIconShow = false;
          $(".homesteadList_wrap").animate(
            {
              right: "-300px",
            },
            300
          );
          setTimeout(() => {
            this.homesteadListStatus = false;
          }, 300);
        },
        checkClick(res){
          // 1、全选与不全选模块
          $(".checkall").change(function() {
            // console.log($(this).prop("checked"));输出全选按钮的选中状态
            $(".item-list-checkbox .checkitem").prop("checked", $(this).prop("checked"));
            if($(this).prop("checked")){

            }else {

            }
          });
          // 2、小复选框模块
          $(".checkitem").change(function() {
            if ($(".checkitem:checked").length === $(".checkitem").length) {
              $(".checkall").prop("checked", true);
            } else {
              $(".checkall").prop("checked", false);
            }
          })
        },
        //绘制多边形地图
        drawMapPolygonFun() {

        },
        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);
          });
        },
      }
    }
</script>

<style scoped lang="scss">

  .bannerBg{
    width: 100%;
    color:#fff;
    /*padding:10px;*/
    background: linear-gradient(134deg,#7ac943 1%, #22b7f2);
  }
  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
  .activeBtn{
    background:#fff;
    height:50px;
    border-radius:25px;
    color:#7AC943;
    line-height:50px;
    text-align:center;
    font-size:20px;
    width: 24%;
    box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
  }
  .disactiveBtn{
    background:rgba(255,255,255,.4);
    height:50px;
    border-radius:25px;
    color:#fff;
    line-height:50px;
    text-align:center;
    font-size:20px;
    width: 24%;
    box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
  }
  .van-cell__label{
    color: #969799;
    font-size: 12px;
    line-height: 20px;
    margin:0
  }
  .map_area {
    width: 50vw;
    height: 50vh;
    z-index:1;
    background:#000;
    position: fixed;
    left: 0;
    top: 0;
  }
  .van-field__label{
    width:50%;
  }
  .rightZoom_wrap {
    position: absolute;
    right: 3%;
    top: 35%;
    margin-top: -200px;
    background: #fff;
    margin-bottom: 16px;
    border-radius: 10px;
    text-align: center;
    padding: 15px 20px;
    img{
      margin: 0 auto;
    }
    .amplification {
      line-height: 1;
      font-size: 18px;
      text-align: center;
      margin-top: 5px;
    }
  }
  .mapZoom_wrap {
    position: absolute;
    right: 3%;
    top: 50%;
    margin-top: -200px;
    background: #fff;
    margin-bottom: 16px;
    border-radius: 10px;
    padding: 0px 20px;
    div{
      padding: 15px 0;
      border-bottom: 1px solid #C9C9C9;
      &:last-child{
        border: none;
      }
      p{
        margin-top: 5px;
      }
    }
    .qtMap {
      font-size: 18px;
      text-align: center;
      line-height: 1;
    }

    .clMap {
      font-size: 18px;
      text-align: center;
      line-height: 1;
    }

    .hcMap {
      font-size: 18px;
      text-align: center;
      line-height: 1;
    }

    .htMap {
      font-size: 18px;
      text-align: center;
      line-height: 1;
    }

    .dwMap {
      font-size: 18px;
      text-align: center;
      line-height: 1;
    }
  }
  .rightIcon_wrap {
    position: absolute;
    right: 16px;
    bottom: 160px;
    .selectionIcon_wrap {
      width: 74px;
      background: #fff;
      border-radius: 10px;
      padding: 14px 0;

      .icon {
        width: 38px;
        height: 38px;
        background: url("../../assets/images/homestead/selection_icon.png")
        no-repeat;
        background-size: 100% 100%;
        margin: 0 auto 4px;
      }
      .text {
        font-size: 24px;
        text-align: center;
      }
    }
    .positioning_wrap {
      width: 74px;
      background: #fff;
      margin-bottom: 16px;
      border-radius: 10px;
      height: 74px;
      display: flex;
      justify-content: center; /* 相对父元素水平居中 */
      align-items: center; /*  子元素相对父元素垂直居中*/
      .icon {
        width: 38px;
        height: 38px;
        background: url("../../assets/images/homestead/positioning_icon.png")
        no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
      }
    }
  }
  .homesteadList_wrap {
    // display: none;
    display: flex;
    position: absolute;
    right: -200px;
    top: 0px;
    bottom: 0px;
    width: 300px;
    background: #fff;
    z-index: 999;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;

    flex-direction: column;
    .noInfo_data {
      font-size: 28px;
      text-align: center;
      height: 300px;
      line-height: 300px;
      color: #666;
    }
    .title_m {
      color: #333;
      line-height: 36px;
      padding: 20px 40px 22px;
      .name {
        font-size: 36px;
        line-height: 42px;
        height: 42px;
      }
      .more_icon {
        width: 38px;
        height: 38px;
        background: url("../../assets/images/homestead/selectionNext_icon.png")
        no-repeat;
        float: right;
        margin-top: 2px;
      }
    }

    .main_m {
      overflow-y: auto;
      padding: 10px 0;
      // height: 300px;
      flex: 1;
      .flex_block {
        height: 70px;
        display: flex;
        // justify-content: center; /* 相对父元素水平居中 */
        align-items: center; /*  子元素相对父元素垂直居中 */
        padding: 0 40px;
        &.active {
          box-shadow: 0px 0px 10px rgba(24, 45, 51, 0.5);
        }
        .name_text {
          font-size: 28px;
          flex: 0.5;
          overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /*超出部分文字以...显示*/
        }
        .square_text {
          font-size: 28px;
          flex: 0.4;
        }
        .operation_mian {
          flex: 0 0 150px;

          .describe {
            font-size: 20px;
            padding: 6px 5px;
            float: right;
            color: #fff;
            border-radius: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 150px;
            &.yph {
              background: #b026ff;
            }
            &.dlzdph {
              background: #ff6f36;
            }
            &.ylz {
              background: #7fff4c;
            }
            &.dlz {
              background: rgb(255, 232, 76);
            }
            &.ylzdph {
              background: #ff7dd0;
            }
            &.zy {
              background: rgb(100, 30, 100);
            }
            &.xz {
              background: rgb(60, 100, 180);
            }
            &.chdb {
              background: #fe0303;
            }
          }
        }
      }
    }
    .footerBtn_wrap {
      flex: 0 0 90px;
      display: flex;
      justify-content: center; /* 相对父元素水平居中 */
      align-items: center; /*  子元素相对父元素垂直居中 */

      .options {
        flex: 1;
        font-size: 38px;
        display: flex;
        justify-content: center; /* 相对父元素水平居中 */
        align-items: center; /*  子元素相对父元素垂直居中 */
        height: 90px;
        &:first-child {
          border-bottom-left-radius: 15px;
        }
        &.active {
          background: #3cbf5b;
          color: #fff;
        }
      }
    }
  }

  .checkbox {
    width: 200px;
    margin: 30px auto;
  }

  .thead-checkbox {
    background-color: lightgray;
  }

  .item-checkbox {
    border: 1px solid darkgray;
  }

</style>