403 lines
11 KiB
Vue
403 lines
11 KiB
Vue
<template>
|
||
<div class="equipment_area">
|
||
<div class="top_title">
|
||
设备租赁分布图
|
||
</div>
|
||
<div class="e_content">
|
||
<div class="left_nav_list">
|
||
<div class="nav_item" v-for="(item, index) in navInfo.list" :key="index" :class="{'activeNav':mapProps.idType==item.navId}" @click="toNavItem(item)">
|
||
{{ item.text }}
|
||
</div>
|
||
</div>
|
||
<div class="right_map_container">
|
||
<mapEcharts ref="mapEchartsRef" :jsonData="mapProps.jsonData" :itemStyle="mapProps.itemStyle" :emphasisLabelStyle="mapProps.emphasisLabelStyle"
|
||
:emphasisItemStyle="mapProps.emphasisItemStyle" :labelInfo="mapProps.labelInfo"
|
||
:rippleEffect="mapProps.rippleEffect" :tooltipProps="mapProps.tooltipProps"
|
||
:tooltipFormat="mapProps.tooltipFormat" :itemColorFormat="mapProps.itemColorFormat"
|
||
:seriesData="mapProps.seriesData" :effectScatterCallBack="mapProps.effectScatterCallBack">
|
||
</mapEcharts>
|
||
</div>
|
||
</div>
|
||
<div class="type_list">
|
||
<div class="type_list_item">
|
||
<div class="out_dot1">
|
||
<div class="dot">
|
||
<div class="inner_dot"></div>
|
||
</div>
|
||
</div>
|
||
自有
|
||
</div>
|
||
<div class="type_list_item">
|
||
<div class="out_dot2">
|
||
<div class="dot">
|
||
<div class="inner_dot"></div>
|
||
</div>
|
||
</div>
|
||
待租
|
||
</div>
|
||
<div class="type_list_item">
|
||
<div class="out_dot3">
|
||
<div class="dot">
|
||
<div class="inner_dot"></div>
|
||
</div>
|
||
</div>
|
||
在租
|
||
</div>
|
||
</div>
|
||
<div class="haiNanDao" v-if="mapProps.idType=='0'||mapProps.idType=='5' ">
|
||
<img src="/src/assets/img/nanhai_dao.png" alt="">
|
||
</div>
|
||
<equipmentDialog ref="equipmentDialogRef"></equipmentDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { getImg } from "utils/index"
|
||
import mapEcharts from "../echartsCom/mapEcharts.vue"
|
||
import equipmentDialog from "./equipmentDialog.vue"
|
||
import xnallJSON from './mapData/xnall.json'
|
||
import gxJSON from './mapData/gx.json'
|
||
import gdJSON from './mapData/gd.json'
|
||
import gzJSON from './mapData/gz.json'
|
||
import ynJSON from './mapData/yn.json'
|
||
import hnJSON from './mapData/hn.json'
|
||
import {apibmCompanyInfoColtdList} from "http/api/echartApi"
|
||
const mapEchartsRef = ref()
|
||
const equipmentDialogRef=ref()
|
||
|
||
const navInfo = reactive({
|
||
list: [
|
||
{
|
||
text: "全部",
|
||
navId: "0",
|
||
jsonData:xnallJSON
|
||
},
|
||
{
|
||
text: "广西电网",
|
||
navId: "1",
|
||
jsonData:gxJSON
|
||
},
|
||
{
|
||
text: "广东电网",
|
||
navId: "2",
|
||
jsonData:gdJSON
|
||
},
|
||
{
|
||
text: "贵州电网",
|
||
navId: "3",
|
||
jsonData:gzJSON
|
||
},
|
||
{
|
||
text: "云南电网",
|
||
navId: "4",
|
||
jsonData:ynJSON
|
||
},
|
||
{
|
||
text: "海南电网",
|
||
navId: "5",
|
||
jsonData:hnJSON
|
||
},
|
||
{
|
||
text: "储能公司",
|
||
navId: "6",
|
||
},
|
||
{
|
||
text: "深圳供电局",
|
||
navId: "7"
|
||
},
|
||
{
|
||
text: "超高压公司",
|
||
navId: "8"
|
||
}
|
||
]
|
||
})
|
||
|
||
|
||
const mapProps = reactive({
|
||
idType:"0",
|
||
jsonData:{
|
||
},
|
||
itemStyle: {
|
||
areaColor: '#186894',//区域颜色
|
||
shadowColor: '#2894c9',//边缘阴影颜色
|
||
color: 'rgba(255, 255, 255, 1)'//文字颜色
|
||
},
|
||
emphasisLabelStyle: {
|
||
color: "rgba(255, 255, 255, 1)"
|
||
},
|
||
emphasisItemStyle: {
|
||
areaColor: '#39baf6',
|
||
shadowColor: '#2894c9',
|
||
},
|
||
labelInfo: {
|
||
show: true,
|
||
color: 'rgba(255,255,255,0.6)',
|
||
position: 'inside',
|
||
distance: 0,
|
||
fontSize: 10,
|
||
rotate: 0,
|
||
},
|
||
rippleEffect: {
|
||
number: 4,
|
||
period: 4,
|
||
scale: 4.5,
|
||
brushType: 'fill'
|
||
},
|
||
tooltipProps: {
|
||
show: true,
|
||
shadowColor: 'rgba(0, 0, 0, 0)', // 设置阴影颜色为透明
|
||
shadowBlur: 0, // 设置阴影模糊度为0，即无阴影
|
||
backgroundColor: "rgba(21, 29, 56,0)",
|
||
borderColor: "rgba(21, 29, 56,0)"
|
||
},
|
||
tooltipFormat: (params: any) => {
|
||
console.log("params11", params)
|
||
const curItem = mapDataByProvice(params.name)
|
||
if(!curItem||!curItem.selfCount){
|
||
return ""
|
||
}
|
||
let fromatStr =
|
||
`<div style="background:url(${getImg('/src/assets/img/mapHoverBg.png')});width:324px;height:225px;background-size:contain;background-repeat:no-repeat;">
|
||
<div style="width: 100px;height: 90px;padding-top:4px;position:relative;">
|
||
<div style="position:absolute;left:20px;top:10px;font-weight:bold;color:#fff;">
|
||
${params.name}
|
||
</div>
|
||
<div style="position:absolute;left:120px;top:58px;color:#fff;width:120px;text-align:right;">
|
||
${curItem.selfCount}
|
||
</div>
|
||
<div style="position:absolute;left:135px;top:108px;color:#fff;width:120px;text-align:right;">
|
||
${curItem.toCount}
|
||
</div>
|
||
<div style="position:absolute;left:166px;top:158px;color:#fff;width:120px;text-align:right;">
|
||
${curItem.inCount}
|
||
</div>
|
||
</div>
|
||
</div>`
|
||
return fromatStr
|
||
},
|
||
itemColorFormat: (params: any) => {
|
||
console.log("params001", params)
|
||
if (params.value[2] > 0 && params.value[2] <= 100) {
|
||
return '#00ff31';
|
||
} else if (params.value[2] > 100 && params.value[2] <= 200) {
|
||
return '#f00';
|
||
} else if (params.value[2] > 200 && params.value[2] <= 300) {
|
||
return '#0ff';
|
||
} else if (params.value[2] > 300 && params.value[2] <= 400) {
|
||
return '#ff0';
|
||
}
|
||
},
|
||
effectScatterCallBack:(params:any)=>{
|
||
console.log("equipmentDialogRef",params)
|
||
equipmentDialogRef.value.open()
|
||
},
|
||
seriesData: [{ name: '肇庆市', value: [112.48461, 23.05196, 100] },
|
||
{ name: '佛山市', value: [110.130214, 23.018978, 200] },
|
||
{ name: '广州', value: [115.261081, 23.139856, 300] },
|
||
{ name: '南宁', value: [107.45, 22.139856, 400] },
|
||
{ name: '贵阳', value: [106.7, 26.36, 200] },
|
||
{ name: '昆明', value: [102.33, 24.23, 300] } ,
|
||
{ name: '海口', value: [110.33,19.823, 10] }]
|
||
})
|
||
let listData:any= []
|
||
const mapDataByProvice = (provinceName: String) => {
|
||
let listData = [
|
||
{
|
||
name: "广东省",
|
||
selfCount: 123,
|
||
toCount: 300,
|
||
inCount: 987
|
||
},
|
||
{
|
||
name: "广西壮族自治区",
|
||
selfCount: 23,
|
||
toCount: 55,
|
||
inCount: 278
|
||
},
|
||
{
|
||
name: "云南省",
|
||
selfCount: 256,
|
||
toCount: 2456,
|
||
inCount: 745
|
||
},
|
||
{
|
||
name: "贵州省",
|
||
selfCount: 963,
|
||
toCount: 4521,
|
||
inCount: 963
|
||
}
|
||
]
|
||
const curItem: any = listData.find(ele => ele.name == provinceName)
|
||
return curItem
|
||
}
|
||
|
||
const toNavItem=(item:any)=>{
|
||
console.log("item",item)
|
||
mapProps.jsonData= item.jsonData
|
||
mapProps.idType=item.navId
|
||
mapEchartsRef.value.chagneJSON(item)
|
||
}
|
||
|
||
onBeforeMount(()=>{
|
||
mapProps.jsonData= xnallJSON
|
||
})
|
||
onMounted(()=>{
|
||
iniTapibmCompanyInfoColtdList()
|
||
})
|
||
|
||
const iniTapibmCompanyInfoColtdList = async () => {
|
||
//设备租赁分布图
|
||
try {
|
||
const res: any = await apibmCompanyInfoColtdList()
|
||
// console.log("apibmCompanyInfoColtdList", res)
|
||
// listData = res
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.equipment_area {
|
||
width: 1160px;
|
||
height: 504px;
|
||
background-image: url('../../assets/img/map_bg.png');
|
||
background-color: linear-gradient(180deg, #011B37 0%, #000525 7%, rgba(0, 2, 37, 0) 100%);
|
||
position: relative;
|
||
}
|
||
.haiNanDao{
|
||
width: 46px;
|
||
height: 59px;
|
||
position: absolute;
|
||
right: 280px;
|
||
bottom: 6px;
|
||
img{
|
||
width: 46px;
|
||
height: 59px;
|
||
}
|
||
}
|
||
.top_title {
|
||
font-size: 20px;
|
||
padding-top: 42px;
|
||
color: #74d3ea;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
.e_content {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.left_nav_list {
|
||
width: 78px;
|
||
margin-left: 48px;
|
||
height: 400px;
|
||
margin-top: 20px;
|
||
|
||
.nav_item {
|
||
width: 78px;
|
||
height: 28px;
|
||
margin-bottom: 6px;
|
||
background: url('../../assets/img/map_nav_item_bg.png');
|
||
background-size: contain;
|
||
color: #66e0ff;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
line-height: 28px;
|
||
}
|
||
}
|
||
|
||
.right_map_container {
|
||
width: 822px;
|
||
height: 447px;
|
||
}
|
||
|
||
.type_list {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
position: absolute;
|
||
left: 100px;
|
||
bottom: 16px;
|
||
.out_dot1,
|
||
.out_dot2,
|
||
.out_dot3 {
|
||
width: 14px;
|
||
height: 14px;
|
||
background-color: rgba($color: #FA0000, $alpha: 0.3);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 50%;
|
||
margin-right: 3px;
|
||
.dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
background-color: rgba($color: #FA0000, $alpha: 0.4);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 50%;
|
||
|
||
.inner_dot {
|
||
width: 3px;
|
||
height: 3px;
|
||
background-color: #FA0000;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.out_dot1 {
|
||
background-color: rgba($color: #FA0000, $alpha: 0.3);
|
||
|
||
.dot {
|
||
background-color: rgba($color: #FA0000, $alpha: 0.4);
|
||
|
||
.inner_dot {
|
||
background-color: #FA0000;
|
||
}
|
||
}
|
||
}
|
||
|
||
.out_dot2 {
|
||
background-color: rgba($color: #00FF31, $alpha: 0.3);
|
||
|
||
.dot {
|
||
background-color: rgba($color: #00FF31, $alpha: 0.4);
|
||
|
||
.inner_dot {
|
||
background-color: #00FF31;
|
||
}
|
||
}
|
||
}
|
||
|
||
.out_dot3 {
|
||
background-color: rgba($color: #FAD300, $alpha: 0.3);
|
||
|
||
.dot {
|
||
background-color: rgba($color: #FAD300, $alpha: 0.4);
|
||
|
||
.inner_dot {
|
||
background-color: #FAD300;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.type_list_item{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
font-size: 13px;
|
||
color: #fff;
|
||
padding-right: 10px;
|
||
}
|
||
.activeNav{
|
||
color: #fff!important;
|
||
font-weight: bold;
|
||
}
|
||
</style> |