965 lines
31 KiB
Vue
965 lines
31 KiB
Vue
<template>
|
||
<div class="water-temp-compare-modal">
|
||
<!-- 搜索区域 -->
|
||
<a-row>
|
||
<a-col>
|
||
<a-form-item label="测站选择">
|
||
<a-tree-select
|
||
v-model:value="selectValue"
|
||
v-model:tree-expanded-keys="treeExpandedKeys"
|
||
:tree-data="processedSelectOptions"
|
||
placeholder="请选择测站"
|
||
style="width: 200px;margin-right: 10px;"
|
||
:loading="loading"
|
||
@change="handleSelectChange"
|
||
:field-names="{ label: 'title', value: 'value', children: 'children' }"
|
||
tree-node-filter-prop="title"
|
||
show-search
|
||
popup-class-name="no-wrap-tree-select"
|
||
@select="handleTreeSelect" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col>
|
||
<a-form-item label="日期选择">
|
||
<a-month-picker
|
||
v-model:value="dateValue"
|
||
format="YYYY-MM"
|
||
placeholder="请选择月份"
|
||
style="width: 200px;margin-right: 10px;"
|
||
@change="handleDateChange"
|
||
:disabled-date="disabledMonthDate" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col>
|
||
<a-button type="primary" @click="handleSearch" :loading="loading">
|
||
查询
|
||
</a-button>
|
||
<a-button style="margin-left: 8px" @click="handleReset">
|
||
重置
|
||
</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
<!-- 图表区域 -->
|
||
<a-spin :spinning="loading" tip="加载中...">
|
||
<div v-show="!loading && showChart" class="water-temp-compare-chart" ref="chartRef"></div>
|
||
<div v-show="!loading && !showChart" class="water-temp-compare-chart">
|
||
<a-empty description="暂无数据" />
|
||
</div>
|
||
</a-spin>
|
||
|
||
<!-- 数据点详情弹框 -->
|
||
<a-modal v-model:open="detailModalVisible" :title="'月均水温对比'" width="1536px" :footer="null" @cancel="handleDetailModalClose">
|
||
<div v-if="detailModalData" >
|
||
<MonthlyAverage
|
||
:tm="detailModalData.date ? dayjs(detailModalData.date).format('YYYY-MM') + '-01 00:00:00' : dayjs().format('YYYY-MM') + '-01 23:59:59'"
|
||
:dataDimensionVal="detailModalData.baseid"
|
||
:rvcd="detailModalData.rvcd"
|
||
:stcd="detailModalData.stcd"
|
||
:jdList="JidiSelectEventStore.jidiData" />
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, watch, computed, nextTick } from 'vue'
|
||
import * as echarts from 'echarts'
|
||
import { wbsbGetKendoList, avgMonGetKendoListCust } from "@/api/sw";
|
||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||
import dayjs from 'dayjs';
|
||
import { ZoomInOutlined } from '@ant-design/icons-vue';
|
||
import type { Dayjs } from 'dayjs';
|
||
import MonthlyAverage from '../monthlyAverage.vue';
|
||
|
||
defineOptions({
|
||
name: 'MonthlyAverageMaxModal'
|
||
});
|
||
|
||
// Props 定义 - 双向绑定模式
|
||
const props = defineProps<{
|
||
modelValue?: {
|
||
selectValue: string;
|
||
dateValue: string | Dayjs;
|
||
}
|
||
visible?: boolean; // 弹框可见状态
|
||
}>();
|
||
|
||
const emit = defineEmits(['update:modelValue']);
|
||
|
||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||
const chartRef = ref<HTMLElement | null>(null)
|
||
let chartInstance: echarts.ECharts | null = null
|
||
|
||
const unit = '°C'
|
||
const baseid: any = ref(null);
|
||
const loading = ref(false);
|
||
const showChart = ref(true);
|
||
|
||
// 详情弹框相关状态
|
||
const detailModalVisible = ref(false);
|
||
const detailModalData = ref<any>(null);
|
||
// 选择器相关 - 内部状态管理
|
||
const selectValue = ref('');
|
||
const selectOptions = ref<any[]>([]);
|
||
|
||
// 树形选择器展开状态管理
|
||
const treeExpandedKeys = ref<string[]>([])
|
||
const nodeMap = new Map<string, { node: any; parentKey: string | null }>()
|
||
|
||
/**
|
||
* 递归处理树数据，为父节点添加 selectable: false
|
||
* @param data 原始树数据
|
||
* @returns 处理后的树数据
|
||
*/
|
||
const processTreeData = (data: any[]): any[] => {
|
||
if (!data || !Array.isArray(data)) return [];
|
||
|
||
return data.map(item => {
|
||
const newItem = { ...item };
|
||
|
||
// 如果有子项，标记为不可选中
|
||
if (newItem.children && newItem.children.length > 0) {
|
||
newItem.selectable = false;
|
||
// 递归处理子项
|
||
newItem.children = processTreeData(newItem.children);
|
||
} else {
|
||
// 叶子节点默认可选中（显式声明更清晰）
|
||
newItem.selectable = true;
|
||
}
|
||
|
||
return newItem;
|
||
});
|
||
};
|
||
|
||
// 计算属性：处理后的树数据
|
||
const processedSelectOptions = computed(() => {
|
||
return processTreeData(selectOptions.value || []);
|
||
});
|
||
|
||
/**
|
||
* 构建树节点映射（建立父子关系）
|
||
* @param treeData 树形数据
|
||
* @param parentKey 父节点key
|
||
*/
|
||
const buildNodeMap = (treeData: any[], parentKey: string | null = null) => {
|
||
if (!treeData || !Array.isArray(treeData)) return
|
||
|
||
treeData.forEach(node => {
|
||
// 存储当前节点及其父节点信息
|
||
nodeMap.set(node.value, {
|
||
node,
|
||
parentKey
|
||
})
|
||
|
||
// 递归处理子节点
|
||
if (node.children && node.children.length > 0) {
|
||
buildNodeMap(node.children, node.value)
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取目标节点的所有父节点keys
|
||
* @param targetValue 目标节点value
|
||
* @returns 父节点keys数组（从根到直接父节点）
|
||
*/
|
||
const getParentKeys = (targetValue: string): string[] => {
|
||
const parentKeys: string[] = []
|
||
let currentKey: string | null = targetValue
|
||
|
||
// 向上追溯所有父节点
|
||
while (currentKey !== null && currentKey !== undefined) {
|
||
const nodeInfo = nodeMap.get(currentKey)
|
||
|
||
// 如果节点不存在或已到达根节点，停止追溯
|
||
if (!nodeInfo || nodeInfo.parentKey === null || nodeInfo.parentKey === undefined) {
|
||
break
|
||
}
|
||
|
||
// 将父节点插入到数组开头（保持从根到叶的顺序）
|
||
parentKeys.unshift(nodeInfo.parentKey)
|
||
currentKey = nodeInfo.parentKey
|
||
}
|
||
|
||
return parentKeys
|
||
}
|
||
|
||
// 日期选择器相关 - 内部状态管理（Dayjs 对象）
|
||
const dateValue = ref<Dayjs | null>(null);
|
||
|
||
/**
|
||
* 禁用未来月份
|
||
* @param current 当前日期对象
|
||
* @returns 是否禁用
|
||
*/
|
||
const disabledMonthDate = (current: Dayjs) => {
|
||
if (!current) return false
|
||
const now = dayjs()
|
||
// 禁用大于当前年月的日期
|
||
return current.isAfter(now, 'month')
|
||
}
|
||
|
||
/**
|
||
* 处理树节点选择事件
|
||
* @param selectedKeys 选中的键值
|
||
* @param info 节点信息
|
||
*/
|
||
const handleTreeSelect = (selectedKeys: string | string[], info: any) => {
|
||
let selectedValue: string;
|
||
|
||
if (typeof selectedKeys === 'string') {
|
||
selectedValue = selectedKeys;
|
||
} else if (Array.isArray(selectedKeys)) {
|
||
selectedValue = selectedKeys[0];
|
||
} else {
|
||
selectedValue = info?.value || '';
|
||
}
|
||
|
||
selectValue.value = selectedValue;
|
||
};
|
||
|
||
const filterSelectOptions = (selectOptions: any) => {
|
||
if (selectOptions?.length === 1 && selectOptions?.[0]?.children?.length === 1) {
|
||
return [{ ...selectOptions?.[0]?.children?.[0], isLeaf: true }]
|
||
} else if (selectOptions.length) {
|
||
return selectOptions.map((e) => {
|
||
if (e?.children?.length > 1) {
|
||
return { ...e, isLeaf: false, selectable: true, children: e.children.map((item) => ({ ...item, isLeaf: true })) }
|
||
} else {
|
||
return { ...e.children[0], isLeaf: true }
|
||
}
|
||
})
|
||
}
|
||
return []
|
||
}
|
||
|
||
// 监听 props.modelValue 变化，同步到内部状态
|
||
watch(
|
||
() => props.modelValue,
|
||
(newVal) => {
|
||
if (newVal) {
|
||
// 同步 selectValue
|
||
if (newVal.selectValue !== undefined && newVal.selectValue !== selectValue.value) {
|
||
selectValue.value = newVal.selectValue;
|
||
}
|
||
|
||
// 同步 dateValue（兼容 string 和 Dayjs 类型）
|
||
if (newVal.dateValue !== undefined) {
|
||
const newDateValue = typeof newVal.dateValue === 'string'
|
||
? dayjs(newVal.dateValue, 'YYYY-MM')
|
||
: newVal.dateValue;
|
||
|
||
if (!dateValue.value || !newDateValue.isSame(dateValue.value)) {
|
||
dateValue.value = newDateValue;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{ deep: true, immediate: true }
|
||
);
|
||
|
||
// 监听内部状态变化，emit 给父组件（添加防循环机制）
|
||
watch(selectValue, (newVal) => {
|
||
// 只有当父组件传入的值与当前值不同时才 emit
|
||
if (props.modelValue?.selectValue !== newVal) {
|
||
emit('update:modelValue', {
|
||
selectValue: newVal,
|
||
dateValue: dateValue.value ? dateValue.value.format('YYYY-MM') : ''
|
||
});
|
||
}
|
||
});
|
||
|
||
watch(dateValue, (newVal) => {
|
||
const formattedDate = newVal ? newVal.format('YYYY-MM') : '';
|
||
// 只有当父组件传入的值与当前值不同时才 emit
|
||
if (props.modelValue?.dateValue !== formattedDate) {
|
||
emit('update:modelValue', {
|
||
selectValue: selectValue.value,
|
||
dateValue: formattedDate
|
||
});
|
||
}
|
||
});
|
||
|
||
// 监听弹框 visible 状态变化，每次打开时重新查询数据
|
||
watch(
|
||
() => props.visible,
|
||
(newVal) => {
|
||
if (newVal === true) {
|
||
// 弹框打开时，确保使用最新的父组件传入值
|
||
console.log('弹框打开，重新查询数据');
|
||
|
||
// 优先使用父组件传入的值进行查询
|
||
const querySelectValue = props.modelValue?.selectValue || selectValue.value;
|
||
const queryDateValue = props.modelValue?.dateValue || dateValue.value;
|
||
|
||
console.log('查询参数 - selectValue:', querySelectValue, 'dateValue:', queryDateValue);
|
||
|
||
// 如果父组件传入了新值，先同步到内部状态
|
||
if (props.modelValue?.selectValue && props.modelValue.selectValue !== selectValue.value) {
|
||
selectValue.value = props.modelValue.selectValue;
|
||
}
|
||
if (props.modelValue?.dateValue) {
|
||
const newDateValue = typeof props.modelValue.dateValue === 'string'
|
||
? dayjs(props.modelValue.dateValue, 'YYYY-MM')
|
||
: props.modelValue.dateValue;
|
||
if (!dateValue.value || !newDateValue.isSame(dateValue.value)) {
|
||
dateValue.value = newDateValue;
|
||
}
|
||
}
|
||
|
||
// 使用同步后的值查询数据
|
||
getEchartsData();
|
||
}
|
||
}
|
||
);
|
||
|
||
//获取选择器配置参数
|
||
const getSelectConfig = async () => {
|
||
loading.value = true;
|
||
|
||
try {
|
||
let obj: any = {}
|
||
if (baseid.value === 'all') {
|
||
obj = { rstcdStepSort: 'asc', siteStepSort: 'asc' }
|
||
} else {
|
||
obj = { siteStepSort: 'asc' }
|
||
}
|
||
const filters = [
|
||
{
|
||
field: 'wbsType',
|
||
operator: 'eq',
|
||
value: 'PSB_RVCD'
|
||
}
|
||
]
|
||
if (baseid.value && baseid.value !== 'all') {
|
||
filters.push({
|
||
field: 'objId',
|
||
operator: 'eq',
|
||
value: baseid.value
|
||
})
|
||
}
|
||
let data: any = {
|
||
filter: {
|
||
logic: 'and',
|
||
filters
|
||
}
|
||
}
|
||
|
||
if (obj) {
|
||
data.sort = [obj]
|
||
} else {
|
||
data = {
|
||
...data,
|
||
group: [
|
||
{ dir: 'asc', field: 'orderIndex' },
|
||
{ dir: 'asc', field: 'wbsCode' },
|
||
{ dir: 'asc', field: 'wbsName' },
|
||
{ dir: 'asc', field: 'objid' },
|
||
],
|
||
groupResultFlat: true
|
||
}
|
||
}
|
||
let res = await wbsbGetKendoList(data)
|
||
let dataOne = res?.data?.data || res?.data
|
||
|
||
if (dataOne.length > 0) {
|
||
let dataMapNameMap: any = {}
|
||
let jiDiListMap: any = {}
|
||
JidiSelectEventStore.jidiData.forEach((item: any) => {
|
||
jiDiListMap[item.wbsCode] = item.wbsName
|
||
})
|
||
|
||
dataOne.map((item: any, index: number) => {
|
||
const { stcd, stnm, objId } = item
|
||
if (dataMapNameMap[objId]) {
|
||
dataMapNameMap[objId].push({ ...item, baseName: jiDiListMap[objId], baseId: objId })
|
||
} else {
|
||
dataMapNameMap[objId] = [{ ...item, baseName: jiDiListMap[objId], baseId: objId }]
|
||
}
|
||
return { label: item.wbsName, value: item.wbsCode, baseId: objId, baseName: jiDiListMap[objId] }
|
||
})
|
||
|
||
let dataMapNameArr: any = []
|
||
|
||
Object.keys(dataMapNameMap).forEach((item: any) => {
|
||
dataMapNameArr.push({
|
||
title: dataMapNameMap[item]?.[0]?.baseName,
|
||
value: item,
|
||
selectable: false,
|
||
children: dataMapNameMap[item].map((item2: any) => {
|
||
return {
|
||
title: item2.wbsName,
|
||
value: item2.wbsCode
|
||
}
|
||
})
|
||
})
|
||
})
|
||
dataMapNameArr = dataMapNameArr.sort((a: any, b: any) => {
|
||
const indexA = JidiSelectEventStore.jidiData.findIndex(item => item.wbsCode === a.value);
|
||
const indexB = JidiSelectEventStore.jidiData.findIndex(item => item.wbsCode === b.value);
|
||
return indexA - indexB;
|
||
})
|
||
|
||
// 构建树节点映射，用于自动展开
|
||
buildNodeMap(dataMapNameArr)
|
||
|
||
// 先设置原始数据
|
||
selectOptions.value = filterSelectOptions(dataMapNameArr)
|
||
|
||
// 保存父组件传入的值（如果有）
|
||
const parentSelectValue = props.modelValue?.selectValue;
|
||
|
||
// 确定最终要选中的值
|
||
// 只在没有外部传入值时才设置默认值
|
||
if (!parentSelectValue) {
|
||
if (baseid.value === 'all') {
|
||
selectValue.value = 'SJLY176'
|
||
} else if (selectOptions.value[0]?.children) {
|
||
selectValue.value = selectOptions.value[0]?.children[0]?.value
|
||
} else if (selectOptions.value[0]?.value) {
|
||
selectValue.value = selectOptions.value[0]?.value
|
||
} else {
|
||
selectValue.value = ''
|
||
}
|
||
} else {
|
||
// 如果有父组件传入的值，使用父组件的值
|
||
selectValue.value = parentSelectValue;
|
||
}
|
||
|
||
// 自动展开选中节点的父节点
|
||
if (selectValue.value) {
|
||
nextTick(() => {
|
||
const parentKeys = getParentKeys(selectValue.value);
|
||
treeExpandedKeys.value = parentKeys;
|
||
});
|
||
}
|
||
}
|
||
|
||
// 只在没有外部传入日期值时才设置默认值
|
||
if (!props.modelValue?.dateValue) {
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||
dateValue.value = dayjs(`${year}-${month}`, 'YYYY-MM');
|
||
} else {
|
||
// 如果有父组件传入的日期值，使用父组件的值
|
||
const newDateValue = typeof props.modelValue.dateValue === 'string'
|
||
? dayjs(props.modelValue.dateValue, 'YYYY-MM')
|
||
: props.modelValue.dateValue;
|
||
dateValue.value = newDateValue;
|
||
}
|
||
|
||
// 不在这里调用 getEchartsData()，等待弹框打开时再查询
|
||
// 但如果是在 onMounted 或 Store watch 首次加载时，且弹框已经打开，则需要查询
|
||
if (props.visible) {
|
||
// 如果弹框已经是打开状态，立即查询数据
|
||
setTimeout(() => {
|
||
getEchartsData();
|
||
}, 50);
|
||
}
|
||
} catch (error) {
|
||
console.error('选择器配置加载失败:', error);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
//获取图表配置
|
||
const getEchartsData = async () => {
|
||
if (loading.value) return; // 防止重复请求
|
||
|
||
loading.value = true;
|
||
|
||
try {
|
||
// 根据 dateValue 解析年月
|
||
const dateValueStr = dateValue.value ? dateValue.value.format('YYYY-MM') : '';
|
||
if (!dateValueStr || !selectValue.value) {
|
||
showChart.value = false;
|
||
loading.value = false;
|
||
return;
|
||
}
|
||
|
||
const [yearStr, monthStr] = dateValueStr.split('-');
|
||
const year = parseInt(yearStr);
|
||
const month = parseInt(monthStr);
|
||
|
||
// 计算该月的第一天和最后一天
|
||
const firstDay = `${dateValueStr}-01 00:00:00`;
|
||
// 创建下个月1号，然后减去1天得到本月最后一天
|
||
const nextMonth = month === 12 ? 1 : month + 1;
|
||
const nextYear = month === 12 ? year + 1 : year;
|
||
const lastDate = new Date(nextYear, nextMonth - 1, 1);
|
||
lastDate.setDate(lastDate.getDate() - 1);
|
||
const lastDay = `${year}-${String(month).padStart(2, '0')}-${String(lastDate.getDate()).padStart(2, '0')} 23:59:59`;
|
||
|
||
const params = {
|
||
"filter": {
|
||
"logic": "and",
|
||
"filters": [
|
||
{
|
||
"field": "rvcd",
|
||
"operator": "eq",
|
||
"dataType": "string",
|
||
"value": selectValue.value
|
||
},
|
||
{
|
||
"field": "tm",
|
||
"operator": "gte",
|
||
"dataType": "date",
|
||
"value": firstDay
|
||
},
|
||
{
|
||
"field": "tm",
|
||
"operator": "lte",
|
||
"dataType": "date",
|
||
"value": lastDay
|
||
},
|
||
{
|
||
"field": "year",
|
||
"operator": "eq",
|
||
"dataType": "string",
|
||
"value": year
|
||
},
|
||
{
|
||
"field": "month",
|
||
"operator": "eq",
|
||
"dataType": "string",
|
||
"value": month
|
||
}
|
||
]
|
||
}
|
||
}
|
||
|
||
let res = await avgMonGetKendoListCust(params)
|
||
console.log('接口返回数据:', res)
|
||
let data = res?.data?.data || res?.data || []
|
||
|
||
if (data.length === 0) {
|
||
showChart.value = false
|
||
return
|
||
}
|
||
|
||
showChart.value = true
|
||
|
||
// 筛选 sttp === "1" 的数据作为 X 轴站点名称
|
||
const stationData = data.filter((item: any) => item.sttp === "1")
|
||
const xData = stationData.map((item: any) => ({
|
||
value: item.stnm,
|
||
stnm: item.stnm,
|
||
stcd: item.stcd // 保留站点编码用于点击事件
|
||
}))
|
||
|
||
// 筛选 sttp === "2" 的数据作为图表系列数据
|
||
const tempData = data.filter((item: any) => item.sttp === "2")
|
||
|
||
// 按照站点顺序提取三个系列的数据，包装为对象格式以保留元信息
|
||
const actualData = tempData.map((item: any) => ({
|
||
value: item.actualTemp,
|
||
stcd: item.stcd,
|
||
stnm: item.stnm
|
||
}))
|
||
const lastData = tempData.map((item: any) => ({
|
||
value: item.lastTemp,
|
||
stcd: item.stcd,
|
||
stnm: item.stnm
|
||
}))
|
||
const naturalData = stationData.map((item: any) => ({
|
||
value: item.naturalTemp,
|
||
stcd: item.stcd,
|
||
stnm: item.stnm
|
||
}))
|
||
|
||
console.log('X轴数据:', xData)
|
||
console.log('实测值:', actualData)
|
||
console.log('去年同期:', lastData)
|
||
console.log('天然值:', naturalData)
|
||
|
||
// 初始化或更新图表 - 每次都重新初始化以避免显示异常
|
||
setTimeout(() => {
|
||
// 总是调用 initChart 重新创建图表实例，避免旧实例残留导致的双重显示问题
|
||
initChart(xData, actualData, lastData, naturalData)
|
||
|
||
// 强制重绘，确保尺寸正确
|
||
setTimeout(() => {
|
||
chartInstance?.resize()
|
||
}, 100)
|
||
}, 50)
|
||
} catch (error) {
|
||
console.error('图表数据加载失败:', error)
|
||
showChart.value = false
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
const initChart = (xData: any[], actualData: any[], lastData: any[], naturalData: any[]) => {
|
||
if (!chartRef.value) return
|
||
|
||
// 如果图表实例已存在，先销毁再重新创建，避免重复绑定事件和显示异常
|
||
if (chartInstance) {
|
||
chartInstance.dispose();
|
||
chartInstance = null;
|
||
}
|
||
|
||
chartInstance = echarts.init(chartRef.value)
|
||
|
||
const legendData = ['实测值', '去年同期', '天然']
|
||
|
||
// 计算Y轴范围：最小值向下取整，最大值向上取整
|
||
const allData = [...actualData, ...lastData, ...naturalData].map(item => item.value).filter(val => val !== null && val !== undefined)
|
||
const dataMin = allData.length > 0 ? Math.min(...allData) : 0
|
||
const dataMax = allData.length > 0 ? Math.max(...allData) : 10
|
||
const yAxisMin = Math.floor(dataMin)
|
||
const yAxisMax = Math.ceil(dataMax)
|
||
|
||
// 完全按照原始React代码中的options配置
|
||
const options: any = {
|
||
noShowToolbox: true,
|
||
yAxisSplit: 5,
|
||
xData,
|
||
dataZoom: [
|
||
{
|
||
type: 'inside',
|
||
show: false
|
||
},
|
||
{
|
||
type: 'slider',
|
||
show: false
|
||
}
|
||
],
|
||
tooltip: {
|
||
show: true,
|
||
trigger: 'axis',
|
||
confine: true,
|
||
formatter: (params: any) => {
|
||
const label = xData.filter((item: any) => item.value === params[0].axisValueLabel)?.[0]?.stnm
|
||
let elm = ``
|
||
for (const item of params) {
|
||
const value = item.data?.value ?? item.value;
|
||
elm += `
|
||
<div>
|
||
${item.marker}
|
||
<span>${item.seriesName}:</span>
|
||
<span>${value === null || value === undefined ? '-' : value}${unit}</span>
|
||
</div>
|
||
`
|
||
}
|
||
return `<div>${label}</div>` + elm
|
||
}
|
||
},
|
||
legend: {
|
||
data: legendData
|
||
},
|
||
grid: {
|
||
top: 30,
|
||
bottom: 50,
|
||
right: 15,
|
||
left: 30
|
||
},
|
||
xAxis: {
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
lineStyle: {
|
||
color: '#007aff1a',
|
||
width: 1,
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#8f8f8f'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color: '#000000',
|
||
fontSize: 12,
|
||
interval: xData.length < 5 ? 0 : 2,
|
||
rotate: 0,
|
||
formatter: (value: any) => {
|
||
const label = xData.filter((item: any) => item.value === value)?.[0]?.stnm
|
||
return `{a|${label.substring(0, 6)}}` + (label.length > 6 ? '...\n{b|}' : '\n{b|}')
|
||
},
|
||
rich: {
|
||
a: {
|
||
height: 30,
|
||
align: 'center'
|
||
},
|
||
b: {
|
||
height: 30,
|
||
align: 'center'
|
||
}
|
||
}
|
||
},
|
||
data: xData,
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: `水温(${unit})`,
|
||
min: yAxisMin,
|
||
max: yAxisMax,
|
||
nameTextStyle: {
|
||
fontSize: 12,
|
||
color: '#000000'
|
||
},
|
||
lineStyle: {
|
||
color: '#6ca4f7',
|
||
width: 2
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#bfbfbf'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
length: 3,
|
||
lineStyle: {
|
||
color: '#8f8f8f'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#333',
|
||
fontSize: 12
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#bfbfbf',
|
||
type: 'solid'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: legendData[0],
|
||
data: actualData,
|
||
type: 'line',
|
||
connectNulls: true,
|
||
smooth: true
|
||
},
|
||
{
|
||
name: legendData[1],
|
||
data: lastData,
|
||
type: 'line',
|
||
connectNulls: true,
|
||
smooth: true
|
||
},
|
||
{
|
||
name: legendData[2],
|
||
data: naturalData,
|
||
type: 'line',
|
||
connectNulls: true,
|
||
smooth: true
|
||
}
|
||
]
|
||
}
|
||
|
||
// 颜色配置 - 对应 getColorByCodeAndType(['Other'], ['ACTUALTEMP', 'LASTTEMP', 'NATURALTEMP'])
|
||
// 根据图片：实测值(蓝)、去年同期(紫)、天然(绿)
|
||
options.color = ['#5470c6', '#9b59b6', '#91cc75']
|
||
|
||
chartInstance.setOption(options)
|
||
|
||
// 绑定点击事件 - 移植自 index.vue，打开详情弹框
|
||
chartInstance.on('click', (params: any) => {
|
||
console.log('图表数据点被点击:', params);
|
||
|
||
// 获取点击的数据点信息
|
||
const dataPoint = params.data;
|
||
const stcd = dataPoint?.stcd || '';
|
||
const stnm = dataPoint?.stnm || '';
|
||
|
||
// 设置弹框数据
|
||
detailModalData.value = {
|
||
baseid: baseid.value,
|
||
rvcd: selectValue.value,
|
||
date: dateValue.value ? dateValue.value.format('YYYY-MM') : dayjs().format('YYYY-MM'),
|
||
stcd: stcd,
|
||
stnm: stnm
|
||
};
|
||
|
||
// 打开详情弹框
|
||
detailModalVisible.value = true;
|
||
});
|
||
}
|
||
|
||
// 选择器变化处理
|
||
const handleSelectChange = (value: string) => {
|
||
console.log('选择器变化:', value);
|
||
|
||
// 自动展开父节点
|
||
if (value && nodeMap.size > 0) {
|
||
const parentKeys = getParentKeys(value)
|
||
treeExpandedKeys.value = parentKeys
|
||
console.log('自动展开父节点:', parentKeys)
|
||
} else {
|
||
treeExpandedKeys.value = []
|
||
}
|
||
|
||
// 自动查询
|
||
getEchartsData();
|
||
};
|
||
|
||
// 日期变化处理
|
||
const handleDateChange = (date: Dayjs | null, dateString: string) => {
|
||
console.log('日期变化:', dateString);
|
||
// 自动查询
|
||
getEchartsData();
|
||
};
|
||
|
||
// 详情弹框关闭处理
|
||
const handleDetailModalClose = () => {
|
||
detailModalVisible.value = false;
|
||
detailModalData.value = null;
|
||
};
|
||
|
||
// 查询按钮点击
|
||
const handleSearch = () => {
|
||
// 手动查询
|
||
getEchartsData();
|
||
};
|
||
|
||
// 重置按钮点击
|
||
const handleReset = () => {
|
||
// 恢复到组件内部默认值（根据当前 baseid 重新计算）
|
||
if (baseid.value === 'all') {
|
||
selectValue.value = 'SJLY176';
|
||
} else if (selectOptions.value[0]?.children) {
|
||
selectValue.value = selectOptions.value[0]?.children[0]?.value;
|
||
} else if (selectOptions.value[0]?.value) {
|
||
selectValue.value = selectOptions.value[0]?.value;
|
||
} else {
|
||
selectValue.value = '';
|
||
}
|
||
|
||
// 重置日期为当前月份
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||
dateValue.value = dayjs(`${year}-${month}`, 'YYYY-MM');
|
||
|
||
// 重新加载数据
|
||
getEchartsData();
|
||
};
|
||
|
||
// 图表放大展示 - 打开弹框
|
||
const handleChartZoomIn = () => {
|
||
// TODO: 如果需要进一步放大，可以在此添加逻辑
|
||
console.log('图表放大展示');
|
||
};
|
||
|
||
watch(
|
||
() => JidiSelectEventStore.selectedItem,
|
||
(newVal) => {
|
||
baseid.value = newVal.wbsCode;
|
||
getSelectConfig()
|
||
},
|
||
{ deep: true, immediate: true }
|
||
);
|
||
|
||
// 监听树数据变化，重新构建映射
|
||
watch(() => processedSelectOptions.value, (newData) => {
|
||
console.log('树数据变化，重新构建映射')
|
||
|
||
if (newData && newData.length > 0) {
|
||
// 清空旧映射
|
||
nodeMap.clear()
|
||
// 重新构建映射
|
||
buildNodeMap(newData)
|
||
|
||
// 数据加载完成后，如果已有默认值，重新触发一次
|
||
if (selectValue.value) {
|
||
nextTick(() => {
|
||
const parentKeys = getParentKeys(selectValue.value)
|
||
treeExpandedKeys.value = parentKeys
|
||
console.log('数据加载后自动展开父节点:', parentKeys)
|
||
})
|
||
}
|
||
}
|
||
}, { deep: true })
|
||
|
||
// 监听 selectValue 变化（包括默认值和用户选择）
|
||
watch(() => selectValue.value, (newValue) => {
|
||
console.log('selectValue 变化:', newValue)
|
||
|
||
if (newValue && nodeMap.size > 0) {
|
||
// 只有当 nodeMap 已构建时才执行
|
||
const parentKeys = getParentKeys(newValue)
|
||
treeExpandedKeys.value = parentKeys
|
||
console.log('自动展开父节点:', parentKeys)
|
||
} else {
|
||
treeExpandedKeys.value = []
|
||
}
|
||
}, { immediate: true })
|
||
|
||
onMounted(() => {
|
||
// 延迟初始化，确保容器尺寸已就绪
|
||
setTimeout(() => {
|
||
getSelectConfig()
|
||
}, 100)
|
||
|
||
window.addEventListener('resize', () => {
|
||
chartInstance?.resize()
|
||
})
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
chartInstance?.dispose()
|
||
window.removeEventListener('resize', () => {
|
||
chartInstance?.resize()
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.water-temp-compare-modal {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.search-card {
|
||
/* margin-bottom: 16px; */
|
||
}
|
||
|
||
.water-temp-compare-chart {
|
||
width: 100%;
|
||
height: 602px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.water_bottom {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: end;
|
||
align-items: center;
|
||
color: #2f6b96;
|
||
cursor: pointer;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
:deep(.ant-spin-nested-loading) {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
:deep(.ant-spin-container) {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
</style>
|