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 | }; |