docs:历史数据

src/views/data/history/index.vue

@@ -0,0 +1,197 @@
+<template>
+    <div class="app-container app-container-bg">
+        <el-card class="first-card" ref='firstCard' shadow="always">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
+                <el-form-item label="测站属性" prop="propety">
+                    <el-select v-model="propety" style="width: 240px;" placeholder="请选择测站属性" @change="propChange">
+                        <el-option v-for="item in propsList" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="测站名称" prop="stnmId">
+                    <el-select v-model="queryParams.stnmId" style="width: 240px;" placeholder="请选择" @change="handleQuery">
+                        <el-option v-for="item in stationList" :key="item.stnmId" :label="item.stnm" :value="item.stnmId">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="时间范围">
+                    <el-date-picker :clearable="false" v-model="dateTime" type="datetimerange" format="YYYY-MM-DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" popper-class="date-clear">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <div class="el-card-p card-shadow carder-border mt10 pad10 container-box scroll-bar" v-loading="fullscreenLoading">
+            <div style="width:100%;margin:0 auto;height:96%;">
+                <el-row v-for="(item,index) in echartsData" :key="index" :gutter="1" class="el-card-container mb20" style="border-bottom:1px solid #000">
+                    <el-col :span="20">
+                        <div style="width:100%;height:300px;">
+                            <BarChart :unit="item.unit" :colors="item.colors" :textTitle="item.textTitle" :legendData='legendData' :xAxisData="item.xAxisData" :seriesData="item.data" :echartType="item.type" />
+                        </div>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-table height="280" :data="item.tableData" border >
+                            <el-table-column prop="field" :label="item.tableType=='U'?'风向':'时间'" width="180" :align="alignment">
+                            </el-table-column>
+                            <el-table-column prop="value" :label="item.tableType=='U'?'数量':'数值'" :align="alignment"></el-table-column>
+                        </el-table>
+                    </el-col>
+                </el-row>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { reactive } from 'vue'
+    import dayjs from 'dayjs'
+    import BarChart from '@/components/ChartsBar/index.vue'
+    const { proxy } = getCurrentInstance()
+    const start = ref(dayjs().subtract(1, 'day').format('YYYY-MM-DD hh:mm:ss'))
+    const end = ref(dayjs().format('YYYY-MM-DD hh:mm:ss'))
+    const dateTime = ref([start.value, end.value])
+    const alignment = 'center'
+    const grid = {
+        left: "5%",
+        right: "0%",
+        bottom: "10%",
+        top: "10%",
+        containLabel: true,
+    }
+    const queryParams = reactive({
+        stnmId: '',
+        stationType: "A",
+        startTime: dateTime.value[0],
+        endTime: dateTime.value[1]
+    })
+    let propety = ref('0')
+    // 根据测站属性获取测站名称
+    const stationList = ref([])
+    const propChange = async (val) => {
+        if (val === undefined || val === null) {
+            val = '0' // 默认值
+        }
+        propety.value = val;
+        queryParams.prop = val
+        try {
+            console.log(queryParams, val)
+            let res = await proxy.axiosGet('/basic/station/queryStnmandStnmId', queryParams);
+            if (res.code == 200) {
+                let data = res.data
+                stationList.value = data;
+                queryParams.stnmId = data[0].stnmId
+                getEchartsData()
+            }
+        } catch (error) {
+
+        }
+    }
+    const unitList = [{
+        label: "雨量(mm)",
+        value: "A"
+    }, {
+        label: "水位(m)",
+        value: "B"
+    }, {
+        label: "水位(m)",
+        value: "C"
+    }, {
+        label: "风速(m/s)",
+        value: "S"
+    }, {
+        label: "温度(℃)",
+        value: "T"
+    }, {
+        label: "湿度(%)",
+        value: "R"
+    }, {
+        label: "电压(V)",
+        value: "V"
+    }, {
+        label: "风向",
+        value: "U"
+    }, {
+        label: "",
+        value: "Y"
+    },]
+    let color1 = ['#1075fd', '#0fec7d', '#d364fd', '#5cffea',
+        '#f2b622', '#fc3c54', '#EE1289', '#ee9c9c',
+        '#06e8d6', '#de79c2', '#bebe0f', '#00F5FF',
+        '#f50000', '#00CD66', '#c400fa', '#eca86c']
+
+    let color2 = ['#164fb4', '#2fbb18', '#a700bf', '#1aa2c2',
+        '#c54b17', '#d70005', '#8B0A50', '#755252',
+        '#078075', '#cd5c5c', '#8B8B00', '#6b8e23',
+        '#590404', '#3cb371', '#48005d', '#5e4310']
+    const fullscreenLoading = ref(false)
+    const legendData = ref([])
+    const echartsData = ref([])
+    const getEchartsData = async () => {
+        fullscreenLoading.value = true
+        try {
+            let url = '/history/data/historydata'
+            let res = await proxy.axiosPost2(url, queryParams);
+            if (res.code == 0) {
+                const seriesMap = res.data
+                const result = []
+                Object.keys(seriesMap).forEach((key, idx) => {
+                    const series = seriesMap[key]
+                    let rainCount = 0
+                    // 计算总和
+                    const values = series.data.map(item => {
+                        const val = item[1]
+                        return typeof val === 'string' ? parseFloat(val) : val
+                    })
+                    rainCount = values.reduce((sum, val) => sum + (val || 0), 0)
+                    const item = {
+                        colors: [color1[idx], color2[idx]],
+                        textTitle: key == 'A' ? `累计降雨${rainCount}mm` : '',
+                        unit: unitList.find(t => t.value === key)?.label || '',
+                        type: series.type,
+                        data: series.data.map(item => item[1]),
+                        tableData: series.tableData,
+                        xAxisData: series.data.map(item => {
+                            // 如果item是对象且包含时间字段
+                            if (typeof item === 'object' && item !== null) {
+                                // 假设时间字段可能是tm, time, or the first element
+                                const timeValue = item.tm || item.time || item[0];
+                                return dayjs(timeValue).format('YYYY-MM-DD HH:mm');
+                            } else {
+                                // 如果item直接就是时间值
+                                return dayjs(item).format('YYYY-MM-DD HH:mm');
+                            }
+                        }),
+                        tableType: key
+                    }
+                    result.push(item)
+                    console.log(result, '===')
+                })
+
+                echartsData.value = result
+
+            }
+        } catch (error) {
+            console.error('获取图表数据失败:', error)
+            proxy.$message.error('数据加载失败')
+        } finally {
+            fullscreenLoading.value = false
+        }
+    }
+    const handleQuery = () => {
+        getEchartsData()
+    }
+    onMounted(() => {
+
+        propChange('0')
+    })
+    const propsList = ref([
+        { label: '水文测站', value: '0' },
+        { label: '气象站', value: '1' }
+    ])
+</script>
+<style scoped lang="scss">
+
+</style>