Browse Source

feat: 支持设备分类 Top 数据优先展示

- 分类 Top 图表优先展示 deviceCode 为 top 的数据
- 同步图表数量、空状态和渲染逻辑的数据来源
- 调整瑞都看板统计卡片文案
Zimo 2 months ago
parent
commit
8a52baf0ac

+ 13 - 6
src/views/pms/device/components/dashboard/DeviceClassifyTopCard.vue

@@ -4,6 +4,7 @@ import * as echarts from 'echarts'
 type ClassifyItem = {
 type ClassifyItem = {
   category?: string
   category?: string
   name?: string
   name?: string
+  deviceCode?: string
   value?: number | string
   value?: number | string
 }
 }
 
 
@@ -24,8 +25,14 @@ const barPalette = [
   ['#8c7cff', '#6854ee']
   ['#8c7cff', '#6854ee']
 ]
 ]
 
 
-const categories = computed(() => props.data.map((item) => item.category || item.name || '未分类'))
-const values = computed(() => props.data.map((item) => Number(item.value ?? 0)))
+const displayData = computed(() => {
+  const topData = props.data.filter((item) => item.deviceCode === 'top')
+  return topData.length > 0 ? topData : props.data
+})
+const categories = computed(() =>
+  displayData.value.map((item) => item.category || item.name || '未分类')
+)
+const values = computed(() => displayData.value.map((item) => Number(item.value ?? 0)))
 
 
 const escapeHtml = (value: string) =>
 const escapeHtml = (value: string) =>
   value.replace(/[&<>"']/g, (char) => {
   value.replace(/[&<>"']/g, (char) => {
@@ -139,7 +146,7 @@ const chartOption = computed(() => ({
 }))
 }))
 
 
 const renderChart = () => {
 const renderChart = () => {
-  if (!chartRef.value || props.loading || props.data.length === 0) return
+  if (!chartRef.value || props.loading || displayData.value.length === 0) return
   if (!chart) {
   if (!chart) {
     chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
     chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
   }
   }
@@ -173,11 +180,11 @@ onBeforeUnmount(() => {
       <div>
       <div>
         <h3>分类 Top</h3>
         <h3>分类 Top</h3>
       </div>
       </div>
-      <span class="soft-badge">Top {{ data.length }}</span>
+      <span class="soft-badge">Top {{ displayData.length }}</span>
     </div>
     </div>
 
 
-    <div v-show="data.length > 0 && !loading" ref="chartRef" class="chart-el"></div>
-    <div v-if="data.length === 0 || loading" class="empty-state">
+    <div v-show="displayData.length > 0 && !loading" ref="chartRef" class="chart-el"></div>
+    <div v-if="displayData.length === 0 || loading" class="empty-state">
       {{ loading ? '加载中...' : '暂无分类数据' }}
       {{ loading ? '加载中...' : '暂无分类数据' }}
     </div>
     </div>
   </section>
   </section>

+ 1 - 1
src/views/pms/stat/rdkb/rdsummary.vue

@@ -25,7 +25,7 @@ const cardConfigs: CardConfig[] = [
   },
   },
   {
   {
     key: 'wells',
     key: 'wells',
-    title: '连油井数',
+    title: '井数',
     icon: 'i-solar:clipboard-remove-linear',
     icon: 'i-solar:clipboard-remove-linear',
     accent: THEME.color.orange.strong,
     accent: THEME.color.orange.strong,
     glow: THEME.color.orange.glow
     glow: THEME.color.orange.glow