修改生态流量
This commit is contained in:
扈兆增
parent
c1dfff5fac
commit
00e1a3c09c
@ -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'
|
||||
|
||||
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
@ -21,18 +21,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row">
|
||||
<a-select
|
||||
v-model:value="timeType"
|
||||
style="width: 120px"
|
||||
:options="timeTypeOptions"
|
||||
/>
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
:format="dateFormat"
|
||||
:show-time="showTime ? showTimeConfig : false"
|
||||
:show-time="showTime"
|
||||
:allowClear="false"
|
||||
style="margin-left: 12px"
|
||||
:presets="datePresets"
|
||||
:presets="DateSetting.RangeButton.month1"
|
||||
/>
|
||||
<a-button
|
||||
type="primary"
|
||||
@ -62,8 +57,11 @@
|
||||
import { ref, onMounted, computed, watch, onUnmounted, nextTick } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import {
|
||||
getEngLimit,
|
||||
getMonitorDataWaterTempVerticalDay,
|
||||
getMonitorDataWaterTempVerticalHour
|
||||
getMonitorDataWaterTempVerticalHour,
|
||||
getMonitorDataWaterTempVerticalDayList,
|
||||
getMonitorDataWaterTempVerticalHourList
|
||||
} from '@/api/mapModal';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
@ -106,14 +104,7 @@ const dateRange = ref<[dayjs.Dayjs, dayjs.Dayjs] | undefined>(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) {
|
||||
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(() => {
|
||||
<style lang="scss" scoped>
|
||||
.ecological-flow {
|
||||
.top-section {
|
||||
padding: 16px;
|
||||
padding: 10px 8px;
|
||||
background: #fff;
|
||||
|
||||
.top-bar {
|
||||
|
||||
@ -1,12 +1,460 @@
|
||||
<template>
|
||||
<div>
|
||||
生态流量泄放设施
|
||||
<div class="flow-discharge">
|
||||
<a-tabs v-model:activeKey="activeTabKey">
|
||||
<a-tab-pane v-for="tab in tabsList" :key="tab.key" :tab="tab.name" />
|
||||
<template #rightExtra>
|
||||
<div class="search-bar">
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:show-time="showTimeConfig"
|
||||
:allowClear="false"
|
||||
:presets="DateSetting.RangeButton.month1"
|
||||
:disabled-date="disabledDate"
|
||||
/>
|
||||
<a-button type="primary" class="search-btn" @click="handleSearch">
|
||||
查询
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-tabs>
|
||||
|
||||
<a-spin :spinning="isLoading" tip="加载中...">
|
||||
<div class="tab-content">
|
||||
<div class="content-body">
|
||||
<div class="chart-wrapper">
|
||||
<div ref="chartRef" class="chart-container"></div>
|
||||
<a-empty
|
||||
v-if="!chartData || chartData.length === 0"
|
||||
description="暂无数据"
|
||||
class="chart-empty"
|
||||
/>
|
||||
</div>
|
||||
<div class="table-wrapper">
|
||||
<BasicTable
|
||||
:scrollY="480"
|
||||
:scrollX="tableScrollX"
|
||||
:columns="tableColumns"
|
||||
:data="tableData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import * as echarts from 'echarts';
|
||||
import { getFlowDischargeYear, getFlowDischargeList } from '@/api/mapModal';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import BasicTable from '@/components/BasicTable/index.vue';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
|
||||
const modelStore = useModelStore();
|
||||
|
||||
const props = defineProps({
|
||||
isActive: { type: Boolean, default: false }
|
||||
});
|
||||
|
||||
const hasLoaded = ref(false);
|
||||
const isLoading = ref(false);
|
||||
const tableData = ref<any[]>([]);
|
||||
const chartData = ref<any[]>([]);
|
||||
const chartRef = ref<HTMLElement>();
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
|
||||
const tabsList = [{ name: '生态流量泄放设施', key: 'stllxfss.tabs.jcsj' }];
|
||||
const activeTabKey = ref('stllxfss.tabs.jcsj');
|
||||
|
||||
// 时间选择器配置
|
||||
const showTimeConfig = {
|
||||
format: 'HH:mm',
|
||||
hourStep: 1,
|
||||
minuteStep: 5,
|
||||
secondStep: 60
|
||||
};
|
||||
const disabledDate = (current: Dayjs) =>
|
||||
current && current.isAfter(dayjs(), 'day');
|
||||
|
||||
const initDateRange = (): [Dayjs, Dayjs] => {
|
||||
return [dayjs().subtract(7, 'day'), dayjs()];
|
||||
};
|
||||
const dateRange = ref<[Dayjs, Dayjs] | undefined>(initDateRange());
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'tm',
|
||||
width: 180,
|
||||
fixed: 'left',
|
||||
customRender: ({ text }: any) =>
|
||||
text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
|
||||
},
|
||||
{
|
||||
title: '流量(m³/s)',
|
||||
dataIndex: 'q',
|
||||
width: 130,
|
||||
customRender: ({ text }: any) =>
|
||||
text !== undefined && text !== null ? Number(text) : '-'
|
||||
}
|
||||
];
|
||||
const tableScrollX = tableColumns.reduce((s, c) => s + (c.width || 100), 0);
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
if (chartInstance) chartInstance.dispose();
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
updateChart(chartData.value);
|
||||
};
|
||||
|
||||
// 更新图表
|
||||
const updateChart = (data: any[]) => {
|
||||
if (!chartInstance) return;
|
||||
if (!data || data.length === 0) {
|
||||
chartInstance.clear();
|
||||
return;
|
||||
}
|
||||
|
||||
const sorted = [...data].sort(
|
||||
(a, b) => new Date(a.tm).getTime() - new Date(b.tm).getTime()
|
||||
);
|
||||
|
||||
const xAxisData = sorted.map(item => {
|
||||
const hm = dayjs(item.tm).format('HH:mm');
|
||||
if (hm === '00:00') {
|
||||
const date = dayjs(item.tm).format('MM-DD');
|
||||
return `${hm}\n${date}`;
|
||||
}
|
||||
return hm;
|
||||
});
|
||||
|
||||
const qData = sorted.map(item => item.q);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(50, 50, 50, 0.9)',
|
||||
textStyle: { color: '#fff', fontSize: 12 },
|
||||
axisPointer: { type: 'cross' },
|
||||
formatter: (params: any) => {
|
||||
if (!params || params.length === 0) return '';
|
||||
const dataIndex = params[0].dataIndex;
|
||||
const fullTime = sorted[dataIndex]?.tm
|
||||
? dayjs(sorted[dataIndex].tm).format('YYYY-MM-DD HH:mm:ss')
|
||||
: '';
|
||||
let html = `<div style="font-size:16px;margin-bottom:8px;">${fullTime}</div>`;
|
||||
params.forEach((param: any) => {
|
||||
if (param.value == null) return;
|
||||
const displayValue = Number(param.value).toFixed(2);
|
||||
html += `
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin:4px 0;">
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${param.color};margin-right:8px;"></span>
|
||||
<span style="flex:1;font-size:14px;text-align:left;margin-right:6px;">${param.seriesName}: </span>
|
||||
<span style="font-size:14px;min-width:60px;text-align:right;"><strong>${displayValue}</strong> (m³/s)</span>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
return html;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
top: 10,
|
||||
data: ['流量'],
|
||||
textStyle: { fontSize: 12 }
|
||||
},
|
||||
grid: {
|
||||
left: 60,
|
||||
right: 60,
|
||||
top: 80,
|
||||
bottom: 60
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLine: { lineStyle: { color: '#000000' } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { fontSize: 12 },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: '#bfbfbf', type: 'solid' }
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '流量(m³/s)',
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
axisLine: { lineStyle: { color: '#000000' } },
|
||||
scale: true,
|
||||
splitNumber: 9
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '流量',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: qData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#12C1EA', width: 2 },
|
||||
itemStyle: { color: '#12C1EA' }
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0],
|
||||
throttle: 50,
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: { title: '保存为图片', type: 'png', pixelRatio: 2 }
|
||||
},
|
||||
right: 20,
|
||||
top: 10
|
||||
}
|
||||
};
|
||||
|
||||
chartInstance.setOption(option, true);
|
||||
};
|
||||
|
||||
// 获取默认日期
|
||||
const fetchDefaultDate = async () => {
|
||||
try {
|
||||
const filterParams = {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: 'stcd',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: modelStore.params.stcd
|
||||
},
|
||||
{
|
||||
field: 'sttpCode',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: 'EQ'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
const res = await getFlowDischargeYear(filterParams);
|
||||
const dates = res?.data?.data || [];
|
||||
|
||||
if (dates && dates.length > 0) {
|
||||
// 使用最后一个日期作为结束日期
|
||||
const endDate = dayjs(dates[dates.length - 1]);
|
||||
const startDate = endDate.subtract(7, 'day');
|
||||
dateRange.value = [startDate, endDate];
|
||||
} else {
|
||||
// 没有数据默认当前天
|
||||
dateRange.value = [dayjs().subtract(7, 'day'), dayjs()];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取默认日期失败:', error);
|
||||
// 失败时使用默认前7天
|
||||
dateRange.value = [dayjs().subtract(7, 'day'), dayjs()];
|
||||
}
|
||||
};
|
||||
|
||||
// 数据请求
|
||||
const fetchData = async () => {
|
||||
if (!dateRange.value) return;
|
||||
isLoading.value = true;
|
||||
|
||||
try {
|
||||
const filterParams = {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: 'stcd',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: modelStore.params.stcd
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
]
|
||||
},
|
||||
sort: [{ field: 'tm', dir: 'asc' }]
|
||||
};
|
||||
|
||||
const res = await getFlowDischargeList('EQ_R', filterParams);
|
||||
const rawData = res?.data?.data || res?.data?.records || [];
|
||||
|
||||
tableData.value = [...rawData].reverse();
|
||||
chartData.value = rawData;
|
||||
nextTick(() => updateChart(rawData));
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
tableData.value = [];
|
||||
chartData.value = [];
|
||||
if (chartInstance) chartInstance.clear();
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => fetchData();
|
||||
|
||||
const initData = async () => {
|
||||
if (hasLoaded.value) return;
|
||||
|
||||
// 先获取默认日期
|
||||
await fetchDefaultDate();
|
||||
|
||||
nextTick(() => initChart());
|
||||
fetchData();
|
||||
hasLoaded.value = true;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.isActive,
|
||||
active => {
|
||||
if (active && !hasLoaded.value) initData();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => modelStore.params.stcd,
|
||||
(newStcd, oldStcd) => {
|
||||
if (newStcd && newStcd !== oldStcd) {
|
||||
hasLoaded.value = false;
|
||||
initData();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let resizeObserver: ResizeObserver | null = null;
|
||||
|
||||
watch(
|
||||
() => props.isActive,
|
||||
active => {
|
||||
if (active && chartRef.value) {
|
||||
setTimeout(() => {
|
||||
if (chartInstance) chartInstance.resize();
|
||||
}, 200);
|
||||
if (!resizeObserver) {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
if (chartInstance) chartInstance.resize();
|
||||
});
|
||||
resizeObserver.observe(chartRef.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const handleResize = () => {
|
||||
if (chartInstance) chartInstance.resize();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (resizeObserver) {
|
||||
resizeObserver.disconnect();
|
||||
resizeObserver = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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);
|
||||
|
||||
@ -135,6 +135,11 @@
|
||||
:is-active="currentActiveKey === 'DZGJ'"
|
||||
:tabs-items="getTabChildren('DZGJ')"
|
||||
/>
|
||||
<!-- 生态流量泄放设施 - 监测数据 -->
|
||||
<FlowDischarge
|
||||
v-show="currentActiveKey === 'flowDischarge'"
|
||||
:is-active="currentActiveKey === 'flowDischarge'"
|
||||
/>
|
||||
<!-- 流量监测 -->
|
||||
<FlowMeasure
|
||||
v-show="currentActiveKey === 'FlowMeasure'"
|
||||
@ -264,6 +269,7 @@ import EarlyWarningAlert from './components/EarlyWarningAlert.vue'; // 预警提
|
||||
import FlowMeasure from './components/FlowMeasure.vue'; // 流量监测
|
||||
import FishFacilityMonitorData from './components/FishFacilityMonitorData.vue'; // 在线监测数据
|
||||
import FishFacilityRunState from './components/FishFacilityRunState.vue'; // 运行情况
|
||||
import FlowDischarge from './components/FlowDischarge.vue'; // 生态流量泄放设施 - 监测数据
|
||||
// 鱼类增殖站
|
||||
import NormalOperationData from './components/NormalOperationData/index.vue'; // 运行数据
|
||||
import ProcessDiagram from './components/ProcessDiagram.vue'; // 过程图
|
||||
|
||||
@ -166,6 +166,11 @@ const toggleGroup = (group: any) => {
|
||||
padding: 0 !important;
|
||||
:deep(.legendItem) {
|
||||
cursor: none;
|
||||
.legendIconTitle {
|
||||
span {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.legendIconTitle {
|
||||
cursor: auto;
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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<any[]>([]);
|
||||
const ecoFlowType = ref<string>('');
|
||||
@ -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();
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user