From e935bcfb973630d82e4ad2f000a6818d08554c4e Mon Sep 17 00:00:00 2001
From: zx <604444282@qq.com>
Date: Fri, 26 Nov 2021 15:21:59 +0800
Subject: [PATCH] =?UTF-8?q?zx-=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BrandComparison/BrandComparison.vue |  96 +++++--
 .../index.vue                                 | 124 ++++++++
 .../brandEventComparisonStoken/index.vue      | 152 ++++++++++
 .../brandRearWingComparisonStoken/index.vue   |  79 ++++++
 .../brandTonalDistributionStoken/index.vue    | 129 +++++++++
 .../channelDistributionStoken/index.vue       |  88 ++++++
 .../index.vue                                 |  82 ++++++
 .../index.vue                                 | 130 +++++++++
 .../index.vue                                 | 128 +++++++++
 .../index.vue                                 |  85 ++++++
 .../index.vue                                 |  86 ++++++
 .../forumTonalComparisonStoken/index.vue      | 140 ++++++++++
 .../informationTrendStoken/index.vue          |  63 +++++
 .../informationTrendStoken/opt.js             | 126 +++++++++
 .../index.vue                                 |  91 ++++++
 .../index.vue                                 |  81 ++++++
 .../overallInformationStoken/index.vue        |  78 ++++++
 .../index.vue                                 |  77 +++++
 .../index.vue                                 | 132 +++++++++
 .../index.vue                                 | 138 +++++++++
 .../tailTOPMediaStoken/index.vue              | 119 ++++++++
 .../userAreaDistributionStoken/index.vue      | 147 ++++++++++
 .../weiboBigVComparisonStoken/index.vue       |  89 ++++++
 .../index.vue                                 | 142 ++++++++++
 .../weiboTuneComparisonStoken/index.vue       | 134 +++++++++
 .../weiboUserPortraitStoken/index.vue         | 199 +++++++++++++
 src/views/ModelComparison/BrandComparison.vue | 130 +++++++--
 .../index.vue                                 | 127 +++++++++
 .../brandCompateHeaderStoken/index.vue        | 264 ++++++++++++++++++
 .../brandEventComparisonStoken/index.vue      | 164 +++++++++++
 .../brandRearWingComparisonStoken/index.vue   |  82 ++++++
 .../brandTonalDistributionStoken/index.vue    | 134 +++++++++
 .../channelDistributionStoken/index.vue       |  91 ++++++
 .../index.vue                                 |  79 ++++++
 .../index.vue                                 | 120 ++++++++
 .../index.vue                                 | 120 ++++++++
 .../index.vue                                 |  90 ++++++
 .../index.vue                                 |  91 ++++++
 .../index.vue                                 | 133 +++++++++
 .../forumTonalComparisonStoken/index.vue      | 119 ++++++++
 .../informationTrendStoken/index.vue          |  83 ++++++
 .../index.vue                                 |  83 ++++++
 .../index.vue                                 |  85 ++++++
 .../overallInformationStoken/index.vue        |  87 ++++++
 .../index.vue                                 |  87 ++++++
 .../index.vue                                 | 137 +++++++++
 .../index.vue                                 | 140 ++++++++++
 .../tailTOPMediaStoken/index.vue              | 113 ++++++++
 .../userAreaDistributionStoken/index.vue      | 129 +++++++++
 .../weiboBigVComparisonStoken/index.vue       |  84 ++++++
 .../index.vue                                 | 147 ++++++++++
 .../weiboTuneComparisonStoken/index.vue       | 139 +++++++++
 .../weiboUserPortraitStoken/index.vue         | 181 ++++++++++++
 53 files changed, 6123 insertions(+), 51 deletions(-)
 create mode 100644 src/views/BrandComparison/brandCommunicationTOPMediaStoken/index.vue
 create mode 100644 src/views/BrandComparison/brandEventComparisonStoken/index.vue
 create mode 100644 src/views/BrandComparison/brandRearWingComparisonStoken/index.vue
 create mode 100644 src/views/BrandComparison/brandTonalDistributionStoken/index.vue
 create mode 100644 src/views/BrandComparison/channelDistributionStoken/index.vue
 create mode 100644 src/views/BrandComparison/comparisonOfForumPostingTrendsStoken/index.vue
 create mode 100644 src/views/BrandComparison/comparisonOfNegativeTopicsInForumsStoken/index.vue
 create mode 100644 src/views/BrandComparison/comparisonOfPositiveTopicsInTheForumStoken/index.vue
 create mode 100644 src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractionsStoken/index.vue
 create mode 100644 src/views/BrandComparison/comparisonOfWeiboInformationStoken/index.vue
 create mode 100644 src/views/BrandComparison/forumTonalComparisonStoken/index.vue
 create mode 100644 src/views/BrandComparison/informationTrendStoken/index.vue
 create mode 100644 src/views/BrandComparison/informationTrendStoken/opt.js
 create mode 100644 src/views/BrandComparison/informationVolumeByChannelStoken/index.vue
 create mode 100644 src/views/BrandComparison/keyMediaCommunicationComparisonStoken/index.vue
 create mode 100644 src/views/BrandComparison/overallInformationStoken/index.vue
 create mode 100644 src/views/BrandComparison/overallNumberOfInteractionsStoken/index.vue
 create mode 100644 src/views/BrandComparison/overallWordCloudComparisonStoken/index.vue
 create mode 100644 src/views/BrandComparison/summaryAndComparisonOfForumInformationStoken/index.vue
 create mode 100644 src/views/BrandComparison/tailTOPMediaStoken/index.vue
 create mode 100644 src/views/BrandComparison/userAreaDistributionStoken/index.vue
 create mode 100644 src/views/BrandComparison/weiboBigVComparisonStoken/index.vue
 create mode 100644 src/views/BrandComparison/weiboContentDirectionComparisonStoken/index.vue
 create mode 100644 src/views/BrandComparison/weiboTuneComparisonStoken/index.vue
 create mode 100644 src/views/BrandComparison/weiboUserPortraitStoken/index.vue
 create mode 100644 src/views/ModelComparison/brandCommunicationTOPMediaStoken/index.vue
 create mode 100644 src/views/ModelComparison/brandCompateHeaderStoken/index.vue
 create mode 100644 src/views/ModelComparison/brandEventComparisonStoken/index.vue
 create mode 100644 src/views/ModelComparison/brandRearWingComparisonStoken/index.vue
 create mode 100644 src/views/ModelComparison/brandTonalDistributionStoken/index.vue
 create mode 100644 src/views/ModelComparison/channelDistributionStoken/index.vue
 create mode 100644 src/views/ModelComparison/comparisonOfForumPostingTrendsStoken/index.vue
 create mode 100644 src/views/ModelComparison/comparisonOfNegativeTopicsInForumsStoken/index.vue
 create mode 100644 src/views/ModelComparison/comparisonOfPositiveTopicsInTheForumStoken/index.vue
 create mode 100644 src/views/ModelComparison/comparisonOfTheNumberOfWeiboInteractionsStoken/index.vue
 create mode 100644 src/views/ModelComparison/comparisonOfWeiboInformationStoken/index.vue
 create mode 100644 src/views/ModelComparison/eventBrandTonalDistributionStoken/index.vue
 create mode 100644 src/views/ModelComparison/forumTonalComparisonStoken/index.vue
 create mode 100644 src/views/ModelComparison/informationTrendStoken/index.vue
 create mode 100644 src/views/ModelComparison/informationVolumeByChannelStoken/index.vue
 create mode 100644 src/views/ModelComparison/keyMediaCommunicationComparisonStoken/index.vue
 create mode 100644 src/views/ModelComparison/overallInformationStoken/index.vue
 create mode 100644 src/views/ModelComparison/overallNumberOfInteractionsStoken/index.vue
 create mode 100644 src/views/ModelComparison/overallWordCloudComparisonStoken/index.vue
 create mode 100644 src/views/ModelComparison/summaryAndComparisonOfForumInformationStoken/index.vue
 create mode 100644 src/views/ModelComparison/tailTOPMediaStoken/index.vue
 create mode 100644 src/views/ModelComparison/userAreaDistributionStoken/index.vue
 create mode 100644 src/views/ModelComparison/weiboBigVComparisonStoken/index.vue
 create mode 100644 src/views/ModelComparison/weiboContentDirectionComparisonStoken/index.vue
 create mode 100644 src/views/ModelComparison/weiboTuneComparisonStoken/index.vue
 create mode 100644 src/views/ModelComparison/weiboUserPortraitStoken/index.vue

diff --git a/src/views/BrandComparison/BrandComparison.vue b/src/views/BrandComparison/BrandComparison.vue
index a097591..793e061 100644
--- a/src/views/BrandComparison/BrandComparison.vue
+++ b/src/views/BrandComparison/BrandComparison.vue
@@ -23,42 +23,58 @@
             </vue-lazy-component>
             <vue-lazy-component>
                 <div class="bc-d2">
-                    <informationTrend></informationTrend>
-                    <overallInformation></overallInformation>
-                    <overallNumberOfInteractions></overallNumberOfInteractions>
+                    <informationTrend v-if="!$slots['skeleton']"></informationTrend>
+                    <informationTrendStoken slot="skeleton" v-else></informationTrendStoken>
+                    <overallInformation v-if="!$slots['skeleton']"></overallInformation>
+                    <overallInformationStoken slot="skeleton" v-else></overallInformationStoken>
+                    <overallNumberOfInteractions v-if="!$slots['skeleton']"></overallNumberOfInteractions>
+                    <overallNumberOfInteractionsStoken slot="skeleton" v-else></overallNumberOfInteractionsStoken>
                 </div>
             </vue-lazy-component>
             <vue-lazy-component>
-                <brandTonalDistribution></brandTonalDistribution>
+                <brandTonalDistribution v-if="!$slots['skeleton']"></brandTonalDistribution>
+                <brandTonalDistributionStoken slot="skeleton" v-else></brandTonalDistributionStoken>
             </vue-lazy-component>
             <vue-lazy-component>
                 <div class="bc-d3">
-                    <channelDistribution></channelDistribution>
-                    <keyMediaCommunicationComparison></keyMediaCommunicationComparison>
+                    <channelDistribution v-if="!$slots['skeleton']"></channelDistribution>
+                    <channelDistributionStoken slot="skeleton" v-else></channelDistributionStoken>
+                    <keyMediaCommunicationComparison v-if="!$slots['skeleton']"></keyMediaCommunicationComparison>
+                    <keyMediaCommunicationComparisonStoken slot="skeleton" v-else></keyMediaCommunicationComparisonStoken>
                 </div>
             </vue-lazy-component>
             <vue-lazy-component>
-                <brandCommunicationTOPMedia></brandCommunicationTOPMedia>
+                <brandCommunicationTOPMedia v-if="!$slots['skeleton']"></brandCommunicationTOPMedia>
+                <brandCommunicationTOPMediaStoken slot="skeleton" v-else></brandCommunicationTOPMediaStoken>
             </vue-lazy-component>
             <vue-lazy-component>
-                <overallWordCloudComparison></overallWordCloudComparison>
+                <overallWordCloudComparison v-if="!$slots['skeleton']"></overallWordCloudComparison>
+                <overallWordCloudComparisonStoken slot="skeleton" v-else></overallWordCloudComparisonStoken>
             </vue-lazy-component>
             <vue-lazy-component>
-                <brandEventComparison></brandEventComparison>
+                <brandEventComparison v-if="!$slots['skeleton']"></brandEventComparison>
+                <brandEventComparisonStoken slot="skeleton" v-else></brandEventComparisonStoken>
             </vue-lazy-component>
             <vue-lazy-component>
                 <div class="bc-d4">
                     <v-label-div title="品牌微博对比"></v-label-div>
                     <div class="bc-d4-d1">
-                        <comparisonOfWeiboInformation></comparisonOfWeiboInformation>
-                        <comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
-                        <weiboBigVComparison></weiboBigVComparison>
+                        <comparisonOfWeiboInformation v-if="!$slots['skeleton']"></comparisonOfWeiboInformation>
+                        <comparisonOfWeiboInformationStoken slot="skeleton" v-else></comparisonOfWeiboInformationStoken>
+                        <comparisonOfTheNumberOfWeiboInteractions v-if="!$slots['skeleton']"></comparisonOfTheNumberOfWeiboInteractions>
+                        <comparisonOfTheNumberOfWeiboInteractionsStoken slot="skeleton" v-else></comparisonOfTheNumberOfWeiboInteractionsStoken>
+                        <weiboBigVComparison v-if="!$slots['skeleton']"></weiboBigVComparison>
+                        <weiboBigVComparisonStoken slot="skeleton" v-else></weiboBigVComparisonStoken>
                     </div>
-                    <weiboTuneComparison></weiboTuneComparison>
-                    <weiboContentDirectionComparison></weiboContentDirectionComparison>
+                    <weiboTuneComparison v-if="!$slots['skeleton']"></weiboTuneComparison>
+                    <weiboTuneComparisonStoken slot="skeleton" v-else></weiboTuneComparisonStoken>
+                    <weiboContentDirectionComparison v-if="!$slots['skeleton']"></weiboContentDirectionComparison>
+                    <weiboContentDirectionComparisonStoken slot="skeleton" v-else></weiboContentDirectionComparisonStoken>
                     <div class="bc-d4-d2">
-                        <userAreaDistribution></userAreaDistribution>
-                        <weiboUserPortrait></weiboUserPortrait>
+                        <userAreaDistribution v-if="!$slots['skeleton']"></userAreaDistribution>
+                        <userAreaDistributionStoken slot="skeleton" v-else></userAreaDistributionStoken>
+                        <weiboUserPortrait v-if="!$slots['skeleton']"></weiboUserPortrait>
+                        <weiboUserPortraitStoken slot="skeleton" v-else></weiboUserPortraitStoken>
                     </div>
                 </div>
             </vue-lazy-component>
@@ -66,22 +82,30 @@
                 <div class="bc-d5">
                     <v-label-div title="品牌论坛对比"></v-label-div>
                     <div class="bc-d5-dd1">
-                        <summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
-                        <comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
+                        <summaryAndComparisonOfForumInformation v-if="!$slots['skeleton']"></summaryAndComparisonOfForumInformation>
+                        <summaryAndComparisonOfForumInformationStoken slot="skeleton" v-else></summaryAndComparisonOfForumInformationStoken>
+                        <comparisonOfForumPostingTrends v-if="!$slots['skeleton']"></comparisonOfForumPostingTrends>
+                        <comparisonOfForumPostingTrendsStoken slot="skeleton" v-else></comparisonOfForumPostingTrendsStoken>
                     </div>
-                    <forumTonalComparison></forumTonalComparison>
-                    <comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
-                    <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
+                    <forumTonalComparison v-if="!$slots['skeleton']"></forumTonalComparison>
+                    <forumTonalComparisonStoken slot="skeleton" v-else></forumTonalComparisonStoken>
+                    <comparisonOfPositiveTopicsInTheForum v-if="!$slots['skeleton']"></comparisonOfPositiveTopicsInTheForum>
+                    <comparisonOfPositiveTopicsInTheForumStoken slot="skeleton" v-else></comparisonOfPositiveTopicsInTheForumStoken>
+                    <comparisonOfNegativeTopicsInForums v-if="!$slots['skeleton']"></comparisonOfNegativeTopicsInForums>
+                    <comparisonOfNegativeTopicsInForumsStoken slot="skeleton" v-else></comparisonOfNegativeTopicsInForumsStoken>
                 </div>
             </vue-lazy-component>
             <vue-lazy-component>
                 <div class="bc-d6">
                     <v-label-div title="品牌尾翼对比"></v-label-div>
                     <div class="bc-d6-dd1">
-                        <brandRearWingComparison></brandRearWingComparison>
-                        <informationVolumeByChannel></informationVolumeByChannel>
+                        <brandRearWingComparison v-if="!$slots['skeleton']"></brandRearWingComparison>
+                        <brandRearWingComparisonStoken slot="skeleton" v-else></brandRearWingComparisonStoken>
+                        <informationVolumeByChannel v-if="!$slots['skeleton']"></informationVolumeByChannel>
+                        <informationVolumeByChannelStoken slot="skeleton" v-else></informationVolumeByChannelStoken>
                     </div>
-                    <tailTOPMedia></tailTOPMedia>
+                    <tailTOPMedia v-if="!$slots['skeleton']"></tailTOPMedia>
+                    <tailTOPMediaStoken slot="skeleton" v-else></tailTOPMediaStoken>
                 </div>
             </vue-lazy-component>
         </div>
@@ -94,29 +118,53 @@ export default {
     inject: ["reload"],
     components: {
         informationTrend: (resolve) => require(['./informationTrend'], resolve),
+        informationTrendStoken: (resolve) => require(['./informationTrendStoken'], resolve),
         overallInformation: (resolve) => require(['./overallInformation'], resolve), // 整体信息量
+        overallInformationStoken: (resolve) => require(['./overallInformationStoken'], resolve), // 整体信息量骨架屏
         overallNumberOfInteractions: (resolve) => require(['./overallNumberOfInteractions'], resolve), // 整体互动人数
+        overallNumberOfInteractionsStoken: (resolve) => require(['./overallNumberOfInteractionsStoken'], resolve), // 整体互动人数
         brandTonalDistribution: (resolve) => require(['./brandTonalDistribution'], resolve), // 品牌调性分布
+        brandTonalDistributionStoken: (resolve) => require(['./brandTonalDistributionStoken'], resolve), // 品牌调性分布
         channelDistribution: (resolve) => require(['./channelDistribution'], resolve), // 渠道分布
+        channelDistributionStoken: (resolve) => require(['./channelDistributionStoken'], resolve), // 渠道分布
         keyMediaCommunicationComparison: (resolve) => require(['./keyMediaCommunicationComparison'], resolve), // 重点媒体传播对比
+        keyMediaCommunicationComparisonStoken: (resolve) => require(['./keyMediaCommunicationComparisonStoken'], resolve), // 重点媒体传播对比
         brandCommunicationTOPMedia: (resolve) => require(['./brandCommunicationTOPMedia'], resolve), // 品牌传播TOP媒体
+        brandCommunicationTOPMediaStoken: (resolve) => require(['./brandCommunicationTOPMediaStoken'], resolve), // 品牌传播TOP媒体
         overallWordCloudComparison: (resolve) => require(['./overallWordCloudComparison'], resolve), // 整体词云对比
+        overallWordCloudComparisonStoken: (resolve) => require(['./overallWordCloudComparisonStoken'], resolve), // 整体词云对比
         brandEventComparison: (resolve) => require(['./brandEventComparison'], resolve), //品牌事件对比
+        brandEventComparisonStoken: (resolve) => require(['./brandEventComparisonStoken'], resolve), //品牌事件对比
         comparisonOfWeiboInformation: (resolve) => require(['./comparisonOfWeiboInformation'], resolve), // 微博信息量对比
+        comparisonOfWeiboInformationStoken: (resolve) => require(['./comparisonOfWeiboInformationStoken'], resolve), // 微博信息量对比
         comparisonOfTheNumberOfWeiboInteractions: (resolve) => require(['./comparisonOfTheNumberOfWeiboInteractions'], resolve), // 微博互动人数对比
+        comparisonOfTheNumberOfWeiboInteractionsStoken: (resolve) => require(['./comparisonOfTheNumberOfWeiboInteractionsStoken'], resolve), // 微博互动人数对比
         weiboBigVComparison: (resolve) => require(['./weiboBigVComparison'], resolve), // 微博大V对比
+        weiboBigVComparisonStoken: (resolve) => require(['./weiboBigVComparisonStoken'], resolve), // 微博大V对比
         weiboTuneComparison: (resolve) => require(['./weiboTuneComparison'], resolve), // 微博调性对比
+        weiboTuneComparisonStoken: (resolve) => require(['./weiboTuneComparisonStoken'], resolve), // 微博调性对比
         weiboContentDirectionComparison: (resolve) => require(['./weiboContentDirectionComparison'], resolve), // 微博内容方向对比
+        weiboContentDirectionComparisonStoken: (resolve) => require(['./weiboContentDirectionComparisonStoken'], resolve), // 微博内容方向对比
         userAreaDistribution: (resolve) => require(['./userAreaDistribution'], resolve), //用户区域分布
+        userAreaDistributionStoken: (resolve) => require(['./userAreaDistributionStoken'], resolve), //用户区域分布
         weiboUserPortrait: (resolve) => require(['./weiboUserPortrait'], resolve), // 微博用户画像
+        weiboUserPortraitStoken: (resolve) => require(['./weiboUserPortraitStoken'], resolve), // 微博用户画像
         summaryAndComparisonOfForumInformation: (resolve) => require(['./summaryAndComparisonOfForumInformation'], resolve), // 论坛信息概括对比
+        summaryAndComparisonOfForumInformationStoken: (resolve) => require(['./summaryAndComparisonOfForumInformationStoken'], resolve), // 论坛信息概括对比
         comparisonOfForumPostingTrends: (resolve) => require(['./comparisonOfForumPostingTrends'], resolve), // 论坛发帖趋势对比
+        comparisonOfForumPostingTrendsStoken: (resolve) => require(['./comparisonOfForumPostingTrendsStoken'], resolve), // 论坛发帖趋势对比
         forumTonalComparison: (resolve) => require(['./forumTonalComparison'], resolve), // 论坛调性对比
+        forumTonalComparisonStoken: (resolve) => require(['./forumTonalComparisonStoken'], resolve), // 论坛调性对比
         comparisonOfPositiveTopicsInTheForum: (resolve) => require(['./comparisonOfPositiveTopicsInTheForum'], resolve), // 论坛正面话题对比
+        comparisonOfPositiveTopicsInTheForumStoken: (resolve) => require(['./comparisonOfPositiveTopicsInTheForumStoken'], resolve), // 论坛正面话题对比
         comparisonOfNegativeTopicsInForums: (resolve) => require(['./comparisonOfNegativeTopicsInForums'], resolve), // 论坛负面话题对比
+        comparisonOfNegativeTopicsInForumsStoken: (resolve) => require(['./comparisonOfNegativeTopicsInForumsStoken'], resolve), // 论坛负面话题对比
         brandRearWingComparison: (resolve) => require(['./brandRearWingComparison'], resolve), // 尾翼趋势对比
+        brandRearWingComparisonStoken: (resolve) => require(['./brandRearWingComparisonStoken'], resolve), // 尾翼趋势对比
         informationVolumeByChannel: (resolve) => require(['./informationVolumeByChannel'], resolve), // 分渠道信息量
+        informationVolumeByChannelStoken: (resolve) => require(['./informationVolumeByChannelStoken'], resolve), // 分渠道信息量
         tailTOPMedia: (resolve) => require(['./tailTOPMedia'], resolve), // 尾翼TOP媒体
+        tailTOPMediaStoken: (resolve) => require(['./tailTOPMediaStoken'], resolve), // 尾翼TOP媒体
         brandCompateHeader: (resolve) => require(['./brandCompateHeader'], resolve), // 选择品牌
         brandCompateHeaderStoken: (resolve) => require(['./brandCompateHeaderStoken'], resolve), // 选择品牌骨架屏
     },
diff --git a/src/views/BrandComparison/brandCommunicationTOPMediaStoken/index.vue b/src/views/BrandComparison/brandCommunicationTOPMediaStoken/index.vue
new file mode 100644
index 0000000..c7e813f
--- /dev/null
+++ b/src/views/BrandComparison/brandCommunicationTOPMediaStoken/index.vue
@@ -0,0 +1,124 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:58:57
+ * @LastEditTime: 2021-11-16 11:01:43
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
+-->
+<template>
+    <div class="bcm-outter">
+        <v-label-div title="品牌传播TOP媒体"> </v-label-div>
+        <div class="bcm-inner">
+            <div class="bcm-item" v-for="(item, index) in arrList" :key="index">
+                <span class="ss1" :style="{ color: colors[index] }">{{
+          item.key
+        }}</span>
+                <div class="dd1">
+                  <vue-scroll>
+                    <!-- <v-ranking-bcm v-for="(it, n) in item.value" :key="n" :label="it.key" :num="it.num" :val="it.value"></v-ranking-bcm> -->
+                  </vue-scroll>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+// import { getSourceTopCount0528C } from "@/api/BrandComparison";
+// import vRankingBcm from "./v-ranking-bcm";
+export default {
+    name: "brandCommunicationTOPMedia",
+    components: {
+        
+    },
+    data() {
+        return {
+            colors: [
+                "#3373CC",
+                "#63AECC",
+                "#54BF93",
+                "#CC9D12",
+                "#CC7733",
+                "#CC5B41",
+            ],
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+            },
+            arrList: [],
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getBComparison;
+    //         let brands = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.name);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         return new Promise((resolve, reject) => {
+    //             let obj = Object.assign({}, this.getCtime2, this.form);
+    //             this.load = true;
+    //             getSourceTopCount0528C(obj)
+    //                 .then((res) => {
+    //                     let data = res.data || [];
+    //                     //往原始数据内添加排名
+    //                     data.forEach((ele) => {
+    //                         for (
+    //                             let index = 0;
+    //                             index < ele.value.length;
+    //                             index++
+    //                         ) {
+    //                             ele.value[index].num = index + 1;
+    //                         }
+    //                     });
+    //                     this.arrList = data;
+    //                     this.load = false;
+    //                     resolve(data);
+    //                 })
+    //                 .catch(() => {
+    //                     reject(false);
+    //                 });
+    //         });
+    //     },
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.bcm-outter {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bcm-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .bcm-item {
+            width: 282px;
+            height: 100%;
+            margin-left: 27px;
+            .ss1 {
+                display: block;
+                font-size: 18px;
+                color: #fff;
+                font-weight: 500;
+                padding-top: 14px;
+            }
+            .dd1 {
+                height: calc(100% - 44px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/BrandComparison/brandEventComparisonStoken/index.vue b/src/views/BrandComparison/brandEventComparisonStoken/index.vue
new file mode 100644
index 0000000..95c7e62
--- /dev/null
+++ b/src/views/BrandComparison/brandEventComparisonStoken/index.vue
@@ -0,0 +1,152 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 17:33:28
+ * @LastEditTime: 2021-11-18 11:23:17
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
+-->
+<template>
+  <div class="bec-outter">
+    <v-label-div title="品牌事件对比"> </v-label-div>
+    <div class="bec-inner">
+      <v-echarts :opt="opt1"></v-echarts>
+    </div>
+    <!-- <v-label-div
+      title="事件上榜车型"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div> -->
+    <!-- <div class="bec-one">
+      <div class="bec-one-item" v-for="(item, index) in list" :key="index">
+        <span class="s1" :style="{ color: colors[index] }">{{
+          item.name
+        }}</span>
+        <div class="d1">
+          <v-echarts :opt="item.drawOpt"></v-echarts>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+// import { getSourcetypeC } from "@/api/BrandComparison/HotEvent.js";
+// //import { getContrastCount0528C } from "@/api/BrandComparison/HotEvent.js";
+// import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
+// import createOpt from "./opt";
+export default {
+  name: "brandEventComparison",
+  data() {
+    return {
+      
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      load: false,
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //     // this.getTypeData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getSourcetypeC(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           let brandList = [];
+  //           let dx = [];
+  //           data.forEach((e) => {
+  //             let ab = e.Data || {};
+  //             for (let key in ab) {
+  //               if (!dx.includes(key)) {
+  //                 dx.push(key);
+  //               }
+  //             }
+  //             brandList.push(e.Name);
+  //           });
+  //           this.opt1 = createOpt(data,dx, brandList);
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  //   // getTypeData() {
+  //   //   return new Promise((resolve, reject) => {
+  //   //     let obj = Object.assign({}, this.getCtime2, this.form);
+  //   //     getContrastCount0528C(obj)
+  //   //       .then((res) => {
+  //   //         let data = res.data || [];
+  //   //         resolve(data);
+  //   //       })
+  //   //       .catch(() => {
+  //   //         reject(false);
+  //   //       });
+  //   //   });
+  //   // },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.bec-outter {
+  width: 100%;
+  height: auto;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .bec-inner {
+    width: 100%;
+    height: 412px;
+  }
+  .bec-one {
+    width: 100%;
+    height: 412px;
+    display: flex;
+    justify-content: flex-start;
+    .bec-one-item {
+      width: 314px;
+      height: 100%;
+      .s1 {
+        padding-left: 16px;
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        color: #fff;
+        font-size: 18px;
+      }
+      .d1 {
+        width: 100%;
+        height: calc(100% - 40px);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/brandRearWingComparisonStoken/index.vue b/src/views/BrandComparison/brandRearWingComparisonStoken/index.vue
new file mode 100644
index 0000000..f3a7971
--- /dev/null
+++ b/src/views/BrandComparison/brandRearWingComparisonStoken/index.vue
@@ -0,0 +1,79 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 14:26:18
+ * @LastEditTime: 2021-10-16 14:42:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandRearWingComparison/index.vue
+-->
+<template>
+    <div class="brw-outter" v-loading="load">
+         <v-label-div title="尾翼趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+         <div class="brw-inner">
+             <v-echarts :opt="opt"></v-echarts> 
+         </div>
+    </div>
+</template>
+
+<script>
+// import {getCountTime0528C} from "@/api/BrandComparison/BrandWeiyi.js"
+// import createOpt from "./opt"
+export default {
+    name: "brandRearWingComparison",
+    data() {
+        return {
+           opt: {},
+           load: false,
+           form: {
+               token: "",
+               sBrand: ""
+           }
+        }
+    },
+  //   created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     let obj = Object.assign({}, this.getCtime2, this.form);
+  //     this.load = true;
+  //     getCountTime0528C(obj)
+  //       .then((res) => {
+  //         let data = res.data || [];
+  //         let dx = [];
+  //         let ds = [];
+  //         data.forEach((ele) => {
+  //           let key = ele.key;
+  //           let value = ele.value;
+  //           dx.push(key);
+  //           ds.push(value);
+  //         });
+  //         this.opt = createOpt(dx, ds);
+  //         this.load = false;
+  //       })
+  //     },
+  //   },
+
+}
+</script>
+
+<style lang="less" scoped>
+.brw-outter {
+    width: 944px;
+    height: 412px;
+    .brw-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/BrandComparison/brandTonalDistributionStoken/index.vue b/src/views/BrandComparison/brandTonalDistributionStoken/index.vue
new file mode 100644
index 0000000..c844df8
--- /dev/null
+++ b/src/views/BrandComparison/brandTonalDistributionStoken/index.vue
@@ -0,0 +1,129 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 13:27:50
+ * @LastEditTime: 2021-10-15 14:30:30
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
+-->
+<template>
+  <div class="bd-outter">
+    <v-label-div title="品牌调性分布"> </v-label-div>
+    <div class="bd-d1">
+      <div class="dd1" style="margin-left: 16px">
+        <span class="s1"></span><span class="s2">正面</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#54BF93' }"></span
+        ><span class="s2">中性</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#CC9D12' }"></span
+        ><span class="s2">负面</span>
+      </div>
+    </div>
+    <div class="bd-inner" style="margin-left: 18px">
+      <!-- <roundata
+        v-for="(item,index) in list"
+        :key="index"
+        :title="item.Name"
+        :color="colors[index]"
+        :style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
+        :data="item.Data"
+      ></roundata> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getAffectionsC } from "@/api/BrandComparison";
+// import roundata from "./roundata";
+export default {
+  name: "brandTonalDistribution",
+  components: {
+    
+  },
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      // load: false,
+      colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+      list: [
+
+      ]
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach(ele => {
+  //        brands.push(ele.name)
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   //
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getAffectionsC(obj).then((res) => {
+  //         let data = res.data || [];
+  //         this.list = data;
+  //         this.load = false;
+  //         resolve(data)
+  //       }).catch(() => {
+  //           reject(false)
+  //       });
+  //     });
+  //   },
+  // },
+};
+</script>
+<style lang="less" scoped>
+.bd-outter {
+  width: 100%;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .bd-d1 {
+    width: 100%;
+    display: flex;
+    height: 36px;
+    justify-content: flex-start;
+    align-items: center;
+    .dd1 {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .s1 {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: #3373cc;
+    }
+    .s2 {
+      display: inline-block;
+      font-size: 12px;
+      color: #fff;
+      margin-left: 10px;
+    }
+  }
+  .bd-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/channelDistributionStoken/index.vue b/src/views/BrandComparison/channelDistributionStoken/index.vue
new file mode 100644
index 0000000..65d339c
--- /dev/null
+++ b/src/views/BrandComparison/channelDistributionStoken/index.vue
@@ -0,0 +1,88 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:08:13
+ * @LastEditTime: 2021-10-15 15:18:32
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
+-->
+<template>
+  <div class="cd-outter">
+    <v-label-div title="渠道分布"> </v-label-div>
+    <div class="cd-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getSourcetypeC } from "@/api/BrandComparison/index.js";
+// import createOpt from "./opt";
+export default {
+  name: "channelDistribution",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      opt: {},
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getSourcetypeC(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           let brandList = [];
+  //           let dx = [];
+  //           data.forEach((e) => {
+  //             let ab = e.Data || {};
+  //             for (let key in ab) {
+  //               if (!dx.includes(key)) {
+  //                 dx.push(key);
+  //               }
+  //             }
+  //             brandList.push(e.Name);
+  //           });
+  //           this.opt = createOpt(data, dx, brandList);
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.cd-outter {
+  width: 936px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  .cd-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/comparisonOfForumPostingTrendsStoken/index.vue b/src/views/BrandComparison/comparisonOfForumPostingTrendsStoken/index.vue
new file mode 100644
index 0000000..1f4c8fc
--- /dev/null
+++ b/src/views/BrandComparison/comparisonOfForumPostingTrendsStoken/index.vue
@@ -0,0 +1,82 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:45:18
+ * @LastEditTime: 2021-10-16 13:49:34
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
+-->
+<template>
+  <div class="cop-outter">
+    <v-label-div
+      title="论坛发帖趋势对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    />
+    <div class="cop-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getCountTime0528C } from "@/api/BrandComparison/BbsBrand.js";
+// import createOpt from "./opt";
+export default {
+  name: "comparisonOfForumPostingTrends",
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      load: false,
+      opt: {},
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     let obj = Object.assign({}, this.getCtime2, this.form);
+  //     this.load = true,
+  //     getCountTime0528C(obj)
+  //       .then((res) => {
+  //         let data = res.data || [];
+  //         let dx = [];
+  //         let ds = [];
+  //         data.forEach((ele) => {
+  //           let key = ele.key;
+  //           let value = ele.value;
+  //           dx.push(key);
+  //           ds.push(value);
+  //         });
+  //         this.opt = createOpt(dx, ds);
+  //         this.load = false
+  //       })
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.cop-outter {
+  width: 944px;
+  height: 412px;
+  .cop-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/comparisonOfNegativeTopicsInForumsStoken/index.vue b/src/views/BrandComparison/comparisonOfNegativeTopicsInForumsStoken/index.vue
new file mode 100644
index 0000000..4daafff
--- /dev/null
+++ b/src/views/BrandComparison/comparisonOfNegativeTopicsInForumsStoken/index.vue
@@ -0,0 +1,130 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:57:58
+ * @LastEditTime: 2021-10-16 14:20:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
+-->
+<template>
+  <div class="cpt-outter">
+    <v-label-div
+      title="论坛负面话题对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    />
+    <div class="cpt-inner">
+      <div class="cpt-item" v-for="(item, index) in showData" :key="index">
+        <span class="s1" :style="{ color: colors[index] }">{{
+          item.name
+        }}</span>
+        <div class="d1">
+          <!-- <v-echarts :opt="item.drawOpt"></v-echarts> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getTopicPosAndTopicNeg0528C } from "@/api/BrandComparison/BbsBrand.js";
+// import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
+export default {
+  name: "comparisonOfPositiveTopicsInTheForum",
+  data() {
+    return {
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      load: false,
+      showData: [],
+      
+      
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getTopicPosAndTopicNeg0528C(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           let sourceData = [];
+  //           data.forEach( ele => {
+  //               let tagArr = [];
+  //               let valArr = [];
+  //               //ele.value[0]表示正面话题的数据 [1]表示负面话题的数据
+  //               ele.value[1].value.forEach( e => {
+  //                   tagArr.push(e.key);
+  //                   valArr.push(e.value)
+  //               });
+  //               let o = {
+  //                   name: ele.key,
+  //                   drawOpt: createSideSingleColumn(tagArr,valArr,"#bd9312")
+  //               };
+  //               sourceData.push(o);
+  //           });
+  //           this.showData = sourceData;
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.cpt-outter {
+  width: 100%;
+  height: 412px;
+  .cpt-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .cpt-item {
+      width: 100%;
+      height: 100%;
+      .s1 {
+        padding-left: 16px;
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        color: #fff;
+        font-size: 18px;
+      }
+      .d1 {
+        width: 100%;
+        height: calc(100% - 40px);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForumStoken/index.vue b/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForumStoken/index.vue
new file mode 100644
index 0000000..ee941dc
--- /dev/null
+++ b/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForumStoken/index.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:57:58
+ * @LastEditTime: 2021-10-16 14:16:03
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
+-->
+<template>
+  <div class="cpt-outter" v-loading="load">
+    <v-label-div
+      title="论坛正面话题对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    />
+    <div class="cpt-inner">
+      <!-- <div class="cpt-item" v-for="(item, index) in showData" :key="index">
+        <span class="s1" :style="{ color: colors[index] }">{{
+          item.name
+        }}</span>
+        <div class="d1">
+          <v-echarts :opt="item.drawOpt"></v-echarts>
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getTopicPosAndTopicNeg0528C } from "@/api/BrandComparison/BbsBrand.js";
+// import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
+export default {
+  name: "comparisonOfPositiveTopicsInTheForum",
+  data() {
+    return {
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      load: false,
+      showData: [],
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getTopicPosAndTopicNeg0528C(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           let sourceData = [];
+  //           data.forEach( ele => {
+  //               let tagArr = [];
+  //               let valArr = [];
+  //               //ele.value[0]表示正面话题的数据 [1]表示负面话题的数据
+  //               ele.value[0].value.forEach( e => {
+  //                   tagArr.push(e.key);
+  //                   valArr.push(e.value)
+  //               });
+  //               let o = {
+  //                   name: ele.key,
+  //                   drawOpt: createSideSingleColumn(tagArr,valArr,"#3373CC")
+  //               };
+  //               sourceData.push(o);
+  //           });
+  //           this.showData = sourceData;
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.cpt-outter {
+  width: 100%;
+  height: 412px;
+  .cpt-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .cpt-item {
+      width: 100%;
+      height: 100%;
+      .s1 {
+        padding-left: 16px;
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        color: #fff;
+        font-size: 18px;
+      }
+      .d1 {
+        width: 100%;
+        height: calc(100% - 40px);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractionsStoken/index.vue b/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractionsStoken/index.vue
new file mode 100644
index 0000000..416761b
--- /dev/null
+++ b/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractionsStoken/index.vue
@@ -0,0 +1,85 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:22:21
+ * @LastEditTime: 2021-10-16 10:28:27
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
+-->
+<template>
+  <div class="cotn-outter" v-loading="load">
+    <v-label-div
+      title="微博互动人数对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    ></v-label-div>
+    <div class="cotn-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getInteractCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+export default {
+  name: "comparisonOfTheNumberOfWeiboInteractions",
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      opt: {},
+      load: false,
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getBComparison;
+      let brands = [];
+      arr.forEach((ele) => {
+        brands.push(ele.name);
+      });
+      this.form.sBrand = brands.toString();
+      this.getData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
+        getInteractCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let dx = [];
+            let ds = [];
+            data.forEach((ele) => {
+              dx.push(ele.key);
+              ds.push(ele.value);
+            });
+            this.opt = createSingleColumnar(dx, ds);
+            this.load = false;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.cotn-outter {
+  width: 628px;
+  height: 412px;
+  .cotn-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/comparisonOfWeiboInformationStoken/index.vue b/src/views/BrandComparison/comparisonOfWeiboInformationStoken/index.vue
new file mode 100644
index 0000000..3e016b4
--- /dev/null
+++ b/src/views/BrandComparison/comparisonOfWeiboInformationStoken/index.vue
@@ -0,0 +1,86 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:01:52
+ * @LastEditTime: 2021-10-16 10:20:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
+-->
+<template>
+  <div class="cowi-outter">
+    <v-label-div
+      title="微博信息量对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    ></v-label-div>
+    <div class="cowi-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getContrastCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
+// import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+export default {
+  name: "comparisonOfWeiboInformation",
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      load: false,
+      opt: {}
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getContrastCount0528C(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           let dx = [];
+  //           let ds = [];
+  //           data.forEach(ele => {
+  //               dx.push(ele.key);
+  //               ds.push(ele.value)
+  //           })
+  //           this.opt = createSingleColumnar(dx,ds);
+  //           this.load = false
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.cowi-outter {
+  width: 628px;
+  height: 412px;
+  .cowi-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/forumTonalComparisonStoken/index.vue b/src/views/BrandComparison/forumTonalComparisonStoken/index.vue
new file mode 100644
index 0000000..2d0c910
--- /dev/null
+++ b/src/views/BrandComparison/forumTonalComparisonStoken/index.vue
@@ -0,0 +1,140 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:49:09
+ * @LastEditTime: 2021-10-16 13:55:52
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
+-->
+<template>
+  <div class="wtc-outter" v-loading="load">
+    <v-label-div
+      title="论坛调性对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div>
+    <div class="wtc-d1">
+      <div class="dd1" style="margin-left: 16px">
+        <span class="s1"></span><span class="s2">正面</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#54BF93' }"></span
+        ><span class="s2">中性</span>
+      </div>
+      <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
+        v-for="(item,index) in dataSource"
+        :key="index"
+        :title="item.Name"
+        :color="colors[index]"
+        :style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
+        :data="item.Data"
+      ></roundata> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getAffectionsC } from "@/api/BrandComparison/BbsBrand.js";
+// import roundata from "./roundata";
+export default {
+  name: "forumTonalComparison",
+  components: {
+    
+  },
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      load: false,
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      dataSource: [],
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getAffectionsC(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           this.dataSource = data;
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.wtc-outter {
+  width: 100%;
+  height: 460px;
+  margin-top: 16px;
+  .wtc-d1 {
+    width: 100%;
+    display: flex;
+    height: 36px;
+    justify-content: flex-start;
+    align-items: center;
+    .dd1 {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .s1 {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: #3373cc;
+    }
+    .s2 {
+      display: inline-block;
+      font-size: 12px;
+      color: #fff;
+      margin-left: 10px;
+    }
+  }
+  .wtc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/informationTrendStoken/index.vue b/src/views/BrandComparison/informationTrendStoken/index.vue
new file mode 100644
index 0000000..81cc216
--- /dev/null
+++ b/src/views/BrandComparison/informationTrendStoken/index.vue
@@ -0,0 +1,63 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 11:40:55
+ * @LastEditTime: 2021-10-15 11:53:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/informationTrend/index.vue
+-->
+<template>
+  <div class="it-outter">
+    <v-label-div title="信息量趋势"></v-label-div>
+    <div class="it-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getCountTime0528C } from "@/api/BrandComparison";
+// import createOpt from "./opt";
+export default {
+  name: "informationTrend",
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      opt: {},
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+      
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.it-outter {
+  width: 618px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  .it-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/informationTrendStoken/opt.js b/src/views/BrandComparison/informationTrendStoken/opt.js
new file mode 100644
index 0000000..896db12
--- /dev/null
+++ b/src/views/BrandComparison/informationTrendStoken/opt.js
@@ -0,0 +1,126 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 10:11:24
+ * @LastEditTime: 2021-11-19 19:47:53
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
+ */
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+function createData(ds = []) {
+    let testData = {}
+    ds.forEach(item => {
+        item.forEach(val => {
+            if (testData[val.key] === undefined) {
+                testData[val.key] = {
+                    name: val.key,
+                    type: 'line',
+                    symbol: 'none',
+                    areaStyle: {
+                        opacity: 0.2
+                    },
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    data: [val.value]
+                }
+            } else {
+                testData[val.key].data.push(val.value)
+            }
+        })
+    })
+    let arr = [];
+    for(let key in testData) {
+        arr.push(testData[key])
+    }
+   return arr 
+}
+export default function createOpt(dx = [], ds = []) {
+    let data = createData(ds);
+    return {
+        grid: {
+            left: 10,
+            right: '5%',
+            bottom: 10,
+            top: 52,
+            containLabel: true
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        legend: {
+            icon: 'roundRect',
+            textStyle: { //图例文字的样式
+                color: '#fff',
+                fontSize: 10
+            },
+            y: 12,
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                formatter: (value) => {
+                    let rex = "00:00:00";
+                    let isCont = false;
+                    let str = value;
+                    for(let i = 0;i<dx.length-1;i++){
+                        //连续两条带小时
+                        if(dx[i].indexOf(rex) === -1 && dx[i+1].indexOf(rex) === -1){
+                            isCont = true;
+                            break;
+                        }
+                    }
+                    if(isCont == true) {
+                        str = value.substring(10, 16)
+                    } else {
+                        str = value.substring(5, 10)
+                    }
+                    return str;
+                }
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: dx
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            axisLabel: {
+                formatter: (value) => {
+                  let str = bigNumberTransform(value);
+                  return str;
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: data
+    }
+}
diff --git a/src/views/BrandComparison/informationVolumeByChannelStoken/index.vue b/src/views/BrandComparison/informationVolumeByChannelStoken/index.vue
new file mode 100644
index 0000000..36dad26
--- /dev/null
+++ b/src/views/BrandComparison/informationVolumeByChannelStoken/index.vue
@@ -0,0 +1,91 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 14:47:23
+ * @LastEditTime: 2021-10-16 14:54:34
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/informationVolumeByChannel/index.vue
+-->
+<template>
+  <div class="ivb-outter" v-loading="load">
+    <v-label-div
+      title="分渠道信息量"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    />
+    <div class="ivb-inner">
+      <!-- <v-echarts :opt="opt"></v-echarts> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getSourcetypeC } from "@/api/BrandComparison/BrandWeiyi.js";
+// import createOpt from "./opt";
+export default {
+  name: "informationVolumeByChannel",
+  data() {
+    return {
+      opt: {},
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+      },
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getSourcetypeC(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           let brandList = [];
+  //           let dx = [];
+  //           data.forEach((e) => {
+  //             let ab = e.Data || {};
+  //             for (let key in ab) {
+  //               if (!dx.includes(key)) {
+  //                 dx.push(key);
+  //               }
+  //             }
+  //             brandList.push(e.Name);
+  //           });
+  //           this.opt = createOpt(data, dx, brandList);
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.ivb-outter {
+  width: 944px;
+  height: 412px;
+  .ivb-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/keyMediaCommunicationComparisonStoken/index.vue b/src/views/BrandComparison/keyMediaCommunicationComparisonStoken/index.vue
new file mode 100644
index 0000000..aeb16f5
--- /dev/null
+++ b/src/views/BrandComparison/keyMediaCommunicationComparisonStoken/index.vue
@@ -0,0 +1,81 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:34:26
+ * @LastEditTime: 2021-11-11 16:43:10
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
+-->
+<template>
+  <div class="kmcc-outter">
+    <v-label-div title="重点媒体传播对比"> </v-label-div>
+    <div class="kmcc-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+// import createOpt from "./opt";
+// import { getSourceCount0528C } from "@/api/BrandComparison/index.js";
+export default {
+  name: "kmcc-outter",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      opt: {},
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     let obj = Object.assign({}, this.getCtime2, this.form);
+  //     this.load = true;
+  //     getSourceCount0528C(obj).then((res) => {
+  //       let data = res.data;
+  //       let dx = [];
+  //       data.forEach((ele) => {
+  //         let ab = ele.value || [];
+  //         // 匹配所有出现过的媒体，放入dx中
+  //         ab.forEach((e) => {
+  //           if (!dx.includes(e.key)) {
+  //             dx.push(e.key);
+  //           }
+  //         });
+  //       });
+  //       this.opt = createOpt(dx, data);
+  //       this.load = false;
+  //     });
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.kmcc-outter {
+  width: 936px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  .kmcc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/overallInformationStoken/index.vue b/src/views/BrandComparison/overallInformationStoken/index.vue
new file mode 100644
index 0000000..b52141b
--- /dev/null
+++ b/src/views/BrandComparison/overallInformationStoken/index.vue
@@ -0,0 +1,78 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 11:58:33
+ * @LastEditTime: 2021-10-15 15:20:41
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/overallInformation/index.vue
+-->
+<template>
+  <div class="oi-outter">
+    <v-label-div title="整体信息量"></v-label-div>
+    <div class="oi-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getContrastCount0528C } from "@/api/BrandComparison";
+// import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+export default {
+  name: "overallInformation",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      opt: {},
+    };
+  },
+}
+//   created() {
+//     this.initData();
+//   },
+//   methods: {
+//     initData() {
+//       this.form.token = this.getToken;
+//       let arr = this.getBComparison;
+//       let brands = [];
+//       arr.forEach((ele) => {
+//         brands.push(ele.name);
+//       });
+//       this.form.sBrand = brands.toString();
+//       this.getData();
+//     },
+//     getData() {
+//       let obj = Object.assign({}, this.getCtime2, this.form);
+//       this.load = true;
+//       getContrastCount0528C(obj).then((res) => {
+//         let data = res.data || [];
+//         let brandsList = [];
+//         let infoList = [];
+//         data.forEach((e) => {
+//           brandsList.push(e.key);
+//           infoList.push(e.value);
+//         });
+//         this.opt = createSingleColumnar(brandsList, infoList);
+//         this.load = false;
+//       });
+//     },
+//   },
+// };
+</script>
+
+<style lang="less" scoped>
+.oi-outter {
+  width: 618px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  .oi-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/overallNumberOfInteractionsStoken/index.vue b/src/views/BrandComparison/overallNumberOfInteractionsStoken/index.vue
new file mode 100644
index 0000000..2a7544d
--- /dev/null
+++ b/src/views/BrandComparison/overallNumberOfInteractionsStoken/index.vue
@@ -0,0 +1,77 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 13:12:08
+ * @LastEditTime: 2021-10-15 15:21:18
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/overallNumberOfInteractions/index.vue
+-->
+<template>
+  <div class="onoi-outter">
+    <v-label-div title="整体互动人数"></v-label-div>
+    <div class="onoi-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getInteractCount0528C } from "@/api/BrandComparison";
+// import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+export default {
+  name: "overallInformation",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      opt: {},
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     this.load = true;
+  //     let obj = Object.assign({}, this.getCtime2, this.form);
+  //     getInteractCount0528C(obj).then((res) => {
+  //       let data = res.data || [];
+  //       let brandsList = [];
+  //       let infoList = [];
+  //       data.forEach((e) => {
+  //         brandsList.push(e.key);
+  //         infoList.push(e.value);
+  //       });
+  //       this.opt = createSingleColumnar(brandsList, infoList);
+  //       this.load = false;
+  //     });
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.onoi-outter {
+  width: 618px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  .onoi-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/overallWordCloudComparisonStoken/index.vue b/src/views/BrandComparison/overallWordCloudComparisonStoken/index.vue
new file mode 100644
index 0000000..75a57ad
--- /dev/null
+++ b/src/views/BrandComparison/overallWordCloudComparisonStoken/index.vue
@@ -0,0 +1,132 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 16:56:32
+ * @LastEditTime: 2021-10-15 17:31:34
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/overallWordCloudComparison/index.vue
+-->
+<template>
+  <div class="owcc-outter">
+    <v-label-div title="整体词云对比"> </v-label-div>
+    <div class="owcc-inner">
+      <!-- <div class="owcc-item" v-for="(item, index) in dataSource" :key="index">
+        <v-label-div
+          :title="item.name"
+          :titleColor="colors[index]"
+          :showLine="false"
+          :eStyle="{ 'border-style': 'none' }"
+        >
+          <v-tab-group
+            :btns="['正面', '负面']"
+            @change="(n) => {handlerTab(n,item)}"
+          ></v-tab-group>
+        </v-label-div>
+        <div class="owcc-draw">
+          <v-echarts :opt="item.opt"></v-echarts>
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getPositiveAndNegative0528C } from "@/api/BrandComparison";
+// import createWordCloud from "@/utils/gol/bubbleWord";
+export default {
+  name: "overallWordCloudComparison",
+  data() {
+    return {
+      opt: {},
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      // load: false,
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      dataSource: []
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getPositiveAndNegative0528C(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           let arr = [];
+  //           data.forEach(ele => {
+  //               let obj = {
+  //                   name: ele.key,
+  //                   p: ele.value[0].value,
+  //                   s: ele.value[1].value,
+  //                   opt: createWordCloud(ele.value[0].value),
+  //                   tapIndex: 0
+  //               }
+  //               arr.push(obj);
+  //           })
+  //           this.dataSource = arr;
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  //   handlerTab(n,item) {
+  //      item.tapIndex = n;
+  //      if(n === 0) {
+  //          item.opt = createWordCloud(item.p)
+  //      } else {
+  //          item.opt = createWordCloud(item.s)
+  //      }
+  //   }
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.owcc-outter {
+  width: 100%;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .owcc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .owcc-item {
+      width: 314px;
+      height: 412px;
+      margin-top: 5px;
+      .owcc-draw {
+        width: 100%;
+        height: calc(100% - 48px);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/summaryAndComparisonOfForumInformationStoken/index.vue b/src/views/BrandComparison/summaryAndComparisonOfForumInformationStoken/index.vue
new file mode 100644
index 0000000..7d8fa33
--- /dev/null
+++ b/src/views/BrandComparison/summaryAndComparisonOfForumInformationStoken/index.vue
@@ -0,0 +1,138 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:14:28
+ * @LastEditTime: 2021-10-16 13:44:02
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/summaryAndComparisonOfForumInformation/index.vue
+-->
+<template>
+    <div class="saco-outter" v-loading="load">
+        <v-label-div title="论坛信息概括对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+        <div class="saco-item" v-for="(item,index) in sourceData" :key="index">
+            <span class="s1">{{item.key}}</span>
+            <div class="d1">
+                <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_lt.png">
+                <div class="d1-d1">
+                    <span class="ss1">论坛信息量</span>
+                    <span class="ss2">{{item.Count}}</span>
+                </div>
+            </div>
+            <div class="d1">
+                <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_hdrs.png">
+                <div class="d1-d1">
+                    <span class="ss1">互动人数</span>
+                    <span class="ss2">{{item.commentsSum}}</span>
+                </div>
+            </div>
+            <div class="d1">
+                <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_ztl.png">
+                <div class="d1-d1">
+                    <span class="ss1">论坛主贴量</span>
+                    <span class="ss2">{{item.zhutieCount}}</span>
+                </div>
+            </div>
+            <div class="d1">
+                <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_pll.png">
+                <div class="d1-d1">
+                    <span class="ss1">论坛评论量</span>
+                    <span class="ss2">{{item.interactCount}}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getCount0528C} from "@/api/BrandComparison/BbsBrand.js"
+export default {
+    name: "summaryAndComparisonOfForumInformation",
+    data() {
+        return {
+            form: {
+                token: "",
+                sBrand: ""
+            },
+            load: false,
+            sourceData: [],
+        }
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getBComparison;
+            let brands = [];
+            arr.forEach(ele => {
+                brands.push(ele.name)
+            });
+            this.form.sBrand = brands.toString();
+            this.getData();
+        },
+        getData() {
+            return new Promise((resolve, reject) => {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            this.load = true;
+            getCount0528C(obj).then((res) => {
+            let data = res.data || [];
+            this.sourceData = data;
+            this.load = false;
+            resolve(data)
+            }).catch(() => {
+                reject(false)
+            });
+        });
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.saco-outter {
+    width: 944px;
+    height: 412px;
+    .saco-item {
+        width: 912px;
+        height: 54px;
+        border-radius: 4px;
+        border: 1px solid #0f2a4d;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin-bottom: 5px;
+        margin-left: 16px;
+        .s1 {
+            width: 137px;
+            display: block;
+            font-size: 16px;
+            color: #fff;
+            margin-left: 16px;
+        }
+        .d1 {
+                width: 183px;
+                display: flex;
+                justify-content: flex-start;
+                .d1-m1 {
+                    width: 44px;
+                    height: 44px;
+                }
+                .d1-d1 {
+                    .ss1 {
+                        display: block;
+                        font-size: 12px;
+                        color: #7f868d;
+                        margin-top: 2px;
+                    }
+                    .ss2 {
+                        display: block;
+                        font-size: 16px;
+                        font-family: Bebas;
+                        color: #fff;
+                    }
+                }
+        }
+    }
+}
+</style>
diff --git a/src/views/BrandComparison/tailTOPMediaStoken/index.vue b/src/views/BrandComparison/tailTOPMediaStoken/index.vue
new file mode 100644
index 0000000..8c43cf1
--- /dev/null
+++ b/src/views/BrandComparison/tailTOPMediaStoken/index.vue
@@ -0,0 +1,119 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 14:56:13
+ * @LastEditTime: 2021-10-19 11:52:43
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/tailTOPMedia/index.vue
+-->
+
+<template>
+    <div class="ttm-outter" v-loading="load">
+        <v-label-div title="尾翼TOP媒体" :showLine="false" :eStyle="{'border-style': 'none'}" />
+        <div class="ttm-inner">
+            <div class="ttm-item" v-for="(item,index) in showData" :key="index">
+                <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
+                <div class="d1">
+                    <v-echarts :opt="item.drawOpt"></v-echarts>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getSourceTopCount0528C} from "@/api/BrandComparison/BrandWeiyi.js"
+import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "tailTOPMedia",
+    data() {
+        return {
+            form: {
+                token: "",
+                sBrand: "",
+                iSize: 8  //最多显示的条数，默认为5
+            },
+            colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+            showData: [],
+            load: false
+        };
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getBComparison;
+            let brands = [];
+            arr.forEach(ele => {
+                brands.push(ele.name)
+            });
+            this.form.sBrand = brands.toString();
+            this.getData();
+        },
+        getData() {
+            return new Promise((resolve, reject) => {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            this.load = true;
+            getSourceTopCount0528C(obj).then((res) => {
+            let data = res.data || [];
+            let sourceData = [];
+            let colorList = this.colors;
+            let index = 0;
+            data.forEach( ele => {
+                let mediaList = [];
+                let valueList = [];
+                ele.value.forEach( e => {
+                    mediaList.push(e.key);
+                    valueList.push(e.value);
+                });
+                let o = {
+                    name: ele.key,
+                    drawOpt: createSingleColumnar(mediaList,valueList,colorList[index])
+                };
+                index += 1;
+                sourceData.push(o);
+                this.showData = sourceData;
+            });
+            this.load = false;
+            resolve(data)
+            }).catch(() => {
+                reject(false)
+            });
+        });
+      }
+    }
+
+};
+</script>
+
+<style lang="less" scoped>
+.ttm-outter {
+    width: 100%;
+    height: auto;
+    .ttm-inner {
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        .ttm-item {
+            width: 628px;
+            height: 380px;
+            .s1 {
+                padding-left: 16px;
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                font-size: 16px;
+                color: #fff;
+            }
+            .d1 {
+                width: 100%;
+                height: calc(100% - 40px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/BrandComparison/userAreaDistributionStoken/index.vue b/src/views/BrandComparison/userAreaDistributionStoken/index.vue
new file mode 100644
index 0000000..dc844d9
--- /dev/null
+++ b/src/views/BrandComparison/userAreaDistributionStoken/index.vue
@@ -0,0 +1,147 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 11:25:20
+ * @LastEditTime: 2021-10-16 11:31:16
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
+-->
+<template>
+  <div class="wua-outter" v-loading="load">
+    <v-label-div
+      title="用户区域分布"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+      <v-tab-group :btns="this.brandArr" @change="handlerTab"></v-tab-group>
+    </v-label-div>
+    <div class="wua-inner">
+      <div class="d1">
+        <!-- <v-echarts :opt="opt1"></v-echarts> -->
+      </div>
+      <div class="d2">
+        <!-- <v-echars-map :opt="opt2"></v-echars-map> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getRegionWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
+// import createOptD1 from "./opt1";
+// import createOptD2 from "./opt2";
+export default {
+  name: "userAreaDistribution",
+  data() {
+    return {
+      opt1: {},
+      opt2: {},
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      dataSource: [],
+      brandArr: [],
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     Promise.all([this.getData()]).then(() => {
+  //       // 什么也不执行
+  //       this.handlerTab(0);
+  //     });
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getRegionWeiBoC(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           //dx省份 ds数据 dm省份和数据的对象数组
+  //           let mapArr = [];
+  //           let brandList = [];
+  //           data.forEach((ele) => {
+  //             let dx = [];
+  //             let ds = [];
+  //             let dm = this.toArr(ele.Data);
+  //             dm.forEach((e) => {
+  //               //处理直辖市
+  //               e.name = e.name.replace('省', '');
+  //               dx.push(e.name);
+  //               ds.push(e.value);
+  //             });
+  //             let o = {
+  //               name: ele.Name,
+  //               dx: dx,
+  //               ds: ds,
+  //               dm: dm,
+  //               //opt1: createOptD1(),
+  //               //opt2: createOptD2(),
+  //               //tapIndex: 0
+  //             };
+  //             brandList.push(ele.Name);
+  //             mapArr.push(o);
+  //           });
+  //           this.dataSource = mapArr;
+  //           this.brandArr = brandList;
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  //   // 将对象变成数组
+  //   toArr(obj) {
+  //     let arr = [];
+  //     for (let key in obj) {
+  //       let o = {
+  //         name: key,
+  //         value: obj[key] * 1,
+  //       };
+  //       arr.push(o);
+  //     }
+  //     return arr;
+  //   },
+  //   // 切换数据
+  //   handlerTab(n) {
+  //     this.opt1 = createOptD1(this.dataSource[n].dx, this.dataSource[n].ds);
+  //     this.opt2 = createOptD2(this.dataSource[n].dm);
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.wua-outter {
+  width: 944px;
+  height: 412px;
+  .wua-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+      width: 479px;
+      height: 100%;
+    }
+    .d2 {
+      width: 465px;
+      height: 100%;
+      margin-left: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/weiboBigVComparisonStoken/index.vue b/src/views/BrandComparison/weiboBigVComparisonStoken/index.vue
new file mode 100644
index 0000000..2786b3c
--- /dev/null
+++ b/src/views/BrandComparison/weiboBigVComparisonStoken/index.vue
@@ -0,0 +1,89 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:30:29
+ * @LastEditTime: 2021-10-16 10:41:39
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/weiboBigVComparison/index.vue
+-->
+<template>
+  <div class="wbc-outter" v-loading="load">
+    <v-label-div
+      title="微博大V对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    ></v-label-div>
+    <div class="wbc-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getBoauthen0528C } from "@/api/BrandComparison/BrandWeibo.js";
+// import createOpt from "./opt";
+export default {
+  name: "weiboBigVComparison",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      opt: {}
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getBoauthen0528C(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           let dx = [];
+  //           data.forEach((ele) => {
+  //           let ab = ele.value || [];
+  //           // 匹配所有出现过的媒体，放入dx中
+  //           ab.forEach((e) => {
+  //               if (!dx.includes(e.key) && e.value != 0) {
+  //               dx.push(e.key);
+  //               }
+  //           });
+  //           });
+  //           this.opt = createOpt(dx,data);
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  // },
+};
+</script>
+<style lang="less" scoped>
+.wbc-outter {
+  width: 630px;
+  height: 412px;
+  .wbc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/weiboContentDirectionComparisonStoken/index.vue b/src/views/BrandComparison/weiboContentDirectionComparisonStoken/index.vue
new file mode 100644
index 0000000..8d5df1a
--- /dev/null
+++ b/src/views/BrandComparison/weiboContentDirectionComparisonStoken/index.vue
@@ -0,0 +1,142 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:58:57
+ * @LastEditTime: 2021-11-16 11:26:29
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
+-->
+<template>
+    <div class="bcm-outter" v-loading="load">
+        <v-label-div title="微博内容方向对比" :showLine="false" :eStyle="{ 'border-style': 'none' }">
+        </v-label-div>
+        <div class="bcm-inner">
+            <!-- <div class="bcm-item" v-for="(item, index) in sourceData" :key="index">
+                <span class="ss1" :style="{ color: colors[index] }">{{
+          item.key
+        }}</span>
+                <div class="dd1">
+                    <vue-scroll>
+                        <v-ranking-bcm v-for="(it, n) in item.value" :key="n" :label="it.key" :num="it.num" :val="it.value"></v-ranking-bcm>
+                    </vue-scroll>
+                </div>
+            </div> -->
+        </div>
+    </div>
+</template>
+<script>
+// import { getDirect0528C } from "@/api/BrandComparison/BrandWeibo.js";
+// import vRankingBcm from "./v-ranking-bcm";
+export default {
+    name: "weiboContentDirectionComparison",
+    components: {
+       
+    },
+    data() {
+        return {
+            colors: [
+                "#3373CC",
+                "#63AECC",
+                "#54BF93",
+                "#CC9D12",
+                "#CC7733",
+                "#CC5B41",
+            ],
+            form: {
+                token: "",
+                sBrand: "",
+            },
+            load: false,
+            sourceData: [],
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getBComparison;
+    //         let brands = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.name);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         return new Promise((resolve, reject) => {
+    //             let obj = Object.assign({}, this.getCtime2, this.form);
+    //             this.load = true;
+    //             getDirect0528C(obj)
+    //                 .then((res) => {
+    //                     let data = res.data || [];
+    //                     let showData = [];
+    //                     data.forEach((e) => {
+    //                         //按照数据的值排序，然后取前5个值放入obj中传给用于显示数据的数组
+    //                         let sortedArr = e.Data;
+    //                         sortedArr.sort(this.compare("value"));
+    //                         let obj = {
+    //                             key: e.Name,
+    //                             value: sortedArr,
+    //                         };
+    //                         showData.push(obj);
+    //                     });
+    //                     showData.forEach((ele) => {
+    //                         //给数据添加排名
+    //                         for (
+    //                             let index = 0;
+    //                             index < ele.value.length;
+    //                             index++
+    //                         ) {
+    //                             ele.value[index].num = index + 1;
+    //                         }
+    //                     });
+    //                     this.sourceData = showData;
+    //                     this.load = false;
+    //                     resolve(data);
+    //                 })
+    //                 .catch(() => {
+    //                     reject(false);
+    //                 });
+    //         });
+    //     },
+    //     // 根据对象的属性排序 v2-v1为顺序，v1-v2为倒序
+    //     compare(property) {
+    //         return function (a, b) {
+    //             let value1 = a[property];
+    //             let value2 = b[property];
+    //             return value2 - value1;
+    //         };
+    //     },
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.bcm-outter {
+    width: 100%;
+    height: 460px;
+    margin-top: 16px;
+    .bcm-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .bcm-item {
+            width: 282px;
+            margin-left: 27px;
+            .ss1 {
+                display: block;
+                font-size: 18px;
+                color: #fff;
+                font-weight: 500;
+                padding-top: 14px;
+            }
+            .dd1 {
+                height: calc(100% - 44px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/BrandComparison/weiboTuneComparisonStoken/index.vue b/src/views/BrandComparison/weiboTuneComparisonStoken/index.vue
new file mode 100644
index 0000000..c4fbf98
--- /dev/null
+++ b/src/views/BrandComparison/weiboTuneComparisonStoken/index.vue
@@ -0,0 +1,134 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:49:09
+ * @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
+-->
+<template>
+  <div class="wtc-outter">
+    <v-label-div
+      title="微博调性对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div>
+    <div class="wtc-d1">
+      <div class="dd1" style="margin-left: 16px">
+        <span class="s1"></span><span class="s2">正面</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#54BF93' }"></span
+        ><span class="s2">中性</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#CC9D12' }"></span
+        ><span class="s2">负面</span>
+      </div>
+    </div>
+    <div class="wtc-inner">
+      <!-- <wbRoundata
+        v-for="(item,index) in dataSource"
+        :key="index"
+        :title="item.Name"
+        :color="colors[index]"
+        :style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
+        :data="item.Data"
+      ></wbRoundata> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getAffectionsC } from "@/api/BrandComparison/BrandWeibo.js";
+// import wbRoundata from "./wbRoundata";
+export default {
+  name: "weiboTuneComparison",
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      load: false,
+      colors: ["#3373CC","#63AECC","#54BF93","#CC9D12","#CC7733","#CC5B41"],
+      dataSource: []
+    };
+  },
+  components: {
+    
+  },
+
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getAffectionsC(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           this.dataSource = data;
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.wtc-outter {
+  width: 100%;
+  height: 460px;
+  margin-top: 16px;
+  .wtc-d1 {
+    width: 100%;
+    display: flex;
+    height: 36px;
+    justify-content: flex-start;
+    align-items: center;
+    .dd1 {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .s1 {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: #3373cc;
+    }
+    .s2 {
+      display: inline-block;
+      font-size: 12px;
+      color: #fff;
+      margin-left: 10px;
+    }
+  }
+  .wtc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/weiboUserPortraitStoken/index.vue b/src/views/BrandComparison/weiboUserPortraitStoken/index.vue
new file mode 100644
index 0000000..05c3ccf
--- /dev/null
+++ b/src/views/BrandComparison/weiboUserPortraitStoken/index.vue
@@ -0,0 +1,199 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 11:36:20
+ * @LastEditTime: 2021-10-16 12:01:38
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/weiboUserPortrait/index.vue
+-->
+<template>
+  <div class="wup-outter">
+    <v-label-div
+      title="微博用户画像"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+      <v-tab-group
+        :btns="this.brandArr"
+        @change="handlerTab"
+      ></v-tab-group>
+    </v-label-div>
+    <div class="wup-inner">
+      <div class="d1">
+        <div class="dd1">
+          <!-- <v-echarts :opt="opt1"></v-echarts> -->
+        </div>
+        <div class="dd2">
+          <!-- <v-label-ctx v-for="(item,index) in showSexData " 
+            :key="index"
+            :label="item.key"
+            :cont="item.value"
+            :percentage="((item.value / totalSexData) * 100).toFixed(2) + '%'"
+            :color="colors[index]"
+            :eStyle="{ height: '7.35rem' }"
+          ></v-label-ctx> -->
+        </div>
+      </div>
+      <div class="d1">
+        <div class="dd1">
+          <v-echarts :opt="opt2"></v-echarts>
+        </div>
+        <div class="dd2" style="margin-right: 16px">
+          <!-- <v-label-ctx v-for="(item,index) in showAttestData " 
+            :key="index"
+            :label="item.key"
+            :cont="item.value"
+            :percentage="((item.value / totalAttestData) * 100).toFixed(2) + '%'"
+            :color="colors[index]"
+            :eStyle="{ height: '7.35rem' }"
+          ></v-label-ctx> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getSexMergeWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
+// import createOpt1 from "./opt1";
+// import createOpt2 from "./opt2";
+export default {
+  name: "weiboUserPortrait",
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      load: false,
+      // opt1: {},
+      // opt2: {},
+      // sourceData: [],
+      // showSexData: [],
+      // totalSexData: 0,
+      // totalAttestData: 0,
+      // showAttestData: [],
+      // brandArr: [],
+      // colors: [
+      //   "#54BF93",
+      //   "#3373CC",
+      //   "#CC9D12",
+      //   "#f15c80",
+      //   "#e4d354",
+      //   "#8085e8",
+      //   "#8d4653",
+      //   "#91e8e1",
+      //   "#f7a35c",
+      //   "#90ed7d",
+      //   "#54BF93",
+      //   "#3373CC",
+      //   "#CC9D12",
+      //   "#f15c80",
+      //   "#e4d354",
+      //   "#8085e8",
+      //   "#8d4653",
+      //   "#91e8e1",
+      //   "#f7a35c",
+      //   "#90ed7d",
+      // ],
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getBComparison;
+  //     let brands = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.name);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getSexMergeWeiBoC(obj)
+  //         .then((res) => {
+  //           let data = res.data;
+  //           let brandList = [];
+  //           let dataArr = []; //数组，传给createOpt方法
+  //           data.forEach( e => {
+  //               let o = {
+  //                   name: e.Name,
+  //                   sexData: this.toArr(e.Data.sex), //性别数据 type=arr
+  //                   attestData: this.toArr(e.Data.attestation) //认证数据 type=arr
+  //               }
+  //               brandList.push(e.Name); //获取品牌名
+  //               dataArr.push(o);
+  //           })
+  //           this.brandArr = brandList;
+  //           this.sourceData = dataArr;
+  //           this.doVal(0);
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  //   // 将对象变成数组
+  //   toArr(obj) {
+  //     let arr = [];
+  //     for (let key in obj) {
+  //       let o = {
+  //         key: key,
+  //         value: obj[key],
+  //       };
+  //       arr.push(o);
+  //     }
+  //     return arr;
+  //   },
+  //   // 给页面变化赋值
+  //   doVal(index) {
+  //     this.showSexData = this.sourceData[index].sexData;
+  //     this.showAttestData = this.sourceData[index].attestData;
+  //     this.totalSexData = this.showSexData[0].value*1 + this.showSexData[1].value*1 + this.showSexData[2].value*1;
+  //     this.totalAttestData = this.showAttestData[0].value*1+this.showAttestData[1].value*1+this.showAttestData[2].value*1;
+  //     this.opt1 = createOpt1(this.showSexData, this.colors);
+  //     this.opt2 = createOpt2(this.showAttestData, this.colors);
+  //   },
+  //   // 切换数据
+  //   handlerTab(n) {
+  //     this.doVal(n)
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.wup-outter {
+  width: 944px;
+  height: 412px;
+  .wup-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+      overflow: hidden;
+      .dd1 {
+        width: 260px;
+        height: 100%;
+      }
+      .dd2 {
+        width: 240px;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/ModelComparison/BrandComparison.vue b/src/views/ModelComparison/BrandComparison.vue
index f0cc141..d50332b 100644
--- a/src/views/ModelComparison/BrandComparison.vue
+++ b/src/views/ModelComparison/BrandComparison.vue
@@ -17,51 +17,76 @@
 <template>
     <div class="d-container">
         <div class="bc-outter">
-            <brandCompateHeader :data="getMComparison" @change="handlerChangeBrand"></brandCompateHeader>
+            <brandCompateHeader :data="getMComparison" @change="handlerChangeBrand" v-if="!$slots['skeleton']"></brandCompateHeader>
+            <brandCompateHeaderStoken slot="skeleton" v-else></brandCompateHeaderStoken>
             <div class="bc-d2">
-                <informationTrend></informationTrend>
-                <overallInformation></overallInformation>
-                <overallNumberOfInteractions></overallNumberOfInteractions>
+                <informationTrend v-if="!$slots['skeleton']"></informationTrend>
+                <informationTrendStoken slot="skeleton" v-else></informationTrendStoken>
+                <overallInformation v-if="!$slots['skeleton']"></overallInformation>
+                <overallInformationStoken slot="skeleton" v-else></overallInformationStoken>
+                <overallNumberOfInteractions v-if="!$slots['skeleton']"></overallNumberOfInteractions>
+                <overallNumberOfInteractionsStoken slot="skeleton" v-else></overallNumberOfInteractionsStoken>
             </div>
-            <brandTonalDistribution></brandTonalDistribution>
+            <brandTonalDistribution v-if="!$slots['skeleton']"></brandTonalDistribution>
+            <brandTonalDistributionStoken slot="skeleton" v-else></brandTonalDistributionStoken>
             <div class="bc-d3">
-                <channelDistribution></channelDistribution>
-                <keyMediaCommunicationComparison></keyMediaCommunicationComparison>
+                <channelDistribution v-if="!$slots['skeleton']"></channelDistribution>
+                <channelDistributionStoken slot="skeleton" v-else></channelDistributionStoken>
+                <keyMediaCommunicationComparison v-if="!$slots['skeleton']"></keyMediaCommunicationComparison>
+                <keyMediaCommunicationComparisonStoken slot="skeleton" v-else></keyMediaCommunicationComparisonStoken>
             </div>
-            <brandCommunicationTOPMedia></brandCommunicationTOPMedia>
-            <overallWordCloudComparison></overallWordCloudComparison>
-            <brandEventComparison></brandEventComparison>
+            <brandCommunicationTOPMedia v-if="!$slots['skeleton']"></brandCommunicationTOPMedia>
+            <brandCommunicationTOPMediaStoken slot="skeleton" v-else></brandCommunicationTOPMediaStoken>
+            <overallWordCloudComparison v-if="!$slots['skeleton']"></overallWordCloudComparison>
+            <overallWordCloudComparisonStoken slot="skeleton" v-else></overallWordCloudComparisonStoken>
+            <brandEventComparison v-if="!$slots['skeleton']"></brandEventComparison>
+            <brandEventComparisonStoken slot="skeleton" v-else></brandEventComparisonStoken>
             <div class="bc-d4">
                 <v-label-div title="车型微博对比"></v-label-div>
                 <div class="bc-d4-d1">
-                    <comparisonOfWeiboInformation></comparisonOfWeiboInformation>
-                    <comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
-                    <weiboBigVComparison></weiboBigVComparison>
+                    <comparisonOfWeiboInformation v-if="!$slots['skeleton']"></comparisonOfWeiboInformation>
+                    <comparisonOfWeiboInformationStoken slot="skeleton" v-else></comparisonOfWeiboInformationStoken>
+                    <comparisonOfTheNumberOfWeiboInteractions v-if="!$slots['skeleton']"></comparisonOfTheNumberOfWeiboInteractions>
+                    <comparisonOfTheNumberOfWeiboInteractionsStoken slot="skeleton" v-else></comparisonOfTheNumberOfWeiboInteractionsStoken>
+                    <weiboBigVComparison v-if="!$slots['skeleton']"></weiboBigVComparison>
+                    <weiboBigVComparisonStoken slot="skeleton" v-else></weiboBigVComparisonStoken>
                 </div>
-                <weiboTuneComparison></weiboTuneComparison>
-                <weiboContentDirectionComparison></weiboContentDirectionComparison>
+                <weiboTuneComparison v-if="!$slots['skeleton']"></weiboTuneComparison>
+                <weiboTuneComparisonStoken slot="skeleton" v-else></weiboTuneComparisonStoken>
+                <weiboContentDirectionComparison v-if="!$slots['skeleton']"></weiboContentDirectionComparison>
+                <weiboContentDirectionComparisonStoken slot="skeleton" v-else></weiboContentDirectionComparisonStoken>
                 <div class="bc-d4-d2">
-                    <userAreaDistribution></userAreaDistribution>
-                    <weiboUserPortrait></weiboUserPortrait>
+                    <userAreaDistribution v-if="!$slots['skeleton']"></userAreaDistribution>
+                    <userAreaDistributionStoken slot="skeleton" v-else></userAreaDistributionStoken>
+                    <weiboUserPortrait v-if="!$slots['skeleton']"></weiboUserPortrait>
+                    <weiboUserPortraitStoken slot="skeleton" v-else></weiboUserPortraitStoken>
                 </div>
             </div>
             <div class="bc-d5">
                 <v-label-div title="车型论坛对比"></v-label-div>
                 <div class="bc-d5-dd1">
-                    <summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
-                    <comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
+                    <summaryAndComparisonOfForumInformation v-if="!$slots['skeleton']"></summaryAndComparisonOfForumInformation>
+                    <summaryAndComparisonOfForumInformationStoken slot="skeleton" v-else></summaryAndComparisonOfForumInformationStoken>
+                    <comparisonOfForumPostingTrends v-if="!$slots['skeleton']"></comparisonOfForumPostingTrends>
+                    <comparisonOfForumPostingTrendsStoken slot="skeleton" v-else></comparisonOfForumPostingTrendsStoken>
                 </div>
-                 <forumTonalComparison></forumTonalComparison>
-                 <comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
-                 <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
+                 <forumTonalComparison v-if="!$slots['skeleton']"></forumTonalComparison>
+                 <forumTonalComparisonStoken slot="skeleton" v-else></forumTonalComparisonStoken>
+                 <comparisonOfPositiveTopicsInTheForum v-if="!$slots['skeleton']"></comparisonOfPositiveTopicsInTheForum>
+                 <comparisonOfPositiveTopicsInTheForumStoken slot="skeleton" v-else></comparisonOfPositiveTopicsInTheForumStoken>
+                 <comparisonOfNegativeTopicsInForums v-if="!$slots['skeleton']"></comparisonOfNegativeTopicsInForums>
+                 <comparisonOfNegativeTopicsInForumsStoken slot="skeleton" v-else></comparisonOfNegativeTopicsInForumsStoken>
             </div>
             <div class="bc-d6">
                <v-label-div title="车型尾翼对比"></v-label-div> 
                 <div class="bc-d6-dd1">
-                    <brandRearWingComparison></brandRearWingComparison>
-                    <informationVolumeByChannel></informationVolumeByChannel>
+                    <brandRearWingComparison v-if="!$slots['skeleton']"></brandRearWingComparison>
+                    <brandRearWingComparisonStoken slot="skeleton" v-else></brandRearWingComparisonStoken>
+                    <informationVolumeByChannel v-if="!$slots['skeleton']"></informationVolumeByChannel>
+                    <informationVolumeByChannelStoken slot="skeleton" v-else></informationVolumeByChannelStoken>
                 </div>
-                <tailTOPMedia></tailTOPMedia>
+                <tailTOPMedia v-if="!$slots['skeleton']"></tailTOPMedia>
+                <tailTOPMediaStoken slot="skeleton" v-else></tailTOPMediaStoken>
             </div>
 
         </div>
@@ -94,6 +119,32 @@ import brandRearWingComparison from "./brandRearWingComparison"
 import informationVolumeByChannel from "./informationVolumeByChannel"
 import tailTOPMedia from "./tailTOPMedia"
 import brandCompateHeader from "./brandCompateHeader"
+//骨架屏
+import informationTrendStoken from "./informationTrendStoken";
+import overallInformationStoken from "./overallInformationStoken";
+import overallNumberOfInteractionsStoken from "./overallNumberOfInteractionsStoken";
+import brandTonalDistributionStoken from "./brandTonalDistributionStoken";
+import channelDistributionStoken from "./channelDistributionStoken";
+import keyMediaCommunicationComparisonStoken from "./keyMediaCommunicationComparisonStoken";
+import brandCommunicationTOPMediaStoken from "./brandCommunicationTOPMediaStoken";
+import overallWordCloudComparisonStoken from "./overallWordCloudComparisonStoken";
+import brandEventComparisonStoken from "./brandEventComparisonStoken";
+import comparisonOfWeiboInformationStoken from "./comparisonOfWeiboInformationStoken";
+import comparisonOfTheNumberOfWeiboInteractionsStoken from "./comparisonOfTheNumberOfWeiboInteractionsStoken";
+import weiboBigVComparisonStoken from "./weiboBigVComparisonStoken";
+import weiboTuneComparisonStoken from "./weiboTuneComparisonStoken";
+import weiboContentDirectionComparisonStoken from "./weiboContentDirectionComparisonStoken";
+import userAreaDistributionStoken from "./userAreaDistributionStoken";
+import weiboUserPortraitStoken from "./weiboUserPortraitStoken";
+import summaryAndComparisonOfForumInformationStoken from "./summaryAndComparisonOfForumInformationStoken"
+import comparisonOfForumPostingTrendsStoken from "./comparisonOfForumPostingTrendsStoken"
+import forumTonalComparisonStoken from "./forumTonalComparisonStoken"
+import comparisonOfPositiveTopicsInTheForumStoken from "./comparisonOfPositiveTopicsInTheForumStoken"
+import comparisonOfNegativeTopicsInForumsStoken from "./comparisonOfNegativeTopicsInForumsStoken"
+import brandRearWingComparisonStoken from "./brandRearWingComparisonStoken"
+import informationVolumeByChannelStoken from "./informationVolumeByChannelStoken"
+import tailTOPMediaStoken from "./tailTOPMediaStoken"
+import brandCompateHeaderStoken from "./brandCompateHeaderStoken"
 export default {
     name: "brandComparison",
     inject: ['reload'],
@@ -122,8 +173,33 @@ export default {
         brandRearWingComparison, // 尾翼趋势对比
         informationVolumeByChannel, // 分渠道信息量
         tailTOPMedia, // 尾翼TOP媒体
-        brandCompateHeader // 选择品牌
-        
+        brandCompateHeader, // 选择品牌
+        //骨架屏
+        informationTrendStoken, // 信息量趋势
+        overallInformationStoken, // 整体信息量
+        overallNumberOfInteractionsStoken, // 整体互动人数
+        brandTonalDistributionStoken, // 车型调性分布
+        channelDistributionStoken, // 渠道分布
+        keyMediaCommunicationComparisonStoken, // 重点媒体传播对比
+        brandCommunicationTOPMediaStoken, // 车型传播TOP媒体
+        overallWordCloudComparisonStoken, // 整体词云对比
+        brandEventComparisonStoken, //车型事件对比
+        comparisonOfWeiboInformationStoken, // 微博信息量对比
+        comparisonOfTheNumberOfWeiboInteractionsStoken, // 微博互动人数对比
+        weiboBigVComparisonStoken, // 微博大V对比
+        weiboTuneComparisonStoken, // 微博调性对比
+        weiboContentDirectionComparisonStoken, // 微博内容方向对比
+        userAreaDistributionStoken, //用户区域分布
+        weiboUserPortraitStoken, // 微博用户画像
+        summaryAndComparisonOfForumInformationStoken, // 论坛信息概括对比
+        comparisonOfForumPostingTrendsStoken, // 论坛发帖趋势对比
+        forumTonalComparisonStoken, // 论坛调性对比
+        comparisonOfPositiveTopicsInTheForumStoken, // 论坛正面话题对比
+        comparisonOfNegativeTopicsInForumsStoken, // 论坛负面话题对比
+        brandRearWingComparisonStoken, // 尾翼趋势对比
+        informationVolumeByChannelStoken, // 分渠道信息量
+        tailTOPMediaStoken, // 尾翼TOP媒体
+        brandCompateHeaderStoken, // 选择品牌
     },
     data() {
         return {
diff --git a/src/views/ModelComparison/brandCommunicationTOPMediaStoken/index.vue b/src/views/ModelComparison/brandCommunicationTOPMediaStoken/index.vue
new file mode 100644
index 0000000..fd775b6
--- /dev/null
+++ b/src/views/ModelComparison/brandCommunicationTOPMediaStoken/index.vue
@@ -0,0 +1,127 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:58:57
+ * @LastEditTime: 2021-11-16 11:06:38
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
+-->
+<template>
+    <div class="bcm-outter" v-loading="load">
+        <v-label-div title="车型传播TOP媒体"> </v-label-div>
+        <div class="bcm-inner">
+            <div class="bcm-item" v-for="(item, index) in arrList" :key="index">
+                <span class="ss1" :style="{ color: colors[index] }">{{
+          item.key
+        }}</span>
+                <div class="dd1">
+                    <vue-scroll>
+                        <!-- <v-ranking-bcm v-for="(it, n) in item.value" :key="n" :label="it.key" :num="it.num" :val="it.value"></v-ranking-bcm> -->
+                    </vue-scroll>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+// import { getSourceTopCount0528C } from "@/api/BrandComparison";
+// import vRankingBcm from "./v-ranking-bcm";
+export default {
+    name: "brandCommunicationTOPMedia",
+    components: {
+    
+    },
+    data() {
+        return {
+            load: false,
+            colors: [
+                "#3373CC",
+                "#63AECC",
+                "#54BF93",
+                "#CC9D12",
+                "#CC7733",
+                "#CC5B41",
+            ],
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            arrList: [],
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison;
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         return new Promise((resolve, reject) => {
+    //             let obj = Object.assign({}, this.getCtime2, this.form);
+    //             this.load = true;
+    //             getSourceTopCount0528C(obj)
+    //                 .then((res) => {
+    //                     let data = res.data || [];
+    //                     data.forEach((ele) => {
+    //                         for (
+    //                             let index = 0;
+    //                             index < ele.value.length;
+    //                             index++
+    //                         ) {
+    //                             ele.value[index].num = index + 1;
+    //                         }
+    //                     });
+    //                     this.arrList = data;
+    //                     this.load = false;
+    //                     resolve(data);
+    //                 })
+    //                 .catch(() => {
+    //                     reject(false);
+    //                 });
+    //         });
+    //     },
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.bcm-outter {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bcm-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .bcm-item {
+            width: 282px;
+            margin-left: 27px;
+            .ss1 {
+                display: block;
+                font-size: 18px;
+                color: #fff;
+                font-weight: 500;
+                padding-top: 14px;
+            }
+            .dd1 {
+                height: calc(100% - 44px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/brandCompateHeaderStoken/index.vue b/src/views/ModelComparison/brandCompateHeaderStoken/index.vue
new file mode 100644
index 0000000..58d782f
--- /dev/null
+++ b/src/views/ModelComparison/brandCompateHeaderStoken/index.vue
@@ -0,0 +1,264 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-03 11:54:08
+ * @LastEditTime: 2021-11-19 15:41:42
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
+-->
+<template>
+    <div class="mccm-outter">
+        <v-label-div title="切换车型">
+            <a-button style="margin-right: 1rem" :loading="btnLoading" @click="handlerExport" v-if="getMComparison.length > 0" v-has="'btn_model_c_toppt'">导出报告</a-button>
+            <v-btn @click="goback">返回洞察详情</v-btn>
+        </v-label-div>
+        <div class="mccm-inner">
+            <template v-for="(item,index) in list">
+                <div :key="index" style="display: flex;justify-content: flex-start;">
+                    <div class="mccm-item" style="margin-left: 1rem">
+                        <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 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>
+            </template>
+
+        </div>
+        <iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel>
+    </div>
+</template>
+
+<script>
+import { getToPptTask } from "@/api/BrandInsight";
+import { getUserSeriesName } from "@/api/comm";
+export default {
+    name: "brandCompateHeader",
+    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 {
+            btnLoading: false,
+            labelCol: { span: 9 },
+            wrapperCol: { span: 14 },
+            modelShow: false,
+            brand: "",
+            model: "",
+            chooseIndex: -1,
+            form: {
+                token: "",
+                sBrandName: "",
+            },
+            list: [
+                {
+                    brand: "",
+                    model: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    isDel: false,
+                },
+            ],
+        };
+    },
+    created() {
+        this.brand = this.getBrand.brandname || "奥迪";
+        this.modelData();
+    },
+    methods: {
+        goback() {
+            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.isDel = false;
+            let filterArr = this.list.filter((ele) => {
+                return ele.brand && ele.model;
+            });
+            this.$emit("del", n);
+            this.$emit("change", filterArr);
+        },
+        // 获取切换车型的数据
+        handlerBrand(arr) {
+            let n = this.list.findIndex((ele) => ele.model === arr[1].name);
+            if (n != -1) return;
+            let row = this.list[this.chooseIndex];
+            row.brand = arr[0].brandname;
+            row.model = arr[1].name;
+            row.isDel = true;
+            let filterArr = this.list.filter((ele) => {
+                return ele.brand && ele.model;
+            });
+            this.$emit("change", filterArr);
+        },
+        handlerExport() {
+            this.btnLoading = true;
+            let arr = this.getMComparison;
+            let brands = [];
+            let models = [];
+            arr.forEach((ele) => {
+                brands.push(ele.brand);
+                models.push(ele.model);
+            });
+            let sBrand = brands.toString();
+            let sSeriesName = models.toString();
+            let obj = Object.assign({}, this.getCtime2, {
+                token: this.getToken,
+                iContrastType: 2,
+                sBrand: sBrand,
+                sSeriesName: sSeriesName,
+                sType: 'ToSeriesPptV6'
+            });
+            getToPptTask(obj).then(() => {
+                this.$notification.open({
+                    message: `数据生成中`,
+                    description: '请前往个人中心查看下载进度',
+                    placement: 'bottomRight',
+                });
+                this.btnLoading = false;
+            })
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.mccm-outter {
+    width: 1888px;
+    height: 236px;
+    border: 2px solid #0f2a4d;
+    .mccm-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .mccm-item {
+            width: 230px;
+            height: 160px;
+            background: linear-gradient(180deg, #003a62 0%, #001c43 100%);
+            border: 2px solid #0e5193;
+            margin-top: 13px;
+            border-radius: 2px;
+            position: relative;
+            .m-t-btn {
+                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: 100% 100%;
+                cursor: pointer;
+                text-align: center;
+                color: #63aecc;
+                line-height: 28px;
+            }
+            .mc-t {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                margin-top: 21px;
+                .m-t-d1 {
+                    width: 78px;
+                    height: 78px;
+                    background-image: url("../../../assets/images/BrandInsight/img_lq.png");
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                    line-height: 78px;
+                    text-align: center;
+                    font-size: 14px;
+                    color: #0090ff;
+                    margin-left: 17px;
+                }
+                .m-t-s1 {
+                    display: block;
+                    font-size: 20px;
+                    color: #fff;
+                    margin-left: 6px;
+                }
+            }
+        }
+        .mccm-vs {
+            width: 78px;
+            height: 78px;
+            margin-top: 22px;
+        }
+    }
+}
+/deep/ .ant-form-item {
+    margin-bottom: 10px;
+}
+/deep/ .ant-calendar-picker {
+    min-width: auto !important;
+}
+</style>
diff --git a/src/views/ModelComparison/brandEventComparisonStoken/index.vue b/src/views/ModelComparison/brandEventComparisonStoken/index.vue
new file mode 100644
index 0000000..e5e75c8
--- /dev/null
+++ b/src/views/ModelComparison/brandEventComparisonStoken/index.vue
@@ -0,0 +1,164 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 17:33:28
+ * @LastEditTime: 2021-11-12 10:02:53
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
+-->
+<template>
+    <div class="bec-outter" v-loading="load">
+        <v-label-div title="车型事件对比"> </v-label-div>
+        <div class="bec-inner">
+            <v-label-div title="渠道声量对比" :showLine="false" :eStyle="{ 'border-style': 'none' }">
+            </v-label-div>
+            <div class="bec-inner-1">
+                <!-- <v-echarts :opt="opt1"></v-echarts> -->
+            </div>
+        </div>
+        <v-label-div title="事件分类" :showLine="false" :eStyle="{ 'border-style': 'none' }">
+        </v-label-div>
+        <div class="bec-one">
+           <!-- <v-echarts :opt="opt2"></v-echarts> -->
+        </div>
+        <!-- <eventBrandTonalDistribution></eventBrandTonalDistribution> -->
+    </div>
+</template>
+
+<script>
+// import { getSourcetypeC } from "@/api/BrandComparison/HotEvent.js";
+// import { getEventsSeriesNameC } from "@/api/ModelComparison";
+// import eventBrandTonalDistribution from "../eventBrandTonalDistribution"
+// import createOpt from "./opt";
+// import createOpt1 from "./opt1"
+export default {
+    name: "brandEventComparison",
+    components: {
+      
+    },
+    data() {
+        return {
+            load: false,
+            // opt1: {},
+            // opt2: {},
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            colors: [
+                "#3373CC",
+                "#63AECC",
+                "#54BF93",
+                "#CC9D12",
+                "#CC7733",
+                "#CC5B41",
+            ],
+           
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison;
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.load = true;
+    //         Promise.all([this.getData(),this.getTypeData()]).then(() => {
+    //           this.load = false;
+    //         })  
+    //     },
+    //     getData() {
+    //         return new Promise((resolve, reject) => {
+    //             let obj = Object.assign({}, this.getCtime2, this.form);
+    //             getSourcetypeC(obj)
+    //                 .then((res) => {
+    //                     let data = res.data || [];
+    //                     let dx = [];
+    //                     data.forEach((ele) => {
+    //                         let ab = ele.Data || {};
+    //                         for(let key in ab) {
+    //                           if(!dx.includes(key)) {
+    //                             dx.push(key)
+    //                           }  
+    //                         }
+    //                     });
+    //                     this.opt1 = createOpt(data, dx);
+    //                     resolve(data);
+    //                 })
+    //                 .catch(() => {
+    //                     reject(false);
+    //                 });
+    //         });
+    //     },
+    //     getTypeData() {
+    //         return new Promise((resolve, reject) => {
+    //             let obj = Object.assign({}, this.getCtime2, this.form);
+    //             getEventsSeriesNameC(obj)
+    //                 .then((res) => {
+    //                     let data = res.data || [];
+    //                     let brandList = [];
+    //                     data.forEach((e) => {
+    //                         e.Name = e.key;
+    //                         brandList.push(e.key);
+    //                     });
+    //                     this.opt2 = createOpt1(data, brandList);
+    //                     resolve(data);
+    //                 })
+    //                 .catch(() => {
+    //                     reject(false);
+    //                 });
+    //         });
+    //     },
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.bec-outter {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bec-inner {
+        width: 100%;
+        height: 412px;
+        .bec-inner-1 {
+          width: 100%;
+          height: calc(100% - 48px);
+        }
+    }
+    .bec-one {
+        width: 100%;
+        height: 412px;
+        display: flex;
+        justify-content: flex-start;
+        .bec-one-item {
+            width: 314px;
+            height: 100%;
+            .s1 {
+                padding-left: 16px;
+                display: block;
+                height: 40px;
+                line-height: 40px;
+                color: #fff;
+                font-size: 18px;
+            }
+            .d1 {
+                width: 100%;
+                height: calc(100% - 40px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/brandRearWingComparisonStoken/index.vue b/src/views/ModelComparison/brandRearWingComparisonStoken/index.vue
new file mode 100644
index 0000000..7f14934
--- /dev/null
+++ b/src/views/ModelComparison/brandRearWingComparisonStoken/index.vue
@@ -0,0 +1,82 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 14:26:18
+ * @LastEditTime: 2021-11-12 14:29:39
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandRearWingComparison/index.vue
+-->
+<template>
+    <div class="brw-outter" v-loading="load">
+        <v-label-div title="尾翼趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}" />
+        <div class="brw-inner">
+            <!-- <v-echarts :opt="opt"></v-echarts> -->
+        </div>
+    </div>
+</template>
+
+<script>
+// import { getCountTime0528C1 } from "@/api/ModelComparison";
+// import createOpt from "./opt";
+export default {
+    name: "brandRearWingComparison",
+    data() {
+        return {
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            // opt: createOpt(),
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison || [];
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         let obj = Object.assign({}, this.getCtime2, this.form);
+    //         this.load = true;
+    //         getCountTime0528C1(obj).then((res) => {
+    //             let data = res.data || [];
+    //             let dx = [];
+    //             let ds = [];
+    //             data.forEach((ele) => {
+    //                 let key = ele.key;
+    //                 let value = ele.value;
+    //                 dx.push(key);
+    //                 ds.push(value);
+    //             });
+    //             this.opt = createOpt(dx, ds);
+    //             this.load = false;
+    //         });
+    //     },
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.brw-outter {
+    width: 944px;
+    height: 412px;
+    .brw-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/brandTonalDistributionStoken/index.vue b/src/views/ModelComparison/brandTonalDistributionStoken/index.vue
new file mode 100644
index 0000000..c6e702d
--- /dev/null
+++ b/src/views/ModelComparison/brandTonalDistributionStoken/index.vue
@@ -0,0 +1,134 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 13:27:50
+ * @LastEditTime: 2021-11-11 14:25:06
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
+-->
+<template>
+  <div class="bd-outter">
+    <v-label-div title="车型调性分布"> </v-label-div>
+    <div class="bd-d1">
+      <div class="dd1" style="margin-left: 16px">
+        <span class="s1"></span><span class="s2">正面</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#54BF93' }"></span
+        ><span class="s2">中性</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#CC9D12' }"></span
+        ><span class="s2">负面</span>
+      </div>
+    </div>
+    <div class="bd-inner">
+      <!-- <roundata
+        v-for="(item,index) in list"
+        :key="index"
+        :title="item.Name"
+        :color="colors[index]"
+        :style="index === 0 ? 'margin-left: 4rem': 'margin-left: 7.5rem'"
+        :data="item.Data"
+      ></roundata> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getAffectionsC } from "@/api/BrandComparison";
+// import roundata from "./roundata";
+export default {
+  name: "brandTonalDistribution",
+  components: {
+    
+  },
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+        sSeriesName: "",
+        iContrastType: 2
+      },
+      colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+      list: [
+
+      ]
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getMComparison;
+  //     let brands = [];
+  //     let models = [];
+  //     arr.forEach(ele => {
+  //        brands.push(ele.brand);
+  //        models.push(ele.model);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.form.sSeriesName = models.toString();
+  //     this.getData();
+  //   },
+  //   //
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       this.load = true;
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       getAffectionsC(obj).then((res) => {
+  //         let data = res.data || [];
+  //         this.list = data;
+  //         this.load = false;
+  //         resolve(data)
+  //       }).catch(() => {
+  //           reject(false)
+  //       });
+  //     });
+  //   },
+  // },
+};
+</script>
+<style lang="less" scoped>
+.bd-outter {
+  width: 100%;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .bd-d1 {
+    width: 100%;
+    display: flex;
+    height: 36px;
+    justify-content: flex-start;
+    align-items: center;
+    .dd1 {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .s1 {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: #3373cc;
+    }
+    .s2 {
+      display: inline-block;
+      font-size: 12px;
+      color: #fff;
+      margin-left: 10px;
+    }
+  }
+  .bd-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/ModelComparison/channelDistributionStoken/index.vue b/src/views/ModelComparison/channelDistributionStoken/index.vue
new file mode 100644
index 0000000..6b94f7b
--- /dev/null
+++ b/src/views/ModelComparison/channelDistributionStoken/index.vue
@@ -0,0 +1,91 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:08:13
+ * @LastEditTime: 2021-11-11 16:29:45
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
+-->
+<template>
+    <div class="cd-outter" v-loading="load">
+        <v-label-div title="渠道分布"> </v-label-div>
+        <div class="cd-inner">
+            <!-- <v-echarts :opt="opt"></v-echarts> -->
+        </div>
+    </div>
+</template>
+
+<script>
+// import { getSourcetypeC } from "@/api/BrandComparison/index.js";
+// import createOpt from "./opt";
+export default {
+    name: "channelDistribution",
+    data() {
+        return {
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            opt: {},
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison;
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         return new Promise((resolve, reject) => {
+    //             let obj = Object.assign({}, this.getCtime2, this.form);
+    //             this.load = true;
+    //             getSourcetypeC(obj)
+    //                 .then((res) => {
+    //                     let data = res.data || [];
+    //                     let dx = [];
+    //                     data.forEach((ele) => {
+    //                         let ab = ele.Data || {};
+    //                         for (let key in ab) {
+    //                             if (!dx.includes(key)) {
+    //                                 dx.push(key);
+    //                             }
+    //                         }
+    //                     });
+    //                     this.opt = createOpt(data, dx);
+    //                     this.load = false;
+    //                     resolve(data);
+    //                 })
+    //                 .catch(() => {
+    //                     reject(false);
+    //                 });
+    //         });
+    //     },
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.cd-outter {
+    width: 936px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    .cd-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/comparisonOfForumPostingTrendsStoken/index.vue b/src/views/ModelComparison/comparisonOfForumPostingTrendsStoken/index.vue
new file mode 100644
index 0000000..e0bba4a
--- /dev/null
+++ b/src/views/ModelComparison/comparisonOfForumPostingTrendsStoken/index.vue
@@ -0,0 +1,79 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:45:18
+ * @LastEditTime: 2021-11-12 13:44:13
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
+-->
+<template>
+    <div class="cop-outter">
+        <v-label-div title="论坛发帖趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}" />
+        <div class="cop-inner">
+            <!-- <v-echarts :opt="opt"></v-echarts> -->
+        </div>
+    </div>
+</template>
+
+<script>
+// import { getCountTime0528C } from "@/api/ModelComparison";
+// import createOpt from "./opt";
+export default {
+    name: "comparisonOfForumPostingTrends",
+    data() {
+        return {
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            // opt: createOpt(),
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison;
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         let obj = Object.assign({}, this.getCtime2, this.form);
+    //         getCountTime0528C(obj).then((res) => {
+    //             let data = res.data || [];
+    //             let dx = [];
+    //             let ds = [];
+    //             data.forEach((ele) => {
+    //                 let key = ele.key;
+    //                 let value = ele.value;
+    //                 dx.push(key);
+    //                 ds.push(value);
+    //             });
+    //             this.opt = createOpt(dx, ds);
+    //         });
+    //     },
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.cop-outter {
+    width: 944px;
+    height: 412px;
+    .cop-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/comparisonOfNegativeTopicsInForumsStoken/index.vue b/src/views/ModelComparison/comparisonOfNegativeTopicsInForumsStoken/index.vue
new file mode 100644
index 0000000..5f9f79e
--- /dev/null
+++ b/src/views/ModelComparison/comparisonOfNegativeTopicsInForumsStoken/index.vue
@@ -0,0 +1,120 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:57:58
+ * @LastEditTime: 2021-11-12 14:24:50
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
+-->
+<template>
+    <div class="cpt-outter" v-loading="load">
+        <v-label-div title="论坛负面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}" />
+        <div class="cpt-inner">
+            <div class="cpt-item" v-for="(item,index) in list" :key="index">
+                <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
+                <div class="d1">
+                    <v-echarts :opt="item.drawOpt"></v-echarts>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getTopicPosAndTopicNeg0528C } from "@/api/ModelComparison";
+import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
+export default {
+    name: "comparisonOfPositiveTopicsInTheForum",
+    data() {
+        return {
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            colors: [
+                "#3373CC",
+                "#63AECC",
+                "#54BF93",
+                "#CC9D12",
+                "#CC7733",
+                "#CC5B41",
+            ],
+            list: [],
+        };
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getMComparison || [];
+            let brands = [];
+            let models = [];
+            arr.forEach((ele) => {
+                brands.push(ele.brand);
+                models.push(ele.model);
+            });
+            this.form.sBrand = brands.toString();
+            this.form.sSeriesName = models.toString();
+            this.getData();
+        },
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            this.load = true;
+            getTopicPosAndTopicNeg0528C(obj).then((res) => {
+                let data = res.data || [];
+                let arr = [];
+                data.forEach((ele) => {
+                    let z = ele.value[1].value || [];
+                    let dx = [];
+                    let ds = [];
+                    z.forEach((e) => {
+                        dx.push(e.key);
+                        ds.push(e.value);
+                    });
+                    let obj = {
+                        name: ele.key,
+                        drawOpt: createSideSingleColumn(dx, ds, "#bd9312"),
+                    };
+                    arr.push(obj);
+                });
+                this.list = arr;
+                this.load = false;
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.cpt-outter {
+    width: 100%;
+    height: 412px;
+    .cpt-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .cpt-item {
+            width: 100%;
+            height: 100%;
+            .s1 {
+                padding-left: 16px;
+                display: block;
+                height: 40px;
+                line-height: 40px;
+                color: #fff;
+                font-size: 18px;
+            }
+            .d1 {
+                width: 100%;
+                height: calc(100% - 40px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/comparisonOfPositiveTopicsInTheForumStoken/index.vue b/src/views/ModelComparison/comparisonOfPositiveTopicsInTheForumStoken/index.vue
new file mode 100644
index 0000000..484334e
--- /dev/null
+++ b/src/views/ModelComparison/comparisonOfPositiveTopicsInTheForumStoken/index.vue
@@ -0,0 +1,120 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:57:58
+ * @LastEditTime: 2021-11-12 14:25:38
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
+-->
+<template>
+    <div class="cpt-outter" v-loading="load">
+        <v-label-div title="论坛正面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+        <div class="cpt-inner">
+            <div class="cpt-item" v-for="(item,index) in list" :key="index">
+                <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
+                <div class="d1">
+                    <v-echarts :opt="item.drawOpt"></v-echarts> 
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getTopicPosAndTopicNeg0528C } from "@/api/ModelComparison";
+import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
+export default {
+    name: "comparisonOfPositiveTopicsInTheForum",
+    data() {
+        return {
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            colors: [
+                "#3373CC",
+                "#63AECC",
+                "#54BF93",
+                "#CC9D12",
+                "#CC7733",
+                "#CC5B41",
+            ],
+            list: [],
+        };
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getMComparison || [];
+            let brands = [];
+            let models = [];
+            arr.forEach((ele) => {
+                brands.push(ele.brand);
+                models.push(ele.model);
+            });
+            this.form.sBrand = brands.toString();
+            this.form.sSeriesName = models.toString();
+            this.getData();
+        },
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            this.load = true;
+            getTopicPosAndTopicNeg0528C(obj).then((res) => {
+                let data = res.data || [];
+                let arr = [];
+                data.forEach((ele) => {
+                    let z = ele.value[0].value || [];
+                    let dx = [];
+                    let ds = [];
+                    z.forEach((e) => {
+                        dx.push(e.key);
+                        ds.push(e.value);
+                    });
+                    let obj = {
+                        name: ele.key,
+                        drawOpt: createSideSingleColumn(dx, ds, "#3373CC"),
+                    };
+                    arr.push(obj);
+                });
+                this.list = arr;
+                this.load = false;
+            });
+        },
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.cpt-outter {
+    width: 100%;
+    height: 412px;
+    .cpt-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .cpt-item {
+            width: 100%;
+            height: 100%;
+            .s1 {
+                padding-left: 16px;
+                display: block;
+                height: 40px;
+                line-height: 40px;
+                color:#fff;
+                font-size: 18px;
+            }
+            .d1 {
+                width: 100%;
+                height: calc(100% - 40px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/comparisonOfTheNumberOfWeiboInteractionsStoken/index.vue b/src/views/ModelComparison/comparisonOfTheNumberOfWeiboInteractionsStoken/index.vue
new file mode 100644
index 0000000..e2cb4c2
--- /dev/null
+++ b/src/views/ModelComparison/comparisonOfTheNumberOfWeiboInteractionsStoken/index.vue
@@ -0,0 +1,90 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:22:21
+ * @LastEditTime: 2021-11-12 10:06:29
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
+-->
+<template>
+  <div class="cotn-outter" v-loading="load">
+    <v-label-div
+      title="微博互动人数对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    ></v-label-div>
+    <div class="cotn-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getInteractCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+export default {
+  name: "comparisonOfTheNumberOfWeiboInteractions",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+        sSeriesName: "",
+        iContrastType: 2
+      },
+      opt: {}
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getMComparison;
+      let brands = [];
+      let models = [];
+      arr.forEach((ele) => {
+        brands.push(ele.brand);
+        models.push(ele.model);
+      });
+      this.form.sBrand = brands.toString();
+      this.form.sSeriesName = models.toString();
+      this.getData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
+        getInteractCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let dx = [];
+            let ds = [];
+            data.forEach((ele) => {
+              dx.push(ele.key);
+              ds.push(ele.value);
+            });
+            this.opt = createSingleColumnar(dx, ds, '#54BF93');
+            this.load = false;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.cotn-outter {
+  width: 628px;
+  height: 412px;
+  .cotn-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/ModelComparison/comparisonOfWeiboInformationStoken/index.vue b/src/views/ModelComparison/comparisonOfWeiboInformationStoken/index.vue
new file mode 100644
index 0000000..221e0bc
--- /dev/null
+++ b/src/views/ModelComparison/comparisonOfWeiboInformationStoken/index.vue
@@ -0,0 +1,91 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:01:52
+ * @LastEditTime: 2021-11-12 10:05:17
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
+-->
+<template>
+  <div class="cowi-outter" v-loading="load">
+    <v-label-div
+      title="微博信息量对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    ></v-label-div>
+    <div class="cowi-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getContrastCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+export default {
+  name: "comparisonOfWeiboInformation",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+        sSeriesName: "",
+        iContrastType: 2
+      },
+      opt: {}
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getMComparison;
+      let brands = [];
+      let models = [];
+      arr.forEach((ele) => {
+        brands.push(ele.brand);
+        models.push(ele.model);
+      });
+      this.form.sBrand = brands.toString();
+      this.form.sSeriesName = models.toString();
+      this.getData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        this.load = true;
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getContrastCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let dx = [];
+            let ds = [];
+            data.forEach(ele => {
+                dx.push(ele.key);
+                ds.push(ele.value)
+            })
+            this.opt = createSingleColumnar(dx,ds);
+            this.load = false;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.cowi-outter {
+  width: 628px;
+  height: 412px;
+  .cowi-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/ModelComparison/eventBrandTonalDistributionStoken/index.vue b/src/views/ModelComparison/eventBrandTonalDistributionStoken/index.vue
new file mode 100644
index 0000000..cd16ccd
--- /dev/null
+++ b/src/views/ModelComparison/eventBrandTonalDistributionStoken/index.vue
@@ -0,0 +1,133 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 13:27:50
+ * @LastEditTime: 2021-11-11 17:49:37
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
+-->
+<template>
+  <div class="bd-outter" v-loading="load">
+    <v-label-div title="整体调性对比" :showLine="false" :eStyle="{ 'border-style': 'none' }"> </v-label-div>
+    <div class="bd-d1">
+      <div class="dd1" style="margin-left: 16px">
+        <span class="s1"></span><span class="s2">正面</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#54BF93' }"></span
+        ><span class="s2">中性</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#CC9D12' }"></span
+        ><span class="s2">负面</span>
+      </div>
+    </div>
+    <div class="bd-inner">
+      <roundata
+        v-for="(item,index) in list"
+        :key="index"
+        :title="item.key"
+        :color="colors[index]"
+        :style="index === 0 ? 'margin-left: 4rem': 'margin-left: 7.5rem'"
+        :data="item.value"
+      ></roundata>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getEventAffectionsC } from "@/api/ModelComparison";
+import roundata from "./roundata";
+export default {
+  name: "eventBrandTonalDistribution",
+  components: {
+    roundata,
+  },
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+        sSeriesName: "",
+        iContrastType: 2
+      },
+      colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+      list: [
+
+      ]
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getMComparison;
+      let brands = [];
+      let models = [];
+      arr.forEach(ele => {
+         brands.push(ele.brand);
+         models.push(ele.model);
+      });
+      this.form.sBrand = brands.toString();
+      this.form.sSeriesName = models.toString();
+      this.getData();
+    },
+    //
+    getData() {
+      return new Promise((resolve, reject) => {
+        this.load = true;
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getEventAffectionsC(obj).then((res) => {
+          let data = res.data || [];
+          this.list = data;
+          this.load = false;
+          resolve(data)
+        }).catch(() => {
+            reject(false)
+        });
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.bd-outter {
+  width: 100%;
+  height: 460px;
+  margin-top: 16px;
+  .bd-d1 {
+    width: 100%;
+    display: flex;
+    height: 36px;
+    justify-content: flex-start;
+    align-items: center;
+    .dd1 {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .s1 {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: #3373cc;
+    }
+    .s2 {
+      display: inline-block;
+      font-size: 12px;
+      color: #fff;
+      margin-left: 10px;
+    }
+  }
+  .bd-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/ModelComparison/forumTonalComparisonStoken/index.vue b/src/views/ModelComparison/forumTonalComparisonStoken/index.vue
new file mode 100644
index 0000000..df0318f
--- /dev/null
+++ b/src/views/ModelComparison/forumTonalComparisonStoken/index.vue
@@ -0,0 +1,119 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:49:09
+ * @LastEditTime: 2021-11-12 13:59:50
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
+-->
+<template>
+    <div class="wtc-outter">
+        <v-label-div title="论坛调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
+        </v-label-div>
+        <div class="wtc-d1">
+            <div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div>
+            <div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#54BF93'}"></span><span class="s2">中性</span></div>
+            <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 v-for="(item,index) in list" :key="index" :title="item.Name" :color="colors[index]" :style="index === 0 ? 'margin-left: 4rem': 'margin-left: 7.5rem'" :data="item.Data"></roundata> -->
+        </div>
+    </div>
+</template>
+
+<script>
+// import { getAffectionsC } from "@/api/ModelComparison";
+// import roundata from "./roundata";
+export default {
+    name: "forumTonalComparison",
+    components: {
+        
+    },
+    data() {
+        return {
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            colors: [
+                "#3373CC",
+                "#63AECC",
+                "#54BF93",
+                "#CC9D12",
+                "#CC7733",
+                "#CC5B41",
+            ],
+            list: [],
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison;
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         let obj = Object.assign({}, this.getCtime2, this.form);
+    //         this.load = true;
+    //         getAffectionsC(obj).then((res) => {
+    //             let data = res.data || [];
+    //             this.list = data;
+    //             this.load = false;
+    //         });
+    //     },
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.wtc-outter {
+    width: 100%;
+    height: 460px;
+    margin-top: 16px;
+    .wtc-d1 {
+        width: 100%;
+        display: flex;
+        height: 36px;
+        justify-content: flex-start;
+        align-items: center;
+        .dd1 {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+        }
+        .s1 {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            background: #3373cc;
+        }
+        .s2 {
+            display: inline-block;
+            font-size: 12px;
+            color: #fff;
+            margin-left: 10px;
+        }
+    }
+    .wtc-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/informationTrendStoken/index.vue b/src/views/ModelComparison/informationTrendStoken/index.vue
new file mode 100644
index 0000000..fc20e03
--- /dev/null
+++ b/src/views/ModelComparison/informationTrendStoken/index.vue
@@ -0,0 +1,83 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 11:40:55
+ * @LastEditTime: 2021-11-11 14:26:23
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/informationTrend/index.vue
+-->
+<template>
+  <div class="it-outter">
+    <v-label-div title="信息量趋势"></v-label-div>
+    <div class="it-inner">
+      <!-- <v-echarts :opt="opt"></v-echarts> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getCountTime0528C } from "@/api/BrandComparison";
+// import createOpt from "./opt";
+export default {
+  name: "informationTrend",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+        sSeriesName: "",
+        iContrastType: 2
+      },
+      opt: {},
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getMComparison;
+  //     let brands = [];
+  //     let models = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.brand);
+  //       models.push(ele.model);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.form.sSeriesName = models.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     let obj = Object.assign({}, this.getCtime2, this.form);
+  //     this.load = true;
+  //     getCountTime0528C(obj).then((res) => {
+  //        let data = res.data || [];
+  //        let dx = [];
+  //        let ds = [];
+  //        data.forEach(ele => {
+  //            let key = ele.key;
+  //            let value = ele.value;
+  //            dx.push(key);
+  //            ds.push(value);
+  //        });
+  //        this.opt = createOpt(dx, ds);
+  //        this.load = false;
+  //     });
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.it-outter {
+  width: 618px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  .it-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/ModelComparison/informationVolumeByChannelStoken/index.vue b/src/views/ModelComparison/informationVolumeByChannelStoken/index.vue
new file mode 100644
index 0000000..904aead
--- /dev/null
+++ b/src/views/ModelComparison/informationVolumeByChannelStoken/index.vue
@@ -0,0 +1,83 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 14:47:23
+ * @LastEditTime: 2021-11-12 14:39:17
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/informationVolumeByChannel/index.vue
+-->
+<template>
+    <div class="ivb-outter">
+        <v-label-div title="分渠道信息量" :showLine="false" :eStyle="{'border-style': 'none'}" />
+        <div class="ivb-inner">
+            <!-- <v-echarts :opt="opt"></v-echarts> -->
+        </div>
+    </div>
+</template>
+
+<script>
+// import { getSourcetypeC } from "@/api/ModelComparison";
+// import createOpt from "./opt";
+export default {
+    name: "informationVolumeByChannel",
+    data() {
+        return {
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            load: false,
+            opt: {},
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison || [];
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         let obj = Object.assign({}, this.getCtime2, this.form);
+    //         this.load = true;
+    //         getSourcetypeC(obj).then((res) => {
+    //             let data = res.data || [];
+    //             let dx = [];
+    //             data.forEach((ele) => {
+    //                 let ab = ele.Data || {};
+    //                 for (let key in ab) {
+    //                     if (!dx.includes(key)) {
+    //                         dx.push(key);
+    //                     }
+    //                 }
+    //             });
+    //             this.opt = createOpt(data, dx);
+    //             this.load = false;
+    //         });
+    //     },
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.ivb-outter {
+    width: 944px;
+    height: 412px;
+    .ivb-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/keyMediaCommunicationComparisonStoken/index.vue b/src/views/ModelComparison/keyMediaCommunicationComparisonStoken/index.vue
new file mode 100644
index 0000000..5520aa2
--- /dev/null
+++ b/src/views/ModelComparison/keyMediaCommunicationComparisonStoken/index.vue
@@ -0,0 +1,85 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:34:26
+ * @LastEditTime: 2021-11-11 16:27:27
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
+-->
+<template>
+    <div class="kmcc-outter">
+        <v-label-div title="重点媒体传播对比"> </v-label-div>
+        <div class="kmcc-inner">
+            <!-- <v-echarts :opt="opt"></v-echarts> -->
+        </div>
+    </div>
+</template>
+
+<script>
+// import createOpt from "./opt";
+// import { getSourceCount0528C } from "@/api/BrandComparison";
+export default {
+    name: "kmcc-outter",
+    data() {
+        return {
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            // opt: {},
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison;
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         let obj = Object.assign({}, this.getCtime2, this.form);
+    //         this.load = true;
+    //         getSourceCount0528C(obj).then((res) => {
+    //             let data = res.data || [];
+    //             let dx = [];
+    //             data.forEach((ele) => {
+    //                 let ab = ele.value || [];
+    //                 ab.forEach(e => {
+    //                   if (!dx.includes(e.key)) {
+    //                         dx.push(e.key);
+    //                     }
+    //                 })
+    //             });
+    //             this.opt = createOpt(dx, data);
+    //             this.load = false;
+    //         });
+    //     },
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.kmcc-outter {
+    width: 936px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-left: 16px;
+    .kmcc-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/overallInformationStoken/index.vue b/src/views/ModelComparison/overallInformationStoken/index.vue
new file mode 100644
index 0000000..44f0392
--- /dev/null
+++ b/src/views/ModelComparison/overallInformationStoken/index.vue
@@ -0,0 +1,87 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 11:58:33
+ * @LastEditTime: 2021-11-11 14:28:31
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/overallInformation/index.vue
+-->
+<template>
+    <div class="oi-outter">
+        <v-label-div title="整体信息量" ></v-label-div>
+        <div class="oi-inner">
+             <!-- <v-echarts :opt="opt"></v-echarts> -->
+        </div>
+    </div>
+</template>
+
+<script>
+// import {getContrastCount0528C} from "@/api/BrandComparison"
+// import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "overallInformation",
+    data() {
+        return {
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2
+            },
+            opt: {}
+        }
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison;
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach(ele => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         return new Promise((resolve, reject) => {
+    //         let obj = Object.assign({}, this.getCtime2, this.form);
+    //         this.load = true;
+    //         getContrastCount0528C(obj).then((res) => {
+    //         let data = res.data || [];
+    //         let brandsList = [];
+    //         let infoList = [];
+    //         data.forEach(e => {
+    //             brandsList.push(e.key);
+    //             infoList.push(e.value);
+    //         })
+    //         this.opt = createSingleColumnar(brandsList, infoList);
+    //         this.load = false;
+    //         resolve(data)
+    //         }).catch(() => {
+    //             reject(false)
+    //         });
+    //     });
+    //     }
+    // }
+};
+</script>
+
+<style lang="less" scoped>
+.oi-outter {
+    width: 618px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-left: 16px;
+    .oi-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/overallNumberOfInteractionsStoken/index.vue b/src/views/ModelComparison/overallNumberOfInteractionsStoken/index.vue
new file mode 100644
index 0000000..35d489f
--- /dev/null
+++ b/src/views/ModelComparison/overallNumberOfInteractionsStoken/index.vue
@@ -0,0 +1,87 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 13:12:08
+ * @LastEditTime: 2021-11-11 14:29:27
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/overallNumberOfInteractions/index.vue
+-->
+<template>
+    <div class="onoi-outter">
+        <v-label-div title="整体互动人数" ></v-label-div>
+        <div class="onoi-inner">
+            <!-- <v-echarts :opt="opt"></v-echarts> -->
+        </div>
+    </div>
+</template>
+
+<script>
+// import {getInteractCount0528C} from "@/api/BrandComparison"
+// import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "overallInformation",
+    data() {
+        return {
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2
+            },
+            opt: {}
+        }
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison;
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach(ele => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         return new Promise((resolve, reject) => {
+    //         let obj = Object.assign({}, this.getCtime2, this.form);
+    //         this.load = true;
+    //         getInteractCount0528C(obj).then((res) => {
+    //         let data = res.data || [];
+    //         let brandsList = [];
+    //         let infoList = [];
+    //         data.forEach(e => {
+    //             brandsList.push(e.key);
+    //             infoList.push(e.value);
+    //         })
+    //         this.opt = createSingleColumnar(brandsList, infoList, '#54BF93');
+    //         this.load = false;
+    //         resolve(data)
+    //         }).catch(() => {
+    //             reject(false)
+    //         });
+    //     });
+    //     }
+    // }
+};
+</script>
+
+<style lang="less" scoped>
+.onoi-outter {
+    width: 618px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-left: 16px;
+    .onoi-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/overallWordCloudComparisonStoken/index.vue b/src/views/ModelComparison/overallWordCloudComparisonStoken/index.vue
new file mode 100644
index 0000000..f5b1fc4
--- /dev/null
+++ b/src/views/ModelComparison/overallWordCloudComparisonStoken/index.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 16:56:32
+ * @LastEditTime: 2021-11-11 16:44:15
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/overallWordCloudComparison/index.vue
+-->
+<template>
+  <div class="owcc-outter" v-loading="load">
+    <v-label-div title="整体词云对比"> </v-label-div>
+    <div class="owcc-inner">
+      <div class="owcc-item" v-for="(item, index) in dataSource" :key="index">
+        <v-label-div
+          :title="item.name"
+          :titleColor="colors[index]"
+          :showLine="false"
+          :eStyle="{ 'border-style': 'none' }"
+        >
+          <v-tab-group
+            :btns="['正面', '负面']"
+            @change="(n) => {handlerTab(n,item)}"
+          ></v-tab-group>
+        </v-label-div>
+        <div class="owcc-draw">
+          <v-echarts :opt="item.opt"></v-echarts>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPositiveAndNegative0528C } from "@/api/BrandComparison";
+import createWordCloud from "@/utils/gol/bubbleWord";
+export default {
+  name: "overallWordCloudComparison",
+  data() {
+    return {
+      opt: {},
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+        sSeriesName: "",
+        iContrastType: 2
+      },
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      dataSource: []
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getMComparison;
+      let brands = [];
+      let models = [];
+      arr.forEach((ele) => {
+        brands.push(ele.brand);
+        models.push(ele.model);
+      });
+      this.form.sBrand = brands.toString();
+      this.form.sSeriesName = models.toString();
+      this.getData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        this.load = true;
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getPositiveAndNegative0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let arr = [];
+            data.forEach(ele => {
+                let obj = {
+                    name: ele.key,
+                    p: ele.value[0].value,
+                    s: ele.value[1].value,
+                    opt: createWordCloud(ele.value[0].value),
+                    tapIndex: 0
+                }
+                arr.push(obj);
+            })
+            this.dataSource = arr;
+            this.load = false;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    handlerTab(n,item) {
+       item.tapIndex = n;
+       if(n === 0) {
+           item.opt = createWordCloud(item.p)
+       } else {
+           item.opt = createWordCloud(item.s)
+       }
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.owcc-outter {
+  width: 100%;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .owcc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .owcc-item {
+      width: 314px;
+      height: 412px;
+      margin-top: 5px;
+      .owcc-draw {
+        width: 100%;
+        height: calc(100% - 48px);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/ModelComparison/summaryAndComparisonOfForumInformationStoken/index.vue b/src/views/ModelComparison/summaryAndComparisonOfForumInformationStoken/index.vue
new file mode 100644
index 0000000..affbb4a
--- /dev/null
+++ b/src/views/ModelComparison/summaryAndComparisonOfForumInformationStoken/index.vue
@@ -0,0 +1,140 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:14:28
+ * @LastEditTime: 2021-11-12 13:24:10
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/summaryAndComparisonOfForumInformation/index.vue
+-->
+<template>
+    <div class="saco-outter">
+        <v-label-div title="论坛信息概括对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+        <div class="saco-item" v-for="(item,index) in list" :key="index">
+            <span class="s1">{{item.key}}</span>
+            <div class="d1">
+                <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_lt.png">
+                <div class="d1-d1">
+                    <span class="ss1">论坛信息量</span>
+                    <span class="ss2">{{item.Count}}</span>
+                </div>
+            </div>
+            <div class="d1">
+                <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_hdrs.png">
+                <div class="d1-d1">
+                    <span class="ss1">互动人数</span>
+                    <span class="ss2">{{item.interactCount}}</span>
+                </div>
+            </div>
+            <div class="d1">
+                <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_ztl.png">
+                <div class="d1-d1">
+                    <span class="ss1">论坛主贴量</span>
+                    <span class="ss2">{{item.zhutieCount}}</span>
+                </div>
+            </div>
+            <div class="d1">
+                <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_pll.png">
+                <div class="d1-d1">
+                    <span class="ss1">论坛评论量</span>
+                    <span class="ss2">{{item.commentsSum}}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+// import {getCount0528C} from "@/api/ModelComparison"
+export default {
+    name: "summaryAndComparisonOfForumInformation",
+    data() {
+        return {
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            list: [
+                
+            ]
+        }
+    },
+    // created() {
+    //     this.initData()
+    // },
+    // methods: {
+    //      initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison || [];
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         let obj = Object.assign({}, this.getCtime2, this.form);
+    //         this.load = true;
+    //         getCount0528C(obj).then(res => {
+    //             let data = res.data;
+    //             this.list = data;
+    //             this.load = false;
+    //         })
+    //     }
+    // }
+}
+</script>
+
+<style lang="less" scoped>
+.saco-outter {
+    width: 944px;
+    height: 412px;
+    .saco-item {
+        width: 912px;
+        height: 54px;
+        border-radius: 4px;
+        border: 1px solid #0f2a4d;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin-bottom: 5px;
+        margin-left: 16px;
+        .s1 {
+            width: 137px;
+            display: block;
+            font-size: 16px;
+            color: #fff;
+            margin-left: 16px;
+        }
+        .d1 {
+                width: 183px;
+                display: flex;
+                justify-content: flex-start;
+                .d1-m1 {
+                    width: 44px;
+                    height: 44px;
+                }
+                .d1-d1 {
+                    .ss1 {
+                        display: block;
+                        font-size: 12px;
+                        color: #7f868d;
+                        margin-top: 2px;
+                    }
+                    .ss2 {
+                        display: block;
+                        font-size: 16px;
+                        font-family: Bebas;
+                        color: #fff;
+                    }
+                }
+        }
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/tailTOPMediaStoken/index.vue b/src/views/ModelComparison/tailTOPMediaStoken/index.vue
new file mode 100644
index 0000000..157df06
--- /dev/null
+++ b/src/views/ModelComparison/tailTOPMediaStoken/index.vue
@@ -0,0 +1,113 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 14:56:13
+ * @LastEditTime: 2021-11-12 14:47:54
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/tailTOPMedia/index.vue
+-->
+
+<template>
+    <div class="ttm-outter">
+        <v-label-div title="尾翼TOP媒体" :showLine="false" :eStyle="{'border-style': 'none'}" />
+        <div class="ttm-inner">
+            <div class="ttm-item" v-for="(item,index) in list" :key="index">
+                <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
+                <div class="d1">
+                    <!-- <v-echarts :opt="item.drawOpt"></v-echarts> -->
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+// import {getSourceTopCount0528C} from "@/api/ModelComparison"
+// import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "tailTOPMedia",
+    data() {
+        return {
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+            list: [],
+          
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison || [];
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         let obj = Object.assign({}, this.getCtime2, this.form);
+    //         getSourceTopCount0528C(obj).then(res => {
+    //             let data = res.data || [];
+    //             let arr = [];
+    //             data.forEach((ele,index) => {
+    //                 let val = ele.value || [];
+    //                 let dx = [];
+    //                 let ds = [];
+    //                 val.forEach(e => {
+    //                     dx.push(e.key);
+    //                     ds.push(e.value);
+    //                 })
+    //                 let o = {
+    //                     name: ele.key,
+    //                     drawOpt: createSingleColumnar(dx,ds, this.colors[index])
+    //                 }
+    //                arr.push(o) 
+    //             })
+    //             this.list = arr;
+    //         })
+    //     }
+    // }
+};
+</script>
+
+<style lang="less" scoped>
+.ttm-outter {
+    width: 100%;
+    height: auto;
+    .ttm-inner {
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        .ttm-item {
+            width: 628px;
+            height: 380px;
+            .s1 {
+                padding-left: 16px;
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                font-size: 16px;
+                color: #fff;
+            }
+            .d1 {
+                width: 100%;
+                height: calc(100% - 40px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/userAreaDistributionStoken/index.vue b/src/views/ModelComparison/userAreaDistributionStoken/index.vue
new file mode 100644
index 0000000..cf1c40b
--- /dev/null
+++ b/src/views/ModelComparison/userAreaDistributionStoken/index.vue
@@ -0,0 +1,129 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 11:25:20
+ * @LastEditTime: 2021-11-12 11:06:40
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
+-->
+<template>
+    <div class="wua-outter">
+        <v-label-div title="用户区域分布" :showLine="false" :eStyle="{ 'border-style': 'none' }">
+            <v-tab-group :btns="tabs" @change="handlerTab"></v-tab-group>
+        </v-label-div>
+        <div class="wua-inner">
+            <div class="d1">
+                <!-- <v-echarts :opt="opt1"></v-echarts> -->
+            </div>
+            <div class="d2">
+                <!-- <v-echars-map :opt="opt2"></v-echars-map> -->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+// import { getRegionWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
+// import createOptD1 from "./opt1";
+// import createOptD2 from "./opt2";
+export default {
+    name: "userAreaDistribution",
+    data() {
+        return {
+            load: false,
+            // opt1: createOptD1(),
+            // opt2: createOptD2(),
+            tabs: [],
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            list: []
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison || [];
+    //         let a = [];
+    //         arr.forEach((ele) => {
+    //             a.push(ele.model);
+    //         });
+    //         this.tabs = a;
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         return new Promise((resolve, reject) => {
+    //             let obj = Object.assign({}, this.getCtime2, this.form);
+    //             this.load = true;
+    //             getRegionWeiBoC(obj)
+    //                 .then((res) => {
+    //                     let data = res.data || [];
+    //                     this.list = data;
+    //                     this.handlerTab(0);
+    //                     this.load = false;
+    //                     resolve(data);
+    //                 })
+    //                 .catch(() => {
+    //                     reject(false);
+    //                 });
+    //         });
+    //     },
+    //     handlerTab(n) {
+    //       let model = this.tabs[n];
+    //       let row = this.list.find(ele => ele.Name === model);
+    //       let obj = row.Data || [];
+    //       let dx = [];
+    //       let ds = [];
+    //       let provArr = [];
+    //       for(let key in obj) {
+    //         dx.push(key);
+    //         ds.push(obj[key]);
+    //         let o = {
+    //           name: key.replace('省', ''),
+    //           value: obj[key]
+    //         }
+    //         provArr.push(o)
+    //       }
+    //       this.opt1 = createOptD1(dx, ds);
+    //       this.opt2 = createOptD2(provArr);
+    //     }
+        
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.wua-outter {
+    width: 944px;
+    height: 412px;
+    .wua-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .d1 {
+            width: 479px;
+            height: 100%;
+        }
+        .d2 {
+            width: 465px;
+            height: 100%;
+            margin-left: 16px;
+        }
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/weiboBigVComparisonStoken/index.vue b/src/views/ModelComparison/weiboBigVComparisonStoken/index.vue
new file mode 100644
index 0000000..9a41900
--- /dev/null
+++ b/src/views/ModelComparison/weiboBigVComparisonStoken/index.vue
@@ -0,0 +1,84 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:30:29
+ * @LastEditTime: 2021-11-12 10:27:57
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/weiboBigVComparison/index.vue
+-->
+<template>
+  <div class="wbc-outter">
+    <v-label-div
+      title="微博大V对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    ></v-label-div>
+    <div class="wbc-inner">
+      <!-- <v-echarts :opt="opt"></v-echarts> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getBoauthen0528C } from "@/api/BrandComparison/BrandWeibo.js";
+// import createOpt from "./opt";
+export default {
+  name: "weiboBigVComparison",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+        sSeriesName: "",
+        iContrastType: 2
+      },
+      opt: {}
+    };
+  },
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getMComparison;
+  //     let brands = [];
+  //     let models = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.brand);
+  //       models.push(ele.model);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.form.sSeriesName = models.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getBoauthen0528C(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           this.opt = createOpt(data);
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  // },
+};
+</script>
+<style lang="less" scoped>
+.wbc-outter {
+  width: 630px;
+  height: 412px;
+  .wbc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/ModelComparison/weiboContentDirectionComparisonStoken/index.vue b/src/views/ModelComparison/weiboContentDirectionComparisonStoken/index.vue
new file mode 100644
index 0000000..821eae4
--- /dev/null
+++ b/src/views/ModelComparison/weiboContentDirectionComparisonStoken/index.vue
@@ -0,0 +1,147 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:58:57
+ * @LastEditTime: 2021-11-16 12:04:29
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
+-->
+<template>
+    <div class="bcm-outter">
+        <v-label-div title="微博内容方向对比" :showLine="false" :eStyle="{ 'border-style': 'none' }">
+        </v-label-div>
+        <div class="bcm-inner">
+            <div class="bcm-item" v-for="(item, index) in sourceData" :key="index">
+                <span class="ss1" :style="{ color: colors[index] }">{{
+          item.key
+        }}</span>
+                <div class="dd1">
+                    <vue-scroll>
+                        <!-- <v-ranking-bcm v-for="(it, n) in item.value" :key="n" :label="it.key" :num="it.num" :val="it.value"></v-ranking-bcm> -->
+                    </vue-scroll>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+// import { getDirect0528C } from "@/api/BrandComparison/BrandWeibo.js";
+// import vRankingBcm from "./v-ranking-bcm";
+export default {
+    name: "weiboContentDirectionComparison",
+    components: {
+        
+    },
+    data() {
+        return {
+            load: false,
+            colors: [
+                "#3373CC",
+                "#63AECC",
+                "#54BF93",
+                "#CC9D12",
+                "#CC7733",
+                "#CC5B41",
+            ],
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            sourceData: [],
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison;
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         return new Promise((resolve, reject) => {
+    //             let obj = Object.assign({}, this.getCtime2, this.form);
+    //             this.load = true;
+    //             getDirect0528C(obj)
+    //                 .then((res) => {
+    //                     let data = res.data || [];
+    //                     let showData = [];
+    //                     data.forEach((e) => {
+    //                         //按照数据的值排序，然后取前5个值放入obj中传给用于显示数据的数组
+    //                         let sortedArr = e.Data
+    //                         sortedArr.sort(this.compare("value"))
+    //                         let obj = {
+    //                             key: e.Name,
+    //                             value: sortedArr,
+    //                         };
+    //                         showData.push(obj);
+    //                     });
+    //                     showData.forEach((ele) => {
+    //                         //给数据添加排名
+    //                         for (
+    //                             let index = 0;
+    //                             index < ele.value.length;
+    //                             index++
+    //                         ) {
+    //                             ele.value[index].num = index + 1;
+    //                         }
+    //                     });
+    //                     this.sourceData = showData;
+    //                      this.load = false;
+    //                     resolve(data);
+    //                 })
+    //                 .catch(() => {
+    //                     reject(false);
+    //                 });
+    //         });
+    //     },
+    //     // 根据对象的属性排序 v2-v1为顺序，v1-v2为倒序
+    //     compare(property) {
+    //         return function (a, b) {
+    //             let value1 = a[property];
+    //             let value2 = b[property];
+    //             return value2 - value1;
+    //         };
+    //     },
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.bcm-outter {
+    width: 100%;
+    height: 460px;
+    margin-top: 16px;
+    .bcm-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .bcm-item {
+            width: 282px;
+            margin-left: 27px;
+            .ss1 {
+                display: block;
+                font-size: 18px;
+                color: #fff;
+                font-weight: 500;
+                padding-top: 14px;
+            }
+            .dd1 {
+                height: calc(100% - 44px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/ModelComparison/weiboTuneComparisonStoken/index.vue b/src/views/ModelComparison/weiboTuneComparisonStoken/index.vue
new file mode 100644
index 0000000..934647b
--- /dev/null
+++ b/src/views/ModelComparison/weiboTuneComparisonStoken/index.vue
@@ -0,0 +1,139 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:49:09
+ * @LastEditTime: 2021-11-12 10:31:20
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
+-->
+<template>
+  <div class="wtc-outter">
+    <v-label-div
+      title="微博调性对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div>
+    <div class="wtc-d1">
+      <div class="dd1" style="margin-left: 16px">
+        <span class="s1"></span><span class="s2">正面</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#54BF93' }"></span
+        ><span class="s2">中性</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#CC9D12' }"></span
+        ><span class="s2">负面</span>
+      </div>
+    </div>
+    <div class="wtc-inner">
+      <!-- <wbRoundata
+        v-for="(item,index) in dataSource"
+        :key="index"
+        :title="item.Name"
+        :color="colors[index]"
+        :style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
+        :data="item.Data"
+      ></wbRoundata> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getAffectionsC } from "@/api/BrandComparison/BrandWeibo.js";
+// import wbRoundata from "./wbRoundata";
+export default {
+  name: "weiboTuneComparison",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+        sSeriesName: "",
+        iContrastType: 2
+      },
+      colors: ["#3373CC","#63AECC","#54BF93","#CC9D12","#CC7733","#CC5B41"],
+      dataSource: []
+    };
+  },
+  components: {
+    
+  },
+
+  // created() {
+  //   this.initData();
+  // },
+  // methods: {
+  //   initData() {
+  //     this.form.token = this.getToken;
+  //     let arr = this.getMComparison;
+  //     let brands = [];
+  //     let models = [];
+  //     arr.forEach((ele) => {
+  //       brands.push(ele.brand);
+  //       models.push(ele.model);
+  //     });
+  //     this.form.sBrand = brands.toString();
+  //     this.form.sSeriesName = models.toString();
+  //     this.getData();
+  //   },
+  //   getData() {
+  //     return new Promise((resolve, reject) => {
+  //       let obj = Object.assign({}, this.getCtime2, this.form);
+  //       this.load = true;
+  //       getAffectionsC(obj)
+  //         .then((res) => {
+  //           let data = res.data || [];
+  //           this.dataSource = data;
+  //           this.load = false;
+  //           resolve(data);
+  //         })
+  //         .catch(() => {
+  //           reject(false);
+  //         });
+  //     });
+  //   },
+  // },
+};
+</script>
+
+<style lang="less" scoped>
+.wtc-outter {
+  width: 100%;
+  height: 460px;
+  margin-top: 16px;
+  .wtc-d1 {
+    width: 100%;
+    display: flex;
+    height: 36px;
+    justify-content: flex-start;
+    align-items: center;
+    .dd1 {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .s1 {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: #3373cc;
+    }
+    .s2 {
+      display: inline-block;
+      font-size: 12px;
+      color: #fff;
+      margin-left: 10px;
+    }
+  }
+  .wtc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/ModelComparison/weiboUserPortraitStoken/index.vue b/src/views/ModelComparison/weiboUserPortraitStoken/index.vue
new file mode 100644
index 0000000..b19531a
--- /dev/null
+++ b/src/views/ModelComparison/weiboUserPortraitStoken/index.vue
@@ -0,0 +1,181 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 11:36:20
+ * @LastEditTime: 2021-11-12 13:24:39
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/weiboUserPortrait/index.vue
+-->
+<template>
+    <div class="wup-outter">
+        <v-label-div title="微博用户画像" :showLine="false" :eStyle="{'border-style': 'none'}">
+            <v-tab-group :btns="tabs" @change="handlerTab"></v-tab-group>
+        </v-label-div>
+        <div class="wup-inner">
+            <div class="d1">
+                <div class="dd1">
+                    <!-- <v-echarts :opt="opt1"></v-echarts> -->
+                </div>
+                <div class="dd2">
+                    <v-label-ctx v-for="(item,index) in sexArr" :key="index" :label="item.key" :color="item.color" :cont="item.value" :percentage="(item.value / total1 * 100).toFixed(2) +'%'" :eStyle="{ height: '7.7rem' }"></v-label-ctx>
+                </div>
+            </div>
+            <div class="d1">
+                <div class="dd1">
+                    <!-- <v-echarts :opt="opt2">
+                        <v-echarts :opt="opt2"></v-echarts>
+                    </v-echarts> -->
+                </div>
+                <div class="dd2" style="margin-right: 16px">
+                    <v-label-ctx v-for="(item,index) in attArr" :key="index" :label="item.key" :color="item.color" :cont="item.value" :percentage="(item.value / total1 * 100).toFixed(2) +'%'" :eStyle="{ height: '7.7rem' }"></v-label-ctx>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+// import createOpt1 from "./opt1";
+// import createOpt2 from "./opt2";
+// import { getSexMergeWeiBoC } from "@/api/ModelComparison";
+export default {
+    name: "weiboUserPortrait",
+    data() {
+        return {
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            tabs: [],
+            list: [],
+            total1: 0,
+            total2: 0,
+            sexArr: [],
+            attArr: [],
+            
+        };
+    },
+    // created() {
+    //     this.initData();
+    // },
+    // methods: {
+    //     initData() {
+    //         this.form.token = this.getToken;
+    //         let arr = this.getMComparison || [];
+    //         let a = [];
+    //         arr.forEach((ele) => {
+    //             a.push(ele.model);
+    //         });
+    //         this.tabs = a;
+    //         let brands = [];
+    //         let models = [];
+    //         arr.forEach((ele) => {
+    //             brands.push(ele.brand);
+    //             models.push(ele.model);
+    //         });
+    //         this.form.sBrand = brands.toString();
+    //         this.form.sSeriesName = models.toString();
+    //         this.getData();
+    //     },
+    //     getData() {
+    //         return new Promise((resolve, reject) => {
+    //             let obj = Object.assign({}, this.getCtime2, this.form);
+    //             this.load = true;
+    //             getSexMergeWeiBoC(obj)
+    //                 .then((res) => {
+    //                     let data = res.data;
+    //                     this.list = data;
+    //                     this.handlerTab(0);
+    //                     this.load = false;
+    //                     resolve(data);
+    //                 })
+    //                 .catch(() => {
+    //                     reject(false);
+    //                 });
+    //         });
+    //     },
+    //     handlerTab(n) {
+    //         let name = this.tabs[n];
+    //         let row = this.list.find((ele) => ele.Name === name);
+    //         let Data = row.Data;
+    //         let sex = Data.sex || {};
+    //         let attestation = Data.attestation || {};
+    //         let sexArr = [];
+    //         let attArr = [];
+    //         let total1 = 0;
+    //         let total2 = 0;
+    //         for (let key in sex) {
+    //             let color = "";
+    //             if (key === "男") {
+    //                 color = "#3373CC";
+    //             } else if (key === "未设性别") {
+    //                 color = "#54BF93";
+    //             } else {
+    //                 color = "#CC9D12";
+    //             }
+    //             let obj = {
+    //                 key: key,
+    //                 value: sex[key],
+    //                 color: color,
+    //             };
+    //             total1 += sex[key] * 1;
+    //             sexArr.push(obj);
+    //         }
+    //         for (let key in attestation) {
+    //             let color = "";
+    //             if (key === "普通认证") {
+    //                 color = "#3373CC";
+    //             } else if (key === "机构认证") {
+    //                 color = "#CC9D12";
+    //             } else {
+    //                 color = "#54BF93";
+    //             }
+    //             let obj = {
+    //                 key: key,
+    //                 value: attestation[key],
+    //                 color: color,
+    //             };
+    //             total2 += attestation[key] * 1;
+    //             attArr.push(obj);
+    //         }
+    //         this.total1 = total1;
+    //         this.total2 = total2;
+    //         this.sexArr = sexArr;
+    //         this.attArr = attArr;
+    //         this.opt1 = createOpt1(sexArr);
+    //         this.opt2 = createOpt2(attArr);
+    //     },
+    // },
+};
+</script>
+
+<style lang="less" scoped>
+.wup-outter {
+    width: 944px;
+    height: 412px;
+    .wup-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .d1 {
+            width: 50%;
+            height: 100%;
+            display: flex;
+            justify-content: flex-start;
+            overflow: hidden;
+            .dd1 {
+                width: 260px;
+                height: 100%;
+            }
+            .dd2 {
+                width: 240px;
+                height: 100%;
+            }
+        }
+    }
+}
+</style>