carInsightSystem/src/views/BrandInsight/titsopo/index.vue

<!--
 * @Author: xw
 * @Date: 2021-10-12 09:32:35
 * @LastEditTime: 2021-11-12 17:00:27
 * @LastEditors: Please set LastEditors
 * @Description: 舆情传播趋势
 * @FilePath: /data-show/src/views/BrandInsight/titsopo/index.vue
-->
<template>
    <div class="tit-outter" v-loading="load">
        <div class="tit-header">
            <a-button type="primary" size="small" @click="goIDE">进入数据列表页</a-button>
            <a-button type="primary" style="margin-left: 1rem;margin-right: 1rem;" size="small" :loading="btnLoading" @click="exportData">导出报告</a-button>
        </div>
        <div class="tit-inner">
            <vLabel-div title="舆情传播趋势"></vLabel-div>
            <div class="tit-bd">
                <v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
            </div>
        </div>
    </div>
</template>

<script>
import { getSourcetypeTime, getToPptTask } from "@/api/BrandInsight";
import moment from "moment";
import createOpt from "./opt";
export default {
    name: "titsopo",
    props: ["brand"],
    data() {
        return {
            load: false,
            btnLoading: false,
            form: {
                token: "",
                sBrand: "奥迪",
            },
            opt: {},
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sBrand = this.getBrand.brandname || this.brand;
        this.getData();
    },
    methods: {
        // 获取数据
        getData() {
            let obj = Object.assign({}, this.getCtime2, this.form);
            this.load = true;
            getSourcetypeTime(obj).then((res) => {
                let data = res.data || [];
                let dx = [];
                let ds = [];
                data.forEach((ele) => {
                    let time = ele.Time;
                    let value = ele.Data;
                    dx.push(time);
                    ds.push(value);
                });
                this.opt = createOpt(dx, ds);
                this.load = false;
            });
        },
        // 前往数据表格
        goIDE() {
            this.$router.push({
                path: "/industryDataExport",
                query: {
                    token: this.getToken,
                    action: "getList",
                    sType: "BrandData",
                    brand: this.form.sBrand,
                    title: "品牌-行业数据",
                },
            });
        },
        //
        clickEchars(data = []) {
            let qudao = [];
            let startTime = "";
            let endTime = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");
            data.forEach((ele) => {
                let seriesName = ele.seriesName;
                startTime = ele.name;
                qudao.push(seriesName);
            });
            let sTimeType = 4;
            this.$router.push({
                path: "/industryDataExport",
                query: {
                    startTime,
                    endTime,
                    qudao,
                    sTimeType,
                    token: this.getToken,
                    action: "getList",
                    sType: "BrandData",
                    brand: this.form.sBrand,
                    title: "品牌-行业数据",
                },
            });
        },
        // 导出报告
        exportData() {
             let obj = Object.assign({}, this.getCtime2, this.form);
             obj.iContrastType = 1;
             this.btnLoading = true;
             getToPptTask(obj).then(res => {
                 console.log(res)
                 this.btnLoading = false;
             })
        }
    },
};
</script>

<style lang="less" scoped>
.tit-outter {
    width: 618px;
    height: 560px;
    margin-left: 16px;
    .tit-header {
        width: 100%;
        height: 48px;
        background: linear-gradient(270deg, #07192f 0%, #010b19 100%);
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .tit-inner {
        width: 100%;
        height: 490px;
        margin-top: 16px;
        border: 2px solid #0f2a4d;
        .tit-bd {
            width: 100%;
            height: calc(100% - 48px);
        }
    }
}
</style>