diff --git a/src/api/ThemeComparisonBbs/index.js b/src/api/ThemeComparisonBbs/index.js
new file mode 100644
index 0000000..49bd7c3
--- /dev/null
+++ b/src/api/ThemeComparisonBbs/index.js
@@ -0,0 +1,53 @@
+import httpService from "@/request"
+
+// 主题对比-论坛信息概括
+export function getCount0528C(params) {
+    let obj =  Object.assign({action: 'getCount0528C', sType: 'BbsBrand',iContrastType: '4',iBBsType:'1'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主题对比-论坛发帖趋势对比
+export function getCountTime0528C(params) {
+    let obj =  Object.assign({action: 'getCountTime0528C', sType: 'BbsBrand',iContrastType: '4',iBBsType:'1'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主题对比-论坛调性对比
+export function getAffectionsC(params) {
+    let obj =  Object.assign({action: 'getAffectionsC', sType: 'BbsBrand',iContrastType: '4',iBBsType:'2'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主题对比-论坛正面负面话题对比
+export function getTopicPosAndTopicNeg0528C(params) {
+    let obj =  Object.assign({action: 'getTopicPosAndTopicNeg0528C', sType: 'BbsBrand',iContrastType: '4',iBBsType:'1'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
\ No newline at end of file
diff --git a/src/api/ThemeComparisonRear/index.js b/src/api/ThemeComparisonRear/index.js
new file mode 100644
index 0000000..9ba796a
--- /dev/null
+++ b/src/api/ThemeComparisonRear/index.js
@@ -0,0 +1,40 @@
+import httpService from "@/request"
+
+// 主题对比-尾翼信息趋势
+export function getCountTime0528C(params) {
+    let obj =  Object.assign({action: 'getCountTime0528C', sType: 'BrandWeiYi',iContrastType: '4'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主题对比-分渠道信息量
+export function getSourcetypeC(params) {
+    let obj =  Object.assign({action: 'getSourcetypeC', sType: 'BrandWeiYi',iContrastType: '4'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主题对比-尾翼top媒体
+export function getSourceTopCount0528C(params) {
+    let obj =  Object.assign({action: 'getSourceTopCount0528C', sType: 'BrandWeiYi',iContrastType: '4'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
\ No newline at end of file
diff --git a/src/views/ThemeComparison/ThemeCompare.vue b/src/views/ThemeComparison/ThemeCompare.vue
index 7e43b42..c0cd776 100644
--- a/src/views/ThemeComparison/ThemeCompare.vue
+++ b/src/views/ThemeComparison/ThemeCompare.vue
@@ -57,6 +57,36 @@
                         <weiboUserPortrait></weiboUserPortrait>
                     </vue-lazy-component>
                 </div>
+                <v-label-div title="主题论坛对比"></v-label-div>
+                <div class="bc-d4-d2">
+                    <vue-lazy-component>
+                        <summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
+                    </vue-lazy-component>
+                    <vue-lazy-component>
+                        <comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
+                    </vue-lazy-component>
+                </div>
+                    <vue-lazy-component>
+                        <forumTonalComparison></forumTonalComparison>
+                    </vue-lazy-component>
+                    <vue-lazy-component>
+                        <comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
+                    </vue-lazy-component>
+                    <vue-lazy-component>
+                        <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
+                    </vue-lazy-component>
+                <v-label-div title="主题尾翼对比"></v-label-div>
+                <div class="bc-d4-d2">
+                    <vue-lazy-component>
+                        <themeRearWingComparison></themeRearWingComparison>
+                    </vue-lazy-component>
+                    <vue-lazy-component>
+                        <informationVolumeByChannel></informationVolumeByChannel>
+                    </vue-lazy-component>
+                </div>
+                    <vue-lazy-component>
+                        <tailTOPMedia></tailTOPMedia>
+                    </vue-lazy-component>
             </div>
         </div>
     </div>
@@ -82,7 +112,15 @@ export default {
         weiboTuneComparison: (resolve) => require(['./weiboTuneComparison'], resolve), // 微博调性对比
         weiboContentDirectionComparison: (resolve) => require(['./weiboContentDirectionComparison'], resolve), // 微博内容方向对比
         userAreaDistribution: (resolve) => require(['./userAreaDistribution'], resolve), // 用户区域分布
-        weiboUserPortrait: (resolve) => require(['./weiboUserPortrait'], resolve), // 用户区域分布
+        weiboUserPortrait: (resolve) => require(['./weiboUserPortrait'], resolve), // 用户画像
+        summaryAndComparisonOfForumInformation: (resolve) => require(['./summaryAndComparisonOfForumInformation'], resolve), // 论坛信息概括
+        comparisonOfForumPostingTrends: (resolve) => require(['./comparisonOfForumPostingTrends'], resolve), // 论坛发帖趋势
+        forumTonalComparison: (resolve) => require(['./forumTonalComparison'], resolve), // 论坛调性对比
+        comparisonOfPositiveTopicsInTheForum: (resolve) => require(['./comparisonOfPositiveTopicsInTheForum'], resolve), // 论坛正面话题
+        comparisonOfNegativeTopicsInForums: (resolve) => require(['./comparisonOfNegativeTopicsInForums'], resolve), // 论坛负面话题
+        themeRearWingComparison: (resolve) => require(['./themeRearWingComparison'], resolve), // 尾翼趋势对比
+        informationVolumeByChannel: (resolve) => require(['./informationVolumeByChannel'], resolve), // 尾翼趋势对比
+        tailTOPMedia: (resolve) => require(['./tailTOPMedia'], resolve), // 尾翼趋势对比
     },
     methods: {
         handlerChangeTheme(arr) {
diff --git a/src/views/ThemeComparison/comparisonOfForumPostingTrends/index.vue b/src/views/ThemeComparison/comparisonOfForumPostingTrends/index.vue
new file mode 100644
index 0000000..8c024e8
--- /dev/null
+++ b/src/views/ThemeComparison/comparisonOfForumPostingTrends/index.vue
@@ -0,0 +1,165 @@
+<!--
+ * @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-loading="load">
+    <v-label-div
+      title="论坛发帖趋势对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    />
+    <div class="cop-inner">
+      <v-echarts :opt="opt" @clickMark="clickMark"></v-echarts>
+    </div>
+    <div class="vshow" v-if="modelShow" :style="modelStyle">
+      <vLabel-div title="实时热点事件">
+        <a-button @click="closeBox">关闭</a-button>
+      </vLabel-div>
+      <div
+        class="vshow-item"
+        v-for="(item, index) in urlArr[activeCol].value[activeIndex].hotTop"
+        :key="index"
+      >
+        <a :href="item.url" target="tar">{{ doStr(item.title, 28) }}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCountTime0528C } from "@/api/ThemeComparisonBbs";
+import { doStr } from "@/utils/gol/dataTool";
+import createOpt from "./opt";
+export default {
+  name: "comparisonOfForumPostingTrends",
+  data() {
+    return {
+      //弹出框//
+      modelStyle: {
+        left: "",
+        top: "",
+      },
+      modelShow: false,
+      ecbox: {
+        //图表宽高
+        width: 1618,
+        height: 1490,
+      },
+      ecmodel: {
+        //弹框宽高
+        width: 300,
+        height: 280,
+      },
+      activeCol: 0,
+      activeIndex: 0,
+      //-*-//
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      load: false,
+      opt: {},
+      urlArr: [],
+      doStr: doStr,
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+          sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.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 = [];
+          this.urlArr = data;
+          let markData = [[], [], [], [], [], []];
+          let dataI = 0;
+          data.forEach((ele) => {
+            let key = ele.key;
+            let value = ele.value;
+            dx.push(key);
+            ds.push(value);
+            for (let i = 0; i < ele.value.length; i++) {
+              if (ele.value[i].hotTop[0]) {
+                let obj = {
+                  timeIndex: dataI,
+                  yVal: data[dataI].value[i].value,
+                  url: ele.value[i].hotTop,
+                };
+                markData[i].push(obj);
+                //  console.log(i)//车型的索引
+                //  console.log(dataI)//时间的索引
+                //  console.log(ele.value[i].hotTop)//事件列表[{},{}]
+              }
+            }
+            dataI = dataI + 1;
+          });
+          this.opt = createOpt(dx, ds, markData);
+          this.load = false;
+        });
+    },
+    // 弹出框
+    clickMark(data) {
+      this.activeCol = data.index;
+      this.activeIndex = data.seriesIndex;
+      this.modelShow = true;
+      let mw = window.event;
+      if (this.ecbox.width - mw.offsetX - 20 > this.ecmodel.width) {
+        this.modelStyle.left = mw.offsetX + 20 + "px";
+      } else {
+        this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px";
+      }
+      if (this.ecbox.height - mw.offsetY - 20 > this.ecmodel.height) {
+        this.modelStyle.top = mw.offsetY + "px";
+      } else {
+        this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px";
+      }
+    },
+    closeBox() {
+      this.modelShow = false;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.cop-outter {
+  width: 944px;
+  height: 412px;
+  .cop-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+.vshow {
+  position: absolute;
+  width: 300px;
+  background: rgb(3, 18, 36);
+  border: 4px solid #0f2a4d;
+  .vshow-item {
+    padding: 11px;
+    width: 100%;
+    font-size: 15px;
+    color: rgb(54, 189, 239);
+  }
+}
+</style>
diff --git a/src/views/ThemeComparison/comparisonOfForumPostingTrends/opt.js b/src/views/ThemeComparison/comparisonOfForumPostingTrends/opt.js
new file mode 100644
index 0000000..0f80c1e
--- /dev/null
+++ b/src/views/ThemeComparison/comparisonOfForumPostingTrends/opt.js
@@ -0,0 +1,143 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 10:11:24
+ * @LastEditTime: 2021-11-19 19:47:39
+ * @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 = [], markData = []) {
+    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],
+                    markPoint: {
+                        data: [],
+                    }
+                }
+            } else {
+                testData[val.key].data.push(val.value)
+            }
+        })
+    })
+    let arr = [];
+    for(let key in testData) {
+        arr.push(testData[key])
+    }
+    for(let i = 0;i< arr.length; i++) {
+        markData[i].forEach(ele => {
+            arr[i].markPoint.data.push(
+                {
+                    name: 'Max',
+                    xAxis: ele.timeIndex, yAxis: ele.yVal,
+                    symbol: 'pin',
+                    symbolSize: 16,
+                    symbolOffset: [0, '-70%'],
+                }
+            )
+        })
+    }
+   return arr 
+}
+
+export default function createOpt(dx = [], ds = [], markData = []) {
+    let data = createData(ds,markData);
+    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/comparisonOfNegativeTopicsInForums/index.vue b/src/views/ThemeComparison/comparisonOfNegativeTopicsInForums/index.vue
new file mode 100644
index 0000000..dcfd135
--- /dev/null
+++ b/src/views/ThemeComparison/comparisonOfNegativeTopicsInForums/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-loading="load">
+    <v-label-div
+      title="论坛负面话题对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    />
+    <div class="cpt-inner">
+      <div class="cpt-item" v-for="(item, index) in showData" :key="index">
+        <span class="s1" :style="{ color: colors[index] }">{{
+          item.name
+        }}</span>
+        <div class="d1">
+          <v-echarts :opt="item.drawOpt"></v-echarts>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getTopicPosAndTopicNeg0528C } from "@/api/ThemeComparisonBbs";
+import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
+export default {
+  name: "comparisonOfPositiveTopicsInTheForum",
+  data() {
+    return {
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      load: false,
+      showData: [],
+      list: []
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+          sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.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/comparisonOfPositiveTopicsInTheForum/index.vue b/src/views/ThemeComparison/comparisonOfPositiveTopicsInTheForum/index.vue
new file mode 100644
index 0000000..176a1f0
--- /dev/null
+++ b/src/views/ThemeComparison/comparisonOfPositiveTopicsInTheForum/index.vue
@@ -0,0 +1,129 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:57:58
+ * @LastEditTime: 2021-10-16 14:16:03
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
+-->
+<template>
+  <div class="cpt-outter" v-loading="load">
+    <v-label-div
+      title="论坛正面话题对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    />
+    <div class="cpt-inner">
+      <div class="cpt-item" v-for="(item, index) in showData" :key="index">
+        <span class="s1" :style="{ color: colors[index] }">{{
+          item.name
+        }}</span>
+        <div class="d1">
+          <v-echarts :opt="item.drawOpt"></v-echarts>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getTopicPosAndTopicNeg0528C } from "@/api/ThemeComparisonBbs";
+import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
+export default {
+  name: "comparisonOfPositiveTopicsInTheForum",
+  data() {
+    return {
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      load: false,
+      showData: [],
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+          sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.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/forumTonalComparison/index.vue b/src/views/ThemeComparison/forumTonalComparison/index.vue
new file mode 100644
index 0000000..2180021
--- /dev/null
+++ b/src/views/ThemeComparison/forumTonalComparison/index.vue
@@ -0,0 +1,142 @@
+<!--
+ * @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="ftc-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/ThemeComparisonBbs";
+import roundata from "./roundata";
+export default {
+  name: "forumTonalComparison",
+  components: {
+    roundata,
+  },
+  data() {
+    return {
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      load: false,
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      dataSource: [],
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+          sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.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;
+    }
+  }
+  .ftc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    margin-left: -24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/ThemeComparison/forumTonalComparison/roundata/index.vue b/src/views/ThemeComparison/forumTonalComparison/roundata/index.vue
new file mode 100644
index 0000000..6582462
--- /dev/null
+++ b/src/views/ThemeComparison/forumTonalComparison/roundata/index.vue
@@ -0,0 +1,68 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 13:41:17
+ * @LastEditTime: 2021-11-05 13:31:48
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
+-->
+<template>
+    <div class="bd-item-round">
+        <div class="bd-item-r-cav">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+        <span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
+    </div>
+</template>
+<script>
+import createOpt from "./opt";
+export default {
+    name: "roundata",
+    props: {
+        title: {
+            type: String,
+            default: "",
+        },
+        color: {
+            type: String,
+            default: "",
+        },
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+       data: {
+           handler(val) {
+              this.opt = createOpt(val) 
+           },
+           immediate: true
+       } 
+    },
+    data() {
+        return {
+            //opt: createOpt(),
+        };
+    },
+    methods: {
+       
+    },
+};
+</script>
+<style lang="less" scoped>
+.bd-item-round {
+    display: inline-block;
+    .bd-item-r-cav {
+        width: 193px;
+        height: 206px;
+    }
+    .bd-item-r-c-s1 {
+        display: block;
+        text-align: center;
+        color: #fff;
+        font-size: 18px;
+        margin-top: 30px;
+    }
+}
+</style>
diff --git a/src/views/ThemeComparison/forumTonalComparison/roundata/opt.js b/src/views/ThemeComparison/forumTonalComparison/roundata/opt.js
new file mode 100644
index 0000000..ee21b2e
--- /dev/null
+++ b/src/views/ThemeComparison/forumTonalComparison/roundata/opt.js
@@ -0,0 +1,91 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 14:33:51
+ * @LastEditTime: 2021-10-15 14:49:19
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
+ */
+import * as echarts from "echarts";
+function createData(obj = {}) {
+   if (JSON.stringify(obj) === '{}') {
+      return;
+   }
+   let arr = [];
+   for (let key in obj) {
+      let color = "";
+      if (key === '正面') {
+         color = "#3373CC"
+      } else if (key === '负面') {
+         color = "#b38b14"
+      } else {
+         color = "#54BF93"
+      }
+      let o = {
+         value: obj[key],
+         name: key,
+         itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+               //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+               //给第一个设置0，第四个设置1，就是垂直渐变
+               offset: 0,
+               color: color
+            }, {
+               offset: 1,
+               color: color
+            }])
+         }
+      }
+      arr.push(o)
+   }
+   return arr
+}
+
+export default function createOpt(obj={}) {
+    let data = createData(obj);
+    return {
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['70%', '92%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center',
+                lineHeight: 28
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '18',
+                  color: "#ffff",
+                  fontWeight: 'bold',
+                  formatter: function(p) {
+                      return `${p.data.name}\n${p.percent}%\n${p.data.value}`
+                  }
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: data,
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['96%', '100%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
+                },
+                center: ['50%', '50%'],//边框位置
+                data: data,
+              }
+          ]
+    }
+}
diff --git a/src/views/ThemeComparison/informationVolumeByChannel/index.vue b/src/views/ThemeComparison/informationVolumeByChannel/index.vue
new file mode 100644
index 0000000..058f79b
--- /dev/null
+++ b/src/views/ThemeComparison/informationVolumeByChannel/index.vue
@@ -0,0 +1,92 @@
+<!--
+ * @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/ThemeComparisonRear";
+import createOpt from "./opt";
+export default {
+  name: "informationVolumeByChannel",
+  data() {
+    return {
+      opt: {},
+      load: false,
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+          sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.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/informationVolumeByChannel/opt.js b/src/views/ThemeComparison/informationVolumeByChannel/opt.js
new file mode 100644
index 0000000..82e736d
--- /dev/null
+++ b/src/views/ThemeComparison/informationVolumeByChannel/opt.js
@@ -0,0 +1,162 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-15 15:15:27
+ * @LastEditTime: 2021-10-15 17:44:34
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
+ */
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+import * as echarts from "echarts";
+let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#3373CC'
+    },
+    {
+        offset: 1,
+        color: '#3373CC'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#63AECC'
+    },
+    {
+        offset: 1,
+        color: '#63AECC'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#54BF93'
+    },
+    {
+        offset: 1,
+        color: '#54BF93'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC9D12'
+    },
+    {
+        offset: 1,
+        color: '#CC9D12'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC7733'
+    },
+    {
+        offset: 1,
+        color: '#CC7733'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC5B41'
+    },
+    {
+        offset: 1,
+        color: '#CC5B41'
+    }
+], false)]
+
+function createData(dataList = [],dx = []) {
+    let arr = [];
+    dataList.forEach(e => {
+        let a = [];
+        let Data = e.Data || {};
+        dx.forEach(e => {
+            a.push(Data[e])
+        })
+        let o = {
+            name: e.Name,
+            type: 'bar',
+            barGap: 0,
+            barWidth: 13.7,
+            emphasis: {
+                focus: 'series'
+            },
+            data: a
+        };
+        arr.push(o)
+    })
+    return arr;
+}
+
+export default function createOpt(dataList = [],dx = [], brandList = []) {
+    let info = createData(dataList,dx);
+    return {
+        grid: {
+            left: 10,
+            right: '5%',
+            bottom: 10,
+            top: 52,
+            containLabel: true,
+        },
+        color: colors,
+        legend: {
+            data: brandList,
+            textStyle: { //图例文字的样式
+                color: '#fff',
+                fontSize: 10
+            },
+            y: 12,
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+        },
+        xAxis: [
+            {
+                type: 'category',
+                axisTick: {
+                    show: false,
+                },
+                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: info
+    }
+}
\ No newline at end of file
diff --git a/src/views/ThemeComparison/summaryAndComparisonOfForumInformation/index.vue b/src/views/ThemeComparison/summaryAndComparisonOfForumInformation/index.vue
new file mode 100644
index 0000000..ed2aa93
--- /dev/null
+++ b/src/views/ThemeComparison/summaryAndComparisonOfForumInformation/index.vue
@@ -0,0 +1,139 @@
+<!--
+ * @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/ThemeComparisonBbs";
+export default {
+    name: "summaryAndComparisonOfForumInformation",
+    data() {
+        return {
+            form: {
+                token: "",
+                sGuid: "",
+                sTimeType: 3
+            },
+            load: false,
+            sourceData: [],
+        }
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getTComparison;
+            let sGuid = [];
+            arr.forEach((ele) => {
+                sGuid.push(ele.guids);
+            });
+            this.form.sGuid = sGuid.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/tailTOPMedia/index.vue b/src/views/ThemeComparison/tailTOPMedia/index.vue
new file mode 100644
index 0000000..1f01249
--- /dev/null
+++ b/src/views/ThemeComparison/tailTOPMedia/index.vue
@@ -0,0 +1,120 @@
+<!--
+ * @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/ThemeComparisonRear";
+import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "tailTOPMedia",
+    data() {
+        return {
+            form: {
+                token: "",
+                sGuid: "",
+                sTimeType: 3,
+                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.getTComparison;
+            let sGuid = [];
+            arr.forEach((ele) => {
+                sGuid.push(ele.guids);
+            });
+            this.form.sGuid = sGuid.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/themeRearWingComparison/index.vue b/src/views/ThemeComparison/themeRearWingComparison/index.vue
new file mode 100644
index 0000000..242ced5
--- /dev/null
+++ b/src/views/ThemeComparison/themeRearWingComparison/index.vue
@@ -0,0 +1,166 @@
+<!--
+ * @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" @clickMark="clickMark"></v-echarts>
+    </div>
+    <div class="vshow" v-if="modelShow" :style="modelStyle">
+      <vLabel-div title="实时热点事件">
+        <a-button @click="closeBox">关闭</a-button>
+      </vLabel-div>
+      <div
+        class="vshow-item"
+        v-for="(item, index) in urlArr[activeCol].value[activeIndex].hotTop"
+        :key="index"
+      >
+        <a :href="item.url" target="tar">{{ doStr(item.title, 28) }}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCountTime0528C } from "@/api/ThemeComparisonRear";
+import { doStr } from "@/utils/gol/dataTool";
+import createOpt from "./opt";
+export default {
+  name: "brandRearWingComparison",
+  data() {
+    return {
+      //弹出框//
+      modelStyle: {
+        left: "",
+        top: "",
+      },
+      modelShow: false,
+      ecbox: {
+        //图表宽高
+        width: 1618,
+        height: 1490,
+      },
+      ecmodel: {
+        //弹框宽高
+        width: 300,
+        height: 280,
+      },
+      activeCol: 0,
+      activeIndex: 0,
+      //-*-//
+      opt: {},
+      load: false,
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      urlArr: [],
+      doStr: doStr,
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+          sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.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 = [];
+        this.urlArr = data;
+        let markData = [[], [], [], [], [], []];
+        let dataI = 0;
+        data.forEach((ele) => {
+          let key = ele.key;
+          let value = ele.value;
+          dx.push(key);
+          ds.push(value);
+          for (let i = 0; i < ele.value.length; i++) {
+            if (ele.value[i].hotTop[0]) {
+              let obj = {
+                timeIndex: dataI,
+                yVal: data[dataI].value[i].value,
+                url: ele.value[i].hotTop,
+              };
+              markData[i].push(obj);
+              //  console.log(i)//车型的索引
+              //  console.log(dataI)//时间的索引
+              //  console.log(ele.value[i].hotTop)//事件列表[{},{}]
+            }
+          }
+          dataI = dataI + 1;
+        });
+        this.opt = createOpt(dx, ds, markData);
+        this.load = false;
+      });
+    },
+    // 弹出框
+    clickMark(data) {
+      this.activeCol = data.index;
+      this.activeIndex = data.seriesIndex;
+      this.modelShow = true;
+      let mw = window.event;
+      if (this.ecbox.width - mw.offsetX - 20 > this.ecmodel.width) {
+        this.modelStyle.left = mw.offsetX + 20 + "px";
+      } else {
+        this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px";
+      }
+      if (this.ecbox.height - mw.offsetY - 20 > this.ecmodel.height) {
+        this.modelStyle.top = mw.offsetY + "px";
+      } else {
+        this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px";
+      }
+    },
+    closeBox() {
+      this.modelShow = false;
+    },
+  },
+  
+};
+</script>
+
+<style lang="less" scoped>
+.brw-outter {
+  width: 944px;
+  height: 412px;
+  .brw-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+.vshow {
+  position: absolute;
+  width: 300px;
+  background: rgb(3, 18, 36);
+  border: 4px solid #0f2a4d;
+  .vshow-item {
+    padding: 11px;
+    width: 100%;
+    font-size: 15px;
+    color: rgb(54, 189, 239);
+  }
+}
+</style>
diff --git a/src/views/ThemeComparison/themeRearWingComparison/opt.js b/src/views/ThemeComparison/themeRearWingComparison/opt.js
new file mode 100644
index 0000000..0bbcf55
--- /dev/null
+++ b/src/views/ThemeComparison/themeRearWingComparison/opt.js
@@ -0,0 +1,144 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 10:11:24
+ * @LastEditTime: 2021-11-19 19:47:17
+ * @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 = [], markData = []) {
+    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],
+                    markPoint: {
+                        data: [],
+                    }
+                }
+            } else {
+                testData[val.key].data.push(val.value)
+            }
+        })
+    })
+    let arr = [];
+    for(let key in testData) {
+        arr.push(testData[key])
+    }
+    for(let i = 0;i< arr.length; i++) {
+        markData[i].forEach(ele => {
+            arr[i].markPoint.data.push(
+                {
+                    name: 'Max',
+                    xAxis: ele.timeIndex, yAxis: ele.yVal,
+                    symbol: 'pin',
+                    symbolSize: 16,
+                    symbolOffset: [0, '-70%'],
+                }
+            )
+        })
+    }
+   return arr 
+}
+
+export default function createOpt(dx = [], ds = [], markData = []) {
+    let data = createData(ds,markData);
+    return {
+        grid: {
+            left: 10,
+            right: '1.75%',
+            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,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            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;
+                }
+            },
+            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
+    }
+}