添加测距和图层管理
This commit is contained in:
扈兆增
parent
bb33cbcdb9
commit
54e8d258ad
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
61
frontend/src/components/mapController/Calculate.vue
Normal file
61
frontend/src/components/mapController/Calculate.vue
Normal file
@ -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>
|
||||
128
frontend/src/components/mapController/LayerController.vue
Normal file
128
frontend/src/components/mapController/LayerController.vue
Normal file
@ -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>
|
||||
@ -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">
|
||||
<a-tooltip :title="item.name" placement="left">
|
||||
<div class="map-controller-item">
|
||||
<i class="icon iconfont" :class="'icon-' + item.icon"></i>
|
||||
<div class="map-controller-group" v-for="item in controllers">
|
||||
<a-tooltip
|
||||
:title="child.name"
|
||||
: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: "下载",
|
||||
key: "screenShot",
|
||||
icon: "downLoad",
|
||||
children: [
|
||||
{
|
||||
name: "测量工具",
|
||||
key: "Calculate",
|
||||
component: Calculate,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
children: [
|
||||
{
|
||||
name: "梯级",
|
||||
key: "TJ",
|
||||
icon: "tiji",
|
||||
},
|
||||
{
|
||||
name: "倾斜摄影",
|
||||
key: "OSBGController",
|
||||
icon: "obliquePhotography",
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "三维漫游",
|
||||
key: "threedRoam",
|
||||
icon: "roaming",
|
||||
children: [
|
||||
{
|
||||
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>
|
||||
|
||||
@ -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([
|
||||
{
|
||||
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 jidiData = useJidiSelectEventStore().jidiData;
|
||||
|
||||
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>
|
||||
|
||||
55
frontend/src/store/modules/jidiSelectEvent.ts
Normal file
55
frontend/src/store/modules/jidiSelectEvent.ts
Normal file
@ -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
|
||||
};
|
||||
});
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user