Merge branch 'main' into dev-tw
This commit is contained in:
tangwei
commit
d88eca8b8f
@ -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'
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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 @@
|
||||
- ⚠ – 处理中 / 待解决
|
||||
- ❌ – 阻塞 / 未开始
|
||||
|
||||
***
|
||||
---
|
||||
|
||||
、
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"@wangeditor/editor": "^5.0.0",
|
||||
"@wangeditor/editor-for-vue": "^5.1.10",
|
||||
"ant-design-vue": "latest",
|
||||
"antdv-draggable-modal": "^1.1.6",
|
||||
"axios": "^1.2.0",
|
||||
"better-scroll": "^2.4.2",
|
||||
"cesium": "^1.141.0",
|
||||
@ -52,6 +53,7 @@
|
||||
"video.js": "^8.23.7",
|
||||
"videojs-contrib-hls": "^5.15.0",
|
||||
"vue": "^3.2.40",
|
||||
"vue-ant-modal-enhance": "^1.2.2",
|
||||
"vue-i18n": "^9.1.9",
|
||||
"vue-router": "^4.1.6",
|
||||
"vuedraggable": "^2.24.3",
|
||||
|
||||
@ -41,6 +41,9 @@ importers:
|
||||
ant-design-vue:
|
||||
specifier: latest
|
||||
version: 4.2.6(vue@3.5.33(typescript@6.0.3))
|
||||
antdv-draggable-modal:
|
||||
specifier: ^1.1.6
|
||||
version: 1.1.6(ant-design-vue@4.2.6(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3))
|
||||
axios:
|
||||
specifier: ^1.2.0
|
||||
version: 1.15.2
|
||||
@ -134,6 +137,9 @@ importers:
|
||||
vue:
|
||||
specifier: ^3.2.40
|
||||
version: 3.5.33(typescript@6.0.3)
|
||||
vue-ant-modal-enhance:
|
||||
specifier: ^1.2.2
|
||||
version: 1.2.2(ant-design-vue@4.2.6(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3))
|
||||
vue-i18n:
|
||||
specifier: ^9.1.9
|
||||
version: 9.14.5(vue@3.5.33(typescript@6.0.3))
|
||||
@ -2220,6 +2226,13 @@ packages:
|
||||
peerDependencies:
|
||||
vue: '>=3.2.0'
|
||||
|
||||
antdv-draggable-modal@1.1.6:
|
||||
resolution: {integrity: sha512-nGYIbkHfXBwKOtcw9lknpCdXK/Co0MpikywHREdgGI7dNm5c0zwHgolWf2XQSRvQx9sAtv2+BJYeDsJF77bncg==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
peerDependencies:
|
||||
ant-design-vue: '>=3.2.0 <4.0.0'
|
||||
vue: '>=3.2.0 <3.4.0'
|
||||
|
||||
any-promise@1.3.0:
|
||||
resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
|
||||
|
||||
@ -5360,6 +5373,12 @@ packages:
|
||||
vscode-uri@3.1.0:
|
||||
resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
|
||||
|
||||
vue-ant-modal-enhance@1.2.2:
|
||||
resolution: {integrity: sha512-gLozUM4K+pESYcV5ljsc9rAOvy94jL4fId4oNfuxu2pT/hx1HIGnQixi08yKV4FoBOwiFe4cd6dPVqCQLNAANQ==}
|
||||
peerDependencies:
|
||||
ant-design-vue: ^3.0.0 || ^4.0.0
|
||||
vue: ^3.2.0
|
||||
|
||||
vue-component-type-helpers@3.2.7:
|
||||
resolution: {integrity: sha512-+gPp5YGmhfsj1IN+xUo7y0fb4clfnOiiUA39y07yW1VzCRjzVgwLbtmdWlghh7mXrPsEaYc7rrIir/HT6C8vYQ==}
|
||||
|
||||
@ -8569,6 +8588,11 @@ snapshots:
|
||||
vue-types: 3.0.2(vue@3.5.33(typescript@6.0.3))
|
||||
warning: 4.0.3
|
||||
|
||||
antdv-draggable-modal@1.1.6(ant-design-vue@4.2.6(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3)):
|
||||
dependencies:
|
||||
ant-design-vue: 4.2.6(vue@3.5.33(typescript@6.0.3))
|
||||
vue: 3.5.33(typescript@6.0.3)
|
||||
|
||||
any-promise@1.3.0: {}
|
||||
|
||||
anymatch@3.1.3:
|
||||
@ -11975,6 +11999,11 @@ snapshots:
|
||||
|
||||
vscode-uri@3.1.0: {}
|
||||
|
||||
vue-ant-modal-enhance@1.2.2(ant-design-vue@4.2.6(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3)):
|
||||
dependencies:
|
||||
ant-design-vue: 4.2.6(vue@3.5.33(typescript@6.0.3))
|
||||
vue: 3.5.33(typescript@6.0.3)
|
||||
|
||||
vue-component-type-helpers@3.2.7: {}
|
||||
|
||||
vue-demi@0.14.10(vue@3.5.33(typescript@6.0.3)):
|
||||
|
||||
@ -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
|
||||
});
|
||||
@ -106,4 +114,4 @@ export function getBaseStbprpDataWNDR(data: any) {
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
});
|
||||
|
||||
@ -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
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import request from '@/utils/request';
|
||||
//水电基地数据获取
|
||||
//水电基地数据获取
|
||||
export function wbsbGetKendoList(data: any) {
|
||||
return request({
|
||||
url: '/env/hydrobase/wbsb/GetKendoList',
|
||||
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
@ -3,25 +3,25 @@ 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
|
||||
});
|
||||
}
|
||||
|
||||
// AI识别大坝环境-获取电站列表
|
||||
// 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
|
||||
});
|
||||
|
||||
@ -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',
|
||||
@ -34,7 +34,7 @@ export function msstbprptGetKendoList(data: any) {
|
||||
data
|
||||
});
|
||||
}
|
||||
// 增殖站运行数据统计
|
||||
// 增殖站运行数据统计
|
||||
export function qgcgetFbStaticsData(data: any) {
|
||||
return request({
|
||||
url: '/fb/station/qgc/getFbStaticsData',
|
||||
@ -73,4 +73,4 @@ export function msfbrdmGetKendoListCust(data: any) {
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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
282
frontend/src/components/FishResource/FishResourceSearch.vue
Normal 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
554
frontend/src/components/FishResource/index.vue
Normal 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>
|
||||
@ -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) {
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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');
|
||||
|
||||
|
||||
@ -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>>({});
|
||||
|
||||
@ -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<{
|
||||
|
||||
@ -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
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -128,7 +128,6 @@ watch(
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
// @ts-ignore
|
||||
window.mapClass = mapClass;
|
||||
});
|
||||
|
||||
|
||||
@ -12,8 +12,6 @@ import Stroke from 'ol/style/Stroke';
|
||||
import Icon from 'ol/style/Icon';
|
||||
import Text from 'ol/style/Text';
|
||||
import Circle from 'ol/style/Circle';
|
||||
import RegularShape from 'ol/style/RegularShape';
|
||||
import Cluster from 'ol/source/Cluster';
|
||||
import WMTS from 'ol/source/WMTS';
|
||||
import WMTSTileGrid from 'ol/tilegrid/WMTS';
|
||||
import { get as getProjection, fromLonLat } from 'ol/proj';
|
||||
@ -75,6 +73,7 @@ export class MapOl implements MapInterface {
|
||||
geoJsonData1: any = null;
|
||||
private BASEID = '';
|
||||
private currentClipGeoJson: any | null = null;
|
||||
private clipRequestController: AbortController | null = null;
|
||||
private hoveredFeatureId: string | number | null = null;
|
||||
private popupManager: PopupManager;
|
||||
private regionMaskManager: RegionMaskManager;
|
||||
@ -98,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
|
||||
@ -400,6 +400,7 @@ export class PointLayerManager {
|
||||
);
|
||||
feature.set('_baseCoordinates', coord);
|
||||
feature.set('_legendVisible', true);
|
||||
feature.set('_regionVisible', true);
|
||||
feature.set('_sttpMap', item.sttpMap);
|
||||
if (item.popupHtml) {
|
||||
feature.set('popupHtml', item.popupHtml);
|
||||
|
||||
@ -56,7 +56,6 @@ const layerConfigs = computed(() => {
|
||||
|
||||
return convertCheckedToBoolean(mapConfigStore.layerConfigTree);
|
||||
});
|
||||
|
||||
// 备注：选中图层完全以运行态 store 为唯一来源，组件不再维护额外同步状态。
|
||||
const checkedKeys = computed(() => mapViewStore.checkedLayerKeys || []);
|
||||
const tooltipVisible = ref(false);
|
||||
|
||||
@ -26,11 +26,9 @@
|
||||
<a-form-item label="" name="siteRangePicker">
|
||||
<a-range-picker
|
||||
v-model:value="searchTimeRange"
|
||||
picker="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:allow-clear="false"
|
||||
show-time
|
||||
:presets="DateSetting.RangeButton.days1"
|
||||
style="width: 100%"
|
||||
@change="triggerManualValuesChange"
|
||||
|
||||
@ -87,6 +87,7 @@ const hasEnvFac = computed(() =>
|
||||
);
|
||||
|
||||
const legendItemClick = (item: any) => {
|
||||
console.log(item);
|
||||
if (item.parentName == '环保设施') return;
|
||||
if (item.canBeChecked == 0) {
|
||||
return;
|
||||
@ -121,6 +122,7 @@ const toggleGroup = (group: any) => {
|
||||
if (leafItems.length === 0) return;
|
||||
|
||||
const hasAnyChecked = leafItems.some((item: any) => item.checked === 1);
|
||||
|
||||
const targetChecked = hasAnyChecked ? 0 : 1;
|
||||
const targetNameEns = leafItems
|
||||
.filter(
|
||||
|
||||
@ -12,7 +12,6 @@ import Antd from 'ant-design-vue';
|
||||
import 'ant-design-vue/dist/reset.css'; // Ant Design 全局样式重置
|
||||
import dayjs from 'dayjs'; // ant 中文语言
|
||||
import 'dayjs/locale/zh-cn';
|
||||
// @ts-ignore
|
||||
import 'virtual:svg-icons-register';
|
||||
// 3d地图
|
||||
import * as Cesium from 'cesium';
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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' },
|
||||
|
||||
@ -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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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[]>([]);
|
||||
|
||||
|
||||
@ -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 });
|
||||
// ==================== 图表相关 ====================
|
||||
|
||||
/**
|
||||
|
||||
@ -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所需的双线数据格式
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<template>
|
||||
<SidePanelItem
|
||||
title="典型设施介绍"
|
||||
:select="selectConfig"
|
||||
:select="selectConfig"
|
||||
@update-values="handlePanelChange"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
@ -51,9 +51,9 @@
|
||||
<a-empty v-else description="暂无数据" />
|
||||
</a-spin>
|
||||
</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;
|
||||
};
|
||||
|
||||
// 处理下拉选择变化
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!-- SidePanelItem.vue -->
|
||||
<template>
|
||||
<template>
|
||||
<SidePanelItem title="环保设施情况">
|
||||
<a-spin :spinning="loading">
|
||||
<div class="facility-grid" v-if="facilities.length > 0">
|
||||
@ -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;
|
||||
|
||||
@ -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,29 +112,27 @@ const columns = computed(() => {
|
||||
title: '所属基地',
|
||||
dataIndex: 'baseName',
|
||||
width: '150px',
|
||||
merge: true
|
||||
|
||||
merge: true
|
||||
},
|
||||
{
|
||||
key: 'stnm',
|
||||
title: '电站名称',
|
||||
dataIndex: 'stnm',
|
||||
width: '176px',
|
||||
|
||||
width: '176px'
|
||||
},
|
||||
{
|
||||
key: 'dvtp',
|
||||
title: '开发方式',
|
||||
dataIndex: 'dvtp',
|
||||
width: '120px',
|
||||
|
||||
|
||||
slots: { customRender: 'dvtp' }
|
||||
},
|
||||
{
|
||||
key: 'stindx',
|
||||
title: '生态流量站类型',
|
||||
dataIndex: 'stindx',
|
||||
|
||||
|
||||
slots: { customRender: 'stindxForEng' }
|
||||
},
|
||||
{
|
||||
@ -140,7 +147,7 @@ const columns = computed(() => {
|
||||
title: '监测状态',
|
||||
dataIndex: 'coenvwState',
|
||||
width: '120px',
|
||||
|
||||
|
||||
slots: { customRender: 'coenvwState' }
|
||||
},
|
||||
{
|
||||
@ -167,15 +174,14 @@ const columns = computed(() => {
|
||||
key: 'stnm',
|
||||
title: '测站名称',
|
||||
dataIndex: 'stnm',
|
||||
width: '176px',
|
||||
|
||||
width: '176px'
|
||||
},
|
||||
{
|
||||
key: 'ennm',
|
||||
title: '电站',
|
||||
dataIndex: 'ennm',
|
||||
width: '150px',
|
||||
|
||||
|
||||
slots: { customRender: '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>
|
||||
|
||||
@ -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
1957
frontend/src/modules/liuyu/ai/spdzwaijc/AISPTK.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
@ -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;
|
||||
|
||||
@ -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:'正常',
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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 }>()
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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>
|
||||
</style>
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:scrollY="380"
|
||||
:scrollX="100"
|
||||
|
||||
:list-url="vmsstbprptGetKendoList"
|
||||
:search-params="searchParams"
|
||||
:transform-data="customTransform"
|
||||
@ -834,8 +834,7 @@ const handleResize = () => {
|
||||
width: 35%;
|
||||
height: 482px;
|
||||
// position: relative;
|
||||
min-width: 521px;
|
||||
|
||||
|
||||
.pie-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -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', // 基荷发电 - 紫色
|
||||
|
||||
@ -676,7 +676,7 @@ onUnmounted(() => {
|
||||
.chart-section {
|
||||
width: 35%;
|
||||
height: 482px;
|
||||
min-width: 521px;
|
||||
|
||||
|
||||
.pie-chart {
|
||||
width: 100%;
|
||||
|
||||
@ -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' },
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
@ -269,7 +276,7 @@ const getData = async () => {
|
||||
// 根据API响应结构规范处理数据
|
||||
if (res.data && res.data.list) {
|
||||
const apiList = res.data.list;
|
||||
//
|
||||
//
|
||||
// 只使用前两条数据（type: 1 和 type: 2）
|
||||
if (apiList && apiList.length > 0) {
|
||||
dataArr.value = apiList.slice(0, 2).map((item: any) => ({
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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' ? '基地名称' : '调节性能',
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
// 选择器配置
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
|
||||
@ -142,4 +62,4 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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) {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
@ -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 };
|
||||
}
|
||||
@ -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
|
||||
};
|
||||
}
|
||||
@ -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
60
frontend/src/modules/yunXingGaoJIng/Aisbdbyx/types/index.ts
Normal 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;
|
||||
}
|
||||
@ -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(
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -39,3 +39,6 @@
|
||||
.ant-message {
|
||||
z-index: 2005 !important;
|
||||
}
|
||||
.ant-modal-header {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
@ -25,16 +25,16 @@ export const urlList = [
|
||||
orders:
|
||||
'{"baseId":"asc","rvcdStepSort":"asc","siteStepSort":"asc","ennm":"asc"}'
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
|
||||
title: '实际水质',
|
||||
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
|
||||
title: '目标水质',
|
||||
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
|
||||
// title: '实际水质',
|
||||
// params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
|
||||
// title: '目标水质',
|
||||
// params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/wq/anchorPoint/GetKendoListCust',
|
||||
// title: '自建站',
|
||||
@ -171,11 +171,11 @@ export const urlList = [
|
||||
title: '水电站告警情况',
|
||||
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/fb/point/discharge/GetKendoListCust',
|
||||
title: '水电站',
|
||||
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/fb/point/discharge/GetKendoListCust',
|
||||
// title: '水电站',
|
||||
// params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
// },
|
||||
{
|
||||
url: '/wmp-env-server/env/fh/zqpoint/GetKendoListCust',
|
||||
title: '国家水文站',
|
||||
@ -200,19 +200,19 @@ export const urlList = [
|
||||
title: '视频监控站',
|
||||
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/wb/point/GetKendoListCust',
|
||||
title: '气象站',
|
||||
params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/sw/getEngTempPointList/getLastData',
|
||||
title: '水温站点',
|
||||
params: {
|
||||
logic: 'and',
|
||||
filters: []
|
||||
}
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/env/wb/point/GetKendoListCust',
|
||||
// title: '气象站',
|
||||
// params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/sw/getEngTempPointList/getLastData',
|
||||
// title: '水温站点',
|
||||
// params: {
|
||||
// logic: 'and',
|
||||
// filters: []
|
||||
// }
|
||||
// },
|
||||
{
|
||||
url: '/wmp-env-server/env/wq/anchorPoint/GetKendoListCust',
|
||||
title: '水质站点',
|
||||
@ -233,38 +233,38 @@ export const urlList = [
|
||||
},
|
||||
orders: '{"orderIndex":"asc"}'
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
|
||||
title: '水质告警',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WQ' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
|
||||
title: '水温告警',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WTRV' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
|
||||
title: '水位告警',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'ENG' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/warn/stcd/operatePoint/GetKendoListCust',
|
||||
title: '环保设施告警',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
yr: dayjs().format('YYYY')
|
||||
}
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
|
||||
// title: '水质告警',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WQ' }]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
|
||||
// title: '水温告警',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WTRV' }]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
|
||||
// title: '水位告警',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'ENG' }]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/warn/stcd/operatePoint/GetKendoListCust',
|
||||
// title: '环保设施告警',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// yr: dayjs().format('YYYY')
|
||||
// }
|
||||
// },
|
||||
{
|
||||
url: '/wmp-env-server/env/fp/point/built/GetKendoListCust',
|
||||
title: '在建过鱼设施-地图锚点',
|
||||
@ -273,24 +273,24 @@ export const urlList = [
|
||||
bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
|
||||
title: '在建鱼类增殖站',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'FB' }],
|
||||
bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
|
||||
title: '在建人工产卵场',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'SG' }],
|
||||
bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
|
||||
}
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
|
||||
// title: '在建鱼类增殖站',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'FB' }],
|
||||
// bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
|
||||
// title: '在建人工产卵场',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'SG' }],
|
||||
// bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
|
||||
// }
|
||||
// },
|
||||
{
|
||||
url: '/wmp-env-server/env/fhvap/built/GetKendoListCust',
|
||||
title: '在建珍稀植物园',
|
||||
@ -309,21 +309,21 @@ export const urlList = [
|
||||
bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/eng/eq/eqds/built/GetKendoListCust',
|
||||
title: '在建生态流量泄放设施',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
BLDSTT_CCODE: [{ field: 'BLDSTT_CCODE', operator: 'eq', value: '1' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/we/fishList/point/GetKendoList',
|
||||
title: '鱼类沿程',
|
||||
params: {
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
|
||||
}
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/eng/eq/eqds/built/GetKendoListCust',
|
||||
// title: '在建生态流量泄放设施',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
|
||||
// BLDSTT_CCODE: [{ field: 'BLDSTT_CCODE', operator: 'eq', value: '1' }]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// url: '/wmp-env-server/env/we/fishList/point/GetKendoList',
|
||||
// title: '鱼类沿程',
|
||||
// params: {
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
|
||||
// }
|
||||
// },
|
||||
{
|
||||
url: '/wmp-env-server/env/wva/point/GetKendoListCust',
|
||||
title: '野生动物监测',
|
||||
@ -332,15 +332,15 @@ export const urlList = [
|
||||
sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WVA' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/wmp-env-server/env/we/fishList/point/GetNativeRareFish',
|
||||
title: '土著珍稀鱼类',
|
||||
params: {
|
||||
rare: '1',
|
||||
specOrigin: '1',
|
||||
lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
|
||||
}
|
||||
},
|
||||
// {
|
||||
// url: '/wmp-env-server/env/we/fishList/point/GetNativeRareFish',
|
||||
// title: '土著珍稀鱼类',
|
||||
// params: {
|
||||
// rare: '1',
|
||||
// specOrigin: '1',
|
||||
// lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
|
||||
// }
|
||||
// },
|
||||
// { url: '/wmp-env-server/te/tet/point/GetTerrestrialAnimal', title: '陆生动物分布', params: { baseId: window?.__lyConfigs?.baseId, lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] } },
|
||||
{
|
||||
url: '/wmp-env-server/sdFprdR/point/getFprdPointList',
|
||||
|
||||
182
frontend/src/utils/drag.ts
Normal file
182
frontend/src/utils/drag.ts
Normal 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
Loading…
Reference in New Issue
Block a user