nsgk_mobile/src/views/homestead/index.vue

<template>
  <div class="app-container">
    <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="清除" /> 
    </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"
        :style="{
          opacity: ishcBotton == true ? 1 : 0,
        }"
        @click="selectionPush"
      >
        <div class="icon"></div>
        <div class="text">列表</div>
      </div>
    </div>
    <!--放大缩小-->
    <div class="rightZoom_wrap">
      <div class="amplification" ref="sliderBig"></div>
      <div class="narrow" ref="sliderSmall"></div>
    </div>

    <!--列表拉取详情-->
    <div class="homesteadList_wrap">
      <div class="title_m">
        <div class="more_icon" @click="homesteadListShrink"></div>
        <div class="name">宅基地列表</div>
      </div>
      <div class="main_m" v-if="statusList == 0">
        <!--1-->
        <div
          class="flex_block"
          v-for="(items, index) in hcBottonHouseArr"
          :key="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 }}
            </div>
          </div>
        </div>
      </div>
      <div class="main_m" v-if="statusList == 1">
        <!--1-->
        <div
          class="flex_block"
          v-for="(items, index) in hcBottonLandArr"
          :key="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 }}
            </div>
          </div>
        </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 zhen" @click="townVisbileFun">镇</div>
        <div class="name" @click="townVisbileFun">
          {{ focusTownOptions[0].deptName }}
        </div>

        <div class="address_suspension" v-show="townVisbile == true">
          <div
            class="address_suspension_scroll"
            :style="{ height: towneOptionsHeight + 'px' }"
          >
            <div
              class="items"
              v-for="(item, index) in orderTownOptions"
              :key="index"
              @click="townDropdown(item)"
            >
              {{ item.deptName }}
            </div>
          </div>
        </div>
      </div>
      <div class="address_item">
        <div class="portrait cun" @click="villageVisbileFun">村</div>
        <div class="name" @click="villageVisbileFun">
          {{ focusVillageOptions[0].deptName }}
        </div>

        <div class="address_suspension" v-show="villageVisbile == true">
          <div
            class="address_suspension_scroll"
            :style="{ height: villageOptionsHeight + 'px' }"
          >
            <div
              class="items"
              v-for="(item, index) in orderVillageOptions"
              :key="index"
              @click="villageDropdown(item)"
            >
              {{ item.deptName }}
            </div>
          </div>
        </div>
      </div>
      <div class="address_item more">
        <div class="portrait"></div>
        <div class="name" @click="addressPush"></div>
      </div>
    </div>

    <!--搜索栏目-->
    <div class="searchBar_wrap">
      <div class="actionBar_wrap" v-if="searchBarOperVisbile">
        <div class="m_list">
          <div class="tensile active"><div class="icon"></div></div>
        </div>
        <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="correct"></div>
        </div>
      </div>
      <div class="searchBar_area">
        <div class="bar_icon"></div>
        <div class="bar_ipt">
          <input type="text" placeholder="请输入宗地或权利人信息" />
        </div>
        <div 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" placeholder="请输入宗地或权利人信息" />
        </div>
        <div class="bar_text">搜索</div>
      </div>
      <div class="landHomestead_body">
        <!--1--->
        <div class="body_flex">
          <div class="attribute">
            <div class="names">孙全礼</div>
            <div class="address">南郊村东二街30号南郊村东二街30号</div>
            <div class="nature">性质：农村宅基地</div>
          </div>
          <div class="distance">
            <div class="size">103</div>
            <div class="probably">大约120㎡</div>
          </div>
          <div class="others">
            <div class="information">
              <div class="location"></div>
              <div class="status_text">已盘活</div>
            </div>
            <div class="editor">
              <div class="editor_icon"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--房地全部信息展示-->
    <div class="landHomesteadDetails_wrap">
      <div class="content_mian">
        <!--内容-->
        <div class="serial_flex">
          <div class="number">农房编号<span>31</span></div>
          <div class="localhref"></div>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">房屋所有人名称</span
          ><span class="content">孙全礼</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">村名</span><span class="content">南郊村</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">地址</span
          ><span class="content">东二街30号</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">是否有审批手续</span
          ><span class="content">是</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">房屋所有权证号</span
          ><span class="content">15-76-105</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">建筑面积</span
          ><span class="content">大约80㎡</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">土地证号</span
          ><span class="content">38718490184</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">土地性质</span
          ><span class="content">农村宅基地</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">土地面积</span
          ><span class="content">大约130㎡</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">现状情况</span
          ><span class="content">已盘活</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">是否有流转意向</span
          ><span class="content"></span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">租赁人</span
          ><span class="content">李福任</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">租赁年限</span
          ><span class="content">10年</span>
        </div>
        <!--1-->
        <div class="flex_block">
          <span class="describe">租赁合同截止日期</span
          ><span class="content">2021.7.1-2031.6.30</span>
        </div>
        <!--上传图片-->
        <div class="uploadPictures_block">
          <div class="statusQuo">
            <div class="picture"></div>
            <div class="describe">现<br />状<br />图<br />片</div>
          </div>
          <div class="statusQuo">
            <div class="picture"></div>
            <div class="describe">历<br />史<br />图<br />片</div>
          </div>
        </div>
        <!--编辑-->
        <div class="editor_block">
          <div class="editor_icon"></div>
        </div>
      </div>
    </div>
    <!--房地全部信息编辑-->
    <div class="landHomesteadEdit_wrap">
      <div class="content_mian">
        <div class="info_title">录入宗地信息</div>
        <div class="flex_main">
          <!--1-->
          <div class="flex_block">
            <div class="number_s50 mr50">
              <div class="title_m">农房编号</div>
              <div class="input_m">
                <van-field
                  v-model="message"
                  placeholder="农房编号"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
            <div class="number_s50">
              <div class="title_m">房屋所有人名称</div>
              <div class="input_m">
                <van-field
                  v-model="message"
                  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="message"
                  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="message"
                  readonly
                  clickable
                  name="picker"
                  placeholder="农房权属"
                  class="landHomesteadEdit_input"
                  @click="showPicker = true"
                />
                <van-popup v-model="showPicker" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = 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="message"
                  readonly
                  clickable
                  name="picker"
                  placeholder="审批手续"
                  class="landHomesteadEdit_input"
                  @click="showPicker = true"
                />
                <van-popup v-model="showPicker" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = 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="message"
                  placeholder="建筑面积"
                  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="message"
                  readonly
                  clickable
                  name="picker"
                  placeholder="现状情况"
                  class="landHomesteadEdit_input"
                  @click="showPicker = true"
                />
                <van-popup v-model="showPicker" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = 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="message"
                  placeholder="房屋所有权证号"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
            <div class="number_s50">
              <div class="title_m">土地证号</div>
              <div class="input_m">
                <van-field
                  v-model="message"
                  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">
                <van-field
                  v-model="message"
                  placeholder="土地性质"
                  class="landHomesteadEdit_input"
                />
              </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="message"
                  placeholder="土地面积"
                  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="message"
                  readonly
                  clickable
                  name="picker"
                  placeholder="是否有流转意向"
                  class="landHomesteadEdit_input"
                  @click="showPicker = true"
                />
                <van-popup v-model="showPicker" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = 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="message"
                  placeholder="租赁人"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
            <div class="number_s50">
              <div class="title_m">租赁年限</div>
              <div class="input_m">
                <van-field
                  v-model="message"
                  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="message"
                  placeholder="租赁人"
                  class="landHomesteadEdit_input"
                />
              </div>
            </div>
          </div>
          <!--2-->
          <div class="uploadPicturesFlex_block">
            <div class="title_m">上传图片</div>
            <div class="main_m">
              <van-uploader v-model="fileList" multiple :max-count="2" />
            </div>
          </div>
        </div>
      </div>
      <div class="footer_main">
        <div class="cancel">取消</div>
        <div class="save">保存</div>
      </div>
    </div>
    <!--农地农房选择-->
    <div class="farmlandEditSwitch_wrap">
      <div class="mains">
        <div class="close_btn"></div>
        <div class="farmhouse">
          <div class="icons"></div>
          <p class="names">农房</p>
        </div>
        <div class="farmland">
          <div class="icons"></div>
          <p class="names">农地</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import {
  bigDataHcAreaInfo,
  bigDataHcCountyInfo,
  bigDataHcVillageInfo,
  hcBottomSearch,
} from "@/api/homestead/index";
export default {
  name: "homesteadLogin",
  data() {
    return {
      //当前选择区 0 镇1 村2
      currentSelected: 0,
      //区级list
      hcAreaInfoOption: [],
      //区级id
      hcAreaInfoValue: "",
      //镇级显示隐
      townVisbile: false,
      //镇级List
      townOptions: [],
      //选中的镇级
      focusTownOptions: [{ orgCode: "", deptName: "全部" }],
      //选择的镇级
      orderTownOptions: [],
      //镇选择框高度
      towneOptionsHeight: 0,
      //村级显影
      villageVisbile: false,
      //村级list
      villageOptions: [],
      //选中的村级
      focusVillageOptions: [{ orgCode: "", deptName: "全部" }],
      //选择的村级
      orderVillageOptions: [],
      //村选择框高度
      villageOptionsHeight: 0,
      // 待租列表显示
      ishcBotton: false,
      // 待租列表 类型  0 农房 1 农地
      statusList: 0,
      //待租列表 房
      hcBottonHouseArr: [],
      //待租列表 地
      hcBottonLandArr: [],

      //搜索栏目-操作栏显隐
      searchBarOperVisbile: false,

      //以下删
      message: "",
      showPicker: false,
      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      fileList: [],
    };
  },
  mounted() {
    this.initAxios();
  },
  methods: {
    initAxios() {
      //获取区
      this.mapAreaSelectValue();
    },
    styleSteup() {
      let smallTop = this.$refs.sliderSmall.getBoundingClientRect().top;
      let smallLeft = this.$refs.sliderSmall.getBoundingClientRect().left;
      console.log(smallTop);
      $(".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 orgCode = "";
      if (this.currentSelected == 0) {
        orgCode = this.hcAreaInfoOption[0].orgCode;
      } else if (this.currentSelected == 1) {
        orgCode = this.focusTownOptions[0].orgCode;
      } else {
        orgCode = this.focusVillageOptions[0].orgCode;
      }
      let objData = {
        orgCode: orgCode,
        statusList: "1,2,3,4,5,6,7,8",
      };
      //右侧详情农房农地列表
      if (objData.orgCode.length == 12) {
        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,
              });
            } else {
              landArr.push({
                geo: v.geo,
                mj: v.mj,
                name: v.name,
                type: v.type,
                xh: v.xh,
              });
            }
          });
          this.hcBottonHouseArr = houseArr;
          this.hcBottonLandArr = landArr;
          this.ishcBotton = true;
        });
      } else {
        this.hcBottonHouseArr = [];
        //待租列表 地
        this.hcBottonLandArr = [];
        this.ishcBotton = false;
      }
      // console.log();
    },
    mapAreaSelectValue() {
      bigDataHcAreaInfo().then((res) => {
        if (res.code == 200) {
          let content = res.data;
          this.hcAreaInfoOption = content;
          this.hcAreaInfoValue = content[0].orgCode;
          //获取乡镇
          this.headerSelectValue();
          this.switchLoad();
          //获取地图
          this.mapBackground();
          //设置缩放按钮位置
          this.styleSteup();
        }
      });
    },
    //镇相关
    headerSelectValue() {
      let oData = {
        orgCode: this.hcAreaInfoValue,
      };
      bigDataHcCountyInfo(oData).then((res) => {
        if (res.code == 200) {
          let content = res.data;
          let dateValue = { orgCode: "", deptName: "全部" };
          content.unshift(dateValue);
          this.townOptions = content;

          let oHeight = (content.length - 1) * 16;
          this.towneOptionsHeight = oHeight > 100 ? 100 : oHeight;

          this.townDealWithFun(dateValue);
        }
      });
    },
    townDealWithFun(value) {
      let focusTownOptions = [];
      let orderTownOptions = [];
      this.townOptions.forEach((v, i) => {
        if (value.deptName == v.deptName) {
          focusTownOptions.push({
            orgCode: v.orgCode,
            deptName: v.deptName,
          });
        } else {
          orderTownOptions.push({
            orgCode: v.orgCode,
            deptName: v.deptName,
          });
        }
      });

      this.focusTownOptions = focusTownOptions;
      this.orderTownOptions = orderTownOptions;
    },
    searchBarOperFun(statue) {
      if (statue == "true") {
        this.searchBarOperVisbile = true;
      } else {
        this.searchBarOperVisbile = false;
      }
    },
    townVisbileFun() {
      this.townVisbile = true;
      this.villageVisbile = false;
    },

    /*右侧列表 --展开收缩*/
    selectionPush() {
      if (this.ishcBotton == false) {
        return false;
      }
      $(".homesteadList_wrap").animate(
        {
          right: "0",
        },
        300
      );
    },
    homesteadListShrink() {
      $(".homesteadList_wrap").animate(
        {
          right: "-300px",
        },
        300
      );
    },
    /*点击顶部村庄--伸缩样式*/
    addressPush() {
      let addressWrapBlock = $(".address_wrap .address_item.more .name");
      let lefValue = 0;
      if (addressWrapBlock.hasClass("shrink")) {
        addressWrapBlock.removeClass("shrink");
        lefValue = "-40px";
      } else {
        addressWrapBlock.addClass("shrink");
        lefValue = "8px";
      }

      $(".address_wrap").animate(
        {
          left: lefValue,
        },
        300
      );
    },
    townDropdown(command) {
      this.townDealWithFun(command);
      this.townVisbile = false;
      if (command.deptName == "全部") {
        this.focusVillageOptions = [{ orgCode: "", deptName: "全部" }];
        this.focusVillageOptions = [{ orgCode: "", deptName: "全部" }];
        this.orderVillageOptions = [];
        this.villageOptionsHeight = 0;
        this.currentSelected = 0;
        this.switchLoad();
        return false;
      }
      this.currentSelected = 1;
      this.switchLoad();
      this.bigDataHcVillageFun();
      $("#zhen").trigger("change");
    },
    bigDataHcVillageFun() {
      let oData = {
        orgCode: this.focusTownOptions[0].orgCode,
      };
      bigDataHcVillageInfo(oData).then((res) => {
        let content = res.data;
        let dateValue = { orgCode: "", deptName: "全部" };
        content.unshift(dateValue);
        this.villageOptions = content;
        this.villageDealWithFun(dateValue);
        this.selectChooseOrder = 0;
      });
    },
    villageDealWithFun(value) {
      let focusVillageOptions = [];
      let orderVillageOptions = [];
      this.villageOptions.forEach((v, i) => {
        if (value.deptName == v.deptName) {
          focusVillageOptions.push({
            orgCode: v.orgCode,
            deptName: v.deptName,
          });
        } else {
          orderVillageOptions.push({
            orgCode: v.orgCode,
            deptName: v.deptName,
          });
        }
      });
      this.focusVillageOptions = focusVillageOptions;
      this.orderVillageOptions = orderVillageOptions;
      let oHeight = orderVillageOptions.length * 16;
      this.villageOptionsHeight = oHeight > 100 ? 100 : oHeight;
    },
    villageDropdown(command) {
      this.villageDealWithFun(command);

      this.villageVisbile = false;
      if (command.deptName == "全部") {
        this.currentSelected = 1;
      } else {
        this.currentSelected = 2;
      }
      this.switchLoad();
      $("#cun").trigger("change");
    },
    villageVisbileFun() {
      if (this.orderVillageOptions.length == 0) {
        return false;
      }
      this.townVisbile = false;
      this.villageVisbile = true;
    },

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

    //加载地图
    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 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);
      ///--镇------------------------------------------------------------------------------------------------------------------
      //实例化矢量点要素，通过矢量图层添加到地图容器中
      let townVectorLayer;
      townDiagram();
      function townDiagram() {
        if (_this.townOptions.length == 0) {
          _this.hcAreaInfoOption.forEach((areaVal, areaIndex) => {
            let objData = {
              orgCode: areaVal.orgCode,
            };
            bigDataHcCountyInfo(objData).then((res) => {
              let content = res.data;

              let townMapData = [];
              content.forEach((townval, townIndex) => {
                let obj = {
                  lat: townval.lat,
                  lng: townval.lng,
                  name: townval.deptName,
                  orgCode: townval.orgCode,
                  type: "镇",
                };
                townMapData.push(obj);
              });

              _this.townDataSet = townMapData;

              townDataFun(townMapData);
            });
          });
        } else {
          townDataFun(_this.townOptions);
        }
      }
      //数据处理
      function townDataFun(townMapData) {
        let arrDatas = [];
        for (let i = 0; i < townMapData.length; i++) {
          let varName = "iconFeature" + i;
          window[varName] = new ol.Feature({
            geometry: new ol.geom.Point(
              ol.proj.fromLonLat([townMapData[i].lng, townMapData[i].lat])
            ),
            name:
              townMapData[i].name == undefined
                ? townMapData[i].deptName
                : townMapData[i].name, //名称属性
            orgCode: townMapData[i].orgCode, //人口数（万）
            lat: townMapData[i].lat,
            lng: townMapData[i].lng,
            type: "镇",
          });
          window[varName].setStyle(createLabelStyle(window[varName]));
          arrDatas.push(window[varName]);
        }

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

      //矢量标注样式设置函数，设置image为图标ol.style.Icon
      function createLabelStyle(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,
            // rotation: (Math.PI / 180) * 20,
            //图片路径
            src: require("../../assets/images/homestead/mark.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",
            }),
          }),
        });
      }

      ///-----------乡---------------------------------------------------------------------------------------------------------
      var villageVectorLayer; //村标记
      async function villageDiagram() {
        if (_this.villageOptions.length == 0) {
          //镇
          let townArray = [];
          let villageArray = [];
          function townObjFun() {
            return new Promise(function (resolve, reject) {
              _this.hcAreaInfoOption.forEach((areaVal, areaIndex) => {
                let objData = {
                  orgCode: areaVal.orgCode,
                };

                bigDataHcCountyInfo(objData).then((res) => {
                  let content = res.data;
                  content.forEach((v, i) => {
                    let objDatas = {
                      orgCode: v.orgCode,
                    };
                    townArray.push(objDatas);
                    resolve();
                  });
                });
              });
            });
          }
          function numbersAnd(num) {
            let data = 0;
            for (let i = 0; i < num; i++) {
              data += i;
            }
            return data;
          }

          async function villageObjFun() {
            return new Promise(function (resolve, reject) {
              let allIndex = numbersAnd(townArray.length);
              let curIndex = 0;
              townArray.forEach((villageVal, villageIndex) => {
                var objDataz = {
                  orgCode: villageVal.orgCode,
                };

                bigDataHcVillageInfo(objDataz).then((res) => {
                  curIndex = curIndex + villageIndex;

                  let content = res.data;
                  content.forEach((v, i) => {
                    let obj = {
                      lat: v.lat,
                      lng: v.lng,
                      name: v.deptName,
                      orgCode: v.orgCode,
                      type: "村",
                      zhenOrgCode: villageVal.orgCode,
                    };
                    villageArray.push(obj);
                  });
                  if (curIndex == allIndex) {
                    setTimeout(() => {
                      resolve();
                    }, 400);
                  }
                });
              });
            });
          }
          await townObjFun();
          await villageObjFun();
          let villageMapData = [];
          villageArray.forEach((townval, townIndex) => {
            let obj = {
              lat: townval.lat,
              lng: townval.lng,
              name: townval.name,
              orgCode: townval.orgCode,
              type: "村",
              zhenOrgCode: townval.zhenOrgCode,
            };
            villageMapData.push(obj);
          });

          _this.allVillage = villageMapData;

          villageDataFun(villageMapData);
        } else {
          villageDataFun(_this.allVillage);
        }
      }

      //村数据处理
      function villageDataFun(villageMapData) {
        let arrDatas = [];
        for (let i = 0; i < villageMapData.length; i++) {
          let varName = "iconFeature" + i;
          window[varName] = new ol.Feature({
            geometry: new ol.geom.Point(
              ol.proj.fromLonLat([villageMapData[i].lng, villageMapData[i].lat])
            ),
            name:
              villageMapData[i].name == undefined
                ? villageMapData[i].deptName
                : villageMapData[i].name, //名称属性
            orgCode: villageMapData[i].orgCode, //人口数（万）
            lat: villageMapData[i].lat,
            lng: villageMapData[i].lng,
            type: "村",
            zhenOrgCode: villageMapData[i].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) {
          let featureValue = feature.values_;
          if (featureValue.type == "镇") {
            map.getView().animate({
              // 只设置需要的属性即可
              center: ol.proj.fromLonLat([featureValue.lng, featureValue.lat]), // 中心点
              zoom: 13, // 缩放级别
              rotation: undefined, // 缩放完成view视图旋转弧度
              duration: 1000, // 缩放持续时间，默认不需要设置
            });
            map.removeLayer(villageVectorLayer);
            villageDiagram();
            _this.currentSelected = 1;
            let SelectOrgCode = {
              orgCode: featureValue.orgCode,
              deptName: featureValue.name,
            };
            _this.townDealWithFun(SelectOrgCode);
            _this.switchLoad();
            let obj = {
              orgCode: featureValue.orgCode,
            };
            bigDataHcVillageInfo(obj).then((res) => {
              if (res.code == 200) {
                let content = res.data;
                let dateValue = { orgCode: "", deptName: "全部" };
                content.unshift(dateValue);
                _this.villageOptions = content;
                _this.villageDealWithFun(dateValue);
              }
            });
          } else if (featureValue.type == "村") {
            setTimeout(() => {
              map.removeLayer(shitu);
            }, 1000);
            _this.currentSelected = 2;
            _this.statusList = 0;
            if (_this.focusTownOptions[0].orgCode != featureValue.zhenOrgCode) {
              let zhenOrgCode = featureValue.zhenOrgCode;
              let selectArr = _this.townOptions.filter((v, i) => {
                return v.orgCode == zhenOrgCode;
              });

              _this.townDealWithFun(selectArr[0]);

              let obj = {
                orgCode: featureValue.zhenOrgCode,
              };
              bigDataHcVillageInfo(obj).then((res) => {
                if (res.code == 200) {
                  let content = res.data;
                  let dateValue = { orgCode: "", deptName: "全部" };
                  content.unshift(dateValue);
                  _this.villageOptions = content;
                  let selecVillagetArr = content.filter((v, i) => {
                    return v.orgCode == featureValue.orgCode;
                  });

                  _this.villageDealWithFun(selecVillagetArr[0]);
                  _this.switchLoad();
                  $("#cun").trigger("change");
                }
              });
            } else {
              let SelectOrgCode = {
                orgCode: featureValue.orgCode,
                deptName: featureValue.name,
              };

              _this.villageDealWithFun(SelectOrgCode);
              _this.switchLoad();

              $("#cun").trigger("change");
            }
          }
        }
        // var zb = evt.coordinate;
        // map.getView().animate({
        //   // 只设置需要的属性即可
        //   center: [zb[0], zb[1]], // 中心点
        //   zoom: 15, // 缩放级别
        //   rotation: undefined, // 缩放完成view视图旋转弧度
        //   duration: 1000, // 缩放持续时间，默认不需要设置
        // });
        // document.getElementById("info").innerHTML = "";
        // var viewResolution = map.getView().getResolution(); ///** @type {number} */ (view.getResolution());
        // 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) {
        //       if (html.indexOf("<table") != -1) {
        //         setTimeout(() => {
        //           _this.hasTable = true;
        //           document.getElementById("info").innerHTML = html;
        //           if (html.indexOf("house") != -1) {
        //             _this.hasDateStatus = 1;
        //             let obj = {};
        //             let trs = $("#info .featureInfo").find("tr:eq(1)");
        //             obj.FWSYRMC = ""; //房屋所有人名称
        //             // obj.FWSYRMC = trs.find("td").eq(1).text(); //房屋所有人名称
        //             obj.XH = trs.find("td").eq(16).text(); //农房编号
        //             obj.TDMJ = trs.find("td").eq(10).text(); //土地面积
        //             obj.DZ = trs.find("td").eq(4).text(); //地址
        //             obj.org_code = trs.find("td").eq(20).text(); //农房编号
        //             obj.tel = "";
        //             _this.hasData = obj;
        //             let orgCode = {
        //               orgCode: obj.org_code,
        //             };
        //             hcWebsiteLxr(orgCode).then((res) => {
        //               if (res.code == 200) {
        //                 let content = res.data;
        //                 _this.hasData.FWSYRMC = content.linker;
        //                 _this.hasData.tel = content.telephone;
        //               }
        //             });
        //           } else {
        //             _this.hasDateStatus = 0;
        //             let obj = {};
        //             let trs = $("#info .featureInfo").find("tr:eq(1)");
        //             obj.CBRMC = trs.find("td").eq(3).text(); //承包人名称
        //             obj.CBRMC = "";
        //             obj.XH = trs.find("td").eq(1).text(); //编号
        //             obj.MJ = trs.find("td").eq(6).text(); //面积
        //             obj.CM = trs.find("td").eq(2).text(); //村名
        //             obj.org_code = trs.find("td").eq(15).text(); //行政区化代码
        //             obj.tel = "";
        //             _this.hasData = obj;
        //             let orgCode = {
        //               orgCode: obj.org_code,
        //             };
        //             hcWebsiteLxr(orgCode).then((res) => {
        //               if (res.code == 200) {
        //                 let content = res.data;
        //                 _this.hasData.CBRMC = content.linker;
        //                 _this.hasData.tel = content.telephone;
        //               }
        //             });
        //           }
        //         }, 300);
        //       } else {
        //         _this.hasTable = false;
        //       }
        //     });
        // }
      });

      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

      $("#zhen").on("change", function () {
        /**
         * @api wfs服务空间查询
         * @param {*} wfsurl
         * @param {*} srsName
         * @param {*} typeName
         * @param {*} drawType
         * @param {option 可选} geometryField
         */
        //获取类型  测距
        var zhen = _this.focusTownOptions[0].deptName;

        let currObj = _this.townOptions.filter((v) => {
          return v.deptName == zhen;
        });
        //删除之前图层 --------------------start

        if (currObj.length > 0) {
          let currObjNum = currObj[0];
          map.getView().animate({
            // 只设置需要的属性即可
            center: ol.proj.fromLonLat([currObjNum.lng, currObjNum.lat]), // 中心点
            zoom: 13, // 缩放级别
            rotation: undefined, // 缩放完成view视图旋转弧度
            duration: 1000, // 缩放持续时间，默认不需要设置
          });
        } else {
          map.getView().animate({
            // 只设置需要的属性即可
            center: ol.proj.fromLonLat([122.145662, 37.369575]), // 中心点
            zoom: 11.2, // 缩放级别
            rotation: undefined, // 缩放完成view视图旋转弧度
            duration: 1000, // 缩放持续时间，默认不需要设置
          });
        }
        map.removeLayer(villageVectorLayer);
        villageDiagram();
      });

      //按照分类查询  村定位地图-----------------start
      var nongZt;
      var texiao_layer_fang;
      var texiao_layer_di;
      $("#cun").on("change", function () {
        /**
         * @api wfs服务空间查询
         * @param {*} wfsurl
         * @param {*} srsName
         * @param {*} typeName
         * @param {*} drawType
         * @param {option 可选} geometryField
         */
        var cunmap = _this.focusVillageOptions[0].orgCode;
        var cun;
        let currObj = _this.villageOptions.filter((v) => {
          return v.orgCode == cunmap;
        });
        if (currObj.length == 1) {
          cun = currObj[0].deptName;
        } else {
          cun = "";
        }
        //删除之前加载的图层
        if (cun != "全部") {
          let currObjNum = currObj[0];
          map.getView().animate({
            // 只设置需要的属性即可
            center: ol.proj.fromLonLat([currObjNum.lng, currObjNum.lat]), // 中心点
            zoom: 14.5, // 缩放级别
            rotation: undefined, // 缩放完成view视图旋转弧度
            duration: 1000, // 缩放持续时间，默认不需要设置
          });
        }
        map.removeLayer(nongZt);
        //村的数据判断
        if (cun == "all" || cun == "") {
          //删除之前图层

          //定位个人地图
          map.removeLayer(texiao_layer_fang);
          map.removeLayer(texiao_layer_di);
          //删除之前图层 -------------------end
        } else {
          // map.removeLayer(cunshitu);
          // map.removeLayer(dishitu);
          map.removeLayer(villageVectorLayer);
          villageDiagram();
          setTimeout(() => {
            map.removeLayer(shitu);
          }, 1000);
        }
        //查询条件
        var cql_filter;
        //for(var i=0; i< difang.length; i++){

        //图层加载
        //地的数据判断
        var difang = "nsgk_hc:nsgk_hc_all";
        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 = 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,
                //'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,
            //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) => {
              //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);
        //}
      });
      //村定位查询-------------------------------------end
    },

    /*以下删*/
    onConfirm(time) {
      this.message = time;
      this.showPicker = false;
    },
  },
};
</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: -100px;
    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;

    .title_m {
      color: #333;
      line-height: 36px;
      padding: 20px 40px 32px;
      .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: 0 40px;
      // height: 300px;
      flex: 1;
      .flex_block {
        height: 70px;
        display: flex;
        // justify-content: center; /* 相对父元素水平居中 */
        align-items: center; /*  子元素相对父元素垂直居中 */
        .name_text {
          font-size: 34px;
          flex: 1;
          overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /*超出部分文字以...显示*/
        }
        .square_text {
          font-size: 34px;
          flex: 0.8;
        }
        .operation_mian {
          flex: 0 0 150px;
          .describe {
            font-size: 20px;
            padding: 6px 12px;
            float: right;
            color: #fff;
            &.yph {
              background: #3cbf5b;
              border-radius: 30px;
            }
          }
        }
      }
    }
    .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;
    left: -80px;
    display: flex;
    .address_item {
      display: flex;
      flex-direction: column;
      margin-right: 8px;
      justify-content: center; /* 相对父元素水平居中 */
      align-items: center; /*  子元素相对父元素垂直居中 */
      position: relative;
      .portrait {
        width: 76px;
        height: 76px;
        background: #000;
        border-radius: 50%;
        margin-bottom: 20px;
        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: 14px;
        background: #fff;
        padding: 2px 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 {
    display: none;
    position: fixed;
    bottom: 0;
    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: 40px;
            line-height: 54px;
            color: #333333;
            margin-bottom: 12px;
          }
          .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;
            }
            .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: #000;
              margin-top: 14px;
            }
          }
        }
      }
    }
  }
  .landHomesteadDetails_wrap {
    display: none;
    // display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    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/others_location.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: #000;
          }
          .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%;
        }
      }

      //  <div class="editor_block">
      //   <div class="editor_icon"></div>
      // </div>
    }
  }
  .landHomesteadEdit_wrap {
    display: none;
    // display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    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 {
    display: none;
    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 -240px;
      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;
}
</style>