zhengsl/WholeProcessPlatform
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

地图功能修改

Browse Source
This commit is contained in:
扈兆增 2026-07-03 15:59:05 +08:00
parent 3200f1f36f
commit 60269f9d66
39 changed files with 1434 additions and 781 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuHistory/index.vue
View File

@ -199,7 +199,17 @@ const columns = computed(() => {
}); });
const handleView = (record: any) => { const handleView = (record: any) => {
currentRecord.value = { ...record }; const transformDashToNull = obj => {
const result = { ...obj };
for (const key in result) {
if (result[key] === '-') {
result[key] = null;
}
}
return result;
};
currentRecord.value = transformDashToNull(record);
editModalVisible.value = true; editModalVisible.value = true;
}; };

11
frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
View File

@ -246,7 +246,9 @@
:class="{ imgupload_hidden: isView }" :class="{ imgupload_hidden: isView }"
> >
<a-form-item label="图片" name="picpth"> <a-form-item label="图片" name="picpth">
<div class="flex align-center">
<a-upload <a-upload
v-show="!isView"
v-model:file-list="imageFileList" v-model:file-list="imageFileList"
list-type="picture-card" list-type="picture-card"
:multiple="true" :multiple="true"
@ -262,12 +264,17 @@
<div style="margin-top: 8px">上传</div> <div style="margin-top: 8px">上传</div>
</div> </div>
</a-upload> </a-upload>
<span v-show="isView && imageFileList.length === 0">
暂无图片
</span>
</div>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :span="12"> <a-col :span="12">
<a-form-item label="视频" name="vdpth"> <a-form-item label="视频" name="vdpth">
<div class="flex align-center">
<a-upload <a-upload
v-if="!isView" v-if="!isView"
v-model:file-list="videoFileList" v-model:file-list="videoFileList"
@ -291,6 +298,10 @@
> >
点击预览视频 点击预览视频
</a-button> </a-button>
<span v-show="isView && videoFileList.length === 0">
暂无视频
</span>
</div>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>

12
frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
View File

@ -401,8 +401,18 @@ const handleEdit = (record: any, type: string) => {
isView.value = true; isView.value = true;
} else { } else {
isView.value = false; isView.value = false;
} // 浅层转换（只处理第一层属性）
const transformDashToNull = obj => {
const result = { ...obj };
for (const key in result) {
if (result[key] === '-') {
result[key] = null;
} }
currentRecord.value = { ...record }; }
return result;
};
currentRecord.value = transformDashToNull(record);
editModalVisible.value = true; editModalVisible.value = true;
}; };

83
frontend-sjtb/src/views/shuJuTianBao/shengPiJiLu/approvalDetailSearch.vue
View File

@ -14,22 +14,15 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed, onMounted } from "vue"; import { ref, computed, onMounted } from 'vue';
import dayjs from "dayjs"; import dayjs from 'dayjs';
import BasicSearch from "@/components/BasicSearch/index.vue"; import BasicSearch from '@/components/BasicSearch/index.vue';
import { DateSetting } from "@/utils/enumeration"; import { DateSetting } from '@/utils/enumeration';
import { useShuJuTianBaoStore } from "@/store/modules/shuJuTianBao"; import { useShuJuTianBaoStore } from '@/store/modules/shuJuTianBao';
interface Props {
direction: any[];
guoyuStatus: any[];
}
const props = defineProps<Props>();
const emit = defineEmits<{ const emit = defineEmits<{
(e: "reset", values: any): void; (e: 'reset', values: any): void;
(e: "search-finish", values: any): void; (e: 'search-finish', values: any): void;
}>(); }>();
const shuJuTianBaoStore = useShuJuTianBaoStore(); const shuJuTianBaoStore = useShuJuTianBaoStore();
@ -37,51 +30,51 @@ const localTypeDate = ref<string>(null);
const basicSearchRef = ref<any>(); const basicSearchRef = ref<any>();
const initSearchData = { const initSearchData = {
rvcd: "all", rvcd: 'all',
stcd: null, stcd: null,
rstcd: null, rstcd: null
strdt: [ // strdt: [
dayjs().subtract(1, "month").startOf("month").format("YYYY-MM-DD"), // dayjs().subtract(1, "month").startOf("month").format("YYYY-MM-DD"),
dayjs().endOf("day").format("YYYY-MM-DD"), // dayjs().endOf("day").format("YYYY-MM-DD"),
], // ],
}; };
const searchData = ref<any>({ ...initSearchData }); const searchData = ref<any>({ ...initSearchData });
const searchList: any = computed(() => [ const searchList: any = computed(() => [
{ {
type: "waterStation", type: 'waterStation',
name: "rvcd", name: 'rvcd',
label: "流域", label: '流域',
fieldProps: { fieldProps: {
allowClear: true, allowClear: true
},
options: [],
},
{
span: 12,
type: "RangePicker",
name: "strdt",
label: "过鱼时间",
picker: "date",
fieldProps: {
format: "YYYY-MM-DD",
valueFormat: "YYYY-MM-DD",
allowClear: false,
},
presets: DateSetting.RangeButton.month,
}, },
options: []
}
// {
// span: 12,
// type: "RangePicker",
// name: "strdt",
// label: "过鱼时间",
// picker: "date",
// fieldProps: {
// format: "YYYY-MM-DD",
// valueFormat: "YYYY-MM-DD",
// allowClear: false,
// },
// presets: DateSetting.RangeButton.month,
// },
]); ]);
const onSearchFinish = (values: any) => { const onSearchFinish = (values: any) => {
emit("search-finish", values); emit('search-finish', values);
}; };
const onValuesChange = (changedValues: any, allValues: any) => { const onValuesChange = (changedValues: any, allValues: any) => {
searchData.value = { ...searchData.value, ...allValues }; searchData.value = { ...searchData.value, ...allValues };
if ( if (
Object.keys(changedValues)[0] == "rstcd" || Object.keys(changedValues)[0] == 'rstcd' ||
Object.keys(changedValues)[0] == "rvcd" Object.keys(changedValues)[0] == 'rvcd'
) { ) {
const formInstance = basicSearchRef.value?.formData; const formInstance = basicSearchRef.value?.formData;
formInstance.stcd = null; formInstance.stcd = null;
@ -90,12 +83,12 @@ const onValuesChange = (changedValues: any, allValues: any) => {
const handleReset = () => { const handleReset = () => {
localTypeDate.value = null; localTypeDate.value = null;
emit("reset", initSearchData); emit('reset', initSearchData);
}; };
onMounted(() => { onMounted(() => {
emit("search-finish", initSearchData); emit('search-finish', initSearchData);
shuJuTianBaoStore.getFpssOption("", ""); shuJuTianBaoStore.getFpssOption('', '');
}); });
</script> </script>

61
frontend-sjtb/src/views/shuJuTianBao/shengPiJiLu/index.vue
View File

@ -19,7 +19,7 @@
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<!-- 使用 bodyCell 插槽自定义单元格渲染 --> <!-- 使用 bodyCell 插槽自定义单元格渲染 -->
<template #action="{ column, record }"> <template #action="{ record }">
<div class="flex"> <div class="flex">
<a-button type="link" size="small" @click="handleShowDetail(record)" <a-button type="link" size="small" @click="handleShowDetail(record)"
>详情</a-button >详情</a-button
@ -55,7 +55,7 @@
:list-url="getApprovalLogList" :list-url="getApprovalLogList"
:scroll-y="500" :scroll-y="500"
> >
<template #action="{ column, record }"> <template #action="{ record }">
{{ handName(record.action, actionTypeDict) }} {{ handName(record.action, actionTypeDict) }}
</template> </template>
</BasicTable> </BasicTable>
@ -82,13 +82,13 @@
:list-url="getApprovalChangeLogList" :list-url="getApprovalChangeLogList"
:scroll-y="500" :scroll-y="500"
> >
<template #operationType="{ column, record }"> <template #operationType="{ record }">
{{ handName(record.operationType, operationTypeDict) }} {{ handName(record.operationType, operationTypeDict) }}
</template> </template>
<template #bizType="{ column, record }"> <template #bizType="{ record }">
{{ handName(record.bizType, yeWuType) }} {{ handName(record.bizType, yeWuType) }}
</template> </template>
<template #changeJson="{ column, record }"> <template #changeJson="{ record }">
<pre style="max-height: 200px; overflow: auto; margin: 0">{{ <pre style="max-height: 200px; overflow: auto; margin: 0">{{
record.changeJson record.changeJson
}}</pre> }}</pre>
@ -122,7 +122,7 @@
:scroll-y="'500px'" :scroll-y="'500px'"
:transform-data="customTransform" :transform-data="customTransform"
> >
<template #isfs="{ column, record }"> <template #isfs="{ record }">
<a-tag <a-tag
:color=" :color="
record.isfs === 1 || record.isfs === '1' ? 'success' : 'error' record.isfs === 1 || record.isfs === '1' ? 'success' : 'error'
@ -131,10 +131,10 @@
{{ record.isfs === 1 || record.isfs === '1' ? '是' : '否' }} {{ record.isfs === 1 || record.isfs === '1' ? '是' : '否' }}
</a-tag> </a-tag>
</template> </template>
<template #direction="{ column, record }"> <template #direction="{ record }">
{{ handName(record.direction, direction) }} {{ handName(record.direction, direction) }}
</template> </template>
<template #action="{ column, record }"> <template #action="{ record }">
<a-button type="link" size="small" @click="handleView(record)" <a-button type="link" size="small" @click="handleView(record)"
>查看</a-button >查看</a-button
> >
@ -243,7 +243,7 @@ let columns = ref([
dataIndex: 'rvnm', dataIndex: 'rvnm',
key: 'rvnm', key: 'rvnm',
title: '流域', title: '流域',
width: 120, width: 320,
fixed: 'left' fixed: 'left'
}, },
{ {
@ -346,7 +346,7 @@ let columns = ref([
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
width: 120, width: 130,
fixed: 'right', fixed: 'right',
slots: { customRender: 'action' } slots: { customRender: 'action' }
} }
@ -504,7 +504,7 @@ const detailColumns = ref([
dataIndex: 'rvnm', dataIndex: 'rvnm',
key: 'rvnm', key: 'rvnm',
title: '流域', title: '流域',
width: 120, width: 320,
fixed: 'left' fixed: 'left'
}, },
{ {
@ -518,7 +518,7 @@ const detailColumns = ref([
dataIndex: 'stnm', dataIndex: 'stnm',
key: 'stnm', key: 'stnm',
title: '过鱼设施名称', title: '过鱼设施名称',
width: 150, width: 180,
fixed: 'left' fixed: 'left'
}, },
{ dataIndex: 'strdt', key: 'strdt', title: '过鱼时间', width: 150 }, { dataIndex: 'strdt', key: 'strdt', title: '过鱼时间', width: 150 },
@ -581,18 +581,18 @@ const handleDetailSearchFinish = (values: any) => {
dataType: 'string', dataType: 'string',
value: values.ftp value: values.ftp
}, },
values.strdt && { // values.strdt && {
field: 'strdt', // field: 'strdt',
operator: 'gte', // operator: 'gte',
dataType: 'date', // dataType: 'date',
value: values.strdt[0] + ' 00:00:00' // value: values.strdt[0] + ' 00:00:00'
}, // },
values.strdt && { // values.strdt && {
field: 'strdt', // field: 'strdt',
operator: 'lte', // operator: 'lte',
dataType: 'date', // dataType: 'date',
value: values.strdt[1] + ' 23:59:59' // value: values.strdt[1] + ' 23:59:59'
}, // },
values.direction && { values.direction && {
field: 'direction', field: 'direction',
operator: 'eq', operator: 'eq',
@ -643,7 +643,18 @@ const handleShowDetail = (record: any) => {
// 查看单条记录 // 查看单条记录
const handleView = (record: any) => { const handleView = (record: any) => {
currentViewRecord.value = { ...record }; // 浅层转换（只处理第一层属性）
const transformDashToNull = obj => {
const result = { ...obj };
for (const key in result) {
if (result[key] === '-') {
result[key] = null;
}
}
return result;
};
currentViewRecord.value = transformDashToNull(record);
viewModalVisible.value = true; viewModalVisible.value = true;
}; };

1
frontend/.env.development
View File

@ -29,7 +29,6 @@ VITE_APP_TEST_ONLINE_URL = 'https://211.99.26.225:12122'
VITE_APP_BASE_API_URL = 'http://10.84.121.21:8093' VITE_APP_BASE_API_URL = 'http://10.84.121.21:8093'
## 开发环境 附件服务地址 ## 开发环境 附件服务地址
VITE_APP_ATTACHMENT_URL = 'https://211.99.26.225:12125' VITE_APP_ATTACHMENT_URL = 'https://211.99.26.225:12125'
attachment
# 地图服务地址 # 地图服务地址
VITE_APP_MAP_URL = 'https://211.99.26.225:18085' VITE_APP_MAP_URL = 'https://211.99.26.225:18085'

11
frontend/docs/问题.md
View File

@ -2,12 +2,12 @@
> 本记录用于跟踪项目开发过程中发现的问题，按日期倒序排列，并标注每项问题的发现人及处理状态。 > 本记录用于跟踪项目开发过程中发现的问题，按日期倒序排列，并标注每项问题的发现人及处理状态。
*** ---
## 问题列表（2026-06-26） ## 问题列表（2026-06-26）
| 发现日期 | 解决人 | 编号 | 问题描述 | 状态 | 备注 | | 发现日期 | 解决人 | 编号 | 问题描述 | 状态 | 备注 |
| ---------- | ------ | -- | ------------------------------------- | -- | ------ | | ---------- | ------ | ---- | ---------------------------------------------------------------------- | ------ | -------- |
| 2026-06-26 | 扈 | 1 | 基础信息图片展示是什么逻辑 | ✅ | <br /> | | 2026-06-26 | 扈 | 1 | 基础信息图片展示是什么逻辑 | ✅ | <br /> |
| 2026-06-26 | 扈 | 2 | 电站专题展示逻辑 | ✅ | <br /> | | 2026-06-26 | 扈 | 2 | 电站专题展示逻辑 | ✅ | <br /> |
| 2026-06-26 | <br /> | 3 | 实时视频回放 少接口 | ⚠ | 缺少接口 | | 2026-06-26 | <br /> | 3 | 实时视频回放 少接口 | ⚠ | 缺少接口 |
@ -24,8 +24,11 @@
| 2026-06-26 | <br /> | 14 | 地图抽吸 碰撞检测 放大到具体层级锚点抽吸了但是 popup 弹框还在显示 | ⚠ | <br /> | | 2026-06-26 | <br /> | 14 | 地图抽吸 碰撞检测 放大到具体层级锚点抽吸了但是 popup 弹框还在显示 | ⚠ | <br /> |
| 2026-06-26 | <br /> | 15 | 地图比如积石峡 放大到层级被公伯峡隐藏掉了，然后在放大才显示 抽吸的问题 | ⚠ | <br /> | | 2026-06-26 | <br /> | 15 | 地图比如积石峡 放大到层级被公伯峡隐藏掉了，然后在放大才显示 抽吸的问题 | ⚠ | <br /> |
| 2026-06-26 | <br /> | 16 | 运行情况 计划开始运行时间 接口没接 | ⚠ | <br /> | | 2026-06-26 | <br /> | 16 | 运行情况 计划开始运行时间 接口没接 | ⚠ | <br /> |
| 2026-07-01 | 王 | 17 | 所有弹框加拖动 | <br /> | <br /> |
| 2026-07-01 | 王 | 18 | 所有弹框检查宽度有的是固定的 | <br /> | <br /> |
| 2026-07-02 | 扈 | 19 | 地图点击基地切换偶发性会全部展示出来所有锚点 | <br /> | <br /> |
*** ---
## 状态说明 ## 状态说明
@ -33,6 +36,6 @@
- ⚠ – 处理中 / 待解决 - ⚠ – 处理中 / 待解决
- ❌ – 阻塞 / 未开始 - ❌ – 阻塞 / 未开始
*** ---
、 、

2
frontend/package.json
View File

@ -21,6 +21,7 @@
"@wangeditor/editor": "^5.0.0", "@wangeditor/editor": "^5.0.0",
"@wangeditor/editor-for-vue": "^5.1.10", "@wangeditor/editor-for-vue": "^5.1.10",
"ant-design-vue": "latest", "ant-design-vue": "latest",
"antdv-draggable-modal": "^1.1.6",
"axios": "^1.2.0", "axios": "^1.2.0",
"better-scroll": "^2.4.2", "better-scroll": "^2.4.2",
"cesium": "^1.141.0", "cesium": "^1.141.0",
@ -52,6 +53,7 @@
"video.js": "^8.23.7", "video.js": "^8.23.7",
"videojs-contrib-hls": "^5.15.0", "videojs-contrib-hls": "^5.15.0",
"vue": "^3.2.40", "vue": "^3.2.40",
"vue-ant-modal-enhance": "^1.2.2",
"vue-i18n": "^9.1.9", "vue-i18n": "^9.1.9",
"vue-router": "^4.1.6", "vue-router": "^4.1.6",
"vuedraggable": "^2.24.3", "vuedraggable": "^2.24.3",

29
frontend/pnpm-lock.yaml
View File

@ -41,6 +41,9 @@ importers:
ant-design-vue: ant-design-vue:
specifier: latest specifier: latest
version: 4.2.6(vue@3.5.33(typescript@6.0.3)) version: 4.2.6(vue@3.5.33(typescript@6.0.3))
antdv-draggable-modal:
specifier: ^1.1.6
version: 1.1.6(ant-design-vue@4.2.6(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3))
axios: axios:
specifier: ^1.2.0 specifier: ^1.2.0
version: 1.15.2 version: 1.15.2
@ -134,6 +137,9 @@ importers:
vue: vue:
specifier: ^3.2.40 specifier: ^3.2.40
version: 3.5.33(typescript@6.0.3) version: 3.5.33(typescript@6.0.3)
vue-ant-modal-enhance:
specifier: ^1.2.2
version: 1.2.2(ant-design-vue@4.2.6(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3))
vue-i18n: vue-i18n:
specifier: ^9.1.9 specifier: ^9.1.9
version: 9.14.5(vue@3.5.33(typescript@6.0.3)) version: 9.14.5(vue@3.5.33(typescript@6.0.3))
@ -2220,6 +2226,13 @@ packages:
peerDependencies: peerDependencies:
vue: '>=3.2.0' vue: '>=3.2.0'
antdv-draggable-modal@1.1.6:
resolution: {integrity: sha512-nGYIbkHfXBwKOtcw9lknpCdXK/Co0MpikywHREdgGI7dNm5c0zwHgolWf2XQSRvQx9sAtv2+BJYeDsJF77bncg==}
engines: {node: '>=18.0.0'}
peerDependencies:
ant-design-vue: '>=3.2.0 <4.0.0'
vue: '>=3.2.0 <3.4.0'
any-promise@1.3.0: any-promise@1.3.0:
resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==} resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
@ -5360,6 +5373,12 @@ packages:
vscode-uri@3.1.0: vscode-uri@3.1.0:
resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==} resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
vue-ant-modal-enhance@1.2.2:
resolution: {integrity: sha512-gLozUM4K+pESYcV5ljsc9rAOvy94jL4fId4oNfuxu2pT/hx1HIGnQixi08yKV4FoBOwiFe4cd6dPVqCQLNAANQ==}
peerDependencies:
ant-design-vue: ^3.0.0 || ^4.0.0
vue: ^3.2.0
vue-component-type-helpers@3.2.7: vue-component-type-helpers@3.2.7:
resolution: {integrity: sha512-+gPp5YGmhfsj1IN+xUo7y0fb4clfnOiiUA39y07yW1VzCRjzVgwLbtmdWlghh7mXrPsEaYc7rrIir/HT6C8vYQ==} resolution: {integrity: sha512-+gPp5YGmhfsj1IN+xUo7y0fb4clfnOiiUA39y07yW1VzCRjzVgwLbtmdWlghh7mXrPsEaYc7rrIir/HT6C8vYQ==}
@ -8569,6 +8588,11 @@ snapshots:
vue-types: 3.0.2(vue@3.5.33(typescript@6.0.3)) vue-types: 3.0.2(vue@3.5.33(typescript@6.0.3))
warning: 4.0.3 warning: 4.0.3
antdv-draggable-modal@1.1.6(ant-design-vue@4.2.6(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3)):
dependencies:
ant-design-vue: 4.2.6(vue@3.5.33(typescript@6.0.3))
vue: 3.5.33(typescript@6.0.3)
any-promise@1.3.0: {} any-promise@1.3.0: {}
anymatch@3.1.3: anymatch@3.1.3:
@ -11975,6 +11999,11 @@ snapshots:
vscode-uri@3.1.0: {} vscode-uri@3.1.0: {}
vue-ant-modal-enhance@1.2.2(ant-design-vue@4.2.6(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3)):
dependencies:
ant-design-vue: 4.2.6(vue@3.5.33(typescript@6.0.3))
vue: 3.5.33(typescript@6.0.3)
vue-component-type-helpers@3.2.7: {} vue-component-type-helpers@3.2.7: {}
vue-demi@0.14.10(vue@3.5.33(typescript@6.0.3)): vue-demi@0.14.10(vue@3.5.33(typescript@6.0.3)):

9
frontend/src/api/map.ts
View File

@ -3,8 +3,10 @@ import request from '@/utils/request';
// 获取图例列表 // 获取图例列表
export function getModuleMapLegendList(params?: { moduleId?: string }) { export function getModuleMapLegendList(params?: { moduleId?: string }) {
const url = params?.moduleId const url = params?.moduleId
? `/api/wmp-sys-server/mapLegend/getModuleMapLegendList?moduleId=${params.moduleId}` ? // ? `/api/wmp-sys-server/mapLegend/getModuleMapLegendList?moduleId=${params.moduleId}`
: '/api/wmp-sys-server/mapLegend/getModuleMapLegendList'; // : '/api/wmp-sys-server/mapLegend/getModuleMapLegendList';
`/mapLegend/getModuleMapLegendList?moduleId=${params.moduleId}`
: '/mapLegend/getModuleMapLegendList';
return request({ return request({
url, url,
method: 'get' method: 'get'
@ -13,7 +15,8 @@ export function getModuleMapLegendList(params?: { moduleId?: string }) {
// 获取地图配置列表 // 获取地图配置列表
export function getMapList(data: any) { export function getMapList(data: any) {
return request({ return request({
url: '/api/wmp-sys-server/mapmodule/getMapData', // url: '/api/wmp-sys-server/mapmodule/getMapData',
url: '/mapmodule/getMapData',
method: 'post', method: 'post',
data data
}); });

108
frontend/src/api/mapModal/index.ts
View File

@ -46,7 +46,7 @@ export function getBuildState(data: any) {
// 查询鱼类栖息地监测数据类型可用性 // 查询鱼类栖息地监测数据类型可用性
export function getFishTab(stcd: string) { export function getFishTab(stcd: string) {
return request({ return request({
url: `/api/wmp-env-server/we/wer/getWeDefaultData`, url: `/wte/we/wer/getWeDefaultData`,
method: 'get', method: 'get',
params: { stcd } params: { stcd }
}); });
@ -86,15 +86,15 @@ export function getPanoramaList(data: any) {
// 实时视频 // 实时视频
export function getVideoList(data: any) { export function getVideoList(data: any) {
return request({ return request({
url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList', url: '/vd/msstbprpt/GetKendoList',
method: 'post', method: 'post',
data data
}); });
} }
// 录像视频 - 时间查询 没接 // 录像视频 - 时间查询
export function getNoLiveVideoYear(data: any) { export function getNoLiveVideoYear(data: any) {
return request({ return request({
url: '/wmp-env-server/env/vd/GetKendoListCust', url: '/vd/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
@ -103,7 +103,7 @@ export function getNoLiveVideoYear(data: any) {
// 录像视频 // 录像视频
export function getNoLiveVideoList(data: any) { export function getNoLiveVideoList(data: any) {
return request({ return request({
url: '/wmp-env-server/env/vd/runData/GetKendoListCust', url: '/vd/runData/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
@ -306,7 +306,6 @@ export function getFishZHFX(data: any) {
data data
}); });
} }
export function getRunStateAnalysis(data: any) { export function getRunStateAnalysis(data: any) {
return request({ return request({
url: '/fp/run/analysis/GetKendoListCust', url: '/fp/run/analysis/GetKendoListCust',
@ -314,51 +313,51 @@ export function getRunStateAnalysis(data: any) {
data data
}); });
} }
// ai运行识别 没接 // ai运行识别
export function getAIYXSB(data: any) { export function getAIYXSB(data: any) {
return request({ return request({
url: '/api/dec-lygk-base-server/base/msstbprpt/getStInfoByStcd', url: '/fp/msstbprpt/getStInfoByStcd',
method: 'get', method: 'get',
params: data params: data
}); });
} }
// ai运行识别 视频/表格 没接 // ai运行识别 视频/表格
export function getAIComList(data: any) { export function getAIComList(data: any) {
return request({ return request({
url: '/wmp-env-server/env/ai/com/GetKendoListCust', url: '/warn/ai/com/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
} }
// ai运行识别 日历 没接 // ai运行识别 日历
export function getAIComCalendar(data: any) { export function getAIComCalendar(data: any) {
return request({ return request({
url: '/wmp-env-server/env/ai/com/qgc/aiRecord/GetKendoListCust', url: '/warn/ai/com/qgc/aiRecord/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
} }
// ai运行 日历点击 没接 // ai运行 日历点击
export function getAIComCalendarClick(data: any) { export function getAIComCalendarClick(data: any) {
return request({ return request({
url: '/wmp-env-server/env/ai/com/qgc/aiFile/GetKendoListCust', url: '/warn/ai/com/qgc/aiFile/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
} }
// 鱼类增殖站 - 运行数据 -获取年 没接 // 鱼类增殖站 - 运行数据 -获取年
export function getFishProgressionYear(data: any) { export function getFishProgressionYear(data: any) {
return request({ return request({
url: '/wmp-env-server/fb/fbrdmr/getFbRelatedYrByStcd', url: '/fb/fbrdmr/getFbRelatedYrByStcd',
method: 'get', method: 'get',
params: data params: data
}); });
} }
//鱼类增殖站 - 运行数据 -获取鱼 没接 //鱼类增殖站 - 运行数据 -获取鱼
export function getFishProgressionFish(data: any) { export function getFishProgressionFish(data: any) {
return request({ return request({
url: '/wmp-env-server/env/fishDic/stcd/GetKendoList', url: '/fp/fishDic/stcd/GetKendoList',
method: 'post', method: 'post',
data data
}); });
@ -367,7 +366,7 @@ export function getFishProgressionFish(data: any) {
// 过程图 - 亲鱼 // 过程图 - 亲鱼
export function getProcessDiagramParentFish(data: any) { export function getProcessDiagramParentFish(data: any) {
return request({ return request({
url: '/wmp-env-server/fb/bsmfr/fish/GetKendoListCust', url: '/fb/bsmfr/fish/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
@ -376,7 +375,7 @@ export function getProcessDiagramParentFish(data: any) {
// 过程图 - 产卵/孵化 // 过程图 - 产卵/孵化
export function getProcessDiagramHatch(data: any, type: 1 | 2) { export function getProcessDiagramHatch(data: any, type: 1 | 2) {
return request({ return request({
url: `/wmp-env-server/fb/fishhatchrecr/fish/GetKendoListCust?type=${type}`, url: `/fb/fishhatchrecr/fish/GetKendoListCust?type=${type}`,
method: 'post', method: 'post',
data data
}); });
@ -385,32 +384,31 @@ export function getProcessDiagramHatch(data: any, type: 1 | 2) {
// 过程图 - 鱼苗 // 过程图 - 鱼苗
export function getProcessDiagramFishFry(data: any) { export function getProcessDiagramFishFry(data: any) {
return request({ return request({
url: '/wmp-env-server/fb/fishbreedr/fish/GetKendoListCust', url: '/fb/fishbreedr/fish/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
} }
//增值放流情况 获取年 没接 //增值放流情况 获取年
export function getNormalAddedSituationYear(data: any) { export function getNormalAddedSituationYear(data: any) {
return request({ return request({
url: '/wmp-env-server/fb/msfbrdm/fbFlData/GetKendoListCust', url: '/fb/msfbrdm/fbFlData/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
} }
//增值放流情况 列表 没接 //增值放流情况 列表
export function getNormalAddedSituation(data: any) { export function getNormalAddedSituation(data: any) {
return request({ return request({
url: '/wmp-env-server/fb/msfbrdm/qgc/GetKendoListCust', url: '/fb/msfbrdm/qgc/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
} }
// 科研情况 没接 // 科研情况
export function getNormalResearchSituation(data: any) { export function getNormalResearchSituation(data: any) {
return request({ return request({
url: '/wmp-env-server/base/researchb/GetKendoList', url: '/fb/base/researchb/GetKendoList',
method: 'post', method: 'post',
data data
}); });
@ -418,23 +416,23 @@ export function getNormalResearchSituation(data: any) {
// 珍稀植物园 - 运行数据 没接 // 珍稀植物园 - 运行数据 没接
export function getNormalDataMonitoring2Year(data: any) { export function getNormalDataMonitoring2Year(data: any) {
return request({ return request({
url: '/wmp-env-server/env/vpr/year/GetKendoListCust', url: '/vap/vpr/year/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
} }
// 珍稀植物园 - 运行数据 列表 没接 // 珍稀植物园 - 运行数据 列表
export function getNormalDataMonitoring2List(data: any) { export function getNormalDataMonitoring2List(data: any) {
return request({ return request({
url: '/wmp-env-server/env/vpr/basinVpIntDetail', url: '/vap/vpr/basinVpIntDetail',
method: 'post', method: 'post',
data data
}); });
} }
// 珍稀动物园 - 监测数据 时间 没接 // 珍稀动物园 - 监测数据 时间
export function getNormal2Year(data: any) { export function getNormal2Year(data: any) {
return request({ return request({
url: '/wmp-env-server/env/var/year/GetKendoListCust', url: '/vap/var/year/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
@ -443,7 +441,7 @@ export function getNormal2Year(data: any) {
// 珍稀动物园 - 监测数据 列表 没接 // 珍稀动物园 - 监测数据 列表 没接
export function getNormal2List(data: any) { export function getNormal2List(data: any) {
return request({ return request({
url: '/wmp-env-server/env/var/GetKendoListCust', url: '/vap/var/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
@ -451,31 +449,23 @@ export function getNormal2List(data: any) {
// 水生生态调查断面 - 监测数据 年份 没接 // 水生生态调查断面 - 监测数据 年份 没接
export function getEcologyYear(data: any) { export function getEcologyYear(data: any) {
return request({ return request({
url: '/wmp-env-server/we/wer/getWeYr', url: '/wte/we/wer/getWeYr',
method: 'get', method: 'get',
params: data params: data
}); });
} }
// 水生生态调查断面 - 监测数据 调查批次 没接 // 水生生态调查断面 - 监测数据 调查批次
export function getEcologyBatch(data: any) { export function getEcologyBatch(data: any) {
return request({ return request({
url: '/wmp-env-server/env/we/fisht/GetKendoListCust', url: '/wte/we/fisht/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
} }
// 水生生态调查断面 - 监测数据 保护类型 没接 // 水生生态调查断面 - 监测数据 调查鱼类列表
export function getEcologyProtectType(data: any) {
return request({
url: '/api/dec-modules-usm-springcloud-starter/usm/v1/dict/getRemoteDictTreeValue',
method: 'get',
params: data
});
}
// 水生生态调查断面 - 监测数据 调查鱼类列表 没接
export function getEcologyList(data: any) { export function getEcologyList(data: any) {
return request({ return request({
url: '/wmp-env-server/env/we/fisht/qgc/GetKendoListCust', url: '/wte/we/fisht/qgc/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
@ -483,7 +473,7 @@ export function getEcologyList(data: any) {
// 水生生态调查断面 - 监测数据 水温列表 没接 // 水生生态调查断面 - 监测数据 水温列表 没接
export function getEcologyList1(data: any) { export function getEcologyList1(data: any) {
return request({ return request({
url: '/wmp-env-server/we/wewtr/GetKendoListCust', url: '/wte/we/wewtr/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
@ -491,7 +481,7 @@ export function getEcologyList1(data: any) {
// 水生生态调查断面 - 监测数据 水质列表 没接 // 水生生态调查断面 - 监测数据 水质列表 没接
export function getEcologyList2(data: any) { export function getEcologyList2(data: any) {
return request({ return request({
url: '/wmp-env-server/we/wewqr/GetKendoListCust', url: '/wte/we/wewqr/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
@ -500,23 +490,23 @@ export function getEcologyList2(data: any) {
// 水生生态调查断面 - 监测数据 流速列表 没接 // 水生生态调查断面 - 监测数据 流速列表 没接
export function getEcologyList3(data: any) { export function getEcologyList3(data: any) {
return request({ return request({
url: '/wmp-env-server/env/we/fvR/GetKendoListCust', url: '/wte/we/fvR/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
} }
// 野生动物检测 -现场录像 - 年份 - 没接 // 野生动物检测 -现场录像 - 年份
export function getLiveFootageYear(data: any) { export function getLiveFootageYear(data: any) {
return request({ return request({
url: '/wmp-env-server/env/wva/default/GetKendoListCust', url: '/wte/wva/default/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
} }
// 野生动物检测 -现场录像 - 没接 // 野生动物检测 -现场录像
export function getLiveFootageList(data: any) { export function getLiveFootageList(data: any) {
return request({ return request({
url: '/wmp-env-server/env/wva/GetKendoListCust', url: '/wte/wva/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
@ -524,15 +514,15 @@ export function getLiveFootageList(data: any) {
// 鱼类分布明细 - 年 没接 // 鱼类分布明细 - 年 没接
export function getFishDistributionYear(data: any) { export function getFishDistributionYear(data: any) {
return request({ return request({
url: '/wmp-env-server/we/wer/getWeYr', url: '/wte/we/wer/getWeYr',
method: 'get', method: 'get',
params: data params: data
}); });
} }
// 鱼类分布明细 - 列表 没接 // 鱼类分布明细 - 列表
export function getFishDistributionList(data: any) { export function getFishDistributionList(data: any) {
return request({ return request({
url: '/wmp-env-server/env/we/fisht/qgc/GetKendoListCust', url: '/wte/we/fisht/qgc/GetKendoListCust',
method: 'post', method: 'post',
data data
}); });
@ -540,14 +530,14 @@ export function getFishDistributionList(data: any) {
// 生态流量泄放设施 - 监测数据 年份 没接 // 生态流量泄放设施 - 监测数据 年份 没接
export function getFlowDischargeYear(data: any) { export function getFlowDischargeYear(data: any) {
return request({ return request({
url: '/wmp-env-server/env/operat/default/year', url: '/eq/operat/default/year',
method: 'post', method: 'post',
data data
}); });
} }
export function getFlowDischargeList(code: string, data: any) { export function getFlowDischargeList(code: string, data: any) {
return request({ return request({
url: `/apo/dec-lygk-base-server/base/stbprpData/GetKendoListCust?tbCode=${code}`, url: `/env/engInfo/stbprpData/GetKendoListCust?tbCode=${code}`,
method: 'post', method: 'post',
data data
}); });

6
frontend/src/components/BasicSearch/index.vue
View File

@ -219,6 +219,7 @@
children: 'children' children: 'children'
} }
" "
:filterTreeNode="filterTreeNode"
:show-search="item.showSearch !== false" :show-search="item.showSearch !== false"
:tree-checkable="item.treeCheckable" :tree-checkable="item.treeCheckable"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
@ -333,12 +334,15 @@ const formData = reactive<any>({});
const rules = reactive<Record<string, any>>({}); const rules = reactive<Record<string, any>>({});
const filterOption = (inputValue: string, option: any) => { const filterOption = (inputValue: string, option: any) => {
const label = option.label || ''; const label = option.label || option.name || '';
const reachcdName = option.reachcdName || ''; const reachcdName = option.reachcdName || '';
const keyword = inputValue || ''; const keyword = inputValue || '';
return label.indexOf(keyword) !== -1 || reachcdName.indexOf(keyword) !== -1; return label.indexOf(keyword) !== -1 || reachcdName.indexOf(keyword) !== -1;
}; };
const filterTreeNode = (inputValue: string, option: any) => {
return filterOption(inputValue, option);
};
// 2. 创建计算属性，自动过滤掉 false/null/undefined 的项 // 2. 创建计算属性，自动过滤掉 false/null/undefined 的项
const validSearchList = computed(() => { const validSearchList = computed(() => {
return props.searchList.filter(item => item); return props.searchList.filter(item => item);

7
frontend/src/components/BasicTable/index.vue
View File

@ -638,7 +638,12 @@ const enhancedColumns = computed(() => {
ellipsis: true, ellipsis: true,
customRender: ({ text }: { text: any }) => { customRender: ({ text }: { text: any }) => {
// 如果 text 是空值，直接返回占位符 // 如果 text 是空值，直接返回占位符
if (text === null || text === undefined || text === '') { if (
text === null ||
text === undefined ||
text === '' ||
text === '-'
) {
return props.emptyPlaceholder; return props.emptyPlaceholder;
} }
// 使用 h 函数创建 Tooltip // 使用 h 函数创建 Tooltip

1
frontend/src/components/MapModal/components/AIYXSB/index.vue
View File

@ -136,7 +136,6 @@
@panel-change="handleCalendarPanelChange" @panel-change="handleCalendarPanelChange"
@select="handleCalendarSelect" @select="handleCalendarSelect"
> >
<template #headerRender="{ current }"> </template>
<template #dateCellRender="{ current }"> <template #dateCellRender="{ current }">
<div class="calendar-content"> <div class="calendar-content">
<template v-if="isCurrentMonth(current)"> <template v-if="isCurrentMonth(current)">

17
frontend/src/components/MapModal/index.vue
View File

@ -247,7 +247,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch, computed } from 'vue'; import { ref, watch, computed, toRef } from 'vue';
// 导入预定义的 Tab 内容组件 // 导入预定义的 Tab 内容组件
import BasicInfo from './components/BasicInfo.vue'; // 基本信息 import BasicInfo from './components/BasicInfo.vue'; // 基本信息
import VideoInfo from './components/videoInfo.vue'; // 实时视频 import VideoInfo from './components/videoInfo.vue'; // 实时视频
@ -300,6 +300,7 @@ import {
getMonitorDataWaterTempPowerStation2, getMonitorDataWaterTempPowerStation2,
checkPowerStationTopic checkPowerStationTopic
} from '@/api/mapModal'; } from '@/api/mapModal';
import { useDraggable } from '@/utils/drag';
// import { useRouter } from 'vue-router'; // import { useRouter } from 'vue-router';
const modelStore = useModelStore(); const modelStore = useModelStore();
@ -601,7 +602,6 @@ const setQGCTabList = async (_tabs: any, stcd: string) => {
}; };
const res2 = await getVideoList(params); const res2 = await getVideoList(params);
console.log('', modelStore.params.sttp); console.log('', modelStore.params.sttp);
//
if ( if (
res2?.data?.data?.length > 0 || res2?.data?.data?.length > 0 ||
res2?.data?.records?.length > 0 || res2?.data?.records?.length > 0 ||
@ -645,17 +645,10 @@ const applyTabFilters = async (params: any) => {
} else if (isLCJ && sttpCode === 'WE') { } else if (isLCJ && sttpCode === 'WE') {
// LCJ 鱼类栖息地数据类型检查 // LCJ 鱼类栖息地数据类型检查
await checkFishTab(stcd); await checkFishTab(stcd);
} else if ( } else if (sttpCode === 'WQ' || sttpCode === 'WQFB' || sttpCode === 'wq') {
( sttpCode === 'WQ') ||
sttpCode === 'WQFB' ||
sttpCode === 'wq'
) {
// 水质 AI 预测检查（React 逻辑：WQ 需要条件，WQFB/wq 无条件） // 水质 AI 预测检查（React 逻辑：WQ 需要条件，WQFB/wq 无条件）
await checkAnalysisAvailability(stcd); await checkAnalysisAvailability(stcd);
} else if ( } else if (sttpCode === 'WT' || sttpCode === 'wt') {
( sttpCode === 'WT') ||
sttpCode === 'wt'
) {
// 水温站特殊处理（React 逻辑：WT 需要条件，wt 无条件） // 水温站特殊处理（React 逻辑：WT 需要条件，wt 无条件）
await checkWaterTempConfig(stcd); await checkWaterTempConfig(stcd);
} else if ( } else if (
@ -841,6 +834,8 @@ const props = defineProps<{
data?: any; // 可选：传递给内部组件的数据 data?: any; // 可选：传递给内部组件的数据
}>(); }>();
// 启用弹窗拖拽（限制在可视区域内）
useDraggable(toRef(props, 'visible'), { boundary: true, resetOnOpen: true });
// 定义 Emits // 定义 Emits
// 添加 'update:activeKey' 以支持 v-model:active-key // 添加 'update:activeKey' 以支持 v-model:active-key
const emit = defineEmits<{ const emit = defineEmits<{

1
frontend/src/components/gis/GisView.vue
View File

@ -128,7 +128,6 @@ watch(
onMounted(() => { onMounted(() => {
init(); init();
// @ts-ignore
window.mapClass = mapClass; window.mapClass = mapClass;
}); });

55
frontend/src/components/gis/map.ol.ts
View File

@ -12,8 +12,6 @@ import Stroke from 'ol/style/Stroke';
import Icon from 'ol/style/Icon'; import Icon from 'ol/style/Icon';
import Text from 'ol/style/Text'; import Text from 'ol/style/Text';
import Circle from 'ol/style/Circle'; import Circle from 'ol/style/Circle';
import RegularShape from 'ol/style/RegularShape';
import Cluster from 'ol/source/Cluster';
import WMTS from 'ol/source/WMTS'; import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS'; import WMTSTileGrid from 'ol/tilegrid/WMTS';
import { get as getProjection, fromLonLat } from 'ol/proj'; import { get as getProjection, fromLonLat } from 'ol/proj';
@ -75,6 +73,7 @@ export class MapOl implements MapInterface {
geoJsonData1: any = null; geoJsonData1: any = null;
private BASEID = ''; private BASEID = '';
private currentClipGeoJson: any | null = null; private currentClipGeoJson: any | null = null;
private clipRequestController: AbortController | null = null;
private hoveredFeatureId: string | number | null = null; private hoveredFeatureId: string | number | null = null;
private popupManager: PopupManager; private popupManager: PopupManager;
private regionMaskManager: RegionMaskManager; private regionMaskManager: RegionMaskManager;
@ -98,15 +97,20 @@ export class MapOl implements MapInterface {
defaultZoom: INITIAL_ZOOM defaultZoom: INITIAL_ZOOM
}); });
} }
private async loadGeoJsonData(url): Promise<any> { private async loadGeoJsonData(url, signal?: AbortSignal): Promise<any> {
try { try {
const response = await fetch(url); const response = await fetch(url, { signal });
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json(); const data = await response.json();
return data; return data;
} catch (error) { } catch (error: any) {
if (error.name !== 'AbortError') {
console.error('配置加载失败:', error); console.error('配置加载失败:', error);
} }
} }
}
//地图初始化 //地图初始化
init(container: HTMLElement): Promise<any> { init(container: HTMLElement): Promise<any> {
try { try {
@ -222,6 +226,11 @@ export class MapOl implements MapInterface {
_mdoptions?: MDOptions _mdoptions?: MDOptions
): void { ): void {
this.pointLayerManager.addDataLayer(pointData, layerType); this.pointLayerManager.addDataLayer(pointData, layerType);
if (this.currentClipGeoJson) {
this.regionMaskManager.filterPointsByRegion(this.currentClipGeoJson);
}
const currentZoom = this.view ? this.view.getZoom() : INITIAL_ZOOM; const currentZoom = this.view ? this.view.getZoom() : INITIAL_ZOOM;
this.pointLayerManager.updateNearbyFeatureLayout(currentZoom); this.pointLayerManager.updateNearbyFeatureLayout(currentZoom);
this.requestRefreshPointLabelVisibility(true); this.requestRefreshPointLabelVisibility(true);
@ -1124,11 +1133,7 @@ export class MapOl implements MapInterface {
* 初始化加载基础图层 * 初始化加载基础图层
* @param layer 图层配置对象 * @param layer 图层配置对象
*/ */
addBaseDataLayer( addBaseDataLayer(layer: any, isShow: boolean, isCache = false): void {
layer: any,
isShow: boolean,
isCache: boolean = false
): void {
if (!this.map) return; if (!this.map) return;
// 备注：同 key 的底图重复添加前先移除旧实例，避免注册表覆盖后旧图层仍残留在地图上。 // 备注：同 key 的底图重复添加前先移除旧实例，避免注册表覆盖后旧图层仍残留在地图上。
@ -1142,7 +1147,7 @@ export class MapOl implements MapInterface {
if (layer.type === 'wmts') { if (layer.type === 'wmts') {
if (!layer.url) return; if (!layer.url) return;
let url = !isCache ? layer.url : layer.url_3d; const url = !isCache ? layer.url : layer.url_3d;
const urlParams = new URLSearchParams(url.split('?')[1]); const urlParams = new URLSearchParams(url.split('?')[1]);
if (layer.key === this.REGISTRY_KEY) { if (layer.key === this.REGISTRY_KEY) {
this.baseLayerConfig = layer; this.baseLayerConfig = layer;
@ -1311,6 +1316,11 @@ export class MapOl implements MapInterface {
return; return;
} }
if (this.clipRequestController) {
this.clipRequestController.abort();
this.clipRequestController = null;
}
this.BASEID = _regionId; this.BASEID = _regionId;
if (!isAll) { if (!isAll) {
@ -1327,21 +1337,40 @@ export class MapOl implements MapInterface {
} }
this.regionMaskManager.hideAllPoints(); this.regionMaskManager.hideAllPoints();
this.clipRequestController = new AbortController();
const signal = this.clipRequestController.signal;
try { try {
const url = const url =
this.hydropBaseConfig.geojson_url + this.hydropBaseConfig.geojson_url +
`&cql_filter=BASEID='${this.BASEID}'`; `&cql_filter=BASEID='${this.BASEID}'`;
const geoJsonData = await this.loadGeoJsonData(url); const geoJsonData = await this.loadGeoJsonData(url, signal);
if (signal.aborted) {
return;
}
if (this.BASEID !== _regionId) {
return;
}
this.currentClipGeoJson = geoJsonData; this.currentClipGeoJson = geoJsonData;
this.regionMaskManager.filterPointsByRegion(geoJsonData); this.regionMaskManager.filterPointsByRegion(geoJsonData);
this.regionMaskManager.fitViewToGeoJson(geoJsonData); this.regionMaskManager.fitViewToGeoJson(geoJsonData);
this.regionMaskManager.applyMapMaskToLayers(baseLayers, geoJsonData); this.regionMaskManager.applyMapMaskToLayers(baseLayers, geoJsonData);
} catch (error) { } catch (error: any) {
if (error.name === 'AbortError') {
return;
}
this.currentClipGeoJson = null; this.currentClipGeoJson = null;
console.error('加载裁切数据失败:', error); console.error('加载裁切数据失败:', error);
this.regionMaskManager.clearMapMask(); this.regionMaskManager.clearMapMask();
this.regionMaskManager.showAllPoints(); this.regionMaskManager.showAllPoints();
} finally {
if (this.clipRequestController?.signal === signal) {
this.clipRequestController = null;
}
} }
} }
/** /**

1
frontend/src/components/gis/ol/point-layer-manager.ts
View File

@ -400,6 +400,7 @@ export class PointLayerManager {
); );
feature.set('_baseCoordinates', coord); feature.set('_baseCoordinates', coord);
feature.set('_legendVisible', true); feature.set('_legendVisible', true);
feature.set('_regionVisible', true);
feature.set('_sttpMap', item.sttpMap); feature.set('_sttpMap', item.sttpMap);
if (item.popupHtml) { if (item.popupHtml) {
feature.set('popupHtml', item.popupHtml); feature.set('popupHtml', item.popupHtml);

1
frontend/src/components/mapController/LayerController.vue
View File

@ -56,7 +56,6 @@ const layerConfigs = computed(() => {
return convertCheckedToBoolean(mapConfigStore.layerConfigTree); return convertCheckedToBoolean(mapConfigStore.layerConfigTree);
}); });
// 备注：选中图层完全以运行态 store 为唯一来源，组件不再维护额外同步状态。 // 备注：选中图层完全以运行态 store 为唯一来源，组件不再维护额外同步状态。
const checkedKeys = computed(() => mapViewStore.checkedLayerKeys || []); const checkedKeys = computed(() => mapViewStore.checkedLayerKeys || []);
const tooltipVisible = ref(false); const tooltipVisible = ref(false);

2
frontend/src/components/mapFilter/index.vue
View File

@ -26,11 +26,9 @@
<a-form-item label="" name="siteRangePicker"> <a-form-item label="" name="siteRangePicker">
<a-range-picker <a-range-picker
v-model:value="searchTimeRange" v-model:value="searchTimeRange"
picker="date"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
:allow-clear="false" :allow-clear="false"
show-time
:presets="DateSetting.RangeButton.days1" :presets="DateSetting.RangeButton.days1"
style="width: 100%" style="width: 100%"
@change="triggerManualValuesChange" @change="triggerManualValuesChange"

2
frontend/src/components/mapLegend/index.vue
View File

@ -87,6 +87,7 @@ const hasEnvFac = computed(() =>
); );
const legendItemClick = (item: any) => { const legendItemClick = (item: any) => {
console.log(item);
if (item.parentName == '环保设施') return; if (item.parentName == '环保设施') return;
if (item.canBeChecked == 0) { if (item.canBeChecked == 0) {
return; return;
@ -121,6 +122,7 @@ const toggleGroup = (group: any) => {
if (leafItems.length === 0) return; if (leafItems.length === 0) return;
const hasAnyChecked = leafItems.some((item: any) => item.checked === 1); const hasAnyChecked = leafItems.some((item: any) => item.checked === 1);
const targetChecked = hasAnyChecked ? 0 : 1; const targetChecked = hasAnyChecked ? 0 : 1;
const targetNameEns = leafItems const targetNameEns = leafItems
.filter( .filter(

1
frontend/src/main.ts
View File

@ -12,7 +12,6 @@ import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css'; // Ant Design 全局样式重置 import 'ant-design-vue/dist/reset.css'; // Ant Design 全局样式重置
import dayjs from 'dayjs'; // ant 中文语言 import dayjs from 'dayjs'; // ant 中文语言
import 'dayjs/locale/zh-cn'; import 'dayjs/locale/zh-cn';
// @ts-ignore
import 'virtual:svg-icons-register'; import 'virtual:svg-icons-register';
// 3d地图 // 3d地图
import * as Cesium from 'cesium'; import * as Cesium from 'cesium';

146
frontend/src/modules/map/application/map-orchestrator.ts
View File

@ -1,4 +1,5 @@
import { watch, type WatchStopHandle } from 'vue'; import { watch, type WatchStopHandle, ref } from 'vue';
import { useRoute } from 'vue-router';
import { unByKey } from 'ol/Observable'; import { unByKey } from 'ol/Observable';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { MapClass } from '@/components/gis/map.class'; import { MapClass } from '@/components/gis/map.class';
@ -17,6 +18,7 @@ type InitializeOptions = {
type LoadPageOptions = { type LoadPageOptions = {
pageKey: string; pageKey: string;
isInitialLoad?: boolean;
}; };
type ApplyLayerSelectionOptions = { type ApplyLayerSelectionOptions = {
@ -24,9 +26,7 @@ type ApplyLayerSelectionOptions = {
triggerKey?: string; triggerKey?: string;
checked?: boolean; checked?: boolean;
}; };
const SYSTEM_ID = 'qgc';
const SYSTEM_ID = '974975A6-47FD-4C04-9ACD-68938D2992BD';
const MODULE_ID = '2157c1a1-e909-4c9f-af94-b4ccebe05808';
const HYDRO_DYNAMIC_LAYER_KEYS = [ const HYDRO_DYNAMIC_LAYER_KEYS = [
'dw_point', 'dw_point',
'stinfo_video_point', 'stinfo_video_point',
@ -47,6 +47,7 @@ const LARGE_ENG_LEGEND_PREFIX = 'large_eng_';
const MID_ENG_LEGEND_PREFIX = 'mid_eng_'; const MID_ENG_LEGEND_PREFIX = 'mid_eng_';
export const useMapOrchestrator = () => { export const useMapOrchestrator = () => {
const route = useRoute();
const mapClass = MapClass.getInstance(); const mapClass = MapClass.getInstance();
const mapStore = useMapStore(); const mapStore = useMapStore();
const mapConfigStore = useMapConfigStore(); const mapConfigStore = useMapConfigStore();
@ -56,6 +57,9 @@ export const useMapOrchestrator = () => {
let zoomListenerKey: any = null; let zoomListenerKey: any = null;
let stopBaseSelectionWatch: WatchStopHandle | null = null; let stopBaseSelectionWatch: WatchStopHandle | null = null;
const initializedBaseLayerKeys = new Set<string>(); const initializedBaseLayerKeys = new Set<string>();
const baseSelectionDebounceTimer = ref<ReturnType<typeof setTimeout> | null>(
null
);
// 备注：统一获取当前地图视图对象，避免在多个组件里重复兼容 2D/3D view 访问方式。 // 备注：统一获取当前地图视图对象，避免在多个组件里重复兼容 2D/3D view 访问方式。
const getCurrentView = () => { const getCurrentView = () => {
@ -107,50 +111,86 @@ export const useMapOrchestrator = () => {
}; };
// 备注：统一加载当前页面所需的图层配置、图例配置以及首批锚点数据。 // 备注：统一加载当前页面所需的图层配置、图例配置以及首批锚点数据。
const loadPage = async ({ pageKey }: LoadPageOptions) => { const loadPage = async ({
pageKey,
isInitialLoad = false
}: LoadPageOptions) => {
mapDataStore.setLoading(true); mapDataStore.setLoading(true);
try { try {
const hasGlobalLegendConfig =
Array.isArray(mapConfigStore.legendConfigOriginal) &&
mapConfigStore.legendConfigOriginal.length > 0;
const hasPointLayerCache =
Object.keys(mapDataStore.pointDataCache || {}).length > 0;
const shouldLoadGlobalLegend = isInitialLoad && !hasGlobalLegendConfig;
const shouldPreloadLayerData = isInitialLoad && !hasPointLayerCache;
const previousPageKey = mapConfigStore.lastLoadOptions?.pageKey || ''; const previousPageKey = mapConfigStore.lastLoadOptions?.pageKey || '';
const previousCheckedKeys = mapViewStore.getCheckedLayerKeys(); const previousCheckedKeys = mapViewStore.getCheckedLayerKeys();
const moduleId = (route.meta?.moduleId as string) || '';
const loadOptions = { const loadOptions = {
systemId: SYSTEM_ID, systemId: SYSTEM_ID,
moduleId: MODULE_ID, moduleId,
pageKey, pageKey,
description: 'true' description: 'true'
}; };
const layerConfigPromise = const layerConfigPromise =
mapConfigStore.loadPageLayerConfig(loadOptions); mapConfigStore.loadPageLayerConfig(loadOptions);
const legendConfigPromise = mapConfigStore.loadPageLegendConfig(pageKey); const legendConfigPromise = mapConfigStore.loadPageLegendConfig(
const { legendOriginal, pageLegend } = await legendConfigPromise; moduleId,
{
if (legendOriginal.length > 0) { includeGlobal: shouldLoadGlobalLegend
mapStore.setLegendData(legendOriginal, pageLegend);
} }
);
const { layerConfig } = await layerConfigPromise; // 同时等待两个 promise
const [{ layerConfig }, { legendOriginal, pageLegend }] =
await Promise.all([layerConfigPromise, legendConfigPromise]);
// 先设置图层数据（更新 checkedLayerKeys），再设置图例数据
if (layerConfig.length > 0) { if (layerConfig.length > 0) {
mapStore.setLayerData(layerConfig); mapStore.setLayerData(layerConfig);
ensureBaseLayersInitialized(layerConfig); ensureBaseLayersInitialized(layerConfig);
let checkedKeys = mapViewStore.getCheckedLayerKeys(); let checkedKeys = mapViewStore.getCheckedLayerKeys();
if (previousPageKey === pageKey && previousCheckedKeys.length > 0) { if (previousPageKey === pageKey && previousCheckedKeys.length > 0) {
const currentLayerKeys = new Set( const getAllLayerKeys = (items: any[]): string[] => {
layerConfig const keys: string[] = [];
.flatMap((item: any) => layerConfig2Flat([item])) const walk = (nodes: any[]) => {
.map((item: any) => item?.key) nodes.forEach(item => {
.filter(Boolean) if (item?.key) {
); keys.push(item.key);
}
if (item?.children?.length > 0) {
walk(item.children);
}
});
};
walk(items);
return keys;
};
const currentLayerKeys = new Set(getAllLayerKeys(layerConfig));
const runtimeCheckedKeys = previousCheckedKeys.filter(key => const runtimeCheckedKeys = previousCheckedKeys.filter(key =>
currentLayerKeys.has(key) currentLayerKeys.has(key)
); );
if (runtimeCheckedKeys.length > 0) { if (runtimeCheckedKeys.length > 0) {
mapViewStore.setCheckedLayerKeys(runtimeCheckedKeys); mapViewStore.setCheckedLayerKeys(runtimeCheckedKeys);
mapStore.setSelectedLegendData();
checkedKeys = runtimeCheckedKeys; checkedKeys = runtimeCheckedKeys;
} }
} }
// 设置图例数据（此时 checkedLayerKeys 已正确设置）
if (legendOriginal.length > 0) {
mapStore.setLegendData(legendOriginal, pageLegend);
}
if (shouldPreloadLayerData) {
mapStore.setSelectedLegendData();
await mapStore.loadAllLayerData(layerConfig, checkedKeys); await mapStore.loadAllLayerData(layerConfig, checkedKeys);
} else {
await mapStore.updateLayerData(checkedKeys, true);
mapStore.setSelectedLegendData();
}
} }
} finally { } finally {
// mapDataStore.setLoading(false); // mapDataStore.setLoading(false);
@ -180,7 +220,7 @@ export const useMapOrchestrator = () => {
popupContainer, popupContainer,
pageKey pageKey
}); });
await loadPage({ pageKey }); await loadPage({ pageKey, isInitialLoad: true });
}; };
// 备注：统一绑定地图缩放监听，让页面组件只负责触发初始化，不再直接处理缩放联动细节。 // 备注：统一绑定地图缩放监听，让页面组件只负责触发初始化，不再直接处理缩放联动细节。
@ -218,13 +258,23 @@ export const useMapOrchestrator = () => {
} }
stopBaseSelectionWatch = watch( stopBaseSelectionWatch = watch(
() => jidiSelectEventStore.selectedItem, () => jidiSelectEventStore.selectedItem?.wbsCode,
newVal => { newWbsCode => {
if (newVal?.wbsCode) { if (!newWbsCode) {
changeBaseId(newVal.wbsCode); changeBaseId('');
return;
} }
if (baseSelectionDebounceTimer.value) {
clearTimeout(baseSelectionDebounceTimer.value);
}
baseSelectionDebounceTimer.value = setTimeout(() => {
changeBaseId(newWbsCode);
baseSelectionDebounceTimer.value = null;
}, 100);
}, },
{ deep: true, immediate: true } { immediate: true }
); );
}; };
@ -237,13 +287,31 @@ export const useMapOrchestrator = () => {
await initializeMapShell(options); await initializeMapShell(options);
bindBaseSelection(); bindBaseSelection();
bindZoomListener(options.getIsHydroMenu); bindZoomListener(options.getIsHydroMenu);
await loadPage({ pageKey: options.pageKey }); await loadPage({ pageKey: options.pageKey, isInitialLoad: true });
}; };
// 备注：统一处理菜单切换后的页面配置重载，供页面 watch 直接复用。 // 备注：统一处理菜单切换后的页面配置重载，供页面 watch 直接复用。
const reloadPage = async (pageKey: string) => { const reloadPage = async (pageKey: string) => {
if (!pageKey) return; if (!pageKey) return;
await loadPage({ pageKey }); await loadPage({ pageKey, isInitialLoad: false });
};
// 备注：菜单切换前先隐藏旧页面当前可见的点图层，避免旧锚点残留到新页面接口返回之后才消失。
const hideCurrentVisiblePointLayers = () => {
const currentCheckedKeys = mapViewStore.getCheckedLayerKeys();
currentCheckedKeys.forEach(layerKey => {
const layerItem = mapStore.findLayerByKey(mapStore.layerData, layerKey);
if (
!layerItem?.key ||
layerItem.type !== 'pointMap' ||
!mapClass.hasLayer(layerItem.key)
) {
return;
}
mapClass.mdLayerTreeShowOrHidden(layerItem.key, false);
});
}; };
// 备注：统一处理图层树勾选结果归一化和地图联动，供图层树组件复用。 // 备注：统一处理图层树勾选结果归一化和地图联动，供图层树组件复用。
@ -277,6 +345,9 @@ export const useMapOrchestrator = () => {
// 备注：统一控制水电开发菜单下的动态图层增删，避免页面组件直接操作加载和勾选细节。 // 备注：统一控制水电开发菜单下的动态图层增删，避免页面组件直接操作加载和勾选细节。
const syncHydroDynamicLayers = async (visible: boolean) => { const syncHydroDynamicLayers = async (visible: boolean) => {
const currentCheckedKeys = mapViewStore.getCheckedLayerKeys(); const currentCheckedKeys = mapViewStore.getCheckedLayerKeys();
const pageDefaultCheckedKeys = new Set(
mapConfigStore.extractCheckedLayerKeys(mapStore.layerData || [])
);
if (visible) { if (visible) {
const layersToAdd = HYDRO_DYNAMIC_LAYER_KEYS.filter( const layersToAdd = HYDRO_DYNAMIC_LAYER_KEYS.filter(
@ -293,9 +364,12 @@ export const useMapOrchestrator = () => {
}); });
} }
const nextCheckedKeys = currentCheckedKeys.filter( const nextCheckedKeys = currentCheckedKeys.filter(key => {
key => !HYDRO_DYNAMIC_LAYER_KEYS.includes(key) if (!HYDRO_DYNAMIC_LAYER_KEYS.includes(key)) {
); return true;
}
return pageDefaultCheckedKeys.has(key);
});
if (nextCheckedKeys.length === currentCheckedKeys.length) { if (nextCheckedKeys.length === currentCheckedKeys.length) {
return currentCheckedKeys; return currentCheckedKeys;
@ -348,6 +422,11 @@ export const useMapOrchestrator = () => {
const handlePageChange = async (pageKey: string, isHydroMenu: boolean) => { const handlePageChange = async (pageKey: string, isHydroMenu: boolean) => {
if (!pageKey) return; if (!pageKey) return;
const previousPageKey = mapConfigStore.lastLoadOptions?.pageKey || '';
if (previousPageKey && previousPageKey !== pageKey) {
hideCurrentVisiblePointLayers();
}
await reloadPage(pageKey); await reloadPage(pageKey);
const currentZoom = getCurrentZoom(); const currentZoom = getCurrentZoom();
@ -452,7 +531,7 @@ export const useMapOrchestrator = () => {
}; };
// 备注：统一处理搜索定位，按点位编码从缓存数据中查找并飞行到目标位置。 // 备注：统一处理搜索定位，按点位编码从缓存数据中查找并飞行到目标位置。
const focusPoint = (pointId: string, zoom: number = 15) => { const focusPoint = (pointId: string, zoom = 15) => {
if (!pointId) return; if (!pointId) return;
const targetPoint = mapDataStore.pointData.find((item: any) => { const targetPoint = mapDataStore.pointData.find((item: any) => {
return item.stcd === pointId || item._id === pointId; return item.stcd === pointId || item._id === pointId;
@ -472,6 +551,11 @@ export const useMapOrchestrator = () => {
stopBaseSelectionWatch(); stopBaseSelectionWatch();
stopBaseSelectionWatch = null; stopBaseSelectionWatch = null;
} }
if (baseSelectionDebounceTimer.value) {
clearTimeout(baseSelectionDebounceTimer.value);
baseSelectionDebounceTimer.value = null;
}
}; };
return { return {

35
frontend/src/modules/map/stores/map-config.store.ts
View File

@ -9,6 +9,10 @@ type MapConfigLoadOptions = {
description?: string; description?: string;
}; };
type LegendConfigLoadOptions = {
includeGlobal?: boolean;
};
const cloneConfigData = <T>(data: T): T => { const cloneConfigData = <T>(data: T): T => {
return JSON.parse(JSON.stringify(data)); return JSON.parse(JSON.stringify(data));
}; };
@ -55,7 +59,7 @@ export const useMapConfigStore = defineStore('map-config', () => {
const walk = (nodes: any[] = []) => { const walk = (nodes: any[] = []) => {
nodes.forEach(item => { nodes.forEach(item => {
if (item?.checked === 1 && item?.key) { if (Number(item?.checked) === 1 && item?.key) {
keys.push(item.key); keys.push(item.key);
} }
if (item?.children?.length > 0) { if (item?.children?.length > 0) {
@ -157,6 +161,7 @@ export const useMapConfigStore = defineStore('map-config', () => {
moduleId: options.moduleId, moduleId: options.moduleId,
description: options.description ?? 'true' description: options.description ?? 'true'
}); });
console.log(cloneConfigData(layerRes));
const layerConfig = layerRes?.data?.mapLayerVos || []; const layerConfig = layerRes?.data?.mapLayerVos || [];
setLayerConfigTree(layerConfig); setLayerConfigTree(layerConfig);
@ -168,17 +173,32 @@ export const useMapConfigStore = defineStore('map-config', () => {
} }
}; };
const loadPageLegendConfig = async (pageKey?: string) => { const loadPageLegendConfig = async (
pageKey?: string,
options: LegendConfigLoadOptions = {}
) => {
legendLoading.value = true; legendLoading.value = true;
try { try {
const includeGlobal = options.includeGlobal !== false;
let legendOriginal = legendConfigOriginal.value || [];
let pageLegend: any[] = [];
if (includeGlobal) {
const [legendAllRes, legendPageRes] = await Promise.all([ const [legendAllRes, legendPageRes] = await Promise.all([
getModuleMapLegendList(), getModuleMapLegendList(),
getModuleMapLegendList(pageKey ? { moduleId: pageKey } : undefined) getModuleMapLegendList(pageKey ? { moduleId: pageKey } : undefined)
]); ]);
const legendOriginal = legendAllRes?.data || []; legendOriginal = legendAllRes?.data || [];
const pageLegend = legendPageRes?.data || []; pageLegend = legendPageRes?.data || [];
} else {
const legendPageRes = await getModuleMapLegendList(
pageKey ? { moduleId: pageKey } : undefined
);
pageLegend = legendPageRes?.data || [];
}
setLegendConfigOriginal(legendOriginal); setLegendConfigOriginal(legendOriginal);
setPageLegendConfig(pageLegend); setPageLegendConfig(pageLegend);
@ -194,10 +214,9 @@ export const useMapConfigStore = defineStore('map-config', () => {
// 备注：加载页面地图配置，只负责请求和保存配置数据，不处理锚点或地图渲染逻辑。 // 备注：加载页面地图配置，只负责请求和保存配置数据，不处理锚点或地图渲染逻辑。
const loadPageMapConfig = async (options: MapConfigLoadOptions) => { const loadPageMapConfig = async (options: MapConfigLoadOptions) => {
const [{ layerConfig }, { legendOriginal, pageLegend }] = await Promise.all([ const [{ layerConfig }, { legendOriginal, pageLegend }] = await Promise.all(
loadPageLayerConfig(options), [loadPageLayerConfig(options), loadPageLegendConfig(options.pageKey)]
loadPageLegendConfig(options.pageKey) );
]);
return { return {
layerConfig, layerConfig,

1
frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue
View File

@ -104,7 +104,6 @@ import { message } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts'; import type { EChartsOption } from 'echarts';
import dayjs from 'dayjs';
import { omit } from 'lodash'; import { omit } from 'lodash';
import { wbsbGetKendoList, getVmsstbprpt, DetGetKendoListCust } from '@/api/sw'; import { wbsbGetKendoList, getVmsstbprpt, DetGetKendoListCust } from '@/api/sw';
import BasicTable from '@/components/BasicTable/index.vue'; import BasicTable from '@/components/BasicTable/index.vue';

59
frontend/src/modules/shengtaidabiaoMod/index.vue
View File

@ -8,10 +8,10 @@
<p> <p>
1、统计电站范围：接入过生态流量数据的电站 1、统计电站范围：接入过生态流量数据的电站
<span <span
style="color: #5989ad; cursor: pointer; " style="color: #5989ad; cursor: pointer"
@click.stop="handleStationClick()" @click.stop="handleStationClick()"
> >
({{titleData.cnt}}) ({{ titleData.cnt }})
</span> </span>
</p> </p>
<p>2、当来水不足时，生态流量不小于入库流量判定为达标</p> <p>2、当来水不足时，生态流量不小于入库流量判定为达标</p>
@ -87,7 +87,11 @@
width="1536px" width="1536px"
:footer="null" :footer="null"
> >
<ModalYkzhbzdjcgz v-if="huanbaoModalVisible" :baseId="baseid" :titleData = titleData /> <ModalYkzhbzdjcgz
v-if="huanbaoModalVisible"
:baseId="baseid"
:titleData="titleData"
/>
</a-modal> </a-modal>
</div> </div>
</template> </template>
@ -103,6 +107,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import STLLXFFS from './TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue'; import STLLXFFS from './TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue';
import ModalYkzhbzdjcgz from './TwoLayer/ModalYkzhbzdjcgz.vue'; import ModalYkzhbzdjcgz from './TwoLayer/ModalYkzhbzdjcgz.vue';
import HuanbaoZDJCGZKZ from '@/modules/huanbaozdjcgzkzQK/index.vue'; import HuanbaoZDJCGZKZ from '@/modules/huanbaozdjcgzkzQK/index.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归） // 定义组件名（便于调试和递归）
defineOptions({ defineOptions({
name: 'shengtaidabiaoMod' name: 'shengtaidabiaoMod'
@ -142,10 +147,13 @@ const datalist: any = ref([]);
const allArr: any = ref(Array.from({ length: 20 }, (_, i) => i)); const allArr: any = ref(Array.from({ length: 20 }, (_, i) => i));
const spinning = ref(false); const spinning = ref(false);
const modalVisible = ref(false); const modalVisible = ref(false);
const modalTitle = ref('');
const selectedItem = ref<any>(null); const selectedItem = ref<any>(null);
const huanbaoModalVisible = ref(false); const huanbaoModalVisible = ref(false);
// 启用弹窗拖拽（限制在可视区域内）
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 启用弹窗拖拽（限制在可视区域内）
useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
// 处理电站数量点击事件 // 处理电站数量点击事件
const handleStationClick = () => { const handleStationClick = () => {
huanbaoModalVisible.value = true; huanbaoModalVisible.value = true;
@ -154,7 +162,6 @@ const handleStationClick = () => {
// 处理进度条点击事件 // 处理进度条点击事件
const handleBarClick = (item: any) => { const handleBarClick = (item: any) => {
selectedItem.value = item; selectedItem.value = item;
// modalTitle.value = `${item.name} - 详细信息`;
modalVisible.value = true; modalVisible.value = true;
}; };
@ -280,43 +287,41 @@ watch(
{ deep: true, immediate: true } { deep: true, immediate: true }
); );
//统计电站范围：接入过生态流量数据的电站 //统计电站范围：接入过生态流量数据的电站
const titleData:any = ref({ cnt: 0 }) const titleData: any = ref({ cnt: 0 });
const getcont = async () => { const getcont = async () => {
let params = { let params = {
"filter": { filter: {
"logic": "and", logic: 'and',
"filters": [ filters: [
{ {
"field": "showIds", field: 'showIds',
"operator": "in", operator: 'in',
"value": [ value: ['7']
"7"
]
} }
] ]
} }
} };
let res = await evnmAutoMonitorGetKendoListCust(params); let res = await evnmAutoMonitorGetKendoListCust(params);
// [ // [
// { // {
// "cnt": 452, // "cnt": 452,
// "orderInx": 7, // "orderInx": 7,
// "orderInxName": "生态流量", // "orderInxName": "生态流量",
// "sttpFullPath": "ENG", // "sttpFullPath": "ENG",
// "sttpCode": "ENG", // "sttpCode": "ENG",
// "sttpName": "生态流量" // "sttpName": "生态流量"
// } // }
// ] // ]
let list = res?.data?.data[0]; let list = res?.data?.data[0];
if (list) { if (list) {
titleData.value = list titleData.value = list;
} }
// //
}; };
// 页面加载时执行的逻辑 // 页面加载时执行的逻辑
onMounted(() => { onMounted(() => {
setStyle(); setStyle();
getcont() getcont();
}); });
</script> </script>

204
frontend/src/store/modules/map.ts
View File

@ -14,7 +14,7 @@ import { useMapConfigStore } from '@/modules/map/stores/map-config.store';
import { useMapDataStore } from '@/modules/map/stores/map-data.store'; import { useMapDataStore } from '@/modules/map/stores/map-data.store';
import { useMapViewStore } from '@/modules/map/stores/map-view.store'; import { useMapViewStore } from '@/modules/map/stores/map-view.store';
import request from '@/utils/request'; import request from '@/utils/request';
import { urlList } from '@/utils/GisUrlList'; // import { urlList } from '@/utils/GisUrlList';
const mapClass = MapClass.getInstance(); const mapClass = MapClass.getInstance();
const DEFAULT_LAYER_REQUEST_CONCURRENCY = 4; const DEFAULT_LAYER_REQUEST_CONCURRENCY = 4;
const ENG_POINT_LAYER_KEY = 'eng_point'; const ENG_POINT_LAYER_KEY = 'eng_point';
@ -47,23 +47,23 @@ const normalizeCachePayload = (value: any): any => {
return value; return value;
}; };
const buildUrlListIndex = (items: any[] = []) => { // const buildUrlListIndex = (items: any[] = []) => {
const index: Record<string, any[]> = {}; // const index: Record<string, any[]> = {};
//
items.forEach(item => { // items.forEach(item => {
[item.url, item.title, item.keyType].forEach(key => { // [item.url, item.title, item.keyType].forEach(key => {
if (!key) return; // if (!key) return;
if (!index[key]) { // if (!index[key]) {
index[key] = []; // index[key] = [];
} // }
index[key].push(item); // index[key].push(item);
}); // });
}); // });
//
return index; // return index;
}; // };
//
const urlListIndex = buildUrlListIndex(urlList); // const urlListIndex = buildUrlListIndex(urlList);
const isCanceledRequestError = (error: unknown) => { const isCanceledRequestError = (error: unknown) => {
const message = error instanceof Error ? error.message : String(error || ''); const message = error instanceof Error ? error.message : String(error || '');
@ -74,6 +74,72 @@ const isCanceledRequestError = (error: unknown) => {
); );
}; };
const buildFiltersFromParamsObject = (
paramsObject: Record<string, any> = {}
) => {
const filtersArray: any[] = [];
Object.keys(paramsObject).forEach(paramKey => {
const value = paramsObject[paramKey];
if (Array.isArray(value)) {
value.forEach((filter: any) => {
filtersArray.push({
...filter,
dataType: filter?.dataType || 'string'
});
});
return;
}
filtersArray.push({
field: paramKey,
operator: 'eq',
dataType: 'string',
value
});
});
return filtersArray;
};
const normalizeRequestParams = (rawParams: any) => {
if (!rawParams || !Object.keys(rawParams).length) {
return { logic: 'and', filters: [] };
}
if (Array.isArray(rawParams.filters)) {
return {
logic: rawParams.logic || 'and',
filters: rawParams.filters.map((filter: any) => ({
...filter,
dataType: filter?.dataType || 'string'
}))
};
}
return {
logic: 'and',
filters: buildFiltersFromParamsObject(rawParams)
};
};
const parseAnchorParamFilters = (anchorParamJson?: string) => {
if (!anchorParamJson) return [];
try {
const parsedParams = JSON.parse(anchorParamJson);
if (!parsedParams || typeof parsedParams !== 'object') {
return [];
}
return buildFiltersFromParamsObject(parsedParams);
} catch (error) {
console.error('解析 anchorParamJson 失败:', error);
return [];
}
};
export const useMapStore = defineStore('map', () => { export const useMapStore = defineStore('map', () => {
const mapConfigStore = useMapConfigStore(); const mapConfigStore = useMapConfigStore();
const mapDataStore = useMapDataStore(); const mapDataStore = useMapDataStore();
@ -260,7 +326,7 @@ export const useMapStore = defineStore('map', () => {
}; };
const getRuntimeCheckedLayerKeys = (): string[] => { const getRuntimeCheckedLayerKeys = (): string[] => {
return normalizeCheckedLayerKeys(mapViewStore.getCheckedLayerKeys()); return mapViewStore.getCheckedLayerKeys();
}; };
const syncPointDataForFilter = () => { const syncPointDataForFilter = () => {
@ -300,6 +366,7 @@ export const useMapStore = defineStore('map', () => {
mapConfigStore.setLayerConfigTree(data); mapConfigStore.setLayerConfigTree(data);
const nextCheckedLayerKeys = mapConfigStore.extractCheckedLayerKeys(data); const nextCheckedLayerKeys = mapConfigStore.extractCheckedLayerKeys(data);
mapViewStore.setCheckedLayerKeys(nextCheckedLayerKeys); mapViewStore.setCheckedLayerKeys(nextCheckedLayerKeys);
console.log(1);
rebuildLegendRuntimeData(nextCheckedLayerKeys); rebuildLegendRuntimeData(nextCheckedLayerKeys);
}; };
@ -374,6 +441,7 @@ export const useMapStore = defineStore('map', () => {
mapViewStore.setLegendCheckedState( mapViewStore.setLegendCheckedState(
buildLegendCheckedState(legendDataOriginal.value, normalizeLegendNameEn) buildLegendCheckedState(legendDataOriginal.value, normalizeLegendNameEn)
); );
console.log(2);
rebuildLegendRuntimeData(checkedLayerKeys.value); rebuildLegendRuntimeData(checkedLayerKeys.value);
}; };
@ -381,6 +449,7 @@ export const useMapStore = defineStore('map', () => {
* 设置选中的图例数据（在图层加载完成后调用） * 设置选中的图例数据（在图层加载完成后调用）
*/ */
const setSelectedLegendData = () => { const setSelectedLegendData = () => {
console.log(3);
rebuildLegendRuntimeData(checkedLayerKeys.value); rebuildLegendRuntimeData(checkedLayerKeys.value);
}; };
@ -458,7 +527,10 @@ export const useMapStore = defineStore('map', () => {
* @param isInit - 是否是初始化阶段（初始化时遍历所有图层） * @param isInit - 是否是初始化阶段（初始化时遍历所有图层）
*/ */
const updateLayerData = async (checkKeys: string[], isInit = false) => { const updateLayerData = async (checkKeys: string[], isInit = false) => {
console.log(checkKeys);
if (!isInit) {
checkKeys = normalizeCheckedLayerKeys(checkKeys); checkKeys = normalizeCheckedLayerKeys(checkKeys);
}
mapViewStore.setCheckedLayerKeys(checkKeys); mapViewStore.setCheckedLayerKeys(checkKeys);
@ -594,6 +666,11 @@ export const useMapStore = defineStore('map', () => {
const allPointData = mapDataStore.rebuildPointDataFromCache(allLayerKeys); const allPointData = mapDataStore.rebuildPointDataFromCache(allLayerKeys);
attachNearbyPointRuntimeMeta(allPointData); attachNearbyPointRuntimeMeta(allPointData);
const runtimeCheckedKeys = getRuntimeCheckedLayerKeys(); const runtimeCheckedKeys = getRuntimeCheckedLayerKeys();
const treeCheckedKeys = mapConfigStore.extractCheckedLayerKeys(
layerData.value.length > 0 ? layerData.value : items
);
const finalCheckedKeys =
runtimeCheckedKeys.length > 0 ? runtimeCheckedKeys : treeCheckedKeys;
// 备注：近邻点元数据需要基于全量点位统一识别，识别完成后同步刷新各图层 Feature。 // 备注：近邻点元数据需要基于全量点位统一识别，识别完成后同步刷新各图层 Feature。
for (const key of allLayerKeys) { for (const key of allLayerKeys) {
@ -608,7 +685,7 @@ export const useMapStore = defineStore('map', () => {
const shouldRestoreVisible = const shouldRestoreVisible =
typeof cacheChecked === 'boolean' typeof cacheChecked === 'boolean'
? cacheChecked ? cacheChecked
: layer.checked === 1 || runtimeCheckedKeys.includes(key); : layer.checked === 1 || finalCheckedKeys.includes(key);
layer.data = layerPoints; layer.data = layerPoints;
mapClass.addInitDataLayer(displayData, key); mapClass.addInitDataLayer(displayData, key);
if (shouldRestoreVisible) { if (shouldRestoreVisible) {
@ -622,7 +699,7 @@ export const useMapStore = defineStore('map', () => {
// 备注：初始化 loading 期间用户可能已经手动改过图层勾选，这里必须以最新运行态收尾， // 备注：初始化 loading 期间用户可能已经手动改过图层勾选，这里必须以最新运行态收尾，
// 不能再回放 load 启动瞬间的默认 checked 快照。 // 不能再回放 load 启动瞬间的默认 checked 快照。
await updateLayerData(runtimeCheckedKeys, true); await updateLayerData(finalCheckedKeys, true);
} finally { } finally {
mapDataStore.setLoading(false); mapDataStore.setLoading(false);
} }
@ -736,6 +813,7 @@ export const useMapStore = defineStore('map', () => {
normalizedNameEn, normalizedNameEn,
checked checked
); );
console.log(5);
rebuildLegendRuntimeData(checkedLayerKeys.value); rebuildLegendRuntimeData(checkedLayerKeys.value);
applyLegendItemVisibility(legendItem, checked); applyLegendItemVisibility(legendItem, checked);
}; };
@ -754,14 +832,13 @@ export const useMapStore = defineStore('map', () => {
}); });
mapViewStore.setLegendCheckedState(nextState); mapViewStore.setLegendCheckedState(nextState);
console.log(6);
rebuildLegendRuntimeData(checkedLayerKeys.value); rebuildLegendRuntimeData(checkedLayerKeys.value);
changedLegendItems.forEach(legendItem => changedLegendItems.forEach(legendItem =>
applyLegendItemVisibility(legendItem, checked) applyLegendItemVisibility(legendItem, checked)
); );
}; };
/**
/** /**
* 生成请求标识符，用于避免重复请求 * 生成请求标识符，用于避免重复请求
*/ */
@ -777,75 +854,32 @@ export const useMapStore = defineStore('map', () => {
layer: any, layer: any,
sessionId: number = loadSessionSeed sessionId: number = loadSessionSeed
) => { ) => {
const { key, url, params = {}, paramJson } = layer; const { key, url, params = {}, paramJson, anchorParamJson } = layer;
// 没有URL，跳过 // 没有URL，跳过
if (!url) { if (!url) {
return []; return [];
} }
const requestUrl = url;
// 参考 React 版本：使用 urlList 匹配图层配置
let requestUrl = url;
let requestParams: any = params; let requestParams: any = params;
let requestOrders: any = null; let requestOrders: any = null;
// 根据图层的 key（keyType）、title、url 查找匹配的 urlList 项
const layerKey = layer?.key || ''; const layerKey = layer?.key || '';
const layerTitle = layer?.title || '';
const matchedList =
urlListIndex[layerKey] || urlListIndex[layerTitle] || urlListIndex[url];
if (matchedList && matchedList.length > 0) { const voidSttp = 'all';
let matchedItem: any = null; const ylfbKeys = ['ylfb_point'];
if (key == 'va_built_point ' || key == 'vp_built_point') { const timeRangeLayerKeys = ['ef_point'];
matchedList.forEach(item => {
if (item.title === layerTitle) {
matchedItem = item;
}
});
} else {
matchedItem = matchedList[0];
}
requestUrl = matchedItem.url;
// 转换 params 为 filter 格式
if (matchedItem.params) {
const filtersArray: any[] = [];
for (const key in matchedItem.params) {
const value = matchedItem.params[key];
if (Array.isArray(value)) {
// 处理数组格式: { field: 'sttpCode', operator: 'eq', value: 'WQ' }
value.forEach((filter: any) => {
filtersArray.push({
...filter,
dataType: filter.dataType || 'string'
});
});
} else {
// 处理简单格式: sttpCode: 'VP'
filtersArray.push({
field: key,
operator: 'eq',
dataType: 'string',
value: value
});
}
}
requestParams = {
logic: 'and',
filters: filtersArray
};
}
let voidSttp = 'all';
const ylfbKeys = ['ylfb_point']; // 需要时间搜索的图层key
const timeRangeLayerKeys = ['ef_point']; // 需要时间搜索的图层key
const spjkz = ['stinfo_video_point']; const spjkz = ['stinfo_video_point'];
const lineTimeLayerKeys = [
'wt_rive_gradient_line',
'wq_rive_gradient_line'
]; // 需要时间搜索的图层key
let yearTime = dayjs().subtract(1, 'years'); // 鱼类分布年份 const yearTime = dayjs().subtract(1, 'years');
requestParams = normalizeRequestParams(requestParams);
const anchorParamFilters = parseAnchorParamFilters(anchorParamJson);
if (anchorParamFilters.length) {
requestParams.filters.push(...anchorParamFilters);
}
if (timeRangeLayerKeys.includes(layerKey)) { if (timeRangeLayerKeys.includes(layerKey)) {
requestParams.filters.push({ requestParams.filters.push({
field: 'tm', field: 'tm',
@ -885,10 +919,10 @@ export const useMapStore = defineStore('map', () => {
}); });
} }
} }
// 转换 orders 格式：从 JSON 字符串转换为数组格式
if (matchedItem.orders) { if (layer?.orders) {
try { try {
const ordersObj = JSON.parse(matchedItem.orders); const ordersObj = JSON.parse(layer.orders);
const ordersArray = Object.entries(ordersObj).map(([field, dir]) => ({ const ordersArray = Object.entries(ordersObj).map(([field, dir]) => ({
field, field,
dir dir
@ -898,9 +932,7 @@ export const useMapStore = defineStore('map', () => {
console.error('解析 orders 失败:', e); console.error('解析 orders 失败:', e);
} }
} }
}
// 如果没有匹配到 urlList，尝试解析 paramJson
if (!Object.keys(requestParams).length && paramJson) { if (!Object.keys(requestParams).length && paramJson) {
try { try {
const jsonObj = JSON.parse(paramJson); const jsonObj = JSON.parse(paramJson);
@ -1109,6 +1141,8 @@ export const useMapStore = defineStore('map', () => {
const allPointData = mapDataStore.rebuildPointDataFromCache(); const allPointData = mapDataStore.rebuildPointDataFromCache();
console.log(888);
console.log(currentCheckedKeys);
// 更新地图锚点显示 // 更新地图锚点显示
await updateLayerData(currentCheckedKeys, false); await updateLayerData(currentCheckedKeys, false);
} }

3
frontend/src/store/modules/permission.ts
View File

@ -15,7 +15,8 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
// ✅ 保存原始名称到 meta，用于菜单显示 // ✅ 保存原始名称到 meta，用于菜单显示
tmp.meta = { tmp.meta = {
...tmp.meta, ...tmp.meta,
title: tmp.name || tmp.menuName // 原始名称用于显示 title: tmp.name || tmp.menuName, // 原始名称用于显示
moduleId: tmp.id // 保存菜单ID，供地图模块使用
}; };
// ✅ name 使用路径生成唯一值 // ✅ name 使用路径生成唯一值
tmp.name = tmp.path || tmp.opturl; tmp.name = tmp.path || tmp.opturl;

3
frontend/src/styles/ant-design-vue.scss
View File

@ -39,3 +39,6 @@
.ant-message { .ant-message {
z-index: 2005 !important; z-index: 2005 !important;
} }
.ant-modal-header {
cursor: move;
}

204
frontend/src/utils/GisUrlList.ts
View File

@ -25,16 +25,16 @@ export const urlList = [
orders: orders:
'{"baseId":"asc","rvcdStepSort":"asc","siteStepSort":"asc","ennm":"asc"}' '{"baseId":"asc","rvcdStepSort":"asc","siteStepSort":"asc","ennm":"asc"}'
}, },
{ // {
url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust', // url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
title: '实际水质', // title: '实际水质',
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] } // params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
}, // },
{ // {
url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust', // url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
title: '目标水质', // title: '目标水质',
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] } // params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
}, // },
// { // {
// url: '/wmp-env-server/env/wq/anchorPoint/GetKendoListCust', // url: '/wmp-env-server/env/wq/anchorPoint/GetKendoListCust',
// title: '自建站', // title: '自建站',
@ -171,11 +171,11 @@ export const urlList = [
title: '水电站告警情况', title: '水电站告警情况',
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] } params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
}, },
{ // {
url: '/wmp-env-server/fb/point/discharge/GetKendoListCust', // url: '/wmp-env-server/fb/point/discharge/GetKendoListCust',
title: '水电站', // title: '水电站',
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] } // params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
}, // },
{ {
url: '/wmp-env-server/env/fh/zqpoint/GetKendoListCust', url: '/wmp-env-server/env/fh/zqpoint/GetKendoListCust',
title: '国家水文站', title: '国家水文站',
@ -200,19 +200,19 @@ export const urlList = [
title: '视频监控站', title: '视频监控站',
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] } params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
}, },
{ // {
url: '/wmp-env-server/env/wb/point/GetKendoListCust', // url: '/wmp-env-server/env/wb/point/GetKendoListCust',
title: '气象站', // title: '气象站',
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] } // params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
}, // },
{ // {
url: '/wmp-env-server/sw/getEngTempPointList/getLastData', // url: '/wmp-env-server/sw/getEngTempPointList/getLastData',
title: '水温站点', // title: '水温站点',
params: { // params: {
logic: 'and', // logic: 'and',
filters: [] // filters: []
} // }
}, // },
{ {
url: '/wmp-env-server/env/wq/anchorPoint/GetKendoListCust', url: '/wmp-env-server/env/wq/anchorPoint/GetKendoListCust',
title: '水质站点', title: '水质站点',
@ -233,38 +233,38 @@ export const urlList = [
}, },
orders: '{"orderIndex":"asc"}' orders: '{"orderIndex":"asc"}'
}, },
{ // {
url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust', // url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
title: '水质告警', // title: '水质告警',
params: { // params: {
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }], // lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WQ' }] // sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WQ' }]
} // }
}, // },
{ // {
url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust', // url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
title: '水温告警', // title: '水温告警',
params: { // params: {
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }], // lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WTRV' }] // sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WTRV' }]
} // }
}, // },
{ // {
url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust', // url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
title: '水位告警', // title: '水位告警',
params: { // params: {
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }], // lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'ENG' }] // sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'ENG' }]
} // }
}, // },
{ // {
url: '/wmp-env-server/env/warn/stcd/operatePoint/GetKendoListCust', // url: '/wmp-env-server/env/warn/stcd/operatePoint/GetKendoListCust',
title: '环保设施告警', // title: '环保设施告警',
params: { // params: {
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }], // lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
yr: dayjs().format('YYYY') // yr: dayjs().format('YYYY')
} // }
}, // },
{ {
url: '/wmp-env-server/env/fp/point/built/GetKendoListCust', url: '/wmp-env-server/env/fp/point/built/GetKendoListCust',
title: '在建过鱼设施-地图锚点', title: '在建过鱼设施-地图锚点',
@ -273,24 +273,24 @@ export const urlList = [
bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }] bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
} }
}, },
{ // {
url: '/wmp-env-server/env/fb/point/built/GetKendoListCust', // url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
title: '在建鱼类增殖站', // title: '在建鱼类增殖站',
params: { // params: {
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }], // lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'FB' }], // sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'FB' }],
bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }] // bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
} // }
}, // },
{ // {
url: '/wmp-env-server/env/fb/point/built/GetKendoListCust', // url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
title: '在建人工产卵场', // title: '在建人工产卵场',
params: { // params: {
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }], // lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'SG' }], // sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'SG' }],
bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }] // bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
} // }
}, // },
{ {
url: '/wmp-env-server/env/fhvap/built/GetKendoListCust', url: '/wmp-env-server/env/fhvap/built/GetKendoListCust',
title: '在建珍稀植物园', title: '在建珍稀植物园',
@ -309,21 +309,21 @@ export const urlList = [
bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }] bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
} }
}, },
{ // {
url: '/wmp-env-server/eng/eq/eqds/built/GetKendoListCust', // url: '/wmp-env-server/eng/eq/eqds/built/GetKendoListCust',
title: '在建生态流量泄放设施', // title: '在建生态流量泄放设施',
params: { // params: {
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }], // lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
BLDSTT_CCODE: [{ field: 'BLDSTT_CCODE', operator: 'eq', value: '1' }] // BLDSTT_CCODE: [{ field: 'BLDSTT_CCODE', operator: 'eq', value: '1' }]
} // }
}, // },
{ // {
url: '/wmp-env-server/env/we/fishList/point/GetKendoList', // url: '/wmp-env-server/env/we/fishList/point/GetKendoList',
title: '鱼类沿程', // title: '鱼类沿程',
params: { // params: {
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] // lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
} // }
}, // },
{ {
url: '/wmp-env-server/env/wva/point/GetKendoListCust', url: '/wmp-env-server/env/wva/point/GetKendoListCust',
title: '野生动物监测', title: '野生动物监测',
@ -332,15 +332,15 @@ export const urlList = [
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WVA' }] sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WVA' }]
} }
}, },
{ // {
url: '/wmp-env-server/env/we/fishList/point/GetNativeRareFish', // url: '/wmp-env-server/env/we/fishList/point/GetNativeRareFish',
title: '土著珍稀鱼类', // title: '土著珍稀鱼类',
params: { // params: {
rare: '1', // rare: '1',
specOrigin: '1', // specOrigin: '1',
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] // lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
} // }
}, // },
// { url: '/wmp-env-server/te/tet/point/GetTerrestrialAnimal', title: '陆生动物分布', params: { baseId: window?.__lyConfigs?.baseId, lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] } }, // { url: '/wmp-env-server/te/tet/point/GetTerrestrialAnimal', title: '陆生动物分布', params: { baseId: window?.__lyConfigs?.baseId, lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] } },
{ {
url: '/wmp-env-server/sdFprdR/point/getFprdPointList', url: '/wmp-env-server/sdFprdR/point/getFprdPointList',

153
frontend/src/utils/drag.ts Normal file
View File

@ -0,0 +1,153 @@
import { nextTick, watch } from 'vue';
export interface DraggableOptions {
/** 拖拽手柄选择器，默认 '.ant-modal-header' */
handle?: string;
/** 弹窗内容选择器，默认 '.ant-modal-content' */
modalSelector?: string;
/** 是否限制在可视区域内，默认 true */
boundary?: boolean;
/** 打开弹窗时是否自动重置到居中位置，默认 true */
resetOnOpen?: boolean;
}
export function useDraggable(
openRef: { value: boolean },
options: DraggableOptions = {}
) {
console.log(openRef);
const {
handle = '.ant-modal-header',
modalSelector = '.ant-modal-content',
boundary = true,
resetOnOpen = true
} = options;
let cleanup: (() => void) | null = null;
const initDrag = (): (() => void) | null => {
const modalContent = document.querySelector(
modalSelector
) as HTMLElement | null;
const dragHandle = document.querySelector(handle) as HTMLElement | null;
if (!modalContent || !dragHandle) return null;
// 重置位置到居中
if (resetOnOpen) {
modalContent.style.position = '';
modalContent.style.left = '';
modalContent.style.top = '';
modalContent.style.margin = '';
modalContent.style.transform = '';
}
let isDragging = false;
let startX = 0;
let startY = 0;
let startLeft = 0;
let startTop = 0;
const getPointerPos = (e: MouseEvent | TouchEvent) => {
if (e instanceof TouchEvent) {
const touch = e.touches[0];
return { clientX: touch.clientX, clientY: touch.clientY };
}
return { clientX: e.clientX, clientY: e.clientY };
};
const onPointerDown = (e: MouseEvent | TouchEvent) => {
if (
e.target instanceof HTMLElement &&
(e.target.closest('.ant-modal-close') ||
e.target.closest('button') ||
e.target.closest('input') ||
e.target.closest('select') ||
e.target.closest('textarea') ||
e.target.closest('a'))
)
return;
e.preventDefault();
isDragging = true;
const rect = modalContent.getBoundingClientRect();
startLeft = rect.left;
startTop = rect.top;
const pos = getPointerPos(e);
startX = pos.clientX - startLeft;
startY = pos.clientY - startTop;
// --- 新增：固定宽度 ---
const currentWidth = modalContent.offsetWidth;
modalContent.style.width = currentWidth + 'px';
modalContent.style.userSelect = 'none';
modalContent.style.webkitUserSelect = 'none';
modalContent.style.position = 'fixed';
modalContent.style.margin = '0';
modalContent.style.transform = 'none';
document.addEventListener('mousemove', onPointerMove, { passive: false });
document.addEventListener('mouseup', onPointerUp);
document.addEventListener('touchmove', onPointerMove, { passive: false });
document.addEventListener('touchend', onPointerUp);
};
const onPointerMove = (e: MouseEvent | TouchEvent) => {
if (!isDragging) return;
e.preventDefault();
const pos = getPointerPos(e);
let newLeft = pos.clientX - startX;
let newTop = pos.clientY - startY;
if (boundary) {
const maxX = window.innerWidth - modalContent.offsetWidth;
const maxY = window.innerHeight - modalContent.offsetHeight;
newLeft = Math.max(0, Math.min(newLeft, maxX));
newTop = Math.max(0, Math.min(newTop, maxY));
}
modalContent.style.left = `${newLeft}px`;
modalContent.style.top = `${newTop}px`;
};
const onPointerUp = () => {
isDragging = false;
modalContent.style.userSelect = '';
modalContent.style.webkitUserSelect = '';
document.removeEventListener('mousemove', onPointerMove);
document.removeEventListener('mouseup', onPointerUp);
document.removeEventListener('touchmove', onPointerMove);
document.removeEventListener('touchend', onPointerUp);
};
dragHandle.addEventListener('mousedown', onPointerDown);
dragHandle.addEventListener('touchstart', onPointerDown, {
passive: false
});
return () => {
dragHandle.removeEventListener('mousedown', onPointerDown);
dragHandle.removeEventListener('touchstart', onPointerDown);
document.removeEventListener('mousemove', onPointerMove);
document.removeEventListener('mouseup', onPointerUp);
document.removeEventListener('touchmove', onPointerMove);
document.removeEventListener('touchend', onPointerUp);
};
};
watch(
openRef,
newVal => {
if (newVal) {
nextTick(() => {
cleanup = initDrag();
});
} else {
cleanup?.();
cleanup = null;
}
},
{ immediate: true }
);
return { initDrag };
}

15
frontend/src/views/system/map/components/LayerManagement/LayerManagementForm.vue
View File

@ -58,6 +58,14 @@
placeholder="请输入锚点接口" placeholder="请输入锚点接口"
/> />
</a-form-item> </a-form-item>
<a-form-item label="接口参数" name="anchorParamJson" v-if="isInterface">
<a-textarea
:rows="6"
v-model:value="formData.anchorParamJson"
style="width: 100%"
placeholder="请输入接口参数"
/>
</a-form-item>
<a-form-item <a-form-item
label="三维接口" label="三维接口"
name="urlThd" name="urlThd"
@ -140,9 +148,14 @@ const defaultFormData = reactive({
id: undefined, id: undefined,
title: undefined, title: undefined,
code: undefined, code: undefined,
type: undefined,
treeLevel: undefined, treeLevel: undefined,
description: undefined, description: undefined,
parentId: undefined parentId: undefined,
url: undefined,
urlThd: undefined,
paramJson: undefined,
anchorParamJson: undefined
}); });
const typeOpiton = ref<any>([]); const typeOpiton = ref<any>([]);
const formData: any = reactive({ ...defaultFormData }); const formData: any = reactive({ ...defaultFormData });

28
frontend/src/views/system/map/components/LayerManagement/index.vue
View File

@ -13,7 +13,7 @@
:list-url="getAllMapLayerTree" :list-url="getAllMapLayerTree"
:search-params="searchParams" :search-params="searchParams"
> >
<template #action="{ column, record }"> <template #action="{ record }">
<div class="flex gap-[6px]"> <div class="flex gap-[6px]">
<a-button <a-button
class="!p-0" class="!p-0"
@ -47,13 +47,13 @@
> >
</div> </div>
</template> </template>
<template #enable="{ column, record }"> <template #enable="{ record }">
<a-switch <a-switch
:checked="record.enable === 1" :checked="record.enable === 1"
@change="(checked: boolean) => handleEnableChange(record, checked)" @change="(checked: boolean) => handleEnableChange(record, checked)"
/> />
</template> </template>
<template #checkable="{ column, record }"> <template #checkable="{ record }">
<a-switch <a-switch
:checked="record.checkable === 1" :checked="record.checkable === 1"
@change="(checked: boolean) => handleCheckableChange(record, checked)" @change="(checked: boolean) => handleCheckableChange(record, checked)"
@ -89,7 +89,10 @@ const columns = [
title: '', title: '',
dataIndex: '', dataIndex: '',
key: '', key: '',
width: 50 width: 50,
customRender: () => {
return '';
}
}, },
{ {
title: '序号', title: '序号',
@ -226,8 +229,9 @@ const handleAdd = (record: any) => {
// 过滤掉值为 '-' 的字段 // 过滤掉值为 '-' 的字段
const filterRecord = (record: any) => { const filterRecord = (record: any) => {
const filtered: any = {}; const filtered: any = {};
const keepKeys = ['code']; // 这些键始终保留
Object.keys(record).forEach(key => { Object.keys(record).forEach(key => {
if (record[key] !== '-') { if (keepKeys.includes(key) || record[key] !== '-') {
filtered[key] = record[key]; filtered[key] = record[key];
} }
}); });
@ -236,6 +240,7 @@ const filterRecord = (record: any) => {
// 编辑处理 // 编辑处理
const handleEdit = (record: any) => { const handleEdit = (record: any) => {
console.log('handleEdit', record);
parentId.value = null; parentId.value = null;
isInterface.value = false; isInterface.value = false;
currentRecord.value = filterRecord(record); currentRecord.value = filterRecord(record);
@ -243,8 +248,10 @@ const handleEdit = (record: any) => {
}; };
// 编辑接口处理 // 编辑接口处理
const handleEditInterface = (record: any) => { const handleEditInterface = (record: any) => {
isInterface.value = true; console.log('handleEdit', record);
currentRecord.value = filterRecord(record); currentRecord.value = filterRecord(record);
console.log('handleEdit', currentRecord.value);
isInterface.value = true;
parentId.value = null; parentId.value = null;
editModalVisible.value = true; editModalVisible.value = true;
}; };
@ -285,6 +292,7 @@ const handleReset = () => {
// 是否启用切换处理 // 是否启用切换处理
const handleEnableChange = (record: any, checked: boolean) => { const handleEnableChange = (record: any, checked: boolean) => {
currentRecord.value = filterRecord(record); currentRecord.value = filterRecord(record);
console.log(currentRecord.value);
record.enable = checked ? 1 : 0; record.enable = checked ? 1 : 0;
handleEditSubmit({ enable: checked ? 1 : 0 }, 'switch'); handleEditSubmit({ enable: checked ? 1 : 0 }, 'switch');
}; };
@ -310,6 +318,7 @@ const handleEditSubmit = async (values: any, type: string) => {
...values, ...values,
parentId: parentId.value parentId: parentId.value
}); });
if (res.code == 0) {
if (type === 'switch') { if (type === 'switch') {
message.success('修改状态成功'); message.success('修改状态成功');
} else { } else {
@ -317,6 +326,13 @@ const handleEditSubmit = async (values: any, type: string) => {
} }
editModalVisible.value = false; editModalVisible.value = false;
basicTable.value.refresh(); basicTable.value.refresh();
} else {
if (type === 'switch') {
message.success('修改状态成功');
} else {
message.success(`保存成功`);
}
}
} catch (error) { } catch (error) {
if (type === 'switch') { if (type === 'switch') {
message.error('修改状态失败'); message.error('修改状态失败');

83
frontend/src/views/system/map/components/LegendData/LegendDataForm.vue
View File

@ -67,29 +67,32 @@
placeholder="请输入icon编码" placeholder="请输入icon编码"
/> />
</a-form-item> </a-form-item>
<a-form-item label="父级图例名称" name="parentId"> <a-form-item label="父级图例" name="parentId">
<a-select <a-tree-select
v-model:value="formData.parentId" v-model:value="formData.parentId"
:options="LegendOptions" :tree-data="processedLegendOptions"
:fieldNames="{ :fieldNames="{
label: 'name', label: 'name',
value: 'id' value: 'id',
children: 'childrenList'
}" }"
style="width: 100%" style="width: 100%"
placeholder="请选择父级图例名称" placeholder="请选择父级图例"
@select="handleParentSelect"
/> />
</a-form-item> </a-form-item>
<a-form-item label="图层名称" name="layerCode"> <a-form-item label="图层" name="layerCode">
<a-tree-select <a-tree-select
v-model:value="formData.layerCode" v-model:value="formData.layerCode"
:tree-data="LayerOptions" :tree-data="processedLayerOptions"
:fieldNames="{ :fieldNames="{
label: 'title', label: 'title',
value: 'code', value: 'code',
children: 'children' children: 'children'
}" }"
style="width: 100%" style="width: 100%"
placeholder="请选择图层名称" placeholder="请选择图层"
@select="handleLayerSelect"
/> />
</a-form-item> </a-form-item>
<a-form-item label="二维最小缩放" name="minZoom"> <a-form-item label="二维最小缩放" name="minZoom">
@ -163,6 +166,29 @@ const options = ref([
{ label: '锚点', value: 'pointLayer' } { label: '锚点', value: 'pointLayer' }
]); ]);
const processTreeData = (data: any[], childrenKey = 'children'): any[] => {
if (!data || !Array.isArray(data)) return [];
return data.map(item => {
const newItem = { ...item };
const hasChildren = newItem[childrenKey] && newItem[childrenKey].length > 0;
if (hasChildren) {
newItem.selectable = false;
newItem[childrenKey] = processTreeData(newItem[childrenKey], childrenKey);
} else {
newItem.selectable = true;
}
return newItem;
});
};
const processedLegendOptions = computed(() => {
return processTreeData(props.LegendOptions || [], 'childrenList');
});
const processedLayerOptions = computed(() => {
return processTreeData(props.LayerOptions || [], 'children');
});
const modalVisible = computed({ const modalVisible = computed({
get: () => props.visible, get: () => props.visible,
set: val => emit('update:visible', val) set: val => emit('update:visible', val)
@ -207,6 +233,47 @@ const rules: Record<string, Rule[]> = {
}; };
const isEdit = computed(() => !!props.initialValues); const isEdit = computed(() => !!props.initialValues);
const handleChange = (value: any) => {
console.log(value);
};
const checkNodeHasChildren = (
nodes: any[],
value: any,
childrenKey: string
): boolean => {
for (const node of nodes) {
if (node.id === value || node.code === value) {
return !!(node[childrenKey] && node[childrenKey].length > 0);
}
if (node[childrenKey] && node[childrenKey].length > 0) {
if (checkNodeHasChildren(node[childrenKey], value, childrenKey)) {
return true;
}
}
}
return false;
};
const handleParentSelect = (value: any) => {
if (
value &&
checkNodeHasChildren(props.LegendOptions || [], value, 'childrenList')
) {
message.warning('请选择叶子节点，不能选择有子级的父节点');
formData.parentId = undefined;
}
};
const handleLayerSelect = (value: any) => {
if (
value &&
checkNodeHasChildren(props.LayerOptions || [], value, 'children')
) {
message.warning('请选择叶子节点，不能选择有子级的父节点');
formData.layerCode = undefined;
}
};
const handleOk = async () => { const handleOk = async () => {
try { try {

52
frontend/src/views/system/map/components/LegendData/LegendDataSelectedConfig.vue
View File

@ -9,6 +9,9 @@
> >
<div class="mb-4"> <div class="mb-4">
<a-button type="primary" @click="handleAdd">新增选中配置</a-button> <a-button type="primary" @click="handleAdd">新增选中配置</a-button>
<a-button class="ml-2" @click="handleDeleteSelected"
>删除选中配置</a-button
>
</div> </div>
<a-table <a-table
:columns="columns" :columns="columns"
@ -17,6 +20,7 @@
:pagination="pagination" :pagination="pagination"
row-key="id" row-key="id"
@change="handleTableChange" @change="handleTableChange"
:row-selection="{ onChange: onSelectChange }"
> >
<template #action="{ record }"> <template #action="{ record }">
<div class="flex gap-[6px]"> <div class="flex gap-[6px]">
@ -97,17 +101,17 @@ const columns = [
} }
}, },
{ {
title: '是否默认展示', title: '是否默认选中',
dataIndex: 'enable', dataIndex: 'checked',
key: 'enable', key: 'checked',
width: 150, width: 150,
customRender: ({ record }: any) => { customRender: ({ record }: any) => {
const text = const text =
record.enable === 1 ? '是' : record.enable === 0 ? '否' : '-'; record.checked === 1 ? '是' : record.checked === 0 ? '否' : '-';
const color = const color =
record.enable === 1 record.checked === 1
? '#52c41a' ? '#52c41a'
: record.enable === 0 : record.checked === 0
? '#ff4d4f' ? '#ff4d4f'
: '#999'; : '#999';
return h('span', { style: { color } }, text); return h('span', { style: { color } }, text);
@ -129,6 +133,7 @@ const columns = [
const tableData = ref<any[]>([]); const tableData = ref<any[]>([]);
const tableLoading = ref(false); const tableLoading = ref(false);
const selectedRows = ref<any[]>([]);
const pagination = reactive({ const pagination = reactive({
current: 1, current: 1,
pageSize: 10, pageSize: 10,
@ -155,11 +160,11 @@ const fetchTableData = async () => {
tableLoading.value = true; tableLoading.value = true;
try { try {
const res = await getAllMapLegendModuleTree({ const res = await getAllMapLegendModuleTree({
skip: pagination.current - 1, skip: pagination.current,
take: pagination.pageSize, take: pagination.pageSize,
sort: [ sort: [
{ {
field: 'orderIndex', field: 'id',
dir: 'asc' dir: 'asc'
} }
], ],
@ -184,7 +189,10 @@ const fetchTableData = async () => {
tableLoading.value = false; tableLoading.value = false;
} }
}; };
const onSelectChange = (row: any[]) => {
console.log(row);
selectedRows.value = row;
};
const handleTableChange = (pag: any) => { const handleTableChange = (pag: any) => {
pagination.current = pag.current; pagination.current = pag.current;
pagination.pageSize = pag.pageSize; pagination.pageSize = pag.pageSize;
@ -199,7 +207,7 @@ const handleAdd = () => {
// 编辑 // 编辑
const handleEdit = (record: any) => { const handleEdit = (record: any) => {
if (record.moduleId == 'tycd') { if (record.moduleId == 'common') {
record.universal = 1; record.universal = 1;
} else { } else {
record.universal = 0; record.universal = 0;
@ -226,6 +234,28 @@ const handleDelete = (record: any) => {
} }
}); });
}; };
const handleDeleteSelected = () => {
console.log(selectedRows.value);
Modal.confirm({
title: '确认删除',
content: '确定要删除选中的记录吗？',
zIndex: 2100,
onOk: async () => {
try {
let res = await deleteMapLegendModule(selectedRows.value);
if (res.code == 0) {
message.success('删除成功');
fetchTableData();
} else {
message.error('删除失败');
}
} catch (error) {
message.error('删除失败');
return;
}
}
});
};
// 表单取消 // 表单取消
const handleFormCancel = () => { const handleFormCancel = () => {
@ -241,7 +271,7 @@ const handleFormSubmit = async (values: any) => {
let res = await saveMapLegendModule({ let res = await saveMapLegendModule({
...values, ...values,
resId: props.legendId, resId: props.legendId,
resType: props.legendType resType: 'legend'
}); });
// 刷新表格数据 // 刷新表格数据
message.success('保存成功'); message.success('保存成功');

67
frontend/src/views/system/map/components/LegendData/LegendDataSelectedConfigForm.vue
View File

@ -31,7 +31,7 @@
> >
<a-tree-select <a-tree-select
v-model:value="formData.moduleId" v-model:value="formData.moduleId"
:tree-data="menuTreeData" :tree-data="processedMenuTreeData"
:field-names="{ label: 'name', value: 'id', children: 'children' }" :field-names="{ label: 'name', value: 'id', children: 'children' }"
tree-node-filter-prop="name" tree-node-filter-prop="name"
style="width: 100%" style="width: 100%"
@ -39,10 +39,11 @@
allow-clear allow-clear
show-search show-search
tree-default-expand-all tree-default-expand-all
@select="handleLayerSelect"
/> />
</a-form-item> </a-form-item>
<a-form-item label="是否选中" name="enable"> <a-form-item label="是否默认选中" name="checked">
<a-radio-group v-model:value="formData.enable"> <a-radio-group v-model:value="formData.checked">
<a-radio :value="1">是</a-radio> <a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio> <a-radio :value="0">否</a-radio>
</a-radio-group> </a-radio-group>
@ -92,11 +93,33 @@ const modalVisible = computed({
const formRef = ref(); const formRef = ref();
const menuTreeData = ref<any[]>([]); const menuTreeData = ref<any[]>([]);
const processTreeData = (data: any[], childrenKey = 'children'): any[] => {
if (!data || !Array.isArray(data)) return [];
return data.map(item => {
const newItem = { ...item };
const hasChildren = newItem[childrenKey] && newItem[childrenKey].length > 0;
if (hasChildren) {
newItem.selectable = false;
newItem[childrenKey] = processTreeData(newItem[childrenKey], childrenKey);
} else {
newItem.selectable = true;
}
return newItem;
});
};
const processedMenuTreeData = computed(() => {
return processTreeData(menuTreeData.value || [], 'children');
});
const defaultFormData = reactive({ const defaultFormData = reactive({
id: undefined, id: undefined,
legendId: undefined, legendId: undefined,
moduleId: undefined, moduleId: undefined,
enable: 1, checked: 1,
orderIndex: 0, orderIndex: 0,
universal: 0 universal: 0
}); });
@ -108,7 +131,7 @@ const rules: Record<string, Rule[]> = {
{ required: true, message: '请选择是否通用菜单', trigger: 'change' } { required: true, message: '请选择是否通用菜单', trigger: 'change' }
], ],
moduleId: [{ required: true, message: '请选择所属菜单', trigger: 'change' }], moduleId: [{ required: true, message: '请选择所属菜单', trigger: 'change' }],
enable: [{ required: true, message: '请选择是否选中', trigger: 'change' }], checked: [{ required: true, message: '请选择是否选中', trigger: 'change' }],
orderIndex: [{ required: true, message: '请输入排序', trigger: 'blur' }] orderIndex: [{ required: true, message: '请输入排序', trigger: 'blur' }]
}; };
@ -133,12 +156,16 @@ const fetchMenuTree = async () => {
const handleOk = async () => { const handleOk = async () => {
try { try {
await formRef.value.validate(); await formRef.value.validate();
const values = { ...formData, systemId: 'qgc', systemName: 'qgc' }; const values = {
...formData,
systemId: 'qgc',
systemName: 'qgc'
};
if (values.universal === 0) { if (values.universal === 0) {
delete values.universal; delete values.universal;
} else { } else {
delete values.universal; delete values.universal;
values.moduleId = 'tycd'; values.moduleId = 'common';
} }
console.log(values); console.log(values);
emit('ok', values); emit('ok', values);
@ -148,6 +175,32 @@ const handleOk = async () => {
} }
}; };
const checkNodeHasChildren = (
nodes: any[],
value: any,
childrenKey: string
): boolean => {
for (const node of nodes) {
if (node.id === value || node.code === value) {
return !!(node[childrenKey] && node[childrenKey].length > 0);
}
if (node[childrenKey] && node[childrenKey].length > 0) {
if (checkNodeHasChildren(node[childrenKey], value, childrenKey)) {
return true;
}
}
}
return false;
};
const handleLayerSelect = (value: any) => {
if (
value &&
checkNodeHasChildren(menuTreeData.value || [], value, 'children')
) {
message.warning('请选择叶子节点，不能选择有子级的父节点');
formData.moduleId = undefined;
}
};
const handleCancel = () => { const handleCancel = () => {
emit('update:visible', false); emit('update:visible', false);
emit('cancel'); emit('cancel');

14
frontend/src/views/system/map/components/LegendData/index.vue
View File

@ -15,7 +15,7 @@
:list-url="getAllMapLegendTree" :list-url="getAllMapLegendTree"
:search-params="searchParams" :search-params="searchParams"
> >
<template #action="{ column, record }"> <template #action="{ record }">
<div class="flex gap-[6px] justify-between"> <div class="flex gap-[6px] justify-between">
<a-button <a-button
class="!p-0" class="!p-0"
@ -41,19 +41,19 @@
> >
</div> </div>
</template> </template>
<template #enable="{ column, record }"> <template #enable="{ record }">
<a-switch <a-switch
:checked="record.enable === 1" :checked="record.enable === 1"
@change="(checked: boolean) => handleEnableChange(record, checked)" @change="(checked: boolean) => handleEnableChange(record, checked)"
/> />
</template> </template>
<template #internal="{ column, record }"> <template #internal="{ record }">
<a-switch <a-switch
:checked="record.internal === 1" :checked="record.internal === 1"
@change="(checked: boolean) => handleInternalChange(record, checked)" @change="(checked: boolean) => handleInternalChange(record, checked)"
/> />
</template> </template>
<template #ifShow="{ column, record }"> <template #ifShow="{ record }">
<a-switch <a-switch
:checked="record.ifShow === 1" :checked="record.ifShow === 1"
@change="(checked: boolean) => handleIfShowChange(record, checked)" @change="(checked: boolean) => handleIfShowChange(record, checked)"
@ -311,8 +311,12 @@ const handleDelete = (record: any) => {
onOk: async () => { onOk: async () => {
try { try {
let res = await deleteMapLegend([record.id]); let res = await deleteMapLegend([record.id]);
if (res.code == 1) {
message.error('删除失败');
} else {
message.success('删除成功'); message.success('删除成功');
basicTable.value.refresh(); basicTable.value.refresh();
}
} catch (error) { } catch (error) {
message.error('删除失败'); message.error('删除失败');
return; return;
@ -364,7 +368,7 @@ const handleReset = () => {
basicTable.value.getList({ basicTable.value.getList({
logic: 'and', logic: 'and',
filters: [ filters: [
{ field: 'dataType', operator: 'eq', dataType: 'string', value: '1' } { field: 'dataType', operator: 'eq', dataType: 'string', value: '2' }
] ]
}); });
}); });

13
frontend/src/views/system/map/components/LegendStructure/index.vue
View File

@ -14,7 +14,7 @@
:transformData="transformData" :transformData="transformData"
:list-url="getAllMapLegendTree" :list-url="getAllMapLegendTree"
> >
<template #action="{ column, record }"> <template #action="{ record }">
<div class="flex gap-[6px]"> <div class="flex gap-[6px]">
<a-button <a-button
class="!p-0" class="!p-0"
@ -41,19 +41,19 @@
> >
</div> </div>
</template> </template>
<template #enable="{ column, record }"> <template #enable="{ record }">
<a-switch <a-switch
:checked="record.enable === 1" :checked="record.enable === 1"
@change="(checked: boolean) => handleEnableChange(record, checked)" @change="(checked: boolean) => handleEnableChange(record, checked)"
/> />
</template> </template>
<template #internal="{ column, record }"> <template #internal="{ record }">
<a-switch <a-switch
:checked="record.internal === 1" :checked="record.internal === 1"
@change="(checked: boolean) => handleInternalChange(record, checked)" @change="(checked: boolean) => handleInternalChange(record, checked)"
/> />
</template> </template>
<template #ifShow="{ column, record }"> <template #ifShow="{ record }">
<a-switch <a-switch
:checked="record.ifShow === 1" :checked="record.ifShow === 1"
@change="(checked: boolean) => handleIfShowChange(record, checked)" @change="(checked: boolean) => handleIfShowChange(record, checked)"
@ -88,7 +88,10 @@ const columns = [
title: '', title: '',
dataIndex: '', dataIndex: '',
key: '', key: '',
width: 50 width: 50,
customRender: () => {
return null;
}
}, },
{ {
title: '序号', title: '序号',

466
frontend/src/views/system/menu/index.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from 'vue';
import { ElForm, ElMessageBox, ElMessage } from "element-plus"; import { ElForm, ElMessageBox, ElMessage } from 'element-plus';
import { import {
getdata, getdata,
addmenu, addmenu,
@ -8,20 +8,20 @@ import {
deltmenu, deltmenu,
moveOrderno, moveOrderno,
uploadIcon, uploadIcon,
moveIcon, moveIcon
} from "@/api/menu"; } from '@/api/menu';
import Sortable from "sortablejs"; import Sortable from 'sortablejs';
//定义表格数据 //定义表格数据
const url = import.meta.env.VITE_APP_BASE_API; const url = import.meta.env.VITE_APP_BASE_API;
const tableData: any = ref([]); const tableData: any = ref([]);
function gteTabledata() { function gteTabledata() {
const params = { const params = {
systemcode: systemcode.value, systemcode: systemcode.value,
name: "", name: ''
}; };
loading.value = true; loading.value = true;
getdata(params) getdata(params)
.then((res) => { .then(res => {
tableData.value = res; tableData.value = res;
loading.value = false; loading.value = false;
}) })
@ -34,54 +34,54 @@ const menuInfoRef = ref();
const btnInfoRef = ref(); const btnInfoRef = ref();
const loading = ref(false); const loading = ref(false);
//定义tabbar //定义tabbar
const systemcode = ref("1"); const systemcode = ref('1');
const activeIndex = ref("1"); const activeIndex = ref('1');
function handleSelect(key: string) { function handleSelect(key: string) {
if (key == "1") { if (key == '1') {
systemcode.value = "1"; systemcode.value = '1';
} else if (key == "2") { } else if (key == '2') {
systemcode.value = "2"; systemcode.value = '2';
} else if (key == "3") { } else if (key == '3') {
systemcode.value = "3"; systemcode.value = '3';
} }
gteTabledata(); gteTabledata();
} }
//定义搜索框文本 //定义搜索框文本
const menuname = ref(""); const menuname = ref('');
//点击搜索 //点击搜索
function search() { function search() {
menuname.value = menuname.value.replace(/\s+/g, ""); menuname.value = menuname.value.replace(/\s+/g, '');
let params = { let params = {
systemcode: systemcode.value, systemcode: systemcode.value,
name: menuname.value, name: menuname.value,
isdisplay: "", isdisplay: ''
}; };
getdata(params).then((res) => { getdata(params).then(res => {
tableData.value = res; tableData.value = res;
}); });
} }
//目录添加 //目录添加
const title = ref(""); const title = ref('');
const expertInfo: any = ref({ const expertInfo: any = ref({
name: "", name: '',
type: "0", type: '0',
opturl: "", opturl: '',
permission: "", permission: '',
isdisplay: true, isdisplay: true,
systemcode: "", systemcode: '',
icon: "", icon: '',
code: "", code: ''
}); });
const dialogVisible = ref(false); const dialogVisible = ref(false);
function addClick() { function addClick() {
title.value = "新增目录"; title.value = '新增目录';
const orgnamemage = ref({ const orgnamemage = ref({
name: "", name: '',
type: "3", type: '3',
opturl: "", opturl: '',
permission: "", permission: '',
orderno: 1, orderno: 1,
isdisplay: "1", isdisplay: '1'
}); });
expertInfo.value = orgnamemage.value; expertInfo.value = orgnamemage.value;
dialogVisible.value = true; dialogVisible.value = true;
@ -97,35 +97,37 @@ function handleClose() {
} }
//表格规则定义 //表格规则定义
const rules = ref({ const rules = ref({
name: [{ required: true, message: "请输入目录名称", trigger: "blur" }], name: [{ required: true, message: '请输入目录名称', trigger: 'blur' }],
opturl: [{ required: true, message: "请输入操作URL", trigger: "blur" }], opturl: [{ required: true, message: '请输入操作URL', trigger: 'blur' }],
permission: [{ required: true, message: "请输入目录权限标识", trigger: "blur" }], permission: [
{ required: true, message: '请输入目录权限标识', trigger: 'blur' }
]
}); });
//添加子目录 //添加子目录
const parentID = ref(""); const parentID = ref('');
function addchilder(row: any) { function addchilder(row: any) {
title.value = "新增子目录"; title.value = '新增子目录';
const orgnamemage = ref({ const orgnamemage = ref({
name: "", name: '',
type: "3", type: '3',
opturl: "", opturl: '',
permission: "", permission: '',
orderno: 1, orderno: 1,
isdisplay: "1", isdisplay: '1'
}); });
parentID.value = row.id; parentID.value = row.id;
expertInfo.value = orgnamemage.value; expertInfo.value = orgnamemage.value;
dialogVisible.value = true; dialogVisible.value = true;
iconall.value = ""; iconall.value = '';
getid.value = row.id; getid.value = row.id;
} }
//新增目录-确认按钮 //新增目录-确认按钮
function expertsubmit() { function expertsubmit() {
if (expertInfo.value.name == "") { if (expertInfo.value.name == '') {
ElMessage({ ElMessage({
message: "请填写目录名称", message: '请填写目录名称',
type: "error", type: 'error'
}); });
return false; return false;
} }
@ -133,116 +135,120 @@ function expertsubmit() {
let params = { let params = {
name: expertInfo.value.name, name: expertInfo.value.name,
systemcode: systemcode.value, systemcode: systemcode.value,
type: "0", type: '0',
parentid: "0", parentid: '0',
id: expertInfo.value.id, id: expertInfo.value.id,
icon: iconall.value, icon: iconall.value,
opturl: expertInfo.value.opturl, opturl: expertInfo.value.opturl,
isdisplay: expertInfo.value.isdisplay, isdisplay: expertInfo.value.isdisplay
}; };
editmenu(params).then(() => { editmenu(params).then(() => {
gteTabledata(); gteTabledata();
dialogVisible.value = false; dialogVisible.value = false;
ElMessage({ ElMessage({
message: "修改成功", message: '修改成功',
type: "success", type: 'success'
}); });
}); });
} else if (title.value == "新增子目录") { } else if (title.value == '新增子目录') {
let params = { let params = {
name: expertInfo.value.name, name: expertInfo.value.name,
systemcode: systemcode.value, systemcode: systemcode.value,
type: "0", type: '0',
opturl: expertInfo.value.opturl, opturl: expertInfo.value.opturl,
isdisplay: expertInfo.value.isdisplay, isdisplay: expertInfo.value.isdisplay,
parentid: parentID.value, parentid: parentID.value,
icon: iconall.value, icon: iconall.value
}; };
addmenu(params).then(() => { addmenu(params).then(() => {
gteTabledata(); gteTabledata();
dialogVisible.value = false; dialogVisible.value = false;
ElMessage({ ElMessage({
message: "新建成功", message: '新建成功',
type: "success", type: 'success'
}); });
}); });
} else { } else {
let params = { let params = {
name: expertInfo.value.name, name: expertInfo.value.name,
systemcode: systemcode.value, systemcode: systemcode.value,
type: "0", type: '0',
opturl: expertInfo.value.opturl, opturl: expertInfo.value.opturl,
isdisplay: expertInfo.value.isdisplay, isdisplay: expertInfo.value.isdisplay,
parentid: "0", parentid: '0',
id: expertInfo.value.id, id: expertInfo.value.id,
icon: iconall.value, icon: iconall.value
}; };
addmenu(params).then(() => { addmenu(params).then(() => {
gteTabledata(); gteTabledata();
dialogVisible.value = false; dialogVisible.value = false;
ElMessage({ ElMessage({
message: "新建成功", message: '新建成功',
type: "success", type: 'success'
}); });
}); });
} }
} }
//菜单目录 //菜单目录
const menurules = ref({ const menurules = ref({
name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }], name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
opturl: [{ required: true, message: "请输入操作URL", trigger: "blur" }], opturl: [{ required: true, message: '请输入操作URL', trigger: 'blur' }],
permission: [{ required: true, message: "请输入菜单权限标识", trigger: "blur" }], permission: [
{ required: true, message: '请输入菜单权限标识', trigger: 'blur' }
]
}); });
const menuVisible = ref(false); const menuVisible = ref(false);
const menutitle = ref(""); const menutitle = ref('');
//定义按钮弹窗数据 //定义按钮弹窗数据
const btnInfo: any = ref({ const btnInfo: any = ref({
name: " ", name: ' ',
orderno: " ", orderno: ' ',
islink: " ", islink: ' ',
opturl: " ", opturl: ' ',
permission: " ", permission: ' ',
isdisplay: " ", isdisplay: ' ',
icon: "", icon: ''
}); });
const btnVisible = ref(false); const btnVisible = ref(false);
const btnrules = ref({ const btnrules = ref({
name: [{ required: true, message: "请输入按钮名称", trigger: "blur" }], name: [{ required: true, message: '请输入按钮名称', trigger: 'blur' }],
permission: [{ required: true, message: "请输入按钮权限标识", trigger: "blur" }], permission: [
{ required: true, message: '请输入按钮权限标识', trigger: 'blur' }
]
}); });
//定义菜单弹窗数据 //定义菜单弹窗数据
const menuInfo: any = ref({ const menuInfo: any = ref({
name: "", name: '',
orderno: "", orderno: '',
islink: "", islink: '',
opturl: "", opturl: '',
permission: "", permission: '',
isdisplay: "", isdisplay: '',
icon: "", icon: ''
}); });
//修改目录 //修改目录
const btntitle = ref(""); const btntitle = ref('');
const getid = ref(""); const getid = ref('');
const allId = ref(""); const allId = ref('');
function handleEdit(row: any) { function handleEdit(row: any) {
iconall.value = row.icon; iconall.value = row.icon;
const Row = JSON.parse(JSON.stringify(row)); const Row = JSON.parse(JSON.stringify(row));
getid.value = row.id; getid.value = row.id;
btnparentid.value = row.parentid; btnparentid.value = row.parentid;
if (row.type == "2") { if (row.type == '2') {
btntitle.value = "修改按钮"; btntitle.value = '修改按钮';
let newInfo = ref({}); let newInfo = ref({});
newInfo.value = Row; newInfo.value = Row;
btnInfo.value = newInfo.value; btnInfo.value = newInfo.value;
btnVisible.value = true; btnVisible.value = true;
} else if (row.type == "1") { } else if (row.type == '1') {
menutitle.value = "修改菜单"; menutitle.value = '修改菜单';
let newInfo = ref({}); let newInfo = ref({});
newInfo.value = Row; newInfo.value = Row;
menuInfo.value = newInfo.value; menuInfo.value = newInfo.value;
menuVisible.value = true; menuVisible.value = true;
} else { } else {
title.value = "修改目录"; title.value = '修改目录';
let newInfo = ref({}); let newInfo = ref({});
newInfo.value = Row; newInfo.value = Row;
expertInfo.value = newInfo.value; expertInfo.value = newInfo.value;
@ -250,39 +256,39 @@ function handleEdit(row: any) {
} }
} }
//新增菜单 //新增菜单
const btnparentid = ref(""); const btnparentid = ref('');
function menuclick(row: any) { function menuclick(row: any) {
if (row.id == undefined) { if (row.id == undefined) {
btnparentid.value = "0"; btnparentid.value = '0';
} else { } else {
btnparentid.value = row.id; btnparentid.value = row.id;
} }
menutitle.value = "添加菜单"; menutitle.value = '添加菜单';
(menuInfo.value = { (menuInfo.value = {
name: "", name: '',
type: "1", type: '1',
islink: "0", islink: '0',
opturl: "", opturl: '',
permission: "", permission: '',
orderno: 1, orderno: 1,
isdisplay: "1", isdisplay: '1'
}), }),
(menuVisible.value = true); (menuVisible.value = true);
iconall.value = ""; iconall.value = '';
getid.value = row.id; getid.value = row.id;
} }
//添加按钮 //添加按钮
function btnclick(row: any) { function btnclick(row: any) {
getid.value = row.id; getid.value = row.id;
btntitle.value = "添加按钮"; btntitle.value = '添加按钮';
(btnInfo.value = { (btnInfo.value = {
name: "", name: '',
type: "2", type: '2',
islink: "0", islink: '0',
opturl: "", opturl: '',
permission: "", permission: '',
orderno: 1, orderno: 1,
isdisplay: "1", isdisplay: '1'
}), }),
(btnVisible.value = true); (btnVisible.value = true);
btnparentid.value = row.id; btnparentid.value = row.id;
@ -290,36 +296,36 @@ function btnclick(row: any) {
//删除 //删除
function handleDelete(row: any) { function handleDelete(row: any) {
const message = ref(); const message = ref();
if (row.type == "0") { if (row.type == '0') {
message.value = "确定删除此目录及此目录下的所有菜单吗？"; message.value = '确定删除此目录及此目录下的所有菜单吗？';
} else if (row.type == "1") { } else if (row.type == '1') {
message.value = "确定删除此菜单及此菜单下的所有按钮吗？"; message.value = '确定删除此菜单及此菜单下的所有按钮吗？';
} else if (row.type == "2") { } else if (row.type == '2') {
message.value = "确定删除此按钮吗？"; message.value = '确定删除此按钮吗？';
} }
ElMessageBox.confirm(message.value, "删除提示", { ElMessageBox.confirm(message.value, '删除提示', {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning'
}).then(() => { }).then(() => {
const params = { const params = {
id: row.id, id: row.id
}; };
deltmenu(params).then(() => { deltmenu(params).then(() => {
gteTabledata(); gteTabledata();
ElMessage({ ElMessage({
message: "删除成功", message: '删除成功',
type: "success", type: 'success'
}); });
}); });
}); });
} }
//菜单目录-确定 //菜单目录-确定
function menusubmit() { function menusubmit() {
if (menuInfo.value.name == "") { if (menuInfo.value.name == '') {
ElMessage({ ElMessage({
message: "请填写菜单名称", message: '请填写菜单名称',
type: "error", type: 'error'
}); });
return false; return false;
} }
@ -327,41 +333,41 @@ function menusubmit() {
let params = { let params = {
name: menuInfo.value.name, name: menuInfo.value.name,
systemcode: systemcode.value, systemcode: systemcode.value,
type: "1", type: '1',
opturl: menuInfo.value.opturl, opturl: menuInfo.value.opturl,
permission: menuInfo.value.permission, permission: menuInfo.value.permission,
islink: menuInfo.value.islink, islink: menuInfo.value.islink,
isdisplay: menuInfo.value.isdisplay, isdisplay: menuInfo.value.isdisplay,
// parentid: '', // parentid: '',
id: getid.value, id: getid.value,
icon: iconall.value, icon: iconall.value
}; };
editmenu(params).then(() => { editmenu(params).then(() => {
gteTabledata(); gteTabledata();
menuVisible.value = false; menuVisible.value = false;
ElMessage({ ElMessage({
message: "修改成功", message: '修改成功',
type: "success", type: 'success'
}); });
}); });
} else { } else {
let params = { let params = {
name: menuInfo.value.name, name: menuInfo.value.name,
systemcode: systemcode.value, systemcode: systemcode.value,
type: "1", type: '1',
opturl: menuInfo.value.opturl, opturl: menuInfo.value.opturl,
islink: menuInfo.value.islink, islink: menuInfo.value.islink,
isdisplay: menuInfo.value.isdisplay, isdisplay: menuInfo.value.isdisplay,
parentid: btnparentid.value, parentid: btnparentid.value,
id: expertInfo.value.id, id: expertInfo.value.id,
icon: iconall.value, icon: iconall.value
}; };
addmenu(params).then(() => { addmenu(params).then(() => {
gteTabledata(); gteTabledata();
menuVisible.value = false; menuVisible.value = false;
ElMessage({ ElMessage({
message: "新建成功", message: '新建成功',
type: "success", type: 'success'
}); });
}); });
} }
@ -369,10 +375,10 @@ function menusubmit() {
//按钮目录-确定 //按钮目录-确定
function btnsubmit() { function btnsubmit() {
if (btnInfo.value.name == "" || btnInfo.value.permission == "") { if (btnInfo.value.name == '' || btnInfo.value.permission == '') {
ElMessage({ ElMessage({
message: "请填写按钮名称和权限标识", message: '请填写按钮名称和权限标识',
type: "error", type: 'error'
}); });
return false; return false;
} }
@ -381,19 +387,19 @@ function btnsubmit() {
code: btnInfo.value.code, code: btnInfo.value.code,
name: btnInfo.value.name, name: btnInfo.value.name,
systemcode: systemcode.value, systemcode: systemcode.value,
type: "2", type: '2',
opturl: btnInfo.value.opturl, opturl: btnInfo.value.opturl,
permission: btnInfo.value.permission, permission: btnInfo.value.permission,
islink: btnInfo.value.islink, islink: btnInfo.value.islink,
// isdisplay: btnInfo.value.isdisplay, // isdisplay: btnInfo.value.isdisplay,
id: getid.value, id: getid.value
}; };
editmenu(params).then(() => { editmenu(params).then(() => {
gteTabledata(); gteTabledata();
dialogVisible.value = false; dialogVisible.value = false;
ElMessage({ ElMessage({
message: "修改成功", message: '修改成功',
type: "success", type: 'success'
}); });
btnVisible.value = false; btnVisible.value = false;
}); });
@ -401,19 +407,19 @@ function btnsubmit() {
let params = { let params = {
name: btnInfo.value.name, name: btnInfo.value.name,
systemcode: systemcode.value, systemcode: systemcode.value,
type: "2", type: '2',
opturl: btnInfo.value.opturl, opturl: btnInfo.value.opturl,
permission: btnInfo.value.permission, permission: btnInfo.value.permission,
islink: btnInfo.value.islink, islink: btnInfo.value.islink,
isdisplay: btnInfo.value.isdisplay, isdisplay: btnInfo.value.isdisplay,
parentid: btnparentid.value, parentid: btnparentid.value
}; };
addmenu(params).then(() => { addmenu(params).then(() => {
gteTabledata(); gteTabledata();
dialogVisible.value = false; dialogVisible.value = false;
ElMessage({ ElMessage({
message: "新建成功", message: '新建成功',
type: "success", type: 'success'
}); });
btnVisible.value = false; btnVisible.value = false;
}); });
@ -425,70 +431,88 @@ function dateFormat(row: any) {
var date = new Date(daterc); var date = new Date(daterc);
var year = date.getFullYear(); var year = date.getFullYear();
var month = var month =
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; date.getMonth() + 1 < 10
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; ? '0' + (date.getMonth() + 1)
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); : date.getMonth() + 1;
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); date.getMonth() + 1 < 10
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); ? '0' + (date.getMonth() + 1)
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); : date.getMonth() + 1;
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
var minutes =
date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
var seconds =
date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
// 拼接 // 拼接
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; return (
year +
'-' +
month +
'-' +
day +
' ' +
hours +
':' +
minutes +
':' +
seconds
);
} }
} }
//上传图标 //上传图标
function fileClick(val: any) { function fileClick(val: any) {
allId.value = val; allId.value = val;
const avatar = document.getElementById("avatar"); const avatar = document.getElementById('avatar');
avatar?.click(); avatar?.click();
} }
const iconall = ref(""); const iconall = ref('');
function changeFile(e: any) { function changeFile(e: any) {
const files = new FormData(); const files = new FormData();
files.append("icon", e.target.files[0]); files.append('icon', e.target.files[0]);
files.append("menuId", allId.value); files.append('menuId', allId.value);
uploadIcon(files) uploadIcon(files)
.then((res) => { .then(res => {
iconall.value = res.data; iconall.value = res.data;
gteTabledata(); gteTabledata();
ElMessage({ ElMessage({
type: "success", type: 'success',
message: "上传成功", message: '上传成功'
}); });
// location.reload() // location.reload()
var file: any = document.getElementById("avatar"); var file: any = document.getElementById('avatar');
file.value = ""; file.value = '';
}) })
.catch(() => { .catch(() => {
ElMessage({ ElMessage({
type: "error", type: 'error',
message: "上传失败", message: '上传失败'
}); });
var file: any = document.getElementById("avatar"); var file: any = document.getElementById('avatar');
file.value = ""; file.value = '';
}); });
} }
//图标删除事件 //图标删除事件
function delectIcon(id: any) { function delectIcon(id: any) {
ElMessageBox.confirm("确定删除此图标吗？", "删除提示", { ElMessageBox.confirm('确定删除此图标吗？', '删除提示', {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning'
}).then(() => { }).then(() => {
const params = { const params = {
id: id, id: id
}; };
moveIcon(params).then(() => { moveIcon(params).then(() => {
iconall.value = ""; iconall.value = '';
gteTabledata(); gteTabledata();
ElMessage({ ElMessage({
type: "success", type: 'success',
message: "删除成功", message: '删除成功'
}); });
}); });
}); });
} }
// Icon选择器显示状态 // Icon选择器显示状态
function treeToTile(treeData: any, childKey = "children") { function treeToTile(treeData: any, childKey = 'children') {
const arr = [] as any[]; const arr = [] as any[];
const expanded = (data: any) => { const expanded = (data: any) => {
if (data && data.length > 0) { if (data && data.length > 0) {
@ -505,9 +529,11 @@ function treeToTile(treeData: any, childKey = "children") {
} }
const activeRows: any = ref([]); const activeRows: any = ref([]);
function rowDrop() { function rowDrop() {
const tbody = document.querySelector(".draggable .el-table__body-wrapper tbody"); const tbody = document.querySelector(
'.draggable .el-table__body-wrapper tbody'
);
Sortable.create(tbody, { Sortable.create(tbody, {
draggable: ".draggable .el-table__row", draggable: '.draggable .el-table__row',
onMove: () => { onMove: () => {
activeRows.value = treeToTile(tableData.value); // 把树形的结构转为列表再进行拖拽 activeRows.value = treeToTile(tableData.value); // 把树形的结构转为列表再进行拖拽
}, },
@ -517,8 +543,8 @@ function rowDrop() {
if (oldRow.type != newRow.type) { if (oldRow.type != newRow.type) {
ElMessage({ ElMessage({
message: "拖拽同级目录排序", message: '拖拽同级目录排序',
type: "warning", type: 'warning'
}); });
tableData.value = []; tableData.value = [];
gteTabledata(); gteTabledata();
@ -526,22 +552,22 @@ function rowDrop() {
} }
const params = { const params = {
fromId: oldRow.id, fromId: oldRow.id,
toId: newRow.id, toId: newRow.id
}; };
moveOrderno(params).then((res: any) => { moveOrderno(params).then((res: any) => {
if (res.code == 1) { if (res.code == 1) {
tableData.value = []; tableData.value = [];
gteTabledata(); gteTabledata();
ElMessage({ ElMessage({
type: "error", type: 'error',
message: "修改失败", message: '修改失败'
}); });
} else { } else {
tableData.value = []; tableData.value = [];
gteTabledata(); gteTabledata();
} }
}); });
}, }
}); });
} }
onMounted(() => { onMounted(() => {
@ -612,10 +638,15 @@ onMounted(() => {
:header-cell-style="{ :header-cell-style="{
background: 'rgb(250 250 250)', background: 'rgb(250 250 250)',
color: '#383838', color: '#383838',
height: '50px', height: '50px'
}" }"
> >
<el-table-column label="菜单标题" width="250" prop="name" show-overflow-tooltip> <el-table-column
label="菜单标题"
width="250"
prop="name"
show-overflow-tooltip
>
<template #default="scope"> <template #default="scope">
<div style="position: absolute; left: 15px"> <div style="position: absolute; left: 15px">
<img src="@/assets/MenuIcon/lbcz_td.png" alt="" /> <img src="@/assets/MenuIcon/lbcz_td.png" alt="" />
@ -623,7 +654,12 @@ onMounted(() => {
<div style="margin-left: 20px">{{ scope.row.name }}</div> <div style="margin-left: 20px">{{ scope.row.name }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="菜单类型" width="100" align="center" prop="type"> <el-table-column
label="菜单类型"
width="100"
align="center"
prop="type"
>
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.type == '2'">按钮</span> <span v-if="scope.row.type == '2'">按钮</span>
<span v-else-if="scope.row.type == '1'">菜单</span> <span v-else-if="scope.row.type == '1'">菜单</span>
@ -636,14 +672,19 @@ onMounted(() => {
width="100" width="100"
show-overflow-tooltip show-overflow-tooltip
/> />
<el-table-column label="系统类型" width="120" prop="systemcode" align="center"> <el-table-column
label="系统类型"
width="120"
prop="systemcode"
align="center"
>
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.systemcode == '1'">Web端</span> <span v-if="scope.row.systemcode == '1'">Web端</span>
<span v-else-if="scope.row.systemcode == '2'">手机App</span> <span v-else-if="scope.row.systemcode == '2'">手机App</span>
<span v-else>Pad端</span> <span v-else>Pad端</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="图标" width="100" prop="icon" align="center"> <!-- <el-table-column label="图标" width="100" prop="icon" align="center">
<template #default="scope"> <template #default="scope">
<div <div
v-if="scope.row.type !== '2'" v-if="scope.row.type !== '2'"
@ -702,11 +743,16 @@ onMounted(() => {
@change="changeFile" @change="changeFile"
/> />
</div> </div>
<!-- <img :src="url + '/menu/' + scope.row.icon" alt=""> --> <img :src="url + '/menu/' + scope.row.icon" alt="">
</div> </div>
</template> </template>
</el-table-column> </el-table-column> -->
<el-table-column label="是否外链" width="100" prop="islink" align="center"> <el-table-column
label="是否外链"
width="100"
prop="islink"
align="center"
>
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.islink == '1'">是</span> <span v-if="scope.row.islink == '1'">是</span>
<span v-else>否</span> <span v-else>否</span>
@ -729,7 +775,12 @@ onMounted(() => {
prop="permission" prop="permission"
show-overflow-tooltip show-overflow-tooltip
/> />
<el-table-column label="是否显示" width="100" prop="isdisplay" align="center"> <el-table-column
label="是否显示"
width="100"
prop="isdisplay"
align="center"
>
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.isdisplay == '1'">是</span> <span v-if="scope.row.isdisplay == '1'">是</span>
<span v-else>否</span> <span v-else>否</span>
@ -740,7 +791,11 @@ onMounted(() => {
label="最近修改者" label="最近修改者"
width="120" width="120"
></el-table-column> ></el-table-column>
<el-table-column prop="lastmodifydate" label="最近修改日期" width="170"> <el-table-column
prop="lastmodifydate"
label="最近修改日期"
width="170"
>
<template #default="scope"> <template #default="scope">
{{ dateFormat(scope.row.lastmodifydate) }} {{ dateFormat(scope.row.lastmodifydate) }}
</template> </template>
@ -863,7 +918,12 @@ onMounted(() => {
width="620px" width="620px"
class="dialogClass" class="dialogClass"
> >
<el-form ref="expertInfoRef" :model="expertInfo" :rules="rules" label-width="90px"> <el-form
ref="expertInfoRef"
:model="expertInfo"
:rules="rules"
label-width="90px"
>
<el-form-item label="目录编号" prop="name"> <el-form-item label="目录编号" prop="name">
<el-input <el-input
v-model="expertInfo.code" v-model="expertInfo.code"
@ -910,7 +970,12 @@ onMounted(() => {
width="620px" width="620px"
class="dialogClass" class="dialogClass"
> >
<el-form ref="menuInfoRef" :model="menuInfo" :rules="menurules" label-width="90px"> <el-form
ref="menuInfoRef"
:model="menuInfo"
:rules="menurules"
label-width="90px"
>
<el-form-item label="菜单编号"> <el-form-item label="菜单编号">
<el-input <el-input
v-model="menuInfo.code" v-model="menuInfo.code"
@ -920,7 +985,11 @@ onMounted(() => {
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="菜单名称" prop="name"> <el-form-item label="菜单名称" prop="name">
<el-input v-model="menuInfo.name" placeholder="" style="width: 100%"></el-input> <el-input
v-model="menuInfo.name"
placeholder=""
style="width: 100%"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="是否外链" prop="islink"> <el-form-item label="是否外链" prop="islink">
@ -967,7 +1036,12 @@ onMounted(() => {
class="dialogClass" class="dialogClass"
draggable draggable
> >
<el-form ref="btnInfoRef" :model="btnInfo" :rules="btnrules" label-width="90px"> <el-form
ref="btnInfoRef"
:model="btnInfo"
:rules="btnrules"
label-width="90px"
>
<el-form-item label="按钮编号"> <el-form-item label="按钮编号">
<el-input <el-input
v-model="btnInfo.code" v-model="btnInfo.code"
@ -977,7 +1051,11 @@ onMounted(() => {
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="按钮名称" prop="name"> <el-form-item label="按钮名称" prop="name">
<el-input v-model="btnInfo.name" placeholder="" style="width: 100%"></el-input> <el-input
v-model="btnInfo.name"
placeholder=""
style="width: 100%"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="权限标识" prop="permission"> <el-form-item label="权限标识" prop="permission">
<el-input <el-input