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

除审批记录外的表格组件变动更改和基础信息组件变动更改

Browse Source
This commit is contained in:
王兴凯 2026-06-08 15:34:13 +08:00
parent ed29837df1
commit 030471514b
27 changed files with 2352 additions and 2304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -152,15 +152,23 @@ const columnsConfig = ref([
columns: BasicColumns
},
{
type: 'wt_point',
type: 'WT',
columns: wtPointColumns
},
{
type: 'fh_wq_point',
type: 'WTRV',
columns: wtPointColumns
},
{
type: 'WQFB',
columns: FhWpPointColumns
},
{
type: 'fh_point',
type: 'WQ',
columns: FhWpPointColumns
},
{
type: 'FH',
columns: FhPointColumns
},
{
@ -204,7 +212,7 @@ const columnsConfig = ref([
columns: StinfoAiVidoPointColumns
},
{
type: 'dw_point',
type: 'DW_2',
columns: DwPointColumns
},
{

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

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

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

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

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

@ -77,14 +77,12 @@
<div class="table-section">
<BasicTable ref="tableRef" :scrollY="360" :columns="columns" :list-url="wqGetKendoList"
: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>
</template>
</template>
</BasicTable>
</div>
</div>
@ -286,7 +284,8 @@ const columns = [
title: '操作',
key: 'action',
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('深度:', depth);
modelStore.modalVisible = true;
modelStore.params.sttp = "wt_point";
modelStore.params.sttp = "WT";
modelStore.params.enfc = '1';
modelStore.title = stnm + "详情信息";
// modelStore.isBasicEdit = true;
modelStore.params.stcd = stcd;

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

@ -47,20 +47,18 @@
:ref="(el) => setTableRef(el, item.key)" :scrollY="360" :columns="columns"
:list-url="vmsstbprptGetKendoList" :search-params="{ sort: sort }"
:transform-data="customTransform">
<template #bodyCell="{ column, record }">
<!-- 名称列 - 可点击 -->
<template v-if="column.key === 'stnm'">
<template #stnm="{ record }">
<a @click="handleViewDetail(record, 'DW')" class="text-link">
{{ record.stnm }}
</a>
</template>
<!-- 关联电站列 - 可点击 -->
<template v-if="column.key === 'ennm'">
<template #ennm="{ record }">
<a @click="handleViewDetail(record, 'ENG')" class="text-link">
{{ record.ennm || '-' }}
</a>
</template>
</template>
</BasicTable>
</a-tab-pane>
</a-tabs>
@ -155,7 +153,8 @@ const columns = [
dataIndex: 'stnm',
key: 'stnm',
width: 150,
ellipsis: true
ellipsis: true,
slots: { customRender: 'ennm' }
},
{
title: '接入状态',
@ -238,7 +237,9 @@ const columns = [
dataIndex: 'ennm',
key: 'ennm',
width: 150,
ellipsis: true
ellipsis: true,
slots: { customRender: 'ennm' }
},
{
title: '关联基地',
@ -441,7 +442,7 @@ const handleSearch = () => {
const typefenbian = (type: string) => {
if (type == '2') {
return 'dw_point'
return 'DW_2'
} else if (type == '5') {
return 'DW_5'
} else if (type == '6') {

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

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

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

@ -15,8 +15,7 @@
:options="buildStateOptions" />
</a-form-item>
<a-form-item>
<a-input v-model:value="filterOpts.searchContent" placeholder="请输入设施名称" style="width: 200px"
allow-clear />
<a-input v-model:value="filterOpts.searchContent" placeholder="请输入设施名称" style="width: 200px" allow-clear />
</a-form-item>
<a-form-item>
<a-space>
@ -35,46 +34,41 @@
</a-form>
<!-- 数据表格 -->
<BasicTable ref="tableRef" :scroll-y="400" :columns="columns" :list-url="vmsstbprptGetKendoList"
:enable-sort="true" :search-params="searchParams" :transform-data="customTransform"
@sort-change="handleSortChange">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'ennm'">
<BasicTable ref="tableRef" :scroll-y="400" :columns="columns" :list-url="vmsstbprptGetKendoList" :enable-sort="true"
:search-params="searchParams" :transform-data="customTransform" @sort-change="handleSortChange">
<template #ennm="{ record }">
<a @click="handleViewDetail(record, 'dz')" class="text-link">
{{ record.ennm }}
</a>
</template>
<template v-if="column.key === 'action'">
<template #action="{ record }">
<a @click="handleViewDetail(record, 'other')" class="text-link">
查看详情
</a>
</template>
</template>
</BasicTable>
</div>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import BasicTable from '@/components/BasicTable/index.vue'
import { ref, computed, onMounted, nextTick } from 'vue';
import BasicTable from '@/components/BasicTable/index.vue';
// TODO: API 接口 - 需要在 @/api/gyss 中实现
import { vmsstbprptGetKendoList } from '@/api/gyss'
import { useModelStore } from "@/store/modules/model";
import { vmsstbprptGetKendoList } from '@/api/gyss';
import { useModelStore } from '@/store/modules/model';
const modelStore = useModelStore();
// ==================== Props 定义 ====================
const props = defineProps<{
data?: any
jdId?: any
jrzt?: string
}>()
data?: any;
jdId?: any;
jrzt?: string;
}>();
// ==================== 状态管理 ====================
const tableRef = ref()
const mapModal = ref(false)
const modaldata = ref<any>({})
const tableRef = ref();
const mapModal = ref(false);
const modaldata = ref<any>({});
// 筛选条件
const filterOpts = ref({
@ -83,10 +77,10 @@ const filterOpts = ref({
bldstt: '', // 建设状态
bonusing: '', // 接入状态（预留）
searchContent: '' // 搜索文本
})
});
// 排序状态
const sortState = ref<{ field: string; order: string } | null>(null)
const sortState = ref<{ field: string; order: string } | null>(null);
// ==================== 基地列表数据（硬编码）====================
const jdInfoOpt = ref<any[]>([
@ -105,7 +99,7 @@ const jdInfoOpt = ref<any[]>([
{ value: '13', label: '怒江干流' },
{ value: '11', label: '闽浙赣' },
{ value: 'other', label: '其他' }
])
]);
// ==================== 常量配置 ====================
// 设施类型选项
@ -115,14 +109,14 @@ const facilityTypeOptions = [
{ label: '集运鱼系统', value: 'FP_3' },
{ label: '升鱼机', value: 'FP_4' },
{ label: '其他', value: 'FP_5' }
]
];
// 建设状态选项
const buildStateOptions = [
{ label: '全部', value: '' },
{ label: '在建', value: '1' },
{ label: '已建', value: '2' }
]
];
// ==================== 表格列定义 ====================
const columns = [
{
@ -147,7 +141,8 @@ const columns = [
dataIndex: 'ennm',
width: 150,
sorter: true,
ellipsis: true
ellipsis: true,
slots: { customRender: 'ennm' }
},
{
key: 'ststdt',
@ -186,9 +181,10 @@ const columns = [
title: '操作',
width: 100,
align: 'center' as const,
fixed: 'right' as const
fixed: 'right' as const,
slots: { customRender: 'action' }
}
]
];
// ==================== 计算属性 ====================
// 搜索参数（包含排序）
@ -197,27 +193,29 @@ const searchParams = computed(() => {
group: [],
groupResultFlat: false,
select: []
}
};
if (sortState.value) {
// 用户自定义排序
params.sort = [{
params.sort = [
{
field: sortState.value.field,
dir: sortState.value.order === 'ascend' ? 'asc' : 'desc'
}]
}
];
} else {
// 默认排序
params.sort = null
params.sort = null;
}
return params
})
return params;
});
// ==================== 方法定义 ====================
// 下拉框过滤
const filterOption = (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
// 构建过滤条件
const buildFilter = () => {
@ -261,8 +259,11 @@ const buildFilter = () => {
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
},
value:
filterOpts.value.dwtp === 'FP_5'
? ['FP_5', 'FP_2']
: filterOpts.value.dwtp
}
// TODO: 接入状态筛选（当前已注释）
// filterOpts.value.bonusing && {
// field: 'dtin',
@ -270,85 +271,85 @@ const buildFilter = () => {
// dataType: 'string',
// value: filterOpts.value.bonusing
// }
].filter(Boolean)
].filter(Boolean);
return {
logic: 'and',
filters
}
}
};
};
// 处理排序变化
const handleSortChange = (info: { field: string; order: string | null }) => {
// debugger
if (info.field && info.order) {
sortState.value = info
sortState.value = info;
} else {
sortState.value = null // 恢复默认排序
sortState.value = null; // 恢复默认排序
}
nextTick(() => {
handleSearch()
})
}
handleSearch();
});
};
// 查询
const handleSearch = () => {
console.log('【搜索】', filterOpts.value)
const filter = buildFilter()
tableRef.value?.getList(filter)
}
console.log('【搜索】', filterOpts.value);
const filter = buildFilter();
tableRef.value?.getList(filter);
};
// 重置
const handleReset = () => {
console.log('【重置】')
console.log('【重置】');
filterOpts.value = {
dwtp: '',
baseId: 'all',
bldstt: '',
bonusing: '',
searchContent: ''
}
sortState.value = null // 重置排序状态
handleSearch()
}
};
sortState.value = null; // 重置排序状态
handleSearch();
};
// 查看详情
const handleViewDetail = (record: any, type: string) => {
if (type === 'dz') {
modelStore.modalVisible = true;
modelStore.params.sttp = "ENG";
modelStore.title = record.ennm + " 详情信息";
modelStore.params.sttp = 'ENG';
modelStore.title = record.ennm + ' 详情信息';
modelStore.params.stcd = record.rstcd;
} else {
modelStore.modalVisible = true;
modelStore.params.sttp = "fp_point";
modelStore.title = record.stnm + "详情信息";
modelStore.params.sttp = 'fp_point';
modelStore.title = record.stnm + '详情信息';
modelStore.params.stcd = record.stcd;
}
// console.log('【查看详情】', record)
}
};
// 关闭弹窗
const handleCloseModal = () => {
mapModal.value = false
modaldata.value = {}
}
mapModal.value = false;
modaldata.value = {};
};
// 自定义数据转换
const customTransform = (res: any) => {
return {
records: res?.data?.data || [],
total: res?.data?.total || 0
}
}
};
};
// ==================== 生命周期 ====================
onMounted(() => {
// 基地列表已在上方硬编码定义（jdInfoOpt），无需从缓存获取
filterOpts.value.dwtp = props.data.key
filterOpts.value.dwtp = props.data.key;
// 初始加载数据
handleSearch()
})
handleSearch();
});
</script>
<style scoped lang="scss">

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

@ -1,73 +1,36 @@
<template>
<div class="monthly-average-container">
<!-- 搜索表单 -->
<a-form
ref="formRef"
:model="formValue"
layout="inline"
class="search-form"
>
<a-form ref="formRef" :model="formValue" layout="inline" class="search-form">
<a-form-item label="基地名称" name="dataDimensionVal">
<a-select
v-model:value="formValue.dataDimensionVal"
placeholder="请选择"
style="width: 200px"
@change="handleBaseChange"
>
<a-select-option
v-for="item in jdList"
:key="item.baseid"
:value="item.baseid"
>
<a-select v-model:value="formValue.dataDimensionVal" placeholder="请选择" style="width: 200px"
@change="handleBaseChange">
<a-select-option v-for="item in jdList" :key="item.baseid" :value="item.baseid">
{{ item.basename }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="所在流域" name="rvcd">
<a-select
v-model:value="formValue.rvcd"
placeholder="请选择"
style="width: 200px"
:disabled="!formValue.dataDimensionVal"
@change="handleRvcdChange"
>
<a-select-option
v-for="item in lyList"
:key="item.value"
:value="item.value"
>
<a-select v-model:value="formValue.rvcd" placeholder="请选择" style="width: 200px"
:disabled="!formValue.dataDimensionVal" @change="handleRvcdChange">
<a-select-option v-for="item in lyList" :key="item.value" :value="item.value">
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="断面名称" name="stcd">
<a-select
v-model:value="formValue.stcd"
placeholder="请选择"
style="width: 200px"
:disabled="!formValue.rvcd"
>
<a-select-option
v-for="item in dmList"
:key="item.value"
:value="item.value"
>
<a-select v-model:value="formValue.stcd" placeholder="请选择" style="width: 200px" :disabled="!formValue.rvcd">
<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-date-picker
v-model:value="formValue.tm"
picker="month"
:disabled-date="disabledDate"
format="YYYY-MM"
value-format="YYYY-MM-DD HH:mm:ss"
:allow-clear="false"
/>
<a-date-picker v-model:value="formValue.tm" 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>
@ -82,19 +45,11 @@
<div style="width: 100%; display: flex">
<!-- 图表容器：始终存在，不再使用 v-if -->
<div class="chart-wrapper" ref="chartRef"></div>
<BasicTable
ref="tableRef"
:scrollY="460"
:columns="columns"
:list-url="DetGetKendoListCust"
:search-params="{ sort: sort }"
:transform-data="customTransform"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<BasicTable ref="tableRef" :scrollY="460" :columns="columns" :list-url="DetGetKendoListCust"
:search-params="{ sort: sort }" :transform-data="customTransform">
<template #action="{ record }">
<a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
</template>
</template>
</BasicTable>
</div>
</div>
@ -802,7 +757,8 @@ const columns = [
key: 'action',
width: 100,
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.params.sttp = 'wt_point';
modelStore.params.sttp = 'WT';
modelStore.title = stnm + '详情信息';
modelStore.params.stcd = formValue.stcd;
};

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

@ -8,12 +8,30 @@
<div class="search-form">
<a-space size="middle">
<div>所属基地:</div>
<a-select v-model:value="searchData.baseId" placeholder="请选择所属基地" style="width: 200px" show-search
:filter-option="filterOption" :options="jiDiList" @change="handleHydropowerStationChange" />
<a-select
v-model:value="searchData.baseId"
placeholder="请选择所属基地"
style="width: 200px"
show-search
:filter-option="filterOption"
:options="jiDiList"
@change="handleHydropowerStationChange"
/>
<div>所属栖息地:</div>
<a-select v-model:value="searchData.fhstcd" placeholder=" " style="width: 200px" show-search
:filter-option="filterOption" :options="stationOptions" />
<a-input v-model:value="searchData.stnm" placeholder="请输入电站或设施名称" style="width: 200px" allow-clear />
<a-select
v-model:value="searchData.fhstcd"
placeholder=" "
style="width: 200px"
show-search
:filter-option="filterOption"
:options="stationOptions"
/>
<a-input
v-model:value="searchData.stnm"
placeholder="请输入电站或设施名称"
style="width: 200px"
allow-clear
/>
<a-button type="primary" @click="handleSearch">查询</a-button>
<a-tooltip title="重置">
@ -22,130 +40,117 @@
</a-space>
</div>
<!-- 列表 -->
<BasicTable ref="tableRef" :scrollY="360" :columns="columns" :list-url="fhGetKendoListCust" :enable-sort="true" @sort-change="handleSortChange"
:search-params="searchParams" :transform-data="customTransform">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'ennm'">
<BasicTable
ref="tableRef"
:scrollY="360"
:columns="columns"
:list-url="fhGetKendoListCust"
:enable-sort="true"
@sort-change="handleSortChange"
:search-params="searchParams"
:transform-data="customTransform"
>
<template #ennm="{ column, record }">
<a @click="handleViewDetail(record, 'dz')" class="text-link">
{{ record.ennm }}
</a>
</template>
<template v-if="column.key === 'action'">
<template #action="{ column, record }">
<a @click="handleViewDetail(record, 'qxd')" class="text-link">
查看详情
</a>
</template>
</template>
</BasicTable>
</div>
</template>
<script lang="ts" setup>
import { ref, computed, watch, onMounted,nextTick } from 'vue'
import { msstbprptGetKendoList, fhGetKendoListCust } from '@/api/qxd'
import BasicTable from '@/components/BasicTable/index.vue'
import { useModelStore } from "@/store/modules/model";
import { ref, computed, watch, onMounted, nextTick } from 'vue';
import { msstbprptGetKendoList, fhGetKendoListCust } from '@/api/qxd';
import BasicTable from '@/components/BasicTable/index.vue';
import { useModelStore } from '@/store/modules/model';
// ==================== Props 定义 ====================
const props = defineProps<{
baseId?: string
tabs?: any[]
activeKey?: string
}>()
baseId?: string;
tabs?: any[];
activeKey?: string;
}>();
// ==================== 状态管理 ====================
const tabIndex = ref(props.activeKey || 'FH')
const tabIndex = ref(props.activeKey || 'FH');
const searchData = ref<any>({
baseId: props.baseId || 'all',
fhstcd: 'all',
stnm: null
})
});
const modelStore = useModelStore();
const tableRef = ref()
const stationOptions: any = ref([])
const tableRef = ref();
const stationOptions: any = ref([]);
// ==================== 基地列表数据(硬编码) ====================
const jiDiList: any = ref([
{
"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 columns = [
{
@ -153,14 +158,14 @@ const columns = [
title: '设施名称',
dataIndex: 'stnm',
width: '176px',
sorter: true,
sorter: true
},
{
key: 'baseName',
title: '所在基地',
dataIndex: 'baseName',
width: '150px',
sorter: true,
sorter: true
},
{
key: 'ennm',
@ -168,69 +173,71 @@ const columns = [
dataIndex: 'ennm',
width: '150px',
sorter: true,
slots: { customRender: 'ennm' }
},
{
key: 'fhstnm',
title: '所属栖息地',
dataIndex: 'fhstnm',
width: '176px',
sorter: true,
sorter: true
},
{
key: 'ststdt',
title: '开工日期',
dataIndex: 'ststdt',
width: '150px',
sorter: true,
sorter: true
},
{
key: 'esstdt',
title: '建成日期',
dataIndex: 'esstdt',
width: '150px',
sorter: true,
sorter: true
},
{
key: 'mway',
title: '监测方式',
dataIndex: 'mway',
width: '150px',
sorter: true,
sorter: true
},
{
key: 'vlsr',
title: '数据接入来源',
dataIndex: 'vlsr',
width: '150px',
sorter: true,
sorter: true
},
{
key: 'hydrodtin_type',
title: '数据接入类型',
dataIndex: 'hydrodtinType',
width: '150px',
sorter: true,
sorter: true
},
{
key: 'enable',
title: '是否启用',
dataIndex: 'enable',
width: '150px',
sorter: true,
sorter: true
},
{
key: 'dtin',
title: '是否接入',
dataIndex: 'dtin',
width: '150px',
sorter: true,
sorter: true
},
{
title: '操作',
key: 'action',
width: 100,
align: 'center' as const,
fixed: 'right' as const
fixed: 'right' as const,
slots: { customRender: 'action' }
}
];
// 1. 定义排序状态
@ -243,189 +250,196 @@ const handleSortChange = (info: { field: string; order: string | null }) => {
sortState.value = null; // 恢复默认排序
}
nextTick(() => {
handleSearch()
handleSearch();
});
}
};
const searchParams = computed(() => {
const params: any = { group: [], groupResultFlat: false, select: [] };
if (sortState.value) {
// 转换为后端需要的格式，例如 [{ field: 'name', dir: 'asc' }]
params.sort = [{
params.sort = [
{
field: sortState.value.field,
dir: sortState.value.order === 'ascend' ? 'asc' : 'desc'
}];
}
];
} else {
params.sort = [{
"field": "baseStepSort",
"dir": "asc"
params.sort = [
{
field: 'baseStepSort',
dir: 'asc'
},
{
"field": "rvcdStepSort",
"dir": "asc"
field: 'rvcdStepSort',
dir: 'asc'
},
{
"field": "rstcdStepSort",
"dir": "asc"
}]
field: 'rstcdStepSort',
dir: 'asc'
}
];
}
return params;
});
const handleTabChange = (key: string) => {
console.log('【Tab切换】', key)
tabIndex.value = key
handleSearch()
}
console.log('【Tab切换】', key);
tabIndex.value = key;
handleSearch();
};
const filterOption = (input: string, option: any) => {
// 使用 options 属性时，option 是标准对象 { label, value }
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
//所属基地发生变化
const handleHydropowerStationChange = (value: string) => {
console.log('【水电站选择变化】', value)
console.log('【水电站选择变化】', value);
// 清空测站选择
searchData.value.fhstcd = 'all'
getselectTwo()
}
searchData.value.fhstcd = 'all';
getselectTwo();
};
//获取栖息地
const getselectTwo = async () => {
let params = {
"filter": {
"logic": "and",
"filters": [
filter: {
logic: 'and',
filters: [
{
"field": "sttpCode",
"operator": "eq",
"dataType": "string",
"value": tabIndex.value
field: 'sttpCode',
operator: 'eq',
dataType: 'string',
value: tabIndex.value
},
searchData.value.baseId != 'all' ? {
"field": "baseId",
"operator": "eq",
"dataType": "string",
"value": searchData.value.baseId
} : null
searchData.value.baseId != 'all'
? {
field: 'baseId',
operator: 'eq',
dataType: 'string',
value: searchData.value.baseId
}
: null
].filter(Boolean)
},
"select": [
"stcd",
"stnm"
]
}
let res = await msstbprptGetKendoList(params)
console.log('【获取栖息地】', res)
stationOptions.value = []
select: ['stcd', 'stnm']
};
let res = await msstbprptGetKendoList(params);
console.log('【获取栖息地】', res);
stationOptions.value = [];
if (res?.data?.data.length > 0) {
stationOptions.value = res.data.data.map((item: any) => {
return {
label: item.stnm,
value: item.stcd
}
})
};
});
}
stationOptions.value.unshift({
label: '当前全部',
value: 'all'
})
}
});
};
const handleSearch = () => {
console.log('【搜索】', searchData.value)
console.log('【搜索】', searchData.value);
const filters: any[] = [
searchData.value.baseId != 'all' ? {
"field": "baseId",
"operator": "eq",
"value": searchData.value.baseId
} : null,
searchData.value.fhstcd != 'all' ? {
"field": "fhstcd",
"operator": "eq",
"value": searchData.value.fhstcd
} : null,
searchData.value.baseId != 'all'
? {
field: 'baseId',
operator: 'eq',
value: searchData.value.baseId
}
: null,
searchData.value.fhstcd != 'all'
? {
field: 'fhstcd',
operator: 'eq',
value: searchData.value.fhstcd
}
: null,
{
"field": "sttpCode",
"operator": "eq",
"value": tabIndex.value
field: 'sttpCode',
operator: 'eq',
value: tabIndex.value
},
searchData.value.stnm ? {
"logic": "or",
"filters": [
searchData.value.stnm
? {
logic: 'or',
filters: [
{
"field": "stnm",
"operator": "contains",
"value": searchData.value.stnm
field: 'stnm',
operator: 'contains',
value: searchData.value.stnm
},
{
"field": "ennm",
"operator": "contains",
"value": searchData.value.stnm
field: 'ennm',
operator: 'contains',
value: searchData.value.stnm
}
]
} : null
].filter(Boolean)
}
: null
].filter(Boolean);
const filter = {
logic: 'and',
filters
}
};
// 刷新表格
tableRef.value?.getList(filter)
}
tableRef.value?.getList(filter);
};
const handleReset = () => {
console.log('【重置】')
console.log('【重置】');
searchData.value = {
baseId: 'all',
fhstcd: 'all',
stnm: null
}
handleSearch()
}
};
handleSearch();
};
// 自定义数据转换
const customTransform = (res: any) => {
return {
records: res?.data?.data || [],
total: res?.data?.total || 0
}
}
};
};
// 查看详情
const handleViewDetail = (record: any, type: any) => {
if (type == 'dz') {
modelStore.modalVisible = true;
modelStore.params.sttp = "ENG";
modelStore.title = record.ennm + " 详情信息";
modelStore.params.sttp = 'ENG';
modelStore.title = record.ennm + ' 详情信息';
modelStore.params.stcd = record.rstcd;
} else {
if (tabIndex.value == 'FH') {
modelStore.modalVisible = true;
modelStore.params.sttp = "fh_point";
modelStore.title = record.stnm + " 详情信息";
modelStore.params.sttp = 'FH';
modelStore.title = record.stnm + ' 详情信息';
modelStore.params.stcd = record.stcd;
modelStore.params.show = false
modelStore.params.show = false;
} else if (tabIndex.value == 'WTRV') {
modelStore.modalVisible = true;
modelStore.params.sttp = "wt_point";
modelStore.title = record.stnm + " 详情信息";
modelStore.params.sttp = 'WT';
modelStore.title = record.stnm + ' 详情信息';
modelStore.params.stcd = record.stcd;
} else if (tabIndex.value == 'ZQ') {
modelStore.modalVisible = true;
modelStore.params.sttp = "fh_zq_point";
modelStore.title = record.stnm + " 详情信息";
modelStore.params.sttp = 'fh_zq_point';
modelStore.title = record.stnm + ' 详情信息';
modelStore.params.stcd = record.stcd;
} else if (tabIndex.value == 'VD') {
modelStore.modalVisible = true;
modelStore.params.sttp = "stinfo_ai_video_point";
modelStore.title = "视频监控站详情信息";
modelStore.params.sttp = 'stinfo_ai_video_point';
modelStore.title = '视频监控站详情信息';
modelStore.isBasicEdit = true;
modelStore.params.stcd = record.stcd;
}
}
}
};
// ==================== 生命周期 ====================
onMounted(() => {
getselectTwo()
handleSearch()
})
getselectTwo();
handleSearch();
});
</script>
<style scoped lang="scss">

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

@ -1,9 +1,20 @@
<!-- SidePanelItem.vue -->
<template>
<SidePanelItem title="主要栖息地基本信息" :select="select" @update-values="handlePanelChange1">
<SidePanelItem
title="主要栖息地基本信息"
:select="select"
@update-values="handlePanelChange1"
>
<div class="table-container">
<a-table :columns="columns" :data-source="tableData" :pagination="pagination" :scroll="{ y: 420 }"
:loading="loading" size="small" @change="handleTableChange">
<a-table
:columns="columns"
:data-source="tableData"
:pagination="pagination"
:scroll="{ y: 420 }"
:loading="loading"
size="small"
@change="handleTableChange"
>
<template #bodyCell="{ column, record }">
<!-- 仅栖息地列需要自定义渲染 -->
<template v-if="column.key === 'fhstnm'">
@ -28,9 +39,9 @@
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from '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 { useModelStore } from "@/store/modules/model";
import { useModelStore } from '@/store/modules/model';
// 定义组件名（便于调试和递归）
defineOptions({
name: 'qixidijchuXx'
@ -40,73 +51,73 @@ const JidiSelectEventStore = useJidiSelectEventStore();
// ==================== 基地列表数据(硬编码) ====================
const jiDiList: any = ref([
{
"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 select = ref({
show: true,
value: 'all',
options: jiDiList.value,
picker: undefined,
format: undefined
})
});
const baseid = ref('');
// 加载状态
const loading = ref(false);
@ -149,7 +160,7 @@ const columns = [
width: 96,
ellipsis: true
}
]
];
// 分页配置
const pagination = ref({
@ -161,257 +172,258 @@ const pagination = ref({
showQuickJumper: true,
showTotal: (total: number) => `共 ${total} 条`,
pageSizeOptions: ['10', '20', '50', '100']
})
});
// 模拟数据
const tableData = ref(
[
const tableData = ref([
{
key: "1",
key: '1',
qxdbhdx: null,
fhstnm: "泽曲河鱼类栖息地",
bhhl: "泽曲河",
fhstnm: '泽曲河鱼类栖息地',
bhhl: '泽曲河',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "2",
key: '2',
qxdbhdx: null,
fhstnm: "黄河干流羊曲库尾河段鱼类栖息地",
bhhl: "黄河干流",
fhstnm: '黄河干流羊曲库尾河段鱼类栖息地',
bhhl: '黄河干流',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "3",
qxdbhdx: "裂腹鱼、高原鳅类、鲇类",
fhstnm: "翠依河鱼类栖息地",
bhhl: "翠依河",
key: '3',
qxdbhdx: '裂腹鱼、高原鳅类、鲇类',
fhstnm: '翠依河鱼类栖息地',
bhhl: '翠依河',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "4",
qxdbhdx: "裂腹鱼、高原鳅类、鲇类",
fhstnm: "金棉河鱼类栖息地",
bhhl: "金棉河",
key: '4',
qxdbhdx: '裂腹鱼、高原鳅类、鲇类',
fhstnm: '金棉河鱼类栖息地',
bhhl: '金棉河',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "5",
key: '5',
qxdbhdx: null,
fhstnm: "斜曲河口以上河段鱼类栖息地",
bhhl: "斜曲",
fhstnm: '斜曲河口以上河段鱼类栖息地',
bhhl: '斜曲',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "6",
qxdbhdx: "白鲟、达氏鲟、胭脂鱼等珍稀特有鱼类",
fhstnm: "长江上游珍稀、特有鱼类国家级自然保护区",
bhhl: "金沙江下游",
key: '6',
qxdbhdx: '白鲟、达氏鲟、胭脂鱼等珍稀特有鱼类',
fhstnm: '长江上游珍稀、特有鱼类国家级自然保护区',
bhhl: '金沙江下游',
qxdbhcd: 681,
qxdbhmj: null
},
{
key: "7",
key: '7',
qxdbhdx: null,
fhstnm: "六冲河种质资源保护区",
bhhl: "六冲河、红岩河、后河、伍佐河",
fhstnm: '六冲河种质资源保护区',
bhhl: '六冲河、红岩河、后河、伍佐河',
qxdbhcd: 146,
qxdbhmj: null
},
{
key: "8",
qxdbhdx: "黄颡鱼、中华倒刺鲃、白甲鱼、鲤鱼、鲶鱼（鲇）、草鱼",
fhstnm: "白果树水电站坝址下游至河口段鱼类栖息地",
bhhl: "乌江干流",
key: '8',
qxdbhdx: '黄颡鱼、中华倒刺鲃、白甲鱼、鲤鱼、鲶鱼（鲇）、草鱼',
fhstnm: '白果树水电站坝址下游至河口段鱼类栖息地',
bhhl: '乌江干流',
qxdbhcd: 13,
qxdbhmj: null
},
{
key: "9",
key: '9',
qxdbhdx: null,
fhstnm: "红水河岩滩、大化、百龙滩、桥巩河段鱼类栖息地",
bhhl: "红水河",
fhstnm: '红水河岩滩、大化、百龙滩、桥巩河段鱼类栖息地',
bhhl: '红水河',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "10",
qxdbhdx: "长身鱖、鯮、湖南吻鮈、湘华鲮、湘江蛇鮈",
fhstnm: "白洋河鱼类栖息地",
bhhl: "白洋河",
key: '10',
qxdbhdx: '长身鱖、鯮、湖南吻鮈、湘华鲮、湘江蛇鮈',
fhstnm: '白洋河鱼类栖息地',
bhhl: '白洋河',
qxdbhcd: 121,
qxdbhmj: null
},
{
key: "11",
key: '11',
qxdbhdx: null,
fhstnm: "锡潭水电站以下河段鱼类栖息地",
bhhl: "麻溪",
fhstnm: '锡潭水电站以下河段鱼类栖息地',
bhhl: '麻溪',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "12",
key: '12',
qxdbhdx: null,
fhstnm: "西曲二级电站厂址至河口段鱼类栖息地",
bhhl: "西曲",
fhstnm: '西曲二级电站厂址至河口段鱼类栖息地',
bhhl: '西曲',
qxdbhcd: 23,
qxdbhmj: null
},
{
key: "13",
key: '13',
qxdbhdx: null,
fhstnm: "落漏河、达旦河段鱼类栖息地",
bhhl: "支流落漏河、达旦河",
fhstnm: '落漏河、达旦河段鱼类栖息地',
bhhl: '支流落漏河、达旦河',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "14",
qxdbhdx: "长身鱖、鯮、湖南吻鮈、湘华鲮、湘江蛇鮈",
fhstnm: "陬溪鱼类栖息地",
bhhl: "陬溪",
key: '14',
qxdbhdx: '长身鱖、鯮、湖南吻鮈、湘华鲮、湘江蛇鮈',
fhstnm: '陬溪鱼类栖息地',
bhhl: '陬溪',
qxdbhcd: 38.9,
qxdbhmj: null
},
{
key: "15",
key: '15',
qxdbhdx: null,
fhstnm: "资水金塘冲至马迹塘段鱼类栖息地",
bhhl: "资水",
fhstnm: '资水金塘冲至马迹塘段鱼类栖息地',
bhhl: '资水',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "16",
key: '16',
qxdbhdx: null,
fhstnm: "西科河鱼类栖息地",
bhhl: "西科河",
fhstnm: '西科河鱼类栖息地',
bhhl: '西科河',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "17",
key: '17',
qxdbhdx: null,
fhstnm: "尕柯河鱼类栖息地",
bhhl: "尕柯河",
fhstnm: '尕柯河鱼类栖息地',
bhhl: '尕柯河',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "18",
key: '18',
qxdbhdx: null,
fhstnm: "赛欠沟鱼类栖息地",
bhhl: "赛欠沟",
fhstnm: '赛欠沟鱼类栖息地',
bhhl: '赛欠沟',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "19",
key: '19',
qxdbhdx: null,
fhstnm: "得科河鱼类栖息地",
bhhl: "得科河",
fhstnm: '得科河鱼类栖息地',
bhhl: '得科河',
qxdbhcd: null,
qxdbhmj: null
},
{
key: "20",
key: '20',
qxdbhdx: null,
fhstnm: "黄河班多坝下及巴沟河段鱼类栖息地",
bhhl: "黄河干流、巴沟河",
fhstnm: '黄河班多坝下及巴沟河段鱼类栖息地',
bhhl: '黄河干流、巴沟河',
qxdbhcd: 11,
qxdbhmj: null
}
])
]);
// 格式化空值显示
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) => {
console.log('点击栖息地:', record)
console.log('点击栖息地:', record);
// TODO: 后续实现具体功能
modelStore.modalVisible = true;
modelStore.params.sttp = "fh_point";
modelStore.title = record.stnm + " 详情信息";
modelStore.params.sttp = 'FH';
modelStore.title = record.stnm + ' 详情信息';
modelStore.params.stcd = record.stcd;
modelStore.params.show = true;
}
};
// 分页变化处理
const handleTableChange = (pag: any, filters: any, sorter: any) => {
pagination.value.current = pag.current
pagination.value.pageSize = pag.pageSize
gettableData(baseid.value)
}
pagination.value.current = pag.current;
pagination.value.pageSize = pag.pageSize;
gettableData(baseid.value);
};
const gettableData = async (basid: any) => {
loading.value = true;
try {
let params = {
"take": pagination.value.pageSize,
"skip": (pagination.value.current - 1) * pagination.value.pageSize,
"filter": {
"logic": "and",
"filters": [
basid != 'all' ? {
"field": "baseId",
"operator": "eq",
"dataType": "string",
"value": basid
} : null,
].filter(Boolean),
take: pagination.value.pageSize,
skip: (pagination.value.current - 1) * pagination.value.pageSize,
filter: {
logic: 'and',
filters: [
basid != 'all'
? {
field: 'baseId',
operator: 'eq',
dataType: 'string',
value: basid
}
: null
].filter(Boolean)
}
let res = await fhGetKendoListCustom(params)
};
let res = await fhGetKendoListCustom(params);
// 数据处理
if (res?.data) {
tableData.value = res.data.data || []
pagination.value.total = res.data.total || 0
tableData.value = res.data.data || [];
pagination.value.total = res.data.total || 0;
}
} finally {
loading.value = false;
}
}
};
watch(
() => JidiSelectEventStore.selectedItem,
(newVal) => {
newVal => {
baseid.value = newVal.wbsCode;
// 重置分页到第一页
pagination.value.current = 1
gettableData(newVal.wbsCode)
pagination.value.current = 1;
gettableData(newVal.wbsCode);
if (newVal.wbsCode != 'all') {
select.value.show = false
select.value.show = false;
} else {
select.value.show = true
select.value.show = true;
}
},
{ deep: true, immediate: true }
);
const handlePanelChange1 = async (data) => {
const handlePanelChange1 = async data => {
if (data.select) {
// 重置分页到第一页
pagination.value.current = 1
gettableData(data.select)
}
pagination.value.current = 1;
gettableData(data.select);
}
};
// 页面加载时执行
onMounted(() => {
// 延迟初始化，确保容器已渲染
});
// 组件卸载时清理
onUnmounted(() => {
});
onUnmounted(() => {});
</script>
<style lang="scss" scoped>

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

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

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

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

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

@ -9,25 +9,11 @@
<div class="search-form">
<a-space size="middle">
<div>选择水电站:</div>
<a-select
v-model:value="searchData.stcd.dataDimensionData"
placeholder="请选择水电站"
style="width: 200px"
show-search
: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-select v-model:value="searchData.stcd.dataDimensionData" placeholder="请选择水电站" style="width: 200px"
show-search :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-tooltip title="重置">
@ -531,9 +517,12 @@ const handleTableChange = (pag: any) => {
const handleViewDetail = (record: any) => {
if (record) {
modelStore.modalVisible = true;
modelStore.params.sttp = "wt_point";
modelStore.params.sttp = "WT";
modelStore.title = record.stnm + "详情信息";
// modelStore.isBasicEdit = true;
if (tabIndex.value == "27") {
modelStore.params.enfc = "1";
}
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) => {
if (record) {
modelStore.modalVisible = true;
modelStore.params.sttp = "fh_wq_point";
modelStore.params.sttp = "WQFB";
modelStore.title = record.stnm + "详情信息";
// modelStore.isBasicEdit = true;
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) {
modelStore.modalVisible = true;
modelStore.params.sttp = "fh_wq_point";
modelStore.params.sttp = "WQFB";
modelStore.title = stationData.stnm + "详情信息";
// modelStore.isBasicEdit = true;
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('temperature:', params.data.value);
modelStore.modalVisible = true;
modelStore.params.sttp = "wt_point";
modelStore.params.sttp = "WT";
modelStore.title = params.data.stnm + "详情信息";
// modelStore.isBasicEdit = true;
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;
date: any;
show: any;
enfc:any;
}>({
sttp: 'eng',
stcd: '',
date: '',
show: true
show: true,
enfc:'0',
});
return {
params,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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