CQ_JD
/
nazw


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name=”SiteName” content=”重庆市南岸区人民政府”>
  <meta name="SiteDomain" content="http://www.cqna.gov.cn" />
  <meta name="SiteIDCode" content="5001080014">
  <meta name="ColumnName" content="产业园区">
  <meta name="ColumnDescription" content="产业园区" />
  <meta name="ColumnKeywords" content="产业园区" />
  <meta name="ColumnType" content="产业园区" />
  <title>产业园区-重庆市南岸区人民政府网</title>
  <!-- 引入 Vue -->
  <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://www.cqna.gov.cn/syygapi/naxsb/css/index.css">
  <!-- 引入组件库 -->
  <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/index.js"></script>
  <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/jquery-3.5.1.min.js"></script>
  <script type="text/javascript"
    src="https://api.map.baidu.com/api?type=webgl&v=3.0&ak=7XivTux4H2e1ifKLjvEhxfuayDYxAluq">
  </script>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7XivTux4H2e1ifKLjvEhxfuayDYxAluq">
  </script>
  <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/jquery-3.5.1.min.js"></script>
  <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/urljson.js"></script>
  <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/echarts.min.js"></script>
  <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/bmap.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style-type: none;
    }

    li {
      list-style: none;
      cursor: pointer;
    }

    ::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    @font-face {
      font-family: 'DOUYU';
      src: url('https://www.cqna.gov.cn/syygapi/naxsb/fonts/DOUYUFONT-2.woff');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'Source Han Sans SC';
      src: url('https://www.cqna.gov.cn/syygapi/naxsb/fonts/MSYHL.TTC');
      font-weight: normal;
      font-style: normal;
    }

    .backbutton img {
      margin-right: 0.625rem;
    }

    #dqfwNew {
      /* height: 100vh; */
      font-family: Microsoft YaHei;
      color: #FFFFFF;
      box-sizing: border-box;
      position: relative;
    }

    .content {
      width: 100vw;
      display: flex;
      flex-direction: column;
      background: #EDF5FF;
    }

    #mapcontainer {
      width: 100vw;
      height: 73vw;
    }

    #mapcontainerrlt {
      width: 100vw;
      height: 73vw;
      margin-bottom: 10px;
    }

    .ec-extension-bmap {
      width:100vw !important;
      height: 73vw !important;
    }

    .contentR {
      width: 95vw;
      margin: auto;
      margin-bottom: 10px;
    }

    .contentBox {
      width: 100%;
      display: flex;
    flex-direction: column;
    }

    .contentItem {
      height: 53vw;
      border-radius: 10px;
      background: url(https://www.cqna.gov.cn/syygapi/naxsb/image/ysxxbg.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      width: 95vw;
      margin: auto;
      margin-top: 10px;
    }

    .main {
      padding: 10px 20px;
      flex: 1;
      overflow: auto;
      width: 100%;
      box-sizing: border-box;
      font-size: 14px;
    }

    .yqfw {
      display: flex;
      flex-wrap: wrap;
      padding: 25px;
      padding-left: 50px;
    }

    .yqlb {
      display: grid;
      padding: 10px;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-column-gap: 0.2rem;
      grid-row-gap: 10px;
      flex: 1;
    }

    .mxqy {
      display: flex;
      flex-wrap: wrap;
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
      padding: 15px;
      flex: 1;
    }

    .tdgy {
      padding: 0 20px;
      overflow: hidden;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }

    .tdgyC {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .ztfwC {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .tdgyList {
      display: flex;
      border-bottom: 1px solid rgba(245, 250, 255, .2);
      padding: 5px 0;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
      width: 100%;
      cursor: pointer;
    }

    .liList {
      display: flex;
      padding: 5px 0;
      overflow: hidden;
      word-break: break-all;
      /* white-space: nowrap; */
      border-bottom: 1px solid rgba(245, 250, 255, .2);
      width: 100%;
    }

    .ztfwList {
      display: flex;
      border-bottom: 1px solid rgba(245, 250, 255, .2);
      padding: 5px 0;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
      width: 100%;
      cursor: pointer;
    }

    .liList:last-child {
      display: flex;
      border-bottom: none;
    }

    .ztfwList:last-child {
      display: flex;
      border-bottom: none;
    }

    .liList>img {
      width: 11px;
      height: 11px;
      margin-top: 5px;
      margin-right: 10px;
      cursor: pointer;
    }

    .tdgyList:last-child {
      display: flex;
      border-bottom: none;
    }

    .ztfwList:last-child {
      display: flex;
      border-bottom: none;
    }

    .tdgyList>img {
      width: 15px;
      height: 15px;
      margin-top: 5px;
      margin-right: 10px;
    }

    .ztfwList>img {
      width: 15px;
      height: 15px;
      margin-top: 5px;
      margin-right: 10px;
    }

    .nodata {
      height: calc(100% - 10px);
      /* width: calc(100% - 40px); */
      background-size: 100% 100%;
    }

    .tdgyContent {
      width: calc(100% - 35px);
    }

    .tdgyTitle {
      font-size: 14px;
    }

    .mxqyList {
      width: calc(50% - 5px);
      height: 50%;
      box-sizing: border-box;
      margin-bottom: 5px;
      background-color: #fff;
      cursor: pointer;
    }

    .mxqyList:nth-child(even) {
      margin-left: 5px;
    }

    .mxqyList>img {
      width: 100%;
      height: 100%;
    }

    .tdgyLocation {
      font-size: 12px;
      color: rgba(255, 255, 255, .6);
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
      text-overflow: ellipsis !important;
      -o-text-overflow: ellipsis;
    }

    .tdgyDec {
      font-size: 13px;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
      text-overflow: ellipsis !important;
      -o-text-overflow: ellipsis;
      width: 90%;
    }

    .mainList {
      background: url(https://www.cqna.gov.cn/syygapi/naxsb/image/yqlbListbg.png) no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .mainList:nth-child(odd) {
      padding-right: 25px;
    }

    .mb {
      margin-bottom: 50px;
    }

    .mainBox>img {
      width: 2rem;
      height: 2rem;
      margin-right: 10px;
    }

    .mainBox {
      width: 50%;
      display: flex;
      align-items: center;
      font-size: 16px;
      box-sizing: border-box;
      cursor: pointer;
      /* justify-content: center; */
    }

    .mainBox span {
      font-weight: bold;
    }

    .mainBox>img {
      vertical-align: middle;
    }

    .dec {
      font-size: 12px;
    }

    .yqfwBox {
      width: 50%;
      display: flex;
      align-items: center;
      font-size: 14px;
      box-sizing: border-box;
      cursor: pointer;
    }

    .yqfwBox>img {
      width: 15px;
      height: 15px;
      margin-right: 10px;
    }

    .title {
      display: flex;
      justify-content: space-between;
      padding: 15px 10px 10px 10px;
      align-items: center;
      color: #FFFFFF;
      font-family: Microsoft YaHei;
      font-size: 16px;
    }

    .title1 {
      display: flex;
      justify-content: space-between;
      padding: 15px 15px 0 15px;
      align-items: center;
      color: #FFFFFF;
      font-family: Microsoft YaHei;
    }

    .text {
      font-weight: bold;
      font-size: 16px;
    }

    .more {
      font-size: 13px;
      cursor: pointer;
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #B7C7DC;
      background: #192E47;
    }

    .toplogo img {
      margin-bottom: 10px;
      margin-right: 10px;
    }

    .toplogo {
      padding-left: 10px;
      display: flex;
      align-items: center;
      font-family: DOUYU;
      font-weight: normal;
      font-size: 18px;
      color: #fff;
      height: 11vw;
      cursor: pointer;
    }

    .backbutton img {
      margin-right: 10px;
    }
    .contentItem video {
      width: 100%;
      height: 100%;
    }

    .text.active {
      border-bottom: 1px solid #fff;
    }

    .video-player-container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    video {
      width: 100%;
      height: auto;
      transition: transform 0.3s ease;
    }

    .controls {
      position: absolute;
      bottom: 10px;
      left: 10px;
      z-index: 100;
    }

    .controls button {
      margin-right: 5px;
    }
  </style>
</head>

<body>
  <div style="width:100%;" class="header"></div>
  <div class="" id="dqfwNew">
    <div class="top">
      <div class="toplogo">
        <img src="images/gyylogowhite.png" alt="">
        <span>{{parkDesc?parkDesc.title:'-'}}</span>
      </div>
      <div class="backbutton" @click="window.history.go(-1)">
        <img src="images/backlogo.png" alt="">
      </div>
    </div>
    <div class="content">
      <div id="mapcontainer" v-show="currentmap==1"></div>
      <div id="mapcontainerrlt" v-show="currentmap==2"></div>
      <div class="contentR">
        <div class="contentBox">
          <div class="contentItem">
            <video autoplay loop muted playsinline controls controlslist="nodownload">
              <source
                :src="this.id==='1'?'https://www.cqna.gov.cn/syygapi/lkcygyy.mp4':this.id==='2'?'https://www.cqna.gov.cn/syygapi/lkxjdzcyy.mp4':this.id==='3'?'https://www.cqna.gov.cn/syygapi/lkcjyscxcyy.mp4':this.id==='4'?'https://www.cqna.gov.cn/syygapi/lknpxq.mp4':this.id==='5'?'https://www.cqna.gov.cn/syygapi/lkylcxg.mp4':'https://www.cqna.gov.cn/syygapi/index.mp4'"
                type="video/mp4" style="width:100%;height: 100%;border-radius: 10px;">
              Your browser does not support the video tag.
            </video>
          </div>
          <div class="contentItem">
            <div class="title1">
              <span class="text">园区介绍</span>
            </div>
            <div class="main">
              <div class="liList" v-for="(tab, index)  in str" :key="index">
                <img src="https://www.cqna.gov.cn/syygapi/naxsb/image/listcricle.png" />
                <div :title="tab" class="tdgyTitle">{{tab}}</div>
              </div>
            </div>
          </div>
          <div class="contentItem"
            style="background:url(https://www.cqna.gov.cn/syygapi/naxsb/image/tdgybg.png) no-repeat;background-size: 100% 100%;">
            <div class="title">
              <div><span class="text active" style="cursor: pointer;" id="tdgydiv"
                  @click="currentmap=1;$('#rltdiv').removeClass('active');$('#tdgydiv').addClass('active');">土地供应</span><span
                  class="text" style="margin-left: 10px;cursor: pointer;"
                  @click="currentmap=2;$('#tdgydiv').removeClass('active');$('#rltdiv').addClass('active');"
                  id="rltdiv">热力图</span></div>
              <span class="more" @click="golink('tdcrlistMobile.html?id=-1',1)"
                v-if="!contentList.length">更多>></span>
              <span class="more" @click="golink('tdcrlistMobile.html',2)"
                v-else>更多>></span>
            </div>
            <div class="tdgy">
              <div class="tdgyC">
                <div class="tdgyList" v-for="(tab, index)  in this.contentList" :key="index" @click="goTdcr(tab.id)">
                  <img src="https://www.cqna.gov.cn/syygapi/naxsb/image/listcricle.png" />
                  <div class="tdgyContent">
                    <div class="tdgyTitle">{{tab.landName}}</div>
                    <div class="tdgyDec">{{tab.landArea}}亩&nbsp;丨&nbsp;{{tab.landFunction?tab.landFunction:''}}</div>
                  </div>
                </div>
              </div>
              <div class="nodata" v-show="!contentList.length"
                :style="{ backgroundImage: 'url(' + tdBackgroundImage + ')'}"></div>
            </div>
          </div>
          <div class="contentItem"
            style="background:url(https://www.cqna.gov.cn/syygapi/naxsb/image/ztfwbg.png) no-repeat;background-size: 100% 100%;">
            <div class="title">
              <span class="text">载体服务</span>
              <span class="more" @click="golink('ztcrlistMobile.html',2)">更多>></span>
            </div>
            <div class="tdgy">
              <div class="ztfwC">
                <div class="ztfwList" v-for="(tab, index)  in this.buildList" :key="index" @click="goZtcr(tab.id)">
                  <img src="https://www.cqna.gov.cn/syygapi/naxsb/image/listcricle.png" />
                  <div class="tdgyContent">
                    <div class="tdgyTitle">{{tab.carrierName}}</div>
                    <div class="tdgyDec">
                      {{tab.space?tab.space:''}}亩&nbsp;丨&nbsp;{{tab.addr?tab.addr:tab.application}}</div>
                  </div>
                </div>
              </div>
              <div class="nodata" v-show="!buildList.length"
                :style="{ backgroundImage: 'url(' + ztBackgroundImage + ')'}"></div>
            </div>
          </div>
          <div class="contentItem"
            style="background:url(https://www.cqna.gov.cn/syygapi/naxsb/image/yqfwbg.png) no-repeat;background-size: 100% 100%;">
            <div class="title">
              <span class="text">便企服务站</span>
            </div>
            <div class="yqfw">
              <div class="yqfwBox mb" @click="golink('tsfwMobile.html')">
                <img src="https://www.cqna.gov.cn/syygapi/naxsb/image/listcricle.png" />特色服务
              </div>
              <div class="yqfwBox mb" @click="golink('dqfwMobile.html')">
                <img src="https://www.cqna.gov.cn/syygapi/naxsb/image/listcricle.png" />党群服务
              </div>
              <div class="yqfwBox" @click="window.open('wybdbMobile.html')">
                <img src="https://www.cqna.gov.cn/syygapi/naxsb/image/listcricle.png" />帮代办服务
              </div>
              <div class="yqfwBox" @click="golink('znxzchoiceMobile.html')">
                <img src="https://www.cqna.gov.cn/syygapi/naxsb/image/listcricle.png" />智能选址
              </div>
            </div>
          </div>
          <div class="contentItem"
            style="background:url(https://www.cqna.gov.cn/syygapi/naxsb/image/mxqybg.png) no-repeat;background-size: 100% 100%;">
            <div class="title">
              <span class="text">明星企业</span>
            </div>
            <div class="mxqy">
              <div class="mxqyList" v-for="(tab, index)  in this.titleList" @click="tab.link?window.open(tab.link):''"
                :key="index">
                <img :src="tab.logo" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div style="width:100%;" class="footer"></div>
</body>

<script>
  $(function () {
    
    $(".header").load('https://www.cqna.gov.cn/syygapi/naxsb/top/top_style.html');
    $(".footer").load('https://www.cqna.gov.cn/syygapi/naxsb/footer/footer.html');
  });
</script>
<script>
  
  new Vue({
    el: '#dqfwNew',
    data: function () {
      return {
        str: [],
        currentTab: -1,
        currentmap: 1,
        contentList: [],
        buildList: [],
        currentTitle: '',
        parkDesc: null,
        parkName: '',
        titleList: [],
        tdBackgroundImage: 'https://www.cqna.gov.cn/syygapi/naxsb/image/tdcy.webp',
        ztBackgroundImage: 'https://www.cqna.gov.cn/syygapi/naxsb/image/ztcy.webp',
        fadeOut: false,
        fadeIn: false,
        id: null,
        map: null
      };
    },
    created() { },
    async mounted() {
      const url = new URL(window.location.href);
      this.id = url.searchParams.get('id');
      var id = url.searchParams.get('id');
      await this.getParkData()
      if (this.id == 4) {
        this.tdBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/npxqcyy.jpg';
      } else if (this.id == 6) {
        this.tdBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/dxkjy.jpg';
      } else if (this.id == 5) {
        this.tdBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/ylcxg.jpg';
      } else if (this.id == 1) {
        this.tdBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/cycyy.jpg';
      } else if (this.id == 2) {
        this.tdBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/xjqcdzcyy.jpg';
      } else if (this.id == 3) {
        this.tdBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/cjlscxcyy.jpg';
      } else {
        this.tdBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/tdcy.webp';
      }
      if (this.id == 4) {
        this.str = ['位于南岸核心区范围', '总面积约5平方公里', '轨道3号线、10号线', '城市公共服务和配套设施完善', '主导产业：软件信息业、商贸流通业、文旅大健康产业、生产型服务业']
        this.ztBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/ztnp.webp';
      } else if (this.id == 6) {
        this.str = ['位于广阳湾智创生态城内', '规划总建筑面积约为75万平方米', '主导产业：软件及信息服务业发展']
        this.ztBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/ztdx.webp';
      } else if (this.id == 5) {
        this.str = ['位于广阳湾智创生态城东南侧迎龙片区', '建设用地总面积0.72平方公里', '已建用地约为0.36平方公里', '轨道交通便捷，公路交通发达', '主导产业：脑科学等前沿科学、绿色低碳产业、软件信息服务业、商贸服务业']
        this.ztBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/ztyl.webp';
      } else if (this.id == 3) {
        this.str = ['位于广阳湾智创生态城核心区', '规划建设用地面积约为4.43平方公里', '建成面积约为4.17平方公里', '主导产业：智能终端研发生产矩阵、数字经济软信产业链、节能环保绿色装备制造基地、医药医疗器械产业']
        this.ztBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/ztcjcx.webp';
      } else if (this.id == 2) {
        this.str = ['位于广阳湾智创生态城内', '总用地面积约32万平方米', '规划总建筑面积约为75万平方米', '主导产业：软件及信息服务业发展']
        this.ztBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/ztxj.webp';
      } else {
        this.str = ['总面积约7.31平方公里', '建设用地面积4.14平方公里', '建成面积约3.47平方公里', '主导产业：智能制造、软件信息服务、大健康、汽车及零部件']
        this.ztBackgroundImage = 'https://www.cqna.gov.cn/syygapi/naxsb/image/ztcy.webp';
      }
      if (id == 1) {
        this.loadheatMap('https://www.cqna.gov.cn/syygapi/naxsb/json/cycyy.json', '106.619974,29.505763');
      } else if (id == 2) {
        this.loadheatMap('https://www.cqna.gov.cn/syygapi/naxsb/json/xjqcdzcyy.json', '106.74585,29.610364');
      } else if (id == 3) {
        this.loadheatMap('https://www.cqna.gov.cn/syygapi/naxsb/json/cjlscxcyy.json', '106.650834,29.545306');
      } else if (id == 4) {
        this.loadheatMap('https://www.cqna.gov.cn/syygapi/naxsb/json/npxqcyy.json', '106.520471,29.543469');
      } else if (id == 5) {
        this.loadheatMap('https://www.cqna.gov.cn/syygapi/naxsb/json/ylcxg.json', '106.696781,29.532237');
      } else if (id == 6) {
        this.loadheatMap('https://www.cqna.gov.cn/syygapi/naxsb/json/dxkjy.json', '106.728802,29.610054');
      }

    },
    methods: {
      goTdcr(id) {
        window.location.href = 'tdcrMobile.html?tdid=' + id;
      },
      goZtcr(id) {
        window.location.href = 'ztcrdetailMobile.html?ztid=' + id;
      },
      golink(hrf, val) {
        if (val) {
          if (val === 1 && !this.contentList.length || val === 2 && !this.buildList.length) return window.location.href = hrf;
        }
        window.location.href = `${hrf}?id=${this.id}`;
      },
      loadheatMap(url, centerpoint) {
        var app = {};
        var chartDom = document.getElementById('mapcontainerrlt');
        var myChart = echarts.init(chartDom);
        var option;
        var point = centerpoint.split(',');
        $.get(url, function (data) {
          var points = [].concat.apply(
            [],
            data.map(function (track) {
              return track.map(function (seg) {
                return seg.coord.concat([1]);
              });
            })
          );
          myChart.setOption(
            (option = {
              toolbox: {
                show: false,
                feature: {
                  saveAsImage: false,
                  toolbox: false 
                }
              },
              animation: false,
              bmap: {
                center: [point[0], point[1]],
                zoom: 14,
                roam: true
              },
              visualMap: {
                show: false,
                top: 'top',
                min: 0,
                max: 5,
                seriesIndex: 0,
                calculable: true,
                inRange: {
                  color: ['blue', 'yellow', 'red']
                }
              },
              series: [
                {
                  type: 'heatmap',
                  coordinateSystem: 'bmap',
                  data: points,
                  pointSize: 25,
                  blurSize: 15
                }
              ]
            })
          );
          
          var bmap = myChart.getModel().getComponent('bmap').getBMap();
          bmap.addControl(new BMap.MapTypeControl());
          bmap.setMapType(BMAP_NORMAL_MAP);
        });


        option && myChart.setOption(option);
      },
      loadAllMap() {
        var that = this;
        fetch('https://www.cqna.gov.cn/syygapi/naxsb/js/najson.json')
          .then(response => response.json())
          .then(data => {
            var centerPoint = data.features[0].properties.center;
            map = new BMapGL.Map("mapcontainer");
            map.enableScrollWheelZoom(true); 
            map.enableDragging(true); 
            const id = that.id;
            map.setMapStyleV2({
              styleJson: [
                {
                  "featureType": "building",
                  "elementType": "all",
                  "stylers": {
                    "visibility": "off"
                  }
                },
                {
                  "featureType": "poilabel",
                  "elementType": "all",
                  "stylers": {
                    "visibility": "off"
                  }
                },
                {
                  "featureType": "manmade",
                  "elementType": "all",
                  "stylers": {
                    "visibility": "off"
                  }
                },
              ]
            });
            
            var level = 14;
            if (id == 1) {
              map.centerAndZoom(new BMapGL.Point(106.651444, 29.48682), 13);
              level = 14;
            } else if (id == 2) {
              map.centerAndZoom(new BMapGL.Point(106.76723874457288, 29.583276880811712), 13);
              level = 13;
            } else if (id == 3) {
              map.centerAndZoom(new BMapGL.Point(106.69517131217539, 29.53077313312822), 13);
              level = 14;
            } else if (id == 4) {
              map.centerAndZoom(new BMapGL.Point(106.559829995157, 29.528581648208534), 13);
              level = 14;
            } else if (id == 5) {
              map.centerAndZoom(new BMapGL.Point(106.72194027111843, 29.519690776940248), 13);
              level = 15;
            } else if (id == 6) {
              map.centerAndZoom(new BMapGL.Point(106.70580793222035, 29.519020426917684), 13);
              level = 15;
            } else {
              map.centerAndZoom(new BMapGL.Point(106.651444, 29.48682), 13);
            }
            map.setMapType(BMAP_NORMAL_MAP);
            var pointList = data.features[0].geometry.coordinates[0][0];
            let result = [];
            pointList.forEach(function (point) {
              result.push(new BMapGL.Point(point[0], point[1]));
            });
            
            polygon = new BMapGL.Polygon(result, {
              strokeColor: "#226cfb",
              strokeWeight: 1.5,
              strokeOpacity: 1,
              strokeStyle: "solid",
              fillColor: "#4B98F6",
              fillOpacity: 0.2
            });
            
            map.addOverlay(polygon);
            let pointList1 = that.parkDesc.addr.split('@');
            let result1 = [];
            pointList1.forEach(function (point) {
              let arr = point.split(',');
              result1.push(new BMapGL.Point(arr[0], arr[1]));
            });
            
            polygon1 = new BMapGL.Polygon(result1, {
              strokeColor: "transparent",
              strokeWeight: 0,
              strokeOpacity: 1,
              strokeStyle: "solid",
              fillColor: that.parkDesc.color,
              fillOpacity: 0.6
            });
            
            map.addOverlay(polygon1);
            var points = that.ztpointList;
            if (points.length) {
              points.forEach(function (d) {
                let pList = d.point.split('@');
                pList.forEach(function (point) {
                  let arr = point.split(',');
                  let p = new BMapGL.Point(arr[0], arr[1]);
                  var myIcon = new BMapGL.Icon('images/addrztm.png', new BMapGL.Size(25, 25));
                  let marker = new BMapGL.Marker(p, {icon: myIcon});
                  var opts = {
                    position: new BMapGL.Point(arr[0], arr[1]), 
                    offset: new BMapGL.Size(10, 10) 
                  };

                  
                  var label = new BMapGL.Label(d.carrierName, opts);
                  label.setStyle({
                    color: "#186FF0",
                    border: "0",
                    padding: "0",
                    display: "none",
                    background: "transparent",
                    fontWeight: 'bold',
                    backgroundColor: 'transparent',
                    textShadow: '0 0 4px #4B97F5',
                    textStrokeColor: "#4B97F5", 
                    textStrokeWidth: "4px", 
                    fontSize: "16px",
                    height: "20px",
                    lineHeight: "20px",
                    fontFamily: "微软雅黑"
                  });
                  marker.setLabel(label);

                  marker.addEventListener("mouseover", function (e) {
                    var label = this.getLabel()
                    label.setStyle({ display: "block" });
                  });
                  marker.addEventListener("mouseout", function (e) {
                    var label = this.getLabel()
                    label.setStyle({ display: "none" });
                  });
                  map.addOverlay(marker);
                  marker.addEventListener('click', function () {
                    var id = d.id;
                    window.location.href = 'ztcrdetailMobile.html?ztid=' + id;
                  });
                });
              });
            }
            var datalist = that.tdpointList;
            if (datalist.length) {
              datalist.forEach(function (polygonData) {
                let pointList = polygonData.point.split('@');
                let result = [];
                pointList.forEach(function (point) {
                  let arr = point.split(',');
                  result.push(new BMapGL.Point(arr[0], arr[1]));
                });
                
                let polygon = new BMapGL.Polygon(result, {
                  strokeColor: "red",
                  strokeWeight: 1,
                  strokeOpacity: 1,
                  strokeStyle: "solid",
                  fillColor: "transparent",
                  fillOpacity: 0
                });
                map.addOverlay(polygon);
                var id = polygonData.id;

                
                var label = new BMapGL.Label(polygonData.landName, {
                  position: polygon.getBounds().getCenter(),
                  offset: new BMapGL.Size(0, 0)
                });
                label.setStyle({
                  color: "#186FF0",
                  fontSize: "18px",
                  height: "auto",
                  lineHeight: "20px",
                  fontFamily: "微软雅黑",
                  fontWeight: 'bold',
                  backgroundColor: 'transparent',
                  border: 'none',
                  textShadow: '0 0 4px #4B97F5',
                  textStrokeColor: "#4B97F5", 
                  textStrokeWidth: "4px", 
                });
                polygon.addEventListener("mouseover", function () {
                  map.addOverlay(label);
                  label.setStyle({ display: "block" });
                });

                
                polygon.addEventListener("mouseout", function () {
                 
                  label.setStyle({ display: "none" });
                });

                
                polygon.addEventListener("click", function () {
                  window.location.href = 'tdcrMobile.html?tdid=' + id;
                });
              });
            }
            setTimeout(function name(params) {
              that.zoomInStepByStep(13, level);
            }, 3000)
          })
          .catch(error => console.error('Error fetching JSON:', error));

      },
      addKey(y) {
        let i = 0
        setInterval(function () {
          if (i >= y) return i = 0
          i++
          document.querySelector('.tdgyC').style.marginTop = `-${i}px`
        }, 50);
      },
      async getParkData() {
        let that = this;
        $.ajax({
          url: conpath + "/parkData/" + this.id,
          type: "get",
          dataType: "json",
          async: false,
          success: function (data) {
            var pointlist = data.addr.split('@');
            that.parkDesc = data;
          }
        })
        await $.ajax({
          url: conpath + "/parkData/details/" + this.id,
          type: "get",
          dataType: "json",
          success: function (data) {
            that.titleList = data.filter(item => item.moduleType === "3");
          }
        });
        await $.ajax({
          url: conpath + "/sellLand",
          type: "post",
          contentType: 'application/json',
          data: JSON.stringify({
            "currentPage": 1,
            "pageSize": 10000,
            "parkId": that.id,
            "keyword": ''
          }),
          dataType: "json",
          success: function (data) {
            let dataList = data.list;
            that.contentList = dataList;
            that.tdpointList = [];
            dataList.forEach(function (d) {
              
              if (!d.point) return;
              let pList = d.point.split('@');
              pList.forEach(function (point) {
                that.tdpointList.push(d);
              });
            });
          }
        });
        await $.ajax({
          url: conpath + "/sellBuild",
          type: "post",
          contentType: 'application/json',
          data: JSON.stringify({
            "currentPage": 1,
            "pageSize": 10000,
            "parkId": that.id,
            "space1": null,
            "application": null
          }),
          dataType: "json",
          success: function (data) {
            let dataList = data.list;
            that.buildList = dataList;
            that.ztpointList = [];
            dataList.forEach(function (d) {
              
              if (!d.point) return;
              let pList = d.point.split('@');
              pList.forEach(function (point) {
                that.ztpointList.push(d);
              });
            });
          }
        });
        that.loadAllMap();
        var height = document.querySelector('.ztfwList') ? document.querySelector('.ztfwList').clientHeight : 0;
        if (this.buildList.length) {
          this.addKeyFrames(height * this.buildList.length);
        }
        var height1 = document.querySelector('.tdgyList') ? document.querySelector('.tdgyList').clientHeight : 0;
        if (this.contentList.length) { this.addKey(height1 * this.contentList.length); }
      },
      addKeyFrames(y) {
        let i = 0
        setInterval(function () {
          if (i >= y) return i = 0
          i++
          document.querySelector('.ztfwC').style.marginTop = `-${i}px`
        }, 50);
      },
      zoomInStepByStep(currentZoom, maxZoom) {
        let that = this;
        if (currentZoom <= maxZoom) {
          map.setZoom(currentZoom, true);
          setTimeout(function () {
            that.zoomInStepByStep(currentZoom + 0.5, maxZoom);
          }, 100); 
        }
      }
    }
  });
</script>

</html>