carInsightSystem/src/views/ModelComparison/brandEventComparison/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-15 17:33:28
 * @LastEditTime: 2021-11-12 10:02:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
-->
<template>
    <div class="bec-outter" v-loading="load">
        <v-label-div title="车型事件对比"> </v-label-div>
        <div class="bec-inner">
            <v-label-div title="渠道声量对比" :showLine="false" :eStyle="{ 'border-style': 'none' }">
            </v-label-div>
            <div class="bec-inner-1">
                <v-echarts :opt="opt1"></v-echarts>
            </div>
        </div>
        <v-label-div title="事件分类" :showLine="false" :eStyle="{ 'border-style': 'none' }">
        </v-label-div>
        <div class="bec-one">
           <v-echarts :opt="opt2"></v-echarts>
        </div>
        <eventBrandTonalDistribution></eventBrandTonalDistribution>
    </div>
</template>

<script>
import { getSourcetypeC } from "@/api/BrandComparison/HotEvent.js";
import { getEventsSeriesNameC } from "@/api/ModelComparison";
import eventBrandTonalDistribution from "../eventBrandTonalDistribution"
import createOpt from "./opt";
import createOpt1 from "./opt1"
export default {
    name: "brandEventComparison",
    components: {
      eventBrandTonalDistribution
    },
    data() {
        return {
            load: false,
            opt1: {},
            opt2: {},
            form: {
                token: "",
                sBrand: "",
                sSeriesName: "",
                iContrastType: 2,
            },
            colors: [
                "#3373CC",
                "#63AECC",
                "#54BF93",
                "#CC9D12",
                "#CC7733",
                "#CC5B41",
            ],
           
        };
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
            this.form.token = this.getToken;
            let arr = this.getMComparison;
            let brands = [];
            let models = [];
            arr.forEach((ele) => {
                brands.push(ele.brand);
                models.push(ele.model);
            });
            this.form.sBrand = brands.toString();
            this.form.sSeriesName = models.toString();
            this.load = true;
            Promise.all([this.getData(),this.getTypeData()]).then(() => {
              this.load = false;
            })  
        },
        getData() {
            return new Promise((resolve, reject) => {
                let obj = Object.assign({}, this.getCtime2, this.form);
                getSourcetypeC(obj)
                    .then((res) => {
                        let data = res.data || [];
                        let dx = [];
                        data.forEach((ele) => {
                            let ab = ele.Data || {};
                            for(let key in ab) {
                              if(!dx.includes(key)) {
                                dx.push(key)
                              }  
                            }
                        });
                        this.opt1 = createOpt(data, dx);
                        resolve(data);
                    })
                    .catch(() => {
                        reject(false);
                    });
            });
        },
        getTypeData() {
            return new Promise((resolve, reject) => {
                let obj = Object.assign({}, this.getCtime2, this.form);
                getEventsSeriesNameC(obj)
                    .then((res) => {
                        let data = res.data || [];
                        let brandList = [];
                        data.forEach((e) => {
                            e.Name = e.key;
                            brandList.push(e.key);
                        });
                        this.opt2 = createOpt1(data, brandList);
                        resolve(data);
                    })
                    .catch(() => {
                        reject(false);
                    });
            });
        },
    },
};
</script>

<style lang="less" scoped>
.bec-outter {
    width: 100%;
    height: auto;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .bec-inner {
        width: 100%;
        height: 412px;
        .bec-inner-1 {
          width: 100%;
          height: calc(100% - 48px);
        }
    }
    .bec-one {
        width: 100%;
        height: 412px;
        display: flex;
        justify-content: flex-start;
        .bec-one-item {
            width: 314px;
            height: 100%;
            .s1 {
                padding-left: 16px;
                display: block;
                height: 40px;
                line-height: 40px;
                color: #fff;
                font-size: 18px;
            }
            .d1 {
                width: 100%;
                height: calc(100% - 40px);
            }
        }
    }
}
</style>