Merge branch 'dev' of https://git.oa00.com/SWS/carInsightSystem into dev

public/index.html

@@ -12,6 +12,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="referrer" content="no-referrer">
     <link rel="icon" href="<%= BASE_URL %>sws_32.ico">
     <title>硕为思汽车智能洞察系统</title>
   </head>

src/App.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 08:41:57
- * @LastEditTime: 2021-11-02 14:10:14
+ * @LastEditTime: 2021-11-05 10:27:37
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/App.vue

src/api/WeiboDetails/index.js

@@ -47,6 +47,19 @@ export function getDirectWeiBo0528(params) {
     })
 }
 
+//微博内容类型
+export function getWtypeWeiBo0528(params) {
+    let obj =  Object.assign({action: 'getWtypeWeiBo0528', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
 //微博人物画像-男女比例-认证与非认证
 export function getSexMergeWeiBo(params) {
     let obj =  Object.assign({action: 'getSexMergeWeiBo', sType: 'BrandWeiBo'}, params)
@@ -72,3 +85,93 @@ export function getRegionWeiBo(params) {
         }
     })
 }
+
+//正面词云
+export function getPositive(params) {
+    let obj =  Object.assign({action: 'getPositive', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+//负面词云
+export function getNegative(params) {
+    let obj =  Object.assign({action: 'getNegative', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+//正面观点KOL
+export function getCoreDiffuseWeiBo0528(params) {
+    let obj =  Object.assign({action: 'getCoreDiffuseWeiBo0528', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+//调性分布
+export function getBoauthenAffectionsWeiBo0528(params) {
+    let obj =  Object.assign({action: 'getBoauthenAffectionsWeiBo0528', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+//车型热度-热门车型
+export function getCartypeWeiBo0528(params) {
+    let obj =  Object.assign({action: 'getCartypeWeiBo0528', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+//车型热度-热赞/热议/热转车型
+export function getTopCarseriesObj(params) {
+    let obj =  Object.assign({action: 'getTopCarseriesObj', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+//微博传播裂变
+export function getDiffuseZhuTi(params) {
+    let obj =  Object.assign({action: 'getDiffuseZhuTi', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/api/comm/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-20 16:36:08
- * @LastEditTime: 2021-10-28 17:12:56
+ * @LastEditTime: 2021-11-05 15:53:08
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/api/comm/index.js
@@ -118,3 +118,16 @@ export function getExcel(params) {
         }
     })
 }
+
+// 获取推荐车型的接口
+export function getRecommendSeries(params) {
+    let obj =  Object.assign({action: 'getRecommendSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/components/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 10:28:00
- * @LastEditTime: 2021-10-21 13:21:05
+ * @LastEditTime: 2021-11-04 18:31:15
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/components/index.js
@@ -16,6 +16,7 @@ import vLabelCtx from "@/components/v-label-ctx"
 import vPagination from "@/components/v-pagination"
 import vRanking from "@/components/v-ranking";
 import vEcharsMap from "@/components/v-echars-map"
+import vPercent from "@/components/v-percent"
 export default {
     install(Vue) {
         Vue.mixin({
@@ -29,7 +30,8 @@ export default {
                 vLabelCtx,
                 vPagination,
                 vRanking,
-                vEcharsMap
+                vEcharsMap,
+                vPercent
             }
         })
     }

src/components/v-cutscene-waiting/index.vue

@@ -0,0 +1,30 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-08 09:46:59
+ * @LastEditTime: 2021-11-08 09:51:57
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-cutscene-waiting/index.vue
+-->
+<template>
+    <div class="cw-outter">
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: "v-cutscene-waiting"
+}
+</script>
+
+<style lang="less" scoped>
+.cw-outter {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    left: 0px;
+    top: 0px;
+    background: rgba(0,11, 26, 0.7);
+}
+</style>

src/components/v-percent/index.vue

@@ -0,0 +1,193 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-04 18:13:45
+ * @LastEditTime: 2021-11-05 09:56:25
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-percent/index.vue
+-->
+<template>
+    <div class="v-p-outter">
+        <span class="v-p-item" v-for="(item,index) in colorArr" :key="index" :style="{background: showColor[index] || '#051a33' }"></span>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "v-percent",
+    props: {
+        color: {
+            type: String,
+            default: "#3373CC",
+        },
+        num: {
+            type: Number,
+            default: 10,
+        },
+        percentage: {
+            type: Number,
+            default: 1,
+        },
+        reverse: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        prarmObj() {
+            return {
+                color: this.color,
+                num: this.num,
+                percentage: this.percentage,
+                reverse: this.reverse,
+            };
+        },
+    },
+    watch: {
+        prarmObj: {
+            handler() {
+                let a = []
+                if (this.reverse) {
+                   a  = this.gradientColor(
+                        "#05182e",
+                         this.color,
+                        this.num
+                    );
+                } else {
+                    a = this.gradientColor(
+                        this.color,
+                        "#05182e",
+                        this.num
+                    );
+                }
+                this.colorArr = a
+                let n = Math.floor(this.percentage * this.colorArr.length);
+                let cArr = [];
+                for (let i = 0; i < this.num; i++) {
+                    let ele = "#051a33";
+                    if (i >=this.num - n && !this.reverse) {
+                        ele = this.colorArr[i];
+                    } 
+                    if(this.reverse && i < n) {
+                        ele = this.colorArr[i];
+                    }
+                    cArr.push(ele);
+                }
+                this.showColor = cArr;
+            },
+            immediate: true,
+        },
+    },
+    data() {
+        return {
+            colorArr: [],
+            showColor: [],
+        };
+    },
+    methods: {
+        colorRgb(sColor) {
+            let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+            let color = sColor.toLowerCase();
+            if (color && reg.test(color)) {
+                if (color.length === 4) {
+                    let sColorNew = "#";
+                    for (var i = 1; i < 4; i += 1) {
+                        sColorNew += color
+                            .slice(i, i + 1)
+                            .concat(color.slice(i, i + 1));
+                    }
+                    color = sColorNew;
+                }
+                //处理六位的颜色值
+                let sColorChange = [];
+                for (let i = 1; i < 7; i += 2) {
+                    sColorChange.push(parseInt("0x" + color.slice(i, i + 2)));
+                }
+                return sColorChange;
+            } else {
+                return color;
+            }
+        },
+        colorHex(rgb) {
+            let _this = rgb;
+            let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+            if (/^(rgb|RGB)/.test(_this)) {
+                let aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
+                let strHex = "#";
+                for (let i = 0; i < aColor.length; i++) {
+                    let hex = Number(aColor[i]).toString(16);
+                    hex = hex < 10 ? 0 + "" + hex : hex; // 保证每个rgb的值为2位
+                    if (hex === "0") {
+                        hex += hex;
+                    }
+                    strHex += hex;
+                }
+                if (strHex.length !== 7) {
+                    strHex = _this;
+                }
+                return strHex;
+            } else if (reg.test(_this)) {
+                let aNum = _this.replace(/#/, "").split("");
+                if (aNum.length === 6) {
+                    return _this;
+                } else if (aNum.length === 3) {
+                    let numHex = "#";
+                    for (let i = 0; i < aNum.length; i += 1) {
+                        numHex += aNum[i] + aNum[i];
+                    }
+                    return numHex;
+                }
+            } else {
+                return _this;
+            }
+        },
+        gradientColor(startColor, endColor, step) {
+            let startRGB = this.colorRgb(startColor); //转换为rgb数组模式
+            let startR = startRGB[0];
+            let startG = startRGB[1];
+            let startB = startRGB[2];
+
+            let endRGB = this.colorRgb(endColor);
+            let endR = endRGB[0];
+            let endG = endRGB[1];
+            let endB = endRGB[2];
+
+            let sR = (endR - startR) / step; //总差值
+            let sG = (endG - startG) / step;
+            let sB = (endB - startB) / step;
+
+            let colorArr = [];
+            for (let i = 0; i < step; i++) {
+                //计算每一步的hex值
+                let hex = this.colorHex(
+                    "rgb(" +
+                        parseInt(sR * i + startR) +
+                        "," +
+                        parseInt(sG * i + startG) +
+                        "," +
+                        parseInt(sB * i + startB) +
+                        ")"
+                );
+                colorArr.push(hex);
+            }
+            return colorArr;
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.v-p-outter {
+    width: 160px;
+    display: flex;
+    justify-content: flex-start;
+}
+.v-p-item {
+    width: 10px;
+    height: 16px;
+    display: inline-block;
+    background-color: #051a33;
+    margin-right: 6px;
+}
+</style>

src/lycomponents/iHeader/index.vue

@@ -142,11 +142,11 @@ export default {
     background-size: 100% 100%;
     .iH-left {
         display: flex;
-        height: 100%;
         width: 657px;
         margin-left: 16px;
         justify-content: flex-start;
         margin-top: 16px;
+        height: 32px;
         .iH-left-img1 {
             width: 24px;
             height: 24px;
@@ -167,7 +167,7 @@ export default {
     }
     .iH-right {
         display: flex;
-        height: 100%;
+        height: 32px;
         width: 657px;
         justify-content: flex-end;
         margin-right: 16px;

src/lycomponents/iHeaderBrand/index.vue

@@ -197,11 +197,11 @@ export default {
     background-size: 100% 100%;
     .iH-left {
         display: flex;
-        height: 100%;
         width: 657px;
         margin-left: 16px;
         justify-content: flex-start;
         margin-top: 16px;
+        height: 32px;
         .iH-left-img1 {
             width: 24px;
             height: 24px;
@@ -222,7 +222,7 @@ export default {
     }
     .iH-right {
         display: flex;
-        height: 100%;
+        height: 32px;
         width: 657px;
         justify-content: flex-end;
         margin-right: 16px;

src/lycomponents/iHeaderMa/index.vue

@@ -153,11 +153,11 @@ export default {
     background-size: 100% 100%;
     .iH-left {
         display: flex;
-        height: 100%;
         width: 657px;
         margin-left: 16px;
         justify-content: flex-start;
         margin-top: 16px;
+        height: 32px;
         .iH-left-img1 {
             width: 24px;
             height: 24px;
@@ -178,7 +178,7 @@ export default {
     }
     .iH-right {
         display: flex;
-        height: 100%;
+        height: 32px;
         width: 657px;
         justify-content: flex-end;
         margin-right: 16px;

src/lycomponents/iLayout/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-13 14:25:26
- * @LastEditTime: 2021-11-03 11:12:39
+ * @LastEditTime: 2021-11-05 10:44:00
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/lycomponents/iLayout/index.vue
@@ -12,9 +12,8 @@
         <iHeaderMa v-if="getHeaderType == 2"></iHeaderMa>
         <iHeaderBrand v-if="getHeaderType == 3"></iHeaderBrand>
         <div class="layout-body">
-            <router-view v-if="isRouterAlive && !scrollShow" @changeZoom="changeZoom"></router-view>
+            <vue-scroll>
-            <vue-scroll v-if="scrollShow && isRouterAlive">
+                <router-view v-if="isRouterAlive"></router-view>
-                <router-view></router-view>
             </vue-scroll>
         </div>
     </div>
@@ -28,23 +27,9 @@ export default {
             reload: this.reload,
         };
     },
-    watch: {
-        $route: {
-            handler: function (val) {
-                if(val.name === 'index') {
-                    this.scrollShow = false;
-                } else {
-                   this.scrollShow = true; 
-                }
-            },
-            // 深度观察监听
-            immediate: true,
-        },
-    },
     data() {
         return {
             isRouterAlive: true,
-            scrollShow: true,
             headerStyle: {}
         };
     },
@@ -74,7 +59,7 @@ export default {
 }
 .layout-body {
     width: 100%;
-    height: calc(100% - 90px);
+    height: calc(100% - 80px);
     overflow: hidden;
 }
 </style>

src/mixins/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:56:13
- * @LastEditTime: 2021-11-03 17:03:23
+ * @LastEditTime: 2021-11-08 12:03:25
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/mixins/index.js
@@ -9,6 +9,7 @@
 import { mapGetters, mapActions } from "vuex";
 import Loading from './loading'
 function detectZoom (){ 
+    console.log(2222)
     let ratio = 0,
       screen = window.screen,
       ua = navigator.userAgent.toLowerCase();
@@ -16,7 +17,7 @@ function detectZoom (){
      if (window.devicePixelRatio !== undefined) {
         ratio = window.devicePixelRatio;
     }
-    else if (~ua.indexOf('msie')) {  
+    else if (ua.indexOf('msie')) {  
       if (screen.deviceXDPI && screen.logicalXDPI) {
         ratio = screen.deviceXDPI / screen.logicalXDPI;
       }
@@ -31,6 +32,7 @@ function detectZoom (){
     
      return ratio;
   }
+ 
 export default {
     install(Vue) {
         Vue.mixin({
@@ -56,30 +58,31 @@ export default {
                     }
                 },
                 highly: {
-                    bind(el) { // el为绑定的元素，binding为绑定给指令的对象
+                    bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
-                        // console.log(el, "绑定", binding);
+                        let height = '';
-                        let h = ""
+                        let z = binding.value;
+                        let firstH = "";
+                        let b = true;
                         function adaptive() {
                             const style = document.defaultView.getComputedStyle(el); // 获取元素
                             const wh = document.body.clientHeight;
-                            const height = style.height;
+                            let h = style.height;
-                            let z = 1;
+                            firstH = firstH || h;
-                            let gh = 1080;
+                            if (height == wh) return
-                            if(wh >= gh) {
+                            if(wh >= 760 && wh < 930 && b) {
-                                z = 1;
+                                el.style.height = z * parseFloat(h) + 'px';
-                            } else if(wh >= 760 && wh < gh) {
+                                b = !b
-                                z = wh / gh
                             } else {
-                                z = 760 / gh
+                                el.style.height = firstH;
-                            }
+                                b = !b;
-                            if( h !== style.height) {
-                                el.style.height = z * parseFloat(height) + 'px';
-                                h = style.height; 
                             }
+                            height = wh
                         }
-                        adaptive()
+                        el.__vueSetInterval__ = setInterval(adaptive, 300);
-                        // el.__vueSetInterval__ = setInterval(adaptive, 300);
                     },
+                    // inserted(el, binding) {
+                    //     adaptive(el, binding.value)
+                    // },
                     unbind(el) {
                         // console.log(el, "解绑");
                         clearInterval(el.__vueSetInterval__);
@@ -87,10 +90,10 @@ export default {
                 }
             },
             computed: {
-                ...mapGetters(['getZoom', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel','getSComparison'])
+                ...mapGetters(['getZoom', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel','getSComparison','getBComparison'])
             },
             methods: {
-                ...mapActions(["setZoom", 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison']),
+                ...mapActions(["setZoom", 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison','setBComparison']),
                 // 获取当前日期时间
                 getDatetime() {
                     let now = new Date();

src/router/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 09:26:29
- * @LastEditTime: 2021-11-04 15:06:16
+ * @LastEditTime: 2021-11-08 10:03:10
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/router/index.js
@@ -24,7 +24,7 @@ import iLayout from "@/lycomponents/iLayout"
 import ForumDetails from "@/views/ForumDetails"
 import TailInsightDetails from "@/views/TailInsightDetails"
 import WeiboDetails from "@/views/WeiboDetails"
-import BrandComparison from "@/views/BrandComparison"
+import brandComparisonIndex from "@/views/BrandComparison"
 import EventInsight from "@/views/EventInsight"
 import EventComparison from "@/views/EventComparison"
 import Login from "@/views/Login"
@@ -32,6 +32,7 @@ import EventDEC from "@/views/EventDEC"
 import MarketingAnalysis from "@/views/MarketingAnalysis"
 import ModelInsight from "@/views/ModelInsight"
 import mcIndex from "@/views/MarketingComparison"
+import ModelTailDetails from "@/views/ModelTailDetails"
 const router = [
     {
         path: '/login',
@@ -93,10 +94,10 @@ const router = [
                 component: WeiboDetails
             },
             {
-                path: '/brandComparison',
+                path: '/brandComparisonIndex',
-                name: "brandComparison",
+                name: "brandComparisonIndex",
                 desc: "品牌洞察-品牌对比",
-                component: BrandComparison
+                component: brandComparisonIndex
             },
             {
                 path: '/eventInsight',
@@ -128,6 +129,12 @@ const router = [
                 desc: "车型洞察",
                 component: ModelInsight
             },
+            {
+                path: '/modelTailDetails',
+                name: "modelTailDetails",
+                desc: "车型尾翼详情",
+                component: ModelTailDetails
+            },
             {
                 path: '/mcIndex',
                 name: "mcIndex",

src/store/actions.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:36:49
- * @LastEditTime: 2021-10-28 19:34:37
+ * @LastEditTime: 2021-11-05 14:03:18
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/store/actions.js
@@ -37,6 +37,9 @@ const actions = {
     setModel: ({commit}, log) => {
         commit('setModel', log) 
     },
+    setBComparison: ({commit}, log) => {
+        commit('setBComparison', log) 
+    },
     setSComparison: ({commit}, log) => {
         commit('setSComparison', log) 
     },

src/store/getters.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:37:06
- * @LastEditTime: 2021-11-03 17:00:15
+ * @LastEditTime: 2021-11-05 14:04:53
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/store/getters.js
@@ -37,8 +37,11 @@ const getters = {
     getModel(state) {
         return state.model 
     },
+    getBComparison(state) {
+        return state.bComparison 
+    },
     getSComparison(state) {
         return state.sComparison 
-    }
+    },
 }
 export default getters

src/store/mutations.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:37:35
- * @LastEditTime: 2021-11-03 16:59:16
+ * @LastEditTime: 2021-11-05 14:04:03
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/store/mutations.js
@@ -58,6 +58,11 @@ const mutations = {
         let str = JSON.stringify(obj);
         sessionStorage.setItem('model', str);
     },
+    setBComparison: (state, log) => {
+        state.bComparison = log;
+        let str = JSON.stringify(log);
+        sessionStorage.setItem('bComparison', str);
+    },
     setSComparison: (state, log) => {
         state.sComparison = log;
         let str = JSON.stringify(log);

src/store/state.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:37:50
- * @LastEditTime: 2021-11-03 16:56:14
+ * @LastEditTime: 2021-11-05 14:02:42
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/store/state.js
@@ -18,6 +18,8 @@ const state = {
     headerType: sessionStorage.getItem('headerType') || 1,
     brand: JSON.parse(sessionStorage.getItem('brand')) || {},
     model: JSON.parse(sessionStorage.getItem('model')) || {},
+    bComparison: JSON.parse(sessionStorage.getItem('bComparison')) || [],
     sComparison: JSON.parse(sessionStorage.getItem('sComparison')) || [],
+    
 }
 export default state;

src/views/BrandComparison/BrandBeginComparte.vue

@@ -0,0 +1,160 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-05 13:56:24
+ * @LastEditTime: 2021-11-08 09:35:56
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
+-->
+<template>
+    <div class="d-container">
+        <div class="bbc-inner">
+            <brandCompateHeader ref="brandRef" @del="handlerDel"></brandCompateHeader>
+             <div class="mbc-inner">
+                <v-label-div title="品牌推荐">
+                </v-label-div>
+                <div class="mbc-dd">
+                    <ul class="mb-ul">
+                        <li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in brands" :key="index" @click="handlerBrand(item)">{{item.brandname}}</li>
+                    </ul>
+                    <div style="clear: both"></div>
+                </div>
+            </div>
+            <div class="beCpm-footer" @click="handlerSubmit">
+                开始对比
+            </div>
+        </div> 
+    </div>
+</template>
+
+<script>
+import {getRecommendSeries} from "@/api/comm"
+import brandCompateHeader from "./brandCompateHeader"
+export default {
+    name: "BrandBeginComparte",
+    components: {
+        brandCompateHeader
+    },
+    inject: ['reload'],
+    data() {
+        return {
+            form: {
+                token: ""
+            },
+            chooseArr: [null, null, null, null, null, null],
+            brands: [
+            ],
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getData();
+    },
+    methods: {
+        // 获取推荐品牌
+        getData() {
+            let obj = Object.assign({}, this.form);
+            getRecommendSeries(obj).then(res => {
+                let data = res.data || [];
+                this.brands = data;
+            })
+        },
+        // 选择默认的车型
+        handlerBrand(row) {
+            for(let i = 0; i < this.chooseArr.length; i++) {
+                let n = this.chooseArr.findIndex(ele =>{
+                    return ele && ele.brandname === row.brandname
+                })
+              
+                if(!this.chooseArr[i] && n === -1) {
+                    this.chooseArr[i] = row;
+                    let obj = this.$refs.brandRef.brands[i]
+                    obj.name = row.brandname;
+                    obj.isDel = true;
+                    return;
+                }
+            }    
+        },
+         // 删除
+        handlerDel(n) {
+            this.chooseArr[n] = null;
+        },
+        // 开始对比
+        handlerSubmit() {
+            let arr = this.$refs.brandRef.brands || [];
+             let filterArr = arr.filter((ele) => {
+                 return ele.name;
+            });
+            if(filterArr.length < 2) {
+                this.$message.warning('至少2个品牌进行对比');
+                return;
+            }
+            this.setBComparison(filterArr);
+            this.reload()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.bbc-inner {
+    padding: 0px 16px 16px 16px;
+}
+.mbc-inner {
+    width: 100%;
+    height: 488px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .mbc-dd {
+        width: 100%;
+        height: calc(100% - 48px);
+        .mb-ul {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            li {
+                float: left;
+                width: 295px;
+                height: 89px;
+                background-color: #0f2b47;
+                margin-left: 16px;
+                margin-top: 16px;
+                color: #fff;
+                text-align: center;
+                border-radius: 2px;
+                border: 1px solid transparent;
+                line-height: 89px;
+                font-size: 20px;
+                font-weight: 500;
+                cursor: pointer;
+                &:hover {
+                    border: 1px solid #0058e6;
+                }
+            }
+            .liActive {
+                color: #0058e6;
+                border: 1px solid #0058e6;
+            }
+        }
+    }
+}
+.beCpm-footer {
+    position: relative;
+    width: 354px;
+    height: 64px;
+    background-image: url("../../assets/images/login/img_dlan_nor.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    bottom: 0px;
+    left: 50%;
+    transform: translate(-50%);
+    cursor: pointer;
+    color: #63aecc;
+    font-size: 24px;
+    text-align: center;
+    line-height: 64px;
+    margin-top: 16px;
+}
+</style>

src/views/BrandComparison/BrandComparison.vue

@@ -0,0 +1,203 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-05 13:49:05
+ * @LastEditTime: 2021-11-08 09:40:06
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue
+-->
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 10:39:43
+ * @LastEditTime: 2021-11-05 13:25:31
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/index.vue
+-->
+<template>
+    <div class="d-container">
+        <div class="bc-outter">
+            <brandCompateHeader :data="getBComparison" @change="handlerChangeBrand"></brandCompateHeader>
+            <div class="bc-d2">
+                <informationTrend></informationTrend>
+                <overallInformation></overallInformation>
+                <overallNumberOfInteractions></overallNumberOfInteractions>
+            </div>
+            <brandTonalDistribution></brandTonalDistribution>
+            <div class="bc-d3">
+                <channelDistribution></channelDistribution>
+                <keyMediaCommunicationComparison></keyMediaCommunicationComparison>
+            </div>
+            <brandCommunicationTOPMedia></brandCommunicationTOPMedia>
+            <overallWordCloudComparison></overallWordCloudComparison>
+            <brandEventComparison></brandEventComparison>
+            <div class="bc-d4">
+                <v-label-div title="品牌微博对比"></v-label-div>
+                <div class="bc-d4-d1">
+                    <comparisonOfWeiboInformation></comparisonOfWeiboInformation>
+                    <comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
+                    <weiboBigVComparison></weiboBigVComparison>
+                </div>
+                <weiboTuneComparison></weiboTuneComparison>
+                <weiboContentDirectionComparison></weiboContentDirectionComparison>
+                <div class="bc-d4-d2">
+                    <userAreaDistribution></userAreaDistribution>
+                    <weiboUserPortrait></weiboUserPortrait>
+                </div>
+            </div>
+            <div class="bc-d5">
+                <v-label-div title="品牌论坛对比"></v-label-div>
+                <div class="bc-d5-dd1">
+                    <summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
+                    <comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
+                </div>
+                 <forumTonalComparison></forumTonalComparison>
+                 <comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
+                 <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
+            </div>
+            <div class="bc-d6">
+               <v-label-div title="品牌尾翼对比"></v-label-div> 
+                <div class="bc-d6-dd1">
+                    <brandRearWingComparison></brandRearWingComparison>
+                    <informationVolumeByChannel></informationVolumeByChannel>
+                </div>
+                <tailTOPMedia></tailTOPMedia>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+import informationTrend from "./informationTrend";
+import overallInformation from "./overallInformation";
+import overallNumberOfInteractions from "./overallNumberOfInteractions";
+import brandTonalDistribution from "./brandTonalDistribution";
+import channelDistribution from "./channelDistribution";
+import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison";
+import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia";
+import overallWordCloudComparison from "./overallWordCloudComparison";
+import brandEventComparison from "./brandEventComparison";
+import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation";
+import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions";
+import weiboBigVComparison from "./weiboBigVComparison";
+import weiboTuneComparison from "./weiboTuneComparison";
+import weiboContentDirectionComparison from "./weiboContentDirectionComparison";
+import userAreaDistribution from "./userAreaDistribution";
+import weiboUserPortrait from "./weiboUserPortrait";
+import summaryAndComparisonOfForumInformation from "./summaryAndComparisonOfForumInformation"
+import comparisonOfForumPostingTrends from "./comparisonOfForumPostingTrends"
+import forumTonalComparison from "./forumTonalComparison"
+import comparisonOfPositiveTopicsInTheForum from "./comparisonOfPositiveTopicsInTheForum"
+import comparisonOfNegativeTopicsInForums from "./comparisonOfNegativeTopicsInForums"
+import brandRearWingComparison from "./brandRearWingComparison"
+import informationVolumeByChannel from "./informationVolumeByChannel"
+import tailTOPMedia from "./tailTOPMedia"
+import brandCompateHeader from "./brandCompateHeader"
+export default {
+    name: "brandComparison",
+    inject: ['reload'],
+    components: {
+        informationTrend, // 信息量趋势
+        overallInformation, // 整体信息量
+        overallNumberOfInteractions, // 整体互动人数
+        brandTonalDistribution, // 品牌调性分布
+        channelDistribution, // 渠道分布
+        keyMediaCommunicationComparison, // 重点媒体传播对比
+        brandCommunicationTOPMedia, // 品牌传播TOP媒体
+        overallWordCloudComparison, // 整体词云对比
+        brandEventComparison, //品牌事件对比
+        comparisonOfWeiboInformation, // 微博信息量对比
+        comparisonOfTheNumberOfWeiboInteractions, // 微博互动人数对比
+        weiboBigVComparison, // 微博大V对比
+        weiboTuneComparison, // 微博调性对比
+        weiboContentDirectionComparison, // 微博内容方向对比
+        userAreaDistribution, //用户区域分布
+        weiboUserPortrait, // 微博用户画像
+        summaryAndComparisonOfForumInformation, // 论坛信息概括对比
+        comparisonOfForumPostingTrends, // 论坛发帖趋势对比
+        forumTonalComparison, // 论坛调性对比
+        comparisonOfPositiveTopicsInTheForum, // 论坛正面话题对比
+        comparisonOfNegativeTopicsInForums, // 论坛负面话题对比
+        brandRearWingComparison, // 尾翼趋势对比
+        informationVolumeByChannel, // 分渠道信息量
+        tailTOPMedia, // 尾翼TOP媒体
+        brandCompateHeader // 选择品牌
+        
+    },
+    data() {
+        return {
+            
+        };	
+    },
+    beforeMount() {
+        console.log('请等待')
+    },
+    methods: {
+        handlerChangeBrand(arr) {
+            this.setBComparison(arr);
+            this.reload()
+        }
+       
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.bc-outter {
+    padding: 0px 16px 16px 16px;
+}
+
+.bc-d2 {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 16px;
+}
+.bc-d3 {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 16px;
+}
+.bc-d4 {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bc-d4-d1 {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+    }
+    .bc-d4-d2 {
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+.bc-d5 {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bc-d5-dd1 {
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+.bc-d6 {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bc-d6-dd1 {
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+</style>
+

src/views/BrandComparison/brandCompateHeader/index.vue

@@ -0,0 +1,185 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-05 13:18:12
+ * @LastEditTime: 2021-11-08 09:27:13
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandCompateHeader/index.vue
+-->
+<template>
+    <div class="bc-d1">
+        <v-label-div title="品牌对比">
+            <v-btn @click="goback">返回洞察详情</v-btn>
+        </v-label-div>
+        <div class="bc-d1-inner">
+            <template v-for="(item,index) in brands">
+                <div class="bc-d1-item" :key="index">
+                    <div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
+                        <span class="s1">{{item.name|doStr(4)}}</span>
+                        <span class="s2">{{item.name|doStr(10)}}</span>
+                        <span class="s3" @click="handlerDel(index)" v-if="item.isDel">删除</span>
+                        <span class="s3" @click="openBrand(index)" v-else>切换品牌</span>
+                    </div>
+                    <img v-if="index != brands.length -1" src="../../../assets/images/comm/img_vs.png" class="d1-m1">
+                </div>
+            </template>
+        </div>
+        <iSwitchBrand :visible.sync="brandShow" @change="handlerBrand"></iSwitchBrand>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "brandCompateHeader",
+    props: {
+        data: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },
+    },
+    watch: {
+        data: {
+            handler(val) {
+                if (val.length > 0) {
+                    val.forEach((ele, index) => {
+                        this.brands[index] = Object.assign(this.brands[index], ele);
+                    });
+                }
+            },
+            immediate: true,
+        },
+    },
+    data() {
+        return {
+            brandShow: false,
+            brandIndex: 0,
+            brands: [
+                {
+                    name: "",
+                    isDel: false,
+                },
+                {
+                    name: "",
+                    isDel: false,
+                },
+                {
+                    name: "",
+                    isDel: false,
+                },
+                {
+                    name: "",
+                    isDel: false,
+                },
+                {
+                    name: "",
+                    isDel: false,
+                },
+                {
+                    name: "",
+                    isDel: false,
+                },
+            ],
+        }
+    },
+    methods: {
+        goback() {
+            this.$router.go(-1);
+        },
+        // 打开品牌选择
+         openBrand(n) {
+            this.brandShow = true;
+            this.brandIndex = n;
+        },
+        // 获取选择品牌的数据
+        handlerBrand(arr) {
+            let name = arr[0].brandname;
+            let n = this.brands.findIndex(ele => ele.name === name);
+            if(n === -1) {
+               let row = this.brands[this.brandIndex];
+               row.name = name;
+               row.isDel = true;
+            }
+            let filterArr = this.brands.filter((ele) => {
+                 return ele.name;
+            });
+            this.$emit('change', filterArr)
+        },
+        // 删除
+        handlerDel(n) {
+            let row = this.brands[n];
+            row.name = "";
+            row.isDel = false;
+            let filterArr = this.brands.filter((ele) => {
+                 return ele.name;
+            });
+            this.$emit('del', n)
+            this.$emit('change', filterArr)
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.bc-d1 {
+    width: 100%;
+    height: 222px;
+    border: 2px solid #0f2a4d;
+    .bc-d1-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .bc-d1-item {
+            display: inline-block;
+            display: flex;
+            justify-content: flex-start;
+        }
+        .d1-m1 {
+            width: 96px;
+            height: 102px;
+        }
+        .d1-item {
+            position: relative;
+            width: 228.5px;
+            height: 120px;
+            background-image: url("../../../assets/images/BrandInsight/img_pd.png");
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+
+            .s1 {
+                position: absolute;
+                font-size: 14px;
+                color: #b2daf8;
+                top: 52px;
+                left: 43px;
+            }
+            .s2 {
+                position: absolute;
+                top: 50px;
+                left: 110px;
+                color: #fff;
+                font-size: 20px;
+            }
+            .s3 {
+                display: block;
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                width: 95px;
+                height: 28px;
+                background-image: url("../../../assets/images/BrandInsight/img_xbut.png");
+                background-repeat: no-repeat;
+                background-size: cover;
+                color: #4390ba;
+                text-align: center;
+                line-height: 28px;
+                font-size: 12px;
+                cursor: pointer;
+            }
+        }
+    }
+}
+</style>

src/views/BrandComparison/brandTonalDistribution/roundata/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 13:41:17
- * @LastEditTime: 2021-10-21 16:50:07
+ * @LastEditTime: 2021-11-05 13:47:57
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
@@ -66,7 +66,7 @@ export default {
 .bd-item-round {
     display: inline-block;
     .bd-item-r-cav {
-        width: 206px;
+        width: 193px;
         height: 206px;
     }
     .bd-item-r-c-s1 {

src/views/BrandComparison/forumTonalComparison/roundata/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 13:41:17
- * @LastEditTime: 2021-10-15 14:37:24
+ * @LastEditTime: 2021-11-05 13:31:48
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
@@ -9,7 +9,7 @@
 <template>
     <div class="bd-item-round">
         <div class="bd-item-r-cav">
-            <v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
+            <v-echarts :opt="opt"></v-echarts>
         </div>
         <span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
     </div>
@@ -34,32 +34,7 @@ export default {
         };
     },
     methods: {
-        echarsFun(myChart) {
-            let index = 0;
-            myChart.dispatchAction({
-                type: "highlight",
-                seriesIndex: 0,
-                dataIndex: 0,
-            });
-            myChart.on("mouseover", function (e) {
-                if (e.dataIndex != index) {
-                    myChart.dispatchAction({
-                        type: "downplay",
-                        seriesIndex: 0,
-                        dataIndex: index,
-                    });
-                }
-            });
        
-            myChart.on("mouseout", function (e) {
-                index = e.dataIndex;
-                myChart.dispatchAction({
-                    type: "highlight",
-                    seriesIndex: 0,
-                    dataIndex: e.dataIndex,
-                });
-            });
-        },
     },
 };
 </script>
@@ -67,7 +42,7 @@ export default {
 .bd-item-round {
     display: inline-block;
     .bd-item-r-cav {
-        width: 206px;
+        width: 193px;
         height: 206px;
     }
     .bd-item-r-c-s1 {

src/views/BrandComparison/index.vue

@@ -1,171 +1,39 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 10:39:43
- * @LastEditTime: 2021-10-19 11:45:50
+ * @LastEditTime: 2021-11-05 19:31:43
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/index.vue
 -->
 <template>
     <div class="d-container">
-        <div class="bc-outter">
+        <BrandComparison v-if="hasData"></BrandComparison>
-            <div class="bc-d1">
+        <BrandBeginComparte v-else></BrandBeginComparte>
-                <v-label-div title="品牌对比">
-                    <v-btn @click="goback">返回洞察详情</v-btn>
-                </v-label-div>
-                <div class="bc-d1-inner">
-                    <template v-for="(item,index) in brands">
-                        <div class="bc-d1-item" :key="index">
-                            <div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
-                                <span class="s1">{{item.name}}</span>
-                                <span class="s2">{{item.name}}</span>
-                                <span class="s3" @click="openBrand(index)">切换品牌</span>
-                            </div>
-                            <img v-if="index != brands.length -1" src="../../assets/images/comm/img_vs.png" class="d1-m1">
-                        </div>
-                    </template>
-                </div>
-            </div>
-            <div class="bc-d2">
-                <informationTrend></informationTrend>
-                <overallInformation></overallInformation>
-                <overallNumberOfInteractions></overallNumberOfInteractions>
-            </div>
-            <brandTonalDistribution></brandTonalDistribution>
-            <div class="bc-d3">
-                <channelDistribution></channelDistribution>
-                <keyMediaCommunicationComparison></keyMediaCommunicationComparison>
-            </div>
-            <brandCommunicationTOPMedia></brandCommunicationTOPMedia>
-            <overallWordCloudComparison></overallWordCloudComparison>
-            <brandEventComparison></brandEventComparison>
-            <div class="bc-d4">
-                <v-label-div title="品牌微博对比"></v-label-div>
-                <div class="bc-d4-d1">
-                    <comparisonOfWeiboInformation></comparisonOfWeiboInformation>
-                    <comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
-                    <weiboBigVComparison></weiboBigVComparison>
-                </div>
-                <weiboTuneComparison></weiboTuneComparison>
-                <weiboContentDirectionComparison></weiboContentDirectionComparison>
-                <div class="bc-d4-d2">
-                    <userAreaDistribution></userAreaDistribution>
-                    <weiboUserPortrait></weiboUserPortrait>
-                </div>
-            </div>
-            <div class="bc-d5">
-                <v-label-div title="品牌论坛对比"></v-label-div>
-                <div class="bc-d5-dd1">
-                    <summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
-                    <comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
-                </div>
-                 <forumTonalComparison></forumTonalComparison>
-                 <comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
-                 <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
-            </div>
-            <div class="bc-d6">
-               <v-label-div title="品牌尾翼对比"></v-label-div> 
-                <div class="bc-d6-dd1">
-                    <brandRearWingComparison></brandRearWingComparison>
-                    <informationVolumeByChannel></informationVolumeByChannel>
-                </div>
-                <tailTOPMedia></tailTOPMedia>
-            </div>
-
-        </div>
-        <iSwitchBrand :visible.sync="brandShow"></iSwitchBrand>
     </div>
 </template>
 
 <script>
-import informationTrend from "./informationTrend";
+import BrandComparison from "./BrandComparison.vue";
-import overallInformation from "./overallInformation";
+import BrandBeginComparte from "./BrandBeginComparte.vue";
-import overallNumberOfInteractions from "./overallNumberOfInteractions";
-import brandTonalDistribution from "./brandTonalDistribution";
-import channelDistribution from "./channelDistribution";
-import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison";
-import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia";
-import overallWordCloudComparison from "./overallWordCloudComparison";
-import brandEventComparison from "./brandEventComparison";
-import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation";
-import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions";
-import weiboBigVComparison from "./weiboBigVComparison";
-import weiboTuneComparison from "./weiboTuneComparison";
-import weiboContentDirectionComparison from "./weiboContentDirectionComparison";
-import userAreaDistribution from "./userAreaDistribution";
-import weiboUserPortrait from "./weiboUserPortrait";
-import summaryAndComparisonOfForumInformation from "./summaryAndComparisonOfForumInformation"
-import comparisonOfForumPostingTrends from "./comparisonOfForumPostingTrends"
-import forumTonalComparison from "./forumTonalComparison"
-import comparisonOfPositiveTopicsInTheForum from "./comparisonOfPositiveTopicsInTheForum"
-import comparisonOfNegativeTopicsInForums from "./comparisonOfNegativeTopicsInForums"
-import brandRearWingComparison from "./brandRearWingComparison"
-import informationVolumeByChannel from "./informationVolumeByChannel"
-import tailTOPMedia from "./tailTOPMedia"
 export default {
-    name: "brandComparison",
+    name: "brandComparisonIndex",
     components: {
-        informationTrend, // 信息量趋势
+        BrandComparison,
-        overallInformation, // 整体信息量
+        BrandBeginComparte,
-        overallNumberOfInteractions, // 整体互动人数
-        brandTonalDistribution, // 品牌调性分布
-        channelDistribution, // 渠道分布
-        keyMediaCommunicationComparison, // 重点媒体传播对比
-        brandCommunicationTOPMedia, // 品牌传播TOP媒体
-        overallWordCloudComparison, // 整体词云对比
-        brandEventComparison, //品牌事件对比
-        comparisonOfWeiboInformation, // 微博信息量对比
-        comparisonOfTheNumberOfWeiboInteractions, // 微博互动人数对比
-        weiboBigVComparison, // 微博大V对比
-        weiboTuneComparison, // 微博调性对比
-        weiboContentDirectionComparison, // 微博内容方向对比
-        userAreaDistribution, //用户区域分布
-        weiboUserPortrait, // 微博用户画像
-        summaryAndComparisonOfForumInformation, // 论坛信息概括对比
-        comparisonOfForumPostingTrends, // 论坛发帖趋势对比
-        forumTonalComparison, // 论坛调性对比
-        comparisonOfPositiveTopicsInTheForum, // 论坛正面话题对比
-        comparisonOfNegativeTopicsInForums, // 论坛负面话题对比
-        brandRearWingComparison, // 尾翼趋势对比
-        informationVolumeByChannel, // 分渠道信息量
-        tailTOPMedia // 尾翼TOP媒体
-        
     },
     data() {
         return {
-            brandShow: false,
+            hasData: false,
-            brandIndex: 0,
-            brands: [
-                {
-                    name: "奥迪",
-                },
-                {
-                    name: "宝马",
-                },
-                {
-                    name: "奔驰",
-                },
-                {
-                    name: "吉利",
-                },
-                {
-                    name: "大众",
-                },
-                {
-                    name: "别克",
-                },
-            ],
         };
     },
-    methods: {
+    created() {
-        goback() {
+        this.hasData = this.getBComparison.length > 0 ? true : false;
-            this.$router.go(-1);
+    },
-        },
+    mounted() {
-        openBrand(n) {
+       
-            this.brandShow = true;
-            this.brandIndex = n;
-        },
     },
+    methods: {},
 };
 </script>
 
@@ -173,66 +41,7 @@ export default {
 .bc-outter {
     padding: 0px 16px 16px 16px;
 }
-.bc-d1 {
-    width: 100%;
-    height: 222px;
-    border: 2px solid #0f2a4d;
-    .bc-d1-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        .bc-d1-item {
-            display: inline-block;
-            display: flex;
-            justify-content: flex-start;
-        }
-        .d1-m1 {
-            width: 96px;
-            height: 102px;
-        }
-        .d1-item {
-            position: relative;
-            width: 228.5px;
-            height: 120px;
-            background-image: url("../../assets/images/BrandInsight/img_pd.png");
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
 
-            .s1 {
-                position: absolute;
-                font-size: 14px;
-                color: #b2daf8;
-                top: 52px;
-                left: 43px;
-            }
-            .s2 {
-                position: absolute;
-                top: 50px;
-                left: 110px;
-                color: #fff;
-                font-size: 20px;
-            }
-            .s3 {
-                display: block;
-                position: absolute;
-                top: 0px;
-                right: 0px;
-                width: 95px;
-                height: 28px;
-                background-image: url("../../assets/images/BrandInsight/img_xbut.png");
-                background-repeat: no-repeat;
-                background-size: cover;
-                color: #4390ba;
-                text-align: center;
-                line-height: 28px;
-                font-size: 12px;
-                cursor: pointer;
-            }
-        }
-    }
-}
 .bc-d2 {
     width: 100%;
     height: auto;

src/views/BrandComparison/weiboTuneComparison/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-16 10:49:09
- * @LastEditTime: 2021-10-16 12:06:59
+ * @LastEditTime: 2021-11-05 13:45:20
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
@@ -16,22 +16,22 @@
             <div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#CC9D12'}"></span><span class="s2">负面</span></div>
         </div>
         <div class="wtc-inner">
-            <roundata title="奥迪" color="#3373CC" style="margin-left: 46px"></roundata>
+            <wbRoundata title="奥迪" color="#3373CC" style="margin-left: 46px"></wbRoundata>
-            <roundata title="宝马" color="#63AECC" style="margin-left: 110px"></roundata>
+            <wbRoundata title="宝马" color="#63AECC" style="margin-left: 110px"></wbRoundata>
-            <roundata title="奔驰" color="#54BF93" style="margin-left: 110px"></roundata>
+            <wbRoundata title="奔驰" color="#54BF93" style="margin-left: 110px"></wbRoundata>
-            <roundata title="吉利" color="#CC9D12" style="margin-left: 110px"></roundata>
+            <wbRoundata title="吉利" color="#CC9D12" style="margin-left: 110px"></wbRoundata>
-            <roundata title="大众" color="#CC7733" style="margin-left: 110px"></roundata>
+            <wbRoundata title="大众" color="#CC7733" style="margin-left: 110px"></wbRoundata>
-            <roundata title="别克" color="#CC5B41" style="margin-left: 110px"></roundata>
+            <wbRoundata title="别克" color="#CC5B41" style="margin-left: 110px"></wbRoundata>
         </div>
     </div>
 </template>
 
 <script>
-import roundata from "./roundata";
+import wbRoundata from "./wbRoundata";
 export default {
     name: "weiboTuneComparison",
     components: {
-       roundata 
+       wbRoundata 
     }
 }
 </script>

src/views/BrandComparison/weiboTuneComparison/wbRoundata/index.vue

@@ -0,0 +1,56 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 13:41:17
+ * @LastEditTime: 2021-11-05 13:47:15
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
+-->
+<template>
+    <div class="bd-item-round">
+        <div class="bd-item-r-cav">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+        <span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
+    </div>
+</template>
+<script>
+import createOpt from "./opt";
+export default {
+    name: "wbRoundata",
+    props: {
+        title: {
+            type: String,
+            default: "",
+        },
+        color: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            opt: createOpt(),
+        };
+    },
+    methods: {
+        
+    },
+};
+</script>
+<style lang="less" scoped>
+.bd-item-round {
+    display: inline-block;
+    .bd-item-r-cav {
+        width: 193px;
+        height: 206px;
+    }
+    .bd-item-r-c-s1 {
+        display: block;
+        text-align: center;
+        color: #fff;
+        font-size: 18px;
+        margin-top: 30px;
+    }
+}
+</style>

src/views/BrandInsight/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-11 17:59:49
- * @LastEditTime: 2021-10-28 18:37:20
+ * @LastEditTime: 2021-11-05 15:46:06
  * @LastEditors: Please set LastEditors
  * @Description: 品牌洞察
  * @FilePath: /data-show/src/views/BrandInsight/index.vue
@@ -15,7 +15,7 @@
                     <brand-top :brand="brand"></brand-top>
                 </div>
                 <div class="bdl-d1-dd2">
-                    <img class="m1" src="../../assets/images/BrandInsight/img_ppdb.png" @click="goRouter('/brandComparison')"/>
+                    <img class="m1" src="../../assets/images/BrandInsight/img_ppdb.png" @click="goRouter('/brandComparisonIndex')"/>
                     <div class="bdl-d1-dd2-d1">
                         <span class="bdl-d1-dd2-d1-s1">{{this.brand}}</span>
                     </div>
@@ -124,7 +124,7 @@ export default {
       // 获得获取品牌
       handlerBrand(arr) {
           this.setBrand(arr[0]);
-          this.setModel(arr[1]);
+        //   this.setModel(arr[1]);
           this.reload();
       }
     }

src/views/Index/barometer/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 11:28:39
- * @LastEditTime: 2021-11-01 19:10:58
+ * @LastEditTime: 2021-11-05 11:41:08
  * @LastEditors: Please set LastEditors
  * @Description: 晴雨表
  * @FilePath: /data-show/src/views/Index/barometer/index.vue
 -->
 <template>
-    <div class="bm-outter" v-loading="load">
+    <div class="bm-outter" v-loading="load" v-highly="0.83">
         <v-label-div title="晴雨表">
             <div class="tis">
                 <v-pagination :data="pdata" :style="{marginRight: '0.8rem', marginTop: '0.4rem'}" @change="handlerData"></v-pagination>

src/views/Index/dynamicNumber/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 14:25:05
- * @LastEditTime: 2021-11-01 11:37:58
+ * @LastEditTime: 2021-11-05 11:24:18
  * @LastEditors: Please set LastEditors
  * @Description: 大数据统计gif
  * @FilePath: /data-show/src/views/Index/dynamicNumber/index.vue

src/views/Index/hotDiscussionGraph/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 13:25:49
- * @LastEditTime: 2021-11-01 09:10:10
+ * @LastEditTime: 2021-11-05 11:45:26
  * @LastEditors: Please set LastEditors
  * @Description: 热议图谱
  * @FilePath: /data-show/src/views/Index/hotDiscussionGraph/index.vue
 -->
 <template>
-    <div class="hdg-ouuter" v-loading="load">
+    <div class="hdg-ouuter" v-loading="load" v-highly="0.83">
         <v-label-div title="热议图谱">
             <v-tab-group :btns="['热门', '正面', '负面']" @change="handlerChange"></v-tab-group>
         </v-label-div>

src/views/Index/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-08 09:17:42
- * @LastEditTime: 2021-11-03 10:54:35
+ * @LastEditTime: 2021-11-05 11:53:03
  * @LastEditors: Please set LastEditors
  * @Description: 行业洞察
  * @FilePath: /data-show/src/views/Index/index.vue
 -->
 <template>
-    <div class="d-container" ref="dc" :style="outStyle" v-resize="handleResize">
+    <div class="d-container" ref="dc" :style="outStyle">
         <div class="In-body">
             <div class="d1">
                 <real-time-event></real-time-event>
@@ -15,7 +15,7 @@
                 <spread-the-sound></spread-the-sound>
             </div>
             <div class="d2">
-                <div class="d2-top">
+                <div class="d2-top" v-highly="0.917">
                     <dynamic-number @allData="handlerAllData"></dynamic-number>
                 </div>
                 <div class="d2-bottom">
@@ -122,34 +122,6 @@ export default {
                 this.modalObj.visible = true;
             });
         },
-        handleResize({height}) {
-           let h = document.body.clientHeight;
-           let h2 = parseFloat(height);
-           let hx = 990/1080 * h;
-           let z = 1;
-           let m = h2 - h;
-           let marginTop = -m*1.9;
-           if(h > 760 && h < 1080) {
-               if(h2 > h) {
-                   z = hx/h2 * 0.99;
-               } else {
-                   z = 1;
-                   marginTop = 0;
-                 
-               }
-           } else if(h <= 760) {
-               z = 760 / 1080;
-          
-           } else {
-               z = 1
-               marginTop = 0
-           }
-         
-         this.outStyle = {
-             transform: `scaleY(${z}) translate(0, ${marginTop}px)`,
-          }
-          this.$emit('changeZoom', z)
-        },
         handlerSs() {
 
         },

src/views/Index/keyCommunicationPositions/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-08 16:37:30
- * @LastEditTime: 2021-11-02 13:28:21
+ * @LastEditTime: 2021-11-05 11:12:36
  * @LastEditors: Please set LastEditors
  * @Description: 传播重点阵地
  * @FilePath: /data-show/src/views/Index/key-communication-positions/index.vue

src/views/Index/realTimeEvent/index.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-08 15:56:35
- * @LastEditTime: 2021-11-02 13:28:14
+ * @LastEditTime: 2021-11-05 11:39:16
  * @LastEditors: Please set LastEditors
  * @Description: 实时事件
  * @FilePath: /data-show/src/views/Index/realTimeEvent/index.vue
 -->
 
 <template>
-    <div class="rte-outter" v-loading="load">
+    <div class="rte-outter" v-loading="load" v-highly="0.83">
         <v-label-div title="实时事件"></v-label-div>
         <div class="rte-tb" v-highly>
             <dv-scroll-board :config="config" :style="{ width: '100%', height: '100%' }" @click="handlerSs"/>

src/views/Index/salesRank/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-08 18:58:00
- * @LastEditTime: 2021-11-01 09:13:54
+ * @LastEditTime: 2021-11-05 11:44:29
  * @LastEditors: Please set LastEditors
  * @Description: 热销排行
  * @FilePath: /data-show/src/views/Index/salesRank/index.vue
 -->
 <template>
-    <div class="sr-outter" v-loading="load">
+    <div class="sr-outter" v-loading="load" v-highly="0.83">
         <v-label-div title="热销排行">
             <div class="tis">
                 <v-pagination :data="pdata" :style="{marginRight: '0.8rem', marginTop: '0.4rem'}" @change="handlerPage"></v-pagination>

src/views/Index/spreadTheSound/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 10:53:21
- * @LastEditTime: 2021-11-02 13:29:02
+ * @LastEditTime: 2021-11-05 11:39:22
  * @LastEditors: Please set LastEditors
  * @Description: 传播声量TOP10
  * @FilePath: /data-show/src/views/Index/spreadTheSound/index.vue
 -->
 <template>
-    <div class="st-outter" v-loading="load">
+    <div class="st-outter" v-loading="load" v-highly="0.83">
         <v-label-div title="传播声量TOP10">
             <div class="tis">
                 <v-pagination :data="pdata" :style="{marginRight: '0.8rem', marginTop: '0.4rem'}" @change="handlerData"></v-pagination>

src/views/Index/tailInsight/index.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 11:56:50
- * @LastEditTime: 2021-10-29 14:32:06
+ * @LastEditTime: 2021-11-05 11:41:27
  * @LastEditors: Please set LastEditors
  * @Description: 尾翼洞察
  * @FilePath: /data-show/src/views/Index/tailInsight/index.vue
 -->
 
 <template>
-  <div class="tl-outter" v-loading="load">
+  <div class="tl-outter" v-loading="load" v-highly="0.83">
       <vLabel-div title="尾翼洞察">
           <div class="tis">
                <v-pagination :data="pdata" :style="{marginRight: '0.8rem', marginTop: '0.4rem'}" @change="handlerData"></v-pagination>

src/views/Index/tailInsight/opt.js

@@ -3,7 +3,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 12:38:34
- * @LastEditTime: 2021-10-29 15:56:07
+ * @LastEditTime: 2021-11-08 10:59:48
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/tailInsight/opt.js
@@ -67,7 +67,7 @@ export default function createOpt(dy=[],ds=[]) {
         series: [
             {
                 type: 'bar',
-                barWidth: 24,
+                barWidth: 20,
                 data: ds,
                 itemStyle: {
                     normal: {

src/views/MarketingComparison/marketingComparison.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-03 11:45:09
- * @LastEditTime: 2021-11-03 16:00:45
+ * @LastEditTime: 2021-11-05 18:51:36
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/MarketingComparison/index.vue
@@ -9,7 +9,7 @@
 <template>
     <div class="d-container">
        <div class="mc-outter">
-          <mcChooseModel></mcChooseModel>
+          <mcChooseModel :data="getSComparison" @change="handlerChangeModel"></mcChooseModel>
           <div class="mc-d1">
               <mcOSVC></mcOSVC>
               <mcIVC></mcIVC>
@@ -34,6 +34,7 @@ import mcCTNF from "./mcCTNF"
 import salesComparison from "./salesComparison"
 export default {
     name: "marketingComparison",
+    inject: ['reload'],
     components: {
         mcChooseModel, // 选择车型
         mcOSVC, // 整体声量对比
@@ -42,6 +43,12 @@ export default {
         mcChannelDistribution, // 渠道分布对比
         mcCTNF, // 论坛总量对比
         salesComparison // 销量对比
+    },
+    methods: {
+        handlerChangeModel(arr) {
+            this.setSComparison(arr);
+            this.reload()
+        }
     }
 }
 </script>

src/views/MarketingComparison/mcBeginCompare.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-03 17:12:47
- * @LastEditTime: 2021-11-03 18:11:43
+ * @LastEditTime: 2021-11-05 18:29:12
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Editiv
  * @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue
@@ -9,46 +9,95 @@
 <template>
     <div class="d-container">
         <div class="mbc-outter">
-            <mcChooseModel></mcChooseModel>
+            <mcChooseModel ref="modelRef" @del="handlerDel"></mcChooseModel>
             <div class="mbc-inner">
                 <v-label-div title="车型推荐">
                 </v-label-div>
                 <div class="mbc-dd">
                     <ul class="mb-ul">
-                         <li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(item)">{{item}}</li>
+                        <li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(item)">{{item.seriesname}}</li>
                     </ul>
                     <div style="clear: both"></div>
                 </div>
             </div>
+            <div class="beCpm-footer" @click="handlerSubmit">
+                开始对比
+            </div>
         </div>
-
     </div>
 </template>
 
 <script>
+import {getRecommendSeries} from "@/api/comm"
 import mcChooseModel from "./mcChooseModel";
 export default {
     name: "mcBeginCompare",
     components: {
         mcChooseModel,
     },
+    inject: ['reload'],
     data() {
         return {
-            chooseArr: [],
+            form: {
-            models: ["奥迪A4", "奥迪A6", "奥迪S3", "奥迪S4", "奥迪RS3", "奥迪RS4", "宝马1系",
+                token: ""
-            "宝马2系","宝马3系","宝马M5","宝马M4","宝马M3","本田凌派","本田雅阁","本田缤智","本田冠道",
+            },
-            "本田奥德赛", "本田艾力绅", "比亚迪宋PRO", "比亚迪唐","比亚迪汉EV", "比亚迪秦", "比亚迪元", "比亚迪宋Max"
+            chooseArr: [null, null, null, null, null, null],
-            ]
+            models: [
-        }
+            ],
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getData()
     },
     methods: {
-        handlerModel(ele) {
+        // 选择默认的车型
-            let n = this.chooseArr.findIndex(e => e === ele);
+        handlerModel(row) {
-            if(n === -1 && this.chooseArr.length < 6) {
+            for(let i = 0; i < this.chooseArr.length; i++) {
-             this.chooseArr.push(ele)   
+                if(!this.chooseArr[i]) {
+                    this.chooseArr[i] = row;
+                    let obj = this.$refs.modelRef.list[i]
+                    obj.brand = row.brandname;
+                    obj.model = row.seriesname;
+                    obj.isDel = true;
+                    return;
+                }
             }
+            
+        },
+        // 获取推荐车型
+        getData() {
+            let obj = Object.assign({}, this.form);
+            getRecommendSeries(obj).then(res => {
+                let data = res.data || [];
+                this.models = data;
+            })
+        },
+        // 删除
+        handlerDel(n) {
+            this.chooseArr[n] = null;
+        },
+        // 开始比对
+        handlerSubmit() {
+           let arr = this.$refs.modelRef.list || [];
+           let filterArr = arr.filter(ele => {
+              return ele.brand && ele.model
+           });
+           if(filterArr.length < 2) {
+                this.$message.warning('至少2个车型进行对比');
+                return;
+           }
+           for(let i = 0; i < filterArr.length; i++) {
+               if(!filterArr[i].startTime || !filterArr[i].endTime) {
+                   this.$message.warning('请选择时间');
+                   return;
+               }
+           }
+           this.setSComparison(filterArr);
+           this.reload()
         }
-    }
+       
+    },
 };
 </script>
 
@@ -65,37 +114,53 @@ export default {
     .mbc-dd {
         width: 100%;
         height: calc(100% - 48px);
-       .mb-ul {
+        .mb-ul {
-           width: 100%;
+            width: 100%;
-           height: 100%;
+            height: 100%;
-           margin: 0;
+            margin: 0;
-           padding: 0;
+            padding: 0;
-           list-style: none;
+            list-style: none;
-           li {
+            li {
-               float: left;
+                float: left;
-               width: 295px;
+                width: 295px;
-               height: 89px;
+                height: 89px;
-               background-color: #0f2b47;
+                background-color: #0f2b47;
-               margin-left: 16px;
+                margin-left: 16px;
-               margin-top: 16px;
+                margin-top: 16px;
-               color: #fff;
+                color: #fff;
-               text-align: center;
+                text-align: center;
-               border-radius: 2px;
+                border-radius: 2px;
-               border: 1px solid transparent;
+                border: 1px solid transparent;
-               line-height: 89px;
+                line-height: 89px;
-               font-size: 20px;
+                font-size: 20px;
-               font-weight: 500;
+                font-weight: 500;
-               cursor: pointer;
+                cursor: pointer;
-               &:hover {
+                &:hover {
-                   border: 1px solid #0058e6;
+                    border: 1px solid #0058e6;
-               }
+                }
-           }
+            }
-           .liActive {
+            .liActive {
-               color: #0058e6;
+                color: #0058e6;
-               border: 1px solid #0058e6;
+                border: 1px solid #0058e6;
-           }
+            }
-       }
+        }
-       
     }
 }
+.beCpm-footer {
+    position: relative;
+    width: 354px;
+    height: 64px;
+    background-image: url("../../assets/images/login/img_dlan_nor.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    bottom: 0px;
+    left: 50%;
+    transform: translate(-50%);
+    cursor: pointer;
+    color: #63aecc;
+    font-size: 24px;
+    text-align: center;
+    line-height: 64px;
+    margin-top: 16px;
+}
 </style>

src/views/MarketingComparison/mcChooseModel/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-03 11:54:08
- * @LastEditTime: 2021-11-03 14:40:05
+ * @LastEditTime: 2021-11-05 18:50:42
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
@@ -12,135 +12,187 @@
             <v-btn @click="goback">返回营销分析</v-btn>
         </v-label-div>
         <div class="mccm-inner">
-            <div class="mccm-item" style="margin-left: 1rem">
+            <template v-for="(item,index) in list">
-                <div class="mc-t">
+                <div :key="index" style="display: flex;justify-content: flex-start;">
-                    <div class="m-t-d1">奥迪</div>
+                    <div class="mccm-item" style="margin-left: 1rem">
-                    <span class="m-t-s1">A4</span>
+                        <div class="mc-t">
+                            <div class="m-t-d1">{{item.brand|doStr(4)}}</div>
+                            <span class="m-t-s1">{{item.model|doStr(10)}}</span>
+                        </div>
+                        <div>
+                            <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
+                                <a-form-model-item label="开始时间">
+                                    <a-date-picker v-model="item.startTime" show-time type="date" placeholder="开始时间" valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%;" @change="handlerTime(item)" />
+                                </a-form-model-item>
+                                <a-form-model-item label="结束时间">
+                                    <a-date-picker v-model="item.endTime" show-time type="date" placeholder="结束时间" valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%;" @change="handlerTime(item)" />
+                                </a-form-model-item>
+                            </a-form-model>
+                        </div>
+                        <div class="m-t-btn" @click="handlerDel(index)" v-if="item.isDel">删除</div>
+                        <div class="m-t-btn" @click="handlerChoose(index)" v-else>切换车型</div>
+                    </div>
+                    <img v-if="index < list.length -1" class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
                 </div>
-                <div>
+            </template>
-                    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
+
-                        <a-form-model-item label="开始时间">
-                            <a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
-                        </a-form-model-item>
-                        <a-form-model-item label="结束时间">
-                            <a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
-                        </a-form-model-item>
-                    </a-form-model>
-                </div>
-                <div class="m-t-btn">切换车型</div>
-            </div>
-            <img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
-            <div class="mccm-item">
-                 <div class="mc-t">
-                    <div class="m-t-d1">奥迪</div>
-                    <span class="m-t-s1">A4</span>
-                </div>
-                <div>
-                    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
-                        <a-form-model-item label="开始时间">
-                            <a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
-                        </a-form-model-item>
-                        <a-form-model-item label="结束时间">
-                            <a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
-                        </a-form-model-item>
-                    </a-form-model>
-                </div>
-                <div class="m-t-btn">切换车型</div>
-            </div>
-            <img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
-            <div class="mccm-item">
-                 <div class="mc-t">
-                    <div class="m-t-d1">奥迪</div>
-                    <span class="m-t-s1">A4</span>
-                </div>
-                <div>
-                    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
-                        <a-form-model-item label="开始时间">
-                            <a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
-                        </a-form-model-item>
-                        <a-form-model-item label="结束时间">
-                            <a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
-                        </a-form-model-item>
-                    </a-form-model>
-                </div>
-                <div class="m-t-btn">切换车型</div>
-            </div>
-            <img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
-            <div class="mccm-item">
-                 <div class="mc-t">
-                    <div class="m-t-d1">奥迪</div>
-                    <span class="m-t-s1">A4</span>
-                </div>
-                <div>
-                    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
-                        <a-form-model-item label="开始时间">
-                            <a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
-                        </a-form-model-item>
-                        <a-form-model-item label="结束时间">
-                            <a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
-                        </a-form-model-item>
-                    </a-form-model>
-                </div>
-                <div class="m-t-btn">切换车型</div>
-            </div>
-            <img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
-            <div class="mccm-item">
-                 <div class="mc-t">
-                    <div class="m-t-d1">奥迪</div>
-                    <span class="m-t-s1">A4</span>
-                </div>
-                <div>
-                    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
-                        <a-form-model-item label="开始时间">
-                            <a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
-                        </a-form-model-item>
-                        <a-form-model-item label="结束时间">
-                            <a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
-                        </a-form-model-item>
-                    </a-form-model>
-                </div>
-                <div class="m-t-btn">切换车型</div>
-            </div>
-            <img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
-            <div class="mccm-item">
-                 <div class="mc-t">
-                    <div class="m-t-d1">奥迪</div>
-                    <span class="m-t-s1">A4</span>
-                </div>
-                <div>
-                    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
-                        <a-form-model-item label="开始时间">
-                            <a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
-                        </a-form-model-item>
-                        <a-form-model-item label="结束时间">
-                            <a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
-                        </a-form-model-item>
-                    </a-form-model>
-                </div>
-                <div class="m-t-btn">切换车型</div>
-            </div>
         </div>
+        <iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel>
     </div>
 </template>
 
 <script>
+import moment from "moment";
+import { getUserSeriesName } from "@/api/comm";
 export default {
     name: "mcChooseModel",
+    props: {
+        data: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },
+    },
+    watch: {
+        data: {
+            handler(val) {
+                if (val.length > 0) {
+                    val.forEach((ele, index) => {
+                        this.list[index] = Object.assign(this.list[index], ele);
+                    });
+                }
+            },
+            immediate: true,
+        },
+    },
     data() {
         return {
             labelCol: { span: 9 },
             wrapperCol: { span: 14 },
+            modelShow: false,
+            brand: "",
+            model: "",
+            chooseIndex: -1,
             form: {
-                startTime: "",
+                token: "",
-                endTime: "",
+                sBrandName: "",
             },
+            list: [
+                {
+                    brand: "",
+                    model: "",
+                    startTime: "",
+                    endTime: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    startTime: "",
+                    endTime: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    startTime: "",
+                    endTime: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    startTime: "",
+                    endTime: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    startTime: "",
+                    endTime: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    startTime: "",
+                    endTime: "",
+                    isDel: false,
+                },
+            ],
         };
     },
+    created() {
+        this.brand = this.getBrand.brandname || "奥迪";
+        this.modelData();
+    },
     methods: {
         goback() {
-            this.$router.go(-1)
+            this.$router.go(-1);
-        }
+        },
-    }
+        // 获取车型
+        modelData() {
+            let model = this.getModel.name || "";
+            if (!model) {
+                this.getUserSeriesName(this.brand);
+            } else {
+                this.model = model;
+            }
+        },
+        // 获取车型
+        getUserSeriesName(brandName) {
+            this.form.token = this.getToken;
+            this.form.sBrandName = brandName;
+            getUserSeriesName(this.form).then((res) => {
+                let data = res.data || [];
+                this.model = data[0].name;
+            });
+        },
+        // 打开选择车型的弹出框
+        handlerChoose(n) {
+            this.chooseIndex = n;
+            this.modelShow = true;
+        },
+        // 删除车型
+        handlerDel(n) {
+            let row = this.list[n];
+            row.brand = "";
+            row.model = "";
+            row.startTime = "";
+            row.endTime = "";
+            row.isDel = false;
+            let filterArr = this.list.filter((ele) => {
+                return ele.brand && ele.model && ele.startTime && ele.endTime;
+            });
+            this.$emit("del", n);
+            this.$emit("change", filterArr);
+             
+        },
+        // 获取切换车型的数据
+        handlerBrand(arr) {
+            let row = this.list[this.chooseIndex];
+            row.brand = arr[0].brandname;
+            row.model = arr[1].name;
+            row.isDel = true;
+        },
+        // 选择时间的判断
+        handlerTime(item) {
+            if (item.startTime && item.endTime) {
+                let isBefore = moment(item.startTime).isBefore(item.endTime);
+                if (!isBefore) {
+                    item.endTime = "";
+                    this.$message.warning("结束时间必须大于开始时间");
+                } else {
+                    let filterArr = this.list.filter((ele) => {
+                        return ele.brand && ele.model;
+                    });
+                    this.$emit("change", filterArr);
+                }
+            }
+        },
+    },
 };
 </script>
 
@@ -173,7 +225,7 @@ export default {
                 background-size: 100% 100%;
                 cursor: pointer;
                 text-align: center;
-                color: #63AECC;
+                color: #63aecc;
                 line-height: 28px;
             }
             .mc-t {
@@ -202,8 +254,8 @@ export default {
             }
         }
         .mccm-vs {
-            width: 94px;
+            width: 78px;
-            height: 94px;
+            height: 78px;
             margin-top: 22px;
         }
     }

src/views/ModelInsight/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-25 13:12:20
- * @LastEditTime: 2021-11-01 17:53:34
+ * @LastEditTime: 2021-11-08 10:07:06
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/ModelInsight/index.vue
@@ -51,7 +51,7 @@
             </div>
             <div class="bdl-d5">
                 <v-label-div title="尾翼洞察">
-                    <v-btn @click="goRouter('/tailInsightDetails')">尾翼详情</v-btn>
+                    <v-btn @click="goRouter('/modelTailDetails')">尾翼详情</v-btn>
                 </v-label-div>
                 <div class="bdl-d5-bd">
                     <mlRearWingPropagationSituation :brand="brand" :model="model"></mlRearWingPropagationSituation>
@@ -139,11 +139,16 @@ export default {
                 this.model = data[0].name;
             });
         },
+        // 获取选择品牌和车型的回掉
         handlerBrand(arr) {
             this.setBrand(arr[0]);
             this.setModel(arr[1]);
             this.reload();
         },
+        // 跳转到详情
+        goRouter(path) {
+            this.$router.push({path: path})
+        }
     },
 };
 </script>

src/views/ModelTailDetails/MTDmediaDistribution/index.vue

@@ -1,33 +1,24 @@
 <!--
  * @Author: your name
- * @Date: 2021-10-15 13:41:17
+ * @Date: 2021-10-13 16:54:12
- * @LastEditTime: 2021-10-15 14:37:24
+ * @LastEditTime: 2021-11-08 13:31:01
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
+ * @FilePath: /data-show/src/views/TailInsightDetails/mediaDistribution/index.vue
 -->
 <template>
-    <div class="bd-item-round">
+    <div class="md-outter">
-        <div class="bd-item-r-cav">
+        <v-label-div title="媒体分布"></v-label-div>
+        <div class="md-inner">
             <v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
         </div>
-        <span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
     </div>
 </template>
+
 <script>
 import createOpt from "./opt";
 export default {
-    name: "roundata",
+    name: "MTDmediaDistribution",
-    props: {
-        title: {
-            type: String,
-            default: "",
-        },
-        color: {
-            type: String,
-            default: "",
-        },
-    },
     data() {
         return {
             opt: createOpt(),
@@ -53,6 +44,7 @@ export default {
 
             myChart.on("mouseout", function (e) {
                 index = e.dataIndex;
+
                 myChart.dispatchAction({
                     type: "highlight",
                     seriesIndex: 0,
@@ -63,19 +55,16 @@ export default {
     },
 };
 </script>
+
 <style lang="less" scoped>
-.bd-item-round {
+.md-outter {
-    display: inline-block;
+    width: 460px;
-    .bd-item-r-cav {
+    height: 460px;
-        width: 206px;
+    border: 2px solid #0f2a4d;
-        height: 206px;
+    margin-left: 16px;
-    }
+    .md-inner {
-    .bd-item-r-c-s1 {
+        width: 100%;
-        display: block;
+        height: calc(100% - 48px);
-        text-align: center;
-        color: #fff;
-        font-size: 18px;
-        margin-top: 30px;
     }
 }
 </style>

src/views/ModelTailDetails/MTDmediaDistribution/opt.js

@@ -0,0 +1,157 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 14:33:51
+ * @LastEditTime: 2021-10-13 17:24:58
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
+ */
+import * as echarts from "echarts";
+export default function createOpt() {
+    return {
+        legend: {
+            y: 10,
+            x: 10,
+            icon: 'roundRect',
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            data: ["新闻","论坛","微信","微博","其他"]
+          },
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['55%', '68%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  color: "#ffff",
+                  formatter: (p)=>{
+                    return p.data.name + '\n' + p.data.value; 
+                  },
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 2000, name: '新闻', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+                { value: 2000, name: '论坛', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#518ea9'
+                 }])} },
+                { value: 1000, name: '微信', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} },
+                 { value: 1000, name: '微博', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#b38b14'
+                 }])} },
+                 { value: 2000, name: '其他', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#b56a2f'
+                 }])} },
+              ],
+
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['70%', '74%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
+                },
+                center: ['50%', '50%'],//边框位置
+                data: [
+                  { value: 2000, name: '新闻', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+                  { value: 2000, name: '论坛', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#518ea9'
+                 }])} },
+                  { value: 1000, name: '微信', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} },
+                 { value: 1000, name: '微博', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#b38b14'
+                 }])} },
+                 { value: 2000, name: '其他', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#b56a2f'
+                 }])} },
+                ],
+  
+              }
+          ]
+    }
+}

src/views/ModelTailDetails/MTDrearWingInformationList/index.vue

@@ -0,0 +1,113 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-13 18:14:01
+ * @LastEditTime: 2021-11-08 13:37:26
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/TailInsightDetails/rearWingInformationList/index.vue
+-->
+<template>
+    <div class="rwl-outter">
+        <v-label-div title="尾翼信息列表"></v-label-div>
+        <div class="rwl-inner">
+            <a-form layout="inline" :form="form">
+                <a-form-item label="来源选择">
+                    <a-select v-model="form.s1" style="width: 240px">
+                        <a-select-option value="jack">
+                            Jack
+                        </a-select-option>
+                        <a-select-option value="lucy">
+                            Lucy
+                        </a-select-option>
+                        <a-select-option value="Yiminghe">
+                            yiminghe
+                        </a-select-option>
+                    </a-select>
+                </a-form-item>
+            </a-form>
+            <div class="rwl-tb">
+                <v-table :columns="columns" :data="tdata" :pagination="pagination"></v-table>
+            </div> 
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "MTDrearWingInformationList",
+    data() {
+        return {
+            form: {
+                s1: "",
+                s2: "",
+            },
+            pagination: {
+                "show-total": total => `共 ${total} 条`
+            },
+            columns: [
+                {
+                    title: "新闻标题",
+                    key: "name",
+                    dataIndex: "name",
+                },
+                {
+                    title: "来源",
+                    key: "a",
+                    dataIndex: "a",
+                    width: 120
+                },
+                 {
+                    title: "作者",
+                    key: "b",
+                    dataIndex: "b",
+                    width: 200
+                },
+                 {
+                    title: "发布时间",
+                    key: "c",
+                    dataIndex: "c",
+                    width: 180
+                },
+                 {
+                    title: "调性",
+                    key: "d",
+                    dataIndex: "d",
+                    width: 100
+                },
+                 {
+                    title: "车型",
+                    key: "e",
+                    dataIndex: "e",
+                    width: 100
+                },
+            ],
+            tdata: [
+                {
+                    name: '为了研究长城吉利谁更强，我们砸了台吉利，',
+                    a: '微博',
+                    b: '车二哥说车',
+                    c: '2021-08-18 12:00:00',
+                    d: '正面',
+                    e: 'A4'
+                }
+            ]
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.rwl-outter {
+    width: 100%;
+    height: 632px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .rwl-inner {
+        padding: 16px;
+        height: calc(100% - 48px);
+    }
+}
+.rwl-tb {
+    margin-top: 16px;
+}
+</style>

src/views/ModelTailDetails/MTDrearWingPropagationSituation/index.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-13 16:45:48
+ * @LastEditTime: 2021-11-08 13:34:59
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/TailInsightDetails/rearWingPropagationSituation/index.vue
+-->
+<template>
+    <div class="rwps-outter">
+      <v-label-div title="尾翼传播态势"></v-label-div>
+      <div class="rwps-inner">
+          <v-echarts :opt="opt"></v-echarts> 
+      </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "MTDrearWingPropagationSituation",
+    data() {
+        return {
+            opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.rwps-outter {
+    width: 460px;
+    height: 460px;
+    border: 2px solid #0F2A4D;
+    .rwps-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/ModelTailDetails/MTDrearWingPropagationSituation/opt.js

@@ -0,0 +1,75 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 15:32:24
+ * @LastEditTime: 2021-10-13 15:54:53
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
+ */
+import * as echarts from "echarts";
+export default function createOpt() {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "16px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#FFF",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                type: 'line',
+                color: '#546fc5',
+                areaStyle: {normal: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0,
+                            color: '#546fc5'
+                        }, {
+                            offset: 1,
+                            color: 'rgba(0,0,0,0)'
+                        }]),
+                }}
+            }
+        ]
+    };
+}

src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/index.vue

@@ -0,0 +1,70 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-13 17:42:57
+ * @LastEditTime: 2021-11-08 13:36:24
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/TailInsightDetails/theOverallToneOfTheTail/index.vue
+-->
+<template>
+    <div class="tot-outter">
+        <v-label-div title="尾翼整体调性"></v-label-div>
+        <div class="tot-inner">
+            <v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "MTDtheOverallToneOfTheTail",
+    data() {
+        return {
+            opt: createOpt()
+        }
+    },
+    methods: {
+        echarsFun(myChart) {
+            let index = 0;
+            myChart.dispatchAction({
+                type: "highlight",
+                seriesIndex: 0,
+                dataIndex: 0,
+            });
+            myChart.on("mouseover", function (e) {
+                if (e.dataIndex != index) {
+                    myChart.dispatchAction({
+                        type: "downplay",
+                        seriesIndex: 0,
+                        dataIndex: index,
+                    });
+                }
+            });
+
+            myChart.on("mouseout", function (e) {
+                index = e.dataIndex;
+
+                myChart.dispatchAction({
+                    type: "highlight",
+                    seriesIndex: 0,
+                    dataIndex: e.dataIndex,
+                });
+            });
+        },
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.tot-outter {
+    width: 460px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-left: 16px;
+    .tot-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/opt.js

@@ -0,0 +1,129 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-13 17:48:55
+ * @LastEditTime: 2021-10-13 17:50:56
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/TailInsightDetails/theOverallToneOfTheTail/opt.js
+ */
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 14:33:51
+ * @LastEditTime: 2021-10-13 17:24:58
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
+ */
+import * as echarts from "echarts";
+export default function createOpt() {
+    return {
+        legend: {
+            y: 10,
+            x: 10,
+            icon: 'roundRect',
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            data: ["正面","中性","负面"]
+          },
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['55%', '68%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  color: "#ffff",
+                  formatter: (p)=>{
+                    return p.data.name + '\n' + p.data.value; 
+                  },
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 2000, name: '正面', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+                { value: 2000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#518ea9'
+                 }])} },
+                { value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} },
+              ],
+
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['70%', '74%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
+                },
+                center: ['50%', '50%'],//边框位置
+                data: [
+                  { value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+                  { value: 2000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#518ea9'
+                 }])} },
+                  { value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} }
+                ],
+  
+              }
+          ]
+    }
+}

src/views/ModelTailDetails/index.vue

@@ -0,0 +1,103 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-13 16:16:41
+ * @LastEditTime: 2021-11-08 13:36:36
+ * @LastEditors: Please set LastEditors
+ * @Description: 尾翼洞察详情
+ * @FilePath: /data-show/src/views/TailInsightDetails/index.vue
+-->
+<template>
+    <div class="d-container">
+        <div class="tid-outter">
+            <div class="tid-d1">
+                <v-label-div title="尾翼洞察详情">
+                    <v-btn @click="goback">返回洞察详情</v-btn>
+                </v-label-div>
+                <div class="tid-d1-bd">
+                    <div class="d1">
+                        奥迪
+                    </div>
+                    <div class="d2">
+                       洞察分析：共监测到尾翼信息5条,2021-06-15 10:00:00尾翼传播达到波峰值,共监测到1条信息.,尾翼信息主要分布在萝卜投研,微信等媒体平台，媒体尾翼分布占比为萝卜投研 60%,微信 40%.,网民对于该品牌主要关注"上市,全新,不错,亮点,搭载"等信息.,通过对行业大数据的聚合分析,可以发现网民热议TOP10车型分别为”奥迪h6,rav4荣放,博越"等.
+                    </div>
+                </div>
+            </div>
+            <div class="tid-d2">
+                <MTDrearWingPropagationSituation></MTDrearWingPropagationSituation>
+                <MTDmediaDistribution></MTDmediaDistribution>
+                <MTDtheOverallToneOfTheTail></MTDtheOverallToneOfTheTail>
+                <mtdPopularWordCloud></mtdPopularWordCloud>
+            </div>
+            <MTDrearWingInformationList></MTDrearWingInformationList>
+        </div>
+    </div>
+</template>
+
+<script>
+import MTDrearWingPropagationSituation from "./MTDrearWingPropagationSituation"
+import MTDmediaDistribution from "./MTDmediaDistribution"
+import MTDtheOverallToneOfTheTail from "./MTDtheOverallToneOfTheTail"
+import mtdPopularWordCloud from "./mtd-popular-word-cloud"
+import MTDrearWingInformationList from "./MTDrearWingInformationList"
+export default {
+    name: "ModelTailDetails",
+    components: {
+        MTDrearWingPropagationSituation, // 尾翼传播态势
+        MTDmediaDistribution, // 媒体分布
+        MTDtheOverallToneOfTheTail, // 尾翼整体调性
+        mtdPopularWordCloud, // 热门词云
+        MTDrearWingInformationList // 尾翼信息列表
+    },
+    methods: {
+        goback() {
+            this.$router.go(-1);
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.tid-outter {
+    padding: 0px 16px 16px 16px;
+}
+.tid-d1 {
+    width: 100%;
+    height: 222px;
+    border: 2px solid #0f2a4d;
+    .tid-d1-bd {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .d1 {
+            width: 150px;
+            height: 150px;
+            border-radius: 150px;
+            background-image: url("../../assets/images/BrandInsight/img_lq.png");
+            background-repeat: no-repeat;
+            background-size: cover;
+            margin-left: 114px;
+            text-align: center;
+            line-height: 150px;
+            font-size: 24px;
+            color: #b2daf7;
+        }
+        .d2 {
+          padding: 16px;
+          width: 1500px;
+          height: 100%;
+          font-size: 20px;
+          color: #fff;
+          margin-left: 114px;
+      }
+    }
+}
+.tid-d2 {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 16px;
+}
+</style>

src/views/ModelTailDetails/mtd-popular-word-cloud/index.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-13 17:54:56
+ * @LastEditTime: 2021-11-08 13:32:37
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/TailInsightDetails/popular-word-cloud/index.vue
+-->
+<template>
+    <div class="pwc-outter">
+        <v-label-div title="热门词云"></v-label-div>
+        <div class="pwc-inner">
+            <v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
+        </div>
+    </div>
+</template>
+<script>
+import createOpt from "./opt"
+export default {
+    name: "mtdPopularWordCloud",
+    data() {
+        return {
+           opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.pwc-outter {
+    width: 460px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-left: 16px;
+    .pwc-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/ModelTailDetails/mtd-popular-word-cloud/opt.js

@@ -0,0 +1,215 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 13:35:13
+ * @LastEditTime: 2021-10-12 19:22:21
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
+ */
+// import * as echarts from "echarts";
+const dataBJ = [
+    [1, 55, 9, 56, 0.46, 18, 6, '良'],
+    [2, 25, 11, 21, 0.65, 34, 9, '优'],
+    [3, 56, 7, 63, 0.3, 14, 5, '良'],
+    [4, 33, 7, 29, 0.33, 16, 6, '优'],
+    [5, 42, 24, 44, 0.76, 40, 16, '优'],
+    [6, 82, 58, 90, 1.77, 68, 33, '良'],
+    [7, 74, 49, 77, 1.46, 48, 27, '良'],
+    [8, 78, 55, 80, 1.29, 59, 29, '良'],
+    [9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
+    // [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
+    // [11, 39, 19, 38, 0.57, 31, 15, '优'],
+    // [12, 41, 11, 40, 0.43, 21, 7, '优'],
+    // [13, 64, 38, 74, 1.04, 46, 22, '良'],
+    // [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
+    // [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
+    // [16, 33, 6, 29, 0.34, 13, 5, '优'],
+    // [17, 94, 66, 110, 1.54, 62, 31, '良'],
+    // [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
+    // [19, 57, 31, 54, 0.96, 32, 14, '良'],
+    // [20, 22, 8, 17, 0.48, 23, 10, '优'],
+    // [21, 39, 15, 36, 0.61, 29, 13, '优'],
+    // [22, 94, 69, 114, 2.08, 73, 39, '良'],
+    // [23, 99, 73, 110, 2.43, 76, 48, '良'],
+    // [24, 31, 12, 30, 0.5, 32, 16, '优'],
+    // [25, 42, 27, 43, 1, 53, 22, '优'],
+    // [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
+    // [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
+    // [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
+    // [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
+    // [30, 52, 24, 60, 1.03, 50, 21, '良'],
+    // [31, 46, 5, 49, 0.28, 10, 6, '优']
+  ];
+  const dataGZ = [
+    [1, 26, 37, 27, 1.163, 27, 13, '优'],
+    [2, 85, 62, 71, 1.195, 60, 8, '良'],
+    [3, 78, 38, 74, 1.363, 37, 7, '良'],
+    [4, 21, 21, 36, 0.634, 40, 9, '优'],
+    [5, 41, 42, 46, 0.915, 81, 13, '优'],
+    // [6, 56, 52, 69, 1.067, 92, 16, '良'],
+    // [7, 64, 30, 28, 0.924, 51, 2, '良'],
+    // [8, 55, 48, 74, 1.236, 75, 26, '良'],
+    // [9, 76, 85, 113, 1.237, 114, 27, '良'],
+    // [10, 91, 81, 104, 1.041, 56, 40, '良'],
+    // [11, 84, 39, 60, 0.964, 25, 11, '良'],
+    // [12, 64, 51, 101, 0.862, 58, 23, '良'],
+    // [13, 70, 69, 120, 1.198, 65, 36, '良'],
+    // [14, 77, 105, 178, 2.549, 64, 16, '良'],
+    // [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
+    // [16, 73, 68, 97, 0.905, 51, 34, '良'],
+    // [17, 54, 27, 47, 0.592, 53, 12, '良'],
+    // [18, 51, 61, 97, 0.811, 65, 19, '良'],
+    // [19, 91, 71, 121, 1.374, 43, 18, '良'],
+    // [20, 73, 102, 182, 2.787, 44, 19, '良'],
+    // [21, 73, 50, 76, 0.717, 31, 20, '良'],
+    // [22, 84, 94, 140, 2.238, 68, 18, '良'],
+    // [23, 93, 77, 104, 1.165, 53, 7, '良'],
+    // [24, 99, 130, 227, 3.97, 55, 15, '良'],
+    // [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
+    // [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
+    // [27, 81, 48, 62, 1.619, 26, 3, '良'],
+    // [28, 56, 48, 68, 1.336, 37, 9, '良'],
+    // [29, 82, 92, 174, 3.29, 0, 13, '良'],
+    // [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
+    // [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
+  ];
+  const dataSH = [
+    [1, 91, 45, 125, 0.82, 34, 23, '良'],
+    [2, 65, 27, 78, 0.86, 45, 29, '良'],
+    [3, 83, 60, 84, 1.09, 73, 27, '良'],
+    [4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
+    [5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
+    // [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
+    // [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
+    // [8, 89, 65, 78, 0.86, 51, 26, '良'],
+    // [9, 53, 33, 47, 0.64, 50, 17, '良'],
+    // [10, 80, 55, 80, 1.01, 75, 24, '良'],
+    // [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
+    // [12, 99, 71, 142, 1.1, 62, 42, '良'],
+    // [13, 95, 69, 130, 1.28, 74, 50, '良'],
+    // [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
+    // [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
+    // [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
+    // [17, 79, 43, 107, 1.05, 59, 37, '良'],
+    // [18, 71, 46, 89, 0.86, 64, 25, '良'],
+    // [19, 97, 71, 113, 1.17, 88, 31, '良'],
+    // [20, 84, 57, 91, 0.85, 55, 31, '良'],
+    // [21, 87, 63, 101, 0.9, 56, 41, '良'],
+    // [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
+    // [23, 87, 62, 100, 1, 72, 28, '良'],
+    // [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
+    // [25, 65, 45, 51, 0.74, 39, 17, '良'],
+    // [26, 39, 24, 38, 0.61, 47, 17, '优'],
+    // [27, 39, 24, 39, 0.59, 50, 19, '优'],
+    // [28, 93, 68, 96, 1.05, 79, 29, '良'],
+    // [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
+    // [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
+    // [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
+  ];
+//   const schema = [
+//     { name: 'date', index: 0, text: '日' },
+//     { name: 'AQIindex', index: 1, text: 'AQI指数' },
+//     { name: 'PM25', index: 2, text: 'PM2.5' },
+//     { name: 'PM10', index: 3, text: 'PM10' },
+//     { name: 'CO', index: 4, text: '一氧化碳（CO）' },
+//     { name: 'NO2', index: 5, text: '二氧化氮（NO2）' },
+//     { name: 'SO2', index: 6, text: '二氧化硫（SO2）' }
+//   ];
+  const itemStyle = {
+    opacity: 0.8,
+    shadowBlur: 10,
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    shadowColor: 'rgba(0,0,0,0.3)'
+  };
+export default function createOpt() {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "16px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: { 
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function(param) {
+                let value = param.value;
+                return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
+            }
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed'
+                }
+            }
+        },
+        yAxis: {
+            show: false,
+            type: 'value',
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed'
+                }
+            },
+            scale: true
+        },
+        series: [{
+            name: '北京',
+            data: dataBJ,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            },
+            label: {
+                show: true,
+                color: "#FFF",
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        }, {
+            name: '上海',
+            data: dataSH,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            },
+            label: {
+                show: true,
+                color: "#FFF",
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        },
+        {
+            name: '广州',
+            data: dataGZ,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            },
+            label: {
+                show: true,
+                color: "#FFF", 
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        }
+        ]
+    }
+}

src/views/WeiboDetails/modelPopularity/index.vue

@@ -8,39 +8,173 @@
 -->
 
 <template>
-    <div class="mp-outter">
+  <div class="mp-outter">
-        <v-label-div title="车型热度">
+    <v-label-div title="车型热度">
-           <div>
+      <div>
-              <v-tab-group :btns="['热门', '热赞', '热议','热转']"></v-tab-group>
+        <v-tab-group
-          </div>
+          :btns="['热门', '热赞', '热议', '热转']"
-        </v-label-div>
+          @change="handlerTab"
-        <div class="mp-inner">
+        ></v-tab-group>
-            <v-ranking-mpth :num="1" label="奥迪A4" val="594614" :lineShow="false"></v-ranking-mpth>
+      </div>
-            <v-ranking-mpth :num="2" label="奥迪A1" val="594614"></v-ranking-mpth>
+    </v-label-div>
-            <v-ranking-mpth :num="3" label="奥迪S3" val="594614"></v-ranking-mpth>
+    <div class="mp-inner">
-            <v-ranking-mpth :num="4" label="奥迪A6" val="594614"></v-ranking-mpth>
+      <v-ranking-mpth
-            <v-ranking-mpth :num="5" label="奥迪S5" val="594614"></v-ranking-mpth>
+        v-for="(item, index) in labelArr"
-        </div>
+        :key="index"
+        :num="index + 1"
+        :label="item.key"
+        :val="item.value"
+      ></v-ranking-mpth>
     </div>
+  </div>
 </template>
 
 <script>
-import vRankingMpth from "./v-ranking-mpth"
+import { getCartypeWeiBo0528 } from "@/api/WeiboDetails/index.js";
+import { getTopCarseriesObj } from "@/api/WeiboDetails/index.js";
+import vRankingMpth from "./v-ranking-mpth";
 export default {
-    name: "modelPopularity",
+  name: "modelPopularity",
-    components: {
+  data() {
-        vRankingMpth
+    return {
-    }
+      form: {
-}
+        sBrand: "",
+        token: "",
+        iType: "",
+      },
+      labelArr: [],
+      hotSeries: [],
+      hotTypes: [],
+      hotComs: [],
+      hotTrans: [],
+    };
+  },
+  components: {
+    vRankingMpth,
+  },
+
+  created() {
+    this.form.token = this.getToken;
+    this.form.sBrand = this.getBrand.brandname || this.brand;
+    this.getData();
+  },
+
+  methods: {
+    getData() {
+      Promise.all([
+        this.getHotSeries(),
+        this.getHotTypes(),
+        this.getHotComs(),
+        this.getHotTrans(),
+      ]).then(() => {
+        // 什么也不执行
+        this.handlerTab(0);
+      });
+    },
+    //热门
+    getHotSeries() {
+      return new Promise((resolve, reject) => {
+        this.form.iType = "";
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getCartypeWeiBo0528(obj)
+          .then((res) => {
+            let data = res.data || {};
+            this.hotSeries = this.toArr(data);
+            resolve(res);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    //热赞
+    getHotTypes() {
+      return new Promise((resolve, reject) => {
+        this.form.iType = 1; //改变参数写在里面
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getTopCarseriesObj(obj)
+          .then((res) => {
+            this.hotTypes = res.data;
+            resolve(res);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    //热议
+    getHotComs() {
+      return new Promise((resolve, reject) => {
+        this.form.iType = 2;
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getTopCarseriesObj(obj)
+          .then((res) => {
+            this.hotComs = res.data;
+            resolve(res);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    //热转
+    getHotTrans() {
+      return new Promise((resolve, reject) => {
+        this.form.iType = 3;
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getTopCarseriesObj(obj)
+          .then((res) => {
+            this.hotTrans = res.data;
+            resolve(res);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    // 将对象变成数组
+    toArr(obj) {
+      let arr = [];
+      for (let key in obj) {
+        let o = {
+          key: key,
+          value: obj[key],
+        };
+        arr.push(o);
+      }
+      return arr;
+    },
+    // 切换数据
+    handlerTab(n) {
+      switch (n) {
+        case 0:
+          this.labelArr = this.hotSeries;
+          break;
+        case 1:
+          this.labelArr = this.hotTypes;
+          break;
+        case 2:
+          this.labelArr = this.hotComs;
+          break;
+        case 3:
+          this.labelArr = this.hotTrans;
+          break;
+        default:
+          this.labelArr = this.hotSeries;
+          break;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .mp-outter {
-    width: 460px;
+  width: 460px;
-    height: 460px;
+  height: 460px;
-    border: 2px solid #0f2a4d;
+  border: 2px solid #0f2a4d;
-    .mp-inner {
+  .mp-inner {
-        padding: 0px 16px 16px 16px;
+    padding: 0px 16px 16px 16px;
-    }
+  }
 }
 </style>

src/views/WeiboDetails/negativeOpinionKOL/index.vue

@@ -11,8 +11,10 @@
         <v-label-div title="负面观点KOL">
         </v-label-div>
         <div class="pv-inner">
-            <div class="pv-item" v-for="(item,index) in list" :key="index">
+            <div class="pv-item" v-for="(item,index) in ds" :key="index">
-                <div class="dm"></div>
+                <div class="dm">
+                    <img class="dm-m1" :src="item.url"/>
+                </div>
                 <div class="d-f">
                     <div class="d1">{{item.title}}</div>
                     <div class="d2">粉丝数：<span class="d2-s1">{{item.fans}}</span></div>
@@ -23,37 +25,45 @@
 </template>
 
 <script>
+import {getCoreDiffuseWeiBo0528} from "@/api/WeiboDetails"
 export default {
     name: "negativeOpinionKOL",
     data() {
         return {
-            list: [
+            ds:[],
-                {
+            form: {
-                    title: "汽车之家",
+                sBrand: "",
-                    fans: '1106w'
+                sQingGan: "2",
-                },
+                iSize: 6,
-                {
+                token: "",
-                    title: "爱卡汽车",
+            },
-                    fans: '1326w'
-                },
-                {
-                    title: "新浪汽车",
-                    fans: '1326w'
-                },
-                {
-                    title: "车评人",
-                    fans: '1326w'
-                },
-                {
-                    title: "汽车专家",
-                    fans: '1326w'
-                },
-                 {
-                    title: "萝卜报告",
-                    fans: '1326w'
-                }
-            ]
         }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || this.brand;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getCoreDiffuseWeiBo0528(obj).then(res => {
+                let data = res.data || [];
+                //用户名: data._sourse.user_author
+                //粉丝数: data._sourse.weibofans
+                //头像: data._sourse.profileimgurl
+                let arr = [];
+                data.forEach((ele) => {
+                    let o={
+                        title: ele._source.user_author,
+                        fans: ele._source.weibofans,
+                        url: ele._source.profileimgurl
+                    };
+                    arr.push(o);
+                })
+                this.ds = arr;
+            });
+        },
     }
 };
 </script>
@@ -90,6 +100,11 @@ export default {
                 top: 0px;
                 background-color: #fff;
                 z-index: 10;
+                .dm-m1 {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 100%;
+                }
             }
             .d-f {
                 position: absolute;

src/views/WeiboDetails/positiveViewKOL/index.vue

@@ -7,113 +7,129 @@
  * @FilePath: /data-show/src/views/WeiboDetails/positiveViewKOL/index.vue
 -->
 <template>
-    <div class="pv-outter">
+  <div class="pv-outter">
-        <v-label-div title="正面观点KOL">
+    <v-label-div title="正面观点KOL"> </v-label-div>
-        </v-label-div>
+    <div class="pv-inner">
-        <div class="pv-inner">
+      <div class="pv-item" v-for="(item, index) in ds" :key="index">
-            <div class="pv-item" v-for="(item,index) in list" :key="index">
+        <div class="dm">
-                <div class="dm"></div>
+          <img class="dm-m1" :src="item.url"/>
-                <div class="d-f">
-                    <div class="d1">{{item.title}}</div>
-                    <div class="d2">粉丝数：<span class="d2-s1">{{item.fans}}</span></div>
-                </div>
-            </div>
         </div>
+        <div class="d-f">
+          <div class="d1">{{ item.title }}</div>
+          <div class="d2">
+            粉丝数：<span class="d2-s1">{{ item.fans }}</span>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
+import { getCoreDiffuseWeiBo0528 } from "@/api/WeiboDetails";
 export default {
-    name: "positiveViewKOL",
+  name: "positiveViewKOL",
-    data() {
+  data() {
-        return {
+    return {
-            list: [
+      ds: [],
-                {
+      form: {
-                    title: "新浪汽车",
+        sBrand: "",
-                    fans: '1106w'
+        sQingGan: "1",
-                },
+        iSize: 6,
-                {
+        token: "",
-                    title: "易车",
+      },
-                    fans: '1326w'
+    };
-                },
+  },
-                {
+  created() {
-                    title: "主编说车",
+    this.form.token = this.getToken;
-                    fans: '1326w'
+    this.form.sBrand = this.getBrand.brandname || this.brand;
-                },
+    this.getData();
-                {
+  },
-                    title: "我是评车人",
+  methods: {
-                    fans: '1326w'
+    getData() {
-                },
+      let obj = Object.assign({}, this.getCtime2, this.form);
-                {
+      getCoreDiffuseWeiBo0528(obj).then((res) => {
-                    title: "汽车老手",
+        let data = res.data || [];
-                    fans: '1326w'
+        //用户名: data._sourse.user_author
-                },
+        //粉丝数: data._sourse.weibofans
-                 {
+        //头像: data._sourse.profileimgurl
-                    title: "艾兰汽车",
+        let arr = [];
-                    fans: '1326w'
+        data.forEach((ele) => {
-                }
+          let o = {
-            ]
+            title: ele._source.user_author,
-        }
+            fans: ele._source.weibofans,
-    }
+            url: ele._source.profileimgurl,
+          };
+          arr.push(o);
+        });
+        this.ds = arr;
+      });
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .pv-outter {
-    width: 936px;
+  width: 936px;
-    height: 246px;
+  height: 246px;
-    border: 2px solid #0f2a4d;
+  border: 2px solid #0f2a4d;
-    .pv-inner {
+  .pv-inner {
-        width: 100%;
+    width: 100%;
-        height: calc(100% - 48px);
+    height: calc(100% - 48px);
-        padding: 0px 0px 16px 16px;
+    padding: 0px 0px 16px 16px;
-        display: flex;
+    display: flex;
-        justify-content: flex-start;
+    justify-content: flex-start;
-        flex-wrap: wrap;
+    flex-wrap: wrap;
-        .pv-item {
+    .pv-item {
-            width: 285px;
+      width: 285px;
-            height: 72px;
+      height: 72px;
-            display: flex;
+      display: flex;
-            justify-content: flex-start;
+      justify-content: flex-start;
-            align-items: center;
+      align-items: center;
-            position: relative;
+      position: relative;
-            margin-right: 16px;
+      margin-right: 16px;
-            margin-top: 16px;
+      margin-top: 16px;
-            .dm {
+      .dm {
-                position: absolute;
+        position: absolute;
-                width: 72px;
+        width: 72px;
-                height: 72px;
+        height: 72px;
-                border-radius: 72px;
+        border-radius: 72px;
-                border: 1px solid #ccc;
+        border: 1px solid #ccc;
-                left: 0px;
+        left: 0px;
-                top: 0px;
+        top: 0px;
-                background-color: #fff;
+        background-color: #fff;
-                z-index: 10;
+        z-index: 10;
-            }
+        .dm-m1 {
-            .d-f {
+            width: 100%;
-                position: absolute;
+            height: 100%;
-                width: 249px;
+            border-radius: 100%;
-                height: 64px;
+        }
-                left: 36px;
+      }
-                padding-left: 65px;
+      .d-f {
-                background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
+        position: absolute;
-                .d1 {
+        width: 249px;
-                    font-size: 14px;
+        height: 64px;
-                    color: #fff;
+        left: 36px;
-                    font-weight: 500;
+        padding-left: 65px;
-                    margin-top: 10px;
+        background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
-                }
+        .d1 {
-                .d2 {
+          font-size: 14px;
-                    color: #70869a;
+          color: #fff;
-                    font-size: 12px;
+          font-weight: 500;
-                    .d2-s1 {
+          margin-top: 10px;
-                        font-size: 12px;
+        }
-                        font-family: Bebas;
+        .d2 {
-                        color: #f49847;
+          color: #70869a;
-                    }
+          font-size: 12px;
-                }
+          .d2-s1 {
-            }
+            font-size: 12px;
+            font-family: Bebas;
+            color: #f49847;
+          }
         }
+      }
     }
+  }
 }
 </style>

src/views/WeiboDetails/weiboContentTOPVolume/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-14 15:54:06
- * @LastEditTime: 2021-11-04 16:55:02
+ * @LastEditTime: 2021-11-04 17:03:24
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/index.vue
@@ -51,15 +51,15 @@ export default {
                 let data = res.data || [];
                 let arr = [];
                 data.sort(comparePig('value'));
+                let maxVal = data[0].value
                 data.forEach((ele,index) => {
                     let obj = {
                         value: ele.value,
-                        opt: createOpt(ele.key,this.colors[index],ele.value)
+                        opt: createOpt(ele.key,this.colors[index],ele.value, maxVal)
                     }
                     arr.push(obj)
                 })
                 this.list = arr;
-                // this.opt1 = createOpt(data[0].key,'#306cc0',data[0].value);
                 this.load = false;
             });
         }

src/views/WeiboDetails/weiboContentTOPVolume/opt.js

@@ -1,14 +1,14 @@
 /*
  * @Author: your name
  * @Date: 2021-10-14 16:05:12
- * @LastEditTime: 2021-10-14 18:39:52
+ * @LastEditTime: 2021-11-04 17:05:41
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/opt.js
  * startAngle: 180,
  */
 import * as echarts from "echarts";
-export default function createOpt(name, color, num) {
+export default function createOpt(name, color, num, maxVal) {
     return {
         tooltip: {
             backgroundColor: "#08182F",
@@ -31,7 +31,7 @@ export default function createOpt(name, color, num) {
                 startAngle: 180,
                 endAngle: 0,
                 min: 0,
-                max: 800,
+                max: maxVal * 5,
                 splitNumber: 5,
                 detail: { show: false, formatter: '{value}%' },
                 axisLine: {

src/views/WeiboDetails/weiboContentType/index.vue

@@ -7,72 +7,113 @@
  * @FilePath: /data-show/src/views/WeiboDetails/weiboContentType/index.vue
 -->
 <template>
-    <div class="wct-outter">
+  <div class="wct-outter">
-        <v-label-div title="微博内容类型">
+    <v-label-div title="微博内容类型"> </v-label-div>
-        </v-label-div>
+    <div class="wct-inner">
-        <div class="wct-inner">
+      <div class="d1">
-            <div class="d1">
+        <v-echarts :opt="opt"></v-echarts>
-                <v-echarts :opt="opt"></v-echarts>
+      </div>
-            </div>
+      <div class="d2">
-            <div class="d2">
+        <v-label-ctx
-                <v-label-ctx label="原创" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '137px' }"></v-label-ctx>
+          v-for="(item, index) in labelArr"
-                <v-label-ctx label="评论" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '137px' }"></v-label-ctx>
+          :key="index"
-                <v-label-ctx label="转发" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '137px' }"></v-label-ctx>
+          :label="item.key"
-            </div>
+          :cont="item.value"
-        </div>
+          :percentage="((item.value / total) * 100).toFixed(2) + '%'"
+          :color="colors[index]"
+          :eStyle="{ height: '8.54rem' }"
+        ></v-label-ctx>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import {getDirectWeiBo0528} from "@/api/WeiboDetails"
+import { getWtypeWeiBo0528 } from "@/api/WeiboDetails";
 import createOpt from "./opt";
 export default {
-    name: "weiboContentType",
+  name: "weiboContentType",
-    data() {
+  data() {
-        return {
+    return {
-            load: false, 
+      load: false,
-             form: {
+      form: {
-                sBrand: "",
+        sBrand: "",
-                token: "",
+        token: "",
-            },
+      },
-            opt: createOpt()
+      labelArr: [],
-        };
+      total: 0,
+      opt: createOpt(),
+      colors: [
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+      ],
+    };
+  },
+  created() {
+    this.form.token = this.getToken;
+    this.form.sBrand = this.getBrand.brandname || this.brand;
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.load = true;
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getWtypeWeiBo0528(obj).then((res) => {
+        let data = res.data || [];
+        this.doVal(data);
+      });
+      console.log();
     },
-    created() {
+    doVal(arr = []) {
-        this.form.token = this.getToken;
+      let total = 0;
-        this.form.sBrand = this.getBrand.brandname || this.brand;
+      arr.forEach((ele) => {
-        this.getData();
+        total += ele.value * 1;
+      });
+      this.total = total;
+      this.labelArr = arr;
+      this.opt = createOpt(this.labelArr, this.colors);
     },
-    methods: {
+  },
-        getData() {
-            this.load = true;
-            let obj = Object.assign({}, this.getCtime2, this.form);
-            getDirectWeiBo0528(obj);
-            console.log();
-        }
-    }
 };
 </script>
 <style lang="less" scoped>
 .wct-outter {
-    width: 618px;
+  width: 618px;
-    height: 460px;
+  height: 460px;
-    border: 2px solid #0f2a4d;
+  border: 2px solid #0f2a4d;
-    margin-left: 16px;
+  margin-left: 16px;
-    overflow: hidden;
+  overflow: hidden;
-    .wct-inner {
+  .wct-inner {
-        width: 100%;
+    width: 100%;
-        height: calc(100% - 48px);
+    height: calc(100% - 48px);
-        display: flex;
+    display: flex;
-        justify-content: flex-start;
+    justify-content: flex-start;
-        .d1 {
+    .d1 {
-            width: 280px;
+      width: 280px;
-            height: 100%;
+      height: 100%;
-        }
+    }
-        .d2 {
+    .d2 {
-            width: 300px;
+      width: 300px;
-            margin-left: 16px;
+      margin-left: 16px;
-        }
     }
+  }
 }
 </style>

src/views/WeiboDetails/weiboContentType/opt.js

@@ -1,114 +1,80 @@
 /*
  * @Author: your name
- * @Date: 2021-10-12 15:14:58
+ * @Date: 2021-10-09 09:49:50
- * @LastEditTime: 2021-10-14 10:43:47
+ * @LastEditTime: 2021-10-28 13:07:24
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
+ * @FilePath: /data-show/src/views/Index/userPortrait/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
+// let colors = ['#3373CC', '#CC9D12', '#54BF93','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#f7a35c','#90ed7d']
-    return {
+function createData(ds = [], colors) {
-        series: [
+  let arr = [];
-            {
+  ds.map((ele, index) => {
-              name: 'Access From0',
+    let obj = {
-              type: 'pie',
+      value: ele.value,
-              radius: ['63%', '77%'],
+      name: ele.key,
-              avoidLabelOverlap: false,
+      itemStyle: {
-              label: {
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                show: false,
+          //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                position: 'center',
+          //给第一个设置0，第四个设置1，就是垂直渐变
-                fontSize: '40',
+          offset: 0,
-                color: "#ffff",
+          color: 'black'
-            },
+        }, {
-              emphasis: {
+          offset: 1,
-                label: {
+          color: colors[index]
-                  show: true,
+        }])
-                  fontSize: '40',
+      }
-                  color: "#ffff",
-                  formatter: (p)=>{
-                    return p.data.name + '\n' + p.data.value; 
-                  },
-                }
-              },
-              labelLine: {
-                show: false
-              },
-              data: [
-                { value: 2200, name: '男性', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#CC9D12'
-                 }])} },
-                { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-              ],
-
-            },
-            {
-                name: 'Access From1',
-                type: 'pie',
-                radius: ['80%', '84%'],
-                avoidLabelOverlap: false,
-                label: {
-                    show: false,
-                    position: 'center'
-                  },
-                labelLine: {
-                  show: false
-                },
-                center: ['50%', '50%'],//边框位置
-                data: [
-                  { value: 2200, name: '男性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                  { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#CC9D12'
-                 }])} },
-                  { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-                ],
-  
-              }
-          ]
     }
+    arr.push(obj)
+  })
+  return arr;
+}
+export default function createOpt(ds = [], color = []) {
+  const data = createData(ds, color);
+  return {
+    series: [
+      {
+        name: 'Access From0',
+        type: 'pie',
+        radius: ['65%', '80%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center',
+          lineHeight: 30
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '16',
+            color: "#ffff",
+            fontWeight: 'bold',
+            formatter: function (p) {
+              return `${p.data.name}\n${p.percent}%\n${p.data.value}`
+            }
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: data
+      },
+      {
+        name: 'Access From1',
+        type: 'pie',
+        radius: ['86%', '94%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        labelLine: {
+          show: false
+        },
+        center: ['50%', '50%'],//边框位置
+        data: data
+      }
+    ]
+  }
 }

src/views/WeiboDetails/weiboSpreadFission/index.vue

@@ -17,23 +17,31 @@
 </template>
 
 <script>
-import {getGraphData} from "@/api/getEchars"
+import {getGraphData} from "@/api/getEchars";
+//import {getDiffuseZhuTi} from "@/api/WeiboDetails";
 import createOpt from "./opt"
 export default {
     name: "weiboSpreadFission",
     data() {
         return {
-            opt: {}
+            opt: {},
+            form: {
+                token:"",
+                sBrand:""
+            }
         }
     },
     created() {
-        this.drawGraph()
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || this.brand;
+        this.drawGraph();
     },
     methods: {
         drawGraph() {
-            getGraphData().then(res => {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getGraphData(obj).then(res => {
                 this.opt = createOpt(res.data)
-            })
+            });
         }
     }
     

src/views/WeiboDetails/weiboTonalDistribution/index.vue

@@ -1,42 +1,116 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-14 19:41:24
- * @LastEditTime: 2021-10-14 20:04:50
+ * @LastEditTime: 2021-11-05 10:02:09
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/WeiboDetails/weiboTonalDistribution/index.vue
 -->
 <template>
-    <div class="wtd-outter">
+  <div class="wtd-outter">
-        <v-label-div title="调性分布">
+    <v-label-div title="调性分布"> </v-label-div>
-        </v-label-div>
+    <div class="wtd-inner">
-        <div class="wtd-inner">
+      <div class="wtd-item" v-for="(value,key) in obj"
-            <v-echarts :opt="opt"></v-echarts>
+        :key="key">
-        </div>
+        <v-percent :percentage="value.positive"></v-percent>
+        <span class="s1">{{value.show}}</span>
+        <v-percent color="#b78e11" :percentage="value.negative" reverse></v-percent>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getBoauthenAffectionsWeiBo0528 } from "@/api/WeiboDetails";
 export default {
-    name: "wtd-outter",
+  name: "wtd-outter",
-    data() {
+  data() {
-        return {
+    return {
-           opt: createOpt()
+      form: {
-        }
+        token: "",
-    }
+        sBrand: "",
-}
+      },
+      obj: {
+        bigV:{positive:0.1,negative:0.1,show:"个人大V"},
+        media:{positive:0.1,negative:0.1,show:"媒体"},
+        enterprice:{positive:0.1,negative:0.1,show:"企业"},
+        goverment:{positive:0.1,negative:0.1,show:"政府"},
+        famousPerson:{positive:0.1,negative:0.1,show:"名人"},
+        uncertified:{positive:0.1,negative:0.1,show:"未认证"},
+        certified:{positive:0.1,negative:0.1,show:"已认证"}
+      },
+    };
+  },
+  created() {
+    this.form.token = this.getToken;
+    this.form.sBrand = this.getBrand.brandname || this.Brand;
+    this.getData();
+  },
+  methods: {
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getBoauthenAffectionsWeiBo0528(obj).then(res => {
+          let data = res.data;
+          data.forEach(ele => {
+              switch (ele.key) {
+                case ("个人大V"):
+                  this.obj.bigV.positive = ele.value[0]/(ele.value[0].value+ele.value[2].value+0.1); //index[0]为正面数据
+                  this.obj.bigV.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1); //index[2]为负面数据
+                  break;
+                case ("媒体"):
+                  this.obj.media.positive = ele.value[0].value/(ele.value[0].value+ele.value[2].value+0.1);
+                  this.obj.media.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1);
+                  break;
+                case ("企业"):
+                  this.obj.enterprice.positive = ele.value[0].value/(ele.value[0].value+ele.value[2].value+0.1);
+                  this.obj.enterprice.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1);
+                  break;
+                case ("政府"):
+                  this.obj.goverment.positive = ele.value[0].value/(ele.value[0].value+ele.value[2].value+0.1);
+                  this.obj.goverment.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1);
+                  break;
+                case ("名人"):
+                  this.obj.famousPerson.positive = ele.value[0].value/(ele.value[0].value+ele.value[2].value+0.1);
+                  this.obj.famousPerson.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1);
+                  break;
+                case ("非认证"):
+                  this.obj.uncertified.positive = ele.value[0].value/(ele.value[0].value+ele.value[2].value+0.1);
+                  this.obj.uncertified.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1);
+                  break;
+                case ("已认证"):
+                  this.obj.certified.positive = ele.value[0].value/(ele.value[0].value+ele.value[2].value+0.1);
+                  this.obj.certified.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1);
+                  break;
+                default:
+                  break;
+              }
+          })
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .wtd-outter {
-    width: 460px;
+  width: 460px;
-    height: 460px;
+  height: 460px;
-    border: 2px solid #0f2a4d;
+  border: 2px solid #0f2a4d;
-    margin-left: 16px;
+  margin-left: 16px;
-    .wtd-inner {
+  .wtd-inner {
-        width: 100%;
+    width: 100%;
-        height: calc(100% - 48px);
+    padding: 20px 16px;
+    .wtd-item {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 36px;
+      .s1 {
+        display: block;
+        color: #fff;
+        font-size: 14px;
+        font-weight: 500;
+      }
     }
+  }
 }
 </style>

src/views/WeiboDetails/weiboUserActiveArea/index.vue

@@ -32,7 +32,6 @@ export default {
         sBrand: "",
         token: "",
       },
-      arr: [],
       opt1: createOptD1(),
       opt2: createOptD2(),
     };
@@ -48,26 +47,30 @@ export default {
       let obj = Object.assign({}, this.getCtime2, this.form);
       getRegionWeiBo(obj).then((res) => {
         let data = res.data || {};
-        this.arr = this.toArr(data);
+        let arr = this.toArr(data);
         let dx = []; //省份
         let ds = []; //数据
-        this.arr.forEach((ele) => {
+        arr.forEach((ele) => {
-          let key = ele.key;
+          let name = ele.name || "";
+          if(name.indexOf('省') === -1) {
+              ele.name = ele.name + '市'
+          }
           let value = ele.value;
-          dx.push(key);
+          dx.push(ele.name);
           ds.push(value);
         });
+        let dm = arr //省份和数据
         this.opt1 = createOptD1(dx, ds);
+        this.opt2 = createOptD2(dm);
       });
-      console.log();
     },
     // 将对象变成数组
     toArr(obj) {
       let arr = [];
       for (let key in obj) {
         let o = {
-          key: key,
+          name: key,
-          value: obj[key],
+          value: obj[key] * 1,
         };
         arr.push(o);
       }

src/views/WeiboDetails/weiboUserActiveArea/opt1.js

@@ -9,12 +9,13 @@
  * @FilePath: /data-show/src/views/Index/tailInsight/opt.js
  */
 import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
 export default function createOptD1(dx=[],ds=[]) {
     return {
         grid: {
-            left: '4%',
+            left: 16,
-            right: '4%',
+            right: '5%',
-            bottom: '4%',
+            bottom: 10,
             top: "1%",
             containLabel: true
         },
@@ -36,6 +37,12 @@ export default function createOptD1(dx=[],ds=[]) {
                     color: "#fff",
                 },
             },
+            axisLabel: {
+                formatter: (value) => {
+                  let str = bigNumberTransform(value);
+                  return str;
+                }
+              },
             splitLine: {
                 lineStyle: {
                     type: "dashed", // y轴分割线类型
@@ -55,12 +62,13 @@ export default function createOptD1(dx=[],ds=[]) {
                     color: "#fff",
                 },
             },
+            inverse: true
         },
         series: [
             {
                 name: '2011',
                 type: 'bar',
-                barWidth: 24,
+                barWidth: 20,
                 data: ds,
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                     offset: 0,

src/views/WeiboDetails/weiboUserActiveArea/opt2.js

@@ -1,21 +1,13 @@
 /*
  * @Author: your name
  * @Date: 2021-10-14 11:53:16
- * @LastEditTime: 2021-10-14 15:51:30
+ * @LastEditTime: 2021-11-04 17:17:02
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/opt2.js
  */
-const ini_data = [];//初始化省份数组
+
-const provArr = ['河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东'];
+export default function createOptD2(dm) {
-//正则省份，将省与市的字眼去掉，框架不识别
-for (var i = 0; i < provArr.length; i++) {
-    var str = provArr[i];
-    var re = /省|市/g;  //全局匹配
-    var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组
-    ini_data.push(str2);
-}
-export default function createOptD2() {
     return {
         tooltip: {
             trigger: "item",
@@ -95,39 +87,7 @@ export default function createOptD2() {
                 //         areaColor: '#3edffe'
                 //     }
                 // },
-                data: [
+                data: dm
-                    {
-                        name: "河北省",
-                        value: 1000,
-                        // selected: true,
-                    },
-                    {
-                        name: "浙江省",
-                        value: 1100,
-                        // selected: true
-                    },
-                    {
-                        name: "山东省",
-                        value: 1200,
-                        // selected: true
-                    },
-                    {
-                        name: "山西省",
-                        value: 1300,
-                        // selected: true
-                    },
-                    {
-                        name: "上海市",
-                        value: 1400,
-                        // selected: true
-                    },
-                    {
-                        name: "江苏省",
-                        value: 1500,
-                        // selected: true
-                    }
-                ]
-
             }
         ]
     }

src/views/WeiboDetails/weiboWordCloud/index.vue

@@ -7,39 +7,109 @@
  * @FilePath: /data-show/src/views/WeiboDetails/weiboWordCloud/index.vue
 -->
 <template>
-    <div class="wwc-outter">
+  <div class="wwc-outter" v-loading="load">
-        <v-label-div title="词云分布">
+    <v-label-div title="词云分布">
-           <div>
+      <div>
-              <v-tab-group :btns="['正面', '负面']"></v-tab-group>
+        <v-tab-group
-          </div>
+          :btns="['正面', '负面']"
-        </v-label-div>
+          @change="handlerTab"
-        <div class="wwc-inner">
+        ></v-tab-group>
-           <v-echarts :opt="opt"></v-echarts> 
+      </div>
-        </div>
+    </v-label-div>
+    <div class="wwc-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getNegative } from "@/api/WeiboDetails";
+import { getPositive } from "@/api/WeiboDetails";
+import createWordCloud from "@/utils/gol/bubbleWord";
+//import createOpt from "./opt";
 export default {
-    name: "weiboWordCloud",
+  name: "weiboWordCloud",
-    data() {
+  data() {
-        return {
+    return {
-            opt: createOpt()
+      opt: {},
-        }
+      load: false,
-    }
+      positiveData: {},
-}
+      negativeData: {},
+      form: {
+        sBrand: "",
+        token: "",
+      },
+    };
+  },
+  created() {
+    this.form.token = this.getToken;
+    this.form.sBrand = this.getBrand.brandname || this.brand;
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.load = true;
+      Promise.all([this.getH(), this.getF()]).then(() => {
+        // 什么也不执行
+        this.handlerTab(0);
+        this.load = false;
+      });
+    },
+    // 正面
+    getH() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getPositive(obj)
+          .then((res) => {
+            this.positiveData = res.data || {};
+            resolve(res);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    // 负面
+    getF() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getNegative(obj)
+          .then((res) => {
+            this.negativeData = res.data || {};
+            resolve(res);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    // 切换数据
+    handlerTab(n) {
+      switch (n) {
+        case 0:
+          this.opt = createWordCloud(this.positiveData);
+          break;
+        case 1:
+          this.opt = createWordCloud(this.negativeData);
+          break;
+        default:
+          this.opt = createWordCloud(this.positiveData);
+          break;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.wwc-outter{
+.wwc-outter {
-    width: 460px;
+  width: 460px;
-    height: 460px;
+  height: 460px;
-    border: 2px solid #0f2a4d;
+  border: 2px solid #0f2a4d;
-    margin-left: 16px;
+  margin-left: 16px;
-    .wwc-inner {
+  .wwc-inner {
-        width: 100%;
+    width: 100%;
-        height: calc(100% - 48px);
+    height: calc(100% - 48px);
-    }
+  }
 }
 </style>