carInsightSystem/src/views/EventDEC/tonalCommunicationPosture/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-19 19:35:25
 * @LastEditTime: 2021-11-22 10:13:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventDEC/tonalCommunicationPosture/index.vue
-->
<template>
    <div class="tcp-outter" v-loading="load">
        <v-label-div title="调性传播态势">
            <a-select v-model="form.sTimeType" :size="$vuiSize" style="width: 7rem; margin-left: 2.2rem; margin-right: 0.5rem" @change="handleChange">
                <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
                    {{ item.value }}
                </a-select-option>
            </a-select>
        </v-label-div>
        <div class="tcp-inner">
            <v-echarts :opt="opt"></v-echarts>
        </div>
    </div>
</template>

<script>
import createOpt from "./opt"
import { getAffectionsTime } from "@/api/EventdEC";
export default {
    name: "tonalCommunicationPosture",
    props: {
                id: {
                    type: String,
                    default: "",
                },
            },
    data() {
        return {
            opt: {},
            load: false,
            selDatas: [
                {
                    key: 34,
                    value: '小时'
                },
                {
                    key: 20,
                    value: '天'
                }
            ],
            form: {
                token: "",
                sRele: "",
                sTimeType: 20,
            },
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sRele = this.id;
        this.getDdta();
    },
    methods: {
        getDdta() {
            let obj = Object.assign({},this.form);
            this.load = true;
            getAffectionsTime(obj).then((res) => {
                let data = res.data || [];
                let dx = [];
                let ds = [];
                data.forEach((ele) => {
                    let key = ele.Time;
                    let value = ele.Data;
                    dx.push(key);
                    ds.push(value);
                });
                this.opt = createOpt(dx, ds, this.form.sTimeType);
                this.load = false;
            });
        },
        // 选择时间
        handleChange() {
           this.getDdta();
        },
    },
};
</script>

<style lang="less" scoped>
.tcp-outter {
    width: 1214px;
    height: 460px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .tcp-inner {
        width: 100%;
        height: calc(100% - 48px);
    }
}
</style>