diff --git a/src/lycomponents/iHeader/index.vue b/src/lycomponents/iHeader/index.vue
index 4f163b2..95ea4b7 100644
--- a/src/lycomponents/iHeader/index.vue
+++ b/src/lycomponents/iHeader/index.vue
@@ -179,6 +179,7 @@ export default {
             LS.remove("scStatus");
             LS.remove("sComparison");
             LS.remove("mComparison");
+            LS.remove("tComparison");
             LS.remove("mcStatus");
             this.$router.replace("/login");
         },
diff --git a/src/lycomponents/iHeaderBrand/index.vue b/src/lycomponents/iHeaderBrand/index.vue
index e66ae4e..edb1629 100644
--- a/src/lycomponents/iHeaderBrand/index.vue
+++ b/src/lycomponents/iHeaderBrand/index.vue
@@ -209,6 +209,7 @@ export default {
             LS.remove("scStatus");
             LS.remove("sComparison");
             LS.remove("mComparison");
+            LS.remove("tComparison");
             LS.remove("mcStatus");
             this.$router.replace("/login");
         },
diff --git a/src/lycomponents/iHeaderMa/index.vue b/src/lycomponents/iHeaderMa/index.vue
index 04461a0..62b5435 100644
--- a/src/lycomponents/iHeaderMa/index.vue
+++ b/src/lycomponents/iHeaderMa/index.vue
@@ -176,6 +176,7 @@ export default {
             LS.remove("scStatus");
             LS.remove("sComparison");
             LS.remove("mComparison");
+            LS.remove("tComparison");
             LS.remove("mcStatus");
             this.$router.replace("/login");
         }
diff --git a/src/lycomponents/iHeaderMyself/index.vue b/src/lycomponents/iHeaderMyself/index.vue
index 41ff23a..f4b7e44 100644
--- a/src/lycomponents/iHeaderMyself/index.vue
+++ b/src/lycomponents/iHeaderMyself/index.vue
@@ -170,6 +170,7 @@ export default {
             LS.remove("scStatus");
             LS.remove("sComparison");
             LS.remove("mComparison");
+            LS.remove("tComparison");
             LS.remove("mcStatus");
             this.$router.replace("/login");
         }
diff --git a/src/views/ThemeComparison/ThemeCompare.vue b/src/views/ThemeComparison/ThemeCompare.vue
index c0cd776..9d0e845 100644
--- a/src/views/ThemeComparison/ThemeCompare.vue
+++ b/src/views/ThemeComparison/ThemeCompare.vue
@@ -4,88 +4,111 @@
                 <themeCompateHeader :data="getTComparison" @change="handlerChangeTheme"></themeCompateHeader>
                 <vue-lazy-component>
                     <informationTrend></informationTrend>
+                    <informationTrendStoken slot="skeleton"></informationTrendStoken>
                 </vue-lazy-component>
             <div class="bc-d2">
                 <vue-lazy-component>
                     <overallInformation></overallInformation>
+                    <overallInformationStoken slot="skeleton"></overallInformationStoken>
                 </vue-lazy-component>
                 <vue-lazy-component>
                     <overallNumberOfInteractions></overallNumberOfInteractions>
+                    <overallNumberOfInteractionsStoken slot="skeleton"></overallNumberOfInteractionsStoken>
                 </vue-lazy-component>
             </div>
                 <vue-lazy-component>
                     <themeTonalDistribution></themeTonalDistribution>
+                    <themeTonalDistributionStoken slot="skeleton"></themeTonalDistributionStoken>
                 </vue-lazy-component>
             <div class="bc-d2">
                 <vue-lazy-component>
                     <channelDistribution></channelDistribution>
+                    <channelDistributionStoken slot="skeleton"></channelDistributionStoken>
                 </vue-lazy-component>
                 <vue-lazy-component>
                     <keyMediaCommunicationComparison></keyMediaCommunicationComparison>
+                    <keyMediaCommunicationComparisonStoken slot="skeleton"></keyMediaCommunicationComparisonStoken>
                 </vue-lazy-component>
             </div>
                 <vue-lazy-component>
                     <themeTOPMedia></themeTOPMedia>
+                    <themeTOPMediaStoken slot="skeleton"></themeTOPMediaStoken>
                 </vue-lazy-component>
                 <vue-lazy-component>
                     <overallWordCloudComparison></overallWordCloudComparison>
+                    <overallWordCloudComparisonStoken slot="skeleton"></overallWordCloudComparisonStoken>
                 </vue-lazy-component>
             <div class="bc-d4">
                 <v-label-div title="主题微博对比"></v-label-div>
                 <div class="bc-d4-d1">
                     <vue-lazy-component>
                         <comparisonOfWeiboInformation></comparisonOfWeiboInformation>
+                        <comparisonOfWeiboInformationStoken slot="skeleton"></comparisonOfWeiboInformationStoken>
                     </vue-lazy-component>
                     <vue-lazy-component>
                         <comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
+                        <comparisonOfTheNumberOfWeiboInteractionsStoken slot="skeleton"></comparisonOfTheNumberOfWeiboInteractionsStoken>
                     </vue-lazy-component>
                     <vue-lazy-component>
                         <weiboBigVComparison></weiboBigVComparison>
+                        <weiboBigVComparisonStoken slot="skeleton"></weiboBigVComparisonStoken>
                     </vue-lazy-component>
                 </div>
                     <vue-lazy-component>
                         <weiboTuneComparison></weiboTuneComparison>
+                        <weiboTuneComparisonStoken slot="skeleton"></weiboTuneComparisonStoken>
                     </vue-lazy-component>
                     <vue-lazy-component>
                         <weiboContentDirectionComparison></weiboContentDirectionComparison>
+                        <weiboContentDirectionComparisonStoken slot="skeleton"></weiboContentDirectionComparisonStoken>
                     </vue-lazy-component>
                 <div class="bc-d4-d2">
                     <vue-lazy-component>
                         <userAreaDistribution></userAreaDistribution>
+                        <userAreaDistributionStoken slot="skeleton"></userAreaDistributionStoken>
                     </vue-lazy-component>
                     <vue-lazy-component>
                         <weiboUserPortrait></weiboUserPortrait>
+                        <weiboUserPortraitStoken slot="skeleton"></weiboUserPortraitStoken>
                     </vue-lazy-component>
                 </div>
                 <v-label-div title="主题论坛对比"></v-label-div>
                 <div class="bc-d4-d2">
                     <vue-lazy-component>
                         <summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
+                        <summaryAndComparisonOfForumInformationStoken slot="skeleton"></summaryAndComparisonOfForumInformationStoken>
                     </vue-lazy-component>
                     <vue-lazy-component>
                         <comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
+                        <comparisonOfForumPostingTrendsStoken slot="skeleton"></comparisonOfForumPostingTrendsStoken>
                     </vue-lazy-component>
                 </div>
                     <vue-lazy-component>
                         <forumTonalComparison></forumTonalComparison>
+                        <forumTonalComparisonStoken slot="skeleton"></forumTonalComparisonStoken>
                     </vue-lazy-component>
                     <vue-lazy-component>
                         <comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
+                        <comparisonOfPositiveTopicsInTheForumStoken slot="skeleton"></comparisonOfPositiveTopicsInTheForumStoken>
                     </vue-lazy-component>
                     <vue-lazy-component>
                         <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
+                        <comparisonOfNegativeTopicsInForumsStoken slot="skeleton"></comparisonOfNegativeTopicsInForumsStoken>
                     </vue-lazy-component>
                 <v-label-div title="主题尾翼对比"></v-label-div>
                 <div class="bc-d4-d2">
                     <vue-lazy-component>
                         <themeRearWingComparison></themeRearWingComparison>
+                        <themeRearWingComparisonStoken slot="skeleton"></themeRearWingComparisonStoken>
                     </vue-lazy-component>
                     <vue-lazy-component>
                         <informationVolumeByChannel></informationVolumeByChannel>
+                        <informationVolumeByChannelStoken slot="skeleton"></informationVolumeByChannelStoken>
                     </vue-lazy-component>
                 </div>
                     <vue-lazy-component>
                         <tailTOPMedia></tailTOPMedia>
+                        <tailTOPMediaStoken slot="skeleton"></tailTOPMediaStoken>
                     </vue-lazy-component>
             </div>
         </div>
@@ -121,6 +144,31 @@ export default {
         themeRearWingComparison: (resolve) => require(['./themeRearWingComparison'], resolve), // 尾翼趋势对比
         informationVolumeByChannel: (resolve) => require(['./informationVolumeByChannel'], resolve), // 尾翼趋势对比
         tailTOPMedia: (resolve) => require(['./tailTOPMedia'], resolve), // 尾翼趋势对比
+
+        // themeCompateHeaderStoken: (resolve) => require(['./themeCompateHeaderStoken'], resolve), // 选择主题
+        informationTrendStoken: (resolve) => require(['./informationTrendStoken'], resolve), // 信息量趋势
+        overallInformationStoken: (resolve) => require(['./overallInformationStoken'], resolve), // 总体信息量
+        overallNumberOfInteractionsStoken: (resolve) => require(['./overallNumberOfInteractionsStoken'], resolve), // 总体互动人数
+        themeTonalDistributionStoken: (resolve) => require(['./themeTonalDistributionStoken'], resolve), // 主题调性分布
+        channelDistributionStoken: (resolve) => require(['./channelDistributionStoken'], resolve), // 渠道分布
+        keyMediaCommunicationComparisonStoken: (resolve) => require(['./keyMediaCommunicationComparisonStoken'], resolve), // 重点媒体传播对比
+        themeTOPMediaStoken: (resolve) => require(['./themeTOPMediaStoken'], resolve), // 传播top媒体
+        overallWordCloudComparisonStoken: (resolve) => require(['./overallWordCloudComparisonStoken'], resolve), // 整体词云对比
+        comparisonOfWeiboInformationStoken: (resolve) => require(['./comparisonOfWeiboInformationStoken'], resolve), // 微博信息量对比
+        comparisonOfTheNumberOfWeiboInteractionsStoken: (resolve) => require(['./comparisonOfTheNumberOfWeiboInteractionsStoken'], resolve), // 微博互动人数对比
+        weiboBigVComparisonStoken: (resolve) => require(['./weiboBigVComparisonStoken'], resolve), // 整体词云对比
+        weiboTuneComparisonStoken: (resolve) => require(['./weiboTuneComparisonStoken'], resolve), // 微博调性对比
+        weiboContentDirectionComparisonStoken: (resolve) => require(['./weiboContentDirectionComparisonStoken'], resolve), // 微博内容方向对比
+        userAreaDistributionStoken: (resolve) => require(['./userAreaDistributionStoken'], resolve), // 用户区域分布
+        weiboUserPortraitStoken: (resolve) => require(['./weiboUserPortraitStoken'], resolve), // 用户画像
+        summaryAndComparisonOfForumInformationStoken: (resolve) => require(['./summaryAndComparisonOfForumInformationStoken'], resolve), // 论坛信息概括
+        comparisonOfForumPostingTrendsStoken: (resolve) => require(['./comparisonOfForumPostingTrendsStoken'], resolve), // 论坛发帖趋势
+        forumTonalComparisonStoken: (resolve) => require(['./forumTonalComparisonStoken'], resolve), // 论坛调性对比
+        comparisonOfPositiveTopicsInTheForumStoken: (resolve) => require(['./comparisonOfPositiveTopicsInTheForumStoken'], resolve), // 论坛正面话题
+        comparisonOfNegativeTopicsInForumsStoken: (resolve) => require(['./comparisonOfNegativeTopicsInForumsStoken'], resolve), // 论坛负面话题
+        themeRearWingComparisonStoken: (resolve) => require(['./themeRearWingComparisonStoken'], resolve), // 尾翼趋势对比
+        informationVolumeByChannelStoken: (resolve) => require(['./informationVolumeByChannelStoken'], resolve), // 尾翼趋势对比
+        tailTOPMediaStoken: (resolve) => require(['./tailTOPMediaStoken'], resolve), // 尾翼趋势对比
     },
     methods: {
         handlerChangeTheme(arr) {
diff --git a/src/views/ThemeComparison/ThemeIndex.vue b/src/views/ThemeComparison/ThemeIndex.vue
index b563b0d..4c87926 100644
--- a/src/views/ThemeComparison/ThemeIndex.vue
+++ b/src/views/ThemeComparison/ThemeIndex.vue
@@ -14,16 +14,17 @@
                 <v-label-div title="主题分析">
                 </v-label-div>
                 <div class="card-outter">
-                    <div class="card-items" v-for="(item, index) in myThemeArr" :key="index">
+                    <div v-for="(item, index) in myThemeArr" :key="index">
+                    <div class="card-items" v-if="item.isChosed == false">
                         <div class="card-item-top">
                             <div class="card-uncomp" v-if="item.isCom">
                                 <span style="margin-top: 5px">进行中</span>
                             </div>
                             <div class="card-completed" v-else>已完成</div>
                         </div>
-                        <div class="card-item-data" @click="addThemeData(item)">
+                        <div class="card-item-data" @click="addThemeData(item,index)">
                             <div class="cid-title">
-                              {{item.name}}
+                                {{item.name}}
                             </div>
                             <div class="cid-data">
                                 <div class="s1"><div class="s1-title">开始时间</div><div class="s1-text">{{item.startTime}}</div></div>
@@ -32,6 +33,7 @@
                             </div>
                         </div>
                     </div>
+                    </div>
                 </div>
             </div>
             <div class="beCpm-footer" @click="handlerSubmit">
@@ -81,7 +83,8 @@ export default {
                         startTime: ele.StartTime,
                         endTime: ele.EndTime,
                         total: ele.ReportSum,
-                        isCom: true
+                        isCom: true,
+                        isChosed: false,
                     };
                     //判断是否到期
                     if(new Date(ele.EndTime) <= new Date(this.getDatetime().clock + '' + this.getDatetime().sClock)) {
@@ -93,12 +96,13 @@ export default {
             })
         },
         // 选择主题
-        addThemeData(row) {
+        addThemeData(row,index) {
             for(let i = 0; i < this.chooseArr.length; i++) {
                 let n = this.chooseArr.findIndex(ele =>{
                     return ele && ele.name === row.name
                 })
                 if(!this.chooseArr[i] && n === -1) {
+                    // this.myThemeArr[index].isChosed = true;
                     this.chooseArr[i] = row;
                     let obj = this.$refs.brandRef.brands[i]
                     obj.name = row.name;
@@ -164,13 +168,15 @@ export default {
     line-height: 64px;
     margin-top: 16px;
 }
+.card-items:hover {
+    border: 2px solid #0091FF;
+}
 .card-items {
     width: 446px;
     height: 240px;
     border: 2px solid #0F2A4D;
     border-radius: 4px;
-    margin-top: 16px;
-    margin-right: 20px;
+    margin: 16px 20px 16px 0px;
     background: #010B19;
     .card-item-top {
         width: 100%;
diff --git a/src/views/ThemeComparison/channelDistributionStoken/index.vue b/src/views/ThemeComparison/channelDistributionStoken/index.vue
new file mode 100644
index 0000000..65d339c
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/comparisonOfForumPostingTrendsStoken/index.vue b/src/views/ThemeComparison/comparisonOfForumPostingTrendsStoken/index.vue
new file mode 100644
index 0000000..1f4c8fc
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/comparisonOfNegativeTopicsInForumsStoken/index.vue b/src/views/ThemeComparison/comparisonOfNegativeTopicsInForumsStoken/index.vue
new file mode 100644
index 0000000..4daafff
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/comparisonOfPositiveTopicsInTheForumStoken/index.vue b/src/views/ThemeComparison/comparisonOfPositiveTopicsInTheForumStoken/index.vue
new file mode 100644
index 0000000..1149e11
--- /dev/null
+++ b/src/views/ThemeComparison/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-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/ThemeComparison/comparisonOfTheNumberOfWeiboInteractionsStoken/index.vue b/src/views/ThemeComparison/comparisonOfTheNumberOfWeiboInteractionsStoken/index.vue
new file mode 100644
index 0000000..78883ba
--- /dev/null
+++ b/src/views/ThemeComparison/comparisonOfTheNumberOfWeiboInteractionsStoken/index.vue
@@ -0,0 +1,75 @@
+<!--
+ * @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></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: {},
+    };
+  },
+  // 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/ThemeComparison/comparisonOfWeiboInformationStoken/index.vue b/src/views/ThemeComparison/comparisonOfWeiboInformationStoken/index.vue
new file mode 100644
index 0000000..1b9307e
--- /dev/null
+++ b/src/views/ThemeComparison/comparisonOfWeiboInformationStoken/index.vue
@@ -0,0 +1,84 @@
+<!--
+ * @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></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: "",
+      }
+    };
+  },
+  // 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/ThemeComparison/forumTonalComparisonStoken/index.vue b/src/views/ThemeComparison/forumTonalComparisonStoken/index.vue
new file mode 100644
index 0000000..2d0c910
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/informationTrendStoken/index.vue b/src/views/ThemeComparison/informationTrendStoken/index.vue
new file mode 100644
index 0000000..81cc216
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/informationTrendStoken/opt.js b/src/views/ThemeComparison/informationTrendStoken/opt.js
new file mode 100644
index 0000000..896db12
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/informationVolumeByChannelStoken/index.vue b/src/views/ThemeComparison/informationVolumeByChannelStoken/index.vue
new file mode 100644
index 0000000..36dad26
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/keyMediaCommunicationComparisonStoken/index.vue b/src/views/ThemeComparison/keyMediaCommunicationComparisonStoken/index.vue
new file mode 100644
index 0000000..aeb16f5
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/overallInformationStoken/index.vue b/src/views/ThemeComparison/overallInformationStoken/index.vue
new file mode 100644
index 0000000..b52141b
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/overallNumberOfInteractionsStoken/index.vue b/src/views/ThemeComparison/overallNumberOfInteractionsStoken/index.vue
new file mode 100644
index 0000000..2a7544d
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/overallWordCloudComparisonStoken/index.vue b/src/views/ThemeComparison/overallWordCloudComparisonStoken/index.vue
new file mode 100644
index 0000000..75a57ad
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/summaryAndComparisonOfForumInformationStoken/index.vue b/src/views/ThemeComparison/summaryAndComparisonOfForumInformationStoken/index.vue
new file mode 100644
index 0000000..0f54cc2
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/tailTOPMediaStoken/index.vue b/src/views/ThemeComparison/tailTOPMediaStoken/index.vue
new file mode 100644
index 0000000..cffad08
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/themeRearWingComparisonStoken/index.vue b/src/views/ThemeComparison/themeRearWingComparisonStoken/index.vue
new file mode 100644
index 0000000..f3a7971
--- /dev/null
+++ b/src/views/ThemeComparison/themeRearWingComparisonStoken/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/ThemeComparison/themeTOPMediaStoken/index.vue b/src/views/ThemeComparison/themeTOPMediaStoken/index.vue
new file mode 100644
index 0000000..c7e813f
--- /dev/null
+++ b/src/views/ThemeComparison/themeTOPMediaStoken/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/ThemeComparison/themeTonalDistributionStoken/index.vue b/src/views/ThemeComparison/themeTonalDistributionStoken/index.vue
new file mode 100644
index 0000000..c844df8
--- /dev/null
+++ b/src/views/ThemeComparison/themeTonalDistributionStoken/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/ThemeComparison/userAreaDistributionStoken/index.vue b/src/views/ThemeComparison/userAreaDistributionStoken/index.vue
new file mode 100644
index 0000000..098e922
--- /dev/null
+++ b/src/views/ThemeComparison/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-label-div
+      title="用户区域分布"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+      <v-tab-group :btns="this.brandArr"></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/ThemeComparison/weiboBigVComparisonStoken/index.vue b/src/views/ThemeComparison/weiboBigVComparisonStoken/index.vue
new file mode 100644
index 0000000..2786b3c
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/weiboContentDirectionComparisonStoken/index.vue b/src/views/ThemeComparison/weiboContentDirectionComparisonStoken/index.vue
new file mode 100644
index 0000000..8d5df1a
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/weiboTuneComparisonStoken/index.vue b/src/views/ThemeComparison/weiboTuneComparisonStoken/index.vue
new file mode 100644
index 0000000..c4fbf98
--- /dev/null
+++ b/src/views/ThemeComparison/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/ThemeComparison/weiboUserPortraitStoken/index.vue b/src/views/ThemeComparison/weiboUserPortraitStoken/index.vue
new file mode 100644
index 0000000..65ddc57
--- /dev/null
+++ b/src/views/ThemeComparison/weiboUserPortraitStoken/index.vue
@@ -0,0 +1,155 @@
+<!--
+ * @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></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: "",
+      },
+      // 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>