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()
$("#station>div").click(function(){
$("#station>div").removeClass("stationClick");
$(this).addClass("stationClick");
getTableData()
monthRateEcharts(list)
})
})
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();
});
}
|