carInsightSystem_web/src/views/ModelEventDetails/MEDHotOther/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-13 11:54:38
 * @LastEditTime: 2021-11-25 10:23:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventDetails/hotOther/index.vue
-->
<template>
    <div class="ho-outter">
        <v-label-div title="热点事件传播导向" />
        <div class="ho-bd">
            <v-table :columns="columns" :data="tbData" tableLayout="fixed" :pagination="false">
                <template slot="events_title" slot-scope="text, record">
                    <span @click="handlerEvent(record)">{{text}}</span>
                </template>
                <template slot="events_brand" slot-scope="text, record">
                    <span @click="handlerBrand(record)">{{text}}</span>
                </template>
            </v-table>
        </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/ModelEventdetails";
export default {
    name: "MEDHotOther",
    data() {
        return {
            currentPage: 1,
            form: {
                token: "",
                ssBrand: "",
                iPageIndex: 1,
                iPageSize: 6,
                sSeriesName: "",
            },
            total: 0,
            tbData: [],
            columns: [
                {
                    title: "事件列表",
                    dataIndex: "events_title",
                    key: "events_title",
                    width: 260,
                    scopedSlots: { customRender: "events_title" },
                    ellipsis: true,
                },
                {
                    title: "影响力",
                    dataIndex: "events_influence",
                    key: "events_influence",
                },
                {
                    title: "时间",
                    dataIndex: "maxSourcetime",
                    key: "maxSourcetime",
                    width: 120,
                },
                {
                    title: "关联品牌",
                    dataIndex: "events_brand",
                    scopedSlots: { customRender: "events_brand" },
                    key: "events_brand",
                    width: 90,
                },
            ],
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sSeriesName = this.getModel.name;
        this.form.sBrand = this.getBrand.brandname || "奥迪";
        this.getDdta();
    },
    methods: {
        // 获取后台数据
        getDdta() {
            let obj = Object.assign({}, this.getCtime2, this.form);
            getHotEventsList(obj).then((res) => {
                let data = res.data || [];
                let totalNum = res.totalNum || 0;
                this.total = totalNum;
                this.tbData = data;
            });
        },
        // 分页处理
        handlerPagnation(page) {
            this.form.iPageIndex = page;
            this.getDdta();
        },
        // 跳转详情
        handlerEvent(row) {
            this.$router.push({
                path: "/eventDEC",
                query: { events_id: row.events_id },
            });
        },
        // 跳转品牌
        handlerBrand(row) {
            let obj = { brandname: row.events_brand };
            this.setBrand(obj);
            this.$router.push({
                path: "/brandInsight",
            });
        },
    },
};
</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;
        }
    }
}
/deep/ .ant-table-body {
    height: 432px;
    overflow: auto;
}
</style>