|
|
@@ -323,7 +323,7 @@
|
|
|
<div class="right">
|
|
|
<span>便民服务站</span>
|
|
|
<div class="number">
|
|
|
- <span>153</span>
|
|
|
+ <span>150</span>
|
|
|
<span>个</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -359,19 +359,26 @@
|
|
|
<div class="districtLevelList" ref="districtLevelList"
|
|
|
:style="`height:${districtLevelListHeight}`">
|
|
|
<el-row>
|
|
|
- <el-col :span="12" v-for="(item,index) in districtLevelList">
|
|
|
+ <el-col :span="12" v-for="(item,index) in districtLevelLists">
|
|
|
<div class="districtLevelList-col">
|
|
|
<img :src="`./images/districtLevelList${districtLevelNum}.png`"
|
|
|
alt="" srcset="">
|
|
|
<div class="left">
|
|
|
- <span class="span-col name">{{index+1}}.{{item.name}}</span>
|
|
|
+ <span
|
|
|
+ class="span-col name">{{index*current+1}}.{{item.dep}}</span>
|
|
|
<span class="span-col">
|
|
|
<span class="label">电话：</span>
|
|
|
- <span class="center">{{item.tel}}</span>
|
|
|
+ <span class="center" :title="item.tel"
|
|
|
+ v-if="item.tel&&item.tel.length>28">{{item.tel.slice(0,
|
|
|
+ 28)}}...</span>
|
|
|
+ <span class="center" v-else>{{item.tel||'--'}}</span>
|
|
|
</span>
|
|
|
<span class="span-col">
|
|
|
<span class="label">地址：</span>
|
|
|
- <span class="center">{{item.address}}</span>
|
|
|
+ <span class="center" :title="item.address"
|
|
|
+ v-if="item.address&&item.address.length>28">{{item.address.slice(0,
|
|
|
+ 28)}}...</span>
|
|
|
+ <span class="center" v-else>{{item.address}}</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -379,7 +386,8 @@
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<div class="districtLevelFooter" ref="districtLevelFooter">
|
|
|
- <el-pagination :page-size="10" background layout="prev, pager, next"
|
|
|
+ <el-pagination :page-size="10" @current-change="currentChangeFun" background
|
|
|
+ layout="prev, pager, next" :current-page="current"
|
|
|
:total="districtLevelTotal">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
@@ -533,53 +541,53 @@
|
|
|
|
|
|
obj.scene.traverse(function (child) {
|
|
|
|
|
|
- if (child.material && child.material.name) {
|
|
|
- child.frustumCulled = false;
|
|
|
- child.castShadow = true;
|
|
|
- child.receiveShadow = true;
|
|
|
- child.material.emissive = child.material.color;
|
|
|
- child.material.emissiveMap = child.material.map;
|
|
|
- child.material.transparent = true;
|
|
|
- child.material.emissiveIntensity = 0.8;
|
|
|
- if (child.material.name == 'ckck') {
|
|
|
- const div = document.createElement('div');
|
|
|
- div.id = child.uuid;
|
|
|
- let html = '';
|
|
|
- html += '<div style="font-size: 12px; width: 80px; text-align: center;position: relative;">';
|
|
|
- html += '<div class="building-text" style="background: #18A65A; margin-bottom: -2px;position: absolute;top:170px">';
|
|
|
- html += '<span style="text-align: left;">停车场</span>';
|
|
|
- html += '<span style="font-size: 10px; text-align: left;">空余车位：-</span>';
|
|
|
- html += '<span style="font-size: 10px; text-align: left;">空余充电桩：-</span>';
|
|
|
- html += '</div>';
|
|
|
- html += '</div>';
|
|
|
- div.innerHTML = html;
|
|
|
- let tag = new THREE.CSS2DObject(div);
|
|
|
- child.add(tag);
|
|
|
- }
|
|
|
- if (child.material.name == 'gongjiaochezhan') {
|
|
|
-
|
|
|
- const div = document.createElement('div');
|
|
|
- div.id = child.uuid;
|
|
|
- let html = `
|
|
|
- <div class="building-box-chekuchukou">
|
|
|
- <div class="chekuchukou-tit"><span>公交车站</span><span id="busDetails">详情</span></div>
|
|
|
- <div>144路：即将到达</div>
|
|
|
- <div>180路：车已到站</div>
|
|
|
- <div>188路：9分钟</div>
|
|
|
- <div>345路：2分钟</div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
- div.innerHTML = html;
|
|
|
- let tag = new THREE.CSS2DObject(div);
|
|
|
- child.add(tag);
|
|
|
- div.style.pointerEvents = 'auto';
|
|
|
-
|
|
|
- // div.addEventListener('click', function (event) {
|
|
|
- // document.getElementById('transitTitPop').innerText = "true"
|
|
|
- // });
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+ /* if (child.material && child.material.name) {
|
|
|
+ child.frustumCulled = false;
|
|
|
+ child.castShadow = true;
|
|
|
+ child.receiveShadow = true;
|
|
|
+ child.material.emissive = child.material.color;
|
|
|
+ child.material.emissiveMap = child.material.map;
|
|
|
+ child.material.transparent = true;
|
|
|
+ child.material.emissiveIntensity = 0.8;
|
|
|
+ if (child.material.name == 'ckck') {
|
|
|
+ const div = document.createElement('div');
|
|
|
+ div.id = child.uuid;
|
|
|
+ let html = '';
|
|
|
+ html += '<div style="font-size: 12px; width: 80px; text-align: center;position: relative;">';
|
|
|
+ html += '<div class="building-text" style="background: #18A65A; margin-bottom: -2px;position: absolute;top:170px">';
|
|
|
+ html += '<span style="text-align: left;">停车场</span>';
|
|
|
+ html += '<span style="font-size: 10px; text-align: left;">空余车位：-</span>';
|
|
|
+ html += '<span style="font-size: 10px; text-align: left;">空余充电桩：-</span>';
|
|
|
+ html += '</div>';
|
|
|
+ html += '</div>';
|
|
|
+ div.innerHTML = html;
|
|
|
+ let tag = new THREE.CSS2DObject(div);
|
|
|
+ child.add(tag);
|
|
|
+ }
|
|
|
+ if (child.material.name == 'gongjiaochezhan') {
|
|
|
+
|
|
|
+ const div = document.createElement('div');
|
|
|
+ div.id = child.uuid;
|
|
|
+ let html = `
|
|
|
+ <div class="building-box-chekuchukou">
|
|
|
+ <div class="chekuchukou-tit"><span>公交车站</span><span id="busDetails">详情</span></div>
|
|
|
+ <div>144路：即将到达</div>
|
|
|
+ <div>180路：车已到站</div>
|
|
|
+ <div>188路：9分钟</div>
|
|
|
+ <div>345路：2分钟</div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ div.innerHTML = html;
|
|
|
+ let tag = new THREE.CSS2DObject(div);
|
|
|
+ child.add(tag);
|
|
|
+ div.style.pointerEvents = 'auto';
|
|
|
+
|
|
|
+ // div.addEventListener('click', function (event) {
|
|
|
+ // document.getElementById('transitTitPop').innerText = "true"
|
|
|
+ // });
|
|
|
+
|
|
|
+ }
|
|
|
+ } */
|
|
|
if (child.isMesh) {
|
|
|
child.frustumCulled = false;
|
|
|
child.castShadow = true;
|
|
|
@@ -610,13 +618,13 @@
|
|
|
html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
|
|
|
html += '</div>';
|
|
|
html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 110px;"></div>';
|
|
|
- html += `<div style="font-size: 12px;width: 100px;top: 326px;left: 58px;position: absolute;display: flex;flex-direction: column;align-items: flex-start;color: #fff;">
|
|
|
- <div class="building-text" style="background: #18A65A; margin-bottom: -2px;">
|
|
|
- <span style="text-align: left;">停车场</span>
|
|
|
- <span style="font-size: 10px; text-align: left;">空余车位：-</span>
|
|
|
- <span style="font-size: 10px; text-align: left;">空余充电桩：-</span>
|
|
|
- </div>
|
|
|
- </div>`
|
|
|
+ // html += `<div style="font-size: 12px;width: 100px;top: 326px;left: 58px;position: absolute;display: flex;flex-direction: column;align-items: flex-start;color: #fff;">
|
|
|
+ // <div class="building-text" style="background: #18A65A; margin-bottom: -2px;">
|
|
|
+ // <span style="text-align: left;">停车场</span>
|
|
|
+ // <span style="font-size: 10px; text-align: left;">空余车位：-</span>
|
|
|
+ // <span style="font-size: 10px; text-align: left;">空余充电桩：-</span>
|
|
|
+ // </div>
|
|
|
+ // </div>`
|
|
|
// html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 326px;left: 58px;"></div>';
|
|
|
div.innerHTML = html;
|
|
|
let tag = new THREE.CSS2DObject(div);
|
|
|
@@ -688,22 +696,22 @@
|
|
|
let tag = new THREE.CSS2DObject(div);
|
|
|
child.add(tag);
|
|
|
}
|
|
|
- if (child.name == 'chekuchukou') {
|
|
|
- // console.log(child, 'child', child.name);
|
|
|
- const div = document.createElement('div');
|
|
|
- div.id = child.uuid;
|
|
|
- let html = '';
|
|
|
- html += '<div style="font-size: 12px; width: 80px; text-align: center;">';
|
|
|
- html += '<div class="building-text" style="background: #18A65A; margin-bottom: -2px;">';
|
|
|
- html += '<span style="text-align: left;">停车场</span>';
|
|
|
- html += '<span style="font-size: 10px; text-align: left;">空余车位：-</span>';
|
|
|
- html += '<span style="font-size: 10px; text-align: left;">空余充电桩：-</span>';
|
|
|
- html += '</div>';
|
|
|
- html += '</div>';
|
|
|
- div.innerHTML = html;
|
|
|
- let tag = new THREE.CSS2DObject(div);
|
|
|
- child.add(tag);
|
|
|
- }
|
|
|
+ // if (child.name == 'chekuchukou') {
|
|
|
+ // // console.log(child, 'child', child.name);
|
|
|
+ // const div = document.createElement('div');
|
|
|
+ // div.id = child.uuid;
|
|
|
+ // let html = '';
|
|
|
+ // html += '<div style="font-size: 12px; width: 80px; text-align: center;">';
|
|
|
+ // html += '<div class="building-text" style="background: #18A65A; margin-bottom: -2px;">';
|
|
|
+ // html += '<span style="text-align: left;">停车场</span>';
|
|
|
+ // html += '<span style="font-size: 10px; text-align: left;">空余车位：-</span>';
|
|
|
+ // html += '<span style="font-size: 10px; text-align: left;">空余充电桩：-</span>';
|
|
|
+ // html += '</div>';
|
|
|
+ // html += '</div>';
|
|
|
+ // div.innerHTML = html;
|
|
|
+ // let tag = new THREE.CSS2DObject(div);
|
|
|
+ // child.add(tag);
|
|
|
+ // }
|
|
|
}
|
|
|
});
|
|
|
scene.add(obj.scene);
|
|
|
@@ -718,11 +726,11 @@
|
|
|
|
|
|
document.getElementById('loading').style.display = 'none';
|
|
|
// 公交详情加点事件
|
|
|
- setTimeout(() => {
|
|
|
- document.getElementById('busDetails').addEventListener('click', function (event) {
|
|
|
- document.getElementById('transitTitPop').innerText = "true"
|
|
|
- });
|
|
|
- }, 300)
|
|
|
+ /* setTimeout(() => {
|
|
|
+ document.getElementById('busDetails').addEventListener('click', function (event) {
|
|
|
+ document.getElementById('transitTitPop').innerText = "true"
|
|
|
+ });
|
|
|
+ }, 300) */
|
|
|
|
|
|
render();
|
|
|
}, function (xhr) {
|
|
|
@@ -758,24 +766,26 @@
|
|
|
districtLevelTitle: '',
|
|
|
districtLevelNum: -1,
|
|
|
districtLevelList: [
|
|
|
- {
|
|
|
- name: '重庆市南岸区政务服务中心（江南新城中心）',
|
|
|
- tel: '023-62980263',
|
|
|
- address: '重庆市南岸区铜元局街道南坪西路36号（上海城嘉发跨贸中心 二楼）南岸区'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '重庆市南岸区政务服务中心（江南新城中心）',
|
|
|
- tel: '023-62980263',
|
|
|
- address: '重庆市南岸区铜元局街道南坪西路36号（上海城嘉发跨贸中心 二楼）南岸区'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '重庆市南岸区政务服务中心（江南新城中心）',
|
|
|
- tel: '023-62980263',
|
|
|
- address: '重庆市南岸区铜元局街道南坪西路36号（上海城嘉发跨贸中心 二楼）南岸区'
|
|
|
- }
|
|
|
+ // {
|
|
|
+ // name: '重庆市南岸区政务服务中心（江南新城中心）',
|
|
|
+ // tel: '023-62980263',
|
|
|
+ // address: '重庆市南岸区铜元局街道南坪西路36号（上海城嘉发跨贸中心 二楼）南岸区'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: '重庆市南岸区政务服务中心（江南新城中心）',
|
|
|
+ // tel: '023-62980263',
|
|
|
+ // address: '重庆市南岸区铜元局街道南坪西路36号（上海城嘉发跨贸中心 二楼）南岸区'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: '重庆市南岸区政务服务中心（江南新城中心）',
|
|
|
+ // tel: '023-62980263',
|
|
|
+ // address: '重庆市南岸区铜元局街道南坪西路36号（上海城嘉发跨贸中心 二楼）南岸区'
|
|
|
+ // }
|
|
|
],
|
|
|
+ districtLevelLists: [],
|
|
|
districtLevelTotal: 0,
|
|
|
districtLevelListHeight: "60%",
|
|
|
+ current: 0,
|
|
|
/* 区行政服务中心网点分布 end*/
|
|
|
/* 公交详情start */
|
|
|
transitPopShow: false,
|
|
|
@@ -855,7 +865,6 @@
|
|
|
methods: {
|
|
|
updateTime() {
|
|
|
const now = new Date();
|
|
|
-
|
|
|
const year = String(now.getFullYear()).padStart(4, '0');
|
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
|
const day = String(now.getDate()).padStart(2, '0');
|
|
|
@@ -893,12 +902,33 @@
|
|
|
},
|
|
|
// 区行政服务中心网点分布点击事件
|
|
|
showDistrictLevel(num) {
|
|
|
- this.districtLevelShow = true
|
|
|
- this.districtLevelNum = num
|
|
|
- this.districtLevelTitle = { 1: '区级中心', 2: '镇街便民服务中心', 3: '便民服务站', 4: '分中心' }[num]
|
|
|
- this.districtLevelTotal = { 1: 3, 2: 15, 3: 153, 4: 2 }[num]
|
|
|
- this.getDistrictLevelListHeight()
|
|
|
- window.addEventListener("resize", this.getDistrictLevelListHeight);
|
|
|
+ let _this = this
|
|
|
+ if (num != '1' && num != '4') {
|
|
|
+ this.districtLevelShow = true
|
|
|
+ this.districtLevelNum = num
|
|
|
+ this.districtLevelTitle = { 1: '区级中心', 2: '镇街便民服务中心', 3: '便民服务站', 4: '分中心' }[num]
|
|
|
+ // this.districtLevelTotal = { 1: 3, 2: 15, 3: 153, 4: 2 }[num]
|
|
|
+ this.getDistrictLevelListHeight()
|
|
|
+ window.addEventListener("resize", this.getDistrictLevelListHeight);
|
|
|
+ $.ajax({
|
|
|
+ url: `https://www.cqna.gov.cn/data/mapdata/getMapdataToType?id=${num == 2 ? 26 : 27}&matchingValue=`,
|
|
|
+ type: "get",
|
|
|
+ dataType: "json",
|
|
|
+ async: false,
|
|
|
+ success: function (data) {
|
|
|
+ _this.current = 1
|
|
|
+ _this.districtLevelTotal = data.data.length
|
|
|
+ _this.districtLevelList = data.data
|
|
|
+ _this.districtLevelLists = _this.districtLevelList.slice(0, 10)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 分页事件
|
|
|
+ currentChangeFun(num) {
|
|
|
+ this.current = num
|
|
|
+ let numstar = num - 1, endNum = num
|
|
|
+ this.districtLevelLists = this.districtLevelList.slice(10 * numstar, 10 * num)
|
|
|
},
|
|
|
// 关闭弹窗
|
|
|
clearDistrictLevel() {
|
黄秋景