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

<!--
 * @Author: your name
 * @Date: 2021-11-03 11:54:08
 * @LastEditTime: 2021-11-26 17:36:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
-->
<template>
    <div class="mccm-outter">
        <v-label-div title="切换车型">
            <a-button style="margin-right: 1rem" :loading="btnLoading" @click="handlerExport" v-if="getMComparison.length > 0" v-has="'btn_model_c_toppt'">导出报告</a-button>
            <v-btn @click="goback">返回洞察详情</v-btn>
        </v-label-div>
        <div class="mccm-inner">
            <template v-for="(item,index) in list">
                <div :key="index" style="display: flex;justify-content: flex-start;">
                    <div class="mccm-item" style="margin-left: 1rem">
                        <div class="mc-t">
                            <div class="m-t-d1">{{item.brand|doStr(4)}}</div>
                            <span class="m-t-s1">{{item.model|doStr(10)}}</span>
                        </div>
                        <div class="m-t-btn" @click="handlerDel(index)" v-if="item.isDel">删除</div>
                        <div class="m-t-btn" @click="handlerChoose(index)" v-else>切换车型</div>
                    </div>
                    <img v-if="index < list.length -1" class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
                </div>
            </template>

        </div>
        <iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel>
    </div>
</template>

<script>
import { getToPptTask } from "@/api/BrandInsight";
import { getUserSeriesName } from "@/api/comm";
export default {
    name: "brandCompateHeader",
    props: {
        data: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    watch: {
        data: {
            handler(val) {
                if (val.length > 0) {
                    val.forEach((ele, index) => {
                        this.list[index] = Object.assign(this.list[index], ele);
                    });
                }
            },
            immediate: true,
        },
    },
    data() {
        return {
            btnLoading: false,
            labelCol: { span: 9 },
            wrapperCol: { span: 14 },
            modelShow: false,
            brand: "",
            model: "",
            chooseIndex: -1,
            form: {
                token: "",
                sBrandName: "",
            },
            list: [
                {
                    brand: "",
                    model: "",
                    isDel: false,
                },
                {
                    brand: "",
                    model: "",
                    isDel: false,
                },
                {
                    brand: "",
                    model: "",
                    isDel: false,
                },
                {
                    brand: "",
                    model: "",
                    isDel: false,
                },
                {
                    brand: "",
                    model: "",
                    isDel: false,
                },
                {
                    brand: "",
                    model: "",
                    isDel: false,
                },
            ],
        };
    },
    created() {
        this.brand = this.getBrand.brandname || "奥迪";
        this.modelData();
    },
    methods: {
        goback() {
            this.$router.go(-1);
        },
        // 获取车型
        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;
            });
        },
        // 打开选择车型的弹出框
        handlerChoose(n) {
            this.chooseIndex = n;
            this.modelShow = true;
        },
        // 删除车型
        handlerDel(n) {
            let row = this.list[n];
            row.brand = "";
            row.model = "";
            row.isDel = false;
            let filterArr = this.list.filter((ele) => {
                return ele.brand && ele.model;
            });
            this.$emit("del", n);
            this.$emit("change", filterArr);
        },
        // 获取切换车型的数据
        handlerBrand(arr) {
            let n = this.list.findIndex((ele) => ele.model === arr[1].name);
            if (n != -1) return;
            let row = this.list[this.chooseIndex];
            row.brand = arr[0].brandname;
            row.model = arr[1].name;
            row.isDel = true;
            let filterArr = this.list.filter((ele) => {
                return ele.brand && ele.model;
            });
            this.$emit("change", filterArr);
        },
        handlerExport() {
            this.btnLoading = true;
            let arr = this.getMComparison;
            let brands = [];
            let models = [];
            arr.forEach((ele) => {
                brands.push(ele.brand);
                models.push(ele.model);
            });
            let sBrand = brands.toString();
            let sSeriesName = models.toString();
            let obj = Object.assign({}, this.getCtime2, {
                token: this.getToken,
                iContrastType: 2,
                sBrand: sBrand,
                sSeriesName: sSeriesName,
                sType: 'ToSeriesPptV6C'
            });
            getToPptTask(obj).then(() => {
                this.$notification.open({
                    message: `数据生成中`,
                    description: '请前往个人中心查看下载进度',
                    placement: 'bottomRight',
                });
                this.btnLoading = false;
            })
        }
    },
};
</script>

<style lang="less" scoped>
.mccm-outter {
    width: 1888px;
    height: 236px;
    border: 2px solid #0f2a4d;
    .mccm-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        .mccm-item {
            width: 230px;
            height: 160px;
            background: linear-gradient(180deg, #003a62 0%, #001c43 100%);
            border: 2px solid #0e5193;
            margin-top: 13px;
            border-radius: 2px;
            position: relative;
            .m-t-btn {
                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: 100% 100%;
                cursor: pointer;
                text-align: center;
                color: #63aecc;
                line-height: 28px;
            }
            .mc-t {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-top: 21px;
                .m-t-d1 {
                    width: 78px;
                    height: 78px;
                    background-image: url("../../../assets/images/BrandInsight/img_lq.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    line-height: 78px;
                    text-align: center;
                    font-size: 14px;
                    color: #0090ff;
                    margin-left: 17px;
                }
                .m-t-s1 {
                    display: block;
                    font-size: 20px;
                    color: #fff;
                    margin-left: 6px;
                }
            }
        }
        .mccm-vs {
            width: 78px;
            height: 78px;
            margin-top: 22px;
        }
    }
}
/deep/ .ant-form-item {
    margin-bottom: 10px;
}
/deep/ .ant-calendar-picker {
    min-width: auto !important;
}
</style>