zx-骨架屏

src/views/ModelWeiboDetails/MWDmodelPopularityStoken/index.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 19:06:52
+ * @LastEditTime: 2021-11-10 17:43:29
+ * @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: "MWDmodelPopularity",
+  data() {
+    return {
+      form: {
+        sBrand: "",
+        token: "",
+        sSeriesName: ""
+      },
+    };
+  },
+};
+</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>

src/views/ModelWeiboDetails/MWDnegativeOpinionKOLStoken/index.vue

@@ -0,0 +1,95 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 15:18:44
+ * @LastEditTime: 2021-11-10 17:48:41
+ * @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: "MWDnegativeOpinionKOL",
+    data() {
+        return {
+            form: {
+                sBrand: "",
+                sQingGan: 2,
+                iSize: 6,
+                token: "",
+                sSeriesName: ""
+            },
+        }
+    },
+};
+</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>

src/views/ModelWeiboDetails/MWDpositiveViewKOLStoken/index.vue

@@ -0,0 +1,95 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 15:18:44
+ * @LastEditTime: 2021-11-10 17:48:52
+ * @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: "MWDpositiveViewKOL",
+  data() {
+    return {
+      ds: [],
+      form: {
+        sBrand: "",
+        sQingGan: 1,
+        iSize: 6,
+        token: "",
+        sSeriesName: ""
+      },
+    };
+  },
+};
+</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>

src/views/ModelWeiboDetails/MWDweiboCharactersStoken/index.vue

@@ -0,0 +1,74 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 10:48:56
+ * @LastEditTime: 2021-11-08 18:29:34
+ * @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: "MWDweiboCharacters",
+  data() {
+    return {
+      form: {
+        sBrand: "",
+        token: "",
+        sSeriesName: ""
+      },
+      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>
+

src/views/ModelWeiboDetails/MWDweiboCommunicationTrendStoken/index.vue

@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 10:11:41
+ * @LastEditTime: 2021-11-10 17:50:19
+ * @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: "MWDweiboCommunicationTrend",
+    data() {
+        return {
+             form: {
+                sBrand: "",
+                token: "",
+                sSeriesName: ""
+            },
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.wct-outter {
+    width: 618px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    .wct-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/ModelWeiboDetails/MWDweiboContentTOPVolumeStoken/index.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 15:54:06
+ * @LastEditTime: 2021-11-10 17:51:08
+ * @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: "MWDweiboContentTOPVolume",
+    data() {
+        return { 
+             form: {
+                sBrand: "",
+                token: "",
+                sSeriesName: ""
+            },
+        };
+    },
+}
+</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>

src/views/ModelWeiboDetails/MWDweiboContentTypeStoken/index.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 10:24:56
+ * @LastEditTime: 2021-11-11 10:46:38
+ * @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: "MWDweiboContentType",
+  data() {
+    return {
+      form: {
+        sBrand: "",
+        token: "",
+        sSeriesName: ""
+      },
+      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>
+.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>

src/views/ModelWeiboDetails/MWDweiboSpreadFissionStoken/index.vue

@@ -0,0 +1,51 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 19:15:58
+ * @LastEditTime: 2021-11-17 16:23:34
+ * @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: "MWDweiboSpreadFission",
+    data() {
+        return {
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+            },
+            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>

src/views/ModelWeiboDetails/MWDweiboTonalDistributionStoken/index.vue

@@ -0,0 +1,52 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 19:41:24
+ * @LastEditTime: 2021-11-10 17:53:28
+ * @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: "MWDweiboTonalDistribution",
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+        sSeriesName: "",
+      },
+    };
+  },
+};
+</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>

src/views/ModelWeiboDetails/MWDweiboUserActiveAreaStoken/index.vue

@@ -0,0 +1,50 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 11:25:20
+ * @LastEditTime: 2021-11-10 17:56:19
+ * @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: "MWDweiboUserActiveArea",
+  data() {
+    return {
+      form: {
+        sBrand: "",
+        token: "",
+        sSeriesName: ""
+      },
+    };
+  },
+};
+</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>

src/views/ModelWeiboDetails/MWDweiboWordCloudStoken/index.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 19:06:52
+ * @LastEditTime: 2021-11-10 17:54: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: "MWDweiboWordCloud",
+    data() {
+        return {
+            form: {
+                sBrand: "",
+                token: "",
+                sSeriesName: ""
+            },
+        };
+    },
+};
+</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>

src/views/ModelWeiboDetails/index.vue

@@ -87,23 +87,56 @@
         </div>
       </div>
       <div class="wd-d2">
+        <vue-lazy-component>
         <MWDweiboCommunicationTrend></MWDweiboCommunicationTrend>
+        <MWDweiboCommunicationTrendStoken slot="skeleton"></MWDweiboCommunicationTrendStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <MWDweiboContentType></MWDweiboContentType>
+        <MWDweiboContentTypeStoken slot="skeleton"></MWDweiboContentTypeStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <MWDweiboCharacters></MWDweiboCharacters>
+        <MWDweiboCharactersStoken slot="skeleton"></MWDweiboCharactersStoken>
+        </vue-lazy-component>
       </div>
       <div class="wd-d3">
+        <vue-lazy-component>
         <MWDweiboUserActiveArea></MWDweiboUserActiveArea>
+        <MWDweiboUserActiveAreaStoken slot="skeleton"></MWDweiboUserActiveAreaStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <MWDweiboContentTOPVolume></MWDweiboContentTOPVolume>
+        <MWDweiboContentTOPVolumeStoken slot="skeleton"></MWDweiboContentTOPVolumeStoken>
+        </vue-lazy-component>
       </div>
       <div class="wd-d4">
+        <vue-lazy-component>
         <MWDmodelPopularity></MWDmodelPopularity>
+        <MWDmodelPopularityStoken slot="skeleton"></MWDmodelPopularityStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <MWDweiboWordCloud></MWDweiboWordCloud>
+        <MWDweiboWordCloudStoken slot="skeleton"></MWDweiboWordCloudStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <MWDweiboSpreadFission></MWDweiboSpreadFission>
+        <MWDweiboSpreadFissionStoken slot="skeleton"></MWDweiboSpreadFissionStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <MWDweiboTonalDistribution></MWDweiboTonalDistribution>
+        <MWDweiboTonalDistributionStoken slot="skeleton"></MWDweiboTonalDistributionStoken>
+        </vue-lazy-component>
       </div>
       <div class="wd-d5">
+        <vue-lazy-component>
         <MWDpositiveViewKOL></MWDpositiveViewKOL>
+        <MWDpositiveViewKOLStoken slot="skeleton"></MWDpositiveViewKOLStoken>
+        </vue-lazy-component>
+        <vue-lazy-component>
         <MWDnegativeOpinionKOL></MWDnegativeOpinionKOL>
+        <MWDnegativeOpinionKOLStoken slot="skeleton"></MWDnegativeOpinionKOLStoken>
+        </vue-lazy-component>
       </div>
     </div>
   </div>
@@ -121,6 +154,18 @@ import MWDweiboSpreadFission from "./MWDweiboSpreadFission";
 import MWDweiboTonalDistribution from "./MWDweiboTonalDistribution";
 import MWDpositiveViewKOL from "./MWDpositiveViewKOL";
 import MWDnegativeOpinionKOL from "./MWDnegativeOpinionKOL";
+//骨架屏
+import MWDweiboCommunicationTrendStoken from "./MWDweiboCommunicationTrendStoken";
+import MWDweiboContentTypeStoken from "./MWDweiboContentTypeStoken";
+import MWDweiboCharactersStoken from "./MWDweiboCharactersStoken";
+import MWDweiboUserActiveAreaStoken from "./MWDweiboUserActiveAreaStoken";
+import MWDweiboContentTOPVolumeStoken from "./MWDweiboContentTOPVolumeStoken";
+import MWDmodelPopularityStoken from "./MWDmodelPopularityStoken";
+import MWDweiboWordCloudStoken from "./MWDweiboWordCloudStoken";
+import MWDweiboSpreadFissionStoken from "./MWDweiboSpreadFissionStoken";
+import MWDweiboTonalDistributionStoken from "./MWDweiboTonalDistributionStoken";
+import MWDpositiveViewKOLStoken from "./MWDpositiveViewKOLStoken";
+import MWDnegativeOpinionKOLStoken from "./MWDnegativeOpinionKOLStoken";
 import { getBrandWeiBoCount0528 } from "@/api/WeiboDetails/index.js";
 import { getAffections } from "@/api/WeiboDetails/index.js";
 export default {
@@ -137,6 +182,18 @@ export default {
     MWDweiboTonalDistribution, // 调性分布
     MWDpositiveViewKOL, // 正面观点KOL
     MWDnegativeOpinionKOL, // 负面观点KOL
+    //骨架屏
+    MWDweiboCommunicationTrendStoken, // 微博传播趋势
+    MWDweiboContentTypeStoken, // 微博内容类型
+    MWDweiboCharactersStoken, // 微博人物画像
+    MWDweiboUserActiveAreaStoken, // 微博用户活跃地区
+    MWDweiboContentTOPVolumeStoken, // 微博内容TOP声量
+    MWDmodelPopularityStoken, // 车型热度
+    MWDweiboWordCloudStoken, // 词云分布
+    MWDweiboSpreadFissionStoken, // 微博传播裂变
+    MWDweiboTonalDistributionStoken, // 调性分布
+    MWDpositiveViewKOLStoken, // 正面观点KOL
+    MWDnegativeOpinionKOLStoken, // 负面观点KOL
   },
   data() {
     return {