nsgk_mobile/src/views/homestead/index.vue

<template>
  <div class="app-container" :style="{ height: windowHeight + 'px' }">
    <div style="display: none">
      <select id="zhen"></select>
      <select id="cun" autofocus></select>
      <input id="texiao_fang" type="button" value="特效农房" /> 
      <input id="texiao_di" type="button" value="特效农地" /> 
      <input id="qingchu" type="button" value="清除" /> 
      <button id="drawPolygon">绘制地图</button>
      <button id="drawRemove">清除画图</button>
      <button id="drawReset">还原之前图层</button>
    </div>
    <div class="map_area" id="mapWrap"></div>
    <!--列表 定位-->
    <div class="rightIcon_wrap">
      <!-- <div class="positioning_wrap">
        <div class="icon"></div>
      </div> -->
      <div class="selectionIcon_wrap" @click="selectionPush">
        <div class="icon"></div>
        <div class="text">列表</div>
      </div>
    </div>
    <van-overlay :show="selectionIconShow" @click="homesteadListShrink" />

    <!--放大缩小-->
    <div class="rightZoom_wrap">
      <div class="amplification" ref="sliderBig"></div>
      <div class="narrow" ref="sliderSmall"></div>
    </div>

    <!--列表拉取详情-->
    <div class="homesteadList_wrap" v-show="homesteadListStatus">
      <div class="main_m" v-if="statusList == 0">
        <div class="title_m">
          <div class="more_icon" @click="homesteadListShrink"></div>
          <div class="name">农房列表</div>
        </div>
        <!--1-->
        <div
          class="flex_block"
          v-for="(items, index) in hcBottonHouseArr"
          :key="index"
          :class="{ active: selectChooseOrder == index }"
          @click="housingSerial(items, index)"
        >
          <div class="name_text">{{ items.name }}</div>
          <div class="square_text">{{ items.mj }}㎡</div>
          <div class="operation_mian">
            <div
              class="describe"
              :class="[
                items.xzqk == '已盘活' ? 'yph' : '',
                items.xzqk == '待流转待盘活' ? 'dlzdph' : '',
                items.xzqk == '已流转' ? 'ylz' : '',
                items.xzqk == '待流转' ? 'dlz' : '',
              ]"
            >
              {{ items.xzqk }}
            </div>
          </div>
        </div>

        <div v-if="hcBottonHouseArr.length == 0" class="noInfo_data">
          暂无农房信息
        </div>
      </div>
      <div class="main_m" v-if="statusList == 1">
        <div class="title_m">
          <div class="more_icon" @click="homesteadListShrink"></div>
          <div class="name">农地列表</div>
        </div>
        <!--1-->
        <div
          class="flex_block"
          v-for="(items, index) in hcBottonLandArr"
          :key="index"
          :class="{ active: selectChooseOrder == index }"
          @click="housingSerial(items, index)"
        >
          <div class="name_text">{{ items.name }}</div>
          <div class="square_text">{{ items.mj }}亩</div>
          <div class="operation_mian">
            <div
              class="describe"
              :class="[
                items.xzqk == '已盘活' ? 'yph' : '',
                items.xzqk == '待流转待盘活' ? 'dlzdph' : '',
                items.xzqk == '已流转' ? 'ylz' : '',
                items.xzqk == '待流转' ? 'dlz' : '',
              ]"
            >
              {{ items.xzqk }}
            </div>
          </div>
        </div>
        <div v-if="hcBottonLandArr.length == 0" class="noInfo_data">
          暂无农地信息
        </div>
      </div>

      <!-- //待租列表 房
      hcBottonHouseArr: [],
      //待租列表 地
      hcBottonLandArr: [], -->
      <div class="footerBtn_wrap">
        <div
          class="options"
          :class="{ active: statusList == 0 }"
          @click="housingTypes('0')"
        >
          农房
        </div>
        <div
          class="options"
          :class="{ active: statusList == 1 }"
          @click="housingTypes('1')"
        >
          农地
        </div>
      </div>
    </div>

    <!--选择地址-->
    <div class="address_wrap">
      <div class="address_item">
        <div class="portrait cun" @click="villageVisbileFun">村</div>
        <div class="name" @click="villageVisbileFun">
          {{ villageDataObj.deptName }}
        </div>
      </div>
    </div>
    <van-popup v-model="villageVisbile" round position="bottom">
      <van-cascader
        v-model="villageValue"
        title="请选择所在村"
        :options="hcAreaInfoOption"
        @close="hcAreaInfoClose"
        @finish="hcAreaInfoFinish"
        active-color="#1989fa"
        :field-names="hcAreaInfoFieldName"
      />
    </van-popup>

    <!--搜索栏目-->
    <div class="searchBar_wrap">
      <div class="actionBar_wrap" v-if="searchBarOperVisbile">
        <!-- <div class="m_list">
          <div class="positioning">
            <div class="icon"></div>
          </div>
        </div>
        <div class="m_list">
          <div class="spacing">
            <div class="icon"></div>
          </div>
        </div>
        <div class="m_list">
          <div class="scale">
            <div class="icon"></div>
          </div>
        </div> -->

        <div class="m_list">
          <div class="closes gray" @click="searchBarOperFun('false')">
            <div class="icon"></div>
          </div>
        </div>
        <div class="m_list">
          <div
            class="tensile"
            :class="{ active: draw.drawMapPolygon }"
            @click="drawMapPolygonFun"
          >
            <div class="icon"></div>
          </div>
        </div>
        <div class="m_list" @click="farmlandEditSwitchFun">
          <div class="correct"></div>
        </div>
      </div>
      <div class="searchBar_area">
        <div class="bar_icon"></div>
        <div class="bar_ipt">
          <input
            type="text"
            v-model="seachText"
            placeholder="请输入宗地或权利人信息"
          />
        </div>
        <div id="query" class="bar_text">搜索</div>
      </div>
      <div class="searchBar_more" @click="searchBarOperFun('true')"></div>
    </div>
    <!--点击房地-显示的搜索--->
    <div class="landHomestead_wrap">
      <div class="landHomestead_search">
        <div class="bar_icon"></div>
        <div class="bar_ipt">
          <input
            type="text"
            v-model="seachText"
            placeholder="请输入宗地或权利人信息"
          />
        </div>
        <div class="bar_text" @click="toggleSearch">搜索</div>
      </div>
      <div class="landHomestead_body">
        <!--0-农房-->
        <div class="body_flex" v-if="farmhouseStatus == 0">
          <div class="attribute" @click="houseLandLookInfo('show', 'house')">
            <div class="names">{{ houseInfoList.fwsyrmc }}</div>
            <div class="address">{{ houseInfoList.dz }}</div>
            <div class="nature">性质：{{ houseInfoList.tdxz }}</div>
          </div>
          <div class="distance" @click="houseLandLookInfo('show', 'house')">
            <div class="size">{{ houseInfoList.xh }}</div>
            <div class="probably">大约{{ houseInfoList.jzmj }}㎡</div>
          </div>
          <div class="others">
            <div class="information">
              <!-- <div
                class="location"
                @click="landHomeSerial('house', houseInfoList)"
              ></div> -->
              <div class="status_text">{{ houseInfoList.xzqk }}</div>
            </div>
            <div class="editor">
              <div class="editor_icon" @click="editnfdInfo"></div>
            </div>
          </div>
        </div>
        <!--1-农地-->
        <div class="body_flex" v-if="farmhouseStatus == 1">
          <div class="attribute" @click="houseLandLookInfo('show', 'land')">
            <div class="names">{{ landInfoList.syrmc }}</div>
            <div class="address">{{ landInfoList.cm }}</div>
            <div class="nature">性质：{{ landInfoList.nydlx }}</div>
          </div>
          <div class="distance" @click="houseLandLookInfo('show', 'land')">
            <div class="size">{{ landInfoList.xh }}</div>
            <div class="probably">大约{{ landInfoList.mj }}㎡</div>
          </div>
          <div class="others">
            <div class="information">
              <!-- <div
                class="location"
                @click="landHomeSerial('land', landInfoList)"
              ></div> -->
              <div class="status_text">{{ landInfoList.xzqk }}</div>
            </div>
            <div class="editor">
              <div class="editor_icon" @click="editnfdInfo"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="info" style="display: none"></div>
    <!--房地全部信息展示-->
    <div
      class="landHomesteadDetails_wrap"
      v-show="landHomesteadDetailsVisibile"
    >
      <!---农房-->
      <div class="content_mian" v-if="farmhouseStatus == 0">
        <!--内容-->
        <div class="serial_flex">
          <div class="number">
            农房编号<span>{{ houseInfoLookList.xh }}</span>
          </div>
          <div class="localhref" @click="houseLandLookInfo('hide')"></div>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">房屋所有人名称</span
          ><span class="content">{{ houseInfoLookList.fwsyrmc }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">村名</span
          ><span class="content">{{ houseInfoLookList.cm }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">地址</span
          ><span class="content">{{ houseInfoLookList.dz }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">是否有审批手续</span
          ><span class="content">{{ houseInfoLookList.sfyspsx }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">房屋所有权证号</span
          ><span class="content">{{ houseInfoLookList.fwsyqh }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">建筑面积</span
          ><span class="content">大约{{ houseInfoLookList.jzmj }}㎡</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">土地证号</span
          ><span class="content">{{ houseInfoLookList.tdzh }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">土地性质</span
          ><span class="content">{{ houseInfoLookList.tdxz }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">土地面积</span
          ><span class="content">大约{{ houseInfoLookList.tdmj }}㎡</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">现状情况</span
          ><span class="content">{{ houseInfoLookList.xzqk }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">是否有流转意向</span
          ><span class="content">{{ houseInfoLookList.xzfwsfylzy }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">租赁人</span
          ><span class="content">{{ houseInfoLookList.zlrxm }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">租赁剩余年限</span
          ><span class="content">{{ houseInfoLookList.zlsynx }}年</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">租赁合同截止日期</span
          ><span class="content">{{ houseInfoLookList.zlhtjzrq }}</span>
        </div>
        <!--上传图片-->
        <div class="uploadPictures_block">
          <div class="statusQuo">
            <div
              class="picture"
              v-if="houseInfoLookList.behindHouse == ''"
            ></div>
            <div class="picture" v-if="houseInfoLookList.behindHouse != ''">
              <img :src="houseInfoLookList.behindHouse" />
            </div>
            <div class="describe">现<br />状<br />图<br />片</div>
          </div>
          <div class="statusQuo">
            <div
              class="picture"
              v-if="houseInfoLookList.frontHouse == ''"
            ></div>
            <div class="picture" v-if="houseInfoLookList.frontHouse != ''">
              <img :src="houseInfoLookList.frontHouse" />
            </div>
            <div class="describe">历<br />史<br />图<br />片</div>
          </div>
        </div>
        <!--编辑-->
        <div class="editor_block">
          <div class="editor_icon" @click="editnfdInfo"></div>
        </div>
      </div>
      <!---农地-->
      <div class="content_mian" v-else-if="farmhouseStatus == 1">
        <!--内容-->
        <div class="serial_flex">
          <div class="number">
            农地编号<span>{{ landInfoLookList.xh }}</span>
          </div>
          <div class="localhref" @click="houseLandLookInfo('hide')"></div>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">农地使用人名称</span
          ><span class="content">{{ landInfoLookList.syrmc }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">村名</span
          ><span class="content">{{ landInfoLookList.cm }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">是否有流转意向</span
          ><span class="content">{{ landInfoLookList.sfylzyx }}</span>
        </div>

        <!--1-->
        <div class="flex_block">
          <span class="describe">土地面积</span
          ><span class="content">大约{{ landInfoLookList.mj }}亩</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">农用地类型</span
          ><span class="content">大约{{ landInfoLookList.nydlx }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">现状情况</span
          ><span class="content">{{ landInfoLookList.xzqk }}</span>
        </div>

        <!--1-->
        <div class="flex_block">
          <span class="describe">承包人</span
          ><span class="content">{{ landInfoLookList.cbrmc }}</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">流转剩余年限</span
          ><span class="content">{{ landInfoLookList.lzsynx }}年</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">流转合同截止日期</span
          ><span class="content">{{ landInfoLookList.lzhtjzrq }}</span>
        </div>

        <!--上传图片-->
        <div class="uploadPictures_block">
          <div class="statusQuo">
            <div class="picture" v-if="landInfoLookList.behindland == ''"></div>
            <div class="picture" v-if="landInfoLookList.behindland != ''">
              <img :src="landInfoLookList.behindland" />
            </div>
            <div class="describe">现<br />状<br />图<br />片</div>
          </div>
          <div class="statusQuo">
            <div class="picture" v-if="landInfoLookList.frontland == ''"></div>
            <div class="picture" v-if="landInfoLookList.frontland != ''">
              <img :src="landInfoLookList.frontland" />
            </div>
            <div class="describe">历<br />史<br />图<br />片</div>
          </div>
        </div>
        <!--编辑-->
        <div class="editor_block">
          <div class="editor_icon" @click="editnfdInfo"></div>
        </div>
      </div>
    </div>
    <!--房地全部信息编辑-->
    <van-overlay
      :show="landHomesteadEditVisbile"
      @click="landHomesteadEditCancel"
    />
    <div
      class="landHomesteadEdit_wrap"
      v-show="landHomesteadEditVisbile"
      style="bottom: 0"
    >
      <div class="content_mian" ref="landHomesteadEditWrap">
        <div class="info_title">
          {{ this.farmhouseStatus == 0 ? "录入宗地信息" : "录入农地信息" }}
        </div>
        <!--  农房  -->
        <div
          class="flex_main"
          v-if="this.farmhouseStatus == 0"
          :style="{ height: landHomesteadEditWrapHeight + 'px' }"
        >
          <div class="flex_block">
            <div class="number_s50 mr50">
              <div class="title_m">农房编号</div>
              <div class="input_m">
                <van-field
                  v-model="houseInfoList.xh"
                  placeholder="农房编号"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
            <div class="number_s50">
              <div class="title_m">房屋所有人名称</div>
              <div class="input_m">
                <van-field
                  v-model="houseInfoList.fwsyrmc"
                  placeholder="房屋所有人名称"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
          </div>
          <!--1-->
          <div class="flex_block">
            <div class="number_s60 mr50">
              <div class="title_m">地址</div>
              <div class="input_m">
                <van-field
                  v-model="houseInfoList.dz"
                  placeholder="地址"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
            <div class="number_s40">
              <div class="title_m">土地性质</div>
              <div class="input_m select">
                <i class="dropDown_icon"></i>
                <van-field
                  v-model="houseInfoList.tdxz"
                  readonly
                  clickable
                  name="picker"
                  placeholder="土地性质"
                  class="landHomesteadEdit_input"
                  @click="tdxzOptionsVibile = true"
                />
                <van-popup v-model="tdxzOptionsVibile" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="tdxzOptions"
                    value-key="dictLabel"
                    @confirm="tdxzOptionsFun"
                    @cancel="tdxzOptionsVibile = false"
                  />
                </van-popup>
              </div>
            </div>
          </div>
          <!--1-->
          <div class="flex_block">
            <div class="number_s35 mr50">
              <div class="title_m">是否有审批手续</div>
              <div class="input_m select">
                <i class="dropDown_icon"></i>
                <van-field
                  v-model="houseInfoList.sfyspsx"
                  readonly
                  clickable
                  name="picker"
                  placeholder="审批手续"
                  class="landHomesteadEdit_input"
                  @click="xfCirculationVisbile = true"
                />
                <van-popup v-model="xfCirculationVisbile" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="xfApprovalOptions"
                    @confirm="xfCirculationFun"
                    @cancel="xfCirculationVisbile = false"
                  />
                </van-popup>
              </div>
            </div>
            <div class="number_s35 mr50">
              <div class="title_m">建筑面积</div>
              <div class="input_m about">
                <span class="about_symbol">≈</span>
                <van-field
                  v-model="houseInfoList.jzmj"
                  placeholder="建筑面积"
                  type="number"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
            <div class="number_s30">
              <div class="title_m">现状情况</div>
              <div class="input_m select">
                <i class="dropDown_icon"></i>
                <!--  -->
                <van-field
                  v-model="houseInfoList.xzqk"
                  readonly
                  clickable
                  name="picker"
                  placeholder="现状情况"
                  class="landHomesteadEdit_input"
                  @click="xzqkOptionsVisbile = true"
                />
                <van-popup v-model="xzqkOptionsVisbile" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="xzqkOptions"
                    @confirm="xzqkOptionsFun"
                    value-key="dictLabel"
                    @cancel="xzqkOptionsVisbile = false"
                  />
                </van-popup>
              </div>
            </div>
          </div>
          <!--1-->
          <div class="flex_block">
            <div class="number_s50 mr50">
              <div class="title_m">房屋所有权证号</div>
              <div class="input_m">
                <van-field
                  v-model="houseInfoList.fwsyqh"
                  placeholder="房屋所有权证号"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
            <div class="number_s50">
              <div class="title_m">土地证号</div>
              <div class="input_m">
                <van-field
                  v-model="houseInfoList.tdzh"
                  placeholder="土地证号"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
          </div>
          <!--1-->
          <div class="flex_block">
            <div class="number_s35 mr50">
              <div class="title_m">房屋类型</div>
              <div class="input_m select">
                <i class="dropDown_icon"></i>
                <van-field
                  v-model="houseInfoList.tdfl"
                  readonly
                  clickable
                  name="picker"
                  placeholder="房屋类型"
                  class="landHomesteadEdit_input"
                  @click="fwdlxOptionsVibile = true"
                />
                <van-popup v-model="fwdlxOptionsVibile" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="fwdlxOptions"
                    value-key="dictLabel"
                    @confirm="fwdlxOptionsFun"
                    @cancel="fwdlxOptionsVibile = false"
                  />
                </van-popup>
              </div>
            </div>

            <div class="number_s35 mr50">
              <div class="title_m">土地面积</div>
              <div class="input_m about">
                <span class="about_symbol">≈</span>
                <van-field
                  v-model="houseInfoList.tdmj"
                  placeholder="土地面积"
                  type="number"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
            <div class="number_s30">
              <div class="title_m">是否有流转意向</div>
              <div class="input_m select">
                <i class="dropDown_icon"></i>
                <van-field
                  v-model="houseInfoList.xzfwsfylzy"
                  readonly
                  clickable
                  name="picker"
                  placeholder="是否有流转意向"
                  class="landHomesteadEdit_input"
                  @click="xflzCirculationVisbile = true"
                />
                <van-popup v-model="xflzCirculationVisbile" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="xfCirculationOptions"
                    @confirm="xflzCirculationFun"
                    @cancel="xflzCirculationVisbile = false"
                  />
                </van-popup>
              </div>
            </div>
          </div>
          <!--1-->
          <div class="flex_block">
            <div class="number_s50 mr50">
              <div class="title_m">租赁人</div>
              <div class="input_m">
                <van-field
                  v-model="houseInfoList.zlrxm"
                  placeholder="租赁人"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
            <div class="number_s50">
              <div class="title_m">租赁年限</div>
              <div class="input_m">
                <van-field
                  v-model="houseInfoList.zlsynx"
                  placeholder="租赁年限"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
          </div>
          <!--1-->
          <div class="flex_block">
            <div class="number_s100">
              <div class="title_m">租赁合同截止日期</div>
              <div class="input_m">
                <van-field
                  v-model="houseInfoList.zlhtjzrq"
                  placeholder="流转合同截止日期"
                  class="landHomesteadEdit_input"
                  readonly
                  @click="houseHomesteadEditcalendar = true"
                />
                <van-calendar
                  v-model="houseHomesteadEditcalendar"
                  @confirm="houseHomesteadEdConfirm"
                  :max-date="new Date(2025, 0, 31)"
                />
              </div>
            </div>
          </div>
          <!--2-->
          <div class="uploadPicturesFlex_block">
            <div class="title_m">上传图片</div>
            <div class="main_m">
              <van-uploader
                v-model="nfAddfileList"
                :after-read="nfAddimgonRead"
                :max-count="1"
                accept="image/gif, image/jpeg, image/png"
              />
            </div>
          </div>
        </div>
        <!--  农地  -->
        <div
          class="flex_main"
          v-else-if="this.farmhouseStatus == 1"
          :style="{ height: landHomesteadEditWrapHeight + 'px' }"
        >
          <!--1-->
          <div class="flex_block">
            <div class="number_s50 mr50">
              <div class="title_m">农地编号</div>
              <div class="input_m">
                <van-field
                  v-model="landInfoList.xh"
                  placeholder="农地编号"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
            <div class="number_s50">
              <div class="title_m">农地使用人名称</div>
              <div class="input_m">
                <van-field
                  v-model="landInfoList.syrmc"
                  placeholder="农地使用人名称"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
          </div>
          <!--1-->
          <div class="flex_block">
            <div class="number_s60 mr50">
              <div class="title_m">现状情况</div>
              <div class="input_m select">
                <i class="dropDown_icon"></i>
                <van-field
                  v-model="landInfoList.xzqk"
                  readonly
                  clickable
                  name="picker"
                  placeholder="现状情况"
                  class="landHomesteadEdit_input"
                  @click="ndxzqkOptionsVisbile = true"
                />
                <van-popup v-model="ndxzqkOptionsVisbile" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="ndxzqkOptions"
                    @confirm="ndxzqkOptionsFun"
                    value-key="dictLabel"
                    @cancel="ndxzqkOptionsVisbile = false"
                  />
                </van-popup>
              </div>
            </div>
            <div class="number_s40">
              <div class="title_m">农用地类型</div>
              <div class="input_m select">
                <i class="dropDown_icon"></i>
                <van-field
                  v-model="landInfoList.nydlx"
                  readonly
                  clickable
                  name="picker"
                  placeholder="农用地类型"
                  class="landHomesteadEdit_input"
                  @click="nydlxOptionsVibile = true"
                />
                <van-popup v-model="nydlxOptionsVibile" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="nydlxOptions"
                    value-key="dictLabel"
                    @confirm="nydlxOptionsFun"
                    @cancel="nydlxOptionsVibile = false"
                  />
                </van-popup>
              </div>
            </div>
          </div>

          <!--1-->
          <div class="flex_block">
            <div class="number_s50 mr50">
              <div class="title_m">土地面积</div>
              <div class="input_m about">
                <span class="about_symbol">≈</span>
                <van-field
                  v-model="landInfoList.mj"
                  placeholder="土地面积"
                  type="number"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
            <div class="number_s50">
              <div class="title_m">是否有流转意向</div>
              <div class="input_m select">
                <i class="dropDown_icon"></i>
                <van-field
                  v-model="landInfoList.sfylzyx"
                  readonly
                  clickable
                  name="picker"
                  placeholder="是否有流转意向"
                  class="landHomesteadEdit_input"
                  @click="xdlzCirculationVisbile = true"
                />
                <van-popup v-model="xdlzCirculationVisbile" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="xdCirculationOptions"
                    @confirm="xdCirculationOptionsFun"
                    @cancel="xdlzCirculationVisbile = false"
                  />
                </van-popup>
              </div>
            </div>
          </div>

          <!--1-->
          <div class="flex_block">
            <div class="number_s50 mr50">
              <div class="title_m">承包人</div>
              <div class="input_m">
                <van-field
                  v-model="landInfoList.cbrmc"
                  placeholder="承包人"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
            <div class="number_s50">
              <div class="title_m">流转剩余年限</div>
              <div class="input_m">
                <van-field
                  v-model="landInfoList.lzsynx"
                  placeholder="流转剩余年限"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
          </div>

          <!--1-->
          <div class="flex_block">
            <div class="number_s100">
              <div class="title_m">流转合同截止日期</div>
              <div class="input_m">
                <van-field
                  v-model="landInfoList.lzhtjzrq"
                  placeholder="流转合同截止日期"
                  class="landHomesteadEdit_input"
                  readonly
                  @click="landHomesteadEditcalendar = true"
                />
                <van-calendar
                  v-model="landHomesteadEditcalendar"
                  @confirm="landHomesteadEdConfirm"
                  :max-date="new Date(2025, 0, 31)"
                />
              </div>
            </div>
          </div>

          <!--2-->
          <div class="uploadPicturesFlex_block">
            <div class="title_m">上传图片</div>
            <div class="main_m">
              <van-uploader
                v-model="ndAddfileList"
                :after-read="ndAddimgonRead"
                :max-count="1"
                accept="image/gif, image/jpeg, image/png"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="footer_main">
        <div class="cancel" @click="landHomesteadEditCancel">取消</div>
        <div class="save" @click="landHomesteadEditSave">保存</div>
      </div>
    </div>
    <!--农地农房选择-->
    <div class="farmlandEditSwitch_wrap" v-show="farmlandEditSwitchVisbule">
      <div class="mains">
        <div class="close_btn" @click="farmlandEditFun"></div>
        <div class="farmhouse" @click="addNewPlot('farmhouse')">
          <div class="icons"></div>
          <p class="names">农房</p>
        </div>
        <div class="farmland" @click="addNewPlot('land')">
          <div class="icons"></div>
          <p class="names">农地</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import {
  hcBottomSearch,
  commonUpload,
  houseAdd,
  landAdd,
  treeselectByUser,
  deptGetId,
  houseEdit,
  landEdit,
  currentLocation,
} from "@/api/homestead/index";

export default {
  name: "homesteadLogin",
  data() {
    return {
      //搜索
      seachText: "",
      selectionIconShow: false,
      //省市区区级list
      hcAreaInfoOption: [],
      //省市区区级显示
      villageVisbile: false,
      //选中的值
      villageValue: "",
      //选中村相关信息
      villageDataObj: {
        deptName: "　　", //村名
      },
      hcAreaInfoFieldName: {
        text: "label",
        value: "value",
        children: "children",
      },
      // 待租列表显示
      ishcBotton: false,
      // 待租列表 类型  0 农房 1 农地
      statusList: 0,
      //待租列表 房
      hcBottonHouseArr: [],
      //待租列表 地
      hcBottonLandArr: [],
      //搜索栏目-操作栏显隐
      searchBarOperVisbile: false,
      //地图绘制状态
      draw: {
        drawMapPolygon: false, //绘制地图
      },
      //地图绘制坐标存储
      coordinateList: "",
      //判断新增还是编辑 0 新增 1编辑
      currentType: 0,
      //新建选择农房土地弹窗 显隐
      farmlandEditSwitchVisbule: false, //false
      //编辑房屋土地块高度
      landHomesteadEditWrapHeight: 0,
      //编辑房屋土地信息--显隐
      landHomesteadEditVisbile: false,
      //查看编辑房屋、土地--类型  0 农房 1 农地
      farmhouseStatus: 0,
      //新增农房日历显影
      houseHomesteadEditcalendar: false,
      //新增农地日历显影
      landHomesteadEditcalendar: false,
      //选择顺序
      selectChooseOrder: 0,

      //农地新增、修改保存数据
      landInfoList: {
        id: "", //String		是		主键id
        orgCode: "", //	String		否		行政区代码
        cdm: "", //	String		否		村代码
        cm: "", //String		否		村名
        xh: "", //	String		否		序号
        cbrmc: "", //String		否		承包人名称
        syrmc: "", //String		否		使用人名称
        nydlx: "", //	String		否		农用地类型
        mj: "", //	String		否		面积
        lzsynx: "", //	String		否		流转剩余年限
        lzhtjzrq: "", //	String		否		日期
        sfylzyx: "", //	String		否		是否流转意向
        xzqk: "", //	String		否		现状情况
        theGeom: "", //String		否		空间坐标
        xzqkKey: "", //	String		否		忽略
        nydlxKey: "", //	String		否		忽略
        frontland: "", //String		否		图片前
        behindland: "", //String		否		图片后
      },

      //农房新增、修改保存数据
      houseInfoList: {
        id: "", //	String		是		主键id
        orgCode: "", //	String		否		行政区代码
        cdm: "", //	String		否		村代码
        cm: "", //	String		否		村名
        xh: "", //	String		否		序号
        tdxz: "", //土地性质
        fwsyrmc: "", //	String		否		房屋所有人名称
        fwsyqh: "", //	String		否		房屋所有权证号
        tdzh: "", //	String		否		土地证号
        jzmj: "", //	String		否		建筑面积
        tdmj: "", //	String		否		土地面积
        sfyspsx: "", //	String		否		是否有审批手续
        xzqk: "", //	String		否		现状情况
        theGeom: "", //	String		否		空间坐标
        xzqkKey: "", //	String		否		忽略传null
        tdxzKey: "", //	String		否		忽略传null
        frontHouse: "", //	String		否		图片前
        behindHouse: "", //	String		否		图片后
        dz: "", //	String		否		地址
        zlrxm: "", //	String		否		租赁人姓名
        zlhtjzrq: "", //					租赁合同截止日期
        zlsynx: "", //					租赁剩余年限
        xzfwsfylzy: "", //					闲置房屋是否有流转意愿
        tdfl: "", //					集体/个人
      },

      //农地查看数据
      landInfoLookList: {},
      //农房查看数据
      houseInfoLookList: {},

      //农房 - 农房权属
      tdxzOptions: [],
      tdxzOptionsVibile: false, //农房 - 农房权属 -弹窗
      tdxzOptionsValue: "", //农房 - 农房权属  值
      //农房 - 房屋类型
      fwdlxOptions: ["个人", "集体"],
      fwdlxOptionsVibile: false, // 农地 -- 农用地类型--弹窗
      //农房 - 现状情况
      xzqkOptions: [],
      xzqkOptionsVisbile: false, //农房 - 现状情况 弹窗
      //农房 - 是否有流转
      xfCirculationOptions: ["是", "否"],
      xflzCirculationVisbile: false, //农房 - 是否有流转  弹窗
      //农房 - 是否有审批
      xfApprovalOptions: ["是", "否"],
      xfCirculationVisbile: false, //农房 - 是否有审批  -弹窗

      //农地 -- 现状情况
      ndxzqkOptions: [],
      ndxzqkOptionsVisbile: false,
      //农地 -- 农用地类型
      nydlxOptions: [],
      nydlxOptionsVibile: false, // 农地 -- 农用地类型--弹窗
      nydlxOptionsValue: "", //  农地 -- 农用地类型--值

      //农地 -- 是否有流转意向
      xdCirculationOptions: ["是", "否"],
      xdlzCirculationVisbile: false, //农房 - 是否有流转  弹窗

      //农房上传图片附件
      nfAddfileList: [],
      //农地上传图片附件
      ndAddfileList: [],
      // 当前是否地图点击状态
      hasTable: false,
      //查看农地\农房 显隐
      landHomesteadDetailsVisibile: false,

      windowHeight: 0,
      //农房列表 显影
      homesteadListStatus: false,
      geoJson: "",
    };
  },
  mounted() {
    this.initAxios();
    let windowHeight = document.documentElement.clientHeight;
    this.windowHeight = windowHeight;
  },
  methods: {
    //编辑农地信息
    editnfdInfo(type) {
      this.currentType = 1;
      this.farmlandEditSwitchVisbuleFun("hide");
      this.landHomesteadEditVisbileFun("show");
    },
    //显示农地\农房详情
    houseLandLookInfo(type, status) {
      if (type == "show") {
        if (status == "house") {
          $("#texiao_fang").val(this.houseInfoList.fwsyrmc);
          $("#texiao_fang").trigger("click");
        } else {
          $("#texiao_di").val(this.landInfoList.syrmc);
          $("#texiao_di").trigger("click");
        }
        this.houseLandLookAnmitFun("show");
      } else {
        this.houseLandLookAnmitFun("hide");
      }
    },
    toggleSearch() {
      $("#query").trigger("click");
    },
    //显示农地\农房详情 动画
    houseLandLookAnmitFun(type) {
      if (type == "show") {
        this.landHomesteadDetailsVisibile = true;
        $(".landHomesteadDetails_wrap").css({ bottom: "-100vh" });
        $(".landHomesteadDetails_wrap").animate(
          {
            bottom: "0",
          },
          300
        );
      } else {
        $(".landHomesteadDetails_wrap").css({ bottom: "0" });
        $(".landHomesteadDetails_wrap").animate(
          {
            bottom: "-100vh",
          },
          300
        );
        setTimeout(() => {
          this.landHomesteadDetailsVisibile = false;
        }, 300);
      }
    },
    //绘制多边形地图
    drawMapPolygonFun() {
      let drawMapPolygon = this.draw.drawMapPolygon;
      if (drawMapPolygon == false) {
        console.log(this.coordinateList);
        if (this.coordinateList == "") {
          this.$set(this.draw, "drawMapPolygon", true);
          $("#drawPolygon").trigger("click");
        } else {
          this.$dialog
            .confirm({
              title: "提示",
              message: "是否重新绘制画图",
            })
            .then(() => {
              // on confirm
              this.coordinateList = "";
              this.$set(this.draw, "drawMapPolygon", true);
              $("#drawPolygon").trigger("click");
            })
            .catch(() => {
              // on cancel
            });
        }
      } else {
        $("#drawRemove").trigger("click");
        this.$set(this.draw, "drawMapPolygon", false);
      }
    },
    //新建选择农房土地弹窗
    farmlandEditSwitchFun() {
      if (this.coordinateList == "") {
        this.$toast("请先完成绘制");
        return false;
      }
      this.currentType = 0;
      this.farmlandEditSwitchVisbuleFun("show");
      // this.searchBarOperVisbile = false;
    },
    //关闭选择农房土地
    farmlandEditFun() {
      this.farmlandEditSwitchVisbuleFun("hide");

      //初始化地图
      this.initDraw();
    },
    addNewPlot(type) {
      this.farmlandEditSwitchVisbuleFun("hide");
      this.landHomesteadEditVisbileFun("show");

      //farmhouse农房    land农地
      if (type == "farmhouse") {
        this.farmhouseStatus = 0;
      } else if (type == "land") {
        this.farmhouseStatus = 1;
      }
    },
    //新增地块 编辑页 显影
    landHomesteadEditVisbileFun(type) {
      if (type == "show") {
        this.landHomesteadEditVisbile = true;
        $(".landHomesteadEdit_wrap").css({ bottom: "-100vh" });
        $(".landHomesteadEdit_wrap").animate(
          {
            bottom: "0",
          },
          300
        );
      } else {
        $(".landHomesteadEdit_wrap").css({ bottom: "0" });
        $(".landHomesteadEdit_wrap").animate(
          {
            bottom: "-100vh",
          },
          300
        );
        setTimeout(() => {
          this.landHomesteadEditVisbile = false;
        }, 300);
      }
      setTimeout(() => {
        //新建土地、房屋高度
        let landHomesteadEditWrap =
          this.$refs.landHomesteadEditWrap.offsetHeight;
        let landHomesteadEditWrapPdg = $(
          ".landHomesteadEdit_wrap .content_mian"
        )
          .css("paddingTop")
          .replace("px", "");
        let landHomesteadEditWrapTitHei = $(
          ".landHomesteadEdit_wrap .info_title"
        )
          .css("height")
          .replace("px", "");
        if (
          landHomesteadEditWrap &&
          landHomesteadEditWrapPdg &&
          landHomesteadEditWrapTitHei
        ) {
          this.landHomesteadEditWrapHeight =
            landHomesteadEditWrap -
            landHomesteadEditWrapPdg * 2 -
            landHomesteadEditWrapTitHei -
            10;
        }
      }, 301);
    },
    //选择农地 农房显影
    farmlandEditSwitchVisbuleFun(type) {
      if (type == "show") {
        this.farmlandEditSwitchVisbule = true;
        $(".farmlandEditSwitch_wrap").css({ opacity: "0" });
        $(".farmlandEditSwitch_wrap").animate(
          {
            opacity: "1",
          },
          300
        );
      } else {
        $(".farmlandEditSwitch_wrap").css({ opacity: "1" });
        $(".farmlandEditSwitch_wrap").animate(
          {
            opacity: "0",
          },
          300
        );
        setTimeout(() => {
          this.farmlandEditSwitchVisbule = false;
        }, 300);
      }
    },
    //新增地块 编辑页 取消
    landHomesteadEditCancel() {
      this.landHomesteadEditVisbileFun("hide");
      //新增信息显示
      if (this.currentType == 0) {
        this.farmlandEditSwitchVisbuleFun("show");
      }
    },
    //新增地块 编辑页  保存
    landHomesteadEditSave() {
      if (this.farmhouseStatus == 0) {
        //农房
        let houseInfoList = this.houseInfoList;
        houseInfoList.theGeom = this.coordinateList;
        houseInfoList.orgCode = this.villageDataObj.orgCode;
        houseInfoList.cdm = this.villageDataObj.orgCode;
        houseInfoList.cm = this.villageDataObj.deptName;

        if (houseInfoList.xh == undefined || houseInfoList.xh == "") {
          this.$toast("请填写农房编号");
          return false;
        } else if (
          houseInfoList.fwsyrmc == undefined ||
          houseInfoList.fwsyrmc == ""
        ) {
          this.$toast("请填写房屋所有人名称");
          return false;
        } else if (houseInfoList.dz == undefined || houseInfoList.dz == "") {
          this.$toast("请填写地址");
          return false;
        } else if (
          houseInfoList.tdxz == undefined ||
          houseInfoList.tdxz == ""
        ) {
          this.$toast("请选择土地性质");
          return false;
        } else if (
          houseInfoList.sfyspsx == undefined ||
          houseInfoList.sfyspsx == ""
        ) {
          this.$toast("请选择是否有审批手续");
          return false;
        } else if (
          houseInfoList.jzmj == undefined ||
          houseInfoList.jzmj == ""
        ) {
          this.$toast("请填写建筑面积");
          return false;
        } else if (
          houseInfoList.xzqk == undefined ||
          houseInfoList.xzqk == ""
        ) {
          this.$toast("请选择现状情况");
          return false;
        } else if (
          houseInfoList.fwsyqh == undefined ||
          houseInfoList.fwsyqh == ""
        ) {
          this.$toast("请填写房屋所有权证号");
          return false;
        } else if (
          houseInfoList.tdzh == undefined ||
          houseInfoList.tdzh == ""
        ) {
          this.$toast("请填写土地证号");
          return false;
        } else if (
          houseInfoList.tdmj == undefined ||
          houseInfoList.tdmj == ""
        ) {
          this.$toast("请填写土地面积");
          return false;
        } else if (
          houseInfoList.xzfwsfylzy == undefined ||
          houseInfoList.xzfwsfylzy == ""
        ) {
          this.$toast("请选择是否有流转意愿");
          return false;
        } else if (
          houseInfoList.tdfl == undefined ||
          houseInfoList.tdfl == ""
        ) {
          this.$toast("请选择房屋类型");
          return false;
        }

        //新增
        if (this.currentType == 0) {
          if (houseInfoList.theGeom == "") {
            this.$toast("请选择地图坐标");
            return false;
          }

          this.$dialog
            .confirm({
              title: "新建农房信息",
              message: "是否保存信息或修改信息",
            })
            .then(() => {
              // on confirm
              houseAdd(houseInfoList).then((res) => {
                if (res.code == 200) {
                  this.landHomesteadEditVisbileFun("hide");
                  //新增
                  this.$toast("新建农房信息成功");
                  this.initDraw();
                  $("#drawRemove").trigger("click");
                  $("#drawReset").trigger("click");
                  this.coordinateList = "";
                }
              });
            })
            .catch(() => {
              // on cancel
            });
        } else {
          this.$dialog
            .confirm({
              title: "修改农房信息",
              message: "是否保存信息或修改信息",
            })
            .then(() => {
              // on confirm
              houseEdit(houseInfoList).then((res) => {
                if (res.code == 200) {
                  this.landHomesteadEditVisbileFun("hide");
                  this.$toast("修改农房信息成功");
                  this.houseInfoLookList = this.houseInfoList;
                  // this.initDraw();
                  $("#drawRemove").trigger("click");
                  $("#drawReset").trigger("click");
                  this.coordinateList = "";
                }
              });
            })
            .catch(() => {
              // on cancel
            });
          //编辑
        }
      } else if (this.farmhouseStatus == 1) {
        //   orgCode: "", //	String		否		行政区代码
        // cdm: "", //	String		否		村代码
        // cm: "", //String		否		村名
        //农地
        let landInfoList = this.landInfoList;
        landInfoList.theGeom = this.coordinateList;
        landInfoList.orgCode = this.villageDataObj.orgCode;
        landInfoList.cdm = this.villageDataObj.orgCode;
        landInfoList.cm = this.villageDataObj.deptName;
        if (landInfoList.xh == undefined || landInfoList.xh == "") {
          this.$toast("请填写农地编号");
          return false;
        } else if (
          landInfoList.syrmc == undefined ||
          landInfoList.syrmc == ""
        ) {
          this.$toast("请填写农地使用人名称");
          return false;
        } else if (landInfoList.xzqk == undefined || landInfoList.xzqk == "") {
          this.$toast("请填写现状情况");
          return false;
        } else if (
          landInfoList.nydlx == undefined ||
          landInfoList.nydlx == ""
        ) {
          this.$toast("请选择农用地类型");
          return false;
        } else if (landInfoList.mj == undefined || landInfoList.mj == "") {
          this.$toast("请填写土地面积");
          return false;
        } else if (
          landInfoList.sfylzyx == undefined ||
          landInfoList.sfylzyx == ""
        ) {
          this.$toast("请选择是否流转意向");
          return false;
        }

        //新增
        if (this.currentType == 0) {
          if (landInfoList.theGeom == "") {
            this.$toast("请选择空间坐标");
            return false;
          }
          this.$dialog
            .confirm({
              title: "新建农地信息",
              message: "是否保存信息或修改信息",
            })
            .then(() => {
              // on confirm
              landAdd(landInfoList).then((res) => {
                if (res.code == 200) {
                  this.landHomesteadEditVisbileFun("hide");
                  //新增
                  this.initDraw();
                  $("#drawRemove").trigger("click");
                  $("#drawReset").trigger("click");
                  this.coordinateList = "";
                  this.$toast("新建农地信息成功");
                }
              });
            })
            .catch(() => {
              // on cancel
            });
        } else {
          this.$dialog
            .confirm({
              title: "修改农地信息",
              message: "是否保存信息或修改信息",
            })
            .then(() => {
              // on confirm
              landEdit(landInfoList).then((res) => {
                if (res.code == 200) {
                  this.landHomesteadEditVisbileFun("hide");
                  this.$toast("修改农地信息成功");
                  this.landInfoLookList = this.landInfoList;
                  // this.initDraw();
                  $("#drawRemove").trigger("click");
                  $("#drawReset").trigger("click");
                  this.coordinateList = "";
                }
              });
            })
            .catch(() => {
              // on cancel
            });
        }
      }
      //保存成功触发
    },

    landHomesteadEdConfirm(value) {
      //农地
      this.landHomesteadEditcalendar = false;
      this.landInfoList.lzhtjzrq = this.getDate(new Date(value));
    },
    houseHomesteadEdConfirm(value) {
      //农房
      this.houseHomesteadEditcalendar = false;
      this.houseInfoList.zlhtjzrq = this.getDate(new Date(value));
    },
    getDate(date) {
      //date是传过来的时间戳，注意需为13位，10位需*1000
      //也可以不传,获取的就是当前时间
      var time = new Date(date);
      var year = time.getFullYear(); //年
      var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
      var day = ("0" + time.getDate()).slice(-2); //日
      var mydate = year + "-" + month + "-" + day;
      return mydate;
    },
    //初始化绘制
    initDraw() {
      //清除数据
      // $("#drawRemove").trigger("click");
      // $("#drawReset").trigger("click");
      // this.coordinateList = "";
      //农地数据初始化
      this.landInfoList = {
        id: "", //String		是		主键id
        orgCode: "", //	String		否		行政区代码
        cdm: "", //	String		否		村代码
        cm: "", //String		否		村名
        xh: "", //	String		否		序号
        cbrmc: "", //String		否		承包人名称
        syrmc: "", //String		否		使用人名称
        nydlx: "", //	String		否		农用地类型
        mj: "", //	String		否		面积
        lzsynx: "", //	String		否		流转剩余年限
        zlhtjzrq: "", //	String		否		日期
        sfylzyx: "", //	String		否		是否流转意向
        xzqk: "", //	String		否		现状情况
        theGeom: "", //String		否		空间坐标
        xzqkKey: "", //	String		否		忽略
        nydlxKey: "", //	String		否		忽略
        frontland: "", //String		否		图片前
        behindland: "", //String		否		图片后
      };

      //农房数据初始化
      this.houseInfoList = {
        id: "", //	String		是		主键id
        orgCode: "", //	String		否		行政区代码
        cdm: "", //	String		否		村代码
        cm: "", //	String		否		村名
        xh: "", //	String		否		序号
        tdxz: "", //土地性质
        fwsyrmc: "", //	String		否		房屋所有人名称
        fwsyqh: "", //	String		否		房屋所有权证号
        tdzh: "", //	String		否		土地证号
        jzmj: "", //	String		否		建筑面积
        tdmj: "", //	String		否		土地面积
        sfyspsx: "", //	String		否		是否有审批手续
        xzqk: "", //	String		否		现状情况
        theGeom: "", //	String		否		空间坐标
        xzqkKey: "", //	String		否		忽略传null
        tdxzKey: "", //	String		否		忽略传null
        frontHouse: "", //	String		否		图片前
        behindHouse: "", //	String		否		图片后
        dz: "", //	String		否		地址
        zlrxm: "", //	String		否		租赁人姓名
        zlhtjzrq: "", //					租赁合同截止日期
        zlsynx: "", //					租赁剩余年限
        xzfwsfylzy: "", //					闲置房屋是否有流转意愿
        tdfl: "", //					集体/个人
      };

      //农房上传图片附件
      this.nfAddfileList = [];
      //农地上传图片附件
      this.ndAddfileList = [];

      //隐藏下方绘制地图操作栏
      this.searchBarOperVisbile = false;

      this.draw.drawMapPolygon = false; //绘制地图
    },
    initAxios() {
      //获取区镇村
      this.mapAreaSelectValue();
      //农房---字典项
      this.nfDictionary();
      //农地---字典项
      this.ndDictionary();
    },
    nfDictionary() {
      //农房权属
      this.getDicts("build_land_type").then((response) => {
        this.tdxzOptions = response.data;
      });
      //农房情况
      this.getDicts("geo_hc_house").then((response) => {
        this.xzqkOptions = response.data;
      });
    },
    ndDictionary() {
      //农用地类型
      this.getDicts("sub_object_type").then((response) => {
        this.nydlxOptions = response.data;
      });
      //现状情况
      this.getDicts("geo_hc_land").then((response) => {
        this.ndxzqkOptions = response.data;
      });
    },
    styleSteup() {
      let smallTop = this.$refs.sliderSmall.getBoundingClientRect().top;
      let smallLeft = this.$refs.sliderSmall.getBoundingClientRect().left;
      $(".ol-zoom-out").css({
        position: "absolute",
        left: smallLeft + "px",
        top: smallTop + "px",
        width: "40px",
        height: "26px",
        zIndex: "999999",
        cursor: "pointer",
        opacity: "0",
      });
      $(".ol-overlaycontainer-stopevent").css({
        zIndex: 9999,
      });
      let bigTop = this.$refs.sliderBig.getBoundingClientRect().top;
      let bigLeft = this.$refs.sliderBig.getBoundingClientRect().left;
      $(".ol-zoom-in").css({
        position: "absolute",
        left: bigLeft + "px",
        top: bigTop + "px",
        width: "40px",
        height: "26px",
        zIndex: "1005",
        cursor: "pointer",
        opacity: "0",
      });
      $(".ol-hidden ,.ol-collapsed").hide();
    },
    switchLoad() {
      let objData = {
        orgCode: this.villageDataObj.orgCode,
        statusList: "1,2,3,4,5,6,7,8",
      };
      // //右侧详情农房农地列表

      hcBottomSearch(objData).then((res) => {
        let content = res.data;
        //房
        let houseArr = [];
        let landArr = [];
        //地
        content.forEach((v, i) => {
          if (v.type == "house") {
            houseArr.push({
              geo: v.geo,
              mj: v.mj,
              name: v.name,
              type: v.type,
              xh: v.xh,
              xzqk: v.xzqk,
            });
          } else {
            landArr.push({
              geo: v.geo,
              mj: v.mj,
              name: v.name,
              type: v.type,
              xh: v.xh,
              xzqk: v.xzqk,
            });
          }
        });
        this.hcBottonHouseArr = houseArr;
        this.hcBottonLandArr = landArr;
        this.ishcBotton = true;
      });
    },
    mapAreaSelectValue() {
      treeselectByUser().then((res) => {
        if (res.code == 200) {
          let content = res.data;
          this.hcAreaInfoOption = content;
          let currDeptId; //;= "169"
          if (content[0].children && content[0].children.length != 0) {
            if (
              content[0].children[0].children &&
              content[0].children[0].children.length != 0
            ) {
              if (
                content[0].children[0].children[0].children &&
                content[0].children[0].children[0].children.length != 0
              ) {
                currDeptId =
                  content[0].children[0].children[0].children[0].value;
              } else {
                currDeptId = content[0].children[0].children[0].value;
              }
            } else {
              currDeptId = content[0].children[0].value;
            }
          } else {
            currDeptId = content[0].value;
          }
          // console.log(currDeptId);

          currentLocation().then((res) => {
            if (res.code == 200) {
              let content = res.data;
              this.geoJson = content.geoJson;
              //获取村详细信息
              this.deptGetFun(currDeptId);
              //获取地图
              this.mapBackground();
              //设置缩放按钮位置
              this.styleSteup();
            }
          });
        }
      });
    },
    //选择村
    hcAreaInfoFinish({ value, selectedOptions, tabIndex }) {
      this.deptGetFun(value);
    },
    //通过deptId获取经纬度
    deptGetFun(value) {
      deptGetId(value).then((res) => {
        this.villageVisbile = false;
        let content = res.data;
        this.villageDataObj = content;
        this.initDraw();
        $("#cun").trigger("change");
        this.switchLoad();
      });
    },

    searchBarOperFun(statue) {
      if (statue == "true") {
        this.searchBarOperVisbile = true;
      } else {
        this.searchBarOperVisbile = false;
        //初始化绘制
        // this.coordinateList = "";
        this.initDraw();
      }
    },

    /*右侧列表 --展开收缩*/
    selectionPush() {
      this.selectionIconShow = true;
      this.homesteadListStatus = true;
      $(".homesteadList_wrap").animate(
        {
          right: "0",
        },
        300
      );
    },
    homesteadListShrink() {
      this.selectionIconShow = false;
      $(".homesteadList_wrap").animate(
        {
          right: "-300px",
        },
        300
      );
      setTimeout(() => {
        this.homesteadListStatus = false;
      }, 300);
    },

    villageVisbileFun() {
      this.villageVisbile = true;
    },

    housingTypes(type) {
      // if (type == "0") {
      this.statusList = type;
      this.selectChooseOrder = 0;
    },

    housingSerial(item, index) {
      this.selectChooseOrder = index;
      if (item.type == "house") {
        $("#texiao_fang").val(item.name);
        $("#texiao_fang").trigger("click");
      } else {
        $("#texiao_di").val(item.name);
        $("#texiao_di").trigger("click");
      }
    },
    //关闭选择地址弹窗
    hcAreaInfoClose() {
      this.villageVisbile = false;
    },
    //加载地图
    mapBackground() {
      let _this = this;
      var projection = new ol.proj.Projection({
        //地图投影类型
        code: "EPSG:3857",
        units: "degrees",
        //extent:extent
      });
      //影像图 -----------------------------start
      var attributions =
        '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
        '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
      var aerial = new ol.layer.Tile({
        source: new ol.source.XYZ({
          attributions: attributions,
          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,
        visible: true,
        name: "天地图路网-卫星影像图",
      });
      var map = new ol.Map({
        layers: [aerial],
        //layers: [newwms],
        projection: projection,
        target: "mapWrap",
        view: new ol.View({
          center: ol.proj.fromLonLat([122.145662, 37.369575]),
          zoom: 10.2,
          minZoom: 10, //地图缩小限制
          maxZoom: 18.9, //地图放大限制
        }),
      });
      //地图属性定义
      var nongZt = ["house", "land"];
      var texiao_layer_fang;
      var texiao_layer_di;
      var delete_map = ["mapHouse", "mapLand"];
      //业务图层  wfs服务  属性查询开始 ------------------start
      /**
       * @api wfs服务空间查询
       * @param {*} wfsurl
       * @param {*} srsName
       * @param {*} typeName
       * @param {*} drawType
       * @param {option 可选} geometryField
       */

      var wmsSource = new ol.source.TileWMS({
        //url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms',
        url: "http://116.255.135.38:8080/geoserver/nsgk_hc/wms",
        //url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
        params: {
          LAYERS: "nsgk_hc:nsgk_hc_all",
          //'LAYERS': 'mywork_mysql:t_geo_hc_land',
          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
      var shitu;
      require(["@/assets/maps/plotPremises_" + _this.geoJson], function (data) {
        shitu = new ol.layer.Vector({
          title: "add Layer",
          source: new ol.source.Vector({
            projection: projection,
            // url: "http://116.255.135.38:8081/nsgk_test/profile/geojson/huancui.json", //GeoJSON的文件路径，用户可以根据需求而改变
            // format: new ol.format.GeoJSON(),
            features: new ol.format.GeoJSON().readFeatures(data),
          }),
          style: new ol.style.Style({
            fill: new ol.style.Fill({
              //矢量图层填充颜色，以及透明度
              color: "rgba(0,0,0,0)",
            }),
            stroke: new ol.style.Stroke({
              //边界样式
              color: "#47c68f",
              width: 3,
            }),
          }),
        });
        // console.log(shitu);
        map.addLayer(shitu);
      });

      var huancui_zhen;
      require(["@/assets/maps/qu_" + _this.geoJson], function (data) {
        huancui_zhen = new ol.layer.Vector({
          title: "add huancui_zhen",
          source: new ol.source.Vector({
            projection: projection,
            features: new ol.format.GeoJSON().readFeatures(data),
          }),
          style: new ol.style.Style({
            fill: new ol.style.Fill({
              //矢量图层填充颜色，以及透明度
              color: "rgba(27,50,56,0.8)",
            }),
          }),
        });
        map.addLayer(huancui_zhen);
      });

      // var shitu = new ol.layer.Vector({
      //   title: "add Layer",
      //   source: new ol.source.Vector({
      //     projection: projection,
      //     url: "http://116.255.135.38:8081/nsgk_test/profile/geojson/huancui.json", //GeoJSON的文件路径，用户可以根据需求而改变
      //     format: new ol.format.GeoJSON(),
      //   }),
      //   style: new ol.style.Style({
      //     fill: new ol.style.Fill({
      //       //矢量图层填充颜色，以及透明度
      //       color: "rgba(0,0,0,0)",
      //     }),
      //     stroke: new ol.style.Stroke({
      //       //边界样式
      //       color: "#47c68f",
      //       width: 3,
      //     }),
      //   }),
      // });
      // map.addLayer(shitu);
      // var huancui_zhen = new ol.layer.Vector({
      //   title: "add huancui_zhen",
      //   source: new ol.source.Vector({
      //     projection: projection,
      //     url: "http://116.255.135.38:8081/nsgk_test/profile/geojson/huancui_zhen.json", //GeoJSON的文件路径，用户可以根据需求而改变
      //     format: new ol.format.GeoJSON(),
      //   }),
      //   style: new ol.style.Style({
      //     fill: new ol.style.Fill({
      //       //矢量图层填充颜色，以及透明度
      //       color: "rgba(27,50,56,0.8)",
      //     }),
      //   }),
      // });
      // map.addLayer(huancui_zhen);

      ///-----------乡---------------------------------------------------------------------------------------------------------
      var villageVectorLayer; //村标记
      async function villageDiagram() {
        villageDataFun(_this.villageDataObj);
      }

      //村数据处理
      function villageDataFun(villageMapData) {
        let arrDatas = [];
        // for (let i = 0; i < villageMapData.length; i++) {
        let varName = "iconFeature0";
        window[varName] = new ol.Feature({
          geometry: new ol.geom.Point(
            ol.proj.fromLonLat([villageMapData.lng, villageMapData.lat])
          ),
          name:
            villageMapData.name == undefined
              ? villageMapData.deptName
              : villageMapData.name, //名称属性
          orgCode: villageMapData.orgCode, //人口数（万）
          lat: villageMapData.lat,
          lng: villageMapData.lng,
          type: "村",
          zhenOrgCode: villageMapData.zhenOrgCode,
        });
        window[varName].setStyle(visCreateLabelStyle(window[varName]));
        arrDatas.push(window[varName]);
        // }

        var vectorSource = new ol.source.Vector({
          features: arrDatas,
        });

        // //矢量标注图层
        villageVectorLayer = new ol.layer.Vector({
          source: vectorSource,
        });
        map.addLayer(villageVectorLayer);
      }

      //矢量标注样式设置函数，设置image为图标ol.style.Icon
      function visCreateLabelStyle(feature) {
        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: 'images/map.png'
            src: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
          }),
          text: new ol.style.Text({
            textAlign: "center", //位置
            textBaseline: "bottom", //基准线
            font: "normal 12px 微软雅黑", //文字样式
            text: feature.get("name"), //文本内容
            fill: new ol.style.Fill({
              //文本填充样式（即文字颜色)
              color: "#ffffff",
            }),
          }),
          zIndex: 9999,
        });
      }

      // map.on("moveend", function (evt) {
      //   var zoom = map.getView().getZoom();
      //   if (zoom < 13) {
      //     if (villageVectorLayer != undefined) {
      //       map.removeLayer(villageVectorLayer);
      //       map.removeLayer(shitu);

      //       map.addLayer(shitu);
      //       map.removeLayer(townVectorLayer);
      //       townDiagram();
      //     }
      //   }
      // });

      map.on("singleclick", function (evt) {
        let feature = map.forEachFeatureAtPixel(
          evt.pixel,
          (feature) => feature
        );
        if (feature) {
        }

        document.getElementById("info").innerHTML = "";
        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" }
        );
        if (url) {
          fetch(url)
            .then(function (response) {
              return response.text();
            })
            .then(function (html) {
              //农房上传图片附件
              _this.nfAddfileList = [];
              //农地上传图片附件
              _this.ndAddfileList = [];
              if (html.indexOf("<table") != -1) {
                setTimeout(() => {
                  map.removeLayer(texiao_layer_fang);
                  map.removeLayer(texiao_layer_di);
                  //特效动画实现 -----------------------------start
                  texiao_layer_fang = new ol.layer.Vector({
                    source: new ol.source.Vector(),
                  });
                  map.addLayer(texiao_layer_fang);
                  var deptmap = [zb[0], zb[1]];
                  //var center = ol.extent.getCenter(deptmap); //获取边界区域的中心位置
                  var circle = new ol.Feature({
                    geometry: new ol.geom.Point(deptmap), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
                  });

                  //var out =new ol.coordinate.Coordinate(datamap);
                  //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
                  //var center = ol.extent.getCenter(extent);   //获取边界区域的中心位置
                  //map.getView().setCenter(center);  //设置当前地图的显示中心位置
                  circle.setStyle(
                    new ol.style.Style({
                      image: new ol.style.Circle({
                        radius: 0,
                        stroke: new ol.style.Stroke({
                          color: "yellow",
                          size: 1,
                        }),
                      }),
                    })
                  );
                  texiao_layer_fang.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
                  _this.hasTable = true;
                  document.getElementById("info").innerHTML = html;
                  if (html.indexOf("house") != -1) {
                    //农房
                    _this.farmhouseStatus = 0;
                    let obj = {};
                    let trs = $("#info .featureInfo").find("tr:eq(1)");
                    let zjId = trs.find("td").eq(0).text();
                    let zjIdNum = zjId.replace("t_geo_hc_house.", "");
                    obj.id = zjIdNum; //	主键id
                    obj.fwsyrmc = trs.find("td").eq(1).text(); //房屋所有人名称
                    obj.cm = trs.find("td").eq(2).text(); //村名
                    obj.cdm = trs.find("td").eq(3).text(); //村代码
                    obj.dz = trs.find("td").eq(4).text(); //地址
                    obj.sfyspsx = trs.find("td").eq(5).text(); //是否有审批手续
                    obj.fwsyqh = trs.find("td").eq(6).text(); //房屋所有权证号
                    obj.jzmj = trs.find("td").eq(7).text(); //建筑面积
                    obj.tdzh = trs.find("td").eq(8).text(); //建筑面积
                    obj.tdxz = trs.find("td").eq(9).text(); //土地性质
                    obj.tdmj = trs.find("td").eq(10).text(); //土地面积
                    obj.xzqk = trs.find("td").eq(11).text(); //现状情况
                    obj.zlrxm = trs.find("td").eq(12).text(); //租赁人姓名
                    obj.zlhtjzrq = trs.find("td").eq(13).text(); //租赁合同截止日期
                    obj.zlsynx = trs.find("td").eq(14).text(); //租赁剩余年限
                    obj.xzfwsfylzy = trs.find("td").eq(15).text(); //闲置房屋是否有流转意愿
                    obj.xh = trs.find("td").eq(16).text(); //农房编号

                    obj.orgCode = trs.find("td").eq(20).text(); //行政区代码
                    obj.tdfl = trs.find("td").eq(23).text(); //集体/个人
                    obj.frontHouse = trs.find("td").eq(24).text(); //图片前
                    obj.behindHouse = trs.find("td").eq(25).text(); //图片后
                    let cloneObj = JSON.parse(JSON.stringify(obj));
                    _this.houseInfoList = cloneObj;
                    _this.houseInfoList.frontland = "";
                    _this.houseInfoList.behindland = "";
                    _this.houseInfoLookList = obj;
                  } else {
                    _this.farmhouseStatus = 1;
                    //农地
                    let obj = {};
                    let trs = $("#info .featureInfo").find("tr:eq(1)");
                    let zjId = trs.find("td").eq(0).text();
                    let zjIdNum = zjId.replace("t_geo_hc_land.", "");
                    obj.id = zjIdNum; //	主键id
                    obj.xh = trs.find("td").eq(1).text(); //序号
                    obj.cm = trs.find("td").eq(2).text(); //村名
                    obj.cbrmc = trs.find("td").eq(3).text(); //承包人名称
                    obj.syrmc = trs.find("td").eq(4).text(); //使用人名称
                    obj.nydlx = trs.find("td").eq(5).text(); //农用地类型
                    obj.mj = trs.find("td").eq(6).text(); //面积
                    obj.xzqk = trs.find("td").eq(7).text(); //现状情况
                    obj.lzhtjzrq = trs.find("td").eq(8).text(); //流转合同截止时间
                    obj.lzsynx = trs.find("td").eq(9).text(); //流转剩余年限
                    obj.sfylzyx = trs.find("td").eq(10).text(); //是否流转意向
                    obj.cdm = trs.find("td").eq(11).text(); //村代码
                    obj.orgCode = trs.find("td").eq(15).text(); //行政区化代码
                    obj.frontland = trs.find("td").eq(18).text(); //图片前
                    console.log(obj.frontland);
                    obj.behindland = trs.find("td").eq(19).text(); //图片后
                    _this.nydlxOptionsValue = trs.find("td").eq(5).text(); //农用地类型
                    let cloneObj = JSON.parse(JSON.stringify(obj));
                    _this.landInfoList = cloneObj;
                    //编辑图片清空
                    _this.landInfoList.frontland = "";
                    _this.landInfoList.behindland = "";
                    _this.landInfoLookList = obj;
                  }
                }, 300);

                if (
                  _this.draw.drawMapPolygon == false &&
                  _this.searchBarOperVisbile == false
                ) {
                  //判断不在绘制地图进入
                  if ($(".landHomestead_wrap").css("bottom") != "0px") {
                    $(".searchBar_wrap").css({ bottom: "0" });
                    $(".searchBar_wrap").animate(
                      {
                        bottom: "-100%",
                      },
                      300
                    );

                    $(".landHomestead_wrap").css({ bottom: "-100%" });
                    $(".landHomestead_wrap").animate(
                      {
                        bottom: "0",
                      },
                      400
                    );

                    $(".rightIcon_wrap").animate(
                      {
                        bottom: $(".landHomestead_wrap").height() + 10 + "px",
                      },
                      200
                    );
                  }
                }
              } else {
                _this.hasTable = false;

                if ($(".searchBar_wrap").css("bottom") != "0px") {
                  $(".landHomestead_wrap").css({ bottom: "0" });
                  $(".landHomestead_wrap").animate(
                    {
                      bottom: "-100%",
                    },
                    300
                  );

                  $(".searchBar_wrap").css({ bottom: "-100%" });
                  $(".searchBar_wrap").animate(
                    {
                      bottom: "0",
                    },
                    400
                  );
                  let searchBarWrapPadding = $(".searchBar_wrap")
                    .css("paddingTop")
                    .replace("px", "");
                  let searchBarWrapHeight = $(".searchBar_wrap").height();

                  $(".rightIcon_wrap").animate(
                    {
                      bottom:
                        searchBarWrapHeight +
                        searchBarWrapPadding * 2 +
                        10 +
                        "px",
                    },
                    200
                  );
                }
                //非编辑情况初始化
                if (_this.landHomesteadEditVisbile == false) {
                  //农地数据初始化
                  _this.landInfoList = {
                    id: "", //String		是		主键id
                    orgCode: "", //	String		否		行政区代码
                    cdm: "", //	String		否		村代码
                    cm: "", //String		否		村名
                    xh: "", //	String		否		序号
                    cbrmc: "", //String		否		承包人名称
                    syrmc: "", //String		否		使用人名称
                    nydlx: "", //	String		否		农用地类型
                    mj: "", //	String		否		面积
                    lzsynx: "", //	String		否		流转剩余年限
                    zlhtjzrq: "", //	String		否		日期
                    sfylzyx: "", //	String		否		是否流转意向
                    xzqk: "", //	String		否		现状情况
                    theGeom: "", //String		否		空间坐标
                    xzqkKey: "", //	String		否		忽略
                    nydlxKey: "", //	String		否		忽略
                    frontland: "", //String		否		图片前
                    behindland: "", //String		否		图片后
                  };

                  //农房数据初始化
                  _this.houseInfoList = {
                    id: "", //	String		是		主键id
                    orgCode: "", //	String		否		行政区代码
                    cdm: "", //	String		否		村代码
                    cm: "", //	String		否		村名
                    xh: "", //	String		否		序号
                    tdxz: "", //土地性质
                    fwsyrmc: "", //	String		否		房屋所有人名称
                    fwsyqh: "", //	String		否		房屋所有权证号
                    tdzh: "", //	String		否		土地证号
                    jzmj: "", //	String		否		建筑面积
                    tdmj: "", //	String		否		土地面积
                    sfyspsx: "", //	String		否		是否有审批手续
                    xzqk: "", //	String		否		现状情况
                    theGeom: "", //	String		否		空间坐标
                    xzqkKey: "", //	String		否		忽略传null
                    tdxzKey: "", //	String		否		忽略传null
                    frontHouse: "", //	String		否		图片前
                    behindHouse: "", //	String		否		图片后
                    dz: "", //	String		否		地址
                    zlrxm: "", //	String		否		租赁人姓名
                    zlhtjzrq: "", //					租赁合同截止日期
                    zlsynx: "", //					租赁剩余年限
                    xzfwsfylzy: "", //					闲置房屋是否有流转意愿
                    tdfl: "", //					集体/个人
                  };
                }
              }
            });
        }
      });

      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

      //按照分类查询  村定位地图-----------------start
      $("#cun").on("change", function () {
        /**
         * @api wfs服务空间查询
         * @param {*} wfsurl
         * @param {*} srsName
         * @param {*} typeName
         * @param {*} drawType
         * @param {option 可选} geometryField
         */

        var cun = _this.villageDataObj.deptName;
        //定位个人地图
        map.removeLayer(texiao_layer_fang);
        map.removeLayer(texiao_layer_di);
        //删除之前加载的图层

        let currObjNum = _this.villageDataObj;
        map.getView().animate({
          // 只设置需要的属性即可
          center: ol.proj.fromLonLat([currObjNum.lng, currObjNum.lat]), // 中心点
          zoom: 14.5, // 缩放级别
          rotation: undefined, // 缩放完成view视图旋转弧度
          duration: 1000, // 缩放持续时间，默认不需要设置
        });

        map.removeLayer(nongZt[0]);
        map.removeLayer(nongZt[1]);
        map.removeLayer(delete_map[0]);
        map.removeLayer(delete_map[1]);
        //村的数据判断

        map.removeLayer(villageVectorLayer);
        villageDiagram();
        setTimeout(() => {
          //map.removeLayer(shitu);
        }, 1000);

        //查询条件
        var cql_filter;

        //图层加载
        //地的数据判断
        var difang = ["nsgk_hc:t_geo_hc_house", "nsgk_hc:t_geo_hc_land"];
        console.log("++++++++++++" + cun);
        //业务图层  wms服务
        for (var i = 0; i < difang.length; i++) {
          if (difang[i] == "nsgk_hc:t_geo_hc_house") {
            cql_filter = "CM='" + cun + "'";
          } else {
            cql_filter = "CM='" + cun + "'";
          }
          nongZt[i] = new ol.layer.Tile({
            source: new ol.source.TileWMS({
              //url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms',
              url: "http://116.255.135.38:8080/geoserver/nsgk_hc/wms",
              //url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
              //url: 'http://localhost:8888/geoserver/new_shp/wms',
              params: {
                LAYERS: difang[i],
                //'LAYERS': 'new_shp:new_shp_all',
                TILED: true,
                cql_filter: cql_filter,
                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,
            //featurePrefix: 'nationalwater',//工作区名称
            //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
            outputFormat: "application/json",
            //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
          };
          let url_dw = "http://116.255.135.38:8080/geoserver/nsgk_hc/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);
          console.log(url_dw);
          fetch(url_dw, {
            method: "POST", // *GET, POST, PUT, DELETE, etc.
          })
            .then((res) => {
              var geojsonmap = res.json();
              return geojsonmap;
            })
            .then((data) => {
              //var datamap = data.bbox;
              // var datamap = data.features[0].bbox;
              // map.getView().animate({
              //   // 只设置需要的属性即可
              //   center: datamap, // 中心点
              //   zoom: 15, // 缩放级别
              //   rotation: undefined, // 缩放完成view视图旋转弧度
              //   duration: 1000, // 缩放持续时间，默认不需要设置
              // });
            })
            .catch((error) => {
              console.log("【异常】", error);
            });
          map.addLayer(nongZt[i]);
        }
      });
      //村定位查询-------------------------------------end

      //按照查询条件人名  定位地图-----------------start
      $("#query").on("click", function () {
        /**
         * @api wfs服务空间查询
         * @param {*} wfsurl
         * @param {*} srsName
         * @param {*} typeName
         * @param {*} drawType
         * @param {option 可选} geometryField
         */
        var val = _this.seachText;
        if (val == "") {
          alert("请填写查询条件在查询");
        } else {
          //分类查询查询农地、农房
          var difang;
          //var di = document.getElementById('di');
          //删除矢量图层json
          //map.removeLayer(shitu);
          //删除之前图层 --------------------start
          //属性查询删除
          //map.removeLayer(nongZt[0]);
          //map.removeLayer(nongZt[1]);
          //map.removeLayer(delete_map[0]);
          //map.removeLayer(delete_map[1]);
          map.removeLayer(texiao_layer_fang);
          map.removeLayer(texiao_layer_di);
          //删除之前图层 -------------------end
          //查询条件
          var cql_filter;
          var cun = _this.villageDataObj.deptName;

          difang = ["nsgk_hc:t_geo_hc_house", "nsgk_hc:t_geo_hc_land"];
          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 = "XH='" + val + "'" + "and CM='" + cun + "'";
            } else {
              //循环判断查询条件
              if (cun != "all" && cun != "") {
                if (difang[i] == "nsgk_hc:t_geo_hc_house") {
                  cql_filter = "FWSYRMC='" + val + "'" + "and CM='" + cun + "'";
                } else {
                  cql_filter = "SYRMC='" + val + "'" + "and CM='" + cun + "'";
                }
              } else {
                if (difang[i] == "nsgk_hc:t_geo_hc_house") {
                  cql_filter = "FWSYRMC='" + val + "'";
                } else {
                  cql_filter = "SYRMC='" + val + "'";
                }
              }
            }
            //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://192.168.31.150:8888/geoserver/mywork_mysql/wms',
                url: "http://116.255.135.38:8080/geoserver/nsgk_hc/wms",
                //url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
                //url: 'http://localhost:8888/geoserver/new_shp/wms',
                params: {
                  LAYERS: difang[i],
                  //'LAYERS': 'new_shp:new_shp_all',
                  TILED: true,
                  cql_filter: cql_filter,
                  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,
              //featurePrefix: 'nationalwater',//工作区名称
              //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
              outputFormat: "application/json",
              //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
            };
            let url_dw = "http://116.255.135.38:8080/geoserver/nsgk_hc/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 != "") {
                  //var datamap = data.bbox;
                  var datamap = data.features[0].bbox;
                  map.getView().animate({
                    // 只设置需要的属性即可
                    center: datamap, // 中心点
                    zoom: 17, // 缩放级别
                    rotation: undefined, // 缩放完成view视图旋转弧度
                    duration: 1000, // 缩放持续时间，默认不需要设置
                  });
                  //特效动画实现 -----------------------------start
                  if (tach == 1 && once == 0) {
                    texiao_layer_fang = new ol.layer.Vector({
                      source: new ol.source.Vector(),
                    });
                    map.addLayer(texiao_layer_fang);
                    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') //投影坐标转为地理坐标
                    });

                    //var out =new ol.coordinate.Coordinate(datamap);
                    //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
                    //var center = ol.extent.getCenter(extent);   //获取边界区域的中心位置
                    //map.getView().setCenter(center);  //设置当前地图的显示中心位置
                    circle.setStyle(
                      new ol.style.Style({
                        image: new ol.style.Circle({
                          radius: 0,
                          stroke: new ol.style.Stroke({
                            color: "yellow",
                            size: 1,
                          }),
                        }),
                      })
                    );
                    texiao_layer_fang.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 {
                    texiao_layer_di = new ol.layer.Vector({
                      source: new ol.source.Vector(),
                    });
                    map.addLayer(texiao_layer_di);
                    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') //投影坐标转为地理坐标
                    });

                    //var out =new ol.coordinate.Coordinate(datamap);
                    //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
                    //var center = ol.extent.getCenter(extent);   //获取边界区域的中心位置
                    //map.getView().setCenter(center);  //设置当前地图的显示中心位置
                    circle.setStyle(
                      new ol.style.Style({
                        image: new ol.style.Circle({
                          radius: 0,
                          stroke: new ol.style.Stroke({
                            color: "yellow",
                            size: 1,
                          }),
                        }),
                      })
                    );
                    texiao_layer_di.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
                } else if (tach == 1) {
                  once = once + 1;
                } else {
                  if (tach == 2 && once == 1) {
                    alert("没有找到相关人员农房农地信息");
                  }
                }
              })
              .catch((error) => {
                console.log("【异常】", error);
              });
            map.addLayer(delete_map[i]);
          }
        }
      });
      //按照查询  定位地图-----------------end

      //开始绘制地图  ------------------- start

      var vector_drawing;
      var draw;
      //开始绘制地图
      $("#drawPolygon").click(function () {
        //map.removeLayer(zjd_land);
        map.removeLayer(vector_drawing);
        //var source = new ol.source.Vector({wrapX: false});
        vector_drawing = new ol.layer.Vector({
          source: new ol.source.Vector(),
        });
        map.addLayer(vector_drawing);

        function addInteraction() {
          draw = new ol.interaction.Draw({
            source: vector_drawing.getSource(),
            type: "Polygon",
          });
          draw.on("drawend", function (evt) {
            var feature = evt.feature;
            var geometry = feature.getGeometry();
            var coordinate = geometry.getCoordinates();
            console.log("打印" + coordinate);
            _this.coordinateList = coordinate.toString();
            console.log(_this.coordinateList);
            $("#drawRemove").trigger("click");
            _this.$set(_this.draw, "drawMapPolygon", false);

            //that.drawInsert = coordinate;
          });
          map.addInteraction(draw);
        }

        addInteraction();
      });
      //清除画图鼠标点击事件
      $("#drawRemove").click(function () {
        map.removeInteraction(draw);
      });
      //还原之前图层
      $("#drawReset").click(function () {
        map.removeLayer(vector_drawing);
        //map.addLayer(zjd_land);
      });

      //开始绘制地图  ------------------- end

      //特效实现
      $("#texiao_fang").on("click", function () {
        /**
         * @api wfs服务空间查询
         * @param {*} wfsurl
         * @param {*} srsName
         * @param {*} typeName
         * @param {*} drawType
         * @param {option 可选} geometryField
         */

        //alert("进入分类");
        //删除之前加载的图层
        map.removeLayer(texiao_layer_fang);
        map.removeLayer(texiao_layer_di);
        var cun = _this.villageDataObj.deptName;
        _this.homesteadListShrink();
        //删除之前加载的图层
        //map.removeLayer(dishitu);
        //map.removeLayer(cunshitu);
        //分类查询查询农地、农房
        var difang;
        //地的数据判断
        difang = "nsgk_hc:t_geo_hc_house";
        //查询条件
        var cql_filter;
        //村的数据判断
        var val = $("#texiao_fang").val();
        if (val == "") {
          alert("请填写查询条件在查询");
        }
        //for(var i=0; i< difang.length; i++){
        //cql_filter = "CM='"+cun +"'"+ "and FWSYRMC='"+query_mz.value;
        cql_filter = "FWSYRMC='" + val + "' and CM='" + cun + "'";
        //图层加载
        //地的数据判断

        //定位查询位置
        let param_dw = {
          srsName: "EPSG:3857",
          service: "WFS",
          version: "1.0.0",
          request: "GetFeature",
          typename: difang,
          //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.135.38:8080/geoserver/nsgk_hc/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) => {
            //关联查询农房信息---------------start
            // document.getElementById("info").innerHTML = "";
            // var select_fang = (document.getElementById("info").innerHTML =
            //   data.features[0].properties);
            // _this.hasTable = true;
            // _this.hasDateStatus = 1;
            // let obj = {};
            // //let trs = $("#info .featureInfo").find("tr:eq(1)");
            // obj.FWSYRMC = select_fang.FWSYRMC; //房屋所有人名称
            // obj.CM = select_fang.CM; //村名
            // obj.CDM = select_fang.CDM; //村代码
            // obj.DZ = select_fang.DZ; //地址
            // obj.SFYSPSX = select_fang.SFYSPSX; //是否有审批手续
            // obj.FWSYQH = select_fang.FWSYQH; //房屋所有权证号
            // obj.JZMJ = select_fang.JZMJ; //建筑面积
            // obj.TDZH = select_fang.TDZH; //土地证号
            // obj.TDXZ = select_fang.TDXZ; //土地性质
            // obj.TDMJ = select_fang.TDMJ; //土地面积
            // obj.XZQK = select_fang.XZQK; //现状情况
            // obj.ZLRXM = select_fang.ZLRXM; //租赁人姓名
            // obj.ZLHTJZRQ = select_fang.ZLHTJZRQ; //租赁合同截止时间
            // obj.ZLSYNX = select_fang.ZLSYNX; //租赁剩余年现
            // obj.XZFWSFYLZY = select_fang.XZFWSFYLZY; //是否流转意向
            // obj.XH = select_fang.XH; //农房编号
            // _this.hasData = obj;
            //关联查询农房信息---------------end
            //定位结束 --------------start
            //var datamap = data.bbox;
            var datamap = data.features[0].bbox;
            map.getView().animate({
              // 只设置需要的属性即可
              center: datamap, // 中心点
              zoom: 18, // 缩放级别
              rotation: undefined, // 缩放完成view视图旋转弧度
              duration: 1000, // 缩放持续时间，默认不需要设置
            });
            //定位结束 --------------end
            //特效动画实现 -----------------------------start
            texiao_layer_fang = new ol.layer.Vector({
              source: new ol.source.Vector(),
            });
            map.addLayer(texiao_layer_fang);

            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') //投影坐标转为地理坐标
            });

            //var out =new ol.coordinate.Coordinate(datamap);
            //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
            //var center = ol.extent.getCenter(extent);   //获取边界区域的中心位置
            //map.getView().setCenter(center);  //设置当前地图的显示中心位置
            circle.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  radius: 0,
                  stroke: new ol.style.Stroke({
                    color: "yellow",
                    size: 1,
                  }),
                }),
              })
            );
            texiao_layer_fang.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
          })
          .catch((error) => {
            console.log("【异常】", error);
          });
      });
      //-----------------------------------------------------------------------------特效农房加载结束   end

      //-----------------------------------------------------------------------------特效农地加载开始   start
      //特效实现
      $("#texiao_di").on("click", function () {
        /**
         * @api wfs服务空间查询
         * @param {*} wfsurl
         * @param {*} srsName
         * @param {*} typeName
         * @param {*} drawType
         * @param {option 可选} geometryField
         */
        //alert("进入分类");
        //删除之前加载的图层
        map.removeLayer(texiao_layer_di);
        map.removeLayer(texiao_layer_fang);
        _this.homesteadListShrink();
        var cun = _this.villageDataObj.deptName;
        //删除之前加载的图层
        //map.removeLayer(dishitu);
        //map.removeLayer(cunshitu);
        //分类查询查询农地、农房
        var difang;
        //地的数据判断
        difang = "nsgk_hc:t_geo_hc_land";
        //查询条件
        var cql_filter;
        //村的数据判断
        var val = $("#texiao_di").val();
        if (val == "") {
          alert("请填写查询条件在查询");
        }
        //for(var i=0; i< difang.length; i++){
        //cql_filter = "CM='"+cun +"'"+ "and FWSYRMC='"+query_mz.value;
        cql_filter = "SYRMC='" + val + "' and CM='" + cun + "'";
        //图层加载

        //定位查询位置
        let param_dw = {
          srsName: "EPSG:3857",
          service: "WFS",
          version: "1.0.0",
          request: "GetFeature",
          typename: difang,
          INFO_FORMAT: "text/html",
          //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.135.38:8080/geoserver/nsgk_hc/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) => {
            //关联查询农地信息  ----------start
            //  document.getElementById("info").innerHTML = "";
            //  var select_di = (document.getElementById("info").innerHTML =
            //    data.features[0].properties);
            //  _this.farmhouseStatus = 1;
            //  let obj = {};
            //  let zjId = data.features[0].id;
            //  let zjIdNum = zjId.replace("t_geo_hc_land.", "");
            //  obj.id = zjIdNum; //	主键id
            //  obj.xh = select_di.XH; //序号
            //  obj.cm = select_di.CM; //村名
            //  obj.cbrmc = select_di.CBRMC; //承包人名称
            //  obj.syrmc = select_di.SYRMC; //使用人名称
            //  obj.nydlx = select_di.NYDLX; //农用地类型
            //  obj.mj = select_di.MJ; //面积
            //  obj.xzqk = select_di.XZQK; //现状情况
            //  obj.lzhtjzrq = select_di.LZHTJZRQ; //流转合同截止时间
            //  obj.lzsynx = select_di.LZSYNX; //流转剩余年限
            //  obj.sfylzyx = select_di.SFYLZYX; //是否流转意向
            //  obj.cdm = select_di.CDM; //村代码
            //  obj.orgCode = select_di.org_code; //行政区化代码
            //  obj.frontland = select_di.frontland; //图片前
            //  obj.behindland = select_di.behindland; //图片后
            // // // _this.nydlxOptionsValue = trs.find("td").eq(5).text(); //农用地类型
            //  let cloneObj = JSON.parse(JSON.stringify(obj));
            //  _this.landInfoList = cloneObj;
            //  _this.landInfoLookList = obj;
            //关联查询农地信息  ----------end
            //获取坐标定位开始----------start
            //var datamap = data.bbox;
            var datamap = data.features[0].bbox;
            map.getView().animate({
              // 只设置需要的属性即可
              center: datamap, // 中心点
              zoom: 16, // 缩放级别
              rotation: undefined, // 缩放完成view视图旋转弧度
              duration: 1000, // 缩放持续时间，默认不需要设置
            });
            //获取坐标定位开始----------end
            //特效动画实现 -----------------------------start
            texiao_layer_di = new ol.layer.Vector({
              source: new ol.source.Vector(),
            });
            map.addLayer(texiao_layer_di);

            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') //投影坐标转为地理坐标
            });

            //var out =new ol.coordinate.Coordinate(datamap);
            //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
            //var center = ol.extent.getCenter(extent);   //获取边界区域的中心位置
            //map.getView().setCenter(center);  //设置当前地图的显示中心位置
            circle.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  radius: 0,
                  stroke: new ol.style.Stroke({
                    color: "#ef5b9c",
                    size: 1,
                  }),
                }),
              })
            );
            texiao_layer_di.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: "#ef5b9c",
                      size: 1,
                    }),
                  }),
                })
              );
            });
            //特效动画实现 -----------------------------end
          })
          .catch((error) => {
            console.log("【异常】", error);
          });
      });

      //-----------------------------------------------------------------------------特效农地加载结束   end
    },

    //农房 - 土地性质 选择值
    tdxzOptionsFun(value) {
      this.houseInfoList.tdxz = value.dictLabel;

      this.tdxzOptionsVibile = false;
      console.log(value);
      console.log(this.houseInfoList);
    },
    //农房 - 是否有审批 选择值
    xfCirculationFun(value) {
      this.xfCirculationVisbile = false;
      this.houseInfoList.sfyspsx = value;
    },
    //农房 - 现状情况 选择值
    xzqkOptionsFun(value) {
      this.houseInfoList.xzqk = value.dictValue;
      this.xzqkOptionsVisbile = false;
    },
    //农房 - 是否有流转 选择值
    xflzCirculationFun(value) {
      this.xflzCirculationVisbile = false;
      this.houseInfoList.xzfwsfylzy = value;
    },
    //农房 - 房屋类型
    fwdlxOptionsFun(value) {
      this.houseInfoList.tdfl = value;
      this.fwdlxOptionsVibile = false;
    },
    //农地 - 现状情况 选择值
    ndxzqkOptionsFun(value) {
      this.landInfoList.xzqk = value.dictValue;
      this.ndxzqkOptionsVisbile = false;
    },
    //农地 - 农用地类型 选择值
    nydlxOptionsFun(value) {
      this.landInfoList.nydlx = value.dictLabel;
      // this.nydlxOptionsValue = value.dictLabel;
      this.nydlxOptionsVibile = false;
    },
    //农地 - 是否有流转 选择值
    xdCirculationOptionsFun(value) {
      this.xdlzCirculationVisbile = false;
      this.landInfoList.sfylzyx = value;
    },
    //农房 -- 新建 上传图片方法
    nfAddimgonRead(file) {
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
      formData.append("file", file.file); //接口需要传的参数
      commonUpload(formData).then((res) => {
        this.houseInfoList.frontHouse = res.url;
      });
    },
    //农地 -- 新建 上传图片方法
    ndAddimgonRead(file) {
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
      formData.append("file", file.file); //接口需要传的参数
      commonUpload(formData).then((res) => {
        this.landInfoList.frontland = res.url;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.app-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  .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;
      }
    }
  }
  .rightZoom_wrap {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 74px;
    margin-top: -200px;
    background: #fff;
    margin-bottom: 16px;
    border-radius: 10px;
    height: 100px;
    .amplification,
    .narrow {
      height: 50px;
      width: 74px;
    }
    .amplification {
      background: url("../../assets/images/homestead/jia.png") center center
        no-repeat;
      // background-size: 40% auto;
    }
    .narrow {
      background: url("../../assets/images/homestead/jian.png") center center
        no-repeat;
      // background-size: 40% auto;
    }
  }
  //  <div class="rightZoom_wrap">
  //     <div class="amplification"></div>
  //     <div class="narrow"></div>
  //   </div>
  .homesteadList_wrap {
    // display: none;
    display: flex;
    position: absolute;
    right: -536px;
    top: 20px;
    bottom: 160px;
    width: 536px;
    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: 40px;
        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: 1;
          overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /*超出部分文字以...显示*/
        }
        .square_text {
          font-size: 28px;
          flex: 0.8;
        }
        .operation_mian {
          flex: 0 0 150px;

          .describe {
            font-size: 20px;
            padding: 6px 12px;
            float: right;
            color: #fff;
            border-radius: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 150px;
            &.yph {
              background: rgb(175, 39, 255);
            }
            &.dlzdph {
              background: rgb(255, 111, 54);
            }
            &.ylz {
              background: #3cbf5b;
            }
            &.dlz {
              background: rgb(255, 232, 76);
            }
          }
        }
      }
    }
    .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;
        }
      }
    }
  }
  .map_area {
    width: 100vw;
    height: 100vh;
    background: #ddd;
    position: absolute;
    left: 0;
    top: 0;
  }
  .address_wrap {
    position: fixed;
    // z-index: 9;
    top: 24px;
    left: 16px;
    display: flex;
    .address_item {
      display: flex;
      flex-direction: column;
      margin-right: 8px;
      justify-content: center; /* 相对父元素水平居中 */
      align-items: center; /*  子元素相对父元素垂直居中 */
      position: relative;
      .portrait {
        width: 86px;
        height: 86px;
        background: #000;
        border-radius: 50%;
        margin-bottom: 18px;
        font-size: 30px;
        color: #fff;
        text-align: center;
        line-height: 65px;
        color: #fff;
        &.zhen,
        &.cun {
          border: 5px solid rgba(255, 255, 255, 0.6);
        }
        &.zhen {
          background: url("../../assets/images/homestead/zhen.jpg") top center
            no-repeat;
          background-size: 100% 100%;
        }
        &.cun {
          background: url("../../assets/images/homestead/cun.jpg") top center
            no-repeat;
          background-size: 100% 100%;
        }
      }
      .name {
        font-size: 22px;
        background: #fff;
        padding: 4px 6px;
        border-radius: 8px;
      }
      &.more {
        .portrait {
          width: 40px;
          background: none;
        }
        .name {
          background: url("../../assets/images/homestead/address_more.png")
            no-repeat;
          background-size: 100% 100%;
          width: 40px;
          height: 40px;
          padding: 0;
          &.shrink {
            transform: rotate(180deg);
          }
        }
      }
      .address_suspension {
        position: absolute;
        left: calc(100% + 8px);
        top: 100px;
        z-index: 10;
        padding: 10px 8px 10px 15px;
        background: #fff;
        border-radius: 10px;
        width: auto;
        .address_suspension_scroll {
          height: 200px;
          overflow-y: auto;
          padding-right: 8px;
        }
        .items {
          white-space: nowrap;
        }
      }
    }
  }
  .searchBar_wrap {
    // display: none;
    display: flex;
    position: fixed;
    bottom: 0%;
    left: 0;
    width: 100%;
    padding: 28px 16px 28px 13px;
    background: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    .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;
    }
  }
  .landHomestead_wrap {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    padding: 0 16px;
    .landHomestead_search {
      height: 80px;
      background: #f1f1f1;
      border: 1px solid #dfdfdf;
      border-radius: 10px;
      padding: 0 28px;
      display: flex;
      margin-bottom: 10px;
      .bar_icon {
        width: 50px;
        height: 50px;
        background: url("../../assets/images/homestead/searchBar_bar.png")
          center center no-repeat;
        background-size: 95% 95%;
        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; /*  子元素相对父元素垂直居中 */
      }
    }
    .landHomestead_body {
      background: #fff;
      padding: 30px 20px;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      position: relative;
      .body_flex {
        display: block;
        overflow: hidden;
        .attribute {
          width: 42%;
          float: left;

          .names {
            height: 54px;
            padding-left: 46px;
            background: url("../../assets/images/homestead/landHomestead_home.png")
              left center no-repeat;
            background-size: 38px 36px;
            font-size: 32px;
            line-height: 54px;
            color: #333333;
            margin-bottom: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .address {
            height: 48px;
            line-height: 48px;
            font-size: 28px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            margin-right: 8px;
          }
          .nature {
            height: 48px;
            font-size: 28px;
          }
        }
        .distance {
          width: 29%;
          float: left;
          .size {
            height: 54px;
            line-height: 54px;
            font-size: 40px;
            color: #333333;
            margin-bottom: 12px;
          }
          .probably {
            line-height: 48px;
            font-size: 28px;
            height: 48px;
          }
        }
        .others {
          width: 29%;
          float: left;
          .information {
            height: 54px;
            margin-bottom: 12px;
            .status_text {
              color: #fff;
              font-size: 24px;
              background: #3cbf5b;
              border-radius: 20px;
              padding: 8px 15px;
              float: right;
              max-width: calc(100% - 56px);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .location {
              width: 36px;
              height: 36px;
              background: url("../../assets/images/homestead/others_location.png")
                no-repeat;
              float: right;
              margin: 8px 0 0 20px;
            }
          }
          .editor {
            height: 96px;
            .editor_icon {
              width: 72px;
              height: 72px;
              float: right;
              background: url("../../assets/images/homestead/edit_icon.png")
                no-repeat;
              background-size: 100% 100%;
              margin-top: 14px;
            }
          }
        }
      }
    }
  }
  .landHomesteadDetails_wrap {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99;
    height: calc(100% - 190px);

    .content_mian {
      flex: 1;
      margin: 0 16px;
      padding: 28px 40px 28px 40px;
      background: #fff;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      display: flex;
      flex-direction: column;
      .serial_flex {
        flex: 0 0 60px;
        margin-bottom: 15px;
        font-size: 40px;
        justify-content: center; /* 相对父元素水平居中 */
        align-items: center; /*  子元素相对父元素垂直居中 */
        color: #333;
        display: flex;
        .number {
          flex: 1;
          span {
            padding-left: 30px;
          }
        }
        .localhref {
          height: 36px;
          flex: 0 0 36px;
          background: url("../../assets/images/homestead/farmlandEditSwitch_close.png")
            no-repeat;
          background-size: 100% 100%;
        }
      }
      .flex_block {
        flex: 1;
        font-size: 28px;
        .describe {
          color: #555;
          padding-right: 30px;
        }
        .content {
          font-size: #333;
        }
      }
      .uploadPictures_block {
        flex: 0 0 160px;
        display: flex;
        max-width: 90%;
        .statusQuo {
          flex: 1;
          display: flex;
          &:first-child {
            margin-right: 36px;
          }
          .picture {
            flex: 1;
            background: url("../../assets/images/homestead/no_img.png") center
              center no-repeat;
            background-size: 90% auto;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .describe {
            flex: 0 0 32px;
            display: flex;
            justify-content: center; /* 相对父元素水平居中 */
            align-items: center; /*  子元素相对父元素垂直居中 */
            margin-left: 6px;
          }
        }
      }
      .editor_block {
        flex: 0 0 72px;
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
        .editor_icon {
          width: 70px;
          height: 70px;
          background: url("../../assets/images/homestead/edit_icon.png")
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .landHomesteadEdit_wrap {
    display: flex;
    position: absolute;
    left: 0;
    bottom: -100vh;
    z-index: 100;
    width: 100%;
    height: calc(100% - 190px);
    flex-direction: column;
    .content_mian {
      flex: 1;
      margin: 0 16px;
      padding: 28px 25px 28px 40px;
      background: #fff;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      display: flex;
      flex-direction: column;
      .info_title {
        flex: 0 0 60px;
        margin-bottom: 15px;
        font-size: 40px;
        justify-content: center; /* 相对父元素水平居中 */
        align-items: center; /*  子元素相对父元素垂直居中 */
        color: #333;
      }
      .flex_main {
        height: 890px;
        padding-right: 15px;
        overflow-y: auto;
      }
      .flex_block {
        height: 100px;
        margin-bottom: 20px;
        .number_s50 {
          width: 50%;
          display: flex;
          float: left;
          flex-direction: column;
        }
        .number_s100 {
          width: 100%;
          float: left;
          display: flex;
          flex-direction: column;
        }
        .number_s60 {
          // flex: 0.6;
          width: 60%;
          float: left;
          display: flex;
          flex-direction: column;
        }
        .number_s40 {
          // flex: 0.4;
          width: 40%;
          display: flex;
          flex-direction: column;
        }
        .number_s35 {
          width: 35%;
          float: left;
          display: flex;
          flex-direction: column;
        }
        .number_s30 {
          width: 30%;
          display: flex;
          float: left;
          flex-direction: column;
        }
        .title_m {
          font-size: 28px;
          flex: 0 0 50px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          align-items: center; /*  子元素相对父元素垂直居中 */
        }
        .input_m {
          &.select {
            position: relative;
            .dropDown_icon {
              width: 20px;
              height: 16px;
              background: url("../../assets/images/homestead/drop-down.png")
                no-repeat;
              background-size: 100% 100%;
              display: block;
              position: absolute;
              right: 8px;
              top: 12px;
              z-index: 99;
            }
          }
          &.about {
            position: relative;
            .about_symbol {
              position: absolute;
              left: 8px;
              top: 5px;
              z-index: 99;
            }
            /deep/ {
              .van-field__control {
                padding-left: 38px;
              }
            }
          }

          .van-cell {
            padding: 0;
            /deep/ {
              .van-field__control {
                border-bottom: 1px solid #707070;
                &:focus {
                  border-color: #3cbf5b;
                  color: #3cbf5b;
                }
              }
            }
          }
        }
        .mr50 {
          padding-right: 50px;
        }
      }
      .uploadPicturesFlex_block {
        .title_m {
          font-size: 28px;
          flex: 0 0 50px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          align-items: center; /*  子元素相对父元素垂直居中 */
          margin-bottom: 20px;
        }
        .main_m {
        }
      }
    }
    .footer_main {
      flex: 0 0 120px;
      background: #fff;
      display: flex;
      justify-content: center; /* 相对父元素水平居中 */
      align-items: center; /*  子元素相对父元素垂直居中 */
      .cancel,
      .save {
        width: 260px;
        height: 75px;
        border-radius: 75px;
        background: #cccccc;
        font-size: 32px;
        color: #fff;
        display: flex;
        justify-content: center; /* 相对父元素水平居中 */
        align-items: center; /*  子元素相对父元素垂直居中 */
      }
      .save {
        background: #3cbf5b;
        margin-left: 50px;
      }
    }
  }
  .farmlandEditSwitch_wrap {
    width: 100vw;
    height: 100vh;
    background: url("../../assets/images/homestead/farmlandEditSwitch_bg.png")
      no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1001;
    .mains {
      width: 544px;
      height: 480px;
      background: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -272px 0 0 -272px;
      z-index: 1002;
      border-radius: 30px;
      padding: 0 30px;
      display: flex;
      justify-content: center; /* 相对父元素水平居中 */
      align-items: center; /*  子元素相对父元素垂直居中 */
      .close_btn {
        position: absolute;
        width: 28px;
        height: 28px;
        background: url("../../assets/images/homestead/farmlandEditSwitch_close.png")
          no-repeat;
        background-size: 100% 100%;
        right: 40px;
        top: 40px;
      }
      .farmhouse {
        flex: 1;
        display: flex;
        justify-content: center; /* 相对父元素水平居中 */
        align-items: center; /*  子元素相对父元素垂直居中 */
      }
      .farmland {
        flex: 1;
        display: flex;
        justify-content: center; /* 相对父元素水平居中 */
        align-items: center; /*  子元素相对父元素垂直居中 */
      }
      .farmhouse,
      .farmland {
        flex-direction: column;
        .icons {
          width: 146px;
          height: 146px;
          margin-bottom: 14px;
        }
        .names {
          font-size: 40px;
          color: #3cbf5b;
        }
      }
      .farmhouse {
        .icons {
          background: url("../../assets/images/homestead/nf.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      .farmland {
        .icons {
          background: url("../../assets/images/homestead/nd.png") no-repeat;
          background-size: 100% 100%;
        }
      }

      // <div class="farmhouse">
      //     <div class="icons"></div>
      //     <p class="names">农房</p>
      //   </div>
      //   <div class="farmland">
      //     <div class="icons"></div>
      //     <p class="names">农地</p>
      //   </div>
    }
  }
}

::-webkit-scrollbar {
  -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
  width: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar:horizontal {
  height: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #eee;
  border-radius: 10px;
  border: 3px solid #ffffff;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ffffff;
}

::v-deep {
  .van-overlay {
    background-color: rgba(0, 0, 0, 0.2);
  }
}
</style>