提交

src/views/Activity/views/defaultComponent.vue

@@ -1,46 +1,53 @@
 <template>
   <div class="defaultComponent">
-    <el-row>
-      <el-col :span="6">
-        <div class="card">
-          <div class="cardtit">话题列表</div>
-          <div class="huati">
-            <div v-for="o in huati" :key="o" class="text">
-              {{ o.name }}
+    <div class="card">
+      <div class="cardtit">传播数据</div>
+      <el-row v-if="shujuLen <= 6">
+        <el-col :span="6" style="padding: 10px 0;text-align: center">
+          <el-card>
+            <div class="numTitle">{{ numform(shujuTotal.playCount) }}</div>
+            <div class="numValue">总传播量</div>
+          </el-card>
+        </el-col>
+        <el-col
+          :span="3"
+          style="padding: 10px 0;text-align: center"
+          v-for="(item, i) in shuju"
+          :key="i"
+        >
+          <div
+            class="numTitle fenPla"
+            :style="'color:' + c[item % (c.length - 1)]"
+          >
+            {{ numform(item) }}
+          </div>
+          <div class="numValue" v-text="i"></div>
+        </el-col>
+      </el-row>
+      <el-row v-if="shujuLen > 6">
+        <el-col :span="6" style="padding: 10px;text-align: center">
+          <el-card>
+            <div class="numTitle">
+              {{ numform(shujuTotal.playCount) }}
             </div>
+            <div class="numValue">总传播量</div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-row v-if="shujuLen > 6">
+        <el-col
+          :span="4"
+          style="padding: 10px;text-align: center"
+          v-for="(item, i) in shuju"
+          :key="i"
+        >
+          <div class="numTitle" :style="'color:' + c[item % (c.length - 1)]">
+            {{ numform(item) }}
           </div>
-        </div>
-      </el-col>
-      <el-col :span="18">
-        <div class="card">
-          <div class="cardtit">传播数据</div>
-          <el-row>
-            <el-col :span="6" style="padding: 10px;text-align: center">
-              <el-card>
-                <div class="numTitle">{{ numform(shujuTotal.playCount) }}</div>
-                <div class="numValue">总传播量</div>
-              </el-card>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col
-              :span="4"
-              style="padding: 10px;text-align: center"
-              v-for="(item, i) in shuju"
-              :key="i"
-            >
-              <div
-                class="numTitle"
-                :style="'color:' + c[item % (c.length - 1)]"
-              >
-                {{ numform(item) }}
-              </div>
-              <div class="numValue" v-text="i"></div>
-            </el-col>
-          </el-row>
-        </div>
-      </el-col>
-    </el-row>
+          <div class="numValue" v-text="i"></div>
+        </el-col>
+      </el-row>
+    </div>
     <el-row>
       <el-col :span="16">
         <div class="card">
@@ -193,6 +200,7 @@ export default {
       typeName: "ALL",
       huati: [],
       shuju: {},
+      shujuLen: 0,
       hotList: [],
       selectOption: [],
       userlist: [],
@@ -249,15 +257,18 @@ export default {
         this.load.close();
         this.huati = li[0] || [];
         this.shujuTotal = li[1][0] || {};
-        let shuju = {};
+        let shuju = {},
+          len = 0;
         for (let i = 1; i < (li[1] || []).length; i++) {
           const v = (li[1] || [])[i] || {};
           if (!shuju[v.platform]) {
             shuju[v.platform] = v.playCount || 0;
+            len++;
           } else {
             shuju[v.platform] += v.playCount || 0;
           }
         }
+        this.shujuLen = len;
         this.shuju = shuju;
         this.hotList = li[4] || [];
         this.selectOption = li[5] || [];
@@ -275,8 +286,18 @@ export default {
     numform(n) {
       let num = n;
       if (isNaN(n)) num = "0";
-      else if (n >= 100000000) num = ((n / 100000000).toFixed(2) - 0 + "").replace(/\B(?=(?:\d{3})+\b)/g, ",") + "亿";
-      else if (n >= 10000) num = ((n / 10000).toFixed(2) - 0 + "").replace(/\B(?=(?:\d{3})+\b)/g, ",") + "万";
+      else if (n >= 100000000)
+        num =
+          ((n / 100000000).toFixed(2) - 0 + "").replace(
+            /\B(?=(?:\d{3})+\b)/g,
+            ","
+          ) + "亿";
+      else if (n >= 10000)
+        num =
+          ((n / 10000).toFixed(2) - 0 + "").replace(
+            /\B(?=(?:\d{3})+\b)/g,
+            ","
+          ) + "万";
       else num = (num + "").replace(/\B(?=(?:\d{3})+\b)/g, ",");
       return num;
     },
@@ -306,7 +327,9 @@ export default {
           trigger: "axis",
           formatter: v => {
             const item = v[0] || {};
-            return (item.name || "") + "<br />" + this.numform(item.value || "");
+            return (
+              (item.name || "") + "<br />" + this.numform(item.value || "")
+            );
           },
         },
         legend: {
@@ -529,11 +552,13 @@ export default {
 }
 .defaultComponent .numTitle {
   font-size: 24px;
-  height: 1em;
   line-height: 1em;
   color: #1a89b3;
   font-weight: bold;
 }
+.defaultComponent .fenPla {
+  padding-top: 20px;
+}
 .defaultComponent .numValue {
   margin-top: 8px;
   font-size: 14px;