var selectOrg = "";
$(function(){
    changeView('u451_','全部');
    getReal();
    //工机具
    getTools();
    // 找到具有id "u455" 的元素
    var u455Element = document.getElementById('u455');
// 添加点击事件监听器
    u455Element.addEventListener('click', function() {
        location.reload(); // 刷新页面
    });
    var u456Element = document.getElementById('u456');
// 添加点击事件监听器
    u456Element.addEventListener('click', function() {
        // 在点击事件处理函数中使用window.open方法打开新页面
        window.open('http://140.210.209.102:19994/hnbcscreen/login.html?userName='+localStorage.getItem("userName")+"&passWord="+localStorage.getItem("passWord"), '_blank');  // 替换'your_custom_page_url'为您自定义页面的URL
        // window.open('http://192.168.0.14:19994/hnbcscreen/login.html?userName='+localStorage.getItem("userName")+"&passWord="+localStorage.getItem("passWord"), '_blank');  // 替换'your_custom_page_url'为您自定义页面的URL
        // window.open('http://127.0.0.1:19994/hnbcscreen/login.html?userName='+localStorage.getItem("userName")+"&passWord="+localStorage.getItem("passWord"), '_blank');  // 替换'your_custom_page_url'为您自定义页面的URL
    });

});


function getTools() {
    $.ajax({
        type: 'POST',
        async: true, // 默认异步true,false表示同步
        url: czl_ht_url + "/dataIndex/getTool",// 请求地址
        dataType: 'json', // 服务器返回数据类型
        data: {}, //获取提交的表单字段
        success: function (data) {
            data = JSON.parse(data.data);
            let bar = data.bar;
            let line = data.line;
            let allNum = parseInt(bar.dataKey);
            let valNum = parseInt(bar.dataValue);
            $("#Tools-garden-present").text(allNum);
            $("#Tools-garden-number").text(valNum);
            //设备工机具环形图
            getToolsName(allNum,valNum);

            let proName = [];
            let nums = [];
            for(var i=0;i<line.length;i++){
                let dataKey = line[i].dataKey;
                let dataValue = line[i].dataValue;
                proName.push(dataKey);
                nums.push(dataValue);
            }
            //设备工机具柱状图
            getToolsNames(proName,nums);

        }
    });
}


function getReal() {
    $.ajax({
        type: 'POST',
        async: true, // 默认异步true,false表示同步
        url: czl_ht_url + "/dataIndex/getReal",// 请求地址
        dataType: 'json', // 服务器返回数据类型
        data: {}, //获取提交的表单字段
        success: function (data) {
            data = JSON.parse(data.data);
            let bar = data.bar;
            let line = data.line;
            let allNum = parseInt(bar.dataKey);
            let valNum = parseInt(bar.dataValue);
            let dataNum = parseInt(bar.dataNum);
            $("#Real-name-present").text((parseInt(valNum)+parseInt(dataNum)));
            $("#Real-name-number").text(valNum);
            //实名制环形图
            getRealName(allNum,valNum);

            let proName = [];
            let nums = [];
            for(var i=0;i<line.length;i++){
                let dataKey = line[i].dataKey;
                let dataValue = line[i].dataValue;
                proName.push(dataKey);
                nums.push(dataValue);
            }
            //实名制柱状图
            getRealNames(proName,nums);

        }
    });
}

var textArray = ['u451_','u453_','u454_','u452_'];
function changeView(id,name) {
    for(var i=0;i<textArray.length;i++){
        if(id ==textArray[i]){
            $("#selectOrg").val(name);
            $("#"+textArray[i]).css("color","white");
            $("#"+textArray[i]+"div").css("background-color","#31A7FF");
        }else{
            $("#"+textArray[i]).css("color","#31A7FF");
            $("#"+textArray[i]+"div").css("background-color","white");
        }
    }
    dataOverview();
}

/**
 * 管理资源闲置率
 * @param dataKey 资源总数
 * @param dataValue 资源使用数
 */
function manageResource(dataKey,dataValue) {
    document.getElementById('idle-rate-num1').innerText = dataValue;
    idleManagement1(dataKey,dataValue);

}

/**
 * 分包班组资源闲置率
 * @param dataKey 资源总数
 * @param dataValue 资源使用数
 */
function subTeamResource(dataKey,dataValue) {
    document.getElementById('idle-rate-num2').innerText = dataValue;
    idleManagement2(dataKey,dataValue);
}

/**
 * 自有班组资源闲置率
 * @param dataKey 资源总数
 * @param dataValue 资源使用数
 */
function ownTeamResource(dataKey,dataValue) {
    document.getElementById('idle-rate-num6').innerText = dataValue;
    idleManagement6(dataKey,dataValue);
}

//所有数据到时候根据接口选择做对应的修改
function dataOverview() {
    //数据概览工程
    getProjectStatus();
    //数据概览分公司团队
    getBranchOfficeTeamStatus();
    //数据概览分包班组
    getSubTeamStatus();
    //数据概览自有班组
    getOwnTeamStatus();
    //数据概览设备工机具
    getToolStatus();

    getSubTeamType();
    //闲置率管理
    // document.getElementById('idle-rate-num3').innerText = '32';
    // document.getElementById('idle-rate-num4').innerText = '32';
    // document.getElementById('idle-rate-num5').innerText = '32';
    //实名制管理
    document.getElementById('Real-name-number').innerText = '6877';
    document.getElementById('Real-name-present').innerText = '12502';
    //设备工机具管理
    document.getElementById('Tools-garden-number').innerText = '6877';
    document.getElementById('Tools-garden-present').innerText = '12502';
    getProjectStatus();

    getProjectProgress();
}

/**
 * /闲置率管理环形图
 * @param dataKey 资源总数
 * @param dataValue 资源使用数
 */
function idleManagement1(dataKey,dataValue) {
    let myChart = echarts.init(document.getElementById('idle-rate1'));
    var allNum = dataKey+dataValue;
    idleEcharts('#36cf93', allNum,dataValue);
    myChart.setOption(option);
}
function idleManagement2(dataKey,dataValue) {
    let myChart = echarts.init(document.getElementById('idle-rate2'));
    var allNum = dataKey+dataValue;
    idleEcharts('#2d9afb',allNum ,dataValue);
    myChart.setOption(option);
}
function idleManagement3(dataKey,dataValue) {
    let myChart = echarts.init(document.getElementById('idle-rate3'));
    idleEcharts('#2d9afb',dataKey ,dataValue);
    myChart.setOption(option);
}
function idleManagement4(dataKey,dataValue) {
    let myChart = echarts.init(document.getElementById('idle-rate4'));
    idleEcharts('#2d9afb',dataKey ,dataValue);
    myChart.setOption(option);
}
function idleManagement5(dataKey,dataValue) {
    let myChart = echarts.init(document.getElementById('idle-rate5'));
    idleEcharts('#2d9afb',dataKey ,dataValue);
    myChart.setOption(option);
}
function idleManagement6(dataKey,dataValue) {
    let myChart = echarts.init(document.getElementById('idle-rate6'));
    let allNum = dataKey+dataValue;
    idleEcharts('#2d9afb',allNum ,dataValue);
    myChart.setOption(option);
}
//获取分包班组类型闲置个数
function getSubTeamType() {
    $.ajax({
        type: 'POST',
        async: true, // 默认异步true,false表示同步
        url: czl_ht_url + "/dataIndex/getSubTeamType",// 请求地址
        dataType: 'json', // 服务器返回数据类型
        data: {}, //获取提交的表单字段
        success: function (data) {
            let dataKey = data.data.dataKey;      //基础
            let dataValue = data.data.dataValue;  //杆塔
            let dataNum = data.data.dataNum;      //架线

            let dataKeyArray = dataKey.split("-");
            let dataValueArray = dataValue.split("-");
            let dataNumArray = dataNum.split("-");
            //alert("1=="+dataKeyArray[0]+" ,2=="+dataKeyArray[1]);

            document.getElementById('idle-rate-num3').innerText = dataKeyArray[0];
            document.getElementById('idle-rate-num4').innerText = dataValueArray[0];
            document.getElementById('idle-rate-num5').innerText = dataNumArray[0];

            idleManagement3(dataKeyArray[1],dataKeyArray[0]);
            idleManagement4(dataValueArray[1],dataValueArray[0])
            idleManagement5(dataNumArray[1],dataNumArray[0])

        }
    });
}


//数据概览设备工机具
function getToolStatus() {
    $.ajax({
        type: 'POST',
        async: true, // 默认异步true,false表示同步
        url: czl_ht_url + "/dataIndex/getToolStatus",// 请求地址
        dataType: 'json', // 服务器返回数据类型
        data: {}, //获取提交的表单字段
        success: function (data) {
            let dataKey = parseInt(data.data.dataKey);
            let dataValue = parseInt(data.data.dataValue);
            document.getElementById('Data-glance4').innerText = (dataValue +'/'+(dataKey-dataValue));
            document.getElementById('Data-glance5').innerText = ((dataValue/dataKey)*100).toFixed(2)+"%";

        }
    });
}

//数据概览自有班组
function getOwnTeamStatus() {
    $.ajax({
        type: 'POST',
        async: true, // 默认异步true,false表示同步
        url: czl_ht_url + "/dataIndex/getOwnTeamStatus",// 请求地址
        dataType: 'json', // 服务器返回数据类型
        data: {}, //获取提交的表单字段
        success: function (data) {
            let dataKey = parseInt(data.data.dataKey);
            let dataValue = parseInt(data.data.dataValue);
            document.getElementById('Data-glance2').innerText = (dataKey+'/'+dataValue);
            document.getElementById('Data-glance3').innerText = (dataKey+dataValue);
            //自有班组
            ownTeamResource(dataKey,dataValue);
        }
    });
}

//数据概览分包班组
function getSubTeamStatus() {
    $.ajax({
        type: 'POST',
        async: true, // 默认异步true,false表示同步
        url: czl_ht_url + "/dataIndex/getSubTeamStatus",// 请求地址
        dataType: 'json', // 服务器返回数据类型
        data: {}, //获取提交的表单字段
        success: function (data) {
            let dataKey = parseInt(data.data.dataKey);
            let dataValue = parseInt(data.data.dataValue);
            document.getElementById('Data-glance6').innerText = (dataKey+'/'+dataValue);
            document.getElementById('Data-glance7').innerText = (dataKey+dataValue);
            //分包资源闲置率
            subTeamResource(dataKey,dataValue);

        }
    });
}


//数据概览分公司团队
function getBranchOfficeTeamStatus() {
    $.ajax({
        type: 'POST',
        async: true, // 默认异步true,false表示同步
        url: czl_ht_url + "/dataIndex/getBranchOfficeTeamStatus",// 请求地址
        dataType: 'json', // 服务器返回数据类型
        data: {keyWord:$("#selectOrg").val()}, //获取提交的表单字段
        success: function (data) {
            let dataKey = parseInt(data.data.dataKey);
            let dataValue = parseInt(data.data.dataValue);
            document.getElementById('Data-glance').innerText = (dataKey+'/'+dataValue);
            document.getElementById('Data-glance1').innerText = (dataKey+dataValue);
            //管理资源闲置率
            manageResource(dataKey,dataValue);
        }
    });
}


//获取工程状态
function getProjectStatus() {
    $.ajax({
        type: 'POST',
        async: true, // 默认异步true,false表示同步
        url: czl_ht_url + "/dataIndex/getProjectStatus",// 请求地址
        dataType: 'json', // 服务器返回数据类型
        data: {'keyWord': $("#selectOrg").val()}, //获取提交的表单字段
        success: function (data) {
            let dataKey = parseInt(data.data.dataKey);
            let dataValue = parseInt(data.data.dataValue);
            document.getElementById('engineer').innerText = (dataKey+'/'+dataValue);
            document.getElementById('engineerNum').innerText =(dataKey+dataValue);

        }
    });
}
function getProjectProgress() {
    $.ajax({
        type: 'POST',
        mmm: true, // 默认异步true,false表示同步
        url: czl_ht_url + "/dataIndex/getProjectProgress",// 请求地址
        dataType: 'json', // 服务器返回数据类型
        data: {'keyWord': $("#selectOrg").val()}, //获取提交的表单字段
        success: function (data) {
            //alert(JSON.stringify(data))
            let obj= JSON.parse(data.data);
            let proName = obj.proName;
            let proId = obj.proId;
            let data0 = obj.data0;
            let data1 = obj.data1;
            let data2 = obj.data2;
            getProject(proName,proId,data0,data1,data2);
        }
    });
}

//项目进度柱状图
function getProject(proName,proId,data0,data1,data2) {
    let myChart = echarts.init(document.getElementById('Project'));
    var threaten_data = data0;
    var threaten_data2 = data1;
    var threaten_data3 = data2;
    var xAxis_data = proName;
    var xAxis_id = proId;
    var showNums = 18;
    if(proName.length<=5){
        showNums = 100;
    }
    var option;
    option = {
        grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '15%',
            containLabel: true
        },
        legend: {
            icon:'circle',
            right: '5%',
            top:10,
            data: ['基础','组塔','架线'],
            textStyle: {
                color: '#5b97d5'
            }
        },
        xAxis:{
            type : 'category',
            data : xAxis_data,
            axisLabel:{
                textStyle:{
                    color: '#D9DBE0',
                }
            },
            axisLine:{
                show: false,
                lineStyle:{
                    color:'#1f3a56',
                }
            },
            splitLine:{
                show: false,
            },
            axisTick:{
                show:false,
            },
        },
        yAxis :{
            type : 'value',
            axisLabel:{
                textStyle:{
                    color: '#C9CBD4'
                },
                formatter:'{value} %'
            },
            axisLine:{
                lineStyle:{
                    color:'#1f3a56',

                }
            },
            splitLine:{
                show: true,
                lineStyle:{
                    color:'#1f3a56',
                    type:"dashed"
                }
            },
        },
        tooltip: {
            show: true,
            formatter: function (params) {
                //console.log("params="+JSON.stringify(params));
                let values = "0";
                if(!isNaN(params.value)){
                    values = params.value;
                }
                return params.seriesName + ' : ' + values;
            }
        },
        series: [
            {
                name:'基础',
                type:'bar',
                barWidth : '10%',  //柱子宽度
                itemStyle:{  //柱子颜色
                    color: '#73A0FA',
                    barBorderRadius: [15, 15, 15, 15]
                },
                data : threaten_data,
            },
            {
                name:'组塔',
                type:'bar',
                barWidth : '10%',  //柱子宽度
                itemStyle:{  //柱子颜色
                    color: '#20C1F5',
                    barBorderRadius: [15, 15, 15, 15]
                },
                data : threaten_data2
            },
            {
                name:'架线',
                type:'bar',
                barWidth : '10%',  //柱子宽度
                itemStyle:{  //柱子颜色
                    color: '#FF7A8C',
                    barBorderRadius: [15, 15, 15, 15]
                },
                data : threaten_data3
            }
        ],
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: showNums
            }
        ]

    };
    myChart.setOption(option);

}

//实名制环形图
function getRealName(total, present) {
    let myChart = echarts.init(document.getElementById('Real-name-garden'));

    const percentage = (present / total) * 100;

    option = {
        // title: {
        //     text: 'linear 实现伪弧形渐变',
        //     left: 'center',
        //     bottom: 20,
        //     textStyle: {
        //         align: 'center',
        //         fontSize: 14,
        //         color: '#333',
        //         fontWeight: 'normal'
        //     }
        // },
        series: [{
            name: '占比',
            type: 'pie',
            startAngle: 270, // 环图起始位置：正下发
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    position: 'center',
                    formatter: ({ data }) => `${data.value.toFixed(2)}%`

                },
                emphasis: {
                    show: true
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                name: '满足率',
                value: percentage,
                label: {
                    normal: {
                        fontSize: 18,
                        color: '#585F6E',
                        fontWeight: 'bolder'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#36cf93',
                        shadowColor: 'rgba(34,192,245,0.8)',
                        shadowBlur: 10
                    }
                }
            }, {
                name: '未满足率',
                value: 100 - percentage,
                label: {
                    normal: {
                        show: false,
                        fontSize: 0
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f0f0f0'
                    },
                    emphasis: {
                        color: '#f0f0f0'
                    }
                },
                hoverAnimation: false
            }]
        }]
    }
    myChart.setOption(option);
}
//设备工机具环形图
function getToolsName(total, present) {
    let myChart = echarts.init(document.getElementById('Tools-garden'));

// 随机生成占比数据
    const percentage = (present / total) * 100;




// // 圆心角的一半
//     const angle = PI * val / 50 / 2;
// // 渐变起点
//     const pointStart = [
//         0.5 - 0.5 * cos(angle) * sin(angle),
//         0.5 + 0.5 * cos(angle) * cos(angle)
//     ];
// // 渐变终点
//     const pointEnd = [
//         0.5 - 0.5 * sin(angle),
//         0.5 + 0.5 * cos(angle)
//     ];

    option = {
        series: [{
            name: '占比',
            type: 'pie',
            startAngle: 270, // 环图起始位置：正下发
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    position: 'center',
                    formatter: ({ data }) => `${data.value.toFixed(2)}%`
                },
                emphasis: {
                    show: true
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                name: '满足率',
                value: percentage,
                label: {
                    normal: {
                        fontSize: 18,
                        color: '#585F6E',
                        fontWeight: 'bolder'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#36cf93',
                        shadowColor: 'rgba(34,192,245,0.8)',
                        shadowBlur: 10
                    }
                }
            }, {
                name: '未满足率',
                value: 100 - percentage,
                label: {
                    normal: {
                        show: false,
                        fontSize: 0
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f0f0f0'
                    },
                    emphasis: {
                        color: '#f0f0f0'
                    }
                },
                hoverAnimation: false
            }]
        }]
    }
    myChart.setOption(option);
}
//实名制柱状图
function getRealNames(proName,nums) {
    let myChart = echarts.init(document.getElementById('Real-name-post'));
    let nameList = proName;
    let dataList = nums;
    let fontSize = '12';
    let option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
            textStyle: {
                color: '#fff',
                // fontFamily: 'Alibaba PuHuiTi R'
            },
            borderColor: "rgba(255,255,255, .5)",
        },
        legend: {
            show: false,
            data: ['考勤数'],
            align: 'left',
            right: 10,
            textStyle: {
                color: "#000",
                fontSize: fontSize
            },
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 35
        },
        dataZoom: [{
            type: 'inside',
            zoomOnMouseWheel: false,
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
            startValue: 0,
            endValue: 5,
            orient: 'vertical',
        }],
        grid: {
            top: '1%',
            left: '50%',
            right: '0%',
            bottom: '3%',
            // containLabel: true
        },
        xAxis: [{
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#063374",
                    width: 1,
                    type: "solid"
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
                textStyle: {
                    color: "#00c7ff",
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#063374",
                }
            },
        }],
        yAxis: [{
            type: 'category',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#000',
                    fontSize: fontSize,
                    // fontFamily: 'Alibaba PuHuiTi R'
                }
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#00c7ff",
                    width: 1,
                    type: "solid"
                },
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#063374",
                }
            },
            data: nameList,
        }],
        series: [{
            name: '考勤数',
            type: 'bar',
            data: dataList,
            barWidth: 14, //柱子宽度
            barGap: 1, //柱子之间间距
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#0BCCFE'
                    }, {
                        offset: 1,
                        color: '#1E3AFF'
                    }]),
                    opacity: 1,
                }
            },
            label: {
                normal: {
                    show: true,
                    relative: 'right',
                    formatter: '{c}',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize,
                        // fontFamily: 'Alibaba PuHuiTi R'
                    }
                }
            },
        }]
    };
    // myChart.setOption(option, true);
    // myChart.on('mousemove', stop);
    // myChart.on('globalout', goMove);
    myChart.setOption(option,true);
}
//设备工机具柱状图
function getToolsNames(proName,nums) {
    let myChart = echarts.init(document.getElementById('Tools-post'));
    // var charts = { // 按顺序排列从大到小
    //     cityList: proName,
    //     cityData: nums
    // }
    // var top10CityList = charts.cityList
    // var top10CityData = charts.cityData
    // var color = ['#36cf93', '#ffa94c', '#4bced0']
    // var color1 = ['#409eff', '#f2c1f5', '#4aa4ff']
    //
    // let lineY = []
    // let lineT = []
    // for (var i = 0; i < charts.cityList.length; i++) {
    //     var x = i
    //     if (x > 1) {
    //         x = 2
    //     }
    //     var data = {
    //         name: charts.cityList[i],
    //         color: color[x],
    //         value: top10CityData[i],
    //         barGap: '-100%',
    //         itemStyle: {
    //             normal: {
    //                 show: true,
    //                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
    //                     offset: 0,
    //                     color: color[x]
    //                 }, {
    //                     offset: 1,
    //                     color: color1[x]
    //                 }], false),
    //                 barBorderRadius: 10
    //             },
    //             emphasis: {
    //                 shadowBlur: 15,
    //                 shadowColor: 'rgba(0, 0, 0, 0.1)'
    //             }
    //         }
    //     }
    //     var data1 = {
    //         value: top10CityData[0],
    //         itemStyle: {
    //             color: '#ffffff',
    //             barBorderRadius: 10
    //         }
    //     }
    //     lineY.push(data)
    //     lineT.push(data1)
    // }
    //
    // option = {
    //     backgroundColor: '#ffffff',
    //     title: {
    //         show: false
    //     },
    //     tooltip: {
    //         trigger: 'item',
    //         formatter: (p) => {
    //             if (p.seriesName === 'total') {
    //                 return ''
    //             }
    //             return `${p.name}<br/>${p.value}`
    //         }
    //     },
    //     grid: {
    //         borderWidth: 0,
    //         top: '10%',
    //         left: '5%',
    //         right: '15%',
    //         bottom: '3%'
    //     },
    //     color: color,
    //     yAxis: [{
    //         type: 'category',
    //         inverse: true,
    //         axisTick: {
    //             show: false
    //         },
    //         axisLine: {
    //             show: false
    //         },
    //         axisLabel: {
    //             show: false,
    //             inside: false
    //         },
    //         data: top10CityList
    //     }, {
    //         type: 'category',
    //         axisLine: {
    //             show: false
    //         },
    //         axisTick: {
    //             show: false
    //         },
    //         axisLabel: {
    //             show: true,
    //             inside: false,
    //             verticalAlign: 'bottom',
    //             lineHeight: '40',
    //             textStyle: {
    //                 color: '#b3ccf8',
    //                 fontSize: '14',
    //                 fontFamily: 'PingFangSC-Regular'
    //             },
    //             formatter: function(val) {
    //                 return `${val}`
    //             }
    //         },
    //         splitArea: {
    //             show: false
    //         },
    //         splitLine: {
    //             show: false
    //         },
    //         data: top10CityData
    //     }],
    //     xAxis: {
    //         type: 'value',
    //         axisTick: {
    //             show: false
    //         },
    //         axisLine: {
    //             show: false
    //         },
    //         splitLine: {
    //             show: false
    //         },
    //         axisLabel: {
    //             show: false
    //         }
    //     },
    //     series: [{
    //         name: 'total',
    //         type: 'bar',
    //         zlevel: 1,
    //         barGap: '-100%',
    //         barWidth: '10px',
    //         data: lineT,
    //         legendHoverLink: false
    //     }, {
    //         name: 'bar',
    //         type: 'bar',
    //         zlevel: 2,
    //         barWidth: '10px',
    //         data: lineY,
    //         label: {
    //             normal: {
    //                 color: '#0051de',
    //                 show: true,
    //                 position: [0, '-24px'],
    //                 textStyle: {
    //                     fontSize: 16
    //                 },
    //                 formatter: function(a) {
    //                     let num = ''
    //                     let str = ''
    //                     if (a.dataIndex + 1 < 10) {
    //                         num = '0' + (a.dataIndex + 1);
    //                     } else {
    //                         num = (a.dataIndex + 1);
    //                     }
    //                     if (a.dataIndex === 0) {
    //                         str = `{color4|${a.name}}`
    //                     } else if (a.dataIndex === 1) {
    //                         str = `{color4|${a.name}}`
    //                     } else {
    //                         str = `{color4|${a.name}}`
    //                     }
    //                     return str;
    //                 },
    //                 rich: {
    //                     color4: {
    //                         color: '#000000'
    //                     }
    //                 }
    //             }
    //         }
    //     }],
    // }
    let nameList = proName;
    let dataList = nums;
    let fontSize = '12';
    let option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
            textStyle: {
                color: '#fff',
                // fontFamily: 'Alibaba PuHuiTi R'
            },
            borderColor: "rgba(255,255,255, .5)",
        },
        legend: {
            show: false,
            data: ['使用数'],
            align: 'left',
            right: 10,
            textStyle: {
                color: "#000",
                fontSize: fontSize
            },
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 35
        },
        dataZoom: [{
            type: 'inside',
            zoomOnMouseWheel: false,
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
            startValue: 0,
            endValue: 5,
            orient: 'vertical',
        }],
        grid: {
            top: '1%',
            left: '50%',
            right: '0%',
            bottom: '3%',
            // containLabel: true
        },
        xAxis: [{
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#063374",
                    width: 1,
                    type: "solid"
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
                textStyle: {
                    color: "#00c7ff",
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#063374",
                }
            },
        }],
        yAxis: [{
            type: 'category',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#000',
                    fontSize: fontSize,
                    // fontFamily: 'Alibaba PuHuiTi R'
                }
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#00c7ff",
                    width: 1,
                    type: "solid"
                },
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#063374",
                }
            },
            data: nameList,
        }],
        series: [{
            name: '工器具数',
            type: 'bar',
            data: dataList,
            barWidth: 14, //柱子宽度
            barGap: 1, //柱子之间间距
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#0BCCFE'
                    }, {
                        offset: 1,
                        color: '#1E3AFF'
                    }]),
                    opacity: 1,
                }
            },
            label: {
                normal: {
                    show: true,
                    relative: 'right',
                    formatter: '{c}',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize,
                        // fontFamily: 'Alibaba PuHuiTi R'
                    }
                }
            },
        }]
    };
    myChart.setOption(option);
}



//闲置率Echarts
function idleEcharts(color, data, name) {
    const { random, PI, cos, sin } = Math;

// 随机生成占比数据
    //const val = random() * 100;
    const val = (name/data )* 100;

// 圆心角的一半
    const angle = PI * val / 50 / 2;
// 渐变起点
    const pointStart = [
        0.5 - 0.5 * cos(angle) * sin(angle),
        0.5 + 0.5 * cos(angle) * cos(angle)
    ];
// 渐变终点
    const pointEnd = [
        0.5 - 0.5 * sin(angle),
        0.5 + 0.5 * cos(angle)
    ];

    option = {
        series: [{
            name: '占比',
            type: 'pie',
            startAngle: 270, // 环图起始位置：正下发
            radius: ['54%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    position: 'center',
                    formatter: ({ data }) => `${data.value.toFixed(0)}%`
                },
                emphasis: {
                    show: true
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                name: '满足率',
                value: val,
                label: {
                    normal: {
                        fontSize: 14,
                        color: '#999999',
                        fontWeight: 'bolder'
                    }
                },
                itemStyle: {
                    normal: {
                        color: color
                    }
                }
            }, {
                name: '未满足率',
                value: 100 - val,
                label: {
                    normal: {
                        show: false,
                        fontSize: 0
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f0f0f0'
                    },
                    emphasis: {
                        color: '#f0f0f0'
                    }
                },
                hoverAnimation: false
            }]
        }]
    }
}