carInsightSystem/src/views/EventDetails/hotOther/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-13 11:54:38
 * @LastEditTime: 2021-11-17 15:57:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventDetails/hotOther/index.vue
-->
<template>
    <div class="ho-outter" v-loading="load">
        <v-label-div title="热点事件传播导向" />
        <div class="ho-bd">
            <dv-scroll-board :config="config" :style="{ width: '100%', height: '27rem' }" @click="handlerItem"/>
        </div>
        <div class="ho-footer">
            <span class="ho-f-s1">共 <span style="color: #2c66b5;">{{total}}</span> 条</span>
            <a-pagination v-model="form.iPageIndex" :pageSize="form.iPageSize" :total="total" show-less-items  @change="handlerPagnation"/>
        </div>
    </div>
</template>

<script>
import { getHotEventsList } from "@/api/EventDetails";
export default {
    name: "hotOther",
    data() {
        return {
            currentPage: 1,
            load: false,
            form: {
                token: "",
                ssBrand: "",
                iPageIndex: 1,
                iPageSize: 20,
            },
            total: 0,
            config: {
            },
            darr: []
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sBrand = this.getBrand.brandname || "奥迪";
        this.getDdta();
    },
    methods: {
        // 获取后台数据
        getDdta() {
            let obj = Object.assign({}, this.getCtime2, this.form);
            this.load = true;
            getHotEventsList(obj).then((res) => {
                let data = res.data || [];
                let totalNum = res.totalNum || 0;
                this.total = totalNum;
                let arr = [];
                let arr2 = [];
                data.forEach((ele) => {
                    let a = [
                        `<span style='cursor: pointer;'>${ele.events_title}</span>`,
                        ele.events_influence,
                        ele.maxSourcetime,
                        ele.events_brand,
                    ];
                    let b = [
                        `<span style='cursor: pointer;'>${ele.events_title}</span>`,
                        ele.events_influence,
                        ele.maxSourcetime,
                        ele.events_brand,
                        ele.events_id
                    ];
                    arr.push(a);
                    arr2.push(b);
                });
                this.darr = arr2;
                this.config = {
                    headerBGC: "#0c203b",
                    oddRowBGC: "#173b6d",
                    evenRowBGC: "rgba(69, 149, 244, 0)",
                    rowNum: 10,
                    columnWidth: [170,60,160],
                    header: ["事件列表", "影响力", "时间", "关联品牌"],
                    data: arr,
                };
                this.load = false;
            });
        },
        // 分页处理
        handlerPagnation(page) {
            this.form.iPageIndex = page;
            this.getDdta()
        },
        handlerItem(row) {
            let ele = this.darr[row.rowIndex];
            if(row.columnIndex === 0) {
                 let id = ele[4];
                 this.$router.push({path: '/eventDEC', query: {events_id: id}});
            } 
        }
    },
};
</script>

<style lang="less" scoped>
.ho-outter {
    position: relative;
    width: 620px;
    height: 560px;
    border: 2px solid #0f2a4d;
    margin-left: 16px;
    .ho-bd {
        margin-top: 16px;
        padding: 0px 16px;
        width: 100%;
        height: calc(100% - 120px);
    }
    .ho-footer {
        position: absolute;
        padding: 0px 16px;
        width: 100%;
        height: 34px;
        left: 0px;
        bottom: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .ho-f-s1 {
            color: #fff;
            font-size: 14px;
        }
    }
}
</style>