摘要：
˂ui buttonv if=“！
<template>
<ui-container v-loading="sysLoading" :element-loading-text="syncLoadingText">
<ui-main>
<div class="row-wrap">
<ui-row :gutter="24">
<ui-col :span="18">
<ui-card body-style="padding: 0px;">
<!--使用地图-->
<div id="map-container"></div>
</ui-card>
</ui-col>
<ui-col :span="6">
<ui-button v-if="!showAllPro" @click="backShow"><i class="el-icon-arrow-left"></i>返回查看总览</ui-button>
<ui-card v-if="showTable" v-loading="projectLoading" body-style="padding: 0 10px 10px;">
<div class="head-title">
<span>{{proTitle}}</span>
</div>
<ui-table
stripe border :fit="true" :data="projectData" highlight-current-row>
<ui-table-column prop="projectName" label="项目名称" align="center"></ui-table-column>
<ui-table-column prop="contractAmount" label="合同金额" align="center"></ui-table-column>
<ui-table-column label="详情" align="center">
<template slot-scope="scope">
<ui-button size="mini" type="text" @click="modal('edit', scope.row)">查看</ui-button>
</template>
</ui-table-column>
</ui-table>
</ui-card>
<ui-card v-if="showAllPro" v-loading="allProjectLoading" body-style="padding: 0 10px 10px;">
<div class="head-title">
<span>所有省份项目总览</span>
</div>
<ui-table
stripe border :fit="true" :data="allProjectList" highlight-current-row>
<ui-table-column prop="projectAddress" label="省份" align="center"></ui-table-column>
<ui-table-column prop="totalNumber" label="总项目数" align="center"></ui-table-column>
<ui-table-column label="详情" align="center">
<template slot-scope="scope">
<ui-button size="mini" type="text" @click="showPro(scope.row)">查看</ui-button>
</template>
</ui-table-column>
</ui-table>
</ui-card>
<project-detail v-if="showProject" @resolve="modal" :form="detailData" :title="title"></project-detail>
</ui-col>
</ui-row>
</div>
</ui-main>
</ui-container>
</template>
<script>
import AMap from 'AMap'
import project from '@/api/project'
import {formatTime} from '@/helper/filters'
import projectDetail from './projectDetail'
var map
var districtExplorer
var locMarker
var adcode
var currentAreaNode = null
export default {
components: { projectDetail },
name: 'home',
props: [],
methods: {
// 返回总览-switchAreaNode(100000)-全国的地址代码
backShow() {
districtExplorer.clearFeaturePolygons()
this.switchAreaNode(100000)
map.remove(locMarker)
this.showAllPro = true
this.showTable = false
},
showPro(row) {
this.showAllPro = false
this.getProject(row.projectAddress)
adcode = row.projectNumber ? row.projectNumber.slice(0,2) + '0000' : ''
this.switchAreaNode(adcode)
},
loadAreaNode(adcode, callback) {
districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
if (error) {
if (callback) {
callback(error)
}
console.error(error)
return
}
let props = areaNode.getProps()
if (callback) {
callback(null, areaNode)
}
})
},
// 渲染地区
// 渲染地区
renderAreaPolygons(areaNode) {
let fillColor = null
if (areaNode === '100000') {
fillColor = this.colors[0]
} else {
fillColor = this.colors[1]
}
//更新地图视野--会放大
// map.setBounds(areaNode.getBounds(), null, null, true)
//清除已有的绘制内容
districtExplorer.clearFeaturePolygons()
//绘制父区域（也就是当前点击的省份区域）
districtExplorer.renderParentFeature(areaNode, {
cursor: 'default',
bubble: true,
strokeColor: 'black', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: fillColor, //填充色
fillOpacity: 0.35, //填充透明度
})
},
// 选中的节点渲染
switchAreaNode(adcode, callback) {
let _this = this
if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
return
}
this.loadAreaNode(adcode, function(error, areaNode) {
if (error) {
if (callback) {
callback(error)
}
return
}
currentAreaNode = window.currentAreaNode = areaNode
//设置当前使用的定位用节点
districtExplorer.setAreaNodesForLocating([currentAreaNode])
_this.refreshAreaNode(areaNode)
if (callback) {
callback(null, areaNode)
}
})
},
// 重新刷新地图页面节点
refreshAreaNode(areaNode) {
districtExplorer.setHoverFeature(null)
this.renderAreaPolygons(areaNode)
},
// 项目总揽
getAllProject() {
this.allProjectLoading = true
project.getAllProject().then(r => {
this.allProjectList = r.data.data
this.allProjectLoading = false
})
},
// 根据城市获取项目信息
getProject(params) {
this.showAllPro = false
if (params) {
this.proTitle = params + '-项目基本信息'
}
this.projectLoading = true
project.getProject(params).then(res => {
this.projectLoading = false
this.showTable = true
res.data.data.forEach(i => {
if (i.projectAddress) {
i['_projectAddress'] = JSON.parse(i.projectAddress).adname.split(' ')[0]
} else {
i['_projectAddress'] = '--'
}
})
this.projectData = res.data.data
}).catch(r => {
this.projectLoading = false
})
},
modal(type, data) {
switch (type) {
case 'edit':
this.showProject = true
if (data.projectName) {
this.title = data.projectName + '-详情'
} else {
this.title = '项目详情'
}
this.detailData = data
break
case 'dismiss':
this.showProject = false
break
case 'close':
this.showProject = false
break
}
},
formatTime(val) {
return formatTime(val)
},
listenMouseEvents() {
let _this = this
var isLocating = false
map.on('click', function(e) {
if (isLocating) {
return
}
isLocating = true
districtExplorer.locatePosition(e.lnglat, function(err, features) {
_this.lnglat = e.lnglat
console.log(e.lnglat)
isLocating = false
if (err) {
console.error(err)
return
}
_this.renderFeatures(features)
locMarker.setPosition(e.lnglat)
locMarker.setMap(map)
}, {
levelLimit: 2
})
})
},
// 在地图的上选择城市渲染
renderCountry(setBounds) {
let _this = this
districtExplorer.loadCountryNode(function(err, countryNode) {
if (setBounds) {
map.setBounds(countryNode.getBounds())
}
districtExplorer.renderParentFeature(countryNode, {
cursor: 'default',
bubble: true,
strokeColor: 'black', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线宽
fillColor: _this.colors[0], //填充色
fillOpacity: 0.35, //填充透明度
})
})
},
renderFeatures(features) {
this.provinceName = features[1].properties.name
this.getProject(this.provinceName)
//清除已有的绘制内容
districtExplorer.clearFeaturePolygons()
if (!features.length) {
renderCountry(false)
return
}
for (var i = 0, len = features.length; i < len; i++) {
let strokeColor = this.colors[i % this.colors.length]
let fillColor = strokeColor
districtExplorer.renderFeature(features[i], {
cursor: 'default',
bubble: true,
strokeColor: strokeColor, //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: fillColor, //填充色
fillOpacity: 0.35, //填充透明度
})
}
}
},
mounted() {
this.getAllProject()
map = new AMap.Map('map-container', {
resizeEnable: true,
zoom: 9
})
let _this = this
AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
districtExplorer = new DistrictExplorer({
map: map
})
locMarker = new AMap.Marker()
_this.listenMouseEvents()
_this.renderCountry(true)
})
},
data() {
return {
projectData: [],
allProjectList: [],
allProjectLoading: false,
detailData: null,
lnglat: null,
hackReset: true,
showAllPro: true,
showTable: false,
showProject: false,
sysLoading: false,
projectLoading: false,
syncLoadingText: null,
colors: ["#ff9900", "#109618", "#3b3eac"],
proTitle: '选择省份查看项目',
currentAreaNode: null,
provinceName: null
}
}
}
</script>
<style scoped lang="scss">
.head-title{
font-weight: 700;
color: #D0021B;
padding: 10px 0;
border-bottom: 1px solid #efecec;
}
.side-section{
border-bottom: 1px dashed rgb(193, 193, 193);
.side-time{
margin: 5px 0;
font-size: 12px;
color: gray;
}
.side-content{
color: #5E6977;
margin-top: 10px;
}
.side-img{
margin-top: 10px;
.item-cover{
object-fit: cover;
height: 80px;
58px;
}
}
}
.map-content{
height: 500px;
}
.swiper-container{
position: absolute;
background-color: #fff;
box-shadow: 0px 6px 10px rgba(208, 2, 27, .5);
left: 20%;
40%;
height: 40px;
line-height: 40px;
text-align: center;
p{
display: block;//块状显示
overflow: hidden;//隐藏文字
text-overflow: ellipsis;//显示...
white-space: nowrap; //不换行
100%;
}
}
.form-content{
padding: 0 0 0 20px;
}
#tipinput{
position: absolute;
top: 30px;
right: 30px;
}
#panel {
position: absolute;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 80px;
right: 10px;
280px;
z-index: 99;
}
.back_btn {
margin: 0 0px 10px;
cursor: pointer
}
</style>