CQ_JD
/
nazw


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产业园区</title>
  <!-- 引入 Vue -->
  <script src="js/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/index.css">
  <!-- 引入组件库 -->
  <script src="js/index.js"></script>
  <script src="js/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7XivTux4H2e1ifKLjvEhxfuayDYxAluq">
  </script>
  <script src="js/urljson.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style-type: none;
    }

    li {
      list-style: none;
    }

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

    @font-face {
      font-family: 'DOUYU';
      src: url('fonts/DOUYUFONT-2.OTF');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'Source Han Sans SC';
      src: url('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 {
      height: calc(100% - 82px);
      display: flex;
      background: #EDF5FF;
      padding: 0 15px 15px 15px;
    }

    #mapcontainer {
      width: 60%;
      height: calc(100% - 10px);
      margin-top: 10px;
    }

    .contentR {
      width: calc(40% - 10px);
      height: 100%;
      margin-left: 10px;
    }

    .contentBox {
      height: calc(100% - 73px);
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-column-gap: 15px;
      grid-row-gap: 15px;
    }

    .contentItem {
      border-radius: 10px;
      background: url(image/ysxxbg.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      width: 100%;
    }

    .main {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
      flex: 1;
    }

    .yqfw {
      display: flex;
      flex-wrap: wrap;
      padding: 3rem;
      flex: 1;
    }

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

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

    .tdgy {
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px;
      width: 100%;
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
      box-sizing: border-box;
      height: 100%;
    }

    .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%;
    }

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

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

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

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

    .tdgyTitle {
      font-size: 20px;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
      text-overflow: ellipsis !important;
      -o-text-overflow: ellipsis;
    }

    .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: 16px;
    }

    .mainList {
      background: url(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: 25px;
    }

    .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: 18px;
      box-sizing: border-box;
      cursor: pointer;
      /* justify-content: center; */
    }

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

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

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

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

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

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

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

    .backbutton {
      width: 117px;
      height: 42px;
      background: #539EDD;
      border-radius: 10px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      cursor: pointer;
    }

    .backbutton img {
      margin-right: 10px;
    }

    .location {
      height: 73px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 1.17rem;
      color: #333333;
      line-height: 73px;
    }

    .location>i {
      color: #C4C4C4 !important;
    }

    /* 淡出动画 */
    .fade-out {
      animation: fadeOut 1s forwards;
    }

    /* 淡入动画 */
    .fade-in {
      animation: fadeIn 1s forwards;
    }

    @keyframes fadeOut {
      from {
        opacity: 0.8;
      }

      to {
        opacity: 0.6;
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0.6;
      }

      to {
        opacity: 0.8;
      }
    }

    @media screen and (max-width:1600px) {

      html,
      body {
        font-size: 14px;
      }
    }

    @media screen and (max-width:1400px) {

      html,
      body {
        font-size: 14px;
      }
    }

    @media screen and (max-width:1300px) {

      html,
      body {
        font-size: 10px;
      }
    }
  </style>
</head>

<body>
  <div class="header"></div>
  <div class="" id="dqfwNew">
    <div class="top">
      <div class="toplogo">
        <img src="image/gyylogowhite.png" alt="">
        <span>产业园区</span>
      </div>
      <div class="backbutton" @click="window.history.go(-1)">
        <img src="images/backlogo.png" alt="">
        <span>返回</span>
      </div>
    </div>
    <div class="content">
      <div id="mapcontainer"></div>
      <div class="contentR">
        <div class="location"><i class="el-icon-location"></i>&nbsp;南岸区</div>
        <div class="contentBox">
          <div class="contentItem"></div>
          <div class="contentItem">
            <div class="title">
              <span class="text">园区介绍</span>
            </div>
            <div class="main">
              <div class="mainBox mb" v-show="parkDesc&&parkDesc.title&&parkDesc.title.length">
                <img src="image/zmj.png" />
                <div>
                  <div>{{parkDesc?parkDesc.title:'-'}}</div>
                </div>
              </div>
              <div class="mainBox mb" v-show="parkDesc&&parkDesc.totalArea&&parkDesc.totalArea.length">
                <img src="image/jcmj.png" />
                <div>
                  <div>用地面积</div>
                  <div class="dec"><span>{{parkDesc?parkDesc.totalArea:'-'}}</span>平方公里</div>
                </div>
              </div>
              <div class="mainBox mb" v-show="parkDesc&&parkDesc.buildArea&&parkDesc.buildArea.length">
                <img src="image/jcmj1.png" />
                <div>建成面积
                  <div class="dec"><span>{{parkDesc?parkDesc.buildArea:'-'}}</span>平方公里</div>
                </div>
              </div>
              <div class="mainBox" v-show="parkDesc&&parkDesc.industry&&parkDesc.industry.length">
                <img src="image/cyfb.png" />
                <div>主导产业
                  <div class="dec">{{parkDesc?parkDesc.industry:'-'}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="contentItem" style="background:url(image/tdgybg.png) no-repeat;background-size: 100% 100%;">
            <div class="title">
              <span class="text">土地供应</span>
              <span class="more" @click="golink('tdcrlist.html',1)">更多>></span>
            </div>
            <div class="tdgy">
              <div class="tdgyList" v-for="(tab, index)  in this.contentList" :key="index">
                <img src="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 class="tdgyLocation"><i class="el-icon-location"></i>{{tab.addr?tab.addr:''}}</div>
                </div>
              </div>
              <div class="nodata" v-show="!contentList.length"
                :style="{ backgroundImage: 'url(' + tdBackgroundImage + ')'}"></div>
            </div>
          </div>
          <div class="contentItem" style="background:url(image/ztfwbg.png) no-repeat;background-size: 100% 100%;">
            <div class="title">
              <span class="text">载体服务</span>
              <span class="more" @click="golink('ztcrlist.html',2)">更多>></span>
            </div>
            <div class="tdgy">
              <div class="tdgyList" v-for="(tab, index)  in this.buildList" :key="index">
                <img src="image/listcricle.png" />
                <div class="tdgyContent">
                  <div class="tdgyTitle">{{tab.carrierName}}</div>
                  <div class="tdgyDec">
                    {{tab.space?tab.space:''}}亩&nbsp;丨&nbsp;</div>
                </div>
              </div>
              <div class="nodata" v-show="!buildList.length"
                :style="{ backgroundImage: 'url(' + ztBackgroundImage + ')'}"></div>
            </div>
          </div>
          <div class="contentItem" style="background:url(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('tsfw.html')">
                <img src="image/listcricle.png" />特色服务
              </div>
              <div class="yqfwBox mb" @click="golink('dqfw.html')">
                <img src="image/listcricle.png" />党群服务
              </div>
              <div class="yqfwBox" @click="window.open('wybdb.html')">
                <img src="image/listcricle.png" />帮代办服务
              </div>
              <div class="yqfwBox" @click="golink('znxzchoice.html')">
                <img src="image/listcricle.png" />智能选址
              </div>
            </div>
          </div>
          <div class="contentItem" style="background:url(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>
</body>
<!-- <script>
  $(function () {
    /*公共部分
    * 导航栏
    * footer CopyRight
    */
    // $(".headerpage").load("load/header.html");/*浏览器容易引起跨域问题*/
    $(".header").load('https://www.cqna.gov.cn/ggbf_search/top/top_style.html');
  });
</script> -->
<script>
  // 初始化Vue实例
  new Vue({
    el: '#dqfwNew',
    data: function () {
      return {
        reqPtah: '',
        currentTab: -1,
        contentList: [],
        buildList: [],
        currentTitle: '',
        parkDesc: null,
        parkName: '',
        titleList: [],
        tdBackgroundImage: 'image/tdcy.webp',
        ztBackgroundImage: 'image/ztcy.webp',
        fadeOut: false,
        fadeIn: false,
        id: null,
        curraddr: ''
      };
    },
    created() { },
    async mounted() {
      const url = new URL(window.location.href);
      this.id = url.searchParams.get('id');
      await this.getParkData()
      if (this.id == 4) {
        this.tdBackgroundImage = 'image/tdnp.webp';
      } else if (this.id == 6) {
        this.tdBackgroundImage = 'image/tdcj.webp';
      } else if (this.id == 5) {
        this.tdBackgroundImage = 'image/tdyl.webp';
      } else {
        this.tdBackgroundImage = 'image/tdcy.webp';
      }
      if (this.id == 4) {
        this.ztBackgroundImage = 'image/ztnp.webp';
      } else if (this.id == 6) {
        this.ztBackgroundImage = 'image/ztdx.webp';
      } else if (this.id == 5) {
        this.ztBackgroundImage = 'image/ztyl.webp';
      } else if (this.id == 3) {
        this.ztBackgroundImage = 'image/ztcjcx.webp';
      } else if (this.id == 2) {
        this.ztBackgroundImage = 'image/ztxj.webp';
      } else {
        this.ztBackgroundImage = 'image/ztcy.webp';
      }
    },
    methods: {
      goIndex() {
        window.location.href = "indexsyyg.html"
      },
      back() {
        window.location.href = "indexsyyg.html"
      },
      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}`;
      },
      loadAllMap() {
        var that = this;
        fetch('js/najson.json')
          .then(response => response.json())
          .then(data => {
            var centerPoint = data.features[0].properties.center;

            var map = new BMap.Map("mapcontainer");
            map.enableScrollWheelZoom(); // 启用滚轮缩放
            map.enableDragging(); // 启用拖拽功能
            map.centerAndZoom(new BMap.Point(106.651444, 29.51982), 13);
            map.setMapType(BMAP_NORMAL_MAP);
            var pointList = data.features[0].geometry.coordinates[0][0];
            let result = [];
            pointList.forEach(function (point) {
              result.push(new BMap.Point(point[0], point[1]));
            });
            // 创建多边形
            let polygon = new BMap.Polygon(result, {
              strokeColor: "#226cfb",
              strokeWeight: 3,
              strokeOpacity: 1,
              strokeStyle: "dashed",
              fillColor: "#4B98F6",
              fillOpacity: 0.3
            });
            // 将多边形添加到地图中
            map.addOverlay(polygon);
            let pointList1 = that.curraddr.split('@');
            let result1 = [];
            pointList1.forEach(function (point) {
              let arr = point.split(',');
              result1.push(new BMap.Point(arr[0], arr[1]));
            });
            // 创建多边形
            polygon1 = new BMap.Polygon(result1, {
              strokeColor: "transparent",
              strokeWeight: 0,
              strokeOpacity: 1,
              strokeStyle: "solid",
              fillColor: "#f76f3a",
              fillOpacity: 1
            });
            // 将多边形添加到地图中
            map.addOverlay(polygon1);
          })
          .catch(error => console.error('Error fetching JSON:', error));

      },
      loadMap(points) {
        let map = new BMap.Map("mapcontainer");
        map.enableScrollWheelZoom(); // 启用滚轮缩放
        map.enableDragging(); // 启用拖拽功能
        // 设定中心点和地图级别
        const addr = new URL(window.location.href);
        const id = addr.searchParams.get('id');
        // 设定中心点和地图级别
        if (id == 1) {
          map.centerAndZoom(new BMap.Point(106.651444, 29.45682), 14);
        } else if (id == 2) {
          map.centerAndZoom(new BMap.Point(106.76723874457288, 29.573276880811712), 14);
        } else if (id == 3) {
          map.centerAndZoom(new BMap.Point(106.69517131217539, 29.51577313312822), 15);
        } else if (id == 4) {
          map.centerAndZoom(new BMap.Point(106.559829995157, 29.501581648208534), 15);
        } else if (id == 5) {
          map.centerAndZoom(new BMap.Point(106.72194027111843, 29.513690776940248), 16);
        } else if (id == 6) {
          map.centerAndZoom(new BMap.Point(106.70580793222035, 29.514020426917684), 16);
        } else {
          map.centerAndZoom(new BMap.Point(106.651444, 29.48682), 14);
        }
        map.setMapType(BMAP_NORMAL_MAP);
        if (!points) return;

        // // 创建文本标签
        // if (!namePoint) return;
        // let namearr = namePoint.split(',');
        // var opts = {
        //   position: new BMap.Point(namearr[0], namearr[1]), // 指定文本标签所在的地理位置
        //   offset: new BMap.Size(10, 10) // 设置文本偏移量
        // };
        // // var opts = {
        // //     position: new BMap.Point(106.76806451085417, 29.60233121330567), // 指定文本标签所在的地理位置
        // //     offset: new BMap.Size(10, 10) // 设置文本偏移量
        // // };
        // // 创建文本标签对象，并添加到地图
        // var label = new BMap.Label(this.tdcrDetail.landName, opts);
        // // 自定义文本标签样式
        // label.setStyle({
        //   color: "#FFFFFF",
        //   fontSize: "18px",
        //   height: "auto",
        //   lineHeight: "20px",
        //   fontFamily: "微软雅黑",
        //   fontWeight: 'bold',
        //   backgroundColor: 'transparent',
        //   border: 'none',
        //   textShadow: '0 0 4px #4B97F5',
        //   textStrokeColor: "#4B97F5", // 文本描边颜色
        //   textStrokeWidth: "4px", // 文本描边宽度
        // });
        // map.addOverlay(label);
      },
      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;
            that.curraddr = data.addr;
            that.loadAllMap();
          }
        })
        console.log(that.parkDesc)
        $.ajax({
          url: conpath + "/parkData/details/" + this.id,
          type: "get",
          dataType: "json",
          success: function (data) {
            that.titleList = data.filter(item => item.moduleType === "3");
          }
        });
        $.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;
          }
        });
        $.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;
          }
        });
      }
    }
  });
</script>

</html>