535 lines
17 KiB
Vue
535 lines
17 KiB
Vue
<template>
|
||
<div class="centerTopPage">
|
||
<div class="top-btns">
|
||
<div class="btn" :class="{ active: btnIndex == 1 }" @click="">装备总数</div>
|
||
</div>
|
||
<div class="store-equip">仓库装备：<span class="cont">{{ warehouseEquipmentNum }}</span> 台</div>
|
||
<div class="out-city-equip">{{ outCityEquipmentNum }}</div>
|
||
<div class="mapBox">
|
||
<div id="mapEcharts"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import * as echarts from 'echarts'
|
||
import { mapDataApi } from "@/api/screen/cityScreen";
|
||
import anhui from '@/utils/mapJson/anhui.json'
|
||
import hefeiJson from '@/utils/mapJson/hefei.json'
|
||
import wuhuJson from '@/utils/mapJson/wuhu.json'
|
||
import bengbuJson from '@/utils/mapJson/bengbu.json'
|
||
import maanshanJson from '@/utils/mapJson/maanshan.json'
|
||
import huaibeiJson from '@/utils/mapJson/huaibei.json'
|
||
import huainanJson from '@/utils/mapJson/huainan.json'
|
||
import tonglingJson from '@/utils/mapJson/tongling.json'
|
||
import anqingJson from '@/utils/mapJson/anqing.json'
|
||
import huangshanJson from '@/utils/mapJson/huangshan.json'
|
||
import chuzhouJson from '@/utils/mapJson/chuzhou.json'
|
||
import fuyangJson from '@/utils/mapJson/fuyang.json'
|
||
import suzhouJson from '@/utils/mapJson/suzhou.json'
|
||
import liuanJson from '@/utils/mapJson/liuan.json'
|
||
import bozhouJson from '@/utils/mapJson/bozhou.json'
|
||
import chizhouJson from '@/utils/mapJson/chizhou.json'
|
||
import xuanchenJson from '@/utils/mapJson/xuanchen.json'
|
||
|
||
export default {
|
||
name: 'centerTopPage',
|
||
props: {
|
||
sendHeight: {
|
||
type: String,
|
||
default: '100%',
|
||
},
|
||
sendMapColor: {
|
||
type: String,
|
||
default: '#17A1F1',
|
||
},
|
||
sendGeo: {
|
||
type: Array,
|
||
default: null,
|
||
},
|
||
sendNumber: {
|
||
type: Number,
|
||
},
|
||
showLine: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
sendProjSpin: {
|
||
type: Array | Object,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
type: 1,
|
||
zoom: 1,
|
||
zoom2: 1,
|
||
mapEcharts: null,
|
||
mapEcharts2: null,
|
||
mapJson: null,
|
||
pointArea: this.sendProjSpin,
|
||
pointAll: [],
|
||
companyList: [],
|
||
companyAreaList: [],
|
||
isCity: 0,
|
||
cityCount: [],
|
||
gozoom: 1,
|
||
geoVal: [],
|
||
cityName:'合肥',
|
||
btnIndex: 1,
|
||
warehouseEquipmentNum: null, // 仓库装备数
|
||
outCityEquipmentNum: null, // 市外装备数
|
||
}
|
||
},
|
||
created() {
|
||
},
|
||
mounted() {
|
||
console.log('🚀 ~ mounted ~ .cityName:', this.$router.currentRoute.query.cityName)
|
||
this.cityName = this.$router.currentRoute.query.cityName || "合肥"
|
||
this.getCityJson()
|
||
},
|
||
methods: {
|
||
getCityJson(){
|
||
if(this.cityName.indexOf("合肥")>-1){
|
||
this.mapJson = hefeiJson;
|
||
}else if(this.cityName.indexOf("芜湖")>-1){
|
||
this.mapJson = wuhuJson
|
||
}else if(this.cityName.indexOf("蚌埠")>-1){
|
||
this.mapJson = bengbuJson
|
||
}else if(this.cityName.indexOf("淮南")>-1){
|
||
this.mapJson = huainanJson
|
||
}else if(this.cityName.indexOf("马鞍山")>-1){
|
||
this.mapJson = maanshanJson
|
||
}else if(this.cityName.indexOf("淮北")>-1){
|
||
this.mapJson = huaibeiJson
|
||
}else if(this.cityName.indexOf("铜陵")>-1){
|
||
this.mapJson = tonglingJson
|
||
}else if(this.cityName.indexOf("安庆")>-1){
|
||
this.mapJson = anqingJson
|
||
}else if(this.cityName.indexOf("黄山")>-1){
|
||
this.mapJson = huangshanJson
|
||
}else if(this.cityName.indexOf("滁州")>-1){
|
||
this.mapJson = chuzhouJson
|
||
}else if(this.cityName.indexOf("阜阳")>-1){
|
||
this.mapJson = fuyangJson
|
||
}else if(this.cityName.indexOf("宿州")>-1){
|
||
this.mapJson = suzhouJson
|
||
}else if(this.cityName.indexOf("六安")>-1){
|
||
this.mapJson = liuanJson
|
||
}else if(this.cityName.indexOf("亳州")>-1){
|
||
this.mapJson = bozhouJson
|
||
}else if(this.cityName.indexOf("池州")>-1){
|
||
this.mapJson = chizhouJson
|
||
}else if(this.cityName.indexOf("宣城")>-1){
|
||
this.mapJson = xuanchenJson
|
||
} else if (this.cityName.indexOf("安徽送变电") > -1) {
|
||
this.mapJson = anhui
|
||
}
|
||
console.log(this.mapJson)
|
||
this.getMapData()
|
||
},
|
||
getMapData(){
|
||
// 获取地区中心坐标
|
||
var mapFeatures = this.mapJson.features.map(item=>{
|
||
let obj = {
|
||
name:item.properties.name,
|
||
value:item.properties.center
|
||
}
|
||
return obj
|
||
})
|
||
console.log(mapFeatures)
|
||
let param = {companyId:sessionStorage.getItem('companyId'),city:this.cityName}
|
||
mapDataApi(param).then(response => {
|
||
console.log(response,'mapDataApi--> 大屏地图数据')
|
||
// response.data.proList.forEach(item=>{
|
||
// let obj = Object.assign({},item)
|
||
// obj.name = item.county;
|
||
// let index = mapFeatures.findIndex(v=>v.name==item.county)
|
||
// if(index>-1){
|
||
// obj.value = mapFeatures[index].value
|
||
// }
|
||
// this.geoVal.push(obj)
|
||
// })
|
||
this.warehouseEquipmentNum = response.data.warehouseEquipmentNum
|
||
this.outCityEquipmentNum = response.data.outCityEquipmentNum
|
||
if (response.data.proList.length > 0) {
|
||
this.geoVal = response.data.proList.map(item=>{
|
||
return {
|
||
...item,
|
||
value: [item.lon, item.lat]
|
||
}
|
||
})
|
||
}
|
||
this.getInitData()
|
||
});
|
||
},
|
||
getInitData() {
|
||
this.mapEcharts = echarts.init(document.getElementById('mapEcharts'),)
|
||
echarts.registerMap('dishi', this.mapJson)
|
||
this.setMapOption()
|
||
},
|
||
setMapOption() {
|
||
this.mapEcharts.clear()
|
||
console.log(this.geoVal)
|
||
let that = this
|
||
let imgUrl = require('../../../assets/cityScreen/mapBg2.png')
|
||
let echartOption = {
|
||
geo: [
|
||
{
|
||
show: true,
|
||
map: 'dishi',
|
||
type: 'map',
|
||
aspectScale: 1,
|
||
zoom: this.zoom,
|
||
roam: false, // 是否允许缩放
|
||
animationDurationUpdate: 0,
|
||
layoutSize: '80%',
|
||
layoutCenter: ['50%', '56%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
areaColor: this.sendMapColor, //地图颜色
|
||
opacity: 0.7,
|
||
borderColor: '#38EAF6', //地图边框颜色
|
||
borderWidth: 1, //地图边框宽度
|
||
shadowColor: 'none',
|
||
shadowBlur: 10,
|
||
color: '#fff',
|
||
// 设置扇形的阴影
|
||
},
|
||
emphasis: {
|
||
//选中省份的颜色
|
||
areaColor: '#061E3D',
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
fontSize: 12,
|
||
fontWeight: 500,
|
||
color: 'rgba(255,255,255,0.5)',
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
areaColor: '#061E3D',
|
||
color: '#fff',
|
||
},
|
||
},
|
||
zlevel: 1,
|
||
regions: null,
|
||
tooltip: {
|
||
show:false,
|
||
},
|
||
},
|
||
{
|
||
map: 'dishi',
|
||
aspectScale: 1,
|
||
roam: false, // 是否允许缩放
|
||
animationDurationUpdate: 0,
|
||
zoom: this.zoom,
|
||
layoutSize: '80%',
|
||
layoutCenter: ['50%', '58%'],
|
||
itemStyle: {
|
||
areaColor: '#5785AE',
|
||
borderColor: '#5785AE',
|
||
borderWidth: 1,
|
||
opacity: 0.3,
|
||
color: '#fff',
|
||
},
|
||
zlevel: -1,
|
||
silent: true,
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
visualMap: {
|
||
show: false,
|
||
top: 'top',
|
||
min: 0,
|
||
max: 2,
|
||
seriesIndex: 0,
|
||
calculable: true,
|
||
inRange: {
|
||
color: [
|
||
'#998f74',
|
||
'#04a4f6',
|
||
'#00943e',
|
||
'#dae07b',
|
||
'#b62022',
|
||
],
|
||
},
|
||
},
|
||
tooltip: {
|
||
},
|
||
series: [
|
||
{
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
zlevel: 10,
|
||
symbol: 'circle',
|
||
symbolSize: 15,
|
||
colorBy: null,
|
||
itemStyle: {
|
||
color: '#409EFF',
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: function (params) {
|
||
// 第一行装备数量，第二行工程名称
|
||
return `{equip|${params.data.useNum}}\n{proj|${params.data.projectName}}`
|
||
},
|
||
rich: {
|
||
equip: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
align: 'center',
|
||
verticalAlign: 'middle',
|
||
backgroundColor: '#409EFF', // 蓝色背景
|
||
borderRadius: 10, // 圆角（如果宽高相等就是圆形）
|
||
padding: [2, 6], // 内边距控制大小
|
||
lineHeight: 20, // 高度
|
||
},
|
||
proj: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
lineHeight: 16
|
||
}
|
||
}
|
||
},
|
||
data: this.geoVal
|
||
}
|
||
],
|
||
}
|
||
this.mapEcharts.setOption(echartOption)
|
||
this.mapEcharts.on('click', function (params) {
|
||
if (params.componentSubType === 'scatter') {
|
||
// console.log(params)
|
||
let option = that.mapEcharts.getOption() //获得option对象
|
||
// 点击变黄
|
||
option.series[0].data.forEach((item) => {
|
||
if (params.data.name !== item.name) {
|
||
if (item.isActive) {
|
||
item.isActive = false
|
||
}
|
||
} else {
|
||
item.isActive = true
|
||
}
|
||
})
|
||
that.mapEcharts.setOption(option)
|
||
that.$emit('closeMap', { value: params.data })
|
||
}
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.centerTopPage {
|
||
width: 100%;
|
||
//height: var(--send-height);
|
||
height: 100%;
|
||
// background:palegoldenrod;
|
||
margin-bottom: 2%;
|
||
padding: 0 10px;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
.iconMap {
|
||
display: block !important;
|
||
visibility: visible !important;
|
||
opacity: 1;
|
||
}
|
||
.buttonTop {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
.buttom1 {
|
||
width: 110px;
|
||
height: 32px;
|
||
text-align: center;
|
||
line-height: 32px;
|
||
border-radius: 4px;
|
||
color: #55f3fb;
|
||
// background: url(../../assets/img/checked.png) no-repeat center;
|
||
background-size: 110px 32px;
|
||
margin-right: 12px;
|
||
cursor: pointer;
|
||
}
|
||
.buttom1.on {
|
||
color: #0095ff;
|
||
// background: url(../../assets/img/checked_on.png) no-repeat center;
|
||
background-size: 110px 32px;
|
||
}
|
||
.mapBox {
|
||
margin-top: -70px;
|
||
width: 100%;
|
||
height: 97%;
|
||
display: flex;
|
||
position: relative;
|
||
#mapEcharts {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
#mapEcharts2 {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
z-index: 1000;
|
||
}
|
||
.label-box {
|
||
position: absolute;
|
||
bottom: 0px;
|
||
left: 40px;
|
||
// background: url('../../assets/img/home/labelBg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 10px 15px;
|
||
.item {
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
color: #fff;
|
||
position: relative;
|
||
padding-left: 15px;
|
||
font-size: 16px;
|
||
}
|
||
.item:before {
|
||
content: '';
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #06bbf2;
|
||
position: absolute;
|
||
top: 6px;
|
||
left: 0px;
|
||
}
|
||
.itemColor1:before {
|
||
background: #06bbf2;
|
||
}
|
||
.itemColor2:before {
|
||
background: #2df0fe;
|
||
}
|
||
.itemColor3:before {
|
||
background: #10e0a5;
|
||
}
|
||
.itemColor4:before {
|
||
background: #dcef4e;
|
||
}
|
||
.itemColor5:before {
|
||
background: #f48413;
|
||
}
|
||
.itemColor6:before {
|
||
background: #fc5403;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.top-btns {
|
||
margin-top: 60px;
|
||
display: flex;
|
||
justify-content: center;
|
||
/* position: absolute;
|
||
top: 10px; */
|
||
.btn:not(:last-child) {
|
||
margin-right: 80px;
|
||
}
|
||
|
||
.btn {
|
||
font-size: 15px;
|
||
text-align: center;
|
||
padding: 6px 15px;
|
||
font-family: DS-TITLE;
|
||
color: #ccc;
|
||
background-image: url('../../screen/wsScreen/img/btn.png');
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background-image: url('../../screen/wsScreen/img/btn-active.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.store-equip {
|
||
position: absolute;
|
||
top: 30px;
|
||
left: 50px;
|
||
width: 116px;
|
||
height: 75px;
|
||
color: #ccc;
|
||
font-size: 11px;
|
||
padding-top: 4px;
|
||
background: url('../../../assets/cityScreen/mapBg1.png');
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
.cont {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
.out-city-equip {
|
||
position: absolute;
|
||
top: 366px;
|
||
right: 95px;
|
||
width: 40px;
|
||
height: 52px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
background: url('../../../assets/cityScreen/position.png');
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.scrollTooltip::-webkit-scrollbar {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
.scrollTooltip::-webkit-scrollbar-thumb {
|
||
background-color: #1653a6;
|
||
border-radius: 10px;
|
||
-webkit-box-shadow: inset 1px 1px 0 #1653a6;
|
||
}
|
||
.itemColor {
|
||
position: relative;
|
||
padding-left: 15px;
|
||
line-height: 22px;
|
||
}
|
||
.itemColor:before {
|
||
content: '';
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #06bbf2;
|
||
position: absolute;
|
||
top: 6px;
|
||
left: 0px;
|
||
}
|
||
.itemColor1:before {
|
||
background: #06bbf2;
|
||
}
|
||
.itemColor2:before {
|
||
background: #2df0fe;
|
||
}
|
||
.itemColor3:before {
|
||
background: #10e0a5;
|
||
}
|
||
.itemColor4:before {
|
||
background: #dcef4e;
|
||
}
|
||
.itemColor5:before {
|
||
background: #f48413;
|
||
}
|
||
.itemColor6:before {
|
||
background: #fc5403;
|
||
}
|
||
</style>
|