<!--
 * @Author: your name
 * @Date: 2021-10-19 19:05:36
 * @LastEditTime: 2021-11-17 10:03:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventDEC/incidentSpreadSituation/index.vue
-->
<template>
    <div class="iss-outter">
        <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="iss-inner">
            <v-echarts :opt="opt"></v-echarts>
        </div>
    </div>
</template>

<script>
import createOpt from "./opt";
import { getSourcetypeTime } from "@/api/EventdEC";
export default {
    name: "incidentSpreadSituation",
    props: {
        id: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            opt: {},
            selDatas: [
                {
                    key: 34,
                    value: "小时",
                },
                {
                    key: 20,
                    value: "天",
                },
            ],
            form: {
                token: "",
                sRele: "",
                sTimeType: 34,
            },
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sRele = this.id;
        this.getDdta();
    },
    methods: {
        getDdta() {
            let obj = Object.assign({}, this.form);
            this.load = true;
            getSourcetypeTime(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.load = false;
            });
        },
        // 选择时间
        handleChange() {
            this.getDdta();
        },
    },
};
</script>

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