首页

src/views/home/components/ProvincialChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content-warp">
+  <div class="app-container">
     <div class="top">
       <div class="top-1">
         <Top1 />
@@ -66,11 +66,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.content-warp {
-  width: 100%;
-  height: 100%;
+.app-container {
   background: #e1ebf7;
-  padding: 24px;
 }
 .top {
   margin-bottom: 16px;

src/views/home/components/provincial/Top2.vue

@@ -1,19 +1,436 @@
 <template>
   <div>
-地图
+    <div class="top-btns">
+      <div class="btn" :class="{ active: btnIndex == 1 }" @click="handleBtn(1)">总价值数</div>
+      <div class="btn" :class="{ active: btnIndex == 2 }" @click="handleBtn(2)">在库装备数</div>
+      <div class="btn" :class="{ active: btnIndex == 3 }" @click="handleBtn(3)">机械化率</div>
+    </div>
+    <div class="map-box">
+      <div class="echarts" id="mapChart"></div>
+    </div>
   </div>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
+import { getUnitEquipmentConfigurationApi, getEquipmentNumberApi, getMechanizationRateApi } from '@/api/wsScreen'
+import * as echarts from 'echarts'
+import 'echarts-gl'
 
+let mapImg = require('./Map/assets/img/anhui.png')
+import labelBg from './Map/assets/img/value-bg.png'
+let mapJson = require('./Map/ah.json')
+
+export default {
+  data() {
+    return {
+      btnIndex: 1,
+      cityData: [],
+    }
+  },
+  created() {
+    this.getInfo()
+  },
+  methods: {
+    handleBtn(index) {
+      if (this.btnIndex == index) return
+      this.btnIndex = index
+      this.cityData = []
+      this.getInfo()
+    },
+    async getInfo() {
+      try {
+        let res = null
+        if (this.btnIndex == 1) {
+          res = await getUnitEquipmentConfigurationApi()
+          if (!res.data) return
+          res.data = res.data.filter((item) => item.location)
+          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()
+          if (!res.data) return
+          res.data = res.data.filter((item) => item.location)
+          this.cityData = res.data.map((item) => {
+            let value = item.location.split(',')
+            value.push(item.num)
+            // console.log('🚀 ~ getInfo ~ value:', value)
+            return {
+              ...item,
+              value,
+              deptName: item.name,
+            }
+          })
+        } else if (this.btnIndex == 3) {
+          res = await getMechanizationRateApi()
+        }
+        this.$nextTick(() => {
+          console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
+          this.initChart()
+        })
+        console.log('🚀 ~ 地图数据 ~ res:', res)
+      } catch (error) {
+        console.log('🚀 ~ 地图数据 ~ error:', error)
+        // this.initChart()
       }
     },
-  }
+    initChart(jsonData = mapJson) {
+      // 模拟数据
+      let arr = this.cityData.map((item) => {
+        return {
+          ...item,
+          name: item.cityName,
+        }
+      })
+
+      echarts.registerMap('ah', jsonData)
+      const charEle = document.getElementById('mapChart')
+      const myChart = echarts.init(charEle)
+      // let tooltip = gzjhTooltip(arr)
+      const option = {
+        tooltip: {
+          show: true,
+          backgroundColor: 'transparent',
+          borderWidth: 0,
+          formatter: function (e) {
+            let n = e.name
+            let res = ''
+            arr.forEach((data) => {
+              // console.log('🚀 ~ 提示数据 ~ data:', data)
+              if (data.cityName === n) {
+                res =
+                  "<div style='width: 330px;height: 285px; background: url(" +
+                  require('./Map/assets/img/dialog.png') +
+                  ") no-repeat;background-size:100% 100%;'>" +
+                  "<div style='width: 300px;height: 34px;display: flex;align-items: center;text-shadow:0px 3px 6px #001441; padding-left: 30px;font-family: DS-TITLE;color:#FFF;font-size:22px;padding-top: 10px;'>" +
+                  data.deptAbbreviation +
+                  '</div>' +
+                  "<div style='margin-top:10px;margin-bottom:5px;width: 300px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
+                  require('./Map/assets/img/map-item-row.png') +
+                  ") no-repeat;background-size:100%;margin-left:20px'>" +
+                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
+                  '<div>装备价值：' +
+                  '</div>' +
+                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1);'>" +
+                  data.totalValue +
+                  " <span style='color:#FFF;font-size:14px'> 万元</span>" +
+                  '</div>' +
+                  '</div>' +
+                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
+                  require('./Map/assets/img/map-item-row.png') +
+                  ") no-repeat;background-size:100%;margin-left:20px'>" +
+                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
+                  '<div>装备数量：' +
+                  '</div>' +
+                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
+                  data.totalEquipmentQuantity +
+                  "<span style='color:#FFF;font-size:14px'> 台</span>" +
+                  '</div>' +
+                  '</div>' +
+                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
+                  require('./Map/assets/img/map-item-row.png') +
+                  ") no-repeat;background-size:100%;margin-left:20px'>" +
+                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
+                  '<div>配置率：' +
+                  '</div>' +
+                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
+                  data.configRate +
+                  "<span style='color:#FFF;font-size:14px'> %</span>" +
+                  '</div>' +
+                  '</div>' +
+                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
+                  require('./Map/assets/img/map-item-row.png') +
+                  ") no-repeat;background-size:100%;margin-left:20px'>" +
+                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
+                  '<div>线路数量：' +
+                  '</div>' +
+                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
+                  data.lineNum +
+                  "<span style='color:#FFF;font-size:14px'> 台</span>" +
+                  '</div>' +
+                  '</div>' +
+                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
+                  require('./Map/assets/img/map-item-row.png') +
+                  ") no-repeat;background-size:100%;margin-left:20px'>" +
+                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
+                  '<div>变电数量：' +
+                  '</div>' +
+                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
+                  data.substationNum +
+                  "<span style='color:#FFF;font-size:14px'> 台</span>" +
+                  '</div>' +
+                  '</div>' +
+                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
+                  require('./Map/assets/img/map-item-row.png') +
+                  ") no-repeat;background-size:100%;margin-left:20px'>" +
+                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
+                  '<div>电缆数量：' +
+                  '</div>' +
+                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
+                  data.cableNum +
+                  "<span style='color:#FFF;font-size:14px'> 台</span>" +
+                  '</div>' +
+                  '</div>' +
+                  '</div>'
+              }
+            })
+            return res
+          },
+        },
+        geo3D: {
+          map: 'ah',
+          zoom: 1,
+          roam: false,
+          label: { show: false },
+          itemStyle: {
+            opacity: 0, //.01 // important!
+          },
+          emphasis: {
+            disabled: true,
+          },
+          regionHeight: 0,
+          shading: 'lambert',
+
+          viewControl: {
+            zoomSensitivity: false,
+            rotateSensitivity: 0,
+            projection: 'orthographic',
+            autoRotate: false,
+            autoRotateAfterStill: 1,
+            orthographicSize: 100,
+            minAlpha: 20, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
+            maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
+            minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
+            maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
+            animation: false, // 是否开启动画。[ default: true ]
+            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
+            animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
+          },
+          light: {
+            //光照阴影
+            main: {
+              color: '#02fce7', //光照颜色
+              intensity: 0.5, //光照强度
+              shadow: true, //是否显示阴影
+              shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
+              alpha: 30,
+              beta: 90,
+            },
+            ambient: {
+              color: '#fff',
+              intensity: 1,
+            },
+          },
+          zlevel: -8,
+        },
+        // 要显示的散点数据
+        series: [
+          {
+            left: 0,
+            top: 6,
+            bottom: 22,
+            type: 'map3D',
+            map: 'ah',
+            roam: false,
+            data: arr,
+            itemStyle: {
+              // color: "#4b6f52",
+              color: 'transparent',
+              borderWidth: 2,
+              borderColor: '#b8cad1',
+              opacity: 1,
+            },
+            emphasis: {
+              disabled: false, // 👈 一定要打开
+              label: {
+                show: false,
+                color: '#fff',
+              },
+              itemStyle: {
+                color: 'rgba(44, 186, 178, 0.45)', // 👈 青绿色半透明背景
+                borderColor: '#2cbab2', // 👈 高亮描边
+                borderWidth: 2,
+              },
+            },
+            regionHeight: 0,
+            shading: 'lambert',
+            viewControl: {
+              zoomSensitivity: false,
+              rotateSensitivity: 0,
+              projection: 'orthographic',
+              autoRotate: false,
+              autoRotateAfterStill: 1,
+              orthographicSize: 92,
+              animation: false, // 是否开启动画。[ default: true ]
+              animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
+              animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
+            },
+            label: {
+              show: true,
+              color: '#FFF',
+              position: 'top',
+              fontSize: 12,
+            },
+            light: {
+              //光照阴影
+              main: {
+                color: 'rgb(14,70,82)', //光照颜色
+                intensity: 0.1, //光照强度
+                shadow: true, //是否显示阴影
+                shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
+                alpha: 30,
+                beta: 90,
+              },
+              ambient: {
+                color: '#fff',
+                intensity: 1,
+              },
+            },
+            zlevel: 1,
+            zoom: 1,
+            scaleLimit: {
+              // 限制缩放的比例
+              min: 1, // 最小缩放比例
+              max: 1, // 最大缩放比例
+            },
+          },
+          {
+            type: 'scatter3D',
+            data: arr,
+            symbol: 'circle',
+            symbolSize: 11,
+            coordinateSystem: 'geo3D',
+            label: {
+              show: false,
+              position: 'top', // 先指定一个基准位置（如 'top'）
+              offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
+              // triggerEvent: true,
+              formatter: (params) => {
+                // console.log('🚀 ~ initChart ~ params:', params)
+                const val = params.data.value || []
+                let unit = ''
+                if (this.btnIndex === 1) unit = '万元'
+                else if (this.btnIndex === 2) unit = '台'
+                else if (this.btnIndex === 3) unit = '%'
+                return val.length
+                  ? `{val|${val[2]} ${unit}}\n{name|${params.data.deptAbbreviation}}`
+                  : `{name|${params.data.deptAbbreviation}}`
+              },
+              rich: {
+                val: {
+                  backgroundColor: { image: labelBg },
+                  height: 28,
+                  minWidth: 70,
+                  lineHeight: 28,
+                  padding: [0, 10],
+                  align: 'center',
+                  verticalAlign: 'middle',
+                  color: '#fff',
+                  fontSize: 23,
+                },
+                name: {
+                  color: '#fff',
+                  fontFamily: 'DS-TITLE',
+                  fontSize: 21,
+                  padding: [6, 0, 0, 0],
+                },
+              },
+            },
+            itemStyle: {
+              color: 'rgba(217, 94, 0, 1)',
+            },
+            zlevel: 1,
+          },
+        ],
+        graphic: {
+          elements: [
+            {
+              type: 'image',
+              style: {
+                image: mapImg, // 图片的 URL
+                width: 456, // 图片宽度
+                height: 440, // 图片高度
+                // 位置根据实际需求调整
+                x: 0,
+                y: 0,
+              },
+              left: 'center',
+              top: 'center',
+            },
+          ],
+        },
+      }
+      myChart.setOption(option)
+      // 监听地图绑定双击事件（双击进入地图下一级）
+      myChart.on('click', (params) => {
+        console.log('🚀 ~ 点击 ~ params-->:', params)
+        console.log('🚀 ~ initChart ~ params.data-->>:', params.data)
+        if (!params.data) return
+        this.$router.push({
+          path: '/equipment/equipment-ledger',
+          query: {
+            parentId: params.data.parentId,
+            deptId: params.data.deptId,
+          },
+        })
+        if (params.seriesType === 'map3D' && params.data) {
+          let city =
+            params.data.deptName == '安徽送变电工程有限公司' ? '安徽送变电' : params.data.name.replace(/市$/, '')
+
+          console.log('🚀 ~ initChart ~ this.$router:', this.$router)
+          // this.$router.push({
+          //   path: '/screen/cityScreen',
+          //   query: {
+          //     cityName: city,
+          //   },
+          // })
+          // window.open(`${window.location.origin}/screen/cityScreen?cityName=${city}`, '_blank')
+        }
+      })
+      myChart.on('mouseover', (params) => {
+        // console.log('🚀 ~ 移入 ~ params:', params)
+      })
+      myChart.on('mouseout', () => {
+        // this.selectedCity = null
+      })
+      return myChart
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
+.top-btns {
+  display: flex;
+  align-items: center;
 
-</style>
+  .btn {
+    margin-right: 24px;
+    height: 30px;
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: bold;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  .active {
+    color: #2cbab2;
+    border-bottom: 2px solid #2cbab2;
+  }
+}
+
+.map-box {
+  width: 100%;
+  height: 440px;
+}
+.echarts {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/home/components/provincial/Top3.vue

@@ -54,6 +54,7 @@
 <script>
 import TitleBox from '../TitleBox'
 import Gauge from './Gauge'
+import { getProjectEquipmentApi } from '@/api/wsScreen'
 
 export default {
   name: 'Top3',

src/views/home/index-v2.vue

@@ -28,6 +28,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* Chrome / Edge / Safari */
+::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+/* Firefox */
+* {
+  scrollbar-width: none; /* none | thin */
+}
+
+/* IE 10+ */
+* {
+  -ms-overflow-style: none;
+}
 @font-face {
   font-family: 'OPPOSans';
   src: url('../../assets/font-family/OPPOSans.ttf');