朱鑫波 1 gadu atpakaļ
vecāks
revīzija
7bba60027a
1 mainītis faili ar 187 papildinājumiem un 29 dzēšanām
  1. 187 29
      src/views/dashboard/dataBigScreen.vue

+ 187 - 29
src/views/dashboard/dataBigScreen.vue

@@ -29,6 +29,18 @@
 }
 </style>
 <style lang="scss" scoped>
+::v-deep .el-table__body tr.el-table__row {
+  background-color: rgb(2, 28, 69); /* 你想要的颜色 */
+}
+::v-deep .el-table__header tr th {
+  background-color: rgb(2, 28, 69); /* 你想要的颜色 */
+}
+::v-deep .el-table__header tr .el-table__cell {
+  color: #f2f2f2; /* 你想要的文字颜色 */
+}
+::v-deep .el-table__body .el-table__cell {
+  color: #f2f2f2; /* 你想要的文字颜色 */
+}
 p {
   margin-top: 0;
 }
@@ -266,14 +278,14 @@ p {
 
       <el-row
         :class="fullscreenShow ? 'fullScreen' : 'fullScreenRow'"
-        style="padding: 0 20px; margin: 30px 0"
+        style="padding: 0 20px; margin: 0"
         gutter="20"
       >
         <el-col :span="8">
           <div
             style="
               width: 100%;
-              height: 300px;
+              height: 30%;
               background-color: rgba(2, 28, 69, 1);
               opacity: 0.7;
             "
@@ -300,12 +312,88 @@ p {
             <a-list v-else :data-source="[]" />
             <!-- <a-empty :image="emptyImg"  /> -->
           </div>
+          <div
+            style="
+              width: 100%;
+              height: 30%;
+              background-color: rgba(2, 28, 69, 1);
+              opacity: 0.7;
+            "
+            :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'"
+          >
+            <br />
+            <div
+              style="
+                width: 5px;
+                height: 14px;
+                background: #0099ff;
+                display: inline-block;
+                margin-left: 10px;
+              "
+            ></div>
+            <span style="color: #0099ff; font-size: 1vw; padding: 10px">达人排行榜</span>
+            <el-table v-loading="promoterLoading" :data="promoterRankList">
+              <!-- <el-table-column type="selection" width="55" align="center" /> -->
+              <el-table-column type="index" :index="indexMethodTwo" width="70">
+              </el-table-column>
+              <el-table-column label="达人名称" align="center" prop="promoterNickName">
+                <template slot-scope="scope">
+                  <a
+                    :title="scope.row.promoterNickName"
+                    @click="toPersonDetail(scope.row)"
+                    style="
+                      width: 200px;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
+                      overflow: hidden;
+                      text-align: left;
+                    "
+                  >
+                    {{ scope.row.promoterNickName }}
+                  </a>
+                </template>
+              </el-table-column>
+              <el-table-column label="订单数" align="center" prop="orderNum">
+              </el-table-column>
+              <el-table-column label="有效订单" align="center" prop="validOrderNUm">
+              </el-table-column>
+              <el-table-column label="有效率" align="center" prop="validRadio">
+                <template slot-scope="scope">
+                  {{
+                    scope.row.validRadio
+                      ? (scope.row.validRadio * 100).toFixed(2) + "%"
+                      : "-"
+                  }}
+                </template>
+              </el-table-column>
+
+              <el-table-column label="日涨幅" align="center" prop="radio">
+                <template slot-scope="scope">
+                  <i :style="scope.row.radio > 0 ? 'color:red' : 'color:green'">{{
+                    scope.row.radio ? (scope.row.radio * 100).toFixed(2) + "%" : "-"
+                  }}</i>
+                </template>
+              </el-table-column>
+            </el-table>
+            <!-- <a-empty :image="emptyImg"  /> -->
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div
+            style="
+              width: 100%;
+              height: 60%;
+              background-color: rgba(2, 28, 69, 1);
+              opacity: 0.7;
+            "
+            :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'"
+          ></div>
         </el-col>
-        <el-col :span="16">
+        <el-col :span="8">
           <div
             style="
               width: 100%;
-              height: 300px;
+              height: 30%;
               background-color: rgba(2, 28, 69, 1);
               opacity: 0.7;
             "
@@ -327,19 +415,10 @@ p {
             </div>
             <!-- <a-empty :image="emptyImg"  /> -->
           </div>
-        </el-col>
-      </el-row>
-      <el-row
-        :class="fullscreenShow ? 'fullScreen' : 'fullScreenRow'"
-        style="padding: 0 20px; margin: 0"
-        gutter="20"
-      >
-        <el-col :span="8">
-          <!-- 饼图 -->
           <div
             style="
               width: 100%;
-              height: 300px;
+              height: 30%;
               background-color: rgba(2, 28, 69, 1);
               opacity: 0.7;
             "
@@ -355,16 +434,58 @@ p {
                 margin-left: 10px;
               "
             ></div>
-            <span style="color: #0099ff; font-size: 1vw; padding: 10px">七日订单</span>
-            <div id="echart" ref="echart" style="width: 98%; height: 250px"></div>
+            <span style="color: #0099ff; font-size: 1vw; padding: 10px">商品排行榜</span>
+            <el-table v-loading="orderRankLoading" :data="orderRankList">
+              <!-- <el-table-column type="selection" width="55" align="center" /> -->
+              <el-table-column type="index" :index="indexMethod"></el-table-column>
+              <el-table-column label="商品名称" align="center" prop="itemTitle">
+                <template slot-scope="scope">
+                  <a
+                    :title="scope.row.itemTitle"
+                    @click="toOrderDetail(scope.row)"
+                    style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden"
+                  >
+                    {{ scope.row.itemTitle }}
+                  </a>
+                </template>
+              </el-table-column>
+              <el-table-column label="订单数" align="center" prop="orderNum">
+              </el-table-column>
+              <el-table-column label="有效订单" align="center" prop="validOrderNUm">
+              </el-table-column>
+              <el-table-column label="有效率" align="center" prop="validRadio">
+                <template slot-scope="scope">
+                  {{
+                    scope.row.validRadio
+                      ? (scope.row.validRadio * 100).toFixed(2) + "%"
+                      : "-"
+                  }}
+                </template>
+              </el-table-column>
+             
+
+              <el-table-column label="日涨幅" align="center" prop="radio">
+                <template slot-scope="scope">
+                  <i :style="scope.row.radio > 0 ? 'color:red' : 'color:green'">{{
+                    scope.row.radio ? (scope.row.radio * 100).toFixed(2) + "%" : "-"
+                  }}</i>
+                </template>
+              </el-table-column>
+            </el-table>
             <!-- <a-empty :image="emptyImg"  /> -->
           </div>
         </el-col>
-        <el-col :span="16">
+      </el-row>
+      <el-row
+        :class="fullscreenShow ? 'fullScreen' : 'fullScreenRow'"
+        style="padding: 0 20px; margin: 0"
+        gutter="20"
+      >
+        <el-col :span="24">
           <div
             style="
               width: 100%;
-              height: 300px;
+              height: 30%;
               background-color: rgba(2, 28, 69, 1);
               opacity: 0.7;
             "
@@ -380,15 +501,8 @@ p {
                 margin-left: 10px;
               "
             ></div>
-            <span style="color: #0099ff; font-size: 1vw; padding: 10px">排行榜</span>
-            <div v-if="emptyShowOne">
-              <div
-                id="accountIndexEchartOnePie"
-                ref="accountIndexEchartOnePie"
-                style="width: 90%; height: 300px; margin-right: 20px"
-              ></div>
-            </div>
-            <a-list v-else :data-source="[]" />
+            <span style="color: #0099ff; font-size: 1vw; padding: 10px">七日订单</span>
+            <div id="echart" ref="echart" style="width: 98%; height: 250px"></div>
             <!-- <a-empty :image="emptyImg"  /> -->
           </div>
         </el-col>
@@ -443,6 +557,8 @@ export default {
       },
       loading: false,
       uploadDate: [],
+      promoterRankList: [],
+      orderRankList: [],
     };
   },
   created() {
@@ -460,6 +576,8 @@ export default {
       this.getOrderData();
       this.getDataAnalysis();
       this.getOrderHourData();
+      this.getIndexOrderRank();
+      this.getIndexPromoterRank();
     });
   },
   methods: {
@@ -522,6 +640,40 @@ export default {
       //   this.fullscreenShow = false;
       //   this.fullShow = true;
     },
+    getIndexPromoterRank() {
+      getIndexPromoterRank(
+        this.addDateRange(
+          {
+            dateType: 1,
+            pageNum: 1,
+            pageSize: 5,
+            mediaId: this.mediaId,
+          },
+          this.uploadDate,
+          "orderStartDate",
+          "orderEndDate"
+        )
+      ).then((response) => {
+        this.promoterRankList = response.rows;
+      });
+    },
+    getIndexOrderRank() {
+      getIndexOrderRank(
+        this.addDateRange(
+          {
+            dateType: 1,
+            pageNum: 1,
+            pageSize: 5,
+            mediaId: this.mediaId,
+          },
+          this.uploadDate,
+          "orderStartDate",
+          "orderEndDate"
+        )
+      ).then((response) => {
+        this.orderRankList = response.rows;
+      });
+    },
     getOrderData() {
       this.loading = true;
       var areaArray = ["GMV", "有效单量", "达人数", "商品数"];
@@ -1078,8 +1230,14 @@ export default {
           tooltip: {
             trigger: "axis",
             formatter: function (params) {
-              return `${params[0].marker}今天${params[0].name}时: ${params[0].value}<br/>
-                            ${params[1].marker}昨天${params[1].name}时: ${params[1].value}`;
+              if (todayList[0].hour == 0) {
+                if (params.length > 1) {
+                  return `${params[0].marker}今天${params[0].name}时: ${params[0].value}<br/> 
+                              ${params[1].marker}昨天${params[1].name}时: ${params[1].value}`;
+                } else {
+                  return `${params[0].marker}昨天${params[0].name}时: ${params[0].value}`;
+                }
+              }
             },
           },
           grid: {