cxw-010203

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/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>