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

Merge branch 'main' into dev-tw

Browse Source
This commit is contained in:
tangwei 2026-07-07 17:13:29 +08:00
commit d88eca8b8f
133 changed files with 13463 additions and 3953 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend-sjtb/.env.development
View File

@ -7,7 +7,7 @@ VITE_APP_TITLE = '水电水利建设项目全过程环境管理信息平台'
VITE_APP_PORT = 3000
VITE_APP_BASE_API = '/dev-api'
# 本地环境
VITE_APP_BASE_URL = 'http://10.84.121.127:8093'
VITE_APP_BASE_URL = 'http://10.84.111.235:8093'
# 测试环境
# VITE_APP_BASE_URL = 'http://172.16.21.142:8093'
# VITE_APP_BASE_URL = 'http://172.16.21.142:8096'

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

@ -16,7 +16,7 @@
:search-params="{}"
:transform-data="customTransform"
>
<template #action="{ record }">
<template #action="{ record }">
<div class="flex">
<a-button type="link" size="small" @click="handleView(record)"
>查看</a-button
@ -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;
};

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

@ -246,51 +246,62 @@
:class="{ imgupload_hidden: isView }"
>
<a-form-item label="图片" name="picpth">
<a-upload
v-model:file-list="imageFileList"
list-type="picture-card"
:multiple="true"
accept=".png,.jpg,.jpeg"
:before-upload="beforeImageUpload"
@preview="handleImagePreview"
:disabled="isView"
:maxCount="5"
@remove="handleImageRemove"
>
<div v-if="!isView && imageFileList.length < 5">
<plus-outlined />
<div style="margin-top: 8px">上传</div>
</div>
</a-upload>
<div class="flex align-center">
<a-upload
v-show="!isView"
v-model:file-list="imageFileList"
list-type="picture-card"
:multiple="true"
accept=".png,.jpg,.jpeg"
:before-upload="beforeImageUpload"
@preview="handleImagePreview"
:disabled="isView"
:maxCount="5"
@remove="handleImageRemove"
>
<div v-if="!isView && imageFileList.length < 5">
<plus-outlined />
<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">
<a-upload
v-if="!isView"
v-model:file-list="videoFileList"
list-type="text"
:multiple="true"
accept=".mp4"
:before-upload="beforeVideoUpload"
@preview="handleVideoPreview"
:disabled="isView"
:maxCount="5"
@remove="handleVideoRemove"
>
<a-button :disabled="isView && videoFileList.length < 5">
<upload-outlined />
上传视频 (MP4)
<div class="flex align-center">
<a-upload
v-if="!isView"
v-model:file-list="videoFileList"
list-type="text"
:multiple="true"
accept=".mp4"
:before-upload="beforeVideoUpload"
@preview="handleVideoPreview"
:disabled="isView"
:maxCount="5"
@remove="handleVideoRemove"
>
<a-button :disabled="isView && videoFileList.length < 5">
<upload-outlined />
上传视频 (MP4)
</a-button>
</a-upload>
<a-button
v-else-if="videoFileList.length > 0"
@click="handleVideoPreview"
>
点击预览视频
</a-button>
</a-upload>
<a-button
v-else-if="videoFileList.length > 0"
@click="handleVideoPreview"
>
点击预览视频
</a-button>
<span v-show="isView && videoFileList.length === 0">
暂无视频
</span>
</div>
</a-form-item>
</a-col>
</a-row>

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

@ -401,8 +401,18 @@ const handleEdit = (record: any, type: string) => {
isView.value = true;
} else {
isView.value = false;
}
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;
};

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

@ -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,
allowClear: true
},
options: [],
},
{
span: 12,
type: "RangePicker",
name: "strdt",
label: "过鱼时间",
picker: "date",
fieldProps: {
format: "YYYY-MM-DD",
valueFormat: "YYYY-MM-DD",
allowClear: false,
},
presets: DateSetting.RangeButton.month,
},
options: []
}
// {
// span: 12,
// type: "RangePicker",
// name: "strdt",
// label: "过鱼时间",
// picker: "date",
// fieldProps: {
// format: "YYYY-MM-DD",
// valueFormat: "YYYY-MM-DD",
// allowClear: false,
// },
// presets: DateSetting.RangeButton.month,
// },
]);
const onSearchFinish = (values: any) => {
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>

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

@ -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;
};

10
frontend/.env.development
View File

@ -7,17 +7,14 @@ VITE_APP_TITLE = '水电水利建设项目全过程环境管理信息平台'
VITE_APP_PORT = 3000
VITE_APP_BASE_API = '/dev-api'
# 本地环境
# VITE_APP_BASE_URL = 'http://10.84.121.122:8093'
# VITE_APP_BASE_URL = 'http://localhost:8093'
# 测试环境
# VITE_APP_BASE_URL = 'http://172.16.21.142:8093'
# VITE_APP_BASE_URL = 'http://172.16.21.142:8096'
# 汤伟
VITE_APP_BASE_URL = 'http://10.84.121.127:8093'
# VITE_APP_BASE_URL = 'http://10.84.111.235:8093'
# 李林
# VITE_APP_BASE_URL = 'http://10.84.121.43:8093'
# VITE_APP_BASE_URL = 'http://192.168.1.162:8093'
# 李林
# VITE_APP_BASE_URL = 'http://10.84.121.43:8093'
VITE_APP_BASE_URL = 'http://10.84.111.25:8093'
# 测试环境线上10.84.121.122:
VITE_APP_TEST_ONLINE_URL = 'https://211.99.26.225:12122'
@ -29,7 +26,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'

47
frontend/docs/问题.md
View File

@ -2,30 +2,35 @@
> 本记录用于跟踪项目开发过程中发现的问题，按日期倒序排列，并标注每项问题的发现人及处理状态。
***
---
## 问题列表（2026-06-26）
| 发现日期 | 解决人 | 编号 | 问题描述 | 状态 | 备注 |
| ---------- | ------ | -- | ------------------------------------- | -- | ------ |
| 2026-06-26 | 扈 | 1 | 基础信息图片展示是什么逻辑 | ✅ | <br /> |
| 2026-06-26 | 扈 | 2 | 电站专题展示逻辑 | ✅ | <br /> |
| 2026-06-26 | <br /> | 3 | 实时视频回放 少接口 | ⚠ | 缺少接口 |
| 2026-06-26 | <br /> | 4 | 预警提示 少接口 | ⚠ | 缺少接口 |
| 2026-06-26 | 扈 | 5 | 生态流量 达标率查询不对 | ✅ | <br /> |
| 2026-06-26 | 王 | 6 | 鱼类适应性繁殖同期对比 NAN | ⚠ | <br /> |
| 2026-06-26 | 扈 | 7 | 出库水温 综合分析 导出没做 | ✅ | <br /> |
| 2026-06-26 | <br /> | 8 | 栖息地-流量监测 没有水位视频和流量视频 字段没数据 | ⚠ | <br /> |
| 2026-06-26 | <br /> | 9 | 栖息地 水温、水质、流量没有数据没法测 | ⚠ | <br /> |
| 2026-06-26 | 扈 | 10 | 鱼类增殖站 - 运行数据 要添加字典 | ✅ | <br /> |
| 2026-06-26 | 扈 | 11 | 珍惜植物园 - 种植要求字段不知道 | ✅ | <br /> |
| 2026-06-26 | 扈 | 12 | 水生调查断面 - 监测数据 不知道电导率，性腺发育期，早期资源量和种类 | ✅ | <br /> |
| 2026-06-26 | 扈 | 13 | 水电告警情况 生态流量 不知道字段 接口传参有问题 | ✅ | <br /> |
| 2026-06-26 | <br /> | 14 | 地图抽吸 碰撞检测 放大到具体层级锚点抽吸了但是 popup 弹框还在显示 | ⚠ | <br /> |
| 2026-06-26 | <br /> | 15 | 地图比如积石峡 放大到层级被公伯峡隐藏掉了，然后在放大才显示 抽吸的问题 | ⚠ | <br /> |
| 2026-06-26 | <br /> | 16 | 运行情况 计划开始运行时间 接口没接 | ⚠ | <br /> |
| 发现日期 | 解决人 | 编号 | 问题描述 | 状态 | 备注 |
| ---------- | ------ | ---- | ---------------------------------------------------------------------- | ------ | -------- |
| 2026-06-26 | 扈 | 1 | 基础信息图片展示是什么逻辑 | ✅ | <br /> |
| 2026-06-26 | 扈 | 2 | 电站专题展示逻辑 | ✅ | <br /> |
| 2026-06-26 | <br /> | 3 | 实时视频回放 少接口 | ⚠ | 缺少接口 |
| 2026-06-26 | <br /> | 4 | 预警提示 少接口 | ⚠ | 缺少接口 |
| 2026-06-26 | 扈 | 5 | 生态流量 达标率查询不对 | ✅ | <br /> |
| 2026-06-26 | 王 | 6 | 鱼类适应性繁殖同期对比 NAN | ⚠ | <br /> |
| 2026-06-26 | 扈 | 7 | 出库水温 综合分析 导出没做 | ✅ | <br /> |
| 2026-06-26 | <br /> | 8 | 栖息地-流量监测 没有水位视频和流量视频 字段没数据 | ⚠ | <br /> |
| 2026-06-26 | <br /> | 9 | 栖息地 水温、水质、流量没有数据没法测 | ⚠ | <br /> |
| 2026-06-26 | 扈 | 10 | 鱼类增殖站 - 运行数据 要添加字典 | ✅ | <br /> |
| 2026-06-26 | 扈 | 11 | 珍惜植物园 - 种植要求字段不知道 | ✅ | <br /> |
| 2026-06-26 | 扈 | 12 | 水生调查断面 - 监测数据 不知道电导率，性腺发育期，早期资源量和种类 | ✅ | <br /> |
| 2026-06-26 | 扈 | 13 | 水电告警情况 生态流量 不知道字段 接口传参有问题 | ✅ | <br /> |
| 2026-06-26 | <br /> | 14 | 地图抽吸 碰撞检测 放大到具体层级锚点抽吸了但是 popup 弹框还在显示 | ⚠ | <br /> |
| 2026-06-26 | <br /> | 15 | 地图比如积石峡 放大到层级被公伯峡隐藏掉了，然后在放大才显示 抽吸的问题 | ⚠ | <br /> |
| 2026-06-26 | <br /> | 16 | 运行情况 计划开始运行时间 接口没接 | ⚠ | <br /> |
| 2026-07-01 | 王 | 17 | 所有弹框加拖动 | ✅ | <br /> |
| 2026-07-01 | 王 | 18 | 所有弹框检查宽度有的是固定的 | ✅ | <br /> |
| 2026-07-01 | 王 | 18 | 所有导出的添加 | <br /> | <br /> |
| 2026-07-02 | 扈 | 19 | 地图点击基地切换偶发性会全部展示出来所有锚点 | <br /> | <br /> |
| 2026-07-03 | 汤 | 20 | 图例数据关了选中配置需要添加一个字段是默认不显示 | <br /> | <br /> |
***
---
## 状态说明
@ -33,6 +38,6 @@
- ⚠ – 处理中 / 待解决
- ❌ – 阻塞 / 未开始
***
---
、

2
frontend/package.json
View File

@ -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",

29
frontend/pnpm-lock.yaml
View File

@ -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)):

28
frontend/src/api/home/index.ts
View File

@ -1,9 +1,8 @@
import request from '@/utils/request';
// import { SERVICE_URLS } from '../config'; // 引入配置
// 基本情况介绍
export function getBaseWbsb(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/wbsb/GetKendoList',
url: '/eq/wbsb/GetKendoList',
method: 'post',
data: data
});
@ -12,7 +11,16 @@ export function getBaseWbsb(data: any) {
// 水电开发及环境监测 - 获取列表数据
export function getVmsstbprptKendoList(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/vmsstbprpt/GetKendoList',
url: '/eq/vmsstbprpt/GetKendoList',
method: 'post',
data: data
});
}
// 水电开发及环境监测 - 获取列表数据（全基地模式）
export function getVmsstbprptKendoListCust(data: any) {
return request({
url: '/eq/vmsstbprpt/GetKendoList',
method: 'post',
data: data
});
@ -21,7 +29,7 @@ export function getVmsstbprptKendoList(data: any) {
// 环保设施建设情况
export function environmentalProtectionConstruction(data: any) {
return request({
url: '/api/wmp-env-server/env/operat/GetKendoListCust',
url: '/eng/base/operat/GetKendoListCust',
method: 'post',
data: data
});
@ -30,7 +38,7 @@ export function environmentalProtectionConstruction(data: any) {
// 环保设施弹框表格
export function envOpdGetKendoListCust(data: any) {
return request({
url: '/api/wmp-env-server/env/oped/GetKendoListCust',
url: '/overview/oped/GetKendoListCust',
method: 'post',
data: data
});
@ -39,7 +47,7 @@ export function envOpdGetKendoListCust(data: any) {
// 获取基地列表
export function getBaseList(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/wbsb/GetKendoList',
url: '/eq/wbsb/GetKendoList',
method: 'post',
data: data
});
@ -48,7 +56,7 @@ export function getBaseList(data: any) {
// 获取设施介绍列表
export function getMsstbprptKendoList(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
url: '/overview/msstbprpt/GetKendoList',
method: 'post',
data: data
});
@ -57,7 +65,7 @@ export function getMsstbprptKendoList(data: any) {
// 环保自动监测工作开展情况
export function baseEvnmAutoMonitorGetKendoListCust(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/evnmAutoMonitor/GetKendoListCust',
url: '/wte/base/evnmAutoMonitor/GetKendoListCust',
method: 'post',
data: data
});
@ -66,7 +74,7 @@ export function baseEvnmAutoMonitorGetKendoListCust(data: any) {
// 环保自动监测弹窗列表
export function vmsstbprptGetKendoList(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/vmsstbprpt/GetKendoList',
url: '/eq/vmsstbprpt/GetKendoList',
method: 'post',
data: data
});
@ -75,7 +83,7 @@ export function vmsstbprptGetKendoList(data: any) {
// 获取基本信息
export function baseMsstbprptGetKendoList(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
url: '/overview/msstbprpt/GetKendoList',
method: 'post',
data: data
});

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

@ -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
});

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

@ -28,7 +28,7 @@ export function postIdUrl(data: any) {
method: 'post',
data,
headers: {
'Content-Type': 'multipart/form-data'
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
});
}
@ -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: `/api/dec-lygk-base-server/base/stbprpData/GetKendoListCust?tbCode=${code}`,
url: `/env/engInfo/stbprpData/GetKendoListCust?tbCode=${code}`,
method: 'post',
data
});

8
frontend/src/api/select/index.ts
View File

@ -106,3 +106,11 @@ export function uploadFile(data: any) {
headers: { 'Content-Type': 'multipart/form-data' }
});
}
// 所在位置下拉列表
export function getAddvcdDropdownByRvcd(params: any) {
return request({
url: '/base/msalongb/noAuth/GetKendoList',
method: 'post',
params
});
}

26
frontend/src/api/system/map/ConfigManagement/index.ts
View File

@ -3,7 +3,7 @@ import request from '@/utils/request';
// 获取所有沿程配置数据
export function getAllConfigTree(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/msalongb/GetKendoList',
url: '/base/msalongb/GetKendoList',
method: 'post',
data: data
});
@ -11,7 +11,7 @@ export function getAllConfigTree(data: any) {
// 保存沿程配置
export function saveBaseWbsb(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/wbsb/addOrUpdate',
url: '/base/msalongb/save',
method: 'post',
data: data
});
@ -19,8 +19,24 @@ export function saveBaseWbsb(data: any) {
// 删除沿程配置
export function deleteBaseWbsb(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/wbsb/delete',
method: 'get',
params: data
url: '/base/msalongb/delete',
method: 'post',
data
});
}
// 保存沿程配置子节点
export function saveBaseWbsbChild(data: any) {
return request({
url: '/base/msalongb/save',
method: 'post',
data: data
});
}
export function saveBaseWbsbChildDetail(data: any) {
return request({
url: '/base/msalongdetb/save',
method: 'post',
data: data
});
}

24
frontend/src/api/zngj/index.ts
View File

@ -3,16 +3,16 @@ import request from '@/utils/request';
// AI识别大坝环境-获取统计数据（Tab数量）
export function getAisbdbyxList(data: any) {
return request({
url: '/api/wmp-env-server/env/ai/com/qgcDmRun/GetKendoListCust',
url: '/warn/ai/com/qgcDmRun/GetKendoListCust',
method: 'post',
data
});
}
// AI识别大坝环境-获取饼图+表格数据
// AI识别大坝环境-获取饼图+表格数据 /api/wmp-env-server/env/ai/com/GetKendoListCust
export function getAiChartTable(data: any) {
return request({
url: '/api/wmp-env-server/env/ai/com/GetKendoListCust',
url: '/warn/ai/com/GetKendoListCust',
method: 'post',
data
});
@ -21,7 +21,7 @@ export function getAiChartTable(data: any) {
// AI识别大坝环境-获取电站列表
export function getAiRstcd(data: any) {
return request({
url: '/api/wmp-env-server/env/ai/com/qgc/aiRstcd/GetKendoListCust',
url: '/warn/ai/com/qgc/aiRstcd/GetKendoListCust',
method: 'post',
data
});
@ -30,7 +30,7 @@ export function getAiRstcd(data: any) {
// AI识别过鱼设施运行-获取统计数据
export function getAiGyssList(data: any) {
return request({
url: '/api/wmp-env-server/env/ai/com/qgcProtect/GetKendoListCust',
url: '/warn/ai/com/qgcProtect/GetKendoListCust',
method: 'post',
data
});
@ -39,7 +39,7 @@ export function getAiGyssList(data: any) {
// 生态流量低于限值告警-获取统计数据
export function getStllGaojingList(data: any) {
return request({
url: '/api/wmp-env-server/env/warn/stcd/eng/GetKendoListCust',
url: '/warn/stcd/eng/GetKendoListCust',
method: 'post',
data
});
@ -48,7 +48,7 @@ export function getStllGaojingList(data: any) {
// 生态流量低于限值告警-获取表格详情数据
export function getStllGaojingDetail(data: any) {
return request({
url: '/api/wmp-env-server/env/warn/stcd/GetKendoListCust',
url: '/warn/stcd/GetKendoListCust',
method: 'post',
data
});
@ -57,7 +57,7 @@ export function getStllGaojingDetail(data: any) {
// 水质监测数据告警-获取统计数据
export function getShuizhiGaojingList(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
url: '/wq/msstbprpt/GetKendoList',
method: 'post',
data
});
@ -66,7 +66,7 @@ export function getShuizhiGaojingList(data: any) {
// AI识别大坝环境-获取漂浮物/清漂日历数据
export function getAiPfwRecord(data: any) {
return request({
url: '/api/wmp-env-server/env/ai/com/qgc/aiPfwRecord/GetKendoListCust',
url: '/warn/ai/com/qgc/aiPfwRecord/GetKendoListCust',
method: 'post',
data
});
@ -75,16 +75,16 @@ export function getAiPfwRecord(data: any) {
// AI识别大坝环境-获取叠梁门日历数据
export function getAiRecord(data: any) {
return request({
url: '/api/wmp-env-server/env/ai/com/qgc/aiRecord/GetKendoListCust',
url: '/warn/ai/com/qgc/aiRecord/GetKendoListCust',
method: 'post',
data
});
}
// AI识别大坝环境-获取日历详情视频数据
// AI识别大坝环境-获取日历详情视频数据 /warn/ai/com/qgc/aiFile/GetKendoListCust
export function getAiFile(data: any) {
return request({
url: '/api/wmp-env-server/env/ai/com/qgc/aiFile/GetKendoListCust',
url: '/warn/ai/com/qgc/aiFile/GetKendoListCust',
method: 'post',
data
});

2
frontend/src/api/zzfl/index.ts
View File

@ -26,7 +26,7 @@ export function overviewGetOverviewSecond(data: any) {
data
});
}
//增殖站介绍 /api/dec-lygk-base-server/base/msstbprpt/GetKendoList
//增殖站介绍
export function msstbprptGetKendoList(data: any) {
return request({
url: '/fb/msstbprpt/GetKendoList',

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

@ -177,7 +177,84 @@
</a-select>
</a-form-item-rest>
</div>
<!-- 基地电站下拉框 -->
<div
class="flex gap-[10px]"
v-else-if="item.type === 'jidiData'"
>
<a-form-item-rest>
<!-- 基地下拉框 -->
<a-select
:value="formData[item.name]"
placeholder="请选择"
@change="val => dataDimensionDataChange(val, item.name)"
show-search
allow-clear
:loading="shuJuTianBaoStore.baseLoading"
:filter-option="filterOption"
style="width: 135px"
>
<a-select-option
v-for="opt in shuJuTianBaoStore.baseOption"
:key="opt.baseid"
:value="opt.baseid"
:label="opt.basename"
>
{{ opt.basename }}
</a-select-option>
</a-select>
<!-- 电站下拉框 -->
<a-select
v-if="props.zhujianfujian == 'fu'"
:value="formData.rstcd"
placeholder="请选择电站"
@change="stcdIdChange"
show-search
allow-clear
:loading="shuJuTianBaoStore.engLoading"
:filter-option="filterOption"
style="width: 135px"
:dropdown-style="{
maxHeight: '400px',
overflow: 'auto',
minWidth: '300px'
}"
>
<a-select-option
v-for="opt in shuJuTianBaoStore.engOption"
:key="opt.stcd"
:value="opt.stcd"
:label="opt.ennm"
:title="opt.ennm + ',' + opt.reachcdName"
:reachcdName="opt.reachcdName"
>
{{ opt.ennm }},{{ opt.reachcdName }}
</a-select-option>
</a-select>
<!-- 电站下拉框 -->
<a-select
v-if="props.zhujianfujian == 'zhu'"
:value="formData.stcd"
placeholder="请选择电站"
@change="stcdIdChange"
show-search
allow-clear
:loading="shuJuTianBaoStore.engLoading"
:filter-option="filterOption"
style="width: 135px"
>
<a-select-option
v-for="opt in shuJuTianBaoStore.engOption"
:key="opt.stcd"
:value="opt.stcd"
:label="opt.ennm"
>
{{ opt.ennm }}
</a-select-option>
</a-select>
</a-form-item-rest>
</div>
<!-- 下拉选择 -->
<!-- <div v-else-if="item.type === 'Select'">
<div v-for="i in item.options"> {{ i[item.values?.name] }} {{ i[item.values?.value] }}</div>
@ -219,6 +296,7 @@
children: 'children'
}
"
:filterTreeNode="filterTreeNode"
:show-search="item.showSearch !== false"
:tree-checkable="item.treeCheckable"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
@ -333,12 +411,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);
@ -358,9 +439,13 @@ const initForm = () => {
validSearchList.value.forEach(item => {
if (item.type == 'waterStation') {
// 下拉菜单
// shuJuTianBaoStore.getBaseOption();
shuJuTianBaoStore.getBaseOption();
shuJuTianBaoStore.getSelectForOption();
shuJuTianBaoStore.getEngOption(formData.rvcd);
shuJuTianBaoStore.getEngOption(formData.rvcd,'rvcd');
}
if (item.type == 'jidiData') {
shuJuTianBaoStore.getBaseOption();
shuJuTianBaoStore.getEngOption(formData[item.name] || 'all','baseId');
}
if (item.fieldProps?.required) {
rules[item.name] = [
@ -383,19 +468,19 @@ const triggerManualValuesChange = (changedKey: string, newValue: any) => {
emit('valuesChange', changedValues, { ...formData });
};
// const dataDimensionDataChange = (value: any) => {
// formData.baseId = value;
// formData.rstcd = "";
// shuJuTianBaoStore.getEngOption(formData.baseId);
// // 【关键修改】手动触发 valuesChange，因为 a-form-item-rest 阻断了自动监听
// triggerManualValuesChange("baseId", formData.baseId);
// };
const dataDimensionDataChange = (value: any, fieldName: string = 'baseId') => {
formData[fieldName] = value;
formData.rstcd = "";
shuJuTianBaoStore.getEngOption(value,'baseId');
triggerManualValuesChange('baseId', formData.baseId);
// 一次性触发所有变更通知，避免多次调用
// emit('valuesChange', { [fieldName]: value, rstcd: "" }, { ...formData });
};
const lyChange = (value: any) => {
formData.rvcd = value;
formData.rstcd = '';
shuJuTianBaoStore.getEngOption(formData.rvcd);
shuJuTianBaoStore.getEngOption(formData.rvcd,'rvcd');
// 【关键修改】手动触发 valuesChange，因为 a-form-item-rest 阻断了自动监听
triggerManualValuesChange('rvcd', formData.rvcd);
@ -404,12 +489,12 @@ const lyChange = (value: any) => {
const stcdIdChange = (value: any) => {
if (props.zhujianfujian == 'fu') {
formData.rstcd = value;
shuJuTianBaoStore.getFpssOption(formData.rvcd, value);
shuJuTianBaoStore.getFpssOption(formData.baseId, value);
// 【关键修改】手动触发 valuesChange
triggerManualValuesChange('rstcd', formData.rstcd);
} else {
formData.stcd = value;
shuJuTianBaoStore.getFpssOption(formData.rvcd, value);
shuJuTianBaoStore.getFpssOption(formData.baseId, value);
// 【关键修改】手动触发 valuesChange
triggerManualValuesChange('stcd', formData.stcd);
}

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

@ -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

282
frontend/src/components/FishResource/FishResourceSearch.vue Normal file
View File

@ -0,0 +1,282 @@
<template>
<div class="approval-search">
<BasicSearch
ref="basicSearchRef"
:searchList="searchList"
:initial-values="initSearchData"
:zhujianfujian="'fu'"
@reset="handleResetWrapper"
@finish="onSearchFinish"
@values-change="onValuesChange"
><template #jcdt>
<a-date-picker
class="w-[120px]"
v-model:value="jcdt.min"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="起始时间"
:showToday="false"
>
<template #renderExtraFooter>
<div class="flex items-center flex-wrap px-2">
<span
v-for="item in DateSetting.RangeButton.days1"
:key="item"
@click="handleRangeClick(item)"
>
<a class="text-[#1890ff] mr-1"> {{ item.label }}</a>
</span>
</div>
</template>
</a-date-picker>
至
<a-form-item-rest>
<a-date-picker
class="w-[120px]"
v-model:value="jcdt.max"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD HH:mm:ss"
:disabledDate="disabledEndDate"
placeholder="结束时间"
:showToday="false"
>
<template #renderExtraFooter>
<div class="flex items-center flex-wrap px-2">
<span
v-for="item in DateSetting.RangeButton.days1"
:key="item"
@click="handleRangeClick(item)"
>
<a class="text-[#1890ff] mr-1"> {{ item.label }}</a>
</span>
</div>
</template>
</a-date-picker>
</a-form-item-rest>
</template>
<template #actions>
<a-button :loading="exportLoading" @click="exportBtn">导出</a-button>
</template>
</BasicSearch>
</div>
</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 { useTimeScale } from '@/store/composables/useTimeScale';
import { getFishReleaseMonitorSectionList } from '@/api/DataQueryMenuModule';
const emit = defineEmits<{
(e: 'export-btn'): void;
(e: 'reset', values: any): void;
(e: 'search-finish', values: any): void;
}>();
const basicSearchRef = ref<any>();
const btnLoading = ref<boolean>(false);
const props = defineProps<{
exportLoading?: boolean;
modalData: any;
}>();
const initSearchData = {
baseId: props.modalData.baseid ?? 'all',
rstcd: null,
stcd: '',
mway: '1'
};
const searchData = ref<any>({ ...initSearchData });
const {
jcdt,
currentTimeScale,
handleRangeClick,
disabledEndDate,
handleSearchFinish,
handleValuesChange,
init,
setDefaultTimeRange
} = useTimeScale({
defaultTimeScale: initSearchData.timeScale,
onSearchFinish: values => emit('search-finish', values),
onReset: () => emit('reset', initSearchData)
});
const crossSectionListLoading = ref<any>(false);
const crossSectionList = ref<any>([]);
const searchList: any = computed(() => [
// {
// type: 'waterStation',
// name: 'rvcd',
// label: '流域',
// placeholder: '请输入流域名称',
// fieldProps: {
// allowClear: true
// },
// options: []
// },
{
type: 'jidiData',
name: 'baseId',
label: '水电基地',
placeholder: '请输入水电基地名称',
fieldProps: {
allowClear: true
},
options: []
},
{
type: 'Select',
name: 'stcd',
label: '过鱼设施名称',
width: 200,
placeholder: '请选择过鱼设施名称',
fieldProps: {
allowClear: true
},
loading: crossSectionListLoading.value,
options: crossSectionList.value.map(item => ({
label: item.stnm,
value: item.stcd
}))
},
{
type: 'Radio',
name: 'mway',
label: '数据类型',
width: 140,
options: [
{
label: '人工',
value: '1'
},
{
label: '自动',
value: '2'
}
]
},
{
type: 'custom',
name: 'jcdt',
label: '时间',
fieldProps: {
allowClear: false
}
}
]);
const onSearchFinish = (values: any) => {
handleSearchFinish(values);
};
const exportBtn = () => {
emit('export-btn');
};
const initCrossSectionList = params => {
const filters = [];
if (params) {
if (params.baseId != '' && params.baseId != 'all') {
filters.push({
field: 'baseId',
operator: 'contains',
dataType: 'string',
value: params.baseId
});
}
if (params.rstcd != '' && params.rstcd != null) {
filters.push({
field: 'rstcd',
operator: 'contains',
dataType: 'string',
value: params.rstcd
});
}
}
crossSectionListLoading.value = true;
getFishReleaseMonitorSectionList({
filter: {
logic: 'and',
filters: filters
},
select: ['stcd', 'stnm', 'wtDeviceType', 'dtinType', 'mway']
}).then(res => {
if (res.data?.data) {
crossSectionList.value = res.data?.data;
}
crossSectionListLoading.value = false;
});
};
const onValuesChange = (changedValues: any, allValues: any) => {
// 当基地或断面变化时，清空过鱼设施选中并重新请求列表
if ('baseId' in changedValues || 'rstcd' in changedValues) {
allValues.stcd = null;
if (basicSearchRef.value?.formData) {
basicSearchRef.value.formData.stcd = null;
}
initCrossSectionList(allValues);
}
handleValuesChange(changedValues, allValues);
searchData.value = { ...searchData.value, ...allValues };
};
const handleResetWrapper = () => {
// 手动重置内部状态，避免触发两次请求
currentTimeScale.value = initSearchData.timeScale;
const now = dayjs();
if (props.modalData.year) {
jcdt.value = {
min: `${props.modalData.year}-01-01 00:00:00`,
max: `${props.modalData.year}-12-31 23:59:59`
};
} else {
jcdt.value = {
min: `${now
.subtract(5, 'year')
.startOf('year')
.format('YYYY-MM-DD')} 00:00:00`,
max: `${now.endOf('year').format('YYYY-MM-DD')} 23:59:59`
};
}
setDefaultTimeRange(initSearchData.timeScale);
// 触发搜索，使用当前状态而非 initSearchData
handleSearchFinish({
...initSearchData
});
};
defineExpose({
btnLoading,
searchData
});
onMounted(() => {
init();
// 设置默认年份：前一年到当前年
const now = dayjs();
if (props.modalData.year) {
jcdt.value = {
min: `${props.modalData.year}-01-01 00:00:00`,
max: `${props.modalData.year}-12-31 23:59:59`
};
} else {
jcdt.value = {
min: `${now.subtract(5, 'year').format('YYYY-MM-DD')} 00:00:00`,
max: `${now.format('YYYY-MM-DD')} 23:59:59`
};
}
initCrossSectionList();
// 使用 handleSearchFinish 确保包含 jcdt 等完整参数
handleSearchFinish({ ...initSearchData });
});
</script>
<style lang="scss"></style>

554
frontend/src/components/FishResource/index.vue Normal file
View File

@ -0,0 +1,554 @@
<template>
<div class="w-full h-full flex flex-col" style="height:calc(60vh)">
<!-- 搜索组件 -->
<FishDataSearch
@export-btn="exportBtn"
@search-finish="onSearchFinish"
@reset="onReset"
:exportLoading="exportLoading"
:modalData = "props.modalData"
ref="searchRef"
/>
<!-- 表格组件 -->
<BasicTable
ref="tableRef"
:scrollX="tableScrollX"
:scrollY="tableScrollY"
:columns="tableColumns"
:list-url="getFishReleaseMonitorList"
:searchParams="{
sort: sort
}"
>
</BasicTable>
<!-- 图片预览弹框 -->
<a-modal
v-model:open="imagePreviewVisible"
title="图片预览"
:footer="null"
width="800px"
>
<div style="text-align: center">
<img :src="previewImageUrl" style="width: 100%; height: 600px" />
</div>
</a-modal>
<!-- 视频预览弹框 -->
<a-modal
v-model:open="videoPreviewVisible"
title="视频预览"
:footer="null"
width="800px"
>
<div style="text-align: center">
<video
:src="previewVideoUrl"
controls
style="width: 100%; height: 600px"
></video>
</div>
</a-modal>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, nextTick, h } from 'vue';
import dayjs from 'dayjs';
import { Button } from 'ant-design-vue';
import FishDataSearch from './FishResourceSearch.vue';
import BasicTable from '@/components/BasicTable/index.vue';
import { getFishReleaseMonitorList } from '@/api/DataQueryMenuModule';
import { calcTableScrollY } from '@/utils/index';
import { useDraggable } from '@/utils/drag';
const props = defineProps<{
modalData?: any;
}>();
const sort = ref<any>([
{
field: 'baseStepSort',
dir: 'asc'
},
{
field: 'rvcdStepSort',
dir: 'asc'
},
{
field: 'rstcdStepSort',
dir: 'asc'
},
{
field: 'ttpwr',
dir: 'asc'
},
{
field: 'tm',
dir: 'desc'
}
]);
const tableRef = ref();
const searchRef = ref();
const tableScrollY = ref<string | number>(0);
const currentSearchParams = ref<any>({});
const exportLoading = ref(false);
// 图片预览
const imagePreviewVisible = ref(false);
const previewImageUrl = ref('');
// 视频预览
const videoPreviewVisible = ref(false);
const previewVideoUrl = ref('');
useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
const openImagePreview = (url: string) => {
previewImageUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
imagePreviewVisible.value = true;
};
const openVideoPreview = (url: string) => {
previewVideoUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
videoPreviewVisible.value = true;
};
const tableScrollX = computed(() =>
Math.max(
tableColumns.value.reduce(
(sum: number, col: any) => sum + (col.width || 180),
0
),
600
)
);
// 人工列
const columnsManual: any[] = [
{
key: 'stnm',
title: '电站名称',
dataIndex: 'stnm',
visible: true,
width: 200,
sort: true,
merge: true
},
{
key: 'baseName',
title: '所属基地',
dataIndex: 'baseName',
sort: true,
width: 120
},
{
key: 'stnm',
title: '过鱼设施名称',
dataIndex: 'stnm',
sort: true,
width: 200
},
{
key: 'strdt',
title: '开始时间',
dataIndex: 'strdt',
sort: true,
width: 100,
customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD') || '-'
},
{
key: 'enddt',
title: '结束时间',
dataIndex: 'enddt',
sort: true,
width: 100,
customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD') || '-'
},
{
key: 'tm',
title: '填报时间',
dataIndex: 'tm',
sort: true,
width: 160
},
{
key: 'ftp',
title: '鱼种类',
dataIndex: 'ftp',
sort: true,
width: 120
},
{
key: 'fcnt',
title: '过鱼数量(尾)',
dataIndex: 'fcnt',
sort: true,
width: 120
},
{
key: 'directionName',
title: '鱼游向',
dataIndex: 'directionName',
sort: true,
width: 120
},
{
key: 'fsz',
title: '鱼类规格',
dataIndex: 'fsz',
sort: true,
width: 160
},
{
key: 'firstimgurl',
title: '图片',
dataIndex: 'firstimgurl',
align: 'center',
width: 110,
customRender: ({ text }: any) => {
const hasValidUrl =
text &&
text !== '-' &&
text.trim() !== '' &&
text !== 'null' &&
text !== 'undefined';
return h(
Button,
{
type: 'link',
disabled: !hasValidUrl,
style: {
color: !hasValidUrl ? '#ccc' : '#1890ff',
cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
},
onClick: () => {
if (hasValidUrl) {
openImagePreview(text);
}
}
},
() => '查看图片'
);
}
},
{
key: 'videourl',
title: '视频',
dataIndex: 'videourl',
align: 'center',
width: 110,
customRender: ({ text }: any) => {
const hasValidUrl =
text &&
text !== '-' &&
text.trim() !== '' &&
text !== 'null' &&
text !== 'undefined';
return h(
Button,
{
type: 'link',
disabled: !hasValidUrl,
style: {
color: !hasValidUrl ? '#ccc' : '#1890ff',
cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
},
onClick: () => {
if (hasValidUrl) {
openVideoPreview(text);
}
}
},
() => '查看视频'
);
}
}
];
// 自动列
const columnsAuto: any[] = [
{
key: 'stnm',
title: '电站名称',
dataIndex: 'stnm',
visible: true,
width: 200,
sort: true,
merge: true
},
{
key: 'baseName',
title: '所属基地',
dataIndex: 'baseName',
sort: true,
width: 120
},
{
key: 'stnm',
title: '过鱼设施名称',
dataIndex: 'stnm',
sort: true,
width: 200
},
{
key: 'tm',
title: '时间',
dataIndex: 'tm',
sort: true,
width: 160
},
{
key: 'ftp',
title: '鱼种类',
dataIndex: 'ftp',
sort: true,
width: 120
},
{
key: 'length',
title: '鱼长度(cm)',
dataIndex: 'length',
sort: true,
width: 120
},
{
key: 'width',
title: '鱼宽度(cm)',
dataIndex: 'width',
sort: true,
width: 120,
customRender: ({ text }: any) => {
const num = parseFloat(text);
return isNaN(num) ? '-' : num.toFixed(2);
}
},
{
key: 'fishspeed',
title: '鱼速度(m/s)',
dataIndex: 'fishspeed',
sort: true,
width: 80,
customRender: ({ text }: any) => {
const num = parseFloat(text);
return isNaN(num) ? '-' : num.toFixed(2);
}
},
{
key: 'directionName',
title: '鱼游向',
dataIndex: 'directionName',
sort: true,
width: 160
},
{
key: 'temperature',
title: '水温(℃)',
dataIndex: 'temperature',
sort: true,
width: 160,
customRender: ({ text }: any) => {
const num = parseFloat(text);
return isNaN(num) ? '-' : num.toFixed(1);
}
},
{
key: 'speed',
title: '流速(m/s)',
dataIndex: 'speed',
sort: true,
width: 160,
customRender: ({ text }: any) => {
const num = parseFloat(text);
return isNaN(num) ? '-' : num.toFixed(2);
}
},
{
key: 'fcnt',
title: '过鱼数量(尾)',
dataIndex: 'fcnt',
sort: true,
width: 120
},
{
key: 'channelno',
title: '过鱼通道',
dataIndex: 'channelno',
sort: true,
width: 140
},
{
key: 'firstimgurl',
title: '轮廓图',
dataIndex: 'firstimgurl',
align: 'center',
width: 110,
customRender: ({ text }: any) => {
const hasValidUrl =
text &&
text !== '-' &&
text.trim() !== '' &&
text !== 'null' &&
text !== 'undefined';
return h(
Button,
{
type: 'link',
disabled: !hasValidUrl,
style: {
color: !hasValidUrl ? '#ccc' : '#1890ff',
cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
},
onClick: () => {
if (hasValidUrl) {
openImagePreview(text);
}
}
},
() => '查看图片'
);
}
},
{
key: 'videourl',
title: '短视频',
dataIndex: 'videourl',
align: 'center',
width: 110,
customRender: ({ text }: any) => {
const hasValidUrl =
text &&
text !== '-' &&
text.trim() !== '' &&
text !== 'null' &&
text !== 'undefined';
return h(
Button,
{
type: 'link',
disabled: !hasValidUrl,
style: {
color: !hasValidUrl ? '#ccc' : '#1890ff',
cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
},
onClick: () => {
if (hasValidUrl) {
openVideoPreview(text);
}
}
},
() => '查看视频'
);
}
}
];
// 根据数据类型动态切换列
const tableColumns = computed(() => {
const mway = currentSearchParams.value.mway;
return mway === '2' ? columnsAuto : columnsManual;
});
const onSearchFinish = async (values: any) => {
currentSearchParams.value = values;
// 等待 prop 更新后再调用 getList
await nextTick();
initTable(values);
};
const onReset = async (values: any) => {
currentSearchParams.value = values;
await nextTick();
initTable(values);
};
const exportBtn = () => {
if (exportLoading.value) return;
exportLoading.value = true;
searchRef.value.btnLoading = true;
tableRef.value
.exportTable({
fileName: `过鱼监测数据_${dayjs().format('YYYY-MM-DD HH-mm-ss')}`
})
.finally(() => {
exportLoading.value = false;
searchRef.value.btnLoading = false;
});
};
const initTable = (values: any) => {
console.log(values);
const filters = [
values.baseId && values.baseId !== 'all'
? {
field: 'baseId',
operator: 'contains',
dataType: 'string',
value: values.baseId
}
: null,
values.rstcd
? {
field: 'rstcd',
operator: 'eq',
dataType: 'string',
value: values.rstcd
}
: null,
values.mway
? {
field: 'mway',
operator: 'eq',
dataType: 'string',
value: values.mway
}
: null
].filter(Boolean); // 移除空项
if (values.stcd) {
filters.push({
logic: 'or',
filters: [
{
field: 'stcd',
operator: 'eq',
dataType: 'string',
value: values.stcd
},
{
field: 'stcode',
operator: 'eq',
dataType: 'string',
value: values.stcd
}
]
});
}
if (values.jcdt) {
filters.push(
{
field: 'tm',
operator: 'gte',
dataType: 'date',
value: dayjs(values.jcdt.min).format('YYYY-MM-DD HH:mm:ss')
},
{
field: 'tm',
operator: 'lte',
dataType: 'date',
value: dayjs(values.jcdt.max).format('YYYY-MM-DD HH:mm:ss')
}
);
}
const params = {
logic: 'and',
filters
};
tableRef.value.getList(params);
};
onMounted(() => {
nextTick(() => {
tableScrollY.value = calcTableScrollY();
});
});
</script>
<style scoped lang="scss"></style>

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

@ -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)">
@ -246,6 +245,7 @@ import { useModelStore } from '@/store/modules/model';
import videoCover from '@/assets/images/videFm.jpg';
import MediaViewer from './MediaViewer.vue';
import AttachmentPreview from './AttachmentPreview.vue';
import { useDraggable } from '@/utils/drag';
const modelStore = useModelStore();
@ -876,7 +876,8 @@ const notRunningMediaViewerRef = ref();
// 附件预览弹窗
const attachmentModalVisible = ref(false);
const currentAttachmentFid = ref('');
useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
useDraggable(attachmentModalVisible, { boundary: true, resetOnOpen: true });
// 查看附件
const handleViewAttachment = (record: any) => {
if (!record.fid) {

3
frontend/src/components/MapModal/components/BasicInfo.vue
View File

@ -152,7 +152,7 @@ import { getStcdDetail } from '@/api/mapModal';
const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
const modelStore = useModelStore();
const hasLoaded = ref(false); // 标记是否已经请求过
import { useDraggable } from '@/utils/drag';
const props = defineProps({
url: {
type: String,
@ -168,6 +168,7 @@ const isLogo = ref(false);
const loading = ref(false);
const data2: any = ref({});
const tabledata = ref([]);
useDraggable(visible, { boundary: true, resetOnOpen: true });
const columnsConfig = ref([
{
type: 'ENG',

4
frontend/src/components/MapModal/components/FishFacilityMonitorData.vue
View File

@ -56,6 +56,7 @@ import { getMonitorDataFpq, getMonitorDataOnline } from '@/api/mapModal';
import { useModelStore } from '@/store/modules/model';
import { DateSetting } from '@/utils/enumeration';
import dayjs from 'dayjs';
import { useDraggable } from '@/utils/drag';
const loading = ref(false);
const modelStore = useModelStore();
@ -72,7 +73,8 @@ const previewImageUrl = ref('');
// 视频预览
const videoPreviewVisible = ref(false);
const previewVideoUrl = ref('');
useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
const openImagePreview = (url: string) => {
previewImageUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
imagePreviewVisible.value = true;

4
frontend/src/components/MapModal/components/FishFacilityRunState.vue
View File

@ -102,6 +102,7 @@ import { getDictItemsByCode } from '@/api/dict';
import { getFishDictoryDropdown } from '@/api/select';
import { useModelStore } from '@/store/modules/model';
import dayjs from 'dayjs';
import { useDraggable } from '@/utils/drag';
const loading = ref(false);
const modelStore = useModelStore();
@ -125,7 +126,8 @@ const previewImageUrl = ref('');
// 视频预览
const videoPreviewVisible = ref(false);
const currentVideoUrl = ref('');
useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
// 鱼类搜索过滤
const filterFtpOption = (input: string, option: any) => {
console.log('filterOption', input, option);

3
frontend/src/components/MapModal/components/FlowMeasure.vue
View File

@ -79,6 +79,7 @@ import { queryPostUrlList } from '@/api/mapModal';
import { useModelStore } from '@/store/modules/model';
import BasicTable from '@/components/BasicTable/index.vue';
import { DateSetting } from '@/utils/enumeration';
import { useDraggable } from '@/utils/drag';
const modelStore = useModelStore();
@ -102,7 +103,7 @@ let chartInstance: echarts.ECharts | null = null;
const videoModalVisible = ref(false);
const videoModalTitle = ref('');
const currentVideoUrl = ref('');
useDraggable(videoModalVisible, { boundary: true, resetOnOpen: true });
const tabsList = [{ name: '流量监测', key: 'flowMeasure' }];
const activeTabKey = ref('flowMeasure');

2
frontend/src/components/MapModal/components/NormalOperationData/index.vue
View File

@ -110,6 +110,7 @@ import {
type OperationFilterField,
type OperationTableItem
} from './operationConfig';
import { useDraggable } from '@/utils/drag';
const props = defineProps({
isActive: { type: Boolean, default: false }
@ -141,6 +142,7 @@ const loadYear = ref(false);
const loadFtp = ref(false);
const tableRef = ref();
const attachmentModalVisible = ref(false);
useDraggable(attachmentModalVisible, { boundary: true, resetOnOpen: true });
const currentAttachmentFid = ref('');
const fieldOptionsMap = reactive<Record<string, OperationFilterOption[]>>({});
const selectLoadingMap = reactive<Record<string, boolean>>({});

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

@ -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<{

50
frontend/src/components/developStatusChart/index.vue
View File

@ -2,6 +2,23 @@
<template>
<div class="basic_body">
<div ref="chartContainer" class="chart-container"></div>
<!-- 水电开发情况弹窗 -->
<a-modal
v-model:open="modalVisible"
title="水电开发情况"
width="80%"
:footer="null"
:destroy-on-close="true"
>
<ShuiDianKaiFQKTwoLayer
v-if="modalVisible"
:defaultJidiInfo="modalProps.defaultJidiInfo"
:seriesName="modalProps.seriesName"
:stateName="modalProps.stateName"
:defaultTab="modalProps.defaultTab"
/>
</a-modal>
</div>
</template>
@ -10,21 +27,31 @@ import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
import { getVmsstbprptKendoList } from '@/api/home';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import ShuiDianKaiFQKTwoLayer from '@/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue';
import { useDraggable } from '@/utils/drag';
defineOptions({
name: 'developStatusChart'
});
const emit = defineEmits<{
(e: 'chart-click', params: any): void;
}>();
const JidiSelectEventStore = useJidiSelectEventStore();
const baseid = ref('');
const chartContainer = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const dataLoading = ref(false);
const modalVisible = ref(false);
const modalProps = ref<any>({});
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
function openModal(props: any) {
modalProps.value = props;
modalVisible.value = true;
}
defineExpose({
openModal,
dataLoading
});
onUnmounted(() => {
if (chartInstance) {
chartInstance.dispose();
@ -75,7 +102,6 @@ const getData = async () => {
const res1Data = res1?.data?.data || [];
const res2Data = res2?.data?.data || [];
// debugger
if (res1Data.length > 0 || res2Data.length > 0) {
const ttpwrlist = res1Data.map((item: any) => ({
@ -234,12 +260,16 @@ const initChart = () => {
chartInstance.setOption(option);
// 添加点击事件
chartInstance.on('click', (params: any) => {
emit('chart-click', {
const currentJidiInfo = JidiSelectEventStore.selectedItem;
openModal({
defaultJidiInfo: {
baseid: currentJidiInfo?.wbsCode || 'all',
basename: currentJidiInfo?.wbsName || '全部基地'
},
seriesName: params.seriesName,
name: params.name,
dataIndex: params.dataIndex
stateName: params.name,
defaultTab: params.name
});
});

74
frontend/src/components/engEnvironmentData/index.vue
View File

@ -38,6 +38,20 @@
</div>
</div>
</div>
<a-modal
v-model:open="modalVisible"
title="环境监测数据接入情况"
width="80%"
:footer="null"
:destroy-on-close="true"
>
<HuanJingSJJRQK
v-if="modalVisible"
:dataDimensionVal="modalProps.dataDimensionVal"
:name="modalProps.name"
/>
</a-modal>
</div>
</template>
@ -45,20 +59,30 @@
import { ref, watch } from 'vue';
import { getVmsstbprptKendoList } from '@/api/home';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import HuanJingSJJRQK from '@/modules/shuidianhuangjingjieruMod/TwoLayer/HuanJingSJJRQK.vue';
import { useDraggable } from '@/utils/drag';
defineOptions({
name: 'EngEnvironmentData'
});
const emit = defineEmits<{
(e: 'item-click', params: any): void;
}>();
const JidiSelectEventStore = useJidiSelectEventStore();
const baseid = ref('');
const dataLoading = ref(false);
const data = ref<Record<string, number>>({ one: 0, two: 0, three: 0 });
const modalVisible = ref(false);
const modalProps = ref<any>({});
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
function openModal(props: any) {
modalProps.value = props;
modalVisible.value = true;
}
defineExpose({
openModal,
dataLoading
});
const getData = async () => {
if (!baseid.value) return;
@ -77,7 +101,8 @@ const getData = async () => {
...baseFilters,
{ field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] }
]
}
},
group: [{ dir: 'desc', field: 'sttpCode' }]
};
const params2 = {
@ -88,7 +113,8 @@ const getData = async () => {
{ field: 'runState', operator: 'eq', dataType: 'number', value: 4 },
{ field: 'dtin', operator: 'eq', dataType: 'number', value: 1 }
]
}
},
group: [{ dir: 'desc', field: 'sttpCode' }]
};
const params3 = {
@ -99,7 +125,8 @@ const getData = async () => {
{ field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] },
{ field: 'dtinEnv', operator: 'in', dataType: 'string', value: ['2'] }
]
}
},
group: [{ dir: 'desc', field: 'dtinEnv' }]
};
try {
@ -113,21 +140,22 @@ const getData = async () => {
const record = { one: 0, two: 0, three: 0 };
const responses = [res1, res2, res3];
responses.forEach((res, index) => {
const total = res?.data?.total ?? 0;
switch (index) {
case 0:
record.one = total;
break;
case 1:
record.two = total;
break;
case 2:
record.three = total;
break;
if (res?.data?.data && Array.isArray(res.data.data) && res.data.data.length > 0) {
const count = res.data.data[0].count ?? 0;
switch (index) {
case 0:
record.one = count;
break;
case 1:
record.two = count;
break;
case 2:
record.three = count;
break;
}
}
});
data.value = record;
// debugger
} catch (error) {
console.error('EngEnvironmentData getData error:', error);
} finally {
@ -136,7 +164,11 @@ const getData = async () => {
};
const handleItemClick = (name: string) => {
emit('item-click', { name });
const currentJidiInfo = JidiSelectEventStore.selectedItem;
openModal({
dataDimensionVal: currentJidiInfo?.wbsCode || 'all',
name
});
};
watch(

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

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

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

@ -12,8 +12,6 @@ import Stroke from 'ol/style/Stroke';
import Icon from 'ol/style/Icon';
import 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,13 +97,18 @@ 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) {
console.error('配置加载失败:', error);
} catch (error: any) {
if (error.name !== 'AbortError') {
console.error('配置加载失败:', error);
}
}
}
//地图初始化
@ -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;
}
}
}
/**

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

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

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

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

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

@ -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"

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

@ -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(

1
frontend/src/main.ts
View File

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

3
frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue
View File

@ -63,6 +63,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { vpcGetKendoListCust } from '@/api/zxdzw';
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
@ -83,7 +84,7 @@ const baseid = ref('');
// 弹框控制
const modalVisible = ref(false);
const currentItem = ref<any>(null);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 加载状态
const loading = ref(false);

3
frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue
View File

@ -109,6 +109,7 @@ import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
import BasicTable from '@/components/BasicTable/index.vue'
import { wqGetKendoList } from '@/api/sz'
import HJMZDTwoLays from "./HJMZDTwoLays.vue"
import { useDraggable } from '@/utils/drag';
// 注册 dayjs 插件
dayjs.extend(isSameOrAfter)
@ -155,7 +156,7 @@ const detailModalVisible = ref(false)
const detailData = ref<any>({})
const mapModalVisible = ref(false)
const mapModalData = ref<any>({})
useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
// 排序配置
const sortConfig = computed(() => [
{ field: 'rstcdStepSort', dir: 'asc' },

4
frontend/src/modules/EnvironmentalQuality/index.vue
View File

@ -36,6 +36,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { wqGetKendoListCust } from '@/api/sz'
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import EnvironmentalQualityTwoLayers from "./TwoLayers/EnvironmentalQualityTwoLayers.vue"
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'EnvironmentalQuality'
@ -774,7 +776,7 @@ onUnmounted(() => {
// 弹框相关状态
const modalVisible = ref(false);
const clickedBarData = ref<{ name: string; current: number | null; lastYear: number | null; selectedId?: string } | null>(null);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
</script>

1250
frontend/src/modules/GYZLLB/index.vue
View File

File diff suppressed because it is too large Load Diff

3
frontend/src/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue
View File

@ -32,6 +32,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { vpcGetKendoListCust } from '@/api/zxdzw';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import ZhiWuYuanDetailTable from './ZhiWuYuanDetailTable.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
@ -50,7 +51,7 @@ const loading = ref(false);
// 弹窗状态
const modalVisible = ref(false);
const modalJidi = ref('all');
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 基地选项（用于弹窗中的下拉）
const jidiOptions = ref<any[]>([]);

3
frontend/src/modules/alongFishMod/index.vue
View File

@ -54,6 +54,7 @@ import Yanchengyulei from './TwoLayers/Yanchengyulei.vue';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { wbsbGetKendoList, getDftYear, fishChanges2 } from '@/api/stdc';
import moment from 'moment';
import { useDraggable } from '@/utils/drag';
defineOptions({
name: 'alongFishMod'
@ -108,7 +109,7 @@ const modalHbrvcd = ref('');
const modalStateName = ref('');
const modalSectionName = ref('');
const modalStcd = ref('');
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// ==================== 图表相关 ====================
/**

4
frontend/src/modules/churukushuiwenMod/index.vue
View File

@ -53,6 +53,8 @@ import { getVmsstbprpt, inOutOneGetKendoListCust } from '@/api/sw';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import churukushuiwen from './churukushuiwen.vue';
import { MapClass } from '@/components/gis/map.class';
import { useDraggable } from '@/utils/drag';
// ==================== 组件基础配置 ====================
// 定义组件名(便于调试和递归)
defineOptions({
@ -96,7 +98,7 @@ const modalVisible = ref(false); // 弹框显示状态
const clickDataInfo = ref<any>(null); // 点击的数据点信息
const stationName = ref(''); // 站点名称
// ==================== 数据处理函数 ====================
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
/**
* 转换图表数据格式
* 将后端返回的扁平数据结构转换为ECharts所需的双线数据格式

9
frontend/src/modules/dianxingcuoshijieshao/index.vue
View File

@ -53,7 +53,7 @@
</SidePanelItem>
<!-- 设施详情弹框 -->
<a-modal v-model:open="modalVisible" :title="'设施详情'" width="1536px" :footer="null">
<a-modal v-model:open="modalVisibleone" :title="'设施详情'" width="80%" :footer="null">
<div v-if="currentItem" class="detail-container">
<ArtsDetail :dataSource="currentItem" :index="getCurrentRealIndex()" />
</div>
@ -66,6 +66,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
import { getMsstbprptKendoList } from '@/api/home';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
@ -84,9 +85,9 @@ interface MediaItem {
}
// 弹框控制
const modalVisible = ref(false);
const modalVisibleone = ref(false);
const currentItem = ref<any>(null);
useDraggable(modalVisibleone, { boundary: true, resetOnOpen: true });
// 加载状态
const loading = ref(false);
@ -217,7 +218,7 @@ const handleItemClick = () => {
description: item.description || '',
title: item.title || ''
}));
modalVisible.value = true;
modalVisibleone.value = true;
};
// 处理下拉选择变化

4
frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue
View File

@ -36,6 +36,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { dwInfoGetKendoListCust } from "@/api/sw";
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers from "./TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue"
import { useDraggable } from '@/utils/drag';
const JidiSelectEventStore = useJidiSelectEventStore();
// 定义组件名（便于调试和递归）
defineOptions({
@ -73,7 +75,7 @@ const baseid = ref('')
const modalVisible = ref(false);
const selectedItem: any = ref<DataString | null>(null);
const twoLayersRef = ref();
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
const getListData = async () => {
loading.value = true;

18
frontend/src/modules/fishSurvey/FishChangeTu/index.vue
View File

@ -4,9 +4,17 @@
:datetimePicker="datetimePicker"
@update-values="handlePanelChange"
>
<a-spin :spinning="loading" style="width: 100%;">
<div ref="chartContainer" class="chart-container" v-show="sourceData.length > 0"></div>
<a-empty v-show="sourceData.length === 0" description="暂无数据" class="empty-container" />
<a-spin :spinning="loading" style="width: 100%">
<div
ref="chartContainer"
class="chart-container"
v-show="sourceData.length > 0"
></div>
<a-empty
v-show="sourceData.length === 0"
description="暂无数据"
class="empty-container"
/>
</a-spin>
</SidePanelItem>
</template>
@ -296,8 +304,12 @@ onUnmounted(() => {
}
.empty-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 200px;
p{
text-indent:0px !important;
}
}
</style>

4
frontend/src/modules/fishSurvey/FishIntroduce/index.vue
View File

@ -68,6 +68,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { fishDicGetKendoList, wbsbGetKendoList } from '@/api/yldc';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'zengZhiZhanJieShaoMod'
@ -87,7 +89,7 @@ let rvcd = ref('');
// 弹框控制
const modalVisible = ref(false);
const currentItem = ref<any>(null);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 加载状态
const loading = ref(false);

4
frontend/src/modules/fishSurvey/ZhuanZhiIntroduce/index.vue
View File

@ -62,6 +62,8 @@ import { ref, onMounted, onUnmounted, computed } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { msstbprptGetKendoList } from '@/api/yldc';
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'zengZhiZhanJieShaoMod'
@ -79,7 +81,7 @@ const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
// 弹框控制
const modalVisible = ref(false);
const currentItem = ref<any>(null);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 加载状态
const loading = ref(false);

3
frontend/src/modules/guoyujiance/index.vue
View File

@ -36,6 +36,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { vmsstbprptGetKendoList } from '@/api/gyss'
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import FPVDDetailMD from './components/FPVDDetailMD.vue'
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'guoyusheshijiansheqingkuang'
@ -81,6 +83,7 @@ const loading = ref(false);
const modalVisible = ref(false);
const selectedFacility = ref<any>(null);
const title = ref('');
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 处理卡片点击事件
const handleCardClick = (facility: any) => {
selectedFacility.value = facility;

311
frontend/src/modules/guoyusheshijiansheqingkuang/index.vue
View File

@ -1,201 +1,230 @@
<!-- SidePanelItem.vue -->
<template>
<SidePanelItem title="过鱼设施">
<a-spin :spinning="loading" tip="加载中...">
<div class="facility-grid">
<div v-for="facility in facilities" :key="facility.name" class="facility-card"
@click="handleFacilityClick(facility)">
<div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
<div class="facility-icon">
<i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
</div>
</div>
<div class="facility-info">
<div class="facility-name">{{ facility.name }}</div>
<div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
}}</span><span>座</span></div>
</div>
</div>
<SidePanelItem title="过鱼设施">
<a-spin :spinning="loading" tip="加载中...">
<div class="facility-grid">
<div
v-for="facility in facilities"
:key="facility.name"
class="facility-card"
@click="handleFacilityClick(facility)"
>
<div
style="
width: 60px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
"
>
<div class="facility-icon">
<i
style="color: #fff"
:class="facility.icon"
type="icon-shengtailiuliang2"
></i>
</div>
</a-spin>
</SidePanelItem>
<!-- 弹框 -->
<a-modal v-model:open="modalVisible" :title="'过鱼设施'" :footer="null" width="1536px" @cancel="handleCloseModal">
<ModalPage v-if="currentFacility" :data="currentFacility" :jdId="'all'" />
</a-modal>
</div>
<div class="facility-info">
<div class="facility-name">{{ facility.name }}</div>
<div style="font-size: 16px">
<span class="facility-count">{{ facility.count }}</span
><span>座</span>
</div>
</div>
</div>
</div>
</a-spin>
</SidePanelItem>
<!-- 弹框 -->
<a-modal
v-model:open="modalVisible"
:title="'过鱼设施'"
:footer="null"
width="1536px"
@cancel="handleCloseModal"
>
<ModalPage v-if="currentFacility" :data="currentFacility" :jdId="'all'" />
</a-modal>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { buildGetKendoListCust } from '@/api/gyss';
import ModalPage from './ModalPage/index.vue'
import ModalPage from './ModalPage/index.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'qixidibaohugongzuokaizhanQK'
name: 'qixidibaohugongzuokaizhanQK'
});
const JidiSelectEventStore = useJidiSelectEventStore();
// loading状态
const loading = ref(false);
// 设施数据
const facilities = ref([
{
name: '鱼道',
count: 0,
icon: 'icon iconfont icon-map-gyssYudao',
key: 'FP_1'
},
{
name: '集运鱼系统',
count: 0,
icon: 'icon iconfont icon-map-gyssJiyunyuxitong',
key: 'FP_3'
},
{
name: '升鱼机',
count: 0,
icon: 'icon iconfont icon-map-gyssShengyuji',
key: 'FP_4'
},
{
name: '其他',
count: 0,
icon: 'icon iconfont icon-map-gyssQita',
key: 'FP_5'
},
{
name: '鱼道',
count: 0,
icon: 'icon iconfont icon-map-gyssYudao',
key: 'FP_1'
},
{
name: '集运鱼系统',
count: 0,
icon: 'icon iconfont icon-map-gyssJiyunyuxitong',
key: 'FP_3'
},
{
name: '升鱼机',
count: 0,
icon: 'icon iconfont icon-map-gyssShengyuji',
key: 'FP_4'
},
{
name: '其他',
count: 0,
icon: 'icon iconfont icon-map-gyssQita',
key: 'FP_5'
}
]);
const baseid = ref('')
const baseid = ref('');
// 弹框相关状态
const modalVisible = ref(false);
const currentFacility = ref<any>(null);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
//获取页面数据
const getData = async () => {
loading.value = true;
try {
let params = {
"filter": {
"logic": "and",
"filters": []
}
loading.value = true;
try {
let params = {
filter: {
logic: 'and',
filters: []
}
};
const res = await buildGetKendoListCust(params); //适配监控-VD
let data = res?.data?.data || res?.data || [];
// 重置所有设施的count为0
facilities.value.forEach(facility => {
facility.count = 0;
});
// 遍历接口返回的所有数据
data.forEach(item => {
const matchedFacility = facilities.value.find(
facility => facility.key === item.sttpCode
);
if (matchedFacility) {
// 如果在facilities中找到对应的key，累加到该设施
matchedFacility.count +=
Number(item.built) + Number(item.building) || 0;
} else {
// 如果没有找到对应的key，累加到FP_5（其他）
const otherFacility = facilities.value.find(
facility => facility.key === 'FP_5'
);
if (otherFacility) {
otherFacility.count +=
Number(item.built) + Number(item.building) || 0;
}
const res = await buildGetKendoListCust(params); //适配监控-VD
let data = res?.data?.data || res?.data || [];
// 重置所有设施的count为0
facilities.value.forEach(facility => {
facility.count = 0;
});
// 遍历接口返回的所有数据
data.forEach(item => {
const matchedFacility = facilities.value.find(facility => facility.key === item.sttpCode);
if (matchedFacility) {
// 如果在facilities中找到对应的key，累加到该设施
matchedFacility.count += Number(item.built) + Number(item.building) || 0;
} else {
// 如果没有找到对应的key，累加到FP_5（其他）
const otherFacility = facilities.value.find(facility => facility.key === 'FP_5');
if (otherFacility) {
otherFacility.count += Number(item.built) + Number(item.building) || 0;
}
}
});
} catch (error) {
console.error('获取数据失败:', error);
} finally {
loading.value = false;
}
}
}
});
} catch (error) {
console.error('获取数据失败:', error);
} finally {
loading.value = false;
}
};
// 点击处理函数
const handleFacilityClick = (facility: any) => {
currentFacility.value = facility;
modalVisible.value = true;
currentFacility.value = facility;
modalVisible.value = true;
};
// 关闭弹框
const handleCloseModal = () => {
modalVisible.value = false;
currentFacility.value = null;
modalVisible.value = false;
currentFacility.value = null;
};
watch(
() => JidiSelectEventStore.selectedItem,
(newVal) => {
baseid.value = newVal.wbsCode;
getData()
},
{ deep: true, immediate: true }
() => JidiSelectEventStore.selectedItem,
newVal => {
baseid.value = newVal.wbsCode;
getData();
},
{ deep: true, immediate: true }
);
// 页面加载时执行
onMounted(() => {
// 延迟初始化，确保容器已渲染
// 延迟初始化，确保容器已渲染
});
// 组件卸载时清理
onUnmounted(() => {
});
onUnmounted(() => {});
</script>
<style lang="scss" scoped>
.facility-grid {
width: 406px;
flex-flow: wrap;
display: flex;
justify-content: space-between;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
width: 406px;
flex-flow: wrap;
display: flex;
justify-content: space-between;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
.facility-card {
width: 200px;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 4px 0px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 2px;
transition: all 0.3s;
cursor: pointer;
box-sizing: border-box;
width: 200px;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 4px 0px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 2px;
transition: all 0.3s;
cursor: pointer;
box-sizing: border-box;
}
.facility-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
// margin-right: 8px;
background: #5389b5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
// margin-right: 8px;
background: #5389b5;
border-radius: 50%;
.anticon {
font-size: 24px;
color: #fff;
}
.anticon {
font-size: 24px;
color: #fff;
}
}
.facility-info {
flex: 1;
flex: 1;
}
.facility-name {
font-size: 16px;
color: #333;
// margin-bottom: 4px;
// font-weight: 500;
font-size: 16px;
color: #333;
// margin-bottom: 4px;
// font-weight: 500;
}
.facility-count {
font-size: 18px;
color: #2f6b98;
// font-weight: 600;
font-size: 18px;
color: #2f6b98;
// font-weight: 600;
}
</style>

531
frontend/src/modules/guoyusheshijieshao/index.vue
View File

@ -1,76 +1,102 @@
<!-- SidePanelItem.vue -->
<template>
<SidePanelItem title="过鱼设施介绍">
<!-- Loading 和空状态容器 -->
<a-spin :spinning="loading" class="carousel-container-wrapper">
<div v-if="hasData" class="container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
<!-- 跑马灯轨道容器 -->
<div class="carousel-track" :class="{ 'no-transition': isTransitioning }"
:style="{ transform: `translateX(-${currentIndex * 100}%)` }">
<!-- 遍历所有媒体项（包含克隆项） -->
<div v-for="(item, index) in renderMediaData" :key="index" class="carousel-item"
@click="handleItemClick(originalMediaData)">
<!-- 图片 -->
<img :src="item.url" :alt="item.stnm" loading="lazy" />
<!-- 说明文字（随媒体项移动） -->
<div class="text">{{ item.stnm }}</div>
</div>
</div>
<!-- 面板指示器（固定在底部右侧） -->
<div class="pagination-dots-fixed">
<span v-for="(dot, index) in originalMediaData" :key="index" class="dot"
:class="{ active: currentRealIndex === index }" @click="goToSlide(index)"></span>
</div>
</div>
<!-- 暂无数据状态 -->
<!-- 独立的文字说明区域（随跑马灯切换而变化） -->
<div v-if="hasData" class="description-text" @click="handleItemClick(originalMediaData)">
{{ currentDescription }}
</div>
<a-empty v-else description="暂无数据" :image="simpleImage" />
</a-spin>
</SidePanelItem>
<!-- 设施详情弹框 -->
<a-modal v-model:open="modalVisible" :title="'设施类型介绍'" width="1536px" :footer="null">
<!-- 你在这里编写弹框内容 -->
<div v-if="currentItem">
<ArtsDetail :dataSource='currentItem' :index="getCurrentRealIndex()" />
<SidePanelItem title="过鱼设施介绍">
<!-- Loading 和空状态容器 -->
<a-spin :spinning="loading" class="carousel-container-wrapper">
<div
v-if="hasData"
class="container"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
<!-- 跑马灯轨道容器 -->
<div
class="carousel-track"
:class="{ 'no-transition': isTransitioning }"
:style="{ transform: `translateX(-${currentIndex * 100}%)` }"
>
<!-- 遍历所有媒体项（包含克隆项） -->
<div
v-for="(item, index) in renderMediaData"
:key="index"
class="carousel-item"
@click="handleItemClick(originalMediaData)"
>
<!-- 图片 -->
<img :src="item.url" :alt="item.stnm" loading="lazy" />
<!-- 说明文字（随媒体项移动） -->
<div class="text">{{ item.stnm }}</div>
</div>
</div>
</a-modal>
</template>
<!-- 面板指示器（固定在底部右侧） -->
<div class="pagination-dots-fixed">
<span
v-for="(dot, index) in originalMediaData"
:key="index"
class="dot"
:class="{ active: currentRealIndex === index }"
@click="goToSlide(index)"
></span>
</div>
</div>
<!-- 暂无数据状态 -->
<!-- 独立的文字说明区域（随跑马灯切换而变化） -->
<div
v-if="hasData"
class="description-text"
@click="handleItemClick(originalMediaData)"
>
{{ currentDescription }}
</div>
<a-empty v-else description="暂无数据" :image="simpleImage" />
</a-spin>
</SidePanelItem>
<!-- 设施详情弹框 -->
<a-modal
v-model:open="modalVisible"
:title="'设施类型介绍'"
width="1536px"
:footer="null"
>
<!-- 你在这里编写弹框内容 -->
<div v-if="currentItem">
<ArtsDetail :dataSource="currentItem" :index="getCurrentRealIndex()" />
</div>
</a-modal>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { fpVmsstbprptGetKendoList } from '@/api/gyss';
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
import { Empty } from 'ant-design-vue';
import { useDraggable } from '@/utils/drag';
// ==================== 类型定义 ====================
interface MediaItem {
url: string;
stnm: string;
introduce: string;
url: string;
stnm: string;
introduce: string;
}
interface CarouselConfig {
autoPlayInterval: number;
transitionDuration: number;
autoPlayInterval: number;
transitionDuration: number;
}
// ==================== 常量配置 ====================
const CAROUSEL_CONFIG: CarouselConfig = {
autoPlayInterval: 4000, // 自动轮播间隔 4秒
transitionDuration: 500 // 过渡动画时长 500ms
autoPlayInterval: 4000, // 自动轮播间隔 4秒
transitionDuration: 500 // 过渡动画时长 500ms
};
// ==================== Store 和基础配置 ====================
defineOptions({
name: 'ZhiWuYuanJianSheJiJieRuQingKuangBar'
name: 'ZhiWuYuanJianSheJiJieRuQingKuangBar'
});
const JidiSelectEventStore = useJidiSelectEventStore();
@ -79,6 +105,7 @@ const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
// 弹框控制
const modalVisible = ref(false);
const currentItem = ref<any>(null);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// ==================== 数据状态 ====================
// 加载状态
const loading = ref(false);
@ -108,37 +135,37 @@ let autoPlayTimer: ReturnType<typeof setInterval> | null = null;
* 结构：[最后一项克隆, 原始数据..., 第一项克隆]
*/
const renderMediaData = computed<MediaItem[]>(() => {
const length = originalMediaData.value.length;
if (length === 0) return [];
const length = originalMediaData.value.length;
if (length === 0) return [];
return [
originalMediaData.value[length - 1], // 克隆最后一项
...originalMediaData.value, // 原始数据
originalMediaData.value[0] // 克隆第一项
];
return [
originalMediaData.value[length - 1], // 克隆最后一项
...originalMediaData.value, // 原始数据
originalMediaData.value[0] // 克隆第一项
];
});
/**
* 获取当前真实的索引（排除克隆项的影响）
*/
const currentRealIndex = computed(() => {
const realLength = originalMediaData.value.length;
if (realLength === 0) return 0;
const realLength = originalMediaData.value.length;
if (realLength === 0) return 0;
let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
// 处理边界情况（无缝循环时的克隆项）
if (realIndex < 0) realIndex = realLength - 1;
if (realIndex >= realLength) realIndex = 0;
// 处理边界情况（无缝循环时的克隆项）
if (realIndex < 0) realIndex = realLength - 1;
if (realIndex >= realLength) realIndex = 0;
return realIndex;
return realIndex;
});
/**
* 计算当前显示的描述文字
*/
const currentDescription = computed(() => {
return originalMediaData.value[currentRealIndex.value]?.introduce || '';
return originalMediaData.value[currentRealIndex.value]?.introduce || '';
});
// ==================== 核心方法 ====================
@ -146,280 +173,282 @@ const currentDescription = computed(() => {
* 启动自动轮播
*/
const startAutoPlay = () => {
stopAutoPlay(); // 先清除旧的定时器
autoPlayTimer = setInterval(() => {
if (!isHovering.value && !isTransitioning.value) {
nextSlide();
}
}, CAROUSEL_CONFIG.autoPlayInterval);
stopAutoPlay(); // 先清除旧的定时器
autoPlayTimer = setInterval(() => {
if (!isHovering.value && !isTransitioning.value) {
nextSlide();
}
}, CAROUSEL_CONFIG.autoPlayInterval);
};
/**
* 停止自动轮播
*/
const stopAutoPlay = () => {
if (autoPlayTimer) {
clearInterval(autoPlayTimer);
autoPlayTimer = null;
}
if (autoPlayTimer) {
clearInterval(autoPlayTimer);
autoPlayTimer = null;
}
};
/**
* 切换到下一张
*/
const nextSlide = () => {
currentIndex.value++;
currentIndex.value++;
// 延迟检查是否需要无缝跳转（与transition时间一致）
setTimeout(() => {
handleSeamlessLoop();
}, CAROUSEL_CONFIG.transitionDuration);
// 延迟检查是否需要无缝跳转（与transition时间一致）
setTimeout(() => {
handleSeamlessLoop();
}, CAROUSEL_CONFIG.transitionDuration);
};
/**
* 处理无缝循环（克隆项处理）
*/
const handleSeamlessLoop = () => {
const realLength = originalMediaData.value.length;
if (realLength === 0) return;
const realLength = originalMediaData.value.length;
if (realLength === 0) return;
// 如果到达克隆的最后一项（索引 = realLength + 1）
if (currentIndex.value >= realLength + 1) {
// 1. 禁用过渡动画，实现瞬间跳转
isTransitioning.value = true;
// 如果到达克隆的最后一项（索引 = realLength + 1）
if (currentIndex.value >= realLength + 1) {
// 1. 禁用过渡动画，实现瞬间跳转
isTransitioning.value = true;
// 2. 瞬间跳转到真实的第二项（索引1），用户看不到跳变
currentIndex.value = 1;
// 2. 瞬间跳转到真实的第二项（索引1），用户看不到跳变
currentIndex.value = 1;
// 3. 等待两帧后恢复过渡动画（确保DOM已更新）
requestAnimationFrame(() => {
requestAnimationFrame(() => {
isTransitioning.value = false;
});
});
}
// 3. 等待两帧后恢复过渡动画（确保DOM已更新）
requestAnimationFrame(() => {
requestAnimationFrame(() => {
isTransitioning.value = false;
});
});
}
};
/**
* 处理鼠标进入
*/
const handleMouseEnter = () => {
isHovering.value = true;
isHovering.value = true;
};
/**
* 处理鼠标离开
*/
const handleMouseLeave = () => {
isHovering.value = false;
isHovering.value = false;
};
/**
* 跳转到指定幻灯片
*/
const goToSlide = (targetIndex: number) => {
if (isTransitioning.value) return;
if (isTransitioning.value) return;
// 计算目标索引（考虑克隆项偏移）
currentIndex.value = targetIndex + 1;
// 计算目标索引（考虑克隆项偏移）
currentIndex.value = targetIndex + 1;
};
/**
* 获取轮播图数据
*/
const getCarouselData = async () => {
loading.value = true;
hasData.value = false;
loading.value = true;
hasData.value = false;
try {
const params = {
filter: {
logic: 'and',
filters: [
{
field: 'sttpFullPath',
operator: 'contains',
dataType: 'string',
value: 'ENV,ENVP,FP,FP'
},
{
field: 'logo',
operator: 'isnotnull',
dataType: 'string'
},
baseid.value !== 'all' ? {
field: 'baseId',
operator: 'eq',
dataType: 'string',
value: baseid.value
} : null
].filter(Boolean)
},
select: ['introduce', 'logo', 'stnm', 'precis'],
sort: [{ field: 'rstcdStepSort', dir: 'asc' }]
};
try {
const params = {
filter: {
logic: 'and',
filters: [
{
field: 'sttpFullPath',
operator: 'contains',
dataType: 'string',
value: 'ENV,ENVP,FP,FP'
},
{
field: 'logo',
operator: 'isnotnull',
dataType: 'string'
},
baseid.value !== 'all'
? {
field: 'baseId',
operator: 'eq',
dataType: 'string',
value: baseid.value
}
: null
].filter(Boolean)
},
select: ['introduce', 'logo', 'stnm', 'precis'],
sort: [{ field: 'rstcdStepSort', dir: 'asc' }]
};
const res = await fpVmsstbprptGetKendoList(params);
const data = res?.data?.data || [];
const res = await fpVmsstbprptGetKendoList(params);
const data = res?.data?.data || [];
if (data.length > 0) {
originalMediaData.value = data.map((item: any) => ({
url: item.logo ? `${baseUrl}/?${item.logo}&view=jpg` : '',
introduce: item.introduce || '',
stnm: item.stnm || ''
}));
if (data.length > 0) {
originalMediaData.value = data.map((item: any) => ({
url: item.logo ? `${baseUrl}/?${item.logo}&view=jpg` : '',
introduce: item.introduce || '',
stnm: item.stnm || ''
}));
// 重置索引到第一项（跳过克隆的首项）
currentIndex.value = 1;
hasData.value = true;
} else {
// 无数据时清空
originalMediaData.value = [];
hasData.value = false;
}
} catch (error) {
console.error('获取轮播图数据失败:', error);
originalMediaData.value = [];
hasData.value = false;
} finally {
loading.value = false;
// 重置索引到第一项（跳过克隆的首项）
currentIndex.value = 1;
hasData.value = true;
} else {
// 无数据时清空
originalMediaData.value = [];
hasData.value = false;
}
} catch (error) {
console.error('获取轮播图数据失败:', error);
originalMediaData.value = [];
hasData.value = false;
} finally {
loading.value = false;
}
};
// ==================== 生命周期 ====================
onMounted(() => {
startAutoPlay();
startAutoPlay();
});
onUnmounted(() => {
stopAutoPlay();
stopAutoPlay();
});
// ==================== 监听器 ====================
watch(
() => JidiSelectEventStore.selectedItem,
(newVal) => {
if (newVal?.wbsCode) {
baseid.value = newVal.wbsCode;
} else {
baseid.value = 'all';
}
getCarouselData();
},
{ deep: true, immediate: true }
() => JidiSelectEventStore.selectedItem,
newVal => {
if (newVal?.wbsCode) {
baseid.value = newVal.wbsCode;
} else {
baseid.value = 'all';
}
getCarouselData();
},
{ deep: true, immediate: true }
);
// 获取当前真实的索引（排除克隆项的影响）
const getCurrentRealIndex = () => {
const realLength = originalMediaData.value.length;
let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
const realLength = originalMediaData.value.length;
let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
// 处理边界情况（无缝循环时的克隆项）
if (realIndex < 0) realIndex = realLength - 1;
if (realIndex >= realLength) realIndex = 0;
// 处理边界情况（无缝循环时的克隆项）
if (realIndex < 0) realIndex = realLength - 1;
if (realIndex >= realLength) realIndex = 0;
return realIndex;
return realIndex;
};
// 处理项目点击事件
const handleItemClick = (item: any) => {
console.log('轮播图项目被点击:', item, getCurrentRealIndex());
currentItem.value = item.map((item: any) => ({
url: item.url || '',
description: item.introduce || '',
title: item.stnm || ''
}));
modalVisible.value = true;
console.log('轮播图项目被点击:', item, getCurrentRealIndex());
currentItem.value = item.map((item: any) => ({
url: item.url || '',
description: item.introduce || '',
title: item.stnm || ''
}));
modalVisible.value = true;
};
</script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 228px;
position: relative;
overflow: hidden; // 隐藏超出容器的内容
width: 100%;
height: 228px;
position: relative;
overflow: hidden; // 隐藏超出容器的内容
// 跑马灯轨道
.carousel-track {
display: flex; // 横向排列所有媒体项
// 跑马灯轨道
.carousel-track {
display: flex; // 横向排列所有媒体项
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out; // 0.5秒平滑过渡
// 禁用过渡动画（用于无缝跳转）
&.no-transition {
transition: none;
}
// 单个媒体项
.carousel-item {
min-width: 100%; // 每个项目占满容器宽度
height: 100%;
position: relative;
flex-shrink: 0; // 防止被压缩
cursor: pointer;
img {
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out; // 0.5秒平滑过渡
object-fit: cover; // 保持比例填充
}
// 禁用过渡动画（用于无缝跳转）
&.no-transition {
transition: none;
}
// 单个媒体项
.carousel-item {
min-width: 100%; // 每个项目占满容器宽度
height: 100%;
position: relative;
flex-shrink: 0; // 防止被压缩
cursor: pointer;
img {
width: 100%;
height: 100%;
object-fit: cover; // 保持比例填充
}
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 22px;
line-height: 22px;
background: rgba(0, 0, 0, 0.1);
color: #fff;
padding-left: 10px;
}
}
}
// 固定的面板指示器
.pagination-dots-fixed {
.text {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
gap: 6px;
z-index: 10; // 确保在文字上方
.dot {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #D8D8D8;
cursor: pointer;
transition: background-color 0.3s ease;
&.active {
background-color: #005293;
}
&:hover {
opacity: 0.8;
}
}
bottom: 0;
left: 0;
width: 100%;
height: 22px;
line-height: 22px;
background: rgba(0, 0, 0, 0.1);
color: #fff;
padding-left: 10px;
}
}
}
// 固定的面板指示器
.pagination-dots-fixed {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
gap: 6px;
z-index: 10; // 确保在文字上方
.dot {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #d8d8d8;
cursor: pointer;
transition: background-color 0.3s ease;
&.active {
background-color: #005293;
}
&:hover {
opacity: 0.8;
}
}
}
}
// 独立的文字说明区域
.description-text {
font-size: 14px;
line-height: 1.5;
transition: all 0.3s ease;
// margin-bottom: 20px;
cursor: pointer;
font-size: 14px;
line-height: 1.5;
transition: all 0.3s ease;
// margin-bottom: 20px;
cursor: pointer;
// 多行文本溢出省略
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
// 多行文本溢出省略
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
</style>

5
frontend/src/modules/huanbaoMod/index.vue
View File

@ -30,7 +30,7 @@
<a-modal
v-model:open="modalVisible"
title="环保设施情况"
width="1536px"
width="80%"
:footer="null"
>
<HuanbaoModTwoLayers
@ -49,6 +49,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { environmentalProtectionConstruction } from '@/api/home';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import HuanbaoModTwoLayers from './TwoLayers/HuanbaoModTwoLayers.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
@ -82,7 +83,7 @@ const modalRes = ref({
bldstt: '',
hydrodtin: '1'
});
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 获取数据
const getData = async () => {
if (!baseid.value) return;

95
frontend/src/modules/huanbaozdjcgzkzQK/huanbaozidongjianceEJ/index.vue
View File

@ -21,6 +21,14 @@
:options="jiDiList"
@change="handleBaseChange"
/>
<a-select
v-model:value="searchData.stcd"
placeholder=" "
style="width: 200px"
show-search
:filter-option="filterOption"
:options="rstcdOptions"
/>
<a-input
v-if="tabIndex !== '7'"
v-model:value="searchData.stnm"
@ -44,7 +52,6 @@
:search-params="searchParams"
:transform-data="customTransform"
>
<template #coenvwState="{ column, record }">
<a-tag :color="record.coenvwState > 0 ? 'green' : '#999'">
{{ record.coenvwState > 0 ? '在线' : '离线' }}
@ -85,13 +92,15 @@ const props = defineProps<{
const tabIndex = ref(String(props.activeKey ?? ''));
const searchData = ref<any>({
baseId: props.baseId || 'all',
stnm: null
stnm: null,
stcd: null
});
const modelStore = useModelStore();
const tableRef = ref();
// ==================== 基地列表数据 ====================
const jiDiList: any = ref([]);
const rstcdOptions: any = ref([]);
// ==================== 表格列定义 ====================
const columns = computed(() => {
@ -103,15 +112,13 @@ const columns = computed(() => {
title: '所属基地',
dataIndex: 'baseName',
width: '150px',
merge: true
merge: true
},
{
key: 'stnm',
title: '电站名称',
dataIndex: 'stnm',
width: '176px',
width: '176px'
},
{
key: 'dvtp',
@ -167,8 +174,7 @@ const columns = computed(() => {
key: 'stnm',
title: '测站名称',
dataIndex: 'stnm',
width: '176px',
width: '176px'
},
{
key: 'ennm',
@ -189,8 +195,7 @@ const columns = computed(() => {
key: 'stindx',
title: '监测指标',
dataIndex: 'stindx',
width: '150px',
width: '150px'
}
];
@ -260,15 +265,66 @@ const searchParams = computed(() => {
// ==================== 方法 ====================
const handleTabChange = (key: string) => {
tabIndex.value = key;
handleReset();
handleSearch();
};
const filterOption = (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const getRstcdData = async () => {
const parmas = {
filter: {
logic: 'and',
filters: [
searchData.value.baseId != 'all'
? {
field: 'baseId',
operator: 'contains',
dataType: 'string',
value: '02'
}
: null,
{
field: 'sttpCode',
operator: 'eq',
dataType: 'string',
value: 'ENG'
}
].filter(Boolean)
},
sort: [
{
field: 'baseId',
dir: 'asc'
},
{
field: 'rvcdStepSort',
dir: 'asc'
},
{
field: 'rstcdStepSort',
dir: 'asc'
},
{
field: 'siteStepSort',
dir: 'asc'
}
],
select: ['stcd', 'stnm']
};
const res = await vmsstbprptGetKendoList(parmas);
rstcdOptions.value = res.data.data.map((item) => {
return {
value: item.stcd,
label: item.stnm
};
});
};
const handleBaseChange = () => {
handleSearch();
searchData.value.stcd = null
getRstcdData();
// handleSearch();
};
const dvtpText = (dvtp: number) => {
@ -287,7 +343,13 @@ const handleSearch = () => {
value: searchData.value.baseId
});
}
if(searchData.value.stcd){
filters.push({
field: 'stcd',
operator: 'eq',
value: searchData.value.stcd
});
}
if (searchData.value.stnm) {
filters.push({
field: 'stnm',
@ -441,8 +503,10 @@ const handleSearch = () => {
const handleReset = () => {
searchData.value = {
baseId: 'all',
stnm: null
stnm: null,
stcd: null
};
getRstcdData()
handleSearch();
};
@ -542,7 +606,7 @@ const handleViewDetail = (record: any, type: string) => {
sttpCode === 'WTVT' || sttpCode === 'WTVT,' ? '1' : '0';
} else {
modelStore.modalVisible = true;
modelStore.params.sttp = sttpCode;
modelStore.params.sttp = sttpCode;
modelStore.params.stcd = record.stcd;
modelStore.title = record.stnm;
}
@ -557,6 +621,7 @@ onMounted(() => {
value: element.wbsCode
});
});
getRstcdData()
handleSearch();
});
</script>

3
frontend/src/modules/huanbaozdjcgzkzQK/index.vue
View File

@ -68,6 +68,7 @@ import svg_liuliangjiancezhan from '@/assets/svg/liuliangjiancezhan.svg';
import svg_shuizhijiancezhan from '@/assets/svg/shuizhijiancezhan.svg';
import svg_zengzhizhanshuizhizhan from '@/assets/svg/zengzhizhanshuizhizhan.svg';
import svg_qixidi from '@/assets/svg/qixidi.svg';
import { useDraggable } from '@/utils/drag';
defineOptions({
name: 'huanbaoMod'
@ -103,7 +104,7 @@ const baseid = ref('');
// 弹框相关状态
const modalVisible = ref(false);
const currentFacility = ref<IFacility | null>(null);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
const fetchData = () => {
let params = {
filter: {

1957
frontend/src/modules/liuyu/ai/spdzwaijc/AISPTK.vue Normal file
View File

File diff suppressed because it is too large Load Diff

317
frontend/src/modules/liuyu/ai/spdzwaijc/components/VideoDetails.vue Normal file
View File

@ -0,0 +1,317 @@
<template>
<div class="video-details">
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
<a-tab-pane key="2" tab="运行">
<a-spin :spinning="loading">
<div class="video-container">
<VideoPlayer
:list="videoList"
:activeFid="activeFid"
:activeMedia="activeMedia"
:loading="loading"
:page="page"
:pageSize="pageSize"
:pageSizeOptions="pageSizeOptions"
:total="total"
@select="handleSelectMedia"
@pageChange="handlePageChange"
/>
</div>
</a-spin>
</a-tab-pane>
<a-tab-pane key="1" tab="未运行">
<a-spin :spinning="loading">
<div class="video-container">
<VideoPlayer
:list="videoList"
:activeFid="activeFid"
:activeMedia="activeMedia"
:loading="loading"
:page="page"
:pageSize="pageSize"
:pageSizeOptions="pageSizeOptions"
:total="total"
@select="handleSelectMedia"
@pageChange="handlePageChange"
/>
</div>
</a-spin>
</a-tab-pane>
</a-tabs>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import VideoPlayer from '@/modules/yunXingGaoJIng/Aisbdbyx/components/VideoPlayer.vue';
import { getAiFile } from '@/api/zngj';
import { postIdUrl } from '@/api/mapModal';
import dayjs from 'dayjs';
const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
// ==================== Props ====================
const props = defineProps<{
baseid?: string;
month?: any;
type?: string;
vdDate?: string;
activeKey?: string;
stnm?: string;
rstcd?: string;
pieCode?: string[];
}>();
// ==================== 状态 ====================
const activeKey = ref(props.activeKey || '2');
const loading = ref(false);
const videoList = ref<any[]>([]);
const activeFid = ref('');
const activeMedia = ref<{ type: string; src: string }>({ type: '', src: '' });
const page = ref(1);
const pageSize = ref(20);
const pageSizeOptions = ['20', '50', '100'];
const total = ref(0);
// ==================== 获取视频列表 ====================
const fetchVideoList = async () => {
loading.value = true;
try {
const filters: any[] = [
// baseId过滤
props.pieCode && props.pieCode.length > 0 && props.baseid === 'all'
? {
field: 'baseId',
operator: 'in',
dataType: 'string',
value: props.pieCode
}
: props.baseid && props.baseid !== 'all'
? { field: 'baseId', operator: 'eq', value: props.baseid }
: null,
// rstcd过滤
props.pieCode && props.pieCode.length > 0 && props.baseid !== 'all'
? {
field: 'rstcd',
operator: 'in',
dataType: 'string',
value: props.pieCode
}
: null,
// type过滤
{ field: 'type', operator: 'eq', value: props.type },
// dataType过滤（运行/未运行）
{ field: 'dataType', operator: 'eq', value: activeKey.value },
// 时间范围（按天）
{
field: 'tm',
operator: 'gte',
dataType: 'date',
value: dayjs(props.vdDate)
.startOf('day')
.format('YYYY-MM-DD 00:00:00')
},
{
field: 'tm',
operator: 'lte',
dataType: 'date',
value: dayjs(props.vdDate)
.endOf('day')
.format('YYYY-MM-DD 23:59:59')
},
// stnm文本搜索
props.stnm
? { field: 'stnm', operator: 'contains', value: props.stnm }
: null,
// rstcd电站选择
props.rstcd
? {
field: 'rstcd',
operator: 'in',
dataType: 'string',
value: [props.rstcd]
}
: null
].filter(Boolean);
const params = {
filter: { logic: 'and', filters },
sort: [{ field: 'tm', dir: 'desc' }],
skip: (page.value - 1) * pageSize.value,
take: pageSize.value
};
const res: any = await getAiFile(params);
const rData = res?.data ?? {};
const rawData = rData?.data || [];
total.value = rData?.total || rawData.length;
// 按 fid 展开
const expandedData = rawData
.map((item: any) => {
const fids = item.fid ? item.fid.split(',') : [];
return fids.map((fid: string) => ({ ...item, fid: fid.trim() }));
})
.flat();
// 收集所有 fid
const allFids = expandedData
.filter((item: any) => item.fid)
.map((item: any) => item.fid)
.join(',');
// 调用 postIdUrl 获取媒体详情
let mediaMap: Record<string, any> = {};
if (allFids) {
const formData = new FormData();
formData.append('id', allFids);
const mediaRes: any = await postIdUrl(formData);
mediaMap = mediaRes?.data || {};
}
// 构建列表
const list: any[] = [];
expandedData.forEach((vd: any) => {
const fileInfo = mediaMap[vd.fid];
const hasValidExtension =
fileInfo && ['.jpg', '.png'].includes(fileInfo.ext);
let flpth = '';
let imgPath = '';
let type = '';
if (hasValidExtension !== undefined && !hasValidExtension) {
flpth = fileInfo.fullpath;
type = 'vdsp';
} else if (hasValidExtension !== undefined) {
imgPath = fileInfo.fullpath;
type = 'img';
}
const tm = vd.tm ? dayjs(vd.tm).format('YYYY-MM-DD HH:mm:ss') : '-';
list.push({
...vd,
flpth,
imgPath,
flnm: `${vd.ennm || ''}${tm}`,
type,
tm
});
});
// 过滤掉无效项
const listMap = list.filter(
item => item.flpth !== '' || item.imgPath !== ''
);
videoList.value = listMap;
// 默认选中第一条
if (listMap.length > 0) {
const first = listMap[0];
activeFid.value = first.fid;
if (first.type === 'img') {
activeMedia.value = {
type: 'image',
src: baseUrl + '?' + first.fid + '&view=jpg'
};
} else if (first.type === 'vdsp') {
activeMedia.value = {
type: 'video',
src: baseUrl + '?' + first.fid + '&view=jpg'
};
} else {
activeMedia.value = { type: '', src: '' };
}
} else {
activeFid.value = '';
activeMedia.value = { type: '', src: '' };
}
} catch (error) {
console.error('获取视频详情列表失败:', error);
videoList.value = [];
activeFid.value = '';
activeMedia.value = { type: '', src: '' };
} finally {
loading.value = false;
}
};
// ==================== 事件处理 ====================
const handleTabChange = () => {
page.value = 1;
activeFid.value = '';
activeMedia.value = { type: '', src: '' };
fetchVideoList();
};
const handleSelectMedia = (item: any) => {
activeFid.value = item.fid;
if (item.type === 'img') {
activeMedia.value = {
type: 'image',
src: baseUrl + '?' + item.fid + '&view=jpg'
};
} else if (item.type === 'vdsp') {
activeMedia.value = {
type: 'video',
src: baseUrl + '?' + item.fid + '&view=jpg'
};
} else {
activeMedia.value = { type: '', src: '' };
}
};
const handlePageChange = (newPage: number, newPageSize: number) => {
page.value = newPage;
pageSize.value = newPageSize;
activeFid.value = '';
activeMedia.value = { type: '', src: '' };
fetchVideoList();
};
// ==================== 监听 ====================
watch(
() => [props.vdDate, props.type, activeKey.value],
() => {
if (props.vdDate) {
page.value = 1;
fetchVideoList();
}
}
);
// ==================== 生命周期 ====================
onMounted(() => {
if (props.vdDate) {
fetchVideoList();
}
});
</script>
<style lang="scss" scoped>
.video-details {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
:deep(.ant-tabs) {
flex: 1;
display: flex;
flex-direction: column;
}
:deep(.ant-tabs-content) {
flex: 1;
}
:deep(.ant-tabs-tabpane) {
height: 100%;
}
.video-container {
height: 100%;
}
}
</style>

57
frontend/src/modules/liuyu/ai/spdzwaijc/index.vue
View File

@ -3,7 +3,12 @@
<SidePanelItem title="AI识别过鱼设施运行" :datetimePicker="datetimePicker" @update-values="handlePanelChange">
<a-spin :spinning="dataLoading" tip="加载中...">
<div class="facility-grid">
<div v-for="facility in facilities" :key="facility.key" class="facility-card">
<div
v-for="facility in facilities"
:key="facility.key"
class="facility-card"
@click="handleCardClick(facility.action)"
>
<div style="width: 70px;height: 62px;display: flex;align-items: center;justify-content: center;">
<div class="facility-icon">
<i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
@ -20,14 +25,33 @@
</div>
</a-spin>
</SidePanelItem>
<!-- AI识别过鱼设施运行详情弹框 -->
<a-modal
v-model:open="modalVisible"
title="AI识别过鱼设施运行"
width="1536px"
:footer="null"
@cancel="handleModalClose"
>
<AISPTK
v-if="modalVisible"
:month="datetimePicker.value"
:action="currentAction"
:baseid="baseid"
:ly-name="lyName"
/>
</a-modal>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import AISPTK from './AISPTK.vue';
import { getAiGyssList } from '@/api/zngj';
import dayjs from 'dayjs';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
@ -39,6 +63,10 @@ const baseid = ref('');
const dataLoading = ref(false);
const panelDetail = ref<any>({});
// ==================== 弹框状态 ====================
const modalVisible = ref(false);
const currentAction = ref('AI_5006');
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
const lyName = computed(() => baseid.value === '02' ? '升鱼斗运行' : '升鱼机运行');
// ==================== 日期选择器配置 ====================
@ -56,37 +84,43 @@ const facilities = computed(() => [
key: 'gys',
name: '赶鱼栅运行',
count: panelDetail.value?.fpGysCnt ?? 0,
icon: 'icon iconfont icon-ganyushan'
icon: 'icon iconfont icon-ganyushan',
action: 'AI_5006'
},
{
key: 'syj',
name: lyName.value,
count: panelDetail.value?.fpSyjCnt ?? 0,
icon: 'icon iconfont icon-liuliangjiancezhan1'
icon: 'icon iconfont icon-liuliangjiancezhan1',
action: 'AI_5007'
},
{
key: 'agv',
name: 'AGV小车',
count: panelDetail.value?.fpAgvCnt ?? 0,
icon: 'icon iconfont icon-agvxiaoche'
icon: 'icon iconfont icon-agvxiaoche',
action: 'AI_5008'
},
{
key: 'yych',
name: '运鱼车运行',
count: panelDetail.value?.fpYychCnt ?? 0,
icon: 'icon iconfont icon-yunyuche'
icon: 'icon iconfont icon-yunyuche',
action: 'AI_5002'
},
{
key: 'yyc',
name: '运鱼船出港',
count: panelDetail.value?.fpYycCnt ?? 0,
icon: 'icon iconfont icon-yunyuchuan'
icon: 'icon iconfont icon-yunyuchuan',
action: 'AI_5003'
},
{
key: 'ydh',
name: '鱼道放流',
count: panelDetail.value?.fpYdhCnt ?? 0,
icon: 'icon iconfont icon-yudaofangliu'
icon: 'icon iconfont icon-yudaofangliu',
action: 'AI_5012'
}
]);
@ -99,6 +133,15 @@ const handlePanelChange = (data: any) => {
getCardData();
};
const handleCardClick = (action: string) => {
currentAction.value = action;
modalVisible.value = true;
};
const handleModalClose = () => {
modalVisible.value = false;
};
// ==================== 获取卡片统计数据 ====================
const getCardData = async () => {
if (!datetimePicker.value.value || !baseid.value) return;

3
frontend/src/modules/liuyu/yichangyujing/shengtailiuliangxianzhigaojing/shengtailiuliangxianshuju.vue
View File

@ -40,6 +40,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import SidePanelItem from "@/components/SidePanelItem/index.vue";
import { getStllGaojingList } from '@/api/zngj';
import ModeGaoJing from './ModeGaoJing.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
@ -51,7 +52,7 @@ const baseid = ref('');
const dataLoading = ref(false);
const isModalOpen = ref(false);
const currentWarnState = ref('');
useDraggable(isModalOpen, { boundary: true, resetOnOpen: true });
const data = ref([
{
name:'正常',

3
frontend/src/modules/liuyu/yichangyujing/shuizhijiancegaojing/shuizhijianceshuju.vue
View File

@ -38,6 +38,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import SidePanelItem from "@/components/SidePanelItem/index.vue";
import { getShuizhiGaojingList } from '@/api/zngj';
import ModeGaoJing from './ModeGaoJing.vue';
import { useDraggable } from '@/utils/drag';
defineOptions({
name: "shuizhijianceshuju",
@ -51,7 +52,7 @@ const defaultValue = ref<string>('0');
// 弹框状态
const modalVisible = ref(false);
const currentWarnState = ref('');
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
const handleCardClick = (warnState: string) => {
currentWarnState.value = warnState;
modalVisible.value = true;

3
frontend/src/modules/lushengshengtaijiance/index.vue
View File

@ -68,6 +68,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import LsstjkTk from './LsstjkTk.vue';
import { wbsbGetKendoList, getEvnmAutoMonitor } from '@/api/stdc';
import moment from 'moment';
import { useDraggable } from '@/utils/drag';
// 定义组件名
defineOptions({
@ -81,7 +82,7 @@ const dataLoading = ref(false);
// ==================== 弹框状态 ====================
const modalVisible = ref(false);
const currentOrderIndex = ref('16');
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// ==================== 响应式变量定义 ====================
// 选择器配置
const select = ref({

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

@ -1,4 +1,5 @@
import { watch, type WatchStopHandle } from 'vue';
import { watch, type WatchStopHandle, ref } from 'vue';
import { useRoute } from 'vue-router';
import { unByKey } from 'ol/Observable';
import 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;
const legendConfigPromise = mapConfigStore.loadPageLegendConfig(
moduleId,
{
includeGlobal: shouldLoadGlobalLegend
}
);
if (legendOriginal.length > 0) {
mapStore.setLegendData(legendOriginal, pageLegend);
}
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;
}
}
await mapStore.loadAllLayerData(layerConfig, checkedKeys);
// 设置图例数据（此时 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 {

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

@ -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 [legendAllRes, legendPageRes] = await Promise.all([
getModuleMapLegendList(),
getModuleMapLegendList(pageKey ? { moduleId: pageKey } : undefined)
]);
const includeGlobal = options.includeGlobal !== false;
const legendOriginal = legendAllRes?.data || [];
const pageLegend = legendPageRes?.data || [];
let legendOriginal = legendConfigOriginal.value || [];
let pageLegend: any[] = [];
if (includeGlobal) {
const [legendAllRes, legendPageRes] = await Promise.all([
getModuleMapLegendList(),
getModuleMapLegendList(pageKey ? { moduleId: pageKey } : undefined)
]);
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,

3
frontend/src/modules/monthlyAvgWaterTemCompareHistory/TwoLayers/monthlyAverageMaxModal.vue
View File

@ -70,6 +70,7 @@ import dayjs from 'dayjs';
import { ZoomInOutlined } from '@ant-design/icons-vue';
import type { Dayjs } from 'dayjs';
import MonthlyAverage from '../monthlyAverage.vue';
import { useDraggable } from '@/utils/drag';
defineOptions({
name: 'MonthlyAverageMaxModal'
@ -101,7 +102,7 @@ const detailModalData = ref<any>(null);
// 选择器相关 - 内部状态管理
const selectValue = ref('');
const selectOptions = ref<any[]>([]);
useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
// 树形选择器展开状态管理
const treeExpandedKeys = ref<string[]>([])
const nodeMap = new Map<string, { node: any; parentKey: string | null }>()

4
frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue
View File

@ -41,6 +41,7 @@ import dayjs from 'dayjs'
import {
ZoomInOutlined
} from '@ant-design/icons-vue';
import { useDraggable } from '@/utils/drag';
defineOptions({
name: 'monthlyAvgWaterTemCompareHistory'
@ -68,7 +69,8 @@ const stationName = ref('');
// 图表放大展示弹框状态
const zoomModalVisible = ref(false);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
useDraggable(zoomModalVisible, { boundary: true, resetOnOpen: true });
// 选择器配置
const select = ref({
show: true,

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

@ -104,7 +104,6 @@ import { message } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';
import * 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';

323
frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
View File

@ -1,206 +1,237 @@
<!-- SidePanelItem.vue -->
<template>
<SidePanelItem title="栖息地保护工作开展情况">
<a-spin :spinning="loading" tip="加载中...">
<div class="facility-grid">
<div v-for="facility in facilities" :key="facility.name" class="facility-card"
@click="handleFacilityClick(facility)">
<div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
<div class="facility-icon">
<i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
</div>
</div>
<div class="facility-info">
<div class="facility-name">{{ facility.name }}</div>
<div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
}}</span><span>个</span></div>
</div>
</div>
<SidePanelItem title="栖息地保护工作开展情况">
<a-spin :spinning="loading" tip="加载中...">
<div class="facility-grid">
<div
v-for="facility in facilities"
:key="facility.name"
class="facility-card"
@click="handleFacilityClick(facility)"
>
<div
style="
width: 60px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
"
>
<div class="facility-icon">
<i
style="color: #fff"
:class="facility.icon"
type="icon-shengtailiuliang2"
></i>
</div>
</a-spin>
</SidePanelItem>
<!-- 弹框 -->
<a-modal v-model:open="modalVisible" :title="'栖息地保护工作开展情况'" :footer="null" width="1536px" @cancel="handleCloseModal">
<QixidiheduanjianceqingkuangEJ v-if="currentFacility" :activeKey="currentFacility.sttpCode" :tabs="facilities"
:baseId="baseid" />
</a-modal>
</div>
<div class="facility-info">
<div class="facility-name">{{ facility.name }}</div>
<div style="font-size: 16px">
<span class="facility-count">{{ facility.count }}</span
><span>个</span>
</div>
</div>
</div>
</div>
</a-spin>
</SidePanelItem>
<!-- 弹框 -->
<a-modal
v-model:open="modalVisible"
:title="'栖息地保护工作开展情况'"
:footer="null"
width="1536px"
@cancel="handleCloseModal"
>
<QixidiheduanjianceqingkuangEJ
v-if="currentFacility"
:activeKey="currentFacility.sttpCode"
:tabs="facilities"
:baseId="baseid"
/>
</a-modal>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import { fhGetKendoListCust } from '@/api/qxd'
import QixidiheduanjianceqingkuangEJ from "./qixidiheduanjianceqingkuangEJ/index.vue"
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { fhGetKendoListCust } from '@/api/qxd';
import QixidiheduanjianceqingkuangEJ from './qixidiheduanjianceqingkuangEJ/index.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'qixidibaohugongzuokaizhanQK'
name: 'qixidibaohugongzuokaizhanQK'
});
const JidiSelectEventStore = useJidiSelectEventStore();
// loading状态
const loading = ref(false);
// 设施数据
const facilities = ref([
{
name: '栖息地',
count: 0,
icon: 'icon iconfont icon-qixidi',
sttpCode: 'FH'
},
{
name: '水温监测',
count: 0,
icon: 'icon iconfont icon-diwenshuijianhuan',
sttpCode: 'WTRV'
},
{
name: '水文监测',
count: 0,
icon: 'icon iconfont icon-shuiwen-line',
sttpCode: 'ZQ'
},
{
name: '视频监控',
count: 0,
icon: 'icon iconfont icon-shipinjiankongshebei',
sttpCode: 'VD'
},
{
name: '栖息地',
count: 0,
icon: 'icon iconfont icon-qixidi',
sttpCode: 'FH'
},
{
name: '水温监测',
count: 0,
icon: 'icon iconfont icon-diwenshuijianhuan',
sttpCode: 'WTRV'
},
{
name: '水文监测',
count: 0,
icon: 'icon iconfont icon-shuiwen-line',
sttpCode: 'ZQ'
},
{
name: '视频监控',
count: 0,
icon: 'icon iconfont icon-shipinjiankongshebei',
sttpCode: 'VD'
}
]);
const baseid = ref('')
const baseid = ref('');
// 弹框相关状态
const modalVisible = ref(false);
const currentFacility = ref<any>(null);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
//获取页面数据
const getData = async () => {
loading.value = true;
try {
let params = {
"filter": {
"logic": "and",
"filters": [
baseid.value != 'all' ? {
"field": "baseId",
"operator": "eq",
"dataType": "string",
"value": baseid.value
} : null
].filter(Boolean)
},
"group": [
{
"dir": "asc",
"field": "sttpCode"
}
],
"groupResultFlat": true
loading.value = true;
try {
let params = {
filter: {
logic: 'and',
filters: [
baseid.value != 'all'
? {
field: 'baseId',
operator: 'eq',
dataType: 'string',
value: baseid.value
}
: null
].filter(Boolean)
},
group: [
{
dir: 'asc',
field: 'sttpCode'
}
const res = await fhGetKendoListCust(params); //适配监控-VD
let data = res?.data?.data || res?.data || [];
],
groupResultFlat: true
};
const res = await fhGetKendoListCust(params); //适配监控-VD
let data = res?.data?.data || res?.data || [];
// 根据接口返回的数据更新 facilities 的 count
facilities.value.forEach(facility => {
const matchedItem = data.find(item => item.sttpCode === facility.sttpCode);
if (matchedItem) {
facility.count = matchedItem.count_sttpCode || 0;
} else {
facility.count = 0;
}
});
} catch (error) {
console.error('获取数据失败:', error);
} finally {
loading.value = false;
}
}
// 根据接口返回的数据更新 facilities 的 count
facilities.value.forEach(facility => {
const matchedItem = data.find(
item => item.sttpCode === facility.sttpCode
);
if (matchedItem) {
facility.count = matchedItem.count_sttpCode || 0;
} else {
facility.count = 0;
}
});
} catch (error) {
console.error('获取数据失败:', error);
} finally {
loading.value = false;
}
};
// 点击处理函数
const handleFacilityClick = (facility: any) => {
currentFacility.value = facility;
modalVisible.value = true;
currentFacility.value = facility;
modalVisible.value = true;
};
// 关闭弹框
const handleCloseModal = () => {
modalVisible.value = false;
currentFacility.value = null;
modalVisible.value = false;
currentFacility.value = null;
};
watch(
() => JidiSelectEventStore.selectedItem,
(newVal) => {
baseid.value = newVal.wbsCode;
getData()
},
{ deep: true, immediate: true }
() => JidiSelectEventStore.selectedItem,
newVal => {
baseid.value = newVal.wbsCode;
getData();
},
{ deep: true, immediate: true }
);
// 页面加载时执行
onMounted(() => {
// 延迟初始化，确保容器已渲染
// 延迟初始化，确保容器已渲染
});
// 组件卸载时清理
onUnmounted(() => {
});
onUnmounted(() => {});
</script>
<style lang="scss" scoped>
.facility-grid {
width: 406px;
flex-flow: wrap;
display: flex;
justify-content: space-between;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
width: 406px;
flex-flow: wrap;
display: flex;
justify-content: space-between;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
.facility-card {
width: 200px;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 4px 0px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 2px;
transition: all 0.3s;
cursor: pointer;
box-sizing: border-box;
width: 200px;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 4px 0px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 2px;
transition: all 0.3s;
cursor: pointer;
box-sizing: border-box;
}
.facility-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
// margin-right: 8px;
background: #5389b5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
// margin-right: 8px;
background: #5389b5;
border-radius: 50%;
.anticon {
font-size: 24px;
color: #fff;
}
.anticon {
font-size: 24px;
color: #fff;
}
}
.facility-info {
flex: 1;
flex: 1;
}
.facility-name {
font-size: 16px;
color: #333;
// margin-bottom: 4px;
// font-weight: 500;
font-size: 16px;
color: #333;
// margin-bottom: 4px;
// font-weight: 500;
}
.facility-count {
font-size: 18px;
color: #2f6b98;
// font-weight: 600;
font-size: 18px;
color: #2f6b98;
// font-weight: 600;
}
</style>

3
frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/TwoLayer/STLLXFFS.vue
View File

@ -55,7 +55,7 @@
ref="tableRef"
:columns="columns"
:scrollY="380"
:scrollX="100"
:list-url="vmsstbprptGetKendoList"
:search-params="searchParams"
:transform-data="customTransform"
@ -834,7 +834,6 @@ const handleResize = () => {
width: 35%;
height: 482px;
// position: relative;
min-width: 521px;
.pie-chart {
width: 100%;

6
frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/index.vue
View File

@ -37,7 +37,7 @@
<a-modal
v-model:open="modalVisible"
:title="'生态流量泄放方式'"
width="1536px"
width="80%"
@cancel="handleModalCancel"
>
<STLLXFFS
@ -57,6 +57,8 @@ import type { ECharts } from 'echarts';
import { msstbprptGetKendoList } from '@/api/stll';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import STLLXFFS from './TwoLayer/STLLXFFS.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'xieFangFangShi'
@ -78,7 +80,7 @@ const apiRawData = ref<any[]>([]); // 保存原始 API 数据
const modalVisible = ref(false);
const modalTitle = ref('');
const selectedData = ref<any>(null);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 颜色配置（根据图片配色）
const colors = [
'#9556a4', // 基荷发电 - 紫色

2
frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/TwoLayer/FenBuQingKuangTwoLayer.vue
View File

@ -676,7 +676,7 @@ onUnmounted(() => {
.chart-section {
width: 35%;
height: 482px;
min-width: 521px;
.pie-chart {
width: 100%;

6
frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/index.vue
View File

@ -10,7 +10,7 @@
<a-modal
v-model:open="modalVisible"
title="泄放方式分布情况"
width="1536px"
width="80%"
:footer="null"
@cancel="handleModalCancel"
>
@ -38,6 +38,8 @@ import type { ECharts } from 'echarts';
import { vmsstbprptGetKendoList } from '@/api/stll';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import FBQKTwolayer from './TwoLayer/FenBuQingKuangTwoLayer.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名
defineOptions({
name: 'XieFangFenBu'
@ -59,7 +61,7 @@ const wbsCode = ref('');
const modalVisible = ref(false);
const selectData = ref(''); // 选中的设施类型名称
const jidiName = ref(''); // 选中的基地名称
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 设施类型配置
const typeName = [
{ label: '生态放流孔', eqtp: 'EQ_1' },

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

@ -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>
@ -88,7 +88,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>
@ -105,6 +109,7 @@ import { useMapViewStore } from '@/modules/map/stores/map-view.store';
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'
@ -146,10 +151,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;
@ -158,7 +166,6 @@ const handleStationClick = () => {
// 处理进度条点击事件
const handleBarClick = (item: any) => {
selectedItem.value = item;
// modalTitle.value = `${item.name} - 详细信息`;
modalVisible.value = true;
};
@ -316,43 +323,41 @@ watch(
);
//统计电站范围：接入过生态流量数据的电站
const titleData:any = ref({ cnt: 0 })
const titleData: any = ref({ cnt: 0 });
const getcont = async () => {
let params = {
"filter": {
"logic": "and",
"filters": [
{
"field": "showIds",
"operator": "in",
"value": [
"7"
]
}
]
filter: {
logic: 'and',
filters: [
{
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>

5
frontend/src/modules/shengtaidabiaoModJZ/index.vue
View File

@ -105,6 +105,8 @@ import { useMapViewStore } from '@/modules/map/stores/map-view.store';
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'
@ -149,7 +151,8 @@ 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;

4
frontend/src/modules/shengtaidabiaoTwoMod/index.vue
View File

@ -67,6 +67,8 @@ import { eqqecRateCount, evnmAutoMonitorGetKendoListCust } from '@/api/stll';
import ModalYkzhbzdjcgz from '../shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue';
import STLLXFFS from './TwoLayer/STLLXFFS.vue'
import { useMapViewStore } from '@/modules/map/stores/map-view.store';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'shengtaidabiaoMod'
@ -604,6 +606,8 @@ watch(
const detailModalVisible = ref(false);
const detailModalTitle = ref('');
const detailData = ref<any[]>([]);
useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
const detailColumns = ref([
{
title: mode.value === 'top' ? '基地名称' : '调节性能',

5
frontend/src/modules/shengtaidabiaoTwoModJJ/index.vue
View File

@ -68,6 +68,8 @@ import { eqqecRateCount, evnmAutoMonitorGetKendoListCust } from '@/api/stll';
import ModalYkzhbzdjcgz from '../shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue';
import STLLXFFS from './TwoLayer/STLLXFFS.vue'
import { useMapViewStore } from '@/modules/map/stores/map-view.store';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'shengtaidabiaoMod'
@ -97,6 +99,7 @@ const huanbaoModalVisible = ref(false);
const handleStationClick = () => {
huanbaoModalVisible.value = true;
};
// 加载数据
const loadData = async () => {
spinning.value = true;
@ -633,6 +636,8 @@ const detailColumns = ref([
watch(mode, () => {
loadData();
});
useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
</script>
<style lang="scss" scoped>

3
frontend/src/modules/sheshileixingjieshao/index.vue
View File

@ -62,6 +62,8 @@ import { ref, onMounted, onUnmounted, computed } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
import { sttpbGetKendoList } from '@/api/sw';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'diwenshuijianhuansheshileixingzuchengjijieruqingkuang'
@ -96,6 +98,7 @@ const isTransitioning = ref(false);
// 弹框控制
const modalVisible = ref(false);
const currentItem = ref<any>(null);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 初始化渲染数组（克隆首尾项）
const initRenderData = () => {
const length = originalMediaData.value.length;

3
frontend/src/modules/shuiWenNianNeiFenBu/index.vue
View File

@ -43,6 +43,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import YaerAverage from './TwoLayers/yaerAverage.vue';
import { MapClass } from '@/components/gis/map.class';
import { useDraggable } from '@/utils/drag';
const JidiSelectEventStore = useJidiSelectEventStore();
// 水温年内分布数据（响应式）
@ -52,7 +53,7 @@ const showemit = ref(true);
// 弹框相关状态
const modalVisible = ref(false);
const currentData = ref<any>({});
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
const chartRef = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
// 选择器配置

38
frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
View File

@ -4,6 +4,21 @@
<a-table :columns="columns" :data-source="tableData" :pagination="false" size="middle" :customRow="customRow"
:loading="dataLoading" bordered class="custom-table">
</a-table>
<a-modal
v-model:open="modalVisible"
title="水电开发情况"
width="80%"
:footer="null"
:destroy-on-close="true"
>
<ShuiDianKaiFQKTwoLayer
v-if="modalVisible"
:defaultJidiInfo="modalProps.defaultJidiInfo"
:seriesName="modalProps.seriesName"
:stateName="modalProps.stateName"
:defaultTab="modalProps.defaultTab"
/>
</a-modal>
</div>
</template>
@ -11,6 +26,8 @@
import { ref, watch } from 'vue';
import { getVmsstbprptKendoList } from '@/api/home';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import ShuiDianKaiFQKTwoLayer from './TwoLayer/ShuiDianKaiFQKTwoLayer.vue';
import { useDraggable } from '@/utils/drag';
defineOptions({
name: 'DataTable'
@ -25,6 +42,26 @@ const baseid = ref('');
const dataLoading = ref(false);
const tableData = ref<any[]>([]);
const modalVisible = ref(false);
const modalProps = ref<any>({});
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
const openDialog = (record: any) => {
const currentJidiInfo = JidiSelectEventStore.selectedItem;
const isAll = currentJidiInfo?.wbsCode === 'all';
const stateName = record.bldsttCcode === '0' ? '未建' : record.bldsttCcode === '1' ? '在建' : '已建';
modalProps.value = {
defaultJidiInfo: {
baseid: isAll ? record.key : currentJidiInfo?.wbsCode || 'all',
basename: isAll ? record.name : currentJidiInfo?.wbsName || '全部基地'
},
seriesName: '装机容量(万kW)',
stateName,
defaultTab: stateName
};
modalVisible.value = true;
};
const columns = ref([
{
title: '基地名称',
@ -183,6 +220,7 @@ const customRow = (record: any, index: number) => {
},
onClick: () => {
if (record.name !== '总计') {
openDialog(record);
emit('row-click', record);
}
}

1297
frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/HuanJingSJJRQK.vue
View File

File diff suppressed because it is too large Load Diff

1642
frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue
View File

File diff suppressed because it is too large Load Diff

106
frontend/src/modules/shuidianhuangjingjieruMod/index.vue
View File

@ -1,58 +1,24 @@
<!-- SidePanelItem.vue -->
<template>
<div class="basic_body">
<SidePanelItem title="大中型水电开发及环境监测数据接入情况" :prompt="prompt">
<SidePanelItem title="大中型水电开发及环境监测数据接入情况" >
<div>
<div class="body_top">
<!-- {/* 水电开发情况图表 */} -->
<div style="flex: 1;">
<div>水电开发情况</div>
<div style="color: #757575;font-size: 12px;line-height: 16px;">图释：数量（内）/装机容量（外）</div>
<div>
<DevelopStatusChart @chart-click="handleChartClick" />
</div>
<a-spin :spinning="developStatusChartRef?.dataLoading">
<DevelopStatusChart ref="developStatusChartRef" />
</a-spin>
</div>
<!-- style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center" }} -->
<div style="flex: 1;display: flex; flex-direction: column; align-items: center;">
<EngEnvironmentData @item-click="handleEnvItemClick" />
<a-spin :spinning="engEnvironmentDataRef?.dataLoading">
<EngEnvironmentData ref="engEnvironmentDataRef" />
</a-spin>
</div>
</div>
<DataTable @row-click="handleRowClick" />
<DataTable />
</div>
<!-- <div v-else class="zanwushujv"> <a-empty /></div> -->
</SidePanelItem>
<!-- 水电开发情况弹窗 -->
<a-modal
v-model:open="shuidianModalVisible"
:title="shuidianModalTitle"
width="1536px"
:footer="null"
:destroy-on-close="true"
>
<ShuiDianKaiFQKTwoLayer
v-if="shuidianModalVisible"
:defaultJidiInfo="shuidianModalProps.defaultJidiInfo"
:seriesName="shuidianModalProps.seriesName"
:stateName="shuidianModalProps.stateName"
:defaultTab="shuidianModalProps.defaultTab"
/>
</a-modal>
<!-- 环境监测数据接入情况弹窗 -->
<a-modal
v-model:open="huanjingModalVisible"
:title="huanjingModalTitle"
width="1536px"
:footer="null"
:destroy-on-close="true"
>
<HuanJingSJJRQK
v-if="huanjingModalVisible"
:dataDimensionVal="huanjingModalProps.dataDimensionVal"
:name="huanjingModalProps.name"
/>
</a-modal>
</div>
</template>
@ -62,36 +28,21 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import DevelopStatusChart from "@/components/developStatusChart/index.vue"
import EngEnvironmentData from "@/components/engEnvironmentData/index.vue"
import DataTable from "./DataTable.vue"
import ShuiDianKaiFQKTwoLayer from "./TwoLayer/ShuiDianKaiFQKTwoLayer.vue"
import HuanJingSJJRQK from "./TwoLayer/HuanJingSJJRQK.vue"
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { Spin } from 'ant-design-vue';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'shuidianhuangjingjieruMod'
});
const JidiSelectEventStore = useJidiSelectEventStore();
const prompt = ref({
show: true,
value: '统计大中型已建，在建水电站',
})
const developStatusChartRef = ref<InstanceType<typeof DevelopStatusChart> | null>(null);
const engEnvironmentDataRef = ref<InstanceType<typeof EngEnvironmentData> | null>(null);
// 水电开发情况弹窗状态
const shuidianModalVisible = ref(false);
const shuidianModalTitle = ref('水电开发情况');
const shuidianModalProps = ref<any>({});
// 环境监测数据接入情况弹窗状态
const huanjingModalVisible = ref(false);
const huanjingModalTitle = ref('环境监测数据接入情况');
const huanjingModalProps = ref<any>({});
// DataTable 行点击事件
const handleRowClick = (record: any) => {
const currentJidiInfo = JidiSelectEventStore.selectedItem;
shuidianModalProps.value = {
developStatusChartRef.value?.openModal({
defaultJidiInfo: {
baseid: currentJidiInfo?.wbsCode || 'all',
basename: currentJidiInfo?.wbsName || '全部基地'
@ -99,41 +50,10 @@ const handleRowClick = (record: any) => {
seriesName: currentJidiInfo?.wbsCode === 'other' ? '数量(座)' : '装机容量(万kW)',
stateName: record.bldsttCcode === '0' ? '未建' : record.bldsttCcode === '1' ? '在建' : '已建',
defaultTab: record.bldsttCcode === '0' ? '未建' : record.bldsttCcode === '1' ? '在建' : '已建'
};
shuidianModalTitle.value = '水电开发情况';
shuidianModalVisible.value = true;
});
};
// DevelopStatusChart 饼图点击事件
const handleChartClick = (params: any) => {
const currentJidiInfo = JidiSelectEventStore.selectedItem;
shuidianModalProps.value = {
defaultJidiInfo: {
baseid: currentJidiInfo?.wbsCode || 'all',
basename: currentJidiInfo?.wbsName || '全部基地'
},
seriesName: params.seriesName,
stateName: params.name,
defaultTab: params.name
};
shuidianModalTitle.value = '水电开发情况';
shuidianModalVisible.value = true;
};
// EngEnvironmentData 指标点击事件
const handleEnvItemClick = (params: any) => {
const currentJidiInfo = JidiSelectEventStore.selectedItem;
huanjingModalProps.value = {
dataDimensionVal: currentJidiInfo?.wbsCode || 'all',
name: params.name
};
huanjingModalTitle.value = '环境监测数据接入情况';
huanjingModalVisible.value = true;
};
// 页面加载时执行的逻辑
onMounted(() => {
});
</script>

3
frontend/src/modules/shuishengshengtaijiance/index.vue
View File

@ -68,6 +68,7 @@ import SsstdcgkTk from './SsstdcgkTk.vue';
import { wbsbGetKendoList, getDftYear, getWeFisht } from '@/api/stdc';
import moment from 'moment';
import { Label } from 'cesium';
import { useDraggable } from '@/utils/drag';
// 定义组件名
defineOptions({
@ -80,7 +81,7 @@ const dataLoading = ref(false);
// ==================== 弹框状态 ====================
const modalVisible = ref(false);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// ==================== 响应式变量定义 ====================
// 选择器配置
const select = ref({

4
frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue
View File

@ -40,6 +40,8 @@ import SidePanelItem from "@/components/SidePanelItem/index.vue";
import { getKendoListCust, baseEvnmAutoMonitorGetKendoListCust } from "@/api/sw";
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import ShuiwenjiancegongzuoEJ from "./shuiwenjiancegongzuoEJ.vue"
import { useDraggable } from '@/utils/drag';
const JidiSelectEventStore = useJidiSelectEventStore();
// 定义组件名（便于调试和递归）
defineOptions({
@ -68,7 +70,7 @@ const loading = ref(false);
// 弹框相关状态
const modalVisible = ref(false);
const currentFacility = ref<any>(null);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 点击处理函数
const handleFacilityClick = (facility: any) => {
// console.log(facility);

4
frontend/src/modules/shuizhijiancegongzuoQK/index.vue
View File

@ -33,6 +33,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import { msstbprptGetKendoList } from '@/api/sz'
import ShuiwenjiancegongzuoEJ from "./shuiwenjiancegongzuoEJ.vue"
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'shuizhijiancegongzuoQK'
@ -74,7 +76,7 @@ const modalVisible = ref(false);
const currentFacility = ref<any>(null);
const baseid = ref("")
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
//获取水质监测工作开展情况数据
const getDataList = async () => {
loading.value = true;

4
frontend/src/modules/yanchengshuiwenChangeMod/index.vue
View File

@ -460,9 +460,7 @@ const getSelectConfig = async () => {
return indexA - indexB;
});
select.value.options = filterSelectOptions(dataMapNameArr);
if (baseid.value === 'all') {
select.value.value = 'SJLY1U';
} else if (filterSelectOptions(dataMapNameArr)[0]?.children) {
if (filterSelectOptions(dataMapNameArr)[0]?.children) {
select.value.value =
filterSelectOptions(dataMapNameArr)[0]?.children[0]?.value;
} else if (filterSelectOptions(dataMapNameArr)[0]?.value) {

1081
frontend/src/modules/yunXingGaoJIng/Aisbdbyx/AISBTK.vue
View File

File diff suppressed because it is too large Load Diff

218
frontend/src/modules/yunXingGaoJIng/Aisbdbyx/components/VideoPlayer.vue Normal file
View File

@ -0,0 +1,218 @@
<template>
<div class="video-section">
<div class="video-mode">
<div class="video-main" v-loading="loading">
<div v-if="activeMedia.type === 'image' && activeMedia.src" class="media-display">
<img :src="activeMedia.src" style="width: 100%; height: 100%; object-fit: contain" />
</div>
<div v-else-if="activeMedia.type === 'video' && activeMedia.src" class="media-display">
<LiveVideoBox :videoData="{ url: activeMedia.src }" height="100%" :showTitle="false" />
</div>
<div v-else class="media-empty">
<a-empty :description="emptyText" />
</div>
</div>
<div class="video-sidebar" v-loading="loading">
<div class="sidebar-list" v-if="list.length > 0">
<div
v-for="item in list"
:key="item.fid"
class="sidebar-item"
:class="{ active: activeFid === item.fid }"
@click="handleSelect(item)"
>
<div class="item-thumb">
<img v-if="item.type === 'img'" :src="item.imgPath" />
<div v-else-if="item.type === 'vdsp'" class="thumb-placeholder">
<img :src="videoCover" />
</div>
<span v-else class="no-media">无媒体</span>
</div>
<div class="item-time">{{ item.stName || item.ennm }}{{ item.tm }}</div>
</div>
</div>
<a-empty v-else description="暂无数据" class="sidebar-empty" />
</div>
</div>
<div class="sidebar-pagination" style="margin-top: 10px; display: flex; justify-content: end">
<a-pagination
v-model:current="currentPage"
v-model:pageSize="currentPageSize"
:page-size-options="pageSizeOptions"
:total="total"
show-size-changer
size="small"
@change="handlePageChange"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import LiveVideoBox from '@/views/shiPinJianKong/components/LiveVideoBox.vue';
import videoCover from '@/assets/images/videFm.jpg';
interface Props {
list: any[];
activeFid: string;
activeMedia: { type: string; src: string };
loading: boolean;
page: number;
pageSize: number;
pageSizeOptions: string[];
total: number;
emptyText?: string;
}
const props = withDefaults(defineProps<Props>(), {
emptyText: '请选择右侧数据'
});
const emit = defineEmits<{
(e: 'select', item: any): void;
(e: 'pageChange', page: number, pageSize: number): void;
}>();
const currentPage = ref(props.page);
const currentPageSize = ref(props.pageSize);
watch(
() => props.page,
val => {
currentPage.value = val;
}
);
watch(
() => props.pageSize,
val => {
currentPageSize.value = val;
}
);
const handleSelect = (item: any) => {
emit('select', item);
};
const handlePageChange = (page: number, pageSize: number) => {
currentPage.value = page;
currentPageSize.value = pageSize;
emit('pageChange', page, pageSize);
};
</script>
<style scoped>
.video-mode {
display: flex;
gap: 12px;
width: 100%;
height: 520px;
.video-main {
flex: 0 0 80%;
background: #000;
border-radius: 4px;
overflow: hidden;
.media-display {
width: 100%;
height: 100%;
}
.media-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
}
.video-sidebar {
flex: 0 0 20%;
display: flex;
flex-direction: column;
border: 1px solid #e8e8e8;
border-radius: 4px;
overflow: hidden;
.sidebar-list {
flex: 1;
overflow-y: auto;
.sidebar-item {
padding: 8px;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
transition: background 0.2s;
&:hover {
background: #f5f5f5;
}
&.active {
background: #e6f7ff;
}
.item-thumb {
width: 100%;
height: 110px;
background: #1a1a1a;
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumb-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
.no-media {
font-size: 12px;
color: #999;
}
}
}
.item-time {
margin-top: 6px;
font-size: 12px;
color: #666;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.sidebar-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.sidebar-pagination {
padding: 8px;
text-align: center;
border-top: 1px solid #e8e8e8;
}
}
}
/* 样式继承自父组件 */
</style>

119
frontend/src/modules/yunXingGaoJIng/Aisbdbyx/composables/usePieChart.ts Normal file
View File

@ -0,0 +1,119 @@
import * as echarts from 'echarts';
import type { ECharts, EChartsOption } from 'echarts';
export interface ChartDataItem {
name: string;
value: number;
key: string;
}
export function usePieChart(
chartRefs: Map<string, HTMLElement>,
chartData: { value: ChartDataItem[] },
tabIndex: { value: string },
typeMap: Record<string, string>,
legendCallback?: (e: any) => void
) {
let chartInstance: ECharts | null = null;
const initChart = (retryCount = 0) => {
const dom = chartRefs.get(tabIndex.value);
if (!dom) {
if (retryCount < 10) {
setTimeout(() => initChart(retryCount + 1), 100);
}
return;
}
const rect = dom.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0) {
if (retryCount < 10) {
setTimeout(() => initChart(retryCount + 1), 100);
}
return;
}
if (!chartInstance) {
chartInstance = echarts.init(dom);
}
const option: EChartsOption = {
tooltip: {
trigger: 'item',
formatter: (params: any) => `${params.marker} ${params.name}: ${params.value}(次)`
},
legend: {
orient: 'vertical',
right: 10,
top: 80,
textStyle: { fontSize: 12 }
},
series: []
};
if (!chartData.value || chartData.value.length === 0) {
chartInstance.setOption(option, true);
return;
}
const total = chartData.value.reduce((acc: number, item: ChartDataItem) => acc + (item.value || 0), 0);
const titleText = typeMap[tabIndex.value] || '识别(次)';
option.series = [
{
type: 'pie',
radius: ['26%', '35%'],
center: ['35%', '50%'],
avoidLabelOverlap: false,
label: {
show: true,
formatter: '{c}'
},
labelLine: {
show: true,
length: 12,
length2: 12
},
data: chartData.value.map((item: ChartDataItem) => ({
name: item.name,
value: item.value
}))
}
];
option.title = {
text: String(total),
left: '34%',
top: '44%',
textAlign: 'center',
textStyle: {
fontSize: 24,
fontWeight: 'bold',
color: '#333'
},
subtext: titleText,
subtextStyle: {
fontSize: 12,
color: '#333'
}
};
chartInstance.setOption(option, true);
if (legendCallback) {
chartInstance.off('legendselectchanged');
chartInstance.on('legendselectchanged', legendCallback);
}
};
const dispose = () => {
chartInstance?.dispose();
chartInstance = null;
};
const resize = () => {
chartInstance?.resize();
};
return { initChart, dispose, resize };
}

131
frontend/src/modules/yunXingGaoJIng/Aisbdbyx/composables/useVideoList.ts Normal file
View File

@ -0,0 +1,131 @@
import { ref } from 'vue';
import { postIdUrl } from '@/api/mapModal';
import dayjs from 'dayjs';
export interface VideoListItem {
fid: string;
media: any;
thumbUrl: string;
isVideo: boolean;
isImage: boolean;
tm: string;
ennm?: string;
[key: string]: any;
}
export function useVideoList(
fetchFn: (params: any) => Promise<any>,
baseUrl: string
) {
const page = ref(1);
const take = ref(20);
const total = ref(0);
const loading = ref(false);
const list = ref<VideoListItem[]>([]);
const activeFid = ref('');
const activeMedia = ref<{ type: string; src: string }>({ type: '', src: '' });
const fetchList = async (filter: any, options: any = {}) => {
loading.value = true;
try {
const skip = (page.value - 1) * take.value;
const params = { filter, skip, take: take.value, ...options };
const res = await fetchFn(params);
const dataObj = res?.data?.data ?? {};
const rawData = dataObj?.data || [];
total.value = dataObj?.total || 0;
const allFids: string[] = [];
rawData.forEach((item: any) => {
if (item.fid) {
item.fid.split(',').forEach((f: string) => {
const trimmed = f.trim();
if (trimmed) allFids.push(trimmed);
});
}
});
let mediaMap: Record<string, any> = {};
if (allFids.length > 0) {
const formData = new FormData();
formData.append('id', allFids.join(','));
const mediaRes: any = await postIdUrl(formData);
mediaMap = mediaRes?.data || {};
}
const flatList: VideoListItem[] = [];
rawData.forEach((item: any) => {
const fids = item.fid
? item.fid.split(',').map((f: string) => f.trim()).filter(Boolean)
: [];
const tm = item.tm ? dayjs(item.tm).format('YYYY-MM-DD HH:mm:ss') : '-';
fids.forEach((fid: string) => {
const m = mediaMap[fid];
const ext = m?.ext || '';
const isVideo = ext === '.mp4';
const isImage = ext === '.jpg' || ext === '.png';
flatList.push({
...item,
fid,
media: m || null,
thumbUrl: isImage ? baseUrl + '?' + fid + '&view=jpg' : '',
isVideo,
isImage,
tm
});
});
});
list.value = flatList;
if (list.value.length > 0 && !activeFid.value) {
selectMedia(list.value[0]);
}
} catch (error) {
console.error('获取视频列表失败:', error);
list.value = [];
} finally {
loading.value = false;
}
};
const selectMedia = (item: VideoListItem) => {
activeFid.value = item.fid;
const { isVideo, isImage } = item;
if (isImage) {
activeMedia.value = { type: 'image', src: baseUrl + '?' + item.fid + '&view=jpg' };
} else if (isVideo) {
activeMedia.value = { type: 'video', src: baseUrl + '?' + item.fid + '&view=jpg' };
} else {
activeMedia.value = { type: '', src: '' };
}
};
const handlePageChange = () => {
activeFid.value = '';
activeMedia.value = { type: '', src: '' };
};
const reset = () => {
page.value = 1;
activeFid.value = '';
activeMedia.value = { type: '', src: '' };
};
return {
page,
take,
total,
loading,
list,
activeFid,
activeMedia,
fetchList,
selectMedia,
handlePageChange,
reset
};
}

3
frontend/src/modules/yunXingGaoJIng/Aisbdbyx/index.vue
View File

@ -50,6 +50,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import AISBTK from './AISBTK.vue';
import { getAisbdbyxList } from '@/api/zngj';
import dayjs from 'dayjs';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
@ -104,7 +105,7 @@ const handleCardClick = (tabIdx: string) => {
const handleModalClose = () => {
modalVisible.value = false;
};
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// ==================== 获取卡片统计数据 ====================
const getCardData = async () => {
if (!datetimePicker.value.value || !baseid.value) return;

60
frontend/src/modules/yunXingGaoJIng/Aisbdbyx/types/index.ts Normal file
View File

@ -0,0 +1,60 @@
export enum TabType {
PFW = '1',
DLM = '2',
QP = '3'
}
export enum AiType {
PFW = 'AI_5001',
DLM = 'AI_5005',
QP = 'AI_5011'
}
export interface ChartDataItem {
name: string;
value: number;
key: string;
}
export interface VideoListItem {
fid: string;
media: any;
thumbUrl: string;
isVideo: boolean;
isImage: boolean;
tm: string;
ennm?: string;
[key: string]: any;
}
export interface CalendarDayData {
dt: string;
status?: string;
qpStatus?: string;
fid?: string;
}
export interface CalendarStatusInfo {
name: string;
className: string;
type: string;
dataType: string;
}
export interface TabItem {
key: number;
value: string;
unit: string;
count: number;
}
export interface SearchData {
baseid: string;
stnm: string;
month: any;
}
export interface DetailTabItem {
key: string;
label: string;
}

4
frontend/src/modules/zengZhiJiHuaWanChengQingKuang/index.vue
View File

@ -50,6 +50,8 @@ import {
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { MapClass } from '@/components/gis/map.class';
import ZengZhiZhanQingKuangTwoLayers from './TwoLayers/ZengZhiZhanQingKuangTwoLayers.vue';
import { useDraggable } from '@/utils/drag';
const JidiSelectEventStore = useJidiSelectEventStore();
const baseid = ref('');
@ -65,7 +67,7 @@ let chartInstance: ECharts | null = null;
// 弹窗控制
const dialogVisible = ref(false);
const dialogData = ref<any>(null);
useDraggable(dialogVisible, { boundary: true, resetOnOpen: true });
// 当前选中的站点选项
const selectedOption = computed(() => {
return select.value.options.find(

4
frontend/src/modules/zengZhiZhanJieShaoMod/index.vue
View File

@ -63,6 +63,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { msstbprptGetKendoList } from '@/api/zzfl';
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'zengZhiZhanJieShaoMod'
@ -103,7 +105,7 @@ const isHovering = ref(false);
// 是否正在切换动画中（用于禁用transition）
const isTransitioning = ref(false);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 初始化渲染数组（克隆首尾项）
const initRenderData = () => {
const length = originalMediaData.value.length;

3
frontend/src/modules/zengzhizhanjiansheyunxing/index.vue
View File

@ -60,6 +60,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { overviewGetKendoListCust } from '@/api/zzfl';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import WholeValuedStationOverviewDetail from "./WholeValuedStationOverviewDetail/index.vue"
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'zengzhizhanjiansheyunxing'
@ -68,6 +70,7 @@ const JidiSelectEventStore = useJidiSelectEventStore();
const baseid = ref('');
const loading = ref(false);
const dialogVisible = ref(false);
useDraggable(dialogVisible, { boundary: true, resetOnOpen: true });
const dialogTitle = ref('增殖站概况');
const datetimePicker = ref({
show: true,

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

@ -14,7 +14,7 @@ import { useMapConfigStore } from '@/modules/map/stores/map-config.store';
import { useMapDataStore } from '@/modules/map/stores/map-data.store';
import { 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) => {
checkKeys = normalizeCheckedLayerKeys(checkKeys);
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,130 +854,85 @@ 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;
const voidSttp = 'all';
const ylfbKeys = ['ylfb_point'];
const timeRangeLayerKeys = ['ef_point'];
const spjkz = ['stinfo_video_point'];
// 转换 params 为 filter 格式
if (matchedItem.params) {
const filtersArray: any[] = [];
for (const key in matchedItem.params) {
const value = matchedItem.params[key];
if (Array.isArray(value)) {
// 处理数组格式: { field: 'sttpCode', operator: 'eq', value: 'WQ' }
value.forEach((filter: any) => {
filtersArray.push({
...filter,
dataType: filter.dataType || 'string'
});
});
} else {
// 处理简单格式: sttpCode: 'VP'
filtersArray.push({
field: key,
operator: 'eq',
dataType: 'string',
value: value
});
}
}
requestParams = {
logic: 'and',
filters: filtersArray
};
}
let voidSttp = 'all';
const ylfbKeys = ['ylfb_point']; // 需要时间搜索的图层key
const timeRangeLayerKeys = ['ef_point']; // 需要时间搜索的图层key
const spjkz = ['stinfo_video_point'];
const lineTimeLayerKeys = [
'wt_rive_gradient_line',
'wq_rive_gradient_line'
]; // 需要时间搜索的图层key
const yearTime = dayjs().subtract(1, 'years');
let yearTime = dayjs().subtract(1, 'years'); // 鱼类分布年份
if (timeRangeLayerKeys.includes(layerKey)) {
requestParams = normalizeRequestParams(requestParams);
const anchorParamFilters = parseAnchorParamFilters(anchorParamJson);
if (anchorParamFilters.length) {
requestParams.filters.push(...anchorParamFilters);
}
if (timeRangeLayerKeys.includes(layerKey)) {
requestParams.filters.push({
field: 'tm',
operator: 'gte',
dataType: 'date',
value: dayjs(searchTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
});
requestParams.filters.push({
field: 'tm',
operator: 'lte',
dataType: 'date',
value: dayjs(searchTimeRange.value[1]).format('YYYY-MM-DD 23:59:59')
});
}
if (spjkz.includes(layerKey)) {
if (voidSttp !== 'all') {
requestParams.filters.push({
field: 'tm',
operator: 'gte',
field: 'sttp',
operator: 'in',
value: voidSttp == 'VD_EQ,VD_EQS' ? ['VD_EQ', 'VD_EQS'] : [voidSttp]
});
}
}
if (ylfbKeys.includes(layerKey)) {
if (yearTime) {
requestParams.filters.push({
field: 'startTime',
operator: 'eq',
dataType: 'date',
value: dayjs(searchTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
value: dayjs(yearTime).startOf('year').format('YYYY-MM-DD 00:00:00')
});
requestParams.filters.push({
field: 'tm',
operator: 'lte',
field: 'endTime',
operator: 'eq',
dataType: 'date',
value: dayjs(searchTimeRange.value[1]).format('YYYY-MM-DD 23:59:59')
value: dayjs(yearTime).endOf('year').format('YYYY-MM-DD 23:59:59')
});
}
if (spjkz.includes(layerKey)) {
if (voidSttp !== 'all') {
requestParams.filters.push({
field: 'sttp',
operator: 'in',
value: voidSttp == 'VD_EQ,VD_EQS' ? ['VD_EQ', 'VD_EQS'] : [voidSttp]
});
}
}
if (ylfbKeys.includes(layerKey)) {
if (yearTime) {
requestParams.filters.push({
field: 'startTime',
operator: 'eq',
dataType: 'date',
value: dayjs(yearTime).startOf('year').format('YYYY-MM-DD 00:00:00')
});
requestParams.filters.push({
field: 'endTime',
operator: 'eq',
dataType: 'date',
value: dayjs(yearTime).endOf('year').format('YYYY-MM-DD 23:59:59')
});
}
}
// 转换 orders 格式：从 JSON 字符串转换为数组格式
if (matchedItem.orders) {
try {
const ordersObj = JSON.parse(matchedItem.orders);
const ordersArray = Object.entries(ordersObj).map(([field, dir]) => ({
field,
dir
}));
requestOrders = ordersArray;
} catch (e) {
console.error('解析 orders 失败:', e);
}
}
}
// 如果没有匹配到 urlList，尝试解析 paramJson
if (layer?.orders) {
try {
const ordersObj = JSON.parse(layer.orders);
const ordersArray = Object.entries(ordersObj).map(([field, dir]) => ({
field,
dir
}));
requestOrders = ordersArray;
} catch (e) {
console.error('解析 orders 失败:', e);
}
}
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);
}

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

@ -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;

10
frontend/src/store/modules/shuJuTianBao.ts
View File

@ -27,6 +27,7 @@ export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
try {
baseLoading.value = true;
const res = await getBaseDropdown({});
// debugger
if (res.data && Array.isArray(res.data)) {
const list = [...res.data];
// 直接赋值给 ref，触发响应式更新
@ -58,10 +59,15 @@ export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
}
};
// 获取电站列表
const getEngOption = async (rvcd: string) => {
const getEngOption = async (rvcd: string, type: string) => {
try {
engLoading.value = true;
const param = rvcd === 'all' ? {} : { reachcd: rvcd };
let param:any
if (type == 'baseId') {
param = rvcd === 'all' ? {} : { baseId: rvcd };
} else {
param = rvcd === 'all' ? {} : { reachcd: rvcd };
}
const res = await getEngInfoDropdown(param);
if (res.data && Array.isArray(res.data)) {
// 直接赋值给 ref

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

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

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

@ -25,16 +25,16 @@ export const urlList = [
orders:
'{"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',

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

@ -0,0 +1,182 @@
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 => {
if (resetOnOpen) {
const modalContents = document.querySelectorAll(
modalSelector
) as NodeListOf<HTMLElement>;
modalContents.forEach(content => {
if (content.offsetParent !== null) {
content.style.position = '';
content.style.left = '';
content.style.top = '';
content.style.margin = '';
content.style.transform = '';
content.style.width = '';
}
});
}
let currentModalContent: HTMLElement | null = null;
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) => {
const target = e.target instanceof HTMLElement ? e.target : null;
const dragHandle = target?.closest(handle) as HTMLElement | null;
if (!dragHandle) return;
const modalContent = dragHandle.closest(
modalSelector
) as HTMLElement | null;
if (!modalContent) return;
if (
target.closest('.ant-modal-close') ||
target.closest('button') ||
target.closest('input') ||
target.closest('select') ||
target.closest('textarea') ||
target.closest('a')
)
return;
e.preventDefault();
isDragging = true;
currentModalContent = modalContent;
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 || !currentModalContent) return;
e.preventDefault();
const pos = getPointerPos(e);
let newLeft = pos.clientX - startX;
let newTop = pos.clientY - startY;
if (boundary) {
const maxX = window.innerWidth - currentModalContent.offsetWidth;
const maxY = window.innerHeight - currentModalContent.offsetHeight;
newLeft = Math.max(0, Math.min(newLeft, maxX));
newTop = Math.max(0, Math.min(newTop, maxY));
}
currentModalContent.style.left = `${newLeft}px`;
currentModalContent.style.top = `${newTop}px`;
};
const onPointerUp = () => {
if (!currentModalContent) return;
isDragging = false;
currentModalContent.style.userSelect = '';
currentModalContent.style.webkitUserSelect = '';
document.removeEventListener('mousemove', onPointerMove);
document.removeEventListener('mouseup', onPointerUp);
document.removeEventListener('touchmove', onPointerMove);
document.removeEventListener('touchend', onPointerUp);
currentModalContent = null;
};
document.addEventListener('mousedown', onPointerDown);
document.addEventListener('touchstart', onPointerDown, {
passive: false
});
return () => {
document.removeEventListener('mousedown', onPointerDown);
document.removeEventListener('touchstart', onPointerDown);
document.removeEventListener('mousemove', onPointerMove);
document.removeEventListener('mouseup', onPointerUp);
document.removeEventListener('touchmove', onPointerMove);
document.removeEventListener('touchend', onPointerUp);
const modalContents = document.querySelectorAll(
modalSelector
) as NodeListOf<HTMLElement>;
modalContents.forEach(content => {
content.style.position = '';
content.style.left = '';
content.style.top = '';
content.style.margin = '';
content.style.transform = '';
content.style.width = '';
content.style.userSelect = '';
content.style.webkitUserSelect = '';
});
};
};
watch(
openRef,
newVal => {
if (newVal) {
nextTick(() => {
cleanup = initDrag();
});
} else {
cleanup?.();
cleanup = null;
}
},
{ immediate: true }
);
return { initDrag };
}

Some files were not shown because too many files have changed in this diff Show More