|
|
@@ -3,6 +3,13 @@
|
|
|
<!-- 1. 顶部标题 -->
|
|
|
<view class="header">
|
|
|
<text class="title">{{title}}</text>
|
|
|
+ <!-- 新增地图按钮 -->
|
|
|
+ <image
|
|
|
+ class="map-btn"
|
|
|
+ src="/static/img/tab.png"
|
|
|
+ mode="aspectFit"
|
|
|
+ @tap="goMap"
|
|
|
+ />
|
|
|
</view>
|
|
|
|
|
|
<!-- 2. 轮播图 -->
|
|
|
@@ -30,6 +37,7 @@
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from 'echarts'
|
|
|
+import loginService from "@/api/auth/loginService";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
@@ -41,6 +49,8 @@ export default {
|
|
|
"https://ydwqfw.com.cn/yd_qycpfbH5/bg2.jpg",
|
|
|
"https://ydwqfw.com.cn/yd_qycpfbH5/bg3.jpg",
|
|
|
"https://ydwqfw.com.cn/yd_qycpfbH5/bg4.jpg"],
|
|
|
+ parkList2: [],
|
|
|
+ buildingMap: new Map() // 新增
|
|
|
}
|
|
|
},
|
|
|
async onReady() {
|
|
|
@@ -65,9 +75,69 @@ export default {
|
|
|
width : uni.getSystemInfoSync().windowWidth,
|
|
|
height: uni.getSystemInfoSync().windowHeight * 0.6 // 地图占屏幕 50%
|
|
|
})
|
|
|
- this.renderMap()
|
|
|
+ this.getList()
|
|
|
},
|
|
|
+
|
|
|
methods: {
|
|
|
+ getList() {
|
|
|
+ loginService.getParkList().then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+
|
|
|
+ let alls = 0
|
|
|
+ data.forEach(item => { alls += item.building_cnt })
|
|
|
+
|
|
|
+ for(var i = 0; i < data.length; i++){
|
|
|
+ alls=alls+data[i].building_cnt;
|
|
|
+
|
|
|
+ if(data[i].label.indexOf("高新区") != -1){
|
|
|
+ data[i].label='盐龙'
|
|
|
+ }
|
|
|
+ // if(data[i].label.indexOf("大冈") != -1){
|
|
|
+ // data[i].label='大冈镇'
|
|
|
+ // }else if(data[i].label.indexOf("大纵湖") != -1){
|
|
|
+ // data[i].label='大纵湖镇'
|
|
|
+ // }else if(data[i].label.indexOf("学富") != -1){
|
|
|
+ // data[i].label='学富镇'
|
|
|
+ // }else if(data[i].label.indexOf("尚庄") != -1){
|
|
|
+ // data[i].label='尚庄镇'
|
|
|
+ // }else if(data[i].label.indexOf("张庄") != -1){
|
|
|
+ // data[i].label='张庄镇'
|
|
|
+ // }else if(data[i].label.indexOf("楼王") != -1){
|
|
|
+ // data[i].label='楼王镇'
|
|
|
+ // }else if(data[i].label.indexOf("潘黄") != -1){
|
|
|
+ // data[i].label='潘黄街道'
|
|
|
+ // }else if(data[i].label.indexOf("盐渎") != -1){
|
|
|
+ // data[i].label='盐渎街道'
|
|
|
+ // }else if(data[i].label.indexOf("秦南") != -1){
|
|
|
+ // data[i].label='秦南镇'
|
|
|
+ // }else if(data[i].label.indexOf("郭猛") != -1){
|
|
|
+ // data[i].label='郭猛镇'
|
|
|
+ // }else if(data[i].label.indexOf("高新区") != -1){
|
|
|
+ // data[i].label='盐龙街道'
|
|
|
+ // }else if(data[i].label.indexOf("龙冈") != -1){
|
|
|
+ // data[i].label='龙冈镇'
|
|
|
+ // }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.allcount = alls
|
|
|
+ this.parkList2 = data
|
|
|
+
|
|
|
+ /* 构造 name -> building_cnt 映射表 */
|
|
|
+ this.buildingMap = new Map(data.map(item => [item.label, item.building_cnt]))
|
|
|
+
|
|
|
+ /* 插入“全部”汇总行 */
|
|
|
+ this.parkList2.unshift({ total_area: 0, total_idle_area: 0, building_cnt: alls, label: '全部' })
|
|
|
+
|
|
|
+ this.renderMap()
|
|
|
+
|
|
|
+ }).catch(e => {
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
loadGeoJSON() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
uni.request({
|
|
|
@@ -85,6 +155,11 @@ export default {
|
|
|
url: `/pages/factoryBuildings/factoryBuildingsList?parkid=${parkName}`
|
|
|
})
|
|
|
},
|
|
|
+ goMap() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/index/factoryindex` // 换成你的地图页面路径
|
|
|
+ })
|
|
|
+ },
|
|
|
onTouchEnd(e) {
|
|
|
|
|
|
const touch = e.changedTouches[0]
|
|
|
@@ -121,6 +196,16 @@ export default {
|
|
|
},
|
|
|
|
|
|
renderMap() {
|
|
|
+ const mapData = []
|
|
|
+ /* 如果你知道所有镇名,可以写死;否则把 geoJSON 里的名字读出来即可 */
|
|
|
+ const townNames = ['台创园', '大冈镇', '大纵湖镇', '学富镇', '尚庄镇', '张庄街道', '楼王镇','潘黄街道','盐渎街道', '秦南镇', '郭猛镇', '盐龙街道', '龙冈镇']
|
|
|
+ townNames.forEach(name => {
|
|
|
+ mapData.push({
|
|
|
+ name,
|
|
|
+ value: this.buildingMap.get(name) || 0 // 没有就按 0 处理
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
const option = {
|
|
|
geo: [{
|
|
|
map: 'yanduqu',
|
|
|
@@ -174,9 +259,15 @@ export default {
|
|
|
color: '#fff', // 文字颜色
|
|
|
fontSize: 12, // 字号
|
|
|
fontWeight: 'bold',
|
|
|
+ /* 关键:让标签显示两行 */
|
|
|
+ formatter: params => {
|
|
|
+ const cnt = this.buildingMap.get(params.name) || 0
|
|
|
+ return `${params.name} ${cnt} 处`
|
|
|
+ //return `${params.name}`
|
|
|
+ }
|
|
|
}
|
|
|
}],
|
|
|
- series: [{ type: 'map', geoIndex: 0, data: [] }]
|
|
|
+ series: [{ type: 'map', geoIndex: 0, data: mapData },]
|
|
|
}
|
|
|
this.chart.setOption(option)
|
|
|
|
|
|
@@ -201,6 +292,7 @@ export default {
|
|
|
|
|
|
/* 顶部标题 */
|
|
|
.header {
|
|
|
+ position: relative; /* 让子元素绝对定位参照它 */
|
|
|
padding: 20rpx 0;
|
|
|
text-align: center;
|
|
|
background: #fff;
|
|
|
@@ -210,6 +302,15 @@ export default {
|
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
|
}
|
|
|
+/* 右上角地图按钮 */
|
|
|
+.map-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+}
|
|
|
|
|
|
/* 轮播图 */
|
|
|
.swiper {
|