Explorar o código

fix(web): Dashboard 图表初始化与停留区模板判空防白屏

- initPvUvChart/initMemberPieChart: echarts.init(this.$refs.xxx) 未判空,容器未挂载时 ECharts 内部 getAttribute 崩溃 → 判空跳过
- 模板 dwell/hot 空态检测 this[sec.key].length 未兜底 → (this[sec.key] || []).length
- 根因:浏览器缓存旧 chunk 与新 webpack runtime 混用触发(生产当前数据路径已安全,此为防御加固)
Xiaogang Liao hai 1 semana
pai
achega
9a37230c2d
Modificáronse 1 ficheiros con 8 adicións e 4 borrados
  1. 8 4
      cfc-web/src/views/Dashboard.vue

+ 8 - 4
cfc-web/src/views/Dashboard.vue

@@ -78,7 +78,7 @@
                 <span class="dwell-val__meta">{{ row.meta }}</span>
               </div>
             </div>
-            <div v-if="!this[sec.key].length" class="dwell-empty">
+            <div v-if="!((this[sec.key] || []).length)" class="dwell-empty">
               <i class="el-icon-data-analysis"></i>
               <span>{{ sec.emptyHint }}</span>
             </div>
@@ -142,7 +142,7 @@
               </div>
               <div class="hot-val adm-num">{{ row.value }}<span class="hot-val__unit">{{ row.unit }}</span></div>
             </div>
-            <div v-if="!this[sec.key].length" class="hot-empty">暂无数据</div>
+            <div v-if="!((this[sec.key] || []).length)" class="hot-empty">暂无数据</div>
           </div>
         </div>
       </el-col>
@@ -562,7 +562,9 @@ export default {
     },
     initPvUvChart() {
       if (this.pvUvChart) this.pvUvChart.dispose()
-      this.pvUvChart = echarts.init(this.$refs.pvUvChart)
+      const el = this.$refs.pvUvChart
+      if (!el) return // 容器未挂载(数据未就绪/组件切换),跳过初始化防白屏
+      this.pvUvChart = echarts.init(el)
       this.pvUvChart.setOption({
         tooltip: { trigger: 'axis' },
         legend: { data: ['PV', 'UV'], right: 0, top: 0 },
@@ -609,7 +611,9 @@ export default {
     },
     initMemberPieChart() {
       if (this.memberChart) this.memberChart.dispose()
-      this.memberChart = echarts.init(this.$refs.memberPieChart)
+      const el = this.$refs.memberPieChart
+      if (!el) return // 容器未挂载(数据未就绪/组件切换),跳过初始化防白屏
+      this.memberChart = echarts.init(el)
       this.memberChart.setOption({
         tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
         legend: { orient: 'vertical', left: 'left', top: 'center' },