From d429dbc2ab261f0b1a160e93156a2589a7eb2749 Mon Sep 17 00:00:00 2001
From: "lily.zhang" <daylily.zhang@akuhome.com>
Date: Mon, 8 Nov 2021 11:19:07 +0800
Subject: [PATCH] cxw-010203

---
 src/components/v-cutscene-waiting/index.vue   | 30 +++++++
 src/mixins/index.js                           | 10 ++-
 src/router/index.js                           |  9 +-
 .../BrandComparison/BrandBeginComparte.vue    | 34 +++++--
 src/views/BrandComparison/BrandComparison.vue |  5 +-
 .../brandCompateHeader/index.vue              |  7 +-
 src/views/Index/tailInsight/opt.js            |  4 +-
 src/views/ModelInsight/index.vue              |  9 +-
 .../ModelTailDetails/MTDHeader/index.vue      | 74 +++++++++++++++
 src/views/ModelTailDetails/MTDrwps/index.vue  | 41 +++++++++
 src/views/ModelTailDetails/MTDrwps/opt.js     | 89 +++++++++++++++++++
 src/views/ModelTailDetails/index.vue          | 41 +++++++++
 12 files changed, 333 insertions(+), 20 deletions(-)
 create mode 100644 src/components/v-cutscene-waiting/index.vue
 create mode 100644 src/views/ModelTailDetails/MTDHeader/index.vue
 create mode 100644 src/views/ModelTailDetails/MTDrwps/index.vue
 create mode 100644 src/views/ModelTailDetails/MTDrwps/opt.js
 create mode 100644 src/views/ModelTailDetails/index.vue

diff --git a/src/components/v-cutscene-waiting/index.vue b/src/components/v-cutscene-waiting/index.vue
new file mode 100644
index 0000000..535914c
--- /dev/null
+++ b/src/components/v-cutscene-waiting/index.vue
@@ -0,0 +1,30 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-08 09:46:59
+ * @LastEditTime: 2021-11-08 09:51:57
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-cutscene-waiting/index.vue
+-->
+<template>
+    <div class="cw-outter">
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: "v-cutscene-waiting"
+}
+</script>
+
+<style lang="less" scoped>
+.cw-outter {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    left: 0px;
+    top: 0px;
+    background: rgba(0,11, 26, 0.7);
+}
+</style>
\ No newline at end of file
diff --git a/src/mixins/index.js b/src/mixins/index.js
index 8dcefbe..8e934c3 100644
--- a/src/mixins/index.js
+++ b/src/mixins/index.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:56:13
- * @LastEditTime: 2021-11-05 14:07:28
+ * @LastEditTime: 2021-11-08 11:17:30
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/mixins/index.js
@@ -9,6 +9,7 @@
 import { mapGetters, mapActions } from "vuex";
 import Loading from './loading'
 function detectZoom (){ 
+    console.log(2222)
     let ratio = 0,
       screen = window.screen,
       ua = navigator.userAgent.toLowerCase();
@@ -16,7 +17,7 @@ function detectZoom (){
      if (window.devicePixelRatio !== undefined) {
         ratio = window.devicePixelRatio;
     }
-    else if (~ua.indexOf('msie')) {  
+    else if (ua.indexOf('msie')) {  
       if (screen.deviceXDPI && screen.logicalXDPI) {
         ratio = screen.deviceXDPI / screen.logicalXDPI;
       }
@@ -34,10 +35,11 @@ function detectZoom (){
   function adaptive(el,z) {
     const style = document.defaultView.getComputedStyle(el); // 获取元素
     const wh = document.body.clientHeight;
+    console.log(2222)
     let h = style.height;
-    if(wh >= 760) {
+    if(wh >= 760 && wh < 930) {
         el.style.height = z * parseFloat(h) + 'px';
-    } 
+    }
     // if( h !== style.height) {
     //     el.style.height = z * parseFloat(height) + 'px';
     //     h = style.height; 
diff --git a/src/router/index.js b/src/router/index.js
index d1b129c..fc1fcf1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 09:26:29
- * @LastEditTime: 2021-11-05 13:51:34
+ * @LastEditTime: 2021-11-08 10:03:10
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/router/index.js
@@ -32,6 +32,7 @@ import EventDEC from "@/views/EventDEC"
 import MarketingAnalysis from "@/views/MarketingAnalysis"
 import ModelInsight from "@/views/ModelInsight"
 import mcIndex from "@/views/MarketingComparison"
+import ModelTailDetails from "@/views/ModelTailDetails"
 const router = [
     {
         path: '/login',
@@ -128,6 +129,12 @@ const router = [
                 desc: "车型洞察",
                 component: ModelInsight
             },
+            {
+                path: '/modelTailDetails',
+                name: "modelTailDetails",
+                desc: "车型尾翼详情",
+                component: ModelTailDetails
+            },
             {
                 path: '/mcIndex',
                 name: "mcIndex",
diff --git a/src/views/BrandComparison/BrandBeginComparte.vue b/src/views/BrandComparison/BrandBeginComparte.vue
index 9e56ca6..a1fb410 100644
--- a/src/views/BrandComparison/BrandBeginComparte.vue
+++ b/src/views/BrandComparison/BrandBeginComparte.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-05 13:56:24
- * @LastEditTime: 2021-11-05 19:19:15
+ * @LastEditTime: 2021-11-08 09:35:56
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
@@ -9,13 +9,13 @@
 <template>
     <div class="d-container">
         <div class="bbc-inner">
-            <brandCompateHeader ref="brandRef"></brandCompateHeader>
+            <brandCompateHeader ref="brandRef" @del="handlerDel"></brandCompateHeader>
              <div class="mbc-inner">
                 <v-label-div title="品牌推荐">
                 </v-label-div>
                 <div class="mbc-dd">
                     <ul class="mb-ul">
-                        <li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in brands" :key="index" @click="handlerBrand(item)">{{item.seriesname}}</li>
+                        <li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in brands" :key="index" @click="handlerBrand(item)">{{item.brandname}}</li>
                     </ul>
                     <div style="clear: both"></div>
                 </div>
@@ -28,6 +28,7 @@
 </template>
 
 <script>
+import {getRecommendSeries} from "@/api/comm"
 import brandCompateHeader from "./brandCompateHeader"
 export default {
     name: "BrandBeginComparte",
@@ -45,19 +46,38 @@ export default {
             ],
         }
     },
+    created() {
+        this.form.token = this.getToken;
+        this.getData();
+    },
     methods: {
+        // 获取推荐品牌
+        getData() {
+            let obj = Object.assign({}, this.form);
+            getRecommendSeries(obj).then(res => {
+                let data = res.data || [];
+                this.brands = data;
+            })
+        },
         // 选择默认的车型
         handlerBrand(row) {
             for(let i = 0; i < this.chooseArr.length; i++) {
-                if(!this.chooseArr[i]) {
+                let n = this.chooseArr.findIndex(ele =>{
+                    return ele && ele.brandname === row.brandname
+                })
+              
+                if(!this.chooseArr[i] && n === -1) {
                     this.chooseArr[i] = row;
-                    let obj = this.$refs.modelRef.list[i]
-                    obj.brand = row.brandname;
-                    obj.model = row.seriesname;
+                    let obj = this.$refs.brandRef.brands[i]
+                    obj.name = row.brandname;
                     obj.isDel = true;
                     return;
                 }
             }    
+        },
+         // 删除
+        handlerDel(n) {
+            this.chooseArr[n] = null;
         },
         // 开始对比
         handlerSubmit() {
diff --git a/src/views/BrandComparison/BrandComparison.vue b/src/views/BrandComparison/BrandComparison.vue
index 28cdce6..c5d34e9 100644
--- a/src/views/BrandComparison/BrandComparison.vue
+++ b/src/views/BrandComparison/BrandComparison.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-05 13:49:05
- * @LastEditTime: 2021-11-05 19:22:57
+ * @LastEditTime: 2021-11-08 09:40:06
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue
@@ -130,6 +130,9 @@ export default {
             
         };	
     },
+    beforeMount() {
+        console.log('请等待')
+    },
     methods: {
         handlerChangeBrand(arr) {
             this.setBComparison(arr);
diff --git a/src/views/BrandComparison/brandCompateHeader/index.vue b/src/views/BrandComparison/brandCompateHeader/index.vue
index 13fe100..52e869e 100644
--- a/src/views/BrandComparison/brandCompateHeader/index.vue
+++ b/src/views/BrandComparison/brandCompateHeader/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-05 13:18:12
- * @LastEditTime: 2021-11-05 19:09:36
+ * @LastEditTime: 2021-11-08 09:27:13
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/brandCompateHeader/index.vue
@@ -15,8 +15,8 @@
             <template v-for="(item,index) in brands">
                 <div class="bc-d1-item" :key="index">
                     <div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
-                        <span class="s1">{{item.name}}</span>
-                        <span class="s2">{{item.name}}</span>
+                        <span class="s1">{{item.name|doStr(4)}}</span>
+                        <span class="s2">{{item.name|doStr(10)}}</span>
                         <span class="s3" @click="handlerDel(index)" v-if="item.isDel">删除</span>
                         <span class="s3" @click="openBrand(index)" v-else>切换品牌</span>
                     </div>
@@ -114,6 +114,7 @@ export default {
             let filterArr = this.brands.filter((ele) => {
                  return ele.name;
             });
+            this.$emit('del', n)
             this.$emit('change', filterArr)
         }
     }
diff --git a/src/views/Index/tailInsight/opt.js b/src/views/Index/tailInsight/opt.js
index 5a51cf5..f947373 100644
--- a/src/views/Index/tailInsight/opt.js
+++ b/src/views/Index/tailInsight/opt.js
@@ -3,7 +3,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 12:38:34
- * @LastEditTime: 2021-10-29 15:56:07
+ * @LastEditTime: 2021-11-08 10:59:48
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/tailInsight/opt.js
@@ -67,7 +67,7 @@ export default function createOpt(dy=[],ds=[]) {
         series: [
             {
                 type: 'bar',
-                barWidth: 24,
+                barWidth: 20,
                 data: ds,
                 itemStyle: {
                     normal: {
diff --git a/src/views/ModelInsight/index.vue b/src/views/ModelInsight/index.vue
index e4d1100..720d807 100644
--- a/src/views/ModelInsight/index.vue
+++ b/src/views/ModelInsight/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-25 13:12:20
- * @LastEditTime: 2021-11-01 17:53:34
+ * @LastEditTime: 2021-11-08 10:07:06
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/ModelInsight/index.vue
@@ -51,7 +51,7 @@
             </div>
             <div class="bdl-d5">
                 <v-label-div title="尾翼洞察">
-                    <v-btn @click="goRouter('/tailInsightDetails')">尾翼详情</v-btn>
+                    <v-btn @click="goRouter('/modelTailDetails')">尾翼详情</v-btn>
                 </v-label-div>
                 <div class="bdl-d5-bd">
                     <mlRearWingPropagationSituation :brand="brand" :model="model"></mlRearWingPropagationSituation>
@@ -134,11 +134,16 @@ export default {
                 this.model = data[0].name;
             });
         },
+        // 获取选择品牌和车型的回掉
         handlerBrand(arr) {
             this.setBrand(arr[0]);
             this.setModel(arr[1]);
             this.reload();
         },
+        // 跳转到详情
+        goRouter(path) {
+            this.$router.push({path: path})
+        }
     },
 };
 </script>
diff --git a/src/views/ModelTailDetails/MTDHeader/index.vue b/src/views/ModelTailDetails/MTDHeader/index.vue
new file mode 100644
index 0000000..b3a655d
--- /dev/null
+++ b/src/views/ModelTailDetails/MTDHeader/index.vue
@@ -0,0 +1,74 @@
+<!--
+ * @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/MTDrwps/index.vue b/src/views/ModelTailDetails/MTDrwps/index.vue
new file mode 100644
index 0000000..59c3bb7
--- /dev/null
+++ b/src/views/ModelTailDetails/MTDrwps/index.vue
@@ -0,0 +1,41 @@
+<!--
+ * @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/MTDrwps/opt.js b/src/views/ModelTailDetails/MTDrwps/opt.js
new file mode 100644
index 0000000..92dbaff
--- /dev/null
+++ b/src/views/ModelTailDetails/MTDrwps/opt.js
@@ -0,0 +1,89 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-08 10:40:13
+ * @LastEditTime: 2021-11-08 10:41:15
+ * @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
+ */
+import * as echarts from "echarts";
+export default function createOpt(dx=[], ds=[]) {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "16px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            axisLabel : {
+                formatter: (value) => {
+                    let str = value.substring(10,16)
+                    return str;
+                }
+            },
+            data: dx
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#FFF",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                data: ds,
+                type: 'line',
+                color: "#2d68ba",
+                areaStyle: {normal: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0,
+                            color: '#2d68ba'
+                        }, {
+                            offset: 1,
+                            color: 'rgba(0,0,0,0)'
+                        }]),
+                }}
+            }
+        ]
+    };
+}
diff --git a/src/views/ModelTailDetails/index.vue b/src/views/ModelTailDetails/index.vue
new file mode 100644
index 0000000..c56556a
--- /dev/null
+++ b/src/views/ModelTailDetails/index.vue
@@ -0,0 +1,41 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-08 10:02:04
+ * @LastEditTime: 2021-11-08 10:53:12
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/ModelTailDetails/index.vue
+-->
+<template>
+    <div class="d-container">
+        <div class="mtd-outter">
+            <MTDHeader></MTDHeader>
+            <div class="mtd-d1">
+                <MTDrwps></MTDrwps>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import MTDHeader from "./MTDHeader"
+import MTDrwps from "./MTDrwps"
+export default {
+    name: "ModelTailDetails",
+    components: {
+        MTDHeader, // 车型尾翼洞察详情
+        MTDrwps, // 尾翼传播态势
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.mtd-outter {
+    padding: 0px 16px 16px 16px;
+}
+.mtd-d1 {
+    margin-top: 16px;
+    display: flex;
+    justify-content: flex-start;
+}
+</style>