添加测距和图层管理

frontend/src/api/ecoFlow/index.ts

@@ -12,3 +12,11 @@ export function getEcoFlowStandardData(params?: EcoFlowQueryParams): Promise<{ d
         params
     });
 }
+
+export function getQgcStaticData(params?: EcoFlowQueryParams): Promise<{ data: EcoFlowStandard[] }> {
+    return request({
+        url: '/eng/eq/interval/qgc/getQgcStaticData',
+        method: 'post',
+        data:params
+    });
+}

frontend/src/components/mapController/Calculate.vue

@@ -0,0 +1,61 @@
+<template>
+  <a-tooltip placement="left" trigger="click" color="transparent">
+    <template #title>
+      <div class="calculate">
+        <a-tooltip title="测距" placement="top">
+          <div class="map-controller-item">
+            <i class="icon iconfont icon-ranging"></i>
+          </div>
+        </a-tooltip>
+        <a-tooltip title="测面积" placement="top">
+          <div class="map-controller-item">
+            <i class="icon iconfont icon-measure"></i>
+          </div>
+        </a-tooltip>
+        <a-tooltip title="清除" placement="top">
+          <div class="map-controller-item">
+            <i class="icon iconfont icon-clear"></i>
+          </div>
+        </a-tooltip>
+      </div>
+    </template>
+    <div class="map-item">
+      <i class="icon iconfont icon-measuringTool"></i>
+    </div>
+  </a-tooltip>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+const calculateClick = () => {
+  console.log("点击了测量工具");
+};
+</script>
+<style scoped lang="scss">
+.map-item {
+  height: 40px;
+  width: 40px;
+  color: #000;
+  line-height: 40px;
+  text-align: center;
+  position: relative;
+  cursor: pointer;
+  .iconfont {
+    font-size: 20px;
+  }
+  &:hover {
+    background-color: #005292;
+    color: #ffffff;
+  }
+}
+.calculate {
+  display: flex;
+  color: rgba(0, 0, 0, 0.85);
+  padding-left: 10px;
+  background-color: #fff;
+  margin-right: 2px;
+  .map-controller-item {
+    cursor: pointer;
+    padding-right: 10px;
+  }
+}
+</style>

frontend/src/components/mapController/LayerController.vue

@@ -0,0 +1,128 @@
+<template>
+  <a-tooltip placement="leftBottom" trigger="click" color="transparent" :overlayInnerStyle="{boxShadow: 'none'}">
+    <template #title>
+      <div class="layers-tree">
+        <div class="layers-tree-title">图层管理</div>
+        <div class="layers-tree-content">
+          <a-Tree
+            checkable
+            :onCheck="onCheck"
+            :checkedKeys="checkedKeys"
+            :treeData="layerConfigs"
+          />
+        </div>
+      </div>
+    </template>
+    <div class="map-item">
+      <i class="icon iconfont icon-layer"></i>
+    </div>
+  </a-tooltip>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+const onCheck = () => {
+  console.log("点击了测量工具");
+};
+const checkedKeys = ref([]);
+const layerConfigs = ref([
+  {
+    title: "图层1",
+    key: "layer1",
+    children: [
+      {
+        title: "子图层1",
+        key: "sublayer1",
+      },
+    ],
+  },
+  {
+    title: "图层2",
+    key: "layer2",
+  },
+  {
+    title: "图层3",
+    key: "layer3",
+  },
+  {
+    title: "图层4",
+    key: "layer4",
+  },
+  {
+    title: "图层5",
+    key: "layer5",
+  },
+  {
+    title: "图层6",
+    key: "layer6",
+  },
+  {
+    title: "图层7",
+    key: "layer7",
+  },
+  {
+    title: "图层8",
+    key: "layer8",
+  },
+  {
+    title: "图层9",
+    key: "layer9",
+  },
+  {
+    title: "图层10",
+    key: "layer10",
+  },
+  {
+    title: "图层11",
+    key: "layer11",
+  },
+  {
+    title: "图层12",
+    key: "layer12",
+  },
+  {
+    title: "图层13",
+    key: "layer13",
+  },
+]);
+const onSelect = (selectedKeys: any) => {
+  console.log(selectedKeys);
+};
+</script>
+<style scoped lang="scss">
+.map-item {
+  height: 40px;
+  width: 40px;
+  color: #000;
+  line-height: 40px;
+  text-align: center;
+  position: relative;
+  cursor: pointer;
+  .iconfont {
+    font-size: 20px;
+  }
+  &:hover {
+    background-color: #005292;
+    color: #ffffff;
+  }
+}
+.layers-tree {
+  width: 230px;
+  box-shadow: 0 1px 2px #00000026;
+  background-color: #fff;
+  cursor: initial;
+  border: 1px solid #ccdae7;
+  .layers-tree-title {
+    color: rgba(0, 0, 0, 0.85);
+    text-align: left;
+    padding-left: 10px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    border-bottom: 1px dotted #ccc;
+  }
+  .layers-tree-content {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+}
+</style>

frontend/src/components/mapController/index.vue

@@ -1,17 +1,25 @@
 <template>
   <div class="map-controller" :style="{ right: drawerOpen ? '480px' : '12px' }">
-    <div class="map-controller-group" v-for="item in controllers" :key="item.key">
+    <div class="map-controller-group" v-for="item in controllers">
-      <a-tooltip :title="item.name" placement="left">
+      <a-tooltip
-        <div class="map-controller-item">
+        :title="child.name"
-          <i class="icon iconfont" :class="'icon-' + item.icon"></i>
+        :placement="child.key === 'Calculate' ? 'right' : 'left'"
+        v-for="child in item.children"
+        :key="child.key"
+      >
+        <component v-if="child.component" :is="child.component" />
+        <div v-else class="map-controller-item" @click="handleControllerClick(child)">
+          <i class="icon iconfont" :class="'icon-' + child.icon"></i>
         </div>
       </a-tooltip>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useUiStore } from "@/store/modules/ui";
+import Calculate from "./Calculate.vue";
+import LayerController from "./LayerController.vue";
 
 // 使用 Pinia store
 const uiStore = useUiStore();
@@ -29,7 +37,7 @@ const isFullScreen = ref(false);
 const mapType = ref("2D");
 
 // 响应式的控制器配置
-const controllers = ref([
+const controllers: any = computed(() => [
   {
     children: [
       {
@@ -40,13 +48,13 @@ const controllers = ref([
     ],
   },
 
-  {
-    name: "定位",
-    key: "positioning",
-    icon: "iconGlobal",
-  },
   {
     children: [
+      // {
+      //   name: "定位",
+      //   key: "positioning",
+      //   icon: "iconGlobal",
+      // },
       {
         name: "放大",
         key: "zoomIn",
@@ -59,37 +67,91 @@ const controllers = ref([
       },
     ],
   },
+  {
+    children: [
       {
         name: "3D",
         key: "dim",
         icon: mapType.value === "2D" ? "a-3D" : "a-2D",
       },
+    ],
+  },
   {
-    name: "图层",
+    children: [
+      {
+        name: "图层管理",
         key: "layerController",
-    icon: "layer",
+        component: LayerController,
+      },
+    ],
   },
   {
-    name: "下载",
+    children: [
-    key: "screenShot",
+      {
-    icon: "downLoad",
+        name: "测量工具",
+        key: "Calculate",
+        component: Calculate,
       },
+    ],
+  },
+  {
+    children: [
       {
         name: "梯级",
         key: "TJ",
         icon: "tiji",
       },
-  {
+    ],
-    name: "倾斜摄影",
-    key: "OSBGController",
-    icon: "obliquePhotography",
   },
   {
-    name: "三维漫游",
+    children: [
-    key: "threedRoam",
+      {
-    icon: "roaming",
+        name: "下载",
+        key: "screenShot",
+        icon: "downLoad",
       },
+    ],
+  },
+
+  // {
+  //   name: "倾斜摄影",
+  //   key: "OSBGController",
+  //   icon: "obliquePhotography",
+  // },
+  // {
+  //   name: "三维漫游",
+  //   key: "threedRoam",
+  //   icon: "roaming",
+  // },
 ]);
+
+// 添加全屏切换功能
+const toggleFullScreen = () => {
+  isFullScreen.value = !isFullScreen.value;
+  // 这里可以添加实际的浏览器全屏切换逻辑
+  if (isFullScreen.value) {
+    document.documentElement.requestFullscreen();
+  } else {
+    document.exitFullscreen();
+  }
+};
+
+// 控制器点击事件处理
+const handleControllerClick = (item: any) => {
+  switch (item.key) {
+    case "fullScreen":
+      toggleFullScreen();
+      break;
+    case "rightDrawer":
+      // 使用全局事件切换右侧面板
+      // GlobalEvents.get('rightDrawerState').set(!drawerOpen);
+      break;
+    // 可以在这里添加其他控制器的处理逻辑
+    default:
+      console.log(`点击了控制器: ${item.name}`);
+      break;
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -118,9 +180,9 @@ const controllers = ref([
         color: #ffffff;
       }
     }
+  }
   .map-controller-group:not(:first-child) {
     margin-top: 10px;
   }
 }
-}
 </style>

frontend/src/modules/jidiSelectorMod.vue

@@ -1,55 +1,15 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
 const loading = ref(false);
 const isOpen = ref(true);
-const jidiData = ref([
+const jidiData = useJidiSelectEventStore().jidiData;
-  {
+
-    id: 1,
-    name: "当前全部",
-  },
-  {
-    id: 2,
-    name: "水电基地2",
-  },
-  {
-    id: 3,
-    name: "水电基地3",
-  },
-  {
-    id: 4,
-    name: "水电基地4",
-  },
-  {
-    id: 5,
-    name: "水电基地5",
-  },
-  {
-    id: 6,
-    name: "水电基地6",
-  },
-  {
-    id: 7,
-    name: "水电基地7",
-  },
-  {
-    id: 8,
-    name: "水电基地8",
-  },
-  {
-    id: 9,
-    name: "水电基地9",
-  },
-  {
-    id: 10,
-    name: "水电基地10",
-  },
-  {
-    id: 11,
-    name: "水电基地11",
-  },
-]);
 const jidiDataNum = ref(9);
 const selectedItem: any = ref(1);
+const itemClick = (id: any) => {
+  selectedItem.value = id;
+};
 </script>
 
 <template>
@@ -71,7 +31,7 @@ const selectedItem: any = ref(1);
           class="item"
           v-for="i in jidiData.slice(0, jidiDataNum)"
           :class="{ selected: selectedItem === i.id }"
-          @click="selectedItem = i.id"
+          @click="itemClick(i.id)"
         >
           <i class="icon iconfont icon-hydroPower"></i>
           <span style="margin-left: 10px">{{ i.name }}</span>

frontend/src/store/modules/jidiSelectEvent.ts

@@ -0,0 +1,55 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useJidiSelectEventStore = defineStore('jidiSelectEvent', () => {
+  const jidiData = ref([
+  {
+    id: 1,
+    name: "当前全部",
+  },
+  {
+    id: 2,
+    name: "水电基地2",
+  },
+  {
+    id: 3,
+    name: "水电基地3",
+  },
+  {
+    id: 4,
+    name: "水电基地4",
+  },
+  {
+    id: 5,
+    name: "水电基地5",
+  },
+  {
+    id: 6,
+    name: "水电基地6",
+  },
+  {
+    id: 7,
+    name: "水电基地7",
+  },
+  {
+    id: 8,
+    name: "水电基地8",
+  },
+  {
+    id: 9,
+    name: "水电基地9",
+  },
+  {
+    id: 10,
+    name: "水电基地10",
+  },
+  {
+    id: 11,
+    name: "水电基地11",
+  },
+]);
+
+  return {
+    jidiData
+  };
+});

frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue

@@ -1,8 +1,26 @@
 <script setup lang="ts">
+import { onMounted } from "vue";
 import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
 import RightDrawer from "@/components/RightDrawer/index.vue";
 import jidiInfoMod from "@/modules/jidiInfoMod/index.vue";
 import shuidianhuangjingjieruMod from "@/modules/shuidianhuangjingjieruMod/index.vue";
+import { getQgcStaticData } from "@/api/ecoFlow";
+onMounted(() => {
+  const params = {
+    filter: {
+      logic: "and",
+      filters: [
+        { field: "dtin", operator: "eq", dataType: "string", value: "1" },
+        { field: "type", operator: "eq", dataType: "string", value: "hour" },
+        { field: "tm", operator: "gte", dataType: "date", value: "2026-03-02 00:00:00" },
+        { field: "tm", operator: "lte", dataType: "date", value: "2026-04-02 23:59:59" },
+      ],
+    },
+  };
+  getQgcStaticData(params).then((res) => {
+    console.log(res);
+  });
+});
 </script>
 
 <template>