From b5d7154bea560a892044f8d3b460d0121e141359 Mon Sep 17 00:00:00 2001
From: zx <604444282@qq.com>
Date: Mon, 13 Dec 2021 17:44:26 +0800
Subject: [PATCH] =?UTF-8?q?zx-=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/EventDEC/esprocess/index.vue        |   4 +-
 src/views/EventDEC/esprocessStoken/index.vue  | 163 +++++++++++++++++
 .../incidentSpreadSituation/index.vue         |   3 +-
 .../incidentSpreadSituationStoken/index.vue   |  58 +++++++
 src/views/EventDEC/index.vue                  |  49 +++++-
 src/views/EventDEC/kmdED/index.vue            |   2 +
 src/views/EventDEC/kmdEDStoken/index.vue      |  39 +++++
 .../EventDEC/mediaInterpretationED/index.vue  |   2 +
 .../mediaInterpretationEDStoken/index.vue     | 164 ++++++++++++++++++
 .../EventDEC/mediaInterpretationEc/index.vue  |   2 +
 .../mediaInterpretationEcStoken/index.vue     |  53 ++++++
 src/views/EventDEC/pnwcWordStoken/index.vue   |  38 ++++
 src/views/EventDEC/tailAnalysisED/index.vue   |   2 +-
 .../EventDEC/tailAnalysisEDStoken/index.vue   |  59 +++++++
 .../tonalCommunicationPosture/index.vue       |   3 +-
 .../tonalCommunicationPostureStoken/index.vue |  57 ++++++
 src/views/EventDEC/wbUserEDE/index.vue        |   6 +-
 src/views/EventDEC/wbUserEDEStoken/index.vue  |  83 +++++++++
 src/views/Index/spreadTheSound/index.vue      |  20 ++-
 src/views/WeiboDetails/index.vue              |  57 ++++++
 .../modelPopularityStoken/index.vue           |  39 +++++
 .../negativeOpinionKOLStoken/index.vue        |  94 ++++++++++
 .../positiveViewKOLStoken/index.vue           |  93 ++++++++++
 .../weiboCharactersStoken/index.vue           |  73 ++++++++
 .../weiboCommunicationTrendStoken/index.vue   |  38 ++++
 .../weiboContentTOPVolumeStoken/index.vue     |  66 +++++++
 .../weiboContentTypeStoken/index.vue          |  50 ++++++
 .../weiboSpreadFissionStoken/index.vue        |  50 ++++++
 .../weiboTonalDistributionStoken/index.vue    |  51 ++++++
 .../weiboUserActiveAreaStoken/index.vue       |  49 ++++++
 .../weiboWordCloudStoken/index.vue            |  39 +++++
 31 files changed, 1497 insertions(+), 9 deletions(-)
 create mode 100644 src/views/EventDEC/esprocessStoken/index.vue
 create mode 100644 src/views/EventDEC/incidentSpreadSituationStoken/index.vue
 create mode 100644 src/views/EventDEC/kmdEDStoken/index.vue
 create mode 100644 src/views/EventDEC/mediaInterpretationEDStoken/index.vue
 create mode 100644 src/views/EventDEC/mediaInterpretationEcStoken/index.vue
 create mode 100644 src/views/EventDEC/pnwcWordStoken/index.vue
 create mode 100644 src/views/EventDEC/tailAnalysisEDStoken/index.vue
 create mode 100644 src/views/EventDEC/tonalCommunicationPostureStoken/index.vue
 create mode 100644 src/views/EventDEC/wbUserEDEStoken/index.vue
 create mode 100644 src/views/WeiboDetails/modelPopularityStoken/index.vue
 create mode 100644 src/views/WeiboDetails/negativeOpinionKOLStoken/index.vue
 create mode 100644 src/views/WeiboDetails/positiveViewKOLStoken/index.vue
 create mode 100644 src/views/WeiboDetails/weiboCharactersStoken/index.vue
 create mode 100644 src/views/WeiboDetails/weiboCommunicationTrendStoken/index.vue
 create mode 100644 src/views/WeiboDetails/weiboContentTOPVolumeStoken/index.vue
 create mode 100644 src/views/WeiboDetails/weiboContentTypeStoken/index.vue
 create mode 100644 src/views/WeiboDetails/weiboSpreadFissionStoken/index.vue
 create mode 100644 src/views/WeiboDetails/weiboTonalDistributionStoken/index.vue
 create mode 100644 src/views/WeiboDetails/weiboUserActiveAreaStoken/index.vue
 create mode 100644 src/views/WeiboDetails/weiboWordCloudStoken/index.vue

diff --git a/src/views/EventDEC/esprocess/index.vue b/src/views/EventDEC/esprocess/index.vue
index ae7d5a2..b72239b 100644
--- a/src/views/EventDEC/esprocess/index.vue
+++ b/src/views/EventDEC/esprocess/index.vue
@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/EventDEC/esprocess/index.vue
 -->
 <template>
-    <div class="esp-outter">
+    <div class="esp-outter" v-loading="load">
         <v-label-div title="事件传播历程">
         </v-label-div>
         <div class="coe-ts">
@@ -49,6 +49,7 @@ export default {
     },
     data() {
         return {
+            load: false,
             form: {
                 sRele: "",
                 token: "",
@@ -69,6 +70,7 @@ export default {
         getDdta() {
             let obj = Object.assign({}, this.form);
             getEventSpreadProcess0528(obj).then((res) => {
+                this.load = true;
                 let data = res.data || [];
                 this.list = data;
                 this.load = false;
diff --git a/src/views/EventDEC/esprocessStoken/index.vue b/src/views/EventDEC/esprocessStoken/index.vue
new file mode 100644
index 0000000..3abe61b
--- /dev/null
+++ b/src/views/EventDEC/esprocessStoken/index.vue
@@ -0,0 +1,163 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-19 19:45:01
+ * @LastEditTime: 2021-11-17 11:02:04
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDEC/esprocess/index.vue
+-->
+<template>
+    <div class="esp-outter">
+        <v-label-div title="事件传播历程">
+        </v-label-div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "esprocess",
+    props: {
+        id: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            form: {
+                sRele: "",
+                token: "",
+                sTimeType: "",
+            },
+            list: [],
+            x: 0,
+            m1: require("../../../assets/images/EventInsight/img_ct.png"),
+            m2: require("../../../assets/images/EventInsight/img_lt.png"),
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.esp-outter {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    overflow: hidden;
+    .coe-ts {
+        position: relative;
+        width: 100%;
+        padding: 0px 16px;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .coe-ts-s1 {
+            position: absolute;
+            color: #fff;
+            top: 16px;
+            left: 16px;
+            font-size: 16px;
+            color: #3373cc;
+        }
+        .coe-ts-d2 {
+            width: 1726px;
+            height: 400px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            position: relative;
+            .dd1-label {
+                .d1x {
+                    width: 120px;
+                    height: 120px;
+                    background-image: url("../../../assets/images/EventInsight/img_xlvq.png");
+                    background-repeat: no-repeat;
+                    background-size: cover;
+                    font-size: 14px;
+                    color: #b0deff;
+                    text-align: center;
+                    line-height: 120px;
+                }
+                .d1 {
+                    width: 120px;
+                    height: 120px;
+                    background-image: url("../../../assets/images/EventInsight/img_xlq.png");
+                    background-repeat: no-repeat;
+                    background-size: cover;
+                    font-size: 14px;
+                    color: #b0deff;
+                    text-align: center;
+                    line-height: 120px;
+                }
+                .d2 {
+                    font-size: 16px;
+                    color: #fff;
+                    text-align: center;
+                }
+                .d3 {
+                    font-size: 14px;
+                    font-family: Bebas;
+                    color: #616974;
+                    text-align: center;
+                }
+            }
+            .dd1-fen {
+                position: absolute;
+                width: 100%;
+                height: 2px;
+                background: #004877;
+                left: 0px;
+                top: 136px;
+            }
+            .dd1-item {
+                position: relative;
+                width: 260px;
+                height: 320px;
+                display: flex;
+                flex-shrink: 0;
+                padding-left: 84px;
+                justify-content: flex-start;
+                .m1 {
+                    height: 148px;
+                }
+                .dt-d1 {
+                    margin-left: 18px;
+                    .d1 {
+                        width: 120px;
+                        padding-top: 16px;
+                        height: 88px;
+                        font-size: 16px;
+                         cursor: pointer;
+                    }
+                    .d2 {
+                        font-size: 14px;
+                        color: #fff;
+                    }
+                    .d3 {
+                        font-size: 13px;
+                        font-family: Bebas;
+                        color: #616974;
+                    }
+                }
+            }
+        }
+        .coe-ts-d1 {
+            width: 32px;
+            height: 100%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            img {
+                cursor: pointer;
+            }
+        }
+    }
+}
+/deep/ .__view {
+    display: flex !important;
+    justify-content: flex-start !important;
+    align-items: center !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/EventDEC/incidentSpreadSituation/index.vue b/src/views/EventDEC/incidentSpreadSituation/index.vue
index b742b93..de5f354 100644
--- a/src/views/EventDEC/incidentSpreadSituation/index.vue
+++ b/src/views/EventDEC/incidentSpreadSituation/index.vue
@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/EventDEC/incidentSpreadSituation/index.vue
 -->
 <template>
-    <div class="iss-outter">
+    <div class="iss-outter" v-loading="load">
         <v-label-div title="事件传播态势">
             <a-select v-model="form.sTimeType" :size="$vuiSize" style="width: 7rem; margin-left: 2.2rem; margin-right: 0.5rem" @change="handleChange">
                 <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
@@ -35,6 +35,7 @@ export default {
     data() {
         return {
             opt: {},
+            load: false,
             selDatas: [
                 {
                     key: 34,
diff --git a/src/views/EventDEC/incidentSpreadSituationStoken/index.vue b/src/views/EventDEC/incidentSpreadSituationStoken/index.vue
new file mode 100644
index 0000000..38851eb
--- /dev/null
+++ b/src/views/EventDEC/incidentSpreadSituationStoken/index.vue
@@ -0,0 +1,58 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-19 19:05:36
+ * @LastEditTime: 2021-11-22 10:04:53
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDEC/incidentSpreadSituation/index.vue
+-->
+<template>
+    <div class="iss-outter">
+    </div>
+</template>
+
+<script>
+export default {
+    name: "incidentSpreadSituation",
+    props: {
+        id: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            opt: {},
+            selDatas: [
+                {
+                    key: 34,
+                    value: "小时",
+                },
+                {
+                    key: 20,
+                    value: "天",
+                },
+            ],
+            form: {
+                token: "",
+                sRele: "",
+                sTimeType: 20,
+            },
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.iss-outter {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    overflow: hidden;
+    .iss-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/EventDEC/index.vue b/src/views/EventDEC/index.vue
index d1dbddb..be943d1 100644
--- a/src/views/EventDEC/index.vue
+++ b/src/views/EventDEC/index.vue
@@ -40,19 +40,46 @@
                     </div>
                 </div>
             </div>
+            <vue-lazy-component>
             <incidentSpreadSituation :id="events_id"></incidentSpreadSituation>
+            <incidentSpreadSituationStoken slot="skeleton"></incidentSpreadSituationStoken>
+            </vue-lazy-component>
+            <vue-lazy-component>
             <tonalCommunicationPosture :id="events_id"></tonalCommunicationPosture>
+            <tonalCommunicationPostureStoken slot="skeleton"></tonalCommunicationPostureStoken>
+            </vue-lazy-component>
+            <vue-lazy-component>
             <esprocess :id="events_id"></esprocess>
+            <esprocessStoken slot="skeleton"></esprocessStoken>
+            </vue-lazy-component>
+            <vue-lazy-component>
             <mediaInterpretationEc :id="events_id"></mediaInterpretationEc>
+            <mediaInterpretationEcStoken slot="skeleton"></mediaInterpretationEcStoken>
+            </vue-lazy-component>
+            <vue-lazy-component>
             <mediaInterpretationED :id="events_id"></mediaInterpretationED>
+            <mediaInterpretationEDStoken slot="skeleton"></mediaInterpretationEDStoken>
+            </vue-lazy-component>
+            <vue-lazy-component>
             <wbUserEDE :id="events_id"></wbUserEDE>
+            <wbUserEDEStoken slot="skeleton"></wbUserEDEStoken>
+            </vue-lazy-component>
             <div class="edec-d2">
                 <v-label-div title="尾翼分析">
                 </v-label-div>
+                <vue-lazy-component>
                 <tailAnalysisED :id="events_id"></tailAnalysisED>
+                <tailAnalysisEDStoken slot="skeleton"></tailAnalysisEDStoken>
+                </vue-lazy-component>
                 <div class="edec-dd1">
+                    <vue-lazy-component>
                     <kmdED :id="events_id"></kmdED>
+                    <kmdEDStoken slot="skeleton"></kmdEDStoken>
+                    </vue-lazy-component>
+                    <vue-lazy-component>
                     <pnwcWord :id="events_id"></pnwcWord>
+                    <pnwcWordStoken slot="skeleton"></pnwcWordStoken>
+                    </vue-lazy-component>
                 </div>
             </div>
         </div>
@@ -68,6 +95,16 @@ import wbUserEDE from "./wbUserEDE";
 import tailAnalysisED from "./tailAnalysisED";
 import kmdED from "./kmdED"
 import pnwcWord from "./pnwcWord"
+//骨架屏
+import incidentSpreadSituationStoken from "./incidentSpreadSituationStoken";
+import tonalCommunicationPostureStoken from "./tonalCommunicationPostureStoken";
+import esprocessStoken from "./esprocessStoken";
+import mediaInterpretationEcStoken from "./mediaInterpretationEcStoken";
+import mediaInterpretationEDStoken from "./mediaInterpretationEDStoken";
+import wbUserEDEStoken from "./wbUserEDEStoken";
+import tailAnalysisEDStoken from "./tailAnalysisEDStoken";
+import kmdEDStoken from "./kmdEDStoken"
+import pnwcWordStoken from "./pnwcWordStoken"
 import {getEventData} from '@/api/EventdEC'
 import { getToPptTask } from "@/api/BrandInsight";
 export default {
@@ -81,7 +118,17 @@ export default {
         wbUserEDE, // 微博用户画像
         tailAnalysisED, // 尾翼分析
         kmdED, // 重点媒体分布
-        pnwcWord // 正负词云
+        pnwcWord, // 正负词云
+        //骨架屏
+        incidentSpreadSituationStoken, // 事件传播态势
+        tonalCommunicationPostureStoken, // 调性传播态势
+        esprocessStoken, // 事件传播历程
+        mediaInterpretationEcStoken, // 事件传播历程-媒体解读
+        mediaInterpretationEDStoken, // 媒体解读
+        wbUserEDEStoken, // 微博用户画像
+        tailAnalysisEDStoken, // 尾翼分析
+        kmdEDStoken, // 重点媒体分布
+        pnwcWordStoken // 正负词云
     },
     data() {
         return {
diff --git a/src/views/EventDEC/kmdED/index.vue b/src/views/EventDEC/kmdED/index.vue
index 1dbf79b..51588ff 100644
--- a/src/views/EventDEC/kmdED/index.vue
+++ b/src/views/EventDEC/kmdED/index.vue
@@ -64,6 +64,7 @@ export default {
         getData() {
             let obj = Object.assign({}, this.form);
             getWebsite(obj).then((res) => {
+                this.load = true;
                 let data = res.data;
                 let vals = [];
                 for (let key in data) {
@@ -73,6 +74,7 @@ export default {
                 let groupedArray = this.group(vals, 5);
                 this.d1 = groupedArray[0];
                 this.d2 = groupedArray[1];
+                this.load = false;
             });
         },
     },
diff --git a/src/views/EventDEC/kmdEDStoken/index.vue b/src/views/EventDEC/kmdEDStoken/index.vue
new file mode 100644
index 0000000..e281203
--- /dev/null
+++ b/src/views/EventDEC/kmdEDStoken/index.vue
@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-20 11:39:20
+ * @LastEditTime: 2021-11-17 14:15:29
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDEC/kmdED/index.vue
+-->
+<template>
+    <div class="kmd-outter">
+    </div>
+</template>
+
+<script>
+export default {
+    name: "kmdED",
+    data() {
+        return {
+            form: {
+                token: "",
+                sRele: "",
+            },
+        };
+    },
+};
+</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/mediaInterpretationED/index.vue b/src/views/EventDEC/mediaInterpretationED/index.vue
index a77db38..a6c39bf 100644
--- a/src/views/EventDEC/mediaInterpretationED/index.vue
+++ b/src/views/EventDEC/mediaInterpretationED/index.vue
@@ -114,6 +114,7 @@ export default {
         getData() {
             let obj = Object.assign({}, this.form);
             getDiffuseZhuTi(obj).then((res) => {
+                this.load = true;
                 let data = res.data;
                 console.log(data)
                 this.countObj.sum = data.sum;
@@ -145,6 +146,7 @@ export default {
                 });
                 let o = { nodes, edges };
                 this.opt = createOpt(o);
+                this.load = false;
             });
         },
     },
diff --git a/src/views/EventDEC/mediaInterpretationEDStoken/index.vue b/src/views/EventDEC/mediaInterpretationEDStoken/index.vue
new file mode 100644
index 0000000..92ef84d
--- /dev/null
+++ b/src/views/EventDEC/mediaInterpretationEDStoken/index.vue
@@ -0,0 +1,164 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-20 09:39:28
+ * @LastEditTime: 2021-11-17 16:20:52
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDEC/mediaInterpretationED/index.vue
+-->
+<template>
+    <div class="med-outter">
+    </div>
+</template>
+
+<script>
+export default {
+    name: "mediaInterpretationED",
+    props: {
+        id: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            opt: {},
+            total: 0,
+            sum: 0,
+            volume: 0,
+            form: {
+                token: "",
+                sRele: "",
+            },
+            colors: [
+                "#FFB600",
+                "#886CFF",
+                "#0084FF",
+                "#4CB690",
+                "#58B458",
+                "#6C6C6C",
+                "#F56161",
+                "#FC754C",
+                "#5F5EEC",
+            ],
+            list: [],
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.med-outter {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    overflow: hidden;
+    .med-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .d1 {
+            width: 944px;
+            height: 100%;
+            .d1-inner {
+                width: 100%;
+                height: calc(100% - 48px);
+                margin-left: 16px;
+                display: flex;
+                justify-content: flex-start;
+                flex-wrap: wrap;
+                .pv-item {
+                    width: 285px;
+                    height: 64px;
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    position: relative;
+                    margin-right: 24px;
+                    margin-top: 12px;
+                    .dm {
+                        position: absolute;
+                        width: 68px;
+                        height: 68px;
+                        border-radius: 68px;
+                        border: 1px solid #ccc;
+                        left: 0px;
+                        top: 0px;
+                        background-color: #fff;
+                        z-index: 10;
+                        .mm1 {
+                            width: 100%;
+                            height: 100%;
+                            border-radius: 74px;
+                        }
+                    }
+                    .d-f {
+                        position: absolute;
+                        width: 249px;
+                        height: 64px;
+                        left: 36px;
+                        padding-left: 65px;
+                        background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
+                        .d1 {
+                            font-size: 14px;
+                            color: #fff;
+                            font-weight: 500;
+                            margin-top: 10px;
+                            height: 20px;
+                        }
+                        .d2 {
+                            color: #70869a;
+                            font-size: 12px;
+                            .d2-s1 {
+                                font-size: 12px;
+                                font-family: Bebas;
+                                color: #f49847;
+                            }
+                        }
+                    }
+                }
+            }
+            .dd1 {
+                width: 100%;
+                height: calc(100% - 48px);
+                display: flex;
+                justify-content: flex-start;
+                .dd1-left {
+                    width: 680px;
+                    height: 100%;
+                }
+                .dd1-right {
+                    .d-r-item {
+                        width: 264px;
+                        height: 109px;
+                        display: flex;
+                        justify-content: flex-start;
+                        align-items: center;
+                        .m1 {
+                            width: 72px;
+                            height: 72px;
+                        }
+                        .d1 {
+                            margin-left: 12px;
+                            margin-top: 54px;
+                            .ss1 {
+                                display: block;
+                                font-size: 16px;
+                                color: #93989e;
+                            }
+                            .ss2 {
+                                display: block;
+                                font-size: 20px;
+                                font-family: Bebas;
+                                color: #ffffff;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/EventDEC/mediaInterpretationEc/index.vue b/src/views/EventDEC/mediaInterpretationEc/index.vue
index d228dd4..87117ea 100644
--- a/src/views/EventDEC/mediaInterpretationEc/index.vue
+++ b/src/views/EventDEC/mediaInterpretationEc/index.vue
@@ -92,6 +92,7 @@ export default {
         getSource() {
             let obj = Object.assign({}, this.form);
             getSource(obj).then((res) => {
+                this.load = true;
                 let data = res.data || [];
                 let arr = [];
                 data.forEach((ele) => {
@@ -107,6 +108,7 @@ export default {
                     header: ["标题", "媒体报道数量"],
                     data: arr,
                 };
+                this.load = false;
             });
         },
     },
diff --git a/src/views/EventDEC/mediaInterpretationEcStoken/index.vue b/src/views/EventDEC/mediaInterpretationEcStoken/index.vue
new file mode 100644
index 0000000..2193118
--- /dev/null
+++ b/src/views/EventDEC/mediaInterpretationEcStoken/index.vue
@@ -0,0 +1,53 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-19 20:00:49
+ * @LastEditTime: 2021-11-22 10:53:32
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDEC/mediaInterpretationEc/index.vue
+-->
+<template>
+    <div class="mec-outter">
+    </div>
+</template>
+
+<script>
+export default {
+    name: "mediaInterpretationEc",
+    data() {
+        return {
+            opt: {},
+            type: 0,
+            form: {
+                token: "",
+                sRele: "",
+            },
+            count: 0,
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.mec-outter {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    overflow: hidden;
+    .mec-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .dd1 {
+            width: 944px;
+            height: 100%;
+            .dd1-draw {
+                width: 100%;
+                height: calc(100% - 48px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/EventDEC/pnwcWordStoken/index.vue b/src/views/EventDEC/pnwcWordStoken/index.vue
new file mode 100644
index 0000000..077b076
--- /dev/null
+++ b/src/views/EventDEC/pnwcWordStoken/index.vue
@@ -0,0 +1,38 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-20 11:56:12
+ * @LastEditTime: 2021-11-19 15:28:36
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDEC/pnwcWord/index.vue
+-->
+<template>
+    <div class="pw-outter">
+    </div>
+</template>
+
+<script>
+export default {
+    name: "pnwcWord",
+    data() {
+        return {
+            form: {
+                token: "",
+                sRele: "",
+            },
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.pw-outter {
+    width: 920px;
+    height: 412px;
+    margin-left: 16px;
+    .pw-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/EventDEC/tailAnalysisED/index.vue b/src/views/EventDEC/tailAnalysisED/index.vue
index 0310ae3..9604e77 100644
--- a/src/views/EventDEC/tailAnalysisED/index.vue
+++ b/src/views/EventDEC/tailAnalysisED/index.vue
@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/EventDEC/tailAnalysisED/index.vue
 -->
 <template>
-    <div class="taed-outter">
+    <div class="taed-outter" v-loading="load">
         <div class="taed-inner">
             <v-label-div title="传播态势" :showLine="false" :eStyle="{'border-style': 'none'}">
                 <a-select v-model="form.sTimeType" :size="$vuiSize" style="width: 7rem; margin-left: 2.2rem; margin-right: 0.5rem" @change="handleChange">
diff --git a/src/views/EventDEC/tailAnalysisEDStoken/index.vue b/src/views/EventDEC/tailAnalysisEDStoken/index.vue
new file mode 100644
index 0000000..51acc0d
--- /dev/null
+++ b/src/views/EventDEC/tailAnalysisEDStoken/index.vue
@@ -0,0 +1,59 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-20 11:19:00
+ * @LastEditTime: 2021-11-22 10:09:34
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDEC/tailAnalysisED/index.vue
+-->
+<template>
+    <div class="taed-outter">
+    </div>
+</template>
+
+<script>
+export default {
+    name: "tailAnalysisED",
+    props: {
+        id: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            opt: {},
+            selDatas: [
+                {
+                    key: 34,
+                    value: "小时",
+                },
+                {
+                    key: 20,
+                    value: "天",
+                },
+            ],
+            form: {
+                token: "",
+                sRele: "",
+                sTimeType: 20,
+            },
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.taed-outter {
+    width: 100%;
+    height: 412px;
+    .taed-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        .taed-d1 {
+            width: 100%;
+            height: calc(100% - 48px);
+        }
+    }
+}
+</style>
diff --git a/src/views/EventDEC/tonalCommunicationPosture/index.vue b/src/views/EventDEC/tonalCommunicationPosture/index.vue
index 222c58b..6d555ac 100644
--- a/src/views/EventDEC/tonalCommunicationPosture/index.vue
+++ b/src/views/EventDEC/tonalCommunicationPosture/index.vue
@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/EventDEC/tonalCommunicationPosture/index.vue
 -->
 <template>
-    <div class="tcp-outter">
+    <div class="tcp-outter" v-loading="load">
         <v-label-div title="调性传播态势">
             <a-select v-model="form.sTimeType" :size="$vuiSize" style="width: 7rem; margin-left: 2.2rem; margin-right: 0.5rem" @change="handleChange">
                 <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
@@ -35,6 +35,7 @@ export default {
     data() {
         return {
             opt: {},
+            load: false,
             selDatas: [
                 {
                     key: 34,
diff --git a/src/views/EventDEC/tonalCommunicationPostureStoken/index.vue b/src/views/EventDEC/tonalCommunicationPostureStoken/index.vue
new file mode 100644
index 0000000..b190402
--- /dev/null
+++ b/src/views/EventDEC/tonalCommunicationPostureStoken/index.vue
@@ -0,0 +1,57 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-19 19:35:25
+ * @LastEditTime: 2021-11-22 10:13:01
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDEC/tonalCommunicationPosture/index.vue
+-->
+<template>
+    <div class="tcp-outter">
+    </div>
+</template>
+
+<script>
+export default {
+    name: "tonalCommunicationPosture",
+    props: {
+                id: {
+                    type: String,
+                    default: "",
+                },
+            },
+    data() {
+        return {
+            opt: {},
+            selDatas: [
+                {
+                    key: 34,
+                    value: '小时'
+                },
+                {
+                    key: 20,
+                    value: '天'
+                }
+            ],
+            form: {
+                token: "",
+                sRele: "",
+                sTimeType: 20,
+            },
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.tcp-outter {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .tcp-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/EventDEC/wbUserEDE/index.vue b/src/views/EventDEC/wbUserEDE/index.vue
index 4860e8f..95a15c0 100644
--- a/src/views/EventDEC/wbUserEDE/index.vue
+++ b/src/views/EventDEC/wbUserEDE/index.vue
@@ -17,14 +17,14 @@
                     <v-echarts :opt="opt1"></v-echarts>
                 </div>
                 <div class="dd2">
-                    <vue-scroll v-if="lArr.length<=3">
+                    <div v-if="lArr.length<=3">
                         <v-label-ctx v-for="(item,index) in lArr" 
                         :key="index" :label="item.key" 
                         :cont="item.value" 
                         :percentage="(item.value/tot*100).toFixed(2)+'%'" 
                         :color="colors[index]" :eStyle="{ height: '8.6rem' }">
                         </v-label-ctx>
-                    </vue-scroll>
+                    </div>
                     <vue-scroll v-if="lArr.length>3">
                         <v-label-ctx v-for="(item,index) in lArr" 
                         :key="index" :label="item.key" 
@@ -117,6 +117,7 @@ export default {
         getDdta() {
             let obj = Object.assign({}, this.form);
             getAffections(obj).then((res) => {
+                this.load = true;
                 let data = res.data || {};
                 let arr = [];
                 let total = 0;
@@ -131,6 +132,7 @@ export default {
                 this.labelArr = arr;
                 this.total = total;
                 this.opt = createOpt(arr, this.colors);
+                this.load = false;
             });
         },
         getSexMergeWeiBo() {
diff --git a/src/views/EventDEC/wbUserEDEStoken/index.vue b/src/views/EventDEC/wbUserEDEStoken/index.vue
new file mode 100644
index 0000000..66b4a3b
--- /dev/null
+++ b/src/views/EventDEC/wbUserEDEStoken/index.vue
@@ -0,0 +1,83 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-20 10:56:06
+ * @LastEditTime: 2021-11-17 13:34:01
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDEC/wbUserEDE/index.vue
+-->
+<template>
+    <div class="wue-outter">
+    </div>
+</template>
+
+<script>
+export default {
+    name: "wbUserEDE",
+    props: {
+        id: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            form: {
+                token: "",
+                sRele: "",
+            },
+            colors: [
+                "#3373CC",
+                "#54BF93",
+                "#CC9D12",
+                "#f15c80",
+                "#e4d354",
+                "#8085e8",
+                "#8d4653",
+                "#91e8e1",
+                "#f7a35c",
+                "#90ed7d",
+                "#54BF93",
+                "#3373CC",
+                "#CC9D12",
+                "#f15c80",
+                "#e4d354",
+                "#8085e8",
+                "#8d4653",
+                "#91e8e1",
+                "#f7a35c",
+                "#90ed7d",
+            ],
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.wue-outter {
+    width: 100%;
+    height: 460px;
+    margin-top: 16px;
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+        width: 936px;
+        height: 100%;
+        border: 2px solid #0f2a4d;
+        .d1-inner {
+            width: 100%;
+            height: calc(100% - 48px);
+            display: flex;
+            justify-content: flex-start;
+            .dd1 {
+                width: 430px;
+                height: 100%;
+            }
+            .dd2 {
+                width: 460px;
+                height: 100%;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/Index/spreadTheSound/index.vue b/src/views/Index/spreadTheSound/index.vue
index 3880744..b7ab422 100644
--- a/src/views/Index/spreadTheSound/index.vue
+++ b/src/views/Index/spreadTheSound/index.vue
@@ -86,21 +86,37 @@ export default {
                 this.ModalText = "您还未登录，是否前往登录"
                 return;
             }
+            // if (this.getUser.Brand.indexOf(data[0].axisValueLabel) == -1) {
+            //     this.visible = true;
+            //     this.ModalText = "账号权限不足";
+            //     return;
+            // }
             let ele = data[0];
             if(this.type === 1) {
                 let model = ele.axisValueLabel
-                this.setModel({name: model});
-                this.setHeaderType(3);
+                
                 let obj = {
                     token: this.getToken,
                     sSeriesName: model
                 }
                 getBrandName(obj).then((res) => {
+                    if(this.getUser.Brand.indexOf(res.data) == -1) {
+                        this.visible = true;
+                        this.ModalText = "账号权限不足";
+                        return;
+                    }
+                    this.setModel({name: model});
+                    this.setHeaderType(3);
                     this.setBrand({brandname: res.data})
                     this.$router.push("/modelInsight");
                 })
             } else {
                 let brand = ele.axisValueLabel;
+                if(this.getUser.Brand.indexOf(brand) == -1) {
+                    this.visible = true;
+                    this.ModalText = "账号权限不足";
+                    return;
+                }
                 this.getUserSeriesName(brand); //同步车型
                 this.setBrand({brandname: brand});
                 this.setHeaderType(3);
diff --git a/src/views/WeiboDetails/index.vue b/src/views/WeiboDetails/index.vue
index 89cab81..8560d5a 100644
--- a/src/views/WeiboDetails/index.vue
+++ b/src/views/WeiboDetails/index.vue
@@ -86,23 +86,56 @@
         </div>
       </div>
       <div class="wd-d2">
+        <vue-lazy-component>
         <weibo-communication-trend></weibo-communication-trend>
+        <weiboCommunicationTrendStoken slot="skeleton"></weiboCommunicationTrendStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <weiboContentType></weiboContentType>
+        <weiboContentTypeStoken slot="skeleton"></weiboContentTypeStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <weiboCharacters></weiboCharacters>
+        <weiboCharactersStoken slot="skeleton"></weiboCharactersStoken>
+        </vue-lazy-component>
       </div>
       <div class="wd-d3">
+        <vue-lazy-component>
         <weiboUserActiveArea></weiboUserActiveArea>
+        <weiboUserActiveAreaStoken slot="skeleton"></weiboUserActiveAreaStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <weiboContentTOPVolume></weiboContentTOPVolume>
+        <weiboContentTOPVolumeStoken slot="skeleton"></weiboContentTOPVolumeStoken>
+        </vue-lazy-component>
       </div>
       <div class="wd-d4">
+        <vue-lazy-component>
         <modelPopularity></modelPopularity>
+        <modelPopularityStoken slot="skeleton"></modelPopularityStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <weiboWordCloud></weiboWordCloud>
+        <weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <weiboSpreadFission></weiboSpreadFission>
+        <weiboSpreadFissionStoken slot="skeleton"></weiboSpreadFissionStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <weiboTonalDistribution></weiboTonalDistribution>
+        <weiboTonalDistributionStoken slot="skeleton"></weiboTonalDistributionStoken>
+        </vue-lazy-component>
       </div>
       <div class="wd-d5">
+        <vue-lazy-component>
         <positiveViewKOL></positiveViewKOL>
+        <positiveViewKOLStoken slot="skeleton"></positiveViewKOLStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <negativeOpinionKOL></negativeOpinionKOL>
+        <negativeOpinionKOLStoken slot="skeleton"></negativeOpinionKOLStoken>
+        </vue-lazy-component>
       </div>
     </div>
   </div>
@@ -120,6 +153,18 @@ import weiboSpreadFission from "./weiboSpreadFission";
 import weiboTonalDistribution from "./weiboTonalDistribution";
 import positiveViewKOL from "./positiveViewKOL";
 import negativeOpinionKOL from "./negativeOpinionKOL";
+//骨架屏
+import weiboCommunicationTrendStoken from "./weiboCommunicationTrendStoken";
+import weiboContentTypeStoken from "./weiboContentTypeStoken";
+import weiboCharactersStoken from "./weiboCharactersStoken";
+import weiboUserActiveAreaStoken from "./weiboUserActiveAreaStoken";
+import weiboContentTOPVolumeStoken from "./weiboContentTOPVolumeStoken";
+import modelPopularityStoken from "./modelPopularityStoken";
+import weiboWordCloudStoken from "./weiboWordCloudStoken";
+import weiboSpreadFissionStoken from "./weiboSpreadFissionStoken";
+import weiboTonalDistributionStoken from "./weiboTonalDistributionStoken";
+import positiveViewKOLStoken from "./positiveViewKOLStoken";
+import negativeOpinionKOLStoken from "./negativeOpinionKOLStoken";
 import { getBrandWeiBoCount0528 } from "@/api/WeiboDetails/index.js";
 import { getAffections } from "@/api/WeiboDetails/index.js";
 export default {
@@ -136,6 +181,18 @@ export default {
     weiboTonalDistribution, // 调性分布
     positiveViewKOL, // 正面观点KOL
     negativeOpinionKOL, // 负面观点KOL
+    //骨架屏
+    weiboCommunicationTrendStoken, // 微博传播趋势
+    weiboContentTypeStoken, // 微博内容类型
+    weiboCharactersStoken, // 微博人物画像
+    weiboUserActiveAreaStoken, // 微博用户活跃地区
+    weiboContentTOPVolumeStoken, // 微博内容TOP声量
+    modelPopularityStoken, // 车型热度
+    weiboWordCloudStoken, // 词云分布
+    weiboSpreadFissionStoken, // 微博传播裂变
+    weiboTonalDistributionStoken, // 调性分布
+    positiveViewKOLStoken, // 正面观点KOL
+    negativeOpinionKOLStoken, // 负面观点KOL
   },
   data() {
     return {
diff --git a/src/views/WeiboDetails/modelPopularityStoken/index.vue b/src/views/WeiboDetails/modelPopularityStoken/index.vue
new file mode 100644
index 0000000..fe0b33a
--- /dev/null
+++ b/src/views/WeiboDetails/modelPopularityStoken/index.vue
@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 18:42:40
+ * @LastEditTime: 2021-11-09 11:58:09
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/modelPopularity/index.vue
+-->
+
+<template>
+  <div class="mp-outter">
+  </div>
+</template>
+ 
+<script>
+export default {
+  name: "modelPopularity",
+  data() {
+    return {
+      form: {
+        sBrand: "",
+        token: "",
+        iType: "",
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.mp-outter {
+  width: 460px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  .mp-inner {
+    padding: 0px 16px 16px 16px;
+  }
+}
+</style>
diff --git a/src/views/WeiboDetails/negativeOpinionKOLStoken/index.vue b/src/views/WeiboDetails/negativeOpinionKOLStoken/index.vue
new file mode 100644
index 0000000..f2fb98a
--- /dev/null
+++ b/src/views/WeiboDetails/negativeOpinionKOLStoken/index.vue
@@ -0,0 +1,94 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 15:18:44
+ * @LastEditTime: 2021-11-09 13:14:13
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/positiveViewKOL/index.vue
+-->
+<template>
+    <div class="pv-outter">
+    </div>
+</template>
+
+<script>
+export default {
+    name: "negativeOpinionKOL",
+    data() {
+        return {
+            form: {
+                sBrand: "",
+                sQingGan: "2",
+                iSize: 6,
+                token: "",
+            },
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.pv-outter {
+    width: 936px;
+    height: 246px;
+    border: 2px solid #0f2a4d;
+    margin-left: 16px;
+    .pv-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        padding: 0px 0px 16px 16px;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        .pv-item {
+            width: 285px;
+            height: 72px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            position: relative;
+            margin-right: 16px;
+            margin-top: 16px;
+            .dm {
+                position: absolute;
+                width: 72px;
+                height: 72px;
+                border-radius: 72px;
+                border: 1px solid #ccc;
+                left: 0px;
+                top: 0px;
+                background-color: #fff;
+                z-index: 10;
+                .dm-m1 {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 100%;
+                }
+            }
+            .d-f {
+                position: absolute;
+                width: 249px;
+                height: 64px;
+                left: 36px;
+                padding-left: 65px;
+                background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
+                .d1 {
+                    font-size: 14px;
+                    color: #fff;
+                    font-weight: 500;
+                    margin-top: 10px;
+                }
+                .d2 {
+                    color: #70869a;
+                    font-size: 12px;
+                    .d2-s1 {
+                        font-size: 12px;
+                        font-family: Bebas;
+                        color: #f49847;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/WeiboDetails/positiveViewKOLStoken/index.vue b/src/views/WeiboDetails/positiveViewKOLStoken/index.vue
new file mode 100644
index 0000000..9fce34f
--- /dev/null
+++ b/src/views/WeiboDetails/positiveViewKOLStoken/index.vue
@@ -0,0 +1,93 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 15:18:44
+ * @LastEditTime: 2021-11-09 13:15:15
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/positiveViewKOL/index.vue
+-->
+<template>
+  <div class="pv-outter">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "positiveViewKOL",
+  data() {
+    return {
+      form: {
+        sBrand: "",
+        sQingGan: "1",
+        iSize: 6,
+        token: "",
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.pv-outter {
+  width: 936px;
+  height: 246px;
+  border: 2px solid #0f2a4d;
+  .pv-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    padding: 0px 0px 16px 16px;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    .pv-item {
+      width: 285px;
+      height: 72px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      position: relative;
+      margin-right: 16px;
+      margin-top: 16px;
+      .dm {
+        position: absolute;
+        width: 72px;
+        height: 72px;
+        border-radius: 72px;
+        border: 1px solid #ccc;
+        left: 0px;
+        top: 0px;
+        background-color: #fff;
+        z-index: 10;
+        .dm-m1 {
+            width: 100%;
+            height: 100%;
+            border-radius: 100%;
+        }
+      }
+      .d-f {
+        position: absolute;
+        width: 249px;
+        height: 64px;
+        left: 36px;
+        padding-left: 65px;
+        background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
+        .d1 {
+          font-size: 14px;
+          color: #fff;
+          font-weight: 500;
+          margin-top: 10px;
+        }
+        .d2 {
+          color: #70869a;
+          font-size: 12px;
+          .d2-s1 {
+            font-size: 12px;
+            font-family: Bebas;
+            color: #f49847;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/WeiboDetails/weiboCharactersStoken/index.vue b/src/views/WeiboDetails/weiboCharactersStoken/index.vue
new file mode 100644
index 0000000..5cac297
--- /dev/null
+++ b/src/views/WeiboDetails/weiboCharactersStoken/index.vue
@@ -0,0 +1,73 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 10:48:56
+ * @LastEditTime: 2021-11-09 13:16:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboCharacters/index.vue
+-->
+<template>
+  <div class="wc-outter">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "weiboCharacters",
+  data() {
+    return {
+      form: {
+        sBrand: "",
+        token: "",
+      },
+      colors: [
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wc-outter {
+  width: 618px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  overflow: hidden;
+  .wc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+      width: 280px;
+      height: 100%;
+    }
+    .d2 {
+      width: 300px;
+      margin-left: 16px;
+    }
+  }
+}
+</style>
+
diff --git a/src/views/WeiboDetails/weiboCommunicationTrendStoken/index.vue b/src/views/WeiboDetails/weiboCommunicationTrendStoken/index.vue
new file mode 100644
index 0000000..551000b
--- /dev/null
+++ b/src/views/WeiboDetails/weiboCommunicationTrendStoken/index.vue
@@ -0,0 +1,38 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 10:11:41
+ * @LastEditTime: 2021-11-09 13:16:55
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboCommunicationTrend/index.vue
+-->
+<template>
+    <div class="wct-outter">
+    </div>
+</template>
+
+<script>
+export default {
+    name: "weibo-communication-trend",
+    data() {
+        return {
+             form: {
+                sBrand: "",
+                token: "",
+            },
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.wct-outter {
+    width: 618px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    .wct-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/WeiboDetails/weiboContentTOPVolumeStoken/index.vue b/src/views/WeiboDetails/weiboContentTOPVolumeStoken/index.vue
new file mode 100644
index 0000000..75da131
--- /dev/null
+++ b/src/views/WeiboDetails/weiboContentTOPVolumeStoken/index.vue
@@ -0,0 +1,66 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 15:54:06
+ * @LastEditTime: 2021-11-04 17:03:24
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/index.vue
+-->
+<template>
+  <div class="wct-outter">
+  </div>
+</template>
+
+<script>
+export default {
+    name: "weiboContentTOPVolume",
+    data() {
+        return { 
+             form: {
+                sBrand: "",
+                token: "",
+            }
+        };
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.wct-outter {
+  width: 936px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  overflow: hidden;
+}
+.wct-inner {
+  width: 100%;
+  margin-top: 16px;
+  height: calc(100% - 48px);
+  .wct-d1 {
+    position: relative;
+    width: 233px;
+    height: 206px;
+    display: inline-block;
+    .wct-d1-dd1 {
+      position: absolute;
+      padding: 0px 16px;
+      width: 100%;
+      height: auto;
+      display: flex;
+      justify-content: space-between;
+      top: 140px;
+      left: 0px;
+      span {
+        color: #d8d8d8;
+        font-size: 12px;
+        .ss1 {
+          font-family: Bebas;
+          font-size: 16px;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/WeiboDetails/weiboContentTypeStoken/index.vue b/src/views/WeiboDetails/weiboContentTypeStoken/index.vue
new file mode 100644
index 0000000..1f12434
--- /dev/null
+++ b/src/views/WeiboDetails/weiboContentTypeStoken/index.vue
@@ -0,0 +1,50 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 10:24:56
+ * @LastEditTime: 2021-11-09 13:17:24
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboContentType/index.vue
+-->
+<template>
+  <div class="wct-outter">
+  </div>    
+</template>
+
+<script>
+export default {
+  name: "weiboContentType",
+  data() {
+    return {
+      form: {
+        sBrand: "",
+        token: "",
+      },
+
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+.wct-outter {
+  width: 618px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  overflow: hidden;
+  .wct-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+      width: 280px;
+      height: 100%;
+    }
+    .d2 {
+      width: 300px;
+      margin-left: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/views/WeiboDetails/weiboSpreadFissionStoken/index.vue b/src/views/WeiboDetails/weiboSpreadFissionStoken/index.vue
new file mode 100644
index 0000000..942df4b
--- /dev/null
+++ b/src/views/WeiboDetails/weiboSpreadFissionStoken/index.vue
@@ -0,0 +1,50 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 19:15:58
+ * @LastEditTime: 2021-11-17 16:27:37
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboSpreadFission/index.vue
+-->
+<template>
+    <div class="wsf-outter">
+    </div>
+</template>
+
+<script>
+export default {
+    name: "weiboSpreadFission",
+    data() {
+        return {
+            form: {
+                token:"",
+                sBrand:""
+            },
+            colors: [
+                "#FFB600",
+                "#886CFF",
+                "#0084FF",
+                "#4CB690",
+                "#58B458",
+                "#6C6C6C",
+                "#F56161",
+                "#FC754C",
+                "#5F5EEC",
+            ],
+        }
+    }, 
+}
+</script>
+
+<style lang="less" scoped>
+.wsf-outter {
+    width: 460px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-left: 16px;
+    .wsf-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/WeiboDetails/weiboTonalDistributionStoken/index.vue b/src/views/WeiboDetails/weiboTonalDistributionStoken/index.vue
new file mode 100644
index 0000000..dbf9741
--- /dev/null
+++ b/src/views/WeiboDetails/weiboTonalDistributionStoken/index.vue
@@ -0,0 +1,51 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 19:41:24
+ * @LastEditTime: 2021-11-09 13:20:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboTonalDistribution/index.vue
+-->
+<template>
+  <div class="wtd-outter">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "weiboTonalDistribution",
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wtd-outter {
+  width: 460px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  padding-bottom: 50px;
+  .wtd-inner {
+    width: 100%;
+    padding: 20px 16px;
+    .wtd-item {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 36px;
+      .s1 {
+        display: block;
+        color: #fff;
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/WeiboDetails/weiboUserActiveAreaStoken/index.vue b/src/views/WeiboDetails/weiboUserActiveAreaStoken/index.vue
new file mode 100644
index 0000000..8ef1ae7
--- /dev/null
+++ b/src/views/WeiboDetails/weiboUserActiveAreaStoken/index.vue
@@ -0,0 +1,49 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 11:25:20
+ * @LastEditTime: 2021-11-10 17:13:41
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
+-->
+<template>
+  <div class="wua-outter">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "weiboUserActiveArea",
+  data() {
+    return {
+      form: {
+        sBrand: "",
+        token: "",
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wua-outter {
+  width: 936px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  .wua-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+      width: 479px;
+      height: 100%;
+    }
+    .d2 {
+      width: 420px;
+      height: 100%;
+      margin-left: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/views/WeiboDetails/weiboWordCloudStoken/index.vue b/src/views/WeiboDetails/weiboWordCloudStoken/index.vue
new file mode 100644
index 0000000..66ae020
--- /dev/null
+++ b/src/views/WeiboDetails/weiboWordCloudStoken/index.vue
@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 19:06:52
+ * @LastEditTime: 2021-10-14 19:14:42
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboWordCloud/index.vue
+-->
+<template>
+  <div class="wwc-outter">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "weiboWordCloud",
+  data() {
+    return {
+      form: {
+        sBrand: "",
+        token: "",
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wwc-outter {
+  width: 460px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  .wwc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
\ No newline at end of file