H5_Embedded_Page/src/view/yukang/index.vue

<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>