场站+服务管理功能开发，角色权限完善，总览弹窗接口联调

web/src/components/Home/Map.vue

@@ -1,10 +1,28 @@
 <template>
   <div class="map">
-    <div>
-      <div class="icon1" @click="showModal(testVal)"></div>
-      <div class="icon"></div>
+   
+    <div ref="mapContent" class="mapContent" >
+      <tdt-map
+        ref="tiandituMap"
+        :center="center"
+        :zoom="zoom"
+        @init="init"
+        map-style="black"
+        class="amap-box"
+        :mid="'amap-vue'"
+      >
+        <tdt-marker
+          v-for="marker in markers"
+          :position="[marker.lon, marker.lat]"
+          :key="marker.id"
+          :icon="marker.iconMap"
+          style="width: 20px; height: 20px"
+          @click="clickArrayMarker(marker)"
+          :title="marker.name"
+        >
+        </tdt-marker>
+      </tdt-map>
     </div>
-    <div ref="mapContent"></div>
     <a-modal
       class="modal"
       ref="modal"
@@ -16,10 +34,7 @@
       :mask="true"
     >
       <template #closeIcon>
-        <i
-          class="iconfont icon-guanbi"
-          style="font-size:20px; cursor: pointer; color: #fff; "
-        />
+        <i class="iconfont icon-guanbi" style="font-size: 20px; cursor: pointer; color: #fff" />
       </template>
       <div class="modal-content">
         <div class="home-modal">
@@ -32,39 +47,133 @@
 <script>
 import { getReq, postReq } from '@/request/api'
 import Modal from '@/components/Home/Modal.vue'
+import { loadTMap } from '@/utils/loadTMap'
+import {gcj02ToWgs84} from '@/utils/gcj02ToWgs84'
+import { TdtMap } from 'vue-tianditu'
+
 export default {
   name: 'Map',
-  components: { Modal },
+  components: { Modal, TdtMap },
 
   data() {
     return {
+      center: [],
+      // zoom: 16,
+      zoom: 2,
+      map: null,
+      currentMarker: {},
       showCtrModal: false,
+      markers: [],
+
       testVal: {
         name: '场站211',
         id: '2'
       },
-      changeStationId:''
+      changeStationId: '',
+      targetKey: '98d875e39cf0ebab01e56a0f86c5ed44'
     }
   },
-  mounted() {},
+  mounted() {
+    this.initMap()
+    // this.getMarkList()
+  },
   methods: {
-    async showModal(currentVal) {
-      this.changeStationId=currentVal.id
-      console.log(currentVal, 'cccccccccccccccccccccc')
-      this.showCtrModal = true
+    init(map) {
+      this.map = map
+      // console.log(this.map.getCenter(),"this.map.getCenter()")
+      this.map.centerAndZoom(new T.LngLat(116.404, 39.915), 12);
+      // 监听地图加载完成事件
+      this.map.addEventListener('load', () => {
+        const c= this.map.getCenter()
+        this.center =gcj02ToWgs84(c);
+        console.log('GCJ02坐标:', this.center);
+      });
+      this.getMarkList()
+    },
+    async getMarkList() {
       try {
-        const query = {
-          // station_id:this.changeStationId
+        let query = {
+          role_id: localStorage.getItem('user')[0].role_id
         }
-        const res = await postReq(query, '')
-        if (res.code == 200) {
-          this.modalInfo = res.data.records
+        const res = await getReq('/queryStationList', query)
+        if (res.errcode === 0) {
+          this.markers = res.data.map((item) => {
+            console.log(gcj02ToWgs84(+item.lon, +item.lat),"gcj02ToWgs84(+item.lon, +item.lat)")
+            let wgs = +item.lat && +item.lon ? gcj02ToWgs84(+item.lon, +item.lat) : [null, null]
+            return {
+              ...item,
+              lon: wgs[0],
+              lat: wgs[1],
+              iconMap: !+item.status
+                ? require('../../assets/home/homeIcon1.png')
+                : require('../../assets/home/homeIcon.png')
+            }
+          })
+          console.log("this.markers ",this.markers )
+        } else {
+          this.markers = []
+          throw res
+        }
+      } catch (error) {
+        console.log(error,'eeeeeeeeeeeeeeee')
+      }
+    },
+    async initMap() {
+      try {
+        const [mapKey] = await Promise.all([this.getSysConfig('map-key')])
+        // const gcj02LngLat=map.getCenter()
+        // console.log(gcj02LngLat.getLng())
+        console.log(mapKey,"mapKey")
+        await loadTMap(mapKey)
+        
+
+        // 创建地图实例（需要HTML中存在id为mapContainer的元素）  
+        // this.map = new T.Map("amap-vue");  
+        // // this.map.centerAndZoom(new T.LngLat(116.404, 39.915), 12); // 初始中心点  
+        
+        // const centerGcj02 = this.map.getCenter();  
+        // console.log("GCJ02坐标:", centerGcj02.getLng(), centerGcj02.getLat());  
+        // const centerWgs84=gcj02ToWgs84(centerGcj02.getLng(),centerGcj02.getLat())
+
+
+
+        // this.center =[]
+      } catch (err) {
+        console.error('天地图加载失败:', err)
+      }
+    },
+    async getSysConfig() {
+      let sysConfig
+      try {
+        const query = {}
+        const res = await getReq('/', query)
+        if (res.errcode === 0) {
+          sysConfig = res.data.value
         } else {
           throw res
         }
-      } catch (err) {
-        console.log(err, 'eeeeeeeeeeeeeeeerr')
+      } catch (error) {
+        sysConfig = this.targetKey
       }
+      return sysConfig
+    },
+    async clickArrayMarker(currentVal) {
+      this.changeStationId = currentVal.station_id
+      console.log(currentVal, 'cccccccccccccccccccccc')
+      this.showCtrModal = true
+      // try {
+      //   const query = {
+      //     // station_id:this.changeStationId
+      //   }
+      //   const res = await postReq(query, '')
+      //   if (res.errcode === 0) {
+      //     this.modalInfo = res.data.records
+      //   } else {
+      //     throw res
+      //   }
+      // } catch (err) {
+      //   console.log(err, 'eeeeeeeeeeeeeeeerr')
+      // }
     }
   }
 }
@@ -73,6 +182,10 @@ export default {
 .map {
   width: 100%;
   height: 100%;
+
+  .mapContent{
+    height:100%;
+  }
   .icon1 {
     width: 32px;
     height: 80px;
@@ -112,11 +225,11 @@ export default {
       margin: auto;
       box-shadow: none;
       background: transparent;
-.ant-modal-close{
-  position: absolute;
-    right: 0;
-    top: 3px;
-}
+      .ant-modal-close {
+        position: absolute;
+        right: 0;
+        top: 3px;
+      }
       .ant-modal-body {
         height: calc(100% - 45px);
         color: #fff;
@@ -148,5 +261,9 @@ export default {
   .home-modal {
     height: 100%;
   }
+
+  :deep(.tdt-marker-icon){
+    height:auto!important;
+  }
 }
 </style>

web/src/components/Home/Modal.vue

@@ -9,8 +9,14 @@
         </div>
         <component
           :is="item.componentId"
-          :props-total="item.infoKey=='prefab'? modalInfo.prefabTotal: modalInfo.allTotal"
           :props-info="modalInfo[item.infoKey]"
+          :props-total="
+            ['prefab', 'dataTotal'].includes(item.infoKey)
+              ? item.key == 'prefab'
+                ? modalInfo.prefabTotal
+                : modalInfo.dataTotal
+              : modalInfo.allTotal
+          "
         ></component>
       </div>
     </div>
@@ -71,7 +77,7 @@ export default {
           title: '运行信息',
           class: 'operation-status',
           componentId: OperationalInfo,
-          infoKey: ''
+          infoKey: 'dataTotal'
         },
         {
           title: '场站收益情况',
@@ -96,7 +102,7 @@ export default {
           title: '环境信息',
           class: 'envInfo',
           componentId: EnvInfo,
-          infoKey: ''
+          infoKey: 'dataTotal'
         }
       ],
       sysName: '',
@@ -115,7 +121,8 @@ export default {
     await Promise.all([
       this.getStatTotalList(),
       this.queryStationInfo(),
-      this.getStatDayList(1),
+      this.queryStationData(),
+      this.getStatDayList(1)
     ])
   },
 
@@ -145,15 +152,33 @@ export default {
         this.modalInfo.allTotal = {}
       }
     },
+    // 查询场站实时数据
+    async queryStationData() {
+      try {
+        // station_id：场站ID
+
+        const query = {
+          station_id: this.stationId
+        }
+        const res = await getReq('/queryStationData', query)
+        if (res.errcode === 0) {
+          this.modalInfo.dataTotal = res.data
+        } else {
+          throw res
+        }
+      } catch (error) {
+        this.modalInfo.dataTotal = {}
+      }
+    },
     // 查询场站信息
     async queryStationInfo() {
       try {
         // station_id：场站ID
 
         const query = {
-          station_id: this.stationId,
+          station_id: this.stationId
         }
-        const res = await getReq('//queryStationInfo', query)
+        const res = await getReq('/queryStationInfo', query)
         if (res.errcode === 0) {
           this.modalInfo.prefabTotal = res.data
         } else {

web/src/components/Home/Modal/EnvInfo.vue

@@ -30,9 +30,29 @@ export default {
   },
   data() {
     return {
+      coolingList: [
+        {
+          label: '关机',
+          value: '0'
+        },
+        {
+          label: '开机',
+          value: '1'
+        }
+      ],
+      aircList: [
+        {
+          label: '关机',
+          value: '0'
+        },
+        {
+          label: '开机',
+          value: '1'
+        }
+      ],
       list: [
         {
-          key: 'key1',
+          key: 'coolingStatus',
           value: '制冷',
           d: '',
           label: '冷机',
@@ -41,7 +61,7 @@ export default {
           color: '#F69B52'
         },
         {
-          key: 'key2',
+          key: 'aircStatus',
           value: '开机',
           d: '',
           label: '空调',
@@ -50,7 +70,7 @@ export default {
           color: '#9BD801'
         },
         {
-          key: 'key3',
+          key: 'envTemp',
           value: 24,
           d: '℃',
           label: '环境温度',
@@ -59,7 +79,7 @@ export default {
           color: '#3DFEFA'
         },
         {
-          key: 'key4',
+          key: 'envhum',
           value: 26,
           d: '%',
           label: '环境湿度',
@@ -70,20 +90,27 @@ export default {
       ]
     }
   },
-  computed: {
-    leftList() {
-      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
-    },
-    rightList() {
-      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
-    }
-  },
+
   watch: {
     propsTotal: {
       handler(newVal, oldVal) {
         if (newVal !== oldVal) {
           this.list.forEach((item) => {
-            item.value = this.propsTotal[item.key]
+            console.log(this.propsTotal,this.propsTotal[item.key],"this.propsTotal[item.key]")
+            if (item.key == 'coolingStatus') {
+              console.log(this.coolingList.find(
+                (e) => e.value == this.propsTotal[item.key]
+              ))
+              item.value = this.coolingList.find(
+                (e) => e.value == this.propsTotal[item.key]
+              ).label
+            } else if (item.key == 'aircStatus') {
+              item.value = this.aircList.map(
+                (e) => e.value == this.propsTotal[item.key]
+              ).label
+            } else {
+              item.value = this.propsTotal[item.key]
+            }
           })
         }
       }

web/src/components/Home/Modal/OperationalInfo.vue

@@ -29,24 +29,24 @@ export default {
   data() {
     return {
       list: [
+        // {
+        //   key: 'tianshu',
+        //   value: 26,
+        //   d: '℃',
+        //   label: '舱内温度',
+        //   class: 'item-1',
+        //   iconPath: require('@/assets/home/wendu.png')
+        // },
+        // {
+        //   key: 'shouyi',
+        //   value: 25,
+        //   d: '%',
+        //   label: '舱内湿度',
+        //   class: 'item-2',
+        //   iconPath: require('@/assets/home/shidu.png')
+        // },
         {
-          key: 'tianshu',
-          value: 26,
-          d: '℃',
-          label: '舱内温度',
-          class: 'item-1',
-          iconPath: require('@/assets/home/wendu.png')
-        },
-        {
-          key: 'shouyi',
-          value: 25,
-          d: '%',
-          label: '舱内湿度',
-          class: 'item-2',
-          iconPath: require('@/assets/home/shidu.png')
-        },
-        {
-          key: 'shuliang',
+          key: 'voltage',
           value: 24,
           d: 'V',
           label: '电压',
@@ -54,7 +54,7 @@ export default {
           iconPath: require('@/assets/home/dianya.png')
         },
         {
-          key: 'shuliang',
+          key: 'current',
           value: 26,
           d: 'A',
           label: '电流',
@@ -62,7 +62,7 @@ export default {
           iconPath: require('@/assets/home/dianliu.png')
         },
         {
-          key: 'fadianliang',
+          key: 'power',
           value: 20,
           d: 'w',
           label: '功率',
@@ -70,7 +70,7 @@ export default {
           iconPath: require('@/assets/home/gonglv.png')
         },
         {
-          key: 'rongliang',
+          key: 'powerFactor',
           value: 100,
           d: '',
           label: '功率因数',
@@ -81,12 +81,7 @@ export default {
     }
   },
   computed: {
-    leftList() {
-      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
-    },
-    rightList() {
-      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
-    }
+  
   },
   watch: {
     propsTotal: {