carInsightSystem/src/views/Index/index.vue

<!--
 * @Author: xw
 * @Date: 2021-10-08 09:17:42
 * @LastEditTime: 2021-10-29 21:47:51
 * @LastEditors: Please set LastEditors
 * @Description: 行业洞察
 * @FilePath: /data-show/src/views/Index/index.vue
-->
<template>
    <div class="d-container">
        <div class="In-body">
            <div class="d1">
                <real-time-event></real-time-event>
                <key-communication-positions></key-communication-positions>
                <spread-the-sound></spread-the-sound>
            </div>
            <div class="d2">
                <div class="d2-top">
                    <dynamic-number @allData="handlerAllData"></dynamic-number>
                </div>
                <div class="d2-bottom">
                    <barometer></barometer>
                    <tail-insight></tail-insight>
                </div>
            </div>
            <div class="d3">
                <sales-rank></sales-rank>
                <user-portrait></user-portrait>
                <hot-discussion-graph></hot-discussion-graph>
            </div>
        </div>
        <!--对话框-->
        <v-modal :eleStyle="{ width: '86rem', height: '50rem' }" :visible.sync="modalObj.visible" :title="modalObj.title">
            <div slot="body" :style="{padding: '1rem', height: '47rem'}">
                <!-- <vue-scroll ref="vs">
                    <v-table :columns="columns" :data="tbData" :loading="tableLoading" :pagination="false" row-key="id">
                        <template slot="titlex" slot-scope="text, record">
                            <a :href="record.url" style="color: #fff" target="_blank">{{ text }}</a>
                        </template>
                    </v-table>
                </vue-scroll> -->
                <dv-scroll-board :config="config" :style="{ width: '100%', height: '45rem' }" @click="handlerSs" />
            </div>
        </v-modal>
    </div>
</template>

<script>
import realTimeEvent from "./realTimeEvent";
import keyCommunicationPositions from "./keyCommunicationPositions";
import salesRank from "./salesRank";
import userPortrait from "./userPortrait";
import spreadTheSound from "./spreadTheSound";
import barometer from "./barometer";
import tailInsight from "./tailInsight";
import hotDiscussionGraph from "./hotDiscussionGraph";
import dynamicNumber from "./dynamicNumber";
import { getHomeList0528 } from "@/api/home";
export default {
    name: "index",
    components: {
        realTimeEvent, // 实时事件
        keyCommunicationPositions, // 传播重点阵地
        salesRank, // 热销排行
        userPortrait, // 用户画像
        spreadTheSound, // 传播声量TOP10
        barometer, // 晴雨表
        tailInsight, // 尾翼洞察
        hotDiscussionGraph, // 热议图谱
        dynamicNumber, // 中间大数据
    },
    data() {
        return {
            modalObj: {
                title: "全网数据实时动态",
                visible: false,
            },
            form: {
                sQuDao: "",
            },
            tbData: [],
            tableLoading: false,
            config: {},
            columns: [
                {
                    title: "标题",
                    key: "title",
                    dataIndex: "title",
                    scopedSlots: { customRender: "titlex" },
                    ellipsis: true,
                },
                {
                    title: "发布时间",
                    key: "sourcetime",
                    dataIndex: "sourcetime",
                    width: 180,
                },
                {
                    title: "作者",
                    key: "user_author",
                    dataIndex: "user_author",
                    width: 160,
                },
                {
                    title: "来源",
                    key: "source",
                    dataIndex: "source",
                    width: 120,
                },
            ],
        };
    },
    created() {
        // this.getTableList();
    },
    mounted() {},
    methods: {
        handlerAllData(key) {
            this.form.sQuDao = key;
            this.getTableList().then(() => {
                this.modalObj.visible = true;
            });
        },
        handlerSs() {

        },
        getTableList() {
            return new Promise((resolve, reject) => {
                let obj = Object.assign({}, this.getCommTime, this.form);
                this.tableLoading = true;
                getHomeList0528(obj)
                    .then((res) => {
                        let data = res.data || [];
                        let arr = [];
                        let arr1 = [];
                        data.forEach((ele) => {
                            let _source = ele._source;
                            let a = [
                                `<a href="${_source.url}" style="color: #fff" target="_blank">${_source.title}</a>`,
                                _source.sourcetime,
                                _source.user_author,
                                _source.source,
                            ];
                            arr1.push(a);
                            arr.push(_source);
                        });
                        this.config = {
                            headerBGC: "#0c203b",
                            oddRowBGC: "#173b6d",
                            evenRowBGC: "#010b19",
                            columnWidth: [720, 180],
                            rowNum: 16,
                            header: ["标题", "发布时间", "作者", "来源"],
                            data: arr1,
                        };
                        this.tbData = arr;
                        this.tableLoading = false;

                        resolve(arr);
                    })
                    .catch(() => {
                        reject(false);
                    });
            });
        },
    },
};
</script>

<style lang="less" scoped>
.In-body {
    padding: 0px 16px 16px 16px;
    display: flex;
    justify-content: flex-start;
    height: calc(100vh - 84px);
    .d1 {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .d3 {
       display: flex;
       flex-direction: column;  
       height: 100%;
    }
    .d2 {
        width: 936px;
        margin-left: 16px;
        display: flex;
        flex-direction: column; 
        .d2-top {
            width: 100%;
            height: 644px;
        }
        .d2-bottom {
            display: flex;
            justify-content: flex-start;
        }
    }
}
// /deep/ .ant-table-body {
//     max-height: 670px;
//     overflow: auto;
// }
</style>