Newer
Older
KaiFengPC / src / views / dataAnalysis / syntheticData / dataStats.vue
@zhangdeliang zhangdeliang on 23 May 3 KB 初始化项目
  1. <template>
  2. <!-- 数据统计 -->
  3. <div class="dataStats">
  4. <div class="tableLineMonitor">
  5. <el-icon @click="checkLine('2')" title="图形报表分析"><Histogram /></el-icon>
  6. </div>
  7. <!-- 表格 -->
  8. <div class="tableBox animate__animated animate__zoomIn">
  9. <el-table v-loading="tableLoading" :data="tableData">
  10. <el-table-column
  11. :label="item.title + item.unit"
  12. :prop="item.key"
  13. v-for="item in tableHead"
  14. :key="item.key"
  15. :width="tableHead.length > 5 ? '160' : ''"
  16. :fixed="item.key == 'ut' ? 'right' : false"
  17. >
  18. <!-- 有二级 -->
  19. <el-table-column :label="item2.title" :prop="item2.key" v-if="item.isChild == 0" v-for="item2 in item.childList" :key="item2.key">
  20. <template #default="scope">
  21. <div v-html="scope.row[item2.key]"></div>
  22. </template>
  23. </el-table-column>
  24. </el-table-column>
  25. </el-table>
  26. <Pagination
  27. v-show="total > 0"
  28. :total="total"
  29. v-model:page="queryParams.pageNum"
  30. v-model:limit="queryParams.pageSize"
  31. @pagination="getTableBodyData"
  32. />
  33. </div>
  34. </div>
  35. </template>
  36. <script setup>
  37. import { dataAnalysisHead, dataAnalysisBody } from '@/api/dataAnalysis/syntherticData';
  38.  
  39. const props = defineProps({
  40. searchDate: Array,
  41. stationCode: String,
  42. });
  43. const { proxy } = getCurrentInstance();
  44. const emits = defineEmits(['changeOneData']);
  45.  
  46. const queryParams = ref({
  47. pageNum: 1,
  48. pageSize: 10,
  49. startTime: props.searchDate[0] || '',
  50. endTime: props.searchDate[1] || '',
  51. stCode: '',
  52. });
  53. const total = ref(0);
  54. const tableData = ref([]);
  55. const tableHead = ref([]);
  56. const tableLoading = ref(false);
  57.  
  58. // 获取列表数据
  59. async function getList(code) {
  60. // console.log('数据统计---', code, props.searchDate);
  61. if (!!!code) return; //无code时不显示数据
  62. tableLoading.value = true;
  63. // 动态表头
  64. let params = { stCode: code };
  65. let res = await dataAnalysisHead(params);
  66. if (res && res.code == 200) {
  67. tableHead.value = res.data || [];
  68. }
  69. // 数据
  70. queryParams.value.stCode = code;
  71. queryParams.value.startTime = props.searchDate[0];
  72. queryParams.value.endTime = props.searchDate[1];
  73. let res2 = await dataAnalysisBody(queryParams.value);
  74. if (res2 && res2.code == 200) {
  75. tableData.value = res2.data || [];
  76. total.value = res2.total;
  77. }
  78. tableLoading.value = false;
  79. }
  80. // 分页切换加载
  81. function getTableBodyData() {
  82. tableLoading.value = true;
  83. queryParams.value.stCode = props.stationCode;
  84. queryParams.value.startTime = props.searchDate[0];
  85. queryParams.value.endTime = props.searchDate[1];
  86. dataAnalysisBody(queryParams.value).then(res => {
  87. tableData.value = res.data || [];
  88. total.value = res.total;
  89. });
  90. tableLoading.value = false;
  91. }
  92. // 点击切换
  93. function checkLine(val) {
  94. emits('changeOneData', val);
  95. }
  96. // 初始化
  97. onMounted(() => {
  98. getList(props.stationCode);
  99. });
  100. defineExpose({
  101. getList,
  102. });
  103. onBeforeUnmount(() => {});
  104. </script>
  105. <style lang="scss">
  106. .dataStats {
  107. width: 100%;
  108. .tableBox {
  109. .el-pagination {
  110. right: 25%;
  111. }
  112. .el-scrollbar {
  113. height: calc(100vh - 650px);
  114. }
  115. .el-table {
  116. border: 1px solid #066592;
  117. .redIcon {
  118. font-size: 20px;
  119. color: red;
  120. }
  121. }
  122. }
  123. }
  124. </style>