nsgk_mobile/src/views/sunVillage_info/assetMapOpen.vue

<template>
  <div class="homestead_main">
    <!--<div id="landMapDiv"></div>-->
    <div class="header_main"
         :style="`background-image:url(${require(showBtn?'@/assets/images/sunVillage_info/list_head.png':'@/assets/images/sunVillage_info/list_head_red.png')})`"
    >
      资产地图公开
      <div class="return_btn" @click="onClickLeft"></div>
    </div>
    <div id="mapAll"> </div>
    <div id="info" style="display: none"></div>
    <div class="plotPremises_right" v-if="this.mapHaDataValue">
      <div class="land_information_main">
        <div class="area_information">
          <div class="mian">
            <div class="basic_information" v-if="mapHasDateStatus == 0">
              <div class="basic_block">
                <van-row>
                  <van-col :span="4"><span class="title">资源编码:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.code }}</span></van-col>
                  <van-col :span="4"><span class="title">资源名称:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.name }}</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="4"><span class="title">资源类型:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.resourceType }}</span></van-col>
                  <van-col :span="4"><span class="title">坐落位置:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.location }}</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="4"><span class="title">东至:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.east }}</span></van-col>
                  <van-col :span="4"><span class="title">西至:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.west }}</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="4"><span class="title">南至:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.south }}</span></van-col>
                  <van-col :span="4"><span class="title">北至:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.north }}</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="4"><span class="title">总面积:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.totalArea }}</span></van-col>
                  <van-col :span="4"><span class="title">资产状态:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.status }}</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="4"><span class="title">使用情况:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.useType }}</span></van-col>
                  <van-col :span="4"><span class="title">备注:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.remark }}</span></van-col>
                </van-row>

                <van-row>
                  <van-col :span="24"><span class="title">附件图片:</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="24" style="height: 120px;overflow-y: auto;">
                    <div class="fileList">
                      <template v-for="(item,index) in mapHasData.fileList">
                        <a :href="item.url" v-if="item.url.indexOf('xlsx') > -1 || item.url.indexOf('xls') > -1">
                          <img src="../../assets/images/homestead/icon_excel.jpg" alt="" style="width:100px;height: 100px;">
                        </a>
                        <a :href="item.url" v-else-if="item.url.indexOf('docx') > -1 || item.url.indexOf('dox') > -1">
                          <img src="../../assets/images/homestead/icon_word.jpg" alt=""  style="width:100px;height: 100px;">
                        </a>
                        <img v-else :src="item.url" alt="" @click="openImage(item.url)"  style="width:100px;height: 100px;">
                      </template>
                      <van-empty v-if="mapHasData.fileList.length<1" description="暂无附件"></van-empty>
                    </div>
                  </van-col>
                </van-row>
                <div class="gl_main">
                  <template v-if="!contractionVisible">
                    <div class="headers">
                      <div class="flex3">合同编码</div>
                      <div class="flex3">合同名称</div>
                      <div class="flex3">发包对象</div>
                      <div class="flex3">承包款(元)</div>
                      <div class="flex3">状态</div>

                    </div>
                    <div class="desc_main">
                      <ul class="analysisTable_list">
                        <!--1-->
                        <li v-for="item in contractionList" class="flex_item" @click="viewContractionInfo(item)">
                          <div class="flex3" @click="lookName(item.code)">{{item.code}}</div>
                          <div class="flex3" @click="lookName(item.name)">{{item.name}}</div>
                          <div class="flex3">{{item.secondParty}}</div>
                          <div class="flex3">{{item.totalAmount}}</div>
                          <div class="flex3">{{item.contractionStatus}}</div>
                        </li>
                      </ul>
                    </div>
                  </template>
                  <template v-else>
                    <div class="headers">
                      <div>关联合同</div>
                      <div class="back" @click="hideContractionInfo">&lt; 返回</div>
                    </div>
                    <van-row>
                      <van-col :span="4"><span class="title">合同编码:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.code }}</span></van-col>
                      <van-col :span="4"><span class="title">合同名称:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.name }}</span></van-col>
                    </van-row>
                    <van-row>
                      <van-col :span="4"><span class="title">签订日期:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.buildingTime }}</span></van-col>
                      <van-col :span="4"><span class="title">合同类型:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.assetType }}</span></van-col>
                    </van-row>
                    <van-row>
                      <van-col :span="4"><span class="title">开始时间:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.startTime }}</span></van-col>
                      <van-col :span="4"><span class="title">结束时间:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.endTime }}</span></van-col>
                    </van-row>
                    <van-row>
                      <van-col :span="4"><span class="title">承包价款:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.totalAmount }}</span></van-col>
                      <van-col :span="4"><span class="title">承包年限:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.contractYears }}</span></van-col>
                    </van-row>

                    <van-row>
                      <van-col :span="24"><span class="title">附件图片:</span></van-col>
                    </van-row>
                    <van-row>
                      <van-col :span="24" style="height: 120px;overflow-y: auto;">
                        <div class="fileList">
                          <template v-for="(item,index) in contractionAttachmentList">
                            <a :href="item.url" v-if="item.url.indexOf('xlsx') > -1 || item.url.indexOf('xls') > -1">
                              <img src="../../assets/images/homestead/icon_excel.jpg" alt="" style="width:100px;height: 100px;">
                            </a>
                            <a :href="item.url" v-else-if="item.url.indexOf('docx') > -1 || item.url.indexOf('dox') > -1">
                              <img src="../../assets/images/homestead/icon_word.jpg" alt=""  style="width:100px;height: 100px;">
                            </a>
                            <img v-else :src="item.url" alt="" @click="openImage(item.url)"  style="width:100px;height: 100px;">
                          </template>
                          <van-empty v-if="contractionAttachmentList.length<1" description="暂无附件"></van-empty>
                        </div>
                      </van-col>
                    </van-row>
                  </template>
                </div>
                <!--                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>-->
              </div>
            </div>

            <div class="basic_information" v-if="mapHasDateStatus == 1">
              <div class="basic_block">
                <van-row>
                  <van-col :span="4"><span class="title">资产编码:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.code }}</span></van-col>
                  <van-col :span="4"><span class="title">资产名称:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.name }}</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="4"><span class="title">资产类别:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.assetType }}</span></van-col>
                  <van-col :span="4"><span class="title">经营属性:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.operationType }}</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="4"><span class="title">增加方式:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.addType }}</span></van-col>
                  <van-col :span="4"><span class="title">构建时间:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.buildTime }}</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="4"><span class="title">坐落位置:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.location }}</span></van-col>
                  <van-col :span="4"><span class="title">规格型号:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.specification }}</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="4"><span class="title">供应商:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.supplier }}</span></van-col>
                  <van-col :span="4"><span class="title">使用情况:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.useType }}</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="4"><span class="title">数量/面积:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.quantity }}</span></van-col>
                  <van-col :span="4"><span class="title">计量单位:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.unit }}</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="4"><span class="title">原值:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.originalValue }}</span></van-col>
                  <van-col :span="4"><span class="title">资产状态:</span></van-col>
                  <van-col :span="8"><span class="desc">{{ mapHasData.assetStatus }}</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="24"><span class="title">附件图片:</span></van-col>
                </van-row>
                <van-row>
                  <van-col :span="24"  style="height: 120px;overflow-y: auto;">
                    <div class="fileList">
                      <template v-for="(item,index) in mapHasData.fileList">
                        <a :href="item.url" v-if="item.url.indexOf('xlsx') > -1 || item.url.indexOf('xls') > -1">
                          <img src="../../assets/images/homestead/icon_excel.jpg" alt="" style="width:100px;height: 100px;">
                        </a>
                        <a :href="item.url" v-else-if="item.url.indexOf('docx') > -1 || item.url.indexOf('dox') > -1">
                          <img src="../../assets/images/homestead/icon_word.jpg" alt="" style="width:100px;height: 100px;">
                        </a>
                        <img v-else :src="item.url" alt="" @click="openImage(item.url)" style="width:100px;height: 100px;">
                      </template>
                      <van-empty v-if="mapHasData.fileList.length<1" description="暂无附件"></van-empty>
                    </div>
                  </van-col>
                </van-row>
                <div class="gl_main">
                  <template v-if="!contractionVisible">
                    <div class="headers">
                      <div class="flex3">合同编码</div>
                      <div class="flex3">合同名称</div>
                      <div class="flex3">发包对象</div>
                      <div class="flex3">承包款(元)</div>
                      <div class="flex3">状态</div>

                    </div>
                    <div class="desc_main">
                      <ul class="analysisTable_list">
                        <!--1-->
                        <li v-for="item in contractionList" class="flex_item" @click="viewContractionInfo(item)">
                          <div class="flex3" @click="lookName(item.code)">{{item.code}}</div>
                          <div class="flex3" @click="lookName(item.name)">{{item.name}}</div>
                          <div class="flex3">{{item.secondParty}}</div>
                          <div class="flex3" >{{item.totalAmount}}</div>
                          <div class="flex3">{{item.contractionStatus}}</div>
                        </li>
                      </ul>
                    </div>
                  </template>
                  <template v-else>
                    <div class="headers">
                      <div>关联合同</div>
                      <div class="back" @click="hideContractionInfo">&lt; 返回</div>
                    </div>
                    <van-row>
                      <van-col :span="4"><span class="title">合同编码:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.code }}</span></van-col>
                      <van-col :span="4"><span class="title">合同名称:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.name }}</span></van-col>
                    </van-row>
                    <van-row>
                      <van-col :span="4"><span class="title">签订日期:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.buildingTime }}</span></van-col>
                      <van-col :span="4"><span class="title">合同类型:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.assetType }}</span></van-col>
                    </van-row>
                    <van-row>
                      <van-col :span="4"><span class="title">开始时间:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.startTime }}</span></van-col>
                      <van-col :span="4"><span class="title">结束时间:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.endTime }}</span></van-col>
                    </van-row>
                    <van-row>
                      <van-col :span="4"><span class="title">承包价款:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.totalAmount }}</span></van-col>
                      <van-col :span="4"><span class="title">承包年限:</span></van-col>
                      <van-col :span="8"><span class="desc">{{ contractionData.contractYears }}</span></van-col>
                    </van-row>

                    <van-row>
                      <van-col :span="24"><span class="title">附件图片:</span></van-col>
                    </van-row>
                    <van-row>
                      <van-col :span="24" style="height: 120px;overflow-y: auto;">
                        <div class="fileList">
                          <template v-for="(item,index) in contractionAttachmentList">
                            <a :href="item.url" v-if="item.url.indexOf('xlsx') > -1 || item.url.indexOf('xls') > -1">
                              <img src="../../assets/images/homestead/icon_excel.jpg" alt="" style="width:100px;height: 100px;">
                            </a>
                            <a :href="item.url" v-else-if="item.url.indexOf('docx') > -1 || item.url.indexOf('dox') > -1">
                              <img src="../../assets/images/homestead/icon_word.jpg" alt=""  style="width:100px;height: 100px;">
                            </a>
                            <img v-else :src="item.url" alt="" @click="openImage(item.url)"  style="width:100px;height: 100px;">
                          </template>
                          <van-empty v-if="contractionAttachmentList.length<1" description="暂无附件"></van-empty>
                        </div>
                      </van-col>
                    </van-row>
                  </template>
                </div>
              </div>
              <!--<div class="basic_block">
                <span class="title">折旧科目:</span>
                <span class="desc">{{ mapHasData.depreciationSubject }}</span>
              </div>
              <div class="basic_block">
                <span class="title">折旧费用科目:</span>
                <span class="desc">{{ mapHasData.depreciationFeeSubject }}</span>
              </div>
              <div class="basic_block">
                <span class="title">资产清理科目:</span>
                <span class="desc">{{ mapHasData.fixedSubject }}</span>
              </div>
              <div class="basic_block">
                <span class="title">资产清理额:</span>
                <span class="desc">{{ mapHasData.fixedValue }}</span>
              </div>
              <div class="basic_block">
                <span class="title">购置凭证ID:</span>
                <span class="desc">{{ mapHasData.voucherId }}</span>
              </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-dialog v-model="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </van-dialog>

  </div>
</template>

<style scoped lang="scss">
  .homestead_main {
    height: 100vh;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    flex-direction: column;
    position: relative;
  }
  #mapAll {
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
  }
  .header_main{
    height: 116px;
    background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 36px;
    line-height: 116px;
    text-align: center;
    color: #fff;
    position: fixed;
    z-index: 9999;
  .return_btn{
    width: 24px;
    height: 43.2px;
    background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
    background-size: 20px 36px;
    position: absolute;
    left: 38px;
    top: 36px;
  }
  .add_btn{
    width: 56.4px;
    height: 40.8px;
    background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
    background-size: 47px 34px;
    position: absolute;
    right: 38px;
    top: 36px;
  }
  }
  .fileList{
  img{
    width: 8vw;
    height: 8vw;
    margin-right: 20px;
  }
  }
  .flex3 {
    flex: 0.5;
    overflow: hidden; /*超出部分隐藏*/
    white-space: nowrap; /*不换行*/
    text-overflow: ellipsis; /*超出部分文字以...显示*/
  }
  .plotPremises_right {
    width: 94%;
    position: fixed;
    z-index: 1001;
    top: 54%;
    transform: translateY(-50%);
    right: 3%;
    display: flex;
  // display: none;
    min-width: 300px;
    /*height: calc(100% - 104px);*/
    flex-direction: column;
  .topTrimLine {
    width: 100%;
    height: 8px;
    background: url("../../assets/images/homestead/header_border.png")
    no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -4px;
    left: 0;
  }
  .land_information_main {
    flex: 1;
  // align-items: center;
  .area_information {
  // margin-bottom: 3%;
    position: relative;
  .mian {
    background: rgba(25, 29, 24, 0.7);
    /*background: rgba(255, 255, 255, 0.7);*/
  // background: url("../../assets/images/dataScreen/plotPremises/left_top_img.png")
  // no-repeat;
  // background-size: 100% 100%;
    padding: 3%;
    flex: 1;
    display: flex;
    flex-direction: column;
  .area_title {
    margin: 0;
    font-size: 22px;
    color: #38da94;
  }
  .basic_information {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
  .basic_block {
    font-size: 15px;
    color: #47c68f;
    flex: 1;
  .van-row{
    display:flex;
    flex-wrap: wrap;
  .van-col{
    padding: 1% 0 1% 2%;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
  &:last-child{
     border-right: 1px solid #fff;
   }
  }
  &:last-child{
  .van-col{
  &:last-child{
     border-bottom: 1px solid #fff;
   }
  }
  }

  }
  .title {
    color: #fff;
    padding-right: 8px;
  }
  }
  .patternmaking {
    position: absolute;
    right: 2%;
    bottom: 16%;
  .img_block {
    margin-top: 8px;
  &:first-child {
     margin-top: 0;
   }
  }
  p {
    margin: 0;
    font-size: 0;
  img {
    width: 78px;
    height: 60px;
  }
  }
  }
  .gl_main{
    margin-top: .8vh;
    height: 38.15vh;
    padding:0.92vh 0 0 0;
  .headers {
    height: 3.24vh;
    font-size: 1.48vh;
    color: #0befca;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(11,239,202,.3);
    padding-right: 0.53vw;
    margin-bottom: 1vh;
    position: relative;
  .flex_left{
    text-align: left;
    padding-left: 0.83vw;
  }
    .back {
      cursor: pointer;
      position: absolute;
      left: 0.83vw;
    }
  }
  .desc_main{
    height: 21.5vh;
    overflow-y: scroll;
    padding-right: 0.3vw;
    box-sizing:border-box;
  .analysisTable_list {
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  .flex_left{
    text-align: left;
    padding-left: 0.83vw;
    box-sizing:border-box;
  }
  .flex_item {
    height: 2.77vh;
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    font-size: 1.29vh;
    position: relative;
    cursor: pointer;
  // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  // &:hover {
      //     background: rgba(8, 85, 255, 0.6);
      // }
  &:nth-child(2n){
     background: rgba(53, 125, 250, 0.1);
   }
  }
  }
  }

  }
  }
  .area_data {
    padding: 4% 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid #62655d;
  .details_block {
    width: 33.33%;
  &.line {
     margin-bottom: 2%;
   }
  p {
    margin: 0;
  }
  .m_title {
    color: #bbb;
    font-size: 12px;
    padding-bottom: 5px;
  }
  .m_desc {
    color: #fff;
    font-size: 14px;
  }
  }
  }
  .farmhouse_table {
    padding: 4% 0 2%;
  }
  }
  }
  }
  }

</style>

<script>

  import {
    getPermanentList,
    getResourceList,
    assetPropertyDetail,
    assetResourceDetail,
    openAttachmentList as attachmentList
  } from "@/api/sunVillage_info/fixedAssets";
  import {getQueryLand} from "@/api/sunVillage_info/homestead/application";
  import { getConfigKey } from "@/api/system/config";
  export default {
    components: {
      getPermanentList,
      getResourceList,
      getQueryLand
    },
    data() {
      return {
        situationW: 70,
        //地图判断
        openMap: false,
        showBtn: false,
        mapTheGeomId: null,
        mapTheGeomResourceId: null,
        drawInsert:null,
        mapHasData:{},
        contractionList:[],
        //合同状态字典
        contractionStatuOptions:[],
        mapHaDataValue:false,
        mapHasDateStatus: 0, //0资源资产  1固定资产
        dialogVisible:false,
        dialogImageUrl:'',
        mapGeoServerUrl: "",            // geoserver地址
        villageBorderLayerName: "",     // 乡镇边界图层名称
        contractionData: {},
        contractionAttachmentList: [],
        contractionVisible:false,
      };
    },
    created() {
      // 获取geoserver的地址
      this.getGeoServerUrl();
      // 获取村边界的图层名称
      this.getVillageBorderLayerName();
    },
    mounted() {
      let mapTheGeomAll =this.$cookies.get("bookId");
      mapTheGeomAll = 166;
      console.info(mapTheGeomAll);
      getPermanentList(mapTheGeomAll).then((response) => {
        if (response.code == 200) {
          this.mapTheGeomId = response.data;
        }
      });
      getResourceList(mapTheGeomAll).then((response) => {
        if (response.code == 200) {
          this.mapTheGeomResourceId = response.data;
          setTimeout(() => {
            this.GetMapsInit();
          }, 500);
        }
      });
    },
    methods: {
      // 获取geoserver的地址
      getGeoServerUrl() {
        getConfigKey("system.geoServer.url").then(response => {
          this.mapGeoServerUrl = response.msg;
        });
      },
      // 获取村边界的图层名称
      getVillageBorderLayerName() {
        getConfigKey("geoserver.layer.villageBorder").then(response => {
          this.villageBorderLayerName = response.msg;
        });
      },
      openImage(url){
        this.dialogImageUrl = url;
        this.dialogVisible = true;
      },
      lookName(val){
        this.$toast(val);
      },
      //地图加载 -----start
      GetMapsInit() {
        this.getDicts("contraction_status").then((response) => {
          this.contractionStatuOptions = response.data;
        });
        //加载地图编辑
        var that = this;
        var map;
        //矢量标注样式设置函数，设置image为图标ol.style.Icon
        function createLabelStyle() {
          return new ol.style.Style({
            image: new ol.style.Icon({
              //设置图标偏移
              anchor: [0.5, 1],
              //标注样式的起点位置
              anchorOrigin: "top-right",
              //X方向单位：分数
              anchorXUnits: "fraction",
              //Y方向单位：像素
              anchorYUnits: "pixels",
              //偏移起点位置的方向
              offsetOrigin: "top-right",
              //透明度
              opacity: 0.9,
              //图片路径
              src: require("../../assets/images/homestead/mark.png"),
            }),
            text: new ol.style.Text({
              textAlign: "center", //位置
              textBaseline: "middle", //基准线
              font: "normal 12px 微软雅黑", //文字样式
              //text: "标注点", //文本内容
              fill: new ol.style.Fill({
                //文本填充样式（即文字颜色)
                color: "#ff0000",
              }),
            }),
            zIndex: 9999,
          });
        }
        // document.getElementById("mapAll").innerHTML = '';
        var hc_land;
        var vector_drawing;
        var projection = new ol.proj.Projection({
          //地图投影类型
          code: "EPSG:3857",
          units: "degrees",
          //extent:extent
        });

        var aerial = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
              "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
              "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
          }),
          isGroup: true,
          name: "卫星影像图",
        });

        var yingxzi = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
          }),
          isGroup: true,
          name: "天地图文字标注--卫星影像图",
        });
        //加载地图
        map = new ol.Map({
          controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
          layers: [aerial, yingxzi],
          projection: projection,
          target: "mapAll",
          view: new ol.View({
            //center: ol.proj.fromLonLat([115.452752, 31.789033]),
            zoom: 15,
            minZoom: 0, //地图缩小限制
            maxZoom: 18.3, //地图放大限制
          }),
        });

        // 添加村边界
        let mapBorder = new ol.layer.Image({
          source: new ol.source.ImageWMS({
            url: this.mapGeoServerUrl + '/wms',
            params: {
              LAYERS: this.villageBorderLayerName,
              cql_filter: "dept_id = '" + this.$cookies.get("deptId") + "'",
              SRID: 3857,
            },
          }),
          name: 'villageBorderLayer'
        });
        map.addLayer(mapBorder);

        //判断当前账套是否有数据
        var mapTalkAbout = true;
        //图层查询资源性资产定位开始 ---------start
        if(this.mapTheGeomResourceId.length >0) {
          for (var i = 0; this.mapTheGeomResourceId.length > i; i++) {
            if (this.mapTheGeomResourceId[i] !=null && this.mapTheGeomResourceId[i].theGeom != null && this.mapTheGeomResourceId[i].theGeom != "") {
              mapTalkAbout =false;
              hc_land = new ol.layer.Vector({
                title: "add Layer",
                source: new ol.source.Vector({
                  projection: projection,
                  features: new ol.format.GeoJSON().readFeatures("{\n" +
                    "    \"type\": \"Feature\",\n" +
                    "    \"geometry\":" + this.mapTheGeomResourceId[i].theGeom + ",    \"properties\":" + JSON.stringify(this.mapTheGeomResourceId[i]) + "}"),
                }),
                style: new ol.style.Style({
                  fill: new ol.style.Fill({
                    //矢量图层填充颜色，以及透明度
                    color: "rgba(204, 255, 204,0.3)",
                  }),
                  stroke: new ol.style.Stroke({
                    //边界样式
                    color: "#47c68f",
                    width: 3,
                  }),
                }),
              });
              map.addLayer(hc_land);
              var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
              var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
              var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
              var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
              //定位查询位置
              var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
              map.getView().animate({
                // 只设置需要的属性即可
                center: center, // 中心点
                zoom: 15.8, // 缩放级别
                rotation: undefined, // 缩放完成view视图旋转弧度
                duration: 1000, // 缩放持续时间，默认不需要设置
              });
            }
          }
        }
        //图层查询资源性资产定位开始 ---------end
        //图层查询固定资产定位开始 ---------start
        if(this.mapTheGeomId.length >0) {
          for (var i = 0; this.mapTheGeomId.length > i; i++) {
            if (this.mapTheGeomId[i] != null && this.mapTheGeomId[i].theGeom != null && this.mapTheGeomId[i].theGeom != "") {
              mapTalkAbout =false;
              var theGeomMap = this.mapTheGeomId[i].theGeom.replace("Point", "MultiPolygon");
              var pointLeft = theGeomMap.replace("[", "[[[[");
              var pointRight = pointLeft.replace("]", "]]]]");
              hc_land = new ol.layer.Vector({
                title: "add Layer",
                source: new ol.source.Vector({
                  projection: projection,
                  features: new ol.format.GeoJSON().readFeatures("{\n" +
                    "    \"type\": \"Feature\",\n" +
                    "    \"geometry\":" + pointRight +",    \"properties\":" + JSON.stringify(this.mapTheGeomId[i]) + "}"),
                }),
                style: new ol.style.Style({
                  fill: new ol.style.Fill({
                    //矢量图层填充颜色，以及透明度
                    color: "rgba(204, 255, 204,0.3)",
                  }),
                  stroke: new ol.style.Stroke({
                    //边界样式
                    color: "#47c68f",
                    width: 3,
                  }),
                }),
              });
              map.addLayer(hc_land);
              var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
              var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
              var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
              var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
              //定位查询位置
              var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
              var newcenterFeature = new ol.Feature({
                geometry: new ol.geom.Point(center), //几何信息
                name: "标注点",
                properties: hc_land.values_.source.featuresRtree_.rbush_.data.children
              });
              var sourceMapLook = new ol.source.Vector({wrapX: false});
              vector_drawing = new ol.layer.Vector({
                source: sourceMapLook,
              });
              map.addLayer(vector_drawing);
              newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
              sourceMapLook.addFeature(newcenterFeature);
              map.getView().animate({
                // 只设置需要的属性即可
                center: center, // 中心点
                zoom: 15.8, // 缩放级别
                rotation: undefined, // 缩放完成view视图旋转弧度
                duration: 1000, // 缩放持续时间，默认不需要设置
              });
            }
          }
        }
        //图层查询固定资产定位结束 ---------end
        //点击查询详细信息
        map.on("singleclick", function (evt) {
          let feature = map.forEachFeatureAtPixel(
            evt.pixel,
            (feature) => feature
          );

          if(feature) {

            var ifConsole = feature.values_.name;

            if (ifConsole !="标注点") {
              let obj = {};
              assetResourceDetail(feature.values_.id, {translate_dict: 1, getAttachments: true,}).then((resp) => {
                that.contractionList = resp.data.params.contractionAssetList || [];
                that.$set(obj, 'fileList', resp.data.params.attachments.map(rr=>{
                  return {
                    url:'/api'+rr.fileUrl
                  };
                }));
                that.contractionData = {};
                that.contractionAttachmentList = [];
                that.contractionVisible = false;
                that.mapHaDataValue = true;
              });
              that.mapHasDateStatus = 0;
              obj.code = feature.values_.code;//资源编码
              obj.name = feature.values_.name;//资源名称
              obj.totalArea = feature.values_.totalArea; //总面积
              obj.location = feature.values_.location; //坐落位置
              obj.east = feature.values_.east; //东至
              obj.west = feature.values_.west; //西至
              obj.south = feature.values_.south; //南至
              obj.north = feature.values_.north; //北至
              obj.sumArea = feature.values_.sumArea; //未利用地=集体经营+出租经营+其他经营
              obj.groupArea = feature.values_.groupArea; //面积-集体经营
              obj.groupValue = feature.values_.groupValue; //年收益-集体经营
              obj.rentArea = feature.values_.rentArea; //面积-出租经营（合同写入的）
              obj.rentValue = feature.values_.rentValue; //年租金-出租经营（合同写入的）
              obj.rentLessee = feature.values_.rentLessee; //承租人-出租经营（合同写入的）
              obj.rentStartTime = feature.values_.rentStartTime; //开始时间-出租经营（合同写入的）
              obj.rentEndTime = feature.values_.rentEndTime; //到期时间-出租经营（合同写入的）
              obj.otherArea = feature.values_.otherArea; //面积-其他经营
              obj.otherValue = feature.values_.otherValue; //年收益-其他经营
              obj.farmerArea = feature.values_.farmerArea; //已承包到户总面积
              obj.circulationArea = feature.values_.circulationArea; //面积-流转入集体统一经营
              obj.circulationValue = feature.values_.circulationValue; //年收益-流转入集体统一经营
              obj.investmentArea = feature.values_.investmentArea; //面积-对外投资
              obj.investmentValue = feature.values_.investmentValue; //年收益-对外投资
              obj.investmentLessee = feature.values_.investmentLessee; //投资对象-对外投资
              obj.investmentStartTime = feature.values_.investmentStartTime; //开始时间-对外投资
              obj.investmentEndTime = feature.values_.investmentEndTime; //到期时间-对外投资
              obj.resourceType = feature.values_.resourceType; //资产类型
              obj.status = feature.values_.status; //资产状态
              obj.useType = feature.values_.useType; //使用情况
              obj.remark = feature.values_.remark; //备注
              //资源资产字典项
              that.getDicts("resource_type").then(response => {
                var resourceTypeOptions = response.data;
                if(obj.resourceType !=null && obj.resourceType !="") {
                  for (var i = 0; resourceTypeOptions.length > i; i++) {
                    if (obj.resourceType == resourceTypeOptions[i].dictValue) {
                      obj.resourceType = resourceTypeOptions[i].dictLabel;
                      break;
                    }
                  }
                }
              });
              //使用情况字典项
              that.getDicts("use_type").then(response => {
                var useTypeOptions = response.data;
                if(obj.useType !=null && obj.useType !="") {
                  for (var i = 0; useTypeOptions.length > i; i++) {
                    if (obj.useType == useTypeOptions[i].dictValue) {
                      obj.useType = useTypeOptions[i].dictLabel;
                      break;
                    }
                  }
                }
              });
              //资产状态字典项
              that.getDicts("sys_normal_disable").then(response => {
                var statusOptions = response.data;
                if(obj.status !=null && obj.status !="") {
                  for (var i = 0; statusOptions.length > i; i++) {
                    if (obj.status == statusOptions[i].dictValue) {
                      obj.status = statusOptions[i].dictLabel;
                      break;
                    }
                  }
                }
              });

              console.log(obj)
              that.mapHasData = obj;
            } else {
              let obj = {};
              assetPropertyDetail(feature.values_.properties[0].value.values_.id, {translate_dict: 1, getAttachments: true,}).then((resp) => {
                that.contractionList = resp.data.params.contractionAssetList || [];
                that.$set(obj, 'fileList', resp.data.params.attachments.map(rr=>{
                  return {
                    url:'/api'+rr.fileUrl
                  };
                }));
                that.contractionData = {};
                that.contractionAttachmentList = [];
                that.contractionVisible = false;
                that.mapHaDataValue = true;
              });
              that.mapHasDateStatus = 1;
              obj.code = feature.values_.properties[0].value.values_.code;//资源编码
              obj.name = feature.values_.properties[0].value.values_.name;//资源名称
              obj.buildTime = feature.values_.properties[0].value.values_.buildTime; //构建时间
              obj.location = feature.values_.properties[0].value.values_.location; //坐落位置
              obj.specification = feature.values_.properties[0].value.values_.specification; //规格型号
              obj.supplier = feature.values_.properties[0].value.values_.supplier; //供应商
              obj.quantity = feature.values_.properties[0].value.values_.quantity; //数量/建筑面积
              //obj.unit = feature.values_.properties[0].value.values_.unit; //计量单位
              obj.originalValue = feature.values_.properties[0].value.values_.originalValue; //原值
              obj.netValue = feature.values_.properties[0].value.values_.netValue; //净值（原值-累计折旧）
              obj.residualsRate = feature.values_.properties[0].value.values_.residualsRate; //残值率 N%
              obj.netSalvage = feature.values_.properties[0].value.values_.netSalvage; //净残值（原值*残值率）
              obj.expectedYears = feature.values_.properties[0].value.values_.expectedYears; //预计使用年数
              obj.perYearDepreciationValue = feature.values_.perYearDepreciationValue; //每年折旧额:（原值-净残值）/ 预计使用年数
              obj.depreciationYears = feature.values_.properties[0].value.values_.depreciationYears; //已折旧年数
              obj.depreciationValue = feature.values_.properties[0].value.values_.depreciationValue; //累计折旧（已提折旧）：每年折旧额*已折旧年数
              obj.depreciationSubject = feature.values_.properties[0].value.values_.depreciationSubject; //折旧科目（152：累计折旧）
              obj.depreciationFeeSubject = feature.values_.properties[0].value.values_.depreciationFeeSubject; //折旧费用科目（541005：管理费用-折旧及修理费）
              obj.fixedSubject = feature.values_.properties[0].value.values_.fixedSubject; //资产清理科目（153：固定资产清理）
              obj.fixedValue = feature.values_.properties[0].value.values_.fixedValue; //资产清理额
              obj.voucherId = feature.values_.properties[0].value.values_.voucherId; //购置凭证ID
              obj.assetType = feature.values_.properties[0].value.values_.assetType; //资产类别
              obj.operationType = feature.values_.properties[0].value.values_.operationType; //经营属性
              obj.addType = feature.values_.properties[0].value.values_.addType; //增加方式
              obj.useType = feature.values_.properties[0].value.values_.useType; //使用情况
              obj.depreciationType = feature.values_.properties[0].value.values_.depreciationType; //折旧方式
              obj.assetStatus = feature.values_.properties[0].value.values_.assetStatus; //资产状态
              obj.unit = feature.values_.properties[0].value.values_.unit; //计量单位

              //固定资产字典项
              that.getDicts("asset_type").then((response) => {
                var assetTypeOptions = response.data;
                if(obj.assetType !=null && obj.assetType !=""){
                  for(var i=0;assetTypeOptions.length >i; i++){
                    if(obj.assetType == assetTypeOptions[i].dictValue) {
                      obj.assetType = assetTypeOptions[i].dictLabel;
                      break;
                    }
                  }
                }
              });
              that.getDicts("operation_type").then((response) => {
                var operationTypeOptions = response.data;
                if(obj.operationType !=null && obj.operationType !="") {
                  for (var i = 0; operationTypeOptions.length > i; i++) {
                    if (obj.operationType == operationTypeOptions[i].dictValue) {
                      obj.operationType = operationTypeOptions[i].dictLabel;
                      break;
                    }
                  }
                }
              });
              that.getDicts("add_type").then((response) => {
                var addTypeOptions = response.data;
                if(obj.addType !=null && obj.addType !="") {
                  for (var i = 0; addTypeOptions.length > i; i++) {
                    if (obj.addType == addTypeOptions[i].dictValue) {
                      obj.addType = addTypeOptions[i].dictLabel;
                      break;
                    }
                  }
                }
              });
              that.getDicts("use_type").then((response) => {
                var useTypeOptions = response.data;
                if(obj.useType !=null && obj.useType !="") {
                  for (var i = 0; useTypeOptions.length > i; i++) {
                    if (obj.useType == useTypeOptions[i].dictValue) {
                      obj.useType = useTypeOptions[i].dictLabel;
                      break;
                    }
                  }
                }
              });
              that.getDicts("depreciation_type").then((response) => {
                var depreciationTypeOptions = response.data;
                if(obj.depreciationType !=null && obj.depreciationType !="") {
                  for (var i = 0; depreciationTypeOptions.length > i; i++) {
                    if (obj.depreciationType == depreciationTypeOptions[i].dictValue) {
                      obj.depreciationType = depreciationTypeOptions[i].dictLabel;
                      break;
                    }
                  }
                }
              });
              that.getDicts("asset_status").then((response) => {
                var assetStatusOptions = response.data;
                if(obj.assetStatus !=null && obj.assetStatus !="") {
                  for (var i = 0; assetStatusOptions.length > i; i++) {
                    if (obj.assetStatus == assetStatusOptions[i].dictValue) {
                      obj.assetStatus = assetStatusOptions[i].dictLabel;
                      break;
                    }
                  }
                }
              });
              that.getDicts("fixed_assets_unit").then((response) => {
                var unitOptions = response.data;
                if(obj.unit !=null && obj.unit !="") {
                  for (var i = 0; unitOptions.length > i; i++) {
                    if (obj.unit == unitOptions[i].dictValue) {
                      obj.unit = unitOptions[i].dictLabel;
                      break;
                    }
                  }
                }
              });
              that.mapHasData = obj;
            }
          }else {
            that.contractionVisible = false;
            that.mapHaDataValue = false;
          }
        });
        //当前账套没有任何空间数据
        if(mapTalkAbout){
          let deptName =this.$cookies.get("deptId");
          getQueryLand(deptName).then((response) => {
            if (response.code == 200) {
              let InsertCode = response.data;
              if (InsertCode != null) {
                var lat = InsertCode.lat;
                var lng = InsertCode.lng;
                var center;
                if(lat !=null && lng !=null && lat !="" && lng !=""){
                  center = [lng,lat];
                }else {
                  center =[115.452752, 31.789033];
                }
                map.getView().animate({
                  // 只设置需要的属性即可
                  center: ol.proj.fromLonLat(center), // 中心点
                  zoom: 17.9, // 缩放级别
                  rotation: undefined, // 缩放完成view视图旋转弧度
                  duration: 1000, // 缩放持续时间，默认不需要设置
                });
              }
            }
          });
        }
      },
      viewContractionInfo(row) {
        this.contractionData = row || {};
        this.contractionAttachmentList = [];
        attachmentList({
          tableId: row.id,
          tableName: 't_contraction_info',
        }).then((resp) => {
          this.contractionAttachmentList = resp.rows.map(rr=>{
            return {
              url:'/api'+rr.fileUrl
            };
          });
        });
        this.contractionVisible = true;
      },
      hideContractionInfo() {
        this.contractionData = {};
        this.contractionAttachmentList = [];
        this.contractionVisible = false;
      },
    },
  };
</script>