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 columns: BasicColumns
}, },
{ {
type: 'wt_point', type: 'WT',
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':

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

@ -77,14 +77,12 @@
<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>
</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;

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

@ -47,20 +47,18 @@
: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 v-if="column.key === 'stnm'"> <template #stnm="{ record }">
<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 v-if="column.key === 'ennm'"> <template #ennm="{ record }">
<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>
</a-tabs> </a-tabs>
@ -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') {

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="{}" <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()

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

@ -15,8 +15,7 @@
: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>
@ -35,46 +34,41 @@
</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 }">
<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 v-if="column.key === 'action'"> <template #action="{ record }">
<a @click="handleViewDetail(record, 'other')" class="text-link"> <a @click="handleViewDetail(record, 'other')" class="text-link">
查看详情 查看详情
</a> </a>
</template> </template>
</template>
</BasicTable> </BasicTable>
</div> </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({
@ -83,10 +77,10 @@ const filterOpts = ref({
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[]>([
@ -105,7 +99,7 @@ const jdInfoOpt = ref<any[]>([
{ value: '13', label: '怒江干流' }, { value: '13', label: '怒江干流' },
{ value: '11', label: '闽浙赣' }, { value: '11', label: '闽浙赣' },
{ value: 'other', label: '其他' } { value: 'other', label: '其他' }
]) ]);
// ==================== 常量配置 ==================== // ==================== 常量配置 ====================
// 设施类型选项 // 设施类型选项
@ -115,14 +109,14 @@ const facilityTypeOptions = [
{ 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 = [
{ {
@ -147,7 +141,8 @@ const columns = [
dataIndex: 'ennm', dataIndex: 'ennm',
width: 150, width: 150,
sorter: true, sorter: true,
ellipsis: true ellipsis: true,
slots: { customRender: 'ennm' }
}, },
{ {
key: 'ststdt', key: 'ststdt',
@ -186,9 +181,10 @@ const columns = [
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' }
} }
] ];
// ==================== 计算属性 ==================== // ==================== 计算属性 ====================
// 搜索参数（包含排序） // 搜索参数（包含排序）
@ -197,27 +193,29 @@ const searchParams = computed(() => {
group: [], group: [],
groupResultFlat: false, groupResultFlat: false,
select: [] select: []
} };
if (sortState.value) { if (sortState.value) {
// 用户自定义排序 // 用户自定义排序
params.sort = [{ params.sort = [
{
field: sortState.value.field, field: sortState.value.field,
dir: sortState.value.order === 'ascend' ? 'asc' : 'desc' dir: sortState.value.order === 'ascend' ? 'asc' : 'desc'
}] }
];
} else { } else {
// 默认排序 // 默认排序
params.sort = null 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 = () => {
@ -261,8 +259,11 @@ const buildFilter = () => {
field: 'sttpCode', field: 'sttpCode',
operator: filterOpts.value.dwtp === 'FP_5' ? 'in' : 'eq', operator: filterOpts.value.dwtp === 'FP_5' ? 'in' : 'eq',
dataType: 'string', 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: 接入状态筛选（当前已注释） // TODO: 接入状态筛选（当前已注释）
// filterOpts.value.bonusing && { // filterOpts.value.bonusing && {
// field: 'dtin', // field: 'dtin',
@ -270,85 +271,85 @@ const buildFilter = () => {
// dataType: 'string', // dataType: 'string',
// value: filterOpts.value.bonusing // value: filterOpts.value.bonusing
// } // }
].filter(Boolean) ].filter(Boolean);
return { return {
logic: 'and', logic: 'and',
filters 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">

78
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,19 +45,11 @@
<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"
: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> <a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
</template> </template>
</template>
</BasicTable> </BasicTable>
</div> </div>
</div> </div>
@ -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;
}; };

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

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

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

@ -1,9 +1,20 @@
<!-- SidePanelItem.vue --> <!-- SidePanelItem.vue -->
<template> <template>
<SidePanelItem title="主要栖息地基本信息" :select="select" @update-values="handlePanelChange1"> <SidePanelItem
title="主要栖息地基本信息"
:select="select"
@update-values="handlePanelChange1"
>
<div class="table-container"> <div class="table-container">
<a-table :columns="columns" :data-source="tableData" :pagination="pagination" :scroll="{ y: 420 }" <a-table
:loading="loading" size="small" @change="handleTableChange"> :columns="columns"
:data-source="tableData"
:pagination="pagination"
:scroll="{ y: 420 }"
:loading="loading"
size="small"
@change="handleTableChange"
>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<!-- 仅栖息地列需要自定义渲染 --> <!-- 仅栖息地列需要自定义渲染 -->
<template v-if="column.key === 'fhstnm'"> <template v-if="column.key === 'fhstnm'">
@ -28,9 +39,9 @@
<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'
@ -40,73 +51,73 @@ const JidiSelectEventStore = useJidiSelectEventStore();
// ==================== 基地列表数据(硬编码) ==================== // ==================== 基地列表数据(硬编码) ====================
const jiDiList: any = ref([ const jiDiList: any = ref([
{ {
"value": "all", value: 'all',
"label": "当前全部", label: '当前全部'
}, },
{ {
"value": "01", value: '01',
"label": "金沙江干流", label: '金沙江干流'
}, },
{ {
"value": "02", value: '02',
"label": "雅砻江干流", label: '雅砻江干流'
}, },
{ {
"value": "03", value: '03',
"label": "大渡河干流", label: '大渡河干流'
}, },
{ {
"value": "04", value: '04',
"label": "乌江干流", label: '乌江干流'
}, },
{ {
"value": "05", value: '05',
"label": "长江上游干流", label: '长江上游干流'
}, },
{ {
"value": "10", value: '10',
"label": "湘西", label: '湘西'
}, },
{ {
"value": "08", value: '08',
"label": "黄河上游干流", label: '黄河上游干流'
}, },
{ {
"value": "09", value: '09',
"label": "黄河中游干流", label: '黄河中游干流'
}, },
{ {
"value": "06", value: '06',
"label": "南盘江-红水河", label: '南盘江-红水河'
}, },
{ {
"value": "12", value: '12',
"label": "东北", label: '东北'
}, },
{ {
"value": "07", value: '07',
"label": "澜沧江干流", label: '澜沧江干流'
}, },
{ {
"value": "13", value: '13',
"label": "怒江干流", label: '怒江干流'
}, },
{ {
"value": "11", value: '11',
"label": "闽浙赣", label: '闽浙赣'
}, },
{ {
"value": "other", value: 'other',
"label": "其他", label: '其他'
} }
]) ]);
const select = ref({ const select = ref({
show: true, show: true,
value: 'all', value: 'all',
options: jiDiList.value, options: jiDiList.value,
picker: undefined, picker: undefined,
format: undefined format: undefined
}) });
const baseid = ref(''); const baseid = ref('');
// 加载状态 // 加载状态
const loading = ref(false); const loading = ref(false);
@ -149,7 +160,7 @@ const columns = [
width: 96, width: 96,
ellipsis: true ellipsis: true
} }
] ];
// 分页配置 // 分页配置
const pagination = ref({ const pagination = ref({
@ -161,257 +172,258 @@ const pagination = ref({
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 { } finally {
loading.value = false; 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 } { deep: true, immediate: true }
); );
const handlePanelChange1 = async (data) => { const handlePanelChange1 = async data => {
if (data.select) { if (data.select) {
// 重置分页到第一页 // 重置分页到第一页
pagination.value.current = 1 pagination.value.current = 1;
gettableData(data.select) gettableData(data.select);
}
} }
};
// 页面加载时执行 // 页面加载时执行
onMounted(() => { onMounted(() => {
// 延迟初始化，确保容器已渲染 // 延迟初始化，确保容器已渲染
}); });
// 组件卸载时清理 // 组件卸载时清理
onUnmounted(() => { onUnmounted(() => {});
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

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

@ -1,28 +1,55 @@
<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
ref="formRef"
:model="formState"
layout="inline"
class="search-form"
>
<a-form-item label="基地名称" name="dataDimensionVal"> <a-form-item label="基地名称" name="dataDimensionVal">
<a-select v-model:value="formState.dataDimensionVal" placeholder="请选择" style="width: 200px" <a-select
@change="handleJdChange"> v-model:value="formState.dataDimensionVal"
<a-select-option v-for="item in jdList" :key="item.wbsCode" :value="item.wbsCode"> placeholder="请选择"
style="width: 200px"
@change="handleJdChange"
>
<a-select-option
v-for="item in jdList"
:key="item.wbsCode"
:value="item.wbsCode"
>
{{ item.wbsName }} {{ item.wbsName }}
</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 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="请选择"
style="width: 200px"
:loading="selectLoading"
>
<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 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"
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-form-item>
@ -34,78 +61,81 @@
</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"
:list-url="yearDetailGetKendoListCust"
:search-params="{ sort: sort }"
:transform-data="customTransform"
>
<template #action="{ record }">
<a @click="handleViewDetail(record)" class="text_hocer">查看详情</a> <a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
</template> </template>
</template>
</BasicTable> </BasicTable>
</div> </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 = [
{ {
@ -113,7 +143,8 @@ const columns = [
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: '日均水温(℃)实测值', title: '日均水温(℃)实测值',
@ -132,155 +163,150 @@ const columns = [
dataIndex: 'naturalTemp', dataIndex: 'naturalTemp',
key: 'naturalTemp', key: 'naturalTemp',
width: 120, width: 120,
customRender: ({ text }: any) => text ? Number(text).toFixed(1) : '-' customRender: ({ text }: any) => (text ? Number(text).toFixed(1) : '-')
}, },
{ {
title: '操作', title: '操作',
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' }
} }
] ];
// 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
}
: null
].filter(Boolean) ].filter(Boolean)
}, },
select: [ select: [
"stcd", 'stcd',
"stnm", 'stnm',
"lgtd", 'lgtd',
"lttd", 'lttd',
"baseId", 'baseId',
"baseName", 'baseName',
"siteStepSort" 'siteStepSort'
], ]
// sort: [{ field: 'rstcdStepSort', dir: 'desc' }] // 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) { } catch (error) {
console.error('获取断面列表失败:', error) console.error('获取断面列表失败:', error);
message.error('获取断面列表失败') message.error('获取断面列表失败');
} finally { } finally {
selectLoading.value = false 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)
? formState.tm
: dayjs(formState.tm);
const filter = { const filter = {
"logic": "and", logic: 'and',
"filters": [ filters: [
{ {
"field": "stcd", field: 'stcd',
"operator": "eq", operator: 'eq',
"dataType": "string", dataType: 'string',
"value": formState.stcd value: formState.stcd
}, },
{ {
"field": "dt", field: 'dt',
"operator": "gte", operator: 'gte',
"dataType": "date", dataType: 'date',
value: tmValue.startOf('month').format('YYYY-MM-DD HH:mm:ss') value: tmValue.startOf('month').format('YYYY-MM-DD HH:mm:ss')
}, },
{ {
"field": "dt", field: 'dt',
"operator": "lte", operator: 'lte',
"dataType": "date", dataType: 'date',
value: tmValue.endOf('month').format('YYYY-MM-DD HH:mm:ss') 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 {
@ -292,50 +318,55 @@ const customTransform = (res: any) => {
// 监听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],
[oldTm, oldDataDimensionVal, oldStcd]
) => {
// 只有当值真正发生变化时才处理 // 只有当值真正发生变化时才处理
if (newTm !== oldTm || newDataDimensionVal !== oldDataDimensionVal || newStcd !== oldStcd) { if (
newTm !== oldTm ||
newDataDimensionVal !== oldDataDimensionVal ||
newStcd !== oldStcd
) {
// 更新formState // 更新formState
formState.tm = newTm ? dayjs(newTm) : null formState.tm = newTm ? dayjs(newTm) : null;
formState.dataDimensionVal = newDataDimensionVal || '' formState.dataDimensionVal = newDataDimensionVal || '';
formState.stcd = String(newStcd || '') 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">

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

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

@ -16,17 +16,13 @@
:search-params="{}" :search-params="{}"
:transform-data="customTransform" :transform-data="customTransform"
> >
<template #bodyCell="{ column, record }"> <template #action="{ record }">
<template
v-if="column.key === 'action' || column.dataIndex === 'action'"
>
<div class="flex"> <div class="flex">
<a-button type="link" size="small" @click="handleView(record)" <a-button type="link" size="small" @click="handleView(record)"
>查看</a-button >查看</a-button
> >
</div> </div>
</template> </template>
</template>
</BasicTable> </BasicTable>
<!-- 预览媒体组件 --> <!-- 预览媒体组件 -->
<PreviewMedia <PreviewMedia
@ -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 = {

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

@ -27,10 +27,7 @@
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<!-- 使用 bodyCell 插槽自定义单元格渲染 --> <!-- 使用 bodyCell 插槽自定义单元格渲染 -->
<template #bodyCell="{ column, record }"> <template #action="{ column, record }">
<template
v-if="column.key === 'action' || column.dataIndex === 'action'"
>
<div class="flex"> <div class="flex">
<a-button <a-button
v-hasPerm="['sjtb:import-add']" v-hasPerm="['sjtb:import-add']"
@ -70,10 +67,8 @@
size="small" size="small"
@click="handleEdit(record, 'view')" @click="handleEdit(record, 'view')"
v-if=" v-if="
(checkPerm(['sjtb:edit-review']) && (checkPerm(['sjtb:edit-review']) && record.status === 'DRAFT') ||
record.status === 'DRAFT') || (checkPerm(['sjtb:import-add']) && record.status === 'PENDING') ||
(checkPerm(['sjtb:import-add']) &&
record.status === 'PENDING') ||
(checkPerm(['sjtb:edit-review']) && (checkPerm(['sjtb:edit-review']) &&
record.status === 'REJECTED') || record.status === 'REJECTED') ||
record.status === 'APPROVED' record.status === 'APPROVED'
@ -99,7 +94,6 @@
> >
</div> </div>
</template> </template>
</template>
</BasicTable> </BasicTable>
<div class="buttonStyle"> <div class="buttonStyle">
<div class="button"> <div class="button">
@ -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",

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

@ -13,10 +13,13 @@
: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 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
> >
<a-button <a-button
@ -29,7 +32,6 @@
> >
</div> </div>
</template> </template>
</template>
</BasicTable> </BasicTable>
<ConfigManagementForm <ConfigManagementForm
ref="configManagementForm" ref="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(`保存成功`);

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

@ -13,10 +13,13 @@
: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 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
> >
<a-button <a-button
@ -27,7 +30,11 @@
@click="handleEditInterface(record)" @click="handleEditInterface(record)"
>编辑接口</a-button >编辑接口</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
> >
<a-button <a-button
@ -40,19 +47,18 @@
> >
</div> </div>
</template> </template>
<template v-if="column.key === 'enable'"> <template #enable="{ column, record }">
<a-switch <a-switch
:checked="record.enable === 1" :checked="record.enable === 1"
@change="(checked: boolean) => handleEnableChange(record, checked)" @change="(checked: boolean) => handleEnableChange(record, checked)"
/> />
</template> </template>
<template v-if="column.key === 'checkable'"> <template #checkable="{ column, record }">
<a-switch <a-switch
:checked="record.checkable === 1" :checked="record.checkable === 1"
@change="(checked: boolean) => handleCheckableChange(record, checked)" @change="(checked: boolean) => handleCheckableChange(record, checked)"
/> />
</template> </template>
</template>
</BasicTable> </BasicTable>
<LayerManagementForm <LayerManagementForm
ref="layerManagementForm" ref="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(`保存失败`);
} }

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

@ -14,13 +14,20 @@
: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 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
> >
<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
> >
<a-button <a-button
@ -33,26 +40,24 @@
> >
</div> </div>
</template> </template>
<template #enable="{ column, record }">
<template v-if="column.key === 'enable'">
<a-switch <a-switch
:checked="record.enable === 1" :checked="record.enable === 1"
@change="(checked: boolean) => handleEnableChange(record, checked)" @change="(checked: boolean) => handleEnableChange(record, checked)"
/> />
</template> </template>
<template v-if="column.key === 'internal'"> <template #internal="{ column, record }">
<a-switch <a-switch
:checked="record.internal === 1" :checked="record.internal === 1"
@change="(checked: boolean) => handleInternalChange(record, checked)" @change="(checked: boolean) => handleInternalChange(record, checked)"
/> />
</template> </template>
<template v-if="column.key === 'ifShow'"> <template #ifShow="{ column, record }">
<a-switch <a-switch
:checked="record.ifShow === 1" :checked="record.ifShow === 1"
@change="(checked: boolean) => handleIfShowChange(record, checked)" @change="(checked: boolean) => handleIfShowChange(record, checked)"
/> />
</template> </template>
</template>
</BasicTable> </BasicTable>
<LegendDataForm <LegendDataForm
ref="legendDataForm" ref="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(`保存失败`);
} }

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

@ -14,10 +14,13 @@
: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 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
> >
<a-button <a-button
@ -38,25 +41,24 @@
> >
</div> </div>
</template> </template>
<template v-if="column.key === 'enable'"> <template #enable="{ column, record }">
<a-switch <a-switch
:checked="record.enable === 1" :checked="record.enable === 1"
@change="(checked: boolean) => handleEnableChange(record, checked)" @change="(checked: boolean) => handleEnableChange(record, checked)"
/> />
</template> </template>
<template v-if="column.key === 'internal'"> <template #internal="{ column, record }">
<a-switch <a-switch
:checked="record.internal === 1" :checked="record.internal === 1"
@change="(checked: boolean) => handleInternalChange(record, checked)" @change="(checked: boolean) => handleInternalChange(record, checked)"
/> />
</template> </template>
<template v-if="column.key === 'ifShow'"> <template #ifShow="{ column, record }">
<a-switch <a-switch
:checked="record.ifShow === 1" :checked="record.ifShow === 1"
@change="(checked: boolean) => handleIfShowChange(record, checked)" @change="(checked: boolean) => handleIfShowChange(record, checked)"
/> />
</template> </template>
</template>
</BasicTable> </BasicTable>
<LegendStructureForm <LegendStructureForm
ref="legendStructureForm" ref="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(`保存失败`);
} }

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

@ -15,21 +15,25 @@
: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> <a-button type="link" size="small" @click="handleEdit(record)"
<a-button type="link" size="small" danger @click="handleDelete(record)" >编辑</a-button
>
<a-button
type="link"
size="small"
danger
@click="handleDelete(record)"
>删除</a-button >删除</a-button
> >
</a-space> </a-space>
</template> </template>
<template v-if="column.key === 'status'"> <template #status="{ column, record }">
<a-tag :color="record.status === 'running' ? 'green' : 'red'"> <a-tag :color="record.status === 'running' ? 'green' : 'red'">
{{ record.status === "running" ? "运行中" : "停运" }} {{ record.status === 'running' ? '运行中' : '停运' }}
</a-tag> </a-tag>
</template> </template>
</template>
</BasicTable> </BasicTable>
<StationManagementForm <StationManagementForm
ref="stationManagementForm" ref="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);
}; };
// 表单取消 // 表单取消

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

@ -13,10 +13,13 @@
: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 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
> >
<a-button <a-button
@ -29,7 +32,6 @@
> >
</div> </div>
</template> </template>
</template>
</BasicTable> </BasicTable>
<TiltPhotoManagementForm <TiltPhotoManagementForm
ref="tiltPhotoManagementForm" ref="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(`保存成功`);