carInsightSystem/src/views/BrandComparison/brandCompateHeader/index.vue

<!--
 * @Author: your name
 * @Date: 2021-11-05 13:18:12
 * @LastEditTime: 2021-11-18 14:51:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/brandCompateHeader/index.vue
-->
<template>
    <div class="bc-d1">
        <v-label-div title="品牌对比">
            <a-button style="margin-right: 1rem" :loading="btnLoading" @click="handlerExport" v-if="getBComparison.length > 0" v-has="'btn_brand_c_toppt'">导出报告</a-button>
            <v-btn @click="goback">返回洞察详情</v-btn>
        </v-label-div>
        <div class="bc-d1-inner">
            <template v-for="(item,index) in brands">
                <div class="bc-d1-item" :key="index">
                    <div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
                        <span class="s1">{{item.name|doStr(4)}}</span>
                        <span class="s2">{{item.name|doStr(10)}}</span>
                        <span class="s3" @click="handlerDel(index)" v-if="item.isDel">删除</span>
                        <span class="s3" @click="openBrand(index)" v-else>切换品牌</span>
                    </div>
                    <img v-if="index != brands.length -1" src="../../../assets/images/comm/img_vs.png" class="d1-m1">
                </div>
            </template>
        </div>
        <iSwitchBrand :visible.sync="brandShow" @change="handlerBrand"></iSwitchBrand>
    </div>
</template>

<script>
import { getToPptTask } from "@/api/BrandInsight";
export default {
    name: "brandCompateHeader",
    props: {
        data: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    watch: {
        data: {
            handler(val) {
                if (val.length > 0) {
                    val.forEach((ele, index) => {
                        this.brands[index] = Object.assign(
                            this.brands[index],
                            ele
                        );
                    });
                }
            },
            immediate: true,
        },
    },
    data() {
        return {
            brandShow: false,
            brandIndex: 0,
            btnLoading: false,
            brands: [
                {
                    name: "",
                    isDel: false,
                },
                {
                    name: "",
                    isDel: false,
                },
                {
                    name: "",
                    isDel: false,
                },
                {
                    name: "",
                    isDel: false,
                },
                {
                    name: "",
                    isDel: false,
                },
                {
                    name: "",
                    isDel: false,
                },
            ],
        };
    },
    methods: {
        goback() {
            this.$router.go(-1);
        },
        // 打开品牌选择
        openBrand(n) {
            this.brandShow = true;
            this.brandIndex = n;
        },
        // 获取选择品牌的数据
        handlerBrand(arr) {
            let name = arr[0].brandname;
            let n = this.brands.findIndex((ele) => ele.name === name);
            if (n === -1) {
                let row = this.brands[this.brandIndex];
                row.name = name;
                row.isDel = true;
            }
            let filterArr = this.brands.filter((ele) => {
                return ele.name;
            });
            this.$emit("change", filterArr);
        },
        // 删除
        handlerDel(n) {
            let row = this.brands[n];
            row.name = "";
            row.isDel = false;
            let filterArr = this.brands.filter((ele) => {
                return ele.name;
            });
            this.$emit("del", n);
            this.$emit("change", filterArr);
        },
        // 导出报告
        handlerExport() {
            this.btnLoading = true;
            let arr = this.getBComparison;
            let brands = [];
            arr.forEach((ele) => {
                brands.push(ele.name);
            });
            let sBrand = brands.toString();
            let obj = Object.assign({}, this.getCtime2, {
                token: this.getToken,
                iContrastType: 1,
                sBrand: sBrand
            });
            getToPptTask(obj).then(() => {
                this.$notification.open({
                    message: `数据生成中`,
                    description: '请前往个人中心查看下载进度',
                    placement: 'bottomRight',
                });
                this.btnLoading = false;
            })
        },
    },
};
</script>

<style lang="less" scoped>
.bc-d1 {
    width: 100%;
    height: 222px;
    border: 2px solid #0f2a4d;
    .bc-d1-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .bc-d1-item {
            display: inline-block;
            display: flex;
            justify-content: flex-start;
        }
        .d1-m1 {
            width: 96px;
            height: 102px;
        }
        .d1-item {
            position: relative;
            width: 228.5px;
            height: 120px;
            background-image: url("../../../assets/images/BrandInsight/img_pd.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;

            .s1 {
                position: absolute;
                font-size: 14px;
                color: #b2daf8;
                top: 52px;
                left: 43px;
            }
            .s2 {
                position: absolute;
                top: 50px;
                left: 110px;
                color: #fff;
                font-size: 20px;
            }
            .s3 {
                display: block;
                position: absolute;
                top: 0px;
                right: 0px;
                width: 95px;
                height: 28px;
                background-image: url("../../../assets/images/BrandInsight/img_xbut.png");
                background-repeat: no-repeat;
                background-size: cover;
                color: #4390ba;
                text-align: center;
                line-height: 28px;
                font-size: 12px;
                cursor: pointer;
            }
        }
    }
}
</style>