From 00e1a3c09cf35531fcb4ac1484164b5b0b63e522 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=89=88=E5=85=86=E5=A2=9E?= <你的邮箱@example.com> Date: Mon, 15 Jun 2026 14:10:19 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=94=9F=E6=80=81=E6=B5=81?= =?UTF-8?q?=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.env.development | 2 +- frontend/src/api/mapModal/index.ts | 43 +- .../MapModal/components/EcologicalFlow.vue | 115 +++-- .../MapModal/components/FlowDischarge.vue | 458 +++++++++++++++++- .../MapModal/components/MonitorInfo.vue | 8 + frontend/src/components/MapModal/index.vue | 6 + frontend/src/components/mapLegend/index.vue | 5 + .../TwoLayer/ModalYkzhbzdjcgz.vue | 3 +- .../ShengTaiLiuLiangDaBQKTwoLayer.vue | 24 +- frontend/src/store/modules/model.ts | 9 +- 10 files changed, 621 insertions(+), 52 deletions(-) diff --git a/frontend/.env.development b/frontend/.env.development index 4c7d7f69..7383bdd5 100644 --- a/frontend/.env.development +++ b/frontend/.env.development @@ -7,7 +7,7 @@ VITE_APP_TITLE = '水电水利建设项目全过程环境管理信息平台' VITE_APP_PORT = 3000 VITE_APP_BASE_API = '/dev-api' # 本地环境 -VITE_APP_BASE_URL = 'http://10.84.121.199:8093' +VITE_APP_BASE_URL = 'http://localhost:8093' # 测试环境 # VITE_APP_BASE_URL = 'http://172.16.21.142:8093' # VITE_APP_BASE_URL = 'http://172.16.21.142:8096' diff --git a/frontend/src/api/mapModal/index.ts b/frontend/src/api/mapModal/index.ts index 6b5b0025..3d57ef3b 100644 --- a/frontend/src/api/mapModal/index.ts +++ b/frontend/src/api/mapModal/index.ts @@ -204,16 +204,42 @@ export function getMonitorDataWaterQualityList(data: any) { data }); } + // 生态流量 - 限制范围查询 - 日 export function getMonitorDataWaterTempVerticalDay(data: any) { return request({ - url: '/eq/data/day/GetKendoListCust', + url: '/eq/interval/qgc/day/GetKendoListCust', method: 'post', data }); } // 生态流量 - 限制范围查询 - 小时 export function getMonitorDataWaterTempVerticalHour(data: any) { + return request({ + url: '/eq/interval/qgc/hour/GetKendoListCust', + method: 'post', + data + }); +} +// 生态流量 - 查询限制和来源 +export function getEngLimit(data: any) { + return request({ + url: '/eq/data/getEngLimit', + method: 'post', + data + }); +} + +// 生态流量 - 列表 - 日 +export function getMonitorDataWaterTempVerticalDayList(data: any) { + return request({ + url: '/eq/data/day/GetKendoListCust', + method: 'post', + data + }); +} +// 生态流量 - 列表 - 小时 +export function getMonitorDataWaterTempVerticalHourList(data: any) { return request({ url: '/eq/data/GetKendoListCust', method: 'post', @@ -493,3 +519,18 @@ export function getFishDistributionList(data: any) { data }); } +// 生态流量泄放设施 - 监测数据 年份 没接 +export function getFlowDischargeYear(data: any) { + return request({ + url: '/wmp-env-server/env/operat/default/year', + method: 'post', + data + }); +} +export function getFlowDischargeList(code: string, data: any) { + return request({ + url: `/apo/dec-lygk-base-server/base/stbprpData/GetKendoListCust?tbCode=${code}`, + method: 'post', + data + }); +} diff --git a/frontend/src/components/MapModal/components/EcologicalFlow.vue b/frontend/src/components/MapModal/components/EcologicalFlow.vue index 0f1ecafe..a1f94f26 100644 --- a/frontend/src/components/MapModal/components/EcologicalFlow.vue +++ b/frontend/src/components/MapModal/components/EcologicalFlow.vue @@ -21,18 +21,13 @@
- (initDateRange()); // 时间选择器配置 const showTime = computed(() => timeType.value === 'hour'); -const dateFormat = computed(() => - timeType.value === 'hour' ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD' -); -const datePresets = computed(() => - timeType.value === 'day' - ? DateSetting.RangeButton.month1 - : DateSetting.RangeButton.hour -); +const dateFormat = computed(() => 'YYYY-MM-DD'); const showTimeConfig = { format: 'HH:mm', hourStep: 1, @@ -141,7 +132,7 @@ const fetchLimitInfo = async () => { const stcd = modelStore.params.stcd; const { startTime, endTime } = getDateRange(); - const res = await getMonitorDataWaterTempVerticalHour({ + const res = await getEngLimit({ filter: { logic: 'and', filters: [ @@ -162,7 +153,15 @@ const fetchLimitInfo = async () => { } }); if (res?.data) { - limitInfo.value = res.data.eqmnStr || ''; + if (modelStore.filter.stllgzlx === 'qecInterval') { + limitInfo.value = res.data.eqmnStr || ''; + } else if (modelStore.filter.stllgzlx === 'mwrInterval') { + limitInfo.value = res.data.eqmnmwrStr || ''; + } else if (modelStore.filter.stllgzlx === 'avqInterval') { + limitInfo.value = res.data.avqStr || ''; + } else { + limitInfo.value = ''; + } } } catch (error) { console.error('获取限值信息失败:', error); @@ -174,8 +173,7 @@ const fetchDayData = async () => { try { const stcd = modelStore.params.stcd; const { startTime, endTime } = getDateRange(); - - const res = await getMonitorDataWaterTempVerticalDay({ + const filter = { filter: { logic: 'and', filters: [ @@ -194,19 +192,62 @@ const fetchDayData = async () => { } ] } - }); + }; + + const apiFn = + timeType.value === 'day' + ? getMonitorDataWaterTempVerticalDay + : getMonitorDataWaterTempVerticalHour; + + const res = await apiFn(filter); if (res?.data && res?.data?.data && res?.data?.data[0]) { const record = res.data?.data[0]?.lastTmEngEqDataVo || res.data?.data[0]; - if ( - res.data?.data[0]?.qecRate !== null && - res.data?.data[0]?.qecRate !== undefined - ) { - complianceRate.value = Number(res.data?.data[0]?.qecRate).toFixed(2); + if (modelStore.filter.stllgzlx === 'qecInterval') { + complianceRate.value = + Number(res.data?.data[0]?.qecRate).toFixed(2) || ''; + } else if (modelStore.filter.stllgzlx === 'mwrInterval') { + complianceRate.value = + Number(res.data?.data[0]?.mwrRate).toFixed(2) || ''; + } else if (modelStore.filter.stllgzlx === 'avqInterval') { + complianceRate.value = + Number(res.data?.data[0]?.avqRate).toFixed(2) || ''; } if (record.qecC !== null && record.qecC !== undefined) { unqualifiedCount.value = record.qecC; } } + if (modelStore.filter.stllgzlx === 'qecInterval') { + filter.filter.filters.push({ + field: 'sfdb', + operator: 'eq', + dataType: 'string', + value: 0 + }); + } else if (modelStore.filter.stllgzlx === 'mwrInterval') { + filter.filter.filters.push({ + field: 'mwrSfdb', + operator: 'eq', + dataType: 'string', + value: 0 + }); + } else if (modelStore.filter.stllgzlx === 'avqInterval') { + filter.filter.filters.push({ + field: 'avqSfdb', + operator: 'eq', + dataType: 'string', + value: 0 + }); + } + + const apiFn1 = + timeType.value === 'day' + ? getMonitorDataWaterTempVerticalDayList + : getMonitorDataWaterTempVerticalHourList; + + let hourRes = await apiFn1(filter); + if (hourRes.data) { + unqualifiedCount.value = hourRes.data.total; + } } catch (error) { console.error('获取日数据失败:', error); } @@ -260,7 +301,6 @@ const updateChart = (data: any[]) => { formatter: (params: any) => { if (!params || params.length === 0) return ''; const dataIndex = params[0].dataIndex; - console.log(sorted[dataIndex]); const fullTime = timeType.value === 'hour' ? sorted[dataIndex]?.tm @@ -403,7 +443,6 @@ const updateChart = (data: any[]) => { }; const initChart = () => { - console.log(chartRef.value); if (!chartRef.value) return; if (chartInstance) { chartInstance.dispose(); @@ -436,8 +475,8 @@ const fetchChartData = async () => { const apiFn = timeType.value === 'day' - ? getMonitorDataWaterTempVerticalDay - : getMonitorDataWaterTempVerticalHour; + ? getMonitorDataWaterTempVerticalDayList + : getMonitorDataWaterTempVerticalHourList; const res = await apiFn({ filter: { @@ -482,17 +521,17 @@ const handleQuery = () => { fetchChartData(); }; -// 监听 timeType 切换时重置日期范围 -watch(timeType, () => { - dateRange.value = initDateRange(); - hasData.value = true; - fetchChartData(); -}); - watch( () => props.isActive, active => { if (active && !hasLoaded.value) { + timeType.value = modelStore.filter.stllTmType; + if (modelStore.filter.rangeTm.length > 0) { + dateRange.value = [ + dayjs(modelStore.filter.rangeTm[0]), + dayjs(modelStore.filter.rangeTm[1]) + ]; + } fetchLimitInfo(); fetchDayData(); // 初始化图表 @@ -519,7 +558,7 @@ onUnmounted(() => { \ No newline at end of file +.flow-discharge { + width: 100%; + min-height: 600px; + position: relative; + + :deep(.ant-tabs-nav) { + margin-bottom: 4px; + } + + .search-bar { + width: 100%; + margin-bottom: 12px; + display: flex; + align-items: center; + justify-content: flex-end; + + .search-btn { + margin-left: 8px; + } + } + + .tab-content { + width: 100%; + + .content-body { + width: 100%; + display: flex; + height: 600px; + position: relative; + + .chart-wrapper { + flex: 1; + height: 100%; + position: relative; + box-sizing: border-box; + padding-top: 10px; + + .chart-container { + width: 100%; + height: 100%; + } + } + + .chart-empty { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .table-wrapper { + flex: 1; + min-width: 500px; + height: 100%; + box-sizing: border-box; + padding: 10px; + overflow: hidden; + overflow-x: auto; + border-left: 1px solid #dcdfe6; + margin-left: 10px; + } + } + } +} + diff --git a/frontend/src/components/MapModal/components/MonitorInfo.vue b/frontend/src/components/MapModal/components/MonitorInfo.vue index 7738e8e8..cb84f74f 100644 --- a/frontend/src/components/MapModal/components/MonitorInfo.vue +++ b/frontend/src/components/MapModal/components/MonitorInfo.vue @@ -495,6 +495,14 @@ watch( () => props.isActive, active => { if (active && chartRef.value) { + console.log(modelStore.filter.rangeTm); + + if (modelStore.filter.rangeTm.length > 0) { + dateRange.value = [ + dayjs(modelStore.filter.rangeTm[0]), + dayjs(modelStore.filter.rangeTm[1]) + ]; + } setTimeout(() => { if (chartInstance) chartInstance.resize(); }, 200); diff --git a/frontend/src/components/MapModal/index.vue b/frontend/src/components/MapModal/index.vue index 664db0b7..0bdcf287 100644 --- a/frontend/src/components/MapModal/index.vue +++ b/frontend/src/components/MapModal/index.vue @@ -135,6 +135,11 @@ :is-active="currentActiveKey === 'DZGJ'" :tabs-items="getTabChildren('DZGJ')" /> + + { padding: 0 !important; :deep(.legendItem) { cursor: none; + .legendIconTitle { + span { + white-space: nowrap !important; + } + } &:hover { .legendIconTitle { cursor: auto; diff --git a/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue b/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue index 85553140..63cea5e1 100644 --- a/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue +++ b/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue @@ -390,7 +390,8 @@ const handleView = (record: any) => { modelStore.title = record.stnm; modelStore.params.stcd = record.stcd; modelStore.params.eqtp = 'QGC'; - modelStore.filterStll = 'qecInterval'; + modelStore.filter.stllgzlx = 'qecInterval'; + modelStore.filter.stllTmType = 'day'; }; onMounted(() => { handleChange(); diff --git a/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue b/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue index 385787c7..8f87e523 100644 --- a/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue +++ b/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue @@ -76,9 +76,7 @@ :columns="columns" :scrollY="380" :list-url=" - params.timeType == 'day' - ? dayGetKendoListCust - : hourGetKendoListCust + activeTimeType == 'day' ? dayGetKendoListCust : hourGetKendoListCust " :search-params="searchParams" :transform-data="customTransform" @@ -245,6 +243,12 @@ const params = ref({ eTime: '' }); +// 记录实际查询时使用的 timeType、key 和时间范围（用于 handleView 传递正确值） +const activeTimeType = ref(props.time || 'day'); +const activeKey = ref(props.typeKey || ''); +const activeSTime = ref(''); +const activeETime = ref(''); + // Tab 相关状态 const tabList = ref([]); const ecoFlowType = ref(''); @@ -764,7 +768,9 @@ const handleView = (record: any) => { modelStore.title = record.ennm; modelStore.params.stcd = record.stcd; modelStore.params.eqtp = record.eqtp; - modelStore.filterStll = params.value.key; + modelStore.filter.stllgzlx = activeKey.value; + modelStore.filter.stllTmType = activeTimeType.value; + modelStore.filter.rangeTm = [activeSTime.value, activeETime.value]; }; //获取table数据 const fetchTableData = async () => { @@ -867,6 +873,12 @@ const handleSearch = () => { params.value.eTime = dateRange.value[1].format('YYYY-MM-DD 23:59:59'); } + // 记录当前查询使用的 timeType、key 和时间范围 + activeTimeType.value = params.value.timeType; + activeKey.value = params.value.key; + activeSTime.value = params.value.sTime; + activeETime.value = params.value.eTime; + // 重新获取 Tab 列表 fetchTabList(); }; @@ -875,6 +887,10 @@ onMounted(() => { if (dateRange.value && dateRange.value.length === 2) { params.value.sTime = dateRange.value[0].format('YYYY-MM-DD 00:00:00'); params.value.eTime = dateRange.value[1].format('YYYY-MM-DD 23:59:59'); + activeTimeType.value = params.value.timeType; + activeKey.value = params.value.key; + activeSTime.value = params.value.sTime; + activeETime.value = params.value.eTime; fetchTabList(); } diff --git a/frontend/src/store/modules/model.ts b/frontend/src/store/modules/model.ts index 7abffdf9..58cc6681 100644 --- a/frontend/src/store/modules/model.ts +++ b/frontend/src/store/modules/model.ts @@ -47,7 +47,12 @@ export const useModelStore = defineStore('model', () => { dtinType: '', bldstt: '' }); - const filterStll = ref(''); + const filter = ref({ + stllgzlx: '', // 生态流量 - 规则类型 + stllTmType: '', // 生态流量 - 时间类型 + tm: '', + rangeTm: [] + }); return { params, modalVisible, @@ -58,7 +63,7 @@ export const useModelStore = defineStore('model', () => { isBasicEdit, showStcdSelector, // 新增 stcdOptions, // 新增 - filterStll, + filter, // 新增返回字段 baseId, hasPowerStatData,