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-01 08:38:48 +08:00
commit 1fbc8ced7a
19 changed files with 3180 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/.env.development
View File

@ -7,12 +7,12 @@ VITE_APP_TITLE = '水电水利建设项目全过程环境管理信息平台'
VITE_APP_PORT = 3000
VITE_APP_BASE_API = '/dev-api'
# 本地环境
# VITE_APP_BASE_URL = 'http://localhost: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'
# 汤伟
VITE_APP_BASE_URL = 'http://10.84.121.21:8093'
# VITE_APP_BASE_URL = 'http://10.84.121.21:8093'
# VITE_APP_BASE_URL = 'http://192.168.1.162:8093'
# 测试环境线上

50
frontend/src/api/sz/index.ts Normal file
View File

@ -0,0 +1,50 @@
import request from '@/utils/request';
//水质监测工作开展情况
export function msstbprptGetKendoList(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
method: 'post',
data
});
}
////水温监测工作开展情况弹框
export function vmsstbprptGetKendoList(data: any) {
return request({
url: '/wq/vmsstbprpt/GetKendoList',
method: 'post',
data
});
}
//地表水水质达标率
export function wqGetKendoListCust(data: any) {
return request({
url: '/api/wmp-env-server/env/wq/GetKendoListCust',
method: 'post',
data
});
}
//环境质量满足度 - 表格数据列表
export function wqGetKendoList(data: any) {
return request({
url: '/api/wmp-env-server/env/wq/GetKendoListCust',
method: 'post',
data
});
}
//沿程水质变化_ 图表数据
export function qgcGetKendoListCust(data: any) {
return request({
url: '/api/wmp-env-server/env/wq/along/qgc/GetKendoListCust',
method: 'post',
data
});
}
//沿程水质变化_ 根据流域获取河段 https://211.99.26.225:12122
export function wbsbGetKendoList(data: any) {
return request({
url: '/api/dec-lygk-base-server/base/wbsb/GetKendoList',
method: 'post',
data
});
}

32
frontend/src/components/MapModal/column.config.ts
View File

@ -1455,7 +1455,7 @@ const FPPointColumns: Array<any> = [
filed: 'inv',
visible: true,
type: 'number',
toFixed: 4,
toFixed: 6,
url: '',
},
{
@ -1629,7 +1629,7 @@ const FBPointColumns: Array<any> = [
filed: 'inv',
visible: true,
type: 'number',
toFixed: 4,
toFixed: 6,
url: '',
},
{
@ -1760,7 +1760,7 @@ const VaPointColumns: Array<any> = [
filed: 'inv',
visible: true,
type: 'number',
toFixed: 4,
toFixed: 6,
url: '',
},
{
@ -2149,6 +2149,7 @@ const DwPointColumns: Array<any> = [
filed: 'nrmxavwt',
visible: true,
type: 'number',
toFixed: 1,
url: '',
},
{
@ -2156,6 +2157,7 @@ const DwPointColumns: Array<any> = [
filed: 'nrmnavwt',
visible: true,
type: 'number',
toFixed: 1,
url: '',
},
{
@ -2163,6 +2165,7 @@ const DwPointColumns: Array<any> = [
filed: 'dnavwt',
visible: true,
type: 'number',
toFixed: 1,
url: '',
},
{
@ -2170,6 +2173,7 @@ const DwPointColumns: Array<any> = [
filed: 'dnmxavwt',
visible: true,
type: 'number',
toFixed: 1,
url: '',
},
{
@ -2177,6 +2181,7 @@ const DwPointColumns: Array<any> = [
filed: 'dnwnavwt',
visible: true,
type: 'number',
toFixed: 1,
url: '',
},
{
@ -2200,7 +2205,7 @@ const DwPointColumns: Array<any> = [
filed: 'inv',
visible: true,
type: 'number',
toFixed: 4,
toFixed: 6,
url: '',
},
{
@ -2336,6 +2341,7 @@ const DwFivePointColumns: Array<any> = [
filed: 'nrmxavwt',
visible: true,
type: 'number',
toFixed: 1,
url: '',
},
{
@ -2343,6 +2349,7 @@ const DwFivePointColumns: Array<any> = [
filed: 'nrmnavwt',
visible: true,
type: 'number',
toFixed: 1,
url: '',
},
{
@ -2350,6 +2357,7 @@ const DwFivePointColumns: Array<any> = [
filed: 'dnavwt',
visible: true,
type: 'number',
toFixed: 1,
url: '',
},
{
@ -2357,6 +2365,7 @@ const DwFivePointColumns: Array<any> = [
filed: 'dnmxavwt',
visible: true,
type: 'number',
toFixed: 1,
url: '',
},
{
@ -2364,6 +2373,7 @@ const DwFivePointColumns: Array<any> = [
filed: 'dnwnavwt',
visible: true,
type: 'number',
toFixed: 1,
url: '',
},
@ -2372,7 +2382,7 @@ const DwFivePointColumns: Array<any> = [
filed: 'inv',
visible: true,
type: 'number',
toFixed: 4,
toFixed: 6,
url: '',
},
{
@ -2627,7 +2637,7 @@ const DwOnePointColumns: Array<any> = [
filed: 'nrmxavwt',
visible: true,
type: 'number',
toFixed: 2,
toFixed: 1,
url: '',
},
{
@ -2635,7 +2645,7 @@ const DwOnePointColumns: Array<any> = [
filed: 'nrmnavwt',
visible: true,
type: 'number',
toFixed: 2,
toFixed: 1,
url: '',
},
{
@ -2643,7 +2653,7 @@ const DwOnePointColumns: Array<any> = [
filed: 'dnavwt',
visible: true,
type: 'number',
toFixed: 2,
toFixed: 1,
url: '',
},
{
@ -2651,7 +2661,7 @@ const DwOnePointColumns: Array<any> = [
filed: 'dnmxavwt',
visible: true,
type: 'number',
toFixed: 2,
toFixed: 1,
url: '',
},
{
@ -2659,7 +2669,7 @@ const DwOnePointColumns: Array<any> = [
filed: 'dnmnavwt',
visible: true,
type: 'number',
toFixed: 2,
toFixed: 1,
url: '',
},
{
@ -2667,7 +2677,7 @@ const DwOnePointColumns: Array<any> = [
filed: 'inv',
visible: true,
type: 'number',
toFixed: 4,
toFixed: 6,
url: '',
},
{

17
frontend/src/components/MapModal/components/WaterTemperatureContrast.vue
View File

@ -392,11 +392,12 @@ const getChartOption = computed(() => {
params.forEach((param: any) => {
const dataIndex = param.dataIndex;
const record = data[dataIndex];
const value = param.value != null ? param.value : '-';
html += `
<div style="display:flex;align-items:center;margin:4px 0;">
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${param.color};margin-right:8px;"></span>
<span>${param.seriesName}: ${param.value}°C</span>
<span>${param.seriesName}: ${value}°C</span>
</div>
`;
@ -433,7 +434,19 @@ const getChartOption = computed(() => {
show: false
},
axisLabel: {
interval: xAxisData.length > 7 ? Math.floor((xAxisData.length - 1) / 7) : 0,
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);
})(),
fontSize: 12,
rotate: 0,
margin: 10

2
frontend/src/components/MapModal/setting.config.ts
View File

@ -661,7 +661,7 @@ const WQFBTabs: Array<any> = [
name: '基础信息',
key: 'basicInfo',
type: 'basic',
url: '/bbi/siteBipc/getSiteBasicInfo'
url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo'
},
{
name: '监测数据',

54
frontend/src/components/SidePanelItem/index.vue
View File

@ -71,7 +71,7 @@
</template>
<script lang="ts" setup>
import { ref, onMounted, watch, computed, nextTick } from 'vue';
import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
import {
QuestionCircleOutlined,
InfoCircleOutlined
@ -186,6 +186,9 @@ const scopeDateValue = ref<[Dayjs, Dayjs] | undefined>(
);
const tabsValue = ref(props.tabs.value)
// 保存最后一次选择的月份值（用于从year切换回month时恢复月份）
const lastMonthValue = ref<string | null>(null);
// 树形选择器展开状态管理
const treeExpandedKeys = ref<string[]>([])
const nodeMap = new Map<string, { node: any; parentKey: string | null }>()
@ -229,15 +232,19 @@ const createDisabledDateFn = (pickerType: string) => {
/**
* 单日期选择器的时间禁用函数（针对 show-time）
* 精确限制到当前时刻的时分秒
* @param current - 用户当前悬停或选择的日期（由 Ant Design Vue 自动传入）
*/
const disabledTimeForSinglePicker = () => {
const disabledTimeForSinglePicker = (current?: Dayjs) => {
// 只在 datetimePicker 显示且为 date 类型时生效
if (!props.datetimePicker.show || props.datetimePicker.picker !== 'date') {
return undefined
}
const now = dayjs()
const selectedDate = datetimeValue.value
// 关键修复：使用传入的 current 参数，而不是 datetimeValue.value
// current 是用户当前在面板中操作的日期，会实时响应面板内的日期切换
const selectedDate = current || datetimeValue.value
// 如果未选择日期，或选择的不是今天，则不限制时间
if (!selectedDate || !selectedDate.isSame(now, 'day')) {
@ -531,7 +538,10 @@ const getPopupContainer = (trigger: HTMLElement) => {
//时间选择框事件处理
const handleDateTimeChange = (date: any | null, dateString: string) => {
// Handle date time change
// 当选择器为 month 时，保存当前选择的月份值
if (props.datetimePicker.picker === 'month' && date) {
lastMonthValue.value = dayjs(date).format('YYYY-MM');
}
};
const handleTabClick = (value: string) => {
@ -654,6 +664,31 @@ watch(
}
);
// 监听 datetimePicker.picker 的变化，处理从 year 切换到 month 时的月份恢复
watch(
() => props.datetimePicker.picker,
(newPicker, oldPicker) => {
// 当从 year 切换到 month 时，恢复之前保存的月份
if (oldPicker === 'year' && newPicker === 'month' && lastMonthValue.value && datetimeValue.value) {
const currentYear = datetimeValue.value.year(); // 获取当前选择的年份
const lastMonth = dayjs(lastMonthValue.value); // 获取上次保存的月份值
const lastMonthNum = lastMonth.month(); // 获取月份（0-11）
// 组合：新选择的年份 + 上次选择的月份
let newValue = dayjs().year(currentYear).month(lastMonthNum);
// 检查组合后的时间是否超过当前时间
const now = dayjs();
if (newValue.isAfter(now, 'month')) {
// 超过当前月份，修正为当前月份
newValue = now.startOf('month');
}
datetimeValue.value = newValue;
}
}
);
// 监听 moreSelectValue 变化（包括默认值和用户选择）
watch(() => moreSelectValue.value, (newValue) => {
console.log('moreSelectValue 变化:', newValue)
@ -691,9 +726,20 @@ watch(() => processedMoreSelectOptions.value, (newData) => {
// 页面加载时执行的逻辑
onMounted(() => {
// 如果初始 picker 是 month，保存初始月份值
if (props.datetimePicker.picker === 'month' && datetimeValue.value) {
lastMonthValue.value = datetimeValue.value.format('YYYY-MM');
}
// 初始化时发送一次默认值
emitAllValues();
});
// 组件卸载时清空状态，避免影响其他页面
onUnmounted(() => {
// 清空月份记忆，防止组件复用时的状态污染
lastMonthValue.value = null;
});
</script>
<style lang="scss">

844
frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue Normal file
View File

@ -0,0 +1,844 @@
<template>
<div class="environmental-quality-container">
<!-- 搜索区域 -->
<a-form ref="formRef" :model="formState" layout="inline" class="search-form">
<a-space wrap>
<a-form-item label="所属基地" name="dataDimensionVal">
<a-select
v-model:value="formState.dataDimensionVal"
placeholder="请选择"
style="width: 120px"
show-search
:filter-option="filterBaseOption"
option-filter-prop="label"
@change="handleBaseChange"
>
<a-select-option
v-for="item in baseList"
:key="item.baseid"
:value="item.baseid"
:label="item.basename"
>
{{ item.basename }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item v-if="formState.dataDimensionVal === 'all'" label="测站类型" name="dtinType">
<a-select
v-model:value="formState.dtinType"
placeholder="请选择"
style="width: 100px"
show-search
:filter-option="filterOption"
option-filter-prop="label"
>
<a-select-option value="" label="全部">全部</a-select-option>
<a-select-option value="0" label="自建水质站">自建水质站</a-select-option>
<a-select-option value="1" label="国家水质站">国家水质站</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="时间维度" name="types">
<a-select
v-model:value="formState.types"
placeholder="请选择"
style="width: 80px"
show-search
:filter-option="filterOption"
option-filter-prop="label"
>
<a-select-option value="year" label="年度">年度</a-select-option>
<a-select-option value="month" label="月度">月度</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="达标状态" name="sfdb">
<a-select
v-model:value="formState.sfdb"
placeholder="请选择"
style="width: 100px"
show-search
:filter-option="filterOption"
option-filter-prop="label"
>
<a-select-option value="" label="全部">全部</a-select-option>
<a-select-option value="0" label="不达标">不达标</a-select-option>
<a-select-option value="1" label="达标">达标</a-select-option>
<a-select-option value="2" label="无目标等级/无数据">无目标等级/无数据</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="时间" name="dateValues">
<a-month-picker
v-if="formState.types === 'month'"
v-model:value="formState.dateValues"
format="YYYY-MM"
placeholder="请选择月份"
style="width: 160px"
:disabled-date="disabledMonthDate"
/>
<a-year-picker
v-else
v-model:value="formState.dateValues"
format="YYYY"
placeholder="请选择年份"
style="width: 160px"
:disabled-date="disabledYearDate"
/>
</a-form-item>
<a-form-item label="断面名称" name="stnm">
<a-input
v-model:value="formState.stnm"
placeholder="请输入断面名称"
style="width: 200px"
allow-clear
/>
</a-form-item>
<a-form-item>
<a-space>
<a-button type="primary" @click="handleSearch">查询</a-button>
<a-button @click="handleReset">重置</a-button>
</a-space>
</a-form-item>
</a-space>
</a-form>
<!-- 图表和表格布局区域 -->
<div class="content-layout">
<!-- 左侧饼图区域 -->
<div class="chart-section">
<a-spin :spinning="pieLoading" tip="加载中...">
<div ref="pieChartRef" class="pie-chart-container"></div>
<div v-if="!showPieChart && !pieLoading" class="empty-overlay">
<a-empty description="暂无数据" />
</div>
</a-spin>
</div>
<!-- 右侧表格区域 -->
<div class="table-section">
<BasicTable
ref="tableRef"
:scrollY="360"
:columns="columns"
:list-url="wqGetKendoList"
:search-params="{ sort: sortConfig }"
:transform-data="customTransform"
>
<template #bodyCell="{ column, record }">
<!-- 断面名称列 - 可点击 -->
<template v-if="column.key === 'stnm'">
<a @click="handleViewStnmDetail(record)" class="text-link">
{{ record.stnm }}
</a>
</template>
<!-- 操作列 -->
<template v-if="column.key === 'action'">
<a @click="handleViewDetail(record)" class="text-link">
查看详情
</a>
</template>
</template>
</BasicTable>
</div>
</div>
<!-- 详情弹窗 -->
<a-modal
v-model:open="detailModalVisible"
:title="`${detailData.stnm || ''} 详细信息`"
width="80%"
:footer="null"
@cancel="handleDetailModalClose"
>
<div class="modal-content">
<!-- TODO: 这里放置详情组件，待后续实现 -->
<p>详情内容待实现...</p>
<pre>{{ detailData }}</pre>
</div>
</a-modal>
<!-- 地图弹窗（断面名称点击） -->
<a-modal
v-model:open="mapModalVisible"
:title="`${mapModalData.titleName || ''} 详情信息`"
width="80%"
:footer="null"
@cancel="handleMapModalClose"
>
<div class="modal-content">
<!-- TODO: 这里放置地图标签页组件，待后续实现 -->
<p>地图详情内容待实现...</p>
<pre>{{ mapModalData }}</pre>
</div>
</a-modal>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import { message } from 'ant-design-vue'
import * as echarts from 'echarts'
import dayjs, { Dayjs } from 'dayjs'
import BasicTable from '@/components/BasicTable/index.vue'
import { wqGetKendoList } from '@/api/sz'
// Props 定义
const props = defineProps<{
datas?: Array<{ baseid: string; basename: string }> // 基地列表
type?: 'month' | 'year' // 时间维度
modalData?: string // 模态框数据
dateValue?: string | Dayjs // 日期值
dataDimensionVal?: string // 数据维度值
buildType?: string | number // 建设类型
}>()
// Refs
const formRef = ref()
const tableRef = ref()
const pieChartRef = ref<HTMLElement | null>(null)
let pieChartInstance: echarts.ECharts | null = null
// State
const formState = reactive({
dataDimensionVal: props.dataDimensionVal || '',
dtinType: '',
types: props.type || 'month',
sfdb: '',
dateValues: props.dateValue ? (typeof props.dateValue === 'string' ? dayjs(props.dateValue, props.type === 'month' ? 'YYYY-MM' : 'YYYY') : props.dateValue) : dayjs(),
stnm: ''
})
const baseList = computed(() => props.datas || [])
const pieLoading = ref(false)
const showPieChart = ref(true)
const pieCode = ref<string[]>([]) // 饼图选中的代码，用于过滤表格
// 弹窗相关
const detailModalVisible = ref(false)
const detailData = ref<any>({})
const mapModalVisible = ref(false)
const mapModalData = ref<any>({})
// 排序配置
const sortConfig = computed(() => [
{ field: 'rstcdStepSort', dir: 'asc' },
{ field: 'stnm', dir: 'asc' },
{ field: 'tm', dir: 'desc' }
])
// 获取列表URL
const getListUrl = async (params: any) => {
try {
const res = await wqGetKendoList(params)
return res
} catch (error) {
console.error('获取表格数据失败:', error)
message.error('获取表格数据失败')
return { data: { data: [], total: 0 } }
}
}
// 自定义数据转换
const customTransform = (res: any) => {
return {
records: res?.data?.data || [],
total: res?.data?.total || 0
}
}
// 表格列定义
const columns = [
{
title: '日期',
dataIndex: 'tm',
key: 'tm',
width: 120,
customRender: ({ record }: any) => {
const date = record.tm
if (!date) return '-'
if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
return date
}
if (typeof date === 'string' && date.includes(' ')) {
return date.split(' ')[0]
}
return date
}
},
{
title: '断面名称',
dataIndex: 'stnm',
key: 'stnm',
width: 150,
ellipsis: true
},
{
title: '断面编码',
dataIndex: 'stcd',
key: 'stcd',
width: 120,
visible: false
},
{
title: '测站类型',
dataIndex: 'sttypeName',
key: 'sttypeName',
width: 120
},
{
title: '达标状态',
dataIndex: 'sfdbName',
key: 'sfdbName',
width: 120
},
{
title: '水质要求',
dataIndex: 'wwqtgName',
key: 'wwqtgName',
width: 120
},
{
title: '当前水质',
dataIndex: 'wqGrdName',
key: 'wqGrdName',
width: 120
},
{
title: '去年同期水质',
dataIndex: 'beforeWqGrdName',
key: 'beforeWqGrdName',
width: 150
},
{
title: '操作',
key: 'action',
width: 100,
fixed: 'right'
}
]
// 禁用未来月份
const disabledMonthDate = (current: Dayjs) => {
if (!current) return false
const now = dayjs()
return current.isAfter(now, 'month')
}
// 禁用未去年份
const disabledYearDate = (current: Dayjs) => {
if (!current) return false
const now = dayjs()
return current.year() > now.year()
}
// 基地选择器搜索过滤函数
const filterBaseOption = (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
// 通用下拉框搜索过滤函数
const filterOption = (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
// 获取饼图数据
const fetchPieData = async () => {
pieLoading.value = true
try {
// 计算时间参数
const timeFormat = formState.types === 'month' ? 'YYYY-MM' : 'YYYY'
const startTime = formState.dateValues ? formState.dateValues.format(timeFormat) : ''
if (!startTime || !formState.dataDimensionVal) {
showPieChart.value = false
return
}
// 构建请求参数
const filters: any[] = [
{
field: 'baseId',
operator: 'eq',
dataType: 'string',
value: formState.dataDimensionVal
},
{
field: 'type',
operator: 'eq',
dataType: 'string',
value: 'DAY'
},
formState.types === 'month' ? {
field: 'drMonth',
operator: 'eq',
dataType: 'string',
value: startTime
} : {
field: 'drYear',
operator: 'eq',
dataType: 'string',
value: startTime
},
formState.dataDimensionVal !== 'all' ? {
field: 'rstcd',
operator: 'eq',
dataType: 'string',
value: formState.dataDimensionVal
} : null,
formState.sfdb ? {
field: 'sfdb',
operator: 'eq',
dataType: 'string',
value: formState.sfdb
} : null,
formState.stnm ? {
field: 'stnm',
operator: 'contains',
dataType: 'string',
value: formState.stnm
} : null,
formState.dataDimensionVal == 'all' && formState.dtinType ? {
field: 'dtinType',
operator: 'eq',
dataType: 'string',
value: formState.dtinType
} : null
].filter(Boolean)
const params = {
filter: {
logic: 'and',
filters
}
}
// 调用API获取饼图数据
const res = await wqGetKendoList(params)
let data = res?.data?.data || res?.data || []
if (data.length === 0) {
showPieChart.value = false
return
}
// 转换数据格式
const dataSource = data.map((item: any) => ({
name: item.keyName || 'null',
value: item.count,
key: item.keyName === '达标' ? 'DB_STATUS_1' : item.keyName === '不达标' ? 'DB_STATUS_0' : 'CURNODATA',
keyData: item?.key
}))
// 过滤掉"无数据"项
const filteredDataSource = dataSource.filter(item => item.name !== '无数据')
if (filteredDataSource.length === 0) {
showPieChart.value = false
return
}
showPieChart.value = true
// 初始化或更新饼图
await nextTick()
initPieChart(filteredDataSource)
} catch (error) {
console.error('获取饼图数据失败:', error)
message.error('获取饼图数据失败')
showPieChart.value = false
} finally {
pieLoading.value = false
}
}
// 初始化饼图
const initPieChart = (data: any[]) => {
if (!pieChartRef.value) return
// 如果实例已存在，先销毁
if (pieChartInstance) {
pieChartInstance.dispose()
pieChartInstance = null
}
pieChartInstance = echarts.init(pieChartRef.value)
// 计算总数
const total = data.reduce((sum, item) => sum + item.value, 0)
const option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} 次 ({d}%)'
},
legend: {
orient: 'vertical',
right: '10%',
top: '10%',
data: data.map(item => item.name)
},
title: [
{
text: total.toString(),
left: '45%',
top: '50%',
textAlign: 'center',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
color: '#333'
}
},
{
text: '监测总次数',
left: '45%',
top: '56%',
textAlign: 'center',
textStyle: {
fontSize: 12,
color: '#666'
}
},
{
text: '(次)',
left: '45%',
top: '61%',
textAlign: 'center',
textStyle: {
fontSize: 10,
color: '#999'
}
}
],
series: [
{
name: '断面总数量',
type: 'pie',
radius: ['20%', '35%'],
center: ['45%', '55%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
formatter: '{b}: {c} ({d}%)'
},
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
}
},
data: data
}
]
}
// 颜色配置（根据数据类型动态设置）
const colorConfig: any = {
color: ['#52c41a', '#ff4d4f', '#d9d9d9']
}
pieChartInstance.setOption({ ...option, ...colorConfig })
// 绑定点击事件 - 过滤表格数据
pieChartInstance.on('legendselectchanged', (params: any) => {
const selectedKeys = Object.keys(params.selected).filter(key => params.selected[key])
const allFalse = Object.values(params.selected).every(value => value === false)
// 映射到后端需要的keyData
const dataMap: Record<string, string> = {
'达标': 'DB_STATUS_1',
'不达标': 'DB_STATUS_0',
'无数据': 'CURNODATA'
}
const selectedCodes = data
.filter(item => selectedKeys.includes(item.name))
.map(item => item.keyData)
pieCode.value = allFalse ? ['5'] : selectedCodes
// 刷新表格
handleSearch()
})
}
// 基地变化处理
const handleBaseChange = () => {
formState.stnm = ''
fetchPieData()
handleSearch()
}
// 查询处理
const handleSearch = () => {
const timeFormat = formState.types === 'month' ? 'YYYY-MM' : 'YYYY'
const startTime = formState.dateValues ? formState.dateValues.format(timeFormat) : ''
const filters: any[] = [
{
field: 'baseId',
operator: 'eq',
dataType: 'string',
value: formState.dataDimensionVal
},
formState.types === 'month' ? {
field: 'drMonth',
operator: 'eq',
dataType: 'string',
value: startTime
} : {
field: 'drYear',
operator: 'eq',
dataType: 'string',
value: startTime
},
{
field: 'type',
operator: 'eq',
dataType: 'string',
value: 'DAY'
},
formState.dataDimensionVal !== 'all' ? {
field: 'rstcd',
operator: 'eq',
dataType: 'string',
value: formState.dataDimensionVal
} : null,
pieCode.value.length > 0 ? {
field: 'sfdb',
operator: 'in',
dataType: 'string',
value: pieCode.value
} : (formState.sfdb ? {
field: 'sfdb',
operator: 'eq',
dataType: 'string',
value: formState.sfdb
} : null),
formState.stnm ? {
field: 'stnm',
operator: 'contains',
dataType: 'string',
value: formState.stnm
} : null,
formState.dataDimensionVal === 'all' && formState.dtinType ? {
field: 'dtinType',
operator: 'eq',
dataType: 'string',
value: formState.dtinType
} : null
].filter(Boolean)
const filter = {
logic: 'and',
filters
}
// 刷新表格
tableRef.value?.getList(filter)
}
// 重置处理
const handleReset = () => {
formState.dataDimensionVal = props.dataDimensionVal || ''
formState.dtinType = ''
formState.types = props.type || 'month'
formState.sfdb = ''
formState.dateValues = dayjs()
formState.stnm = ''
pieCode.value = []
fetchPieData()
handleSearch()
}
// 查看详情
const handleViewDetail = (record: any) => {
detailData.value = { ...record }
detailModalVisible.value = true
}
// 详情弹窗关闭
const handleDetailModalClose = () => {
detailModalVisible.value = false
detailData.value = {}
}
// 查看断面名称详情（地图）
const handleViewStnmDetail = (record: any) => {
const timeRange = formState.dateValues
? [dayjs(formState.dateValues).startOf(formState.types === 'month' ? 'month' : 'year'),
dayjs(formState.dateValues).endOf(formState.types === 'month' ? 'month' : 'year')]
: []
mapModalData.value = {
sttp: 'wq',
stcd: record.stcd,
titleName: record.stnm,
timeRange,
calculateFlag: null // TODO: 根据实际情况设置
}
mapModalVisible.value = true
}
// 地图弹窗关闭
const handleMapModalClose = () => {
mapModalVisible.value = false
mapModalData.value = {}
}
// 监听表单变化，自动查询
watch(
() => [formState.dataDimensionVal, formState.types, formState.sfdb, formState.stnm, formState.dtinType],
() => {
fetchPieData()
handleSearch()
},
{ deep: true }
)
// 监听日期变化
watch(
() => formState.dateValues,
() => {
fetchPieData()
handleSearch()
}
)
// 初始化
onMounted(async () => {
await nextTick()
fetchPieData()
handleSearch()
// 监听窗口resize
window.addEventListener('resize', () => {
pieChartInstance?.resize()
})
})
// 组件卸载时清理
onBeforeUnmount(() => {
pieChartInstance?.dispose()
pieChartInstance = null
window.removeEventListener('resize', () => {
pieChartInstance?.resize()
})
})
// 暴露方法给父组件
defineExpose({
handleSearch
})
</script>
<style scoped lang="scss">
.environmental-quality-container {
height: 100%;
display: flex;
flex-direction: column;
.search-form {
background: #fff;
border-radius: 4px;
padding: 16px;
:deep(.ant-space) {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
:deep(.ant-form-item) {
margin-bottom: 0;
}
}
.content-layout {
flex: 1;
display: flex;
gap: 16px;
overflow: hidden;
.chart-section {
width: 35%;
min-width: 300px;
background: #fff;
border-radius: 4px;
padding: 16px;
position: relative;
.pie-chart-container {
width: 100%;
height: 482px;
}
.empty-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
z-index: 10;
}
}
.table-section {
flex: 1;
background: #fff;
border-radius: 4px;
padding: 16px;
overflow: hidden;
}
}
.text-link {
color: #2f6b98;
&:hover {
color: #40a9ff;
}
}
.modal-content {
padding: 20px;
max-height: 600px;
overflow-y: auto;
pre {
background: #f5f5f5;
padding: 12px;
border-radius: 4px;
font-size: 12px;
margin-top: 16px;
}
}
}
:deep(.ant-spin-nested-loading) {
height: 100%;
}
:deep(.ant-spin-container) {
height: 100%;
}
</style>

859
frontend/src/modules/EnvironmentalQuality/index.vue
View File

File diff suppressed because it is too large Load Diff

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

@ -473,8 +473,8 @@ const handleViewDetail = (record: any, type: string) => {
watch(
() => [formState.dataDimensionVal, formState.hydrodtin, formState.bldstt],
async () => {
// await fetchFacilityStats()
// handleSearch()
await fetchFacilityStats()
handleSearch()
}
)
@ -512,9 +512,25 @@ onMounted(async () => {
handleSearch()
})
// 重置搜索状态方法
const resetSearchState = () => {
// 重置表单状态为初始值
formState.dataDimensionVal = props.BID || ''
formState.hydrodtin = props.res?.hydrodtin || ''
formState.bldstt = props.res?.bldstt || ''
formState.stnm = ''
// 重置activeTab为当前设施类型对应的key
activeTab.value = currentDwtp.value
// 清空表格引用
tableRefs.value = {}
}
// 暴露方法给父组件
defineExpose({
handleSearch
handleSearch,
resetSearchState
})
</script>

13
frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue
View File

@ -20,10 +20,10 @@
</SidePanelItem>
<!-- 自定义弹框 -->
<a-modal v-model:open="modalVisible" title="设施类型及接入情况" width="1536px" :footer="null">
<a-modal v-model:open="modalVisible" title="设施类型及接入情况" width="1536px" :footer="null" @cancel="handleModalClose">
<div class="modal-content">
<DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers :datas="jiDiList" :BID="baseid"
<DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers ref="twoLayersRef" :datas="jiDiList" :BID="baseid"
:data="selectedItem" :res="res">
</DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers>
</div>
@ -149,6 +149,7 @@ const baseid = ref('')
// 弹框相关
const modalVisible = ref(false);
const selectedItem: any = ref<DataString | null>(null);
const twoLayersRef = ref();
const getListData = async () => {
@ -211,6 +212,14 @@ const imgclick = (item: DataString) => {
modalVisible.value = true;
}
// 模态框关闭处理
const handleModalClose = () => {
// 重置子组件的搜索状态
if (twoLayersRef.value && twoLayersRef.value.resetSearchState) {
twoLayersRef.value.resetSearchState()
}
}
// 页面加载时执行的逻辑
onMounted(() => {
// 可以在这里加载实际的图片数据

41
frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue
View File

@ -58,6 +58,9 @@ const baseid: any = ref(null);
const loading = ref(false);
const showemit = ref(true);
// X轴数据，用于formatter中获取站点名称
const xData = ref<any[]>([]);
// 弹框相关状态
const modalVisible = ref(false);
const modalData = ref<any>(null);
@ -359,12 +362,15 @@ const getEchartsData = async () => {
// 筛选 sttp === "1" 的数据作为 X 轴站点名称
const stationData = data.filter((item: any) => item.sttp === "1")
const xData = stationData.map((item: any) => ({
const newXData = stationData.map((item: any) => ({
value: item.stnm,
stnm: item.stnm,
stcd: item.stcd // 保留站点编码用于点击事件
}))
// 更新响应式 xData
xData.value = newXData;
// 筛选 sttp === "2" 的数据作为图表系列数据
const tempData = data.filter((item: any) => item.sttp === "2")
@ -393,19 +399,12 @@ const getEchartsData = async () => {
// 初始化或更新图表
setTimeout(() => {
if (!chartInstance) {
initChart(xData, actualData, lastData, naturalData)
initChart(newXData, actualData, lastData, naturalData)
} else {
// 如果图表已存在，只更新数据
chartInstance.setOption({
xAxis: {
data: xData
},
series: [
{ data: actualData },
{ data: lastData },
{ data: naturalData }
]
})
// 如果图表已存在，重新初始化以确保 formatter 使用最新的数据
chartInstance.dispose()
chartInstance = null
initChart(newXData, actualData, lastData, naturalData)
}
// 强制重绘，确保尺寸正确
setTimeout(() => {
@ -420,7 +419,7 @@ const getEchartsData = async () => {
}
}
const initChart = (xData: any[], actualData: any[], lastData: any[], naturalData: any[]) => {
const initChart = (newXData: any[], actualData: any[], lastData: any[], naturalData: any[]) => {
if (!chartRef.value) return
chartInstance = echarts.init(chartRef.value)
@ -438,7 +437,7 @@ const initChart = (xData: any[], actualData: any[], lastData: any[], naturalData
const options: any = {
noShowToolbox: true,
yAxisSplit: 5,
xData,
xData: newXData,
dataZoom: [
{
type: 'inside',
@ -454,7 +453,8 @@ const initChart = (xData: any[], actualData: any[], lastData: any[], naturalData
trigger: 'axis',
confine: true,
formatter: (params: any) => {
const label = xData.filter((item: any) => item.value === params[0].axisValueLabel)?.[0]?.stnm
// 使用响应式 xData.value 获取站点名称，确保与最新数据一致
const label = xData.value.filter((item: any) => item.value === params[0].axisValueLabel)?.[0]?.stnm
let elm = ``
for (const item of params) {
const value = item.data?.value ?? item.value;
@ -498,10 +498,13 @@ const initChart = (xData: any[], actualData: any[], lastData: any[], naturalData
axisLabel: {
color: '#000000',
fontSize: 12,
interval: xData.length < 5 ? 0 : 2,
interval: xData.value.length < 5 ? 0 : 2,
rotate: 0,
formatter: (value: any) => {
const label = xData.filter((item: any) => item.value === value)?.[0]?.stnm
// 使用响应式 xData.value 获取站点名称，确保与最新数据一致
const label = xData.value.filter((item: any) => item.value === value)?.[0]?.stnm
// 空值检查，防止 undefined 导致的错误
if (!label) return '-'
return `{a|${label.substring(0, 6)}}` + (label.length > 6 ? '...\n{b|}' : '\n{b|}')
},
rich: {
@ -515,7 +518,7 @@ const initChart = (xData: any[], actualData: any[], lastData: any[], naturalData
}
}
},
data: xData,
data: xData.value,
splitLine: {
show: false
}

2
frontend/src/modules/shuiWenNianNeiFenBu/index.vue
View File

@ -390,7 +390,7 @@ const getChartOption = () => {
params.forEach((item: any) => {
result += `<div style="display: flex; align-items: center; margin: 4px 0;">`;
result += `<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color}; margin-right: 8px;"></span>`;
const displayValue = item.value !== null && item.value !== undefined ? item.value : '-';
const displayValue = item.value !== null && item.value !== undefined ? item.value: '-';
result += `<span>${item.seriesName} ${displayValue}${unit}</span>`;
result += `</div>`;
});

72
frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue
View File

@ -9,20 +9,25 @@
<div class="search-form">
<a-space size="middle">
<div>选择水电站:</div>
<a-select v-model:value="searchData.stcd.dataDimensionData" placeholder="请选择水电站" style="width: 200px"
@change="handleHydropowerStationChange">
<a-select-option v-for="station in hydropowerStationList" :key="station.wbsCode"
:value="station.wbsCode">
{{ station.wbsName }}
</a-select-option>
</a-select>
<a-select v-model:value="searchData.stnm" placeholder=" " style="width: 200px" allow-clear
@change="handleStationChange">
<a-select-option v-for="station in stationDataList" :key="station.wbsCode" :value="station.stcd">
{{ station.stnm }}
</a-select-option>
</a-select>
<!-- <a-input v-model:value="searchData.stnm" placeholder="请输入测站名称" style="width: 200px" allow-clear /> -->
<a-select
v-model:value="searchData.stcd.dataDimensionData"
placeholder="请选择水电站"
style="width: 200px"
show-search
: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-tooltip title="重置">
@ -90,6 +95,22 @@ const tableHeight = 'calc(48vh)'
// 水电站列表数据
const hydropowerStationList = ref<any[]>([])
const stationDataList: any = ref([])
// 转换为 a-select options 格式
const hydropowerStationOptions = computed(() => {
return hydropowerStationList.value.map(station => ({
label: station.wbsName,
value: station.wbsCode
}))
})
const stationOptions = computed(() => {
return stationDataList.value.map(station => ({
label: station.stnm,
value: station.stcd
}))
})
const searchData = ref<any>({
stcd: {
dataDimensionType: 'hyBase',
@ -227,14 +248,14 @@ const buildSearchFilter = () => {
})
}
// 测站ID过滤
if (searchData.value?.stcd?.stcdId) {
filters.push({
field: 'rstcd',
operator: 'eq',
value: searchData.value.stcd.stcdId
})
}
// // 测站ID过滤
// if (searchData.value?.stcd?.stcdId) {
// filters.push({
// field: 'rstcd',
// operator: 'eq',
// value: searchData.value.stcd.stcdId
// })
// }
// 测站名称模糊搜索
if (searchData.value?.stnm) {
@ -293,6 +314,8 @@ const fetchData = async () => {
try {
const filter = buildSearchFilter()
const params = {
take: pagination.value.pageSize,
skip: pagination.value.current,
filter: filter,
select: [
'baseName',
@ -445,6 +468,11 @@ const getselectTwo = async (code: any) => {
}
// ==================== 事件处理 ====================
const filterOption = (input: string, option: any) => {
// 使用 options 属性时，option 是标准对象 { label, value }
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
const handleHydropowerStationChange = (value: string) => {
console.log('【水电站选择变化】', value)
// 清空测站选择

239
frontend/src/modules/shuizhijiancegongzuoQK/index.vue
View File

@ -1,8 +1,10 @@
<!-- SidePanelItem.vue -->
<template>
<SidePanelItem title="水质监测工作开展情况">
<div class="facility-grid" >
<div v-for="facility in facilities" :key="facility.name" class="facility-card">
<SidePanelItem title="水质监测工作开展情况">
<a-spin :spinning="loading" tip="加载中...">
<div class="facility-grid">
<div v-for="facility in facilities" :key="facility.name" class="facility-card"
@click="handleFacilityClick(facility)">
<div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
<div class="facility-icon">
<i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
@ -11,42 +13,249 @@
<div class="facility-info">
<div class="facility-name">{{ facility.name }}</div>
<div style="font-size: 16px;"> <span class="facility-count">{{ facility.count }}</span><span>个</span></div>
<div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
}}</span><span>个</span></div>
</div>
</div>
</div>
</SidePanelItem>
</a-spin>
</SidePanelItem>
<!-- 弹框 -->
<a-modal v-model:open="modalVisible" :title="'水质监测工作开展情况'" :footer="null" width="1536px" @cancel="handleCloseModal">
<ShuiwenjiancegongzuoEJ v-if="currentFacility" :activeKey="currentFacility.key" :tabs="facilities"
:baseId="baseid" />
</a-modal>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ref, onMounted, watch } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import { msstbprptGetKendoList } from '@/api/sz'
import ShuiwenjiancegongzuoEJ from "./shuiwenjiancegongzuoEJ.vue"
// 定义组件名（便于调试和递归）
defineOptions({
name: 'shuizhijiancegongzuoQK'
});
const JidiSelectEventStore = useJidiSelectEventStore();
// loading状态
const loading = ref(false);
// 设施数据
const facilities = ref([
{
name: '自建水质站',
count: 56,
icon: 'icon iconfont icon-qixidi'
name: '河道水质站',
count: 0,
icon: 'icon iconfont icon-qixidi',
key: '0'
},
{
icon: 'icon iconfont icon-yuleizengzhizhan',
name: '增殖站水质站',
count: '0',
key: '3'
},
{
name: '国家水质站',
count: 1722,
icon: 'icon iconfont icon-diwenshuijianhuan'
count: 0,
icon: 'icon iconfont icon-diwenshuijianhuan',
key: '1'
},
{
name: '人工水质监测断面',
count: 135,
icon: 'icon iconfont icon-shuiwen-line'
count: 0,
icon: 'icon iconfont icon-shuiwen-line',
key: '2'
},
]);
// 弹框相关状态
const modalVisible = ref(false);
const currentFacility = ref<any>(null);
const baseid = ref("")
//获取水质监测工作开展情况数据
const getDataList = async () => {
loading.value = true;
try {
let data1 = {
"filter": {
"logic": "and",
"filters": [
baseid.value != "all" ? {
"field": "baseId",
"operator": "eq",
"dataType": "string",
"value": "01"
} : null,
{
"field": "isDeleted",
"operator": "eq",
"value": 0
},
{
"field": "sttpCode",
"operator": "eq",
"value": "WQ"
},
{
"logic": "or",
"filters": [
{
"logic": "and",
"filters": [
{
"field": "mway",
"operator": "eq",
"value": 2
},
{
"field": "dtinType",
"operator": "eq",
"value": 0
}
]
},
{
"logic": "and",
"filters": [
{
"field": "mway",
"operator": "eq",
"value": 1
},
{
"field": "dtinType",
"operator": "eq",
"value": 2
}
]
},
{
"logic": "and",
"filters": [
{
"field": "mway",
"operator": "eq",
"value": 2
},
{
"field": "dtinType",
"operator": "eq",
"value": 1
}
]
}
]
}
].filter(Boolean)
},
"group": [
{
"dir": "asc",
"field": "dtinType"
}
]
}
let data2 = {
"filter": {
"logic": "and",
"filters": [
baseid.value != "all" ? {
"field": "baseId",
"operator": "eq",
"dataType": "string",
"value": "01"
} : null,
{
"field": "isDeleted",
"operator": "eq",
"value": 0
},
{
"field": "sttpCode",
"operator": "eq",
"value": "WQFB"
},
{
"filters": [
{
"logic": "and",
"filters": [
{
"field": "mway",
"operator": "eq",
"value": 2
},
{
"field": "dtinType",
"operator": "eq",
"value": 0
}
]
}
]
}
].filter(Boolean)
},
"group": [
{
"dir": "asc",
"field": "dtinType"
}
]
}
// const params = [data1, data2]
const res1 = await msstbprptGetKendoList(data1);
let finalData = facilities.value.map((item) => ({ ...item, count: 0 }))
if (res1.data) {
const { data } = res1
data.data.forEach((item: any, index: number) => {
const target = finalData.find((n) => n.key == item.key)
if (target) {
target.count = item.count
}
})
}
const res2 = await msstbprptGetKendoList(data2);
if (res2.data) {
const responseData = res2?.data?.data
const target1 = finalData.find((n) => n.key == '3')
if (target1) {
target1.count = responseData[0].count || 0
}
}
facilities.value = finalData
} catch (error) {
console.error('获取数据失败:', error);
} finally {
loading.value = false;
}
}
watch(
() => JidiSelectEventStore.selectedItem,
(newVal) => {
baseid.value = newVal.wbsCode;
getDataList()
},
{ deep: true, immediate: true }
);
// 点击处理函数
const handleFacilityClick = (facility: any) => {
// console.log(facility);
currentFacility.value = facility;
modalVisible.value = true;
};
// 关闭弹框
const handleCloseModal = () => {
modalVisible.value = false;
currentFacility.value = null;
};
// 页面加载时执行的逻辑
onMounted(() => {

636
frontend/src/modules/shuizhijiancegongzuoQK/shuiwenjiancegongzuoEJ.vue Normal file
View File

@ -0,0 +1,636 @@
<template>
<div class="shuiwenjiancegongzwo-ej-container">
<!-- Tab切换 -->
<a-tabs v-model:activeKey="tabIndex" @change="handleTabChange">
<a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.name" />
</a-tabs>
<!-- 搜索表单 -->
<div class="search-form">
<a-space size="middle">
<div>选择水电站:</div>
<a-select
v-model:value="searchData.stcd.dataDimensionData"
placeholder="请选择水电站"
style="width: 200px"
show-search
: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-input v-model:value="searchData.stnm" placeholder="请输入测站名称" style="width: 200px" allow-clear /> -->
<a-button type="primary" @click="handleSearch">查询</a-button>
<a-tooltip title="重置">
<a-button @click="handleReset">重置</a-button>
</a-tooltip>
</a-space>
</div>
<!-- 数据表格 -->
<a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
:scroll="{ y: tableHeight }" row-key="stcd" @change="handleTableChange">
<template #bodyCell="{ column, record }">
<!-- 监测状态 -->
<template v-if="column.key === 'coenvwState'">
<a-tooltip placement="top">
<template #title>
<ol>
<li>最近1天有监测数据为在线，否则为离线。</li>
</ol>
</template>
<a-tag :color="record.coenvwState > 0 ? 'green' : '#999'">
{{ record.coenvwState > 0 ? '在线' : '离线' }}
</a-tag>
</a-tooltip>
</template>
<!-- 操作 -->
<template v-else-if="column.key === 'action'">
<a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
</template>
</template>
</a-table>
</div>
</template>
<script lang="ts" setup>
import { ref, computed, watch, onMounted } from 'vue'
import { wbsbGetKendoList, getVmsstbprpt } from '@/api/sw'
import { vmsstbprptGetKendoList } from '@/api/sz'
import { useModelStore } from "@/store/modules/model";
const modelStore = useModelStore();
// ==================== Props 定义 ====================
const props = defineProps<{
baseId?: string
tabs?: any[]
activeKey?: string
}>()
// ==================== 状态管理 ====================
const tabIndex = ref(props.activeKey || '0')
const loading = ref(false)
const tableData = ref<any[]>([])
const pagination = ref({
current: 1,
pageSize: 20,
total: 0,
size: 'small',
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total: number) => `共 ${total} 条`,
pageSizeOptions: ['10', '20', '50', '100']
})
const tableHeight = 'calc(48vh)'
// 水电站列表数据
const hydropowerStationList = ref<any[]>([])
const stationDataList: any = ref([])
// 转换为 a-select options 格式
const hydropowerStationOptions = computed(() => {
return hydropowerStationList.value.map(station => ({
label: station.wbsName,
value: station.wbsCode
}))
})
const stationOptions = computed(() => {
return stationDataList.value.map(station => ({
label: station.stnm,
value: station.stcd
}))
})
const searchData = ref<any>({
stcd: {
dataDimensionType: 'hyBase',
stcdId: '',
dataDimensionData: props.baseId || 'all'
},
stnm: null
})
// ==================== 计算合并信息 ====================
const getRowSpanInfo = (dataIndex: string) => {
const spanMap = new Map()
if (!tableData.value || tableData.value.length === 0) {
return spanMap
}
let currentGroupStart = 0
let currentValue = tableData.value[0][dataIndex]
for (let i = 0; i < tableData.value.length; i++) {
const value = tableData.value[i][dataIndex]
if (value !== currentValue) {
// 记录当前组的起始位置和行数
spanMap.set(currentGroupStart, i - currentGroupStart)
currentGroupStart = i
currentValue = value
}
}
// 处理最后一组
spanMap.set(currentGroupStart, tableData.value.length - currentGroupStart)
return spanMap
}
// ==================== 监听 Props 变化 ====================
// const baseId = ref('')
watch(
() => props.baseId,
(newVal) => {
if (newVal && newVal !== searchData.value.stcd.dataDimensionData) {
searchData.value.stcd.dataDimensionData = newVal
fetchData()
}
}
)
watch(
() => props.activeKey,
(newVal) => {
if (newVal && newVal !== tabIndex.value) {
tabIndex.value = newVal
fetchData()
}
}
)
// ==================== 列配置 ====================
const columns = computed(() => {
const baseColumns = [
{
title: '所属基地',
dataIndex: 'baseName',
key: 'baseName',
width: 150,
customCell: (record: any, index: number) => {
const spanMap = getRowSpanInfo('baseName')
const rowSpan = spanMap.get(index)
if (rowSpan === undefined) {
// 被合并的行，不显示
return { rowSpan: 0 }
}
// 第一行，设置合并行数
return { rowSpan }
}
},
{
title: '测站名称',
dataIndex: 'stnm',
key: 'stnm',
width: 150
},
{
title: '电站',
dataIndex: 'ennm',
key: 'ennm',
width: 150
},
// {
// title: '建成时间',
// dataIndex: 'jcdt',
// key: 'jcdt',
// width: 120
// },
{
title: '监测指标',
dataIndex: 'stindx',
key: 'stindx',
width: 150
},
// {
// title: '监测状态',
// key: 'coenvwState',
// dataIndex: 'coenvwState',
// width: 100,
// align: 'center' as const
// },
{
title: '操作',
key: 'action',
width: 100,
align: 'center' as const,
fixed: 'right' as const
}
]
return baseColumns.filter(Boolean)
})
// ==================== 过滤条件构建 ====================
const buildSearchFilter = () => {
const filters: any[] = []
// 基地ID过滤
if (searchData.value?.stcd?.dataDimensionData && searchData.value.stcd.dataDimensionData !== 'all') {
filters.push({
field: 'baseId',
operator: 'eq',
value: searchData.value.stcd.dataDimensionData
})
}
// 测站ID过滤
if (searchData.value?.stcd?.stcdId) {
filters.push({
field: 'rstcd',
operator: 'eq',
value: searchData.value.stcd.stcdId
})
}
// 测站名称模糊搜索
if (searchData.value?.stnm) {
filters.push({
field: 'rstcd',
operator: 'eq',
value: searchData.value.stnm
})
}
// 根据 tabIndex 设置站点类型（水质监测）
if (tabIndex.value === '3') {
filters.push({
field: 'sttpCode',
operator: 'eq',
dataType: 'string',
value: 'WQFB'
})
} else {
filters.push({
field: 'sttpCode',
operator: 'eq',
dataType: 'string',
value: 'WQ'
})
}
// Tab特定过滤 - 对齐 React 版本的水质监测逻辑
switch (tabIndex.value) {
case '0': // 自动监测-实时
filters.push(
{
field: 'mway',
operator: 'eq',
dataType: 'string',
value: 2
},
{
field: 'dtinType',
operator: 'eq',
dataType: 'string',
value: 0
}
)
break
case '1': // 自动监测-历史
filters.push(
{
field: 'mway',
operator: 'eq',
dataType: 'string',
value: 2
},
{
field: 'dtinType',
operator: 'eq',
dataType: 'string',
value: 1
}
)
break
case '2': // 人工监测
filters.push(
{
field: 'mway',
operator: 'eq',
dataType: 'string',
value: 1
},
{
field: 'dtinType',
operator: 'eq',
dataType: 'string',
value: 2
}
)
break
case '3': // 特殊类型
filters.push(
{
field: 'mway',
operator: 'eq',
dataType: 'string',
value: 2
},
{
field: 'dtinType',
operator: 'eq',
dataType: 'string',
value: 0
}
)
break
}
return {
logic: 'and',
filters: filters.filter((f) => f.value !== undefined && f.value !== null && f.value !== '')
}
}
// ==================== API调用 ====================
const fetchData = async () => {
loading.value = true
try {
const filter = buildSearchFilter()
const params = {
take: pagination.value.pageSize,
skip: pagination.value.current,
filter: filter,
select: [
'baseName',
'stnm',
'ennm',
'jcdt',
'stindx',
'coenvwState',
'sttpCode',
'stcd',
'rstcd',
'stCode',
'stName',
'dvtp'
],
sort: [
{ field: 'baseStepSort', dir: 'asc' },
{ field: 'hbrvcd', dir: 'asc' },
{ field: 'rstcdStepSort', dir: 'asc' },
{ field: 'siteStepSort', dir: 'asc' }
],
groupResultFlat:false
}
console.log('【请求参数】', params)
const res = await vmsstbprptGetKendoList(params)
console.log('【响应数据】', res)
// 数据处理
let total = res.data.total
let records = res?.data?.data || res?.data
// if (Array.isArray(res?.data?.data)) {
// records = res.data.data
// total = res.data.data.length
// }
tableData.value = records || []
pagination.value.total = total
loading.value = false
} catch (error) {
console.error('获取水文监测数据失败:', error)
tableData.value = []
pagination.value.total = 0
} finally {
loading.value = false
}
}
const getselect = async () => {
try {
const params = {
"filter": {
"logic": "and",
"filters": [
{
"field": "wbsType",
"operator": "eq",
"dataType": "string",
"value": "PSB"
},
{
"field": "treeLevel",
"operator": "eq",
"dataType": "string",
"value": "1"
}
]
},
"sort": [
{
"field": "orderIndex",
"dir": "asc"
}
]
}
const res = await wbsbGetKendoList(params)
console.log('【水电站列表】', res)
// 数据处理：提取水电站列表
if (res?.data?.data && Array.isArray(res.data.data)) {
hydropowerStationList.value = res.data.data
console.log('站点数据列表', stationDataList.value)
getselectTwo(searchData.value.stcd.dataDimensionData)
console.log('【水电站数量】', hydropowerStationList.value.length)
} else {
console.warn('【警告】未获取到有效的水电站数据')
hydropowerStationList.value = []
}
} catch (error) {
console.error('【错误】获取水电站列表失败:', error)
hydropowerStationList.value = []
}
}
const getselectTwo = async (code: any) => {
console.log('站点数据列表')
// 根据当前 Tab 确定站点类型
// const sttpCodeValue = tabIndex.value === '3' ? 'WQFB' : 'WQ'
const params = {
"filter": {
"logic": "and",
"filters": [
code != 'all' ? {
"field": "baseId",
"operator": "contains",
"dataType": "string",
"value": code
} : null,
{
"field": "sttpCode",
"operator": "eq",
"dataType": "string",
"value": "ENG"
}
].filter(Boolean)
},
"sort": code !== 'all'
? [
{
"field": "baseId",
"dir": "asc"
},
{
"field": "rvcdStepSort",
"dir": "asc"
},
{
"field": "rstcdStepSort",
"dir": "asc"
},
{
"field": "siteStepSort",
"dir": "asc"
}
]
: [
{
"field": "ttpwr",
"dir": "desc"
}
],
"select": [
"stcd",
"stnm"
]
}
const res = await getVmsstbprpt(params)
// console.log('结果', res)
console.log('站点数据列表', res?.data?.data)
stationDataList.value = res?.data?.data || res?.data
}
// ==================== 事件处理 ====================
const filterOption = (input: string, option: any) => {
// 使用 options 属性时，option 是标准对象 { label, value }
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
const handleHydropowerStationChange = (value: string) => {
console.log('【水电站选择变化】', value)
// 清空测站选择
searchData.value.stnm = null
searchData.value.stcd.stcdId = ''
// 获取该水电站下的测站列表
getselectTwo(value)
// 重新查询数据
// pagination.value.current = 1
// fetchData()
}
const handleStationChange = (value: string | undefined) => {
console.log('【测站选择变化】', value)
// 更新测站ID
if (value) {
searchData.value.stcd.stcdId = value
} else {
searchData.value.stcd.stcdId = ''
}
}
const handleSearch = () => {
console.log('【搜索】', searchData.value)
pagination.value.current = 1
fetchData()
}
const handleReset = () => {
console.log('【重置】')
searchData.value = {
stcd: {
dataDimensionType: 'hyBase',
stcdId: '',
dataDimensionData: props.baseId || 'all'
},
stnm: null
}
pagination.value.current = 1
fetchData()
}
const handleTabChange = (key: string) => {
console.log('【Tab切换】', key)
tabIndex.value = key
pagination.value.current = 1
fetchData()
}
const handleTableChange = (pag: any) => {
pagination.value.current = pag.current
pagination.value.pageSize = pag.pageSize
fetchData()
}
const handleViewDetail = (record: any) => {
if (record) {
modelStore.modalVisible = true;
modelStore.params.sttp = "fh_wq_point";
modelStore.title = record.stnm + "详情信息";
// modelStore.isBasicEdit = true;
modelStore.params.stcd = record.stcd;
modelStore.modalVisible = true;
}
// TODO: 后续实现详情查看功能
}
// ==================== 生命周期 ====================
onMounted(() => {
console.log('【组件挂载】水文监测工作二级页面已加载')
fetchData()
getselect()
})
</script>
<style scoped lang="scss">
.shuiwenjiancegongzwo-ej-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: #ffffff;
box-sizing: border-box;
.search-form {
margin-bottom: 16px;
border-radius: 4px;
}
:deep(.ant-table-wrapper) {
flex: 1;
overflow: hidden;
}
}
.text_hocer {
color: #2f6b98;
}
.text_hocer:hover {
color: #40a9ff;
}
</style>

500
frontend/src/modules/waterQuality/index.vue
View File

@ -1,22 +1,37 @@
<!-- SidePanelItem.vue -->
<template>
<SidePanelItem title="沿程水质变化" :iconmap="iconmap" :datetimePicker="datetimePicker">
<div class="chart-container" ref="chartRef"></div>
<SidePanelItem title="沿程水质变化" :iconmap="iconmap" :select="select" :datetimePicker="datetimePicker"
@update-values="handlePanelChange1">
<div class="chart-wrapper">
<a-spin :spinning="loading">
<!-- 始终渲染图表容器，确保有固定宽高 -->
<div ref="chartRef" class="chart-container"></div>
<!-- 无数据时显示Empty，但不影响容器尺寸 -->
<div v-if="!loading && !hasData" class="empty-overlay">
<a-empty description="暂无数据" />
</div>
</a-spin>
</div>
</SidePanelItem>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { qgcGetKendoListCust, wbsbGetKendoList } from '@/api/sz'
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import { useModelStore } from "@/store/modules/model";
// 定义组件名（便于调试和递归）
defineOptions({
name: 'waterQuality'
});
const modelStore = useModelStore();
const JidiSelectEventStore = useJidiSelectEventStore();
const iconmap = ref({
show: true,
value: '注：最新数据时间为2026-05-14 23：00',
@ -26,6 +41,10 @@ const iconmap = ref({
const chartRef = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
// Loading 状态和数据状态
const loading = ref(false);
const hasData = ref(true); // 初始化为 true，因为 initChart 会使用 mockData 渲染
// 获取当天早上8:00的时间
const now = new Date();
const todayAtEightAM = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0, 0);
@ -38,6 +57,13 @@ const datetimePicker = ref({
picker: 'date',
options: []
});
const select = ref({
show: true,
value: '',
options: [],
picker: undefined,
format: undefined,
});
// ==================== 可见系列队列（最多2个）====================
const visibleSeriesQueue = ref<string[]>([]);
@ -84,18 +110,28 @@ const indicatorConfig = [
// ==================== 图表配置生成 ====================
const getChartOption = (): EChartsOption => {
const data = mockData.value;
if (!data || data.length === 0) {
return {};
}
// X轴数据（站点名称）
const xData = data.map((item, index) => ({
value: item.stnm,
textStyle: {
padding: index % 2 !== 0 ? [16, 0, 0, 0] : 0
const xData = data.map((item, index) => {
// 去除站点名称中的"出库水质监测站"或"坝上水质监测站"后缀
let stnm = item.stnm || '-';
if (stnm.includes('出库水质监测站')) {
stnm = stnm.replace('出库水质监测站', '');
} else if (stnm.includes('坝上水质监测站')) {
stnm = stnm.replace('坝上水质监测站', '');
}
}));
return {
value: stnm,
textStyle: {
padding: index % 2 !== 0 ? [16, 0, 0, 0] : 0
}
};
});
// 电站标记线数据
const markLineData: any[] = [];
@ -107,7 +143,7 @@ const getChartOption = (): EChartsOption => {
// 图例数据
const legendData = indicatorConfig.map(item => item.name);
// 根据可见队列构建选中状态
const selectedState: Record<string, boolean> = {};
indicatorConfig.forEach(config => {
@ -144,16 +180,43 @@ const getChartOption = (): EChartsOption => {
};
});
// 计算每个Y轴的数据范围（用于自适应，使用整数）
const calculateYAxisRange = (configIndex: number) => {
if (!selectedState[indicatorConfig[configIndex].name]) {
return null;
}
const values = data
.map(item => item[indicatorConfig[configIndex].key as keyof typeof item])
.filter((val): val is number => typeof val === 'number' && !isNaN(val));
if (values.length === 0) {
return { min: 0, max: 10 };
}
const min = Math.min(...values);
const max = Math.max(...values);
// Y轴使用整数：向下取整-1，向上取整+1
return {
min: Math.floor(min) - 1,
max: Math.ceil(max) + 1
};
};
// Y轴配置（左1右N原则）
const yAxisData = indicatorConfig.map((config, index) => {
const isLeft = index === 0;
const offset = index < 2 ? 0 : (index - 1) * 60;
const range = calculateYAxisRange(index);
return {
type: 'value' as const,
name: config.name,
position: isLeft ? ('left' as const) : ('right' as const),
offset,
min: range ? range.min : undefined,
max: range ? range.max : undefined,
axisLine: {
show: true,
lineStyle: {
@ -163,8 +226,8 @@ const getChartOption = (): EChartsOption => {
axisLabel: {
color: config.color,
formatter: (value: number) => {
const decimalCount = (value.toString().split('.')[1] || '').length;
return decimalCount >= 2 ? value.toFixed(1) : value;
// Y轴刻度使用整数显示
return Math.round(value).toString();
}
},
splitLine: {
@ -189,32 +252,30 @@ const getChartOption = (): EChartsOption => {
},
formatter: (params: any) => {
if (!params || params.length === 0) return '';
// 在最上面显示用户选择的时间
let result = `<div style="font-weight: bold; margin-bottom: 8px;">${datetimePicker.value.value}</div>`;
const tm = data.find(item => item.stnm === params[0].name)?.tm;
let result = tm ? `${new Date(tm).toLocaleString('zh-CN')}<br/>` : '';
result += `${params[0].name}<br/>`;
params.forEach((param: any) => {
const config = indicatorConfig.find(c => c.name === param.seriesName);
const unit = config?.unit || '';
if (param.value !== null && param.value !== undefined) {
// 将数值转换为数字类型并判断小数位数
// 折线数据保留一位小数
const numValue = Number(param.value);
let displayValue = param.value;
// 如果是数字且小数位超过2位，则保留两位小数
if (!isNaN(numValue)) {
const decimalPart = param.value.toString().split('.')[1];
if (decimalPart && decimalPart.length > 2) {
displayValue = numValue.toFixed(2);
}
displayValue = numValue.toFixed(1);
}
result += `${param.marker}${param.seriesName}：${displayValue}${unit}<br/>`;
}
});
return result;
}
},
@ -231,6 +292,18 @@ const getChartOption = (): EChartsOption => {
fontSize: 14
}
},
// 添加 dataZoom 组件实现X轴滚轮缩放（仅内置类型，无滑动条）
dataZoom: [
{
type: 'inside', // 内置型数据区域缩放组件（支持鼠标滚轮）
xAxisIndex: 0, // 控制第一个X轴
start: 0, // 默认显示全部数据
end: 100,
zoomOnMouseWheel: true, // 开启鼠标滚轮缩放
moveOnMouseMove: true, // 开启鼠标移动平移
filterMode: 'filter' // 过滤模式
}
],
grid: {
top: 60,
bottom: 50,
@ -269,14 +342,14 @@ const getChartOption = (): EChartsOption => {
// ==================== 图例选择事件处理（最多2个系列）====================
const handleLegendSelectChanged = (params: any) => {
if (!chartInstance) return;
const { selected, name } = params;
const clickedName = name;
const isNowSelected = selected[clickedName];
console.log(`图例点击: ${clickedName}, 当前状态: ${isNowSelected ? '显示' : '隐藏'}`);
console.log('当前可见队列:', visibleSeriesQueue.value);
if (isNowSelected) {
// 用户想要显示这个系列
if (visibleSeriesQueue.value.length >= 2) {
@ -296,21 +369,21 @@ const handleLegendSelectChanged = (params: any) => {
console.log(`从队列中移除: ${clickedName}`);
}
}
console.log('更新后可见队列:', visibleSeriesQueue.value);
// 根据队列构建最终的 selected 状态
const finalSelected: Record<string, boolean> = {};
indicatorConfig.forEach(config => {
finalSelected[config.name] = visibleSeriesQueue.value.includes(config.name);
});
// 深拷贝当前配置
const currentOption = JSON.parse(JSON.stringify(chartInstance.getOption()));
// 同步图例选中状态
currentOption.legend[0].selected = finalSelected;
// 根据图例状态更新 Y 轴显隐
const newYAxis = currentOption.yAxis.map((item: any) => {
let isShow = false;
@ -322,12 +395,12 @@ const handleLegendSelectChanged = (params: any) => {
}
return { ...item, show: isShow };
});
currentOption.yAxis = newYAxis;
// 动态调整 Y 轴布局
yAxisShowDynamic(finalSelected, currentOption);
// 完全替换模式更新
try {
chartInstance.setOption(currentOption, true);
@ -337,6 +410,24 @@ const handleLegendSelectChanged = (params: any) => {
}
};
// ==================== 数据点点击事件处理 ====================
const handleDataPointClick = (params: any) => {
if (!params || !params.dataIndex) return;
// 获取点击的数据点对应的站点信息
const dataIndex = params.dataIndex;
const stationData = mockData.value[dataIndex];
if (stationData && stationData.stcd) {
modelStore.modalVisible = true;
modelStore.params.sttp = "fh_wq_point";
modelStore.title = stationData.stnm + "详情信息";
// modelStore.isBasicEdit = true;
modelStore.params.stcd = stationData.stcd;
}
};
// ==================== Y轴动态布局调整 ====================
const yAxisShowDynamic = (selected: Record<string, boolean>, options: any) => {
const allShow = options.yAxis?.filter((item: any) => item.show);
@ -421,8 +512,20 @@ const initChart = async () => {
const rect = chartRef.value.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0) {
console.warn('图表容器尺寸为0，等待渲染...');
await new Promise(resolve => setTimeout(resolve, 50));
return initChart();
// 使用 requestAnimationFrame 确保在浏览器下一重绘帧再初始化
return new Promise((resolve) => {
requestAnimationFrame(() => {
setTimeout(() => {
initChart().then(resolve);
}, 50);
});
});
}
// 如果图表实例已存在，先销毁
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
// 初始化可见队列：默认只显示第一个系列
@ -439,6 +542,9 @@ const initChart = async () => {
// 监听图例选择变化事件
chartInstance.on('legendselectchanged', handleLegendSelectChanged);
// 监听数据点点击事件
chartInstance.on('click', handleDataPointClick);
// 强制 resize 确保正确渲染
setTimeout(() => {
chartInstance?.resize();
@ -465,19 +571,331 @@ onMounted(async () => {
onBeforeUnmount(() => {
window.removeEventListener('resize', handleResize);
if (chartInstance) {
chartInstance.off('legendselectchanged', handleLegendSelectChanged);
chartInstance.off('click', handleDataPointClick);
chartInstance.dispose();
chartInstance = null;
}
});
//获取图参数
const getecharts = async () => {
if (!select.value.value) {
console.warn('选择器值为空，无法获取图表数据');
loading.value = false;
hasData.value = false;
chartInstance?.clear();
return;
}
console.log('开始获取图表数据，select.value:', select.value.value);
// 设置 loading 状态
loading.value = true;
hasData.value = false;
// 确保图表实例存在
if (!chartInstance) {
console.log('图表实例不存在，重新初始化...');
await nextTick();
await initChart();
// 等待图表初始化完成
await new Promise(resolve => setTimeout(resolve, 100));
}
let params = {
"filter": {
"logic": "and",
"filters": [
{
"field": "baseId",
"operator": "eq",
"dataType": "string",
"value": wbsCode.value
},
{
"field": "rvcd",
"operator": "eq",
"dataType": "string",
"value": select.value.value
},
{
"field": "tm",
"operator": "gte",
"dataType": "date",
"value": getStartTime()
},
{
"field": "tm",
"operator": "lte",
"dataType": "date",
"value": getEndTime()
}
]
},
"sort": [
{
"field": "sort",
"dir": "asc"
}
]
}
try {
console.log('请求参数:', params);
let res = await qgcGetKendoListCust(params);
console.log('接口返回数据:', res);
// 处理返回的数据 - 兼容多种数据结构
let apiData: any[] = [];
if (res && res.data) {
// 情况1: res.data.data 是数组（当前实际情况）
if (Array.isArray(res.data.data)) {
apiData = res.data.data;
}
// 情况2: res.data.data.data 是数组
else if (res.data.data && Array.isArray(res.data.data.data)) {
apiData = res.data.data.data;
}
// 情况3: res.data 直接是数组
else if (Array.isArray(res.data)) {
apiData = res.data;
}
}
console.log('原始数据条数:', apiData.length);
// 过滤出有水质数据的站点（sttp === 'WQ'）并按sort排序
const filteredData = apiData
.filter((item: any) => item.sttp === 'WQ')
.sort((a: any, b: any) => {
// 如果有sort字段则使用，否则按索引排序
return (a.sort || 0) - (b.sort || 0);
});
console.log('过滤后水质数据条数:', filteredData.length);
// 转换为图表所需的数据格式
const chartData = filteredData.map((item: any, index: number) => {
// 去除站点名称中的"出库水质站"后缀
let stnm = item.stnm || '-';
if (stnm.includes('出库水质站')) {
stnm = stnm.replace('出库水质站', '');
}
return {
stnm: stnm,
stcd: item.stcd || '',
type: item.rstcd ? '1' : '0', // 有rstcd表示是电站出库站
tm: item.tm || '',
SORT: index + 1,
ph: item.ph != null ? Number(item.ph) : null,
dox: item.dox != null ? Number(item.dox) : null,
codmn: item.codmn != null ? Number(item.codmn) : null,
nh3n: item.nh3n != null ? Number(item.nh3n) : null,
tp: item.tp != null ? Number(item.tp) : null,
tn: item.tn != null ? Number(item.tn) : null
};
});
// 更新模拟数据
mockData.value = chartData;
// 判断是否有数据
hasData.value = chartData.length > 0;
console.log('hasData 设置为:', hasData.value);
// 重新渲染图表 - 使用 nextTick 确保 DOM 更新完成
await nextTick();
if (chartInstance && hasData.value) {
// 使用 requestAnimationFrame 确保容器尺寸正确
requestAnimationFrame(() => {
const option = getChartOption();
chartInstance?.setOption(option, true);
chartInstance?.resize();
console.log('图表数据已更新，共', chartData.length, '个站点');
});
} else if (!hasData.value) {
// 无数据时清空图表
console.log('无数据，清空图表');
chartInstance?.clear();
}
} catch (error) {
console.error('获取图表数据失败:', error);
hasData.value = false;
} finally {
// 关闭 loading 状态 - 使用 nextTick 确保在下一个 tick 关闭
await nextTick();
console.log('关闭 loading 状态');
loading.value = false;
}
}
// 获取起始时间（当前选择日期前一个月）
const getStartTime = () => {
const currentDate = new Date(datetimePicker.value.value);
const oneMonthAgo = new Date(currentDate);
oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
const year = oneMonthAgo.getFullYear();
const month = String(oneMonthAgo.getMonth() + 1).padStart(2, '0');
const day = String(oneMonthAgo.getDate()).padStart(2, '0');
const hours = String(oneMonthAgo.getHours()).padStart(2, '0');
const minutes = String(oneMonthAgo.getMinutes()).padStart(2, '0');
const seconds = String(oneMonthAgo.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
// 获取结束时间（当前选择日期的当天 23:59:59）
const getEndTime = () => {
const currentDate = new Date(datetimePicker.value.value);
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const day = String(currentDate.getDate()).padStart(2, '0');
return `${year}-${month}-${day} 23:59:59`;
};
//根据流域获取河段
const getSelect = async () => {
if (!wbsCode.value) {
console.warn('wbsCode 为空，无法获取河段数据');
return;
}
let params = {
"filter": {
"logic": "and",
"filters": [
{
"field": "objId",
"operator": "eq",
"dataType": "string",
"value": wbsCode.value
},
{
"field": "wbsType",
"operator": "eq",
"dataType": "string",
"value": "PSB_RVCD"
}
]
},
"group": [
{
"dir": "asc",
"field": "orderIndex"
},
{
"dir": "des",
"field": "wbsCode"
},
{
"dir": "des",
"field": "wbsName"
}
],
"groupResultFlat": "true"
}
try {
let res = await wbsbGetKendoList(params);
// 处理返回的数据 - 注意数据结构可能是嵌套的
let data;
if (res && res.data && res.data.data) {
// 如果 res.data.data 是数组，直接使用
if (Array.isArray(res.data.data)) {
data = res.data.data;
}
// 如果 res.data.data 是对象且有 data 属性，使用 res.data.data.data
else if (res.data.data.data && Array.isArray(res.data.data.data)) {
data = res.data.data.data;
} else {
console.warn('无法解析河段数据:', res);
return;
}
} else {
console.warn('未获取到河段数据');
return;
}
if (data && data.length > 0) {
select.value.value = data[0].wbsCode;
select.value.options = data.map(item => {
return {
value: item.wbsCode,
label: item.wbsName
};
});
// 获取完选择器数据后，立即加载图表数据
await nextTick();
getecharts();
} else {
console.warn('河段数据为空');
select.value.value = '';
select.value.options = [];
hasData.value = false;
}
} catch (error) {
console.error('获取河段数据失败:', error);
}
}
//监听子组件的数据变化
const handlePanelChange1 = async (data) => {
console.log('当前所有控件状态:', data);
// 当选择器或日期变化时，重新加载图表数据
if (data.datetime || data.select) {
getecharts()
}
}
const wbsCode = ref('');
watch(
() => JidiSelectEventStore.selectedItem,
(newVal) => {
console.log(newVal);
wbsCode.value = newVal.wbsCode;
getSelect()
},
{ deep: true, immediate: true }
);
</script>
<style lang="scss" scoped>
.chart-container {
.chart-wrapper {
width: 100%;
height: 280px;
min-height: 231px;
position: relative;
/* 为empty-overlay提供定位上下文 */
.chart-container {
width: 100% !important;
height: 100% !important;
min-width: 100%;
min-height: 280px;
}
.empty-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
z-index: 10;
}
}
</style>

11
frontend/src/modules/yanchengshuiwenChangeMod/index.vue
View File

@ -199,9 +199,11 @@ const initChart = () => {
formatter: (params: any) => {
if (params && params.length > 0) {
const data = params[0];
// 过滤掉 null 值的数据点
if (data.value !== null && data.value !== undefined) {
// 根据项目规范：空值统一显示为短横线 `-`
if (data.value != null) {
return `${currentTime.value}<br/>${data.name}：${data.value}°C`;
} else {
return `${currentTime.value}<br/>${data.name}：-`;
}
}
return "";
@ -288,6 +290,7 @@ const initChart = () => {
smooth: true,
symbol: "circle",
symbolSize: 6,
connectNulls: true, // 连接空值两侧的线段，避免折线断开
lineStyle: {
color: "#6ca4f7",
width: 2,
@ -347,8 +350,8 @@ const init = async () => {
logic: "and",
filters: [
{ field: "rvcd", operator: "eq", dataType: "string", value: paramsOne.rvcd },
{ field: "tm", operator: "gte", dataType: "date", value: paramsOne.tm[0] },
{ field: "tm", operator: "lte", dataType: "date", value: paramsOne.tm[1] },
{ field: "tm", operator: "gte", dataType: "date", value: paramsOne.tm[1] },
{ field: "tm", operator: "lte", dataType: "date", value: paramsOne.tm[0] },
],
},
sort: [{ field: "sort", dir: "asc" }],

2
frontend/src/utils/request.ts
View File

@ -31,7 +31,7 @@ service.interceptors.request.use(
config.headers._sysid = '10EC2E0B-AEA9-4757-83A2-201BA1BC54E9';
config.headers.authorization =
'bearer a385ef90-a17d-429f-817f-7d961594020c';
'bearer 3f010383-deb5-464c-9198-b42af9c5c839';
config.baseURL = '/';
} else {
const user = useUserStoreHook();

3
frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue
View File

@ -12,9 +12,10 @@ watch(
() => JidiSelectEventStore.selectedItem,
(newVal) => {
console.log(newVal);
// debugger
wbsCode.value = newVal.wbsCode;
},
{ deep: true }
{ deep: true, immediate: true }
);
</script>