地图功能修改
This commit is contained in:
扈兆增
parent
3200f1f36f
commit
60269f9d66
@ -199,7 +199,17 @@ const columns = computed(() => {
|
||||
});
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
|
||||
@ -246,7 +246,9 @@
|
||||
:class="{ imgupload_hidden: isView }"
|
||||
>
|
||||
<a-form-item label="图片" name="picpth">
|
||||
<div class="flex align-center">
|
||||
<a-upload
|
||||
v-show="!isView"
|
||||
v-model:file-list="imageFileList"
|
||||
list-type="picture-card"
|
||||
:multiple="true"
|
||||
@ -262,12 +264,17 @@
|
||||
<div style="margin-top: 8px">上传</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<span v-show="isView && imageFileList.length === 0">
|
||||
暂无图片
|
||||
</span>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="视频" name="vdpth">
|
||||
<div class="flex align-center">
|
||||
<a-upload
|
||||
v-if="!isView"
|
||||
v-model:file-list="videoFileList"
|
||||
@ -291,6 +298,10 @@
|
||||
>
|
||||
点击预览视频
|
||||
</a-button>
|
||||
<span v-show="isView && videoFileList.length === 0">
|
||||
暂无视频
|
||||
</span>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
@ -401,8 +401,18 @@ const handleEdit = (record: any, type: string) => {
|
||||
isView.value = true;
|
||||
} else {
|
||||
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;
|
||||
};
|
||||
|
||||
|
||||
@ -14,22 +14,15 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import BasicSearch from "@/components/BasicSearch/index.vue";
|
||||
import { DateSetting } from "@/utils/enumeration";
|
||||
import { useShuJuTianBaoStore } from "@/store/modules/shuJuTianBao";
|
||||
|
||||
interface Props {
|
||||
direction: any[];
|
||||
guoyuStatus: any[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import BasicSearch from '@/components/BasicSearch/index.vue';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
import { useShuJuTianBaoStore } from '@/store/modules/shuJuTianBao';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "reset", values: any): void;
|
||||
(e: "search-finish", values: any): void;
|
||||
(e: 'reset', values: any): void;
|
||||
(e: 'search-finish', values: any): void;
|
||||
}>();
|
||||
|
||||
const shuJuTianBaoStore = useShuJuTianBaoStore();
|
||||
@ -37,51 +30,51 @@ const localTypeDate = ref<string>(null);
|
||||
const basicSearchRef = ref<any>();
|
||||
|
||||
const initSearchData = {
|
||||
rvcd: "all",
|
||||
rvcd: 'all',
|
||||
stcd: null,
|
||||
rstcd: null,
|
||||
strdt: [
|
||||
dayjs().subtract(1, "month").startOf("month").format("YYYY-MM-DD"),
|
||||
dayjs().endOf("day").format("YYYY-MM-DD"),
|
||||
],
|
||||
rstcd: null
|
||||
// strdt: [
|
||||
// dayjs().subtract(1, "month").startOf("month").format("YYYY-MM-DD"),
|
||||
// dayjs().endOf("day").format("YYYY-MM-DD"),
|
||||
// ],
|
||||
};
|
||||
|
||||
const searchData = ref<any>({ ...initSearchData });
|
||||
|
||||
const searchList: any = computed(() => [
|
||||
{
|
||||
type: "waterStation",
|
||||
name: "rvcd",
|
||||
label: "流域",
|
||||
type: 'waterStation',
|
||||
name: 'rvcd',
|
||||
label: '流域',
|
||||
fieldProps: {
|
||||
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,
|
||||
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,
|
||||
// },
|
||||
]);
|
||||
|
||||
const onSearchFinish = (values: any) => {
|
||||
emit("search-finish", values);
|
||||
emit('search-finish', values);
|
||||
};
|
||||
|
||||
const onValuesChange = (changedValues: any, allValues: any) => {
|
||||
searchData.value = { ...searchData.value, ...allValues };
|
||||
if (
|
||||
Object.keys(changedValues)[0] == "rstcd" ||
|
||||
Object.keys(changedValues)[0] == "rvcd"
|
||||
Object.keys(changedValues)[0] == 'rstcd' ||
|
||||
Object.keys(changedValues)[0] == 'rvcd'
|
||||
) {
|
||||
const formInstance = basicSearchRef.value?.formData;
|
||||
formInstance.stcd = null;
|
||||
@ -90,12 +83,12 @@ const onValuesChange = (changedValues: any, allValues: any) => {
|
||||
|
||||
const handleReset = () => {
|
||||
localTypeDate.value = null;
|
||||
emit("reset", initSearchData);
|
||||
emit('reset', initSearchData);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
emit("search-finish", initSearchData);
|
||||
shuJuTianBaoStore.getFpssOption("", "");
|
||||
emit('search-finish', initSearchData);
|
||||
shuJuTianBaoStore.getFpssOption('', '');
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<!-- 使用 bodyCell 插槽自定义单元格渲染 -->
|
||||
<template #action="{ column, record }">
|
||||
<template #action="{ record }">
|
||||
<div class="flex">
|
||||
<a-button type="link" size="small" @click="handleShowDetail(record)"
|
||||
>详情</a-button
|
||||
@ -55,7 +55,7 @@
|
||||
:list-url="getApprovalLogList"
|
||||
:scroll-y="500"
|
||||
>
|
||||
<template #action="{ column, record }">
|
||||
<template #action="{ record }">
|
||||
{{ handName(record.action, actionTypeDict) }}
|
||||
</template>
|
||||
</BasicTable>
|
||||
@ -82,13 +82,13 @@
|
||||
:list-url="getApprovalChangeLogList"
|
||||
:scroll-y="500"
|
||||
>
|
||||
<template #operationType="{ column, record }">
|
||||
<template #operationType="{ record }">
|
||||
{{ handName(record.operationType, operationTypeDict) }}
|
||||
</template>
|
||||
<template #bizType="{ column, record }">
|
||||
<template #bizType="{ record }">
|
||||
{{ handName(record.bizType, yeWuType) }}
|
||||
</template>
|
||||
<template #changeJson="{ column, record }">
|
||||
<template #changeJson="{ record }">
|
||||
<pre style="max-height: 200px; overflow: auto; margin: 0">{{
|
||||
record.changeJson
|
||||
}}</pre>
|
||||
@ -122,7 +122,7 @@
|
||||
:scroll-y="'500px'"
|
||||
:transform-data="customTransform"
|
||||
>
|
||||
<template #isfs="{ column, record }">
|
||||
<template #isfs="{ record }">
|
||||
<a-tag
|
||||
:color="
|
||||
record.isfs === 1 || record.isfs === '1' ? 'success' : 'error'
|
||||
@ -131,10 +131,10 @@
|
||||
{{ record.isfs === 1 || record.isfs === '1' ? '是' : '否' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #direction="{ column, record }">
|
||||
<template #direction="{ record }">
|
||||
{{ handName(record.direction, direction) }}
|
||||
</template>
|
||||
<template #action="{ column, record }">
|
||||
<template #action="{ record }">
|
||||
<a-button type="link" size="small" @click="handleView(record)"
|
||||
>查看</a-button
|
||||
>
|
||||
@ -243,7 +243,7 @@ let columns = ref([
|
||||
dataIndex: 'rvnm',
|
||||
key: 'rvnm',
|
||||
title: '流域',
|
||||
width: 120,
|
||||
width: 320,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
@ -346,7 +346,7 @@ let columns = ref([
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
width: 130,
|
||||
fixed: 'right',
|
||||
slots: { customRender: 'action' }
|
||||
}
|
||||
@ -504,7 +504,7 @@ const detailColumns = ref([
|
||||
dataIndex: 'rvnm',
|
||||
key: 'rvnm',
|
||||
title: '流域',
|
||||
width: 120,
|
||||
width: 320,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
@ -518,7 +518,7 @@ const detailColumns = ref([
|
||||
dataIndex: 'stnm',
|
||||
key: 'stnm',
|
||||
title: '过鱼设施名称',
|
||||
width: 150,
|
||||
width: 180,
|
||||
fixed: 'left'
|
||||
},
|
||||
{ dataIndex: 'strdt', key: 'strdt', title: '过鱼时间', width: 150 },
|
||||
@ -581,18 +581,18 @@ const handleDetailSearchFinish = (values: any) => {
|
||||
dataType: 'string',
|
||||
value: values.ftp
|
||||
},
|
||||
values.strdt && {
|
||||
field: 'strdt',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: values.strdt[0] + ' 00:00:00'
|
||||
},
|
||||
values.strdt && {
|
||||
field: 'strdt',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: values.strdt[1] + ' 23:59:59'
|
||||
},
|
||||
// values.strdt && {
|
||||
// field: 'strdt',
|
||||
// operator: 'gte',
|
||||
// dataType: 'date',
|
||||
// value: values.strdt[0] + ' 00:00:00'
|
||||
// },
|
||||
// values.strdt && {
|
||||
// field: 'strdt',
|
||||
// operator: 'lte',
|
||||
// dataType: 'date',
|
||||
// value: values.strdt[1] + ' 23:59:59'
|
||||
// },
|
||||
values.direction && {
|
||||
field: 'direction',
|
||||
operator: 'eq',
|
||||
@ -643,7 +643,18 @@ const handleShowDetail = (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;
|
||||
};
|
||||
|
||||
|
||||
@ -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_ATTACHMENT_URL = 'https://211.99.26.225:12125'
|
||||
attachment
|
||||
|
||||
# 地图服务地址
|
||||
VITE_APP_MAP_URL = 'https://211.99.26.225:18085'
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
|
||||
> 本记录用于跟踪项目开发过程中发现的问题，按日期倒序排列，并标注每项问题的发现人及处理状态。
|
||||
|
||||
***
|
||||
---
|
||||
|
||||
## 问题列表（2026-06-26）
|
||||
|
||||
| 发现日期 | 解决人 | 编号 | 问题描述 | 状态 | 备注 |
|
||||
| ---------- | ------ | -- | ------------------------------------- | -- | ------ |
|
||||
| ---------- | ------ | ---- | ---------------------------------------------------------------------- | ------ | -------- |
|
||||
| 2026-06-26 | 扈 | 1 | 基础信息图片展示是什么逻辑 | ✅ | <br /> |
|
||||
| 2026-06-26 | 扈 | 2 | 电站专题展示逻辑 | ✅ | <br /> |
|
||||
| 2026-06-26 | <br /> | 3 | 实时视频回放 少接口 | ⚠ | 缺少接口 |
|
||||
@ -24,8 +24,11 @@
|
||||
| 2026-06-26 | <br /> | 14 | 地图抽吸 碰撞检测 放大到具体层级锚点抽吸了但是 popup 弹框还在显示 | ⚠ | <br /> |
|
||||
| 2026-06-26 | <br /> | 15 | 地图比如积石峡 放大到层级被公伯峡隐藏掉了，然后在放大才显示 抽吸的问题 | ⚠ | <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 @@
|
||||
- ⚠ – 处理中 / 待解决
|
||||
- ❌ – 阻塞 / 未开始
|
||||
|
||||
***
|
||||
---
|
||||
|
||||
、
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"@wangeditor/editor": "^5.0.0",
|
||||
"@wangeditor/editor-for-vue": "^5.1.10",
|
||||
"ant-design-vue": "latest",
|
||||
"antdv-draggable-modal": "^1.1.6",
|
||||
"axios": "^1.2.0",
|
||||
"better-scroll": "^2.4.2",
|
||||
"cesium": "^1.141.0",
|
||||
@ -52,6 +53,7 @@
|
||||
"video.js": "^8.23.7",
|
||||
"videojs-contrib-hls": "^5.15.0",
|
||||
"vue": "^3.2.40",
|
||||
"vue-ant-modal-enhance": "^1.2.2",
|
||||
"vue-i18n": "^9.1.9",
|
||||
"vue-router": "^4.1.6",
|
||||
"vuedraggable": "^2.24.3",
|
||||
|
||||
@ -41,6 +41,9 @@ importers:
|
||||
ant-design-vue:
|
||||
specifier: latest
|
||||
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:
|
||||
specifier: ^1.2.0
|
||||
version: 1.15.2
|
||||
@ -134,6 +137,9 @@ importers:
|
||||
vue:
|
||||
specifier: ^3.2.40
|
||||
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:
|
||||
specifier: ^9.1.9
|
||||
version: 9.14.5(vue@3.5.33(typescript@6.0.3))
|
||||
@ -2220,6 +2226,13 @@ packages:
|
||||
peerDependencies:
|
||||
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:
|
||||
resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
|
||||
|
||||
@ -5360,6 +5373,12 @@ packages:
|
||||
vscode-uri@3.1.0:
|
||||
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:
|
||||
resolution: {integrity: sha512-+gPp5YGmhfsj1IN+xUo7y0fb4clfnOiiUA39y07yW1VzCRjzVgwLbtmdWlghh7mXrPsEaYc7rrIir/HT6C8vYQ==}
|
||||
|
||||
@ -8569,6 +8588,11 @@ snapshots:
|
||||
vue-types: 3.0.2(vue@3.5.33(typescript@6.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: {}
|
||||
|
||||
anymatch@3.1.3:
|
||||
@ -11975,6 +11999,11 @@ snapshots:
|
||||
|
||||
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-demi@0.14.10(vue@3.5.33(typescript@6.0.3)):
|
||||
|
||||
@ -3,8 +3,10 @@ import request from '@/utils/request';
|
||||
// 获取图例列表
|
||||
export function getModuleMapLegendList(params?: { moduleId?: string }) {
|
||||
const url = params?.moduleId
|
||||
? `/api/wmp-sys-server/mapLegend/getModuleMapLegendList?moduleId=${params.moduleId}`
|
||||
: '/api/wmp-sys-server/mapLegend/getModuleMapLegendList';
|
||||
? // ? `/api/wmp-sys-server/mapLegend/getModuleMapLegendList?moduleId=${params.moduleId}`
|
||||
// : '/api/wmp-sys-server/mapLegend/getModuleMapLegendList';
|
||||
`/mapLegend/getModuleMapLegendList?moduleId=${params.moduleId}`
|
||||
: '/mapLegend/getModuleMapLegendList';
|
||||
return request({
|
||||
url,
|
||||
method: 'get'
|
||||
@ -13,7 +15,8 @@ export function getModuleMapLegendList(params?: { moduleId?: string }) {
|
||||
// 获取地图配置列表
|
||||
export function getMapList(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-sys-server/mapmodule/getMapData',
|
||||
// url: '/api/wmp-sys-server/mapmodule/getMapData',
|
||||
url: '/mapmodule/getMapData',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
|
||||
@ -46,7 +46,7 @@ export function getBuildState(data: any) {
|
||||
// 查询鱼类栖息地监测数据类型可用性
|
||||
export function getFishTab(stcd: string) {
|
||||
return request({
|
||||
url: `/api/wmp-env-server/we/wer/getWeDefaultData`,
|
||||
url: `/wte/we/wer/getWeDefaultData`,
|
||||
method: 'get',
|
||||
params: { stcd }
|
||||
});
|
||||
@ -86,15 +86,15 @@ export function getPanoramaList(data: any) {
|
||||
// 实时视频
|
||||
export function getVideoList(data: any) {
|
||||
return request({
|
||||
url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
|
||||
url: '/vd/msstbprpt/GetKendoList',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
// 录像视频 - 时间查询 没接
|
||||
// 录像视频 - 时间查询
|
||||
export function getNoLiveVideoYear(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/vd/GetKendoListCust',
|
||||
url: '/vd/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -103,7 +103,7 @@ export function getNoLiveVideoYear(data: any) {
|
||||
// 录像视频
|
||||
export function getNoLiveVideoList(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/vd/runData/GetKendoListCust',
|
||||
url: '/vd/runData/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -306,7 +306,6 @@ export function getFishZHFX(data: any) {
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
export function getRunStateAnalysis(data: any) {
|
||||
return request({
|
||||
url: '/fp/run/analysis/GetKendoListCust',
|
||||
@ -314,51 +313,51 @@ export function getRunStateAnalysis(data: any) {
|
||||
data
|
||||
});
|
||||
}
|
||||
// ai运行识别 没接
|
||||
// ai运行识别
|
||||
export function getAIYXSB(data: any) {
|
||||
return request({
|
||||
url: '/api/dec-lygk-base-server/base/msstbprpt/getStInfoByStcd',
|
||||
url: '/fp/msstbprpt/getStInfoByStcd',
|
||||
method: 'get',
|
||||
params: data
|
||||
});
|
||||
}
|
||||
// ai运行识别 视频/表格 没接
|
||||
// ai运行识别 视频/表格
|
||||
export function getAIComList(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/ai/com/GetKendoListCust',
|
||||
url: '/warn/ai/com/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
// ai运行识别 日历 没接
|
||||
// ai运行识别 日历
|
||||
export function getAIComCalendar(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/ai/com/qgc/aiRecord/GetKendoListCust',
|
||||
url: '/warn/ai/com/qgc/aiRecord/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
// ai运行 日历点击 没接
|
||||
// ai运行 日历点击
|
||||
export function getAIComCalendarClick(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/ai/com/qgc/aiFile/GetKendoListCust',
|
||||
url: '/warn/ai/com/qgc/aiFile/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
// 鱼类增殖站 - 运行数据 -获取年 没接
|
||||
// 鱼类增殖站 - 运行数据 -获取年
|
||||
export function getFishProgressionYear(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/fb/fbrdmr/getFbRelatedYrByStcd',
|
||||
url: '/fb/fbrdmr/getFbRelatedYrByStcd',
|
||||
method: 'get',
|
||||
params: data
|
||||
});
|
||||
}
|
||||
//鱼类增殖站 - 运行数据 -获取鱼 没接
|
||||
//鱼类增殖站 - 运行数据 -获取鱼
|
||||
export function getFishProgressionFish(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/fishDic/stcd/GetKendoList',
|
||||
url: '/fp/fishDic/stcd/GetKendoList',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -367,7 +366,7 @@ export function getFishProgressionFish(data: any) {
|
||||
// 过程图 - 亲鱼
|
||||
export function getProcessDiagramParentFish(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/fb/bsmfr/fish/GetKendoListCust',
|
||||
url: '/fb/bsmfr/fish/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -376,7 +375,7 @@ export function getProcessDiagramParentFish(data: any) {
|
||||
// 过程图 - 产卵/孵化
|
||||
export function getProcessDiagramHatch(data: any, type: 1 | 2) {
|
||||
return request({
|
||||
url: `/wmp-env-server/fb/fishhatchrecr/fish/GetKendoListCust?type=${type}`,
|
||||
url: `/fb/fishhatchrecr/fish/GetKendoListCust?type=${type}`,
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -385,32 +384,31 @@ export function getProcessDiagramHatch(data: any, type: 1 | 2) {
|
||||
// 过程图 - 鱼苗
|
||||
export function getProcessDiagramFishFry(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/fb/fishbreedr/fish/GetKendoListCust',
|
||||
url: '/fb/fishbreedr/fish/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
//增值放流情况 获取年 没接
|
||||
//增值放流情况 获取年
|
||||
export function getNormalAddedSituationYear(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/fb/msfbrdm/fbFlData/GetKendoListCust',
|
||||
url: '/fb/msfbrdm/fbFlData/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
//增值放流情况 列表 没接
|
||||
|
||||
//增值放流情况 列表
|
||||
export function getNormalAddedSituation(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/fb/msfbrdm/qgc/GetKendoListCust',
|
||||
url: '/fb/msfbrdm/qgc/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
// 科研情况 没接
|
||||
// 科研情况
|
||||
export function getNormalResearchSituation(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/base/researchb/GetKendoList',
|
||||
url: '/fb/base/researchb/GetKendoList',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -418,23 +416,23 @@ export function getNormalResearchSituation(data: any) {
|
||||
// 珍稀植物园 - 运行数据 没接
|
||||
export function getNormalDataMonitoring2Year(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/vpr/year/GetKendoListCust',
|
||||
url: '/vap/vpr/year/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
// 珍稀植物园 - 运行数据 列表 没接
|
||||
// 珍稀植物园 - 运行数据 列表
|
||||
export function getNormalDataMonitoring2List(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/vpr/basinVpIntDetail',
|
||||
url: '/vap/vpr/basinVpIntDetail',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
// 珍稀动物园 - 监测数据 时间 没接
|
||||
// 珍稀动物园 - 监测数据 时间
|
||||
export function getNormal2Year(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/var/year/GetKendoListCust',
|
||||
url: '/vap/var/year/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -443,7 +441,7 @@ export function getNormal2Year(data: any) {
|
||||
// 珍稀动物园 - 监测数据 列表 没接
|
||||
export function getNormal2List(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/var/GetKendoListCust',
|
||||
url: '/vap/var/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -451,31 +449,23 @@ export function getNormal2List(data: any) {
|
||||
// 水生生态调查断面 - 监测数据 年份 没接
|
||||
export function getEcologyYear(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/we/wer/getWeYr',
|
||||
url: '/wte/we/wer/getWeYr',
|
||||
method: 'get',
|
||||
params: data
|
||||
});
|
||||
}
|
||||
// 水生生态调查断面 - 监测数据 调查批次 没接
|
||||
// 水生生态调查断面 - 监测数据 调查批次
|
||||
export function getEcologyBatch(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/we/fisht/GetKendoListCust',
|
||||
url: '/wte/we/fisht/GetKendoListCust',
|
||||
method: 'post',
|
||||
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) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/we/fisht/qgc/GetKendoListCust',
|
||||
url: '/wte/we/fisht/qgc/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -483,7 +473,7 @@ export function getEcologyList(data: any) {
|
||||
// 水生生态调查断面 - 监测数据 水温列表 没接
|
||||
export function getEcologyList1(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/we/wewtr/GetKendoListCust',
|
||||
url: '/wte/we/wewtr/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -491,7 +481,7 @@ export function getEcologyList1(data: any) {
|
||||
// 水生生态调查断面 - 监测数据 水质列表 没接
|
||||
export function getEcologyList2(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/we/wewqr/GetKendoListCust',
|
||||
url: '/wte/we/wewqr/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -500,23 +490,23 @@ export function getEcologyList2(data: any) {
|
||||
// 水生生态调查断面 - 监测数据 流速列表 没接
|
||||
export function getEcologyList3(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/we/fvR/GetKendoListCust',
|
||||
url: '/wte/we/fvR/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
// 野生动物检测 -现场录像 - 年份 - 没接
|
||||
// 野生动物检测 -现场录像 - 年份
|
||||
export function getLiveFootageYear(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/wva/default/GetKendoListCust',
|
||||
url: '/wte/wva/default/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
// 野生动物检测 -现场录像 - 没接
|
||||
// 野生动物检测 -现场录像
|
||||
export function getLiveFootageList(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/wva/GetKendoListCust',
|
||||
url: '/wte/wva/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -524,15 +514,15 @@ export function getLiveFootageList(data: any) {
|
||||
// 鱼类分布明细 - 年 没接
|
||||
export function getFishDistributionYear(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/we/wer/getWeYr',
|
||||
url: '/wte/we/wer/getWeYr',
|
||||
method: 'get',
|
||||
params: data
|
||||
});
|
||||
}
|
||||
// 鱼类分布明细 - 列表 没接
|
||||
// 鱼类分布明细 - 列表
|
||||
export function getFishDistributionList(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/we/fisht/qgc/GetKendoListCust',
|
||||
url: '/wte/we/fisht/qgc/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -540,14 +530,14 @@ export function getFishDistributionList(data: any) {
|
||||
// 生态流量泄放设施 - 监测数据 年份 没接
|
||||
export function getFlowDischargeYear(data: any) {
|
||||
return request({
|
||||
url: '/wmp-env-server/env/operat/default/year',
|
||||
url: '/eq/operat/default/year',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
export function getFlowDischargeList(code: string, data: any) {
|
||||
return request({
|
||||
url: `/apo/dec-lygk-base-server/base/stbprpData/GetKendoListCust?tbCode=${code}`,
|
||||
url: `/env/engInfo/stbprpData/GetKendoListCust?tbCode=${code}`,
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
|
||||
@ -219,6 +219,7 @@
|
||||
children: 'children'
|
||||
}
|
||||
"
|
||||
:filterTreeNode="filterTreeNode"
|
||||
:show-search="item.showSearch !== false"
|
||||
:tree-checkable="item.treeCheckable"
|
||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
@ -333,12 +334,15 @@ const formData = reactive<any>({});
|
||||
const rules = reactive<Record<string, any>>({});
|
||||
|
||||
const filterOption = (inputValue: string, option: any) => {
|
||||
const label = option.label || '';
|
||||
const label = option.label || option.name || '';
|
||||
const reachcdName = option.reachcdName || '';
|
||||
const keyword = inputValue || '';
|
||||
|
||||
return label.indexOf(keyword) !== -1 || reachcdName.indexOf(keyword) !== -1;
|
||||
};
|
||||
const filterTreeNode = (inputValue: string, option: any) => {
|
||||
return filterOption(inputValue, option);
|
||||
};
|
||||
// 2. 创建计算属性，自动过滤掉 false/null/undefined 的项
|
||||
const validSearchList = computed(() => {
|
||||
return props.searchList.filter(item => item);
|
||||
|
||||
@ -638,7 +638,12 @@ const enhancedColumns = computed(() => {
|
||||
ellipsis: true,
|
||||
customRender: ({ text }: { text: any }) => {
|
||||
// 如果 text 是空值，直接返回占位符
|
||||
if (text === null || text === undefined || text === '') {
|
||||
if (
|
||||
text === null ||
|
||||
text === undefined ||
|
||||
text === '' ||
|
||||
text === '-'
|
||||
) {
|
||||
return props.emptyPlaceholder;
|
||||
}
|
||||
// 使用 h 函数创建 Tooltip
|
||||
|
||||
@ -136,7 +136,6 @@
|
||||
@panel-change="handleCalendarPanelChange"
|
||||
@select="handleCalendarSelect"
|
||||
>
|
||||
<template #headerRender="{ current }"> </template>
|
||||
<template #dateCellRender="{ current }">
|
||||
<div class="calendar-content">
|
||||
<template v-if="isCurrentMonth(current)">
|
||||
|
||||
@ -247,7 +247,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import { ref, watch, computed, toRef } from 'vue';
|
||||
// 导入预定义的 Tab 内容组件
|
||||
import BasicInfo from './components/BasicInfo.vue'; // 基本信息
|
||||
import VideoInfo from './components/videoInfo.vue'; // 实时视频
|
||||
@ -300,6 +300,7 @@ import {
|
||||
getMonitorDataWaterTempPowerStation2,
|
||||
checkPowerStationTopic
|
||||
} from '@/api/mapModal';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
// import { useRouter } from 'vue-router';
|
||||
|
||||
const modelStore = useModelStore();
|
||||
@ -601,7 +602,6 @@ const setQGCTabList = async (_tabs: any, stcd: string) => {
|
||||
};
|
||||
const res2 = await getVideoList(params);
|
||||
console.log('', modelStore.params.sttp);
|
||||
//
|
||||
if (
|
||||
res2?.data?.data?.length > 0 ||
|
||||
res2?.data?.records?.length > 0 ||
|
||||
@ -645,17 +645,10 @@ const applyTabFilters = async (params: any) => {
|
||||
} else if (isLCJ && sttpCode === 'WE') {
|
||||
// LCJ 鱼类栖息地数据类型检查
|
||||
await checkFishTab(stcd);
|
||||
} else if (
|
||||
( sttpCode === 'WQ') ||
|
||||
sttpCode === 'WQFB' ||
|
||||
sttpCode === 'wq'
|
||||
) {
|
||||
} else if (sttpCode === 'WQ' || sttpCode === 'WQFB' || sttpCode === 'wq') {
|
||||
// 水质 AI 预测检查（React 逻辑：WQ 需要条件，WQFB/wq 无条件）
|
||||
await checkAnalysisAvailability(stcd);
|
||||
} else if (
|
||||
( sttpCode === 'WT') ||
|
||||
sttpCode === 'wt'
|
||||
) {
|
||||
} else if (sttpCode === 'WT' || sttpCode === 'wt') {
|
||||
// 水温站特殊处理（React 逻辑：WT 需要条件，wt 无条件）
|
||||
await checkWaterTempConfig(stcd);
|
||||
} else if (
|
||||
@ -841,6 +834,8 @@ const props = defineProps<{
|
||||
data?: any; // 可选：传递给内部组件的数据
|
||||
}>();
|
||||
|
||||
// 启用弹窗拖拽（限制在可视区域内）
|
||||
useDraggable(toRef(props, 'visible'), { boundary: true, resetOnOpen: true });
|
||||
// 定义 Emits
|
||||
// 添加 'update:activeKey' 以支持 v-model:active-key
|
||||
const emit = defineEmits<{
|
||||
|
||||
@ -128,7 +128,6 @@ watch(
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
// @ts-ignore
|
||||
window.mapClass = mapClass;
|
||||
});
|
||||
|
||||
|
||||
@ -12,8 +12,6 @@ import Stroke from 'ol/style/Stroke';
|
||||
import Icon from 'ol/style/Icon';
|
||||
import Text from 'ol/style/Text';
|
||||
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 WMTSTileGrid from 'ol/tilegrid/WMTS';
|
||||
import { get as getProjection, fromLonLat } from 'ol/proj';
|
||||
@ -75,6 +73,7 @@ export class MapOl implements MapInterface {
|
||||
geoJsonData1: any = null;
|
||||
private BASEID = '';
|
||||
private currentClipGeoJson: any | null = null;
|
||||
private clipRequestController: AbortController | null = null;
|
||||
private hoveredFeatureId: string | number | null = null;
|
||||
private popupManager: PopupManager;
|
||||
private regionMaskManager: RegionMaskManager;
|
||||
@ -98,15 +97,20 @@ export class MapOl implements MapInterface {
|
||||
defaultZoom: INITIAL_ZOOM
|
||||
});
|
||||
}
|
||||
private async loadGeoJsonData(url): Promise<any> {
|
||||
private async loadGeoJsonData(url, signal?: AbortSignal): Promise<any> {
|
||||
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();
|
||||
return data;
|
||||
} catch (error) {
|
||||
} catch (error: any) {
|
||||
if (error.name !== 'AbortError') {
|
||||
console.error('配置加载失败:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
//地图初始化
|
||||
init(container: HTMLElement): Promise<any> {
|
||||
try {
|
||||
@ -222,6 +226,11 @@ export class MapOl implements MapInterface {
|
||||
_mdoptions?: MDOptions
|
||||
): void {
|
||||
this.pointLayerManager.addDataLayer(pointData, layerType);
|
||||
|
||||
if (this.currentClipGeoJson) {
|
||||
this.regionMaskManager.filterPointsByRegion(this.currentClipGeoJson);
|
||||
}
|
||||
|
||||
const currentZoom = this.view ? this.view.getZoom() : INITIAL_ZOOM;
|
||||
this.pointLayerManager.updateNearbyFeatureLayout(currentZoom);
|
||||
this.requestRefreshPointLabelVisibility(true);
|
||||
@ -1124,11 +1133,7 @@ export class MapOl implements MapInterface {
|
||||
* 初始化加载基础图层
|
||||
* @param layer 图层配置对象
|
||||
*/
|
||||
addBaseDataLayer(
|
||||
layer: any,
|
||||
isShow: boolean,
|
||||
isCache: boolean = false
|
||||
): void {
|
||||
addBaseDataLayer(layer: any, isShow: boolean, isCache = false): void {
|
||||
if (!this.map) return;
|
||||
|
||||
// 备注：同 key 的底图重复添加前先移除旧实例，避免注册表覆盖后旧图层仍残留在地图上。
|
||||
@ -1142,7 +1147,7 @@ export class MapOl implements MapInterface {
|
||||
|
||||
if (layer.type === 'wmts') {
|
||||
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]);
|
||||
if (layer.key === this.REGISTRY_KEY) {
|
||||
this.baseLayerConfig = layer;
|
||||
@ -1311,6 +1316,11 @@ export class MapOl implements MapInterface {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.clipRequestController) {
|
||||
this.clipRequestController.abort();
|
||||
this.clipRequestController = null;
|
||||
}
|
||||
|
||||
this.BASEID = _regionId;
|
||||
|
||||
if (!isAll) {
|
||||
@ -1327,21 +1337,40 @@ export class MapOl implements MapInterface {
|
||||
}
|
||||
|
||||
this.regionMaskManager.hideAllPoints();
|
||||
this.clipRequestController = new AbortController();
|
||||
const signal = this.clipRequestController.signal;
|
||||
|
||||
try {
|
||||
const url =
|
||||
this.hydropBaseConfig.geojson_url +
|
||||
`&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.regionMaskManager.filterPointsByRegion(geoJsonData);
|
||||
this.regionMaskManager.fitViewToGeoJson(geoJsonData);
|
||||
this.regionMaskManager.applyMapMaskToLayers(baseLayers, geoJsonData);
|
||||
} catch (error) {
|
||||
} catch (error: any) {
|
||||
if (error.name === 'AbortError') {
|
||||
return;
|
||||
}
|
||||
this.currentClipGeoJson = null;
|
||||
console.error('加载裁切数据失败:', error);
|
||||
this.regionMaskManager.clearMapMask();
|
||||
this.regionMaskManager.showAllPoints();
|
||||
} finally {
|
||||
if (this.clipRequestController?.signal === signal) {
|
||||
this.clipRequestController = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
|
||||
@ -400,6 +400,7 @@ export class PointLayerManager {
|
||||
);
|
||||
feature.set('_baseCoordinates', coord);
|
||||
feature.set('_legendVisible', true);
|
||||
feature.set('_regionVisible', true);
|
||||
feature.set('_sttpMap', item.sttpMap);
|
||||
if (item.popupHtml) {
|
||||
feature.set('popupHtml', item.popupHtml);
|
||||
|
||||
@ -56,7 +56,6 @@ const layerConfigs = computed(() => {
|
||||
|
||||
return convertCheckedToBoolean(mapConfigStore.layerConfigTree);
|
||||
});
|
||||
|
||||
// 备注：选中图层完全以运行态 store 为唯一来源，组件不再维护额外同步状态。
|
||||
const checkedKeys = computed(() => mapViewStore.checkedLayerKeys || []);
|
||||
const tooltipVisible = ref(false);
|
||||
|
||||
@ -26,11 +26,9 @@
|
||||
<a-form-item label="" name="siteRangePicker">
|
||||
<a-range-picker
|
||||
v-model:value="searchTimeRange"
|
||||
picker="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:allow-clear="false"
|
||||
show-time
|
||||
:presets="DateSetting.RangeButton.days1"
|
||||
style="width: 100%"
|
||||
@change="triggerManualValuesChange"
|
||||
|
||||
@ -87,6 +87,7 @@ const hasEnvFac = computed(() =>
|
||||
);
|
||||
|
||||
const legendItemClick = (item: any) => {
|
||||
console.log(item);
|
||||
if (item.parentName == '环保设施') return;
|
||||
if (item.canBeChecked == 0) {
|
||||
return;
|
||||
@ -121,6 +122,7 @@ const toggleGroup = (group: any) => {
|
||||
if (leafItems.length === 0) return;
|
||||
|
||||
const hasAnyChecked = leafItems.some((item: any) => item.checked === 1);
|
||||
|
||||
const targetChecked = hasAnyChecked ? 0 : 1;
|
||||
const targetNameEns = leafItems
|
||||
.filter(
|
||||
|
||||
@ -12,7 +12,6 @@ import Antd from 'ant-design-vue';
|
||||
import 'ant-design-vue/dist/reset.css'; // Ant Design 全局样式重置
|
||||
import dayjs from 'dayjs'; // ant 中文语言
|
||||
import 'dayjs/locale/zh-cn';
|
||||
// @ts-ignore
|
||||
import 'virtual:svg-icons-register';
|
||||
// 3d地图
|
||||
import * as Cesium from 'cesium';
|
||||
|
||||
@ -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 dayjs from 'dayjs';
|
||||
import { MapClass } from '@/components/gis/map.class';
|
||||
@ -17,6 +18,7 @@ type InitializeOptions = {
|
||||
|
||||
type LoadPageOptions = {
|
||||
pageKey: string;
|
||||
isInitialLoad?: boolean;
|
||||
};
|
||||
|
||||
type ApplyLayerSelectionOptions = {
|
||||
@ -24,9 +26,7 @@ type ApplyLayerSelectionOptions = {
|
||||
triggerKey?: string;
|
||||
checked?: boolean;
|
||||
};
|
||||
|
||||
const SYSTEM_ID = '974975A6-47FD-4C04-9ACD-68938D2992BD';
|
||||
const MODULE_ID = '2157c1a1-e909-4c9f-af94-b4ccebe05808';
|
||||
const SYSTEM_ID = 'qgc';
|
||||
const HYDRO_DYNAMIC_LAYER_KEYS = [
|
||||
'dw_point',
|
||||
'stinfo_video_point',
|
||||
@ -47,6 +47,7 @@ const LARGE_ENG_LEGEND_PREFIX = 'large_eng_';
|
||||
const MID_ENG_LEGEND_PREFIX = 'mid_eng_';
|
||||
|
||||
export const useMapOrchestrator = () => {
|
||||
const route = useRoute();
|
||||
const mapClass = MapClass.getInstance();
|
||||
const mapStore = useMapStore();
|
||||
const mapConfigStore = useMapConfigStore();
|
||||
@ -56,6 +57,9 @@ export const useMapOrchestrator = () => {
|
||||
let zoomListenerKey: any = null;
|
||||
let stopBaseSelectionWatch: WatchStopHandle | null = null;
|
||||
const initializedBaseLayerKeys = new Set<string>();
|
||||
const baseSelectionDebounceTimer = ref<ReturnType<typeof setTimeout> | null>(
|
||||
null
|
||||
);
|
||||
|
||||
// 备注：统一获取当前地图视图对象，避免在多个组件里重复兼容 2D/3D view 访问方式。
|
||||
const getCurrentView = () => {
|
||||
@ -107,50 +111,86 @@ export const useMapOrchestrator = () => {
|
||||
};
|
||||
|
||||
// 备注：统一加载当前页面所需的图层配置、图例配置以及首批锚点数据。
|
||||
const loadPage = async ({ pageKey }: LoadPageOptions) => {
|
||||
const loadPage = async ({
|
||||
pageKey,
|
||||
isInitialLoad = false
|
||||
}: LoadPageOptions) => {
|
||||
mapDataStore.setLoading(true);
|
||||
|
||||
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 previousCheckedKeys = mapViewStore.getCheckedLayerKeys();
|
||||
const moduleId = (route.meta?.moduleId as string) || '';
|
||||
const loadOptions = {
|
||||
systemId: SYSTEM_ID,
|
||||
moduleId: MODULE_ID,
|
||||
moduleId,
|
||||
pageKey,
|
||||
description: 'true'
|
||||
};
|
||||
const layerConfigPromise =
|
||||
mapConfigStore.loadPageLayerConfig(loadOptions);
|
||||
const legendConfigPromise = mapConfigStore.loadPageLegendConfig(pageKey);
|
||||
const { legendOriginal, pageLegend } = await legendConfigPromise;
|
||||
|
||||
if (legendOriginal.length > 0) {
|
||||
mapStore.setLegendData(legendOriginal, pageLegend);
|
||||
const legendConfigPromise = mapConfigStore.loadPageLegendConfig(
|
||||
moduleId,
|
||||
{
|
||||
includeGlobal: shouldLoadGlobalLegend
|
||||
}
|
||||
);
|
||||
|
||||
const { layerConfig } = await layerConfigPromise;
|
||||
// 同时等待两个 promise
|
||||
const [{ layerConfig }, { legendOriginal, pageLegend }] =
|
||||
await Promise.all([layerConfigPromise, legendConfigPromise]);
|
||||
|
||||
// 先设置图层数据（更新 checkedLayerKeys），再设置图例数据
|
||||
if (layerConfig.length > 0) {
|
||||
mapStore.setLayerData(layerConfig);
|
||||
ensureBaseLayersInitialized(layerConfig);
|
||||
|
||||
let checkedKeys = mapViewStore.getCheckedLayerKeys();
|
||||
if (previousPageKey === pageKey && previousCheckedKeys.length > 0) {
|
||||
const currentLayerKeys = new Set(
|
||||
layerConfig
|
||||
.flatMap((item: any) => layerConfig2Flat([item]))
|
||||
.map((item: any) => item?.key)
|
||||
.filter(Boolean)
|
||||
);
|
||||
const getAllLayerKeys = (items: any[]): string[] => {
|
||||
const keys: string[] = [];
|
||||
const walk = (nodes: any[]) => {
|
||||
nodes.forEach(item => {
|
||||
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 =>
|
||||
currentLayerKeys.has(key)
|
||||
);
|
||||
if (runtimeCheckedKeys.length > 0) {
|
||||
mapViewStore.setCheckedLayerKeys(runtimeCheckedKeys);
|
||||
mapStore.setSelectedLegendData();
|
||||
checkedKeys = runtimeCheckedKeys;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置图例数据（此时 checkedLayerKeys 已正确设置）
|
||||
if (legendOriginal.length > 0) {
|
||||
mapStore.setLegendData(legendOriginal, pageLegend);
|
||||
}
|
||||
|
||||
if (shouldPreloadLayerData) {
|
||||
mapStore.setSelectedLegendData();
|
||||
await mapStore.loadAllLayerData(layerConfig, checkedKeys);
|
||||
} else {
|
||||
await mapStore.updateLayerData(checkedKeys, true);
|
||||
mapStore.setSelectedLegendData();
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
// mapDataStore.setLoading(false);
|
||||
@ -180,7 +220,7 @@ export const useMapOrchestrator = () => {
|
||||
popupContainer,
|
||||
pageKey
|
||||
});
|
||||
await loadPage({ pageKey });
|
||||
await loadPage({ pageKey, isInitialLoad: true });
|
||||
};
|
||||
|
||||
// 备注：统一绑定地图缩放监听，让页面组件只负责触发初始化，不再直接处理缩放联动细节。
|
||||
@ -218,13 +258,23 @@ export const useMapOrchestrator = () => {
|
||||
}
|
||||
|
||||
stopBaseSelectionWatch = watch(
|
||||
() => jidiSelectEventStore.selectedItem,
|
||||
newVal => {
|
||||
if (newVal?.wbsCode) {
|
||||
changeBaseId(newVal.wbsCode);
|
||||
() => jidiSelectEventStore.selectedItem?.wbsCode,
|
||||
newWbsCode => {
|
||||
if (!newWbsCode) {
|
||||
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);
|
||||
bindBaseSelection();
|
||||
bindZoomListener(options.getIsHydroMenu);
|
||||
await loadPage({ pageKey: options.pageKey });
|
||||
await loadPage({ pageKey: options.pageKey, isInitialLoad: true });
|
||||
};
|
||||
|
||||
// 备注：统一处理菜单切换后的页面配置重载，供页面 watch 直接复用。
|
||||
const reloadPage = async (pageKey: string) => {
|
||||
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 currentCheckedKeys = mapViewStore.getCheckedLayerKeys();
|
||||
const pageDefaultCheckedKeys = new Set(
|
||||
mapConfigStore.extractCheckedLayerKeys(mapStore.layerData || [])
|
||||
);
|
||||
|
||||
if (visible) {
|
||||
const layersToAdd = HYDRO_DYNAMIC_LAYER_KEYS.filter(
|
||||
@ -293,9 +364,12 @@ export const useMapOrchestrator = () => {
|
||||
});
|
||||
}
|
||||
|
||||
const nextCheckedKeys = currentCheckedKeys.filter(
|
||||
key => !HYDRO_DYNAMIC_LAYER_KEYS.includes(key)
|
||||
);
|
||||
const nextCheckedKeys = currentCheckedKeys.filter(key => {
|
||||
if (!HYDRO_DYNAMIC_LAYER_KEYS.includes(key)) {
|
||||
return true;
|
||||
}
|
||||
return pageDefaultCheckedKeys.has(key);
|
||||
});
|
||||
|
||||
if (nextCheckedKeys.length === currentCheckedKeys.length) {
|
||||
return currentCheckedKeys;
|
||||
@ -348,6 +422,11 @@ export const useMapOrchestrator = () => {
|
||||
const handlePageChange = async (pageKey: string, isHydroMenu: boolean) => {
|
||||
if (!pageKey) return;
|
||||
|
||||
const previousPageKey = mapConfigStore.lastLoadOptions?.pageKey || '';
|
||||
if (previousPageKey && previousPageKey !== pageKey) {
|
||||
hideCurrentVisiblePointLayers();
|
||||
}
|
||||
|
||||
await reloadPage(pageKey);
|
||||
|
||||
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;
|
||||
const targetPoint = mapDataStore.pointData.find((item: any) => {
|
||||
return item.stcd === pointId || item._id === pointId;
|
||||
@ -472,6 +551,11 @@ export const useMapOrchestrator = () => {
|
||||
stopBaseSelectionWatch();
|
||||
stopBaseSelectionWatch = null;
|
||||
}
|
||||
|
||||
if (baseSelectionDebounceTimer.value) {
|
||||
clearTimeout(baseSelectionDebounceTimer.value);
|
||||
baseSelectionDebounceTimer.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
@ -9,6 +9,10 @@ type MapConfigLoadOptions = {
|
||||
description?: string;
|
||||
};
|
||||
|
||||
type LegendConfigLoadOptions = {
|
||||
includeGlobal?: boolean;
|
||||
};
|
||||
|
||||
const cloneConfigData = <T>(data: T): T => {
|
||||
return JSON.parse(JSON.stringify(data));
|
||||
};
|
||||
@ -55,7 +59,7 @@ export const useMapConfigStore = defineStore('map-config', () => {
|
||||
|
||||
const walk = (nodes: any[] = []) => {
|
||||
nodes.forEach(item => {
|
||||
if (item?.checked === 1 && item?.key) {
|
||||
if (Number(item?.checked) === 1 && item?.key) {
|
||||
keys.push(item.key);
|
||||
}
|
||||
if (item?.children?.length > 0) {
|
||||
@ -157,6 +161,7 @@ export const useMapConfigStore = defineStore('map-config', () => {
|
||||
moduleId: options.moduleId,
|
||||
description: options.description ?? 'true'
|
||||
});
|
||||
console.log(cloneConfigData(layerRes));
|
||||
|
||||
const layerConfig = layerRes?.data?.mapLayerVos || [];
|
||||
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;
|
||||
|
||||
try {
|
||||
const includeGlobal = options.includeGlobal !== false;
|
||||
|
||||
let legendOriginal = legendConfigOriginal.value || [];
|
||||
let pageLegend: any[] = [];
|
||||
|
||||
if (includeGlobal) {
|
||||
const [legendAllRes, legendPageRes] = await Promise.all([
|
||||
getModuleMapLegendList(),
|
||||
getModuleMapLegendList(pageKey ? { moduleId: pageKey } : undefined)
|
||||
]);
|
||||
|
||||
const legendOriginal = legendAllRes?.data || [];
|
||||
const pageLegend = legendPageRes?.data || [];
|
||||
legendOriginal = legendAllRes?.data || [];
|
||||
pageLegend = legendPageRes?.data || [];
|
||||
} else {
|
||||
const legendPageRes = await getModuleMapLegendList(
|
||||
pageKey ? { moduleId: pageKey } : undefined
|
||||
);
|
||||
pageLegend = legendPageRes?.data || [];
|
||||
}
|
||||
|
||||
setLegendConfigOriginal(legendOriginal);
|
||||
setPageLegendConfig(pageLegend);
|
||||
@ -194,10 +214,9 @@ export const useMapConfigStore = defineStore('map-config', () => {
|
||||
|
||||
// 备注：加载页面地图配置，只负责请求和保存配置数据，不处理锚点或地图渲染逻辑。
|
||||
const loadPageMapConfig = async (options: MapConfigLoadOptions) => {
|
||||
const [{ layerConfig }, { legendOriginal, pageLegend }] = await Promise.all([
|
||||
loadPageLayerConfig(options),
|
||||
loadPageLegendConfig(options.pageKey)
|
||||
]);
|
||||
const [{ layerConfig }, { legendOriginal, pageLegend }] = await Promise.all(
|
||||
[loadPageLayerConfig(options), loadPageLegendConfig(options.pageKey)]
|
||||
);
|
||||
|
||||
return {
|
||||
layerConfig,
|
||||
|
||||
@ -104,7 +104,6 @@ import { message } from 'ant-design-vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import * as echarts from 'echarts';
|
||||
import type { EChartsOption } from 'echarts';
|
||||
import dayjs from 'dayjs';
|
||||
import { omit } from 'lodash';
|
||||
import { wbsbGetKendoList, getVmsstbprpt, DetGetKendoListCust } from '@/api/sw';
|
||||
import BasicTable from '@/components/BasicTable/index.vue';
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
<p>
|
||||
1、统计电站范围：接入过生态流量数据的电站
|
||||
<span
|
||||
style="color: #5989ad; cursor: pointer; "
|
||||
style="color: #5989ad; cursor: pointer"
|
||||
@click.stop="handleStationClick()"
|
||||
>
|
||||
({{titleData.cnt}})
|
||||
({{ titleData.cnt }})
|
||||
</span>
|
||||
</p>
|
||||
<p>2、当来水不足时，生态流量不小于入库流量判定为达标</p>
|
||||
@ -87,7 +87,11 @@
|
||||
width="1536px"
|
||||
:footer="null"
|
||||
>
|
||||
<ModalYkzhbzdjcgz v-if="huanbaoModalVisible" :baseId="baseid" :titleData = titleData />
|
||||
<ModalYkzhbzdjcgz
|
||||
v-if="huanbaoModalVisible"
|
||||
:baseId="baseid"
|
||||
:titleData="titleData"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
@ -103,6 +107,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import STLLXFFS from './TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue';
|
||||
import ModalYkzhbzdjcgz from './TwoLayer/ModalYkzhbzdjcgz.vue';
|
||||
import HuanbaoZDJCGZKZ from '@/modules/huanbaozdjcgzkzQK/index.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'shengtaidabiaoMod'
|
||||
@ -142,10 +147,13 @@ const datalist: any = ref([]);
|
||||
const allArr: any = ref(Array.from({ length: 20 }, (_, i) => i));
|
||||
const spinning = ref(false);
|
||||
const modalVisible = ref(false);
|
||||
const modalTitle = ref('');
|
||||
const selectedItem = ref<any>(null);
|
||||
const huanbaoModalVisible = ref(false);
|
||||
|
||||
// 启用弹窗拖拽（限制在可视区域内）
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 启用弹窗拖拽（限制在可视区域内）
|
||||
useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 处理电站数量点击事件
|
||||
const handleStationClick = () => {
|
||||
huanbaoModalVisible.value = true;
|
||||
@ -154,7 +162,6 @@ const handleStationClick = () => {
|
||||
// 处理进度条点击事件
|
||||
const handleBarClick = (item: any) => {
|
||||
selectedItem.value = item;
|
||||
// modalTitle.value = `${item.name} - 详细信息`;
|
||||
modalVisible.value = true;
|
||||
};
|
||||
|
||||
@ -280,43 +287,41 @@ watch(
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
//统计电站范围：接入过生态流量数据的电站
|
||||
const titleData:any = ref({ cnt: 0 })
|
||||
const titleData: any = ref({ cnt: 0 });
|
||||
const getcont = async () => {
|
||||
let params = {
|
||||
"filter": {
|
||||
"logic": "and",
|
||||
"filters": [
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
"field": "showIds",
|
||||
"operator": "in",
|
||||
"value": [
|
||||
"7"
|
||||
]
|
||||
field: 'showIds',
|
||||
operator: 'in',
|
||||
value: ['7']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
let res = await evnmAutoMonitorGetKendoListCust(params);
|
||||
// [
|
||||
// {
|
||||
// "cnt": 452,
|
||||
// "orderInx": 7,
|
||||
// "orderInxName": "生态流量",
|
||||
// "sttpFullPath": "ENG",
|
||||
// "sttpCode": "ENG",
|
||||
// "sttpName": "生态流量"
|
||||
// }
|
||||
// ]
|
||||
// [
|
||||
// {
|
||||
// "cnt": 452,
|
||||
// "orderInx": 7,
|
||||
// "orderInxName": "生态流量",
|
||||
// "sttpFullPath": "ENG",
|
||||
// "sttpCode": "ENG",
|
||||
// "sttpName": "生态流量"
|
||||
// }
|
||||
// ]
|
||||
let list = res?.data?.data[0];
|
||||
if (list) {
|
||||
titleData.value = list
|
||||
titleData.value = list;
|
||||
}
|
||||
//
|
||||
};
|
||||
// 页面加载时执行的逻辑
|
||||
onMounted(() => {
|
||||
setStyle();
|
||||
getcont()
|
||||
getcont();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ import { useMapConfigStore } from '@/modules/map/stores/map-config.store';
|
||||
import { useMapDataStore } from '@/modules/map/stores/map-data.store';
|
||||
import { useMapViewStore } from '@/modules/map/stores/map-view.store';
|
||||
import request from '@/utils/request';
|
||||
import { urlList } from '@/utils/GisUrlList';
|
||||
// import { urlList } from '@/utils/GisUrlList';
|
||||
const mapClass = MapClass.getInstance();
|
||||
const DEFAULT_LAYER_REQUEST_CONCURRENCY = 4;
|
||||
const ENG_POINT_LAYER_KEY = 'eng_point';
|
||||
@ -47,23 +47,23 @@ const normalizeCachePayload = (value: any): any => {
|
||||
return value;
|
||||
};
|
||||
|
||||
const buildUrlListIndex = (items: any[] = []) => {
|
||||
const index: Record<string, any[]> = {};
|
||||
|
||||
items.forEach(item => {
|
||||
[item.url, item.title, item.keyType].forEach(key => {
|
||||
if (!key) return;
|
||||
if (!index[key]) {
|
||||
index[key] = [];
|
||||
}
|
||||
index[key].push(item);
|
||||
});
|
||||
});
|
||||
|
||||
return index;
|
||||
};
|
||||
|
||||
const urlListIndex = buildUrlListIndex(urlList);
|
||||
// const buildUrlListIndex = (items: any[] = []) => {
|
||||
// const index: Record<string, any[]> = {};
|
||||
//
|
||||
// items.forEach(item => {
|
||||
// [item.url, item.title, item.keyType].forEach(key => {
|
||||
// if (!key) return;
|
||||
// if (!index[key]) {
|
||||
// index[key] = [];
|
||||
// }
|
||||
// index[key].push(item);
|
||||
// });
|
||||
// });
|
||||
//
|
||||
// return index;
|
||||
// };
|
||||
//
|
||||
// const urlListIndex = buildUrlListIndex(urlList);
|
||||
|
||||
const isCanceledRequestError = (error: unknown) => {
|
||||
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', () => {
|
||||
const mapConfigStore = useMapConfigStore();
|
||||
const mapDataStore = useMapDataStore();
|
||||
@ -260,7 +326,7 @@ export const useMapStore = defineStore('map', () => {
|
||||
};
|
||||
|
||||
const getRuntimeCheckedLayerKeys = (): string[] => {
|
||||
return normalizeCheckedLayerKeys(mapViewStore.getCheckedLayerKeys());
|
||||
return mapViewStore.getCheckedLayerKeys();
|
||||
};
|
||||
|
||||
const syncPointDataForFilter = () => {
|
||||
@ -300,6 +366,7 @@ export const useMapStore = defineStore('map', () => {
|
||||
mapConfigStore.setLayerConfigTree(data);
|
||||
const nextCheckedLayerKeys = mapConfigStore.extractCheckedLayerKeys(data);
|
||||
mapViewStore.setCheckedLayerKeys(nextCheckedLayerKeys);
|
||||
console.log(1);
|
||||
rebuildLegendRuntimeData(nextCheckedLayerKeys);
|
||||
};
|
||||
|
||||
@ -374,6 +441,7 @@ export const useMapStore = defineStore('map', () => {
|
||||
mapViewStore.setLegendCheckedState(
|
||||
buildLegendCheckedState(legendDataOriginal.value, normalizeLegendNameEn)
|
||||
);
|
||||
console.log(2);
|
||||
rebuildLegendRuntimeData(checkedLayerKeys.value);
|
||||
};
|
||||
|
||||
@ -381,6 +449,7 @@ export const useMapStore = defineStore('map', () => {
|
||||
* 设置选中的图例数据（在图层加载完成后调用）
|
||||
*/
|
||||
const setSelectedLegendData = () => {
|
||||
console.log(3);
|
||||
rebuildLegendRuntimeData(checkedLayerKeys.value);
|
||||
};
|
||||
|
||||
@ -458,7 +527,10 @@ export const useMapStore = defineStore('map', () => {
|
||||
* @param isInit - 是否是初始化阶段（初始化时遍历所有图层）
|
||||
*/
|
||||
const updateLayerData = async (checkKeys: string[], isInit = false) => {
|
||||
console.log(checkKeys);
|
||||
if (!isInit) {
|
||||
checkKeys = normalizeCheckedLayerKeys(checkKeys);
|
||||
}
|
||||
|
||||
mapViewStore.setCheckedLayerKeys(checkKeys);
|
||||
|
||||
@ -594,6 +666,11 @@ export const useMapStore = defineStore('map', () => {
|
||||
const allPointData = mapDataStore.rebuildPointDataFromCache(allLayerKeys);
|
||||
attachNearbyPointRuntimeMeta(allPointData);
|
||||
const runtimeCheckedKeys = getRuntimeCheckedLayerKeys();
|
||||
const treeCheckedKeys = mapConfigStore.extractCheckedLayerKeys(
|
||||
layerData.value.length > 0 ? layerData.value : items
|
||||
);
|
||||
const finalCheckedKeys =
|
||||
runtimeCheckedKeys.length > 0 ? runtimeCheckedKeys : treeCheckedKeys;
|
||||
|
||||
// 备注：近邻点元数据需要基于全量点位统一识别，识别完成后同步刷新各图层 Feature。
|
||||
for (const key of allLayerKeys) {
|
||||
@ -608,7 +685,7 @@ export const useMapStore = defineStore('map', () => {
|
||||
const shouldRestoreVisible =
|
||||
typeof cacheChecked === 'boolean'
|
||||
? cacheChecked
|
||||
: layer.checked === 1 || runtimeCheckedKeys.includes(key);
|
||||
: layer.checked === 1 || finalCheckedKeys.includes(key);
|
||||
layer.data = layerPoints;
|
||||
mapClass.addInitDataLayer(displayData, key);
|
||||
if (shouldRestoreVisible) {
|
||||
@ -622,7 +699,7 @@ export const useMapStore = defineStore('map', () => {
|
||||
|
||||
// 备注：初始化 loading 期间用户可能已经手动改过图层勾选，这里必须以最新运行态收尾，
|
||||
// 不能再回放 load 启动瞬间的默认 checked 快照。
|
||||
await updateLayerData(runtimeCheckedKeys, true);
|
||||
await updateLayerData(finalCheckedKeys, true);
|
||||
} finally {
|
||||
mapDataStore.setLoading(false);
|
||||
}
|
||||
@ -736,6 +813,7 @@ export const useMapStore = defineStore('map', () => {
|
||||
normalizedNameEn,
|
||||
checked
|
||||
);
|
||||
console.log(5);
|
||||
rebuildLegendRuntimeData(checkedLayerKeys.value);
|
||||
applyLegendItemVisibility(legendItem, checked);
|
||||
};
|
||||
@ -754,14 +832,13 @@ export const useMapStore = defineStore('map', () => {
|
||||
});
|
||||
|
||||
mapViewStore.setLegendCheckedState(nextState);
|
||||
console.log(6);
|
||||
rebuildLegendRuntimeData(checkedLayerKeys.value);
|
||||
changedLegendItems.forEach(legendItem =>
|
||||
applyLegendItemVisibility(legendItem, checked)
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* 生成请求标识符，用于避免重复请求
|
||||
*/
|
||||
@ -777,75 +854,32 @@ export const useMapStore = defineStore('map', () => {
|
||||
layer: any,
|
||||
sessionId: number = loadSessionSeed
|
||||
) => {
|
||||
const { key, url, params = {}, paramJson } = layer;
|
||||
const { key, url, params = {}, paramJson, anchorParamJson } = layer;
|
||||
|
||||
// 没有URL，跳过
|
||||
if (!url) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// 参考 React 版本：使用 urlList 匹配图层配置
|
||||
let requestUrl = url;
|
||||
const requestUrl = url;
|
||||
let requestParams: any = params;
|
||||
let requestOrders: any = null;
|
||||
|
||||
// 根据图层的 key（keyType）、title、url 查找匹配的 urlList 项
|
||||
const layerKey = layer?.key || '';
|
||||
const layerTitle = layer?.title || '';
|
||||
const matchedList =
|
||||
urlListIndex[layerKey] || urlListIndex[layerTitle] || urlListIndex[url];
|
||||
|
||||
if (matchedList && matchedList.length > 0) {
|
||||
let matchedItem: any = null;
|
||||
if (key == 'va_built_point ' || key == 'vp_built_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 voidSttp = 'all';
|
||||
const ylfbKeys = ['ylfb_point'];
|
||||
const timeRangeLayerKeys = ['ef_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)) {
|
||||
requestParams.filters.push({
|
||||
field: 'tm',
|
||||
@ -885,10 +919,10 @@ export const useMapStore = defineStore('map', () => {
|
||||
});
|
||||
}
|
||||
}
|
||||
// 转换 orders 格式：从 JSON 字符串转换为数组格式
|
||||
if (matchedItem.orders) {
|
||||
|
||||
if (layer?.orders) {
|
||||
try {
|
||||
const ordersObj = JSON.parse(matchedItem.orders);
|
||||
const ordersObj = JSON.parse(layer.orders);
|
||||
const ordersArray = Object.entries(ordersObj).map(([field, dir]) => ({
|
||||
field,
|
||||
dir
|
||||
@ -898,9 +932,7 @@ export const useMapStore = defineStore('map', () => {
|
||||
console.error('解析 orders 失败:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 如果没有匹配到 urlList，尝试解析 paramJson
|
||||
if (!Object.keys(requestParams).length && paramJson) {
|
||||
try {
|
||||
const jsonObj = JSON.parse(paramJson);
|
||||
@ -1109,6 +1141,8 @@ export const useMapStore = defineStore('map', () => {
|
||||
|
||||
const allPointData = mapDataStore.rebuildPointDataFromCache();
|
||||
|
||||
console.log(888);
|
||||
console.log(currentCheckedKeys);
|
||||
// 更新地图锚点显示
|
||||
await updateLayerData(currentCheckedKeys, false);
|
||||
}
|
||||
|
||||
@ -15,7 +15,8 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
|
||||
// ✅ 保存原始名称到 meta，用于菜单显示
|
||||
tmp.meta = {
|
||||
...tmp.meta,
|
||||
title: tmp.name || tmp.menuName // 原始名称用于显示
|
||||
title: tmp.name || tmp.menuName, // 原始名称用于显示
|
||||
moduleId: tmp.id // 保存菜单ID，供地图模块使用
|
||||
};
|
||||
// ✅ name 使用路径生成唯一值
|
||||
tmp.name = tmp.path || tmp.opturl;
|
||||
|
||||
@ -39,3 +39,6 @@
|
||||
.ant-message {
|
||||
z-index: 2005 !important;
|
||||
}
|
||||
.ant-modal-header {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
@ -25,16 +25,16 @@ export const urlList = [
|
||||
orders:
|
||||
'{"baseId":"asc","rvcdStepSort":"asc","siteStepSort":"asc","ennm":"asc"}'
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
|
||||
title: '实际水质',
|
||||
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
|
||||
title: '目标水质',
|
||||
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
|
||||
// title: '实际水质',
|
||||
// params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
|
||||
// title: '目标水质',
|
||||
// params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/wq/anchorPoint/GetKendoListCust',
|
||||
// title: '自建站',
|
||||
@ -171,11 +171,11 @@ export const urlList = [
|
||||
title: '水电站告警情况',
|
||||
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/fb/point/discharge/GetKendoListCust',
|
||||
title: '水电站',
|
||||
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/fb/point/discharge/GetKendoListCust',
|
||||
// title: '水电站',
|
||||
// params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
// },
|
||||
{
|
||||
url: '/wmp-env-server/env/fh/zqpoint/GetKendoListCust',
|
||||
title: '国家水文站',
|
||||
@ -200,19 +200,19 @@ export const urlList = [
|
||||
title: '视频监控站',
|
||||
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/wb/point/GetKendoListCust',
|
||||
title: '气象站',
|
||||
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/sw/getEngTempPointList/getLastData',
|
||||
title: '水温站点',
|
||||
params: {
|
||||
logic: 'and',
|
||||
filters: []
|
||||
}
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/env/wb/point/GetKendoListCust',
|
||||
// title: '气象站',
|
||||
// params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/sw/getEngTempPointList/getLastData',
|
||||
// title: '水温站点',
|
||||
// params: {
|
||||
// logic: 'and',
|
||||
// filters: []
|
||||
// }
|
||||
// },
|
||||
{
|
||||
url: '/wmp-env-server/env/wq/anchorPoint/GetKendoListCust',
|
||||
title: '水质站点',
|
||||
@ -233,38 +233,38 @@ export const urlList = [
|
||||
},
|
||||
orders: '{"orderIndex":"asc"}'
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
|
||||
title: '水质告警',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WQ' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
|
||||
title: '水温告警',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WTRV' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
|
||||
title: '水位告警',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'ENG' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/warn/stcd/operatePoint/GetKendoListCust',
|
||||
title: '环保设施告警',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
yr: dayjs().format('YYYY')
|
||||
}
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
|
||||
// title: '水质告警',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WQ' }]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
|
||||
// title: '水温告警',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WTRV' }]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
|
||||
// title: '水位告警',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'ENG' }]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/warn/stcd/operatePoint/GetKendoListCust',
|
||||
// title: '环保设施告警',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// yr: dayjs().format('YYYY')
|
||||
// }
|
||||
// },
|
||||
{
|
||||
url: '/wmp-env-server/env/fp/point/built/GetKendoListCust',
|
||||
title: '在建过鱼设施-地图锚点',
|
||||
@ -273,24 +273,24 @@ export const urlList = [
|
||||
bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
|
||||
title: '在建鱼类增殖站',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'FB' }],
|
||||
bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
|
||||
title: '在建人工产卵场',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'SG' }],
|
||||
bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
|
||||
}
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
|
||||
// title: '在建鱼类增殖站',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'FB' }],
|
||||
// bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
|
||||
// title: '在建人工产卵场',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'SG' }],
|
||||
// bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
|
||||
// }
|
||||
// },
|
||||
{
|
||||
url: '/wmp-env-server/env/fhvap/built/GetKendoListCust',
|
||||
title: '在建珍稀植物园',
|
||||
@ -309,21 +309,21 @@ export const urlList = [
|
||||
bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/eng/eq/eqds/built/GetKendoListCust',
|
||||
title: '在建生态流量泄放设施',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
BLDSTT_CCODE: [{ field: 'BLDSTT_CCODE', operator: 'eq', value: '1' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/we/fishList/point/GetKendoList',
|
||||
title: '鱼类沿程',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
|
||||
}
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/eng/eq/eqds/built/GetKendoListCust',
|
||||
// title: '在建生态流量泄放设施',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// BLDSTT_CCODE: [{ field: 'BLDSTT_CCODE', operator: 'eq', value: '1' }]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/we/fishList/point/GetKendoList',
|
||||
// title: '鱼类沿程',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
|
||||
// }
|
||||
// },
|
||||
{
|
||||
url: '/wmp-env-server/env/wva/point/GetKendoListCust',
|
||||
title: '野生动物监测',
|
||||
@ -332,15 +332,15 @@ export const urlList = [
|
||||
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WVA' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/we/fishList/point/GetNativeRareFish',
|
||||
title: '土著珍稀鱼类',
|
||||
params: {
|
||||
rare: '1',
|
||||
specOrigin: '1',
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
|
||||
}
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/env/we/fishList/point/GetNativeRareFish',
|
||||
// title: '土著珍稀鱼类',
|
||||
// params: {
|
||||
// rare: '1',
|
||||
// specOrigin: '1',
|
||||
// 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',
|
||||
|
||||
153
frontend/src/utils/drag.ts
Normal file
153
frontend/src/utils/drag.ts
Normal 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 };
|
||||
}
|
||||
@ -58,6 +58,14 @@
|
||||
placeholder="请输入锚点接口"
|
||||
/>
|
||||
</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
|
||||
label="三维接口"
|
||||
name="urlThd"
|
||||
@ -140,9 +148,14 @@ const defaultFormData = reactive({
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
code: undefined,
|
||||
type: undefined,
|
||||
treeLevel: undefined,
|
||||
description: undefined,
|
||||
parentId: undefined
|
||||
parentId: undefined,
|
||||
url: undefined,
|
||||
urlThd: undefined,
|
||||
paramJson: undefined,
|
||||
anchorParamJson: undefined
|
||||
});
|
||||
const typeOpiton = ref<any>([]);
|
||||
const formData: any = reactive({ ...defaultFormData });
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
:list-url="getAllMapLayerTree"
|
||||
:search-params="searchParams"
|
||||
>
|
||||
<template #action="{ column, record }">
|
||||
<template #action="{ record }">
|
||||
<div class="flex gap-[6px]">
|
||||
<a-button
|
||||
class="!p-0"
|
||||
@ -47,13 +47,13 @@
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template #enable="{ column, record }">
|
||||
<template #enable="{ record }">
|
||||
<a-switch
|
||||
:checked="record.enable === 1"
|
||||
@change="(checked: boolean) => handleEnableChange(record, checked)"
|
||||
/>
|
||||
</template>
|
||||
<template #checkable="{ column, record }">
|
||||
<template #checkable="{ record }">
|
||||
<a-switch
|
||||
:checked="record.checkable === 1"
|
||||
@change="(checked: boolean) => handleCheckableChange(record, checked)"
|
||||
@ -89,7 +89,10 @@ const columns = [
|
||||
title: '',
|
||||
dataIndex: '',
|
||||
key: '',
|
||||
width: 50
|
||||
width: 50,
|
||||
customRender: () => {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '序号',
|
||||
@ -226,8 +229,9 @@ const handleAdd = (record: any) => {
|
||||
// 过滤掉值为 '-' 的字段
|
||||
const filterRecord = (record: any) => {
|
||||
const filtered: any = {};
|
||||
const keepKeys = ['code']; // 这些键始终保留
|
||||
Object.keys(record).forEach(key => {
|
||||
if (record[key] !== '-') {
|
||||
if (keepKeys.includes(key) || record[key] !== '-') {
|
||||
filtered[key] = record[key];
|
||||
}
|
||||
});
|
||||
@ -236,6 +240,7 @@ const filterRecord = (record: any) => {
|
||||
|
||||
// 编辑处理
|
||||
const handleEdit = (record: any) => {
|
||||
console.log('handleEdit', record);
|
||||
parentId.value = null;
|
||||
isInterface.value = false;
|
||||
currentRecord.value = filterRecord(record);
|
||||
@ -243,8 +248,10 @@ const handleEdit = (record: any) => {
|
||||
};
|
||||
// 编辑接口处理
|
||||
const handleEditInterface = (record: any) => {
|
||||
isInterface.value = true;
|
||||
console.log('handleEdit', record);
|
||||
currentRecord.value = filterRecord(record);
|
||||
console.log('handleEdit', currentRecord.value);
|
||||
isInterface.value = true;
|
||||
parentId.value = null;
|
||||
editModalVisible.value = true;
|
||||
};
|
||||
@ -285,6 +292,7 @@ const handleReset = () => {
|
||||
// 是否启用切换处理
|
||||
const handleEnableChange = (record: any, checked: boolean) => {
|
||||
currentRecord.value = filterRecord(record);
|
||||
console.log(currentRecord.value);
|
||||
record.enable = checked ? 1 : 0;
|
||||
handleEditSubmit({ enable: checked ? 1 : 0 }, 'switch');
|
||||
};
|
||||
@ -310,6 +318,7 @@ const handleEditSubmit = async (values: any, type: string) => {
|
||||
...values,
|
||||
parentId: parentId.value
|
||||
});
|
||||
if (res.code == 0) {
|
||||
if (type === 'switch') {
|
||||
message.success('修改状态成功');
|
||||
} else {
|
||||
@ -317,6 +326,13 @@ const handleEditSubmit = async (values: any, type: string) => {
|
||||
}
|
||||
editModalVisible.value = false;
|
||||
basicTable.value.refresh();
|
||||
} else {
|
||||
if (type === 'switch') {
|
||||
message.success('修改状态成功');
|
||||
} else {
|
||||
message.success(`保存成功`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (type === 'switch') {
|
||||
message.error('修改状态失败');
|
||||
|
||||
@ -67,29 +67,32 @@
|
||||
placeholder="请输入icon编码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="父级图例名称" name="parentId">
|
||||
<a-select
|
||||
<a-form-item label="父级图例" name="parentId">
|
||||
<a-tree-select
|
||||
v-model:value="formData.parentId"
|
||||
:options="LegendOptions"
|
||||
:tree-data="processedLegendOptions"
|
||||
:fieldNames="{
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
value: 'id',
|
||||
children: 'childrenList'
|
||||
}"
|
||||
style="width: 100%"
|
||||
placeholder="请选择父级图例名称"
|
||||
placeholder="请选择父级图例"
|
||||
@select="handleParentSelect"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="图层名称" name="layerCode">
|
||||
<a-form-item label="图层" name="layerCode">
|
||||
<a-tree-select
|
||||
v-model:value="formData.layerCode"
|
||||
:tree-data="LayerOptions"
|
||||
:tree-data="processedLayerOptions"
|
||||
:fieldNames="{
|
||||
label: 'title',
|
||||
value: 'code',
|
||||
children: 'children'
|
||||
}"
|
||||
style="width: 100%"
|
||||
placeholder="请选择图层名称"
|
||||
placeholder="请选择图层"
|
||||
@select="handleLayerSelect"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="二维最小缩放" name="minZoom">
|
||||
@ -163,6 +166,29 @@ const options = ref([
|
||||
{ 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({
|
||||
get: () => props.visible,
|
||||
set: val => emit('update:visible', val)
|
||||
@ -207,6 +233,47 @@ const rules: Record<string, Rule[]> = {
|
||||
};
|
||||
|
||||
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 () => {
|
||||
try {
|
||||
|
||||
@ -9,6 +9,9 @@
|
||||
>
|
||||
<div class="mb-4">
|
||||
<a-button type="primary" @click="handleAdd">新增选中配置</a-button>
|
||||
<a-button class="ml-2" @click="handleDeleteSelected"
|
||||
>删除选中配置</a-button
|
||||
>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
@ -17,6 +20,7 @@
|
||||
:pagination="pagination"
|
||||
row-key="id"
|
||||
@change="handleTableChange"
|
||||
:row-selection="{ onChange: onSelectChange }"
|
||||
>
|
||||
<template #action="{ record }">
|
||||
<div class="flex gap-[6px]">
|
||||
@ -97,17 +101,17 @@ const columns = [
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '是否默认展示',
|
||||
dataIndex: 'enable',
|
||||
key: 'enable',
|
||||
title: '是否默认选中',
|
||||
dataIndex: 'checked',
|
||||
key: 'checked',
|
||||
width: 150,
|
||||
customRender: ({ record }: any) => {
|
||||
const text =
|
||||
record.enable === 1 ? '是' : record.enable === 0 ? '否' : '-';
|
||||
record.checked === 1 ? '是' : record.checked === 0 ? '否' : '-';
|
||||
const color =
|
||||
record.enable === 1
|
||||
record.checked === 1
|
||||
? '#52c41a'
|
||||
: record.enable === 0
|
||||
: record.checked === 0
|
||||
? '#ff4d4f'
|
||||
: '#999';
|
||||
return h('span', { style: { color } }, text);
|
||||
@ -129,6 +133,7 @@ const columns = [
|
||||
|
||||
const tableData = ref<any[]>([]);
|
||||
const tableLoading = ref(false);
|
||||
const selectedRows = ref<any[]>([]);
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
@ -155,11 +160,11 @@ const fetchTableData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
const res = await getAllMapLegendModuleTree({
|
||||
skip: pagination.current - 1,
|
||||
skip: pagination.current,
|
||||
take: pagination.pageSize,
|
||||
sort: [
|
||||
{
|
||||
field: 'orderIndex',
|
||||
field: 'id',
|
||||
dir: 'asc'
|
||||
}
|
||||
],
|
||||
@ -184,7 +189,10 @@ const fetchTableData = async () => {
|
||||
tableLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onSelectChange = (row: any[]) => {
|
||||
console.log(row);
|
||||
selectedRows.value = row;
|
||||
};
|
||||
const handleTableChange = (pag: any) => {
|
||||
pagination.current = pag.current;
|
||||
pagination.pageSize = pag.pageSize;
|
||||
@ -199,7 +207,7 @@ const handleAdd = () => {
|
||||
|
||||
// 编辑
|
||||
const handleEdit = (record: any) => {
|
||||
if (record.moduleId == 'tycd') {
|
||||
if (record.moduleId == 'common') {
|
||||
record.universal = 1;
|
||||
} else {
|
||||
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 = () => {
|
||||
@ -241,7 +271,7 @@ const handleFormSubmit = async (values: any) => {
|
||||
let res = await saveMapLegendModule({
|
||||
...values,
|
||||
resId: props.legendId,
|
||||
resType: props.legendType
|
||||
resType: 'legend'
|
||||
});
|
||||
// 刷新表格数据
|
||||
message.success('保存成功');
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
>
|
||||
<a-tree-select
|
||||
v-model:value="formData.moduleId"
|
||||
:tree-data="menuTreeData"
|
||||
:tree-data="processedMenuTreeData"
|
||||
:field-names="{ label: 'name', value: 'id', children: 'children' }"
|
||||
tree-node-filter-prop="name"
|
||||
style="width: 100%"
|
||||
@ -39,10 +39,11 @@
|
||||
allow-clear
|
||||
show-search
|
||||
tree-default-expand-all
|
||||
@select="handleLayerSelect"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否选中" name="enable">
|
||||
<a-radio-group v-model:value="formData.enable">
|
||||
<a-form-item label="是否默认选中" name="checked">
|
||||
<a-radio-group v-model:value="formData.checked">
|
||||
<a-radio :value="1">是</a-radio>
|
||||
<a-radio :value="0">否</a-radio>
|
||||
</a-radio-group>
|
||||
@ -92,11 +93,33 @@ const modalVisible = computed({
|
||||
const formRef = ref();
|
||||
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({
|
||||
id: undefined,
|
||||
legendId: undefined,
|
||||
moduleId: undefined,
|
||||
enable: 1,
|
||||
checked: 1,
|
||||
orderIndex: 0,
|
||||
universal: 0
|
||||
});
|
||||
@ -108,7 +131,7 @@ const rules: Record<string, Rule[]> = {
|
||||
{ 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' }]
|
||||
};
|
||||
|
||||
@ -133,12 +156,16 @@ const fetchMenuTree = async () => {
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
const values = { ...formData, systemId: 'qgc', systemName: 'qgc' };
|
||||
const values = {
|
||||
...formData,
|
||||
systemId: 'qgc',
|
||||
systemName: 'qgc'
|
||||
};
|
||||
if (values.universal === 0) {
|
||||
delete values.universal;
|
||||
} else {
|
||||
delete values.universal;
|
||||
values.moduleId = 'tycd';
|
||||
values.moduleId = 'common';
|
||||
}
|
||||
console.log(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 = () => {
|
||||
emit('update:visible', false);
|
||||
emit('cancel');
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
:list-url="getAllMapLegendTree"
|
||||
:search-params="searchParams"
|
||||
>
|
||||
<template #action="{ column, record }">
|
||||
<template #action="{ record }">
|
||||
<div class="flex gap-[6px] justify-between">
|
||||
<a-button
|
||||
class="!p-0"
|
||||
@ -41,19 +41,19 @@
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template #enable="{ column, record }">
|
||||
<template #enable="{ record }">
|
||||
<a-switch
|
||||
:checked="record.enable === 1"
|
||||
@change="(checked: boolean) => handleEnableChange(record, checked)"
|
||||
/>
|
||||
</template>
|
||||
<template #internal="{ column, record }">
|
||||
<template #internal="{ record }">
|
||||
<a-switch
|
||||
:checked="record.internal === 1"
|
||||
@change="(checked: boolean) => handleInternalChange(record, checked)"
|
||||
/>
|
||||
</template>
|
||||
<template #ifShow="{ column, record }">
|
||||
<template #ifShow="{ record }">
|
||||
<a-switch
|
||||
:checked="record.ifShow === 1"
|
||||
@change="(checked: boolean) => handleIfShowChange(record, checked)"
|
||||
@ -311,8 +311,12 @@ const handleDelete = (record: any) => {
|
||||
onOk: async () => {
|
||||
try {
|
||||
let res = await deleteMapLegend([record.id]);
|
||||
if (res.code == 1) {
|
||||
message.error('删除失败');
|
||||
} else {
|
||||
message.success('删除成功');
|
||||
basicTable.value.refresh();
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
return;
|
||||
@ -364,7 +368,7 @@ const handleReset = () => {
|
||||
basicTable.value.getList({
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{ field: 'dataType', operator: 'eq', dataType: 'string', value: '1' }
|
||||
{ field: 'dataType', operator: 'eq', dataType: 'string', value: '2' }
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
:transformData="transformData"
|
||||
:list-url="getAllMapLegendTree"
|
||||
>
|
||||
<template #action="{ column, record }">
|
||||
<template #action="{ record }">
|
||||
<div class="flex gap-[6px]">
|
||||
<a-button
|
||||
class="!p-0"
|
||||
@ -41,19 +41,19 @@
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template #enable="{ column, record }">
|
||||
<template #enable="{ record }">
|
||||
<a-switch
|
||||
:checked="record.enable === 1"
|
||||
@change="(checked: boolean) => handleEnableChange(record, checked)"
|
||||
/>
|
||||
</template>
|
||||
<template #internal="{ column, record }">
|
||||
<template #internal="{ record }">
|
||||
<a-switch
|
||||
:checked="record.internal === 1"
|
||||
@change="(checked: boolean) => handleInternalChange(record, checked)"
|
||||
/>
|
||||
</template>
|
||||
<template #ifShow="{ column, record }">
|
||||
<template #ifShow="{ record }">
|
||||
<a-switch
|
||||
:checked="record.ifShow === 1"
|
||||
@change="(checked: boolean) => handleIfShowChange(record, checked)"
|
||||
@ -88,7 +88,10 @@ const columns = [
|
||||
title: '',
|
||||
dataIndex: '',
|
||||
key: '',
|
||||
width: 50
|
||||
width: 50,
|
||||
customRender: () => {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '序号',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ElForm, ElMessageBox, ElMessage } from "element-plus";
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElForm, ElMessageBox, ElMessage } from 'element-plus';
|
||||
import {
|
||||
getdata,
|
||||
addmenu,
|
||||
@ -8,20 +8,20 @@ import {
|
||||
deltmenu,
|
||||
moveOrderno,
|
||||
uploadIcon,
|
||||
moveIcon,
|
||||
} from "@/api/menu";
|
||||
import Sortable from "sortablejs";
|
||||
moveIcon
|
||||
} from '@/api/menu';
|
||||
import Sortable from 'sortablejs';
|
||||
//定义表格数据
|
||||
const url = import.meta.env.VITE_APP_BASE_API;
|
||||
const tableData: any = ref([]);
|
||||
function gteTabledata() {
|
||||
const params = {
|
||||
systemcode: systemcode.value,
|
||||
name: "",
|
||||
name: ''
|
||||
};
|
||||
loading.value = true;
|
||||
getdata(params)
|
||||
.then((res) => {
|
||||
.then(res => {
|
||||
tableData.value = res;
|
||||
loading.value = false;
|
||||
})
|
||||
@ -34,54 +34,54 @@ const menuInfoRef = ref();
|
||||
const btnInfoRef = ref();
|
||||
const loading = ref(false);
|
||||
//定义tabbar
|
||||
const systemcode = ref("1");
|
||||
const activeIndex = ref("1");
|
||||
const systemcode = ref('1');
|
||||
const activeIndex = ref('1');
|
||||
function handleSelect(key: string) {
|
||||
if (key == "1") {
|
||||
systemcode.value = "1";
|
||||
} else if (key == "2") {
|
||||
systemcode.value = "2";
|
||||
} else if (key == "3") {
|
||||
systemcode.value = "3";
|
||||
if (key == '1') {
|
||||
systemcode.value = '1';
|
||||
} else if (key == '2') {
|
||||
systemcode.value = '2';
|
||||
} else if (key == '3') {
|
||||
systemcode.value = '3';
|
||||
}
|
||||
gteTabledata();
|
||||
}
|
||||
//定义搜索框文本
|
||||
const menuname = ref("");
|
||||
const menuname = ref('');
|
||||
//点击搜索
|
||||
function search() {
|
||||
menuname.value = menuname.value.replace(/\s+/g, "");
|
||||
menuname.value = menuname.value.replace(/\s+/g, '');
|
||||
let params = {
|
||||
systemcode: systemcode.value,
|
||||
name: menuname.value,
|
||||
isdisplay: "",
|
||||
isdisplay: ''
|
||||
};
|
||||
getdata(params).then((res) => {
|
||||
getdata(params).then(res => {
|
||||
tableData.value = res;
|
||||
});
|
||||
}
|
||||
//目录添加
|
||||
const title = ref("");
|
||||
const title = ref('');
|
||||
const expertInfo: any = ref({
|
||||
name: "",
|
||||
type: "0",
|
||||
opturl: "",
|
||||
permission: "",
|
||||
name: '',
|
||||
type: '0',
|
||||
opturl: '',
|
||||
permission: '',
|
||||
isdisplay: true,
|
||||
systemcode: "",
|
||||
icon: "",
|
||||
code: "",
|
||||
systemcode: '',
|
||||
icon: '',
|
||||
code: ''
|
||||
});
|
||||
const dialogVisible = ref(false);
|
||||
function addClick() {
|
||||
title.value = "新增目录";
|
||||
title.value = '新增目录';
|
||||
const orgnamemage = ref({
|
||||
name: "",
|
||||
type: "3",
|
||||
opturl: "",
|
||||
permission: "",
|
||||
name: '',
|
||||
type: '3',
|
||||
opturl: '',
|
||||
permission: '',
|
||||
orderno: 1,
|
||||
isdisplay: "1",
|
||||
isdisplay: '1'
|
||||
});
|
||||
expertInfo.value = orgnamemage.value;
|
||||
dialogVisible.value = true;
|
||||
@ -97,35 +97,37 @@ function handleClose() {
|
||||
}
|
||||
//表格规则定义
|
||||
const rules = ref({
|
||||
name: [{ required: true, message: "请输入目录名称", trigger: "blur" }],
|
||||
opturl: [{ required: true, message: "请输入操作URL", trigger: "blur" }],
|
||||
permission: [{ required: true, message: "请输入目录权限标识", trigger: "blur" }],
|
||||
name: [{ required: true, message: '请输入目录名称', trigger: 'blur' }],
|
||||
opturl: [{ required: true, message: '请输入操作URL', trigger: 'blur' }],
|
||||
permission: [
|
||||
{ required: true, message: '请输入目录权限标识', trigger: 'blur' }
|
||||
]
|
||||
});
|
||||
//添加子目录
|
||||
const parentID = ref("");
|
||||
const parentID = ref('');
|
||||
function addchilder(row: any) {
|
||||
title.value = "新增子目录";
|
||||
title.value = '新增子目录';
|
||||
|
||||
const orgnamemage = ref({
|
||||
name: "",
|
||||
type: "3",
|
||||
opturl: "",
|
||||
permission: "",
|
||||
name: '',
|
||||
type: '3',
|
||||
opturl: '',
|
||||
permission: '',
|
||||
orderno: 1,
|
||||
isdisplay: "1",
|
||||
isdisplay: '1'
|
||||
});
|
||||
parentID.value = row.id;
|
||||
expertInfo.value = orgnamemage.value;
|
||||
dialogVisible.value = true;
|
||||
iconall.value = "";
|
||||
iconall.value = '';
|
||||
getid.value = row.id;
|
||||
}
|
||||
//新增目录-确认按钮
|
||||
function expertsubmit() {
|
||||
if (expertInfo.value.name == "") {
|
||||
if (expertInfo.value.name == '') {
|
||||
ElMessage({
|
||||
message: "请填写目录名称",
|
||||
type: "error",
|
||||
message: '请填写目录名称',
|
||||
type: 'error'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
@ -133,116 +135,120 @@ function expertsubmit() {
|
||||
let params = {
|
||||
name: expertInfo.value.name,
|
||||
systemcode: systemcode.value,
|
||||
type: "0",
|
||||
parentid: "0",
|
||||
type: '0',
|
||||
parentid: '0',
|
||||
id: expertInfo.value.id,
|
||||
icon: iconall.value,
|
||||
opturl: expertInfo.value.opturl,
|
||||
isdisplay: expertInfo.value.isdisplay,
|
||||
isdisplay: expertInfo.value.isdisplay
|
||||
};
|
||||
editmenu(params).then(() => {
|
||||
gteTabledata();
|
||||
dialogVisible.value = false;
|
||||
ElMessage({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
} else if (title.value == "新增子目录") {
|
||||
} else if (title.value == '新增子目录') {
|
||||
let params = {
|
||||
name: expertInfo.value.name,
|
||||
systemcode: systemcode.value,
|
||||
type: "0",
|
||||
type: '0',
|
||||
opturl: expertInfo.value.opturl,
|
||||
isdisplay: expertInfo.value.isdisplay,
|
||||
parentid: parentID.value,
|
||||
icon: iconall.value,
|
||||
icon: iconall.value
|
||||
};
|
||||
addmenu(params).then(() => {
|
||||
gteTabledata();
|
||||
dialogVisible.value = false;
|
||||
ElMessage({
|
||||
message: "新建成功",
|
||||
type: "success",
|
||||
message: '新建成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
let params = {
|
||||
name: expertInfo.value.name,
|
||||
systemcode: systemcode.value,
|
||||
type: "0",
|
||||
type: '0',
|
||||
opturl: expertInfo.value.opturl,
|
||||
isdisplay: expertInfo.value.isdisplay,
|
||||
parentid: "0",
|
||||
parentid: '0',
|
||||
id: expertInfo.value.id,
|
||||
icon: iconall.value,
|
||||
icon: iconall.value
|
||||
};
|
||||
addmenu(params).then(() => {
|
||||
gteTabledata();
|
||||
dialogVisible.value = false;
|
||||
ElMessage({
|
||||
message: "新建成功",
|
||||
type: "success",
|
||||
message: '新建成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
//菜单目录
|
||||
const menurules = ref({
|
||||
name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
|
||||
opturl: [{ required: true, message: "请输入操作URL", trigger: "blur" }],
|
||||
permission: [{ required: true, message: "请输入菜单权限标识", trigger: "blur" }],
|
||||
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
|
||||
opturl: [{ required: true, message: '请输入操作URL', trigger: 'blur' }],
|
||||
permission: [
|
||||
{ required: true, message: '请输入菜单权限标识', trigger: 'blur' }
|
||||
]
|
||||
});
|
||||
const menuVisible = ref(false);
|
||||
const menutitle = ref("");
|
||||
const menutitle = ref('');
|
||||
//定义按钮弹窗数据
|
||||
const btnInfo: any = ref({
|
||||
name: " ",
|
||||
orderno: " ",
|
||||
islink: " ",
|
||||
opturl: " ",
|
||||
permission: " ",
|
||||
isdisplay: " ",
|
||||
icon: "",
|
||||
name: ' ',
|
||||
orderno: ' ',
|
||||
islink: ' ',
|
||||
opturl: ' ',
|
||||
permission: ' ',
|
||||
isdisplay: ' ',
|
||||
icon: ''
|
||||
});
|
||||
const btnVisible = ref(false);
|
||||
const btnrules = ref({
|
||||
name: [{ required: true, message: "请输入按钮名称", trigger: "blur" }],
|
||||
permission: [{ required: true, message: "请输入按钮权限标识", trigger: "blur" }],
|
||||
name: [{ required: true, message: '请输入按钮名称', trigger: 'blur' }],
|
||||
permission: [
|
||||
{ required: true, message: '请输入按钮权限标识', trigger: 'blur' }
|
||||
]
|
||||
});
|
||||
//定义菜单弹窗数据
|
||||
const menuInfo: any = ref({
|
||||
name: "",
|
||||
orderno: "",
|
||||
islink: "",
|
||||
opturl: "",
|
||||
permission: "",
|
||||
isdisplay: "",
|
||||
icon: "",
|
||||
name: '',
|
||||
orderno: '',
|
||||
islink: '',
|
||||
opturl: '',
|
||||
permission: '',
|
||||
isdisplay: '',
|
||||
icon: ''
|
||||
});
|
||||
//修改目录
|
||||
const btntitle = ref("");
|
||||
const getid = ref("");
|
||||
const allId = ref("");
|
||||
const btntitle = ref('');
|
||||
const getid = ref('');
|
||||
const allId = ref('');
|
||||
function handleEdit(row: any) {
|
||||
iconall.value = row.icon;
|
||||
const Row = JSON.parse(JSON.stringify(row));
|
||||
getid.value = row.id;
|
||||
btnparentid.value = row.parentid;
|
||||
if (row.type == "2") {
|
||||
btntitle.value = "修改按钮";
|
||||
if (row.type == '2') {
|
||||
btntitle.value = '修改按钮';
|
||||
let newInfo = ref({});
|
||||
newInfo.value = Row;
|
||||
btnInfo.value = newInfo.value;
|
||||
btnVisible.value = true;
|
||||
} else if (row.type == "1") {
|
||||
menutitle.value = "修改菜单";
|
||||
} else if (row.type == '1') {
|
||||
menutitle.value = '修改菜单';
|
||||
let newInfo = ref({});
|
||||
newInfo.value = Row;
|
||||
menuInfo.value = newInfo.value;
|
||||
menuVisible.value = true;
|
||||
} else {
|
||||
title.value = "修改目录";
|
||||
title.value = '修改目录';
|
||||
let newInfo = ref({});
|
||||
newInfo.value = Row;
|
||||
expertInfo.value = newInfo.value;
|
||||
@ -250,39 +256,39 @@ function handleEdit(row: any) {
|
||||
}
|
||||
}
|
||||
//新增菜单
|
||||
const btnparentid = ref("");
|
||||
const btnparentid = ref('');
|
||||
function menuclick(row: any) {
|
||||
if (row.id == undefined) {
|
||||
btnparentid.value = "0";
|
||||
btnparentid.value = '0';
|
||||
} else {
|
||||
btnparentid.value = row.id;
|
||||
}
|
||||
menutitle.value = "添加菜单";
|
||||
menutitle.value = '添加菜单';
|
||||
(menuInfo.value = {
|
||||
name: "",
|
||||
type: "1",
|
||||
islink: "0",
|
||||
opturl: "",
|
||||
permission: "",
|
||||
name: '',
|
||||
type: '1',
|
||||
islink: '0',
|
||||
opturl: '',
|
||||
permission: '',
|
||||
orderno: 1,
|
||||
isdisplay: "1",
|
||||
isdisplay: '1'
|
||||
}),
|
||||
(menuVisible.value = true);
|
||||
iconall.value = "";
|
||||
iconall.value = '';
|
||||
getid.value = row.id;
|
||||
}
|
||||
//添加按钮
|
||||
function btnclick(row: any) {
|
||||
getid.value = row.id;
|
||||
btntitle.value = "添加按钮";
|
||||
btntitle.value = '添加按钮';
|
||||
(btnInfo.value = {
|
||||
name: "",
|
||||
type: "2",
|
||||
islink: "0",
|
||||
opturl: "",
|
||||
permission: "",
|
||||
name: '',
|
||||
type: '2',
|
||||
islink: '0',
|
||||
opturl: '',
|
||||
permission: '',
|
||||
orderno: 1,
|
||||
isdisplay: "1",
|
||||
isdisplay: '1'
|
||||
}),
|
||||
(btnVisible.value = true);
|
||||
btnparentid.value = row.id;
|
||||
@ -290,36 +296,36 @@ function btnclick(row: any) {
|
||||
//删除
|
||||
function handleDelete(row: any) {
|
||||
const message = ref();
|
||||
if (row.type == "0") {
|
||||
message.value = "确定删除此目录及此目录下的所有菜单吗？";
|
||||
} else if (row.type == "1") {
|
||||
message.value = "确定删除此菜单及此菜单下的所有按钮吗？";
|
||||
} else if (row.type == "2") {
|
||||
message.value = "确定删除此按钮吗？";
|
||||
if (row.type == '0') {
|
||||
message.value = '确定删除此目录及此目录下的所有菜单吗？';
|
||||
} else if (row.type == '1') {
|
||||
message.value = '确定删除此菜单及此菜单下的所有按钮吗？';
|
||||
} else if (row.type == '2') {
|
||||
message.value = '确定删除此按钮吗？';
|
||||
}
|
||||
ElMessageBox.confirm(message.value, "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
ElMessageBox.confirm(message.value, '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const params = {
|
||||
id: row.id,
|
||||
id: row.id
|
||||
};
|
||||
deltmenu(params).then(() => {
|
||||
gteTabledata();
|
||||
ElMessage({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
//菜单目录-确定
|
||||
function menusubmit() {
|
||||
if (menuInfo.value.name == "") {
|
||||
if (menuInfo.value.name == '') {
|
||||
ElMessage({
|
||||
message: "请填写菜单名称",
|
||||
type: "error",
|
||||
message: '请填写菜单名称',
|
||||
type: 'error'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
@ -327,41 +333,41 @@ function menusubmit() {
|
||||
let params = {
|
||||
name: menuInfo.value.name,
|
||||
systemcode: systemcode.value,
|
||||
type: "1",
|
||||
type: '1',
|
||||
opturl: menuInfo.value.opturl,
|
||||
permission: menuInfo.value.permission,
|
||||
islink: menuInfo.value.islink,
|
||||
isdisplay: menuInfo.value.isdisplay,
|
||||
// parentid: '',
|
||||
id: getid.value,
|
||||
icon: iconall.value,
|
||||
icon: iconall.value
|
||||
};
|
||||
editmenu(params).then(() => {
|
||||
gteTabledata();
|
||||
menuVisible.value = false;
|
||||
ElMessage({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
let params = {
|
||||
name: menuInfo.value.name,
|
||||
systemcode: systemcode.value,
|
||||
type: "1",
|
||||
type: '1',
|
||||
opturl: menuInfo.value.opturl,
|
||||
islink: menuInfo.value.islink,
|
||||
isdisplay: menuInfo.value.isdisplay,
|
||||
parentid: btnparentid.value,
|
||||
id: expertInfo.value.id,
|
||||
icon: iconall.value,
|
||||
icon: iconall.value
|
||||
};
|
||||
addmenu(params).then(() => {
|
||||
gteTabledata();
|
||||
menuVisible.value = false;
|
||||
ElMessage({
|
||||
message: "新建成功",
|
||||
type: "success",
|
||||
message: '新建成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -369,10 +375,10 @@ function menusubmit() {
|
||||
//按钮目录-确定
|
||||
|
||||
function btnsubmit() {
|
||||
if (btnInfo.value.name == "" || btnInfo.value.permission == "") {
|
||||
if (btnInfo.value.name == '' || btnInfo.value.permission == '') {
|
||||
ElMessage({
|
||||
message: "请填写按钮名称和权限标识",
|
||||
type: "error",
|
||||
message: '请填写按钮名称和权限标识',
|
||||
type: 'error'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
@ -381,19 +387,19 @@ function btnsubmit() {
|
||||
code: btnInfo.value.code,
|
||||
name: btnInfo.value.name,
|
||||
systemcode: systemcode.value,
|
||||
type: "2",
|
||||
type: '2',
|
||||
opturl: btnInfo.value.opturl,
|
||||
permission: btnInfo.value.permission,
|
||||
islink: btnInfo.value.islink,
|
||||
// isdisplay: btnInfo.value.isdisplay,
|
||||
id: getid.value,
|
||||
id: getid.value
|
||||
};
|
||||
editmenu(params).then(() => {
|
||||
gteTabledata();
|
||||
dialogVisible.value = false;
|
||||
ElMessage({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
});
|
||||
btnVisible.value = false;
|
||||
});
|
||||
@ -401,19 +407,19 @@ function btnsubmit() {
|
||||
let params = {
|
||||
name: btnInfo.value.name,
|
||||
systemcode: systemcode.value,
|
||||
type: "2",
|
||||
type: '2',
|
||||
opturl: btnInfo.value.opturl,
|
||||
permission: btnInfo.value.permission,
|
||||
islink: btnInfo.value.islink,
|
||||
isdisplay: btnInfo.value.isdisplay,
|
||||
parentid: btnparentid.value,
|
||||
parentid: btnparentid.value
|
||||
};
|
||||
addmenu(params).then(() => {
|
||||
gteTabledata();
|
||||
dialogVisible.value = false;
|
||||
ElMessage({
|
||||
message: "新建成功",
|
||||
type: "success",
|
||||
message: '新建成功',
|
||||
type: 'success'
|
||||
});
|
||||
btnVisible.value = false;
|
||||
});
|
||||
@ -425,70 +431,88 @@ function dateFormat(row: any) {
|
||||
var date = new Date(daterc);
|
||||
var year = date.getFullYear();
|
||||
var month =
|
||||
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
||||
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : 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();
|
||||
date.getMonth() + 1 < 10
|
||||
? '0' + (date.getMonth() + 1)
|
||||
: date.getMonth() + 1;
|
||||
date.getMonth() + 1 < 10
|
||||
? '0' + (date.getMonth() + 1)
|
||||
: 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) {
|
||||
allId.value = val;
|
||||
const avatar = document.getElementById("avatar");
|
||||
const avatar = document.getElementById('avatar');
|
||||
avatar?.click();
|
||||
}
|
||||
const iconall = ref("");
|
||||
const iconall = ref('');
|
||||
function changeFile(e: any) {
|
||||
const files = new FormData();
|
||||
files.append("icon", e.target.files[0]);
|
||||
files.append("menuId", allId.value);
|
||||
files.append('icon', e.target.files[0]);
|
||||
files.append('menuId', allId.value);
|
||||
uploadIcon(files)
|
||||
.then((res) => {
|
||||
.then(res => {
|
||||
iconall.value = res.data;
|
||||
gteTabledata();
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "上传成功",
|
||||
type: 'success',
|
||||
message: '上传成功'
|
||||
});
|
||||
// location.reload()
|
||||
var file: any = document.getElementById("avatar");
|
||||
file.value = "";
|
||||
var file: any = document.getElementById('avatar');
|
||||
file.value = '';
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: "error",
|
||||
message: "上传失败",
|
||||
type: 'error',
|
||||
message: '上传失败'
|
||||
});
|
||||
var file: any = document.getElementById("avatar");
|
||||
file.value = "";
|
||||
var file: any = document.getElementById('avatar');
|
||||
file.value = '';
|
||||
});
|
||||
}
|
||||
//图标删除事件
|
||||
function delectIcon(id: any) {
|
||||
ElMessageBox.confirm("确定删除此图标吗？", "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
ElMessageBox.confirm('确定删除此图标吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const params = {
|
||||
id: id,
|
||||
id: id
|
||||
};
|
||||
moveIcon(params).then(() => {
|
||||
iconall.value = "";
|
||||
iconall.value = '';
|
||||
gteTabledata();
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "删除成功",
|
||||
type: 'success',
|
||||
message: '删除成功'
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
// Icon选择器显示状态
|
||||
function treeToTile(treeData: any, childKey = "children") {
|
||||
function treeToTile(treeData: any, childKey = 'children') {
|
||||
const arr = [] as any[];
|
||||
const expanded = (data: any) => {
|
||||
if (data && data.length > 0) {
|
||||
@ -505,9 +529,11 @@ function treeToTile(treeData: any, childKey = "children") {
|
||||
}
|
||||
const activeRows: any = ref([]);
|
||||
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, {
|
||||
draggable: ".draggable .el-table__row",
|
||||
draggable: '.draggable .el-table__row',
|
||||
onMove: () => {
|
||||
activeRows.value = treeToTile(tableData.value); // 把树形的结构转为列表再进行拖拽
|
||||
},
|
||||
@ -517,8 +543,8 @@ function rowDrop() {
|
||||
|
||||
if (oldRow.type != newRow.type) {
|
||||
ElMessage({
|
||||
message: "拖拽同级目录排序",
|
||||
type: "warning",
|
||||
message: '拖拽同级目录排序',
|
||||
type: 'warning'
|
||||
});
|
||||
tableData.value = [];
|
||||
gteTabledata();
|
||||
@ -526,22 +552,22 @@ function rowDrop() {
|
||||
}
|
||||
const params = {
|
||||
fromId: oldRow.id,
|
||||
toId: newRow.id,
|
||||
toId: newRow.id
|
||||
};
|
||||
moveOrderno(params).then((res: any) => {
|
||||
if (res.code == 1) {
|
||||
tableData.value = [];
|
||||
gteTabledata();
|
||||
ElMessage({
|
||||
type: "error",
|
||||
message: "修改失败",
|
||||
type: 'error',
|
||||
message: '修改失败'
|
||||
});
|
||||
} else {
|
||||
tableData.value = [];
|
||||
gteTabledata();
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
@ -612,10 +638,15 @@ onMounted(() => {
|
||||
:header-cell-style="{
|
||||
background: 'rgb(250 250 250)',
|
||||
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">
|
||||
<div style="position: absolute; left: 15px">
|
||||
<img src="@/assets/MenuIcon/lbcz_td.png" alt="" />
|
||||
@ -623,7 +654,12 @@ onMounted(() => {
|
||||
<div style="margin-left: 20px">{{ scope.row.name }}</div>
|
||||
</template>
|
||||
</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">
|
||||
<span v-if="scope.row.type == '2'">按钮</span>
|
||||
<span v-else-if="scope.row.type == '1'">菜单</span>
|
||||
@ -636,14 +672,19 @@ onMounted(() => {
|
||||
width="100"
|
||||
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">
|
||||
<span v-if="scope.row.systemcode == '1'">Web端</span>
|
||||
<span v-else-if="scope.row.systemcode == '2'">手机App</span>
|
||||
<span v-else>Pad端</span>
|
||||
</template>
|
||||
</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">
|
||||
<div
|
||||
v-if="scope.row.type !== '2'"
|
||||
@ -702,11 +743,16 @@ onMounted(() => {
|
||||
@change="changeFile"
|
||||
/>
|
||||
</div>
|
||||
<!-- <img :src="url + '/menu/' + scope.row.icon" alt=""> -->
|
||||
<img :src="url + '/menu/' + scope.row.icon" alt="">
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否外链" width="100" prop="islink" align="center">
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
label="是否外链"
|
||||
width="100"
|
||||
prop="islink"
|
||||
align="center"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.islink == '1'">是</span>
|
||||
<span v-else>否</span>
|
||||
@ -729,7 +775,12 @@ onMounted(() => {
|
||||
prop="permission"
|
||||
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">
|
||||
<span v-if="scope.row.isdisplay == '1'">是</span>
|
||||
<span v-else>否</span>
|
||||
@ -740,7 +791,11 @@ onMounted(() => {
|
||||
label="最近修改者"
|
||||
width="120"
|
||||
></el-table-column>
|
||||
<el-table-column prop="lastmodifydate" label="最近修改日期" width="170">
|
||||
<el-table-column
|
||||
prop="lastmodifydate"
|
||||
label="最近修改日期"
|
||||
width="170"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ dateFormat(scope.row.lastmodifydate) }}
|
||||
</template>
|
||||
@ -863,7 +918,12 @@ onMounted(() => {
|
||||
width="620px"
|
||||
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-input
|
||||
v-model="expertInfo.code"
|
||||
@ -910,7 +970,12 @@ onMounted(() => {
|
||||
width="620px"
|
||||
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-input
|
||||
v-model="menuInfo.code"
|
||||
@ -920,7 +985,11 @@ onMounted(() => {
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<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 label="是否外链" prop="islink">
|
||||
@ -967,7 +1036,12 @@ onMounted(() => {
|
||||
class="dialogClass"
|
||||
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-input
|
||||
v-model="btnInfo.code"
|
||||
@ -977,7 +1051,11 @@ onMounted(() => {
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<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 label="权限标识" prop="permission">
|
||||
<el-input
|
||||
|
||||
Loading…
Reference in New Issue
Block a user