carInsightSystem/src/views/ThemeBoard/TransformAnalize/index.vue

<template>
  <div class="container1" v-loading="load">
      <v-label-div title="传播分析">
      </v-label-div>
      <div class="inner">
          <div class="dd1">
              <v-label-div title="核心传播网民" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
              <div class="d1-inner">
                    <div class="pv-item" v-for="(item,index) in list" :key="index">
                        <div class="dm">
                            <img class="mm1" :src="item._source.profileimgurl" width="100%" height="100%">
                        </div>
                        <div class="d-f">
                            <div class="d1">{{item._source.user_author}}</div>
                            <div class="d2">粉丝数：<span class="d2-s1">{{bigNumberTransform(item._source.weibofans)}}</span></div>
                        </div>
                    </div>
              </div>
          </div>
          <div class="dd2">
              <v-label-div title="核心传播媒体" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
                <div class="d-rank">
                <div class="rank1">
                    <v-ranking-kmd v-for="(item,index) in d1" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="goKeyMedia(item)"></v-ranking-kmd>
                </div>
                <div class="rank1" style="margin-left: 14px">
                    <v-ranking-kmd v-for="(item,index) in d2" :key="index" :lineShow="index === 0 ? false : true" :num="index + 6" :label="item.label|doStr(8)" :val="item.val" @toMedia="goKeyMedia(item)"></v-ranking-kmd>
                </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {getCoreDiffuse, getCoreWebsite} from "@/api/ThemeAnalizeDec"
import vRankingKmd from "./v-ranking-kmd"
import {bigNumberTransform} from "@/utils/gol/dataTool"
export default {
    name: "TransformAnalize",
    components: {
        vRankingKmd
    },
    data() {
        return {
            load: false,
            bigNumberTransform: bigNumberTransform,
            d1: [
                {label: '媒体1', val: 1200},
                {label: '媒体2', val: 1600},
                {label: '媒体3', val: 1800},
            ],
            d2: [
                {label: '媒体6', val: 3190}
            ],
            list: [],
            form: {
                token: ''
            }
        }
    },
    created() {
        this.form = this.$route.query;
        this.getData();
        this.getMediaData();
    },
    methods: {
        getData() {
            let obj = Object.assign({}, this.form);
            this.load = true;
            getCoreDiffuse(obj).then(res => {
                let data = res.data;
                let mediaList = []
                data.forEach(ele => {
                    let o = {
                        _source: {
                            profileimgurl: ele._source.profileimgurl,
                            user_author: ele._source.user_author,
                            weibofans: ele._source.weibofans
                        }
                    };
                    mediaList.push(o)
                })
                this.list = mediaList;
                this.load = false;
            })
        },
        getMediaData() {
            let obj = Object.assign({}, this.form);
            getCoreWebsite(obj).then(res => {
                let data = res.data;
                let mediaList = [];
                for(let key in data) {
                    let obj = {
                        label: key,
                        val: data[key]
                    };
                    mediaList.push(obj)
                }
                this.d1 = mediaList.slice(0, 5);
                this.d2 = mediaList.slice(5, 10)
            })
        },
        goKeyMedia(item) {
            console.log(item.label)
        }
    }
}
</script>

<style lang="less">
.container1 {
    width: 100%;
    height: 460px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    overflow: hidden;
    .inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        .dd1 {
            width: 944px;
            height: 100%;
            .d1-inner {
                width: 100%;
                height: calc(100% - 48px);
                margin-left: 16px;
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                .pv-item {
                    width: 285px;
                    height: 64px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    position: relative;
                    margin-right: 24px;
                    margin-top: 12px;
                    .dm {
                        position: absolute;
                        width: 68px;
                        height: 68px;
                        border-radius: 68px;
                        border: 1px solid #ccc;
                        left: 0px;
                        top: 0px;
                        background-color: #fff;
                        z-index: 10;
                        .mm1 {
                            width: 100%;
                            height: 100%;
                            border-radius: 74px;
                        }
                    }
                    .d-f {
                        position: absolute;
                        width: 249px;
                        height: 64px;
                        left: 36px;
                        padding-left: 65px;
                        background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
                        .d1 {
                            font-size: 14px;
                            color: #fff;
                            font-weight: 500;
                            margin-top: 10px;
                            height: 20px;
                        }
                        .d2 {
                            color: #70869a;
                            font-size: 12px;
                            .d2-s1 {
                                font-size: 12px;
                                font-family: Bebas;
                                color: #f49847;
                            }
                        }
                    }
                }
            }
        }
    }
}
.d-rank {
    width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
}
</style>