1189 lines
36 KiB
JavaScript
1189 lines
36 KiB
JavaScript
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: ctxPath + "/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: ctxPath + "/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: ctxPath + "/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: ctxPath + "/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: ctxPath + "/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: ctxPath + "/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: ctxPath + "/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: ctxPath + "/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: ctxPath + "/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
|
|
}]
|
|
}]
|
|
}
|
|
}
|
|
|
|
|