|
@@ -0,0 +1,778 @@
|
|
|
+<!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> 南岸区</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}}亩 丨 {{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:''}}亩 丨 </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>
|