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