let table, layer, form;
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';

layui.use(["layer", "table", "form"], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;

    getProjectProgress();

    getProjectCost();

    getPprojectRisk();

    //土建专业
    getCivilEngineering();

    //电气专业
    getElectrical();

    //项目成本
    getItemCost();

    //总风险数量
    getTotalRisk();
});

function getProjectProgress() {
    initProjectProgress()
}

function initProjectProgress() {
    const myChart = echarts.init(document.getElementById("projectProgress"));
    const option = {
        title: {
            text: '当前工程进度',
            left: '48%',
            top: '30%',
            textStyle: {
                color: '#fff',
                fontSize: 15,
                fontWeight: 'normal',
            }
        },
        graphic: {
            type: 'text',
            left: '50%',
            top: '50%',
            style: {
                text: '70%',
                textAlign: 'center',
                fill: '#79FFFF',
                fontSize: 24,
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['25%', '50%'],
                center: ['30%', '50%'],
                startAngle: 90,
                hoverAnimation: false,
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: 70,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#3BE6E6"
                            },
                                {
                                    offset: 1,
                                    color: "#FFFFFF"
                                }
                            ], false),
                        }
                    },
                    {
                        value: 30,
                        itemStyle: {
                            color: 'rgba(8, 220, 224, 0.1)'
                        }
                    }
                ]
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function getProjectCost() {
    initProjectCost();
}

function initProjectCost() {
    const myChart = echarts.init(document.getElementById("projectCost"));
    const option = {
        title: {
            text: '当前成本投入',
            left: '48%',
            top: '30%',
            textStyle: {
                color: '#fff',
                fontSize: 15,
                fontWeight: 'normal',
            }
        },
        graphic: {
            type: 'text',
            left: '50%',
            top: '50%',
            style: {
                text: '70%',
                textAlign: 'center',
                fill: '#79FFFF',
                fontSize: 24,
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['25%', '50%'],
                center: ['30%', '50%'],
                startAngle: 90,
                hoverAnimation: false,
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: 70,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#3BE6E6"
                            },
                                {
                                    offset: 1,
                                    color: "#FFFFFF"
                                }
                            ], false),
                        }
                    },
                    {
                        value: 30,
                        itemStyle: {
                            color: 'rgba(8, 220, 224, 0.1)'
                        }
                    }
                ]
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function getPprojectRisk() {
    initProjectRisk();
}

function initProjectRisk() {
    const myChart = echarts.init(document.getElementById("projectRisk"));
    const option = {
        tooltip: {
            trigger: "item",
            formatter: "{b}: {c}kWh ({d}%)",
            backgroundColor: "rgba(0, 0, 0, 0.8)",
            borderColor: "#08DCE0",
            borderWidth: 1,
            textStyle: {
                color: "#fff",
            },
        },
        legend: {
            orient: "vertical",
            right: "10%",
            itemGap: 12,
            itemWidth: 20,
            itemHeight: 8,
            textStyle: {
                color: "#fff",
                fontSize: 14,
                rich: {
                    name: {
                        width: 80,
                        color: "#fff",
                    },
                    value: {
                        width: 60,
                        align: "right",
                        color: "#79FFFF",
                        fontSize: 16,
                        fontWeight: "bold",
                    },
                },
            },
            formatter: (name) => {
                const data = option.series[0].data
                const item = data.find((d) => d.name === name)
                const percent = item ? item.value : 0
                return `{name|${name}}  {value|${percent}%}`
            },
        },
        series: [
            {
                name: "用电统计",
                type: "pie",
                roseType: "radius",
                radius: [0, '70%'],
                center: ["25%", "45%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 5,
                    borderColor: "rgba(0, 0, 0, 0.3)",
                    borderWidth: 2,
                    shadowBlur: 10,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
                label: {
                    show: false,
                },
                emphasis: {
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        shadowBlur: 20,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(8, 220, 224, 0.8)",
                    },
                },
                labelLine: {
                    show: false,
                },
                data: [
                    {
                        value: 60,
                        name: "二级风险",
                        itemStyle: {
                            color: '#75F7EC',
                        },
                    },
                    {
                        value: 60,
                        name: "三级风险",
                        itemStyle: {
                            color: '#75F791',
                        },
                    },
                    {
                        value: 26,
                        name: "四级风险",
                        itemStyle: {
                            color: '#00C3F2',
                        },
                    },
                    {
                        value: 14,
                        name: "五级风险",
                        itemStyle: {
                            color: '#EB846A',
                        },
                    },
                ],
            },
        ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function getCivilEngineering() {
    let xLabel = ['xxxx-xx-01', 'xxxx-xx-02', 'xxxx-xx-03', 'xxxx-xx-04', 'xxxx-xx-05', 'xxxx-xx-06','xxxx-xx-07', 'xxxx-xx-08', 'xxxx-xx-09', 'xxxx-xx-10', 'xxxx-xx-11', 'xxxx-xx-12',]
    let expenditureData = ["12", "15", "4", "8", "13", "6","10", "11", "5", "12","10", "15"]
    let incomeData = ["4", "5", "5", "5", "5", "4","3", "5", "3","16", "5", "18"]
    initCivilEngineering( xLabel,expenditureData,incomeData);
}

function initCivilEngineering( xLabel,expenditureData,incomeData) {

    const leftChart = echarts.init(document.getElementById("civilEngineering"));
    const option =  {
        title: {
            text: '土建专业',
            textStyle: {
                color: '#ffffff',
                fontSize: fontSize,
                fontFamily: fontFamily
            },
            left: 5,
            top: 5
        },
        tooltip: {
            show:true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            borderColor: 'rgba(255,255,255,.3)',
            backgroundColor: 'rgba(19,51,55,.6)',
            textStyle: {
                color: 'white', //设置文字颜色
            },
            borderWidth: 1,
            padding: 10,
        },
        legend: {
            show:true,
            top:'5%',
            right:'4%',
            textStyle:{
                color:'#ffffff'
            }
        },
        grid: {
            top: '25%',
            left: '6%',
            right: '4%',
            bottom: '20%'
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#5A6E71',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: true,
                },
                data: xLabel,
            },
        ],
        yAxis: [{
            min: 0,
            splitNumber: 10,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.6)',
                    type: 'dashed',
                },
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(255,255,255,0.8)',
                    padding: 16
                },
                formatter: function(value) {
                    if (value === 0) {
                        return value
                    }
                    return value
                }
            },
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: '计划',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "#00FEFC",
                }
            },
            itemStyle: {
                color: "#00FEFC",
                borderWidth: 2
            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(18,86,100,0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,81, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,63, 0.8)',
                    shadowBlur: 20
                }
            },
            data: expenditureData
        }, {
            name: '实现',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(25,196,134, 1)",
                }
            },
            itemStyle: {
                color: "rgba(25,196,134, 1)",
                borderWidth: 2

            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(17,95,82, 0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,67, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,54, 0.8)',
                    shadowBlur: 20
                }
            },
            data: incomeData
        }]
    };

    leftChart.setOption(option);
    // 响应式调整
    window.addEventListener("resize", function () {
        leftChart.resize();
    });
}

function getElectrical() {
    let xLabel = ['xxxx-xx-01', 'xxxx-xx-02', 'xxxx-xx-03', 'xxxx-xx-04', 'xxxx-xx-05', 'xxxx-xx-06','xxxx-xx-07', 'xxxx-xx-08', 'xxxx-xx-09', 'xxxx-xx-10', 'xxxx-xx-11', 'xxxx-xx-12',]
    let expenditureData = ["12", "15", "4", "8", "13", "6","10", "11", "5", "12","10", "15"]
    let incomeData = ["4", "5", "5", "5", "5", "4","3", "5", "3","16", "5", "18"]
    initElectrical( xLabel,expenditureData,incomeData);
}

function initElectrical( xLabel,expenditureData,incomeData) {
    const leftChart = echarts.init(document.getElementById("electrical"));
    const option =  {
        title: {
            text: '电气专业',
            textStyle: {
                color: '#ffffff',
                fontSize: fontSize,
                fontFamily: fontFamily
            },
            left: 5,
            top: 5
        },
        tooltip: {
            show:true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            borderColor: 'rgba(255,255,255,.3)',
            backgroundColor: 'rgba(19,51,55,.6)',
            textStyle: {
                color: 'white', //设置文字颜色
            },
            borderWidth: 1,
            padding: 10,
        },
        legend: {
            show:true,
            top:'5%',
            right:'4%',
            textStyle:{
                color:'#ffffff'
            }
        },
        grid: {
            top: '25%',
            left: '6%',
            right: '4%',
            bottom: '20%'
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#5A6E71',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: true,
                },
                data: xLabel,
            },
        ],
        yAxis: [{
            min: 0,
            splitNumber: 10,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.6)',
                    type: 'dashed',
                },
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(255,255,255,0.8)',
                    padding: 16
                },
                formatter: function(value) {
                    if (value === 0) {
                        return value
                    }
                    return value
                }
            },
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: '计划',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "#00FEFC",
                }
            },
            itemStyle: {
                color: "#00FEFC",
                borderWidth: 2
            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(18,86,100,0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,81, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,63, 0.8)',
                    shadowBlur: 20
                }
            },
            data: expenditureData
        }, {
            name: '实现',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(25,196,134, 1)",
                }
            },
            itemStyle: {
                color: "rgba(25,196,134, 1)",
                borderWidth: 2

            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(17,95,82, 0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,67, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,54, 0.8)',
                    shadowBlur: 20
                }
            },
            data: incomeData
        }]
    };

    leftChart.setOption(option);
    // 响应式调整
    window.addEventListener("resize", function () {
        leftChart.resize();
    });
}

function getItemCost(){
    let xLabel = ['xxxx-xx-01', 'xxxx-xx-02', 'xxxx-xx-03', 'xxxx-xx-04', 'xxxx-xx-05', 'xxxx-xx-06','xxxx-xx-07', 'xxxx-xx-08', 'xxxx-xx-09', 'xxxx-xx-10', 'xxxx-xx-11', 'xxxx-xx-12',]
    let expenditureData = ["12", "15", "4", "8", "13", "6","10", "11", "5", "12","10", "15"]
    let incomeData = ["4", "5", "5", "5", "5", "4","3", "5", "3","16", "5", "18"]
    initItemCost(xLabel,expenditureData,incomeData)
}

function initItemCost(xLabel,expenditureData,incomeData){
    const leftChart = echarts.init(document.getElementById("itemCost"));
    const option =  {
        tooltip: {
            show:true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            borderColor: 'rgba(255,255,255,.3)',
            backgroundColor: 'rgba(19,51,55,.6)',
            textStyle: {
                color: 'white', //设置文字颜色
            },
            borderWidth: 1,
            padding: 10,
        },
        legend: {
            show:true,
            top:'15%',
            right:'4%',
            textStyle:{
                color:'#ffffff'
            }
        },
        grid: {
            top: '30%',
            left: '5%',
            right: '4%',
            bottom: '20%'
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#5A6E71',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: true,
                },
                data: xLabel,
            },
        ],
        yAxis: [{
            min: 0,
            splitNumber: 10,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.6)',
                    type: 'dashed',
                },
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(255,255,255,0.8)',
                    padding: 16
                },
                formatter: function(value) {
                    if (value === 0) {
                        return value
                    }
                    return value
                }
            },
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: '计划',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "#00FEFC",
                }
            },
            itemStyle: {
                color: "#00FEFC",
                borderWidth: 2
            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(18,86,100,0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,81, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,63, 0.8)',
                    shadowBlur: 20
                }
            },
            data: expenditureData
        }, {
            name: '实现',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(25,196,134, 1)",
                }
            },
            itemStyle: {
                color: "rgba(25,196,134, 1)",
                borderWidth: 2

            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(17,95,82, 0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,67, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,54, 0.8)',
                    shadowBlur: 20
                }
            },
            data: incomeData
        }]
    };

    leftChart.setOption(option);
    // 响应式调整
    window.addEventListener("resize", function () {
        leftChart.resize();
    });
}

function getTotalRisk(){
    initTotalRisk()
}

function initTotalRisk(){
    const myChart = echarts.init(document.getElementById("totalRisk"));
    const option = {
        tooltip: {
            trigger: "item",
            formatter: "{b}: {c}kWh ({d}%)",
            backgroundColor: "rgba(0, 0, 0, 0.8)",
            borderColor: "#08DCE0",
            borderWidth: 1,
            textStyle: {
                color: "#fff",
            },
        },
        legend: {
            orient: "vertical",
            right: "5%",
            top: "15%",
            itemGap: 22,
            itemWidth: 20,
            itemHeight: 8,
            textStyle: {
                color: "#fff",
                fontSize: 14,
                rich: {
                    name: {
                        width: 60,
                        color: "#fff",
                    },
                    value: {
                        width: 60,
                        align: "right",
                        color: "#79FFFF",
                        fontSize: 16,
                        fontWeight: "bold",
                    },
                },
            },
            formatter: (name) => {
                const data = option.series[0].data
                const item = data.find((d) => d.name === name)
                const percent = item ? item.value : 0
                return `{name|${name}}  {value|${percent}%}`
            },
        },
        series: [
            {
                name: "用电统计",
                type: "pie",
                roseType: "radius",
                radius: [0, '70%'],
                center: ["15%", "45%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 5,
                    borderColor: "rgba(0, 0, 0, 0.3)",
                    borderWidth: 2,
                    shadowBlur: 10,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
                label: {
                    show: false,
                },
                emphasis: {
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        shadowBlur: 20,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(8, 220, 224, 0.8)",
                    },
                },
                labelLine: {
                    show: false,
                },
                data: [
                    {
                        value: 60,
                        name: "二级风险",
                        itemStyle: {
                            color: '#75F7EC',
                        },
                    },
                    {
                        value: 60,
                        name: "三级风险",
                        itemStyle: {
                            color: '#75F791',
                        },
                    },
                    {
                        value: 26,
                        name: "四级风险",
                        itemStyle: {
                            color: '#00C3F2',
                        },
                    },
                    {
                        value: 14,
                        name: "五级风险",
                        itemStyle: {
                            color: '#EB846A',
                        },
                    },
                ],
            },
        ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}