Newer
Older
KaiFengPC / src / views / dataAnalysis / syntheticData / dataError.vue
@鲁yixuan 鲁yixuan on 19 Aug 4 KB updata
  1. <template>
  2. <!-- 数据状态- 数据异常分析 -->
  3. <div class="dataError">
  4. <div class="tabsBtn">
  5. <el-button :type="tabIndex == item.key ? 'primary' : ''" v-for="item in tabsArr" :key="item.key" @click="changeTab(item.key)">
  6. {{ item.name }}
  7. </el-button>
  8. </div>
  9. <div class="content" v-loading="tableLoading">
  10. <!-- 综合分析 -->
  11. <el-table :data="tableDataZH" border height="200" v-if="tabIndex == 1">
  12. <el-table-column label="指标" prop="monitorName" />
  13. <el-table-column label="实时" prop="monitorValue" />
  14. <el-table-column label="率定参考值" prop="refererValue" width="100" />
  15. <el-table-column label="24小时均值" prop="hoursAverage24Hours" width="100" />
  16. <el-table-column label="24小时最大" prop="hoursMax24Hours" width="100" />
  17. <el-table-column label="7日均值" prop="daysAverage7Days" />
  18. <el-table-column label="7日最大" prop="daysMax7Days" />
  19. <el-table-column label="7日最小" prop="daysMin7Days" />
  20. <el-table-column label="单位" prop="unit" />
  21. </el-table>
  22. <!-- 昼夜对比分析 -->
  23. <el-table :data="tableDataError" border height="200" v-if="tabIndex == 2">
  24. <el-table-column prop="monitorName" label="指标"></el-table-column>
  25. <el-table-column prop="dayNightType" label="昼夜">
  26. <template #default="{ row }">
  27. <div>{{ row.dayNightType == 'day' ? '白天' : '晚上' }}</div>
  28. </template>
  29. </el-table-column>
  30. <el-table-column prop="hoursAverage24Hours" label="24小时均值"></el-table-column>
  31. <el-table-column prop="hoursMax24Hours" label="24小时最大"></el-table-column>
  32. <el-table-column prop="daysAverage7Days" label="7小时均值"></el-table-column>
  33. <el-table-column prop="daysMax7Days" label="7小时最大"></el-table-column>
  34. <el-table-column prop="daysMin7Days" label="7小时最小"></el-table-column>
  35. <el-table-column prop="unit" label="单位"></el-table-column>
  36. </el-table>
  37. <!-- 晴雨天对比分析 -->
  38. <el-table :data="tableDataSunBody" border height="200" v-if="tabIndex == 3">
  39. <el-table-column :label="item.title" :prop="item.key" v-for="(item, index) in tableDataSunHead" :key="index"></el-table-column>
  40. </el-table>
  41. <!-- 决策建议 -->
  42. <div class="suggest-nopx" v-if="tabIndex == 4">
  43. <div class="suggestText">{{ suggestText }}</div>
  44. </div>
  45. </div>
  46. </div>
  47. </template>
  48. <script setup>
  49. import { getDataAnalyse, decisionSuggest } from '@/api/dataAnalysis/syntherticData';
  50.  
  51. const props = defineProps({
  52. stationRow: Object,
  53. });
  54. const { proxy } = getCurrentInstance();
  55. const tabIndex = ref('1');
  56. const tabsArr = ref([
  57. { name: '综合分析', key: '1' },
  58. { name: '昼夜对比分析', key: '2' },
  59. { name: '晴雨天对比分析', key: '3' },
  60. { name: '决策建议', key: '4' },
  61. ]);
  62. const suggestText = ref('--');
  63. const tableDataZH = ref([]);
  64. const tableDataError = ref([]);
  65. const tableDataSunHead = ref([]);
  66. const tableDataSunBody = ref([]);
  67. const tableLoading = ref(true);
  68. const dateRange = ref([]);
  69.  
  70. // tab切换
  71. function changeTab(key) {
  72. tabIndex.value = key;
  73. }
  74. // 获取数据
  75. function getDataList() {
  76. tableLoading.value = true;
  77. let params = {
  78. startDate: dateRange.value[0],
  79. endDate: dateRange.value[1],
  80. siteCode: props.stationRow.stCode,
  81. };
  82. getDataAnalyse(params).then(res => {
  83. let datas = res.data;
  84. tableDataZH.value = datas.limitStatistics;
  85. tableDataSunHead.value = datas.rtuSiteRainDayResponse.rainAnalysisReportHeadsList; //动态表头
  86. tableDataSunBody.value = datas.rtuSiteRainDayResponse.rainAnalysisReportValueList;
  87. tableDataError.value = datas.dayNightStatistics;
  88. tableLoading.value = false;
  89. });
  90. }
  91. // 获取决策建议
  92. function checkSuggest() {
  93. let params = {
  94. startDate: dateRange.value[0],
  95. endDate: dateRange.value[1],
  96. siteCode: props.stationRow.stCode,
  97. };
  98. decisionSuggest(params).then(res => {
  99. suggestText.value = res.data;
  100. });
  101. }
  102.  
  103. // 初始化
  104. onMounted(() => {
  105. // 获取右侧搜索日期
  106. dateRange.value = localStorage.getItem('searchDateRangeEquip').split(',');
  107. getDataList();
  108. checkSuggest();
  109. });
  110. </script>
  111. <style lang="scss">
  112. .dataError {
  113. width: 100%;
  114. .tabsBtn {
  115. text-align: center;
  116. }
  117. .content {
  118. margin-top: 15px;
  119. .suggest-nopx {
  120. line-height: 26px;
  121. padding: 10px;
  122. font-size: 14px;
  123. border: 1px solid #ebf5ff;
  124. height: 200px;
  125. overflow: auto;
  126. .suggestText {
  127. line-height: 28px;
  128. font-size: 16px;
  129. white-space: pre-wrap;
  130. }
  131. }
  132. }
  133. }
  134. </style>