From 93358ca604626a400408d776c1fa01791e21284c Mon Sep 17 00:00:00 2001
From: "lily.zhang" <daylily.zhang@akuhome.com>
Date: Mon, 8 Nov 2021 13:38:57 +0800
Subject: [PATCH] cxw-010203

---
 .../ModelTailDetails/MTDHeader/index.vue      |  74 ------
 .../MTDmediaDistribution/index.vue            |  70 ++++++
 .../MTDmediaDistribution/opt.js               | 157 +++++++++++++
 .../MTDrearWingInformationList/index.vue      | 113 +++++++++
 .../MTDrearWingPropagationSituation/index.vue |  40 ++++
 .../opt.js                                    |  30 +--
 src/views/ModelTailDetails/MTDrwps/index.vue  |  41 ----
 .../MTDtheOverallToneOfTheTail/index.vue      |  70 ++++++
 .../MTDtheOverallToneOfTheTail/opt.js         | 129 +++++++++++
 src/views/ModelTailDetails/index.vue          |  94 ++++++--
 .../mtd-popular-word-cloud/index.vue          |  40 ++++
 .../mtd-popular-word-cloud/opt.js             | 215 ++++++++++++++++++
 12 files changed, 920 insertions(+), 153 deletions(-)
 delete mode 100644 src/views/ModelTailDetails/MTDHeader/index.vue
 create mode 100644 src/views/ModelTailDetails/MTDmediaDistribution/index.vue
 create mode 100644 src/views/ModelTailDetails/MTDmediaDistribution/opt.js
 create mode 100644 src/views/ModelTailDetails/MTDrearWingInformationList/index.vue
 create mode 100644 src/views/ModelTailDetails/MTDrearWingPropagationSituation/index.vue
 rename src/views/ModelTailDetails/{MTDrwps => MTDrearWingPropagationSituation}/opt.js (70%)
 delete mode 100644 src/views/ModelTailDetails/MTDrwps/index.vue
 create mode 100644 src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/index.vue
 create mode 100644 src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/opt.js
 create mode 100644 src/views/ModelTailDetails/mtd-popular-word-cloud/index.vue
 create mode 100644 src/views/ModelTailDetails/mtd-popular-word-cloud/opt.js

diff --git a/src/views/ModelTailDetails/MTDHeader/index.vue b/src/views/ModelTailDetails/MTDHeader/index.vue
deleted file mode 100644
index b3a655d..0000000
--- a/src/views/ModelTailDetails/MTDHeader/index.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<!--
- * @Author: your name
- * @Date: 2021-11-08 10:10:57
- * @LastEditTime: 2021-11-08 10:28:09
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/ModelTailDetails/MTDHeader/index.vue
--->
-<template>
-    <div class="mtdH-outter">
-        <v-label-div title="尾翼洞察详情">
-            <v-btn @click="goback">返回车型洞察</v-btn>
-        </v-label-div>
-        <div class="mtdH-inner">
-            <div class="mtdH-d1">
-                奥迪
-            </div>
-            <span class="mtdH-s1">奥迪A8</span>
-            <span class="mtdH-s2">洞察分析：共监测到尾翼信息5条,2021-06-15 10:00:00尾翼传播达到波峰值,共监测到1条信息.,尾翼信息主要分布在萝卜投研,微信等媒体平台，媒体尾翼分布占比为萝卜投研 60%,微信 40%.,网民对于该品牌主要关注"上市,全新,不错,亮点,搭载"等信息.,通过对行业大数据的聚合分析,可以发现网民热议TOP10车型分别为”奥迪h6,rav4荣放,博越"等.</span>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "MTDHeader",
-    methods: {
-        goback() {
-            this.$router.go(-1)
-        }
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.mtdH-outter {
-    width: 100%;
-    height: 222px;
-    border: 2px solid #0F2A4D;
-    .mtdH-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        .mtdH-d1 {
-            width: 150px;
-            height: 150px;
-            background-image: url("../../../assets/images/BrandInsight/img_lq.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-            margin-left: 16px;
-            text-align: center;
-            line-height: 150px;
-            color: #b2daf7;
-            font-size: 24px;
-            font-weight: 500;
-        }
-        .mtdH-s1 {
-            display: block;
-            color: #b2daf7;
-            font-size: 24px;
-            margin-left: 16px;
-        }
-        .mtdH-s2 {
-            display: block;
-            color: #a9adb2;
-            font-size: 20px;
-            width: 1478px;
-            margin-left: 133px;
-        }
-    }
-}
-</style>
diff --git a/src/views/ModelTailDetails/MTDmediaDistribution/index.vue b/src/views/ModelTailDetails/MTDmediaDistribution/index.vue
new file mode 100644
index 0000000..2091be9
--- /dev/null
+++ b/src/views/ModelTailDetails/MTDmediaDistribution/index.vue
@@ -0,0 +1,70 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-13 16:54:12
+ * @LastEditTime: 2021-11-08 13:31:01
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/TailInsightDetails/mediaDistribution/index.vue
+-->
+<template>
+    <div class="md-outter">
+        <v-label-div title="媒体分布"></v-label-div>
+        <div class="md-inner">
+            <v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt";
+export default {
+    name: "MTDmediaDistribution",
+    data() {
+        return {
+            opt: createOpt(),
+        };
+    },
+    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,
+                });
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.md-outter {
+    width: 460px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-left: 16px;
+    .md-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelTailDetails/MTDmediaDistribution/opt.js b/src/views/ModelTailDetails/MTDmediaDistribution/opt.js
new file mode 100644
index 0000000..4ac3941
--- /dev/null
+++ b/src/views/ModelTailDetails/MTDmediaDistribution/opt.js
@@ -0,0 +1,157 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 14:33:51
+ * @LastEditTime: 2021-10-13 17:24:58
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
+ */
+import * as echarts from "echarts";
+export default function createOpt() {
+    return {
+        legend: {
+            y: 10,
+            x: 10,
+            icon: 'roundRect',
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            data: ["新闻","论坛","微信","微博","其他"]
+          },
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['55%', '68%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  color: "#ffff",
+                  formatter: (p)=>{
+                    return p.data.name + '\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'
+                 }])} },
+              ],
+
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['70%', '74%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  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'
+                 }])} },
+                ],
+  
+              }
+          ]
+    }
+}
diff --git a/src/views/ModelTailDetails/MTDrearWingInformationList/index.vue b/src/views/ModelTailDetails/MTDrearWingInformationList/index.vue
new file mode 100644
index 0000000..e72f447
--- /dev/null
+++ b/src/views/ModelTailDetails/MTDrearWingInformationList/index.vue
@@ -0,0 +1,113 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-13 18:14:01
+ * @LastEditTime: 2021-11-08 13:37:26
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/TailInsightDetails/rearWingInformationList/index.vue
+-->
+<template>
+    <div class="rwl-outter">
+        <v-label-div title="尾翼信息列表"></v-label-div>
+        <div class="rwl-inner">
+            <a-form layout="inline" :form="form">
+                <a-form-item label="来源选择">
+                    <a-select v-model="form.s1" style="width: 240px">
+                        <a-select-option value="jack">
+                            Jack
+                        </a-select-option>
+                        <a-select-option value="lucy">
+                            Lucy
+                        </a-select-option>
+                        <a-select-option value="Yiminghe">
+                            yiminghe
+                        </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> 
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "MTDrearWingInformationList",
+    data() {
+        return {
+            form: {
+                s1: "",
+                s2: "",
+            },
+            pagination: {
+                "show-total": total => `共 ${total} 条`
+            },
+            columns: [
+                {
+                    title: "新闻标题",
+                    key: "name",
+                    dataIndex: "name",
+                },
+                {
+                    title: "来源",
+                    key: "a",
+                    dataIndex: "a",
+                    width: 120
+                },
+                 {
+                    title: "作者",
+                    key: "b",
+                    dataIndex: "b",
+                    width: 200
+                },
+                 {
+                    title: "发布时间",
+                    key: "c",
+                    dataIndex: "c",
+                    width: 180
+                },
+                 {
+                    title: "调性",
+                    key: "d",
+                    dataIndex: "d",
+                    width: 100
+                },
+                 {
+                    title: "车型",
+                    key: "e",
+                    dataIndex: "e",
+                    width: 100
+                },
+            ],
+            tdata: [
+                {
+                    name: '为了研究长城吉利谁更强，我们砸了台吉利，',
+                    a: '微博',
+                    b: '车二哥说车',
+                    c: '2021-08-18 12:00:00',
+                    d: '正面',
+                    e: 'A4'
+                }
+            ]
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.rwl-outter {
+    width: 100%;
+    height: 632px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .rwl-inner {
+        padding: 16px;
+        height: calc(100% - 48px);
+    }
+}
+.rwl-tb {
+    margin-top: 16px;
+}
+</style>
diff --git a/src/views/ModelTailDetails/MTDrearWingPropagationSituation/index.vue b/src/views/ModelTailDetails/MTDrearWingPropagationSituation/index.vue
new file mode 100644
index 0000000..5d857ae
--- /dev/null
+++ b/src/views/ModelTailDetails/MTDrearWingPropagationSituation/index.vue
@@ -0,0 +1,40 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-13 16:45:48
+ * @LastEditTime: 2021-11-08 13:34:59
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/TailInsightDetails/rearWingPropagationSituation/index.vue
+-->
+<template>
+    <div class="rwps-outter">
+      <v-label-div title="尾翼传播态势"></v-label-div>
+      <div class="rwps-inner">
+          <v-echarts :opt="opt"></v-echarts> 
+      </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "MTDrearWingPropagationSituation",
+    data() {
+        return {
+            opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.rwps-outter {
+    width: 460px;
+    height: 460px;
+    border: 2px solid #0F2A4D;
+    .rwps-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ModelTailDetails/MTDrwps/opt.js b/src/views/ModelTailDetails/MTDrearWingPropagationSituation/opt.js
similarity index 70%
rename from src/views/ModelTailDetails/MTDrwps/opt.js
rename to src/views/ModelTailDetails/MTDrearWingPropagationSituation/opt.js
index 92dbaff..1cb89a9 100644
--- a/src/views/ModelTailDetails/MTDrwps/opt.js
+++ b/src/views/ModelTailDetails/MTDrearWingPropagationSituation/opt.js
@@ -1,21 +1,13 @@
 /*
  * @Author: your name
- * @Date: 2021-11-08 10:40:13
- * @LastEditTime: 2021-11-08 10:41:15
+ * @Date: 2021-10-12 15:32:24
+ * @LastEditTime: 2021-10-13 15:54:53
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/ModelTailDetails/MTDrwps/opt.js
- */
-/*
- * @Author: your name
- * @Date: 2021-10-12 16:40:53
- * @LastEditTime: 2021-11-01 16:06:05
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/opt.js
+ * @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt(dx=[], ds=[]) {
+export default function createOpt() {
     return {
         grid: {
             top: "16px",
@@ -46,13 +38,7 @@ export default function createOpt(dx=[], ds=[]) {
                     color: "#fff",
                 },
             },
-            axisLabel : {
-                formatter: (value) => {
-                    let str = value.substring(10,16)
-                    return str;
-                }
-            },
-            data: dx
+            data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
         },
         yAxis: {
             type: 'value',
@@ -71,13 +57,13 @@ export default function createOpt(dx=[], ds=[]) {
         },
         series: [
             {
-                data: ds,
+                data: [820, 932, 901, 934, 1290, 1330, 1320],
                 type: 'line',
-                color: "#2d68ba",
+                color: '#546fc5',
                 areaStyle: {normal: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                             offset: 0,
-                            color: '#2d68ba'
+                            color: '#546fc5'
                         }, {
                             offset: 1,
                             color: 'rgba(0,0,0,0)'
diff --git a/src/views/ModelTailDetails/MTDrwps/index.vue b/src/views/ModelTailDetails/MTDrwps/index.vue
deleted file mode 100644
index 59c3bb7..0000000
--- a/src/views/ModelTailDetails/MTDrwps/index.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<!--
- * @Author: your name
- * @Date: 2021-11-08 10:32:26
- * @LastEditTime: 2021-11-08 10:55:01
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/ModelTailDetails/MTDrwps/index.vue
--->
-<template>
-    <div class="mtdr-outter">
-       <v-label-div title="尾翼传播态势">
-        </v-label-div> 
-        <div class="mtdr-inner">
-            <v-echarts :opt="opt"></v-echarts>
-        </div>
-    </div>
-</template>
-
-<script>
-import createOpt from "./opt"
-export default {
-    name: "MTDrwps",
-    data() {
-        return {
-            opt: createOpt(['a','b', 'c', 'd','e'], [1000,2000,2400,1600,2600, 2800])
-        }
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.mtdr-outter {
-    width: 460px;
-    height: 460px;
-    border: 2px solid #0F2A4D;
-    .mtdr-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
-}
-</style>
diff --git a/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/index.vue b/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/index.vue
new file mode 100644
index 0000000..7141f78
--- /dev/null
+++ b/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/index.vue
@@ -0,0 +1,70 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-13 17:42:57
+ * @LastEditTime: 2021-11-08 13:36:24
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/TailInsightDetails/theOverallToneOfTheTail/index.vue
+-->
+<template>
+    <div class="tot-outter">
+        <v-label-div title="尾翼整体调性"></v-label-div>
+        <div class="tot-inner">
+            <v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "MTDtheOverallToneOfTheTail",
+    data() {
+        return {
+            opt: createOpt()
+        }
+    },
+    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,
+                });
+            });
+        },
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.tot-outter {
+    width: 460px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-left: 16px;
+    .tot-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/opt.js b/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/opt.js
new file mode 100644
index 0000000..17aaefa
--- /dev/null
+++ b/src/views/ModelTailDetails/MTDtheOverallToneOfTheTail/opt.js
@@ -0,0 +1,129 @@
+/*
+ * @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
+ * @LastEditTime: 2021-10-13 17:24:58
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
+ */
+import * as echarts from "echarts";
+export default function createOpt() {
+    return {
+        legend: {
+            y: 10,
+            x: 10,
+            icon: 'roundRect',
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            data: ["正面","中性","负面"]
+          },
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['55%', '68%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  color: "#ffff",
+                  formatter: (p)=>{
+                    return p.data.name + '\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'
+                 }])} },
+              ],
+
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['70%', '74%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  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'
+                 }])} }
+                ],
+  
+              }
+          ]
+    }
+}
diff --git a/src/views/ModelTailDetails/index.vue b/src/views/ModelTailDetails/index.vue
index c56556a..10c8d45 100644
--- a/src/views/ModelTailDetails/index.vue
+++ b/src/views/ModelTailDetails/index.vue
@@ -1,41 +1,103 @@
 <!--
  * @Author: your name
- * @Date: 2021-11-08 10:02:04
- * @LastEditTime: 2021-11-08 10:53:12
+ * @Date: 2021-10-13 16:16:41
+ * @LastEditTime: 2021-11-08 13:36:36
  * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/ModelTailDetails/index.vue
+ * @Description: 尾翼洞察详情
+ * @FilePath: /data-show/src/views/TailInsightDetails/index.vue
 -->
 <template>
     <div class="d-container">
-        <div class="mtd-outter">
-            <MTDHeader></MTDHeader>
-            <div class="mtd-d1">
-                <MTDrwps></MTDrwps>
+        <div class="tid-outter">
+            <div class="tid-d1">
+                <v-label-div title="尾翼洞察详情">
+                    <v-btn @click="goback">返回洞察详情</v-btn>
+                </v-label-div>
+                <div class="tid-d1-bd">
+                    <div class="d1">
+                        奥迪
+                    </div>
+                    <div class="d2">
+                       洞察分析：共监测到尾翼信息5条,2021-06-15 10:00:00尾翼传播达到波峰值,共监测到1条信息.,尾翼信息主要分布在萝卜投研,微信等媒体平台，媒体尾翼分布占比为萝卜投研 60%,微信 40%.,网民对于该品牌主要关注"上市,全新,不错,亮点,搭载"等信息.,通过对行业大数据的聚合分析,可以发现网民热议TOP10车型分别为”奥迪h6,rav4荣放,博越"等.
+                    </div>
+                </div>
             </div>
+            <div class="tid-d2">
+                <MTDrearWingPropagationSituation></MTDrearWingPropagationSituation>
+                <MTDmediaDistribution></MTDmediaDistribution>
+                <MTDtheOverallToneOfTheTail></MTDtheOverallToneOfTheTail>
+                <mtdPopularWordCloud></mtdPopularWordCloud>
+            </div>
+            <MTDrearWingInformationList></MTDrearWingInformationList>
         </div>
     </div>
 </template>
 
 <script>
-import MTDHeader from "./MTDHeader"
-import MTDrwps from "./MTDrwps"
+import MTDrearWingPropagationSituation from "./MTDrearWingPropagationSituation"
+import MTDmediaDistribution from "./MTDmediaDistribution"
+import MTDtheOverallToneOfTheTail from "./MTDtheOverallToneOfTheTail"
+import mtdPopularWordCloud from "./mtd-popular-word-cloud"
+import MTDrearWingInformationList from "./MTDrearWingInformationList"
 export default {
     name: "ModelTailDetails",
     components: {
-        MTDHeader, // 车型尾翼洞察详情
-        MTDrwps, // 尾翼传播态势
+        MTDrearWingPropagationSituation, // 尾翼传播态势
+        MTDmediaDistribution, // 媒体分布
+        MTDtheOverallToneOfTheTail, // 尾翼整体调性
+        mtdPopularWordCloud, // 热门词云
+        MTDrearWingInformationList // 尾翼信息列表
+    },
+    methods: {
+        goback() {
+            this.$router.go(-1);
+        }
     }
-}
+};
 </script>
 
 <style lang="less" scoped>
-.mtd-outter {
+.tid-outter {
     padding: 0px 16px 16px 16px;
 }
-.mtd-d1 {
-    margin-top: 16px;
+.tid-d1 {
+    width: 100%;
+    height: 222px;
+    border: 2px solid #0f2a4d;
+    .tid-d1-bd {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .d1 {
+            width: 150px;
+            height: 150px;
+            border-radius: 150px;
+            background-image: url("../../assets/images/BrandInsight/img_lq.png");
+            background-repeat: no-repeat;
+            background-size: cover;
+            margin-left: 114px;
+            text-align: center;
+            line-height: 150px;
+            font-size: 24px;
+            color: #b2daf7;
+        }
+        .d2 {
+          padding: 16px;
+          width: 1500px;
+          height: 100%;
+          font-size: 20px;
+          color: #fff;
+          margin-left: 114px;
+      }
+    }
+}
+.tid-d2 {
+    width: 100%;
+    height: auto;
     display: flex;
     justify-content: flex-start;
+    margin-top: 16px;
 }
 </style>
diff --git a/src/views/ModelTailDetails/mtd-popular-word-cloud/index.vue b/src/views/ModelTailDetails/mtd-popular-word-cloud/index.vue
new file mode 100644
index 0000000..709d257
--- /dev/null
+++ b/src/views/ModelTailDetails/mtd-popular-word-cloud/index.vue
@@ -0,0 +1,40 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-13 17:54:56
+ * @LastEditTime: 2021-11-08 13:32:37
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/TailInsightDetails/popular-word-cloud/index.vue
+-->
+<template>
+    <div class="pwc-outter">
+        <v-label-div title="热门词云"></v-label-div>
+        <div class="pwc-inner">
+            <v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
+        </div>
+    </div>
+</template>
+<script>
+import createOpt from "./opt"
+export default {
+    name: "mtdPopularWordCloud",
+    data() {
+        return {
+           opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.pwc-outter {
+    width: 460px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-left: 16px;
+    .pwc-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelTailDetails/mtd-popular-word-cloud/opt.js b/src/views/ModelTailDetails/mtd-popular-word-cloud/opt.js
new file mode 100644
index 0000000..6d78372
--- /dev/null
+++ b/src/views/ModelTailDetails/mtd-popular-word-cloud/opt.js
@@ -0,0 +1,215 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 13:35:13
+ * @LastEditTime: 2021-10-12 19:22:21
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.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() {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "16px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: { 
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            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>`
+            }
+        },
+        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]
+            },
+            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]
+            },
+            label: {
+                show: true,
+                color: "#FFF", 
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        }
+        ]
+    }
+}