carInsightSystem/src/views/BrandInsight/index.vue

<!--
 * @Author: xw
 * @Date: 2021-10-11 17:59:49
 * @LastEditTime: 2021-10-28 18:37:20
 * @LastEditors: Please set LastEditors
 * @Description: 品牌洞察
 * @FilePath: /data-show/src/views/BrandInsight/index.vue
-->
<template>
    <div class="d-container">
        <div class="bdl-ouuter">
            <div class="bdl-d1">
                <div class="bdl-d1-dd1">
                    <brand-data :brand="brand"></brand-data>
                    <brand-top :brand="brand"></brand-top>
                </div>
                <div class="bdl-d1-dd2">
                    <img class="m1" src="../../assets/images/BrandInsight/img_ppdb.png" @click="goRouter('/brandComparison')"/>
                    <div class="bdl-d1-dd2-d1">
                        <span class="bdl-d1-dd2-d1-s1">{{this.brand}}</span>
                    </div>
                    <img class="m2" src="../../assets/images/BrandInsight/img_qhpp.png" @click="openBrand"/>
                </div>
                <div class="bdl-d1-dd3">
                    <titsopo :brand="brand"></titsopo>
                </div>
            </div>
            <div class="bdl-d2">
                <v-label-div title="事件洞察">
                    <v-btn @click="goRouter('/eventDetails')">事件详情</v-btn>
                </v-label-div>
                <div class="bdl-d2-bd">
                    <popular-events-list :brand="brand"></popular-events-list>
                    <popular-events :brand="brand"></popular-events>
                </div>
            </div>
            <div class="bdl-d3">
                <v-label-div title="微博洞察">
                    <v-btn @click="goRouter('/weiboDetails')">微博详情</v-btn>
                </v-label-div>
                <div class="bdl-d3-bd">
                    <weibo-Kol :brand="brand"></weibo-Kol>
                    <weibo-portraits :brand="brand"></weibo-portraits>
                    <weibo-volume-trend :brand="brand"></weibo-volume-trend>
                </div>
            </div>
            <div class="bdl-d4">
                <v-label-div title="论坛洞察">
                    <v-btn @click="goRouter('/forumDetails')">论坛详情</v-btn>
                </v-label-div>
                <div class="bdl-d4-bd">
                    <forumCommunicationTrend :brand="brand"></forumCommunicationTrend>
                    <forumHotTopicDirection :brand="brand"></forumHotTopicDirection>
                    <spreadTOPmodels :brand="brand"></spreadTOPmodels>
                </div>
            </div>
            <div class="bdl-d5">
                <v-label-div title="尾翼洞察">
                    <v-btn @click="goRouter('/tailInsightDetails')">尾翼详情</v-btn>
                </v-label-div>
                <div class="bdl-d5-bd">
                  <rearWingPropagationSituation :brand="brand"></rearWingPropagationSituation>
                  <keyMedia :brand="brand"></keyMedia>
                  <popularwordCloud :brand="brand"></popularwordCloud>
                </div>
            </div>
        </div>
        <iSwitchBrand :brand="brand" :visible.sync="brandShow" @change="handlerBrand"></iSwitchBrand>
    </div>
</template>

<script>
import brandData from "./brandData";
import brandTop from "./brandTop";
import titsopo from "./titsopo";
import popularEventsList from "./popularEventsList";
import popularEvents from "./popularEvents";
import weiboKol from "./weiboKol";
import weiboPortraits from "./weiboPortraits";
import weiboVolumeTrend from "./weiboVolumeTrend";
import forumCommunicationTrend from "./forumCommunicationTrend";
import forumHotTopicDirection from "./forumHotTopicDirection";
import spreadTOPmodels from "./spreadTOPmodels";
import rearWingPropagationSituation from "./rearWingPropagationSituation";
import keyMedia from "./keyMedia";
import popularwordCloud from "./popularwordCloud";
export default {
    name: "BrandInsight",
    inject: ['reload'],
    components: {
        brandData, // 品牌数据
        brandTop, // 品牌top车型
        titsopo, //舆情传播趋势
        popularEventsList, //热门事件列表
        popularEvents, // 热点事件
        weiboKol, // 微博KOL
        weiboPortraits, // 微博人物画像
        weiboVolumeTrend, // 微博声量趋势
        forumCommunicationTrend, //论坛传播态势
        forumHotTopicDirection, // 论坛热议话题方向
        spreadTOPmodels, // 传播TOP车型
        rearWingPropagationSituation, // 尾翼传播态势
        keyMedia, // 重点媒体
        popularwordCloud // 热门词云
    },
    data() {
      return {
        brandShow: false,
        brand: "奥迪"
      }
    },
    created() {
      this.brand = this.getBrand.brandname || '奥迪';
    },
    methods: {
      // 前往各个详情
      goRouter(path, query = {}) {
        this.$router.push({path: path, query: query});
      },
      // 打开选择品牌
      openBrand() {
        this.brandShow = true;
      },
      // 获得获取品牌
      handlerBrand(arr) {
          this.setBrand(arr[0]);
          this.setModel(arr[1]);
          this.reload();
      }
    }
};
</script>

<style lang="less" scoped>
.bdl-ouuter {
    position: relative;
    padding: 0px 16px 16px 16px;
}
.bdl-d1 {
    display: flex;
    justify-content: flex-start;
}
.bdl-d1-dd2 {
    position: relative;
    width: 620px;
    height: 560px;
    margin-left: 16px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    .m1 {
      position: absolute;
      width: 274px;
      height: 64px;
      top: 0px;
      transform: translate(0px);
      cursor: pointer;
    }
    .m2 {
      position: absolute;
      width: 274px;
      height: 64px;
      bottom: 0px;
      transform: translate(0px);
      cursor: pointer;
    }
    .bdl-d1-dd2-d1 {
        width: 470px;
        height: 520px;
        background-image: url("../../assets/images/BrandInsight/img_tz.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0 40px;
        .bdl-d1-dd2-d1-s1 {
            display: block;
            font-size: 40px;
            color: #b2daf7;
            width: 100%;
            text-align: center;
            margin-top: 150px;
        }
    }
}
.bdl-d2 {
    width: 100%;
    height: 460px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .bdl-d2-bd {
        display: flex;
        justify-content: flex-start;
        padding: 0px 16px 16px 16px;
    }
}
.bdl-d3 {
    width: 100%;
    height: 460px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    overflow: hidden;
    .bdl-d3-bd {
        display: flex;
        justify-content: flex-start;
        padding: 0px 16px 16px 16px;
    }
}
.bdl-d4 {
    width: 100%;
    height: 460px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .bdl-d4-bd {
        display: flex;
        justify-content: flex-start;
        padding: 0px 16px 16px 16px;
    }
}
.bdl-d5 {
    width: 100%;
    height: 460px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .bdl-d5-bd {
        display: flex;
        justify-content: flex-start;
        padding: 0px 16px 16px 16px;
    }
}
</style>