地图模块优化

src/components/customCom/equipmentDialog.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="equipment_dialog">
+    <div class="equipment_dialog" v-show="mapLineShow" @click="mapLineShow=false">
-        <div class="equipment_content">
+        <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;
+    width: 1162px;
-    height: 596px;
+    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 {

src/components/customCom/equipmentLeasing.vue

@@ -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: #66e0ff;
-        color: #FFFFFF;
         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>

src/components/echartsCom/mapEcharts.vue

@@ -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 propsVal: any = defineProps({
-const mapEcharts = ref(null)
+    idType: {
-const getImg = () => {
+        type: String,
-    return new URL(`/src/components/echartsCom/img/hover_bg.png`, import.meta.url).href;
+        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
+                    data: propsVal.seriesData,
-
+                },
-                    /*  [{ name: '肇庆市', value: [112.48461, 23.05196, 100] },
+                {
-                     { name: '佛山市', value: [110.130214, 23.018978, 200] },
+                    name: 'eventDom',
-                     { name: '广州', value: [115.261081, 23.139856, 300] },
+                    type: 'scatter',
-                     { name: '南宁', value: [107.45, 22.139856, 400] },
+                    coordinateSystem: 'geo',
-                     { name: '贵阳', value: [106.7, 26.36, 200] },
+                    data: propsVal.seriesData,
-                     { name: '昆明', value: [102.33, 24.23, 300] }] */
+                    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
+    propsVal.idType = item.navId
-    setTimeout(()=>{
+    setTimeout(() => {
         initEcharts()
     })
 }