carInsightSystem/src/views/ModelInsight/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-25 13:12:20
 * @LastEditTime: 2021-11-01 17:53:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/ModelInsight/index.vue
-->
<template>
    <div class="d-container">
        <div class="ml-outter">
            <div class="ml-d1">
                <ml-brand-data :brand="brand" :model="model"></ml-brand-data>
                <div class="bdl-d1-dd2">
                    <img class="m1" src="../../assets/images/ModelInsight/img_cxdb.png" @click="goRouter('/brandComparison')" />
                    <div class="bdl-d1-dd2-d1">
                        <span class="bdl-d1-dd2-d1-s1">{{model}}</span>
                    </div>
                    <img class="m2" src="../../assets/images/ModelInsight/img_qhcx.png" @click="openModel" />
                </div>
                <mlTts :brand="brand" :model="model"></mlTts>
            </div>
            <div class="bdl-d2">
                <v-label-div title="事件洞察">
                    <v-btn @click="goRouter('/eventDetails')">事件详情</v-btn>
                </v-label-div>
                <div class="bdl-d2-bd">
                    <ml-popular-events-list :brand="brand" :model="model"></ml-popular-events-list>
                    <ml-popular-events :brand="brand" :model="model"></ml-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">
                    <ml-weibo-Kol :brand="brand" :model="model"></ml-weibo-Kol>
                    <ml-weibo-portraits :brand="brand" :model="model"></ml-weibo-portraits>
                    <ml-weibo-volume-trend :brand="brand" :model="model"></ml-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">
                    <mlForumCommunicationTrend :brand="brand" :model="model"></mlForumCommunicationTrend>
                    <mlForumHotTopicDirection :brand="brand" :model="model"></mlForumHotTopicDirection>
                    <mlSpreadTOPmodels :brand="brand" :model="model"></mlSpreadTOPmodels>
                </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">
                    <mlRearWingPropagationSituation :brand="brand" :model="model"></mlRearWingPropagationSituation>
                    <mlKeyMedia :brand="brand" :model="model"></mlKeyMedia>
                    <mlPopularwordCloud :brand="brand" :model="model"></mlPopularwordCloud>
                </div>
            </div>
        </div>
        <iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel>
    </div>
</template>

<script>
import mlBrandData from "./ml-brand-data";
import mlTts from "./ml-tts";
import mlPopularEvents from "./mlPopularEvents";
import mlPopularEventsList from "./mlPopularEventsList";
import mlWeiboKol from "./mlWeiboKol";
import mlWeiboPortraits from "./mlWeiboPortraits";
import mlWeiboVolumeTrend from "./mlWeiboVolumeTrend";
import mlForumCommunicationTrend from "./mlForumCommunicationTrend";
import mlForumHotTopicDirection from "./mlForumHotTopicDirection";
import mlSpreadTOPmodels from "./mlSpreadTOPmodels";
import mlKeyMedia from "./mlKeyMedia";
import mlRearWingPropagationSituation from "./mlRearWingPropagationSituation";
import mlPopularwordCloud from "./mlPopularwordCloud";
import { getUserSeriesName } from "@/api/comm";
export default {
    name: "ModelInsight",
    inject: ['reload'],
    components: {
        mlBrandData, // 品牌数据
        mlTts, // 舆情传播趋势
        mlPopularEvents, // 热门事件列表
        mlPopularEventsList, // 热点事件
        mlWeiboKol, // 微博KOL
        mlWeiboPortraits, // 微博人物画像
        mlWeiboVolumeTrend, // 微博声量趋势
        mlForumCommunicationTrend, // 论坛传播态势
        mlForumHotTopicDirection, // 调性占比分布
        mlSpreadTOPmodels, // 阅读量占比分布
        mlKeyMedia,  // 尾翼重点媒体
        mlRearWingPropagationSituation, // 尾翼声量趋势
        mlPopularwordCloud, // 热门词云
    },
    data() {
        return {
            modelShow: false,
            brand: "",
            model: "",
            form: {
                token: "",
                sBrandName: ""
            }
        };
    },
    created() {
        this.brand = this.getBrand.brandname || "奥迪";
        this.modelData();
    },
    methods: {
        openModel() {
            this.modelShow = true;
        },
        // 获取车型
        modelData() {
            let model = this.getModel.name || "";
            if (!model) {
                this.getUserSeriesName(this.brand);
            } else {
                this.model = model;
            }
        },
        // 获取车型
        getUserSeriesName(brandName) {
            this.form.token = this.getToken;
            this.form.sBrandName = brandName;
            getUserSeriesName(this.form).then((res) => {
                let data = res.data || [];
                this.model = data[0].name;
            });
        },
        handlerBrand(arr) {
            this.setBrand(arr[0]);
            this.setModel(arr[1]);
            this.reload();
        },
    },
};
</script>

<style lang="less" scoped>
.ml-outter {
    padding: 0px 16px 16px 16px;
    .ml-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>