水质接口对接-部分
This commit is contained in:
王兴凯
commit
1fbc8ced7a
@ -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
50
frontend/src/api/sz/index.ts
Normal 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
|
||||
});
|
||||
}
|
||||
@ -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: '',
|
||||
},
|
||||
{
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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: '监测数据',
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
@ -1,80 +1,573 @@
|
||||
<!-- SidePanelItem.vue -->
|
||||
<template>
|
||||
<SidePanelItem title="地表水水质达标率">
|
||||
<SidePanelItem title="地表水水质达标率" :select="select" :datetimePicker="datetimePicker"
|
||||
@update-values="handlePanelChange1" style="height: 650px;">
|
||||
<div class="body_item">
|
||||
<div class="tabs_all">
|
||||
<div :class="tabs == 1 ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(1)">自建水质站</div>
|
||||
<div :class="tabs == 2 ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(2)">国家水质站</div>
|
||||
<div v-if="baseid == 'all'" class="tabs_all">
|
||||
<div :class="tabs == 0 ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(0)">自建水质站</div>
|
||||
<div :class="tabs == 1 ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(1)">国家水质站</div>
|
||||
</div>
|
||||
<div v-show="tabs == 1 || tabs == 2" class="tabs_body">
|
||||
<div v-show="tabs == 0 || tabs == 1" class="tabs_body">
|
||||
<a-spin :spinning="loading">
|
||||
<!-- 始终渲染图表容器，确保有固定宽高 -->
|
||||
<div ref="chartRef" class="chart-container"></div>
|
||||
<!-- 无数据时显示Empty，但不影响容器尺寸 -->
|
||||
<div v-if="chartData.length === 0 && !loading" class="empty-overlay">
|
||||
<a-empty description="暂无数据" />
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</SidePanelItem>
|
||||
|
||||
<!-- 环境质量满足度弹框 -->
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
title="环境质量满足度"
|
||||
width="1536px"
|
||||
:footer="null"
|
||||
centered
|
||||
>
|
||||
<EnvironmentalQualityTwoLayers
|
||||
:datas="jiDiList"
|
||||
:type="select.value "
|
||||
:dateValue="datetimePicker.value"
|
||||
:dataDimensionVal="baseid"
|
||||
:buildType="tabs"
|
||||
/>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
|
||||
import { wqGetKendoListCust } from '@/api/sz'
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import EnvironmentalQualityTwoLayers from "./TwoLayers/EnvironmentalQualityTwoLayers.vue"
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'EnvironmentalQuality'
|
||||
});
|
||||
|
||||
const tabs = ref(1);
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const tabs = ref(0);
|
||||
const chartRef = ref<HTMLElement | null>(null);
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
const loading = ref(false);
|
||||
|
||||
// 静态数据 - 自建水质站（第1页）
|
||||
const selfBuiltData = [
|
||||
{ name: '雅砻江\n干流', current: 99, lastYear: 100 },
|
||||
{ name: '大渡河\n干流', current: 99, lastYear: 100 },
|
||||
{ name: '黄河上游\n干流', current: 99, lastYear: 100 }
|
||||
];
|
||||
// 响应式图表数据
|
||||
const chartData = ref<Array<{ name: string; current: number | null; lastYear: number | null }>>([]);
|
||||
|
||||
// 静态数据 - 国家水质站（第2页）
|
||||
const nationalData = [
|
||||
{ name: '长江\n干流', current: 98, lastYear: 99 },
|
||||
{ name: '珠江\n干流', current: 97, lastYear: 98 },
|
||||
{ name: '淮河\n干流', current: 96, lastYear: 97 }
|
||||
];
|
||||
const select = ref({
|
||||
show: true,
|
||||
value: 'month',
|
||||
options: [
|
||||
{ value: 'month', label: '月度' },
|
||||
{ value: 'year', label: '年度' }
|
||||
],
|
||||
picker: undefined,
|
||||
format: undefined,
|
||||
});
|
||||
|
||||
// 根据tab获取对应数据
|
||||
const getCurrentData = () => {
|
||||
return tabs.value === 1 ? selfBuiltData : nationalData;
|
||||
// 日期选择器配置
|
||||
const datetimePicker = ref({
|
||||
show: true,
|
||||
value: (() => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
return `${year}-${month}`;
|
||||
})(),
|
||||
format: "YYYY-MM",
|
||||
picker: "month" as const,
|
||||
options: [],
|
||||
});
|
||||
const baseid = ref("")
|
||||
const jiDiList: any = ref([
|
||||
{
|
||||
"baseid": "all",
|
||||
"basename": "当前全部",
|
||||
"id": "9BFEC848-83EA-AD22-6DE2-10E969476693"
|
||||
},
|
||||
{
|
||||
"baseid": "01",
|
||||
"basename": "金沙江干流",
|
||||
"id": "A33040B7-8977-D9F1-5E02-D7F0241AB8AA"
|
||||
},
|
||||
{
|
||||
"baseid": "02",
|
||||
"basename": "雅砻江干流",
|
||||
"id": "C63D6020-995D-FE97-2F4A-F619A7142C79"
|
||||
},
|
||||
{
|
||||
"baseid": "03",
|
||||
"basename": "大渡河干流",
|
||||
"id": "CCB0766B-F1D4-7DD6-650F-5C556B7231B3"
|
||||
},
|
||||
{
|
||||
"baseid": "04",
|
||||
"basename": "乌江干流",
|
||||
"id": "E8A66641-B4F4-CC85-0815-38C5B2F93DBD"
|
||||
},
|
||||
{
|
||||
"baseid": "05",
|
||||
"basename": "长江上游干流",
|
||||
"id": "E02C11E9-CEA5-A030-202F-3BFE84465D03"
|
||||
},
|
||||
{
|
||||
"baseid": "10",
|
||||
"basename": "湘西",
|
||||
"id": "B1D1D52D-CEEF-6DC4-27DF-9990EB572F8D"
|
||||
},
|
||||
{
|
||||
"baseid": "08",
|
||||
"basename": "黄河上游干流",
|
||||
"id": "BC6AF135-263D-09A9-D5CA-C99B2598FE6E"
|
||||
},
|
||||
{
|
||||
"baseid": "09",
|
||||
"basename": "黄河中游干流",
|
||||
"id": "60EEEC28-128F-A2A8-44F3-6EAAC8FD8BB6"
|
||||
},
|
||||
{
|
||||
"baseid": "06",
|
||||
"basename": "南盘江-红水河",
|
||||
"id": "7BB9A8F4-34B5-42B4-A7FC-CE910AD7F203"
|
||||
},
|
||||
{
|
||||
"baseid": "12",
|
||||
"basename": "东北",
|
||||
"id": "47F8EF06-924E-E161-FCAF-62A66BBF252D"
|
||||
},
|
||||
{
|
||||
"baseid": "07",
|
||||
"basename": "澜沧江干流",
|
||||
"id": "A966A4C9-278C-B0DA-2B97-2D10B7A6E96A"
|
||||
},
|
||||
{
|
||||
"baseid": "13",
|
||||
"basename": "怒江干流",
|
||||
"id": "FA89E8CB-67A8-76DA-DC1E-23AE4C54F9E4"
|
||||
},
|
||||
{
|
||||
"baseid": "11",
|
||||
"basename": "闽浙赣",
|
||||
"id": "CD98F995-EEB2-1021-D807-DA1B1AD9E49A"
|
||||
},
|
||||
{
|
||||
"baseid": "other",
|
||||
"basename": "其他",
|
||||
"id": "AFBDFC67-B955-4EFD-959A-014CFB59EBFC"
|
||||
}
|
||||
])
|
||||
// 基地列表（从 Store 或其他来源获取）
|
||||
const baseList = computed(() => {
|
||||
// TODO: 根据实际情况返回基地列表
|
||||
// 这里需要根据项目实际情况从 Store 或 API 获取
|
||||
// 示例结构：
|
||||
// return [
|
||||
// { baseid: 'all', basename: '全部' },
|
||||
// { baseid: '01', basename: '金沙江干流' },
|
||||
// ...
|
||||
// ]
|
||||
|
||||
// 临时返回空数组，待后续补充实际数据源
|
||||
return []
|
||||
})
|
||||
|
||||
// 解析API返回的嵌套数据（支持两种结构）
|
||||
const parseApiResponse = (items: any[], currentValueForApi: string, lastYearValue: string) => {
|
||||
const result: Array<{ name: string; current: number | null; lastYear: number | null }> = [];
|
||||
|
||||
console.log('=== parseApiResponse 开始解析 ===');
|
||||
console.log('currentValueForApi:', currentValueForApi);
|
||||
console.log('lastYearValue:', lastYearValue);
|
||||
console.log('items数量:', items?.length);
|
||||
|
||||
items.forEach((group, groupIndex) => {
|
||||
console.log(`\n--- 处理第${groupIndex + 1}个group ---`);
|
||||
console.log('group.key:', group.key);
|
||||
console.log('group.items数量:', group.items?.length);
|
||||
|
||||
group.items?.forEach((mainGroup, mainIndex) => {
|
||||
console.log(` → 第${mainIndex + 1}个mainGroup:`);
|
||||
console.log(' field:', mainGroup.field);
|
||||
console.log(' key:', mainGroup.key);
|
||||
|
||||
// 判断是哪种结构：检查第二层的field字段
|
||||
const field = mainGroup.field;
|
||||
|
||||
if (field === 'ennm' || field === 'baseId') {
|
||||
// 提取中文名称：从mainGroup.key获取（站点名或基地ID）
|
||||
let displayName = '';
|
||||
|
||||
// mainGroup.key 可能是站点名（如"两河口"）或基地ID（如"02"）
|
||||
if (mainGroup.key && typeof mainGroup.key === 'string') {
|
||||
displayName = mainGroup.key;
|
||||
console.log(' 从mainGroup.key获取名称:', displayName);
|
||||
}
|
||||
|
||||
// 如果mainGroup.key不是有效的中文名称，尝试从subGroup.key获取
|
||||
if (!displayName || !/[\u4e00-\u9fa5]/.test(displayName)) {
|
||||
const subGroup = mainGroup.items?.[0];
|
||||
console.log(' subGroup.key:', subGroup?.key);
|
||||
if (subGroup && subGroup.key && typeof subGroup.key === 'string') {
|
||||
displayName = subGroup.key; // 这里应该是中文名（如"雅砻江干流"）
|
||||
console.log(' 从subGroup.key获取名称:', displayName);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果还是没有，尝试从最内层数据获取
|
||||
if (!displayName) {
|
||||
const subGroup = mainGroup.items?.[0];
|
||||
const firstMonthGroup = subGroup?.items?.[0];
|
||||
const dataItem = firstMonthGroup?.items?.[0];
|
||||
if (dataItem) {
|
||||
if (field === 'ennm') {
|
||||
displayName = dataItem.ENNM || '';
|
||||
} else if (field === 'baseId') {
|
||||
displayName = dataItem.BASENAME || '';
|
||||
}
|
||||
console.log(' 从最内层数据获取名称:', displayName);
|
||||
}
|
||||
}
|
||||
|
||||
if (!displayName) {
|
||||
console.log(' ⚠️ 跳过：没有名称');
|
||||
return; // 跳过没有名称的数据
|
||||
}
|
||||
|
||||
let currentPeriodValue: number | null = null;
|
||||
let lastYearPeriodValue: number | null = null;
|
||||
|
||||
// 遍历时间分组：需要深入到第3层
|
||||
const subGroup = mainGroup.items?.[0];
|
||||
console.log(' subGroup.items数量:', subGroup?.items?.length);
|
||||
|
||||
subGroup?.items?.forEach(monthGroup => {
|
||||
const periodKey = monthGroup.key; // "2026-05" 或 "2025-05"
|
||||
const dataItem = monthGroup.items?.[0];
|
||||
|
||||
if (dataItem) {
|
||||
const value = dataItem.COUNT_DRMONTH ?? dataItem.wqRate;
|
||||
console.log(` 时间:${periodKey}, 值:${value}`);
|
||||
|
||||
// 判断是当前期还是去年同期
|
||||
if (periodKey === currentValueForApi) {
|
||||
currentPeriodValue = value != null ? Number(value) : null;
|
||||
console.log(` ✓ 当前期值: ${currentPeriodValue}`);
|
||||
} else if (periodKey === lastYearValue) {
|
||||
lastYearPeriodValue = value != null ? Number(value) : null;
|
||||
console.log(` ✓ 去年同期值: ${lastYearPeriodValue}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 添加换行符：在"干流"前添加\n
|
||||
const finalDisplayName = displayName.replace(/干流$/, '\n干流');
|
||||
|
||||
console.log(` → 最终数据: {name: "${finalDisplayName}", current: ${currentPeriodValue}, lastYear: ${lastYearPeriodValue}}`);
|
||||
|
||||
result.push({
|
||||
name: finalDisplayName,
|
||||
current: currentPeriodValue,
|
||||
lastYear: lastYearPeriodValue
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
console.log('\n=== parseApiResponse 解析完成 ===');
|
||||
console.log('result数量:', result.length);
|
||||
console.log('result:', result);
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
// 处理tab切换
|
||||
const handleTabChange = (tab: number) => {
|
||||
tabs.value = tab;
|
||||
getEchartsData()
|
||||
};
|
||||
|
||||
// 监听tabs变化，处理图表刷新
|
||||
//监听tabs变化，处理图表刷新
|
||||
watch(tabs, (newVal) => {
|
||||
if (newVal === 1 || newVal === 2) {
|
||||
if (newVal === 0 || newVal === 1) {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
if (!chartInstance) {
|
||||
initChart();
|
||||
} else {
|
||||
// 更新图表数据
|
||||
updateChartData();
|
||||
}
|
||||
getEchartsData();
|
||||
|
||||
}, 50);
|
||||
});
|
||||
}
|
||||
});
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
(newVal) => {
|
||||
if (newVal && newVal.wbsCode) {
|
||||
baseid.value = newVal.wbsCode;
|
||||
getEchartsData();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
// 初始化图表实例（仅创建实例，不设置option）
|
||||
const initChart = (): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!chartRef.value) {
|
||||
console.error('图表容器ref不存在');
|
||||
reject(new Error('图表容器不存在'));
|
||||
return;
|
||||
}
|
||||
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
if (chartInstance) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
const currentData = getCurrentData();
|
||||
const domElement = chartRef.value;
|
||||
|
||||
// 检查 DOM 尺寸
|
||||
if (domElement.clientWidth === 0 || domElement.clientHeight === 0) {
|
||||
console.warn('图表容器尺寸为0，等待DOM布局完成...', {
|
||||
clientWidth: domElement.clientWidth,
|
||||
clientHeight: domElement.clientHeight,
|
||||
offsetWidth: domElement.offsetWidth,
|
||||
offsetHeight: domElement.offsetHeight
|
||||
});
|
||||
|
||||
// 使用多次重试机制
|
||||
let retryCount = 0;
|
||||
const maxRetries = 10;
|
||||
|
||||
const tryInit = () => {
|
||||
retryCount++;
|
||||
|
||||
if (domElement.clientWidth > 0 && domElement.clientHeight > 0) {
|
||||
chartInstance = echarts.init(domElement);
|
||||
console.log('图表实例已创建（第' + retryCount + '次尝试）');
|
||||
resolve();
|
||||
} else if (retryCount < maxRetries) {
|
||||
console.log(`第${retryCount}次尝试，容器尺寸仍为0，继续等待...`);
|
||||
requestAnimationFrame(tryInit);
|
||||
} else {
|
||||
console.error('图表容器尺寸仍为0，已达到最大重试次数', {
|
||||
clientWidth: domElement.clientWidth,
|
||||
clientHeight: domElement.clientHeight
|
||||
});
|
||||
reject(new Error('图表容器尺寸为0'));
|
||||
}
|
||||
};
|
||||
|
||||
// 开始重试
|
||||
requestAnimationFrame(tryInit);
|
||||
} else {
|
||||
// 尺寸正常，直接初始化
|
||||
chartInstance = echarts.init(domElement);
|
||||
console.log('图表实例已创建');
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//获取图表数据
|
||||
const getEchartsData = async () => {
|
||||
// 1. 格式验证
|
||||
const currentValue = datetimePicker.value.value;
|
||||
// debugger
|
||||
if (select.value.value === 'year') {
|
||||
// 年度模式：验证是否为 YYYY 格式（4位数字）
|
||||
if (!/^\d{4}$/.test(currentValue)) {
|
||||
console.warn('年度模式下日期格式不正确，应为 YYYY 格式');
|
||||
return;
|
||||
}
|
||||
} else if (select.value.value === 'month') {
|
||||
// 月度模式：验证是否为 YYYY-MM 格式
|
||||
if (!/^\d{4}-\d{2}$/.test(currentValue)) {
|
||||
console.warn('月度模式下日期格式不正确，应为 YYYY-MM 格式');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
console.warn('未知的选择器类型');
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 计算当前值和上一年的值
|
||||
let currentValueForApi: string; // 第一个值：当前选择
|
||||
let lastYearValue: string; // 第二个值：上一年同期
|
||||
|
||||
if (select.value.value === 'year') {
|
||||
// 年模式
|
||||
currentValueForApi = currentValue; // "2025"
|
||||
lastYearValue = String(Number(currentValue) - 1); // "2024"
|
||||
} else {
|
||||
// 月模式
|
||||
currentValueForApi = currentValue; // "2025-03"
|
||||
|
||||
// 提取年份和月份
|
||||
const [year, month] = currentValue.split('-');
|
||||
// 年份减1，月份保持不变
|
||||
const lastYear = String(Number(year) - 1);
|
||||
lastYearValue = `${lastYear}-${month}`; // "2024-03"
|
||||
}
|
||||
|
||||
// 3. 构建请求参数
|
||||
let params = {
|
||||
"filter": {
|
||||
"logic": "and",
|
||||
"filters": [
|
||||
baseid.value != 'all' ? {
|
||||
"field": "baseId",
|
||||
"operator": "eq",
|
||||
"value": baseid.value
|
||||
} : null,
|
||||
{
|
||||
"field": "type",
|
||||
"operator": "eq",
|
||||
"value": select.value.value == "year" ? "YEAR" : "MON"
|
||||
},
|
||||
{
|
||||
"field": "dtinType",
|
||||
"operator": "eq",
|
||||
"value": tabs.value
|
||||
},
|
||||
{
|
||||
"logic": "or",
|
||||
"filters": [
|
||||
{
|
||||
"field": select.value.value == "year" ? "drYear" : "drMonth",
|
||||
"operator": "eq",
|
||||
"value": currentValueForApi, // 当前值（年或年月）
|
||||
"dataType": "string"
|
||||
},
|
||||
{
|
||||
"field": select.value.value == "year" ? "drYear" : "drMonth",
|
||||
"operator": "eq",
|
||||
"value": lastYearValue, // 上一年同期
|
||||
"dataType": "string"
|
||||
}
|
||||
]
|
||||
}
|
||||
].filter(Boolean)
|
||||
},
|
||||
"group": [
|
||||
{
|
||||
"dir": "des",
|
||||
"field": "baseStepSort"
|
||||
},
|
||||
baseid.value == 'all' ? {
|
||||
"dir": "des",
|
||||
"field": "baseId"
|
||||
} : {
|
||||
"dir": "asc",
|
||||
"field": "ennm"
|
||||
},
|
||||
baseid.value == 'all' ? {
|
||||
"dir": "des",
|
||||
"field": "baseName"
|
||||
} : {
|
||||
"dir": "des",
|
||||
"field": "rstcd"
|
||||
},
|
||||
{
|
||||
"dir": "desc",
|
||||
"field": select.value.value == "year" ? "drYear" : "drMonth"
|
||||
}
|
||||
],
|
||||
"groupResultFlat": false,
|
||||
"aggregate": [
|
||||
{
|
||||
"aggregate": "sum",
|
||||
"field": "wqRate"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 4. 调用API并处理数据
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await wqGetKendoListCust(params);
|
||||
|
||||
console.log('=== API返回数据调试 ===');
|
||||
console.log('res:', res);
|
||||
console.log('res.data:', res?.data);
|
||||
console.log('res.data.data:', res?.data?.data);
|
||||
console.log('currentValueForApi:', currentValueForApi);
|
||||
console.log('lastYearValue:', lastYearValue);
|
||||
|
||||
if (!res?.data?.data) {
|
||||
console.warn('数据获取失败或数据为空');
|
||||
chartData.value = [];
|
||||
// 清空图表中原有的数据
|
||||
if (chartInstance) {
|
||||
chartInstance.clear();
|
||||
console.log('图表已清空（数据获取失败）');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 解析数据
|
||||
const parsedData = parseApiResponse(res.data.data, currentValueForApi, lastYearValue);
|
||||
|
||||
console.log('解析后的数据 parsedData:', parsedData);
|
||||
|
||||
// 只有当有数据时才更新
|
||||
if (parsedData.length > 0) {
|
||||
chartData.value = parsedData;
|
||||
|
||||
console.log('chartData.value:', chartData.value);
|
||||
|
||||
// 等待 DOM 更新后，再初始化和更新图表
|
||||
await nextTick();
|
||||
|
||||
try {
|
||||
// 如果图表实例不存在，先初始化（等待完成）
|
||||
if (!chartInstance) {
|
||||
await initChart();
|
||||
}
|
||||
|
||||
// 更新图表
|
||||
if (chartInstance) {
|
||||
updateChartData(currentValueForApi, lastYearValue);
|
||||
console.log('图表已更新');
|
||||
} else {
|
||||
console.error('图表实例创建失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('图表初始化失败:', error);
|
||||
}
|
||||
} else {
|
||||
chartData.value = [];
|
||||
console.warn('解析后数据为空');
|
||||
// 清空图表中原有的数据
|
||||
if (chartInstance) {
|
||||
chartInstance.clear();
|
||||
console.log('图表已清空（解析后数据为空）');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取图表数据失败:', error);
|
||||
chartData.value = [];
|
||||
// 清空图表中原有的数据
|
||||
if (chartInstance) {
|
||||
chartInstance.clear();
|
||||
console.log('图表已清空（发生错误）');
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 更新图表数据
|
||||
const updateChartData = (currentLabel: string, lastYearLabel: string) => {
|
||||
if (!chartInstance) return;
|
||||
|
||||
// 动态生成图例标签
|
||||
const modeText = select.value.value === 'year' ? '' : ' 月度';
|
||||
const legendCurrentLabel = currentLabel + modeText;
|
||||
const legendLastYearLabel = ' 去年同期';
|
||||
|
||||
const option = {
|
||||
// 图例配置
|
||||
@ -85,8 +578,8 @@ const initChart = () => {
|
||||
itemGap: 20,
|
||||
icon: 'roundRect',
|
||||
data: [
|
||||
{ name: '2026-04 月度', itemStyle: { color: '#4A8BC2' } },
|
||||
{ name: '去年同期', itemStyle: { color: '#9B59B6' } }
|
||||
{ name: legendCurrentLabel, itemStyle: { color: '#4A8BC2' } },
|
||||
{ name: legendLastYearLabel, itemStyle: { color: '#9B59B6' } }
|
||||
],
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
@ -118,10 +611,11 @@ const initChart = () => {
|
||||
const name = params[0].name.replace('\n', '');
|
||||
let result = `<div style="font-weight: bold; margin-bottom: 8px;">${name}</div>`;
|
||||
params.forEach((item: any) => {
|
||||
const value = item.value != null ? Number(item.value).toFixed(1) : '-';
|
||||
result += `<div style="display: flex; align-items: center; margin-bottom: 4px;">
|
||||
<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: ${item.color}; margin-right: 8px;"></span>
|
||||
<span>${item.seriesName}:</span>
|
||||
<span style="margin-left: auto; font-weight: bold;">${item.value} %</span>
|
||||
<span style="margin-left: auto; font-weight: bold;">${value}%</span>
|
||||
</div>`;
|
||||
});
|
||||
return result;
|
||||
@ -133,7 +627,7 @@ const initChart = () => {
|
||||
left: 60,
|
||||
right: 10,
|
||||
top: 60,
|
||||
bottom: 50
|
||||
bottom: 60
|
||||
},
|
||||
|
||||
// X轴配置
|
||||
@ -163,7 +657,7 @@ const initChart = () => {
|
||||
// Y轴配置
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: currentData.map(item => item.name),
|
||||
data: chartData.value.map(item => item.name),
|
||||
inverse: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -199,29 +693,20 @@ const initChart = () => {
|
||||
// 系列配置
|
||||
series: [
|
||||
{
|
||||
name: '2026-04 月度',
|
||||
name: legendCurrentLabel,
|
||||
type: 'bar',
|
||||
data: currentData.map(item => item.current),
|
||||
data: chartData.value.map(item => item.current != null ? Number(item.current).toFixed(1) : null),
|
||||
barWidth: 10,
|
||||
barGap: '20%',
|
||||
itemStyle: {
|
||||
color: '#4A8BC2',
|
||||
borderRadius: [0, 3, 3, 0]
|
||||
},
|
||||
markArea: {
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
color: 'rgba(240, 245, 250, 0.5)'
|
||||
},
|
||||
data: [
|
||||
[{ yAxis: 1 }, { yAxis: 2 }]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '去年同期',
|
||||
name: legendLastYearLabel,
|
||||
type: 'bar',
|
||||
data: currentData.map(item => item.lastYear),
|
||||
data: chartData.value.map(item => item.lastYear != null ? Number(item.lastYear).toFixed(1) : null),
|
||||
barWidth: 10,
|
||||
barGap: '20%',
|
||||
itemStyle: {
|
||||
@ -232,38 +717,69 @@ const initChart = () => {
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
chartInstance.setOption(option, { notMerge: true });
|
||||
|
||||
// 更新图表数据
|
||||
const updateChartData = () => {
|
||||
if (!chartInstance) return;
|
||||
// 移除旧的点击事件监听
|
||||
chartInstance.off('click');
|
||||
|
||||
const currentData = getCurrentData();
|
||||
// 绑定点击事件
|
||||
chartInstance.on('click', (params: any) => {
|
||||
if (params.componentType === 'series' && params.seriesType === 'bar') {
|
||||
// 获取点击的柱子对应的数据
|
||||
const dataIndex = params.dataIndex;
|
||||
const barData = chartData.value[dataIndex];
|
||||
|
||||
chartInstance.setOption({
|
||||
yAxis: {
|
||||
data: currentData.map(item => item.name)
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: currentData.map(item => item.current)
|
||||
},
|
||||
{
|
||||
data: currentData.map(item => item.lastYear)
|
||||
if (barData) {
|
||||
clickedBarData.value = {
|
||||
name: barData.name.replace('\n', ''), // 去除换行符
|
||||
current: barData.current,
|
||||
lastYear: barData.lastYear
|
||||
};
|
||||
modalVisible.value = true;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 强制重新计算尺寸
|
||||
chartInstance.resize();
|
||||
};
|
||||
|
||||
// 监听 datetimePicker.value.value 的变化
|
||||
watch(
|
||||
() => datetimePicker.value.value,
|
||||
async (newValue, oldValue) => {
|
||||
// 确保新值和旧值不同，且图表已初始化
|
||||
if (newValue !== oldValue && chartInstance) {
|
||||
await nextTick();
|
||||
getEchartsData();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
//监听子组件的数据变化
|
||||
const handlePanelChange1 = async (data) => {
|
||||
console.log('当前所有控件状态:', data);
|
||||
// debugger
|
||||
// 当选择器或日期变化时，重新加载图表数据
|
||||
if (data.select || data.datetime) {
|
||||
await (select.value.value = data.select)
|
||||
await (datetimePicker.value.value = data.datetime)
|
||||
await (datetimePicker.value.picker = data.select)
|
||||
await (datetimePicker.value.format = data.select == 'month' ? 'YYYY-MM' : 'YYYY')
|
||||
getEchartsData()
|
||||
}
|
||||
}
|
||||
//获取图表数据
|
||||
|
||||
|
||||
|
||||
// 页面加载时执行
|
||||
onMounted(() => {
|
||||
// 延迟初始化，确保容器已渲染
|
||||
setTimeout(() => {
|
||||
initChart();
|
||||
// 如果已有 selectedItem，触发数据加载
|
||||
if (JidiSelectEventStore.selectedItem?.wbsCode) {
|
||||
baseid.value = JidiSelectEventStore.selectedItem.wbsCode;
|
||||
getEchartsData();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// 监听窗口resize
|
||||
@ -275,10 +791,55 @@ onMounted(() => {
|
||||
// 组件卸载时清理
|
||||
onUnmounted(() => {
|
||||
chartInstance?.dispose();
|
||||
chartInstance = null;
|
||||
chartData.value = [];
|
||||
window.removeEventListener('resize', () => {
|
||||
chartInstance?.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// 弹框相关状态
|
||||
const modalVisible = ref(false);
|
||||
const clickedBarData = ref<{ name: string; current: number | null; lastYear: number | null } | null>(null);
|
||||
|
||||
// 计算弹框中的时间信息
|
||||
const modalTimeInfo = computed(() => {
|
||||
if (!datetimePicker.value.value) return '';
|
||||
|
||||
const currentValue = datetimePicker.value.value;
|
||||
const modeText = select.value.value === 'year' ? '年度' : '月度';
|
||||
|
||||
if (select.value.value === 'year') {
|
||||
return `${currentValue}年 ${modeText}`;
|
||||
} else {
|
||||
const [year, month] = currentValue.split('-');
|
||||
return `${year}年${month}月 ${modeText}`;
|
||||
}
|
||||
});
|
||||
|
||||
// 计算同比变化值
|
||||
const getChangeValue = () => {
|
||||
if (!clickedBarData.value || clickedBarData.value.current == null || clickedBarData.value.lastYear == null) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
const change = Number(clickedBarData.value.current) - Number(clickedBarData.value.lastYear);
|
||||
const symbol = change > 0 ? '+' : '';
|
||||
return `${symbol}${change.toFixed(1)}%`;
|
||||
};
|
||||
|
||||
// 获取变化值的样式类
|
||||
const getChangeClass = () => {
|
||||
if (!clickedBarData.value || clickedBarData.value.current == null || clickedBarData.value.lastYear == null) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const change = Number(clickedBarData.value.current) - Number(clickedBarData.value.lastYear);
|
||||
if (change > 0) return 'positive';
|
||||
if (change < 0) return 'negative';
|
||||
return 'neutral';
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -291,7 +852,7 @@ onUnmounted(() => {
|
||||
|
||||
.tabs_all {
|
||||
width: 28px;
|
||||
height: 600px;
|
||||
height: 500px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #2f6b98;
|
||||
border-radius: 5px;
|
||||
@ -322,6 +883,7 @@ onUnmounted(() => {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.no_tabs:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
@ -333,10 +895,119 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
/* 为empty-overlay提供定位上下文 */
|
||||
|
||||
.chart-container {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
min-width: 368px;
|
||||
/* 强制最小宽度 */
|
||||
min-height: 600px;
|
||||
/* 强制最小高度 */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 20px;
|
||||
|
||||
.detail-info {
|
||||
.info-header {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid #e8e8e8;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.time-info {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.info-body {
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 16px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
&.current {
|
||||
color: #4A8BC2;
|
||||
}
|
||||
|
||||
&.last-year {
|
||||
color: #9B59B6;
|
||||
}
|
||||
|
||||
&.change {
|
||||
&.positive {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.negative {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.neutral {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-section {
|
||||
margin-top: 24px;
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e8e8e8;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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(() => {
|
||||
// 可以在这里加载实际的图片数据
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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>`;
|
||||
});
|
||||
|
||||
@ -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)
|
||||
// 清空测站选择
|
||||
|
||||
@ -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">
|
||||
<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>
|
||||
</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(() => {
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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[]>([]);
|
||||
@ -90,12 +116,22 @@ const getChartOption = (): EChartsOption => {
|
||||
}
|
||||
|
||||
// X轴数据（站点名称）
|
||||
const xData = data.map((item, index) => ({
|
||||
value: item.stnm,
|
||||
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[] = [];
|
||||
@ -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: {
|
||||
@ -190,8 +253,10 @@ 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) => {
|
||||
@ -199,16 +264,12 @@ const getChartOption = (): EChartsOption => {
|
||||
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/>`;
|
||||
@ -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,
|
||||
@ -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();
|
||||
@ -468,16 +574,328 @@ onBeforeUnmount(() => {
|
||||
|
||||
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>
|
||||
|
||||
@ -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" }],
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -12,9 +12,10 @@ watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
(newVal) => {
|
||||
console.log(newVal);
|
||||
// debugger
|
||||
wbsCode.value = newVal.wbsCode;
|
||||
},
|
||||
{ deep: true }
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user