carInsightSystem/src/views/ThemeComparison/ThemeIndex.vue

<!--
 * @Author: your name
 * @Date: 2021-11-05 13:56:24
 * @LastEditTime: 2021-12-16 10:03:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
-->
<template>
    <div class="d-container">
        <div class="bbc-inner">
            <themeCompateHeader ref="brandRef" @del="handlerDel"></themeCompateHeader>
            <div class="mbc-inner">
                <v-label-div title="主题分析">
                </v-label-div>
                <div class="card-outter">
                    <div class="card-items" v-for="(item, index) in myThemeArr" :key="index">
                        <div class="card-item-top">
                            <div class="card-uncomp" v-if="item.isCom">
                                <span style="margin-top: 5px">进行中</span>
                            </div>
                            <div class="card-completed" v-else>已完成</div>
                        </div>
                        <div class="card-item-data" @click="addThemeData(item)">
                            <div class="cid-title">
                              {{item.name}}
                            </div>
                            <div class="cid-data">
                                <div class="s1"><div class="s1-title">开始时间</div><div class="s1-text">{{item.startTime}}</div></div>
                                <div class="s1"><div class="s1-title">结束时间</div><div class="s1-text">{{item.endTime}}</div></div>
                                <div class="s1"><div class="s1-title">相关报道（条）</div><div class="s1-text">{{item.total}}</div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="beCpm-footer" @click="handlerSubmit">
                开始对比
            </div>
        </div> 
    </div>
</template>

<script>
import {getSchemeDataToTheme} from "@/api/ThemeAnalize"
import themeCompateHeader from "./themeCompateHeader"
export default {
    name: "BrandBeginComparte",
    components: {
        themeCompateHeader
    },
    inject: ['reload'],
    data() {
        return {
            form: {
                token: "",
                pageIndex: '',
                pageSize: '',
                sType: 'former' //former往期 now现在
            },
            chooseArr: [null, null, null, null, null, null],
            brands: [],
            myThemeArr: [],
        }
    },
    created() {
        this.form.token = this.getToken;
        this.getData();
    },
    methods: {
        // 获取全部主题
        getData() {
            let obj = Object.assign({}, this.form);
            getSchemeDataToTheme(obj).then(res => {
                let data = res.data;
                let themeArr = [];
                data.forEach(ele => {
                    let obj = {
                        guids: ele.Guids,
                        name: ele.Name,
                        startTime: ele.StartTime,
                        endTime: ele.EndTime,
                        total: ele.ReportSum,
                        isCom: true
                    };
                    //判断是否到期
                    if(new Date(ele.EndTime) <= new Date(this.getDatetime().clock + '' + this.getDatetime().sClock)) {
                        obj.isCom = false
                    }
                    themeArr.push(obj);
                })
                this.myThemeArr = themeArr;
            })
        },
        // 选择主题
        addThemeData(row) {
            for(let i = 0; i < this.chooseArr.length; i++) {
                let n = this.chooseArr.findIndex(ele =>{
                    return ele && ele.name === row.name
                })
                if(!this.chooseArr[i] && n === -1) {
                    this.chooseArr[i] = row;
                    let obj = this.$refs.brandRef.brands[i]
                    obj.name = row.name;
                    obj.guids = row.guids;
                    obj.isDel = true;
                    return;
                }
            }
        },
        // 删除
        handlerDel(n) {
            this.chooseArr[n] = null;
        },
        // 开始对比
        handlerSubmit() {
            let arr = this.$refs.brandRef.brands || [];
            let filterArr = arr.filter((ele) => {
                 return ele.name;
            });
            if(filterArr.length < 2) {
                this.$message.warning('至少2个品牌进行对比');
                return;
            }
            this.setTComparison(filterArr);
            this.setTcStatus(true);
            this.reload()
        }
    }
}
</script>

<style lang="less" scoped>
.bbc-inner {
    padding: 0px 16px 16px 16px;
}
.mbc-inner {
    width: 100%;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .card-outter {
        display: flex;
        flex-wrap:wrap;
        justify-content: flex-start;
        align-items: center;
        padding-left: 16px;
    }
}
.beCpm-footer {
    position: relative;
    width: 354px;
    height: 64px;
    background-image: url("../../assets/images/login/img_dlan_nor.png");
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%);
    cursor: pointer;
    color: #63aecc;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    line-height: 64px;
    margin-top: 16px;
}
.card-items {
    width: 446px;
    height: 240px;
    border: 2px solid #0F2A4D;
    border-radius: 4px;
    margin-top: 16px;
    margin-right: 20px;
    background: #010B19;
    .card-item-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .card-uncomp {
            color: #63AECC;
            width: 95px;
            height: 28px;
            border-radius: 0px 0px 0px 1px;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url('../../assets/images/Index/card_status.png');
            display: -webkit-box;
            -webkit-box-align: center;/*兼容FSafari、Chrome */
            -webkit-box-pack: center;/*兼容FSafari、Chrome */
        };
        .card-completed {
            color: rgb(71, 114, 145);
            width: 95px;
            height: 28px;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 0px 0px 0px 1px;
            background-image: url('../../assets/images/Index/card_status.png');
            display: -webkit-box;
            -webkit-box-align: center;/*兼容FSafari、Chrome */
            -webkit-box-pack: center;/*兼容FSafari、Chrome */
        }
    }
    .card-item-data {
        width: 100%;
        padding: 16px;
        color: white;
        .cid-title {
            height: 133px;
            font-size: 20px;
        }
        .cid-data {
            display: flex;
            justify-content: flex-start;
            .s1 {
                width: 33%;
                display: block;
                font-family: Bebas;
                font-size: 12px;
                .s1-title {
                    color: #7b93a5;
                }
            }
        }
    }
}
</style>