SMO/src/views/analysis/rainfall/index.vue

<template>
	<div class="table-box">
		<div class="card table-search" style="overflow: hidden;">
			<el-form ref="formRef" :model="pageable" :inline="true" label-width="auto">
				<el-form-item label="自动站：" prop="base">
					<el-select v-model="pageable.as_code" filterable placeholder="请搜索自动站" remote reserve-keyword
						clearable style="width: 200px" @change="changeStation">
						<el-option v-for="item in platformList" :key="item.as_code"
							:label="item.as_code + ' ' + item.as_name" :value="item.as_code" />
						<template #prefix>
							<el-icon class="el-input__icon">
								<search />
							</el-icon>
						</template>
					</el-select>
				</el-form-item>
				<el-form-item label="观测时间：" prop="base">
					<div>
						<!-- <el-switch v-model="value1" @change="changetype" class="ml-2" inline-prompt active-text="日"
							inactive-text="小时" style="margin-right: 10px;" /> -->
						<el-select v-model="value1" placeholder="Select" @change="changetype"
							style="width: 160px;margin-right: 20px;">
							<el-option label="日数据" :value="1440" />
							<el-option label="正点数据" :value="60" />
							<el-option label="分钟数据" :value="1" />
						</el-select>
						<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm"
							:format="value1 === 1440 ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm'"
							:type="value1 === 1440 ? 'daterange' : 'datetimerange'" range-separator="-"
							start-placeholder="开始时间" end-placeholder="结束时间" :disabled-date="disabledDate"
							:editable="false" @focus="handleFocus" @calendar-change="handleChange"
							@change="handleDateChange"
							:default-time="[new Date(2000, 1, 1, 0, 0), new Date(2000, 1, 1, 0, 0)]"
							style="width: 300px;"></el-date-picker>
					</div>
				</el-form-item>
				<el-form-item>
					<div>
						<el-button type="primary" @click="getHistoryList" :loading="buttonLoading">查询</el-button>
						<el-button plain @click="resetForm">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="main_list">
			<el-row :gutter="15">
				<el-col :span="24">
					<div class="chart_item zhuti">
						<div style="font-weight: bold;" class="item_title">
							<span>降水量（mm）</span>
							<!-- <span v-else>小时累计降水量 ({{ isFANDOU ? '翻斗' : '称重'}})(mm)</span> -->
						</div>
						<div class="mt5">
							<div ref="data" class="data_box"></div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts" name="dataSynthesis">
import * as echarts from 'echarts';

import { ElMessage } from "element-plus";
import { useGlobalStore } from "@/stores/modules/global";
import { ref, computed, onMounted, reactive, watch, onDeactivated, onActivated, nextTick } from "vue";
import { getDataItemList, getPlatformList, getRgDataList, getTacRecordList } from "@/api/modules/allData";
import { Platform } from "@/api/interface";
import { parseTime } from '@/utils/index';
import { isToday, isWithinThirtyMinutes, getTimeStamp, getStamp, isWithin48Hours, isDateFuture, isDateRangeWithinDays } from "@/utils/dateTime";
import { useUserStore } from "@/stores/modules/user";
const buttonLoading = ref(false)
const value1 = ref(1440)
const dateRange = ref<[any, any]>([parseTime(new Date(getTimeStamp(5)), '{y}-{m}-{d}') + ' 00:00', parseTime(new Date(), '{y}-{m}-{d}') + ' 00:00']);
const changetype = (e) => {
	if (e == 1440) {
		dateRange.value = [parseTime(new Date(getTimeStamp(5)), '{y}-{m}-{d}') + ' 00:00', parseTime(new Date(), '{y}-{m}-{d}') + ' 00:00']
	} else if (e == 60) {
		dateRange.value = [parseTime(getTimeStamp(2), '{y}-{m}-{d} {h}:{i}'), parseTime(new Date(), '{y}-{m}-{d} {h}') + ':00']
	} else {
		dateRange.value = [parseTime(getTimeStamp(1), '{y}-{m}-{d} {h}:{i}'), parseTime(new Date(), '{y}-{m}-{d} {h}:{i}')]
	}
	getHistoryList()


	// if (!e) {
	// 	dateRange.value = [parseTime(getTimeStamp(2), '{y}-{m}-{d} {h}:{i}'), parseTime(new Date(), '{y}-{m}-{d} {h}') + ':00']
	// } else {
	// 	dateRange.value = [parseTime(new Date(getTimeStamp(5)), '{y}-{m}-{d}') + ' 00:00', parseTime(new Date(), '{y}-{m}-{d}') + ' 00:00']
	// }
}
const handleDateRangeChange = (newVal) => {
	const [startDate, endDate] = newVal;
	if (endDate && isToday(endDate)) {
		// 获取当前时间的整点  
		const currentHour = new Date().getHours();
		const roundedEndDate = new Date(endDate);
		roundedEndDate.setHours(0, 0, 0, 0); // 设置分钟、秒、毫秒为0  
		const startZeroed = new Date(startDate);
		startZeroed.setHours(0, 0, 0, 0);
		dateRange.value = [parseTime(new Date(startZeroed)), parseTime(new Date(roundedEndDate))];
	} else {
		const noTodayStart = new Date(startDate).setHours(0, 0, 0, 0);
		const noTodayEnd = new Date(endDate).setHours(0, 0, 0, 0);
		dateRange.value = [parseTime(new Date(noTodayStart)), parseTime(new Date(noTodayEnd))];
	}
};
const handleDateChange = async (e) => {
	if (isDateFuture(e[0]) || isDateFuture(e[1])) {
		ElMessage.error("不得选择未来的时间");
	} else {
		if (value1.value === 1440) {
			await handleDateRangeChange(e)
			getHistoryList()
		} else if (value1.value === 60) {
			if (isDateRangeWithinDays(e[0], e[1], 60)) {
				getHistoryList()
			} else {
				ElMessage.error("正点模式下时间间隔不能大于60天");
			}
		} else {
			if (isWithin48Hours(e[0], e[1])) {
				getHistoryList()
			} else {
				ElMessage.error("分钟模式下时间间隔不能大于48小时");
			}
		}
	}
}
const pickDay = ref()
const handleFocus = () => {
	pickDay.value = null
}
const limitTime = 1000 * 60 * 60 * 24 * 30

const disabledDate = (time: Date) => {
	return time.getTime() > Date.now() - 8.64e6

}
const handleChange = (val: Date[]) => {
	const [pointDay] = val
	pickDay.value = pointDay
}


const pageable = ref({
	data_type: false,
	time_order: 1,
	as_code: undefined,
	data_items: [],
	pageNum: 1,
});
let historyColumns = [
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 309,
		data_type: "降水",
		data_item: "RI_JIANG_SHUI_LIANG",
		data_name: "日降水量",
		data_unit: "mm",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 312,
		data_type: "降水",
		data_item: "XIAO_SHI_LEI_JI_JIANG_SHUI_LIANG_CHENG_ZHONG",
		data_name: "小时累计降水量(称重)",
		data_unit: "mm",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	}, {
		data_id: 302,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "降水",
		data_name: "小时累计降水量(翻斗)",
		data_item: "XIAO_SHI_LEI_JI_JIANG_SHUI_LIANG_FAN_DOU",
		data_unit: "mm",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	}, {
		data_id: 301,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "降水",
		data_name: "分钟降水量(翻斗)",
		data_item: "FEN_ZHONG_JIANG_SHUI_LIANG_FAN_DOU",
		data_unit: "mm",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	}, {
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 311,
		data_type: "降水",
		data_item: "FEN_ZHONG_JIANG_SHUI_LIANG_CHENG_ZHONG",
		data_name: "分钟降水量(称重)",
		data_unit: "mm",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	}
]

// 查询自动站列表
const queryas = ref<Platform>({
	pageSize: 50,
	pageNum: 1,
	currentpage: 1
})


const userStore = useUserStore();
const platformList = ref<any>(computed(() => userStore.stations))
const selectPlatform = ref()

const getPlatforms = async () => {
	pageable.value.as_code = platformList.value[0].as_code
	selectPlatform.value = platformList.value[0]
	getHistoryList()

};

const changeStation = () => {
	getHistoryList()
}

//时间戳转换为指定格式的日期字符串
function formatDate(timestamp, type) {
	const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const day = String(date.getDate()).padStart(2, '0');
	const hours = String(date.getHours()).padStart(2, '0');
	const minutes = String(date.getMinutes()).padStart(2, '0');
	if (type === 1) {
		return `${month}/${day} ${hours}:${minutes}`;
	} else {
		return `${year}-${month}-${day} ${hours}:${minutes}`;
	}
}


const timeArr = ref()
const dayArr = ref()
const hourArr1 = ref()
const minArr = ref()
const isFANDOU = ref(false)

const getHistoryList = async () => {
	buttonLoading.value = true
	if (isDateFuture(dateRange.value[0]) || isDateFuture(dateRange.value[1])) {
		ElMessage.error("不得选择未来的时间");
		return false;
	}

	const { data } = await getDataItemList({ ...pageable.value, as_code_list: [pageable.value.as_code], data_items: historyColumns, time_space: value1.value, end_time: getStamp(dateRange.value[1]), begin_time: getStamp(dateRange.value[0]) });
	timeArr.value = data.list?.map(item => {
		return formatDate(item.data_time_i, 1)
	})
	dayArr.value = data.list?.map(item => {
		return item[309]
	})
	hourArr1.value = data.list?.map(item => {
		if (item[312] !== '0.0' && item[312] !== '--' && item[312] !== '/') {
			return item[312]
		} else if (item[302] !== '0.0' && item[302] !== '--' && item[312] !== '/') {
			return item[302]
		} else {
			return '0.0'
		}
	})
	minArr.value = data.list?.map(item => {
		if (item[311] !== '0.0' && item[311] !== '--' && item[311] !== '/') {
			return item[311]
		} else if (item[301] !== '0.0' && item[301] !== '--' && item[311] !== '/') {
			return item[301]
		} else {
			return '0.0'
		}
	})
	// isFANDOU.value = data.list?.some(item => {
	// 	// 尝试将项转换为数字，如果转换失败（例如，对于 '--'），则返回 NaN  
	// 	const number = Number(item[302]);
	// 	// 检查是否是一个有效的数字且大于 10  
	// 	return !isNaN(number) && number > 0;
	// });





	nextTick(() => {
		showData()
	})
	buttonLoading.value = false
};


const formRef = ref()
const data = ref()

const globalStore = useGlobalStore();
const isDark = computed(() => globalStore.isDark);

// resetForm
const resetForm = () => {
	dateRange.value = [parseTime(new Date(getTimeStamp(5)), '{y}-{m}-{d}') + ' 00:00', parseTime(new Date(), '{y}-{m}-{d}') + ' 00:00']
	value1.value = 1440
	pageable.value.as_code = platformList.value[0].as_code
	getHistoryList()
};

const showData = () => {

	let mychart = echarts.init(data.value);
	let option = {
		title: {
			text: '暂无数据',
			show: !timeArr.value ? true : false,
			x: 'center',
			y: 'center',
			textStyle: {
				fontSize: 14,
				fontWeight: 'normal',
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			},
			formatter: function (params) {

				return [
					"降水：" + params[0].value,
					'时间：' + params[0].name
				].join("<br/>");
			},
		},
		grid: {
			left: '30',
			right: '30',
			bottom: '90',
			// top: '20',
			containLabel: true
		},
		dataZoom: [
			{
				type: 'inside',
				start: 0,
				end: 50
			},
			{
				type: 'slider',

				left: '100',
				right: '100'


			}
		],

		xAxis: [
			{
				type: 'category',
				data: timeArr.value,
				axisTick: {
					alignWithLabel: true
				},
				// axisLabel: {
				// 	interval: 1,

				// },
			}
		],
		yAxis: [
			{
				type: 'value',
				boundaryGap: [0, '20%']
			}
		],
		series: [
			{
				name: '降水量',
				type: 'bar',
				barWidth: '50%',
				barMaxWidth: '100',
				color: '#88c1ff',
				data: value1.value === 1440 ? dayArr.value : value1.value === 60 ? hourArr1.value : minArr.value
			}
		]
	};
	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}

// watch(isDark, () => {
// 	showData()


// });
onMounted(() => {
	// showData()
	getPlatforms()


})

</script>
<style scoped lang="scss">
.el-row .el-col {
	// margin-bottom: 15px;
}


.main_list {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	height: calc(100vh - 150px);
	margin-bottom: 10px;
	overflow-y: scroll;
	overflow-x: hidden;


	.chart_item {
		border-radius: 10px;
		padding: 10px;
		background-color: #fff;
		// height: 100%;
		// margin-bottom: 15px;


		.item_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.FTP_box {
			padding: 0 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.FTP_item {
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				img {
					width: 56px;
					margin-bottom: 20px;
				}
			}

		}
	}

	.info_box {
		.info_title {
			color: #999999;
			font-size: 16px;
		}

		.info_content {
			height: 40px;
			font-weight: bold;
			color: #000;
			font-size: 26px;
		}
	}

}

.data_box {
	height: calc(100vh - 215px);
	// height: 100%;
}
</style>