Jelajahi Sumber

提交代码

朱鑫波 1 tahun lalu
induk
melakukan
dfb03f139e

+ 14 - 0
package-lock.json

@@ -3492,6 +3492,11 @@
         }
       }
     },
+    "claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "clean-css": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
@@ -5213,6 +5218,15 @@
         "zrender": "4.3.2"
       }
     },
+    "echarts-gl": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-1.1.2.tgz",
+      "integrity": "sha512-EVGx9RS2eMzaCgAMJSDCeLId4g8oFCFn78Fdh+0xIXASiZw/gPnJqr1vQgnQhmXhiUKixkIhIzfdc//qrct/Hg==",
+      "requires": {
+        "claygl": "^1.2.1",
+        "zrender": "^4.0.4"
+      }
+    },
     "editorconfig": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",

+ 1 - 0
package.json

@@ -44,6 +44,7 @@
     "core-js": "^3.23.1",
     "cos-js-sdk-v5": "^1.3.8",
     "echarts": "4.9.0",
+    "echarts-gl": "^1.1.2",
     "element-ui": "2.15.8",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

+ 8 - 0
src/api/index.js

@@ -107,6 +107,14 @@ export function getDataAnalysis(query) {
     })
 }
 
+// 工作台-销量趋势
+export function getBigDataAnalysis(query) {
+    return request({
+        url: '/itemCollectSamples/getBigDataAnalysis',
+        method: 'get',
+        params: query
+    })
+}
 
 export function getMediaId(query) {
   return request({

TEMPAT SAMPAH
src/views/dashboard/567-1.jpg


TEMPAT SAMPAH
src/views/dashboard/567-2.jpg


+ 212 - 88
src/views/dashboard/dataBigScreen.vue

@@ -62,62 +62,23 @@ p {
   background-image: url("../../assets/images/head_bg.png");
   background-size: 100% 100%;
 }
+// ../../assets/images/head_bg.png"
 
-::v-deep .ant-progress-circle .ant-progress-text {
+::v-deep .el-progress-circle .ant-progress-text {
   color: #fff;
 }
 
-::v-deep .ant-input {
+::v-deep .el-input {
   background-color: rgba(2, 28, 69, 1) !important;
   border: 1px solid #00bfff;
   color: #ccc;
 }
 
-::v-deep .ant-radio-button-wrapper {
+::v-deep .el-radio-button__inner {
   background-color: rgba(2, 28, 69, 1) !important;
   border: 1px solid #6633ff;
   color: #6633ff;
 }
-.ant-radio-group-solid
-  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
-  color: #fff;
-  border-color: #00bfff;
-}
-::v-deep .ant-calendar-picker-clear {
-  background: none !important;
-  color: #ccc !important;
-}
-
-::v-deep .ant-table-thead > tr > th {
-  color: white;
-  /* background: rgba(2, 28, 69, 1) !important; */
-  border-bottom: 1px solid rgba(2, 28, 69, 1);
-  padding: 10px;
-  background-color: rgb(26, 52, 104);
-}
-
-::v-deep .ant-table-placeholder {
-  background: rgba(2, 28, 69, 1);
-  border-bottom: none;
-  border-top: none;
-  color: #fff;
-}
-
-::v-deep .ant-table-tbody > tr > td {
-  color: white;
-  background: rgba(2, 28, 69, 1) !important;
-  border: none;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-::v-deep .ant-progress-circle-trail {
-  stroke: rgb(39, 53, 102) !important;
-}
-
-::v-deep .ant-empty-description {
-  color: #fff;
-}
 
 .threeList {
   width: 20px;
@@ -235,12 +196,13 @@ p {
             font-weight: bold;
           "
         >
-          电商数据监控中心
+          567睿选
 
           <el-radio-group
             v-model="mediaId"
             size="mini"
             style="position: fixed; top: 3px; left: 0; opacity: 0.7"
+            @change="changeData"
           >
             <el-radio-button label="2">快手</el-radio-button>
             <el-radio-button label="1">抖音</el-radio-button>
@@ -330,25 +292,29 @@ p {
               "
             ></div>
             <span style="color: #0099ff; font-size: 1vw; padding: 10px">达人排行榜</span>
-            <el-table v-loading="promoterLoading" :data="promoterRankList">
+            <el-table :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>
+                  <div style="display: flex">
+                    <img
+                      :src="scope.row.promoterUrl"
+                      alt=""
+                      style="width: 1.2vw; height: auto; margin-right: 5px"
+                    />
+                    <a
+                      :title="scope.row.promoterNickName"
+                      style="
+                        width: 200px;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-align: left;
+                      "
+                    >
+                      {{ scope.row.promoterNickName }}
+                    </a>
+                  </div>
                 </template>
               </el-table-column>
               <el-table-column label="订单数" align="center" prop="orderNum">
@@ -385,7 +351,47 @@ p {
               opacity: 0.7;
             "
             :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'"
-          ></div>
+          >
+            <div
+              style="
+                width: 100%;
+                height: 20%;
+                color: #f2f2f2;
+                display: flex;
+                justify-content: space-around;
+                font-size: 3vw;
+                line-height: 13vh;
+              "
+            >
+              <count-to
+                :start-val="0"
+                :end-val="(orderData.baseAmount / 100).toFixed(2)"
+                :decimals="2"
+                :duration="3600"
+                class="card-panel-num"
+                style="color:darkkhaki"
+              />
+
+              <!-- <count-to
+                :start-val="0"
+                :end-val="orderData.validOrderNUm"
+                :duration="3600"
+                class="card-panel-num"
+              /> -->
+
+              <!-- <span> {{ (orderData.baseAmount / 100).toFixed(2) }}</span>
+              <span>
+                {{ orderData.validOrderNUm }}
+              </span> -->
+            </div>
+
+            <div
+              ref="volumn"
+              class="volume"
+              id="volumn"
+              style="width: 100%; height: 80%"
+            />
+          </div>
         </el-col>
         <el-col :span="8">
           <div
@@ -432,18 +438,27 @@ p {
               "
             ></div>
             <span style="color: #0099ff; font-size: 1vw; padding: 10px">商品排行榜</span>
-            <el-table v-loading="orderRankLoading" :data="orderRankList">
+            <el-table :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>
+                  <div style="display: flex">
+                    <img
+                      :src="scope.row.imageUrl"
+                      alt=""
+                      style="width: 1.2vw; height: auto; margin-right: 5px"
+                    />
+                    <a
+                      :title="scope.row.itemTitle"
+                      style="
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        overflow: hidden;
+                      "
+                    >
+                      {{ scope.row.itemTitle }}
+                    </a>
+                  </div>
                 </template>
               </el-table-column>
               <el-table-column label="订单数" align="center" prop="orderNum">
@@ -497,8 +512,8 @@ p {
                 margin-left: 10px;
               "
             ></div>
-            <span style="color: #0099ff; font-size: 1vw; padding: 10px">七日订单</span>
-            <div id="echart" ref="echart" style="width: 98%; height: 80%"></div>
+            <span style="color: #0099ff; font-size: 1vw; padding: 10px">销量趋势</span>
+            <div id="echart" ref="echart" style="width: 98%; height: 90%"></div>
             <!-- <a-empty :image="emptyImg"  /> -->
           </div>
         </el-col>
@@ -521,15 +536,21 @@ require("echarts/lib/component/title");
 require("echarts/lib/component/graphic");
 require("echarts/lib/component/toolbox");
 require("echarts/lib/component/legend");
-
+import "echarts-gl";
 const color = ["#8A2BE2", "#FFA500", "#00FFFF", "#4169E1", "#FF00FF", "#48D1CC"];
 
+import aa from "./dataJson/map2.json";
+import world from "./dataJson/mapData.json";
+
+import CountTo from "vue-count-to";
+echarts.registerMap("world", world);
 import {
   getIndexPromoterRank, //获取达人排行
   getIndexOrderRank, //获取商品排行
   getPersonalInfo,
   getOrderData,
   getDataAnalysis,
+  getBigDataAnalysis,
   getOrderHourData,
   getMediaId,
 } from "@/api/index";
@@ -555,8 +576,13 @@ export default {
       uploadDate: [],
       promoterRankList: [],
       orderRankList: [],
+      fullscreenShow: false,
+      myChart: null,
     };
   },
+  components: {
+    CountTo,
+  },
   created() {
     let date = new Date();
     let y = date.getFullYear();
@@ -574,9 +600,27 @@ export default {
       this.getOrderHourData();
       this.getIndexOrderRank();
       this.getIndexPromoterRank();
+      // this.initEchart("volumn", this.drawChart());
+      this.drawChart();
+      var that = this;
+      setInterval(function () {
+        that.getOrderData();
+        that.getIndexPromoterRank();
+        that.getOrderHourData();
+        that.getIndexOrderRank();
+        // this.initEchart("volumn", this.drawChart());
+      }, 120000);
     });
   },
   methods: {
+    changeData(e) {
+      console.log(e);
+      this.getOrderData();
+      this.getIndexPromoterRank();
+      this.getOrderHourData();
+      this.getIndexOrderRank();
+      this.getDataAnalysis();
+    },
     //获取echart的值
     initEchart(idName, optionName) {
       let that = this;
@@ -617,7 +661,7 @@ export default {
         document.body.msRequestFullscreen();
       }
       this.fullText = false;
-      //   this.fullscreenShow = true;
+      this.fullscreenShow = true;
       //   this.fullShow = false;
     },
     // 退出全屏
@@ -633,7 +677,7 @@ export default {
         document.msExitFullscreen();
       }
       this.fullText = true;
-      //   this.fullscreenShow = false;
+      this.fullscreenShow = false;
       //   this.fullShow = true;
     },
     getIndexPromoterRank() {
@@ -719,18 +763,11 @@ export default {
       let sdd = start.getDate();
       sdd = sdd < 10 ? "0" + sdd : sdd;
       let dateNow = [`${sy}-${sMM}-${sdd}`, `${ey}-${eMM}-${edd}`];
-      getDataAnalysis(
-        this.addDateRange(
-          { userId: 510127, type: 1, mediaId: this.mediaId },
-          dateNow,
-          "statDate",
-          "endDate"
-        )
-      ).then((response) => {
+      getBigDataAnalysis({ mediaId: this.mediaId }).then((response) => {
         this.echartsLoading = false;
-        this.analysis = response.data;
+        this.analysis = response;
         this.$nextTick(() => {
-          this.initEchart("echart", this.getDataAnalysisData(response.data.list));
+          this.initEchart("echart", this.getDataAnalysisData(response));
         });
       });
     },
@@ -1173,13 +1210,19 @@ export default {
       return option;
     },
 
-    // 柱状图-有效订单
+    // 柱状图-销量
     getDataAnalysisData(data) {
       var option = {
+        grid: {
+          left: "0%",
+          right: "0%",
+          bottom: "5%",
+          containLabel: true,
+        },
         xAxis: {
           type: "category",
           data: data.map((item) => {
-            return item.date.split("2024-")[1];
+            return item.date;
           }),
           axisLine: {
             lineStyle: {
@@ -1201,15 +1244,25 @@ export default {
 
           axisLabel: {
             fontSize: 16,
+            color: "rgb(39, 53, 102,0)",
           },
         },
         series: [
           {
             data: data.map((item) => {
-              return item.validOrderCount;
+              return item.orderCount;
             }),
             type: "bar",
             itemStyle: {
+              color: "rgba(200,137,255,1.0)",
+            },
+          },
+          {
+            data: data.map((item) => {
+              return item.payAmount / 10;
+            }),
+            type: "line",
+            itemStyle: {
               color: "rgba(0,137,255,1.0)",
             },
           },
@@ -1390,6 +1443,77 @@ export default {
         return optionTwo;
       }
     },
+
+    drawChart() {
+      this.myChart = echarts.init(this.$refs.volumn);
+      var baseTexture = null;
+      var option = null;
+      var geoJson = null;
+      var bb = null;
+
+      function getGeoJsonData() {
+        geoJson = world;
+        bb = aa
+          .filter(function (dataItem) {
+            return dataItem[2] > 0;
+          })
+          .map(function (dataItem) {
+            return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
+          });
+        getBaseTexture();
+      }
+
+      function getBaseTexture() {
+        echarts.registerMap("world", geoJson);
+        let canvas = document.createElement("canvas");
+        baseTexture = echarts.init(canvas, null, {
+          width: 4096,
+          height: 2048,
+        });
+        baseTexture.setOption({
+          backgroundColor: "#00BFFF",
+        });
+        drawEarth();
+      }
+      var self = this;
+      function drawEarth() {
+        option = {
+          visualMap: {
+            show: false,
+            min: 0,
+            max: 60,
+            inRange: {
+              symbolSize: [1.0, 10.0],
+            },
+          },
+          globe: {
+            show: false,
+            globeOuterRadius: 100,
+            shading: "color",
+            environment: "#001213", //00060C
+            light: {
+              ambient: {
+                intensity: 1,
+              },
+            },
+          },
+          series: [
+            {
+              type: "scatter3D",
+              coordinateSystem: "globe",
+              itemStyle: {
+                color: "#4ECAF1", //球上面点颜色 4ECAF1
+                opacity: 1,
+              },
+              data: bb,
+            },
+          ],
+        };
+        self.myChart.clear();
+        self.myChart.setOption(option, true);
+      }
+      getGeoJsonData();
+    },
   },
 };
 </script>

File diff ditekan karena terlalu besar
+ 1 - 0
src/views/dashboard/dataJson/map2.json


File diff ditekan karena terlalu besar
+ 1 - 0
src/views/dashboard/dataJson/mapData.json


+ 1 - 1
src/views/jiaoyang/jyMaterialUpload.vue

@@ -332,7 +332,7 @@ import {
   insertKeyWord,
 } from "@/api/jiaoyang/promoter";
 import uploadFile from "./components/uploadFile.vue";
-import BMF from "browser-md5-file";
+// import BMF from "browser-md5-file";
 export default {
   name: "List",
   components: {

+ 1 - 1
src/views/staging.vue

@@ -69,7 +69,7 @@
           size="small"
           type="primary"
           plain
-          style="float: right"
+          style="float: right;margin: 0 10px"
           @click="toDataBigScreen"
           >数据看板</el-button
         >