lw-cdp-ui 1.4.28 → 1.4.30

package/dist/components/lwBiChart/charts/MetricCard.vue

@@ -1,45 +1,66 @@
 <template>
-  <div class="chart-title-card-list"
-       :style="{gridTemplateColumns: `repeat(${columns || 1}, 1fr)`}">
-    <div v-for="(item, index) in parsedData"
-         :key="index"
-         class="chart-title-card"
-         :style="{ height,textAlign: item.setting?.title?.left || 'left' }">
-      <div class="title-top"
-           :style="{ textAlign: item.setting?.title?.left || 'left', padding: item.setting?.title?.padding?.map(num => num + 'px').join(' ') || 0 }"
-           v-if="item.setting.title?.show">
-        <span :style="{
-                     color: item.setting.title?.textStyle?.color || item.color,
-                     fontWeight: item.setting.title?.textStyle?.fontWeight || 'normal',
-                      fontSize: item.setting.title?.textStyle?.fontSize + 'px' || '17px' }">{{ item.title }}</span>
-        <el-tooltip v-if="item.tooltip"
-                    effect="dark"
-                    :content="item.tooltip"
-                    placement="top">
-          <el-icon class="icon-tooltip"><el-icon-warning /></el-icon>
-        </el-tooltip>
-      </div>
-      <div class="statistic-current"
-           :style="{
-                      ...legendLeftRight,
-                     color: item.setting.legend?.textStyle?.color || item.color,
-                     padding: item.setting?.legend?.padding?.map(num => num + 'px').join(' ') || 0,
-                     fontWeight: item.setting.legend?.textStyle?.fontWeight || 'bold',
-                      fontSize: item.setting.legend?.textStyle?.fontSize + 'px' || '17px'}">
-        {{ item.current?.toLocaleString('en-US') }}
-      </div>
-
-      <div v-if="parsedData.length > 1"
-           class="statistic-footer">
-        <span>{{ item.subtitle }}</span>
-        <div :style="{ color: item.percentage >= 0 ? '#BF1220' : '#00B78B' }">
-          <el-icon v-if="item.percentage >= 0"
-                   class="icon-up"><el-icon-top /></el-icon>
-          <el-icon v-else
-                   class="icon-down"><el-icon-bottom /></el-icon>
-          {{ Math.abs(item.percentage) }}%
-        </div>
-      </div>
+  <div class="chart-title-card-list" :style="{ gridTemplateColumns: `repeat(${columns || 1}, 1fr)` }">
+    <div
+      v-for="(parsedItem, parsedIndex) in parsedData"
+      :key="parsedIndex"
+      class="chart-title-card"
+      :style="{ height: cardHeight, padding: paddingDefault }">
+      <template v-for="(item, index) in parsedItem" :key="item.name">
+        <template v-if="index === 0">
+          <div>
+            <div
+              class="title-top"
+              :style="{
+                textAlign: item.setting?.title?.left || 'left',
+                padding: item.setting?.title?.padding?.map((num) => num + 'px').join(' ') || 0
+              }"
+              v-if="item.setting.title?.show">
+              <span
+                :style="{
+                  color: item.setting.title?.textStyle?.color || item.color,
+                  fontWeight: item.setting.title?.textStyle?.fontWeight || 'normal',
+                  fontSize: item.setting.title?.textStyle?.fontSize + 'px' || '17px'
+                }"
+                >{{ item.name }}</span
+              >
+              <el-tooltip v-if="item.tooltip" effect="dark" :content="item.tooltip" placement="top">
+                <el-icon class="icon-tooltip"><el-icon-warning /></el-icon>
+              </el-tooltip>
+            </div>
+            <div
+              class="statistic-current"
+              :style="{
+                ...legendLeftRight,
+                color: item.setting.legend?.textStyle?.color || item.color,
+                padding: item.setting?.legend?.padding?.map((num) => num + 'px').join(' ') || 0,
+                fontWeight: item.setting.legend?.textStyle?.fontWeight || 'bold',
+                fontSize: item.setting.legend?.textStyle?.fontSize + 'px' || '17px'
+              }">
+              {{ item.value?.toLocaleString('en-US') }}
+            </div>
+          </div>
+        </template>
+        <template v-else-if="index == parsedItem.length - 1">
+          <div
+            class="statistic-footer"
+            :style="{
+              left: rawData.setting?.grid?.left + 'px',
+              bottom: rawData.setting?.grid?.bottom + 'px',
+              right: rawData.setting?.grid?.right + 'px'
+            }">
+            <span>{{ item.name }}</span>
+            <div :style="{ color: item.value >= 0 ? '#BF1220' : '#00B78B' }">
+              {{ Math.abs(item.value) }} {{ item.unitName }}
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="statistic-item">
+            <span>{{ item.name }}</span>
+            <div class="number">{{ Math.abs(item.value) }} {{ item.unitName }}</div>
+          </div>
+        </template>
+      </template>
     </div>
   </div>
 </template>
@@ -47,6 +68,11 @@
 <script>
 export default {
   name: 'MetricCard',
+  data() {
+    return {
+      cardHeight: 0
+    }
+  },
   props: {
     rawData: {
       type: Object,
@@ -55,51 +81,47 @@ export default {
     },
     height: {
       type: String,
-      default: '300px'
+      default: ''
     },
-    subtitle: {type: String, default: '同比变化'},
-    tooltip: {type: String, default: ''}
+    subtitle: { type: String, default: '同比变化' },
+    tooltip: { type: String, default: '' }
   },
   computed: {
     parsedData() {
-      const {setting, dataSet} = this.rawData
-      const {tables} = dataSet
-
-      const visibleTables = tables.filter(table => setting?.displayMetrics?.includes(`${table.name}.${table.metricId}`))
+      const { setting, dataSet } = this.rawData
+      const { tables } = dataSet
 
-      const result = []
-      visibleTables.forEach((table, index) => {
-        table.headers.forEach((x, xIndex) => {
-          result.push({
-            title: `${setting?.title?.text || table.metricName} ${table?.unitName ? `(${table.unitName})` : ''}`,
-            index: x,
-            color: setting.color[xIndex],
-            subtitle: '环比上期',
-            current: table.rows[0]?.values[xIndex],
-            tooltip: table.name,
-            percentage:
-              xIndex > 1
-                ? table.rows[0]?.values[xIndex] == 0
-                  ? 0
-                  : Math.round(
-                      ((table.rows[0]?.values[xIndex] - table.rows[0]?.values[xIndex - 1]) /
-                        table.rows[0]?.values[xIndex - 1]) *
-                        10000
-                    ) / 100
-                : 0,
-            setting
-          })
+      const visibleTables = setting?.displayMetrics
+        ?.map((metric) => {
+          const [tableName, metricId] = metric.split('.')
+          return tables.find((table) => table.name === tableName && table.metricId === metricId)
         })
-      })
-      return result
+        .filter(Boolean)
+
+      // 处理处理高度
+      if (!this.height) {
+        this.cardHeight = 200 + (visibleTables.length - 2) * 10 + 'px'
+      } else {
+        this.cardHeight = this.height
+      }
+
+      return this.transformData(visibleTables, setting)
     },
     columns() {
       return this.parsedData?.length < this.rawData.setting.columnCount
         ? this.parsedData?.length
         : this.rawData.setting.columnCount
     },
+    paddingDefault() {
+      return [
+        `${this.rawData.setting?.grid?.top}px` || 0,
+        `${this.rawData.setting?.grid?.right}px` || 0,
+        `${this.rawData.setting?.grid?.bottom}px` || 0,
+        `${this.rawData.setting?.grid?.left}px` || 0
+      ]
+    },
     titleLeftRight() {
-      let {left} = this.rawData.setting?.title || {}
+      let { left } = this.rawData.setting?.title || {}
       let params = {}
       if (left == 'left') {
         params.left = 0
@@ -113,30 +135,65 @@ export default {
       return params
     },
     legendLeftRight() {
-      let {left, top} = this.rawData.setting?.legend || {}
+      let { left, top } = this.rawData.setting?.legend || {}
       let params = {}
       if (left == 'left') {
-        params.left = 0
-        params.right = 'auto'
+        params['justify-content'] = 'flex-start'
       } else if (left == 'center') {
-        params.right = '50%'
-        params.transform = 'translateX(50%)'
+        params['justify-content'] = 'center'
       } else {
-        params.left = 'auto'
-        params.right = 0
+        params['justify-content'] = 'flex-end'
       }
 
       if (top == 'top') {
-        params.top = 0
+        params['align-items'] = 'flex-start'
       } else if (top == 'bottom') {
-        params.bottom = 0
+        params['align-items'] = 'flex-end'
       } else if (top == 'middle') {
-        params.top = '50%'
-        params.transform = 'translateY(-50%)'
+        params['align-items'] = 'center'
       }
 
       return params
     }
+  },
+  methods: {
+    transformData(tables, setting) {
+      const result = []
+
+      // 1. 找出最长的headers长度（决定最终要循环多少次）
+      const maxHeadersLength = Math.max(...tables.map((table) => table.headers.length))
+
+      // 2. 遍历每个位置（0到maxHeadersLength-1）
+      for (let i = 0; i < maxHeadersLength; i++) {
+        const positionGroup = []
+
+        // 3. 遍历每个table，获取第i个header和对应的value
+        tables.forEach((table) => {
+          // 如果当前table的headers长度不够，跳过或用默认值
+          if (i < table.headers.length) {
+            const header = table.headers[i]
+            const metricName = table.metricName
+            const value = table.rows[0].values[i]
+
+            positionGroup.push({
+              name: header != metricName ? `${header}-${metricName}` : metricName,
+              unit: table.unit,
+              unitName: table.unitName,
+              unit: table.unit,
+              setting,
+              value: value
+            })
+          }
+        })
+
+        // 4. 将当前position的数据组加入结果
+        if (positionGroup.length > 0) {
+          result.push(positionGroup)
+        }
+      }
+
+      return result
+    }
   }
 }
 </script>
@@ -156,9 +213,6 @@ export default {
     // max-width: 300px;
     width: 100%;
     min-width: 30%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
     background-color: var(--el-bg-color-overlay);
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.0509803922);
     position: relative;
@@ -169,8 +223,9 @@ export default {
   }
   .statistic-current {
     font-size: 17px;
-    position: absolute;
-    right: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
   }
 
   .statistic-footer {
@@ -180,7 +235,8 @@ export default {
     flex-wrap: wrap;
     font-size: 12px;
     color: var(--el-text-color-regular);
-    margin-top: 16px;
+    margin-top: 5px;
+    position: absolute;
   }
 
   .statistic-footer .footer-item {
@@ -201,5 +257,17 @@ export default {
   .red {
     color: var(--el-color-error);
   }
+
+  .statistic-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+    color: var(--el-text-color-placeholder);
+    .number {
+      color: var(--el-text-color-primary);
+      margin-left: 2px;
+    }
+  }
 }
 </style>