<template>
|
<div>
|
<el-container>
|
<!--左上角数据 -->
|
<div class="total-main f-r f-r-top">
|
<img src="@/assets/images/map/close-total.png" alt="关闭" v-if="totalShow" @click="totalShow = false" class="open-icon">
|
<img src="@/assets/images/map/open-total.png" alt="展开" v-if="!totalShow" @click="totalShow = true" class="open-icon">
|
<transition name="el-zoom-in-left">
|
<div class="total-box" v-show="totalShow">
|
<div class="font-18 color-333 font-bold">当前范围：{{ cityName }}</div>
|
<div class="f-r total-list">
|
<div class="total-item f-r f-r-top" v-for="(t,index) in totalList" :key="index">
|
<img :src="typeIcon(t.type)" class="t-icon"/>
|
<div>
|
<div class="font-13 color-333">{{t.name}}</div>
|
<div class="font-20 color-333 font-bold">{{t.num}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</transition>
|
</div>
|
<div style="position: relative; z-index: 0; width: 100%; height: 100%">
|
<div id="home"></div>
|
</div>
|
<!-- 右侧列表 -->
|
<div class="toggle-box" :class="projectShow ? 'toggle-box-right' : ''" @click="showProject">
|
<i style="font-size: 16px" class="el-icon-arrow-left"/>
|
</div>
|
<project-lists v-if="projectShow" @close="projectShow=false"></project-lists>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
import projectLists from "@/views/home/projectList";
|
|
export default {
|
name: "index",
|
components: {projectLists},
|
data() {
|
return {
|
projectShow: false,
|
loading: false,
|
totalShow: false, // 是否显示左上角总计
|
map: null,
|
windowHeight: document.documentElement.clientHeight, // 实时屏幕高度
|
cityName: "郑州市",
|
centerLatLng: '',
|
zoom: 8,
|
cur: null, // 当期选中地区下标
|
infoWindow: {
|
show: false,
|
data: "", // 弹窗信息
|
img: '', // 弹窗图标
|
lat: '',
|
lng: '',
|
},
|
markerArr:[],
|
totalList: [
|
{id: 1, type: 1, num: 6,name:'综合业务楼'},
|
{id: 2, type: 2, num: 7,name:'省记中心'},
|
{id: 3, type: 3, num: 8,name:'市处理中心'},
|
{id: 4, type: 4, num: 9,name:'县仓配中心'},
|
{id: 5, type: 5, num: 10,name:'购置'},
|
{id: 6, type: 6, num: 11,name:'改建'},
|
{id: 7, type: 7, num: 12,name:'信息化'},
|
{id: 8, type: 8, num: 13,name:'工艺改造'},
|
{id: 9, type: 9, num: 14,name:'其他'},
|
{id: 10, type: 10, num: 15,name:'三农'},
|
{id: 11, type: 11, num: 16,name:'三级物流体系'},
|
],
|
projectList: [], // 项目统计列表
|
cityList: [] // 城市列表
|
}
|
},
|
mounted() {
|
setTimeout(() => {
|
try {
|
this.initMap();// 渲染地图
|
} catch (e) {
|
console.log(e)
|
}
|
}, 50);
|
},
|
methods: {
|
initMap() {
|
var center = new TMap.LatLng(39.984120, 116.307484)
|
//定义map变量，调用 TMap.Map() 构造函数创建地图
|
this.map = new TMap.Map(document.getElementById('home'), {
|
center: center,//设置地图中心点坐标
|
zoom: this.zoom, //设置地图缩放级别
|
});
|
this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);//移除腾讯地图比例尺
|
this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);//移除腾讯地图旋转控件
|
},
|
initMarkerObj() {
|
var that = this
|
this.marker = new TMap.MultiMarker({
|
id: 'marker_s',
|
map: this.map, // 显示Marker图层的底图
|
styles: {
|
markerStyle: new TMap.MarkerStyle({ // markerStyle是呼吸点样式名称
|
// 点标注的相关样式
|
width: 78, // 宽度
|
height: 100, // 高度
|
anchor: { x: 39, y: 50 }, // 标注点图片的锚点位置
|
src: require("@/assets/images/map/icon-gj.png"), // 标注点图片url或base64地址
|
color: '#fff', // 标注点文本颜色
|
size: 18, // 标注点文本文字大小
|
direction: 'top', // 标注点文本文字相对于标注点图片的方位
|
offset: { x: 0, y: 10 }, // 标注点文本文字基于direction方位的偏移属性
|
strokeColor: '#fff', // 标注点文本描边颜色
|
strokeWidth: 0.5, // 标注点文本描边宽度
|
})
|
},
|
enableCollision: true, // 开启碰撞
|
geometries: that.markerArr,//位点数组
|
})
|
},
|
showProject(){
|
this.projectShow = !this.projectShow
|
},
|
// 左上角展示不同图标
|
typeIcon(type) {
|
// type 1综合业务楼 2 省记中心 3 市处理中心 4县仓配中心 5购置 6改建 7信息化 8 工艺改造 9其他 10三农 11 默认
|
let src = require('@/assets/images/map/icon-other.png')
|
switch (type) {
|
case 1:
|
src = require("@/assets/images/map/icon-zhywl.png")
|
break
|
case 2:
|
src = require("@/assets/images/map/icon-sjzx.png")
|
break
|
case 3:
|
src = require("@/assets/images/map/icon-sclzx.png")
|
break
|
case 4:
|
src = require("@/assets/images/map/icon-xcpzx.png")
|
break
|
case 5:
|
src = require("@/assets/images/map/icon-gz.png")
|
break
|
case 6:
|
src = require("@/assets/images/map/icon-gj.png")
|
break
|
case 7:
|
src = require("@/assets/images/map/icon-xxh.png")
|
break
|
case 8:
|
src = require("@/assets/images/map/icon-gygz.png")
|
break
|
case 9:
|
src = require("@/assets/images/map/icon-qt.png")
|
break
|
case 10:
|
src = require("@/assets/images/map/icon-sn.png")
|
break
|
default:
|
src = require("@/assets/images/map/icon-other.png")
|
break
|
}
|
return src
|
},
|
// 随机颜色
|
ranDombg() {
|
var r = Math.floor((Math.random() + 0.3) * 256);
|
var g = Math.floor((Math.random() + 0.3) * 256);
|
var b = Math.floor((Math.random() + 0.3) * 256);
|
return "rgb(" + r + "," + g + "," + b + ")";
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.total-main {
|
position: absolute;
|
top: 0;
|
left: 0;
|
padding: 15px;
|
z-index: 10;
|
}
|
.total-box{
|
width: 530px;
|
margin-left: 15px;
|
background-color: #FFFFFF;
|
border-radius: 8px;
|
padding: 15px 30px;
|
}
|
.total-list {
|
margin-top: 5px;
|
flex-wrap: wrap;
|
}
|
|
.total-item {
|
width: 25%;
|
margin:10px 0;
|
}
|
|
.t-icon {
|
width: 28px;
|
height: 28px;
|
margin-right: 8px;
|
}
|
.open-icon{
|
cursor: pointer;
|
}
|
.font-20{
|
font-size: 20px;
|
}
|
.toggle-box {
|
cursor: pointer;
|
width: 23px;
|
height: 97px;
|
border-radius: 31px 0 0 31px;
|
border: 1px solid #eeeeee;
|
box-sizing: border-box;
|
background: #0D997C;
|
position: absolute;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24px;
|
top: 50%;
|
right: 0;
|
z-index: 2;
|
transform: rotate(0);
|
transform: translateY(-50%);
|
i {
|
color: #fff;
|
}
|
}
|
.toggle-box-right {
|
right: 400px;
|
i {
|
transform: rotate(180deg);
|
transition-delay: 0.2s;
|
}
|
}
|
</style>
|
