carInsightSystem/src/views/ModelForumDetails/mfdHeader/index.vue

<!--
 * @Author: your name
 * @Date: 2021-11-09 13:51:57
 * @LastEditTime: 2021-11-10 16:08:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/ModelForumDetails/mfdHeader/index.vue
-->
<template>
    <div class="mfdh-outter" v-loading="load">
        <v-label-div title="论坛洞察详情">
            <v-btn @click="goback">返回洞察详情</v-btn>
        </v-label-div>
        <div class="mfdh-inner">
            <div class="mfdh-in-d1">
                {{this.form.sSeriesName|doStr(8)}}
            </div>
            <span class="mfdh-in-d2">        </span>
            <div class="mfdh-in-d3" style="width: 20rem">
                <img class="mfdh-m1" src="../../../assets/images/ModelInsight/ic_cbsj.png" />
                <div class="mfdh-data">
                    <span class="s1">{{Count}}</span>
                    <span class="s2">主贴发贴量(条)</span>
                </div>
            </div>
            <div class="mfdh-in-d3" style="width: 35rem">
                <img class="mfdh-m1" src="../../../assets/images/ModelInsight/ic_qrft.png" />
                <div class="mfdh-data">
                    <span class="s1">{{qrCount}}</span>
                    <span class="s2">车型千人发帖量</span>
                </div>
                <div class="mfdh-data">
                    <span class="s1">{{hyqrCount}}</span>
                    <span class="s2">行业千人发帖量</span>
                </div>
                <div class="mfdh-data">
                    <span class="s1">{{(qrCount-hyqrCount).toFixed(2)}}
                        <a-tooltip placement="topRight">
                            <template slot="title">
                                <div>千人发帖量算法：</div>
                                <div>行业千人发帖量=【（行业所有车型主贴量×1000）÷所有阅读量】÷车型数量</div>
                                <div>千人发帖量=（车型主贴量×1000）÷阅读量</div>
                                <div>千人发帖量量差=品牌千人发帖量－行业千人发帖量</div>
                            </template>
                            <a-icon type="question-circle" style="margin-left: 0.3rem;color: #5a9ebc;" />
                        </a-tooltip> 
                    </span>
                    <span class="s2">量差</span>
                </div>
            </div>
            <div class="mfdh-in-d3">
                <img class="mfdh-m1" src="../../../assets/images/ModelInsight/ic_qrpl.png" />
                <div class="mfdh-data">
                    <span class="s1">{{replyCount}}</span>
                    <span class="s2">车型千人评论量</span>
                </div>
                <div class="mfdh-data">
                    <span class="s1">{{hyreplyCount}}</span>
                    <span class="s2">行业千人评论量</span>
                </div>
                <div class="mfdh-data">
                    <span class="s1">{{(replyCount-hyreplyCount).toFixed(2)}}
                        <a-tooltip placement="topRight">
                            <template slot="title">
                                <div>千人评论量算法：</div>
                                <div>行业千人评论量=【（行业所有车型评论量×1000）÷所有阅读量】÷车型数量</div>
                                <div>千人评论量=（车型评论量×1000）÷阅读量</div>
                                <div>千人评论量量差=品牌千人评论量－行业千人评论量</div>
                            </template>
                            <a-icon type="question-circle" style="margin-left: 0.3rem;color: #5a9ebc;" />
                        </a-tooltip>
                    </span>
                    <span class="s2">量差</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getBbsCount } from "@/api/ModelForumDetails";
export default {
    name: "mfdHeader",
    data() {
        return {
            load: false,
            form: {
                token: "",
                sBrand: "",
                sSeriesName: "",
            },
            Count: 0,
            qrCount: 0,
            hyqrCount: 0,
            replyCount: 0,
            hyreplyCount: 0,
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sBrand = this.getBrand.brandname || "奥迪";
        this.form.sSeriesName = this.getModel.name;
        this.getData();
    },
    methods: {
        getData() {
            let obj = Object.assign({}, this.getCtime2, this.form);
            this.load = true;
            getBbsCount(obj).then((res) => {
                let data = res.data;
                this.Count = data.Count || 0;
                this.qrCount = data.qrCount || 0;
                this.hyqrCount = data.hyqrCount || 0;
                this.replyCount = data.replyCount || 0;
                this.hyreplyCount = data.hyreplyCount || 0;
                this.load = false;
            });
        },
        goback() {
            this.$router.go(-1)
        }
    },
};
</script>

<style lang="less" scoped>
.mfdh-outter {
    width: 100%;
    height: 222px;
    border: 2px solid #0f2a4d;
    .mfdh-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .mfdh-in-d1 {
            width: 150px;
            height: 150px;
            background-image: url("../../../assets/images/BrandInsight/img_lq.png");
            background-repeat: no-repeat;
            background-size: cover;
            text-align: center;
            line-height: 150px;
            color: #b2daf8;
            font-size: 24px;
            margin-left: 16px;
        }
        .mfdh-in-d2 {
            display: block;
            font-size: 24px;
            color: #b2daf8;
            margin-left: 16px;
            width: 280px;
        }
        .mfdh-in-d3 {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
    }
}
.mfdh-m1 {
    width: 80px;
    height: 80px;
    margin-right: 20px;
}
.mfdh-data {
    .s1 {
        font-size: 24px;
        font-family: Bebas;
        color: #ffffff;
        display: block;
    }
    .s2 {
        font-size: 14px;
        color: #8b9299;
        display: block;
    }
    margin-right: 40px;
}
</style>