let laypage,table,form,element; layui.use(['element', 'layer', 'form', 'element','laypage'], function(){ var layer = layui.layer; //弹层 element = layui.element; //分页 laypage = layui.laypage; //分页 table = layui.table; //表格 form=layui.form; var list = [{name:'111',personnelAvgUseRate:'30'},{name:'222',personnelAvgUseRate:'11'},{name:'333',personnelAvgUseRate:'45'}]; // console.log(list) monthRateEcharts(list) getTableData() }) function getTableData(){ // $.ajax({ // type: 'post', // url: oiPlanUrl + '/dayPlanStatistics/getPersonnelUtilizationRate', // data: { // companyId: companyId, // month: $("#workTime").val(), // }, // success: function (data) { let data = { code:200, data:[ { index:1, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:2, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:3, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:4, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:5, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:6, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:7, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:8, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:9, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:10, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:11, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:12, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:13, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:14, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:15, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" }, { index:16, project:"工程xxxxx", gmNum:"10", viewNum:"11", unViewNum:"12", peopleNum:"13", viewPeople:"14", rate:"88.3%" } ] } intervalId = ""; var html =""; $("#personnelTable thead tr").empty(); $("#personnelTable tbody").empty(); if (data.code == 200) { var list = data.data; if(list.length>0){ html+= '序号'; html+= '工程名称'; html+= '杆塔数量'; html+= '已巡数量'; html+= '未巡数量'; html+= '护线员人数'; html+= '已巡视人数'; html+= '到位率'; // for (let i = 0; i < list[0].length; i++) { // html+= ''+list[0][i].name+''; // } $("#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 = $(''); Object.values(item).forEach(function(value) { // console.log(value) var cell = $('').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{ } // }, // error: function (xhr, textStatus, errorThrown) { // } // }); } 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 = scrollableDiv[0].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(list) { console.log('monthRateEcharts') //先销毁 echarts.init(document.getElementById("monthRate")).dispose(); var myChart = echarts.init(document.getElementById("monthRate")); var value = 0.6;//百分比 var value1 = 1100//已巡杆塔数 var value2 = 1300//总杆塔数 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 * 100).toFixed(0), left: '47.5%', top: '40%', textAlign: 'center', textStyle: { fontSize: 50, color: '#fff', }, }, { text:"%", 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(); }); }