- <template>
- <!-- 数据统计 -->
- <div class="dataStats">
- <div class="tableLineMonitor">
- <el-icon @click="checkLine('2')" title="图形报表分析"><Histogram /></el-icon>
- </div>
- <!-- 表格 -->
- <div class="tableBox animate__animated animate__zoomIn">
- <el-table v-loading="tableLoading" :data="tableData">
- <el-table-column
- :label="item.title + item.unit"
- :prop="item.key"
- v-for="item in tableHead"
- :key="item.key"
- :width="tableHead.length > 5 ? '160' : ''"
- :fixed="item.key == 'ut' ? 'right' : false"
- >
- <!-- 有二级 -->
- <el-table-column :label="item2.title" :prop="item2.key" v-if="item.isChild == 0" v-for="item2 in item.childList" :key="item2.key">
- <template #default="scope">
- <div v-html="scope.row[item2.key]"></div>
- </template>
- </el-table-column>
- </el-table-column>
- </el-table>
- <Pagination
- v-show="total > 0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getTableBodyData"
- />
- </div>
- </div>
- </template>
- <script setup>
- import { dataAnalysisHead, dataAnalysisBody } from '@/api/dataAnalysis/syntherticData';
-
- const props = defineProps({
- searchDate: Array,
- stationCode: String,
- });
- const { proxy } = getCurrentInstance();
- const emits = defineEmits(['changeOneData']);
-
- const queryParams = ref({
- pageNum: 1,
- pageSize: 10,
- startTime: props.searchDate[0] || '',
- endTime: props.searchDate[1] || '',
- stCode: '',
- });
- const total = ref(0);
- const tableData = ref([]);
- const tableHead = ref([]);
- const tableLoading = ref(false);
-
- // 获取列表数据
- async function getList(code) {
- // console.log('数据统计---', code, props.searchDate);
- if (!!!code) return; //无code时不显示数据
- tableLoading.value = true;
- // 动态表头
- let params = { stCode: code };
- let res = await dataAnalysisHead(params);
- if (res && res.code == 200) {
- tableHead.value = res.data || [];
- }
- // 数据
- queryParams.value.stCode = code;
- queryParams.value.startTime = props.searchDate[0];
- queryParams.value.endTime = props.searchDate[1];
- let res2 = await dataAnalysisBody(queryParams.value);
- if (res2 && res2.code == 200) {
- tableData.value = res2.data || [];
- total.value = res2.total;
- }
- tableLoading.value = false;
- }
- // 分页切换加载
- function getTableBodyData() {
- tableLoading.value = true;
- queryParams.value.stCode = props.stationCode;
- queryParams.value.startTime = props.searchDate[0];
- queryParams.value.endTime = props.searchDate[1];
- dataAnalysisBody(queryParams.value).then(res => {
- tableData.value = res.data || [];
- total.value = res.total;
- });
- tableLoading.value = false;
- }
- // 点击切换
- function checkLine(val) {
- emits('changeOneData', val);
- }
- // 初始化
- onMounted(() => {
- getList(props.stationCode);
- });
- defineExpose({
- getList,
- });
- onBeforeUnmount(() => {});
- </script>
- <style lang="scss">
- .dataStats {
- width: 100%;
- .tableBox {
- .el-pagination {
- right: 25%;
- }
- .el-scrollbar {
- height: calc(100vh - 650px);
- }
- .el-table {
- border: 1px solid #066592;
- .redIcon {
- font-size: 20px;
- color: red;
- }
- }
- }
- }
- </style>