网省地图

2025-09-17 17:28:55 +08:00 · 2025-09-17 17:28:55 +08:00 · 6ccc4c1726
parent 856f789ae2
commit 6ccc4c1726
5 changed files with 103 additions and 71 deletions
--- a/src/utils/drawMixin.js
+++ b/src/utils/drawMixin.js
@ -36,8 +36,8 @@ export default {
      // 调试模式 - start
      if (DEBUG_MODE) {
        // 调试模式，不缩放，居中显示
-        appRef.style.transform = `translate(-25%, -45%) scale(0.9, 0.9)`
-        appRef.style.overflow = 'visible'
+        // appRef.style.transform = `translate(-25%, -45%) scale(0.9, 0.9)`
+        // appRef.style.overflow = 'visible'
        // return
      }
      // 调试模式 - end
--- a/src/views/screen/components/countryMap.vue
+++ b/src/views/screen/components/countryMap.vue
@ -75,7 +75,8 @@ export default {
    created() { 
    },
    mounted() { 
-        this.cityName="合肥"
+        console.log('🚀 ~ mounted ~ .cityName:', this.$router.currentRoute.query.cityName)
+        this.cityName = this.$router.currentRoute.query.cityName || "合肥"
        this.getCityJson()
    },
    methods: {
--- a/src/views/screen/wsScreen/components/center/index.vue
+++ b/src/views/screen/wsScreen/components/center/index.vue
@ -14,30 +14,30 @@
    </div>

    <!-- 点击城市显示详情 -->
-    <div v-if="selectedCity" class="city-tooltip">
-      <div class="city-name">{{ selectedCity.name }}</div>
+    <div v-if="selectedCity && btnIndex == 1" class="city-tooltip">
+      <div class="city-name">{{ selectedCity.cityName }}</div>
      <div
-        >装备价值： <span class="num">{{ selectedCity.value }}</span
+        >装备价值： <span class="num">{{ selectedCity.totalValue }}</span
        ><span class="unit"> 元</span></div
      >
      <div
-        >装备数量： <span class="num">{{ selectedCity.value }}</span
+        >装备数量： <span class="num">{{ selectedCity.totalEquipmentQuantity }}</span
        ><span class="unit"> 台</span></div
      >
      <div
-        >配置率： <span class="num">{{ selectedCity.value }}</span
+        >配置率： <span class="num">{{ selectedCity.totalEquipmentQuantity }}</span
        ><span class="unit"> %</span></div
      >
      <div
-        >线路数量： <span class="num">{{ selectedCity.value }}</span
+        >线路数量： <span class="num">{{ selectedCity.lineNum }}</span
        ><span class="unit"> 台</span></div
      >
      <div
-        >变电数量： <span class="num">{{ selectedCity.value }}</span
+        >变电数量： <span class="num">{{ selectedCity.substationNum }}</span
        ><span class="unit"> 台</span></div
      >
      <div
-        >电缆数量： <span class="num">{{ selectedCity.value }}</span
+        >电缆数量： <span class="num">{{ selectedCity.cableNum }}</span
        ><span class="unit"> 台</span></div
      >
    </div>
@ -56,25 +56,7 @@ export default {
      btnIndex: 1,
      myChart: null,
      selectedCity: null,
-      cityData: [
-        { name: '合肥市', value: 120 },
-        { name: '芜湖市', value: 95 },
-        { name: '蚌埠市', value: 78 },
-        { name: '淮南市', value: 66 },
-        { name: '马鞍山市', value: 82 },
-        { name: '淮北市', value: 54 },
-        { name: '铜陵市', value: 45 },
-        { name: '安庆市', value: 88 },
-        { name: '黄山市', value: 36 },
-        { name: '滁州市', value: 73 },
-        { name: '阜阳市', value: 110 },
-        { name: '宿州市', value: 61 },
-        { name: '六安市', value: 69 },
-        { name: '亳州市', value: 58 },
-        { name: '池州市', value: 30 },
-        { name: '宣城市', value: 42 },
-        { name: '巢湖市', value: 42 },
-      ],
+      cityData: [],
    }
  },
  created() {
@ -83,6 +65,7 @@ export default {
  methods: {
    handleBtn(index) {
      this.btnIndex = index
+      this.cityData = []
      this.getInfo()
    },
    async getInfo() {
@ -90,21 +73,35 @@ export default {
        let res = null
        if (this.btnIndex == 1) {
          res = await getUnitEquipmentConfigurationApi()
+          if (!res.data) return
+          this.cityData = res.data.map((item) => {
+            let value = item.location.split(',')
+            value.push(item.totalValue)
+            // console.log('🚀 ~ getInfo ~ value:', value)
+            return {
+              ...item,
+              value,
+            }
+          })
        } else if (this.btnIndex == 2) {
          res = await getEquipmentNumberApi()
-          this.cityData = res.data.map(item => {
+          this.cityData = res.data.map((item) => {
+            let value = item.location.split(',')
+            value.push(item.num)
+            // console.log('🚀 ~ getInfo ~ value:', value)
            return {
-              value: item.num,
-              name: item.name
+              ...item,
+              value,
+              deptName: item.name,
            }
          })
        } else if (this.btnIndex == 3) {
-          res = await getMechanizationRateApi()
+          // res = await getMechanizationRateApi()
        }
-        console.log('🚀 ~ getInfo ~ this.cityData:', this.cityData)
-        this.$nextTick(() => {
+        setTimeout(() => {
+          console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
          this.initMap()
-        })
+        }, 300)
        console.log('🚀 ~ 地图数据 ~ res:', res)
      } catch (error) {
        console.log('🚀 ~ 地图数据 ~ error:', error)
@ -115,31 +112,36 @@ export default {
      echarts.registerMap('anhui', anhuiMapJson)
      this.myChart = echarts.init(this.$refs.mapChart)

-      const seriesData = this.cityData.map((item) => ({
-        name: item.name,
-        value: item.value,
-      }))
+      const seriesData = this.cityData

      const option = {
        backgroundColor: 'transparent',
-        tooltip: {
-          show: false,
-        },
-        visualMap: {
-          show: false,
-          min: 0,
-          max: 120,
-          inRange: {
-            color: ['#E0F5FF', '#0067B8'],
+        geo: {
+          map: 'anhui',
+          roam: false,
+          zoom: 1.1,
+          aspectScale: 1.5,
+          center: [117.227239, 31.820586],
+          label: { show: false },
+          itemStyle: {
+            areaColor: '#1B3452',
+            borderColor: '#5A9BD9',
+            borderWidth: 1.5,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+            shadowBlur: 10,
+          },
+          emphasis: {
+            itemStyle: { areaColor: '#4C7DBF' },
          },
        },
        series: [
          {
-            type: 'map',
-            map: 'anhui',
-            roam: false,
-            center: [117.27, 31.86],
-            zoom: 1.1,
+            type: 'scatter',
+            coordinateSystem: 'geo',
+            data: seriesData,
+            symbol: 'circle',
+            symbolSize: 16,
+
            label: {
              show: true,
              // 保持文字阴影等样式（可按需调整）
@ -153,7 +155,19 @@ export default {
                // console.log('🚀 ~ initMap ~ params:', params)
                // 优先使用 params.data.value（更可靠），否则 fallback 到 params.value
                const val = params.data && params.data.value !== undefined ? params.data.value : params.value
-                return val !== undefined ? `{val|${val} 亿}\n{name|${params.name}}` : `{name|${params.name}}`
+                let unit = ''
+                if (this.btnIndex === 1) {
+                  unit = '亿'
+                } else if (this.btnIndex === 2) {
+                  unit = '台'
+                } else if (this.btnIndex === 3) {
+                  unit = '%'
+                }
+                return val !== undefined
+                  ? `{val|${val[2]} ${unit}}\n{name|${params.data.deptName}}`
+                  : `{name|${params.data.deptName}}`
+
+                // 根据 params.name 匹配 seriesData 中的数据, 同一个城市如果有多条数据 则间隔一点距离展示
              },

              rich: {
@ -165,7 +179,7 @@ export default {
                  },
                  // 使背景块垂直居中、控制高度、内边距等
                  height: 28,
-                  width: 70,
+                  minWidth: 70,
                  lineHeight: 28,
                  padding: [0, 10], // 上右下左
                  align: 'center',
@ -210,20 +224,27 @@ export default {
      this.myChart.setOption(option)

      this.myChart.on('click', (params) => {
-        console.log('🚀 ~ initMap ~ params:', params)
-        // const city = this.cityData.find((c) => c.name === params.name)
-        // this.selectedCity = city || null
+        // params.name去掉 市
+        const city = params.name.replace(/市$/, '')
        this.$router.push({
          path: '/screen/cityScreen',
          query: {
-            cityName: params.name,
+            cityName: city,
          },
        })
      })

      // 鼠标移入时展示
      this.myChart.on('mouseover', (params) => {
-        const city = this.cityData.find((c) => c.name === params.name)
+        console.log('🚀 ~ initMap ~ params:', params)
+        let city = null
+        if (params.seriesType === 'scatter' && params.data) {
+          console.log('🚀 ~ 当前坐标点信息 ~ params.data:', params.data)
+          city = params.data
+        } else {
+          this.selectedCity = null
+          city = this.cityData.find((c) => c.cityName === params.name)
+        }
        this.selectedCity = city || null
      })

@ -289,10 +310,11 @@ export default {

 // 倾斜层：实现 15 度倾斜的 3D 效果
 .map-tilt {
-  transform: rotateX(15deg); // 倾斜 15 度
-  transform-origin: bottom center; // 以底部为中心旋转
+  transform: rotateX(15deg);
+  transform-origin: bottom center;
+  perspective: 1200px; // 👈 增加景深，效果更立体
  transition: transform 0.3s ease;
-  pointer-events: none; /* 允许事件穿透到内部图表 */
+  pointer-events: none;
  height: 900px;
  display: flex;
  justify-content: center;
--- a/src/views/screen/wsScreen/components/left/EquipItem.vue
+++ b/src/views/screen/wsScreen/components/left/EquipItem.vue
@ -5,11 +5,11 @@
      <div>
        <div class="left-item">
          <div class="left-tip">装备数 <span>（台）</span></div>
-          <div class="number">{{ state.num || 0 }}</div>
+          <div class="number">{{ query.num || 0 }}</div>
        </div>
        <div class="left-item">
          <div class="left-tip">装备价值 <span>（亿元）</span></div>
-          <div class="number">{{ state.price || 0 }}</div>
+          <div class="number">{{ query.price || 0 }}</div>
        </div>
      </div>
      <div>
@ -45,12 +45,17 @@ export default {
    },
  },
  data() {
-    return {}
+    return {
+      query: {},
+    }
  },
  mounted() {
-    console.log('state-->', this.state)
+    console.log('🚀 ~ mounted ~ this.state:', this.state)
    console.log('state-->', this.pieValues)
-    this.initPieChart()
+    setTimeout(() => {
+      this.query = this.state
+      this.initPieChart()
+    }, 300)
  },
  computed: {
    pieData() {
--- a/src/views/screen/wsScreen/components/left/index.vue
+++ b/src/views/screen/wsScreen/components/left/index.vue
@ -20,7 +20,7 @@
            <EquipItem title="变电装备" :state="state2" :pieValues="list2" />
          </el-col>
          <el-col :span="8" :offset="0">
-            <EquipItem title="电缆装备" :state="state2" :pieValues="list3" />
+            <EquipItem title="电缆装备" :state="state3" :pieValues="list3" />
          </el-col>
        </el-row>
      </div>
@ -123,6 +123,10 @@ export default {
        this.list3[1] = data.substation.fiveOrTen
        this.list3[2] = data.substation.ten
        console.log('🚀 ~ getEquipList ~ this.list1:', this.list1)
+        console.log('🚀 ~ getEquipList ~ this.list2:', this.list2)
+        console.log('🚀 ~ getEquipList ~ this.list3:', this.list3)
+        console.log('🚀 ~ getEquipList ~ this.state1:', this.state1)
+        console.log('🚀 ~ getEquipList ~ this.state2:', this.state2)
        console.log('🚀 ~ getEquipList ~ this.state3:', this.state3)
      } catch (error) {
        console.log('🚀 ~ getEquipList ~ error:', error)