<!--
 * @Author: zuolingling zuolingling@jsnangao.com
 * @Date: 2023-08-16 11:00:36
 * @LastEditors: zuolingling zuolingling@jsnangao.com
 * @LastEditTime: 2023-08-17 14:40:03
 * @FilePath: \vue3portal\src\pages\layouts\components\Devicestatus.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
const props = defineProps({
    datas: {
        type: Object,
        default: {}
    }
});
const state = reactive({
    chartOption: {}
});
const flag = ref(false);
const processData = () => {
    const { data,legendData } = props.datas ?? [];
    let series = [
        {
            name: '设备总数',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '45%'],
            center: ['30%', '50%'],
            data: data?.[0]? [data?.[0]]: [],
            labelLine: {
                show: false
            },
            label: {
                show: false,
            }
        },
        {
            name: '设备状态',
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['30%', '50%'],
            data: data ? data?.slice(-3) : [],
            labelLine: {
                show: false
            },
            label: {
                show: false,
            }
        }
    ],
    legendformat = (name)=>{
        return `${name}：${data?.filter(it=>it.name==name)?.[0]?.value}`;
    }
    state.chartOption.series = series;
    state.chartOption.legend.data = legendData;
    state.chartOption.legend.formatter = legendformat;
}

const processOption = () => {
    state.chartOption = {
        color: ['#bea32e', '#629460', '#39bae8', '#2b4162'],
        legend: {
            data: [],
            orient: 'vertical',
            right: 20,
            top:"center",
            textStyle:{
                fontSize:14
            },
            itemGap:20
        },
        tooltip: {
            trigger: "item"
        },
        series: []
    }
    processData();
}
watch(() => props.datas, (newValue, oldValue) => {
    flag.value = true;
    processOption();
    nextTick(() => {
        flag.value = false;
    })
}, { immediate: true, deep: true });
</script>
<template>
    <echartsInit v-if="!flag" :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less"></style>
