nsgk_mobile/src/views/homesteadSurvey/list.vue

<template>
  <div class="app-container">
    <van-sticky>
    <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=".5rem" 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 style="display:flex;width:90%;margin:0 auto;">
          <div :class="{activeBtn : activeBtn==1,disactiveBtn :activeBtn!=1 }" @click="activeBtn=1"
          ><van-icon size=".3rem" 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,getNh()">
            <van-icon size=".3rem" 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=".3rem" 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=".3rem" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn4'+(activeBtn!=4?'4':'')+'.png')" />
            切换地图
          </div>
        </div>
      </div>
    </div>
      <div style="background:#fff;padding:10px 0;">
        <div style="border:1px solid rgb(122, 201, 67);width:90%;margin:0 auto;border-radius:15px;height:.8rem;display:flex;font-size:.3rem;">
          <div style="flex:1;text-align:center;">
            <span style="color:rgb(122, 201, 67);line-height:.8rem;">总户数：</span>
            <span style="color:rgb(250, 83, 83);line-height:.8rem;">{{totalH}} <span style="font-size:12px;">户</span></span>
          </div>
          <div style="flex:1;text-align:center;">
            <span style="color:rgb(122, 201, 67);line-height:.8rem">总人数：</span>
            <span style="color:rgb(250, 83, 83);line-height:.8rem">{{totalR}} <span style="font-size:12px;">人</span></span>
          </div>
        </div>
      </div>
    </van-sticky>
    <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=".8rem" @click="onClickzjd" style="vertical-align:middle;"/>
        </template>
      </van-search>
      <van-tabs v-model="active" title-active-color="#7AC943" color="#7AC943" swipeable animated @click="getZjdList">
        <van-tab >
          <template #title>全部<van-badge v-if="qbNums>0" :content="qbNums" /></template>
          <van-pull-refresh v-model="isLoadingzjd" @refresh="onRefreshzjd">
          <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 v-if="item.syqr!=null&&item.syqr!=''" style="color:#22B7F2">{{limitWords(item.syqr)}}</p>
              <p v-if="item.syqr==null||item.syqr==''" style="color:#878787">无</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-pull-refresh>
        </van-tab>
        <van-tab >
          <template #title>已核查<van-badge v-if="yhcNums>0" :content="yhcNums" /></template>
          <van-pull-refresh v-model="isLoadingzjd" @refresh="onRefreshzjd">
          <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 v-if="item.syqr!=null&&item.syqr!=''" style="color:#22B7F2">{{limitWords(item.syqr)}}</p>
              <p v-if="item.syqr==null||item.syqr==''" style="color:#878787">无</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-pull-refresh>
        </van-tab>
        <van-tab >
          <template #title>未核查<van-badge v-if="whcNums>0" :content="whcNums" /></template>
          <van-pull-refresh v-model="isLoadingzjd" @refresh="onRefreshzjd">
          <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 v-if="item.syqr!=null&&item.syqr!=''" style="color:#22B7F2">{{limitWords(item.syqr)}}</p>
              <p v-if="item.syqr==null||item.syqr==''" style="color:#878787">无</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-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
    <div v-if="activeBtn==2" >
      <van-search v-model="nhvalue" placeholder="请输入农户姓名或证件号" show-action @search="onSearchnh">
        <template #action>
          <van-icon name="add" color="rgba(122,201,67,1)" size=".8rem" @click="onClicknh" style="vertical-align:middle;"/>
        </template>
      </van-search>
      <van-pull-refresh v-model="isLoadingnh" @refresh="onRefreshnh">
      <van-cell  v-for="(item,index) in nhlist" :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.hzxm}}</p>
        </template>
        <template #default>
          <van-button plain round color="#7AC943" size="mini" style="vertical-align:middle;margin-top:15px;" @click="showPopupnh(item)">查看详情</van-button>
        </template>
        <template #label>
          <p>证件号码:{{item.hzzjhm}}</p>
          <p>农户代码:{{item.nhdm}}</p>
        </template>
        <template #icon>
          <van-icon name="clock" color="#22b7f2" style="margin-top:10px;margin-right:10px;"/>
        </template>
      </van-cell>
      </van-pull-refresh>
    </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
            autocomplete="off"
            v-model="qlrform.qydm"
            name="区域代码"
            label="区域代码"
            placeholder="禁止修改"
            disabled
            input-align="right"
          />
          <van-field
            autocomplete="off"
            v-model="qlrform.suyqrdm"
            name="所有权人代码"
            label="所有权人代码"
            disabled
            placeholder="自动生成"
            input-align="right"
          />
          <van-field
            autocomplete="off"
            v-model="qlrform.suyqrmc"
            name="所有权人名称"
            label="所有权人名称"
            required
            placeholder="所有权人名称"
            input-align="right"
            :rules="[{ required: true, message: '所有权人名称不能为空' }]"
          />
          <van-field
            autocomplete="off"
            v-model="qlrform.suyqxzName"
            name="所有权性质"
            label="所有权性质"
            required
            placeholder="所有权性质"
            input-align="right"
            :rules="[{ required: true, message: '所有权性质不能为空' }]"
            @click="showsuyqxz = true"
          />
          <van-field
            autocomplete="off"
            v-model="qlrform.suyqxz"
            style="display:none"
          />
          <van-popup v-model="showsuyqxz" position="bottom" input-align="right">
            <van-picker
              show-toolbar
              :columns="suyqxzOptions"
              value-key="dictLabel"
              @confirm="onConfirmsuyqxz"
              @cancel="showsuyqxz = false"
            />
          </van-popup>
          <van-field
            autocomplete="off"
            v-model="qlrform.dbrxm"
            name="代表人姓名"
            label="代表人姓名"
            required
            placeholder="代表人姓名"
            input-align="right"
            :rules="[{ required: true, message: '代表人姓名不能为空' }]"
          />
          <van-field
            autocomplete="off"
            v-model="qlrform.dbrzjlx"
            style="display:none"
          />
          <van-field
            autocomplete="off"
            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" input-align="right">
            <van-picker
              show-toolbar
              :columns="zjlxOptions"
              value-key="dictLabel"
              @confirm="onConfirmdbrzjlx"
              @cancel="showdbrzjlx = false"
            />
          </van-popup>
          <van-field
            autocomplete="off"
            v-model="qlrform.dbrzjhm"
            name="代表人证件号码"
            label="代表人证件号码"
            required
            placeholder="代表人证件号码"
            input-align="right"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            autocomplete="off"
            v-model="qlrform.dbrlxdh"
            name="代表人联系电话"
            label="代表人联系电话"
            placeholder="代表人联系电话"
            type="number"
            input-align="right"
            required
            :rules="[{ required: true, message: '代表人联系电话不能为空' }]"
          />
          <van-field
            autocomplete="off"
            v-model="qlrform.dbrtxdz"
            name="代表人通讯地址"
            label="代表人通讯地址"
            required
            placeholder="代表人通讯地址"
            input-align="right"
            :rules="[{ required: true, message: '代表人通讯地址不能为空' }]"
          />
          <van-field
            autocomplete="off"
            v-model="qlrform.dbryzbm"
            name="代表人邮政编码"
            label="代表人邮政编码"
            required
            placeholder="代表人邮政编码"
            input-align="right"
            :rules="[{ required: true, message: '代表人邮政编码不能为空' }]"
          />
          <van-field name="radio" label="是否成立农村集体经济组织" required input-align="right" autocomplete="off">
            <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
            autocomplete="off"
            v-model="qlrform.dlrxm"
            name="代理人姓名"
            label="代理人姓名"
            placeholder="代理人姓名"
            input-align="right"
          />
          <van-field
            autocomplete="off"
            v-model="qlrform.dlrzjlx"
            style="display:none"
          />
          <van-field
            autocomplete="off"
            v-model="qlrform.dlrzjlxName"
            name="代理人证件类型"
            label="代理人证件类型"
            placeholder="代理人证件类型"
            input-align="right"
            @click="showdlrzjlx = true"
          />
          <van-popup v-model="showdlrzjlx" position="bottom" input-align="right">
            <van-picker
              show-toolbar
              :columns="zjlxOptions"
              value-key="dictLabel"
              @confirm="onConfirmdlrzjlx"
              @cancel="showdlrzjlx = false"
            />
          </van-popup>
          <van-field
            autocomplete="off"
            v-model="qlrform.dlrzjhm"
            name="代理人证件号码"
            label="代理人证件号码"
            placeholder="代理人证件号码"
            input-align="right"
          />
          <van-field
            autocomplete="off"
            v-model="qlrform.dlrlxdh"
            name="代理人联系电话"
            label="代理人联系电话"
            placeholder="代理人联系电话"
            input-align="right"
          />
          <van-field
            autocomplete="off"
            v-model="qlrform.dlrtxdz"
            name="代理人通讯地址"
            label="代理人通讯地址"
            placeholder="代理人通讯地址"
            input-align="right"
          />
          <van-field
            autocomplete="off"
            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
          autocomplete="off"
          v-model="qlrform.ncjtjjzzdm"
          name="农村集体经济组织代码"
          label="农村集体经济组织代码"
          placeholder="农村集体经济组织代码"
          input-align="right"
        />
        <van-field
          autocomplete="off"
          v-model="qlrform.ncjtjjzzmc"
          name="农村集体经济组织名称"
          label="农村集体经济组织名称"
          placeholder="农村集体经济组织名称"
          input-align="right"
        />
        <van-field
          autocomplete="off"
          v-model="qlrform.fbfdm"
          name="发包方代码"
          label="发包方代码"
          placeholder="发包方代码"
          input-align="right"
        />
        <van-field
          autocomplete="off"
          v-model="qlrform.fbfmc"
          name="发包方名称"
          label="发包方名称"
          placeholder="发包方名称"
          input-align="right"
        />
        <van-field
          autocomplete="off"
          v-model="qlrform.sjlyName"
          name="数据来源"
          label="数据来源"
          placeholder="数据来源"
          input-align="right"
          @click="showsjly = true"
          required
          :rules="[{ required: true, message: '数据来源不能为空' }]"
        />
        <van-field
          autocomplete="off"
          v-model="qlrform.sjly"
          style="display:none"
        />
        <van-popup v-model="showsjly" position="bottom" input-align="right">
          <van-picker
            show-toolbar
            :columns="sjlyOptions"
            value-key="dictLabel"
            @confirm="onConfirmsjly"
            @cancel="showsjly = false"
          />
        </van-popup>
        <van-field
          autocomplete="off"
          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" style="overflow:hidden">
      <!--      <van-search placeholder="请输入宅基地号查询" v-if="false">
              <template #action>
              </template>
            </van-search>-->
      <div id="mapWrapAll" style="width: 100%;height: 80vh"></div>
      <div id="info" style="display: none"></div>
      <van-overlay :show="showSearch" @click="closeSearchBox" />
      <!--搜索栏目-->
      <div class="searchBar_wrap" :style="{bottom : bottomHeight}">
        <van-search
          v-model="seachText"
          show-action
          placeholder="请输入宗地或权利人信息"
        >
          <template #action>
            <div id="query">搜索</div>
          </template>
        </van-search>
        <div class="searchBox">
          <van-cell center v-for="(item,index) in mapDataAll">
            <template #title>
              <p><van-icon name="manager" /><span>{{item.syqr}}</span><span style="background: rgba(122, 201, 67, 0.4);color:#7ac943">{{item.houseDataConfirmStatus}}</span></p>
            </template>
            <template #default>
              <p style="border: 1px solid #7ac943;color:#7ac943;" @click="zjdSs(item)">查看详情</p>
            </template>
            <template #label>
              <p style="font-size: 0.25rem;color: #666666;">宅基地代码 {{item.zjddm}}</p>
              <p style="font-size: 0.25rem;color: #666666;">宗地面积 {{item.zdmj}}㎡</p>
            </template>
          </van-cell>
        </div>
      </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" id="mapAllQt">
          <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="zjdHc">
          <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" v-model="checkAllFlag" @click="checkAllArray">全选</van-checkbox>
            <div style="height: 15px;"></div>
            <van-checkbox-group v-model="checked" @change="handleChecked" ref="checkboxGroup">
              <van-checkbox name="fsssSx" shape="square" style="margin-bottom: 5px;" id="fsssSx">
                <template #default>
                  附属设施<span style="display: inline-block;background: #00FFFF;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
                </template>
              </van-checkbox>
              <van-checkbox name="zrzSx" shape="square" style="margin-bottom: 5px;" id="zrzSx">
                <template #default>
                  自<i style="margin-right: 0.5em;"></i>然<i style="margin-right: 0.5em;"></i>幢<span style="display: inline-block;background: #FFD306;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
                </template>
              </van-checkbox>
              <van-checkbox name="zjdSx" shape="square" style="margin-bottom: 5px;" id="zjdSx">
                <template #default>
                  宅<i style="margin-right: 0.5em;"></i>基<i style="margin-right: 0.5em;"></i>地<span style="display: inline-block;background: #AE57A4;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
                </template>
              </van-checkbox>
            </van-checkbox-group>
          </div>
        </div>
      </div>
      <van-overlay :show="selectionIconShow" @click="homesteadListShrink" />
    </div>
    <van-popup v-model="shownh" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="shownh=false"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">{{nhform.id?"":"新增"}}户主信息</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="margin:20px;">
        <van-form @submit="onSubmitnh">
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="nhform.suyqrdm"
            name="所有权人代码"
            label="所有权人代码"
            placeholder="所有权人代码"
            required
            disabled
            :rules="[{ required: true, message: '所有权人代码不能为空' }]"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="nhform.nhdm"
            name="农户代码"
            label="农户代码"
            placeholder="农户代码"
            required
            :rules="[{ required: true, message: '农户代码不能为空' }]"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="nhform.hzxm"
            name="户主姓名"
            label="户主姓名"
            placeholder="户主姓名"
            required
            :rules="[{ required: true, message: '户主姓名不能为空' }]"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="nhform.hzzjlxName"
            name="户主证件类型"
            label="户主证件类型"
            placeholder="户主证件类型"
            required
            readonly
            :rules="[{ required: true, message: '户主证件类型不能为空' }]"
            @click="showhzzjlx = true"
          />
          <van-field
            autocomplete="off"
            v-model="nhform.hzzjlx"
            style="display:none"
          />
          <van-field
            autocomplete="off"
            v-model="nhform.hzzjhm"
            input-align="right"
            name="户主证件号码"
            label="户主证件号码"
            placeholder="户主证件号码"
            required
            :rules="[{ required: true, message: '户主证件号码不能为空' }]"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="nhform.txdz"
            name="通讯地址"
            label="通讯地址"
            placeholder="通讯地址"
            required
            :rules="[{ required: true, message: '通讯地址不能为空' }]"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="nhform.hncysl"
            name="户内成员数量"
            label="户内成员数量"
            placeholder="户内成员数量"
            required
            :rules="[{ required: true, message: '户内成员数量不能为空' }]"
          />
          <van-field name="radio" label="婚姻状况" input-align="right" autocomplete="off">
            <template #input>
              <van-radio-group v-model="nhform.hyzk" direction="horizontal">
                <van-radio v-for="dict in hyzkOptions" :key="dict.dictValue" :name="dict.dictValue">{{dict.dictLabel}}</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="nhform.phone"
            name="电话号码"
            label="电话号码"
            placeholder="电话号码"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="nhform.occupationName"
            name="职业"
            label="职业"
            placeholder="职业"
            required
            readonly
            :rules="[{ required: true, message: '职业不能为空' }]"
            @click="showhzoccupation = true"
          />
          <van-field
            autocomplete="off"
            v-model="nhform.occupation"
            style="display:none"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="nhform.jzqkName"
            name="居住情况"
            label="居住情况"
            placeholder="居住情况"
            required
            readonly
            :rules="[{ required: true, message: '居住情况不能为空' }]"
            @click="showhzjzqk = true"
          />
          <van-field
            autocomplete="off"
            v-model="nhform.jzqk"
            style="display:none"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="nhform.jzhcssfyzfName"
            name="在集镇或城市是否有住房"
            label="在集镇或城市是否有住房"
            placeholder="在集镇或城市是否有住房"
            required
            readonly
            :rules="[{ required: true, message: '在集镇或城市是否有住房不能为空' }]"
            @click="showhzjzhcssfyzf = true"
          />
          <van-field
            autocomplete="off"
            v-model="nhform.jzhcssfyzf"
            style="display:none"
          />
          <van-field name="radio" label="在其他村庄是否有住房" input-align="right" autocomplete="off">
            <template #input>
              <van-radio-group v-model="nhform.zqtczsfyzf" direction="horizontal">
                <van-radio name="Y">是</van-radio>
                <van-radio name="N">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="是否本村村民" input-align="right" autocomplete="off">
            <template #input>
              <van-radio-group v-model="nhform.sfbccm" direction="horizontal">
                <van-radio name="Y">是</van-radio>
                <van-radio name="N">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="是否贫困户" input-align="right" autocomplete="off">
            <template #input>
              <van-radio-group v-model="nhform.sfpkh" direction="horizontal">
                <van-radio name="Y">是</van-radio>
                <van-radio name="N">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="是否五保户" input-align="right" autocomplete="off">
            <template #input>
              <van-radio-group v-model="nhform.sfwbh" direction="horizontal">
                <van-radio name="Y">是</van-radio>
                <van-radio name="N">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="nhform.sjlyName"
            name="数据来源"
            label="数据来源"
            placeholder="数据来源"
            required
            readonly
            :rules="[{ required: true, message: '能为空' }]"
            @click="showhzsjly = true"
          />
          <van-field
            autocomplete="off"
            v-model="nhform.sjly"
            style="display:none"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="nhform.bz"
            name="备注"
            label="备注"
            placeholder="备注"
          />
          <div style="text-align:center;overflow:auto;">
            <van-button plain round color="#7AC943" size="mini" style="margin:0 auto;" native-type="button" @click="showPopuphncylist(nhform)">查看户内成员列表</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="showhzsjly" position="bottom">
      <van-picker
        show-toolbar
        :columns="sjlyOptions"
        value-key="dictLabel"
        @confirm="onConfirmhzsjly"
        @cancel="showhzsjly = false"
      />
    </van-popup>
    <!--户内成员数据来源-->
    <van-popup v-model="showhncysjly" position="bottom">
      <van-picker
        show-toolbar
        :columns="sjlyOptions"
        value-key="dictLabel"
        @confirm="onConfirmhncysjly"
        @cancel="showhncysjly = false"
      />
    </van-popup>
    <!--集市或城市是否有住房-->
    <van-popup v-model="showhzjzhcssfyzf" position="bottom">
      <van-picker
        show-toolbar
        :columns="jzhcssfyzfOptions"
        value-key="dictLabel"
        @confirm="onConfirmhzjzhcssfyzf"
        @cancel="showhzjzhcssfyzf = false"
      />
    </van-popup>
    <!--户主证件类型-->
    <van-popup v-model="showhzzjlx" position="bottom">
      <van-picker
        show-toolbar
        :columns="zjlxOptions"
        value-key="dictLabel"
        @confirm="onConfirmhzzjlx"
        @cancel="showhzzjlx = false"
      />
    </van-popup>
    <!--户内成员证件类型-->
    <van-popup v-model="showhncyzjlx" position="bottom">
      <van-picker
        show-toolbar
        :columns="zjlxOptions"
        value-key="dictLabel"
        @confirm="onConfirmhncyzjlx"
        @cancel="showhncyzjlx = false"
      />
    </van-popup>
    <!--户内成员与户主关系-->
    <van-popup v-model="showhncyyhzgx" position="bottom">
      <van-picker
        show-toolbar
        :columns="yhzgxOptions"
        value-key="dictLabel"
        @confirm="onConfirmhncyyhzgx"
        @cancel="showhncyyhzgx = false"
      />
    </van-popup>
    <!--户内成员职业-->
    <van-popup v-model="showhncyoccupation" position="bottom">
      <van-picker
        show-toolbar
        :columns="occupationOptions"
        value-key="dictLabel"
        @confirm="onConfirmhncyoccupation"
        @cancel="showhncyoccupation = false"
      />
    </van-popup>
    <!--户内成员成员备注-->
    <van-popup v-model="showhncycybz" position="bottom">
      <van-picker
        show-toolbar
        :columns="cybzOptions"
        value-key="dictLabel"
        @confirm="onConfirmhncycybz"
        @cancel="showhncycybz = false"
      />
    </van-popup>
    <!--户内成员居住情况-->
    <van-popup v-model="showhncyjzqk" position="bottom">
      <van-picker
        show-toolbar
        :columns="jzqkOptions"
        value-key="dictLabel"
        @confirm="onConfirmhncyjzqk"
        @cancel="showhncyjzqk = false"
      />
    </van-popup>
    <!--户主职业-->
    <van-popup v-model="showhzoccupation" position="bottom">
      <van-picker
        show-toolbar
        :columns="occupationOptions"
        value-key="dictLabel"
        @confirm="onConfirmhzoccupation"
        @cancel="showhzoccupation = false"
      />
    </van-popup>
    <!--户主居住情况-->
    <van-popup v-model="showhzjzqk" position="bottom">
      <van-picker
        show-toolbar
        :columns="jzqkOptions"
        value-key="dictLabel"
        @confirm="onConfirmhzjzqk"
        @cancel="showhzjzqk = false"
      />
    </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=false"
        >
          <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(item)" 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;"/>
            {{item.xm}}</p>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">证件号码</p>
            <p  style="flex:1;text-align:right;">{{item.zjhm}}</p>
          </div>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">与户主关系</p>
            <p style="flex:1;text-align:right;">{{yhzgxfy(item.yhzgx)}}</p>
          </div>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" style="height:100%" class="delete-button" @click="deletehncy(item.id,index)" />
        </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="onSubmithncy">
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="form5.nhdm"
            name="农户代码"
            label="农户代码"
            placeholder="农户代码"
            disabled
            required
            :rules="[{ required: true, message: '农户代码不能为空' }]"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="form5.xm"
            name="姓名"
            label="姓名"
            placeholder="姓名"
            required
            :rules="[{ required: true, message: '姓名不能为空' }]"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="form5.zjlxName"
            name="证件类型"
            label="证件类型"
            placeholder="证件类型"
            required
            :rules="[{ required: true, message: '证件类型不能为空' }]"
            readonly
            @click="showhncyzjlx = true"
          />
          <van-field
            autocomplete="off"
            v-model="form5.zjlx"
            style="display:none"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="form5.yhzgxName"
            name="与户主关系"
            label="与户主关系"
            placeholder="与户主关系"
            required
            :rules="[{ required: true, message: '与户主关系不能为空' }]"
            @click="showhncyyhzgx = true"
          />
          <van-field
            autocomplete="off"
            v-model="form5.yhzgx"
            style="display:none"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="form5.zjhm"
            name="证件号码"
            label="证件号码"
            placeholder="证件号码"
            required
            :rules="[{ required: true, message: '证件号码不能为空' }]"
          />
          <van-field autocomplete="off" name="radio" label="性别" input-align="right" required
                     :rules="[{ required: true, message: '性别不能为空' }]">
            <template #input>
              <van-radio-group v-model="form5.xb" direction="horizontal">
                <van-radio name="1">男</van-radio>
                <van-radio name="0">女</van-radio>
                <van-radio name="2">未知</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="form5.lxdh"
            name="联系电话"
            label="联系电话"
            placeholder="联系电话"
          />
          <van-field name="radio" label="户口类型" input-align="right" autocomplete="off">
            <template #input>
              <van-radio-group v-model="form5.hklx" direction="horizontal">
                <van-radio name="1">农业</van-radio>
                <van-radio name="0">非农业</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="婚姻状况" input-align="right" autocomplete="off">
            <template #input>
              <van-radio-group v-model="form5.hyzk" direction="horizontal">
                <van-radio v-for="dict in hyzkOptions" :key="dict.dictValue" :name="dict.dictValue">{{dict.dictLabel}}</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="是否本集体经济组织成员" input-align="right" autocomplete="off">
            <template #input>
              <van-radio-group v-model="form5.sfbjtjjzzcy" direction="horizontal">
                <van-radio name="Y">是</van-radio>
                <van-radio name="N">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="form5.cybzName"
            name="成员备注"
            label="成员备注"
            placeholder="成员备注"
            @click="showhncycybz = true"
          />
          <van-field
            autocomplete="off"
            v-model="form5.cybz"
            style="display:none"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="form5.cybzsm"
            name="成员备注说明"
            label="成员备注说明"
            placeholder="成员备注说明"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="form5.occupationName"
            name="职业"
            label="职业"
            placeholder="职业"
            required
            :rules="[{ required: true, message: '' }]"
            @click="showhncyoccupation = true"
          />
          <van-field
            autocomplete="off"
            v-model="form5.occupation"
            style="display:none"
          />
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="form5.jzqkName"
            name="居住情况"
            label="居住情况"
            placeholder="居住情况"
            required
            :rules="[{ required: true, message: '' }]"
            @click="showhncyjzqk = true"
          />
          <van-field
            autocomplete="off"
            v-model="form5.jzqk"
            style="display:none"
          />
          <van-field name="radio" label="是否贫困户" input-align="right" autocomplete="off">
            <template #input>
              <van-radio-group v-model="form5.sfpkh" direction="horizontal">
                <van-radio name="Y">是</van-radio>
                <van-radio name="N">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="是否五保户" input-align="right" autocomplete="off">
            <template #input>
              <van-radio-group v-model="form5.sfwbh" direction="horizontal">
                <van-radio name="Y">是</van-radio>
                <van-radio name="N">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            autocomplete="off"
            input-align="right"
            v-model="form5.sjlyName"
            name="数据来源"
            label="数据来源"
            placeholder="数据来源"
            required
            :rules="[{ required: true, message: '' }]"
            @click="showhncysjly = true"
          />
          <van-field
            autocomplete="off"
            v-model="form5.sjly"
            style="display:none"
          />
          <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:show="showhzht" style="width: 94%;border-radius: 15PX">
      <div style="height: 200px;padding: 0 3%;">
        <h1 style="font-size: 0.35rem;font-weight: 400;border-bottom: 1px solid #ccc; line-height: 0.8rem;"><i style="display: inline-block;width: 1%;height: 0.4rem;background: #7ac943;vertical-align: middle;margin-right: 1%;"></i>是否完成绘制<van-icon name="cross" color="#666666" style="position: absolute;right: 2%;top: 0.1rem" @click="showhzht = false" /></h1>

        <div style="text-align: center;margin-top: 30PX">
          <p style="font-size: 0.3rem;display: inline-block;background: #ccc;padding: 15PX 10%;border-radius: 30PX;color: #FFF;margin-right: 10%;" @click="showhzht = false,deleteHistory" >否</p>
          <p style="font-size: 0.3rem;display: inline-block;background: #7ac943;padding: 15PX 10%;border-radius: 30PX;color: #FFF;" @click="showhzlx = true,showhzht = false">是</p>
        </div>
      </div>
    </van-popup>

    <!--  background: #ccc  -->

    <van-popup v-model:show="showhzlx" style="width: 94%;border-radius: 15PX">
      <div style="height: 200px;padding: 0 3%;">
        <h1 style="font-size: 0.35rem;font-weight: 400;border-bottom: 1px solid #ccc; line-height: 0.8rem;"><i style="display: inline-block;width: 1%;height: 0.4rem;background: #7ac943;vertical-align: middle;margin-right: 1%;"></i>请选择绘制类型<van-icon name="cross" color="#666666" style="position: absolute;right: 2%;top: 0.1rem" @click="showhzlx = false,showhzht = true" /></h1>

        <div style="text-align: center;margin-top: 30PX">
          <p style="font-size: 0.3rem;display: inline-block;background: #7ac943;padding: 15PX 10%;border-radius: 30PX;color: #FFF;margin-right: 2%;" @click="zjdTz">宅基地</p>
          <p style="font-size: 0.3rem;display: inline-block;background: #b026ff;padding: 15PX 10%;border-radius: 30PX;color: #FFF;margin-right: 2%;"  @click="zrzTz">自然幢</p>
          <p style="font-size: 0.3rem;display: inline-block;background: #3ac2db;padding: 15PX 10%;border-radius: 30PX;color: #FFF;"  @click="fsssTz">附属设施</p>
        </div>
      </div>
    </van-popup>
    <!--绘制结束弹窗结束-->
  </div>
</template>

<script>
    import {listZjdzd,getQueryLand,getZjdzd} from "@/api/homesteadSurvey/zjdzd";
    import {addNh, delNh, exportNh, getNh, listNh, updateNh} from "@/api/homesteadSurvey/nh";
    import {addNhhncy, delNhhncy, exportNhhncy, getNhhncy, listNhhncy, updateNhhncy} from "@/api/homesteadSurvey/nhhncy";
    import {listShyqr} from "@/api/homesteadSurvey/shyqr";
    import {listSuyqr,updateSuyqr,addSuyqr} from "@/api/homesteadSurvey/suyqr";
    import {listZrz,getZrzZjdDmList,getZrz} from "@/api/homesteadSurvey/zrz";
    import {listFsss,getFsssZjdDmList,getfsss} from "@/api/homesteadSurvey/fsss";
    import { listTown, getTown } from "@/api/homesteadSurvey/town";
    import { listVillage} from "@/api/homesteadSurvey/village";
    import $ from "jquery";
    import {Dialog} from "vant";
    import {ref} from "vue";
    export default {
      name: "homesteadList",
      data() {
        return {
          //全部
          qbNums:0,
          //已调查数量
          yhcNums:0,
          //未核查数量
          whcNums:0,
          // 总户数
          totalH:0,
          // 总人数
          totalR:0,
          zjdSx:true,
          zrzSx :true,
          fsssSx:true,
          showhncysjly:false,
          showhzsjly:false,
          showhncycybz:false,
          showhncyzjlx:false,
          showhncyyhzgx:false,
          showhzjzhcssfyzf:false,
          showhncyoccupation:false,
          showhncyjzqk:false,
          showhzoccupation:false,
          showhzjzqk:false,
          // 下拉刷新
          isLoadingnh:false,
          countnh:0,
          isLoadingzjd:false,
          countqb:0,
          countyhc:0,
          countwhc:0,
          // 使用权人表单弹出
          shownh:false,
          showhzht:false,
          showhzlx:false,
          showhncylist:false,
          showhncy:false,
          activeBtn:1,
          value:'',
          // 宅基地搜索框
          zjdvalue:"",
          // 使用权人搜索框
          nhvalue:"",
          active:null,
          // 全部列表
          list:[],
          // 已核查列表
          list1:[],
          // 未核查列表
          list2:[],
          // 户主列表
          nhlist:[],
          // 户内成员表单
          form5: {},
          // 户内成员列表
          hncylist:[],
          currentRate:20,
          // 使用权人
          nhform:[],
          // 户主列表
          hzform:{},
          // 权利人列表
          qlrform:[],
          // 权利人性质弹出框
          showsuyqxz:false,
          // 代理人证件类型弹出框
          showdlrzjlx:false,
          // 代表人证件类型弹出框
          showdbrzjlx:false,
          // 数据来源弹出框
          showsjly:false,
          // 证件类型字典
          zjlxOptions: [],
          // 所有权性质字典
          suyqxzOption: [],
          // 婚姻状况字典
          hyzkOptions:[],
          // 数据来源字典
          sjlyOptions:[],
          // 居住情况字典
          jzqkOptions:[],
          // 与户主关系字典
          yhzgxOptions:[],
          // 职业字典
          occupationOptions:[],
          // 集镇或城市是否有住房字典
          jzhcssfyzfOptions:[],
          // 成员备注字典
          cybzOptions:[],
          columns:[],
          show1:false,
          showhzzjlx: false,
          // 路由传过来的任务基本信息。
          item: {},
          //地图使用 --start
          openMap: false,
          mapTheGeomZrzId: null,
          mapTheGeomZjdId: null,
          mapTheGeomFsssId: null,
          drawInsert:null,
          mapZjdData:{},
          mapZrzData:{},
          mapFsssData:{},
          mapZjdDataTure:"",
          mapZjdTeAll:{
            active:"",
            mapZjdAData:{},
            mapZrzAData:{},
            mapFsssAData:{},
          },
          mapHaDataValue:false,
          mapHasDateStatus: 0, //0附属设施  1自然幢  2宅基地
          selectionIconShow:false,
          homesteadListStatus:false,
          //地图绘制状态
          draw: {
            drawMapPolygon: false, //绘制地图
          },
          mapTownList: null,
          mapVillageList: null,
          coordinate:"",
          checked:['zjdSx', 'zrzSx', 'fsssSx'],
          checkAllMap: false,
          sx:"",
          //搜索---start
          seachText: "",
          selectionIconShow: false,
          //搜索栏目-操作栏显隐
          searchBarOperVisbile: false,
          mapDataAll: "",
          showSearch:false,
          bottomHeight:'0px',
          //搜索---end
          //测面
          textMjAll:"",
          clickBbox:"",
          textMjAllNum:"",
          //核查
          zjdHcDy:"",
          //绘图
          htZjdZrzFsss:"",
          //筛选
          checkAllFlag: true,
          CheckedAllArr: [],//全选数组
          dataForm: {
            imageUrl: []
          },
          dataList: [["fsssSx"],["zjdSx"],["zrzSx"]],
          //地图使用 --end
          checkBoxAll:[]
        };
      },
      mounted(){
      },
      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.getDicts("hyzk").then(response => {
          this.hyzkOptions = response.data;
        });
        this.getDicts("occupation").then(response => {
          this.occupationOptions = response.data;
        });
        this.getDicts("living_condition").then(response => {
          this.jzqkOptions = response.data;
        });
        this.getDicts("jzhcssfyzf").then(response => {
          this.jzhcssfyzfOptions = response.data;
        });
        this.getDicts("family_status").then(response => {
          this.yhzgxOptions = response.data;
        });
        this.getDicts("cybz").then(response => {
          this.cybzOptions = response.data;
        });
        this.item = this.$cookies.get("item");
        this.getZjdList();
        this.getTotalHR();
      },
      methods: {
        //删除户内成员
        deletehncy(id,index){
          Dialog.confirm({
            title: '警告',
            message: '删除后无法恢复，确认删除么？',
          })
            .then(() => {
              // on confirm
              delNhhncy(id).then(res => {
                if(res.code=="200"){
                  this.hncylist.splice(index,1);
                }
              })
            })
            .catch(() => {
              // on cancel
            });
        },
        // 字数限制
        limitWords(val){
          if(val.length>11){
            val = val.slice(0,10) +"..."
          }
          return val
        },
        // 与户主关系翻译
        yhzgxfy(value){
          let label
          this.yhzgxOptions.map(res => {
            if(res.dictValue == value){
              label = res.dictLabel
            }
          })
          return label
        },
        onRefreshzjd(){
          this.isLoadingzjd = false;
          let _this = this
          if(this.active==1){
            let params = {
              "deptId" : this.item.deptId,
              "houseDataConfirmStatus" : "CONFIRMED",
              "pageNum": this.countyhc+1,
              "pageSize":10,
            }
            listZjdzd(params).then((response) => {
                if(response.rows.length>0&&this.list1.length<response.total){
                  response.rows.map(res => {
                    this.list1.unshift(res)
                  })
                  this.countyhc++
                }
            });
          }else if(this.active==2){
            let params = {
              "deptId" : this.item.deptId,
              "houseDataConfirmStatus" : "UNCONFIRMED",
              "pageNum": this.countwhc+1,
              "pageSize":10,
            }
            listZjdzd(params).then((response) => {
                if(response.rows.length>0&&this.list2.length<response.total){
                  response.rows.map(res => {
                    this.list2.unshift(res)
                  })
                  this.countwhc++
                }
            });
          }else{
            let params = {
              "deptId" : this.item.deptId,
              "pageNum": this.countqb+1,
              "pageSize":10,
            }
            listZjdzd(params).then((response) => {
                if(response.rows.length>0&&this.list.length<response.total){
                  response.rows.map(res => {
                    _this.list.unshift(res)
                  })
                  this.countqb++
                }
            });
          }
        },
        getTotalHR(){
          let params = {
            "deptId" : this.item.deptId,
            "pageNum": 1,
            "pageSize":10,
          }
          listNh(params).then((response) => {
            if(response.rows.length>=0){
              this.totalH = response.total
            }
            listNhhncy(params).then((res) => {
              if(res.rows.length>=0){
                this.totalR = res.total + this.totalH
              }
            });
          });

        },
        onRefreshnh(){
          this.isLoadingnh = false
          let params = {
            "deptId" : this.item.deptId,
            "pageNum": this.countnh+1,
            "pageSize":10,
          }
          listNh(params).then((response) => {
            if(response.rows.length>0&&this.nhlist.length<response.total){
              response.rows.map(res => {
                this.nhlist.unshift(res)
              })
              this.countnh++
            }
          });
        },
        setCookies(item){
          this.$cookies.set("search",JSON.stringify(item));
          console.log(JSON.stringify(item));
        },
        // 入户核查搜索框新增。
        onClickzjd(){
          this.$cookies.remove("search");
          this.$router.push({name:'homesteadAdd'});
        },
        // 农户信息搜索框新增。
        onClicknh(){
          this.shownh = true;
          let params = {
            "deptId" : this.item.deptId
          }
          this.qlrform={}
          this.nhform={
            "suyqrdm":null,
            "deptId":this.item.deptId,
            "hzzjlx":'01',
            "hzzjlxName":"身份证",
            "hyzk":'02',
            "occupation":'1',
            "occupationName":'务农',
            "jzqk":'3',
            "jzqkName":'常年居住',
            "jzhcssfyzf":'1',
            "jzhcssfyzfName":'无住房',
            "zqtczsfyzf":'Y',
            "sfbccm":'Y',
            "sfpkh":'N',
            "sfwbh":'N',
            "sjly":'07',
            "sjlyName":'农村集体产权制度改革',
          }
          listSuyqr(params).then((response) => {
            if(response.rows.length>0){
              this.qlrform = response.rows[0]
              this.nhform.suyqrdm = this.qlrform.suyqrdm
            }
          });

        },
        // 返回
        onClickLeft(){
          this.$router.push('/homesteadSurvey/index');
        },
        onConfirmhncysjly(value){
          this.form5.sjlyName = value.dictLabel
          this.form5.sjly = value.dictValue
          this.showhncysjly= false
        },
        onConfirmhzsjly(value){
          this.nhform.sjlyName = value.dictLabel
          this.nhform.sjly = value.dictValue
          this.showhzsjly= false
        },
        onConfirmhncycybz(value){
          this.form5.cybzName = value.dictLabel
          this.form5.cybz = value.dictValue
          this.showhncycybz= false
        },
        onConfirmhzjzhcssfyzf(value){
          this.nhform.jzhcssfyzfName = value.dictLabel
          this.nhform.jzhcssfyzf = value.dictValue
          this.showhzjzhcssfyzf= false
        },
        onConfirmhncyyhzgx(value){
          this.form5.yhzgxName = value.dictLabel
          this.form5.yhzgx = value.dictValue
          this.showhncyyhzgx = false
        },
        onConfirmhncyzjlx(value){
          this.form5.zjlxName = value.dictLabel
          this.form5.zjlx = value.dictValue
          this.showhncyzjlx = false
        },
        onConfirmhncyjzqk(value){
          this.form5.jzqkName = value.dictLabel
          this.form5.jzqk = value.dictValue
          this.showhncyjzqk = false
        },
        onConfirmhzjzqk(value){
          this.nhform.jzqkName = value.dictLabel
          this.nhform.jzqk = value.dictValue
          this.showhzjzqk = false
        },
        onConfirmhncyoccupation(value){
          this.form5.occupationName = value.dictLabel
          this.form5.occupation = value.dictValue
          this.showhncyoccupation = false
        },
        onConfirmhzoccupation(value){
          this.nhform.occupationName = value.dictLabel
          this.nhform.occupation = value.dictValue
          this.showhzoccupation = false
        },
        onConfirmhzzjlx(value){
          this.nhform.hzzjlxName = value.dictLabel
          this.nhform.hzzjlx = value.dictValue
          this.showhzzjlx = false
        },
        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
        },
        // 户主保存
        onSubmitnh(){
          if(this.nhform.id!=null){
            updateNh(this.nhform).then(
              response => {
                let _this =this
                this.$toast({
                  icon: 'success', // 找到自己需要的图标
                  message: '修改成功',
                  duration:"1000",
                  onClose:function(){
                    _this.shownh = false
                    _this.getNh()
                  }
                })
              }
            );
          }else{
            this.nhform.deptId = this.item.deptId
            let params = {
              deptId:this.item.deptId,
              nhdm:this.nhform.nhdm
            }
            listNh(params).then(res => {
              if(res.total>0){
                this.$toast({
                  icon: 'error', // 找到自己需要的图标
                  message: '保存失败，系统中已存在此农户代码！',
                  duration:"1000"
                })
              }else{
                addNh(this.nhform).then(
                  response => {
                    this.totalR+=1
                    this.totalH+=1
                    let _this =this
                    this.$toast({
                      icon: 'success', // 找到自己需要的图标
                      message: '保存成功',
                      duration:"1000",
                      onClose:function(){
                        _this.shownh = false
                        _this.getNh()
                      }
                    })
                  }
                );
              }
            })
          }
        },
        // 所有权人保存
        onSubmitsyqr(){
          if(this.qlrform.id!=null){
            updateSuyqr(this.qlrform).then(
              response => {
                let _this =this
                this.$toast({
                  icon: 'success', // 找到自己需要的图标
                  message: '修改成功',
                  duration:"1000"
                })
              }
            );
          }else{
            this.qlrform.deptId = this.item.deptId
            addSuyqr(this.qlrform).then(
              response => {
                let _this =this
                this.$toast({
                  icon: 'success', // 找到自己需要的图标
                  message: '保存成功',
                  duration:"1000"
                })
              }
            );
          }
        },
        // 查询所有权人
        getSyqr(){
          let params = {
            "deptId" : this.item.deptId
          }
          this.qlrform={
            "suyqxz":'40',
            "suyqxzName":'集体土地所有权',
            "dbrzjlx":'01',
            "dbrzjlxName":'身份证',
            "sfclncjtjjzz":'农村宅基地使用权确权登记发证',
            "sjly":'04',
          }
          listSuyqr(params).then((response) => {
            if(response.rows.length>0){
              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
                }
              })
            }
          });
        },
        // 查询农户列表
        getNh(){
          let params = {
            "deptId" : this.item.deptId
          }
          listNh(params).then((response) => {
            this.nhlist = response.rows
            this.totalN = response.total
          });
        },
        // 农户信息搜索框
        onSearchnh(){
          let params = {
            "deptId" : this.item.deptId,
            "nhValue" : this.nhvalue
          }
          console.log(params)
          listNh(params).then((response) => {
            this.nhlist = 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(item){
          this.showhncy = true
          if(item.id==null||item.id==""){
            this.form5 = {
              "nhdm":this.nhform.nhdm,
              "deptId":this.nhform.deptId,
              "zjlx":'01',
              "zjlxName":"身份证",
              "yhzgx":"14",
              "yhzgxName":"妻",
              "hyzk":'02',
              "hklx":'1',
              "occupation":'1',
              "occupationName":'务农',
              "jzqk":'3',
              "jzqkName":'常年居住',
              "sfbjtjjzzcy":'Y',
              "xb":'0',
              "sfbccm":'Y',
              "sfpkh":'N',
              "sfwbh":'N',
              "sjly":'07',
              "sjlyName":'农村集体产权制度改革',
            }
          }else{
            let _this = this
            this.form5 = item
            this.jzhcssfyzfOptions.map(res => {
              if(res.dictValue == item.jzhcssfyzf){
                this.form5.jzhcssfyzfName = res.dictLabel
              }
            })
            this.zjlxOptions.map(res => {
              if(res.dictValue == item.zjlx){
                this.form5.zjlxName = res.dictLabel
              }
            })
            this.occupationOptions.map(res => {
              if(res.dictValue == item.occupation){
                this.form5.occupationName = res.dictLabel
              }
            })
            this.jzqkOptions.map(res => {
              if(res.dictValue == item.jzqk){
                this.form5.jzqkName = res.dictLabel
              }
            })
            this.yhzgxOptions.map(res => {
              if(res.dictValue == item.yhzgx){
                this.form5.yhzgxName = res.dictLabel
              }
            })
            this.cybzOptions.map(res => {
              if(res.dictValue == item.cybz){
                this.form5.cybzName = res.dictLabel
              }
            })
            this.sjlyOptions.map(res => {
              if(res.dictValue == item.sjly){
                this.form5.sjlyName = res.dictLabel
              }
            })
          }
        },
        // 户内成员列表
        showPopuphncylist(item){
          this.showhncylist =  true
          let params = {
            "nhdm":item.nhdm,
            "deptId":this.item.deptId
          }
          listNhhncy(params).then((response) => {
            if (response.code == 200) {
              this.hncylist = response.rows
              console.log(this.hncylist)
            }
          });
        },
        showPopupnh(item){
          this.shownh = true
          this.nhform = item
          this.jzhcssfyzfOptions.map(res => {
            if(res.dictValue == item.jzhcssfyzf){
              this.nhform.jzhcssfyzfName = res.dictLabel
            }
          })
          this.zjlxOptions.map(res => {
            if(res.dictValue == item.hzzjlx){
              this.nhform.hzzjlxName = res.dictLabel
            }
          })
          this.occupationOptions.map(res => {
            if(res.dictValue == item.occupation){
              this.nhform.occupationName = res.dictLabel
            }
          })
          this.jzqkOptions.map(res => {
            if(res.dictValue == item.jzqk){
              this.nhform.jzqkName = res.dictLabel
            }
          })
          this.sjlyOptions.map(res => {
            if(res.dictValue == item.sjly){
              this.nhform.sjlyName = res.dictLabel
            }
          })
        },
        getZjdList(){
           if(this.active==1){
            let params = {
              "deptId" : this.item.deptId,
              "houseDataConfirmStatus" : "CONFIRMED",
              "pageNum": 1,
              "pageSize":10,
            }
            listZjdzd(params).then((response) => {
              if (response.code == 200) {
                this.yhcNums = response.total
                this.list1 = response.rows
              }
            });
          }else if(this.active==2){
            let params = {
              "deptId" : this.item.deptId,
              "houseDataConfirmStatus" : "UNCONFIRMED",
              "pageNum": 1,
              "pageSize":10,
            }
            listZjdzd(params).then((response) => {
              if (response.code == 200) {
                this.whcNums = response.total
                this.list2 = response.rows
              }
            });
          }else{
             console.log(1)
               let params = {
                 "deptId" : this.item.deptId,
                 "pageNum": 1,
                 "pageSize":10,
               }
               listZjdzd(params).then((response) => {
                 console.log(response)
                 if (response.code == 200) {
                   this.qbNums = response.total
                   this.list = response.rows
                 }
               });
             let params1 = {
               "deptId" : this.item.deptId,
               "houseDataConfirmStatus" : "CONFIRMED",
               "pageNum": 1,
               "pageSize":10,
             }
             listZjdzd(params1).then((response) => {
               if (response.code == 200) {
                 this.yhcNums = response.total
               }
             });
             let params2 = {
               "deptId" : this.item.deptId,
               "houseDataConfirmStatus" : "UNCONFIRMED",
               "pageNum": 1,
               "pageSize":10,
             }
             listZjdzd(params2).then((response) => {
               if (response.code == 200) {
                 this.whcNums = response.total
               }
             });
           }
        },
        onConfirm(){},
        onSubmithncy(){
          if (this.form5.id != null) {
            updateNhhncy(this.form5).then(response => {
              let _this =this
              this.$toast({
                icon: 'success', // 找到自己需要的图标
                message: '修改成功',
                duration:"1000",
                onClose:function(){
                  _this.showhncy = false
                  let params = {
                    "nhdm":_this.form5.nhdm
                  }
                  listNhhncy(params).then((response) => {
                    _this.hncylist = response.rows
                  })
                }
              })
            });
          } else {
            addNhhncy(this.form5).then(response => {
              let _this = this
              this.$toast({
                icon: 'success', // 找到自己需要的图标
                message: '保存成功',
                duration:"1000",
                onClose:function(){
                  _this.showhncy = false
                  console.log(_this.form5,this.form5)
                  let params = {
                    "nhdm":_this.form5.nhdm
                  }
                  listNhhncy(params).then((response) => {
                    console.log(response.rows)
                    _this.hncylist = response.rows
                  })
                }
              })
            });
          }
        },
        mapShow() {
          //通过数据直接查询方式--------加载较慢 start
          //镇边界获取
          // 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);
          //               });
          //             }
          //           });
          //         }
          //       });
          //     });
          //   }
          // });
          //通过数据直接查询方式--------加载较慢 end
        setTimeout(() => {
          this.GetMapsInit();
        }, 300);
          var that = this;
          setTimeout(function () {
            var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
            console.log($('.searchBox').outerHeight(true)+'px')
            that.bottomHeight = -height+'px'
          },500)
        },
        //地图加载 -----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]),
              //center: ol.proj.fromLonLat([115.452752, 31.789033]),
              zoom: 10,
              minZoom: 5, //地图缩小限制
              maxZoom: 18.3, //地图放大限制
              pinchRotate: false, //禁止地图旋转
            }),
          });

          //使用geoserver服务查询开始 -------------------start
          //镇边界查询开始 ------------------------------start
          // var zhenTc= new ol.layer.Tile({
          //   source: new ol.source.TileWMS({
          //     url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
          //     params: {
          //       LAYERS: 'zjd_dc:t_house_survey_border_town',
          //       TILED: true,
          //       //cql_filter: cql_filter,
          //       SRID: 3857,
          //     },
          //   }),
          // });
          // map.addLayer(zhenTc);
          //镇边界查询开始 ------------------------------end
          //村边界查询开始 ------------------------------start
          var cql_filter = "dept_id='" + that.$cookies.get("item").deptId + "'";
          var cunTc= new ol.layer.Tile({
            source: new ol.source.TileWMS({
              url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
              params: {
                LAYERS: 'zjd_dc:t_house_survey_border_village',
                TILED: true,
                cql_filter: cql_filter,
                SRID: 3857,
              },
            }),
          });
          //定位查询位置
          let param_dw = {
            srsName: "EPSG:3857",
            service: "WFS",
            version: "1.0.0",
            request: "GetFeature",
            typename: "zjd_dc:t_house_survey_border_village",
            //featureNS: 'nsgk_hc',//命名空间 URI
            cql_filter: cql_filter,
            //featurePrefix: 'nationalwater',//工作区名称
            //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
            outputFormat: "application/json",
            //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
          };
          let url_dw = "http://116.255.223.226:8080/geoserver/zjd_dc/wfs"; //wfsurl;
          url_dw = url_dw + "?";
          for (let key in param_dw) {
            url_dw = url_dw + key + "=" + param_dw[key] + "&";
          }
          url_dw = url_dw.substr(0, url_dw.length - 1);
          fetch(url_dw, {
            method: "POST", // *GET, POST, PUT, DELETE, etc.
          })
            .then((res) => {
              var geojsonmap = res.json();
              return geojsonmap;
            })
            .then((data) => {
              console.log(data);
              let resolution = map.getView().getResolutionForExtent(data.bbox,map.getSize());
              map.getView().fit(data.bbox);
              map.getView().setResolution(resolution);
              // var datamap = data.bbox;
              // var center = ol.extent.getCenter(datamap);
              // map.getView().animate({
              //   // 只设置需要的属性即可
              //   center: center, // 中心点
              //   rotation: undefined, // 缩放完成view视图旋转弧度
              // });
            })
            .catch((error) => {
              console.log("【异常】", error);
            });
          map.addLayer(cunTc);
          //村边界查询开始 ------------------------------end
          //宅基地图层查询开始 ------------------start
          var cql_filter_all = "dept_id='" + that.$cookies.get("item").deptId + "'";
          var zjdTc= new ol.layer.Tile({
            source: new ol.source.TileWMS({
              url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
              params: {
                LAYERS: 'zjd_dc:t_house_survey_zjdzd',
                TILED: true,
                cql_filter: cql_filter_all,
                SRID: 3857,
              },
            }),
          });
          map.addLayer(zjdTc);
          //宅基地图层查询开始 ------------------start

          //自然幢图层查询开始 ------------------start
          var zrzTc= new ol.layer.Tile({
            source: new ol.source.TileWMS({
              url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
              params: {
                LAYERS: 'zjd_dc:t_house_survey_zrz',
                TILED: true,
                cql_filter: cql_filter_all,
                SRID: 3857,
              },
            }),
          });
          map.addLayer(zrzTc);
          //自然幢图层查询开始 ------------------start

          //附属设施图层查询开始 ------------------start
          var fsssTc= new ol.layer.Tile({
            source: new ol.source.TileWMS({
              url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
              params: {
                LAYERS: 'zjd_dc:t_house_survey_fsss',
                TILED: true,
                cql_filter: cql_filter_all,
                SRID: 3857,
              },
            }),
          });
          map.addLayer(fsssTc);
          //附属设施图层查询开始 ------------------start
          //使用geoserver服务查询开始 -------------------end


          //数据库直接加载数据渲染方式---------------------------------------------------start
          //判断当前账套是否有数据
          // 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
          //数据库直接加载数据渲染方式---------------------------------------------------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;// 获取经度
            });
            console.log(longitude,latitude);
            if(latitude !=null && longitude !=null && latitude !="" && longitude !="" && latitude !=undefined && longitude !=undefined ){
              Zb = [longitude,latitude];
            }else {
              Zb =[115.452752, 31.789033];
            }
            //获取坐标点LocationManager
            geoGps().then(response => {

            });
            //矢量标注样式设置函数，设置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) {
                  that.showhzht = true;
                  that.htZjdZrzFsss =that.coordinate;
                  // 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.removeInteraction(draw_map);
                  that.coordinate = "";
                })
                .catch(() => {
                  //删除画图点
                  map.removeInteraction(draw_map);
                });
            }

            addInteraction();
          });
          //删除之前绘制图层
          $("#deleteHistory").on("click", function () {
            console.log("否进入");
            map.removeInteraction(draw_map);
          });
          //开始绘制图层- -----end

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

          //地图定义
          var delete_map = ["mapZjd", "mapZrz","mapFsss"];
          var texiao_layer_zjd;
          var texiao_layer_zrz;
          var texiao_layer_fsss;
          //按照查询条件人名  定位地图-----------------start
          $("#query").on("click", function () {
            //数据库查询数据------------------------------------------------------start
            var val = that.seachText;
            that.mapDataAll ="";
            if (val == "") {
                that.$toast('请填写查询条件再查询');
              } else {
              var styleZjd = new ol.style.Style({
                stroke: new ol.style.Stroke({
                  //边界样式
                  color: "#CCFF66",
                  width: 6,
                }),
              });
              let params = {
                "deptId" : that.$cookies.get("item").deptId,
                "zjddm" : val,
                "syqr" : val,
                "pageSize":20,
              }
              listZjdzd(params).then((response) => {
                if(response.rows.length>=0){
                  that.mapDataAll = response.rows;
                  console.log(that.mapDataAll);
                  for(var hg=0; that.mapDataAll.length >0; hg++){
                    var mapNum = that.mapDataAll[hg].houseDataConfirmStatus;
                    if(mapNum == "UNCONFIRMED"){
                      that.mapDataAll[hg].houseDataConfirmStatus = "未核查";
                    } else if (mapNum == "CONFIRMED"){
                      that.mapDataAll[hg].houseDataConfirmStatus = "已核查";
                    }else{
                      that.mapDataAll[hg].houseDataConfirmStatus = "";
                    }
                    if (that.mapDataAll[hg] !=null && that.mapDataAll[hg].theGeom != null && that.mapDataAll[hg].theGeom != "") {
                      that.mapDataAll[hg].createBy = 'mapTheGeomZjdId';
                     var  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\":" + that.mapDataAll[hg].theGeom + ",    \"properties\":" + JSON.stringify(that.mapDataAll[hg]) + "}"),
                        }),
                        style: styleZjd
                      });
                      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, // 缩放持续时间，默认不需要设置
                      });
                    }
                  }
                  setTimeout(function () {
                  console.log($(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true))
                  that.showSearch = true ;
                  var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
                  document.styleSheets[0].insertRule(
                    "@keyframes test" +
                    "{" +
                    "0%{bottom: -" + height + "px;}" +
                    "100%{bottom: 0px;}" +
                    "}"
                  )
                  $('.searchBar_wrap').css({'animation':'test 0.5s ease-in-out 0s 1 alternate forwards','-webkit-animation':'test 0.5s ease-in-out 0s 1 alternate forwards'});
                  //}
                  },500);
                } else {
                  that.$toast("暂无数据")
                }
              });
            }
            //数据库查询数据------------------------------------------------------end
            //地图查询------------------------------------------------------------start
            /**
             * @api wfs服务空间查询
             * @param {*} wfsurl
             * @param {*} srsName
             * @param {*} typeName
             * @param {*} drawType
             * @param {option 可选} geometryField
             */
            // var val = that.seachText;
            // if (val == "") {
            //   that.$toast('请填写查询条件再查询');
            // } else {
            //   //清除之前查询数据
            //   that.mapDataAll =[];
            //   //分类查询查询农地、农房
            //   var difang;
            //   //查询条件
            //   var cql_filter_cun;
            //   var cun = that.$cookies.get("item").deptId;
            //   difang = ["zjd_dc:t_house_survey_zjdzd", "zjd_dc:t_house_survey_zrz","zjd_dc:t_house_survey_fsss"];
            //   var tach = 0;
            //   var once = 0;
            //   for (var i = 0; i < difang.length; i++) {
            //     map.removeLayer(delete_map[i]);
            //     // 数字验证！
            //     var reg = /\d/;
            //     //验证汉子
            //     //var han = /^[\u4e00-\u9fa5]+$/;
            //     if (reg.test(val)) {
            //       //循环判断查询条件
            //       cql_filter_cun = "zjddm='" + val + "'" + "and dept_id='" + cun + "'";
            //     } else {
            //       //循环判断查询条件
            //       if (difang[i] == "zjd_dc:t_house_survey_zjdzd") {
            //         cql_filter_cun = "zjddm='" + val + "'" + "and dept_id='" + cun + "'";
            //       } else if(difang[i] == "zjd_dc:t_house_survey_zrz") {
            //         cql_filter_cun = "zjddm='" + val + "'" + "and dept_id='" + cun + "'";
            //       } else if(difang[i] == "zjd_dc:t_house_survey_fsss") {
            //         cql_filter_cun = "zjddm='" + val + "'" + "and dept_id='" + cun + "'";
            //       }
            //     }
            //     //for(var i=0; i< difang.length; i++){
            //     //cql_filter = "CM='"+cun +"'"+ "and XZQK='待流转待盘活'";
            //
            //     //图层加载
            //
            //     //业务图层  wms服务
            //     delete_map[i] = new ol.layer.Tile({
            //       source: new ol.source.TileWMS({
            //         url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
            //         params: {
            //           LAYERS: difang[i],
            //           //'LAYERS': 'new_shp:new_shp_all',
            //           TILED: true,
            //           cql_filter: cql_filter_cun,
            //           SRID: 3857,
            //         },
            //       }),
            //     });
            //
            //     //}
            //     //定位查询位置
            //     let param_dw = {
            //       srsName: "EPSG:3857",
            //       service: "WFS",
            //       version: "1.0.0",
            //       request: "GetFeature",
            //       typename: difang[i],
            //       //featureNS: 'nsgk_hc',//命名空间 URI
            //       cql_filter: cql_filter_cun,
            //       //featurePrefix: 'nationalwater',//工作区名称
            //       //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
            //       outputFormat: "application/json",
            //       //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
            //     };
            //     let url_dw = "http://116.255.223.226:8080/geoserver/zjd_dc/wfs"; //wfsurl;
            //     url_dw = url_dw + "?";
            //     for (let key in param_dw) {
            //       url_dw = url_dw + key + "=" + param_dw[key] + "&";
            //     }
            //     url_dw = url_dw.substr(0, url_dw.length - 1);
            //     fetch(url_dw, {
            //       method: "POST", // *GET, POST, PUT, DELETE, etc.
            //     })
            //       .then((res) => {
            //         var geojsonmap = res.json();
            //         return geojsonmap;
            //       })
            //       .then((data) => {
            //         tach = tach + 1;
            //         if (data.features != null && data.features != "") {
            //           for(var i=0; data.features.length >i; i++) {
            //             //特效动画实现 -----------------------------start
            //             console.log(tach,"++++++++++++++++++",once)
            //             var datamap = data.features[0].bbox;
            //             if (tach == 1 && once == 0) {
            //               console.log("zrz")
            //               texiao_layer_zjd = new ol.layer.Vector({
            //                 source: new ol.source.Vector(),
            //               });
            //               map.addLayer(texiao_layer_zjd);
            //               var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置
            //               var circle = new ol.Feature({
            //                 geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
            //               });
            //
            //               circle.setStyle(
            //                 new ol.style.Style({
            //                   image: new ol.style.Circle({
            //                     radius: 0,
            //                     stroke: new ol.style.Stroke({
            //                       color: "yellow",
            //                       size: 1,
            //                     }),
            //                   }),
            //                 })
            //               );
            //               texiao_layer_zjd.getSource().addFeature(circle);
            //
            //               // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
            //               var radius = 0;
            //               map.on("postcompose", function () {
            //                 // 增大半径，最大20
            //                 radius++;
            //                 radius = radius % 10;
            //                 // 设置样式
            //                 circle.setStyle(
            //                   new ol.style.Style({
            //                     image: new ol.style.Circle({
            //                       radius: radius,
            //                       stroke: new ol.style.Stroke({
            //                         color: "yellow",
            //                         size: 1,
            //                       }),
            //                     }),
            //                   })
            //                 );
            //               });
            //             } else if(tach == 2) {
            //               console.log("zrz")
            //               texiao_layer_zrz = new ol.layer.Vector({
            //                 source: new ol.source.Vector(),
            //               });
            //               map.addLayer(texiao_layer_zrz);
            //               var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置
            //               var circle = new ol.Feature({
            //                 geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
            //               });
            //
            //               circle.setStyle(
            //                 new ol.style.Style({
            //                   image: new ol.style.Circle({
            //                     radius: 0,
            //                     stroke: new ol.style.Stroke({
            //                       color: "yellow",
            //                       size: 1,
            //                     }),
            //                   }),
            //                 })
            //               );
            //               texiao_layer_zrz.getSource().addFeature(circle);
            //
            //               // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
            //               var radius = 0;
            //               map.on("postcompose", function () {
            //                 // 增大半径，最大20
            //                 radius++;
            //                 radius = radius % 10;
            //                 // 设置样式
            //                 circle.setStyle(
            //                   new ol.style.Style({
            //                     image: new ol.style.Circle({
            //                       radius: radius,
            //                       stroke: new ol.style.Stroke({
            //                         color: "yellow",
            //                         size: 1,
            //                       }),
            //                     }),
            //                   })
            //                 );
            //               });
            //             } else {
            //               console.log("fsss")
            //               texiao_layer_fsss = new ol.layer.Vector({
            //                 source: new ol.source.Vector(),
            //               });
            //               map.addLayer(texiao_layer_fsss);
            //               var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置
            //               var circle = new ol.Feature({
            //                 geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
            //               });
            //
            //               circle.setStyle(
            //                 new ol.style.Style({
            //                   image: new ol.style.Circle({
            //                     radius: 0,
            //                     stroke: new ol.style.Stroke({
            //                       color: "yellow",
            //                       size: 1,
            //                     }),
            //                   }),
            //                 })
            //               );
            //               texiao_layer_fsss.getSource().addFeature(circle);
            //
            //               // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
            //               var radius = 0;
            //               map.on("postcompose", function () {
            //                 // 增大半径，最大20
            //                 radius++;
            //                 radius = radius % 10;
            //                 // 设置样式
            //                 circle.setStyle(
            //                   new ol.style.Style({
            //                     image: new ol.style.Circle({
            //                       radius: radius,
            //                       stroke: new ol.style.Stroke({
            //                         color: "yellow",
            //                         size: 1,
            //                       }),
            //                     }),
            //                   })
            //                 );
            //               });
            //             }
            //             //特效动画实现 -----------------------------end
            //             that.mapDataAll.push(JSON.parse(JSON.stringify(data.features[i].properties)));
            //           }
            //           //定位实现
            //           let resolution = map.getView().getResolutionForExtent(data.bbox, map.getSize());
            //           map.getView().fit(data.bbox);
            //           map.getView().setResolution(resolution);
            //           console.log(that.mapDataAll);
            //         } else if (tach == 1) {
            //           once = once + 1;
            //         } else {
            //           if (once == 1 && tach == 3) {
            //             that.$toast("没有找到相关人员信息");
            //             //that.showSearch = false ;
            //           }else {
            //
            //           }
            //         }
            //       })
            //       .catch((error) => {
            //         console.log("【异常】", error);
            //       });
            //     map.addLayer(delete_map[i]);
            //   }
            //地图查询------------------------------------------------------------end
          });
          //按照查询  定位地图-----------------end

          //筛选附属设施-----------------------------------start
          // $("#fsssSx").click(function () {
          //   console.log(that.checked);
          //   // if(!event.target.checked){
          //   //   map.addLayer(fsssTc);
          //   // }else {
          //   //   map.removeLayer(fsssTc);
          //   // }
          // });
          // $("#zrzSx").click(function () {
          //   console.log(that.checked);
          //   // if(!event.target.checked){
          //   //   map.addLayer(zrzTc);
          //   // }else {
          //   //   map.removeLayer(zrzTc);
          //   // }
          // });
          // $("#zjdSx").click(function () {
          //   console.log(that.checked);
          //   // if(!event.target.checked){
          //   //   map.addLayer(zjdTc);
          //   // }else {
          //   //   map.removeLayer(zjdTc);
          //   // }
          // });
          //筛选附属设施-----------------------------------end
          // //获取类型开始  侧面-----------------------------------------------------------------start
          //样式加载定义
          var vector_drawing_delete;
          $("#area").click(function () {
            console.log("进入测面");
            if(that.textMjAll != "" && that.clickBbox !=""){
              // var styleFsss = new ol.style.Style({
              //   text: new ol.style.Text({
              //     text: that.textMjAll+"㎡",
              //     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: "point", //point 则自动计算面的中心k点然后标注  line 则根据面要素的边进行标注
              //     overflow: false //超出面的部分不显示
              //   }),
              // });
              map.removeLayer(vector_drawing_delete);
              function createLabelStyle() {
                return new ol.style.Style({
                  text: new ol.style.Text({
                    text: that.textMjAll+"㎡",
                    textAlign: "center", //位置
                    textBaseline: "middle", //基准线
                    font: "normal 12px 微软雅黑", //文字样式
                    //text: "标注点", //文本内容
                    fill: new ol.style.Fill({
                      //文本填充样式（即文字颜色)
                      color: "#FF6666",
                    }),
                    overflow: false //超出面的部分不显示
                  }),
                  zIndex: 9999,
                });
              }
              var newcenterFeature = new ol.Feature({
                geometry: new ol.geom.Point(that.clickBbox), //几何信息
                //name: "标注点",
              });
              var sourceMapLook = new ol.source.Vector({wrapX: false});
              vector_drawing_delete = new ol.layer.Vector({
                source: sourceMapLook,
              });
              map.addLayer(vector_drawing_delete);
              newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
              sourceMapLook.addFeature(newcenterFeature);
              that.clickBbox ="";
              that.textMjAll = "";
              //map.addLayer(styleFsss);
            } else if(that.textMjAllNum == "1"){
              that.$toast("该图层面积暂无信息");
            } else {
              that.$toast("选择图层进行面积显示");
            }
          });
          // $("#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

          //全图展示-----------------start
          $("#mapAllQt").click(function (){
            //定位查询位置
            let param_dw = {
              srsName: "EPSG:3857",
              service: "WFS",
              version: "1.0.0",
              request: "GetFeature",
              typename: "zjd_dc:t_house_survey_border_village",
              //featureNS: 'nsgk_hc',//命名空间 URI
              cql_filter: cql_filter,
              //featurePrefix: 'nationalwater',//工作区名称
              //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
              outputFormat: "application/json",
              //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
            };
            let url_dw = "http://116.255.223.226:8080/geoserver/zjd_dc/wfs"; //wfsurl;
            url_dw = url_dw + "?";
            for (let key in param_dw) {
              url_dw = url_dw + key + "=" + param_dw[key] + "&";
            }
            url_dw = url_dw.substr(0, url_dw.length - 1);
            fetch(url_dw, {
              method: "POST", // *GET, POST, PUT, DELETE, etc.
            })
              .then((res) => {
                var geojsonmap = res.json();
                return geojsonmap;
              })
              .then((data) => {
                let resolution = map.getView().getResolutionForExtent(data.bbox,map.getSize());
                map.getView().fit(data.bbox);
                map.getView().setResolution(resolution);
                // var datamap = data.bbox;
                // var center = ol.extent.getCenter(datamap);
                // map.getView().animate({
                //   // 只设置需要的属性即可
                //   center: center, // 中心点
                //   rotation: undefined, // 缩放完成view视图旋转弧度
                // });
              })
              .catch((error) => {
                console.log("【异常】", error);
              });
          });

          //业务图层  wfs服务  属性查询开始 ------------------start
          /**
           * @api wfs服务空间查询
           * @param {*} wfsurl
           * @param {*} srsName
           * @param {*} typeName
           * @param {*} drawType
           * @param {option 可选} geometryField
           */

          var wmsSource = new ol.source.TileWMS({
            url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
            params: {
              LAYERS: "zjd_dc:t_house_survey_all",
              TILED: true,
              SRID: 3857,
              serverType: "geoserver",
              crossOrigin: "anonymous",
            },
          });

          map.on("pointermove", function (evt) {
            if (evt.dragging) {
              return;
            }
            var pixel = map.getEventPixel(evt.originalEvent);
            var hit = map.forEachLayerAtPixel(pixel, function () {
              return true;
            });
            map.getTargetElement().style.cursor = hit ? "pointer" : "";
          });
          //属性查询结束 ------------------end
          //点击查询详细信息
          map.on("singleclick", function (evt) {
            let feature = map.forEachFeatureAtPixel(
              evt.pixel,
              (feature) => feature
            );
            var viewResolution = map.getView().getResolution(); ///** @type {number} */ (view.getResolution());
            var zb = evt.coordinate;
            var url = wmsSource.getFeatureInfoUrl(
              evt.coordinate,
              viewResolution,
              "EPSG:3857",
              { INFO_FORMAT: "text/html" }
            );
            var url_bbox = wmsSource.getFeatureInfoUrl(
              evt.coordinate,
              viewResolution,
              "EPSG:3857",
              { INFO_FORMAT: "application/json" }
            );
            if (url_bbox) {
              fetch(url_bbox).then((res) => {
                var geojsonmap = res.json();
                return geojsonmap;
              })
                .then((data) => {
                  var center = ol.extent.getCenter(data.bbox); //获取边界区域的中心位置
                  that.clickBbox = center;
                })
                .catch((error) => {
                  console.log("【异常】", error);
                });
            }
            if (url) {
              fetch(url)
                .then(function (response) {
                  return response.text();
                })
                .then(function (html) {
                  document.getElementById("info").innerHTML = html;
                  if (html.indexOf("<table") != -1) {
                    that.mapZjdData ="";
                    that.mapZrzData ="";
                    that.mapFsssData ="";
                    that.mapZjdTeAll.active ="1";
                    that.mapZjdTeAll.mapZjdAData ={};
                    that.mapZjdTeAll.mapZrzAData ={};
                    that.mapZjdTeAll.mapFsssAData ={};
                    that.mapZjdDataTure ="";
                    setTimeout(() => {
                      if ($("#info .featureInfo .featureInfo").text() == "t_house_survey_zjdzd") {
                        that.mapHasDateStatus = 2;
                        let obj = {};
                         let trs = $("#info .featureInfo").find("tr:eq(1)");
                        let zjdXq = trs.find("td").eq(0).text();
                        let zjdIdNum = zjdXq.replace("t_house_survey_zjdzd.", "");
                        obj.id = zjdIdNum; //	主键id
                        obj.deptName = trs.find("td").eq(3).text();//行政区划名称
                        // obj.suyqrdm =  trs.find("td").eq(4).text();//所有权人代码
                        // obj.nhdm = trs.find("td").eq(5).text();//农户代码
                        obj.zjddm =  trs.find("td").eq(6).text();//宅基地代码
                        // obj.zdbh = trs.find("td").eq(7).text();//宗地编号
                        // obj.zddm = trs.find("td").eq(8).text();//宗地代码
                        // obj.zl = trs.find("td").eq(9).text();//坐落
                        // obj.zldwdm = trs.find("td").eq(10).text();//坐落单位代码
                        obj.zdmj = trs.find("td").eq(11).text();//宗地面积
                        // obj.yt = trs.find("td").eq(12).text();//用途
                        // obj.ytmc = trs.find("td").eq(13).text();//用途名称
                        // obj.dj = trs.find("td").eq(14).text();//宗地编号
                        // obj.jg = trs.find("td").eq(15).text();//价格万元
                        // obj.qllx = trs.find("td").eq(16).text();//权利类型
                        // obj.qlxz = trs.find("td").eq(17).text();//权利性质
                        // obj.qlsdfs = trs.find("td").eq(18).text();//权利设定方式
                        // obj.rjl = trs.find("td").eq(19).text();//容积率
                        // obj.jzmd = trs.find("td").eq(20).text();//建筑密度
                        // obj.jzxg =  trs.find("td").eq(21).text();//建筑限高
                        // obj.zdszd = trs.find("td").eq(22).text();//宗地四至-东
                        // obj.zdszn = trs.find("td").eq(23).text();//宗地四至-南
                        // obj.zdszx = trs.find("td").eq(24).text();//宗地四至-西
                        // obj.zdszb = trs.find("td").eq(25).text();//宗地四至-北
                        // obj.zdt = trs.find("td").eq(26).text();//宗地图
                        // obj.tfh = trs.find("td").eq(27).text();//图幅号
                        // obj.djh = trs.find("td").eq(28).text();//地籍号
                        // obj.sjly = trs.find("td").eq(29).text();//数据来源
                        // obj.lyzk = trs.find("td").eq(30).text();//当前利用状况
                        // obj.xzkssj = trs.find("td").eq(31).text();//闲置开始时间
                        // obj.sffz = trs.find("td").eq(32).text();//是否发证
                        // obj.zjdzsh = trs.find("td").eq(33).text();//宅基地证书号
                        // obj.bz = trs.find("td").eq(34).text();//备注
                        // obj.houseDataConfirmStatus = trs.find("td").eq(40).text();//调查情况
                        // obj.zjdxctp =trs.find("td").eq(41).text();//宅基地现场图片
                        // obj.zjdqdfs = trs.find("td").eq(42).text();//宅基地取得方式
                        // obj.bccjl = trs.find("td").eq(43).text();//被惩处经历
                        // obj.bccbz = trs.find("td").eq(44).text();//被惩处备注
                        // obj.yctcyx = trs.find("td").eq(45).text();//有偿退出意向
                        // obj.zjdpzmj = trs.find("td").eq(46).text();//宅基地批准面积
                        // obj.zjdxzyy = trs.find("td").eq(47).text();//宅基地闲置原因
                        // obj.lzyx = trs.find("td").eq(48).text();//流转意向
                        // obj.sysNormalDisable = trs.find("td").eq(49).text();//是否停用
                        obj.active = 1;
                        // //字典项转化
                        // //是否发证字典项
                        // 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;
                        //       }
                        //     }
                        //   }
                        // });
                        getZjdzd(669).then((response) => {
                          console.log(response);
                          that.mapZjdData = response.data;
                          that.mapZjdData.active = 1;
                          that.mapZjdTeAll.mapZjdAData =that.mapZjdData;
                          that.mapZjdDataTure = 1;
                          that.zjdHcDy = obj.zjddm;
                        });
                        //let cloneObj = JSON.parse(JSON.stringify(obj));
                        if(obj.zdmj != ""){
                          that.textMjAll = obj.zdmj;
                        } else {
                          that.textMjAllNum = "1";
                        }
                        //that.mapZjdData = cloneObj;
                      } else if($("#info .featureInfo .featureInfo").text() == "t_house_survey_zrz"){
                        let obj = {};
                        that.mapHasDateStatus = 1;
                        let trs = $("#info .featureInfo").find("tr:eq(1)");
                        let zrzXq = trs.find("td").eq(0).text();
                        let zrzIdNum = zrzXq.replace("t_house_survey_zrz.", "");
                        obj.id = zrzIdNum; //	主键id
                        obj.deptName = trs.find("td").eq(3).text();//行政区划名称
                        obj.zjddm = trs.find("td").eq(5).text();//宅基地代码
                        // obj.nmfwzh = trs.find("td").eq(6).text();//农民房屋幢号
                        // obj.zrzh = trs.find("td").eq(7).text();//自然幢号
                        // obj.jgrq = trs.find("td").eq(8).text();//竣工日期
                        // obj.jzwgd = trs.find("td").eq(9).text();//建筑物高度
                        // obj.zzdmj = trs.find("td").eq(10).text();//幢占地面积
                        // obj.zydmj = trs.find("td").eq(11).text();//幢用地面积
                        obj.scjzmj = trs.find("td").eq(12).text();//实测建筑面积
                        // obj.zcs = trs.find("td").eq(13).text();//总层数
                        // obj.dscs = trs.find("td").eq(14).text();//地上层数
                        // obj.dxcs = trs.find("td").eq(15).text();//地下层数
                        // obj.fwjg = trs.find("td").eq(16).text();//房屋结构
                        // obj.sjly = trs.find("td").eq(17).text();//数据来源
                        // obj.bz = trs.find("td").eq(18).text();//备注
                        // obj.status = trs.find("td").eq(19).text();//状态
                        // obj.houseDataConfirmStatus = trs.find("td").eq(24).text();//数据调查确认状态
                        //字典项转化
                        // //房屋结构字典项
                        // 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;
                        //       }
                        //     }
                        //   }
                        // });
                        //let cloneObj = JSON.parse(JSON.stringify(obj));
                        //that.mapZrzData = cloneObj;
                        getZjdzd(669).then((response) => {
                          that.mapZjdAData = response.data;
                          that.mapZjdAData.active = 1;
                          that.mapZjdTeAll.mapZjdAData = that.mapZjdAData;
                          getZrz(8).then((response) => {
                            that.mapZrzData = response.data;
                            that.mapZrzData.active = 3;
                            that.mapZjdTeAll.mapZrzAData =that.mapZrzData;
                            that.zjdHcDy = obj.zjddm;
                          });
                        });
                        if(obj.scjzmj != ""){
                          that.textMjAll = obj.scjzmj;
                        } else {
                          that.textMjAllNum = "1";
                        }
                      } else if($("#info .featureInfo .featureInfo").text() == "t_house_survey_fsss"){
                        let obj = {};
                        that.mapHasDateStatus = 0;
                        let trs = $("#info .featureInfo").find("tr:eq(1)");
                        let fsssXq = trs.find("td").eq(0).text();
                        let fsssIdNum = fsssXq.replace("t_house_survey_fsss.", "");
                        obj.id = fsssIdNum; //	主键id
                        obj.deptName = trs.find("td").eq(4).text();//行政区划名称
                        obj.zjddm = trs.find("td").eq(2).text();//宅基地代码
                        // obj.houseDataConfirmStatus = trs.find("td").eq(6).text(); //状态
                        // obj.fssslx = trs.find("td").eq(7).text(); //附属设施类型
                        obj.jzmj = trs.find("td").eq(8).text(); //建筑面积
                        // obj.qsly = trs.find("td").eq(9).text();//权属来源
                        // obj.fwzt = trs.find("td").eq(10).text(); //房屋状态
                        // obj.sfsp = trs.find("td").eq(11).text(); //是否审批
                        // obj.sffz = trs.find("td").eq(12).text(); //是否发证
                        // obj.jglx = trs.find("td").eq(13).text(); //结构类型
                        // obj.sfzzsy = trs.find("td").eq(14).text(); //是否正在使用
                        // obj.jzwqk = trs.find("td").eq(15).text(); //建筑物情况
                        // obj.tdzk = trs.find("td").eq(16).text(); //审批或建设前土地状况
                        // obj.sfsgcf = trs.find("td").eq(17).text(); //是否受过处罚
                        // obj.remark = trs.find("td").eq(18).text(); //备注
                        // obj.sysNormalDisable = trs.find("td").eq(19).text(); //是否停用
                        //附属设施类型字典项
                        // 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;
                        //       }
                        //     }
                        //   }
                        // });
                        //let cloneObj = JSON.parse(JSON.stringify(obj));
                        //that.mapFsssData = cloneObj;
                        getZjdzd(669).then((response) => {
                          that.mapZjdData = response.data;
                          that.mapZjdData.active = 1;
                          that.mapZjdTeAll.mapZjdAData = that.mapZjdData;
                          getfsss(12).then((response) => {
                            that.mapfsssData.active = 4;
                            that.mapfsssData = response.data;
                            that.mapZjdTeAll.mapFsssAData = that.mapfsssData;
                            that.zjdHcDy = obj.zjddm;
                          });
                        });
                        if(obj.jzmj != ""){
                          that.textMjAll = obj.jzmj;
                        } else {
                          that.textMjAllNum = "1";
                        }
                      } else {

                      }
                    }, 300);
                  } else {

                  }
                });
            }
            //数据库查询详情时使用----------------------------------------start
            // if(feature) {
            //   console.log(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;//是否停用
            //     obj.active = 1;
            //     //字典项转化
            //     //是否发证字典项
            //     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;
            //     console.log(obj.zjddm);
            //     that.zjdHcDy = obj.zjddm;
            //   } else {
            //     that.mapHaDataValue = false;
            //   }
            // }else {
            //   that.mapHaDataValue = false;
            // }
            //数据库查询详情时使用----------------------------------------end
          });
          //数据库循环加载时使用 --------------------加载较慢 ------start
          //当前账套没有任何空间数据
          // 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, // 缩放持续时间，默认不需要设置
          //         });
          //       }
          //     }
          //   });
          // }
          //数据库循环加载时使用 --------------------加载较慢 ------start
        },

        /*右侧列表 --展开收缩*/
        selectionPushMap() {
          this.selectionIconShow = true;
          this.homesteadListStatus = true;
          $(".homesteadList_wrap").animate(
            {
              right: "0",
            },
            300
          );
        },
        homesteadListShrink() {
          this.selectionIconShow = false;
          // this.checked =["zjdSx","zrzSx","fsssSx"];
          $(".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);
          });
        },
        //宅基地点击地图核查
        zjdHc(){
          console.log(this.zjdHcDy);
          if(this.zjdHcDy != "" && this.zjdHcDy != "undefined"){
            if(this.mapZjdData !=undefined && this.mapZjdData !="" && this.mapZjdDataTure !=""){
              this.mapZjdTeAll.active =1;
              this.$cookies.set("search",this.mapZjdTeAll);
              this.$router.push({path:'/homesteadSurvey/add'});
            }
            if(this.mapZrzData !=undefined && this.mapZrzData !=""){
              this.mapZjdTeAll.active =3;
              this.$cookies.set("search",this.mapZjdTeAll);
              this.$router.push({path:'/homesteadSurvey/add'});
            }
            if(this.mapFsssData !=undefined && this.mapFsssData !=""){
              this.mapZjdTeAll.active =4;
              this.$cookies.set("search",this.mapZjdTeAll);
              this.$router.push({path:'/homesteadSurvey/add'});
            }
          } else {
            this.$dialog.alert({
              title: '宅基地核查',
              message: "请从地图选择地图并点击核查",
              theme: 'round-button',
            }).then(() => {
              // on close
            });
          }
        },
        //搜索详情跳转
        zjdSs(item){
          console.log(item);
          this.mapZjdTeAll.mapZjdAData ={};
          this.mapZjdTeAll.mapZrzAData ={};
          this.mapZjdTeAll.mapFsssAData ={};
          //this.mapZjdTeAll.active =1;
          getZjdzd(item.id).then((response) => {
            this.mapZjdData = response.data;
            this.mapZjdData.active = 1;
            this.mapZjdTeAll.mapZjdAData = this.mapZjdData;
            this.$cookies.set("search",this.mapZjdTeAll);
            this.$router.push({path:'/homesteadSurvey/add'});
          });
        },
        //地图查询
        toggleSearch() {
          $("#query").trigger("click");
        },
        //
        checkAllArray(value){
          if(this.checked.length<3){
            this.$refs.checkboxGroup.toggleAll(true);
          }else{
            this.$refs.checkboxGroup.toggleAll(false);
          }
        },
        //筛选//全选
        checkAll(val) {

          this.$refs.checkboxGroup.value.toggleAll(true);

          console.log(this.checkAllFlag)

          return;
          let checkedCount = this.CheckedAllArr.length
          if (val) {
            //全选
            this.CheckedAllArr = this.dataList.map(item => item.id)
          } else{
            //取消全选
            if (checkedCount === this.dataList.length) {
              //如果不增加这个条件判断点击某一项时会全部取消
              this.CheckedAllArr = []
            }
          }
        },
        //单选
        handleChecked(value) {
          // this.checkAllFlag = this.CheckedAllArr.length == this.dataList.length;
          if (value.length<3){
            this.checkAllFlag = false;
          }else{
            this.checkAllFlag = true;
          }
          value.indexOf('zjdSx') == -1 ? this.zjdSx = false : this.zjdSx = true;
          value.indexOf('zrzSx') == -1 ? this.zrzSx = false : this.zrzSx = true;
          value.indexOf('fsssSx') == -1 ? this.fsssSx = false : this.fsssSx = true;
          console.log(this.zjdSx)
          console.log(this.zrzSx)
          console.log(this.fsssSx)
        },
        closeSearchBox(){
          this.showSearch = false ;
          var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
          document.styleSheets[0].insertRule(
            "@keyframes test2" +
            "{" +
            "0%{bottom: 0px}" +
            "100%{bottom: -" + height + "px;}" +
            "}"
          )
          $('.searchBar_wrap').css({'animation':'test2 0.5s ease-in-out 0s 1 alternate forwards','-webkit-animation':'test2 0.5s ease-in-out 0s 1 alternate forwards'});
        },
        deleteHistory(){
          console.log("进入aa");
        },
        zjdTz(){
          console.log(this.htZjdZrzFsss);
          this.mapZjdTeAll.active =1;
          this.mapZjdTeAll.mapZjdAData.theGeom =JSON.stringify(this.htZjdZrzFsss);
          this.mapZjdTeAll.mapZjdAData.deptId = this.$cookies.get("item").deptId;
          this.$cookies.set("search",this.mapZjdTeAll);
          this.$router.push({path:'/homesteadSurvey/add'});
          console.log(this.mapZjdTeAll);
        },
        zrzTz(){
          this.mapZjdTeAll.active =3;
          this.mapZjdTeAll.mapZrzAData.theGeom =JSON.stringify(this.htZjdZrzFsss);
          this.mapZjdTeAll.mapZrzAData.deptId = this.$cookies.get("item").deptId;
          this.$cookies.set("search",this.mapZjdTeAll);
          this.$router.push({path:'/homesteadSurvey/add'});
        },
        fsssTz(){
          this.mapZjdTeAll.active =4;
          this.mapZjdTeAll.mapFsssAData.theGeom =JSON.stringify(this.htZjdZrzFsss);
          this.mapZjdTeAll.mapFsssAData.deptId = this.$cookies.get("item").deptId;
          this.$cookies.set("search",this.mapZjdTeAll);
          this.$router.push({path:'/homesteadSurvey/add'});
        }

      },
    }
</script>

<style scoped lang="scss">

  .van-cell__title{
    flex:2
  }
  .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: 26%;
    margin:0 10px;
    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: 26%;
    margin:0 10px;
    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;
  }
  .van-sticky{position: fixed;top: 0;right: 0; left: 0;z-index: 9999;}

  .searchBar_wrap {
    // display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0px 16px 0px 13px;
    background: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    z-index: 9;

    .searchBox{
      .van-cell{
        /*&:first-child{*/
        /*  box-shadow: none;*/
        /*  margin:0;*/
        /*}*/
        box-shadow: 0px 0px 5px #cccccc;
        border-radius: 15PX;
        margin-bottom: 0.35rem;
      }
      .van-cell__title{
        flex: 0.8;
        p{
          color: rgb(34, 183, 242);
          .van-icon{
            vertical-align: middle;
          }
          span{
            vertical-align: middle;
            &:nth-child(3){
              font-size: 0.25rem;
              border-radius: 5PX;
              padding: 5PX 15PX;
              margin-left: 50%;
            }
          }
        }
      }
      .van-cell__value{
        flex: 0.2;
        p{
          font-size: 0.25rem;
          display: inline-block;
          border-radius: 1rem;
          line-height: 1;
          padding: 15PX 20PX;
        }
      }
    }
    .actionBar_wrap {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      background: #fff;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      .m_list {
        flex: 1;
        display: flex;
        justify-content: center; /* 相对父元素水平居中 */
        align-items: center; /*  子元素相对父元素垂直居中 */

        .tensile,
        .positioning,
        .spacing,
        .scale {
          width: 76px;
          height: 72px;
          background: #ffffff;
          border-radius: 8px;
          box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.16);
          .icon {
            width: 76px;
            height: 72px;
          }
          &.active {
            background: #333;
            &.tensile {
              .icon {
                background: url("../../assets/images/homestead/operation/tensile_active.png")
                center center no-repeat;
                background-size: 38px 50px;
              }
            }
            &.positioning {
              .icon {
                background: url("../../assets/images/homestead/operation/positioning_active.png")
                center center no-repeat;
                background-size: 38px 48px;
              }
            }
            &.spacing {
              .icon {
                background: url("../../assets/images/homestead/operation/spacing_active.png")
                center center no-repeat;
                background-size: 46px 46px;
              }
            }
            &.scale {
              .icon {
                background: url("../../assets/images/homestead/operation/scale_active.png")
                center center no-repeat;
                background-size: 48px 48px;
              }
            }
          }
        }
        .tensile {
          .icon {
            background: url("../../assets/images/homestead/operation/tensile.png")
            center center no-repeat;
            background-size: 38px 50px;
          }
        }
        .positioning {
          .icon {
            background: url("../../assets/images/homestead/operation/positioning.png")
            center center no-repeat;
            background-size: 38px 48px;
          }
        }
        .spacing {
          .icon {
            background: url("../../assets/images/homestead/operation/spacing.png")
            center center no-repeat;
            background-size: 46px 46px;
          }
        }
        .scale {
          .icon {
            background: url("../../assets/images/homestead/operation/scale.png")
            center center no-repeat;
            background-size: 48px 48px;
          }
        }
        .closes {
          background: url("../../assets/images/homestead/searchBar_close.png")
          no-repeat;
          background-size: 100% 100%;
          width: 72px;
          height: 72px;
          &.gray {
            background: url("../../assets/images/homestead/searchBar_close_gray.png")
            no-repeat;
            background-size: 100% 100%;
          }
        }
        .correct {
          background: url("../../assets/images/homestead/searchBar_save.png")
          no-repeat;
          background-size: 100% 100%;
          width: 72px;
          height: 72px;
        }
      }
    }
    .searchBar_area {
      flex: 1;
      height: 80px;
      background: #f1f1f1;
      border: 1px solid #dfdfdf;
      border-radius: 10px;
      padding: 0 28px;
      display: flex;
      .bar_icon {
        width: 50px;
        height: 50px;
        background: url("../../assets/images/homestead/searchBar_bar.png")
        center center no-repeat;
        background-size: 100% 100%;
        margin-top: 14px;
        margin-right: 15px;
      }
      .bar_ipt {
        flex: 1;
        input {
          width: 100%;
          height: 100%;
          background: none;
          border: 0 none;
          font-size: 32px;
        }
      }
      .bar_text {
        flex: 0 0 80px;
        font-size: 32px;
        color: #333333;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        display: flex;
        justify-content: center; /* 相对父元素水平居中 */
        align-items: center; /*  子元素相对父元素垂直居中 */
      }
    }
    .searchBar_more {
      flex: 0 0 80px;
      background: url("../../assets/images/homestead/searchBar_add.png") center
      center no-repeat;
      background-size: 80% 80%;
      margin-left: 15px;
    }
  }
</style>