web
4 天以前 8e38cc8536cfda9b6bda8548d63778cbf5f4d634
src/views/screen/temperature/report/index.vue
@@ -1,37 +1,46 @@
<script setup>
import {ref, onMounted} from "vue";
import {getTemperaturePointList} from "@/api/screen/index.js";
import {getFlowReportList} from "@/api/screen/report/index.js";
import {getTemptureReportList, exportTemptureReportList} from "@/api/screen/report/index.js";
import Table from '@/components/Table/index.vue'
import { exportBlobFile } from '@/utils/index.js'
const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', checkStrictly: true, expandTrigger: 'hover', emitPath: false }; //级联选择器配置
const typeOption = ref([])
const timeOption = ref([
    { label: '小时', value: 1 },
    { label: '日', value: 2 },
    { label: '月', value: 3 },
    { label: '季度', value: 4 },
    { label: '年', value: 5 },
])
const timeVal = ref([])
const searchData = reactive({
    pointId: '',
    dateType: 2,
    createTimeRange: ''
})
const tableRef = ref(null); //表格实例
let tableHead = [
    { prop: 'flowVelocity', label: '流速 (m/s)' },
    { prop: 'newFlow', label: '瞬时流量 (m³/h)', },
    { prop: 'totalFlow', label: '累计流量 (m³)' },
    { prop: 'waterTemperature', label: '水温(℃)' },
    { prop: 'waterLevel', label: '水位(m)', },
    { prop: 'pointName', label: '采集点' },
    { prop: 'uploadTimeView', label: '采集时间' },
    { prop: 'createTimeView', label: '采集时间' },
]
// 获取监测点
const getPoint = () => {
    getTemperaturePointList().then(res => {
        typeOption.value = res.data
    })
}
// 导出报表
const exportData = () => {
    let data = {
        limit: tableRef.value.state.limit,
        page: tableRef.value.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()}`)
    })
}
@@ -54,21 +63,6 @@
    <div class="report">
        <div class="report-tool">
            <el-cascader size="large" v-model="searchData.pointId" :options="typeOption" :show-all-levels="false" :props="cascaderOption" clearable />
            <el-select
                v-model="searchData.dateType"
                class="tool-select"
                size="large"
                placeholder="请选择"
                clearable
                style="width: 15rem"
            >
                <el-option
                    v-for="item in timeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-date-picker
                v-model="timeVal"
                type="datetimerange"
@@ -82,10 +76,10 @@
                end-placeholder="结束时间"
            />
            <el-button type="primary" size="large" style="width: 6rem" @click="searchTable">搜索</el-button>
            <el-button type="success" size="large" style="width: 6rem">一键导出</el-button>
            <el-button type="success" size="large" style="width: 6rem" @click="exportData">一键导出</el-button>
        </div>
        <div class="report-table">
            <Table ref="tableRef" :getList="getFlowReportList" :headList="tableHead" :searchData="searchData"></Table>
            <Table ref="tableRef" :getList="getTemptureReportList" :headList="tableHead" :searchData="searchData"></Table>
        </div>
    </div>
</template>