From 943ed80725100a42a21db14625a29a68bb47f6f9 Mon Sep 17 00:00:00 2001
From: liuyongli <1598631486@qq.com>
Date: Tue, 9 Nov 2021 17:13:08 +0800
Subject: [PATCH] =?UTF-8?q?lyl=E8=BD=A6=E5=9E=8B=E6=B4=9E=E5=AF=9F?=
 =?UTF-8?q?=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/api/ModelTaildetails/index.js             |  90 ++++++
 .../MTDmediaDistribution/index.vue            |  47 ++-
 .../MTDmediaDistribution/opt.js               | 135 ++------
 .../MTDrearWingInformationList/index.vue      | 121 ++++---
 .../MTDrearWingPropagationSituation/index.vue |  34 +-
 .../MTDrearWingPropagationSituation/opt.js    |  19 +-
 .../MTDtheOverallToneOfTheTail/index.vue      |  33 +-
 .../MTDtheOverallToneOfTheTail/opt.js         | 107 ++----
 src/views/ModelTailDetails/index.vue          |  45 ++-
 .../mtd-popular-word-cloud/index.vue          |  56 +++-
 .../mtd-popular-word-cloud/opt.js             | 304 +++++++-----------
 11 files changed, 565 insertions(+), 426 deletions(-)
 create mode 100644 src/api/ModelTaildetails/index.js

diff --git a/src/api/ModelTaildetails/index.js b/src/api/ModelTaildetails/index.js
new file mode 100644
index 0000000..fde2982
--- /dev/null
+++ b/src/api/ModelTaildetails/index.js
@@ -0,0 +1,90 @@
+
+import httpService from "@/request"
+// 尾翼洞察详情-尾翼洞察详情
+export function getWeiYiInsightAnalysis(params) {
+    let obj =  Object.assign({action: 'getWeiYiInsightAnalysis', sType: 'BrandWeiYi'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 传播态势-传播态势
+export function getWeiYiVolumeTime(params) {
+    let obj =  Object.assign({action: 'getWeiYiVolumeTime', sType: 'BrandWeiYi'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 媒体分布-媒体分布
+export function getSourcetype0528(params) {
+    let obj =  Object.assign({action: 'getSourcetype0528', sType: 'BrandWeiYi'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 尾翼整体调性-尾翼整体调性
+export function getAffections(params) {
+    let obj =  Object.assign({action: 'getAffections', sType: 'BrandWeiYi'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 热门词云-正面词云
+export function getPositive(params) {
+    let obj =  Object.assign({action: 'getPositive', sType: 'BrandWeiYi'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 热门词云-负面词云
+export function getNegative(params) {
+    let obj =  Object.assign({action: 'getNegative', sType: 'BrandWeiYi'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 尾翼信息列表-尾翼信息列表
+export function getList0528(params) {
+    let obj =  Object.assign({action: 'getList0528', sType: 'BrandWeiYi'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
diff --git a/src/views/ModelTailDetails/MTDmediaDistribution/index.vue b/src/views/ModelTailDetails/MTDmediaDistribution/index.vue
index 72aa703..45ffccc 100644
--- a/src/views/ModelTailDetails/MTDmediaDistribution/index.vue
+++ b/src/views/ModelTailDetails/MTDmediaDistribution/index.vue
@@ -16,15 +16,60 @@
 </template>
 
 <script>
+import {getSourcetype0528} from '@/api/ModelTaildetails'
 import createOpt from "./opt";
 export default {
     name: "MTDmediaDistribution",
     data() {
         return {
-            opt: createOpt(),
+            load: false,
+            opt: {},
+            form: {
+                sBrand: "",
+                sSeriesName: "",
+                token: "",
+            },
+            colors: [
+                "#54BF93",
+                "#3373CC",
+                "#CC9D12",
+                "#f15c80",
+                "#e4d354",
+                "#8085e8",
+                "#8d4653",
+                "#91e8e1",
+                "#f7a35c",
+                "#90ed7d",
+                "#54BF93",
+                "#3373CC",
+                "#CC9D12",
+                "#f15c80",
+                "#e4d354",
+                "#8085e8",
+                "#8d4653",
+                "#91e8e1",
+                "#f7a35c",
+                "#90ed7d",
+            ],
         };
     },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.form.sSeriesName = this.getModel.name;
+        this.getDdta();
+    }, 
     methods: {
+        getDdta(){
+             let obj = Object.assign({}, this.getCtime2, this.form);
+             this.load = true;
+            getSourcetype0528(obj).then(res => {
+                let data = res.data || [];
+                this.labelData = data;
+                this.opt = createOpt(data, this.colors);
+                this.load = false;
+            })
+        },
         
     },
 };
diff --git a/src/views/ModelTailDetails/MTDmediaDistribution/opt.js b/src/views/ModelTailDetails/MTDmediaDistribution/opt.js
index 4ac3941..06b00fd 100644
--- a/src/views/ModelTailDetails/MTDmediaDistribution/opt.js
+++ b/src/views/ModelTailDetails/MTDmediaDistribution/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/ModelTailDetails/MTDrearWingInformationList/index.vue b/src/views/ModelTailDetails/MTDrearWingInformationList/index.vue
index e72f447..7cef166 100644
--- a/src/views/ModelTailDetails/MTDrearWingInformationList/index.vue
+++ b/src/views/ModelTailDetails/MTDrearWingInformationList/index.vue
@@ -10,7 +10,7 @@
     <div class="rwl-outter">
         <v-label-div title="尾翼信息列表"></v-label-div>
         <div class="rwl-inner">
-            <a-form layout="inline" :form="form">
+            <!-- <a-form layout="inline" :form="form">
                 <a-form-item label="来源选择">
                     <a-select v-model="form.s1" style="width: 240px">
                         <a-select-option value="jack">
@@ -24,75 +24,116 @@
                         </a-select-option>
                     </a-select>
                 </a-form-item>
-            </a-form>
+                <a-form-item label="车型">
+                    <a-select v-model="form.sSeriesName" style="width: 240px" @change="handlerChangeModel">
+                        <a-select-option :value="item.name" v-for="(item,index) in models" :key="index">
+                            {{item.name}}
+                        </a-select-option>
+                    </a-select>
+                </a-form-item>
+            </a-form> -->
             <div class="rwl-tb">
-                <v-table :columns="columns" :data="tdata" :pagination="pagination"></v-table>
-            </div> 
+                <v-table :columns="columns" :loading="tableLoading" :data="tdata" :pagination="pagination" @change="handlerPage"></v-table>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
+import {getList0528} from '@/api/ModelTaildetails'
 export default {
     name: "MTDrearWingInformationList",
     data() {
         return {
+            load: false,
+            tableLoading: false,
             form: {
-                s1: "",
-                s2: "",
+                sSource: "",
+                token: "",
+                sBrand: "",
+                iPageIndex: 1,
+                iPageSize: 20,
+                sSeriesName: "",
             },
             pagination: {
-                "show-total": total => `共 ${total} 条`
+                current: 1,
+                pageSize: 20,
+                total: 0,
+                "show-total": (total) => `共 ${total} 条`,
             },
             columns: [
                 {
                     title: "新闻标题",
-                    key: "name",
-                    dataIndex: "name",
+                    key: "title",
+                    dataIndex: "title",
                 },
                 {
                     title: "来源",
-                    key: "a",
-                    dataIndex: "a",
-                    width: 120
+                    key: "source",
+                    dataIndex: "source",
+                    width: 120,
                 },
-                 {
+                {
                     title: "作者",
-                    key: "b",
-                    dataIndex: "b",
-                    width: 200
+                    key: "user_author",
+                    dataIndex: "user_author",
+                    width: 200,
                 },
-                 {
+                {
                     title: "发布时间",
-                    key: "c",
-                    dataIndex: "c",
-                    width: 180
+                    key: "sourcetime",
+                    dataIndex: "sourcetime",
+                    width: 180,
                 },
-                 {
+                {
                     title: "调性",
-                    key: "d",
-                    dataIndex: "d",
-                    width: 100
-                },
-                 {
-                    title: "车型",
-                    key: "e",
-                    dataIndex: "e",
-                    width: 100
+                    key: "affectionstr",
+                    dataIndex: "affectionstr",
+                    width: 100,
                 },
             ],
-            tdata: [
-                {
-                    name: '为了研究长城吉利谁更强，我们砸了台吉利，',
-                    a: '微博',
-                    b: '车二哥说车',
-                    c: '2021-08-18 12:00:00',
-                    d: '正面',
-                    e: 'A4'
-                }
-            ]
+            tdata: [],
         };
     },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || "奥迪";
+        this.form.sSeriesName = this.getModel.name;
+        this.getData();
+    },
+    methods: {
+        // 获取列表数据
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            this.tableLoading = true;
+            getList0528(obj).then((res) => {
+                let data = res.data || [];
+                let arr = [];
+                data.forEach((ele) => {
+                    let o = { ...ele._source };
+                    if (o.affections === 1) {
+                        o.affectionstr = "正面";
+                    } else if (o.affections === 2) {
+                        o.affectionstr = "负面";
+                    } else {
+                        o.affectionstr = "中性";
+                    }
+                    arr.push(o);
+                });
+                this.tdata = arr;
+                let totalNum = res.totalNum || 0;
+                this.pagination.total = totalNum;
+                this.tableLoading = false;
+            });
+        },
+        // 改变页面的数据
+        handlerPage(p) {
+            let iPageIndex = p.current;
+            this.form.iPageIndex = iPageIndex;
+            this.pagination.current = iPageIndex;
+            this.getData();
+        },
+    },
 };
 </script>
 
diff --git a/src/views/ModelTailDetails/MTDrearWingPropagationSituation/index.vue b/src/views/ModelTailDetails/MTDrearWingPropagationSituation/index.vue
index 5d857ae..7dfedfb 100644
--- a/src/views/ModelTailDetails/MTDrearWingPropagationSituation/index.vue
+++ b/src/views/ModelTailDetails/MTDrearWingPropagationSituation/index.vue
@@ -16,13 +16,45 @@
 </template>
 
 <script>
+import {getWeiYiVolumeTime} from '@/api/ModelTaildetails'
 import createOpt from "./opt"
 export default {
     name: "MTDrearWingPropagationSituation",
     data() {
         return {
-            opt: createOpt()
+            load: false,
+            opt: {},
+            form: {
+                sBrand: "",
+                sSeriesName: "",
+                token: "",
+            },
         }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.form.sSeriesName = this.getModel.name;
+        this.getDdta();
+    },
+    methods: {
+       getDdta(){
+             let obj = Object.assign({}, this.getCtime2, this.form);
+             this.load = true;
+            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);
+                this.load = false;
+            })
+        },
     }
 }
 </script>
diff --git a/src/views/ModelTailDetails/MTDrearWingPropagationSituation/opt.js b/src/views/ModelTailDetails/MTDrearWingPropagationSituation/opt.js
index 1cb89a9..19fe971 100644
--- a/src/views/ModelTailDetails/MTDrearWingPropagationSituation/opt.js
+++ b/src/views/ModelTailDetails/MTDrearWingPropagationSituation/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/ModelTailDetails/MTDtheOverallToneOfTheTail/index.vue b/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/index.vue
index d33446c..4b77638 100644
--- a/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/index.vue
+++ b/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/index.vue
@@ -16,16 +16,45 @@
 </template>
 
 <script>
+import {getAffections} from '@/api/ModelTaildetails'
 import createOpt from "./opt"
 export default {
     name: "MTDtheOverallToneOfTheTail",
     data() {
         return {
-            opt: createOpt()
+            load: false,
+            opt: {},
+            form: {
+                sBrand: "",
+                token: "",
+                sSeriesName: "",
+            },
         }
     },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.form.sSeriesName = this.getModel.name;
+        this.getDdta();
+    }, 
     methods: {
-       
+        getDdta(){
+             let obj = Object.assign({}, this.getCtime2, this.form);
+             this.load = true;
+            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)
+                }
+                this.opt = createOpt(arr);
+                this.load = false;
+            })
+        },
     }
 }
 </script>
diff --git a/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/opt.js b/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/opt.js
index 17aaefa..3e979c2 100644
--- a/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/opt.js
+++ b/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/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,
   
               }
           ]
diff --git a/src/views/ModelTailDetails/index.vue b/src/views/ModelTailDetails/index.vue
index 10c8d45..ddc2736 100644
--- a/src/views/ModelTailDetails/index.vue
+++ b/src/views/ModelTailDetails/index.vue
@@ -11,14 +11,15 @@
         <div class="tid-outter">
             <div class="tid-d1">
                 <v-label-div title="尾翼洞察详情">
-                    <v-btn @click="goback">返回洞察详情</v-btn>
+                    <v-btn @click="goback">返回车型洞察</v-btn>
                 </v-label-div>
                 <div class="tid-d1-bd">
                     <div class="d1">
-                        奥迪
+                        {{form.sBrand|doStr(4)}}
                     </div>
+                    <span class="ss1">{{form.sSeriesName|doStr(8)}}</span>
                     <div class="d2">
-                       洞察分析：共监测到尾翼信息5条,2021-06-15 10:00:00尾翼传播达到波峰值,共监测到1条信息.,尾翼信息主要分布在萝卜投研,微信等媒体平台，媒体尾翼分布占比为萝卜投研 60%,微信 40%.,网民对于该品牌主要关注"上市,全新,不错,亮点,搭载"等信息.,通过对行业大数据的聚合分析,可以发现网民热议TOP10车型分别为”奥迪h6,rav4荣放,博越"等.
+                       洞察分析：共{{msg}}
                     </div>
                 </div>
             </div>
@@ -39,6 +40,7 @@ import MTDmediaDistribution from "./MTDmediaDistribution"
 import MTDtheOverallToneOfTheTail from "./MTDtheOverallToneOfTheTail"
 import mtdPopularWordCloud from "./mtd-popular-word-cloud"
 import MTDrearWingInformationList from "./MTDrearWingInformationList"
+import {getWeiYiInsightAnalysis} from '@/api/ModelTaildetails'
 export default {
     name: "ModelTailDetails",
     components: {
@@ -48,7 +50,33 @@ export default {
         mtdPopularWordCloud, // 热门词云
         MTDrearWingInformationList // 尾翼信息列表
     },
+    data() {
+        return {
+            load: false,
+            msg: "",
+            form: {
+                sBrand: "",
+                token: "",
+                sSeriesName: "",
+            },
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sSeriesName = this.getModel.name;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.getDdta();
+    }, 
     methods: {
+        getDdta(){
+             let obj = Object.assign({}, this.getCtime2, this.form);
+             this.load = true;
+            getWeiYiInsightAnalysis(obj).then(res => {
+                let data = res.msg;
+                this.msg = data;
+                this.load = false;
+            })
+        },
         goback() {
             this.$router.go(-1);
         }
@@ -83,13 +111,20 @@ export default {
             font-size: 24px;
             color: #b2daf7;
         }
+        .ss1 {
+            display: block;
+            width: 110px;
+            font-size: 24px;
+            color: #b2daf7;
+            margin-left: 16px;
+        }
         .d2 {
           padding: 16px;
-          width: 1500px;
+          width: 1400px;
           height: 100%;
           font-size: 20px;
           color: #fff;
-          margin-left: 114px;
+          margin-left: 110px;
       }
     }
 }
diff --git a/src/views/ModelTailDetails/mtd-popular-word-cloud/index.vue b/src/views/ModelTailDetails/mtd-popular-word-cloud/index.vue
index d06e799..59a2ae7 100644
--- a/src/views/ModelTailDetails/mtd-popular-word-cloud/index.vue
+++ b/src/views/ModelTailDetails/mtd-popular-word-cloud/index.vue
@@ -8,21 +8,67 @@
 -->
 <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" ></v-echarts>
         </div>
     </div>
 </template>
 <script>
-import createOpt from "./opt"
+import {getPositive,getNegative} from '@/api/ModelTaildetails'
+import createWordCloud from "@/utils/gol/bubbleWord";
 export default {
     name: "mtdPopularWordCloud",
+    props: ["brand", "model"],
     data() {
         return {
-           opt: createOpt()
-        }
-    }
+            load: false,
+            type: 0,
+            form: {
+                sBrand: "",
+                sSeriesName: "",
+                token: "",
+            },
+            opt: {},
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sSeriesName = this.getModel.name;
+        this.form.sBrand = this.getBrand.brandname || "奥迪";
+        this.getData1();
+    },
+    methods: {
+        handlerChange(n) {
+            this.type = n;
+            if(n === 0) {
+                this.getData1(); 
+            } else {
+                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/ModelTailDetails/mtd-popular-word-cloud/opt.js b/src/views/ModelTailDetails/mtd-popular-word-cloud/opt.js
index 6d78372..b9a927f 100644
--- a/src/views/ModelTailDetails/mtd-popular-word-cloud/opt.js
+++ b/src/views/ModelTailDetails/mtd-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