Commit 1dd41d16cfc5252647f4165258a80733d156f81b
1 parent
2d6c34c6
feat: report export add not fond data placeholder
Showing
1 changed file
with
19 additions
and
2 deletions
| @@ -39,7 +39,12 @@ | @@ -39,7 +39,12 @@ | ||
| 39 | </Select> | 39 | </Select> |
| 40 | </div> | 40 | </div> |
| 41 | <div> | 41 | <div> |
| 42 | - <div :id="`chart-${item.device}`" :style="{ height, width }"></div> | 42 | + <Empty v-show="notFoundData" /> |
| 43 | + <div | ||
| 44 | + v-show="!notFoundData" | ||
| 45 | + :id="`chart-${item.device}`" | ||
| 46 | + :style="{ height, width }" | ||
| 47 | + ></div> | ||
| 43 | </div> | 48 | </div> |
| 44 | </div> | 49 | </div> |
| 45 | </div> | 50 | </div> |
| @@ -58,7 +63,7 @@ | @@ -58,7 +63,7 @@ | ||
| 58 | import { exportViewChartApi } from '/@/api/export/exportManager'; | 63 | import { exportViewChartApi } from '/@/api/export/exportManager'; |
| 59 | import moment from 'moment'; | 64 | import moment from 'moment'; |
| 60 | import { ExecuteReportRecord } from '/@/api/export/model/exportModel'; | 65 | import { ExecuteReportRecord } from '/@/api/export/model/exportModel'; |
| 61 | - import { Select, Spin } from 'ant-design-vue'; | 66 | + import { Select, Spin, Empty } from 'ant-design-vue'; |
| 62 | 67 | ||
| 63 | interface ResponsData { | 68 | interface ResponsData { |
| 64 | attr: string; | 69 | attr: string; |
| @@ -84,6 +89,8 @@ | @@ -84,6 +89,8 @@ | ||
| 84 | { device: string; name: string; attributes: string[]; active?: string }[] | 89 | { device: string; name: string; attributes: string[]; active?: string }[] |
| 85 | >([]); | 90 | >([]); |
| 86 | 91 | ||
| 92 | + const notFoundData = ref(false); | ||
| 93 | + | ||
| 87 | const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({}); | 94 | const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({}); |
| 88 | //生成随机颜色 | 95 | //生成随机颜色 |
| 89 | let getRandomColor = function () { | 96 | let getRandomColor = function () { |
| @@ -149,6 +156,7 @@ | @@ -149,6 +156,7 @@ | ||
| 149 | }; | 156 | }; |
| 150 | 157 | ||
| 151 | const result = await exportViewChartApi(device, sendParams); | 158 | const result = await exportViewChartApi(device, sendParams); |
| 159 | + validateHasData(result); | ||
| 152 | const { xAxisData, series } = getChartsOption(result as unknown as ResponsData); | 160 | const { xAxisData, series } = getChartsOption(result as unknown as ResponsData); |
| 153 | 161 | ||
| 154 | await nextTick(); | 162 | await nextTick(); |
| @@ -249,6 +257,7 @@ | @@ -249,6 +257,7 @@ | ||
| 249 | try { | 257 | try { |
| 250 | loading.value = true; | 258 | loading.value = true; |
| 251 | const result = await exportViewChartApi(device, sendParams); | 259 | const result = await exportViewChartApi(device, sendParams); |
| 260 | + validateHasData(result); | ||
| 252 | const { xAxisData, series } = getChartsOption(result as unknown as ResponsData); | 261 | const { xAxisData, series } = getChartsOption(result as unknown as ResponsData); |
| 253 | 262 | ||
| 254 | chartsInstance[device].setOption({ | 263 | chartsInstance[device].setOption({ |
| @@ -261,6 +270,14 @@ | @@ -261,6 +270,14 @@ | ||
| 261 | } | 270 | } |
| 262 | }; | 271 | }; |
| 263 | 272 | ||
| 273 | + const validateHasData = (record: Recordable) => { | ||
| 274 | + notFoundData.value = false; | ||
| 275 | + const { val = [], attr } = (record as unknown as ResponsData) || {}; | ||
| 276 | + if (!attr || !val.length) { | ||
| 277 | + notFoundData.value = true; | ||
| 278 | + } | ||
| 279 | + }; | ||
| 280 | + | ||
| 264 | const handleChangeChars = (value: string, device: string) => { | 281 | const handleChangeChars = (value: string, device: string) => { |
| 265 | renderCharts(device, value); | 282 | renderCharts(device, value); |
| 266 | }; | 283 | }; |