ui更新，逻辑调整

src/App.vue

@@ -5,58 +5,22 @@
 </template>
 
 <style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+}
 html,
 body {
   overflow: hidden;
-}
-html,
-body,
-#app {
   width: 100%;
   height: 100%;
 }
-* {
-  margin: 0;
-  padding: 0;
-}
-
-#app {
-  overflow-y: scroll;
+body {
   font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
     Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui",
     "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+  overflow-y: scroll;
+  font-weight: 400;
   color: #2c3e50;
-  .mainBody {
-    min-width: 360px;
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-  .basePage {
-    height: calc(100% - 1.5rem);
-  }
-  .groupList {
-    height: 45px;
-    line-height: 45px;
-    background-color: #fff;
-    font-size: 14px;
-    white-space: nowrap;
-    overflow-y: hidden;
-    overflow-x: scroll;
-    padding-left: 8px;
-    .groupItem {
-      border-bottom: 2px solid #fff;
-      padding: 2px;
-      &:not(:first-child) {
-        margin-left: 8px;
-      }
-      .groupText {
-        padding: 2px 8px;
-        display: inline-block;
-      }
-    }
-    .act {
-      border-bottom-color: #ee0a24;
-    }
-  }
 }
 </style>

src/appMinxin/getList.js

@@ -1,229 +0,0 @@
-import {
-  getBase,
-  getPlatform,
-  getList,
-  getAllPlatform,
-  // getCould,
-} from "@/api/getList";
-
-export default {
-  data() {
-    return {
-      timeout: undefined,
-      isdou: false,
-      iskuai: false,
-      could: "",
-    };
-  },
-  methods: {
-    select() {
-      let season = sessionStorage.getItem("season");
-      let title = this.$route.query.title;
-      getBase({
-        topic_name: title,
-        season,
-      }).then(x => {
-        x = x || {};
-        this.allList = {
-          read: x.total_pv || 0,
-          talk: x.total_comment || 0,
-          keyWord: title,
-          totalLikes: x.total_digg || 0,
-          totalForward: x.total_forward || 0,
-          totalOri: x.total_ori || 0,
-          live_comment: x.live_comment,
-          live_digg: x.live_digg,
-          live_uv: x.live_uv,
-        };
-        this.isdou = x.has_live_douyin_data;
-        this.iskuai = x.has_live_kuaishou_data;
-        this.could = x.word_cloud_url || ""
-      });
-      getAllPlatform({
-        topic_name: title,
-        season
-      }).then(x => {
-        const list = [];
-        this.platformList.map(className => {
-          let keyValue = "total_forward";
-          className === "浏览" && (keyValue = "total_pv");
-          className === "点赞" && (keyValue = "total_digg");
-          className === "评论" && (keyValue = "total_comment");
-          if (className === "浏览") {
-            (x || []).map(v => {
-              list.push({
-                name: className,
-                nickname: v.platform,
-                value: v[keyValue],
-              });
-            });
-          }
-        });
-        this.platformSort = list;
-      });
-      getPlatform({
-        topic_name: title,
-        platform: "ALL",
-        season,
-      }).then(x => {
-        this.userSortAll = x || [];
-        this.clickBtn(this.selectIndex);
-      });
-      getPlatform({
-        topic_name: title,
-        platform: "douyin",
-        season,
-      }).then(x => {
-        this.douAllList = (x || []).map(v => {
-          // v.nickname = v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n");
-          // v.nickname = v.nickname.replace(/^\n/g, "");
-          const li = v.nickname.split("");
-          v.nickname = li
-            .map((nameString, i) => {
-              i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
-              return nameString;
-            })
-            .join("");
-          return v;
-        });
-      });
-      getPlatform({
-        topic_name: title,
-        platform: "kuaishou",
-        season
-      }).then(x => {
-        this.kuaiAllList = (x || []).map(v => {
-          // v.nickname = v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n");
-          // v.nickname = v.nickname.replace(/^\n/g, "");
-          const li = v.nickname.split("");
-          v.nickname = li
-            .map((nameString, i) => {
-              i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
-              return nameString;
-            })
-            .join("");
-          return v;
-        });
-      });
-      getPlatform({
-        topic_name: title,
-        platform: "yangshi",
-        season
-      }).then(x => {
-        this.yangAllList = (x || []).map(v => {
-          // v.nickname = v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n");
-          // v.nickname = v.nickname.replace(/^\n/g, "");
-          const li = v.nickname.split("");
-          v.nickname = li
-            .map((nameString, i) => {
-              i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
-              return nameString;
-            })
-            .join("");
-          return v;
-        });
-      });
-      // let Filename = this.$utils.getUrl("id");
-      // getCould({}, this.$store.state.p[Filename]).then(res => {
-      //   let ori = res || [];
-      //   let listOri = [];
-      //   ori.map(v => {
-      //     listOri.push({
-      //       x: v.name,
-      //       value: v.value - 0,
-      //     });
-      //   });
-      //   this.listOri = listOri;
-      // });
-
-      this.getAllWeibo();
-    },
-    selectRead(dateT) {
-      let season = sessionStorage.getItem("season");
-      getList({
-        topic_name: this.$route.query.title,
-        time: dateT.type,
-        season
-      }).then(res => {
-        this.read = (res.read || []).map(v => {
-          return {
-            date: v.time,
-            type: "微博-阅读量趋势",
-            value: v.value,
-          };
-        });
-        this.readType = dateT.type;
-      });
-    },
-    selectMe(dateT) {
-      let season = sessionStorage.getItem("season");
-      getList({
-        topic_name: this.$route.query.title,
-        time: dateT.type,
-        season
-      }).then(res => {
-        this.me = (res.me || []).map(v => {
-          return {
-            date: v.time,
-            type: "微博-讨论趋势",
-            value: v.value,
-          };
-        });
-        this.meType = dateT.type;
-      });
-    },
-    selectOri(dateT) {
-      let season = sessionStorage.getItem("season");
-      getList({
-        topic_name: this.$route.query.title,
-        time: dateT.type,
-        season
-      }).then(res => {
-        this.ori = (res.ori || []).map(v => {
-          return {
-            date: v.time,
-            type: "微博-原创趋势",
-            value: v.value,
-          };
-        });
-        this.oriType = dateT.type;
-      });
-    },
-    getAllWeibo() {
-      let season = sessionStorage.getItem("season");
-      getList({
-        topic_name: this.$route.query.title,
-        time: "30d",
-        season
-      })
-        .then(res => {
-          this.read = (res.read || []).map(v => {
-            return {
-              date: v.time,
-              type: "微博-阅读量趋势",
-              value: v.value,
-            };
-          });
-          this.ori = (res.ori || []).map(v => {
-            return {
-              date: v.time,
-              type: "微博-原创趋势",
-              value: v.value,
-            };
-          });
-          this.me = (res.me || []).map(v => {
-            return {
-              date: v.time,
-              type: "微博-讨论趋势",
-              value: v.value,
-            };
-          });
-        })
-        .catch(() => {
-          // window.clearInterval(this.timeout)
-        });
-    },
-  },
-  created() {},
-  mounted() {},
-};

src/appMinxin/getListSecond.js

@@ -1,200 +0,0 @@
-
-import {
-    getBase,
-    getPlatform,
-    getList,
-    getAllPlatform,
-    // getCould,
-} from "@/api/getList";
-
-export default {
-    data() {
-        return {
-            timeout: undefined,
-        }
-    },
-    methods: {
-        select() {
-            let title = this.$route.query.title;
-            let season = sessionStorage.getItem("season");
-            this.pageDate.season = season;
-            getBase(this.pageDate).then((x) => {
-                this.allList = {
-                    read: x.total_pv || 0,
-                    talk: x.total_comment || 0,
-                    keyWord: title,
-                    totalLikes: x.total_digg || 0,
-                    totalForward: x.total_forward || 0,
-                    totalOri: x.total_ori || 0,
-                    live_comment: x.live_comment,
-                    live_digg: x.live_digg,
-                    live_uv: x.live_uv
-                };
-            });
-            getAllPlatform(this.pageDate).then((x) => {
-                const list = [];
-                this.platformList.map((className) => {
-                    let keyValue = "total_forward";
-                    className === "浏览" && (keyValue = "total_pv");
-                    className === "点赞" && (keyValue = "total_digg");
-                    className === "评论" && (keyValue = "total_comment");
-                    if (className === "浏览") {
-                        (x || []).map((v) => {
-                            list.push({
-                                name: className,
-                                nickname: v.platform,
-                                value: v[keyValue],
-                            });
-                        });
-                    }
-                });
-                this.platformSort = list;
-            });
-            getPlatform({
-                ...this.pageDate,
-                platform: "ALL",
-            }).then((x) => {
-                this.userSortAll = x || [];
-                this.clickBtn(this.selectIndex)
-            });
-            getPlatform({
-                ...this.pageDate,
-                platform: "douyin",
-            }).then((x) => {
-                this.douAllList = (x || []).map((v) => {
-                    // v.nickname = v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n");
-                    // v.nickname = v.nickname.replace(/^\n/g, "");
-                    const li = v.nickname.split("");
-                    v.nickname = li.map((nameString, i) => {
-                        i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
-                        return nameString
-                    }).join("");
-                    return v;
-                });
-            });
-            getPlatform({
-                ...this.pageDate,
-                platform: "kuaishou",
-            }).then((x) => {
-                this.kuaiAllList = (x || []).map((v) => {
-                    // v.nickname = v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n");
-                    // v.nickname = v.nickname.replace(/^\n/g, "");
-                    const li = v.nickname.split("");
-                    v.nickname = li.map((nameString, i) => {
-                        i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
-                        return nameString
-                    }).join("");
-                    return v;
-                });
-            });
-            getPlatform({
-                ...this.pageDate,
-                platform: "yangshi",
-            }).then((x) => {
-                this.yangAllList = (x || []).map((v) => {
-                    // v.nickname = v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n");
-                    // v.nickname = v.nickname.replace(/^\n/g, "");
-                    const li = v.nickname.split("");
-                    v.nickname = li.map((nameString, i) => {
-                        i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
-                        return nameString
-                    }).join("");
-                    return v;
-                });
-            });
-            // let Filename = this.$utils.getUrl("id");
-            // getCould({}, this.$store.state.p[Filename]).then(res => {
-            //     let ori = res || []
-            //     let listOri = [];
-            //     ori.map(v => {
-            //         listOri.push({
-            //             x: v.name,
-            //             value: v.value
-            //         })
-            //     })
-            //     this.listOri = listOri;
-            // })
-
-            this.getAllWeibo()
-        },
-        selectRead(dateT) {
-            getList({
-                ...this.pageDate,
-                time: dateT.type,
-            }).then((res) => {
-                this.read = (res.read || []).map((v) => {
-                    return {
-                        date: v.time,
-                        type: "微博-阅读量趋势",
-                        value: v.value,
-                    };
-                });
-                this.readType = dateT.type;
-            });
-        },
-        selectMe(dateT) {
-            getList({
-                ...this.pageDate,
-                time: dateT.type,
-            }).then((res) => {
-                this.me = (res.me || []).map((v) => {
-                    return {
-                        date: v.time,
-                        type: "微博-讨论趋势",
-                        value: v.value,
-                    };
-                });
-                this.meType = dateT.type;
-            });
-        },
-        selectOri(dateT) {
-            getList({
-                ...this.pageDate,
-                time: dateT.type,
-            }).then((res) => {
-                this.ori = (res.ori || []).map((v) => {
-                    return {
-                        date: v.time,
-                        type: "微博-原创趋势",
-                        value: v.value,
-                    };
-                });
-                this.oriType = dateT.type;
-            });
-        },
-        getAllWeibo() {
-            getList({
-                ...this.pageDate,
-                time: "30d",
-            }).then((res) => {
-                this.read = (res.read || []).map((v) => {
-                    return {
-                        date: v.time,
-                        type: "微博-阅读量趋势",
-                        value: v.value,
-                    };
-                });
-                this.ori = (res.ori || []).map((v) => {
-                    return {
-                        date: v.time,
-                        type: "微博-原创趋势",
-                        value: v.value,
-                    };
-                });
-                this.me = (res.me || []).map((v) => {
-                    return {
-                        date: v.time,
-                        type: "微博-讨论趋势",
-                        value: v.value,
-                    };
-                });
-            }).catch(() => {
-                // window.clearInterval(this.timeout)
-            });
-        }
-    },
-    created() {
-    },
-    mounted() {
-    },
-}

src/assets/MockData/dist/i.dev.js

@@ -1,461 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _default = [{
-  x: "罗飞",
-  value: 63
-}, {
-  x: "榆林",
-  value: 36
-}, {
-  x: "铁主任",
-  value: 54
-}, {
-  x: "小雪",
-  value: 26
-}, {
-  x: "铁扣",
-  value: 20
-}, {
-  x: "工钱",
-  value: 15
-}, {
-  x: "装台",
-  value: 11
-}, {
-  x: "抗硬",
-  value: 10
-}, {
-  x: "孙浩",
-  value: 10
-}, {
-  x: "羊头",
-  value: 6
-}, {
-  x: "好吃",
-  value: 6
-}, {
-  x: "顺子",
-  value: 5
-}, {
-  x: "ning",
-  value: 6
-}, {
-  x: "不见",
-  value: 6
-}, {
-  x: "大山",
-  value: 5
-}, {
-  x: "方言",
-  value: 5
-}, {
-  x: "想念",
-  value: 5
-}, {
-  x: "四声",
-  value: 4
-}, {
-  x: "奸笑",
-  value: 4
-}, {
-  x: "狗肉",
-  value: 4
-}, {
-  x: "铁人",
-  value: 4
-}, {
-  x: "工资",
-  value: 5
-}, {
-  x: "唱歌",
-  value: 5
-}, {
-  x: "西安",
-  value: 5
-}, {
-  x: "杯中",
-  value: 4
-}, {
-  x: "主播",
-  value: 5
-}, {
-  x: "演技",
-  value: 4
-}, {
-  x: "陕北",
-  value: 4
-}, {
-  x: "经费",
-  value: 4
-}, {
-  x: "中彩",
-  value: 3
-}, {
-  x: "陕西",
-  value: 4
-}, {
-  x: "榆林人",
-  value: 4
-}, {
-  x: "中华",
-  value: 5
-}, {
-  x: "朝花夕拾",
-  value: 4
-}, {
-  x: "铁公鸡",
-  value: 4
-}, {
-  x: "羊肉",
-  value: 3
-}, {
-  x: "爱慕",
-  value: 3
-}, {
-  x: "豆腐",
-  value: 3
-}, {
-  x: "陕北话",
-  value: 3
-}, {
-  x: "coco",
-  value: 3
-}, {
-  x: "可怜",
-  value: 3
-}, {
-  x: "老师",
-  value: 4
-}, {
-  x: "记得",
-  value: 3
-}, {
-  x: "演戏",
-  value: 3
-}, {
-  x: "厉害",
-  value: 3
-}, {
-  x: "耽误",
-  value: 3
-}, {
-  x: "嗓子",
-  value: 3
-}, {
-  x: "兄弟",
-  value: 3
-}, {
-  x: "演员",
-  value: 3
-}, {
-  x: "加油",
-  value: 3
-}, {
-  x: "张家堡",
-  value: 3
-}, {
-  x: "豆奶",
-  value: 2
-}, {
-  x: "民谣",
-  value: 3
-}, {
-  x: "明早",
-  value: 3
-}, {
-  x: "抠门",
-  value: 2
-}, {
-  x: "果仁",
-  value: 2
-}, {
-  x: "钱包",
-  value: 2
-}, {
-  x: "灵光",
-  value: 2
-}, {
-  x: "快点",
-  value: 2
-}, {
-  x: "大餐",
-  value: 2
-}, {
-  x: "马丁",
-  value: 2
-}, {
-  x: "回国",
-  value: 2
-}, {
-  x: "河南人",
-  value: 2
-}, {
-  x: "地道",
-  value: 2
-}, {
-  x: "厕所",
-  value: 2
-}, {
-  x: "kang",
-  value: 2
-}, {
-  x: "出名",
-  value: 2
-}, {
-  x: "锤子",
-  value: 2
-}, {
-  x: "好听",
-  value: 2
-}, {
-  x: "静静",
-  value: 2
-}, {
-  x: "长时间",
-  value: 2
-}, {
-  x: "好玩",
-  value: 2
-}, {
-  x: "老家",
-  value: 2
-}, {
-  x: "漂亮",
-  value: 2
-}, {
-  x: "托尼",
-  value: 2
-}, {
-  x: "歌唱",
-  value: 2
-}, {
-  x: "工人",
-  value: 2
-}, {
-  x: "想起",
-  value: 2
-}, {
-  x: "何大壮",
-  value: 2
-}, {
-  x: "雪藏",
-  value: 1
-}, {
-  x: "张咪",
-  value: 3
-}, {
-  x: "媒人",
-  value: 1
-}, {
-  x: "脑壳",
-  value: 1
-}, {
-  x: "重头",
-  value: 1
-}, {
-  x: "马蹄",
-  value: 2
-}, {
-  x: "拍完",
-  value: 1
-}, {
-  x: "电灯泡",
-  value: 1
-}, {
-  x: "驴肉",
-  value: 1
-}, {
-  x: "啧啧",
-  value: 1
-}, {
-  x: "上桌",
-  value: 1
-}, {
-  x: "亚历山大",
-  value: 1
-}, {
-  x: "围观",
-  value: 1
-}, {
-  x: "直播",
-  value: 2
-}, {
-  x: "哈利",
-  value: 1
-}, {
-  x: "围观",
-  value: 1
-}, {
-  x: "槟榔",
-  value: 1
-}, {
-  x: "素菜",
-  value: 1
-}, {
-  x: "彩礼",
-  value: 1
-}, {
-  x: "黑人",
-  value: 1
-}, {
-  x: "充值",
-  value: 1
-}, {
-  x: "波特",
-  value: 1
-}, {
-  x: "山羊",
-  value: 1
-}, {
-  x: "丰盛",
-  value: 1
-}, {
-  x: "拘谨",
-  value: 1
-}, {
-  x: "吃素",
-  value: 1
-}, {
-  x: "筷子",
-  value: 1
-}, {
-  x: "柳州",
-  value: 1
-}, {
-  x: "罗非鱼",
-  value: 1
-}, {
-  x: "发呆",
-  value: 1
-}, {
-  x: "料理",
-  value: 1
-}, {
-  x: "肺炎",
-  value: 1
-}, {
-  x: "下期",
-  value: 1
-}, {
-  x: "猜猜",
-  value: 1
-}, {
-  x: "皮蛋",
-  value: 1
-}, {
-  x: "桌子",
-  value: 1
-}, {
-  x: "此条",
-  value: 1
-}, {
-  x: "牛羊肉",
-  value: 1
-}, {
-  x: "铁锅",
-  value: 1
-}, {
-  x: "半部",
-  value: 1
-}, {
-  x: "吃不起",
-  value: 1
-}, {
-  x: "队员",
-  value: 1
-}, {
-  x: "事儿",
-  value: 1
-}, {
-  x: "毛鸡蛋",
-  value: 1
-}, {
-  x: "内脏",
-  value: 1
-}, {
-  x: "搞笑",
-  value: 1
-}, {
-  x: "皮冻",
-  value: 1
-}, {
-  x: "怀念",
-  value: 1
-}, {
-  x: "湖北",
-  value: 1
-}, {
-  x: "外国人",
-  value: 1
-}, {
-  x: "表白",
-  value: 1
-}, {
-  x: "黑暗",
-  value: 1
-}, {
-  x: "开心",
-  value: 1
-}, {
-  x: "退缩",
-  value: 1
-}, {
-  x: "蚕蛹",
-  value: 1
-}, {
-  x: "群众",
-  value: 1
-}, {
-  x: "语音",
-  value: 1
-}, {
-  x: "口音",
-  value: 1
-}, {
-  x: "遇见",
-  value: 1
-}, {
-  x: "不正",
-  value: 1
-}, {
-  x: "疫情",
-  value: 1
-}, {
-  x: "羊蹄",
-  value: 1
-}, {
-  x: "定亲",
-  value: 1
-}, {
-  x: "影帝",
-  value: 1
-}, {
-  x: "上线",
-  value: 1
-}, {
-  x: "好看",
-  value: 2
-}, {
-  x: "北京人",
-  value: 1
-}, {
-  x: "月底",
-  value: 1
-}, {
-  x: "美味",
-  value: 1
-}, {
-  x: "美女",
-  value: 2
-}, {
-  x: "毛蛋",
-  value: 1
-}, {
-  x: "榆林抗硬",
-  value: 4
-}];
-exports["default"] = _default;

src/assets/MockData/dist/platform.dev.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var platformClassData = [{
-  name: "抖音",
-  read: 100,
-  "digg_count": 400,
-  "comment_count": 100,
-  "forward_count": 400
-}, {
-  name: "快手",
-  read: 200,
-  "digg_count": 300,
-  "comment_count": 200,
-  "forward_count": 300
-}, {
-  name: "微博",
-  read: 300,
-  "digg_count": 200,
-  "comment_count": 300,
-  "forward_count": 200
-}, {
-  name: "央视新闻",
-  read: 400,
-  "digg_count": 100,
-  "comment_count": 400,
-  "forward_count": 100
-}];
-var _default = {
-  platformClassData: platformClassData
-};
-exports["default"] = _default;

src/assets/MockData/i.js

@@ -1,153 +0,0 @@
-export default [
-    { x: "罗飞", value: 63 },
-    { x: "榆林", value: 36 },
-    { x: "铁主任", value: 54 },
-    { x: "小雪", value: 26 },
-    { x: "铁扣", value: 20 },
-    { x: "工钱", value: 15 },
-    { x: "装台", value: 11 },
-    { x: "抗硬", value: 10 },
-    { x: "孙浩", value: 10 },
-    { x: "羊头", value: 6 },
-    { x: "好吃", value: 6 },
-    { x: "顺子", value: 5 },
-    { x: "ning", value: 6 },
-    { x: "不见", value: 6 },
-    { x: "大山", value: 5 },
-    { x: "方言", value: 5 },
-    { x: "想念", value: 5 },
-    { x: "四声", value: 4 },
-    { x: "奸笑", value: 4 },
-    { x: "狗肉", value: 4 },
-    { x: "铁人", value: 4 },
-    { x: "工资", value: 5 },
-    { x: "唱歌", value: 5 },
-    { x: "西安", value: 5 },
-    { x: "杯中", value: 4 },
-    { x: "主播", value: 5 },
-    { x: "演技", value: 4 },
-    { x: "陕北", value: 4 },
-    { x: "经费", value: 4 },
-    { x: "中彩", value: 3 },
-    { x: "陕西", value: 4 },
-    { x: "榆林人", value: 4 },
-    { x: "中华", value: 5 },
-    { x: "朝花夕拾", value: 4 },
-    { x: "铁公鸡", value: 4 },
-    { x: "羊肉", value: 3 },
-    { x: "爱慕", value: 3 },
-    { x: "豆腐", value: 3 },
-    { x: "陕北话", value: 3 },
-    { x: "coco", value: 3 },
-    { x: "可怜", value: 3 },
-    { x: "老师", value: 4 },
-    { x: "记得", value: 3 },
-    { x: "演戏", value: 3 },
-    { x: "厉害", value: 3 },
-    { x: "耽误", value: 3 },
-    { x: "嗓子", value: 3 },
-    { x: "兄弟", value: 3 },
-    { x: "演员", value: 3 },
-    { x: "加油", value: 3 },
-    { x: "张家堡", value: 3 },
-    { x: "豆奶", value: 2 },
-    { x: "民谣", value: 3 },
-    { x: "明早", value: 3 },
-    { x: "抠门", value: 2 },
-    { x: "果仁", value: 2 },
-    { x: "钱包", value: 2 },
-    { x: "灵光", value: 2 },
-    { x: "快点", value: 2 },
-    { x: "大餐", value: 2 },
-    { x: "马丁", value: 2 },
-    { x: "回国", value: 2 },
-    { x: "河南人", value: 2 },
-    { x: "地道", value: 2 },
-    { x: "厕所", value: 2 },
-    { x: "kang", value: 2 },
-    { x: "出名", value: 2 },
-    { x: "锤子", value: 2 },
-    { x: "好听", value: 2 },
-    { x: "静静", value: 2 },
-    { x: "长时间", value: 2 },
-    { x: "好玩", value: 2 },
-    { x: "老家", value: 2 },
-    { x: "漂亮", value: 2 },
-    { x: "托尼", value: 2 },
-    { x: "歌唱", value: 2 },
-    { x: "工人", value: 2 },
-    { x: "想起", value: 2 },
-    { x: "何大壮", value: 2 },
-    { x: "雪藏", value: 1 },
-    { x: "张咪", value: 3 },
-    { x: "媒人", value: 1 },
-    { x: "脑壳", value: 1 },
-    { x: "重头", value: 1 },
-    { x: "马蹄", value: 2 },
-    { x: "拍完", value: 1 },
-    { x: "电灯泡", value: 1 },
-    { x: "驴肉", value: 1 },
-    { x: "啧啧", value: 1 },
-    { x: "上桌", value: 1 },
-    { x: "亚历山大", value: 1 },
-    { x: "围观", value: 1 },
-    { x: "直播", value: 2 },
-    { x: "哈利", value: 1 },
-    { x: "围观", value: 1 },
-    { x: "槟榔", value: 1 },
-    { x: "素菜", value: 1 },
-    { x: "彩礼", value: 1 },
-    { x: "黑人", value: 1 },
-    { x: "充值", value: 1 },
-    { x: "波特", value: 1 },
-    { x: "山羊", value: 1 },
-    { x: "丰盛", value: 1 },
-    { x: "拘谨", value: 1 },
-    { x: "吃素", value: 1 },
-    { x: "筷子", value: 1 },
-    { x: "柳州", value: 1 },
-    { x: "罗非鱼", value: 1 },
-    { x: "发呆", value: 1 },
-    { x: "料理", value: 1 },
-    { x: "肺炎", value: 1 },
-    { x: "下期", value: 1 },
-    { x: "猜猜", value: 1 },
-    { x: "皮蛋", value: 1 },
-    { x: "桌子", value: 1 },
-    { x: "此条", value: 1 },
-    { x: "牛羊肉", value: 1 },
-    { x: "铁锅", value: 1 },
-    { x: "半部", value: 1 },
-    { x: "吃不起", value: 1 },
-    { x: "队员", value: 1 },
-    { x: "事儿", value: 1 },
-    { x: "毛鸡蛋", value: 1 },
-    { x: "内脏", value: 1 },
-    { x: "搞笑", value: 1 },
-    { x: "皮冻", value: 1 },
-    { x: "怀念", value: 1 },
-    { x: "湖北", value: 1 },
-    { x: "外国人", value: 1 },
-    { x: "表白", value: 1 },
-    { x: "黑暗", value: 1 },
-    { x: "开心", value: 1 },
-    { x: "退缩", value: 1 },
-    { x: "蚕蛹", value: 1 },
-    { x: "群众", value: 1 },
-    { x: "语音", value: 1 },
-    { x: "口音", value: 1 },
-    { x: "遇见", value: 1 },
-    { x: "不正", value: 1 },
-    { x: "疫情", value: 1 },
-    { x: "羊蹄", value: 1 },
-    { x: "定亲", value: 1 },
-    { x: "影帝", value: 1 },
-    { x: "上线", value: 1 },
-    { x: "好看", value: 2 },
-    { x: "北京人", value: 1 },
-    { x: "月底", value: 1 },
-    { x: "美味", value: 1 },
-    { x: "美女", value: 2 },
-    { x: "毛蛋", value: 1 },
-    { x: "榆林抗硬", value: 4 },
-]

src/components/bChart.vue

@@ -1,282 +0,0 @@
-<template>
-  <div>
-    <van-cell :title="name"></van-cell>
-    <canvas
-      ref="chart"
-      :width="canvasRegion.width"
-      :height="canvasRegion.height"
-    ></canvas>
-  </div>
-</template>
-
-<script>
-// import F2 from "@antv/f2";
-const F2 = require("@antv/f2/lib/core");
-require("@antv/f2/lib/geom/interval");
-require("@antv/f2/lib/geom/adjust/");
-const Legend = require("@antv/f2/lib/plugin/legend");
-import vanCell from "vant/lib/cell";
-import "vant/lib/cell/style";
-const GroupAnimation = require("@antv/f2/lib/animation/detail");
-F2.Chart.plugins.register(GroupAnimation); // 这里进行全局注册，也可以给 chart 的实例注册
-F2.Chart.plugins.register(Legend);
-const Tooltip = require("@antv/f2/lib/plugin/tooltip");
-F2.Chart.plugins.register(Tooltip);
-export default {
-  name: "chart",
-  props: {
-    legend: {
-      // 是否展示legend，true为展示，默认不展示
-      type: Boolean,
-      default: false,
-    },
-    height: {
-      type: Number,
-      default: document.body.clientHeight / 3,
-    },
-    transposed: {
-      type: Boolean, // 是否反转坐标轴
-      default: false,
-    },
-    className: {
-      // 多柱状图
-      type: String,
-      default: "",
-    },
-    name: {
-      type: String,
-      default: "",
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    keyName: {
-      type: String,
-      default: "",
-    },
-    count: {
-      type: Number,
-      default: 10,
-    },
-  },
-  components: {
-    vanCell,
-  },
-  data() {
-    return {
-      chart: undefined,
-      canvasRegion: {
-        width: 0,
-        height: 0,
-      },
-    };
-  },
-  mounted() {
-    let w = document.body.clientWidth || 0;
-    this.canvasRegion = {
-      width: w > 1200 ? 1200 : w,
-      height: this.height,
-    };
-    if (!this.list.length) return;
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  watch: {
-    list: {
-      deep: true,
-      handler: function() {
-        this.init();
-      },
-    },
-  },
-  methods: {
-    init() {
-      // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
-      let list = JSON.parse(JSON.stringify(this.list));
-      let count = list.length > 10 ? 10 : list.length;
-      let barWidth = (document.body.clientWidth - 100) / count;
-      barWidth > 40 && (barWidth = 40);
-      this.transposed && (barWidth = 10);
-      list.sort((a, b) => {
-        return b[this.keyName] - a[this.keyName];
-      });
-      !this.className && (list = list.splice(0, this.count));
-      this.chart = new F2.Chart({
-        el: this.$refs.chart,
-        pixelRatio: window.devicePixelRatio,
-      });
-      if (!this.legend) {
-        this.chart.legend(false);
-      } else {
-        this.chart.legend("nickname", {
-          selectedMode: "single",
-        });
-      }
-      this.chart.source(list);
-      const x = this.className ? this.className : "nickname";
-      this.chart.axis("nickname", {
-        label: {
-          fontSize: 13,
-        },
-      });
-      this.chart.axis(this.keyName, {
-        label: function label(text) {
-          // 只显示每一年的第一天
-          const textCfg = {};
-          if (text >= 100000000) {
-            textCfg.text = text / 100000000 + "亿";
-          } else if (text >= 10000) {
-            textCfg.text = text / 10000 + "万";
-          } else {
-            textCfg.text = text;
-          }
-          return textCfg;
-        },
-      });
-      if (this.className) {
-        this.chart.scale("nickname", {
-          tickCount: 4,
-        });
-
-        this.chart.tooltip({
-          custom: true,
-          triggerOn: ["touchstart"],
-          showCrosshairs: false,
-          layout: "vertical",
-          snap: true,
-          onChange: obj => {
-            const legend = this.chart.get("legendController").legends.top[0];
-            const tooltipItems = obj.items;
-            const legendItems = legend.items;
-            const map = {};
-            legendItems.forEach(function(item) {
-              map[item.name] = JSON.parse(JSON.stringify(item));
-            });
-            tooltipItems.forEach(function(item) {
-              const name = item.name;
-              const value = item.value;
-              if (map[name]) {
-                map[name].value = value;
-              }
-            });
-            let keys = Object.keys(map);
-            let listVal = [];
-            keys.map(v => {
-              listVal.push(map[v]);
-            });
-            legend.setItems(listVal);
-          },
-          onHide: () => {
-            const legend = this.chart.get("legendController").legends.top[0];
-            legend.setItems(this.chart.getLegendItems().country);
-          },
-        });
-        this.chart
-          .interval()
-          .position("nickname*" + this.keyName)
-          .color(x, [
-            "#4992ff",
-            "#38f385",
-            "#f45c64",
-            "#58e0f4",
-            "#0da17c",
-            "#fc7b2e",
-            "#8339df",
-            "#f467f9",
-            "#fddd60",
-          ])
-          .size(barWidth);
-      } else {
-        this.chart.tooltip({
-          custom: false,
-          triggerOn: ["touchstart"],
-          showCrosshairs: false,
-          snap: true,
-          onShow: obj => {
-            const items = obj.items;
-            items[0].name = null;
-          },
-          onHide: () => {},
-          showItemMarker: false,
-        });
-        this.chart
-          .interval()
-          .position(x + "*" + this.keyName)
-          .size(barWidth)
-          .color(x, [
-            "#4992ff",
-            "#38f385",
-            "#f45c64",
-            "#58e0f4",
-            "#0da17c",
-            "#fc7b2e",
-            "#8339df",
-            "#f467f9",
-            "#fddd60",
-          ]);
-      }
-      // 反正坐标
-      this.chart.coord({
-        transposed: this.transposed,
-      });
-      // Step 4: 渲染图表
-      this.chart.render();
-      // 绘制柱状图文本
-      // const offset = -5;
-      // const canvas = this.chart.get("canvas");
-      // const group = canvas.addGroup();
-      // let _this = this;
-      // this.list.forEach(function (obj) {
-      //   const point = _this.chart.getPosition(obj);
-      //   let val = obj[_this.keyName]
-      //   if(val >= 100000000){
-      //     val = (val / 100000000).toFixed(1) + "亿"
-      //   }else if(val >= 10000){
-      //     val = (val / 10000).toFixed(1) + "万"
-      //   }
-      //   group.addShape("text", {
-      //     attrs: {
-      //       x: point.x,
-      //       y: point.y + offset,
-      //       text: val,
-      //       textAlign: "center",
-      //       textBaseline: "bottom",
-      //       fill: "#808080",
-      //     },
-      //   });
-      // });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.chart {
-  position: relative;
-  .textGroup {
-    position: absolute;
-    overflow: hidden;
-    border-radius: 3px;
-    right: 10px;
-    color: #1989fa;
-    &::after {
-      border-radius: 3px;
-      border-color: #1989fa;
-    }
-    .text {
-      padding: 5px;
-      cursor: pointer;
-      font-size: 14px;
-      :hover {
-        color: #1989fa;
-      }
-    }
-    .act {
-      background-color: #1989fa;
-      color: #fff;
-    }
-  }
-}
-</style>

src/components/chart.vue

@@ -1,265 +0,0 @@
-<template>
-  <div class="chart">
-    <div v-if="!showListBtn" class="textGroup van-hairline--surround">
-      <span
-        :class="{ text: true, act: type === item.type }"
-        v-for="(item, i) in btnG"
-        :key="i"
-        @click="() => clickBtn(item)"
-        >{{ item.name }}</span
-      >
-    </div>
-    <canvas
-      ref="chart"
-      :width="canvasRegion.width"
-      :height="canvasRegion.height"
-    ></canvas>
-  </div>
-</template>
-
-<script>
-// import F2 from "@antv/f2";
-const F2 = require("@antv/f2/lib/core");
-require("@antv/f2/lib/geom/line");
-require("@antv/f2/lib/geom/point");
-require("@antv/f2/lib/geom/area");
-const GroupAnimation = require("@antv/f2/lib/animation/detail");
-F2.Chart.plugins.register(GroupAnimation); // 这里进行全局注册，也可以给 chart 的实例注册
-const Tooltip = require("@antv/f2/lib/plugin/tooltip");
-F2.Chart.plugins.register(Tooltip);
-export default {
-  name: "chart",
-  props: {
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: "1h",
-    },
-    showListBtn: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  components: {},
-  data() {
-    return {
-      setInterval: undefined,
-      setTimeout: undefined,
-      chart: undefined,
-      btnG: [
-        {
-          name: "1小时",
-          type: "6m",
-        },
-        {
-          name: "24小时",
-          type: "24h",
-        },
-        {
-          name: "7天",
-          type: "7d",
-        },
-        {
-          name: "30天",
-          type: "30d",
-        },
-      ],
-      canvasRegion: {
-        width: 0,
-        height: 0,
-      },
-    };
-  },
-  mounted() {
-    let w = document.body.clientWidth || 0;
-    let h = (document.body.clientHeight - 134) / 3;
-    this.canvasRegion = {
-      width: w > 1200 ? 1200 : w,
-      height: h,
-    };
-    if (!this.list.length) return;
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  watch: {
-    list(n) {
-      this.setTimeout && clearTimeout(this.setTimeout);
-      this.setInterval && clearTimeout(this.setInterval);
-      this.chart.changeData(n);
-      this.chart.repaint();
-      this.init();
-    },
-  },
-  destroyed() {
-    console.log("--销毁");
-  },
-  methods: {
-    init() {
-      this.chart = new F2.Chart({
-        el: this.$refs.chart,
-        pixelRatio: window.devicePixelRatio,
-      });
-      this.chart.source(this.list);
-      this.chart.scale("date", {
-        range: [0, 1],
-        type: "cat",
-        tickCount: 3,
-      });
-      this.chart.tooltip({
-        custom: true,
-        triggerOn: ["touchstart"],
-        showCrosshairs: true,
-        layout: "vertical",
-        snap: true,
-        crosshairsType: "xy",
-        crosshairsStyle: {
-          lineDash: [2],
-        },
-        showXTip: true,
-        onChange: (obj) => {
-          const legend = this.chart.get("legendController").legends.top[0];
-          const tooltipItems = obj.items;
-          const legendItems = legend.items;
-          const map = {};
-          legendItems.forEach(function (item) {
-            map[item.name] = JSON.parse(JSON.stringify(item));
-          });
-          tooltipItems.forEach(function (item) {
-            const name = item.name;
-            const value = item.value;
-            if (map[name]) {
-              map[name].value = value;
-            }
-          });
-          let keys = Object.keys(map);
-          let listVal = [];
-          keys.map((v) => {
-            listVal.push(map[v]);
-          });
-          legend.setItems(listVal);
-        },
-        onHide: () => {
-          const legend = this.chart.get("legendController").legends.top[0];
-          legend.setItems(this.chart.getLegendItems().country);
-        },
-      });
-      this.chart.axis("date", {
-        label: function label(text, index, total) {
-          // 只显示每一年的第一天
-          const textCfg = {
-            fill: "#ccc",
-            fontSize: 14,
-          };
-          if (index === 0) {
-            textCfg.textAlign = "left";
-          } else if (index === total - 1) {
-            textCfg.textAlign = "right";
-          }
-          return textCfg;
-        },
-      });
-      this.chart.axis("value", {
-        label: function label(text) {
-          // 只显示每一年的第一天
-          const textCfg = {};
-          if(text >= 100000000){
-            textCfg.text = text / 100000000 + "亿"
-          }else if(text >= 10000){
-            textCfg.text = text / 10000 + "万"
-          } else{
-            textCfg.text = text
-          }
-          return textCfg;
-        },
-      });
-      this.chart
-        .line()
-        .shape("smooth")
-        .position("date*value")
-        .color("type", ["#7aa6e1", "#FF9933"])
-        .size("type", [1.5, 1, 1]);
-      // this.chart
-      //   .point()
-      //   .position("date*value")
-      //   .color("type", ["#7aa6e1", "#FF9933"])
-      //   .shape("smooth")
-      //   .style({
-      //     fill: "#fff",
-      //     size: 2,
-      //     lineWidth: 1,
-      //   });
-      this.chart
-        .area()
-        .shape("smooth")
-        .position("date*value")
-        .color("type", [
-          "l(90) 0:#1677ff 1:#FFFFFF",
-          "l(90) 0:#FF9933 1:#FFFFFF",
-        ]);
-      this.chart.render();
-    },
-    clickBtn(item) {
-      if (this.type === item.type) return;
-      this.chart.changeData(this.list);
-      this.chart.repaint();
-      if (item.type === "24h" || item.type === "6m") this.countFun(item);
-      this.$emit("select", item);
-    },
-    countFun(item) {
-      let time = new Date();
-      let min = time.getMinutes();
-      let remainder = min % 10;
-      this.setTimeout && clearTimeout(this.setTimeout);
-      this.setInterval && clearTimeout(this.setInterval);
-      if (remainder === 1) {
-        this.setInterval = setInterval(() => {
-          console.log("定时");
-          this.$emit("select", item);
-        }, 600000);
-      } else {
-        this.setTimeout = setTimeout(() => {
-          clearTimeout(this.setTimeout);
-          this.$emit("select", item);
-          this.setInterval = setInterval(() => {
-            console.log("定时");
-            this.$emit("select", item);
-          }, 600000);
-        }, (11 - remainder) * 1000 * 60);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.chart {
-  position: relative;
-  .textGroup {
-    position: absolute;
-    overflow: hidden;
-    top: 15px;
-    right: 10px;
-    font-size: 0;
-    color: #1989fa;
-    &::after {
-      border-radius: 3px;
-      border-color: #1989fa;
-    }
-    .text {
-      padding: 0 3px;
-      display: inline-block;
-      text-align: center;
-      cursor: pointer;
-      font-size: 14px;
-    }
-    .act {
-      background-color: #1989fa;
-      color: #fff;
-    }
-  }
-}
-</style>

src/components/headTabs.vue

@@ -1,159 +0,0 @@
-<template>
-  <div>
-    <van-sticky :offset-top="40">
-      <van-row class="headTabs">
-        <van-col span="6">总浏览量：</van-col>
-        <van-col span="6">{{ data.read | formatNumber }}</van-col>
-        <van-col span="6">原创量：</van-col>
-        <van-col span="6">{{ data.totalOri | formatNumber }}</van-col>
-      </van-row>
-      <van-row class="headTabs">
-        <van-col span="6">总点赞数：</van-col>
-        <van-col span="6">{{ data.totalLikes | formatNumber }}</van-col>
-        <van-col span="6">总评论数：</van-col>
-        <van-col span="6">{{ data.talk | formatNumber }}</van-col>
-      </van-row>
-      <van-row class="headTabs">
-        <van-col span="6">总转发量：</van-col>
-        <van-col span="6">{{ data.totalForward | formatNumber }}</van-col>
-        <van-col v-if="data.live_uv && data.live_uv != -1" span="7">直播观看人数：</van-col>
-        <van-col v-if="data.live_uv && data.live_uv != -1" span="5">{{ data.live_uv | formatNumber }}</van-col>
-      </van-row>
-      <van-row class="headTabs" v-if="(data.live_uv && data.live_digg != -1) || (data.live_uv && data.live_comment != -1)">
-        <van-col v-if="data.live_uv && data.live_digg != -1" span="7">直播点赞数：</van-col>
-        <van-col v-if="data.live_uv && data.live_digg != -1" span="5">{{ data.live_digg | formatNumber }}</van-col>
-        <van-col v-if="data.live_uv && data.live_comment != -1" span="7">直播评论数：</van-col>
-        <van-col v-if="data.live_uv && data.live_comment != -1" span="5">{{ data.live_comment | formatNumber }}</van-col>
-      </van-row>
-    </van-sticky>
-    <div class="pKvm" >
-          </div>
-          <div class="pKvm">
-            <div class="bg">
-              <div class="kvm" v-if="kuaishou || douyin" @click="toLive">
-                <div class="kvmText" style="line-height: 2em">直播</div>
-              </div>
-            </div>
-            <div class="bg">
-              <div class="kvm" v-if="pageData.sonlist" @click="toScend">
-                <div class="kvmText">二次传播</div>
-              </div>
-            </div>
-          </div>
-  </div>
-</template>
-
-<script>
-import vanSticky from "vant/lib/sticky";
-import "vant/lib/sticky/style";
-import vanRow from "vant/lib/row";
-import "vant/lib/row/style";
-import vanCol from "vant/lib/col";
-import "vant/lib/col/style";
-export default {
-  name: "headTabs",
-  mounted() {},
-  props: {
-    kuaishou:{
-      type: Boolean,
-      default: false
-    },
-    douyin:{
-      type: Boolean,
-      default: false
-    },
-    data: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    pageData:{
-      type: Object,
-      default: () =>{
-        return {}
-      }
-    }
-  },
-  filters: {
-    formatNumber(data) {
-      if (isNaN(data)) return 0;
-      if (data > 10000) return (data / 10000).toFixed(1) - 0 + "万";
-      return data;
-    },
-  },
-  data() {
-    return {
-      countData: {
-        totalPosts: 0,
-        totalLikes: 0,
-        totalForwarding: 0,
-      },
-    };
-  },
-  components: {
-    vanSticky,
-    vanRow,
-    vanCol
-  },
-  created() {},
-  methods: {
-    toScend(){
-      this.$router.push({
-        path: '/secondTopic/0',
-        query: {
-          id: this.pageData.id,
-          title: this.pageData.title,
-          sonlist: this.pageData.sonlist,
-        },
-      });
-    },
-    toLive(){
-      this.$router.push({
-        path: '/live',
-        query: {
-          id: this.pageData.id,
-          title: this.pageData.title,
-          douyin: this.douyin,
-          kuaishou: this.kuaishou,
-        },
-      });
-    }
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.headTabs {
-  background-color: #fff;
-  font-size: 14px;
-  text-align: center;
-  height: 24px;
-  line-height: 24px;
-  padding: 3px 0;
-}
-
-.pKvm {
-    text-align: right;
-    .bg{
-      display: inline-block;
-      vertical-align: middle;
-    .kvm {
-      width: 3.5em;
-      color: #fff;
-      background-color: #1989fa;
-      height: 3.5em;
-      border-radius: 50%;
-      text-align: center;
-      box-shadow: 0 0 7px #1989fa;
-      z-index: 1;
-    }
-    .kvmText {
-      padding-top: 0.7em;
-      width: 2em;
-      margin: 0 auto;
-      line-height: 1.1em;
-    }
-    }
-  }
-</style>

src/components/liveHead.vue

@@ -1,91 +0,0 @@
-<template>
-    <div>
-      <van-sticky :offset-top="0">
-        <van-row class="headTabs">
-          <van-col span="6">粉丝数：</van-col>
-          <van-col span="6">{{ data.total_fans_count | formatNumber }}</van-col>
-          <van-col span="6">直播评论数：</van-col>
-          <van-col span="6">{{ data.msg_count | formatNumber }}</van-col>
-        </van-row>
-        <van-row class="headTabs">
-          <van-col span="6">直播点赞数：</van-col>
-          <van-col span="6">{{ data.like_count | formatNumber }}</van-col>
-          <van-col span="7">直播观看人数：</van-col>
-          <van-col span="5  ">{{ data.peopel_time | formatNumber }}</van-col>
-        </van-row>
-      </van-sticky>
-    </div>
-  </template>
-  
-  <script>
-  import vanSticky from "vant/lib/sticky";
-  import "vant/lib/sticky/style";
-  import vanRow from "vant/lib/row";
-  import "vant/lib/row/style";
-  import vanCol from "vant/lib/col";
-  import "vant/lib/col/style";
-  export default {
-    name: "headTabs",
-    mounted() {},
-    props: {
-      data: {
-        type: Object,
-        default: () => {
-          return {};
-        },
-      },
-      pageData:{
-        type: Object,
-        default: () =>{
-          return {}
-        }
-      }
-    },
-    filters: {
-      formatNumber(data) {
-        if (isNaN(data)) return 0;
-        if (data > 10000) return (data / 10000).toFixed(1) - 0 + "万";
-        return data;
-      },
-    },
-    data() {
-      return {
-        countData: {
-          totalPosts: 0,
-          totalLikes: 0,
-          totalForwarding: 0,
-        },
-      };
-    },
-    components: {
-      vanSticky,
-      vanRow,
-      vanCol,
-    },
-    created() {},
-    methods: {
-      toScend(){
-        this.$router.push({
-          path: '/secondTopic/0',
-          query: {
-            id: this.pageData.id,
-            title: this.pageData.title,
-            sonlist: this.pageData.sonlist,
-          },
-        });
-      }
-    },
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  .headTabs {
-    background-color: #fff;
-    font-size: 14px;
-    text-align: center;
-    height: 24px;
-    line-height: 24px;
-    padding: 3px 0;
-  }
-  </style>
-  

src/components/tabs.vue

@@ -1,136 +0,0 @@
-<template>
-  <div>
-    <van-sticky>
-      <div class="groupList van-hairline--bottom">
-        <span
-          :class="{
-            groupItem: true,
-            act: item.id === routerData.id,
-          }"
-          :key="i"
-          v-for="(item, i) in topicOfConversation"
-        >
-          <span class="groupText" @click="() => beforeChange(item, i)">
-            <span>{{ item.title }}</span>
-          </span>
-        </span>
-      </div>
-    </van-sticky>
-    <div style="display: none">{{ address }}</div>
-  </div>
-</template>
-
-<script>
-import vanSticky from "vant/lib/sticky";
-import "vant/lib/sticky/style";
-
-import utils from "../utils/utils";
-export default {
-  name: "Tabs",
-  mounted() {},
-  props: {
-    topicOfConversation: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  filters: {},
-  data() {
-    return {
-      routerData: {},
-      touterSonData: {},
-    };
-  },
-  components: {
-    vanSticky,
-  },
-  computed: {
-    showTitle() {
-      return data => {
-        let title = data.title;
-        if (
-          this.routerData.id !== data.id ||
-          this.routerData.select === this.routerData.id
-        )
-          return title;
-        this.routerData.childList.map(v => {
-          if (v.id == this.routerData.select) title = v.title;
-        });
-        return title;
-      };
-    },
-    address() {
-      return this.topicOfConversation;
-    },
-  },
-  created() {
-    this.showTabs();
-  },
-  methods: {
-    showTabs() {
-      let id = utils.getUrl("id");
-      let isSecond =
-        this.$route.name === "secondTopic" ||
-        this.$route.name === "secondTopicIndex";
-      isSecond && (id = this.$route.params.select);
-      let Data =
-        this.topicOfConversation.find((v, i) => {
-          if (id) return v.id == id;
-          else return i == 0;
-        }) || {};
-      if (!Data.title)
-        return this.beforeChange({ ...this.topicOfConversation[0], select: 0 });
-      this.routerData = {
-        title: Data.title,
-        id: Data.id,
-        path: Data.path,
-        select: 0,
-      };
-    },
-    beforeChange(item, i) {
-      if (item.id === this.routerData.id) return;
-      item.select = i;
-      this.routerData = item;
-      this.$emit("toRouter", item);
-    }
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.groupList {
-  height: 45px;
-  line-height: 45px;
-  background-color: #fff;
-  font-size: 14px;
-  white-space: nowrap;
-  overflow-y: hidden;
-  overflow-x: scroll;
-  padding-left: 8px;
-  .groupItem {
-    border-bottom: 2px solid #fff;
-    padding: 2px;
-    &:not(:first-child) {
-      margin-left: 8px;
-    }
-    .groupText {
-      padding: 2px 8px;
-      display: inline-block;
-    }
-    .van-icon {
-      vertical-align: middle;
-    }
-  }
-  .act {
-    border-bottom-color: #ee0a24;
-  }
-}
-.van-overlay {
-  z-index: 100;
-}
-.pickerLocal {
-  position: fixed;
-  width: 100vw;
-  bottom: 0;
-}
-</style>

src/components/workCloud.vue

@@ -1,169 +0,0 @@
-<template>
-  <div>
-    <van-cell :title="name"></van-cell>
-    <canvas
-      ref="chart"
-      :width="canvasRegion.width"
-      :height="canvasRegion.height"
-    ></canvas>
-  </div>
-</template>
-
-<script>
-// import F2 from "@antv/f2";
-const F2 = require("@antv/f2/lib/core");
-import DataSet from "@antv/data-set";
-import vanCell from "vant/lib/cell";
-import "vant/lib/cell/style";
-export default {
-  name: "chart",
-  props: {
-    className: {
-      type: String,
-      default: "",
-    },
-    name: {
-      type: String,
-      default: "",
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    keyName: {
-      type: String,
-      default: "",
-    },
-    count: {
-      type: Number,
-      default: 10,
-    },
-  },
-  components: {
-    vanCell,
-  },
-  data() {
-    return {
-      chart: undefined,
-      canvasRegion: {
-        width: 0,
-        height: 0,
-      },
-    };
-  },
-  mounted() {
-    let w =
-      (document.body.clientWidth || 0) > 1200
-        ? 1200
-        : document.body.clientWidth || 0;
-    let h = w * 0.8;
-    this.canvasRegion = {
-      width: w,
-      height: h,
-    };
-    // if (!this.list.length) return;
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  watch: {},
-  methods: {
-    getTextAttrs(cfg) {
-      return F2.Util.mix(
-        {},
-        {
-          fillOpacity: cfg.opacity,
-          fontSize: cfg.origin._origin.size,
-          rotate: (cfg.origin._origin.rotate * Math.PI) / 180,
-          text: cfg.origin._origin.text,
-          textAlign: "center",
-          fontFamily: cfg.origin._origin.font,
-          fill: cfg.color,
-          textBaseline: "Alphabetic",
-        },
-        cfg.style
-      );
-    },
-    init() {
-      // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
-      const dv = new DataSet.View().source(this.list);
-      const range = dv.range("value");
-      const min = range[0];
-      const max = range[1];
-      const MAX_FONTSIZE = 36; // 最大的字体
-      const MIN_FONTSIZE = 12; // 最小的字体
-      const _this = this;
-      // 给point注册一个词云的shape
-      F2.Shape.registerShape("point", "cloud", {
-        draw: function draw(cfg, container) {
-          const attrs = _this.getTextAttrs(cfg);
-          const x = cfg.x;
-          const y = this._coord.y.start - cfg.y;
-          return container.addShape("text", {
-            attrs: F2.Util.mix(attrs, {
-              x,
-              y,
-            }),
-          });
-        },
-      });
-      // 生成词云的布局
-      dv.transform({
-        type: "tag-cloud",
-        fields: ["x", "value"],
-        size: [this.canvasRegion.width, this.canvasRegion.height], // 同 canvas 画布保持一致
-        font: "Verdana",
-        padding: 0,
-        rotate: function rotate() {
-          let random = ~~(Math.random() * 4) % 4;
-          if (random === 2) {
-            random = 0;
-          }
-          return random * 25;
-        },
-        fontSize: function fontSize(d) {
-          if (d.value) {
-            return (
-              ((d.value - min) / (max - min)) * (MAX_FONTSIZE - MIN_FONTSIZE) +
-              MIN_FONTSIZE
-            );
-          }
-          return 0;
-        },
-      });
-      this.chart = new F2.Chart({
-        el: this.$refs.chart,
-        pixelRatio: window.devicePixelRatio,
-        padding: 0
-      });
-      this.chart.source(dv.rows, {
-        x: {
-          nice: false,
-        },
-        y: {
-          nice: false,
-        },
-      });
-      this.chart.legend(false);
-      this.chart.axis(false);
-      this.chart.tooltip(false);
-      let colorList = ['5', '6', '7', '8', '9', 'a', 'b',  'c'];
-      let c1 = '#', c2 = '#',c3 = '#',c4 = '#';
-      for (let i = 0; i < 8; i++) {
-        c1+= colorList[Math.floor(Math.random() * 8)]
-        c2+= colorList[Math.floor(Math.random() * 8)]
-        c3+= colorList[Math.floor(Math.random() * 8)]
-        c4+= colorList[Math.floor(Math.random() * 8)]
-      }
-
-      this.chart.point().position("x*y").color("x",[c1, c2, c3, c4]).shape("cloud");
-      // this.chart.point().position("x*y").color("x",['#99CCFF', '#FFCC99', '#FFFFCC']).shape("cloud");
-      // this.chart.point().position("x*y").color("x").shape("cloud");
-      this.chart.render();
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/main.js

@@ -3,16 +3,13 @@ import App from './App.vue'
 import router from "./router";
 import utils from "./utils/utils";
 import store from './store/index'
-import cof from "./config/index";
+import config from "./config/index";
 
 Vue.config.productionTip = false;
-Vue.prototype.$config = cof;
+Vue.prototype.$config = config;
 Vue.prototype.$utils = utils;
 
-router.beforeEach((to, from, next) => {
-  window.local_timeout && window.clearInterval(window.local_timeout);
-  next();
-});
+
 new Vue({
   router,
   store,

src/router/index.js

@@ -1,66 +1,26 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 
-Vue.use(VueRouter);
+import Skeleton from "../view/skeleton/index.vue"
 
-import yukang from "@/view/yukang/index.vue";
-import layout from "@/view/layout/index";
+Vue.use(VueRouter);
 
 const routes = [
   {
     path: "/",
-    name: "parendTopic",
-    component: layout,
+    redirect: "/home",
+    name: "index",
+    component: Skeleton,
     children: [
       {
-        path: "/contrast",
-        name: "compare",
+        path: "home",
+        name: "home",
         component: resolve => require(["@/view/index/index.vue"], resolve)
-      },
-      {
-        path: "/topic",
-        name: "topic",
-        component: yukang
-      },
-      {
-        path: "/resist-yulin",
-        name: "resist-yulin",
-        component: yukang
-      },
-      {
-        path: "/gather-yanan",
-        name: "gather-yanan",
-        component: yukang
-      },
-      {
-        path: "/gather-xian",
-        name: "gather-xian",
-        component: yukang
-      },
-      {
-        path: "/gather-tong",
-        name: "gather-tong",
-        component: yukang
-      },
-      {
-        path: "/gather-han",
-        name: "gather-han",
-        component: yukang
-      },
-      {
-        path: "/gather-shang",
-        name: "gather-shang",
-        component: yukang
-      },
+      }
     ]
   },
-  {
-    path:"/secondTopic/:select",
-    name: "secondTopic",
-    component: resolve => require(["@/view/secondTopic/index.vue"], resolve)
-  }
 ];
 
 export default new VueRouter({
-  routes
+  routes,
 });

src/view/index/index.vue

@@ -1,185 +1,14 @@
 <template>
-  <div class="compare">
-    <div class="localtable">
-      <table class="van-hairline--surround">
-        <thead class="">
-          <tr class="itemHead">
-            <td
-              colspan="1"
-              class="localCell"
-              v-for="(item, i) in tabel.headTab"
-              :key="i"
-            >
-              {{ item }}
-            </td>
-          </tr>
-        </thead>
-        <tbody class="van-hairline--top">
-          <tr
-            class="itemHead van-hairline--bottom"
-            v-for="(pitem, o) in listAll"
-            :key="o"
-          >
-            <td class="localCell">
-              {{ pitem.name }}
-            </td>
-            <td
-              class="localCell tableValue"
-              v-for="(item, i) in tabel[pitem.type]"
-              :key="i"
-            >
-              {{ item | formatNumber }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <div class="mainBody">
-      <div v-if="topicOfConversation.length">
-        <b-canvas
-          v-for="(item, i) in listAll"
-          :key="item.type"
-          keyName="value"
-          :name="item.name"
-          :list="topicOfConversation[i]"
-        ></b-canvas>
-      </div>
-    </div>
-  </div>
+    <div></div>
 </template>
 
-<script>
-import bCanvas from "@/components/bChart";
+<style lang="sass" scoped>
 
+</style>
+
+<script>
 export default {
-  name: "compare",
-  components: {
-    bCanvas,
-  },
-  data() {
-    return {
-      listAll: [
-        {
-          name: "总浏览量",
-          type: "total_pv",
-        },
-        {
-          name: "原创量",
-          type: "total_ori",
-        },
-        {
-          name: "总点赞数",
-          type: "total_digg",
-        },
-        {
-          name: "总评论数",
-          type: "total_comment",
-        },
-        {
-          name: "总转发量",
-          type: "total_forward",
-        },
-      ],
-      topicOfConversation: [],
-      tabel: [],
-      read: [],
-      me: [],
-      ori: [],
-      meType: "7d",
-      oriType: "7d",
-      readType: "7d",
-      keyWord: "榆林抗硬",
-    };
-  },
-  filters: {
-    formatNumber(data) {
-      if (isNaN(data)) return 0;
-      if (data > 10000) return (data / 10000).toFixed(1) - 0 + "万";
-      return data;
-    },
-  },
-  created() {
-    const orilist = this.$store.state.Tablist || [];
-    const topicOfConversation = [];
-    this.listAll.map((v) => {
-      let list = [];
-      orilist.map((value) => {
-        const li = value.topic_name.split("");
-        let nickname = li
-          .map((v, i) => {
-            i !== 0 && (i + 1) % 2 === 0 && (v = v + "\n");
-            return v;
-          })
-          .join("");
-        list.push({
-          name: v.name,
-          nickname,
-          value: value[v.type],
-        });
-      });
-      topicOfConversation.push(list);
-    });
-    let tabel = [];
-    orilist.map((v) => {
-      !tabel.headTab && (tabel.headTab = [""]);
-      tabel.headTab.push(v.topic_name.replace(/#/g, ""));
-      this.listAll.map((val) => {
-        let type = val.type;
-        !tabel[type] && (tabel[type] = []);
-        tabel[type].push(v[type]);
-      });
-    });
-    this.tabel = tabel;
-    this.topicOfConversation = topicOfConversation;
-  },
-  computed: {},
-  methods: {},
-  beforeDestroy() {
-    // 包含实时刷新内容，销毁实例同时销毁定时器
-    console.log("清除", window.local_timeout);
-    window.local_timeout && window.clearInterval(this.local_timeout);
-  },
-};
+    
+}
 </script>
 
-<style lang="scss">
-.local_tabel {
-  font-size: 14px;
-  margin: 3px;
-  .tableHeadHr,
-  .tableHeadBody {
-    text-align: center;
-  }
-  .tableHeadHrLeft {
-    text-align: right;
-  }
-  .tableHeadBody {
-    background-color: #fff;
-  }
-  .van-col {
-    padding: 2px 3px;
-    height: 25px;
-    line-height: 20px;
-  }
-}
-.localtable {
-  overflow-x: scroll;
-  width: 100%;
-  table {
-    margin: 0;
-    min-width: 100%;
-    font-size: 14px;
-  }
-  .itemHead {
-    white-space: nowrap;
-  }
-  .localCell {
-    padding: 0 5px;
-    text-align: center;
-    min-width: 5em;
-    height: 1.8em;
-    line-height: 1.8em;
-  }
-}
-</style>

src/view/layout/index.vue

@@ -1,108 +0,0 @@
-<template>
-  <div class="layout">
-    <Tabs
-      ref="tabs"
-      v-if="topicOfConversation.length"
-      :topicOfConversation="topicOfConversation"
-      @toRouter="toRouter"
-    />
-    <router-view class="basePage" :key="key" />
-  </div>
-</template>
-
-<script>
-import { getBase } from "@/api/getList";
-import utils from "../../utils/utils";
-
-import Tabs from "../../components/tabs";
-export default {
-  name: "layout",
-  components: {
-    Tabs,
-  },
-  data() {
-    return {
-      routerData: {},
-      topicOfConversation: [],
-    };
-  },
-  created() {
-    let season = utils.getUrl("season");
-    sessionStorage.setItem("season", season || 1);
-    this.init(); // 路由变化时更新tabs
-  },
-  mounted() {},
-  computed: {
-    key() {
-      let se = utils.getUrl("season");
-      let orise = sessionStorage.getItem("season");
-      if (se != orise) {
-        this.init();
-      } else if (utils.getUrl("id") === undefined) {
-        let i = this.$refs.tabs ? this.$refs.tabs.routerData ? this.$refs.tabs.routerData.select  ? this.$refs.tabs.routerData.select : 0 : 0 : 0;
-        this.toRouter(this.topicOfConversation[i]);
-      }
-      return this.$route.fullPath;
-    },
-  },
-  methods: {
-    init() {
-      let season = sessionStorage.getItem("season");
-      getBase({
-        season,
-      }).then(res => {
-        this.$store.commit("setTabList", res || []);
-        let list = [];
-        if (season == 1)
-          list.push({
-            title: "话题对比",
-            path: "/contrast",
-            id: -1,
-            childList: [],
-          });
-        (res || []).map(v => {
-          let childList = (v.child_list || []).map((val, i) => {
-            return {
-              title: val,
-              id: i,
-              pId: v.topic_id,
-            };
-          });
-
-          list.push({
-            title: v.alias_name,
-            real_title: v.topic_name,
-            path: "/topic",
-            id: v.topic_id,
-            childList,
-          });
-        });
-
-        this.topicOfConversation = list;
-        let i = this.$refs.tabs ? this.$refs.tabs.routerData ? this.$refs.tabs.routerData.select  ? this.$refs.tabs.routerData.select : 0 : 0 : 0;
-        this.toRouter(list[i]);
-      });
-    },
-    toRouter(params) {
-      let season = sessionStorage.getItem("season");
-      let sonlist =
-        params.childList && params.childList.length
-          ? JSON.stringify(params.childList || [])
-          : undefined;
-      sonlist = sonlist ? encodeURIComponent(sonlist) : undefined;
-      this.sId = params.id;
-      this.$router
-        .push({
-          path: params.path,
-          query: {
-            id: params.id,
-            title: params.real_title,
-            sonlist,
-            select: params.select,
-            season,
-          },
-        });
-    },
-  },
-};
-</script>

src/view/secondTopic/index.vue

@@ -1,299 +0,0 @@
-<template>
-  <div class="yukang">
-    <van-sticky :offset-top="0">
-      <div class="title" v-text="$route.query.title"></div>
-    </van-sticky>
-    <Tabs
-      v-if="topicOfConversation.length"
-      :topicOfConversation="topicOfConversation"
-      @toRouter="toRouter"
-    />
-    <head-tabs :data="allList"></head-tabs>
-    <div class="mainBody">
-      <!-- 平台对比 -->
-      <div>
-        <b-canvas
-          name="平台对比"
-          v-if="platformSort.length"
-          keyName="value"
-          className="name"
-          :legend="true"
-          :list="platformSort"
-        ></b-canvas>
-        <div v-if="userSortAll.length" class="userType">
-          <div class="textGroup van-hairline--surround">
-            <span
-              :class="{ text: true, act: selectIndex.type === item.type }"
-              v-for="(item, i) in btnG"
-              :key="i"
-              @click="() => clickBtn(item)"
-              >{{ item.name }}</span
-            >
-          </div>
-          <b-canvas
-            name="账号排名"
-            keyName="value"
-            v-if="userSortAll.length"
-            :key="selectIndex.type"
-            :list="userSort"
-          ></b-canvas>
-        </div>
-        <work-cloud
-          name="词云"
-          v-if="listOri.length"
-          :list="listOri"
-        ></work-cloud>
-      </div>
-      <!-- 抖音 -->
-      <div>
-        <b-canvas
-          name="抖音-评论排行"
-          v-if="douAllList.length"
-          keyName="comment_count"
-          :list="douAllList"
-        ></b-canvas>
-        <b-canvas
-          name="抖音-点赞排行"
-          v-if="douAllList.length"
-          keyName="digg_count"
-          :list="douAllList"
-        ></b-canvas>
-        <b-canvas
-          name="抖音-粉丝量排行"
-          v-if="douAllList.length"
-          keyName="mplatform_followers_count"
-          :list="douAllList"
-        ></b-canvas>
-      </div>
-      <!-- 快手 -->
-      <div>
-        <b-canvas
-          name="快手-播放量排行"
-          v-if="kuaiAllList.length"
-          keyName="pv"
-          :list="kuaiAllList"
-        ></b-canvas>
-        <b-canvas
-          name="快手-评论排行"
-          v-if="kuaiAllList.length"
-          keyName="comment_count"
-          :list="kuaiAllList"
-        ></b-canvas>
-      </div>
-      <!-- 微博 -->
-      <div v-if="$route.query.title != '西安'">
-        <c-canvas
-          v-if="read.length"
-          @select="selectRead"
-          :type="readType"
-          :list="read"
-        ></c-canvas>
-        <c-canvas
-          v-if="me.length"
-          @select="selectMe"
-          :type="meType"
-          :list="me"
-        ></c-canvas>
-        <c-canvas
-          v-if="ori.length"
-          @select="selectOri"
-          :type="oriType"
-          :list="ori"
-        ></c-canvas>
-      </div>
-      <!-- 央视新闻 -->
-      <div>
-        <b-canvas
-          name="央视新闻-浏览排行"
-          v-if="yangAllList.length"
-          keyName="pv"
-          :list="yangAllList"
-        ></b-canvas>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import headTabs from "@/components/headTabs";
-import cCanvas from "@/components/chart";
-import bCanvas from "@/components/bChart";
-import workCloud from "@/components/workCloud";
-import Tabs from "../../components/tabs";
-import vanSticky from "vant/lib/sticky";
-import "vant/lib/sticky/style";
-
-import ajaxMethods from "@/appMinxin/getListSecond";
-
-export default {
-  name: "App",
-  components: {
-    headTabs,
-    cCanvas,
-    bCanvas,
-    workCloud,
-    vanSticky,
-    Tabs,
-  },
-  mixins: [ajaxMethods],
-  data() {
-    return {
-      topicOfConversation: [],
-      platformList: ["浏览", "点赞", "评论", "转发"],
-      btnG: [
-        {
-          name: "点赞",
-          type: "digg_count",
-        },
-        {
-          name: "评论",
-          type: "comment_count",
-        },
-        {
-          name: "转发",
-          type: "forward_count",
-        },
-      ],
-      selectIndex: {
-        name: "点赞",
-        type: "digg_count",
-      },
-      listOri: [],
-      allList: {},
-      douAllList: [],
-      kuaiAllList: [],
-      yangAllList: [],
-      platformSort: [],
-      userSort: [],
-      userSortAll: [],
-      read: [],
-      ori: [],
-      me: [],
-      meType: "30d",
-      oriType: "30d",
-      readType: "30d",
-      pageDate: {},
-    };
-  },
-
-  created() {
-    this.topicOfConversation = this.$route.query.sonlist
-      ? JSON.parse(decodeURIComponent(this.$route.query.sonlist))
-      : [];
-    let sName =
-      this.$route.params.select >= 0 ? this.$route.params.select : undefined;
-
-    let item = this.topicOfConversation.find((v, i) => {
-      if (sName) return sName == v.id;
-      else return i === 0
-    });
-    this.pageDate = {
-      topic_name: item.alias_name || this.$route.query.title,
-    };
-    this.readType = "30d";
-    this.meType = "30d";
-    this.oriType = "30d";
-    this.select();
-  },
-  computed: {},
-  beforeRouteUpdate (to, from, next){
-    this.readType = "30d";
-    this.meType = "30d";
-    this.oriType = "30d";
-    this.select();
-    next()
-  },
-  beforeRouteLeave (to, from, next) {
-    this.readType = "30d";
-    this.meType = "30d";
-    this.oriType = "30d";
-    this.select();
-    next();
-  },
-  methods: {
-    clickBtn(item) {
-      this.selectIndex = item;
-      const list = [];
-      this.userSortAll.map((v) => {
-        // let nickname = v.nickname
-        //   ? v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n")
-        //   : "";
-        // nickname = nickname.replace(/^\n/, "");
-        const li = v.nickname.split("");
-        let nickname = li
-          .map((val, i) => {
-            i !== 0 && (i + 1) % 2 === 0 && (val = val + "\n");
-            return val;
-          })
-          .join("");
-        list.push({
-          nickname,
-          value: v[item.type],
-        });
-      });
-      this.userSort = list;
-    },
-    toRouter(e) {
-      // this.pageDate = {
-      //   topic_name: this.$route.query.title,
-      //   second_name: e.title,
-      // };
-      // this.readType = '30d';
-      // this.meType = '30d';
-      // this.oriType = '30d';
-      // this.select();
-      let title = this.$utils.getUrl("title") || "";
-      let id = this.$utils.getUrl("id") || "";
-      let sonlist = this.$utils.getUrl("sonlist") || "";
-      console.log('------',title,id,sonlist)
-      this.$router.push({
-        path: "/secondTopic/" + e.id,
-        query: {
-          id,
-          title,
-          sonlist,
-        },
-      });
-    },
-  },
-};
-</script>
-<style lang="scss" scoded>
-.yukang {
-  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
-    Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui",
-    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
-  color: #2c3e50;
-  font-weight: 400;
-  .title {
-    padding: 10px 16px 0 16px;
-  }
-  .userType {
-    position: relative;
-    .textGroup {
-      z-index: 1;
-      position: absolute;
-      overflow: hidden;
-      top: 15px;
-      right: 10px;
-      font-size: 0;
-      color: #1989fa;
-      &::after {
-        border-radius: 3px;
-        border-color: #1989fa;
-      }
-      .text {
-        padding: 0 3px;
-        display: inline-block;
-        text-align: center;
-        cursor: pointer;
-        font-size: 14px;
-      }
-      .act {
-        background-color: #1989fa;
-        color: #fff;
-      }
-    }
-  }
-}
-</style>

src/view/skeleton/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="skeleton">
+    <router-view />
+    <van-field
+      v-model="fieldValue"
+      is-link
+      readonly
+      label="话题"
+      placeholder="请选择话题"
+      @click="show = true"
+    />
+    <van-popup v-model="show" round position="bottom">
+      <van-cascader
+        v-model="cascaderValue"
+        title="请选择话题"
+        :options="options"
+        @close="show = false"
+        @finish="onFinish"
+        @change="onChange"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<style lang="sass" scoped></style>
+
+<script>
+import {
+  Cascader as vanCascader,
+  Field as vanField,
+  Popup as vanPopup,
+} from "vant";
+import "vant/lib/cascader/style";
+import "vant/lib/field/style";
+import "vant/lib/popup/style";
+export default {
+  data() {
+    return {
+      fieldValue: "",
+      cascaderValue: "",
+      show: false,
+      options: [
+        {
+          text: '第一季',
+          value: '1',
+          children: [{ text: '杭州市', value: '330100' }],
+        },
+        {
+          text: '第二季',
+          value: '2',
+          children: [{ text: '南京市', value: '320100' }],
+        },
+      ],
+    };
+  },
+  components: {
+    vanCascader,
+    vanField,
+    vanPopup,
+  },
+  methods: {
+    onFinish() {},
+    onChange(data) {
+        console.log(data)
+    //   if (value === this.options[0].value) {
+    //     setTimeout(() => {
+    //       this.options[0].children = [
+    //         { text: '杭州市', value: '330100' },
+    //         { text: '宁波市', value: '330200' },
+    //       ];
+    //     }, 500);
+    //   }
+    },
+  },
+};
+</script>

src/view/yukang/index.vue

@@ -1,238 +0,0 @@
-<template>
-  <div class="yukang">
-    <head-tabs
-      :data="allList"
-      :pageData="$route.query"
-      :douyin="isdou"
-      :kuaishou="iskuai"
-    ></head-tabs>
-    <div class="mainBody">
-      <!-- 平台对比 -->
-      <div>
-        <b-canvas
-          name="平台对比"
-          v-if="platformSort.length"
-          keyName="value"
-          className="name"
-          :legend="true"
-          :list="platformSort"
-        ></b-canvas>
-        <div v-if="userSortAll.length" class="userType">
-          <div class="textGroup van-hairline--surround">
-            <span
-              :class="{ text: true, act: selectIndex.type === item.type }"
-              v-for="(item, i) in btnG"
-              :key="i"
-              @click="() => clickBtn(item)"
-              >{{ item.name }}</span
-            >
-          </div>
-          <b-canvas
-            name="账号排名"
-            keyName="value"
-            v-if="userSortAll.length"
-            :key="selectIndex.type"
-            :list="userSort"
-          ></b-canvas>
-        </div>
-        <!-- <work-cloud
-          name="词云"
-          v-if="listOri.length"
-          :list="listOri"
-        ></work-cloud> -->
-        <div v-if="could" style="padding-left:16px">词云</div>
-        <img :src="could" v-if="could" style="width: 100%" />
-      </div>
-      <!-- 抖音 -->
-      <div>
-        <b-canvas
-          name="抖音-评论排行"
-          v-if="douAllList.length"
-          keyName="comment_count"
-          :list="douAllList"
-        ></b-canvas>
-        <b-canvas
-          name="抖音-点赞排行"
-          v-if="douAllList.length"
-          keyName="digg_count"
-          :list="douAllList"
-        ></b-canvas>
-        <b-canvas
-          name="抖音-粉丝量排行"
-          v-if="douAllList.length"
-          keyName="mplatform_followers_count"
-          :list="douAllList"
-        ></b-canvas>
-      </div>
-      <!-- 快手 -->
-      <div>
-        <b-canvas
-          name="快手-播放量排行"
-          v-if="kuaiAllList.length"
-          keyName="pv"
-          :list="kuaiAllList"
-        ></b-canvas>
-        <b-canvas
-          name="快手-评论排行"
-          v-if="kuaiAllList.length"
-          keyName="comment_count"
-          :list="kuaiAllList"
-        ></b-canvas>
-      </div>
-      <!-- 微博 -->
-      <div v-if="$route.query.title != '西安'">
-        <c-canvas
-          v-if="read.length"
-          @select="selectRead"
-          :type="readType"
-          :list="read"
-        ></c-canvas>
-        <c-canvas
-          v-if="me.length"
-          @select="selectMe"
-          :type="meType"
-          :list="me"
-        ></c-canvas>
-        <c-canvas
-          v-if="ori.length"
-          @select="selectOri"
-          :type="oriType"
-          :list="ori"
-        ></c-canvas>
-      </div>
-      <!-- 央视新闻 -->
-      <div>
-        <b-canvas
-          name="央视新闻-浏览排行"
-          v-if="yangAllList.length"
-          keyName="pv"
-          :list="yangAllList"
-        ></b-canvas>
-      </div>
-    </div>
-  </div>
-</template>
-
-
-<script>
-import headTabs from "@/components/headTabs";
-import cCanvas from "@/components/chart";
-import bCanvas from "@/components/bChart";
-// import workCloud from "@/components/workCloud";
-
-import ajaxMethods from "@/appMinxin/getList";
-
-export default {
-  name: "App",
-  components: {
-    headTabs,
-    cCanvas,
-    bCanvas,
-    // workCloud,
-  },
-  mixins: [ajaxMethods],
-  data() {
-    return {
-      platformList: ["浏览", "点赞", "评论", "转发"],
-      btnG: [
-        {
-          name: "点赞",
-          type: "digg_count",
-        },
-        {
-          name: "评论",
-          type: "comment_count",
-        },
-        {
-          name: "转发",
-          type: "forward_count",
-        },
-      ],
-      selectIndex: {
-        name: "点赞",
-        type: "digg_count",
-      },
-      listOri: [],
-      allList: {},
-      douAllList: [],
-      kuaiAllList: [],
-      yangAllList: [],
-      platformSort: [],
-      userSort: [],
-      userSortAll: [],
-      read: [],
-      ori: [],
-      me: [],
-      meType: "30d",
-      oriType: "30d",
-      readType: "30d",
-    };
-  },
-  mounted() {
-    this.select();
-  },
-  created() {},
-  computed: {},
-  methods: {
-    clickBtn(item) {
-      this.selectIndex = item;
-      const list = [];
-      this.userSortAll.map(v => {
-        // let nickname = v.nickname
-        //   ? v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n")
-        //   : "";
-        // nickname = nickname.replace(/^\n/, "");
-        const li = v.nickname.split("");
-        let nickname = li
-          .map((val, i) => {
-            i !== 0 && (i + 1) % 2 === 0 && (val = val + "\n");
-            return val;
-          })
-          .join("");
-        list.push({
-          nickname,
-          value: v[item.type],
-        });
-      });
-      this.userSort = list;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.yukang {
-  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
-    Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui",
-    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
-  color: #2c3e50;
-  font-weight: 400;
-  .userType {
-    position: relative;
-    .textGroup {
-      z-index: 1;
-      position: absolute;
-      overflow: hidden;
-      top: 15px;
-      right: 10px;
-      font-size: 0;
-      color: #1989fa;
-      &::after {
-        border-radius: 3px;
-        border-color: #1989fa;
-      }
-      .text {
-        padding: 0 3px;
-        display: inline-block;
-        text-align: center;
-        cursor: pointer;
-        font-size: 14px;
-      }
-      .act {
-        background-color: #1989fa;
-        color: #fff;
-      }
-    }
-  }
-}
-</style>