11

src/lycomponents/iHeader/index.vue

@@ -17,7 +17,7 @@
                     <a-menu-item key="eventInsight">
                         <span>事件洞察</span>
                     </a-menu-item>
-                    <a-menu-item key="b">
+                    <a-menu-item key="marketingAnalysis">
                         <span>营销分析</span>
                     </a-menu-item>
                 </a-menu>
@@ -188,6 +188,7 @@ export default {
         margin-left: 22px;
         justify-content: flex-start;
         align-items: center;
+        flex-shrink: 0;
         .iH-left-img1 {
             width: 24px;
             height: 24px;
@@ -218,6 +219,7 @@ export default {
         align-items: center;
         top: 0px;
         right: 19px;
+        flex-shrink: 0;
         .s1 {
             display: inline-block;
             font-size: 16px;

src/permission.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 09:26:42
- * @LastEditTime: 2021-10-25 09:09:47
+ * @LastEditTime: 2021-10-25 10:48:19
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/permission.js

src/router/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 09:26:29
- * @LastEditTime: 2021-10-19 16:03:49
+ * @LastEditTime: 2021-10-25 10:59:54
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/router/index.js
@@ -29,6 +29,8 @@ import EventInsight from "@/views/EventInsight"
 import EventComparison from "@/views/EventComparison"
 import Login from "@/views/Login"
 import EventDEC from "@/views/EventDEC"
+import MarketingAnalysis from "@/views/MarketingAnalysis"
+
 const router = [
     {
         path: '/login',
@@ -113,6 +115,12 @@ const router = [
                 desc: "事件详情",
                 component: EventDEC
             },
+            {
+                path: '/marketingAnalysis',
+                name: "marketingAnalysis",
+                desc: "营销分析",
+                component: MarketingAnalysis
+            },
         ]
     },
    

src/views/MarketingAnalysis/brandSalesRankingTOP10Ranking/index.vue

@@ -0,0 +1,42 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-25 11:34:57
+ * @LastEditTime: 2021-10-25 11:43:26
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/MarketingAnalysis/brandSalesRankingTOP10Ranking/index.vue
+-->
+<template>
+    <div class="bsrt-outter">
+        <v-label-div title="品牌销量榜TOP10排行">
+        </v-label-div>
+        <div class="bsrt-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "brandSalesRankingTOP10Ranking",
+    data() {
+        return {
+            opt: createSingleColumnar(['微博','汽车之家', '易车', '搜狐汽车', '懂车帝', '今日头条', '抖音', '微信', '一点资讯', '快手'], [6300, 6000, 5800, 5000, 4800, 4000, 3800, 3000, 2800, 2000], '#53bd90')
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.bsrt-outter {
+    width: 936px;
+    height: 480px;
+    border: 2px solid #0F2A4D;
+    margin-left: 16px;
+    .bsrt-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/MarketingAnalysis/brandVolumeTOP10/index.vue

@@ -0,0 +1,47 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-25 11:03:30
+ * @LastEditTime: 2021-10-25 11:13:21
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/MarketingAnalysis/brandVolumeTOP10/index.vue
+-->
+<template>
+    <div class="bvt-outter">
+        <v-label-div title="品牌声量TOP10">
+            <v-btn @click="goPath">营销对比</v-btn>
+        </v-label-div>
+        <div class="bvt-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "brandVolumeTOP10",
+    data() {
+        return {
+           opt: createOpt()
+        }
+    },
+    methods: {
+        goPath() {
+
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.bvt-outter {
+    width: 100%;
+    height: 472px;
+    border: 2px solid #0F2A4D;
+    .bvt-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/MarketingAnalysis/brandVolumeTOP10/opt.js

@@ -0,0 +1,127 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-10-25 11:18:51
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
+ */
+export default function createOpt() {
+    return {
+        grid: {
+            left: 16,
+            right: 16,
+            bottom: 16,
+            top: 56,
+            containLabel: true
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        legend: {
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            y: 10,
+            x: 16
+        },
+        xAxis: {
+            type: 'category',
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: ['长安', '大众', '宝马', '奔驰', '丰田', '吉利', '奥迪', '日产', '哈弗', '雪弗兰']
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+              name: '新闻',
+              type: 'bar',
+              stack: 'total',
+              barWidth: 24,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [320, 302, 301, 334, 390, 400, 410,420,405,421]
+            },
+            {
+              name: '论坛',
+              type: 'bar',
+              stack: 'total',
+              barWidth: 24,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [120, 132, 101, 134, 90, 400, 410,420,405,421]
+            },
+            {
+              name: '微信',
+              type: 'bar',
+              stack: 'total',
+              barWidth: 24,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [220, 182, 191, 234, 290, 400, 410,420,405,421]
+            },
+            {
+              name: '微博',
+              type: 'bar',
+              stack: 'total',
+              barWidth: 24,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [150, 212, 201, 154, 190, 400, 410,420,405,421]
+            },
+            {
+              name: 'APP',
+              type: 'bar',
+              stack: 'total',
+              barWidth: 24,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [820, 832, 901, 934, 1290, 400, 410,420,405,421]
+            },
+            {
+                name: '其他',
+                type: 'bar',
+                stack: 'total',
+                barWidth: 24,
+                emphasis: {
+                  focus: 'series'
+                },
+                data: [820, 832, 901, 934, 1290, 400, 410,420,405,421]
+              }
+          ]
+    }
+
+}

src/views/MarketingAnalysis/index.vue

@@ -1,23 +1,44 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-25 09:05:39
- * @LastEditTime: 2021-10-25 09:06:46
+ * @LastEditTime: 2021-10-25 11:37:31
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/MarketingAnalysis/index.vue
 -->
 <template>
     <div class="d-container">
-
+        <div class="ma-outter">
+            <brandVolumeTOP10></brandVolumeTOP10>
+            <div class="ma-d1">
+                <keyActiveMediaTOP10Ranking></keyActiveMediaTOP10Ranking>
+                <brandSalesRankingTOP10Ranking></brandSalesRankingTOP10Ranking>
+            </div>
+        </div>  
     </div>
 </template>
 
 <script>
+import brandVolumeTOP10 from "./brandVolumeTOP10"
+import keyActiveMediaTOP10Ranking from "./keyActiveMediaTOP10Ranking"
+import brandSalesRankingTOP10Ranking from "./brandSalesRankingTOP10Ranking"
 export default {
-    name: "MarketingAnalysis"
+    name: "MarketingAnalysis",
+    components: {
+        brandVolumeTOP10, // 品牌声量TOP10
+        keyActiveMediaTOP10Ranking, // 重点活跃媒体TOP10排行
+        brandSalesRankingTOP10Ranking // 品牌销量榜TOP10排行
+    }
 }
 </script>
 
 <style lang="less" scoped>
-
+.ma-outter {
+    padding: 0 16px 16px 16px;
+    .ma-d1 {
+        display: flex;
+        justify-content: flex-start;
+        margin-top: 16px;
+    }
+}
 </style>

src/views/MarketingAnalysis/keyActiveMediaTOP10Ranking/index.vue

@@ -0,0 +1,42 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-25 11:21:38
+ * @LastEditTime: 2021-10-25 11:33:16
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/MarketingAnalysis/keyActiveMediaTOP10Ranking/index.vue
+-->
+
+<template>
+    <div class="kamt-outter">
+        <v-label-div title="重点活跃媒体TOP10排行">
+        </v-label-div>
+        <div class="kamt-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "keyActiveMediaTOP10Ranking",
+    data() {
+        return {
+           opt: createSingleColumnar(['微博','汽车之家', '易车', '搜狐汽车', '懂车帝', '今日头条', '抖音', '微信', '一点资讯', '快手'], [6300, 6000, 5800, 5000, 4800, 4000, 3800, 3000, 2800, 2000])
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.kamt-outter {
+    width: 936px;
+    height: 480px;
+    border: 2px solid #0F2A4D;
+    .kamt-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/Myself/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 16:57:27
- * @LastEditTime: 2021-10-25 09:37:12
+ * @LastEditTime: 2021-10-25 10:45:46
  * @LastEditors: Please set LastEditors
  * @Description: 个人中心
  * @FilePath: /data-show/src/views/Myself/index.vue
@@ -45,7 +45,7 @@
             <div class="ms-d2">
                 <v-label-div title="数据导出管理"></v-label-div>
                 <div class="ms-d2-inner">
-                    <v-table :columns="columns" :data="tbData" row-key="id">
+                    <v-table :columns="columns" :data="tbData" :loading="tableLoading" row-key="id" :pagination="pagination" @change="handlerPage">
                         <span slot="action" slot-scope="text, record">
                             <a :href="record.FilePath">下载</a>
                         </span>
@@ -84,7 +84,7 @@
 <script>
 import phoneForm from "./phoneForm";
 import modifyForm from "./modifyForm";
-import {getMyFileInfoExcel} from "@/api/mySelf"
+import { getMyFileInfoExcel } from "@/api/mySelf";
 export default {
     name: "Myself",
     components: {
@@ -101,13 +101,19 @@ export default {
             accout: {
                 sPhone: "",
                 iCode: "",
-                token: ""
+                token: "",
             },
             nextStr: "下一步",
             nextType: 1,
             form: {
-              iPageIndex: 1,
+                iPageIndex: 1,
-              iPageSize: 20
+                iPageSize: 20,
+            },
+            tableLoading: false,
+            pagination: {
+                total: 0,
+                current: 1,
+                pageSize: 20,
             },
             columns: [
                 {
@@ -132,13 +138,11 @@ export default {
                     scopedSlots: { customRender: "action" },
                 },
             ],
-            tbData: [
+            tbData: [],
-                
-            ],
         };
     },
     created() {
-      this.getTable()
+        this.getTable();
     },
     methods: {
         handlerPwd() {
@@ -154,7 +158,7 @@ export default {
             } else if (this.nextType === 2) {
                 this.$refs.modifyForm.onSuccess();
             } else {
-                this.$router.push('/login')
+                this.$router.push("/login");
             }
         },
         // 下一步
@@ -172,22 +176,30 @@ export default {
         },
         // 获取表格数据
         getTable() {
-          this.form.token = this.getToken;
+          this.tableLoading = true;
-          getMyFileInfoExcel(this.form).then(res => {
+            this.form.token = this.getToken;
-            let table = res.data.Table;
+            getMyFileInfoExcel(this.form).then((res) => {
-            table.forEach(ele => {
+                let table = res.data.Table;
-              if(ele.Status === 0) {
+                this.pagination.total = res.totalNum;
-                ele.statuStr = '未完成'
+                table.forEach((ele) => {
-              } else if(ele.Status === 1) {
+                    if (ele.Status === 0) {
-                ele.statuStr = '正在生成'
+                        ele.statuStr = "未完成";
-              } else {
+                    } else if (ele.Status === 1) {
-                ele.statuStr = '已完成'
+                        ele.statuStr = "正在生成";
-              }  
+                    } else {
-            })
+                        ele.statuStr = "已完成";
-            this.tbData = table;
+                    }
-            
+                });
-          })
+                this.tbData = table;
-        }
+                this.tableLoading = false;
+            });
+        },
+        handlerPage(p) {
+            let iPageIndex = p.current;
+            this.form.iPageIndex = iPageIndex;
+            this.pagination.current = iPageIndex;
+            this.getData();
+        },
     },
 };
 </script>
@@ -263,20 +275,17 @@ export default {
     cursor: pointer;
 }
 .stepEst {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  justify-content: center;
+    justify-content: center;
-  align-items: center;
+    align-items: center;
-  .m1 {
+    .m1 {
-   width: 80px; 
+        width: 80px;
-   height: 80px;
+        height: 80px;
-  }
+    }
-  .s1 {
+    .s1 {
-    display: block;
+        display: block;
-    margin-top: 12px;
+        margin-top: 12px;
-  }
+    }
-}
-/deep/ .ant-table-body {
-    height: 600px;
 }
 </style>