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

Merge branch 'main' of http://121.37.111.42:3000/zhengsl/WholeProcessPlatform into main_hzz

Browse Source
This commit is contained in:
扈兆增 2026-06-08 17:02:18 +08:00
commit e2b77507fd
27 changed files with 1959 additions and 1925 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -156,11 +156,19 @@ const columnsConfig = ref([
columns: wtPointColumns columns: wtPointColumns
}, },
{ {
type: 'fh_wq_point', type: 'WTRV',
columns: wtPointColumns
},
{
type: 'WQFB',
columns: FhWpPointColumns columns: FhWpPointColumns
}, },
{ {
type: 'fh_point', type: 'WQ',
columns: FhWpPointColumns
},
{
type: 'FH',
columns: FhPointColumns columns: FhPointColumns
}, },
{ {
@ -204,7 +212,7 @@ const columnsConfig = ref([
columns: StinfoAiVidoPointColumns columns: StinfoAiVidoPointColumns
}, },
{ {
type: 'dw_point', type: 'DW_2',
columns: DwPointColumns columns: DwPointColumns
}, },
{ {

8
frontend/src/components/MapModal/components/WaterTemperatureRep.vue
View File

@ -37,16 +37,16 @@
<!-- 同期对比列的自定义渲染 --> <!-- 同期对比列的自定义渲染 -->
<template #contrast="{ record }"> <template #contrast="{ record }">
<span <span
v-if="record.wt && record.beforeWt" v-if="record.wt && record.beforeWt && !isNaN(Number(record.wt)) && !isNaN(Number(record.beforeWt))"
:style="{ :style="{
color: color:
record.wt - record.beforeWt > 0 Number(record.wt) - Number(record.beforeWt) > 0
? 'rgb(255, 85, 0)' ? 'rgb(255, 85, 0)'
: 'rgb(135, 208, 104)' : 'rgb(135, 208, 104)'
}" }"
> >
{{ record.wt - record.beforeWt > 0 ? '+' : '' {{ Number(record.wt) - Number(record.beforeWt) > 0 ? '+' : ''
}}{{ (record.wt - record.beforeWt).toFixed(2) }} }}{{ (Number(record.wt) - Number(record.beforeWt)).toFixed(2) }}
</span> </span>
<span v-else>-</span> <span v-else>-</span>
</template> </template>

111
frontend/src/components/MapModal/setting.config.ts
View File

@ -309,7 +309,7 @@ const FPTabs: Array<any> =
name: '基础信息', name: '基础信息',
key: 'basicInfo', key: 'basicInfo',
type: 'basic', type: 'basic',
url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo', url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo'
// code: 'gyss.tabs.jcxx' // code: 'gyss.tabs.jcxx'
}, },
// { // {
@ -683,15 +683,15 @@ const WQFBTabs: Array<any> = [
url: '/video/dataStcdFrame/getVideoMonitorList' url: '/video/dataStcdFrame/getVideoMonitorList'
} }
]; ];
// const WQTabs: Array<any> = [ const WQTabs: Array<any> = [
// ...WQFBTabs, ...WQFBTabs,
// { {
// name: '实时视频', name: '实时视频',
// key: 'videoInfo', key: 'videoInfo',
// type: 'video', type: 'video',
// url: '/video/dataStcdFrame/getVideoMonitorList' url: '/video/dataStcdFrame/getVideoMonitorList'
// } }
// ] ];
// const WQDTATabs: Array<any> = [ // const WQDTATabs: Array<any> = [
// { // {
// name: '基础信息', // name: '基础信息',
@ -758,20 +758,21 @@ const WTTabs: Array<any> = [
code: 'swjc.tabs.ylfzsyxfx' code: 'swjc.tabs.ylfzsyxfx'
} }
]; ];
// //垂向水温 √ //垂向水温 √
// const WTTabs1: Array<any> = [ const WTTabs1: Array<any> = [
// { {
// name: '基础信息', name: '基础信息',
// key: 'basicInfo', key: 'basicInfo',
// type: 'basic', type: 'basic',
// url: '/bbi/siteBipc/getSiteBasicInfo' url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo'
// }, },
// { {
// name: '监测数据', name: '监测数据',
// key: 'VerticalWaterTemperature', key: 'VerticalWaterTemperature',
// type: 'VerticalWaterTemperature' type: 'VerticalWaterTemperature',
// } default: true // 默认显示
// ] }
];
// //低温水减缓设施 // //低温水减缓设施
const DWTabs: Array<any> = [ const DWTabs: Array<any> = [
@ -1026,7 +1027,7 @@ const videoTabs: Array<any> = [
key: 'basicInfo', key: 'basicInfo',
type: 'basic', type: 'basic',
url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo', url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo',
default: true, // 默认显示 default: true // 默认显示
}, },
{ {
name: '实时视频', name: '实时视频',
@ -1209,17 +1210,22 @@ const handleTabs = (modaldata: any) => {
} else { } else {
return ENGTabs; return ENGTabs;
} }
case 'WT_POINT': case 'WT':
return WTTabs; case 'WTRV':
case 'FH_WQ_POINT': if (modaldata.enfc == '1') {
return WQFBTabs; return WTTabs1;
case 'FH_POINT':
if (modaldata.show) {
return FHTabs;
} else { } else {
let FHTabsTwo = FHTabs.slice(0, 1); return WTTabs;
return FHTabsTwo;
} }
case 'WQFB':
return WQFBTabs;
case 'WQ':
const _tabs = [...WQTabs];
if (modaldata?.dtinType == 2 || modaldata?.dtinType == 1)
_tabs.splice(2, 1); //国家站 人工站把视频tab去除
return _tabs;
case 'FH':
return FHTabs;
case 'FH_ZQ_POINT': case 'FH_ZQ_POINT':
return FLOWTabs; return FLOWTabs;
case 'FP_POINT': case 'FP_POINT':
@ -1240,14 +1246,14 @@ const handleTabs = (modaldata: any) => {
return DZGJ; return DZGJ;
case 'FPRD_POINT': case 'FPRD_POINT':
return DEVICETABS; return DEVICETABS;
case 'DW_POINT': // case 'DW_POINT':
return DWTabs; // return DWTabs;
case 'DW_5': // case 'DW_5':
return DEVICETABS; // return DEVICETABS;
case 'DW_6': // case 'DW_6':
return DEVICETABS; // return DEVICETABS;
case 'DW_1': // case 'DW_1':
return DEVICETABS; // return DEVICETABS;
// //
if (modaldata?.eqtp == 'QEC') { if (modaldata?.eqtp == 'QEC') {
// const { page } = Utility.parseQueryString() // const { page } = Utility.parseQueryString()
@ -1264,13 +1270,13 @@ const handleTabs = (modaldata: any) => {
// return DZGJ // return DZGJ
// case 'EQ': // case 'EQ':
// return EQTabs // return EQTabs
// case 'DW': case 'DW':
// case 'DW_1': case 'DW_1':
// case 'DW_2': case 'DW_2':
// case 'DW_3': case 'DW_3':
// case 'DW_4': case 'DW_4':
// case 'DW_5': case 'DW_5':
// return DWTabs return DWTabs;
// case 'FP': //todo，后续再删除多余代码 // case 'FP': //todo，后续再删除多余代码
// case 'FP_1': //todo，后续再删除多余代码 // case 'FP_1': //todo，后续再删除多余代码
// // case "FP_2": //todo，后续再删除多余代码 // // case "FP_2": //todo，后续再删除多余代码
@ -1364,12 +1370,7 @@ const handleTabs = (modaldata: any) => {
// return VPTabs // return VPTabs
// case 'VA': // case 'VA':
// return VATabs // return VATabs
// case 'WQFB':
// return WQFBTabs
// case 'WQ':
// const _tabs = [...WQTabs]
// if (modaldata?.dtinType == 2 || modaldata?.dtinType == 1) _tabs.splice(2, 1)//国家站 人工站把视频tab去除
// return _tabs
// case 'WQDTA': // case 'WQDTA':
// return WQDTATabs // return WQDTATabs
// case 'LL': // case 'LL':

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

@ -77,13 +77,11 @@
<div class="table-section"> <div class="table-section">
<BasicTable ref="tableRef" :scrollY="360" :columns="columns" :list-url="wqGetKendoList" <BasicTable ref="tableRef" :scrollY="360" :columns="columns" :list-url="wqGetKendoList"
:search-params="{ sort: sortConfig }" :transform-data="customTransform"> :search-params="{ sort: sortConfig }" :transform-data="customTransform">
<template #bodyCell="{ column, record }"> <template #action="{ record }">
<!-- 操作列 --> <!-- 操作列 -->
<template v-if="column.key === 'action'"> <a @click="handleViewDetail(record)" class="text-link">
<a @click="handleViewDetail(record)" class="text-link"> 查看详情
查看详情 </a>
</a>
</template>
</template> </template>
</BasicTable> </BasicTable>
</div> </div>
@ -286,7 +284,8 @@ const columns = [
title: '操作', title: '操作',
key: 'action', key: 'action',
width: 100, width: 100,
fixed: 'right' fixed: 'right',
slots: { customRender: 'action' }
} }
] ]

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

@ -491,7 +491,8 @@ const initChart = () => {
console.log('水温:', temperature); console.log('水温:', temperature);
console.log('深度:', depth); console.log('深度:', depth);
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "wt_point"; modelStore.params.sttp = "WT";
modelStore.params.enfc = '1';
modelStore.title = stnm + "详情信息"; modelStore.title = stnm + "详情信息";
// modelStore.isBasicEdit = true; // modelStore.isBasicEdit = true;
modelStore.params.stcd = stcd; modelStore.params.stcd = stcd;

37
frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue
View File

@ -47,19 +47,17 @@
:ref="(el) => setTableRef(el, item.key)" :scrollY="360" :columns="columns" :ref="(el) => setTableRef(el, item.key)" :scrollY="360" :columns="columns"
:list-url="vmsstbprptGetKendoList" :search-params="{ sort: sort }" :list-url="vmsstbprptGetKendoList" :search-params="{ sort: sort }"
:transform-data="customTransform"> :transform-data="customTransform">
<template #bodyCell="{ column, record }"> <!-- 名称列 - 可点击 -->
<!-- 名称列 - 可点击 --> <template #stnm="{ record }">
<template v-if="column.key === 'stnm'"> <a @click="handleViewDetail(record, 'DW')" class="text-link">
<a @click="handleViewDetail(record, 'DW')" class="text-link"> {{ record.stnm }}
{{ record.stnm }} </a>
</a> </template>
</template> <!-- 关联电站列 - 可点击 -->
<!-- 关联电站列 - 可点击 --> <template #ennm="{ record }">
<template v-if="column.key === 'ennm'"> <a @click="handleViewDetail(record, 'ENG')" class="text-link">
<a @click="handleViewDetail(record, 'ENG')" class="text-link"> {{ record.ennm || '-' }}
{{ record.ennm || '-' }} </a>
</a>
</template>
</template> </template>
</BasicTable> </BasicTable>
</a-tab-pane> </a-tab-pane>
@ -155,7 +153,8 @@ const columns = [
dataIndex: 'stnm', dataIndex: 'stnm',
key: 'stnm', key: 'stnm',
width: 150, width: 150,
ellipsis: true ellipsis: true,
slots: { customRender: 'ennm' }
}, },
{ {
title: '接入状态', title: '接入状态',
@ -238,7 +237,9 @@ const columns = [
dataIndex: 'ennm', dataIndex: 'ennm',
key: 'ennm', key: 'ennm',
width: 150, width: 150,
ellipsis: true ellipsis: true,
slots: { customRender: 'ennm' }
}, },
{ {
title: '关联基地', title: '关联基地',
@ -441,7 +442,7 @@ const handleSearch = () => {
const typefenbian = (type: string) => { const typefenbian = (type: string) => {
if (type == '2') { if (type == '2') {
return 'dw_point' return 'DW_2'
} else if (type == '5') { } else if (type == '5') {
return 'DW_5' return 'DW_5'
} else if (type == '6') { } else if (type == '6') {
@ -519,10 +520,10 @@ const resetSearchState = () => {
formState.hydrodtin = props.res?.hydrodtin || '' formState.hydrodtin = props.res?.hydrodtin || ''
formState.bldstt = props.res?.bldstt || '' formState.bldstt = props.res?.bldstt || ''
formState.stnm = '' formState.stnm = ''
// 重置activeTab为当前设施类型对应的key // 重置activeTab为当前设施类型对应的key
activeTab.value = currentDwtp.value activeTab.value = currentDwtp.value
// 清空表格引用 // 清空表格引用
tableRefs.value = {} tableRefs.value = {}
} }

13
frontend/src/modules/guoyujiance/components/FPVDDetailMD.vue
View File

@ -3,12 +3,10 @@
<!-- 数据表格 --> <!-- 数据表格 -->
<BasicTable ref="tableRef" :scroll-y="400" :columns="columns" :list-url="vmsstbprptGetKendoList" :search-params="{}" <BasicTable ref="tableRef" :scroll-y="400" :columns="columns" :list-url="vmsstbprptGetKendoList" :search-params="{}"
:transform-data="customTransform"> :transform-data="customTransform">
<template #bodyCell="{ column, record }"> <template #action="{ record }">
<template v-if="column.key === 'action'"> <a @click="handleViewDetail(record)" class="text-link">
<a @click="handleViewDetail(record)" class="text-link"> 查看详情
查看详情 </a>
</a>
</template>
</template> </template>
</BasicTable> </BasicTable>
</template> </template>
@ -49,7 +47,8 @@ const columns = ref([
title: '操作', title: '操作',
width: 100, width: 100,
align: 'center' as const, align: 'center' as const,
fixed: 'right' as const fixed: 'right' as const,
slots: { customRender: 'action' }
} }
]) ])
const tableRef = ref() const tableRef = ref()

599
frontend/src/modules/guoyusheshijiansheqingkuang/ModalPage/index.vue
View File

@ -1,381 +1,382 @@
<template> <template>
<div class="gyss-container"> <div class="gyss-container">
<!-- 搜索表单 --> <!-- 搜索表单 -->
<a-form layout="inline" class="search-form"> <a-form layout="inline" class="search-form">
<a-form-item label="设施类型"> <a-form-item label="设施类型">
<a-select v-model:value="filterOpts.dwtp" placeholder="请选择设施类型" style="width: 150px" <a-select v-model:value="filterOpts.dwtp" placeholder="请选择设施类型" style="width: 150px"
:options="facilityTypeOptions" /> :options="facilityTypeOptions" />
</a-form-item> </a-form-item>
<a-form-item label="所属基地"> <a-form-item label="所属基地">
<a-select v-model:value="filterOpts.baseId" placeholder="请选择所属基地" style="width: 200px" show-search <a-select v-model:value="filterOpts.baseId" placeholder="请选择所属基地" style="width: 200px" show-search
:filter-option="filterOption" :options="jdInfoOpt" /> :filter-option="filterOption" :options="jdInfoOpt" />
</a-form-item> </a-form-item>
<a-form-item label="建设状态"> <a-form-item label="建设状态">
<a-select v-model:value="filterOpts.bldstt" placeholder="请选择建设状态" style="width: 150px" <a-select v-model:value="filterOpts.bldstt" placeholder="请选择建设状态" style="width: 150px"
:options="buildStateOptions" /> :options="buildStateOptions" />
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-input v-model:value="filterOpts.searchContent" placeholder="请输入设施名称" style="width: 200px" <a-input v-model:value="filterOpts.searchContent" placeholder="请输入设施名称" style="width: 200px" allow-clear />
allow-clear /> </a-form-item>
</a-form-item> <a-form-item>
<a-form-item> <a-space>
<a-space> <a-button type="primary" @click="handleSearch">查询</a-button>
<a-button type="primary" @click="handleSearch">查询</a-button> <a-tooltip title="重置">
<a-tooltip title="重置"> <a-button @click="handleReset">重置</a-button>
<a-button @click="handleReset">重置</a-button> </a-tooltip>
</a-tooltip> <!-- TODO: 导出功能 - 需要实现 ExportBtnFile 组件 -->
<!-- TODO: 导出功能 - 需要实现 ExportBtnFile 组件 --> <!-- <ExportBtnFile
<!-- <ExportBtnFile
:table-ref="tableRef" :table-ref="tableRef"
:export-url="exportUrl" :export-url="exportUrl"
file-name="过鱼设施建设及接入情况" file-name="过鱼设施建设及接入情况"
/> --> /> -->
</a-space> </a-space>
</a-form-item> </a-form-item>
</a-form> </a-form>
<!-- 数据表格 --> <!-- 数据表格 -->
<BasicTable ref="tableRef" :scroll-y="400" :columns="columns" :list-url="vmsstbprptGetKendoList" <BasicTable ref="tableRef" :scroll-y="400" :columns="columns" :list-url="vmsstbprptGetKendoList" :enable-sort="true"
:enable-sort="true" :search-params="searchParams" :transform-data="customTransform" :search-params="searchParams" :transform-data="customTransform" @sort-change="handleSortChange">
@sort-change="handleSortChange"> <template #ennm="{ record }">
<template #bodyCell="{ column, record }"> <a @click="handleViewDetail(record, 'dz')" class="text-link">
<template v-if="column.key === 'ennm'"> {{ record.ennm }}
<a @click="handleViewDetail(record, 'dz')" class="text-link"> </a>
{{ record.ennm }} </template>
</a> <template #action="{ record }">
</template> <a @click="handleViewDetail(record, 'other')" class="text-link">
<template v-if="column.key === 'action'"> 查看详情
<a @click="handleViewDetail(record, 'other')" class="text-link"> </a>
查看详情 </template>
</a> </BasicTable>
</template> </div>
</template>
</BasicTable>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed, onMounted, nextTick } from 'vue' import { ref, computed, onMounted, nextTick } from 'vue';
import BasicTable from '@/components/BasicTable/index.vue' import BasicTable from '@/components/BasicTable/index.vue';
// TODO: API 接口 - 需要在 @/api/gyss 中实现 // TODO: API 接口 - 需要在 @/api/gyss 中实现
import { vmsstbprptGetKendoList } from '@/api/gyss' import { vmsstbprptGetKendoList } from '@/api/gyss';
import { useModelStore } from "@/store/modules/model"; import { useModelStore } from '@/store/modules/model';
const modelStore = useModelStore(); const modelStore = useModelStore();
// ==================== Props 定义 ==================== // ==================== Props 定义 ====================
const props = defineProps<{ const props = defineProps<{
data?: any data?: any;
jdId?: any jdId?: any;
jrzt?: string jrzt?: string;
}>() }>();
// ==================== 状态管理 ==================== // ==================== 状态管理 ====================
const tableRef = ref() const tableRef = ref();
const mapModal = ref(false) const mapModal = ref(false);
const modaldata = ref<any>({}) const modaldata = ref<any>({});
// 筛选条件 // 筛选条件
const filterOpts = ref({ const filterOpts = ref({
dwtp: '', // 设施类型 dwtp: '', // 设施类型
baseId: 'all', // 所属基地 baseId: 'all', // 所属基地
bldstt: '', // 建设状态 bldstt: '', // 建设状态
bonusing: '', // 接入状态（预留） bonusing: '', // 接入状态（预留）
searchContent: '' // 搜索文本 searchContent: '' // 搜索文本
}) });
// 排序状态 // 排序状态
const sortState = ref<{ field: string; order: string } | null>(null) const sortState = ref<{ field: string; order: string } | null>(null);
// ==================== 基地列表数据（硬编码）==================== // ==================== 基地列表数据（硬编码）====================
const jdInfoOpt = ref<any[]>([ const jdInfoOpt = ref<any[]>([
{ value: 'all', label: '当前全部' }, { value: 'all', label: '当前全部' },
{ value: '01', label: '金沙江干流' }, { value: '01', label: '金沙江干流' },
{ value: '02', label: '雅砻江干流' }, { value: '02', label: '雅砻江干流' },
{ value: '03', label: '大渡河干流' }, { value: '03', label: '大渡河干流' },
{ value: '04', label: '乌江干流' }, { value: '04', label: '乌江干流' },
{ value: '05', label: '长江上游干流' }, { value: '05', label: '长江上游干流' },
{ value: '10', label: '湘西' }, { value: '10', label: '湘西' },
{ value: '08', label: '黄河上游干流' }, { value: '08', label: '黄河上游干流' },
{ value: '09', label: '黄河中游干流' }, { value: '09', label: '黄河中游干流' },
{ value: '06', label: '南盘江-红水河' }, { value: '06', label: '南盘江-红水河' },
{ value: '12', label: '东北' }, { value: '12', label: '东北' },
{ value: '07', label: '澜沧江干流' }, { value: '07', label: '澜沧江干流' },
{ value: '13', label: '怒江干流' }, { value: '13', label: '怒江干流' },
{ value: '11', label: '闽浙赣' }, { value: '11', label: '闽浙赣' },
{ value: 'other', label: '其他' } { value: 'other', label: '其他' }
]) ]);
// ==================== 常量配置 ==================== // ==================== 常量配置 ====================
// 设施类型选项 // 设施类型选项
const facilityTypeOptions = [ const facilityTypeOptions = [
{ label: '全部', value: '' }, { label: '全部', value: '' },
{ label: '鱼道', value: 'FP_1' }, { label: '鱼道', value: 'FP_1' },
{ label: '集运鱼系统', value: 'FP_3' }, { label: '集运鱼系统', value: 'FP_3' },
{ label: '升鱼机', value: 'FP_4' }, { label: '升鱼机', value: 'FP_4' },
{ label: '其他', value: 'FP_5' } { label: '其他', value: 'FP_5' }
] ];
// 建设状态选项 // 建设状态选项
const buildStateOptions = [ const buildStateOptions = [
{ label: '全部', value: '' }, { label: '全部', value: '' },
{ label: '在建', value: '1' }, { label: '在建', value: '1' },
{ label: '已建', value: '2' } { label: '已建', value: '2' }
] ];
// ==================== 表格列定义 ==================== // ==================== 表格列定义 ====================
const columns = [ const columns = [
{ {
key: 'stnm', key: 'stnm',
title: '设施名称', title: '设施名称',
dataIndex: 'stnm', dataIndex: 'stnm',
width: 200, width: 200,
sorter: true, sorter: true,
ellipsis: true ellipsis: true
}, },
{ {
key: 'baseName', key: 'baseName',
title: '所在基地名称', title: '所在基地名称',
dataIndex: 'baseName', dataIndex: 'baseName',
width: 150, width: 150,
sorter: true, sorter: true,
ellipsis: true ellipsis: true
}, },
{ {
key: 'ennm', key: 'ennm',
title: '所属电站名称', title: '所属电站名称',
dataIndex: 'ennm', dataIndex: 'ennm',
width: 150, width: 150,
sorter: true, sorter: true,
ellipsis: true ellipsis: true,
}, slots: { customRender: 'ennm' }
{ },
key: 'ststdt', {
title: '开工日期', key: 'ststdt',
dataIndex: 'ststdt', title: '开工日期',
width: 120, dataIndex: 'ststdt',
sorter: true, width: 120,
ellipsis: true sorter: true,
}, ellipsis: true
{ },
key: 'jcdt', {
title: '建成日期', key: 'jcdt',
dataIndex: 'jcdt', title: '建成日期',
width: 120, dataIndex: 'jcdt',
sorter: true, width: 120,
ellipsis: true sorter: true,
}, ellipsis: true
{ },
key: 'bldsttCcodeName', {
title: '建设状态', key: 'bldsttCcodeName',
dataIndex: 'bldsttCcodeName', title: '建设状态',
width: 100, dataIndex: 'bldsttCcodeName',
sorter: true, width: 100,
ellipsis: true sorter: true,
}, ellipsis: true
{ },
key: 'dtinName', {
title: '接入状态', key: 'dtinName',
dataIndex: 'dtinName', title: '接入状态',
width: 100, dataIndex: 'dtinName',
sorter: true, width: 100,
ellipsis: true sorter: true,
}, ellipsis: true
{ },
key: 'action', {
title: '操作', key: 'action',
width: 100, title: '操作',
align: 'center' as const, width: 100,
fixed: 'right' as const align: 'center' as const,
} fixed: 'right' as const,
] slots: { customRender: 'action' }
}
];
// ==================== 计算属性 ==================== // ==================== 计算属性 ====================
// 搜索参数（包含排序） // 搜索参数（包含排序）
const searchParams = computed(() => { const searchParams = computed(() => {
const params: any = { const params: any = {
group: [], group: [],
groupResultFlat: false, groupResultFlat: false,
select: [] select: []
} };
if (sortState.value) { if (sortState.value) {
// 用户自定义排序 // 用户自定义排序
params.sort = [{ params.sort = [
field: sortState.value.field, {
dir: sortState.value.order === 'ascend' ? 'asc' : 'desc' field: sortState.value.field,
}] dir: sortState.value.order === 'ascend' ? 'asc' : 'desc'
} else { }
// 默认排序 ];
params.sort = null } else {
} // 默认排序
params.sort = null;
}
return params return params;
}) });
// ==================== 方法定义 ==================== // ==================== 方法定义 ====================
// 下拉框过滤 // 下拉框过滤
const filterOption = (input: string, option: any) => { const filterOption = (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
} };
// 构建过滤条件 // 构建过滤条件
const buildFilter = () => { const buildFilter = () => {
const filters: any[] = [ const filters: any[] = [
{
field: 'sttpFullPath',
operator: 'contains',
dataType: 'string',
value: 'ENV,ENVP,FP,FP'
},
filterOpts.value.baseId !== 'all' && {
field: 'baseId',
operator: 'eq',
dataType: 'string',
value: filterOpts.value.baseId
},
filterOpts.value.bldstt && {
field: 'bldsttCcode',
operator: 'eq',
dataType: 'string',
value: filterOpts.value.bldstt
},
filterOpts.value.searchContent && {
logic: 'or',
filters: [
{ {
field: 'sttpFullPath', field: 'stnm',
operator: 'contains', operator: 'contains',
dataType: 'string', dataType: 'string',
value: 'ENV,ENVP,FP,FP' value: filterOpts.value.searchContent
}, },
filterOpts.value.baseId !== 'all' && { {
field: 'baseId', field: 'ennm',
operator: 'eq', operator: 'contains',
dataType: 'string', dataType: 'string',
value: filterOpts.value.baseId value: filterOpts.value.searchContent
}, }
filterOpts.value.bldstt && { ]
field: 'bldsttCcode', },
operator: 'eq', filterOpts.value.dwtp && {
dataType: 'string', field: 'sttpCode',
value: filterOpts.value.bldstt operator: filterOpts.value.dwtp === 'FP_5' ? 'in' : 'eq',
}, dataType: 'string',
filterOpts.value.searchContent && { value:
logic: 'or', filterOpts.value.dwtp === 'FP_5'
filters: [ ? ['FP_5', 'FP_2']
{ : filterOpts.value.dwtp
field: 'stnm',
operator: 'contains',
dataType: 'string',
value: filterOpts.value.searchContent
},
{
field: 'ennm',
operator: 'contains',
dataType: 'string',
value: filterOpts.value.searchContent
}
]
},
filterOpts.value.dwtp && {
field: 'sttpCode',
operator: filterOpts.value.dwtp === 'FP_5' ? 'in' : 'eq',
dataType: 'string',
value: filterOpts.value.dwtp === 'FP_5' ? ['FP_5', 'FP_2'] : filterOpts.value.dwtp
},
// TODO: 接入状态筛选（当前已注释）
// filterOpts.value.bonusing && {
// field: 'dtin',
// operator: 'eq',
// dataType: 'string',
// value: filterOpts.value.bonusing
// }
].filter(Boolean)
return {
logic: 'and',
filters
} }
} // TODO: 接入状态筛选（当前已注释）
// filterOpts.value.bonusing && {
// field: 'dtin',
// operator: 'eq',
// dataType: 'string',
// value: filterOpts.value.bonusing
// }
].filter(Boolean);
return {
logic: 'and',
filters
};
};
// 处理排序变化 // 处理排序变化
const handleSortChange = (info: { field: string; order: string | null }) => { const handleSortChange = (info: { field: string; order: string | null }) => {
// debugger // debugger
if (info.field && info.order) { if (info.field && info.order) {
sortState.value = info sortState.value = info;
} else { } else {
sortState.value = null // 恢复默认排序 sortState.value = null; // 恢复默认排序
} }
nextTick(() => { nextTick(() => {
handleSearch() handleSearch();
}) });
} };
// 查询 // 查询
const handleSearch = () => { const handleSearch = () => {
console.log('【搜索】', filterOpts.value) console.log('【搜索】', filterOpts.value);
const filter = buildFilter() const filter = buildFilter();
tableRef.value?.getList(filter) tableRef.value?.getList(filter);
} };
// 重置 // 重置
const handleReset = () => { const handleReset = () => {
console.log('【重置】') console.log('【重置】');
filterOpts.value = { filterOpts.value = {
dwtp: '', dwtp: '',
baseId: 'all', baseId: 'all',
bldstt: '', bldstt: '',
bonusing: '', bonusing: '',
searchContent: '' searchContent: ''
} };
sortState.value = null // 重置排序状态 sortState.value = null; // 重置排序状态
handleSearch() handleSearch();
} };
// 查看详情 // 查看详情
const handleViewDetail = (record: any, type: string) => { const handleViewDetail = (record: any, type: string) => {
if (type === 'dz') { if (type === 'dz') {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "ENG"; modelStore.params.sttp = 'ENG';
modelStore.title = record.ennm + " 详情信息"; modelStore.title = record.ennm + ' 详情信息';
modelStore.params.stcd = record.rstcd; modelStore.params.stcd = record.rstcd;
} else { } else {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "fp_point"; modelStore.params.sttp = 'fp_point';
modelStore.title = record.stnm + "详情信息"; modelStore.title = record.stnm + '详情信息';
modelStore.params.stcd = record.stcd; modelStore.params.stcd = record.stcd;
} }
// console.log('【查看详情】', record) // console.log('【查看详情】', record)
} };
// 关闭弹窗 // 关闭弹窗
const handleCloseModal = () => { const handleCloseModal = () => {
mapModal.value = false mapModal.value = false;
modaldata.value = {} modaldata.value = {};
} };
// 自定义数据转换 // 自定义数据转换
const customTransform = (res: any) => { const customTransform = (res: any) => {
return { return {
records: res?.data?.data || [], records: res?.data?.data || [],
total: res?.data?.total || 0 total: res?.data?.total || 0
} };
} };
// ==================== 生命周期 ==================== // ==================== 生命周期 ====================
onMounted(() => { onMounted(() => {
// 基地列表已在上方硬编码定义（jdInfoOpt），无需从缓存获取 // 基地列表已在上方硬编码定义（jdInfoOpt），无需从缓存获取
filterOpts.value.dwtp = props.data.key filterOpts.value.dwtp = props.data.key;
// 初始加载数据 // 初始加载数据
handleSearch() handleSearch();
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.gyss-container { .gyss-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #ffffff; background-color: #ffffff;
padding: 16px; padding: 16px;
box-sizing: border-box; box-sizing: border-box;
.search-form { .search-form {
padding: 16px 0px; padding: 16px 0px;
} }
:deep(.ant-table-wrapper) { :deep(.ant-table-wrapper) {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
} }
.text-link { .text-link {
color: #2f6b98; color: #2f6b98;
&:hover { &:hover {
color: #40a9ff; color: #40a9ff;
} }
} }
</style> </style>

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

@ -1,73 +1,36 @@
<template> <template>
<div class="monthly-average-container"> <div class="monthly-average-container">
<!-- 搜索表单 --> <!-- 搜索表单 -->
<a-form <a-form ref="formRef" :model="formValue" layout="inline" class="search-form">
ref="formRef"
:model="formValue"
layout="inline"
class="search-form"
>
<a-form-item label="基地名称" name="dataDimensionVal"> <a-form-item label="基地名称" name="dataDimensionVal">
<a-select <a-select v-model:value="formValue.dataDimensionVal" placeholder="请选择" style="width: 200px"
v-model:value="formValue.dataDimensionVal" @change="handleBaseChange">
placeholder="请选择" <a-select-option v-for="item in jdList" :key="item.baseid" :value="item.baseid">
style="width: 200px"
@change="handleBaseChange"
>
<a-select-option
v-for="item in jdList"
:key="item.baseid"
:value="item.baseid"
>
{{ item.basename }} {{ item.basename }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="所在流域" name="rvcd"> <a-form-item label="所在流域" name="rvcd">
<a-select <a-select v-model:value="formValue.rvcd" placeholder="请选择" style="width: 200px"
v-model:value="formValue.rvcd" :disabled="!formValue.dataDimensionVal" @change="handleRvcdChange">
placeholder="请选择" <a-select-option v-for="item in lyList" :key="item.value" :value="item.value">
style="width: 200px"
:disabled="!formValue.dataDimensionVal"
@change="handleRvcdChange"
>
<a-select-option
v-for="item in lyList"
:key="item.value"
:value="item.value"
>
{{ item.label }} {{ item.label }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="断面名称" name="stcd"> <a-form-item label="断面名称" name="stcd">
<a-select <a-select v-model:value="formValue.stcd" placeholder="请选择" style="width: 200px" :disabled="!formValue.rvcd">
v-model:value="formValue.stcd" <a-select-option v-for="item in dmList" :key="item.value" :value="item.value">
placeholder="请选择"
style="width: 200px"
:disabled="!formValue.rvcd"
>
<a-select-option
v-for="item in dmList"
:key="item.value"
:value="item.value"
>
{{ item.label }} {{ item.label }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="月份" name="tm"> <a-form-item label="月份" name="tm">
<a-date-picker <a-date-picker v-model:value="formValue.tm" picker="month" :disabled-date="disabledDate" format="YYYY-MM"
v-model:value="formValue.tm" value-format="YYYY-MM-DD HH:mm:ss" :allow-clear="false" />
picker="month"
:disabled-date="disabledDate"
format="YYYY-MM"
value-format="YYYY-MM-DD HH:mm:ss"
:allow-clear="false"
/>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
@ -82,18 +45,10 @@
<div style="width: 100%; display: flex"> <div style="width: 100%; display: flex">
<!-- 图表容器：始终存在，不再使用 v-if --> <!-- 图表容器：始终存在，不再使用 v-if -->
<div class="chart-wrapper" ref="chartRef"></div> <div class="chart-wrapper" ref="chartRef"></div>
<BasicTable <BasicTable ref="tableRef" :scrollY="460" :columns="columns" :list-url="DetGetKendoListCust"
ref="tableRef" :search-params="{ sort: sort }" :transform-data="customTransform">
:scrollY="460" <template #action="{ record }">
:columns="columns" <a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
:list-url="DetGetKendoListCust"
:search-params="{ sort: sort }"
:transform-data="customTransform"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
</template>
</template> </template>
</BasicTable> </BasicTable>
</div> </div>
@ -299,10 +254,10 @@ const fetchLyData = async () => {
}, },
formValue.dataDimensionVal != 'all' formValue.dataDimensionVal != 'all'
? { ? {
field: 'fullPath', field: 'fullPath',
operator: 'startswith', operator: 'startswith',
value: formValue.dataDimensionVal value: formValue.dataDimensionVal
} }
: null : null
].filter(Boolean) ].filter(Boolean)
}, },
@ -356,15 +311,15 @@ const fetchDmData = async () => {
{ field: 'mway', operator: 'eq', value: 2 }, { field: 'mway', operator: 'eq', value: 2 },
formValue.dataDimensionVal == 'all' formValue.dataDimensionVal == 'all'
? { ? {
field: 'rvcd', field: 'rvcd',
operator: 'contains', operator: 'contains',
value: formValue.rvcd value: formValue.rvcd
} }
: { : {
field: 'baseId', field: 'baseId',
operator: 'contains', operator: 'contains',
value: formValue.dataDimensionVal value: formValue.dataDimensionVal
} }
] ]
}, },
select: ['stcd', 'stnm', 'lgtd', 'lttd', 'rstcdStepSort'], select: ['stcd', 'stnm', 'lgtd', 'lttd', 'rstcdStepSort'],
@ -802,7 +757,8 @@ const columns = [
key: 'action', key: 'action',
width: 100, width: 100,
align: 'center' as const, align: 'center' as const,
fixed: 'right' as const fixed: 'right' as const,
slots: { customRender: 'action' }
} }
]; ];
@ -859,7 +815,7 @@ const handleViewDetail = (record: any) => {
} }
}); });
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = 'wt_point'; modelStore.params.sttp = 'WT';
modelStore.title = stnm + '详情信息'; modelStore.title = stnm + '详情信息';
modelStore.params.stcd = formValue.stcd; modelStore.params.stcd = formValue.stcd;
}; };

30
frontend/src/modules/qixidibaohugongzuokaizhanQK/qixidiheduanjianceqingkuangEJ/index.vue
View File

@ -50,17 +50,15 @@
:search-params="searchParams" :search-params="searchParams"
:transform-data="customTransform" :transform-data="customTransform"
> >
<template #bodyCell="{ column, record }"> <template #ennm="{ column, record }">
<template v-if="column.key === 'ennm'"> <a @click="handleViewDetail(record, 'dz')" class="text-link">
<a @click="handleViewDetail(record, 'dz')" class="text-link"> {{ record.ennm }}
{{ record.ennm }} </a>
</a> </template>
</template> <template #action="{ column, record }">
<template v-if="column.key === 'action'"> <a @click="handleViewDetail(record, 'qxd')" class="text-link">
<a @click="handleViewDetail(record, 'qxd')" class="text-link"> 查看详情
查看详情 </a>
</a>
</template>
</template> </template>
</BasicTable> </BasicTable>
</div> </div>
@ -174,7 +172,8 @@ const columns = [
title: '所属电站', title: '所属电站',
dataIndex: 'ennm', dataIndex: 'ennm',
width: '150px', width: '150px',
sorter: true sorter: true,
slots: { customRender: 'ennm' }
}, },
{ {
key: 'fhstnm', key: 'fhstnm',
@ -237,7 +236,8 @@ const columns = [
key: 'action', key: 'action',
width: 100, width: 100,
align: 'center' as const, align: 'center' as const,
fixed: 'right' as const fixed: 'right' as const,
slots: { customRender: 'action' }
} }
]; ];
// 1. 定义排序状态 // 1. 定义排序状态
@ -412,13 +412,13 @@ const handleViewDetail = (record: any, type: any) => {
} else { } else {
if (tabIndex.value == 'FH') { if (tabIndex.value == 'FH') {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = 'fh_point'; modelStore.params.sttp = 'FH';
modelStore.title = record.stnm + ' 详情信息'; modelStore.title = record.stnm + ' 详情信息';
modelStore.params.stcd = record.stcd; modelStore.params.stcd = record.stcd;
modelStore.params.show = false; modelStore.params.show = false;
} else if (tabIndex.value == 'WTRV') { } else if (tabIndex.value == 'WTRV') {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = 'wt_point'; modelStore.params.sttp = 'WT';
modelStore.title = record.stnm + ' 详情信息'; modelStore.title = record.stnm + ' 详情信息';
modelStore.params.stcd = record.stcd; modelStore.params.stcd = record.stcd;
} else if (tabIndex.value == 'ZQ') { } else if (tabIndex.value == 'ZQ') {

794
frontend/src/modules/qixidijchuXx/index.vue
View File

@ -1,450 +1,462 @@
<!-- SidePanelItem.vue --> <!-- SidePanelItem.vue -->
<template> <template>
<SidePanelItem title="主要栖息地基本信息" :select="select" @update-values="handlePanelChange1"> <SidePanelItem
<div class="table-container"> title="主要栖息地基本信息"
<a-table :columns="columns" :data-source="tableData" :pagination="pagination" :scroll="{ y: 420 }" :select="select"
:loading="loading" size="small" @change="handleTableChange"> @update-values="handlePanelChange1"
<template #bodyCell="{ column, record }"> >
<!-- 仅栖息地列需要自定义渲染 --> <div class="table-container">
<template v-if="column.key === 'fhstnm'"> <a-table
<a-tooltip :title="record.fhstnm"> :columns="columns"
<span class="habitat-cell" @click="handleHabitatClick(record)"> :data-source="tableData"
{{ formatValue(record.fhstnm) }} :pagination="pagination"
</span> :scroll="{ y: 420 }"
</a-tooltip> :loading="loading"
</template> size="small"
<!-- 其他列统一处理空值 --> @change="handleTableChange"
<template v-else> >
<a-tooltip :title="formatValue(record[column.dataIndex])"> <template #bodyCell="{ column, record }">
<span>{{ formatValue(record[column.dataIndex]) }}</span> <!-- 仅栖息地列需要自定义渲染 -->
</a-tooltip> <template v-if="column.key === 'fhstnm'">
</template> <a-tooltip :title="record.fhstnm">
</template> <span class="habitat-cell" @click="handleHabitatClick(record)">
</a-table> {{ formatValue(record.fhstnm) }}
</div> </span>
</SidePanelItem> </a-tooltip>
</template>
<!-- 其他列统一处理空值 -->
<template v-else>
<a-tooltip :title="formatValue(record[column.dataIndex])">
<span>{{ formatValue(record[column.dataIndex]) }}</span>
</a-tooltip>
</template>
</template>
</a-table>
</div>
</SidePanelItem>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'; import { ref, onMounted, onUnmounted, watch } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue'; import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent"; import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { fhGetKendoListCustom } from '@/api/qxd'; import { fhGetKendoListCustom } from '@/api/qxd';
import { useModelStore } from "@/store/modules/model"; import { useModelStore } from '@/store/modules/model';
// 定义组件名（便于调试和递归） // 定义组件名（便于调试和递归）
defineOptions({ defineOptions({
name: 'qixidijchuXx' name: 'qixidijchuXx'
}); });
// ==================== 响应式变量定义 ==================== // ==================== 响应式变量定义 ====================
const JidiSelectEventStore = useJidiSelectEventStore(); const JidiSelectEventStore = useJidiSelectEventStore();
// ==================== 基地列表数据(硬编码) ==================== // ==================== 基地列表数据(硬编码) ====================
const jiDiList: any = ref([ const jiDiList: any = ref([
{ {
"value": "all",
"label": "当前全部",
},
{
"value": "01",
"label": "金沙江干流",
},
{
"value": "02",
"label": "雅砻江干流",
},
{
"value": "03",
"label": "大渡河干流",
},
{
"value": "04",
"label": "乌江干流",
},
{
"value": "05",
"label": "长江上游干流",
},
{
"value": "10",
"label": "湘西",
},
{
"value": "08",
"label": "黄河上游干流",
},
{
"value": "09",
"label": "黄河中游干流",
},
{
"value": "06",
"label": "南盘江-红水河",
},
{
"value": "12",
"label": "东北",
},
{
"value": "07",
"label": "澜沧江干流",
},
{
"value": "13",
"label": "怒江干流",
},
{
"value": "11",
"label": "闽浙赣",
},
{
"value": "other",
"label": "其他",
}
])
const select = ref({
show: true,
value: 'all', value: 'all',
options: jiDiList.value, label: '当前全部'
picker: undefined, },
format: undefined {
}) value: '01',
label: '金沙江干流'
},
{
value: '02',
label: '雅砻江干流'
},
{
value: '03',
label: '大渡河干流'
},
{
value: '04',
label: '乌江干流'
},
{
value: '05',
label: '长江上游干流'
},
{
value: '10',
label: '湘西'
},
{
value: '08',
label: '黄河上游干流'
},
{
value: '09',
label: '黄河中游干流'
},
{
value: '06',
label: '南盘江-红水河'
},
{
value: '12',
label: '东北'
},
{
value: '07',
label: '澜沧江干流'
},
{
value: '13',
label: '怒江干流'
},
{
value: '11',
label: '闽浙赣'
},
{
value: 'other',
label: '其他'
}
]);
const select = ref({
show: true,
value: 'all',
options: jiDiList.value,
picker: undefined,
format: undefined
});
const baseid = ref(''); const baseid = ref('');
// 加载状态 // 加载状态
const loading = ref(false); const loading = ref(false);
const modelStore = useModelStore(); const modelStore = useModelStore();
// 表格列配置 // 表格列配置
const columns = [ const columns = [
{ {
key: 'fhstnm', key: 'fhstnm',
title: '栖息地', title: '栖息地',
dataIndex: 'fhstnm', dataIndex: 'fhstnm',
width: 136, width: 136,
fixed: 'left' as const, fixed: 'left' as const,
ellipsis: true ellipsis: true
}, },
{ {
key: 'bhhl', key: 'bhhl',
title: '保护河流', title: '保护河流',
dataIndex: 'bhhl', dataIndex: 'bhhl',
width: 106, width: 106,
ellipsis: true ellipsis: true
}, },
{ {
key: 'qxdbhdx', key: 'qxdbhdx',
title: '保护对象', title: '保护对象',
dataIndex: 'qxdbhdx', dataIndex: 'qxdbhdx',
width: 96, width: 96,
ellipsis: true ellipsis: true
}, },
{ {
key: 'qxdbhcd', key: 'qxdbhcd',
title: '保护总长(km)', title: '保护总长(km)',
dataIndex: 'qxdbhcd', dataIndex: 'qxdbhcd',
width: 96, width: 96,
ellipsis: true ellipsis: true
}, },
{ {
key: 'qxdbhmj', key: 'qxdbhmj',
title: '保护面积(km²)', title: '保护面积(km²)',
dataIndex: 'qxdbhmj', dataIndex: 'qxdbhmj',
width: 96, width: 96,
ellipsis: true ellipsis: true
} }
] ];
// 分页配置 // 分页配置
const pagination = ref({ const pagination = ref({
current: 1, current: 1,
pageSize: 20, pageSize: 20,
total: 0, total: 0,
size: 'small', size: 'small',
showSizeChanger: true, showSizeChanger: true,
showQuickJumper: true, showQuickJumper: true,
showTotal: (total: number) => `共 ${total} 条`, showTotal: (total: number) => `共 ${total} 条`,
pageSizeOptions: ['10', '20', '50', '100'] pageSizeOptions: ['10', '20', '50', '100']
}) });
// 模拟数据 // 模拟数据
const tableData = ref( const tableData = ref([
[ {
{ key: '1',
key: "1", qxdbhdx: null,
qxdbhdx: null, fhstnm: '泽曲河鱼类栖息地',
fhstnm: "泽曲河鱼类栖息地", bhhl: '泽曲河',
bhhl: "泽曲河", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '2',
key: "2", qxdbhdx: null,
qxdbhdx: null, fhstnm: '黄河干流羊曲库尾河段鱼类栖息地',
fhstnm: "黄河干流羊曲库尾河段鱼类栖息地", bhhl: '黄河干流',
bhhl: "黄河干流", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '3',
key: "3", qxdbhdx: '裂腹鱼、高原鳅类、鲇类',
qxdbhdx: "裂腹鱼、高原鳅类、鲇类", fhstnm: '翠依河鱼类栖息地',
fhstnm: "翠依河鱼类栖息地", bhhl: '翠依河',
bhhl: "翠依河", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '4',
key: "4", qxdbhdx: '裂腹鱼、高原鳅类、鲇类',
qxdbhdx: "裂腹鱼、高原鳅类、鲇类", fhstnm: '金棉河鱼类栖息地',
fhstnm: "金棉河鱼类栖息地", bhhl: '金棉河',
bhhl: "金棉河", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '5',
key: "5", qxdbhdx: null,
qxdbhdx: null, fhstnm: '斜曲河口以上河段鱼类栖息地',
fhstnm: "斜曲河口以上河段鱼类栖息地", bhhl: '斜曲',
bhhl: "斜曲", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '6',
key: "6", qxdbhdx: '白鲟、达氏鲟、胭脂鱼等珍稀特有鱼类',
qxdbhdx: "白鲟、达氏鲟、胭脂鱼等珍稀特有鱼类", fhstnm: '长江上游珍稀、特有鱼类国家级自然保护区',
fhstnm: "长江上游珍稀、特有鱼类国家级自然保护区", bhhl: '金沙江下游',
bhhl: "金沙江下游", qxdbhcd: 681,
qxdbhcd: 681, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '7',
key: "7", qxdbhdx: null,
qxdbhdx: null, fhstnm: '六冲河种质资源保护区',
fhstnm: "六冲河种质资源保护区", bhhl: '六冲河、红岩河、后河、伍佐河',
bhhl: "六冲河、红岩河、后河、伍佐河", qxdbhcd: 146,
qxdbhcd: 146, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '8',
key: "8", qxdbhdx: '黄颡鱼、中华倒刺鲃、白甲鱼、鲤鱼、鲶鱼（鲇）、草鱼',
qxdbhdx: "黄颡鱼、中华倒刺鲃、白甲鱼、鲤鱼、鲶鱼（鲇）、草鱼", fhstnm: '白果树水电站坝址下游至河口段鱼类栖息地',
fhstnm: "白果树水电站坝址下游至河口段鱼类栖息地", bhhl: '乌江干流',
bhhl: "乌江干流", qxdbhcd: 13,
qxdbhcd: 13, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '9',
key: "9", qxdbhdx: null,
qxdbhdx: null, fhstnm: '红水河岩滩、大化、百龙滩、桥巩河段鱼类栖息地',
fhstnm: "红水河岩滩、大化、百龙滩、桥巩河段鱼类栖息地", bhhl: '红水河',
bhhl: "红水河", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '10',
key: "10", qxdbhdx: '长身鱖、鯮、湖南吻鮈、湘华鲮、湘江蛇鮈',
qxdbhdx: "长身鱖、鯮、湖南吻鮈、湘华鲮、湘江蛇鮈", fhstnm: '白洋河鱼类栖息地',
fhstnm: "白洋河鱼类栖息地", bhhl: '白洋河',
bhhl: "白洋河", qxdbhcd: 121,
qxdbhcd: 121, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '11',
key: "11", qxdbhdx: null,
qxdbhdx: null, fhstnm: '锡潭水电站以下河段鱼类栖息地',
fhstnm: "锡潭水电站以下河段鱼类栖息地", bhhl: '麻溪',
bhhl: "麻溪", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '12',
key: "12", qxdbhdx: null,
qxdbhdx: null, fhstnm: '西曲二级电站厂址至河口段鱼类栖息地',
fhstnm: "西曲二级电站厂址至河口段鱼类栖息地", bhhl: '西曲',
bhhl: "西曲", qxdbhcd: 23,
qxdbhcd: 23, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '13',
key: "13", qxdbhdx: null,
qxdbhdx: null, fhstnm: '落漏河、达旦河段鱼类栖息地',
fhstnm: "落漏河、达旦河段鱼类栖息地", bhhl: '支流落漏河、达旦河',
bhhl: "支流落漏河、达旦河", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '14',
key: "14", qxdbhdx: '长身鱖、鯮、湖南吻鮈、湘华鲮、湘江蛇鮈',
qxdbhdx: "长身鱖、鯮、湖南吻鮈、湘华鲮、湘江蛇鮈", fhstnm: '陬溪鱼类栖息地',
fhstnm: "陬溪鱼类栖息地", bhhl: '陬溪',
bhhl: "陬溪", qxdbhcd: 38.9,
qxdbhcd: 38.9, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '15',
key: "15", qxdbhdx: null,
qxdbhdx: null, fhstnm: '资水金塘冲至马迹塘段鱼类栖息地',
fhstnm: "资水金塘冲至马迹塘段鱼类栖息地", bhhl: '资水',
bhhl: "资水", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '16',
key: "16", qxdbhdx: null,
qxdbhdx: null, fhstnm: '西科河鱼类栖息地',
fhstnm: "西科河鱼类栖息地", bhhl: '西科河',
bhhl: "西科河", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '17',
key: "17", qxdbhdx: null,
qxdbhdx: null, fhstnm: '尕柯河鱼类栖息地',
fhstnm: "尕柯河鱼类栖息地", bhhl: '尕柯河',
bhhl: "尕柯河", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '18',
key: "18", qxdbhdx: null,
qxdbhdx: null, fhstnm: '赛欠沟鱼类栖息地',
fhstnm: "赛欠沟鱼类栖息地", bhhl: '赛欠沟',
bhhl: "赛欠沟", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '19',
key: "19", qxdbhdx: null,
qxdbhdx: null, fhstnm: '得科河鱼类栖息地',
fhstnm: "得科河鱼类栖息地", bhhl: '得科河',
bhhl: "得科河", qxdbhcd: null,
qxdbhcd: null, qxdbhmj: null
qxdbhmj: null },
}, {
{ key: '20',
key: "20", qxdbhdx: null,
qxdbhdx: null, fhstnm: '黄河班多坝下及巴沟河段鱼类栖息地',
fhstnm: "黄河班多坝下及巴沟河段鱼类栖息地", bhhl: '黄河干流、巴沟河',
bhhl: "黄河干流、巴沟河", qxdbhcd: 11,
qxdbhcd: 11, qxdbhmj: null
qxdbhmj: null }
} ]);
])
// 格式化空值显示 // 格式化空值显示
const formatValue = (value: any): string => { const formatValue = (value: any): string => {
return value === null || value === undefined || value === '' ? '-' : String(value); return value === null || value === undefined || value === ''
} ? '-'
: String(value);
};
// 点击事件处理(预留功能) // 点击事件处理(预留功能)
const handleHabitatClick = (record: any) => { const handleHabitatClick = (record: any) => {
console.log('点击栖息地:', record) console.log('点击栖息地:', record);
// TODO: 后续实现具体功能 // TODO: 后续实现具体功能
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "fh_point"; modelStore.params.sttp = 'FH';
modelStore.title = record.stnm + " 详情信息"; modelStore.title = record.stnm + ' 详情信息';
modelStore.params.stcd = record.stcd; modelStore.params.stcd = record.stcd;
modelStore.params.show = true; modelStore.params.show = true;
} };
// 分页变化处理 // 分页变化处理
const handleTableChange = (pag: any, filters: any, sorter: any) => { const handleTableChange = (pag: any, filters: any, sorter: any) => {
pagination.value.current = pag.current pagination.value.current = pag.current;
pagination.value.pageSize = pag.pageSize pagination.value.pageSize = pag.pageSize;
gettableData(baseid.value) gettableData(baseid.value);
} };
const gettableData = async (basid: any) => { const gettableData = async (basid: any) => {
loading.value = true; loading.value = true;
try { try {
let params = { let params = {
"take": pagination.value.pageSize, take: pagination.value.pageSize,
"skip": (pagination.value.current - 1) * pagination.value.pageSize, skip: (pagination.value.current - 1) * pagination.value.pageSize,
"filter": { filter: {
"logic": "and", logic: 'and',
"filters": [ filters: [
basid != 'all' ? { basid != 'all'
"field": "baseId", ? {
"operator": "eq", field: 'baseId',
"dataType": "string", operator: 'eq',
"value": basid dataType: 'string',
} : null, value: basid
].filter(Boolean), }
} : null
} ].filter(Boolean)
let res = await fhGetKendoListCustom(params) }
};
let res = await fhGetKendoListCustom(params);
// 数据处理 // 数据处理
if (res?.data) { if (res?.data) {
tableData.value = res.data.data || [] tableData.value = res.data.data || [];
pagination.value.total = res.data.total || 0 pagination.value.total = res.data.total || 0;
}
} finally {
loading.value = false;
} }
} } finally {
loading.value = false;
}
};
watch( watch(
() => JidiSelectEventStore.selectedItem, () => JidiSelectEventStore.selectedItem,
(newVal) => { newVal => {
baseid.value = newVal.wbsCode; baseid.value = newVal.wbsCode;
// 重置分页到第一页 // 重置分页到第一页
pagination.value.current = 1 pagination.value.current = 1;
gettableData(newVal.wbsCode) gettableData(newVal.wbsCode);
if (newVal.wbsCode != 'all') { if (newVal.wbsCode != 'all') {
select.value.show = false select.value.show = false;
} else { } else {
select.value.show = true select.value.show = true;
}
},
{ deep: true, immediate: true }
);
const handlePanelChange1 = async (data) => {
if (data.select) {
// 重置分页到第一页
pagination.value.current = 1
gettableData(data.select)
} }
} },
{ deep: true, immediate: true }
);
const handlePanelChange1 = async data => {
if (data.select) {
// 重置分页到第一页
pagination.value.current = 1;
gettableData(data.select);
}
};
// 页面加载时执行 // 页面加载时执行
onMounted(() => { onMounted(() => {
// 延迟初始化，确保容器已渲染 // 延迟初始化，确保容器已渲染
}); });
// 组件卸载时清理 // 组件卸载时清理
onUnmounted(() => { onUnmounted(() => {});
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.table-container { .table-container {
height: 531px; height: 531px;
:deep(.ant-table) { :deep(.ant-table) {
.ant-table-body { .ant-table-body {
max-height: 450px; max-height: 450px;
}
.ant-table-cell {
padding: 8px 12px;
}
// 表头字体加粗
.ant-table-thead>tr>th {
font-weight: 500;
}
} }
.ant-table-cell {
padding: 8px 12px;
}
// 表头字体加粗
.ant-table-thead > tr > th {
font-weight: 500;
}
}
} }
.habitat-cell { .habitat-cell {
color: #2f6b98; color: #2f6b98;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
color: #40a9ff; color: #40a9ff;
} }
} }
</style> </style>

2
frontend/src/modules/qixidishuiwenbianhua/index.vue
View File

@ -328,7 +328,7 @@ const handleDataPointClick = (params: any) => {
索引: dataIndex 索引: dataIndex
}); });
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "wt_point"; modelStore.params.sttp = "WT";
modelStore.title = '水温监测'; modelStore.title = '水温监测';
modelStore.params.stcd = dataItem.stcd; modelStore.params.stcd = dataItem.stcd;
modelStore.showStcdSelector = true modelStore.showStcdSelector = true

613
frontend/src/modules/shuiWenNianNeiFenBu/TwoLayers/yaerAverage.vue
View File

@ -1,382 +1,413 @@
<template> <template>
<div class="year-average-container"> <div class="year-average-container">
<!-- 搜索区域 --> <!-- 搜索区域 -->
<a-form ref="formRef" :model="formState" layout="inline" class="search-form"> <a-form
<a-form-item label="基地名称" name="dataDimensionVal"> ref="formRef"
<a-select v-model:value="formState.dataDimensionVal" placeholder="请选择" style="width: 200px" :model="formState"
@change="handleJdChange"> layout="inline"
<a-select-option v-for="item in jdList" :key="item.wbsCode" :value="item.wbsCode"> class="search-form"
{{ item.wbsName }} >
</a-select-option> <a-form-item label="基地名称" name="dataDimensionVal">
</a-select> <a-select
</a-form-item> v-model:value="formState.dataDimensionVal"
placeholder="请选择"
style="width: 200px"
@change="handleJdChange"
>
<a-select-option
v-for="item in jdList"
:key="item.wbsCode"
:value="item.wbsCode"
>
{{ item.wbsName }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="断面名称" name="stcd"> <a-form-item label="断面名称" name="stcd">
<a-select v-model:value="formState.stcd" placeholder="请选择" style="width: 200px" <a-select
:loading="selectLoading"> v-model:value="formState.stcd"
<a-select-option v-for="item in dmList" :key="item.value" :value="item.value"> placeholder="请选择"
{{ item.label }} style="width: 200px"
</a-select-option> :loading="selectLoading"
</a-select> >
</a-form-item> <a-select-option
v-for="item in dmList"
:key="item.value"
:value="item.value"
>
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="月份" name="tm"> <a-form-item label="月份" name="tm">
<a-date-picker v-model:value="formState.tm" picker="month" placeholder="请选择月份" style="width: 200px" <a-date-picker
format="YYYY-MM" value-format="YYYY-MM-DD HH:mm:ss" /> v-model:value="formState.tm"
</a-form-item> picker="month"
placeholder="请选择月份"
style="width: 200px"
format="YYYY-MM"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</a-form-item>
<a-form-item> <a-form-item>
<a-space> <a-space>
<a-button type="primary" @click="handleSearch">查询</a-button> <a-button type="primary" @click="handleSearch">查询</a-button>
<a-button :loading="exportLoading" @click="handleExport"> <a-button :loading="exportLoading" @click="handleExport">
导出 导出
</a-button> </a-button>
</a-space> </a-space>
</a-form-item> </a-form-item>
</a-form> </a-form>
<BasicTable ref="tableRef" :scrollY="460" :columns="columns" :list-url="yearDetailGetKendoListCust" <BasicTable
:search-params="{ sort: sort }" :transform-data="customTransform"> ref="tableRef"
<template #bodyCell="{ column, record }"> :scrollY="460"
<template v-if="column.key === 'action'"> :columns="columns"
<a @click="handleViewDetail(record)" class="text_hocer">查看详情</a> :list-url="yearDetailGetKendoListCust"
</template> :search-params="{ sort: sort }"
</template> :transform-data="customTransform"
</BasicTable> >
<template #action="{ record }">
</div> <a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
</template>
</BasicTable>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue' import { ref, reactive, computed, onMounted, watch } from 'vue';
import dayjs, { Dayjs } from 'dayjs' import dayjs, { Dayjs } from 'dayjs';
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue';
import { getVmsstbprpt, yearDetailGetKendoListCust } from '@/api/sw' import { getVmsstbprpt, yearDetailGetKendoListCust } from '@/api/sw';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent' import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import BasicTable from '@/components/BasicTable/index.vue'; import BasicTable from '@/components/BasicTable/index.vue';
import { useModelStore } from "@/store/modules/model"; import { useModelStore } from '@/store/modules/model';
const modelStore = useModelStore(); const modelStore = useModelStore();
// 类型定义 // 类型定义
interface FormState { interface FormState {
dataDimensionVal: string | number | null dataDimensionVal: string | number | null;
tm: string | Dayjs | null tm: string | Dayjs | null;
stcd: string stcd: string;
} }
interface TableFilter { interface TableFilter {
startDt: string startDt: string;
endDt: string endDt: string;
stcd: string stcd: string;
} }
// Props // Props
const props = defineProps<{ const props = defineProps<{
tm?: string tm?: string;
dataDimensionVal?: string | number dataDimensionVal?: string | number;
stcd?: string stcd?: string;
}>() }>();
// Store // Store
const jidiStore = useJidiSelectEventStore() const jidiStore = useJidiSelectEventStore();
// Refs // Refs
const tableRef = ref() const tableRef = ref();
const timeRef = ref(props.tm || '') const timeRef = ref(props.tm || '');
// State // State
const formState = reactive<FormState>({ const formState = reactive<FormState>({
dataDimensionVal: props.dataDimensionVal || '', dataDimensionVal: props.dataDimensionVal || '',
tm: props.tm ? dayjs(props.tm) : null, tm: props.tm ? dayjs(props.tm) : null,
stcd: props.stcd || '' stcd: props.stcd || ''
}) });
const sort = [ const sort = [
{ {
"field": "tm", field: 'tm',
"dir": "desc" dir: 'desc'
} }
] ];
const selectLoading = ref(false) const selectLoading = ref(false);
const exportLoading = ref(false) const exportLoading = ref(false);
const mapModalVisible = ref(false) const mapModalVisible = ref(false);
const modalData = ref<any>({}) const modalData = ref<any>({});
const dmList = ref<Array<{ label: string; value: string }>>([]) const dmList = ref<Array<{ label: string; value: string }>>([]);
const isFirstLoad = ref(true) const isFirstLoad = ref(true);
// 基地列表（从 store 获取） // 基地列表（从 store 获取）
const jdList = computed(() => { const jdList = computed(() => {
return jidiStore.jidiData || [] return jidiStore.jidiData || [];
}) });
// 表格列定义 // 表格列定义
const columns = [ const columns = [
{ {
title: '日期', title: '日期',
dataIndex: 'dt', dataIndex: 'dt',
key: 'dt', key: 'dt',
width: 120, width: 120,
customRender: ({ text }: any) => text ? dayjs(text).format('YYYY-MM-DD') : '-' customRender: ({ text }: any) =>
}, text ? dayjs(text).format('YYYY-MM-DD') : '-'
{ },
title: '日均水温(℃)实测值', {
dataIndex: 'wt', title: '日均水温(℃)实测值',
key: 'wt', dataIndex: 'wt',
width: 160 key: 'wt',
}, width: 160
{ },
title: '日均水温(℃)去年同期', {
dataIndex: 'beforeWt', title: '日均水温(℃)去年同期',
key: 'beforeWt', dataIndex: 'beforeWt',
width: 180 key: 'beforeWt',
}, width: 180
{ },
title: '天然值', {
dataIndex: 'naturalTemp', title: '天然值',
key: 'naturalTemp', dataIndex: 'naturalTemp',
width: 120, key: 'naturalTemp',
customRender: ({ text }: any) => text ? Number(text).toFixed(1) : '-' width: 120,
}, customRender: ({ text }: any) => (text ? Number(text).toFixed(1) : '-')
{ },
title: '操作', {
key: 'action', title: '操作',
width: 100, key: 'action',
align: 'center' as const, width: 100,
fixed: 'right' as const align: 'center' as const,
} fixed: 'right' as const,
] slots: { customRender: 'action' }
}
];
// API 调用函数 // API 调用函数
const getTableDataApi = async (params: any) => { const getTableDataApi = async (params: any) => {
try { try {
// const res = await yearListGetKendoListCust(requestParams)
// const res = await yearListGetKendoListCust(requestParams) } catch (error) {}
};
} catch (error) {
}
}
// 获取断面列表 // 获取断面列表
const fetchDmData = async () => { const fetchDmData = async () => {
if (!formState.dataDimensionVal) return if (!formState.dataDimensionVal) return;
try { try {
selectLoading.value = true selectLoading.value = true;
const res = await getVmsstbprpt({ const res = await getVmsstbprpt({
filter: { filter: {
logic: 'and', logic: 'and',
filters: [ filters: [
{ {
"field": "sttpFullPath", field: 'sttpFullPath',
"operator": "contains", operator: 'contains',
"value": "ENV,ENVM,WT," value: 'ENV,ENVM,WT,'
}, },
{ {
"field": "sttpCode", field: 'sttpCode',
"operator": "eq", operator: 'eq',
"value": "WTRV" value: 'WTRV'
}, },
formState.dataDimensionVal != 'all' ? { formState.dataDimensionVal != 'all'
"field": "baseId", ? {
"operator": "contains", field: 'baseId',
"value": formState.dataDimensionVal operator: 'contains',
} : null value: formState.dataDimensionVal
].filter(Boolean) }
}, : null
select: [ ].filter(Boolean)
"stcd", },
"stnm", select: [
"lgtd", 'stcd',
"lttd", 'stnm',
"baseId", 'lgtd',
"baseName", 'lttd',
"siteStepSort" 'baseId',
], 'baseName',
// sort: [{ field: 'rstcdStepSort', dir: 'desc' }] 'siteStepSort'
}) ]
// sort: [{ field: 'rstcdStepSort', dir: 'desc' }]
});
const resData = res?.data?.data || res?.data || [] const resData = res?.data?.data || res?.data || [];
if (resData.length > 0) { if (resData.length > 0) {
dmList.value = resData.map((item: any) => ({ dmList.value = resData.map((item: any) => ({
label: item.stnm, label: item.stnm,
value: item.stcd value: item.stcd
})) }));
// 如果是首次加载且有传入的 stcd，设置默认值 // 如果是首次加载且有传入的 stcd，设置默认值
if (props.stcd) { if (props.stcd) {
formState.stcd = props.stcd formState.stcd = props.stcd;
isFirstLoad.value = false isFirstLoad.value = false;
} else { } else {
// 非首次加载时，自动选择第一个 // 非首次加载时，自动选择第一个
formState.stcd = dmList.value[0].value formState.stcd = dmList.value[0].value;
} }
} else {
} else { dmList.value = [];
dmList.value = [] formState.stcd = '';
formState.stcd = ''
}
} catch (error) {
console.error('获取断面列表失败:', error)
message.error('获取断面列表失败')
} finally {
selectLoading.value = false
} }
} } catch (error) {
console.error('获取断面列表失败:', error);
message.error('获取断面列表失败');
} finally {
selectLoading.value = false;
}
};
// 基地变化处理 // 基地变化处理
const handleJdChange = (value: string) => { const handleJdChange = (value: string) => {
formState.stcd = '' formState.stcd = '';
dmList.value = [] dmList.value = [];
fetchDmData() fetchDmData();
} };
// 搜索处理 // 搜索处理
const handleSearch = async () => { const handleSearch = async () => {
const tmValue = dayjs.isDayjs(formState.tm) ? formState.tm : dayjs(formState.tm) const tmValue = dayjs.isDayjs(formState.tm)
const filter = { ? formState.tm
"logic": "and", : dayjs(formState.tm);
"filters": [ const filter = {
{ logic: 'and',
"field": "stcd", filters: [
"operator": "eq", {
"dataType": "string", field: 'stcd',
"value": formState.stcd operator: 'eq',
}, dataType: 'string',
{ value: formState.stcd
"field": "dt", },
"operator": "gte", {
"dataType": "date", field: 'dt',
value: tmValue.startOf('month').format('YYYY-MM-DD HH:mm:ss') operator: 'gte',
}, dataType: 'date',
{ value: tmValue.startOf('month').format('YYYY-MM-DD HH:mm:ss')
"field": "dt", },
"operator": "lte", {
"dataType": "date", field: 'dt',
value: tmValue.endOf('month').format('YYYY-MM-DD HH:mm:ss') operator: 'lte',
} dataType: 'date',
] value: tmValue.endOf('month').format('YYYY-MM-DD HH:mm:ss')
} }
]
// 刷新表格 };
tableRef.value?.getList(filter)
}
// 刷新表格
tableRef.value?.getList(filter);
};
// 导出处理 // 导出处理
const handleExport = async () => { const handleExport = async () => {};
}
// 查看详情 // 查看详情
const handleViewDetail = (record: any) => { const handleViewDetail = (record: any) => {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "wt_point"; modelStore.params.sttp = 'WT';
modelStore.title = record.stnm + "详情信息"; modelStore.title = record.stnm + '详情信息';
modelStore.params.stcd = record.stcd; modelStore.params.stcd = record.stcd;
} };
// 关闭弹窗 // 关闭弹窗
const handleModalClose = () => { const handleModalClose = () => {
mapModalVisible.value = false mapModalVisible.value = false;
modalData.value = {} modalData.value = {};
} };
const customTransform = (res: any) => { const customTransform = (res: any) => {
console.log('表格数据:', res); console.log('表格数据:', res);
return { return {
records: res?.data?.data || [], records: res?.data?.data || [],
total: res?.data?.total || 0 total: res?.data?.total || 0
}; };
}; };
// 监听props变化 // 监听props变化
watch( watch(
() => [props.tm, props.dataDimensionVal, props.stcd], () => [props.tm, props.dataDimensionVal, props.stcd],
async ([newTm, newDataDimensionVal, newStcd], [oldTm, oldDataDimensionVal, oldStcd]) => { async (
// 只有当值真正发生变化时才处理 [newTm, newDataDimensionVal, newStcd],
if (newTm !== oldTm || newDataDimensionVal !== oldDataDimensionVal || newStcd !== oldStcd) { [oldTm, oldDataDimensionVal, oldStcd]
// 更新formState ) => {
formState.tm = newTm ? dayjs(newTm) : null // 只有当值真正发生变化时才处理
formState.dataDimensionVal = newDataDimensionVal || '' if (
formState.stcd = String(newStcd || '') newTm !== oldTm ||
newDataDimensionVal !== oldDataDimensionVal ||
newStcd !== oldStcd
) {
// 更新formState
formState.tm = newTm ? dayjs(newTm) : null;
formState.dataDimensionVal = newDataDimensionVal || '';
formState.stcd = String(newStcd || '');
// 如果基地发生变化，需要重新获取断面列表 // 如果基地发生变化，需要重新获取断面列表
if (newDataDimensionVal !== oldDataDimensionVal && newDataDimensionVal) { if (newDataDimensionVal !== oldDataDimensionVal && newDataDimensionVal) {
await fetchDmData() await fetchDmData();
// 请求数据 // 请求数据
handleSearch() handleSearch();
} }
}
},
} { deep: true }
}, );
{ deep: true }
)
// 监听基地变化 // 监听基地变化
watch( watch(
() => formState.dataDimensionVal, () => formState.dataDimensionVal,
async (newVal) => { async newVal => {
if (newVal) { if (newVal) {
await fetchDmData() await fetchDmData();
handleSearch() handleSearch();
}
} }
) }
);
// 初始化 // 初始化
onMounted(async () => { onMounted(async () => {
if (formState.dataDimensionVal) { if (formState.dataDimensionVal) {
await fetchDmData() await fetchDmData();
handleSearch() handleSearch();
} }
}) });
// 暴露方法给父组件 // 暴露方法给父组件
defineExpose({ defineExpose({
handleSearch, handleSearch
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.year-average-container { .year-average-container {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 600px; height: 600px;
.search-form { .search-form {
// padding: 16px; // padding: 16px;
background: #fff; background: #fff;
// margin-bottom: 16px; // margin-bottom: 16px;
border-radius: 4px; border-radius: 4px;
:deep(.ant-form-item) { :deep(.ant-form-item) {
margin-bottom: 16px; margin-bottom: 16px;
}
} }
}
.table-container { .table-container {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
} }
.text-hocer { .text-hocer {
color: #2f6b98; color: #2f6b98;
&:hover { &:hover {
color: #40a9ff; color: #40a9ff;
}
} }
}
} }
.text_hocer { .text_hocer {
color: #2f6b98; color: #2f6b98;
} }
.text_hocer:hover { .text_hocer:hover {
color: #40a9ff; color: #40a9ff;
} }
</style> </style>

29
frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue
View File

@ -9,25 +9,11 @@
<div class="search-form"> <div class="search-form">
<a-space size="middle"> <a-space size="middle">
<div>选择水电站:</div> <div>选择水电站:</div>
<a-select <a-select v-model:value="searchData.stcd.dataDimensionData" placeholder="请选择水电站" style="width: 200px"
v-model:value="searchData.stcd.dataDimensionData" show-search :filter-option="filterOption" :options="hydropowerStationOptions"
placeholder="请选择水电站" @change="handleHydropowerStationChange" />
style="width: 200px" <a-select v-model:value="searchData.stnm" placeholder=" " style="width: 200px" allow-clear show-search
show-search :filter-option="filterOption" :options="stationOptions" @change="handleStationChange" />
:filter-option="filterOption"
:options="hydropowerStationOptions"
@change="handleHydropowerStationChange"
/>
<a-select
v-model:value="searchData.stnm"
placeholder=" "
style="width: 200px"
allow-clear
show-search
:filter-option="filterOption"
:options="stationOptions"
@change="handleStationChange"
/>
<a-button type="primary" @click="handleSearch">查询</a-button> <a-button type="primary" @click="handleSearch">查询</a-button>
<a-tooltip title="重置"> <a-tooltip title="重置">
@ -531,9 +517,12 @@ const handleTableChange = (pag: any) => {
const handleViewDetail = (record: any) => { const handleViewDetail = (record: any) => {
if (record) { if (record) {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "wt_point"; modelStore.params.sttp = "WT";
modelStore.title = record.stnm + "详情信息"; modelStore.title = record.stnm + "详情信息";
// modelStore.isBasicEdit = true; // modelStore.isBasicEdit = true;
if (tabIndex.value == "27") {
modelStore.params.enfc = "1";
}
modelStore.params.stcd = record.stcd; modelStore.params.stcd = record.stcd;
} }

2
frontend/src/modules/shuizhijiancegongzuoQK/shuiwenjiancegongzuoEJ.vue
View File

@ -586,7 +586,7 @@ const handleTableChange = (pag: any) => {
const handleViewDetail = (record: any) => { const handleViewDetail = (record: any) => {
if (record) { if (record) {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "fh_wq_point"; modelStore.params.sttp = "WQFB";
modelStore.title = record.stnm + "详情信息"; modelStore.title = record.stnm + "详情信息";
// modelStore.isBasicEdit = true; // modelStore.isBasicEdit = true;
modelStore.params.stcd = record.stcd; modelStore.params.stcd = record.stcd;

2
frontend/src/modules/waterQuality/index.vue
View File

@ -723,7 +723,7 @@ const handleDataPointClick = (params: any) => {
if (stationData && stationData.stcd) { if (stationData && stationData.stcd) {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "fh_wq_point"; modelStore.params.sttp = "WQFB";
modelStore.title = stationData.stnm + "详情信息"; modelStore.title = stationData.stnm + "详情信息";
// modelStore.isBasicEdit = true; // modelStore.isBasicEdit = true;
modelStore.params.stcd = stationData.stcd; modelStore.params.stcd = stationData.stcd;

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

@ -325,7 +325,7 @@ const initChart = () => {
console.log('stnm:', params.data.stnm); console.log('stnm:', params.data.stnm);
console.log('temperature:', params.data.value); console.log('temperature:', params.data.value);
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "wt_point"; modelStore.params.sttp = "WT";
modelStore.title = params.data.stnm + "详情信息"; modelStore.title = params.data.stnm + "详情信息";
// modelStore.isBasicEdit = true; // modelStore.isBasicEdit = true;
modelStore.params.stcd = params.data.stcd; modelStore.params.stcd = params.data.stcd;

4
frontend/src/store/modules/model.ts
View File

@ -15,11 +15,13 @@ export const useModelStore = defineStore('model', () => {
stcd: any; stcd: any;
date: any; date: any;
show: any; show: any;
enfc:any;
}>({ }>({
sttp: 'eng', sttp: 'eng',
stcd: '', stcd: '',
date: '', date: '',
show: true show: true,
enfc:'0',
}); });
return { return {
params, params,

8
frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
View File

@ -33,19 +33,19 @@ const showMapModal = () => {
}; };
const showMapModal1 = () => { const showMapModal1 = () => {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "wt_point"; modelStore.params.sttp = "WT";
modelStore.title = "水温 详情信息"; modelStore.title = "水温 详情信息";
modelStore.isBasicEdit = true; modelStore.isBasicEdit = true;
}; };
const showMapModal2 = () => { const showMapModal2 = () => {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "fh_wq_point"; modelStore.params.sttp = "WQFB";
modelStore.title = "水质 详情信息"; modelStore.title = "水质 详情信息";
modelStore.isBasicEdit = true; modelStore.isBasicEdit = true;
}; };
const showMapModal3 = () => { const showMapModal3 = () => {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "fh_point"; modelStore.params.sttp = "FH";
modelStore.title = "栖息地 详情信息"; modelStore.title = "栖息地 详情信息";
modelStore.isBasicEdit = true; modelStore.isBasicEdit = true;
};// };//
@ -112,7 +112,7 @@ const showMapModal13 = () => {
}; };
const showMapModal14 = () => { const showMapModal14 = () => {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = "dw_point"; modelStore.params.sttp = "DW_2";
modelStore.title = "低温水减缓设施-叠梁门 详情信息"; modelStore.title = "低温水减缓设施-叠梁门 详情信息";
modelStore.isBasicEdit = true; modelStore.isBasicEdit = true;
}; };

31
frontend/src/views/shuJuTianBao/guoYuSheShiShuJuHistory/index.vue
View File

@ -16,16 +16,12 @@
:search-params="{}" :search-params="{}"
:transform-data="customTransform" :transform-data="customTransform"
> >
<template #bodyCell="{ column, record }"> <template #action="{ record }">
<template <div class="flex">
v-if="column.key === 'action' || column.dataIndex === 'action'" <a-button type="link" size="small" @click="handleView(record)"
> >查看</a-button
<div class="flex"> >
<a-button type="link" size="small" @click="handleView(record)" </div>
>查看</a-button
>
</div>
</template>
</template> </template>
</BasicTable> </BasicTable>
<!-- 预览媒体组件 --> <!-- 预览媒体组件 -->
@ -196,7 +192,8 @@ const columns = computed(() => {
dataIndex: 'action', dataIndex: 'action',
fixed: 'right', fixed: 'right',
width: 100, width: 100,
align: 'center' align: 'center',
slots: { customRender: 'action' }
} }
]; ];
}); });
@ -308,12 +305,12 @@ const handleSearchFinish = (values: any) => {
dataType: 'string', dataType: 'string',
value: values.rstcd value: values.rstcd
}, },
values.rvcd !== "all" && { values.rvcd !== 'all' && {
field: "rvcd", field: 'rvcd',
operator: "eq", operator: 'eq',
dataType: "string", dataType: 'string',
value: values.rvcd, value: values.rvcd
}, }
].filter(Boolean); ].filter(Boolean);
const filter = { const filter = {

157
frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
View File

@ -27,78 +27,72 @@
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<!-- 使用 bodyCell 插槽自定义单元格渲染 --> <!-- 使用 bodyCell 插槽自定义单元格渲染 -->
<template #bodyCell="{ column, record }"> <template #action="{ column, record }">
<template <div class="flex">
v-if="column.key === 'action' || column.dataIndex === 'action'" <a-button
> v-hasPerm="['sjtb:import-add']"
<div class="flex"> type="link"
<a-button size="small"
v-hasPerm="['sjtb:import-add']" @click="handleSubmit([record.id])"
type="link" v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
size="small" >提交</a-button
@click="handleSubmit([record.id])" >
v-if="record.status === 'DRAFT' || record.status === 'REJECTED'" <a-button
>提交</a-button v-hasPerm="['sjtb:import-add']"
> type="link"
<a-button size="small"
v-hasPerm="['sjtb:import-add']" @click="handleEdit(record, 'edit')"
type="link" v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
size="small" >编辑</a-button
@click="handleEdit(record, 'edit')" >
v-if="record.status === 'DRAFT' || record.status === 'REJECTED'" <a-button
>编辑</a-button v-hasPerm="['sjtb:edit-review']"
> type="link"
<a-button size="small"
v-hasPerm="['sjtb:edit-review']" @click="handleEdit(record, 'edit')"
type="link" v-if="record.status === 'PENDING'"
size="small" >编辑</a-button
@click="handleEdit(record, 'edit')" >
v-if="record.status === 'PENDING'" <a-button
>编辑</a-button v-hasPerm="['sjtb:import-add']"
> type="link"
<a-button danger
v-hasPerm="['sjtb:import-add']" size="small"
type="link" @click="handleDelete([record.id])"
danger v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
size="small" >删除</a-button
@click="handleDelete([record.id])" >
v-if="record.status === 'DRAFT' || record.status === 'REJECTED'" <a-button
>删除</a-button type="link"
> size="small"
<a-button @click="handleEdit(record, 'view')"
type="link" v-if="
size="small" (checkPerm(['sjtb:edit-review']) && record.status === 'DRAFT') ||
@click="handleEdit(record, 'view')" (checkPerm(['sjtb:import-add']) && record.status === 'PENDING') ||
v-if=" (checkPerm(['sjtb:edit-review']) &&
(checkPerm(['sjtb:edit-review']) && record.status === 'REJECTED') ||
record.status === 'DRAFT') || record.status === 'APPROVED'
(checkPerm(['sjtb:import-add']) && "
record.status === 'PENDING') || >查看</a-button
(checkPerm(['sjtb:edit-review']) && >
record.status === 'REJECTED') || <a-button
record.status === 'APPROVED' v-hasPerm="['sjtb:edit-review']"
" type="link"
>查看</a-button size="small"
> @click="handleSuccess([record.id])"
<a-button v-if="record.status === 'PENDING'"
v-hasPerm="['sjtb:edit-review']" >审批</a-button
type="link" >
size="small" <a-button
@click="handleSuccess([record.id])" v-hasPerm="['sjtb:edit-review']"
v-if="record.status === 'PENDING'" type="link"
>审批</a-button danger
> size="small"
<a-button @click="handleReject(record.id)"
v-hasPerm="['sjtb:edit-review']" v-if="record.status === 'PENDING'"
type="link" >驳回</a-button
danger >
size="small" </div>
@click="handleReject(record.id)"
v-if="record.status === 'PENDING'"
>驳回</a-button
>
</div>
</template>
</template> </template>
</BasicTable> </BasicTable>
<div class="buttonStyle"> <div class="buttonStyle">
@ -388,7 +382,8 @@ const columns = computed(() => {
dataIndex: 'action', dataIndex: 'action',
fixed: 'right', fixed: 'right',
width: 200, width: 200,
align: 'center' align: 'center',
slots: { customRender: 'action' }
} }
]; ];
}); });
@ -613,8 +608,8 @@ const handleModalOk = () => {
// message.warning("请检查流域，流域填写有误！"); // message.warning("请检查流域，流域填写有误！");
// return; // return;
// } // }
if (fileTableData.value[i].warnings.includes("rvcd")) { if (fileTableData.value[i].warnings.includes('rvcd')) {
message.warning("请检查流域，流域填写有误！"); message.warning('请检查流域，流域填写有误！');
return; return;
} }
if (fileTableData.value[i].warnings.includes('rstcd')) { if (fileTableData.value[i].warnings.includes('rstcd')) {
@ -880,12 +875,12 @@ const handleSearchFinish = (values: any) => {
dataType: 'string', dataType: 'string',
value: values.rstcd value: values.rstcd
}, },
values.rvcd !== "all" && { values.rvcd !== 'all' && {
field: "rvcd", field: 'rvcd',
operator: "eq", operator: 'eq',
dataType: "string", dataType: 'string',
value: values.rvcd, value: values.rvcd
}, }
// values.baseId !== "all" && { // values.baseId !== "all" && {
// field: "baseId", // field: "baseId",
// operator: "eq", // operator: "eq",

183
frontend/src/views/system/map/components/ConfigManagement/index.vue
View File

@ -13,22 +13,24 @@
:list-url="getAllConfigTree" :list-url="getAllConfigTree"
:search-params="searchParams" :search-params="searchParams"
> >
<template #bodyCell="{ column, record }"> <template #action="{ column, record }">
<template v-if="column.key === 'action'"> <div class="flex gap-[6px]">
<div class="flex gap-[6px]"> <a-button
<a-button class="!p-0" type="link" size="small" @click="handleEdit(record)" class="!p-0"
>编辑</a-button type="link"
> size="small"
<a-button @click="handleEdit(record)"
class="!p-0" >编辑</a-button
type="link" >
size="small" <a-button
danger class="!p-0"
@click="handleDelete(record)" type="link"
>删除</a-button size="small"
> danger
</div> @click="handleDelete(record)"
</template> >删除</a-button
>
</div>
</template> </template>
</BasicTable> </BasicTable>
<ConfigManagementForm <ConfigManagementForm
@ -42,76 +44,77 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, nextTick, onMounted } from "vue"; import { ref, nextTick, onMounted } from 'vue';
import BasicTable from "@/components/BasicTable/index.vue"; import BasicTable from '@/components/BasicTable/index.vue';
import ConfigManagementSearch from "./ConfigManagementSearch.vue"; import ConfigManagementSearch from './ConfigManagementSearch.vue';
import ConfigManagementForm from "./ConfigManagementForm.vue"; import ConfigManagementForm from './ConfigManagementForm.vue';
import { message, Modal } from "ant-design-vue"; import { message, Modal } from 'ant-design-vue';
import { import {
getAllConfigTree, getAllConfigTree,
deleteBaseWbsb, deleteBaseWbsb,
saveBaseWbsb, saveBaseWbsb
} from "@/api/system/map/ConfigManagement"; } from '@/api/system/map/ConfigManagement';
// 表格实例 // 表格实例
const basicTable = ref<any>(null); const basicTable = ref<any>(null);
// 表格列配置 // 表格列配置
const columns = [ const columns = [
{ {
title: "序号", title: '序号',
dataIndex: "index", dataIndex: 'index',
key: "index", key: 'index',
width: 60, width: 60,
align: "center", align: 'center',
customRender: ({ text, record, index }) => index + 1, customRender: ({ text, record, index }) => index + 1
}, },
{ {
title: "沿程配置名称", title: '沿程配置名称',
dataIndex: "name", dataIndex: 'name',
key: "name", key: 'name',
width: 150, width: 150
}, },
{ {
title: "配置编码", title: '配置编码',
key: "code", key: 'code',
dataIndex: "code", dataIndex: 'code',
width: 120
},
{
title: '所在河段',
dataIndex: 'rvnm',
key: 'rvnm',
ellipsis: true
},
{
title: '创建人',
key: 'recordUser',
dataIndex: 'recordUser'
},
{
title: '创建时间',
key: 'recordTime',
dataIndex: 'recordTime',
width: 150
},
{
title: '更新时间',
key: 'modifyTime',
dataIndex: 'modifyTime',
width: 150
},
{
title: '备注',
dataIndex: 'remark',
key: 'remark',
width: 360
},
{
title: '操作',
key: 'action',
width: 120, width: 120,
}, fixed: 'right',
{ slots: { customRender: 'action' }
title: "所在河段", }
dataIndex: "rvnm",
key: "rvnm",
ellipsis: true,
},
{
title: "创建人",
key: "recordUser",
dataIndex: "recordUser",
},
{
title: "创建时间",
key: "recordTime",
dataIndex: "recordTime",
width: 150,
},
{
title: "更新时间",
key: "modifyTime",
dataIndex: "modifyTime",
width: 150,
},
{
title: "备注",
dataIndex: "remark",
key: "remark",
width: 360,
},
{
title: "操作",
key: "action",
width: 120,
fixed: "right",
},
]; ];
// 搜索参数 // 搜索参数
@ -135,44 +138,44 @@ const handleEdit = (record: any) => {
// 删除处理 // 删除处理
const handleDelete = (record: any) => { const handleDelete = (record: any) => {
Modal.confirm({ Modal.confirm({
title: "确认删除", title: '确认删除',
content: "确定要删除选中的记录吗？", content: '确定要删除选中的记录吗？',
zIndex: 2002, zIndex: 2002,
onOk: async () => { onOk: async () => {
try { try {
let res = await deleteBaseWbsb([record.id]); let res = await deleteBaseWbsb([record.id]);
message.success("删除成功"); message.success('删除成功');
basicTable.value.refresh(); basicTable.value.refresh();
} catch (error) { } catch (error) {
message.error("删除失败"); message.error('删除失败');
return; return;
} }
}, }
}); });
}; };
// 搜索完成处理 // 搜索完成处理
const onSearchFinish = (values: any) => { const onSearchFinish = (values: any) => {
const params = { const params = {
logic: "and", logic: 'and',
filters: [ filters: [
values.parentId values.parentId
? { ? {
field: "parentId", field: 'parentId',
operator: "eq", operator: 'eq',
dataType: "string", dataType: 'string',
value: values.parentId, value: values.parentId
} }
: null, : null,
values.name values.name
? { ? {
field: "name", field: 'name',
operator: "contains", operator: 'contains',
dataType: "string", dataType: 'string',
value: values.name, value: values.name
} }
: null, : null
].filter(Boolean), ].filter(Boolean)
}; };
basicTable.value.getList(params); basicTable.value.getList(params);
}; };
@ -180,8 +183,8 @@ const onSearchFinish = (values: any) => {
// 重置 // 重置
const handleReset = () => { const handleReset = () => {
basicTable.value.getList({ basicTable.value.getList({
logic: "and", logic: 'and',
filters: [], filters: []
}); });
}; };
@ -196,7 +199,7 @@ const handleEditSubmit = async (values: any) => {
try { try {
let res = await saveBaseWbsb({ let res = await saveBaseWbsb({
...currentRecord.value, ...currentRecord.value,
...values, ...values
}); });
message.success(`保存成功`); message.success(`保存成功`);

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

@ -13,45 +13,51 @@
:list-url="getAllMapLayerTree" :list-url="getAllMapLayerTree"
:search-params="searchParams" :search-params="searchParams"
> >
<template #bodyCell="{ column, record }"> <template #action="{ column, record }">
<template v-if="column.key === 'action'"> <div class="flex gap-[6px]">
<div class="flex gap-[6px]"> <a-button
<a-button class="!p-0" type="link" size="small" @click="handleEdit(record)" class="!p-0"
>编辑</a-button type="link"
> size="small"
<a-button @click="handleEdit(record)"
v-if="record.children.length == 0" >编辑</a-button
class="!p-0" >
type="link" <a-button
size="small" v-if="record.children.length == 0"
@click="handleEditInterface(record)" class="!p-0"
>编辑接口</a-button type="link"
> size="small"
<a-button class="!p-0" type="link" size="small" @click="handleAdd(record)" @click="handleEditInterface(record)"
>新增子图层</a-button >编辑接口</a-button
> >
<a-button <a-button
class="!p-0" class="!p-0"
type="link" type="link"
size="small" size="small"
danger @click="handleAdd(record)"
@click="handleDelete(record)" >新增子图层</a-button
>删除</a-button >
> <a-button
</div> class="!p-0"
</template> type="link"
<template v-if="column.key === 'enable'"> size="small"
<a-switch danger
:checked="record.enable === 1" @click="handleDelete(record)"
@change="(checked: boolean) => handleEnableChange(record, checked)" >删除</a-button
/> >
</template> </div>
<template v-if="column.key === 'checkable'"> </template>
<a-switch <template #enable="{ column, record }">
:checked="record.checkable === 1" <a-switch
@change="(checked: boolean) => handleCheckableChange(record, checked)" :checked="record.enable === 1"
/> @change="(checked: boolean) => handleEnableChange(record, checked)"
</template> />
</template>
<template #checkable="{ column, record }">
<a-switch
:checked="record.checkable === 1"
@change="(checked: boolean) => handleCheckableChange(record, checked)"
/>
</template> </template>
</BasicTable> </BasicTable>
<LayerManagementForm <LayerManagementForm
@ -66,29 +72,29 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, nextTick } from "vue"; import { ref, nextTick } from 'vue';
import BasicTable from "@/components/BasicTable/index.vue"; import BasicTable from '@/components/BasicTable/index.vue';
import LayerManagementSearch from "./LayerManagementSearch.vue"; import LayerManagementSearch from './LayerManagementSearch.vue';
import LayerManagementForm from "./LayerManagementForm.vue"; import LayerManagementForm from './LayerManagementForm.vue';
import { message, Modal } from "ant-design-vue"; import { message, Modal } from 'ant-design-vue';
import { import {
getAllMapLayerTree, getAllMapLayerTree,
saveMapLayer, saveMapLayer,
deleteMapLayer, deleteMapLayer
} from "@/api/system/map/LayerManagement"; } from '@/api/system/map/LayerManagement';
// 表格列配置 // 表格列配置
const columns = [ const columns = [
{ {
title: "", title: '',
dataIndex: "", dataIndex: '',
key: "", key: '',
width: 20, width: 20
}, },
{ {
title: "序号", title: '序号',
key: "index", key: 'index',
width: 60, width: 60,
align: "center", align: 'center',
customRender: ({ record, index }: any) => { customRender: ({ record, index }: any) => {
// 对于树形结构，计算当前记录在其父节点的 children 中的位置 // 对于树形结构，计算当前记录在其父节点的 children 中的位置
// 如果没有 parentId，说明是根节点，需要计算在所有根节点中的序号 // 如果没有 parentId，说明是根节点，需要计算在所有根节点中的序号
@ -118,7 +124,8 @@ const columns = [
// 找到父节点，在其 children 中查找当前记录的位置 // 找到父节点，在其 children 中查找当前记录的位置
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
const childIndex = item.children.findIndex( const childIndex = item.children.findIndex(
(child: any) => child.key === record.key || child.id === record.id (child: any) =>
child.key === record.key || child.id === record.id
); );
return childIndex + 1; return childIndex + 1;
} }
@ -135,66 +142,69 @@ const columns = [
}; };
return findParentAndIndex(basicTable.value.tableData, record.parentId); return findParentAndIndex(basicTable.value.tableData, record.parentId);
} }
}, }
}, },
{ {
title: "图层名称", title: '图层名称',
dataIndex: "title", dataIndex: 'title',
key: "title", key: 'title',
width: 150, width: 150
}, },
{ {
title: "图层编码", title: '图层编码',
dataIndex: "code", dataIndex: 'code',
key: "code", key: 'code',
width: 120, width: 120
}, },
{ {
title: "标签显示级别", title: '标签显示级别',
dataIndex: "treeLevel", dataIndex: 'treeLevel',
key: "treeLevel", key: 'treeLevel',
width: 100, width: 100
}, },
{ {
title: "是否启用", title: '是否启用',
dataIndex: "enable", dataIndex: 'enable',
key: "enable", key: 'enable',
width: 80, width: 80,
slots: { customRender: 'enable' }
}, },
{ {
title: "是否可选", title: '是否可选',
dataIndex: "checkable", dataIndex: 'checkable',
key: "checkable", key: 'checkable',
width: 80, width: 80,
slots: { customRender: 'checkable' }
}, },
{ {
title: "备注", title: '备注',
dataIndex: "description", dataIndex: 'description',
key: "description", key: 'description'
}, },
{ {
title: "创建人", title: '创建人',
key: "displayRecordUser", key: 'displayRecordUser',
dataIndex: "displayRecordUser", dataIndex: 'displayRecordUser'
}, },
{ {
title: "创建时间", title: '创建时间',
key: "recordTime", key: 'recordTime',
dataIndex: "recordTime", dataIndex: 'recordTime',
width: 150, width: 150
}, },
{ {
title: "更新时间", title: '更新时间',
key: "modifyTime", key: 'modifyTime',
dataIndex: "modifyTime", dataIndex: 'modifyTime',
width: 150, width: 150
}, },
{ {
title: "操作", title: '操作',
key: "action", key: 'action',
width: 220, width: 220,
fixed: "right", fixed: 'right',
}, slots: { customRender: 'action' }
}
]; ];
// 表格实例 // 表格实例
const basicTable = ref<any>(null); const basicTable = ref<any>(null);
@ -229,19 +239,19 @@ const handleEditInterface = (record: any) => {
// 删除处理 // 删除处理
const handleDelete = async (record: any) => { const handleDelete = async (record: any) => {
Modal.confirm({ Modal.confirm({
title: "确认删除", title: '确认删除',
content: "确定要删除选中的记录吗？", content: '确定要删除选中的记录吗？',
zIndex: 2002, zIndex: 2002,
onOk: async () => { onOk: async () => {
try { try {
let res = await deleteMapLayer([record.id]); let res = await deleteMapLayer([record.id]);
message.success("删除成功"); message.success('删除成功');
basicTable.value.refresh(); basicTable.value.refresh();
} catch (error) { } catch (error) {
message.error("删除失败"); message.error('删除失败');
return; return;
} }
}, }
}); });
}; };
// 搜索 // 搜索
@ -262,13 +272,13 @@ const handleReset = () => {
// 是否启用切换处理 // 是否启用切换处理
const handleEnableChange = (record: any, checked: boolean) => { const handleEnableChange = (record: any, checked: boolean) => {
currentRecord.value = { ...record }; currentRecord.value = { ...record };
handleEditSubmit({ enable: checked ? 1 : 0 }, "switch"); handleEditSubmit({ enable: checked ? 1 : 0 }, 'switch');
}; };
// 是否可选切换处理 // 是否可选切换处理
const handleCheckableChange = (record: any, checked: boolean) => { const handleCheckableChange = (record: any, checked: boolean) => {
currentRecord.value = { ...record }; currentRecord.value = { ...record };
handleEditSubmit({ checkable: checked ? 1 : 0 }, "switch"); handleEditSubmit({ checkable: checked ? 1 : 0 }, 'switch');
}; };
// 表单 // 表单
const editModalCancel = () => { const editModalCancel = () => {
@ -282,18 +292,18 @@ const handleEditSubmit = async (values: any, type: string) => {
let res = await saveMapLayer({ let res = await saveMapLayer({
...currentRecord.value, ...currentRecord.value,
...values, ...values,
parentId: parentId.value, parentId: parentId.value
}); });
if (type === "switch") { if (type === 'switch') {
message.success("修改状态成功"); message.success('修改状态成功');
} else { } else {
message.success(`保存成功`); message.success(`保存成功`);
} }
editModalVisible.value = false; editModalVisible.value = false;
basicTable.value.refresh(); basicTable.value.refresh();
} catch (error) { } catch (error) {
if (type === "switch") { if (type === 'switch') {
message.error("修改状态失败"); message.error('修改状态失败');
} else { } else {
message.error(`保存失败`); message.error(`保存失败`);
} }

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

@ -14,44 +14,49 @@
:list-url="getAllMapLegendTree" :list-url="getAllMapLegendTree"
:search-params="searchParams" :search-params="searchParams"
> >
<template #bodyCell="{ column, record }"> <template #action="{ column, record }">
<template v-if="column.key === 'action'"> <div class="flex gap-[6px] justify-between">
<div class="flex gap-[6px] justify-between"> <a-button
<a-button class="!p-0" type="link" size="small" @click="handleEdit(record)" class="!p-0"
>选中配置</a-button type="link"
> size="small"
<a-button class="!p-0" type="link" size="small" @click="handleEdit(record)" @click="handleEdit(record)"
>编辑</a-button >选中配置</a-button
> >
<a-button <a-button
class="!p-0" class="!p-0"
type="link" type="link"
size="small" size="small"
danger @click="handleEdit(record)"
@click="handleDelete(record)" >编辑</a-button
>删除</a-button >
> <a-button
</div> class="!p-0"
</template> type="link"
size="small"
<template v-if="column.key === 'enable'"> danger
<a-switch @click="handleDelete(record)"
:checked="record.enable === 1" >删除</a-button
@change="(checked: boolean) => handleEnableChange(record, checked)" >
/> </div>
</template> </template>
<template v-if="column.key === 'internal'"> <template #enable="{ column, record }">
<a-switch <a-switch
:checked="record.internal === 1" :checked="record.enable === 1"
@change="(checked: boolean) => handleInternalChange(record, checked)" @change="(checked: boolean) => handleEnableChange(record, checked)"
/> />
</template> </template>
<template v-if="column.key === 'ifShow'"> <template #internal="{ column, record }">
<a-switch <a-switch
:checked="record.ifShow === 1" :checked="record.internal === 1"
@change="(checked: boolean) => handleIfShowChange(record, checked)" @change="(checked: boolean) => handleInternalChange(record, checked)"
/> />
</template> </template>
<template #ifShow="{ column, record }">
<a-switch
:checked="record.ifShow === 1"
@change="(checked: boolean) => handleIfShowChange(record, checked)"
/>
</template> </template>
</BasicTable> </BasicTable>
<LegendDataForm <LegendDataForm
@ -67,153 +72,157 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, nextTick, onMounted } from "vue"; import { ref, nextTick, onMounted } from 'vue';
import BasicTable from "@/components/BasicTable/index.vue"; import BasicTable from '@/components/BasicTable/index.vue';
import LegendDataSearch from "./LegendDataSearch.vue"; import LegendDataSearch from './LegendDataSearch.vue';
import LegendDataForm from "./LegendDataForm.vue"; import LegendDataForm from './LegendDataForm.vue';
import { message, Modal } from "ant-design-vue"; import { message, Modal } from 'ant-design-vue';
import { import {
getAllMapLegendTree, getAllMapLegendTree,
saveMapLegend, saveMapLegend,
deleteMapLegend, deleteMapLegend
} from "@/api/system/map/LegendStructure"; } from '@/api/system/map/LegendStructure';
import { getAllMapLegendParentIdTree } from "@/api/system/map/LegendStructure"; import { getAllMapLegendParentIdTree } from '@/api/system/map/LegendStructure';
import { getAllMapLayerTree } from "@/api/system/map/LayerManagement"; import { getAllMapLayerTree } from '@/api/system/map/LayerManagement';
// 表格列配置 // 表格列配置
const columns = [ const columns = [
{ {
title: "序号", title: '序号',
key: "index", key: 'index',
width: 60, width: 60,
align: "center", align: 'center',
customRender: ({ _, index }) => index + 1, customRender: ({ _, index }) => index + 1
}, },
{ {
title: "图例名称", title: '图例名称',
dataIndex: "name", dataIndex: 'name',
key: "name", key: 'name',
width: 150, width: 150
}, },
{ {
title: "图例编码", title: '图例编码',
key: "nameEn", key: 'nameEn',
dataIndex: "nameEn", dataIndex: 'nameEn',
width: 120, width: 120
}, },
{ {
title: "icon编码", title: 'icon编码',
key: "icon", key: 'icon',
dataIndex: "icon", dataIndex: 'icon',
width: 200, width: 200
}, },
{ {
title: "图例类型", title: '图例类型',
dataIndex: "codeName", dataIndex: 'codeName',
key: "codeName", key: 'codeName',
width: 80
},
{
title: '二维最小缩放',
dataIndex: 'minZoom',
key: 'minZoom',
width: 100
},
{
title: '二维最大缩放',
dataIndex: 'maxZoom',
key: 'maxZoom',
width: 100
},
{
title: '三维最小高程',
dataIndex: 'minHeightThd',
key: 'minHeightThd',
width: 100
},
{
title: '三维最大高程',
dataIndex: 'maxHeightThd',
key: 'maxHeightThd',
width: 100
},
{
title: '区间表达式',
dataIndex: 'expression',
key: 'expression',
width: 100
},
{
title: '父级图例名称',
dataIndex: 'parentName',
key: 'parentName',
width: 170
},
{
title: '父级图例编码',
dataIndex: 'parentCode',
key: 'parentCode',
width: 150
},
{
title: '图层名称',
dataIndex: 'layerCodeName',
key: 'layerCodeName',
width: 180
},
{
title: '图层编码',
dataIndex: 'layerCode',
key: 'layerCode',
width: 180
},
{
title: '是否启用',
dataIndex: 'enable',
key: 'enable',
width: 80, width: 80,
slots: { customRender: 'enable' }
}, },
{ {
title: "二维最小缩放", title: '系统内置项',
dataIndex: "minZoom", dataIndex: 'internal',
key: "minZoom", key: 'internal',
width: 100, width: 100,
slots: { customRender: 'internal' }
}, },
{ {
title: "二维最大缩放", title: '是否显示',
dataIndex: "maxZoom", dataIndex: 'ifShow',
key: "maxZoom", key: 'ifShow',
width: 100,
},
{
title: "三维最小高程",
dataIndex: "minHeightThd",
key: "minHeightThd",
width: 100,
},
{
title: "三维最大高程",
dataIndex: "maxHeightThd",
key: "maxHeightThd",
width: 100,
},
{
title: "区间表达式",
dataIndex: "expression",
key: "expression",
width: 100,
},
{
title: "父级图例名称",
dataIndex: "parentName",
key: "parentName",
width: 170,
},
{
title: "父级图例编码",
dataIndex: "parentCode",
key: "parentCode",
width: 150,
},
{
title: "图层名称",
dataIndex: "layerCodeName",
key: "layerCodeName",
width: 180,
},
{
title: "图层编码",
dataIndex: "layerCode",
key: "layerCode",
width: 180,
},
{
title: "是否启用",
dataIndex: "enable",
key: "enable",
width: 80, width: 80,
slots: { customRender: 'ifShow' }
}, },
{ {
title: "系统内置项", title: '备注',
dataIndex: "internal", dataIndex: 'description',
key: "internal", key: 'description',
width: 100, width: 160
}, },
{ {
title: "是否显示", title: '创建人',
dataIndex: "ifShow", key: 'displayRecordUser',
key: "ifShow", dataIndex: 'displayRecordUser',
width: 80, width: 150
}, },
{ {
title: "备注", title: '创建时间',
dataIndex: "description", key: 'recordTime',
key: "description", dataIndex: 'recordTime',
width: 150
},
{
title: '更新时间',
key: 'modifyTime',
dataIndex: 'modifyTime',
width: 150
},
{
title: '操作',
key: 'action',
width: 160, width: 160,
}, fixed: 'right',
{ slots: { customRender: 'action' }
title: "创建人", }
key: "displayRecordUser",
dataIndex: "displayRecordUser",
width: 150,
},
{
title: "创建时间",
key: "recordTime",
dataIndex: "recordTime",
width: 150,
},
{
title: "更新时间",
key: "modifyTime",
dataIndex: "modifyTime",
width: 150,
},
{
title: "操作",
key: "action",
width: 160,
fixed: "right",
},
]; ];
// 表格实例 // 表格实例
@ -239,43 +248,43 @@ const handleEdit = (record: any) => {
// 删除处理 // 删除处理
const handleDelete = (record: any) => { const handleDelete = (record: any) => {
Modal.confirm({ Modal.confirm({
title: "确认删除", title: '确认删除',
content: "确定要删除选中的记录吗？", content: '确定要删除选中的记录吗？',
zIndex: 2002, zIndex: 2002,
onOk: async () => { onOk: async () => {
try { try {
let res = await deleteMapLegend([record.id]); let res = await deleteMapLegend([record.id]);
message.success("删除成功"); message.success('删除成功');
basicTable.value.refresh(); basicTable.value.refresh();
} catch (error) { } catch (error) {
message.error("删除失败"); message.error('删除失败');
return; return;
} }
}, }
}); });
}; };
// 搜索完成处理 // 搜索完成处理
const onSearchFinish = (values: any) => { const onSearchFinish = (values: any) => {
const params = { const params = {
logic: "and", logic: 'and',
filters: [ filters: [
{ field: "dataType", operator: "eq", dataType: "string", value: "2" }, { field: 'dataType', operator: 'eq', dataType: 'string', value: '2' },
values.parentId values.parentId
? { ? {
field: "parentId", field: 'parentId',
operator: "eq", operator: 'eq',
dataType: "string", dataType: 'string',
value: values.parentId, value: values.parentId
} }
: null, : null,
{ {
field: "name", field: 'name',
operator: "contains", operator: 'contains',
dataType: "string", dataType: 'string',
value: values.name, value: values.name
}, }
].filter(Boolean), ].filter(Boolean)
}; };
basicTable.value.getList(params); basicTable.value.getList(params);
}; };
@ -284,25 +293,27 @@ const onSearchFinish = (values: any) => {
const handleReset = () => { const handleReset = () => {
nextTick(() => { nextTick(() => {
basicTable.value.getList({ basicTable.value.getList({
logic: "and", logic: 'and',
filters: [{ field: "dataType", operator: "eq", dataType: "string", value: "1" }], filters: [
{ field: 'dataType', operator: 'eq', dataType: 'string', value: '1' }
]
}); });
}); });
}; };
// 是否启用切换处理 // 是否启用切换处理
const handleEnableChange = (record: any, checked: boolean) => { const handleEnableChange = (record: any, checked: boolean) => {
currentRecord.value = { ...record }; currentRecord.value = { ...record };
handleEditSubmit({ enable: checked ? 1 : 0 }, "switch"); handleEditSubmit({ enable: checked ? 1 : 0 }, 'switch');
}; };
// 是否内部切换处理 // 是否内部切换处理
const handleInternalChange = (record: any, checked: boolean) => { const handleInternalChange = (record: any, checked: boolean) => {
currentRecord.value = { ...record }; currentRecord.value = { ...record };
handleEditSubmit({ internal: checked ? 1 : 0 }, "switch"); handleEditSubmit({ internal: checked ? 1 : 0 }, 'switch');
}; };
// 是否显示处理 // 是否显示处理
const handleIfShowChange = (record: any, checked: boolean) => { const handleIfShowChange = (record: any, checked: boolean) => {
currentRecord.value = { ...record }; currentRecord.value = { ...record };
handleEditSubmit({ ifShow: checked ? 1 : 0 }, "switch"); handleEditSubmit({ ifShow: checked ? 1 : 0 }, 'switch');
}; };
// 表单取消 // 表单取消
const editModalCancel = () => { const editModalCancel = () => {
@ -317,18 +328,18 @@ const handleEditSubmit = async (values: any, type: string) => {
try { try {
let res = await saveMapLegend({ let res = await saveMapLegend({
...currentRecord.value, ...currentRecord.value,
...values, ...values
}); });
if (type === "switch") { if (type === 'switch') {
message.success("修改状态成功"); message.success('修改状态成功');
} else { } else {
message.success(`保存成功`); message.success(`保存成功`);
} }
editModalVisible.value = false; editModalVisible.value = false;
basicTable.value.refresh(); basicTable.value.refresh();
} catch (error) { } catch (error) {
if (type === "switch") { if (type === 'switch') {
message.error("修改状态失败"); message.error('修改状态失败');
} else { } else {
message.error(`保存失败`); message.error(`保存失败`);
} }

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

@ -14,48 +14,50 @@
:transformData="transformData" :transformData="transformData"
:list-url="getAllMapLegendTree" :list-url="getAllMapLegendTree"
> >
<template #bodyCell="{ column, record }"> <template #action="{ column, record }">
<template v-if="column.key === 'action'"> <div class="flex gap-[6px]">
<div class="flex gap-[6px]"> <a-button
<a-button class="!p-0" type="link" size="small" @click="handleEdit(record)" class="!p-0"
>编辑</a-button type="link"
> size="small"
<a-button @click="handleEdit(record)"
v-if="record.parentId == null" >编辑</a-button
class="!p-0" >
type="link" <a-button
size="small" v-if="record.parentId == null"
@click="handleAdd(record)" class="!p-0"
>新增子图例</a-button type="link"
> size="small"
<a-button @click="handleAdd(record)"
class="!p-0" >新增子图例</a-button
type="link" >
size="small" <a-button
danger class="!p-0"
@click="handleDelete(record)" type="link"
>删除</a-button size="small"
> danger
</div> @click="handleDelete(record)"
</template> >删除</a-button
<template v-if="column.key === 'enable'"> >
<a-switch </div>
:checked="record.enable === 1" </template>
@change="(checked: boolean) => handleEnableChange(record, checked)" <template #enable="{ column, record }">
/> <a-switch
</template> :checked="record.enable === 1"
<template v-if="column.key === 'internal'"> @change="(checked: boolean) => handleEnableChange(record, checked)"
<a-switch />
:checked="record.internal === 1" </template>
@change="(checked: boolean) => handleInternalChange(record, checked)" <template #internal="{ column, record }">
/> <a-switch
</template> :checked="record.internal === 1"
<template v-if="column.key === 'ifShow'"> @change="(checked: boolean) => handleInternalChange(record, checked)"
<a-switch />
:checked="record.ifShow === 1" </template>
@change="(checked: boolean) => handleIfShowChange(record, checked)" <template #ifShow="{ column, record }">
/> <a-switch
</template> :checked="record.ifShow === 1"
@change="(checked: boolean) => handleIfShowChange(record, checked)"
/>
</template> </template>
</BasicTable> </BasicTable>
<LegendStructureForm <LegendStructureForm
@ -69,30 +71,30 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, nextTick } from "vue"; import { ref, nextTick } from 'vue';
import BasicTable from "@/components/BasicTable/index.vue"; import BasicTable from '@/components/BasicTable/index.vue';
import LegendStructureSearch from "./LegendStructureSearch.vue"; import LegendStructureSearch from './LegendStructureSearch.vue';
import LegendStructureForm from "./LegendStructureForm.vue"; import LegendStructureForm from './LegendStructureForm.vue';
import { message, Modal } from "ant-design-vue"; import { message, Modal } from 'ant-design-vue';
import { import {
getAllMapLegendTree, getAllMapLegendTree,
saveMapLegend, saveMapLegend,
deleteMapLegend, deleteMapLegend
} from "@/api/system/map/LegendStructure"; } from '@/api/system/map/LegendStructure';
// 表格列配置 // 表格列配置
const columns = [ const columns = [
{ {
title: "", title: '',
dataIndex: "", dataIndex: '',
key: "", key: '',
width: 20, width: 20
}, },
{ {
title: "序号", title: '序号',
key: "index", key: 'index',
width: 60, width: 60,
align: "center", align: 'center',
customRender: ({ record, index }: any) => { customRender: ({ record, index }: any) => {
// 对于树形结构，计算当前记录在其父节点的 children 中的位置 // 对于树形结构，计算当前记录在其父节点的 children 中的位置
// 如果没有 parentId，说明是根节点，需要计算在所有根节点中的序号 // 如果没有 parentId，说明是根节点，需要计算在所有根节点中的序号
@ -122,7 +124,8 @@ const columns = [
// 找到父节点，在其 children 中查找当前记录的位置 // 找到父节点，在其 children 中查找当前记录的位置
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
const childIndex = item.children.findIndex( const childIndex = item.children.findIndex(
(child: any) => child.key === record.key || child.id === record.id (child: any) =>
child.key === record.key || child.id === record.id
); );
return childIndex + 1; return childIndex + 1;
} }
@ -139,66 +142,70 @@ const columns = [
}; };
return findParentAndIndex(basicTable.value.tableData, record.parentId); return findParentAndIndex(basicTable.value.tableData, record.parentId);
} }
}, }
}, },
{ {
title: "图例名称", title: '图例名称',
dataIndex: "name", dataIndex: 'name',
key: "name", key: 'name',
width: 170, width: 170
}, },
{ {
title: "图例编码", title: '图例编码',
dataIndex: "nameEn", dataIndex: 'nameEn',
key: "nameEn", key: 'nameEn',
width: 120, width: 120
}, },
{ {
title: "是否启用", title: '是否启用',
dataIndex: "enable", dataIndex: 'enable',
key: "enable", key: 'enable',
width: 80, width: 80,
slots: { customRender: 'enable' }
}, },
{ {
title: "系统内置项", title: '系统内置项',
dataIndex: "internal", dataIndex: 'internal',
key: "internal", key: 'internal',
width: 100, width: 100,
slots: { customRender: 'internal' }
}, },
{ {
title: "是否显示", title: '是否显示',
dataIndex: "ifShow", dataIndex: 'ifShow',
key: "ifShow", key: 'ifShow',
width: 80, width: 80,
slots: { customRender: 'ifShow' }
}, },
{ {
title: "备注", title: '备注',
dataIndex: "description", dataIndex: 'description',
key: "description", key: 'description'
}, },
{ {
title: "创建人", title: '创建人',
key: "displayRecordUser", key: 'displayRecordUser',
dataIndex: "displayRecordUser", dataIndex: 'displayRecordUser'
}, },
{ {
title: "创建时间", title: '创建时间',
key: "recordTime", key: 'recordTime',
dataIndex: "recordTime", dataIndex: 'recordTime',
width: 150, width: 150
}, },
{ {
title: "更新时间", title: '更新时间',
key: "modifyTime", key: 'modifyTime',
dataIndex: "modifyTime", dataIndex: 'modifyTime',
width: 150, width: 150
}, },
{ {
title: "操作", title: '操作',
key: "action", key: 'action',
width: 160, width: 160,
fixed: "right", fixed: 'right',
}, slots: { customRender: 'action' }
}
]; ];
// 表格实例 // 表格实例
const basicTable = ref<any>(null); const basicTable = ref<any>(null);
@ -223,19 +230,19 @@ const handleEdit = (record: any) => {
// 删除处理 // 删除处理
const handleDelete = (record: any) => { const handleDelete = (record: any) => {
Modal.confirm({ Modal.confirm({
title: "确认删除", title: '确认删除',
content: "确定要删除选中的记录吗？", content: '确定要删除选中的记录吗？',
zIndex: 2002, zIndex: 2002,
onOk: async () => { onOk: async () => {
try { try {
let res = await deleteMapLegend([record.id]); let res = await deleteMapLegend([record.id]);
message.success("删除成功"); message.success('删除成功');
basicTable.value.refresh(); basicTable.value.refresh();
} catch (error) { } catch (error) {
message.error("删除失败"); message.error('删除失败');
return; return;
} }
}, }
}); });
}; };
// ... existing code ... // ... existing code ...
@ -248,12 +255,12 @@ const transformData = (res: any) => {
const tree: any[] = []; const tree: any[] = [];
// 第一步：将所有节点放入 map 中，并初始化 children // 第一步：将所有节点放入 map 中，并初始化 children
data.forEach((item) => { data.forEach(item => {
map.set(item.id, { ...item, children: [] }); map.set(item.id, { ...item, children: [] });
}); });
// 第二步：根据 parentId 建立父子关系 // 第二步：根据 parentId 建立父子关系
data.forEach((item) => { data.forEach(item => {
const node = map.get(item.id); const node = map.get(item.id);
if (!item.parentId) { if (!item.parentId) {
@ -273,7 +280,7 @@ const transformData = (res: any) => {
// 第三步：清理没有子节点的 children 数组 // 第三步：清理没有子节点的 children 数组
const cleanEmptyChildren = (nodes: any[]) => { const cleanEmptyChildren = (nodes: any[]) => {
nodes.forEach((node) => { nodes.forEach(node => {
if (node.children && node.children.length === 0) { if (node.children && node.children.length === 0) {
delete node.children; delete node.children;
} else if (node.children && node.children.length > 0) { } else if (node.children && node.children.length > 0) {
@ -291,23 +298,23 @@ const transformData = (res: any) => {
return { return {
records: treeData, records: treeData,
total: null, total: null
}; };
}; };
// ... existing code ... // ... existing code ...
// 搜索完成处理 // 搜索完成处理
const onSearchFinish = (values: any) => { const onSearchFinish = (values: any) => {
const params = { const params = {
logic: "and", logic: 'and',
filters: [ filters: [
{ field: "dataType", operator: "eq", dataType: "string", value: "1" }, { field: 'dataType', operator: 'eq', dataType: 'string', value: '1' },
{ {
field: "name", field: 'name',
operator: "contains", operator: 'contains',
dataType: "string", dataType: 'string',
value: values.name, value: values.name
}, }
], ]
}; };
basicTable.value.getList(params); basicTable.value.getList(params);
}; };
@ -316,8 +323,10 @@ const onSearchFinish = (values: any) => {
const handleReset = () => { const handleReset = () => {
nextTick(() => { nextTick(() => {
basicTable.value.getList({ basicTable.value.getList({
logic: "and", logic: 'and',
filters: [{ field: "dataType", operator: "eq", dataType: "string", value: "1" }], filters: [
{ field: 'dataType', operator: 'eq', dataType: 'string', value: '1' }
]
}); });
}); });
}; };
@ -325,17 +334,17 @@ const handleReset = () => {
// 是否启用切换处理 // 是否启用切换处理
const handleEnableChange = (record: any, checked: boolean) => { const handleEnableChange = (record: any, checked: boolean) => {
currentRecord.value = { ...record }; currentRecord.value = { ...record };
handleEditSubmit({ enable: checked ? 1 : 0 }, "switch"); handleEditSubmit({ enable: checked ? 1 : 0 }, 'switch');
}; };
// 是否内部切换处理 // 是否内部切换处理
const handleInternalChange = (record: any, checked: boolean) => { const handleInternalChange = (record: any, checked: boolean) => {
currentRecord.value = { ...record }; currentRecord.value = { ...record };
handleEditSubmit({ internal: checked ? 1 : 0 }, "switch"); handleEditSubmit({ internal: checked ? 1 : 0 }, 'switch');
}; };
// 是否显示处理 // 是否显示处理
const handleIfShowChange = (record: any, checked: boolean) => { const handleIfShowChange = (record: any, checked: boolean) => {
currentRecord.value = { ...record }; currentRecord.value = { ...record };
handleEditSubmit({ ifShow: checked ? 1 : 0 }, "switch"); handleEditSubmit({ ifShow: checked ? 1 : 0 }, 'switch');
}; };
// 表单取消 // 表单取消
const editModalCancel = () => { const editModalCancel = () => {
@ -350,18 +359,18 @@ const handleEditSubmit = async (values: any, type: string) => {
let res = await saveMapLegend({ let res = await saveMapLegend({
...currentRecord.value, ...currentRecord.value,
...values, ...values,
parentId: parentId.value, parentId: parentId.value
}); });
if (type === "switch") { if (type === 'switch') {
message.success("修改状态成功"); message.success('修改状态成功');
} else { } else {
message.success(`保存成功`); message.success(`保存成功`);
} }
editModalVisible.value = false; editModalVisible.value = false;
basicTable.value.refresh(); basicTable.value.refresh();
} catch (error) { } catch (error) {
if (type === "switch") { if (type === 'switch') {
message.error("修改状态失败"); message.error('修改状态失败');
} else { } else {
message.error(`保存失败`); message.error(`保存失败`);
} }

124
frontend/src/views/system/map/components/StationManagement/index.vue
View File

@ -15,20 +15,24 @@
:enable-row-selection="true" :enable-row-selection="true"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<template #bodyCell="{ column, record }"> <template #action="{ column, record }">
<template v-if="column.key === 'action'"> <a-space>
<a-space> <a-button type="link" size="small" @click="handleEdit(record)"
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button> >编辑</a-button
<a-button type="link" size="small" danger @click="handleDelete(record)" >
>删除</a-button <a-button
> type="link"
</a-space> size="small"
</template> danger
<template v-if="column.key === 'status'"> @click="handleDelete(record)"
<a-tag :color="record.status === 'running' ? 'green' : 'red'"> >删除</a-button
{{ record.status === "running" ? "运行中" : "停运" }} >
</a-tag> </a-space>
</template> </template>
<template #status="{ column, record }">
<a-tag :color="record.status === 'running' ? 'green' : 'red'">
{{ record.status === 'running' ? '运行中' : '停运' }}
</a-tag>
</template> </template>
</BasicTable> </BasicTable>
<StationManagementForm <StationManagementForm
@ -42,50 +46,52 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from 'vue';
import BasicTable from "@/components/BasicTable/index.vue"; import BasicTable from '@/components/BasicTable/index.vue';
import StationManagementSearch from "./StationManagementSearch.vue"; import StationManagementSearch from './StationManagementSearch.vue';
import StationManagementForm from "./StationManagementForm.vue"; import StationManagementForm from './StationManagementForm.vue';
import { message } from "ant-design-vue"; import { message } from 'ant-design-vue';
// 表格列配置 // 表格列配置
const columns = [ const columns = [
{ {
title: "电站名称", title: '电站名称',
dataIndex: "stationName", dataIndex: 'stationName',
key: "stationName", key: 'stationName',
width: 150, width: 150
}, },
{ {
title: "所属流域", title: '所属流域',
dataIndex: "basin", dataIndex: 'basin',
key: "basin", key: 'basin',
width: 120, width: 120
}, },
{ {
title: "装机容量(MW)", title: '装机容量(MW)',
dataIndex: "capacity", dataIndex: 'capacity',
key: "capacity", key: 'capacity',
width: 120, width: 120
}, },
{ {
title: "状态", title: '状态',
key: "status", key: 'status',
dataIndex: "status", dataIndex: 'status',
width: 100, width: 100,
slots: { customRender: 'status' }
}, },
{ {
title: "位置坐标", title: '位置坐标',
dataIndex: "coordinates", dataIndex: 'coordinates',
key: "coordinates", key: 'coordinates',
ellipsis: true, ellipsis: true
}, },
{ {
title: "操作", title: '操作',
key: "action", key: 'action',
width: 150, width: 150,
fixed: "right", fixed: 'right',
}, slots: { customRender: 'action' }
}
]; ];
// 搜索参数 // 搜索参数
@ -99,38 +105,38 @@ const dataSource = ref([]);
// 模拟数据获取函数 // 模拟数据获取函数
const fetchStationData = (params: any) => { const fetchStationData = (params: any) => {
return new Promise((resolve) => { return new Promise(resolve => {
setTimeout(() => { setTimeout(() => {
resolve({ resolve({
data: { data: {
records: [ records: [
{ {
id: 1, id: 1,
stationName: "三峡电站", stationName: '三峡电站',
basin: "长江流域", basin: '长江流域',
capacity: 22500, capacity: 22500,
status: "running", status: 'running',
coordinates: "111.29,30.83", coordinates: '111.29,30.83'
}, },
{ {
id: 2, id: 2,
stationName: "葛洲坝电站", stationName: '葛洲坝电站',
basin: "长江流域", basin: '长江流域',
capacity: 2715, capacity: 2715,
status: "running", status: 'running',
coordinates: "111.28,30.75", coordinates: '111.28,30.75'
}, },
{ {
id: 3, id: 3,
stationName: "溪洛渡电站", stationName: '溪洛渡电站',
basin: "金沙江流域", basin: '金沙江流域',
capacity: 13860, capacity: 13860,
status: "stopped", status: 'stopped',
coordinates: "103.65,28.25", coordinates: '103.65,28.25'
}, }
], ],
total: 3, total: 3
}, }
}); });
}, 500); }, 500);
}); });
@ -162,7 +168,7 @@ const handleReset = (params: any) => {};
// 选择变化处理 // 选择变化处理
const handleSelectionChange = (selectedRows: any[]) => { const handleSelectionChange = (selectedRows: any[]) => {
console.log("选中的行:", selectedRows); console.log('选中的行:', selectedRows);
}; };
// 表单取消 // 表单取消

159
frontend/src/views/system/map/components/TiltPhotoManagement/index.vue
View File

@ -13,22 +13,24 @@
:list-url="getAllTiltPhotoTree" :list-url="getAllTiltPhotoTree"
:search-params="searchParams" :search-params="searchParams"
> >
<template #bodyCell="{ column, record }"> <template #action="{ column, record }">
<template v-if="column.key === 'action'"> <div class="flex gap-[6px]">
<div class="flex gap-[6px]"> <a-button
<a-button class="!p-0" type="link" size="small" @click="handleEdit(record)" class="!p-0"
>编辑</a-button type="link"
> size="small"
<a-button @click="handleEdit(record)"
class="!p-0" >编辑</a-button
type="link" >
size="small" <a-button
danger class="!p-0"
@click="handleDelete(record)" type="link"
>删除</a-button size="small"
> danger
</div> @click="handleDelete(record)"
</template> >删除</a-button
>
</div>
</template> </template>
</BasicTable> </BasicTable>
<TiltPhotoManagementForm <TiltPhotoManagementForm
@ -42,73 +44,74 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, nextTick, onMounted } from "vue"; import { ref, nextTick, onMounted } from 'vue';
import BasicTable from "@/components/BasicTable/index.vue"; import BasicTable from '@/components/BasicTable/index.vue';
import TiltPhotoManagementSearch from "./TiltPhotoManagementSearch.vue"; import TiltPhotoManagementSearch from './TiltPhotoManagementSearch.vue';
import TiltPhotoManagementForm from "./TiltPhotoManagementForm.vue"; import TiltPhotoManagementForm from './TiltPhotoManagementForm.vue';
import { message, Modal } from "ant-design-vue"; import { message, Modal } from 'ant-design-vue';
import { import {
getAllTiltPhotoTree, getAllTiltPhotoTree,
saveTiltPhoto, saveTiltPhoto,
deleteTiltPhoto, deleteTiltPhoto
} from "@/api/system/map/TiltPhotoManagement"; } from '@/api/system/map/TiltPhotoManagement';
// 表格列配置 // 表格列配置
const columns = [ const columns = [
{ {
title: "序号", title: '序号',
dataIndex: "index", dataIndex: 'index',
key: "index", key: 'index',
width: 60, width: 60,
align: "center", align: 'center',
customRender: ({ text, record, index }) => index + 1, customRender: ({ text, record, index }) => index + 1
}, },
{ {
title: "倾斜影像名称", title: '倾斜影像名称',
dataIndex: "stnm", dataIndex: 'stnm',
key: "stnm", key: 'stnm',
width: 150, width: 150
}, },
{ {
title: "URL", title: 'URL',
dataIndex: "url", dataIndex: 'url',
key: "url", key: 'url',
width: 360, width: 360
}, },
{ {
title: "所在河段", title: '所在河段',
dataIndex: "hbrvcdName", dataIndex: 'hbrvcdName',
key: "hbrvcdName", key: 'hbrvcdName',
width: 120, width: 120
}, },
{ {
title: "所属电站", title: '所属电站',
key: "ennm", key: 'ennm',
dataIndex: "ennm", dataIndex: 'ennm',
width: 140, width: 140
}, },
{ {
title: "创建人", title: '创建人',
key: "recordUser", key: 'recordUser',
dataIndex: "recordUser", dataIndex: 'recordUser'
}, },
{ {
title: "创建时间", title: '创建时间',
key: "recordTime", key: 'recordTime',
dataIndex: "recordTime", dataIndex: 'recordTime',
width: 150, width: 150
}, },
{ {
title: "更新时间", title: '更新时间',
key: "modifyTime", key: 'modifyTime',
dataIndex: "modifyTime", dataIndex: 'modifyTime',
width: 150, width: 150
}, },
{ {
title: "操作", title: '操作',
key: "action", key: 'action',
width: 80, width: 80,
fixed: "right", fixed: 'right',
}, slots: { customRender: 'status' }
}
]; ];
// 表格实例 // 表格实例
@ -134,42 +137,42 @@ const handleEdit = (record: any) => {
// 删除处理 // 删除处理
const handleDelete = (record: any) => { const handleDelete = (record: any) => {
Modal.confirm({ Modal.confirm({
title: "确认删除", title: '确认删除',
content: "确定要删除选中的记录吗？", content: '确定要删除选中的记录吗？',
zIndex: 2002, zIndex: 2002,
onOk: async () => { onOk: async () => {
try { try {
let res = await deleteTiltPhoto({ id: record.id }); let res = await deleteTiltPhoto({ id: record.id });
message.success("删除成功"); message.success('删除成功');
basicTable.value.refresh(); basicTable.value.refresh();
} catch (error) { } catch (error) {
message.error("删除失败"); message.error('删除失败');
return; return;
} }
}, }
}); });
}; };
// 搜索完成处理 // 搜索完成处理
const onSearchFinish = (values: any) => { const onSearchFinish = (values: any) => {
const params = { const params = {
logic: "and", logic: 'and',
filters: [ filters: [
values.parentId values.parentId
? { ? {
field: "parentId", field: 'parentId',
operator: "eq", operator: 'eq',
dataType: "string", dataType: 'string',
value: values.parentId, value: values.parentId
} }
: null, : null,
{ {
field: "stnm", field: 'stnm',
operator: "contains", operator: 'contains',
dataType: "string", dataType: 'string',
value: values.stnm, value: values.stnm
}, }
].filter(Boolean), ].filter(Boolean)
}; };
basicTable.value.getList(params); basicTable.value.getList(params);
}; };
@ -178,8 +181,8 @@ const onSearchFinish = (values: any) => {
const handleReset = () => { const handleReset = () => {
nextTick(() => { nextTick(() => {
basicTable.value.getList({ basicTable.value.getList({
logic: "and", logic: 'and',
filters: [], filters: []
}); });
}); });
}; };
@ -195,7 +198,7 @@ const handleEditSubmit = async (values: any) => {
try { try {
let res = await saveTiltPhoto({ let res = await saveTiltPhoto({
...currentRecord.value, ...currentRecord.value,
...values, ...values
}); });
message.success(`保存成功`); message.success(`保存成功`);