From b33e69b42ccded484915f464b4cd044b1dcf0322 Mon Sep 17 00:00:00 2001
From: "lily.zhang" <daylily.zhang@akuhome.com>
Date: Wed, 20 Oct 2021 11:55:30 +0800
Subject: [PATCH] cxw-010203

---
 src/views/EventDEC/index.vue                  |  42 +++-
 src/views/EventDEC/kmdED/index.vue            |  53 ++++
 .../EventDEC/kmdED/v-ranking-kmd/index.vue    | 230 ++++++++++++++++++
 src/views/EventDEC/tailAnalysisED/index.vue   |   6 +-
 4 files changed, 316 insertions(+), 15 deletions(-)
 create mode 100644 src/views/EventDEC/kmdED/index.vue
 create mode 100644 src/views/EventDEC/kmdED/v-ranking-kmd/index.vue

diff --git a/src/views/EventDEC/index.vue b/src/views/EventDEC/index.vue
index 7449eb2..983326e 100644
--- a/src/views/EventDEC/index.vue
+++ b/src/views/EventDEC/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-19 15:57:11
- * @LastEditTime: 2021-10-20 11:27:53
+ * @LastEditTime: 2021-10-20 11:49:09
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/EventDEC/index.vue
@@ -26,7 +26,7 @@
                         <span class="s1">开始时间：</span>
                         <span class="s2">2021-08-01 00:59:18</span>
                     </div>
-                     <div class="d1">
+                    <div class="d1">
                         <img class="m1" src="../../assets/images/EventInsight/ic_yxl.png" />
                         <span class="s1">影响力指数：</span>
                         <span class="s2">38.89</span>
@@ -44,18 +44,26 @@
             <mediaInterpretationEc></mediaInterpretationEc>
             <mediaInterpretationED></mediaInterpretationED>
             <wbUserEDE></wbUserEDE>
-            <tailAnalysisED></tailAnalysisED>
+            <div class="edec-d2">
+                <v-label-div title="尾翼分析">
+                </v-label-div>
+                <tailAnalysisED></tailAnalysisED>
+                <div class="edec-dd1">
+                    <kmdED></kmdED>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 <script>
-import incidentSpreadSituation from "./incidentSpreadSituation"
-import tonalCommunicationPosture from "./tonalCommunicationPosture"
-import esprocess from "./esprocess"
-import mediaInterpretationEc from "./mediaInterpretationEc"
-import mediaInterpretationED from "./mediaInterpretationED"
-import wbUserEDE from "./wbUserEDE"
-import tailAnalysisED from "./tailAnalysisED"
+import incidentSpreadSituation from "./incidentSpreadSituation";
+import tonalCommunicationPosture from "./tonalCommunicationPosture";
+import esprocess from "./esprocess";
+import mediaInterpretationEc from "./mediaInterpretationEc";
+import mediaInterpretationED from "./mediaInterpretationED";
+import wbUserEDE from "./wbUserEDE";
+import tailAnalysisED from "./tailAnalysisED";
+import kmdED from "./kmdED"
 export default {
     name: "eventDEC",
     components: {
@@ -65,7 +73,8 @@ export default {
         mediaInterpretationEc, // 事件传播历程-媒体解读
         mediaInterpretationED, // 媒体解读
         wbUserEDE, // 微博用户画像
-        tailAnalysisED // 尾翼分析
+        tailAnalysisED, // 尾翼分析
+        kmdED
     },
     methods: {
         goback() {
@@ -147,4 +156,15 @@ export default {
         }
     }
 }
+.edec-d2 {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .edec-dd1 {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+    }
+}
 </style>
diff --git a/src/views/EventDEC/kmdED/index.vue b/src/views/EventDEC/kmdED/index.vue
new file mode 100644
index 0000000..f544fec
--- /dev/null
+++ b/src/views/EventDEC/kmdED/index.vue
@@ -0,0 +1,53 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-20 11:39:20
+ * @LastEditTime: 2021-10-20 11:50:26
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDEC/kmdED/index.vue
+-->
+<template>
+    <div class="kmd-outter">
+        <v-label-div title="重点媒体分布" :showLine="false" :eStyle="{'border-style': 'none'}">
+         </v-label-div>
+         <div class="kmd-inner">
+              <div class="d1" style="margin-left: 16px">
+                <v-ranking-kmd :num="1" label="辅助" val="594614" :lineShow="false" ></v-ranking-kmd>
+                <v-ranking-kmd :num="2" label="刹车" val="594614"></v-ranking-kmd>
+                <v-ranking-kmd :num="3" label="舒适度" val="594614"></v-ranking-kmd>
+                <v-ranking-kmd :num="4" label="操控" val="594614"></v-ranking-kmd>
+                <v-ranking-kmd  :num="5" label="油耗" val="594614"></v-ranking-kmd>
+            </div>
+            <div class="d2" style="margin-left: 16px">
+                <v-ranking-kmd :num="6" label="性价比" val="594614" :lineShow="false"></v-ranking-kmd>
+                <v-ranking-kmd :num="7" label="空间" val="594614"></v-ranking-kmd>
+                <v-ranking-kmd :num="8" label="动力" val="594614"></v-ranking-kmd>
+                <v-ranking-kmd :num="9" label="外观" val="594614"></v-ranking-kmd>
+                <v-ranking-kmd :num="10" label="内饰" val="594614"></v-ranking-kmd>
+            </div>
+         </div>
+    </div>
+</template>
+
+<script>
+import vRankingKmd from "./v-ranking-kmd"
+export default {
+    name: "kmdED",
+    components: {
+        vRankingKmd
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.kmd-outter {
+    width: 930px;
+    height: 412px;
+    .kmd-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+</style>
diff --git a/src/views/EventDEC/kmdED/v-ranking-kmd/index.vue b/src/views/EventDEC/kmdED/v-ranking-kmd/index.vue
new file mode 100644
index 0000000..c21b4d5
--- /dev/null
+++ b/src/views/EventDEC/kmdED/v-ranking-kmd/index.vue
@@ -0,0 +1,230 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-10-20 11:52:46
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-ranking/index.vue
+-->
+<template>
+  <div class="v-r-container">
+    <div class="v-r-line" v-if="lineShow"></div>
+    <div class="v-r-inner">
+      <div :class="ls">
+        <span class="s1">{{ num|numStr }}</span>
+      </div>
+      <div :class="rs">
+          <span class="v-r-label">{{label}}</span>
+          <div class="v-r-res">
+              <span class="s1">传播量</span>
+              <span class="s2">{{val}}</span>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "v-ranking-kmd",
+  props: {
+    num: {
+      type: [String, Number],
+      default: 1,
+    },
+    val: {
+        type: [String, Number],
+        default: 0
+    },
+    label: {
+        type: String,
+        default: ""
+    },
+    lineShow: {
+        type: Boolean,
+        default: true
+    },
+    
+  },
+  watch: {
+      num: {
+          handler(val) {
+              if(val == 1) {
+                  this.ls = "v-r-left-1"
+                  this.rs = "v-r-right-1"
+              } else if(val == 2) {
+                  this.ls = "v-r-left-2"
+                  this.rs = "v-r-right-2"
+              } else if(val == 3) {
+                  this.ls = "v-r-left-3"
+                  this.rs = "v-r-right-3"
+              } else {
+                  this.ls = "v-r-left"
+                  this.rs = "v-r-right"
+              }
+          },
+          immediate: true
+      }
+  },
+  data() {
+      return  {
+          ls: "v-r-left",
+          rs: "v-r-right"
+      }
+  },
+  filters: {
+        numStr(val) {
+            let str = ""
+            if(0<val && val<10) {
+                str = '0' + val
+            } else {
+                str = val + ''
+            }
+            return str
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.v-r-container {
+  width: 456px;
+  height: auto;
+  .v-r-line {
+    width: 100%;
+    height: 1px;
+    background:#0a1d3b;
+    margin-top: 13px;
+    margin-bottom: 13px;
+  }
+  .v-r-inner {
+    position: relative;
+    width: 100%;
+    height: 48px;
+    margin-top: 6px;
+    color: #fff;
+    background: #0a1d3b;
+    border-radius: 2px;
+  }
+  .v-r-label {
+      display: block;
+      font-size: 14px;
+      color: #FFFFFF;
+      margin-left: 40px;
+      font-weight: bold;
+  }
+  .v-r-res {
+      margin-right: 16px;
+      span {
+          display: block;
+          text-align: right;
+          font-size: 12px;
+      }
+      .s1 {
+          color: #9ba4af;
+      }
+      .s2 {
+          color: #fff;
+          font-family: Bebas;
+      }
+  }
+  .v-r-left {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 48px;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right {
+      position: absolute;
+      width: 430px;
+      height: 48px;
+      border-top: 2px solid transparent;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-1 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #cc9d12;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #cc9d12;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-1 {
+      position: absolute;
+      width: 430px;
+      height: 48px;
+      border-top: 2px solid #CC9D12;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-2 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #3373CC;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #3373CC;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-2 {
+      position: absolute;
+      width: 430px;
+      height: 48px;
+      border-top: 2px solid #3373CC;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-3 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #54BF93;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #54BF93;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-3 {
+      position: absolute;
+      width: 430px;
+      height: 48px;
+      border-top: 2px solid #54BF93;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+}
+</style>
diff --git a/src/views/EventDEC/tailAnalysisED/index.vue b/src/views/EventDEC/tailAnalysisED/index.vue
index be109c8..52441e3 100644
--- a/src/views/EventDEC/tailAnalysisED/index.vue
+++ b/src/views/EventDEC/tailAnalysisED/index.vue
@@ -1,15 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-20 11:19:00
- * @LastEditTime: 2021-10-20 11:27:14
+ * @LastEditTime: 2021-10-20 11:37:13
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/EventDEC/tailAnalysisED/index.vue
 -->
 <template>
     <div class="taed-outter">
-        <v-label-div title="尾翼分析">
-        </v-label-div>
         <div class="taed-inner">
             <v-label-div title="传播态势" :showLine="false" :eStyle="{'border-style': 'none'}">
             </v-label-div>
@@ -35,7 +33,7 @@ export default {
 <style lang="less" scoped>
 .taed-outter {
     width: 100%;
-    height: 460px;
+    height: 412px;
     .taed-inner {
         width: 100%;
         height: calc(100% - 48px);