bonus
/
BigScreenUI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图模块优化

This commit is contained in:
13218645326 2023-12-01 11:19:43 +08:00
parent 3eaded1fc5
commit 4e08b7345d
3 changed files with 68 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/customCom/equipmentDialog.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="equipment_dialog">
<div class="equipment_content">
<div class="equipment_dialog" v-show="mapLineShow" @click="mapLineShow=false">
<div class="equipment_content" @click.stop.prevent="">
<div class="equip_title">
装备信息
</div>
@ -34,6 +34,7 @@
<script setup lang="ts">
import mapLine from "components/mapBaidu/mapLine.vue"
const mapLineShow=ref(false)
const timeRange = ref<[Date, Date]>([
new Date(2000, 10, 10, 10, 10),
new Date(2000, 10, 11, 10, 10),
@ -68,6 +69,13 @@ const shortcuts = [
},
]
const open=()=>{
mapLineShow.value = true
console.log("mapLineShow",mapLineShow.value)
}
defineExpose({
open
})
</script>
<style scoped lang="scss">
@ -80,16 +88,16 @@ const shortcuts = [
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.equipment_content {
width: 1148px;
height: 596px;
width: 1162px;
height: 646px;
padding: 0px 60px 35px;
background-image: url("../../assets/img/mapBg.png");
background-size: contain;
background-size: cover;
background-repeat: no-repeat;
box-sizing: border-box;
}
.equip_title {
@ -100,6 +108,7 @@ const shortcuts = [
text-align: center;
box-sizing: border-box;
padding-top: 15px;
width: 100%;
}
.sub_title {

23
src/components/customCom/equipmentLeasing.vue
View File

@ -5,7 +5,7 @@
</div>
<div class="e_content">
<div class="left_nav_list">
<div class="nav_item" v-for="(item, index) in navInfo.list" :key="index" @click="toNavItem(item)">
<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>
@ -14,7 +14,7 @@
:emphasisItemStyle="mapProps.emphasisItemStyle" :labelInfo="mapProps.labelInfo"
:rippleEffect="mapProps.rippleEffect" :tooltipProps="mapProps.tooltipProps"
:tooltipFormat="mapProps.tooltipFormat" :itemColorFormat="mapProps.itemColorFormat"
:seriesData="mapProps.seriesData">
:seriesData="mapProps.seriesData" :effectScatterCallBack="mapProps.effectScatterCallBack">
</mapEcharts>
</div>
</div>
@ -47,7 +47,7 @@
<div class="haiNanDao" v-if="mapProps.idType=='0'||mapProps.idType=='5' ">
<img src="/src/assets/img/nanhai_dao.png" alt="">
</div>
<equipmentDialog></equipmentDialog>
<equipmentDialog ref="equipmentDialogRef"></equipmentDialog>
</div>
</template>
@ -62,6 +62,7 @@ import gzJSON from './mapData/gz.json'
import ynJSON from './mapData/yn.json'
import hnJSON from './mapData/hn.json'
const mapEchartsRef = ref()
const equipmentDialogRef=ref()
const navInfo = reactive({
list: [
@ -151,6 +152,9 @@ const mapProps = reactive({
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;">
@ -182,13 +186,17 @@ const mapProps = reactive({
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] }]
{ name: '海口', value: [110.33,19.823, 10] }]
})
const mapDataByProvice = (provinceName: String) => {
@ -278,8 +286,7 @@ onBeforeMount(()=>{
margin-bottom: 6px;
background: url('../../assets/img/map_nav_item_bg.png');
background-size: contain;
font-weight: bold;
color: #FFFFFF;
color: #66e0ff;
font-size: 14px;
text-align: center;
line-height: 28px;
@ -372,4 +379,8 @@ onBeforeMount(()=>{
color: #fff;
padding-right: 10px;
}
.activeNav{
color: #fff!important;
font-weight: bold;
}
</style>

120
src/components/echartsCom/mapEcharts.vue
View File

@ -1,21 +1,15 @@
<template>
<div :id="'mapEcharts'+idType" style="width: 100%;height: 100%;"></div>
<div :id="'mapEcharts' + idType" style="width: 100%;height: 100%;" ></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
const mapEcharts = ref(null)
const getImg = () => {
return new URL(`/src/components/echartsCom/img/hover_bg.png`, import.meta.url).href;
}
const propsVal:any = defineProps({
idType:{
type:String,
default:'0'
const propsVal: any = defineProps({
idType: {
type: String,
default: '0'
},
jsonData:{
jsonData: {
type: Object,
default: {
@ -87,12 +81,16 @@ const propsVal:any = defineProps({
seriesData: {//地图点标记数据
type: Array,
default: []
}
},
effectScatterCallBack: {//effectScatter 点击事件
type: Function,
default: () => { }
},
})
const initEcharts = () => {
echarts.registerMap('guangdong', propsVal.jsonData)
nextTick(() => {
const domitem= document.getElementById("mapEcharts"+propsVal.idType)
const domitem = document.getElementById("mapEcharts" + propsVal.idType)
const map = echarts.init(domitem, null, {
renderer: 'canvas',
})
@ -118,28 +116,6 @@ const initEcharts = () => {
formatter: (params: any) => {
return propsVal.tooltipFormat(params)
}
/* (params: any) => {
console.log("params11", params)
const curItem = mapDataByProvice(params.name)
let fromatStr =
`<div style="background:url(${getImg()});width:120px;height:70px;background-size:contain;background-repeat:no-repeat;">
<div style="width: 100px;height: 90px;padding-top:4px;">
<div style="width: 100px;height: 14px;box-sizing: content-box;padding-bottom: 8px;text-align: right;">
${curItem.selfCount}
</div>
<div style="width: 100px;height: 14px;box-sizing: content-box;padding-bottom: 8px;text-align: right;">
${curItem.toCount}
</div>
<div style="width: 100px;height: 14px;box-sizing: content-box;padding-bottom: 8px;text-align: right;">
${curItem.inCount}
</div>
</div>
</div>
`
return fromatStr
} */
}
},
series: [
@ -156,65 +132,41 @@ const initEcharts = () => {
}
},
/* {
color: (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';
}
}
}, */
coordinateSystem: 'geo',
data: propsVal.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] }] */
}
data: propsVal.seriesData,
},
{
name: 'eventDom',
type: 'scatter',
coordinateSystem: 'geo',
data: propsVal.seriesData,
symbolSize: 32,
itemStyle: {
color:"rgba(255,255,255,0)"
},
},
],
}
map.setOption(option)
chartClickEventListener(map)
})
}
/* const mapDataByProvice = (provinceName: String) => {
let listData = [
{
name: "广东省",
selfCount: 123,
toCount: 300,
inCount: 987
},
{
name: "广西壮族自治区",
selfCount: 23,
toCount: 55,
inCount: 278
},
]
const curItem: any = listData.find(ele => ele.name == provinceName)
return curItem
} */
onMounted(() => {
console.log("propsval", propsVal)
initEcharts()
})
const chagneJSON=(item:any)=>{
})
const chartClickEventListener = (mychart: any) => {
mychart.on("click", (parmas: any) => {
propsVal.effectScatterCallBack(parmas)
})
}
const chagneJSON = (item: any) => {
console.log("propsval", propsVal)
propsVal.idType=item.navId
setTimeout(()=>{
propsVal.idType = item.navId
setTimeout(() => {
initEcharts()
})
}