From 2458fb9d85c032b187428ebc045792b8c609b988 Mon Sep 17 00:00:00 2001
From: "lily.zhang" <daylily.zhang@akuhome.com>
Date: Tue, 26 Oct 2021 10:47:28 +0800
Subject: [PATCH] cxw-010203

---
 src/api/MarketingAnalysis/index.js            |   8 +
 src/lycomponents/iHeader/index.vue            |   5 +
 src/lycomponents/iHeaderMa/index.vue          | 248 ++++++++++++++++++
 src/lycomponents/iLayout/index.vue            |   8 +-
 src/lycomponents/index.js                     |   6 +-
 src/mixins/index.js                           |   6 +-
 src/store/actions.js                          |  10 +-
 src/store/getters.js                          |   8 +-
 src/store/mutations.js                        |  12 +-
 src/store/state.js                            |   6 +-
 src/utils/gol/singleColumnar.js               |   5 +-
 .../brandSalesRankingTOP10Ranking/index.vue   |  58 ++--
 .../brandVolumeTOP10/index.vue                |  62 +++--
 .../MarketingAnalysis/brandVolumeTOP10/opt.js |  98 +++----
 .../keyActiveMediaTOP10Ranking/index.vue      |  58 ++--
 15 files changed, 443 insertions(+), 155 deletions(-)
 create mode 100644 src/lycomponents/iHeaderMa/index.vue

diff --git a/src/api/MarketingAnalysis/index.js b/src/api/MarketingAnalysis/index.js
index 09351d2..4c65dbf 100644
--- a/src/api/MarketingAnalysis/index.js
+++ b/src/api/MarketingAnalysis/index.js
@@ -1,3 +1,11 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-26 09:12:35
+ * @LastEditTime: 2021-10-26 09:18:40
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/api/MarketingAnalysis/index.js
+ */
 import httpService from "@/request"
 // 品牌声量TOP20排行
 export function getBrandSourceType0528(params) {
diff --git a/src/lycomponents/iHeader/index.vue b/src/lycomponents/iHeader/index.vue
index ce5bac5..5e72891 100644
--- a/src/lycomponents/iHeader/index.vue
+++ b/src/lycomponents/iHeader/index.vue
@@ -141,6 +141,11 @@ export default {
         },
         // 菜单
         handlerType(obj) {
+            if(obj.key === 'marketingAnalysis') {
+                this.setHeaderType(2)
+            } else {
+                 this.setHeaderType(1)
+            }
           this.$router.push({path: `/${obj.key}`})
         },
         // 获取时间的选项
diff --git a/src/lycomponents/iHeaderMa/index.vue b/src/lycomponents/iHeaderMa/index.vue
new file mode 100644
index 0000000..7eb4096
--- /dev/null
+++ b/src/lycomponents/iHeaderMa/index.vue
@@ -0,0 +1,248 @@
+
+<template>
+    <div class="iH-outter">
+        <div class="iH-left">
+            <a-dropdown placement="bottomLeft">
+                <img class="iH-left-img1" src="../../assets/images/Index/ic_cd.png" />
+                <a-menu slot="overlay" @click="handlerType">
+                    <a-menu-item key="index">
+                        <span>行业洞察</span>
+                    </a-menu-item>
+                    <a-menu-item key="brandInsight">
+                        <span>品牌洞察</span>
+                    </a-menu-item>
+                    <a-menu-item key="modelInsight">
+                        <span>车型洞察</span>
+                    </a-menu-item>
+                    <a-menu-item key="eventInsight">
+                        <span>事件洞察</span>
+                    </a-menu-item>
+                    <a-menu-item key="marketingAnalysis">
+                        <span>营销分析</span>
+                    </a-menu-item>
+                </a-menu>
+            </a-dropdown>
+            <span class="iH-left-s1">菜单</span>
+
+            <a-select :default-value="1" :size="$vuiSize" style="width: 120px; margin-left: 40px; margin-right: 8px" v-model="selVal" @change="handlerSelect">
+                <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
+                    {{ item.key }}
+                </a-select-option>
+            </a-select>
+           
+        </div>
+        <div class="iH-center">
+            <img src="../../assets/images/Index/img_toubuyi.png" width="100%" height="100%" />
+        </div>
+        <div class="iH-right">
+            <span class="s1">{{ clock }}</span>
+            <span class="s2">{{ sClock }}</span>
+            <span class="s2">{{ week }}</span>
+            <img class="m1" src="../../assets/images/Index/ic_ry.png" width="24px" height="24px" />
+            <span class="s3">{{getUser.UserName}}</span>
+            <a-dropdown placement="bottomRight">
+                <a class="ant-dropdown-link">
+                    <a-icon type="down" />
+                </a>
+                <a-menu slot="overlay">
+                    <a-menu-item @click="handlerMyself">
+                        <span>个人中心</span>
+                    </a-menu-item>
+                    <a-menu-item @click="layout">
+                        <span>退出</span>
+                    </a-menu-item>
+                </a-menu>
+            </a-dropdown>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getCheZhuTime0528} from "@/api/home"
+export default {
+    name: "iHeaderMa",
+    inject: ['reload'],
+    data() {
+        return {
+            selVal: '',
+            clock: "",
+            sClock: "",
+            week: "",
+            form: {
+                sTimeType: 4,
+                sStartTime: "",
+                sEndTime: ""
+            },
+            selDatas: [
+               
+            ],
+        };
+    },
+    created() {
+        this.getSelect()
+    },
+    mounted() {
+       
+    },
+   
+    methods: {
+        // 获取选择时间的数据
+        getSelect() {
+          getCheZhuTime0528().then(res => {
+            this.selDatas = res.data
+            this.selVal = this.selDatas[0].key;
+            this.form.sStartTime = this.selDatas[0].starttime;
+            this.form.sEndTime = this.selDatas[0].endtime;
+            this.setCtime(this.form);
+          })
+        },
+        // 选择时间
+        handlerSelect(key) {
+          let n = this.selDatas.findIndex(ele => {
+            return ele.key === key
+          })
+          let obj = this.selDatas[n];
+          this.form.sStartTime = obj.starttime;
+          this.form.sEndTime = obj.endtime;
+           this.setCtime(this.form);
+          this.reload();
+        },
+        // 获取当前日期时间
+        getDatetime() {
+            let now = new Date();
+            let weeks = new Array(
+                "星期日",
+                "星期一",
+                "星期二",
+                "星期三",
+                "星期四",
+                "星期五",
+                "星期六"
+            );
+            let year = now.getFullYear();
+            let month = now.getMonth() + 1;
+            let day = now.getDate();
+            let hh = now.getHours();
+            let mm = now.getMinutes();
+            let ss = now.getSeconds();
+            let clock = year + "-";
+            let sClock = "";
+            let dayw = now.getDay();
+            let week = weeks[dayw];
+            if (month < 10) clock += "0";
+            clock += month + "-";
+            if (day < 10) clock += "0";
+            clock += day + " ";
+            if (hh < 10) sClock += "0";
+            sClock += hh + ":";
+            if (mm < 10) sClock += "0";
+            sClock += mm + ":";
+            if (ss < 10) sClock += "0";
+            sClock += ss;
+            this.clock = clock;
+            this.sClock = sClock;
+            this.week = week;
+            return { clock: clock, sClock: sClock, week: week };
+        },
+        // 点击个人中心
+        handlerMyself() {
+            this.$router.push("/myself");
+        },
+        // 菜单
+        handlerType(obj) {
+            if(obj.key === 'marketingAnalysis') {
+                this.setHeaderType(2)
+            } else {
+                 this.setHeaderType(1)
+            }
+          this.$router.push({path: `/${obj.key}`})
+        },
+        // 退出的方法
+        layout() {
+            this.setToken("");
+            this.setUser({});
+            this.$router.replace("/login");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.iH-outter {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    height: 90px;
+    background: url("../../assets/images/Index/img_toubuer.png");
+    .iH-left {
+        display: flex;
+        width: 572px;
+        height: 60px;
+        margin-left: 22px;
+        justify-content: flex-start;
+        align-items: center;
+        flex-shrink: 0;
+        .iH-left-img1 {
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+        }
+        .iH-left-s1 {
+            display: block;
+            font-size: 14px;
+            font-weight: bold;
+            color: #ffffff;
+            margin-left: 8px;
+        }
+    }
+    .iH-center {
+        position: absolute;
+        width: 606px;
+        height: 80px;
+        top: 0px;
+        left: 50%;
+        transform: translate(-50%, 0);
+    }
+    .iH-right {
+        position: absolute;
+        display: flex;
+        width: 436px;
+        height: 60px;
+        justify-content: flex-start;
+        align-items: center;
+        top: 0px;
+        right: 19px;
+        flex-shrink: 0;
+        .s1 {
+            display: inline-block;
+            font-size: 16px;
+            color: #ffffff;
+        }
+        .s2 {
+            display: inline-block;
+            font-size: 16px;
+            color: #ffffff;
+            margin-left: 24px;
+        }
+        .s3 {
+            display: inline-block;
+            font-size: 14px;
+            color: #ffffff;
+            margin-left: 8px;
+        }
+        .m1 {
+            display: inline-block;
+            margin-left: 80px;
+            margin-right: 8px;
+        }
+    }
+}
+.ant-dropdown-link {
+    color: #63aecc;
+    margin-left: 11px;
+    /deep/ .anticon svg {
+        font-size: 20px !important;
+        margin-top: 5px;
+    }
+}
+</style>
diff --git a/src/lycomponents/iLayout/index.vue b/src/lycomponents/iLayout/index.vue
index f4a5033..51f6f1e 100644
--- a/src/lycomponents/iLayout/index.vue
+++ b/src/lycomponents/iLayout/index.vue
@@ -1,14 +1,15 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-13 14:25:26
- * @LastEditTime: 2021-10-23 12:57:20
+ * @LastEditTime: 2021-10-26 10:28:52
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/lycomponents/iLayout/index.vue
 -->
 <template>
     <div class="layout-container">
-        <iHeader></iHeader>
+        <iHeader v-if="getHeaderType == 1"></iHeader>
+        <iHeaderMa v-if="getHeaderType == 2"></iHeaderMa>
         <div class="layout-body">
             <vue-scroll>
                 <router-view v-if="isRouterAlive"></router-view>
@@ -29,6 +30,9 @@ export default {
         return {
             isRouterAlive: true
         }
+    },
+    created() {
+       
     },
     methods: {
         reload() {
diff --git a/src/lycomponents/index.js b/src/lycomponents/index.js
index 9bcd8fd..29a5fa4 100644
--- a/src/lycomponents/index.js
+++ b/src/lycomponents/index.js
@@ -1,19 +1,21 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 10:28:00
- * @LastEditTime: 2021-10-15 10:46:37
+ * @LastEditTime: 2021-10-26 10:06:13
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/components/index.js
  */
 import iHeader from "@/lycomponents/iHeader";
 import iSwitchBrand from "@/lycomponents/iSwitchBrand";
+import iHeaderMa from "@/lycomponents/iHeaderMa"
 export default {
     install(Vue) {
         Vue.mixin({
             components: {
                 iHeader,
-                iSwitchBrand
+                iSwitchBrand,
+                iHeaderMa
             }
         })
     }
diff --git a/src/mixins/index.js b/src/mixins/index.js
index 78a1bba..cfc1b51 100644
--- a/src/mixins/index.js
+++ b/src/mixins/index.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:56:13
- * @LastEditTime: 2021-10-22 10:46:21
+ * @LastEditTime: 2021-10-26 10:09:33
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/mixins/index.js
@@ -15,10 +15,10 @@ export default {
                'loading': Loading
             },
             computed: {
-                ...mapGetters(['getZoom','getToken', 'getUser', 'getAccount', 'getCommTime'])
+                ...mapGetters(['getZoom','getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getHeaderType'])
             },
             methods: {
-                ...mapActions(["setZoom", 'setToken', 'setUser', 'setAccount', 'setCommTime'])
+                ...mapActions(["setZoom", 'setToken', 'setUser', 'setAccount', 'setCommTime','setCtime', 'setHeaderType'])
             }
         })
     }
diff --git a/src/store/actions.js b/src/store/actions.js
index e309314..5bf6e6f 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:36:49
- * @LastEditTime: 2021-10-20 16:50:37
+ * @LastEditTime: 2021-10-26 10:01:24
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/store/actions.js
@@ -21,6 +21,12 @@ const actions = {
     },
     setCommTime: ({commit}, log) => {
         commit('setCommTime', log)
-    }
+    },
+    setCtime: ({commit}, log) => {
+        commit('setCtime', log)
+    },
+    setHeaderType:  ({commit}, log) => {
+        commit('setHeaderType', log)
+    },
 }
 export default actions
diff --git a/src/store/getters.js b/src/store/getters.js
index 60cabcf..f7c2286 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:37:06
- * @LastEditTime: 2021-10-20 16:52:59
+ * @LastEditTime: 2021-10-26 10:04:20
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/store/getters.js
@@ -21,6 +21,12 @@ const getters = {
     },
     getCommTime(state) {
         return state.commTime
+    },
+    getCtime(state) {
+        return state.ctime
+    },
+    getHeaderType(state) {
+        return state.headerType
     }
 }
 export default getters
diff --git a/src/store/mutations.js b/src/store/mutations.js
index a24c37c..a810a4c 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:37:35
- * @LastEditTime: 2021-10-20 16:59:00
+ * @LastEditTime: 2021-10-26 10:02:55
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/store/mutations.js
@@ -29,6 +29,16 @@ const mutations = {
         state.commTime = obj;
         let str = JSON.stringify(obj);
         sessionStorage.setItem('commTime', str);
+    },
+    setCtime: (state, log) => {
+        let obj = Object.assign(state.commTime, log);
+        state.ctime = obj;
+        let str = JSON.stringify(obj);
+        sessionStorage.setItem('ctime', str);
+    },
+    setHeaderType: (state, log) => {
+        state.headerType = log;
+        sessionStorage.setItem('headerType', log);
     }
 }
 
diff --git a/src/store/state.js b/src/store/state.js
index 30185ea..82dec0c 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:37:50
- * @LastEditTime: 2021-10-23 13:56:09
+ * @LastEditTime: 2021-10-26 10:03:54
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/store/state.js
@@ -16,6 +16,8 @@ const state = {
     token: sessionStorage.getItem('token') || "",
     user: JSON.parse(sessionStorage.getItem('user')) || {},
     account: JSON.parse(localStorage.getItem('account')) || {},
-    commTime: JSON.parse(sessionStorage.getItem('commTime')) || commTime
+    commTime: JSON.parse(sessionStorage.getItem('commTime')) || commTime,
+    ctime: JSON.parse(sessionStorage.getItem('ctime')) || {},
+    headerType: sessionStorage.getItem('headerType') || 1,
 }
 export default state;
diff --git a/src/utils/gol/singleColumnar.js b/src/utils/gol/singleColumnar.js
index 0f39650..d74dc86 100644
--- a/src/utils/gol/singleColumnar.js
+++ b/src/utils/gol/singleColumnar.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 10:13:32
- * @LastEditTime: 2021-10-15 12:13:25
+ * @LastEditTime: 2021-10-26 09:30:30
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/utils/gol/index.js
@@ -37,6 +37,9 @@ export function createSingleColumnar(dx=[], ds=[], color='#3373CC') {
         },
         xAxis: {
             type: "category",
+            axisLabel :{  
+                interval:0   
+            }, 
             axisTick: {
                 show: false,
             },
diff --git a/src/views/MarketingAnalysis/brandSalesRankingTOP10Ranking/index.vue b/src/views/MarketingAnalysis/brandSalesRankingTOP10Ranking/index.vue
index 12e2e28..41659e8 100644
--- a/src/views/MarketingAnalysis/brandSalesRankingTOP10Ranking/index.vue
+++ b/src/views/MarketingAnalysis/brandSalesRankingTOP10Ranking/index.vue
@@ -1,13 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-25 11:34:57
- * @LastEditTime: 2021-10-25 11:43:26
+ * @LastEditTime: 2021-10-26 10:45:53
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/MarketingAnalysis/brandSalesRankingTOP10Ranking/index.vue
 -->
 <template>
-    <div class="bsrt-outter">
+    <div class="bsrt-outter" v-loading="load">
         <v-label-div title="品牌销量榜TOP10排行">
         </v-label-div>
         <div class="bsrt-inner">
@@ -17,41 +17,51 @@
 </template>
 
 <script>
-import {createSingleColumnar} from "@/utils/gol/singleColumnar"
-import {getCheZhuBrandMKTCount0528} from "@/api/MarketingAnalysis"
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+import { getCheZhuBrandMKTCount0528 } from "@/api/MarketingAnalysis";
 export default {
     name: "brandSalesRankingTOP10Ranking",
     data() {
         return {
-            opt: createSingleColumnar(['微博','汽车之家', '易车', '搜狐汽车', '懂车帝', '今日头条', '抖音', '微信', '一点资讯', '快手'], [6300, 6000, 5800, 5000, 4800, 4000, 3800, 3000, 2800, 2000], '#53bd90')
-        }
+            load: false,
+            form: {
+                token: ""
+            },
+            opt: {}
+        };
     },
-     created() {
-    this.getData()
-  },
-   methods: {
-       // 切换选择后台数据
-    handlerChange(n) {
-      this.form.sQueryType = n + 1;
-      this.getData()
+    created() {
+        this.form.token = this.getToken;
+        this.getData();
     },
-    // 获取数据
-    getData() {
-      let obj = Object.assign({}, this.getCommTime, this.form);
-      getCheZhuBrandMKTCount0528(obj).then(res => {
-        let data = res.data;
-        this.pdata = data;
-      })
+    methods: {
+        // 获取数据
+        getData() {
+            this.load = true;
+            let obj = Object.assign({}, this.getCTime, this.form);
+            getCheZhuBrandMKTCount0528(obj).then((res) => {
+                let data = res.data;
+                let dx = [];
+                let ds = [];
+                data.forEach(ele => {
+                    let key = ele.key;
+                    let value = ele.value;
+                    dx.push(key);
+                    ds.push(value)
+                })
+                this.opt = createSingleColumnar(dx, ds, '#53bd90')
+                this.load = false;
+            });
+        },
     },
-   }
-}
+};
 </script>
 
 <style lang="less" scoped>
 .bsrt-outter {
     width: 936px;
     height: 480px;
-    border: 2px solid #0F2A4D;
+    border: 2px solid #0f2a4d;
     margin-left: 16px;
     .bsrt-inner {
         width: 100%;
diff --git a/src/views/MarketingAnalysis/brandVolumeTOP10/index.vue b/src/views/MarketingAnalysis/brandVolumeTOP10/index.vue
index 64e1abd..486faa8 100644
--- a/src/views/MarketingAnalysis/brandVolumeTOP10/index.vue
+++ b/src/views/MarketingAnalysis/brandVolumeTOP10/index.vue
@@ -1,61 +1,71 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-25 11:03:30
- * @LastEditTime: 2021-10-25 11:13:21
+ * @LastEditTime: 2021-10-26 10:45:27
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/MarketingAnalysis/brandVolumeTOP10/index.vue
 -->
 <template>
-    <div class="bvt-outter" >
+    <div class="bvt-outter" v-loading="load">
         <v-label-div title="品牌声量TOP10">
             <v-btn @click="goPath">营销对比</v-btn>
         </v-label-div>
         <div class="bvt-inner">
             <v-echarts :opt="opt"></v-echarts>
-             <v-pagination :data="pdata" :style="{position: 'absolute', right: '2px', bottom: '2px'}" @change="handlerData"></v-pagination>
         </div>
     </div>
 </template>
 
 <script>
-import createOpt from "./opt"
-import {getBrandSourceType0528} from "@/api/MarketingAnalysis"
+import createOpt from "./opt";
+import { getBrandSourceType0528 } from "@/api/MarketingAnalysis";
 export default {
     name: "brandVolumeTOP10",
     data() {
         return {
-           opt: createOpt()
-        }
+            load: false,
+            form: {
+                token: ""
+            },
+            opt: {}
+        };
     },
-      created() {
-    this.getData()
-  },
-    methods: {
-         // 切换选择后台数据
-    handlerChange(n) {
-      this.form.sQueryType = n + 1;
-      this.getData()
+    created() {
+        this.form.token = this.getToken;
+        this.getData();
     },
+    methods: {
+        // 获取数据
+        getData() {
+            let obj = Object.assign({}, this.getCTime, this.form);
+            this.load = true;
+            getBrandSourceType0528(obj).then((res) => {
+                let data = res.data || [];
+                let dx = [];
+                let ds = [];
+                data.forEach(ele => {
+                    let key = ele.key;
+                    let value = ele.value;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds)
+                this.load = false;
+            });
+        },
+        goPath() {
 
-    // 获取数据
-    getData() {
-      let obj = Object.assign({}, this.getCommTime, this.form);
-      getBrandSourceType0528(obj).then(res => {
-        let data = res.data;
-        this.pdata = data;
-      })
+        },
     },
-    
-    }
-}
+};
 </script>
 
 <style lang="less" scoped>
 .bvt-outter {
     width: 100%;
     height: 472px;
-    border: 2px solid #0F2A4D;
+    border: 2px solid #0f2a4d;
     .bvt-inner {
         width: 100%;
         height: calc(100% - 48px);
diff --git a/src/views/MarketingAnalysis/brandVolumeTOP10/opt.js b/src/views/MarketingAnalysis/brandVolumeTOP10/opt.js
index bb0acbb..626ab6e 100644
--- a/src/views/MarketingAnalysis/brandVolumeTOP10/opt.js
+++ b/src/views/MarketingAnalysis/brandVolumeTOP10/opt.js
@@ -1,12 +1,41 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 11:01:19
- * @LastEditTime: 2021-10-25 11:18:51
+ * @LastEditTime: 2021-10-26 10:40:34
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
  */
-export default function createOpt() {
+function createData(ds = []) {
+  let arr = [];
+  for (let i = 0; i < ds.length; i++) {
+    let arr1 = ds[i];
+    for (let j = 0; j < arr1.length; j++) {
+      let n = arr.findIndex(ele => {
+        return ele.name === arr1[j].key;
+      })
+      if(n === -1) {
+        let obj =
+        {
+          name: arr1[j].key,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 24,
+          emphasis: {
+            focus: 'series'
+          },
+          data: [arr1[j].value]
+        }
+        arr.push(obj)
+      } else {
+        arr[n].data.push(arr1[j].value)
+      }
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx=[], ds=[]) {
+  const data = createData(ds);
     return {
         grid: {
             left: 16,
@@ -43,7 +72,7 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
-            data: ['长安', '大众', '宝马', '奔驰', '丰田', '吉利', '奥迪', '日产', '哈弗', '雪弗兰']
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -60,68 +89,7 @@ export default function createOpt() {
                 },
             },
         },
-        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]
-              }
-          ]
+        series: data
     }
 
 }
\ No newline at end of file
diff --git a/src/views/MarketingAnalysis/keyActiveMediaTOP10Ranking/index.vue b/src/views/MarketingAnalysis/keyActiveMediaTOP10Ranking/index.vue
index 9d61961..6a972c9 100644
--- a/src/views/MarketingAnalysis/keyActiveMediaTOP10Ranking/index.vue
+++ b/src/views/MarketingAnalysis/keyActiveMediaTOP10Ranking/index.vue
@@ -1,14 +1,14 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-25 11:21:38
- * @LastEditTime: 2021-10-25 11:33:16
+ * @LastEditTime: 2021-10-26 10:29:22
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/MarketingAnalysis/keyActiveMediaTOP10Ranking/index.vue
 -->
 
 <template>
-    <div class="kamt-outter">
+    <div class="kamt-outter" v-loading="load">
         <v-label-div title="重点活跃媒体TOP10排行">
         </v-label-div>
         <div class="kamt-inner">
@@ -18,43 +18,49 @@
 </template>
 
 <script>
-import {createSingleColumnar} from "@/utils/gol/singleColumnar"
-import {getWebsite} from "@/api/MarketingAnalysis"
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+import { getWebsite } from "@/api/MarketingAnalysis";
 export default {
     name: "keyActiveMediaTOP10Ranking",
     data() {
         return {
-           opt: createSingleColumnar(['微博','汽车之家', '易车', '搜狐汽车', '懂车帝', '今日头条', '抖音', '微信', '一点资讯', '快手'], [6300, 6000, 5800, 5000, 4800, 4000, 3800, 3000, 2800, 2000])
-        }
+            load: false,
+            form: {
+                token: ""
+            },
+            opt: {},
+        };
     },
-     created() {
-    this.getData()
-  },
-   methods: {
-       // 切换选择后台数据
-    handlerChange(n) {
-      this.form.sQueryType = n + 1;
-      this.getData()
+    created() {
+        this.form.token = this.getToken;
+        this.getData();
     },
-    // 获取数据
-    getData() {
-      let obj = Object.assign({}, this.getCommTime, this.form);
-      getWebsite(obj).then(res => {
-        let data = res.data;
-        this.pdata = data;
-      })
+    methods: {
+        // 获取数据
+        getData() {
+            this.load = true;
+            let obj = Object.assign({}, this.getCTime, this.form);
+            getWebsite(obj).then((res) => {
+                let data = res.data || [];
+                let dx = [];
+                let ds = [];
+                for(let key in data) {
+                    dx.push(key);
+                    ds.push(data[key]);
+                }
+                this.opt = createSingleColumnar(dx, ds)
+               this.load = false;
+            });
+        },
     },
-
-   }
-
-}
+};
 </script>
 
 <style lang="less" scoped>
 .kamt-outter {
     width: 936px;
     height: 480px;
-    border: 2px solid #0F2A4D;
+    border: 2px solid #0f2a4d;
     .kamt-inner {
         width: 100%;
         height: calc(100% - 48px);