fix:修改水温深度监测

web

昨天 010ce04ba6e27f2bd603cec692d2695d7a8a3c1f

 src/views/screen/temperature/report/index.vue

@@ -1,91 +1,151 @@
<script setup>
import {ref} from "vue";
import Table from '@/components/Table/index.vue'
import {ref, onMounted} from "vue";
import {getTemperaturePointList} from "@/api/screen/index.js";
import {getTemptureReportList, exportTemptureReportList} from "@/api/screen/report/index.js";
import { exportBlobFile } from '@/utils/index.js'
import { deepTableConfig } from '@/config/index.js'

const selectType = ref(1);
const typeOption = ref([
    { label: '水电站流量监测点', value: 1 },
    { label: '新扎口流量监测点', value: 2 },
])
const time = ref()
const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', checkStrictly: true, expandTrigger: 'hover', emitPath: false }; //级联选择器配置
const typeOption = ref([])
const timeVal = ref([])
const searchData = reactive({
    pointId: '',
    createTimeRange: ''
})
const state = {
    total: 0,
    page: 1,
    pageSize: 10,
}
let tableHead = [
    { prop: 'code', label: '流速 (m/s)' },
    { prop: 'shebei', label: '瞬时流量 (m³/h)', },
    { prop: 'content', label: '累计流量 (m³)' },
    { prop: 'sure', label: '采集点' },
    { prop: 'time', label: '采集时间' },
    { prop: 'pointName', label: '采集点' },
    { prop: 'createTimeView', label: '采集时间' },
]
const tableData = ref([])

const getTableData = () => {
    return new Promise(resolve => {
        let arr = {
            data:{
                list: [
                    { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                    { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                    { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                    { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                    { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                ]
            },
            total: 30,
        }
        resolve(arr)
// 获取监测点
const getPoint = () => {
    getTemperaturePointList().then(res => {
        typeOption.value = res.data
    })
}

const getTableData = () => {
    let data = {
        limit: state.pageSize,
        page: state.page,
        ...searchData
    }
    getTemptureReportList(data).then(res => {
        tableData.value = res.data.list.map(item => {
            let obj = {}
            item.dataList.forEach(dl => {
                obj[dl.code] = dl.value
            })
            return {
                ...item,
                ...obj
            }
        })
        console.log(tableData.value)
        state.total = res.data.total
    })
}

// 分页按钮
const paginationFun = (data) => {
    state.page = data.page
    getTableData()
}

// 导出报表
const exportData = () => {
    let data = {
        limit: state.pageSize,
        page: state.page,
        ...searchData
    }
    if(timeVal.value && timeVal.value.length > 0) {
        data.createTimeRange = timeVal.value[0] + '~' + timeVal.value[1]
    } else {
        data.createTimeRange = ''
    }
    exportTemptureReportList(data).then(res => {
        exportBlobFile(res, `水温统计报表${new Date().getTime()}`)
    })
}

// 搜索数据
const searchTable = () => {
    if(timeVal.value && timeVal.value.length > 0) {
        searchData.createTimeRange = timeVal.value[0] + '~' + timeVal.value[1]
    } else {
        searchData.createTimeRange = ''
    }
    getTableData()
}

onMounted(() => {
    const newArr = deepTableConfig.map(item => {
        return {
            prop: `${item}`,
            label: `${item}m`
        }
    })
    tableHead.splice(1, 0, ...newArr)
    getPoint()
    getTableData()
})
</script>

<template>
    <div class="report">
        <div class="report-tool">
            <el-select
                v-model="selectType"
                class="tool-select"
                size="large"
                placeholder="Select"
                style="width: 20rem"
            >
                <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-select
                v-model="selectType"
                class="tool-select"
                size="large"
                placeholder="Select"
                style="width: 20rem"
            >
                <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-cascader size="large" v-model="searchData.pointId" :options="typeOption" :show-all-levels="false" :props="cascaderOption" clearable />
            <el-date-picker
                v-model="time"
                v-model="timeVal"
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                size="large"
                style="width: 30rem"
                clearable
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
            />
            <el-button type="success" size="large" style="width: 6rem">一键导出</el-button>
            <el-button type="primary" size="large" style="width: 6rem" @click="searchTable">搜索</el-button>
            <el-button type="success" size="large" style="width: 6rem" @click="exportData">一键导出</el-button>
        </div>
        <div class="report-table">
            <Table :getList="getTableData" :headList="tableHead"></Table>
            <el-table
                :data="tableData"
                style="width: 100%; height: 85%"
            >
                <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                    width="80px"
                ></el-table-column>
                <el-table-column
                    v-for="(item, index) in tableHead"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                >
                </el-table-column>
            </el-table>
            <div class="pagination" v-show="state.total > 0">
                <div class="pagination-total">共{{state.total}}条</div>
                <pagination
                    layout="prev, pager, next, jumper"
                    :total="state.total"
                    :page="state.page"
                    :limit="state.pageSize"
                    @pagination="paginationFun"
                />
            </div>
        </div>
    </div>
</template>
@@ -115,5 +175,17 @@
        border-radius: 8px;
        padding: 20px;
    }
    .pagination{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .pagination-total{
            color: #fff;
        }
        .pagination-container{
            background: transparent;
        }
    }
}
</style>