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