From 67770c20471516a1ee007873d0c5eed98639b173 Mon Sep 17 00:00:00 2001
From: liuyongli <1598631486@qq.com>
Date: Mon, 8 Nov 2021 16:06:49 +0800
Subject: [PATCH] =?UTF-8?q?lyl=E5=B0=BE=E7=BF=BC=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ModelInsight/index.vue              |   5 +
 src/views/TailInsightDetails/index.vue        |  28 +-
 .../mediaDistribution/index.vue               |  75 +++--
 .../mediaDistribution/opt.js                  | 135 ++------
 .../popular-word-cloud/index.vue              |  49 ++-
 .../popular-word-cloud/opt.js                 | 304 +++++++-----------
 .../rearWingInformationList/index.vue         |  71 +++-
 .../rearWingPropagationSituation/index.vue    |  29 +-
 .../rearWingPropagationSituation/opt.js       |  19 +-
 .../theOverallToneOfTheTail/index.vue         |  52 ++-
 .../theOverallToneOfTheTail/opt.js            | 107 ++----
 11 files changed, 427 insertions(+), 447 deletions(-)

diff --git a/src/views/ModelInsight/index.vue b/src/views/ModelInsight/index.vue
index e4d1100..24bf4d9 100644
--- a/src/views/ModelInsight/index.vue
+++ b/src/views/ModelInsight/index.vue
@@ -113,11 +113,16 @@ export default {
         this.modelData();
     },
     methods: {
+        // 前往各个详情
+      goRouter(path, query = {}) {
+        this.$router.push({path: path, query: query});
+      },
         openModel() {
             this.modelShow = true;
         },
         // 获取车型
         modelData() {
+    
             let model = this.getModel.name || "";
             if (!model) {
                 this.getUserSeriesName(this.brand);
diff --git a/src/views/TailInsightDetails/index.vue b/src/views/TailInsightDetails/index.vue
index 1e753d2..aa60a4b 100644
--- a/src/views/TailInsightDetails/index.vue
+++ b/src/views/TailInsightDetails/index.vue
@@ -15,10 +15,10 @@
                 </v-label-div>
                 <div class="tid-d1-bd">
                     <div class="d1">
-                        奥迪
+                        {{this.form.sBrand}}
                     </div>
                     <div class="d2">
-                       洞察分析：共监测到尾翼信息5条,2021-06-15 10:00:00尾翼传播达到波峰值,共监测到1条信息.,尾翼信息主要分布在萝卜投研,微信等媒体平台，媒体尾翼分布占比为萝卜投研 60%,微信 40%.,网民对于该品牌主要关注"上市,全新,不错,亮点,搭载"等信息.,通过对行业大数据的聚合分析,可以发现网民热议TOP10车型分别为”奥迪h6,rav4荣放,博越"等.
+                       洞察分析：共{{msg}}
                     </div>
                 </div>
             </div>
@@ -39,6 +39,7 @@ import mediaDistribution from "./mediaDistribution"
 import theOverallToneOfTheTail from "./theOverallToneOfTheTail"
 import popularWordCloud from "./popular-word-cloud"
 import rearWingInformationList from "./rearWingInformationList"
+import {getWeiYiInsightAnalysis} from '@/api/TailInsightdetails'
 export default {
     name: "TailInsightDetails",
     components: {
@@ -48,12 +49,33 @@ export default {
         popularWordCloud, // 热门词云
         rearWingInformationList // 尾翼信息列表
     },
+     data() {
+        return {
+            msg: "",
+            form: {
+                sBrand: "",
+                token: "",
+            },
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.getDdta();
+    }, 
     methods: {
+        getDdta(){
+             let obj = Object.assign({}, this.getCtime2, this.form);
+            getWeiYiInsightAnalysis(obj).then(res => {
+                let data = res.msg;
+                this.msg = data;
+            })
+        },
         goback() {
             this.$router.go(-1);
         }
     }
-};
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/TailInsightDetails/mediaDistribution/index.vue b/src/views/TailInsightDetails/mediaDistribution/index.vue
index a922a51..4f472d6 100644
--- a/src/views/TailInsightDetails/mediaDistribution/index.vue
+++ b/src/views/TailInsightDetails/mediaDistribution/index.vue
@@ -10,47 +10,60 @@
     <div class="md-outter">
         <v-label-div title="媒体分布"></v-label-div>
         <div class="md-inner">
-            <v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
+            <v-echarts :opt="opt"></v-echarts>
         </div>
     </div>
 </template>
 
 <script>
 import createOpt from "./opt";
+import {getSourcetype0528} from "@/api/TailInsightdetails"
 export default {
     name: "mediaDistribution",
-    data() {
+     data() {
         return {
-            opt: createOpt(),
-        };
+            opt: {},
+            form: {
+                sBrand: "",
+                token: "",
+            },
+            colors: [
+                "#54BF93",
+                "#3373CC",
+                "#CC9D12",
+                "#f15c80",
+                "#e4d354",
+                "#8085e8",
+                "#8d4653",
+                "#91e8e1",
+                "#f7a35c",
+                "#90ed7d",
+                "#54BF93",
+                "#3373CC",
+                "#CC9D12",
+                "#f15c80",
+                "#e4d354",
+                "#8085e8",
+                "#8d4653",
+                "#91e8e1",
+                "#f7a35c",
+                "#90ed7d",
+            ],
+        }
     },
-    methods: {
-        echarsFun(myChart) {
-            let index = 0;
-            myChart.dispatchAction({
-                type: "highlight",
-                seriesIndex: 0,
-                dataIndex: 0,
-            });
-            myChart.on("mouseover", function (e) {
-                if (e.dataIndex != index) {
-                    myChart.dispatchAction({
-                        type: "downplay",
-                        seriesIndex: 0,
-                        dataIndex: index,
-                    });
-                }
-            });
-
-            myChart.on("mouseout", function (e) {
-                index = e.dataIndex;
-
-                myChart.dispatchAction({
-                    type: "highlight",
-                    seriesIndex: 0,
-                    dataIndex: e.dataIndex,
-                });
-            });
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.getDdta();
+    }, 
+methods: {
+        getDdta(){
+             let obj = Object.assign({}, this.getCtime2, this.form);
+            getSourcetype0528(obj).then(res => {
+                let data = res.data || [];
+                this.labelData = data;
+                this.opt = createOpt(data, this.colors);
+            })
         },
     },
 };
diff --git a/src/views/TailInsightDetails/mediaDistribution/opt.js b/src/views/TailInsightDetails/mediaDistribution/opt.js
index 4ac3941..06b00fd 100644
--- a/src/views/TailInsightDetails/mediaDistribution/opt.js
+++ b/src/views/TailInsightDetails/mediaDistribution/opt.js
@@ -7,7 +7,30 @@
  * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
+let colors = ['rgba(203,118,58,1)', 'rgba(202,156,17,1)', 'rgba(90,203,156,1)', 'rgba(99,173,204,1)', 'rgba(55,113,190,1)', "rgba(138,191,66,1)", 'rgba(181,191,67,1)', 'rgba(203,91,65,1)']
+function createData(ds=[]) {
+   let arr = [];
+   for(let i = 0; i < ds.length; i++) {
+      let ele = ds[i];
+      if(ele.value*1 > 0) {
+         let obj = { value: ele.value*1, name: ele.key, itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+              //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+              //给第一个设置0，第四个设置1，就是垂直渐变
+              offset: 0,
+              color: 'black'
+            }, {
+              offset: 1,
+              color: colors[i]
+            }])
+          }};
+         arr.push(obj)
+      }
+   }
+   return arr;
+}
+export default function createOpt(ds = []) {
+   const data = createData(ds, colors) 
     return {
         legend: {
             y: 10,
@@ -15,8 +38,7 @@ export default function createOpt() {
             icon: 'roundRect',
             textStyle: { //图例文字的样式
                 color: '#fff'
-            },
-            data: ["新闻","论坛","微信","微博","其他"]
+            }
           },
         series: [
             {
@@ -26,68 +48,23 @@ export default function createOpt() {
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                lineHeight: 30
               },
               emphasis: {
                 label: {
                   show: true,
-                  fontSize: '40',
+                  fontSize: '20',
                   color: "#ffff",
-                  formatter: (p)=>{
-                    return p.data.name + '\n' + p.data.value; 
-                  },
+                  formatter: function (p) {
+                    return `${p.data.name}\n${p.percent}%\n${p.data.value}`
+                  }
                 }
               },
               labelLine: {
                 show: false
               },
-              data: [
-                { value: 2000, name: '新闻', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                { value: 2000, name: '论坛', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#518ea9'
-                 }])} },
-                { value: 1000, name: '微信', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-                 { value: 1000, name: '微博', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#b38b14'
-                 }])} },
-                 { value: 2000, name: '其他', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#b56a2f'
-                 }])} },
-              ],
+              data: data,
 
             },
             {
@@ -103,53 +80,7 @@ export default function createOpt() {
                   show: false
                 },
                 center: ['50%', '50%'],//边框位置
-                data: [
-                  { value: 2000, name: '新闻', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                  { value: 2000, name: '论坛', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#518ea9'
-                 }])} },
-                  { value: 1000, name: '微信', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-                 { value: 1000, name: '微博', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#b38b14'
-                 }])} },
-                 { value: 2000, name: '其他', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#b56a2f'
-                 }])} },
-                ],
+                data: data,
   
               }
           ]
diff --git a/src/views/TailInsightDetails/popular-word-cloud/index.vue b/src/views/TailInsightDetails/popular-word-cloud/index.vue
index a7c491a..853c13d 100644
--- a/src/views/TailInsightDetails/popular-word-cloud/index.vue
+++ b/src/views/TailInsightDetails/popular-word-cloud/index.vue
@@ -8,21 +8,60 @@
 -->
 <template>
     <div class="pwc-outter">
-        <v-label-div title="热门词云"></v-label-div>
+         <v-label-div title="热门词云" :showLine="false" :eStyle="{'border-style': 'none'}">
+             <v-tab-group :btns="['正面', '负面']" @change="handlerChange"></v-tab-group>
+         </v-label-div>
         <div class="pwc-inner">
-            <v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
+            <v-echarts :opt="opt"></v-echarts>
         </div>
     </div>
 </template>
 <script>
-import createOpt from "./opt"
+import createWordCloud from "@/utils/gol/bubbleWord";
+import {getPositive,getNegative} from '@/api/TailInsightdetails'
 export default {
     name: "popular-word-cloud",
+    props: ["brand", "model"],
     data() {
         return {
-           opt: createOpt()
+            form: {
+                sBrand: "",
+                token: "",
+            },
+            opt: {}
         }
-    }
+    },
+    created() {
+                    this.form.token = this.getToken;
+                    this.form.sBrand = this.getBrand.brandname || '奥迪';
+                    this.getData1();
+                    this.getData2();
+                },
+     methods: {
+         handlerChange(n) {
+            this.type = n;
+            this.getData1();
+            this.getData2();
+        },
+          getData1(){
+               this.load = true;
+               let obj = Object.assign({}, this.getCtime2, this.form);
+               getPositive(obj).then(res => {
+               let data = res.data;
+               this.opt = createWordCloud(data);
+               this.load = false;
+                });
+        },
+        getData2(){
+            this.load = true;
+             let obj = Object.assign({}, this.getCtime2, this.form);
+            getNegative(obj).then(res => {
+               let data = res.data;
+               this.opt = createWordCloud(data);
+               this.load = false;
+            })
+        },
+    },
 }
 </script>
 
diff --git a/src/views/TailInsightDetails/popular-word-cloud/opt.js b/src/views/TailInsightDetails/popular-word-cloud/opt.js
index 6d78372..b9a927f 100644
--- a/src/views/TailInsightDetails/popular-word-cloud/opt.js
+++ b/src/views/TailInsightDetails/popular-word-cloud/opt.js
@@ -1,136 +1,103 @@
 /*
  * @Author: your name
- * @Date: 2021-10-09 13:35:13
- * @LastEditTime: 2021-10-12 19:22:21
+ * @Date: 2021-10-21 11:36:36
+ * @LastEditTime: 2021-10-29 21:30:46
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
+ * @FilePath: /data-show/src/utils/gol/bubbleWord.js
  */
-// import * as echarts from "echarts";
-const dataBJ = [
-    [1, 55, 9, 56, 0.46, 18, 6, '良'],
-    [2, 25, 11, 21, 0.65, 34, 9, '优'],
-    [3, 56, 7, 63, 0.3, 14, 5, '良'],
-    [4, 33, 7, 29, 0.33, 16, 6, '优'],
-    [5, 42, 24, 44, 0.76, 40, 16, '优'],
-    [6, 82, 58, 90, 1.77, 68, 33, '良'],
-    [7, 74, 49, 77, 1.46, 48, 27, '良'],
-    [8, 78, 55, 80, 1.29, 59, 29, '良'],
-    [9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
-    // [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
-    // [11, 39, 19, 38, 0.57, 31, 15, '优'],
-    // [12, 41, 11, 40, 0.43, 21, 7, '优'],
-    // [13, 64, 38, 74, 1.04, 46, 22, '良'],
-    // [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
-    // [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
-    // [16, 33, 6, 29, 0.34, 13, 5, '优'],
-    // [17, 94, 66, 110, 1.54, 62, 31, '良'],
-    // [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
-    // [19, 57, 31, 54, 0.96, 32, 14, '良'],
-    // [20, 22, 8, 17, 0.48, 23, 10, '优'],
-    // [21, 39, 15, 36, 0.61, 29, 13, '优'],
-    // [22, 94, 69, 114, 2.08, 73, 39, '良'],
-    // [23, 99, 73, 110, 2.43, 76, 48, '良'],
-    // [24, 31, 12, 30, 0.5, 32, 16, '优'],
-    // [25, 42, 27, 43, 1, 53, 22, '优'],
-    // [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
-    // [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
-    // [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
-    // [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
-    // [30, 52, 24, 60, 1.03, 50, 21, '良'],
-    // [31, 46, 5, 49, 0.28, 10, 6, '优']
-  ];
-  const dataGZ = [
-    [1, 26, 37, 27, 1.163, 27, 13, '优'],
-    [2, 85, 62, 71, 1.195, 60, 8, '良'],
-    [3, 78, 38, 74, 1.363, 37, 7, '良'],
-    [4, 21, 21, 36, 0.634, 40, 9, '优'],
-    [5, 41, 42, 46, 0.915, 81, 13, '优'],
-    // [6, 56, 52, 69, 1.067, 92, 16, '良'],
-    // [7, 64, 30, 28, 0.924, 51, 2, '良'],
-    // [8, 55, 48, 74, 1.236, 75, 26, '良'],
-    // [9, 76, 85, 113, 1.237, 114, 27, '良'],
-    // [10, 91, 81, 104, 1.041, 56, 40, '良'],
-    // [11, 84, 39, 60, 0.964, 25, 11, '良'],
-    // [12, 64, 51, 101, 0.862, 58, 23, '良'],
-    // [13, 70, 69, 120, 1.198, 65, 36, '良'],
-    // [14, 77, 105, 178, 2.549, 64, 16, '良'],
-    // [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
-    // [16, 73, 68, 97, 0.905, 51, 34, '良'],
-    // [17, 54, 27, 47, 0.592, 53, 12, '良'],
-    // [18, 51, 61, 97, 0.811, 65, 19, '良'],
-    // [19, 91, 71, 121, 1.374, 43, 18, '良'],
-    // [20, 73, 102, 182, 2.787, 44, 19, '良'],
-    // [21, 73, 50, 76, 0.717, 31, 20, '良'],
-    // [22, 84, 94, 140, 2.238, 68, 18, '良'],
-    // [23, 93, 77, 104, 1.165, 53, 7, '良'],
-    // [24, 99, 130, 227, 3.97, 55, 15, '良'],
-    // [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
-    // [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
-    // [27, 81, 48, 62, 1.619, 26, 3, '良'],
-    // [28, 56, 48, 68, 1.336, 37, 9, '良'],
-    // [29, 82, 92, 174, 3.29, 0, 13, '良'],
-    // [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
-    // [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
-  ];
-  const dataSH = [
-    [1, 91, 45, 125, 0.82, 34, 23, '良'],
-    [2, 65, 27, 78, 0.86, 45, 29, '良'],
-    [3, 83, 60, 84, 1.09, 73, 27, '良'],
-    [4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
-    [5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
-    // [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
-    // [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
-    // [8, 89, 65, 78, 0.86, 51, 26, '良'],
-    // [9, 53, 33, 47, 0.64, 50, 17, '良'],
-    // [10, 80, 55, 80, 1.01, 75, 24, '良'],
-    // [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
-    // [12, 99, 71, 142, 1.1, 62, 42, '良'],
-    // [13, 95, 69, 130, 1.28, 74, 50, '良'],
-    // [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
-    // [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
-    // [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
-    // [17, 79, 43, 107, 1.05, 59, 37, '良'],
-    // [18, 71, 46, 89, 0.86, 64, 25, '良'],
-    // [19, 97, 71, 113, 1.17, 88, 31, '良'],
-    // [20, 84, 57, 91, 0.85, 55, 31, '良'],
-    // [21, 87, 63, 101, 0.9, 56, 41, '良'],
-    // [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
-    // [23, 87, 62, 100, 1, 72, 28, '良'],
-    // [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
-    // [25, 65, 45, 51, 0.74, 39, 17, '良'],
-    // [26, 39, 24, 38, 0.61, 47, 17, '优'],
-    // [27, 39, 24, 39, 0.59, 50, 19, '优'],
-    // [28, 93, 68, 96, 1.05, 79, 29, '良'],
-    // [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
-    // [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
-    // [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
-  ];
-//   const schema = [
-//     { name: 'date', index: 0, text: '日' },
-//     { name: 'AQIindex', index: 1, text: 'AQI指数' },
-//     { name: 'PM25', index: 2, text: 'PM2.5' },
-//     { name: 'PM10', index: 3, text: 'PM10' },
-//     { name: 'CO', index: 4, text: '一氧化碳（CO）' },
-//     { name: 'NO2', index: 5, text: '二氧化氮（NO2）' },
-//     { name: 'SO2', index: 6, text: '二氧化硫（SO2）' }
-//   ];
-  const itemStyle = {
-    opacity: 0.8,
-    shadowBlur: 10,
-    shadowOffsetX: 0,
-    shadowOffsetY: 0,
-    shadowColor: 'rgba(0,0,0,0.3)'
-  };
-export default function createOpt() {
+import {compare} from "./dataTool"
+ // 将后台数据转成数组
+function doWordCloud(data) {
+    let arr1 = [];
+    for (let key in data) {
+        let obj = { name: key, value: data[key] };
+        arr1.push(obj);
+    }
+    return arr1;
+}
+// 创建词云的对象
+function bubbleChart(data = [], format = []) {
+    let [maxValue, temp] = [0, []];
+    data.forEach((item) => {
+        temp.push(item[format[1]]);
+    });
+    maxValue = Math.max.apply(null, temp);
+    // 气泡颜色数组
+    let color = [
+        "#FFB600",
+        "#886CFF",
+        "#0084FF",
+        "#4CB690",
+        "#58B458",
+        "#6C6C6C",
+        "#F56161",
+        "#FC754C",
+        "#5F5EEC",
+    ];
+    // 气泡颜色备份
+    let bakeColor = [...color];
+    // 气泡数据
+    let bubbleData = [];
+    // 气泡基础大小
+    let basicSize = 30;
+    // 节点之间的斥力因子,值越大,气泡间距越大
+    let repulsion = 380;
+    // 根据气泡数量配置基础大小和斥力因子（以实际情况进行适当调整，使气泡合理分布）
+    if (data.length >= 5 && data.length < 10) {
+        basicSize = 30;
+        repulsion = 230;
+    }
+    if (data.length >= 10 && data.length < 20) {
+        basicSize = 40;
+        repulsion = 150;
+    } else if (data.length >= 20) {
+        basicSize = 50;
+        repulsion = 65;
+    }
+    // 填充气泡数据数组bubbleData
+    for (let item of data) {
+        // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
+        if (!bakeColor.length) bakeColor = [...color];
+        let colorSet = new Set(bakeColor);
+        let curIndex = Math.round(Math.random() * (colorSet.size - 1));
+        let curColor = bakeColor[curIndex];
+        colorSet.delete(curColor);
+        bakeColor = [...colorSet];
+        // 气泡大小设置
+        let size = (item[format[1]] * basicSize * 2) / maxValue;
+        if (size < basicSize) size = basicSize;
+
+        bubbleData.push({
+            name: item[format[0]],
+            value: item[format[1]],
+            symbolSize: size,
+            draggable: true,
+            itemStyle: {
+                normal: {
+                    color: curColor,
+                    opacity: 0.8,
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 0,
+                    shadowColor: "rgba(0,0,0,0.3)",
+                },
+            },
+        });
+    }
     return {
-        grid: {
-            top: "16px",
-            left: "16px",
-            right: "16px",
-            bottom: "16px",
-            containLabel: true,
-        },
+        bubbleData,
+        repulsion,
+    };
+}
+
+// 创建词云图
+export default function createWordCloud(obj) {
+    let words = doWordCloud(obj);
+    words.sort(compare('value'));
+    let bubble = bubbleChart(words, ['name', 'value']);
+    return {
+        animationEasingUpdate: 'bounceIn',
         tooltip: { 
             backgroundColor: "#08182F",
             color: "#fff",
@@ -140,76 +107,27 @@ export default function createOpt() {
             },
             extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
             formatter: function(param) {
-                let value = param.value;
-                return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
+                let data = param.data;
+                return `<span>${data.name}</span><br><span>${data.value}</span>`
             }
         },
-        xAxis: {
-            show: false,
-            type: 'value',
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed'
-                }
-            }
-        },
-        yAxis: {
-            show: false,
-            type: 'value',
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed'
-                }
-            },
-            scale: true
-        },
         series: [{
-            name: '北京',
-            data: dataBJ,
-            type: 'scatter',
-            symbolSize: function (data) {
-                return data[2]
-            },
-            label: {
-                show: true,
-                color: "#FFF",
-                formatter: function (param) {
-                    return param.data[param.data.length - 1];
-                },
-            },
-            itemStyle: itemStyle
-        }, {
-            name: '上海',
-            data: dataSH,
-            type: 'scatter',
-            symbolSize: function (data) {
-                return data[2]
-            },
+            type: 'graph',
+            layout: 'force',
             label: {
-                show: true,
-                color: "#FFF",
-                formatter: function (param) {
-                    return param.data[param.data.length - 1];
-                },
-            },
-            itemStyle: itemStyle
-        },
-        {
-            name: '广州',
-            data: dataGZ,
-            type: 'scatter',
-            symbolSize: function (data) {
-                return data[2]
+                show:true,
+                color:"#FFF",
+                fontSize:12,
+               
             },
-            label: {
-                show: true,
-                color: "#FFF", 
-                formatter: function (param) {
-                    return param.data[param.data.length - 1];
-                },
+            force: {
+                gravity:0.2,
+                repulsion: bubble.repulsion,
+                edgeLength: 10
             },
-            itemStyle: itemStyle
-        }
-        ]
+            // 是否开启鼠标缩放和平移漫游
+            roam: true,
+            data: bubble.bubbleData
+        }]
     }
-}
+}
\ No newline at end of file
diff --git a/src/views/TailInsightDetails/rearWingInformationList/index.vue b/src/views/TailInsightDetails/rearWingInformationList/index.vue
index 15e324b..77437b1 100644
--- a/src/views/TailInsightDetails/rearWingInformationList/index.vue
+++ b/src/views/TailInsightDetails/rearWingInformationList/index.vue
@@ -46,13 +46,22 @@
 </template>
 
 <script>
+import {getList0528} from '@/api/TailInsightdetails'
 export default {
     name: "rearWingInformationList",
     data() {
         return {
+            load: false,
             form: {
                 s1: "",
                 s2: "",
+                token: "",
+                ssBrand: "",
+                iPageIndex: 1,
+                iPageSize: 20,
+                sTimeType: 4,
+                sStartTime: '2021-11-01',
+                sEndTime: '2021-11-07'
             },
             pagination: {
                 "show-total": total => `共 ${total} 条`
@@ -60,25 +69,25 @@ export default {
             columns: [
                 {
                     title: "新闻标题",
-                    key: "name",
-                    dataIndex: "name",
+                    key: "title",
+                    dataIndex: "title",
                 },
                 {
                     title: "来源",
-                    key: "a",
-                    dataIndex: "a",
+                    key: "source",
+                    dataIndex: "source",
                     width: 120
                 },
                  {
                     title: "作者",
-                    key: "b",
-                    dataIndex: "b",
+                    key: "user_author",
+                    dataIndex: "user_author",
                     width: 200
                 },
                  {
                     title: "发布时间",
-                    key: "c",
-                    dataIndex: "c",
+                    key: "sourcetime",
+                    dataIndex: "sourcetime",
                     width: 180
                 },
                  {
@@ -106,6 +115,52 @@ export default {
             ]
         };
     },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.getData();
+    },
+     methods: {
+          getData(){
+               this.load = true;
+               let obj = Object.assign({}, this.getCtime2, this.form);
+               getList0528(obj).then(res => {
+               let data = res.data || [];
+               this.list = data;
+                let totalNum = res.totalNum || 0;
+                this.total = totalNum;
+                let arr = [];
+                data.forEach((ele) => {
+                    let a = [
+                        ele.affections,
+                        ele.id,
+                        ele.points,
+                        ele.source,
+                        ele.sourcetime,
+                        ele.srctitle,
+                        ele.title,
+                        ele.url,
+                        ele.user_author,
+                    ];
+                    arr.push(a);
+                });
+                this.config = {
+                    headerBGC: "#0c203b",
+                    oddRowBGC: "#173b6d",
+                    evenRowBGC: "rgba(69, 149, 244, 0)",
+                    rowNum: 10,
+                    columnWidth: [170,60,160],
+                    header: ["新闻标题", "来源", "作者", "发布时间", "正面", "车型"],
+                    data: arr,
+                };
+        });
+    },
+    // 分页处理
+        handlerPagnation(page) {
+            this.form.iPageIndex = page;
+            this.getDdta()
+        }
+     },
 };
 </script>
 
diff --git a/src/views/TailInsightDetails/rearWingPropagationSituation/index.vue b/src/views/TailInsightDetails/rearWingPropagationSituation/index.vue
index fbc831a..ffc0542 100644
--- a/src/views/TailInsightDetails/rearWingPropagationSituation/index.vue
+++ b/src/views/TailInsightDetails/rearWingPropagationSituation/index.vue
@@ -16,13 +16,40 @@
 </template>
 
 <script>
+import {getWeiYiVolumeTime} from '@/api/TailInsightdetails'
 import createOpt from "./opt"
 export default {
     name: "rearWingPropagationSituation",
     data() {
         return {
-            opt: createOpt()
+            opt: {},
+            form: {
+                sBrand: "",
+                token: "",
+            }
         }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.getDdta();
+    }, 
+    methods: {
+       getDdta(){
+             let obj = Object.assign({}, this.getCtime2, this.form);
+            getWeiYiVolumeTime(obj).then(res => {
+                let data = res.data || [];
+                let dx = [];
+                let ds = [];
+                data.forEach((ele) => {
+                    let time = ele.Time;
+                    let value = ele.value;
+                    dx.push(time);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+            })
+        },
     }
 }
 </script>
diff --git a/src/views/TailInsightDetails/rearWingPropagationSituation/opt.js b/src/views/TailInsightDetails/rearWingPropagationSituation/opt.js
index 1cb89a9..19fe971 100644
--- a/src/views/TailInsightDetails/rearWingPropagationSituation/opt.js
+++ b/src/views/TailInsightDetails/rearWingPropagationSituation/opt.js
@@ -7,7 +7,8 @@
  * @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOpt(dx = [], ds = []) {
     return {
         grid: {
             top: "16px",
@@ -38,7 +39,13 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
-            data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
+            axisLabel: {
+                formatter: (value) => {
+                    let str = value.substring(10, 16)
+                    return str;
+                }
+            },
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -48,6 +55,12 @@ export default function createOpt() {
                     color: "#FFF",
                 },
             },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = bigNumberTransform(value);
+                    return str;
+                }
+            },
             splitLine: {
                 lineStyle: {
                     type: "dashed", // y轴分割线类型
@@ -57,7 +70,7 @@ export default function createOpt() {
         },
         series: [
             {
-                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                data: ds,
                 type: 'line',
                 color: '#546fc5',
                 areaStyle: {normal: {
diff --git a/src/views/TailInsightDetails/theOverallToneOfTheTail/index.vue b/src/views/TailInsightDetails/theOverallToneOfTheTail/index.vue
index 234527f..5dc41c9 100644
--- a/src/views/TailInsightDetails/theOverallToneOfTheTail/index.vue
+++ b/src/views/TailInsightDetails/theOverallToneOfTheTail/index.vue
@@ -10,47 +10,45 @@
     <div class="tot-outter">
         <v-label-div title="尾翼整体调性"></v-label-div>
         <div class="tot-inner">
-            <v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
+            <v-echarts :opt="opt"></v-echarts>
         </div>
     </div>
 </template>
 
 <script>
+import {getAffections} from '@/api/TailInsightdetails'
 import createOpt from "./opt"
 export default {
     name: "theOverallToneOfTheTail",
     data() {
         return {
-            opt: createOpt()
+            opt: {},
+            form: {
+                sBrand: "",
+                token: "",
+            },
         }
     },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.getDdta();
+    }, 
     methods: {
-        echarsFun(myChart) {
-            let index = 0;
-            myChart.dispatchAction({
-                type: "highlight",
-                seriesIndex: 0,
-                dataIndex: 0,
-            });
-            myChart.on("mouseover", function (e) {
-                if (e.dataIndex != index) {
-                    myChart.dispatchAction({
-                        type: "downplay",
-                        seriesIndex: 0,
-                        dataIndex: index,
-                    });
+        getDdta(){
+             let obj = Object.assign({}, this.getCtime2, this.form);
+            getAffections(obj).then(res => {
+                let data = res.data || {};
+                let arr = [];
+                for(let key in data) {
+                    let obj = {
+                        key: key,
+                        value: data[key]
+                    }
+                    arr.push(obj)
                 }
-            });
-
-            myChart.on("mouseout", function (e) {
-                index = e.dataIndex;
-
-                myChart.dispatchAction({
-                    type: "highlight",
-                    seriesIndex: 0,
-                    dataIndex: e.dataIndex,
-                });
-            });
+                this.opt = createOpt(arr);
+            })
         },
     }
 }
diff --git a/src/views/TailInsightDetails/theOverallToneOfTheTail/opt.js b/src/views/TailInsightDetails/theOverallToneOfTheTail/opt.js
index 17aaefa..3e979c2 100644
--- a/src/views/TailInsightDetails/theOverallToneOfTheTail/opt.js
+++ b/src/views/TailInsightDetails/theOverallToneOfTheTail/opt.js
@@ -1,11 +1,3 @@
-/*
- * @Author: your name
- * @Date: 2021-10-13 17:48:55
- * @LastEditTime: 2021-10-13 17:50:56
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/TailInsightDetails/theOverallToneOfTheTail/opt.js
- */
 /*
  * @Author: your name
  * @Date: 2021-10-12 14:33:51
@@ -15,7 +7,30 @@
  * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
+let colors = ['#3373CC', '#CC9D12', '#54BF93', 'rgba(99,173,204,1)', 'rgba(55,113,190,1)', "rgba(138,191,66,1)", 'rgba(181,191,67,1)', 'rgba(203,91,65,1)']
+function createData(ds=[]) {
+   let arr = [];
+   for(let i = 0; i < ds.length; i++) {
+      let ele = ds[i];
+      if(ele.value*1 > 0) {
+         let obj = { value: ele.value*1, name: ele.key, itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+              //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+              //给第一个设置0，第四个设置1，就是垂直渐变
+              offset: 0,
+              color: 'black'
+            }, {
+              offset: 1,
+              color: colors[i]
+            }])
+          }};
+         arr.push(obj)
+      }
+   }
+   return arr;
+}
+export default function createOpt(ds = []) {
+   const data = createData(ds, colors) 
     return {
         legend: {
             y: 10,
@@ -23,8 +38,7 @@ export default function createOpt() {
             icon: 'roundRect',
             textStyle: { //图例文字的样式
                 color: '#fff'
-            },
-            data: ["正面","中性","负面"]
+            }
           },
         series: [
             {
@@ -34,50 +48,23 @@ export default function createOpt() {
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                lineHeight: 30
               },
               emphasis: {
                 label: {
                   show: true,
-                  fontSize: '40',
+                  fontSize: '20',
                   color: "#ffff",
-                  formatter: (p)=>{
-                    return p.data.name + '\n' + p.data.value; 
-                  },
+                  formatter: function (p) {
+                    return `${p.data.name}\n${p.percent}%\n${p.data.value}`
+                  }
                 }
               },
               labelLine: {
                 show: false
               },
-              data: [
-                { value: 2000, name: '正面', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                { value: 2000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#518ea9'
-                 }])} },
-                { value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-              ],
+              data: data,
 
             },
             {
@@ -93,35 +80,7 @@ export default function createOpt() {
                   show: false
                 },
                 center: ['50%', '50%'],//边框位置
-                data: [
-                  { value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                  { value: 2000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#518ea9'
-                 }])} },
-                  { value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} }
-                ],
+                data: data,
   
               }
           ]