yn_hxy_web/hxy-web/js/wireManager/index.js

let  layer,laypage,table,form,element;

layui.use(['element', 'layer', 'form', 'element','laypage'], function(){
    layer = layui.layer; //弹层
    element = layui.element; //分页
    laypage = layui.laypage; //分页
    table = layui.table; //表格
    form=layui.form;
    

	setData();
})

function setData(){
	 
	var yjId = $(window.parent.document).find("input[id='taskSourceId']").attr("stationId"); 
	
	$.ajax({
	    type: 'post',
	    url: PATH_URL + '/lineProjectHomePage/getDataOverview',
		contentType: "application/json; charset=utf-8",
	    data: JSON.stringify({"yjId": yjId}),
	    success: function (data) {
			console.log("data:", data)
			var dataOverview = data.dataOverview;
			//线路总数
			$("#proNum").text(dataOverview.proNum);
			//护线员人数
			$("#workerNum").text(dataOverview.workerNum);
			//杆塔总数
			$("#towerNum").text(dataOverview.towerNum);
			//本月已巡视
			$("#makeNum").text(dataOverview.makeNum);
			//本月未巡视
			$("#notMakeNum").text(dataOverview.notMakeNum);
			//本月特巡天数
			$("#specialDayNum").text(dataOverview.specialDayNum);
			
			
			
			//处理一下数据，将数据与右下角的表格列一一对应
			var value = data.proDataOverview;
			var arr = []
			for (var i = 0; i < value.length; i++) {
				var json = {
					index: i + 1,
					lineProName: value[i].lineProName,
					towerNum: value[i].towerNum,
					makeNum: value[i].makeNum,
					notMakeNum: value[i].notMakeNum,
					workerNum: value[i].workerNum,
					makeWorkerNum: value[i].makeWorkerNum,
					arrivalRate: value[i].arrivalRate,
				}
				arr.push(json);
			}
			//表格数据赋值
			getTableData(arr);
			
			//echart图数据赋值
			monthRateEcharts(data.dataOverview)
		},
	    error: function (xhr, textStatus, errorThrown) {
	    }
	});
	
}


function getTableData(list){
	let data = {
		code:200,
		data: list
			
	}
	intervalId = "";
	var html ="";
	$("#personnelTable thead tr").empty();
	$("#personnelTable tbody").empty();
	if (data.code == 200) {
		var list = data.data;
		if(list.length>0){
			html+= '<th width="10%">序号</th>';
			html+= '<th width="12%">工程名称</th>';
			html+= '<th width="12%">杆塔数量</th>';
			html+= '<th width="12%">已巡数量</th>';
			html+= '<th width="12%">未巡数量</th>';
			html+= '<th width="12%">护线员人数</th>';
			html+= '<th width="12%">已巡视人数</th>';
			html+= '<th width="12%">到位率</th>';
			// for (let i = 0; i < list[0].length; i++) {
			//     html+= '<th title="'+list[0][i].name+'">'+list[0][i].name+'</th>';
			// }
			$("#personnelTable thead tr").append(html);
			var echartArr = [];
			for (let k = 0; k < list.length; k++) {
				var obj = {};
				obj = list[k]
				// obj.data = list[k][0].date;
				// for (let i = 0; i < l; i++) {
				//     obj['personnelAvgUseRate' + i] = Number(list[k][i].personnelAvgUseRate * 100).toFixed(2)+"%";
				// } 
				echartArr.push(obj);
			}
			var tbody = $('#personnelTable tbody');
			echartArr.forEach(function(item) {
				// console.log(item)
				
				// console.log(Object.values(item))
				var row = $('<tr>');
				Object.values(item).forEach(function(value) {
					// console.log(value)
					var cell = $('<td>').text(value);
					row.append(cell);
				});
				tbody.append(row);
			});
		}
		clearInterval(intervalId);
		// monveinout();
		console.log("ddddd");
		$("#personnelRate").unbind()
		$("#personnelRate").hover(function(){
			clearInterval(intervalId);
		},function(){
			intervalId = setInterval(scrolldiv, 40);
		});
		// 开始滚动
		 scrollableDiv = $('.scrollable'); // 假设你的滚动容器类名为.scrollable
		 totalHeight = scrollableDiv[0].scrollHeight;
		 visibleHeight = scrollableDiv.innerHeight();
		 currentScrollTop = 0;
		intervalId = setInterval(scrolldiv, 40); // 这个数字是滚动间隔的时间，单位是毫秒
		// 如果需要停止滚动，可以使用以下代码
		// clearInterval(intervalId);
	}else{

	}
}
function monveinout(){
    const element = document.getElementById('personnelRate');
// 鼠标移入事件
    element.addEventListener('mouseover', function(event) {
        // console.log('鼠标移入');
        clearInterval(intervalId);
    });
// 鼠标移出事件
    element.addEventListener('mouseout', function(event) {
        // var scrollableDiv = $('.scrollable'); // 假设你的滚动容器类名为.scrollable
        // var totalHeight = scrollableDiv[0].scrollHeight;
        // var visibleHeight = scrollableDiv.innerHeight();
        // var currentScrollTop = 0;
        // 开始滚动
        intervalId = setInterval(scrolldiv, 40); // 这个数字是滚动间隔的时间，单位是毫秒
    });
}
var scrollableDiv = $('.scrollable'); // 假设你的滚动容器类名为.scrollable
var totalHeight = $('.scrollable').scrollHeight;//scrollHeight;
var visibleHeight = scrollableDiv.innerHeight();
var currentScrollTop = 0;
function scrolldiv() {
    // 如果滚动到最底部，重置到顶部
    if (currentScrollTop + visibleHeight >= totalHeight) {
        currentScrollTop = 0;
        scrollableDiv.scrollTop(currentScrollTop);
    } else {
        // 否则，向下滚动一定的像素数
        currentScrollTop += 1; // 调整这个数字来改变滚动速度
        scrollableDiv.scrollTop(currentScrollTop);
    }
}

//图表
function monthRateEcharts(data) {
    console.log('monthRateEcharts')
    //先销毁
    echarts.init(document.getElementById("monthRate")).dispose();
    var myChart = echarts.init(document.getElementById("monthRate"));

    var value = data.arrivalRate;//百分比
    var value1 = data.makeNum//已巡杆塔数
    var value2 = data.towerNum//总杆塔数
    var option = {
        backgroundColor: '#fff',
        title: [
            {
                text: '已巡杆塔数：'+value1,
                left: '50%',
                top: "58%",
                textAlign: 'center',
                textStyle: {
                    fontSize: '18',
                    fontWeight: '400',
                    color: '#fff',
                    
                    textAlign: 'center',
                },
            },
            {
                text: '',
                left: '61.5%',
                top: "58.5%",
                textAlign: 'center',
                textStyle: {
                    fontSize: '18',
                    fontWeight: '400',
                    color: '#fff',
                    
                    textAlign: 'center',
                },
            },
            {
                text: '总杆塔数：'+value2,
                left: '50%',
                top: "64%",
                textAlign: 'center',
                textStyle: {
                    fontSize: '18',
                    fontWeight: '400',
                    color: '#fff',
                    
                    textAlign: 'center',
                },
            },
            {
                text: value,
                left: '47.5%',
                top: '40%',
                textAlign: 'center',
                textStyle: {
                    fontSize: 50,
                    color: '#fff',
                },
            },

            {
                left: '56%',
                top: '43%',
                textAlign: 'center',
                textStyle: {
                    fontSize: 30,
                    color: '#fff',
                },
            },
        ],
        series: [{
                type: 'liquidFill',
                radius: '70%',
                z: 6,
                center: ['50%', '50%'],
                amplitude: 20,
                backgroundStyle: {
                    borderWidth: 1,
                    color: 'rgba(201,219,252, 1)', // 球体
                },
                color: [
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 1,
                                color: '#133480',
                            },
                            {
                                offset: 0,
                                color: '#5F8EE8',
                            },
                        ],
                        globalCoord: false,
                    },
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 1,
                                color: '#133480',
                            },
                            {
                                offset: 0,
                                color: '#5F8EE8',
                            },
                        ],
                        globalCoord: false,
                    },
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 1,
                                color: '#5F8DE8',
                            },
                            {
                                offset: 0,
                                color: '#5F8DE8',
                            },
                        ],
                        globalCoord: false,
                    },
                ],
                data: [value+0.02,
                    {
                        value: value-0.01,
                        direction: 'left',
                    },
                    value-0.01,
                ],
                label: {
                    normal: {
                        formatter: '',
                    }
                },
                outline: {
                    show: true,
                    itemStyle: {
                        borderWidth: 0,
                    },
                    borderDistance: 0,
                }
            },
        
            
        ]
    }

    // 为echarts对象加载数据
    myChart.setOption(option);
    myChart.on('click', function (params, charts, event) {
        detailsClick();
    });
}