基础信息组件更改-增加可控制显隐的下拉框
This commit is contained in:
王兴凯
parent
bbfea93b20
commit
28e7b8013d
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
<div class="modal-baseic-container">
|
||||
<a-row class="w-[100%]">
|
||||
<div class="modal-baseic-container" >
|
||||
<a-row class="w-[100%]" v-if="!loading">
|
||||
<a-col :span="!item.visible ? 24 : (item.filed == '' ? 12 : 12)" v-for="(item, index) in tabledata"
|
||||
:key="item.key">
|
||||
<div class="col-title" v-if="!item.visible">
|
||||
@ -58,7 +58,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import dayjs from "dayjs";
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import { ref, onMounted, nextTick,watch } from "vue";
|
||||
import { BasicColumns, wtPointColumns, FhWpPointColumns, FhPointColumns, FhZQPointColumns, FPPointColumns, FBPointColumns, VaPointColumns, VPPointColumns, wePointColumns, waPointColumns, DwPointColumns, DwFivePointColumns, DwSixPointColumns, DwOnePointColumns, StinfoAiVidoPointColumns } from "../column.config";
|
||||
import { useModelStore } from "@/store/modules/model";
|
||||
import { getStcdDetail } from "@/api/mapModal"
|
||||
@ -268,6 +268,17 @@ onMounted(() => {
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
//监听modelStore.params.stcd数据变化，刷新数据
|
||||
watch(
|
||||
() => modelStore.params.stcd,
|
||||
(newStcd, oldStcd) => {
|
||||
// 避免初始化时的无效触发
|
||||
if (newStcd && newStcd !== oldStcd && props.url) {
|
||||
console.log('【BasicInfo】stcd 变化,重新加载数据:', newStcd);
|
||||
getData();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -27,9 +27,10 @@
|
||||
:search-params="{}" :transform-data="customTransform">
|
||||
<!-- 同期对比列的自定义渲染 -->
|
||||
<template #contrast="{ record }">
|
||||
<span v-if="record.wt && record.beforeWt"
|
||||
:style="{ color: (record.wt - record.beforeWt) > 0 ? 'rgb(255, 85, 0)' : 'rgb(135, 208, 104)' }">
|
||||
{{ (record.wt - record.beforeWt) > 0 ? '+' : '' }}{{ (record.wt - record.beforeWt).toFixed(2) }}
|
||||
<span v-if="record.wt && record.beforeWt"
|
||||
:style="{ color: (record.wt - record.beforeWt) > 0 ? 'rgb(255, 85, 0)' : 'rgb(135, 208, 104)' }">
|
||||
{{ (record.wt - record.beforeWt) > 0 ? '+' : '' }}{{ (record.wt -
|
||||
record.beforeWt).toFixed(2) }}
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
@ -243,7 +244,7 @@ const processChartData = (rawData: any[]) => {
|
||||
|
||||
// 过滤掉 wt 或 beforeWt 为 null 的记录
|
||||
const filtered = rawData.filter(item =>
|
||||
item.wt !== null && item.wt !== undefined
|
||||
item.wt !== null && item.wt !== undefined
|
||||
);
|
||||
// && item.beforeWt !== null && item.beforeWt !== undefined
|
||||
|
||||
@ -437,12 +438,12 @@ const getChartOption = computed(() => {
|
||||
interval: (() => {
|
||||
const dataLen = xAxisData.length;
|
||||
if (dataLen <= 8) return 0; // 数据少时全部显示
|
||||
|
||||
|
||||
// 计算最大允许的间隔，确保首尾都能显示
|
||||
// 需要显示的首尾2个 + 中间最多6个 = 总共8个标签
|
||||
const maxLabels = 8;
|
||||
const minInterval = Math.ceil((dataLen - 1) / (maxLabels - 1));
|
||||
|
||||
|
||||
// 如果原有计算的间隔更大，使用原有逻辑；否则使用最小间隔
|
||||
const calculatedInterval = Math.floor((dataLen - 1) / 7);
|
||||
return Math.max(calculatedInterval, minInterval);
|
||||
@ -606,6 +607,18 @@ onMounted(() => {
|
||||
onUnmounted(() => {
|
||||
destroyChart()
|
||||
});
|
||||
watch(
|
||||
() => modelStore.params.stcd,
|
||||
(newStcd, oldStcd) => {
|
||||
// 避免初始化时的无效触发
|
||||
if (newStcd && newStcd !== oldStcd) {
|
||||
console.log('【BasicInfo】stcd 变化,重新加载数据:', newStcd);
|
||||
getSelectOption()
|
||||
getEchartsData()
|
||||
gerTableData()
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<a-modal :open="visible" :title="title" width="80vw" :footer="null" :closable="true" @cancel="handleClose"
|
||||
:destroyOnClose="true" class="map-modal">
|
||||
<div v-if="modelStore.showStcdSelector" class="stcd-selector-wrapper">
|
||||
<a-select v-model:value="modelStore.params.stcd" placeholder="请选择测站" style="width: 240px; margin-bottom: 12px;"
|
||||
:options="modelStore.stcdOptions" show-search :filter-option="filterOption" @change="handleStcdChange">
|
||||
</a-select>
|
||||
</div>
|
||||
<a-tabs :active-key="currentActiveKey" @change="onTabChange">
|
||||
<a-tab-pane v-for="tab in tabsConfig" :key="tab.key" :tab="tab.name">
|
||||
<div class="content">
|
||||
@ -9,7 +14,7 @@
|
||||
<!-- 水温-监测数据 -->
|
||||
<WaterTemperature v-if="currentActiveKey === 'WaterTemperature'" />
|
||||
<!-- 水温-鱼类繁殖适宜性分析 -->
|
||||
<WaterTemperatureContrast v-if="currentActiveKey === 'WaterTemperatureRep'" />
|
||||
<WaterTemperatureContrast v-if="currentActiveKey === 'WaterTemperatureRep'" />
|
||||
<!-- 地图组件 -->
|
||||
<!-- <MapView v-else-if="currentActiveKey === 'mapView'" :data="modalData" /> -->
|
||||
<!-- 周边配套组件 -->
|
||||
@ -102,6 +107,9 @@ const onTabChange = (key: string) => {
|
||||
// 关闭弹窗
|
||||
const handleClose = () => {
|
||||
emit("update:visible", false);
|
||||
// 清理状态,避免影响下次打开
|
||||
modelStore.showStcdSelector = false;
|
||||
modelStore.stcdOptions = [];
|
||||
};
|
||||
|
||||
// 为了方便模板中使用，将 props.data 暴露给模板
|
||||
@ -112,6 +120,17 @@ watch(
|
||||
modalData.value = newVal;
|
||||
}
|
||||
);
|
||||
// 搜索过滤函数
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
// 处理测站切换
|
||||
const handleStcdChange = (newStcd: string) => {
|
||||
console.log('【测站切换】', newStcd);
|
||||
// 由于 BasicInfo.vue 监听了 stcd 变化,这里只需更新 store
|
||||
// 如果需要刷新所有 tab 的数据,可以在这里触发事件
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -210,6 +210,8 @@ const initChart = () => {
|
||||
modelStore.params.sttp = "fh_zq_point";
|
||||
modelStore.title = "水文监测";
|
||||
modelStore.params.stcd = select.value.value;
|
||||
modelStore.showStcdSelector = true
|
||||
modelStore.stcdOptions = select.value.options
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -697,17 +699,17 @@ const getChartData = async (startDate: string, endDate: string, stcd: string) =>
|
||||
console.warn('无效的日期数据:', item);
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
// 确保数值类型
|
||||
const q = typeof item.q === 'number' ? item.q : parseFloat(item.q);
|
||||
const z = typeof item.z === 'number' ? item.z : parseFloat(item.z);
|
||||
const v = typeof item.v === 'number' ? item.v : parseFloat(item.v);
|
||||
|
||||
|
||||
if (isNaN(q) || isNaN(z) || isNaN(v)) {
|
||||
console.warn('无效的水文数据:', item);
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
dt: item.dt.split(' ')[0], // 提取日期部分 "2026-05-03"
|
||||
v: v, // 确保数值类型
|
||||
|
||||
@ -331,6 +331,8 @@ const handleDataPointClick = (params: any) => {
|
||||
modelStore.params.sttp = "wt_point";
|
||||
modelStore.title = '水温监测';
|
||||
modelStore.params.stcd = dataItem.stcd;
|
||||
modelStore.showStcdSelector = true
|
||||
modelStore.stcdOptions = select.value.options
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -8,7 +8,8 @@ export const useModelStore = defineStore('model', () => {
|
||||
const tabList = ref([]);
|
||||
const title = ref('');
|
||||
const isBasicEdit = ref(false);
|
||||
|
||||
const showStcdSelector = ref(false); // 是否显示下拉框
|
||||
const stcdOptions = ref<Array<{ label: string, value: string }>>([]); // 可选测站列表
|
||||
const params = ref<{
|
||||
sttp: string;
|
||||
stcd: any;
|
||||
@ -27,5 +28,7 @@ export const useModelStore = defineStore('model', () => {
|
||||
tabList,
|
||||
title,
|
||||
isBasicEdit,
|
||||
showStcdSelector, // 新增
|
||||
stcdOptions // 新增
|
||||
};
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user