carInsightSystem_web/src/lycomponents/iSwitchEvent/ec-top/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-18 10:42:29
 * @LastEditTime: 2021-11-15 16:12:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventComparison/ec-d1/index.vue
-->
<template>
    <div class="ec-d1">
        <v-label-div title="切换事件">
        </v-label-div>
        <div class="ec-d1-inner">
            <template v-for="(item,index) in list">
                <div :key="index" style="display: flex;justify-content: flex-start;">
                    <div class="ec-d1-dd1">
                        <div class="d1">{{item.events_type}}</div>
                        <div class="d2">
                            <div class="d2-d1">{{item.events_title}}</div>
                            <div class="d2-d2">
                                <span class="s1" v-if="item.minSourcetime">开始时间：</span>
                                <span class="s2">{{item.minSourcetime}}</span>
                                <span class="s1" v-if="item.events_count" style="margin-left: 40px">信息总量</span>
                                <span class="s2" style="margin-left: 8px">{{item.events_count}}</span><span v-if="item.events_count"  class="s2">条</span>
                            </div>
                        </div>
                        <div class="ec-btn" v-if="item.isDel" @click="del(index)">
                            删除事件
                        </div>
                    </div>
                    <div class="ec-d1-dd2" v-if="index % 2 == 0">
                        <img src="../../../assets/images/comm/img_vs.png" />
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    name: "ec-top",
    data() {
        return {
            list: [
                {
                    events_id: "",
                    events_typ: "",
                    events_title: "",
                    minSourcetime: "",
                    events_count: "",
                    isDel: false
                },
                {
                    events_id: "",
                    events_typ: "",
                    events_title: "",
                    minSourcetime: "",
                    events_count: "",
                    isDel: false
                },
            ],
        };
    },
    created() {
        this.initData()
    },
    methods: {
        initData() {
            if(this.getEComparison.length > 0) {
                this.list = this.getEComparison;
                this.$emit('del', this.list)
            }  
        },
        del(n) {
            let arr = [...this.list];
            let obj = {
                    events_id: "",
                    events_typ: "",
                    events_title: "",
                    minSourcetime: "",
                    events_count: "",
                    isDel: false
                }
            arr[n] = {...obj};
            this.list = arr;
            this.$emit('del', this.list)
        }
    },
};
</script>

<style lang="less" scoped>
.ec-d1 {
    width: 100%;
    height: 222px;
    border: 2px solid #0f2a4d;
    .ec-d1-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .ec-d1-dd2 {
            margin-left: 68px;
            margin-right: 68px;
        }
        .ec-d1-dd1 {
            width: 800px;
            height: 120px;
            background: linear-gradient(180deg, rgba(0, 136, 201, 0.6), rgba(0, 28, 67, 0.6));
            border-radius: 4px;
            border: 2px solid rgba(0, 145, 255, 0.6);
            margin-left: 16px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            .ec-btn {
                position: absolute;
                width: 137px;
                height: 37px;
                background-image: url("../../../assets/images/EventInsight/img_zbut.png");
                text-align: center;
                line-height: 37px;
                color: #60abcb;
                right: 0px;
                top: 0px;
                cursor: pointer;
            }
            .d1 {
                width: 86px;
                height: 86px;
                background-image: url("../../../assets/images/EventInsight/img_xlq.png");
                background-repeat: no-repeat;
                background-size: cover;
                margin-left: 14px;
                text-align: center;
                line-height: 86px;
                font-size: 14px;
                color: #97c6ec;
            }
            .dx1 {
                width: 86px;
                height: 86px;
                background-image: url("../../../assets/images/EventInsight/img_xlvq.png");
                background-repeat: no-repeat;
                background-size: cover;
                margin-left: 14px;
                text-align: center;
                line-height: 86px;
                font-size: 14px;
                color: #97c6ec;
            }
            .d2 {
                margin-left: 14px;
                .d2-d1 {
                    font-size: 20px;
                    color: #fff;
                    font-weight: 500;
                    width: 515px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .d2-d2 {
                    display: flex;
                    justify-content: flex-start;
                    .s1 {
                        display: block;
                        font-size: 14px;
                        color: #7b93a5;
                    }
                    .s2 {
                        display: block;
                        color: #fff;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
</style>