From be5893b8bce97451f28947cc115265dc1645c390 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 29 Oct 2025 17:19:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/countryMap/index.vue           | 984 ++++++++----------
 1 file changed, 413 insertions(+), 571 deletions(-)

diff --git a/src/views/screen/cityScreen/components/countryMap/index.vue b/src/views/screen/cityScreen/components/countryMap/index.vue
index edc3ccac..49aa9c37 100644
--- a/src/views/screen/cityScreen/components/countryMap/index.vue
+++ b/src/views/screen/cityScreen/components/countryMap/index.vue
@@ -1,40 +1,14 @@
 <template>
-    <div class="map-container">
-        <!-- 顶部控制按钮 -->
-        <div class="map-controls">
-            <div class="control-btn" :class="{ active: btnIndex == 1 }" @click="handleTabClick(1)">
-                <span class="btn-text">装备总数</span>
-                <div class="btn-glow"></div>
-            </div>
+    <div class="centerTopPage">
+        <div class="top-btns">
+            <div class="btn" :class="{ active: btnIndex == 1 }" @click="">装备总数</div>
         </div>
-
-        <!-- 数据展示卡片 -->
-        <div class="data-cards">
-            <div class="data-card warehouse-card">
-                <div class="card-icon">📦</div>
-                <div class="card-content">
-                    <div class="card-label">仓库装备</div>
-                    <div class="card-value">{{ warehouseEquipmentNum || 0 }}</div>
-                    <div class="card-unit">台</div>
-                </div>
-                <div class="card-glow"></div>
-            </div>
-
-            <div class="data-card out-city-card">
-                <div class="card-icon">🌍</div>
-                <div class="card-content">
-                    <div class="card-label">市外装备</div>
-                    <div class="card-value">{{ outCityEquipmentNum || 0 }}</div>
-                    <div class="card-unit">台</div>
-                </div>
-                <div class="card-glow"></div>
-            </div>
-        </div>
-
-        <!-- 地图容器 -->
-        <div class="map-wrapper">
-            <div id="mapEcharts" class="echarts-container"></div>
-            <div class="map-overlay"></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>
@@ -42,30 +16,26 @@
 <script>
 import * as echarts from 'echarts'
 import { mapDataApi } from '@/api/screen/cityScreen'
-
-// 城市地图数据映射
-const CITY_MAP_CONFIG = {
-    合肥: () => import('@/utils/mapJson/hefei.json'),
-    芜湖: () => import('@/utils/mapJson/wuhu.json'),
-    蚌埠: () => import('@/utils/mapJson/bengbu.json'),
-    淮南: () => import('@/utils/mapJson/huainan.json'),
-    马鞍山: () => import('@/utils/mapJson/maanshan.json'),
-    淮北: () => import('@/utils/mapJson/huaibei.json'),
-    铜陵: () => import('@/utils/mapJson/tongling.json'),
-    安庆: () => import('@/utils/mapJson/anqing.json'),
-    黄山: () => import('@/utils/mapJson/huangshan.json'),
-    滁州: () => import('@/utils/mapJson/chuzhou.json'),
-    阜阳: () => import('@/utils/mapJson/fuyang.json'),
-    宿州: () => import('@/utils/mapJson/suzhou.json'),
-    六安: () => import('@/utils/mapJson/liuan.json'),
-    亳州: () => import('@/utils/mapJson/bozhou.json'),
-    池州: () => import('@/utils/mapJson/chizhou.json'),
-    宣城: () => import('@/utils/mapJson/xuanchen.json'),
-    安徽送变电: () => import('@/utils/mapJson/anhui.json'),
-}
+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: 'CountryMap',
+    name: 'centerTopPage',
     props: {
         sendHeight: {
             type: String,
@@ -73,7 +43,7 @@ export default {
         },
         sendMapColor: {
             type: String,
-            default: '#00D4FF',
+            default: '#17A1F1',
         },
         sendGeo: {
             type: Array,
@@ -92,297 +62,262 @@ export default {
     },
     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: 0,
-            outCityEquipmentNum: 0,
-            isLoading: false,
+            warehouseEquipmentNum: null, // 仓库装备数
+            outCityEquipmentNum: null, // 市外装备数
         }
     },
-    async mounted() {
+    created() {},
+    mounted() {
+        console.log('🚀 ~ mounted ~ .cityName:', this.$router.currentRoute.query.cityName)
         this.cityName = this.$router.currentRoute.query.cityName || '合肥'
-        await this.initMap()
+        this.getCityJson()
     },
     methods: {
-        // 初始化地图
-        async initMap() {
-            try {
-                this.isLoading = true
-                await this.loadCityMap()
-                await this.fetchMapData()
-                this.initEcharts()
-            } catch (error) {
-                console.error('地图初始化失败:', error)
-            } finally {
-                this.isLoading = false
+        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()
         },
-
-        // 加载城市地图数据
-        async loadCityMap() {
-            const cityKey = Object.keys(CITY_MAP_CONFIG).find((key) => this.cityName.includes(key)) || '合肥'
-
-            const mapModule = await CITY_MAP_CONFIG[cityKey]()
-            this.mapJson = mapModule.default || mapModule
-        },
-
-        // 处理标签点击
-        handleTabClick(index) {
-            this.btnIndex = index
-            // 可以在这里添加其他逻辑
-        },
-        // 获取地图数据
-        async fetchMapData() {
-            try {
-                const param = {
-                    companyId: sessionStorage.getItem('companyId'),
-                    city: this.cityName,
+        getMapData() {
+            // 获取地区中心坐标
+            var mapFeatures = this.mapJson.features.map((item) => {
+                let obj = {
+                    name: item.properties.name,
+                    value: item.properties.center,
                 }
-                const response = await mapDataApi(param)
-
-                this.warehouseEquipmentNum = response.data.warehouseEquipmentNum || 0
-                this.outCityEquipmentNum = response.data.outCityEquipmentNum || 0
-
-                if (response.data.proList?.length > 0) {
-                    this.geoVal = response.data.proList.map((item) => ({
-                        ...item,
-                        value: [item.lon, item.lat],
-                    }))
+                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],
+                        }
+                    })
                 }
-            } catch (error) {
-                console.error('获取地图数据失败:', error)
-            }
+                this.getInitData()
+            })
         },
-
-        // 初始化ECharts
-        initEcharts() {
+        getInitData() {
             this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
-            echarts.registerMap('cityMap', this.mapJson)
-            this.renderMap()
+            echarts.registerMap('dishi', this.mapJson)
+            this.setMapOption()
         },
-        // 渲染地图
-        renderMap() {
-            if (!this.mapEcharts) return
-
+        setMapOption() {
             this.mapEcharts.clear()
-
-            const option = {
-                backgroundColor: 'transparent',
-                // 增强的2D地图配置，模拟3D效果
+            console.log(this.geoVal)
+            let that = this
+            let imgUrl = require('../../../../../assets/cityScreen/mapBg2.png')
+            let echartOption = {
                 geo: [
                     {
-                        map: 'cityMap',
-                        aspectScale: 0.8,
-                        zoom: 1.2,
-                        roam: false,
-                        layoutSize: '85%',
-                        layoutCenter: ['50%', '55%'],
+                        show: true,
+                        map: 'dishi',
+                        type: 'map',
+                        aspectScale: 1,
+                        zoom: this.zoom,
+                        roam: false, // 是否允许缩放
+                        animationDurationUpdate: 0,
+                        layoutSize: '80%',
+                        layoutCenter: ['50%', '56%'],
                         itemStyle: {
-                            areaColor: {
-                                type: 'linear',
-                                x: 0,
-                                y: 0,
-                                x2: 1,
-                                y2: 1,
-                                colorStops: [
-                                    { offset: 0, color: 'rgba(25, 45, 85, 0.4)' },
-                                    { offset: 0.3, color: 'rgba(35, 65, 120, 0.6)' },
-                                    { offset: 0.7, color: 'rgba(30, 55, 100, 0.5)' },
-                                    { offset: 1, color: 'rgba(20, 40, 75, 0.4)' },
-                                ],
-                            },
-                            borderColor: 'rgba(0, 150, 255, 0.8)',
-                            borderWidth: 2,
-                            shadowColor: 'rgba(0, 150, 255, 0.4)',
-                            shadowBlur: 20,
-                            shadowOffsetX: 2,
-                            shadowOffsetY: 2,
-                        },
-                        emphasis: {
-                            itemStyle: {
-                                areaColor: {
-                                    type: 'linear',
-                                    x: 0,
-                                    y: 0,
-                                    x2: 1,
-                                    y2: 1,
-                                    colorStops: [
-                                        { offset: 0, color: 'rgba(0, 150, 255, 0.8)' },
-                                        { offset: 0.5, color: 'rgba(0, 200, 255, 0.7)' },
-                                        { offset: 1, color: 'rgba(0, 150, 255, 0.6)' },
-                                    ],
+                            normal: {
+                                label: {
+                                    show: false,
                                 },
-                                borderColor: 'rgba(0, 255, 255, 1)',
-                                borderWidth: 3,
-                                shadowColor: 'rgba(0, 255, 255, 0.8)',
-                                shadowBlur: 30,
-                                shadowOffsetX: 3,
-                                shadowOffsetY: 3,
+                                areaColor: this.sendMapColor, //地图颜色
+                                opacity: 0.7,
+                                borderColor: '#38EAF6', //地图边框颜色
+                                borderWidth: 1, //地图边框宽度
+                                shadowColor: 'none',
+                                shadowBlur: 10,
+                                color: '#fff',
+                                // 设置扇形的阴影
                             },
-                            label: {
-                                show: true,
-                                color: '#FFFFFF',
-                                fontSize: 14,
-                                fontWeight: 'bold',
-                                textShadowColor: 'rgba(0, 0, 0, 0.8)',
-                                textShadowBlur: 5,
+                            emphasis: {
+                                //选中省份的颜色
+                                areaColor: '#061E3D',
+                                label: {
+                                    show: true,
+                                },
                             },
                         },
                         label: {
-                            show: false,
-                            fontSize: 12,
-                            color: 'rgba(255,255,255,0.8)',
+                            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: [
-                    // 增强的2D散点图，模拟3D效果
                     {
                         type: 'scatter',
                         coordinateSystem: 'geo',
                         zlevel: 10,
                         symbol: 'circle',
-                        symbolSize: (val) => Math.max(10, Math.min(25, (val[2] || 1) / 8)),
+                        symbolSize: 15,
+                        colorBy: null,
                         itemStyle: {
-                            color: {
-                                type: 'radial',
-                                x: 0.5,
-                                y: 0.5,
-                                r: 0.5,
-                                colorStops: [
-                                    { offset: 0, color: 'rgba(0, 200, 255, 1)' },
-                                    { offset: 0.6, color: 'rgba(0, 150, 255, 0.9)' },
-                                    { offset: 0.8, color: 'rgba(0, 100, 200, 0.8)' },
-                                    { offset: 1, color: 'rgba(0, 80, 160, 0.7)' },
-                                ],
-                            },
-                            shadowColor: 'rgba(0, 200, 255, 0.8)',
-                            shadowBlur: 25,
-                            shadowOffsetX: 3,
-                            shadowOffsetY: 3,
-                            borderColor: 'rgba(255, 255, 255, 0.9)',
-                            borderWidth: 2,
-                        },
-                        emphasis: {
-                            itemStyle: {
-                                color: {
-                                    type: 'radial',
-                                    x: 0.5,
-                                    y: 0.5,
-                                    r: 0.5,
-                                    colorStops: [
-                                        { offset: 0, color: 'rgba(0, 255, 255, 1)' },
-                                        { offset: 0.7, color: 'rgba(0, 200, 255, 0.9)' },
-                                        { offset: 1, color: 'rgba(0, 150, 255, 0.8)' },
-                                    ],
-                                },
-                                shadowBlur: 35,
-                                shadowOffsetX: 5,
-                                shadowOffsetY: 5,
-                                borderWidth: 3,
-                                borderColor: 'rgba(255, 255, 255, 1)',
-                            },
+                            color: '#409EFF',
                         },
                         label: {
                             show: true,
                             position: 'top',
-                            distance: 20,
-                            formatter: (params) => {
-                                return `{equip|${params.data.useNum || 0}}\n{proj|${
-                                    params.data.projectName || '未知项目'
-                                }}`
+                            formatter: function (params) {
+                                // 第一行装备数量，第二行工程名称
+                                return `{equip|${params.data.useNum}}\n{proj|${params.data.projectName}}`
                             },
                             rich: {
                                 equip: {
-                                    color: '#FFFFFF',
+                                    color: '#fff',
                                     fontSize: 14,
                                     fontWeight: 'bold',
-                                    backgroundColor: {
-                                        type: 'linear',
-                                        x: 0,
-                                        y: 0,
-                                        x2: 1,
-                                        y2: 0,
-                                        colorStops: [
-                                            { offset: 0, color: 'rgba(0, 200, 255, 0.9)' },
-                                            { offset: 1, color: 'rgba(0, 150, 255, 0.9)' },
-                                        ],
-                                    },
-                                    borderRadius: 12,
-                                    padding: [4, 8],
-                                    lineHeight: 20,
-                                    textAlign: 'center',
-                                    textShadowColor: 'rgba(0, 0, 0, 0.8)',
-                                    textShadowBlur: 3,
+                                    align: 'center',
+                                    verticalAlign: 'middle',
+                                    backgroundColor: '#409EFF', // 蓝色背景
+                                    borderRadius: 10, // 圆角（如果宽高相等就是圆形）
+                                    padding: [2, 6], // 内边距控制大小
+                                    lineHeight: 20, // 高度
                                 },
                                 proj: {
-                                    color: '#FFFFFF',
-                                    fontSize: 11,
+                                    color: '#fff',
+                                    fontSize: 12,
                                     lineHeight: 16,
-                                    textAlign: 'center',
-                                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                                    borderRadius: 8,
-                                    padding: [2, 6],
-                                    textShadowColor: 'rgba(0, 0, 0, 0.8)',
-                                    textShadowBlur: 2,
                                 },
                             },
                         },
                         data: this.geoVal,
-                        animation: true,
-                        animationDuration: 1200,
-                        animationEasing: 'elasticOut',
                     },
                 ],
-                tooltip: {
-                    show: true,
-                    backgroundColor: 'rgba(20, 40, 75, 0.9)',
-                    borderColor: 'rgba(0, 200, 255, 0.8)',
-                    borderWidth: 1,
-                    borderRadius: 8,
-                    textStyle: {
-                        color: '#FFFFFF',
-                        fontSize: 14,
-                    },
-                    formatter: (params) => {
-                        if (params.componentType === 'series') {
-                            const data = params.data
-                            return `
-                                <div style="padding: 12px;">
-                                    <div style="color: rgba(0, 200, 255, 1); font-weight: bold; margin-bottom: 8px; font-size: 16px;">${
-                                        data.projectName || '未知项目'
-                                    }</div>
-                                    <div style="color: #FFFFFF; margin-bottom: 4px;">装备数量: <span style="color: rgba(0, 255, 255, 1); font-weight: bold;">${
-                                        data.useNum || 0
-                                    }</span> 台</div>
-                                    <div style="color: rgba(255, 255, 255, 0.8);">位置: ${
-                                        data.county || '未知位置'
-                                    }</div>
-                                </div>
-                            `
-                        }
-                        return ''
-                    },
-                },
             }
-
-            this.mapEcharts.setOption(option)
-            this.bindMapEvents()
-        },
-
-        // 绑定地图事件
-        bindMapEvents() {
-            this.mapEcharts.off('click')
-            this.mapEcharts.on('click', (params) => {
-                if (params.componentType === 'series') {
-                    this.$emit('mapClick', params.data)
+            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 })
                 }
             })
         },
@@ -391,295 +326,202 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.map-container {
+.centerTopPage {
     width: 100%;
+    //height: var(--send-height);
     height: 100%;
+    // background:palegoldenrod;
+    margin-bottom: 2%;
+    padding: 0 10px;
     position: relative;
-    background: linear-gradient(135deg, rgba(20, 40, 75, 0.3) 0%, rgba(35, 65, 120, 0.2) 100%);
-    border-radius: 8px;
-    overflow: hidden;
-    border: 1px solid rgba(0, 150, 255, 0.2);
-
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: radial-gradient(circle at 20% 20%, rgba(0, 150, 255, 0.08) 0%, transparent 50%),
-            radial-gradient(circle at 80% 80%, rgba(0, 200, 255, 0.08) 0%, transparent 50%),
-            linear-gradient(45deg, transparent 30%, rgba(0, 150, 255, 0.03) 50%, transparent 70%);
-        pointer-events: none;
-        z-index: 1;
-    }
-
-    &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: repeating-linear-gradient(
-                90deg,
-                transparent,
-                transparent 2px,
-                rgba(0, 150, 255, 0.03) 2px,
-                rgba(0, 150, 255, 0.03) 4px
-            ),
-            repeating-linear-gradient(
-                0deg,
-                transparent,
-                transparent 2px,
-                rgba(0, 150, 255, 0.03) 2px,
-                rgba(0, 150, 255, 0.03) 4px
-            );
-        pointer-events: none;
-        z-index: 1;
-    }
-}
-
-// 控制按钮样式
-.map-controls {
-    position: absolute;
-    top: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 10;
-
-    .control-btn {
-        position: relative;
-        padding: 8px 20px;
-        background: linear-gradient(135deg, rgba(0, 150, 255, 0.15) 0%, rgba(0, 200, 255, 0.15) 100%);
-        border: 1px solid rgba(0, 150, 255, 0.4);
-        border-radius: 20px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        backdrop-filter: blur(10px);
-
-        .btn-text {
-            color: #ffffff;
-            font-size: 14px;
-            font-weight: 500;
-            text-shadow: 0 0 8px rgba(0, 150, 255, 0.6);
-        }
-
-        .btn-glow {
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            right: -2px;
-            bottom: -2px;
-            background: linear-gradient(135deg, rgba(0, 150, 255, 0.8), rgba(0, 200, 255, 0.8));
-            border-radius: 22px;
-            opacity: 0;
-            transition: opacity 0.3s ease;
-            z-index: -1;
-        }
-
-        &:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(0, 150, 255, 0.25);
-            border-color: rgba(0, 200, 255, 0.6);
-
-            .btn-glow {
-                opacity: 0.4;
-            }
-        }
-
-        &.active {
-            background: linear-gradient(135deg, rgba(0, 150, 255, 0.3) 0%, rgba(0, 200, 255, 0.3) 100%);
-            border-color: rgba(0, 200, 255, 0.8);
-            box-shadow: 0 0 20px rgba(0, 150, 255, 0.4);
-
-            .btn-glow {
-                opacity: 0.7;
-            }
-        }
-    }
-}
-
-// 数据卡片样式
-.data-cards {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-}
-
-.data-card {
-    position: relative;
-    width: 140px;
-    height: 80px;
-    background: linear-gradient(135deg, rgba(20, 40, 75, 0.8) 0%, rgba(35, 65, 120, 0.8) 100%);
-    border: 1px solid rgba(0, 150, 255, 0.3);
-    border-radius: 12px;
-    padding: 12px;
-    backdrop-filter: blur(10px);
-    transition: all 0.3s ease;
-    overflow: hidden;
-
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: -100%;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(0, 150, 255, 0.15), transparent);
-        transition: left 0.5s ease;
-    }
-
-    &:hover {
-        transform: translateY(-3px);
-        border-color: rgba(0, 200, 255, 0.6);
-        box-shadow: 0 10px 30px rgba(0, 150, 255, 0.2);
-
-        &::before {
-            left: 100%;
-        }
-    }
-
-    .card-icon {
-        font-size: 20px;
-        margin-bottom: 5px;
-        filter: drop-shadow(0 0 8px rgba(0, 150, 255, 0.6));
-    }
-
-    .card-content {
-        .card-label {
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 11px;
-            margin-bottom: 2px;
-        }
-
-        .card-value {
-            color: rgba(0, 200, 255, 1);
-            font-size: 18px;
-            font-weight: bold;
-            text-shadow: 0 0 12px rgba(0, 150, 255, 0.6);
-            margin-bottom: 2px;
-        }
-
-        .card-unit {
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 10px;
-        }
-    }
-
-    .card-glow {
-        position: absolute;
-        top: -1px;
-        left: -1px;
-        right: -1px;
-        bottom: -1px;
-        background: linear-gradient(135deg, rgba(0, 150, 255, 0.8), rgba(0, 200, 255, 0.8));
-        border-radius: 13px;
-        opacity: 0;
-        transition: opacity 0.3s ease;
-        z-index: -1;
-    }
-
-    &:hover .card-glow {
-        opacity: 0.4;
-    }
-}
-
-// 地图容器样式
-.map-wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    margin-top: 20px;
-
-    .echarts-container {
-        width: 100%;
-        height: 100%;
-        border-radius: 8px;
-    }
-
-    .map-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: radial-gradient(circle at 30% 30%, rgba(0, 150, 255, 0.03) 0%, transparent 50%),
-            radial-gradient(circle at 70% 70%, rgba(0, 200, 255, 0.03) 0%, transparent 50%),
-            linear-gradient(135deg, transparent 40%, rgba(0, 150, 255, 0.02) 50%, transparent 60%);
-        pointer-events: none;
-        z-index: 2;
-    }
-}
-
-// 响应式设计
-@media (max-width: 1200px) {
-    .data-cards {
-        left: 10px;
-
-        .data-card {
-            width: 120px;
-            height: 70px;
-            padding: 10px;
-
-            .card-content {
-                .card-value {
-                    font-size: 16px;
-                }
-            }
-        }
-    }
-}
-
-// 动画效果
-@keyframes pulse {
-    0%,
-    100% {
-        opacity: 0.6;
-    }
-    50% {
+    box-sizing: border-box;
+    .iconMap {
+        display: block !important;
+        visibility: visible !important;
         opacity: 1;
     }
-}
-
-@keyframes glow {
-    0%,
-    100% {
-        box-shadow: 0 0 5px rgba(0, 150, 255, 0.3);
+    .buttonTop {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
     }
-    50% {
-        box-shadow: 0 0 20px rgba(0, 200, 255, 0.6);
+    .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;
     }
-}
-
-// 加载状态
-.map-container.loading {
-    &::after {
-        content: '';
+    .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;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 40px;
-        height: 40px;
-        border: 3px solid rgba(0, 150, 255, 0.3);
-        border-top: 3px solid rgba(0, 200, 255, 1);
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-        z-index: 100;
-    }
-}
-
-@keyframes spin {
-    0% {
-        transform: translate(-50%, -50%) rotate(0deg);
-    }
-    100% {
-        transform: translate(-50%, -50%) rotate(360deg);
+        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('../../../wsScreen/img/btn.png');
+        background-size: 100% 100%;
+        cursor: pointer;
+    }
+
+    .active {
+        background-image: url('../../../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>