2814 lines
72 KiB
JavaScript
2814 lines
72 KiB
JavaScript
var selfOrgId = localStorage.getItem('selfOrgId');
|
||
var intervalTime = 5 * 1000;
|
||
$(function() {
|
||
findXmgkEcharts();
|
||
findSgryEcharts(); //人员管理-施工人员
|
||
findRiskEcharts(); //风险管控
|
||
proMoneyEcharts(); //工程造价
|
||
aqjcPhoto(); //安全检查
|
||
findZypEcharts(); //作业票
|
||
loading();
|
||
projectProgress(); //工程进度
|
||
var myVid = document.getElementById("xcpVideo");
|
||
myVid.muted = true;
|
||
});
|
||
|
||
var progressIndex = 0;
|
||
|
||
function projectProgress() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
beforeSend: function(request) {
|
||
request.setRequestHeader("token", token);
|
||
},
|
||
url: smz_web_url + 'progressOverHaul/getProProgress',
|
||
data: {
|
||
selfOrgId: selfOrgId
|
||
},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
console.log("data", data);
|
||
showProgressProName = "";
|
||
if (data.length > 0) {
|
||
initProgress(data);
|
||
if (data != null && data.length > 0) {
|
||
window.setInterval(function() {
|
||
initProgress(data);
|
||
}, intervalTime);
|
||
}
|
||
}
|
||
},
|
||
error: function(err) {
|
||
progressIndex = 0;
|
||
}
|
||
});
|
||
}
|
||
var showProgressProName = "";
|
||
|
||
function initProgress(data) {
|
||
var orgName = data[progressIndex].orgName;
|
||
var proName = data[progressIndex].proName;
|
||
showProgressProName = proName;
|
||
if (proName.length > 50) {
|
||
proName = proName.substring(0, 20) + "..." + proName.substring(proName.length - 20, proName.length);
|
||
}
|
||
var plan = data[progressIndex].planProgress;
|
||
var actual = data[progressIndex].actualProgressRatio;
|
||
var planStartTime = data[progressIndex].planStartTime;
|
||
var planEndTime = data[progressIndex].planEndTime;
|
||
var statu = data[progressIndex].statu;
|
||
var isNormal = "正常";
|
||
if (statu == "1" || (statu == "0" && parseFloat(plan) <= parseFloat(actual))) {
|
||
isNormal = "正常";
|
||
$(".isNormal").css("color", "rgb(64,221,154)");
|
||
} else {
|
||
isNormal = "延期";
|
||
$(".isNormal").css("color", "rgb(245,128,155)");
|
||
}
|
||
$("#orgName").text(orgName);
|
||
$("#proName").text(proName);
|
||
$(".isNormal").text(isNormal);
|
||
$("#planStartTime").text(planStartTime);
|
||
$("#planEndTime").text(planEndTime);
|
||
var plan_span = plan;
|
||
var actual_span = actual;
|
||
$("#fristDiv").html("");
|
||
$("#secondDiv").html("");
|
||
$("#actual_span").remove();
|
||
$("#plan_span").remove();
|
||
if (parseFloat(plan) > parseFloat(actual)) {
|
||
plan = parseFloat(plan) - parseFloat(actual);
|
||
$("#fristDiv").css("width", actual + "%");
|
||
$("#secondDiv").css("width", plan + "%");
|
||
var html1 = "";
|
||
if (plan < 13) {
|
||
html1 = '<span id="plan_span">计划进度<label style="color:rgb(238, 157, 69);position: relative;top: -20px;left: 27px;">' +
|
||
plan_span + '%</label></span>';
|
||
} else {
|
||
html1 = '<span id="plan_span">计划进度<label style="color:rgb(238, 157, 69);">' + plan_span + '%</label></span>';
|
||
}
|
||
$("#secondDiv").append(html1);
|
||
var html2 = "";
|
||
if (actual >= 13 && actual < 87) {
|
||
html2 = '<span id="actual_span" style="top: 16px;">实际进度<label style="color:rgb(69, 238, 164);">' + actual_span +
|
||
'%</label></span>';
|
||
} else if (actual >= 87) {
|
||
var html =
|
||
'<span id="actual_span" style="left: -280px;right:0px;top: 16px;">实际进度<label style="color:rgb(69, 238, 164);">' +
|
||
actual_span + '%</label></span>';
|
||
$("#contentDiv").append(html);
|
||
} else if (actual < 13) {
|
||
var html =
|
||
'<span id="actual_span" style="left: -280px;right:0px;top: 16px;">实际进度<label style="color:rgb(69, 238, 164);">' +
|
||
actual_span + '%</label></span>';
|
||
$("#contentDiv").append(html);
|
||
}
|
||
$("#fristDiv").append(html2);
|
||
} else {
|
||
actual = parseFloat(actual);
|
||
plan = 0;
|
||
$("#fristDiv").css("width", actual + "%");
|
||
$("#secondDiv").css("width", plan + "%");
|
||
var html3 = '<span id="plan_span" style="top:-220%;right:0px;">计划进度<label style="color:rgb(238, 157, 69);">' +
|
||
plan_span + '%</label></span>';
|
||
$("#contentDiv").append(html3);
|
||
var html2 = "";
|
||
if (actual >= 13 && actual < 87) {
|
||
html2 = '<span id="actual_span" style="top: 16px;">实际进度<label style="color:rgb(69, 238, 164);">' + actual_span +
|
||
'%</label></span>';
|
||
} else if (actual >= 87) {
|
||
var html =
|
||
'<span id="actual_span" style="left: 200px;right:0px;top: 1px;">实际进度<label style="color:rgb(69, 238, 164);">' +
|
||
actual_span + '%</label></span>';
|
||
$("#contentDiv").append(html);
|
||
} else if (actual < 13) {
|
||
var html =
|
||
'<span id="actual_span" style="left: -280px;right:0px;top: 16px;">实际进度<label style="color:rgb(69, 238, 164);">' +
|
||
actual_span + '%</label></span>';
|
||
$("#contentDiv").append(html);
|
||
}
|
||
$("#fristDiv").append(html2);
|
||
}
|
||
progressIndex++;
|
||
if (progressIndex == data.length) {
|
||
progressIndex = 0;
|
||
}
|
||
}
|
||
|
||
function showProgress() {
|
||
localStorage.setItem("orgName", "");
|
||
localStorage.setItem("proName", showProgressProName);
|
||
var index = top.layer.open({
|
||
title: false,
|
||
type: 2,
|
||
content: '../../page/statistics/projectProgess.html',
|
||
area: ['90%', '90%'],
|
||
maxmin: false
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 项目概况数据获取
|
||
*/
|
||
function findXmgkEcharts() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
beforeSend: function(request) {
|
||
request.setRequestHeader("token", token);
|
||
},
|
||
url: smz_web_url + 'pro/getProNum',
|
||
data: {
|
||
selfOrgId: selfOrgId
|
||
},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
var vol = data.obj.vol;
|
||
var bd = data.obj.bd;
|
||
var xl = data.obj.xl;
|
||
console.log("data",data);
|
||
xmgkEcharts(vol, bd, xl);
|
||
},
|
||
error:function(xhr, textStatus, errorThrown){
|
||
console.log("xhr",xhr);
|
||
console.log("textStatus",textStatus);
|
||
console.log("errorThrown",errorThrown);
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 施工人员数据获取
|
||
*/
|
||
function findSgryEcharts() {
|
||
$("#onlineNums").html("0");
|
||
$("#attendanceNums").html("0");
|
||
$.ajax({
|
||
type: 'POST',
|
||
beforeSend: function(request) {
|
||
request.setRequestHeader("token", token);
|
||
},
|
||
url: smz_web_url + 'person/getWorkerNum',
|
||
data: {
|
||
selfOrgId: selfOrgId
|
||
},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
var onlineNumList = data.obj.onlineNumList; //出勤数量
|
||
var attendanceNumList = data.obj.attendanceNumList; //当日考勤数量
|
||
var orgNameList = data.obj.orgNameList; //分公司名称
|
||
var onlineNums = data.obj.onlineNums; //在场总人数
|
||
var sysOnlineNums = data.obj.sysOnlineNums; //新系统在场人数
|
||
var attendanceNums = data.obj.attendanceNums; //考勤总人数
|
||
$("#onlineNums").html(onlineNums);
|
||
$("#sysOnlineNums").html(sysOnlineNums);
|
||
$("#attendanceNums").html(attendanceNums);
|
||
sgryEcharts(onlineNumList, attendanceNumList, orgNameList, onlineNums, attendanceNums);
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* 管理人员数据获取
|
||
*/
|
||
function findGlryEcharts() {
|
||
$("#onlineNums").html("0");
|
||
$("#attendanceNums").html("0");
|
||
$.ajax({
|
||
type: 'POST',
|
||
beforeSend: function(request) {
|
||
request.setRequestHeader("token", token);
|
||
},
|
||
url: smz_web_url + 'person/getManagerNum',
|
||
data: {
|
||
selfOrgId: selfOrgId
|
||
},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
var attendanceNumList = data.obj.attendanceNumList; //出勤数量
|
||
var onlineNumList = data.obj.onlineNumList; //在线数量
|
||
var sysOnlineNumList = data.obj.sysOnlineNumList; //系统在线数量
|
||
var orgNameList = data.obj.orgNameList; //分公司名称
|
||
var onlineNums = data.obj.onlineNums; //在场总人数
|
||
var sysOnlineNums = data.obj.sysOnlineNums; //在场总人数
|
||
var attendanceNums = data.obj.attendanceNums; //考勤总人数
|
||
|
||
$("#onlineNums").html(onlineNums);
|
||
$("#sysOnlineNums").html(sysOnlineNums);
|
||
$("#attendanceNums").html(attendanceNums);
|
||
glryEcharts(onlineNumList, orgNameList, onlineNums, attendanceNums, attendanceNumList);
|
||
}
|
||
});
|
||
}
|
||
var sgryInterval;
|
||
var glryInterval;
|
||
|
||
function ryglShowEcharts(data) {
|
||
if (data == "1") {
|
||
$("#sgryEcharts").css("display", "block");
|
||
$("#glryEcharts").css("display", "none");
|
||
document.getElementById("sgryBtn").style.backgroundColor = "#02A7F0";
|
||
document.getElementById("glryBtn").style.backgroundColor = "#027DB4";
|
||
findSgryEcharts() //人员管理-施工人员
|
||
clearInterval(glryInterval);
|
||
} else {
|
||
$("#sgryEcharts").css("display", "none");
|
||
$("#glryEcharts").css("display", "block");
|
||
document.getElementById("sgryBtn").style.backgroundColor = "#027DB4";
|
||
document.getElementById("glryBtn").style.backgroundColor = "#02A7F0";
|
||
findGlryEcharts(); //人员管理-管理人员
|
||
clearInterval(sgryInterval);
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
* 风险管控数据获取
|
||
*/
|
||
function findRiskEcharts() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
beforeSend: function(request) {
|
||
request.setRequestHeader("token", token);
|
||
},
|
||
url: smz_web_url + 'risk/getRiskNum',
|
||
data: {
|
||
selfOrgId: selfOrgId
|
||
},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
var res = data.res;
|
||
var total = 0;
|
||
var num = 0;
|
||
var mix = 0;
|
||
if (res == "1") {
|
||
var obj = data.obj;
|
||
total = obj.greenRisk.total;
|
||
num = obj.greenRisk.num;
|
||
mix = obj.greenRisk.mix;
|
||
greenEcharts(total, num, mix);
|
||
|
||
total = obj.yellowRisk.total;
|
||
num = obj.yellowRisk.num;
|
||
mix = obj.yellowRisk.mix;
|
||
yellowEcharts(total, num, mix);
|
||
|
||
total = obj.redRisk.total;
|
||
num = obj.redRisk.num;
|
||
mix = obj.redRisk.mix;
|
||
redEcharts(total, num, mix);
|
||
} else {
|
||
greenEcharts(total, num, mix);
|
||
yellowEcharts(total, num, mix);
|
||
redEcharts(total, num, mix);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* 作业票数据获取
|
||
*/
|
||
function findZypEcharts() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
beforeSend: function(request) {
|
||
request.setRequestHeader("token", token);
|
||
},
|
||
url: smz_web_url + 'ticket/getTicketNum',
|
||
data: {
|
||
selfOrgId: selfOrgId
|
||
},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
var companyName = data.obj.companyName; //分公司名称
|
||
var reviewed = data.obj.reviewed; //未完结
|
||
var finished = data.obj.finished; //已完结
|
||
var total = data.obj.total; //总数
|
||
zypEcharts(companyName, reviewed, finished, total);
|
||
}
|
||
});
|
||
}
|
||
//风险管控-页面跳转
|
||
function showRisk() {
|
||
localStorage.setItem('token', token);
|
||
localStorage.setItem("statistics_proName", "");
|
||
localStorage.setItem("statistics_riskName", "");
|
||
var index = top.layer.open({
|
||
title: false,
|
||
type: 2,
|
||
content: '../../page/security/risk.html',
|
||
area: ['90%', '90%'],
|
||
maxmin: false
|
||
});
|
||
}
|
||
//作业票-页面跳转
|
||
function showZyp(orgName) {
|
||
localStorage.setItem("orgName", orgName);
|
||
var height = '800px';
|
||
var width = '1400px';
|
||
localStorage.setItem('token', token);
|
||
var index = top.layer.open({
|
||
title: false,
|
||
type: 2,
|
||
content: '../../page/security/workTicket.html',
|
||
area: ['90%', '90%'],
|
||
maxmin: false
|
||
});
|
||
}
|
||
|
||
//项目概况
|
||
function xmgkEcharts(vol, bd, xl) {
|
||
var myChart = echarts.init(document.getElementById('xmgkDiv'));
|
||
var img = [
|
||
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
|
||
'image://data:image/png;base64,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',
|
||
'image://data:image/png;base64,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',
|
||
'image://data:image/png;base64,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',
|
||
];
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '8%',
|
||
top: '27%',
|
||
bottom: '12%',
|
||
right: '5%',
|
||
},
|
||
legend: {
|
||
x: '35%',
|
||
top: '12%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
data: ['线路', '变电']
|
||
},
|
||
yAxis: [{
|
||
type: 'value',
|
||
position: 'left',
|
||
nameTextStyle: {
|
||
color: '#00FFFF'
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: true
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
color: '#fff',
|
||
fontSize: 12
|
||
}
|
||
}, ],
|
||
xAxis: [{
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
},
|
||
axisLabel: {
|
||
inside: false,
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#fff', // x轴颜色
|
||
fontWeight: 'normal',
|
||
fontSize: '14',
|
||
lineHeight: 22
|
||
},
|
||
formatter: function(value) {
|
||
return value;
|
||
}
|
||
},
|
||
data: vol,
|
||
}, ],
|
||
//滚动条
|
||
dataZoom: [{
|
||
show: false,
|
||
height: 12,
|
||
xAxisIndex: [0],
|
||
bottom: '0%',
|
||
start: 1,
|
||
end: 80,
|
||
zoomLock: true, //禁用缩放
|
||
handleSize: '110%',
|
||
handleStyle: {
|
||
color: "#d3dee5",
|
||
},
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
borderColor: "#90979c"
|
||
}],
|
||
series: [
|
||
/*
|
||
{
|
||
name: "线路",
|
||
symbolSize: 150,
|
||
symbol: img[2],
|
||
type: "line",
|
||
data: xl,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 5,
|
||
color: '#13DDF5',
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
textStyle: {
|
||
color: '#fff',
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(19,221,245,0.3)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(19,221,245,0)'
|
||
}
|
||
], false),
|
||
shadowColor: 'rgba(19,221,245, 0.9)',
|
||
shadowBlur: 20
|
||
}
|
||
}
|
||
}, {
|
||
name: "变电",
|
||
symbolSize: 150,
|
||
symbol: img[3],
|
||
type: "line",
|
||
data: bd,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 5,
|
||
color: '#7ECDAA',
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
textStyle: {
|
||
color: '#fff',
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(126,205,170,0.3)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(126,205,170,0)'
|
||
}
|
||
], false),
|
||
shadowColor: 'rgba(126,205,170, 0.9)',
|
||
shadowBlur: 20
|
||
}
|
||
}
|
||
}, */
|
||
/* 优化：原图片太大，导致点击不准，将图片改为echart图标 */
|
||
{
|
||
name: '线路',
|
||
type: 'line',
|
||
showAllSymbol: true,
|
||
symbol: 'circle',
|
||
symbolSize: 12,
|
||
lineStyle: {
|
||
normal: {
|
||
color: "#2CC191",
|
||
shadowColor: 'rgba(0, 0, 0, .3)',
|
||
shadowBlur: 0,
|
||
shadowOffsetY: 5,
|
||
shadowOffsetX: 5,
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#2CC191',
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: "#2CC191",
|
||
borderColor: "#fff",
|
||
borderWidth: 3,
|
||
shadowColor: 'rgba(0, 0, 0, .3)',
|
||
shadowBlur: 0,
|
||
shadowOffsetY: 2,
|
||
shadowOffsetX: 2,
|
||
},
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(108,80,243,0.3)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(108,80,243,0)'
|
||
}
|
||
], false),
|
||
shadowColor: 'rgba(108,80,243, 0.9)',
|
||
shadowBlur: 20
|
||
}
|
||
},
|
||
data: xl
|
||
},
|
||
{
|
||
name: '变电',
|
||
type: 'line',
|
||
showAllSymbol: true,
|
||
symbol: 'circle',
|
||
symbolSize: 12,
|
||
lineStyle: {
|
||
normal: {
|
||
color: "#FAEE52",
|
||
shadowColor: 'rgba(0, 0, 0, .3)',
|
||
shadowBlur: 0,
|
||
shadowOffsetY: 5,
|
||
shadowOffsetX: 5,
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FAEE52',
|
||
}
|
||
},
|
||
|
||
itemStyle: {
|
||
color: "#FAEE52",
|
||
borderColor: "#fff",
|
||
borderWidth: 3,
|
||
shadowColor: '#FAEE52',
|
||
shadowBlur: 0,
|
||
shadowOffsetY: 2,
|
||
shadowOffsetX: 2,
|
||
},
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(250,238,82,0.3)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(250,238,82,0)'
|
||
}
|
||
], false),
|
||
shadowColor: 'rgba(250,238,82, 0.9)',
|
||
shadowBlur: 20
|
||
}
|
||
},
|
||
data: bd,
|
||
}
|
||
],
|
||
};
|
||
var startNum = 0;
|
||
var endNum = 80;
|
||
window.setInterval(function() {
|
||
if (endNum > 100) {
|
||
option.dataZoom[0].start = 0;
|
||
option.dataZoom[0].end = 80;
|
||
startNum = 0;
|
||
endNum = 80;
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
//防止重复触发点击事件
|
||
if (myChart._$handlers.click) {
|
||
myChart._$handlers.click.length = 0;
|
||
}
|
||
myChart.on('click', function(params) {
|
||
|
||
console.log("params", params);
|
||
var voltageLevel = params.name; //电压等级
|
||
var proType = params.seriesName; //工程类别
|
||
openProPage(voltageLevel, proType);
|
||
});
|
||
} else {
|
||
option.dataZoom[0].start = startNum;
|
||
option.dataZoom[0].end = endNum;
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
//防止重复触发点击事件
|
||
if (myChart._$handlers.click) {
|
||
myChart._$handlers.click.length = 0;
|
||
}
|
||
myChart.on('click', function(params) {
|
||
|
||
console.log("params", params);
|
||
var voltageLevel = params.name; //电压等级
|
||
var proType = params.seriesName; //工程类别
|
||
openProPage(voltageLevel, proType);
|
||
});
|
||
}
|
||
startNum += 10;
|
||
endNum += 10;
|
||
}, intervalTime);
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
myChart.on('click', function(params) {
|
||
console.log("params", params);
|
||
var voltageLevel = params.name; //电压等级
|
||
var proType = params.seriesName; //工程类别
|
||
openProPage(voltageLevel, proType);
|
||
});
|
||
}
|
||
//人员管理-施工人员
|
||
function sgryEcharts(onlineNumList, attendanceNumList, orgNameList, onlineNums, attendanceNums) {
|
||
var myChart = echarts.init(document.getElementById('sgryEcharts'));
|
||
var option = {
|
||
grid: {
|
||
left: '5%',
|
||
right: '7%',
|
||
bottom: '1%',
|
||
top: '7%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
type: 'value'
|
||
},
|
||
yAxis: [{
|
||
type: 'category',
|
||
inverse: true,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
data: orgNameList
|
||
}],
|
||
//滚动条
|
||
dataZoom: [{
|
||
show: false,
|
||
height: 12,
|
||
yAxisIndex: [0],
|
||
bottom: '0%',
|
||
start: 1,
|
||
end: 40,
|
||
zoomLock: true, //禁用缩放
|
||
handleSize: '110%',
|
||
handleStyle: {
|
||
color: "#d3dee5",
|
||
},
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
borderColor: "#90979c"
|
||
}],
|
||
series: [{
|
||
name: '在线人数',
|
||
type: 'bar',
|
||
stack: 'Tik Tok',
|
||
zlevel: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 30,
|
||
color: function(params) {
|
||
var index = params.dataIndex;
|
||
var color1 = ['#FF7F9A', '#F6E2A3', '#37AEFC', '#E6915E', '#FF7F9A', '#F6E2A3', '#37AEFC', '#E6915E',
|
||
'#FF7F9A', '#F6E2A3', '#37AEFC', '#E6915E'
|
||
];
|
||
return color1[index];
|
||
},
|
||
}
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
position: 'insideRight',
|
||
offset: [18, 0],
|
||
textStyle: {
|
||
align: 'center',
|
||
baseline: 'middle',
|
||
fontSize: 14,
|
||
fontWeight: '400',
|
||
color: function(params) {
|
||
var index = params.dataIndex;
|
||
var color1 = ['#FF7F9A', '#F6E2A3', '#37AEFC', '#E6915E'];
|
||
return color1[index];
|
||
},
|
||
textShadowColor: '#000',
|
||
textShadowBlur: '0',
|
||
textShadowOffsetX: 1,
|
||
textShadowOffsetY: 1,
|
||
}
|
||
},
|
||
},
|
||
barWidth: 15,
|
||
data: onlineNumList
|
||
},
|
||
{
|
||
name: '今日考勤人数',
|
||
type: 'bar',
|
||
stack: 'Tik Tok',
|
||
zlevel: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 15,
|
||
color: '#A8FBC8'
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
position: 'insideRight',
|
||
offset: [18, 0],
|
||
textStyle: {
|
||
align: 'center',
|
||
baseline: 'middle',
|
||
fontSize: 14,
|
||
fontWeight: '400',
|
||
color: '#A8FBC8',
|
||
textShadowColor: '#000',
|
||
textShadowBlur: '0',
|
||
textShadowOffsetX: 1,
|
||
textShadowOffsetY: 1,
|
||
}
|
||
},
|
||
},
|
||
barWidth: 15,
|
||
data: attendanceNumList
|
||
}
|
||
]
|
||
};
|
||
var startNum = 0;
|
||
var endNum = 40;
|
||
clearInterval(sgryInterval);
|
||
sgryInterval = window.setInterval(function() {
|
||
zoomInterval();
|
||
}, intervalTime);
|
||
|
||
function zoomInterval() {
|
||
if (endNum > 100) {
|
||
option.dataZoom[0].start = 0;
|
||
option.dataZoom[0].end = 40;
|
||
startNum = 0;
|
||
endNum = 40;
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
//防止重复触发点击事件
|
||
if (myChart._$handlers.click) {
|
||
myChart._$handlers.click.length = 0;
|
||
}
|
||
myChart.on('click', function(params) {
|
||
var name = params.name;
|
||
var value = params.value;
|
||
opensgryPerson(name, value);
|
||
});
|
||
} else {
|
||
option.dataZoom[0].start = startNum;
|
||
option.dataZoom[0].end = endNum;
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
//防止重复触发点击事件
|
||
if (myChart._$handlers.click) {
|
||
myChart._$handlers.click.length = 0;
|
||
}
|
||
myChart.on('click', function(params) {
|
||
var name = params.name;
|
||
var value = params.value;
|
||
opensgryPerson(name, value);
|
||
});
|
||
}
|
||
startNum += 20;
|
||
endNum += 20;
|
||
};
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
myChart.on('click', function(params) {
|
||
var name = params.name;
|
||
var value = params.value;
|
||
opensgryPerson(name, value);
|
||
});
|
||
}
|
||
|
||
//人员管理-管理人员
|
||
function glryEcharts(onlineNumList, orgNameList, onlineNums, attendanceNums, attendanceNumList) {
|
||
var myChart = echarts.init(document.getElementById('glryEcharts'));
|
||
var option = {
|
||
grid: {
|
||
left: '5%',
|
||
right: '7%',
|
||
bottom: '1%',
|
||
top: '7%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
type: 'value'
|
||
},
|
||
yAxis: [{
|
||
type: 'category',
|
||
inverse: true,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
data: orgNameList
|
||
}],
|
||
//滚动条
|
||
dataZoom: [{
|
||
show: false,
|
||
height: 12,
|
||
yAxisIndex: [0],
|
||
bottom: '0%',
|
||
start: 1,
|
||
end: 20,
|
||
zoomLock: true, //禁用缩放
|
||
handleSize: '110%',
|
||
handleStyle: {
|
||
color: "#d3dee5",
|
||
},
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
borderColor: "#90979c"
|
||
}],
|
||
series: [{
|
||
name: '在线人数',
|
||
type: 'bar',
|
||
stack: 'Tik Tok',
|
||
zlevel: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 30,
|
||
color: function(params) {
|
||
var index = params.dataIndex;
|
||
var color1 = ['#FF7F9A', '#F6E2A3', '#37AEFC', '#E6915E', '#FF7F9A', '#F6E2A3', '#37AEFC', '#E6915E',
|
||
'#FF7F9A', '#F6E2A3', '#37AEFC', '#E6915E'
|
||
];
|
||
return color1[index];
|
||
},
|
||
}
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
position: 'insideRight',
|
||
offset: [18, 0],
|
||
textStyle: {
|
||
align: 'center',
|
||
baseline: 'middle',
|
||
fontSize: 14,
|
||
fontWeight: '400',
|
||
color: function(params) {
|
||
var index = params.dataIndex;
|
||
var color1 = ['#FF7F9A', '#F6E2A3', '#37AEFC', '#E6915E'];
|
||
return color1[index];
|
||
},
|
||
textShadowColor: '#000',
|
||
textShadowBlur: '0',
|
||
textShadowOffsetX: 1,
|
||
textShadowOffsetY: 1,
|
||
}
|
||
},
|
||
},
|
||
barWidth: 15,
|
||
data: onlineNumList
|
||
},
|
||
{
|
||
name: '今日考勤人数',
|
||
type: 'bar',
|
||
stack: 'Tik Tok',
|
||
zlevel: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 15,
|
||
color: '#A8FBC8'
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
position: 'insideRight',
|
||
offset: [18, 0],
|
||
textStyle: {
|
||
align: 'center',
|
||
baseline: 'middle',
|
||
fontSize: 14,
|
||
fontWeight: '400',
|
||
color: '#A8FBC8',
|
||
textShadowColor: '#000',
|
||
textShadowBlur: '0',
|
||
textShadowOffsetX: 1,
|
||
textShadowOffsetY: 1,
|
||
}
|
||
},
|
||
},
|
||
barWidth: 15,
|
||
data: attendanceNumList
|
||
}
|
||
]
|
||
};
|
||
var startNum = 0;
|
||
var endNum = 40;
|
||
clearInterval(glryInterval);
|
||
glryInterval = window.setInterval(function() {
|
||
zoomInterval();
|
||
}, intervalTime);
|
||
|
||
function zoomInterval() {
|
||
if (endNum > 100) {
|
||
option.dataZoom[0].start = 0;
|
||
option.dataZoom[0].end = 40;
|
||
startNum = 0;
|
||
endNum = 40;
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
//防止重复触发点击事件
|
||
if (myChart._$handlers.click) {
|
||
myChart._$handlers.click.length = 0;
|
||
}
|
||
myChart.on('click', function(params) {
|
||
var name = params.name;
|
||
var value = params.value;
|
||
openglryPerson(name, value);
|
||
});
|
||
} else {
|
||
option.dataZoom[0].start = startNum;
|
||
option.dataZoom[0].end = endNum;
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
//防止重复触发点击事件
|
||
if (myChart._$handlers.click) {
|
||
myChart._$handlers.click.length = 0;
|
||
}
|
||
myChart.on('click', function(params) {
|
||
var name = params.name;
|
||
var value = params.value;
|
||
openglryPerson(name, value);
|
||
});
|
||
}
|
||
startNum += 20;
|
||
endNum += 20;
|
||
};
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
myChart.on('click', function(params) {
|
||
var name = params.name;
|
||
var value = params.value;
|
||
openglryPerson(name, value);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 工程概况 二级页面
|
||
*/
|
||
function openProPage(voltageLevel, proType) {
|
||
localStorage.setItem('voltageLevel', voltageLevel);
|
||
localStorage.setItem('proType', proType);
|
||
var index = top.layer.open({
|
||
title: false,
|
||
type: 2,
|
||
content: '../../page/index/pro.html',
|
||
area: ['90%', '90%'],
|
||
maxmin: false,
|
||
cancel: function() {
|
||
top.layer.closeAll();
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 人员管理 二级页面施工人员
|
||
*/
|
||
function opensgryPerson(name, value) {
|
||
localStorage.setItem('name', name);
|
||
localStorage.setItem('value', value);
|
||
var index = top.layer.open({
|
||
title: false,
|
||
type: 2,
|
||
content: '../../page/person/construction/person.html',
|
||
area: ['90%', '90%'],
|
||
maxmin: false,
|
||
cancel: function() {
|
||
top.layer.closeAll();
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 人员管理 二级页面管理人员
|
||
*/
|
||
function openglryPerson(name, value) {
|
||
localStorage.setItem('name', name);
|
||
localStorage.setItem('value', value);
|
||
var index = top.layer.open({
|
||
title: false,
|
||
type: 2,
|
||
content: '../../page/person/administration/person.html',
|
||
area: ['90%', '90%'],
|
||
maxmin: false,
|
||
cancel: function() {
|
||
top.layer.closeAll();
|
||
}
|
||
});
|
||
}
|
||
|
||
//风险-绿
|
||
function greenEcharts(total, num, mix) {
|
||
var myChart = echarts.init(document.getElementById('greenDiv'));
|
||
let angle = 0; //角度，用来做简单的动画效果的
|
||
let value = 70;
|
||
var timerId;
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
title: {
|
||
text: '绿色风险',
|
||
left: '50%',
|
||
top: '88%',
|
||
textAlign: 'center',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: '20',
|
||
color: '#fff',
|
||
textAlign: 'center',
|
||
},
|
||
},
|
||
|
||
series: [
|
||
// 紫色
|
||
{
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
return {
|
||
type: 'arc',
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.6,
|
||
startAngle: (0 + angle) * Math.PI / 180,
|
||
endAngle: (90 + angle) * Math.PI / 180
|
||
},
|
||
style: {
|
||
stroke: "#8383FA",
|
||
fill: "transparent",
|
||
lineWidth: 1.5
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
}, {
|
||
name: "ring5", //紫点
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.6;
|
||
let point = getCirlPoint(x0, y0, r, (90 + angle))
|
||
return {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4
|
||
},
|
||
style: {
|
||
stroke: "#8450F9", //绿
|
||
fill: "#8450F9"
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
},
|
||
// 蓝色
|
||
{
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
return {
|
||
type: 'arc',
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.6,
|
||
startAngle: (180 + angle) * Math.PI / 180,
|
||
endAngle: (270 + angle) * Math.PI / 180
|
||
},
|
||
style: {
|
||
stroke: "#4386FA",
|
||
fill: "transparent",
|
||
lineWidth: 1.5
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
},
|
||
{
|
||
name: "ring5", // 蓝色
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.6;
|
||
let point = getCirlPoint(x0, y0, r, (180 + angle))
|
||
return {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4
|
||
},
|
||
style: {
|
||
stroke: "#4386FA", //绿
|
||
fill: "#4386FA"
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
},
|
||
|
||
{
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
return {
|
||
type: 'arc',
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.65,
|
||
startAngle: (270 + -angle) * Math.PI / 180,
|
||
endAngle: (40 + -angle) * Math.PI / 180
|
||
},
|
||
style: {
|
||
stroke: "#0CD3DB",
|
||
fill: "transparent",
|
||
lineWidth: 1.5
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
},
|
||
// 橘色
|
||
{
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
return {
|
||
type: 'arc',
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.65,
|
||
startAngle: (90 + -angle) * Math.PI / 180,
|
||
endAngle: (220 + -angle) * Math.PI / 180
|
||
},
|
||
style: {
|
||
stroke: "#FF8E89",
|
||
fill: "transparent",
|
||
lineWidth: 1.5
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
}, {
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.65;
|
||
let point = getCirlPoint(x0, y0, r, (90 + -angle))
|
||
return {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4
|
||
},
|
||
style: {
|
||
stroke: "#FF8E89", //粉
|
||
fill: "#FF8E89"
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
}, {
|
||
name: "ring5", //绿点
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.65;
|
||
let point = getCirlPoint(x0, y0, r, (270 + -angle))
|
||
return {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4
|
||
},
|
||
style: {
|
||
stroke: "#0CD3DB", //绿
|
||
fill: "#0CD3DB"
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
}, {
|
||
type: 'pie',
|
||
radius: ['72%', '54%'],
|
||
silent: true,
|
||
clockwise: true,
|
||
startAngle: 90,
|
||
z: 0,
|
||
zlevel: 0,
|
||
label: {
|
||
normal: {
|
||
position: "center",
|
||
|
||
}
|
||
},
|
||
data: [{
|
||
value: mix,
|
||
name: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: { // 完成的圆环的颜色
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#A098FC' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.3,
|
||
color: '#4386FA' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: '#4FADFD' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: '#0CD3DB' // 100% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#646CF9' // 100% 处的颜色
|
||
}
|
||
]
|
||
},
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: 100 - mix,
|
||
name: "",
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#173164"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'pie',
|
||
radius: ['42%', '45%'],
|
||
silent: true,
|
||
clockwise: true,
|
||
startAngle: 270,
|
||
z: 0,
|
||
zlevel: 0,
|
||
label: {
|
||
normal: {
|
||
position: "center",
|
||
|
||
}
|
||
},
|
||
data: [{
|
||
value: mix,
|
||
name: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: { // 完成的圆环的颜色
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#00EDF3' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#646CF9' // 100% 处的颜色
|
||
}]
|
||
},
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: mix, //赋值
|
||
label: {
|
||
formatter: '{c}%',
|
||
position: 'center',
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: '18',
|
||
fontWeight: 'normal',
|
||
color: '#29EEF3'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#173164"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
|
||
]
|
||
};
|
||
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||
function getCirlPoint(x0, y0, r, angle) {
|
||
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
|
||
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
|
||
return {
|
||
x: x1,
|
||
y: y1
|
||
}
|
||
}
|
||
|
||
function draw() {
|
||
angle = angle + 3
|
||
myChart.setOption(option, true)
|
||
//window.requestAnimationFrame(draw);
|
||
}
|
||
if (timerId) {
|
||
clearInterval(timerId);
|
||
}
|
||
timerId = setInterval(function() {
|
||
//用setInterval做动画感觉有问题
|
||
draw()
|
||
}, 100);
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
}
|
||
//风险-黄
|
||
function yellowEcharts(total, num, mix) {
|
||
var myChart = echarts.init(document.getElementById('yellowDiv'));
|
||
let angle = 0; //角度，用来做简单的动画效果的
|
||
let value = 80;
|
||
var timerId;
|
||
var option = {
|
||
title: {
|
||
text: '黄色风险',
|
||
left: '50%',
|
||
top: '88%',
|
||
textAlign: 'center',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: '20',
|
||
color: '#fff',
|
||
textAlign: 'center',
|
||
},
|
||
},
|
||
series: [
|
||
// 紫色
|
||
{
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
return {
|
||
type: 'arc',
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.6,
|
||
startAngle: (0 + angle) * Math.PI / 180,
|
||
endAngle: (90 + angle) * Math.PI / 180
|
||
},
|
||
style: {
|
||
stroke: "#8383FA",
|
||
fill: "transparent",
|
||
lineWidth: 1.5
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
}, {
|
||
name: "ring5", //紫点
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.6;
|
||
let point = getCirlPoint(x0, y0, r, (90 + angle))
|
||
return {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4
|
||
},
|
||
style: {
|
||
stroke: "#8450F9", //绿
|
||
fill: "#8450F9"
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
},
|
||
// 蓝色
|
||
{
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
return {
|
||
type: 'arc',
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.6,
|
||
startAngle: (180 + angle) * Math.PI / 180,
|
||
endAngle: (270 + angle) * Math.PI / 180
|
||
},
|
||
style: {
|
||
stroke: "#4386FA",
|
||
fill: "transparent",
|
||
lineWidth: 1.5
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
},
|
||
{
|
||
name: "ring5", // 蓝色
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.6;
|
||
let point = getCirlPoint(x0, y0, r, (180 + angle))
|
||
return {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4
|
||
},
|
||
style: {
|
||
stroke: "#4386FA", //绿
|
||
fill: "#4386FA"
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
},
|
||
|
||
{
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
return {
|
||
type: 'arc',
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.65,
|
||
startAngle: (270 + -angle) * Math.PI / 180,
|
||
endAngle: (40 + -angle) * Math.PI / 180
|
||
},
|
||
style: {
|
||
stroke: "#0CD3DB",
|
||
fill: "transparent",
|
||
lineWidth: 1.5
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
},
|
||
// 橘色
|
||
{
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
return {
|
||
type: 'arc',
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.65,
|
||
startAngle: (90 + -angle) * Math.PI / 180,
|
||
endAngle: (220 + -angle) * Math.PI / 180
|
||
},
|
||
style: {
|
||
stroke: "#FF8E89",
|
||
fill: "transparent",
|
||
lineWidth: 1.5
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
}, {
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.65;
|
||
let point = getCirlPoint(x0, y0, r, (90 + -angle))
|
||
return {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4
|
||
},
|
||
style: {
|
||
stroke: "#FF8E89", //粉
|
||
fill: "#FF8E89"
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
}, {
|
||
name: "ring5", //绿点
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.65;
|
||
let point = getCirlPoint(x0, y0, r, (270 + -angle))
|
||
return {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4
|
||
},
|
||
style: {
|
||
stroke: "#0CD3DB", //绿
|
||
fill: "#0CD3DB"
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
}, {
|
||
type: 'pie',
|
||
radius: ['72%', '54%'],
|
||
silent: true,
|
||
clockwise: true,
|
||
startAngle: 90,
|
||
z: 0,
|
||
zlevel: 0,
|
||
label: {
|
||
normal: {
|
||
position: "center",
|
||
|
||
}
|
||
},
|
||
data: [{
|
||
value: mix,
|
||
name: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: { // 完成的圆环的颜色
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#A098FC' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.3,
|
||
color: '#4386FA' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: '#4FADFD' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: '#0CD3DB' // 100% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#646CF9' // 100% 处的颜色
|
||
}
|
||
]
|
||
},
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: 100 - mix,
|
||
name: "",
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#173164"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'pie',
|
||
radius: ['42%', '45%'],
|
||
silent: true,
|
||
clockwise: true,
|
||
startAngle: 270,
|
||
z: 0,
|
||
zlevel: 0,
|
||
label: {
|
||
normal: {
|
||
position: "center",
|
||
|
||
}
|
||
},
|
||
data: [{
|
||
value: mix,
|
||
name: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: { // 完成的圆环的颜色
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#00EDF3' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#646CF9' // 100% 处的颜色
|
||
}]
|
||
},
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: mix,
|
||
label: {
|
||
formatter: '{c}%',
|
||
position: 'center',
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: '18',
|
||
fontWeight: 'normal',
|
||
color: '#29EEF3'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#173164"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
|
||
]
|
||
};
|
||
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||
function getCirlPoint(x0, y0, r, angle) {
|
||
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
|
||
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
|
||
return {
|
||
x: x1,
|
||
y: y1
|
||
}
|
||
}
|
||
|
||
function draw() {
|
||
angle = angle + 3
|
||
myChart.setOption(option, true)
|
||
//window.requestAnimationFrame(draw);
|
||
}
|
||
if (timerId) {
|
||
clearInterval(timerId);
|
||
}
|
||
timerId = setInterval(function() {
|
||
//用setInterval做动画感觉有问题
|
||
draw()
|
||
}, 100);
|
||
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
}
|
||
//风险-红
|
||
function redEcharts(total, num, mix) {
|
||
var myChart = echarts.init(document.getElementById('redDiv'));
|
||
let angle = 0; //角度，用来做简单的动画效果的
|
||
let value = 80;
|
||
var timerId;
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
title: {
|
||
text: '红色风险',
|
||
left: '50%',
|
||
top: '88%',
|
||
textAlign: 'center',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: '20',
|
||
color: '#fff',
|
||
textAlign: 'center',
|
||
},
|
||
},
|
||
series: [
|
||
// 紫色
|
||
{
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
return {
|
||
type: 'arc',
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.6,
|
||
startAngle: (0 + angle) * Math.PI / 180,
|
||
endAngle: (90 + angle) * Math.PI / 180
|
||
},
|
||
style: {
|
||
stroke: "#8383FA",
|
||
fill: "transparent",
|
||
lineWidth: 1.5
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
}, {
|
||
name: "ring5", //紫点
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.6;
|
||
let point = getCirlPoint(x0, y0, r, (90 + angle))
|
||
return {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4
|
||
},
|
||
style: {
|
||
stroke: "#8450F9", //绿
|
||
fill: "#8450F9"
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
},
|
||
// 蓝色
|
||
{
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
return {
|
||
type: 'arc',
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.6,
|
||
startAngle: (180 + angle) * Math.PI / 180,
|
||
endAngle: (270 + angle) * Math.PI / 180
|
||
},
|
||
style: {
|
||
stroke: "#4386FA",
|
||
fill: "transparent",
|
||
lineWidth: 1.5
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
},
|
||
{
|
||
name: "ring5", // 蓝色
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.6;
|
||
let point = getCirlPoint(x0, y0, r, (180 + angle))
|
||
return {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4
|
||
},
|
||
style: {
|
||
stroke: "#4386FA", //绿
|
||
fill: "#4386FA"
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
},
|
||
|
||
{
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
return {
|
||
type: 'arc',
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.65,
|
||
startAngle: (270 + -angle) * Math.PI / 180,
|
||
endAngle: (40 + -angle) * Math.PI / 180
|
||
},
|
||
style: {
|
||
stroke: "#0CD3DB",
|
||
fill: "transparent",
|
||
lineWidth: 1.5
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
},
|
||
// 橘色
|
||
{
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
return {
|
||
type: 'arc',
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.65,
|
||
startAngle: (90 + -angle) * Math.PI / 180,
|
||
endAngle: (220 + -angle) * Math.PI / 180
|
||
},
|
||
style: {
|
||
stroke: "#FF8E89",
|
||
fill: "transparent",
|
||
lineWidth: 1.5
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
}, {
|
||
name: "ring5",
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.65;
|
||
let point = getCirlPoint(x0, y0, r, (90 + -angle))
|
||
return {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4
|
||
},
|
||
style: {
|
||
stroke: "#FF8E89", //粉
|
||
fill: "#FF8E89"
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
}, {
|
||
name: "ring5", //绿点
|
||
type: 'custom',
|
||
coordinateSystem: "none",
|
||
renderItem: function(params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = Math.min(api.getWidth(), api.getHeight()) / 1.4 * 0.65;
|
||
let point = getCirlPoint(x0, y0, r, (270 + -angle))
|
||
return {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4
|
||
},
|
||
style: {
|
||
stroke: "#0CD3DB", //绿
|
||
fill: "#0CD3DB"
|
||
},
|
||
silent: true
|
||
};
|
||
},
|
||
data: [0]
|
||
}, {
|
||
type: 'pie',
|
||
radius: ['72%', '54%'],
|
||
silent: true,
|
||
clockwise: true,
|
||
startAngle: 90,
|
||
z: 0,
|
||
zlevel: 0,
|
||
label: {
|
||
normal: {
|
||
position: "center",
|
||
|
||
}
|
||
},
|
||
data: [{
|
||
value: mix,
|
||
name: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: { // 完成的圆环的颜色
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#A098FC' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.3,
|
||
color: '#4386FA' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: '#4FADFD' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: '#0CD3DB' // 100% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#646CF9' // 100% 处的颜色
|
||
}
|
||
]
|
||
},
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: 100 - mix,
|
||
name: "",
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#173164"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'pie',
|
||
radius: ['42%', '45%'],
|
||
silent: true,
|
||
clockwise: true,
|
||
startAngle: 270,
|
||
z: 0,
|
||
zlevel: 0,
|
||
label: {
|
||
normal: {
|
||
position: "center",
|
||
|
||
}
|
||
},
|
||
data: [{
|
||
value: mix,
|
||
name: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: { // 完成的圆环的颜色
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#00EDF3' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#646CF9' // 100% 处的颜色
|
||
}]
|
||
},
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: mix,
|
||
label: {
|
||
formatter: '{c}%',
|
||
position: 'center',
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: '18',
|
||
fontWeight: 'normal',
|
||
color: '#29EEF3'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#173164"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
|
||
]
|
||
};
|
||
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||
function getCirlPoint(x0, y0, r, angle) {
|
||
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
|
||
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
|
||
return {
|
||
x: x1,
|
||
y: y1
|
||
}
|
||
}
|
||
|
||
function draw() {
|
||
angle = angle + 3
|
||
myChart.setOption(option, true)
|
||
//window.requestAnimationFrame(draw);
|
||
}
|
||
if (timerId) {
|
||
clearInterval(timerId);
|
||
}
|
||
timerId = setInterval(function() {
|
||
//用setInterval做动画感觉有问题
|
||
draw()
|
||
}, 100);
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
}
|
||
//工程造价
|
||
function proMoneyEcharts() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
beforeSend: function(request) {
|
||
request.setRequestHeader("token", token);
|
||
},
|
||
url: smz_web_url + 'costProgressPayment/getProgressNum',
|
||
dataType: "json",
|
||
data: {
|
||
selfOrgId: selfOrgId,
|
||
proId: "no"
|
||
},
|
||
success: function(data) {
|
||
console.log("data", data);
|
||
initProMoneyEcharts(data);
|
||
},
|
||
error: function(err) {
|
||
progressIndex = 0;
|
||
}
|
||
});
|
||
}
|
||
var jj;
|
||
|
||
function initProMoneyEcharts(data) {
|
||
var proList = data.obj.proList;
|
||
var len = proList.length;
|
||
var start = 1;
|
||
var end = 80;
|
||
var progress = 20;
|
||
if (len > 4) {
|
||
end = 4 / len * 100;
|
||
progress = (100 - end) / (len - 4);
|
||
}
|
||
console.log("len", len);
|
||
console.log("start", start);
|
||
console.log("end", end);
|
||
console.log("progress", progress);
|
||
var amountList = data.obj.amountList;
|
||
var finishAmountList = data.obj.finishAmountList;
|
||
var progressList = data.obj.progressList;
|
||
var myChart = echarts.init(document.getElementById('proMoney'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
label: {
|
||
show: false,
|
||
color: 'fff'
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
left: "10%",
|
||
top: "30%",
|
||
right: "10%",
|
||
bottom: "10%"
|
||
},
|
||
legend: {
|
||
data: ["总数", "已完成金额", "已完成百分比"],
|
||
top: "9%",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 14
|
||
}
|
||
},
|
||
xAxis: {
|
||
data: proList,
|
||
axisLine: {
|
||
show: true, //隐藏X轴轴线
|
||
lineStyle: {
|
||
color: "#3d5269",
|
||
width: 1
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: true, //隐藏X轴刻度
|
||
alignWithLabel: true
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
textStyle: {
|
||
color: "#fff", //X轴文字颜色
|
||
fontSize: 14
|
||
},
|
||
formatter: function(value) {
|
||
var len = value.length;
|
||
return value.substring(0, 4) + "..." + value.substring(len - 5, len);
|
||
}
|
||
}
|
||
},
|
||
yAxis: [{
|
||
type: "value",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 14
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: "#3d5269"
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 14
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: "value",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 14
|
||
},
|
||
position: "right",
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#396A87",
|
||
width: 1
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
formatter: "{value} %", //右侧Y轴文字显示
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 14
|
||
}
|
||
}
|
||
}
|
||
],
|
||
//滚动条
|
||
dataZoom: [{
|
||
show: false,
|
||
height: 12,
|
||
xAxisIndex: [0],
|
||
bottom: '0%',
|
||
start: start,
|
||
end: end,
|
||
zoomLock: true, //禁用缩放
|
||
handleSize: '110%',
|
||
handleStyle: {
|
||
color: "#d3dee5",
|
||
},
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
borderColor: "#90979c"
|
||
}],
|
||
series: [{
|
||
name: "总数",
|
||
type: "bar",
|
||
barWidth: 18,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#fff',
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "#F2F1A3"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#FFFFF3"
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: amountList
|
||
},
|
||
{
|
||
name: "已完成金额",
|
||
type: "bar",
|
||
barWidth: 18,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#fff',
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "#1CFFF4"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#D5FFFD"
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: finishAmountList
|
||
},
|
||
{
|
||
name: "已完成百分比",
|
||
type: "line",
|
||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||
showAllSymbol: true, //显示所有图形。
|
||
symbol: "pin", //标记的图形为实心圆
|
||
symbolSize: 30,
|
||
itemStyle: {
|
||
//折线拐点标志的样式
|
||
color: "#FFA4A4",
|
||
borderColor: "#FFA4A4",
|
||
width: 2,
|
||
shadowColor: "#FFA4A4",
|
||
shadowBlur: 2
|
||
},
|
||
lineStyle: {
|
||
color: "#FFA4A4",
|
||
width: 2,
|
||
shadowBlur: 2
|
||
},
|
||
label: {
|
||
show: true,
|
||
offset: [0, 22],
|
||
color: '#fff'
|
||
},
|
||
data: progressList
|
||
}
|
||
]
|
||
}
|
||
|
||
var startNum = start;
|
||
var endNum = end;
|
||
jj = window.setInterval(function() {
|
||
if (endNum > 100) {
|
||
option.dataZoom[0].start = start;
|
||
option.dataZoom[0].end = end;
|
||
startNum = start;
|
||
endNum = end;
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
//防止重复触发点击事件
|
||
if (myChart._$handlers.click) {
|
||
myChart._$handlers.click.length = 0;
|
||
}
|
||
myChart.on('click', function(params) {
|
||
console.log("params", params);
|
||
var proName = params.name;
|
||
localStorage.setItem("index_proName", proName);
|
||
var index = top.layer.open({
|
||
title: false,
|
||
type: 2,
|
||
content: '../../page/cost/progressFundAppropriationMge.html',
|
||
area: ['90%', '90%'],
|
||
maxmin: false
|
||
});
|
||
});
|
||
} else {
|
||
option.dataZoom[0].start = startNum;
|
||
option.dataZoom[0].end = endNum;
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
//防止重复触发点击事件
|
||
if (myChart._$handlers.click) {
|
||
myChart._$handlers.click.length = 0;
|
||
}
|
||
myChart.on('click', function(params) {
|
||
console.log("params", params);
|
||
var proName = params.name;
|
||
localStorage.setItem("index_proName", proName);
|
||
var index = top.layer.open({
|
||
title: false,
|
||
type: 2,
|
||
content: '../../page/cost/progressFundAppropriationMge.html',
|
||
area: ['90%', '90%'],
|
||
maxmin: false
|
||
});
|
||
});
|
||
}
|
||
startNum += progress;
|
||
endNum += progress;
|
||
}, intervalTime);
|
||
//为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
myChart.on('click', function(params) {
|
||
console.log("params", params);
|
||
var proName = params.name;
|
||
localStorage.setItem("index_proName", proName);
|
||
var index = top.layer.open({
|
||
title: false,
|
||
type: 2,
|
||
content: '../../page/cost/progressFundAppropriationMge.html',
|
||
area: ['90%', '90%'],
|
||
maxmin: false
|
||
});
|
||
});
|
||
}
|
||
|
||
//安全检查
|
||
function aqjcPhoto() {
|
||
$.ajax({
|
||
type: "post",
|
||
url: smz_web_url + "scheck/getCurrentPhoto",
|
||
data: {
|
||
token: token,
|
||
selfOrgId: selfOrgId
|
||
},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
$("#WorkPhoto").empty();
|
||
if (data.res == "1") {
|
||
var results = data.obj;
|
||
var html = "";
|
||
if (results != null && results.length > 0) {
|
||
if (results.length >= 6) {
|
||
for (var i = 0; i < results.length; i += 6) {
|
||
var num = results.length - i;
|
||
if (num >= 6) {
|
||
var path = results[i].photoType;
|
||
var path2 = results[i + 1].photoType;
|
||
var path3 = results[i + 2].photoType;
|
||
var path4 = results[i + 3].photoType;
|
||
var path5 = results[i + 4].photoType;
|
||
var path6 = results[i + 5].photoType;
|
||
if (i == 0) {
|
||
html += "<div class='item active' style='width: 100%;height:100%;margin-left: 2%;margin-top: 1%'>";
|
||
html += '<img src=\"' + path +
|
||
'"\ onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
html += '<img src=\"' + path2 +
|
||
'"\ onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
html += '<img src=\"' + path3 +
|
||
'"\ onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
html += '<img src=\"' + path4 +
|
||
'"\ onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
html += '<img src=\"' + path5 +
|
||
'"\ onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
html += '<img src=\"' + path6 +
|
||
'"\ onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
html += "</div>";
|
||
} else {
|
||
html += "<div class='item' style='width: 100%;height:100%;margin-left: 2%;margin-top: 1%'>";
|
||
html += '<img src=\"' + path +
|
||
'"\" onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
html += '<img src=\"' + path2 +
|
||
'"\" onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
html += '<img src=\"' + path3 +
|
||
'"\" onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
html += '<img src=\"' + path4 +
|
||
'"\" onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
html += '<img src=\"' + path5 +
|
||
'"\" onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
html += '<img src=\"' + path6 +
|
||
'"\" onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
html += "</div>";
|
||
}
|
||
} else {
|
||
html += "<div class='item' style='width: 100%;height:100%;margin-left: 2%;margin-top: 1%'>";
|
||
for (var j = 0; j < num; j++) {
|
||
var ls = results[i + j];
|
||
var path = ls.photoType;
|
||
html += '<img src=\"' + path +
|
||
'"\" onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
}
|
||
html += "</div>";
|
||
}
|
||
}
|
||
} else {
|
||
html += "<div class='item active' style='width: 100%;height:100%;margin-left: 2%;'>";
|
||
for (var j = 0; j < results.length; j++) {
|
||
var l = results[j];
|
||
var path = l.photoType;
|
||
html += '<img src=\"' + path +
|
||
'"\" onerror="javascript:this.src=\'..\/..\/img\/home\/notPhoto.png\'" class="img" style="width: 30%;height:49%;float: left;margin: 1%;" />';
|
||
}
|
||
html += "</div>";
|
||
}
|
||
$("#WorkPhoto").append(html);
|
||
} else {
|
||
html +=
|
||
"<li class='center' style='color:#ffffff;list-style-type:none;text-align: center;margin-top: 22%;'>没有相关数据</li>";
|
||
}
|
||
$("#WorkPhoto").append(html);
|
||
}
|
||
},
|
||
error: function(XMLHttpRequest, textStatus, errorThrown) {}
|
||
});
|
||
}
|
||
//作业票
|
||
function zypEcharts(companyName, reviewed, finished, total) {
|
||
var myChart = echarts.init(document.getElementById('zypDiv'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
top: '10%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
data: ['总数', '未完工', '已完工']
|
||
},
|
||
grid: {
|
||
top: '25%',
|
||
right: '3%',
|
||
left: '8%',
|
||
bottom: '12%'
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: companyName,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.12)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
margin: 10,
|
||
color: '#e2e9ff',
|
||
textStyle: {
|
||
fontSize: 14
|
||
},
|
||
},
|
||
}],
|
||
yAxis: [{
|
||
splitNumber: 3,
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
color: '#e2e9ff',
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.12)'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#233e64'
|
||
}
|
||
},
|
||
}],
|
||
//滚动条
|
||
dataZoom: [{
|
||
show: false,
|
||
height: 12,
|
||
xAxisIndex: [0],
|
||
bottom: '0%',
|
||
start: 1,
|
||
end: 40,
|
||
zoomLock: true, //禁用缩放
|
||
handleSize: '110%',
|
||
handleStyle: {
|
||
color: "#d3dee5",
|
||
},
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
borderColor: "#90979c"
|
||
}],
|
||
series: [{
|
||
name: '总数',
|
||
type: 'bar',
|
||
data: total,
|
||
barWidth: '15px',
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#67A8FF' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#88F4FE' // 100% 处的颜色
|
||
}], false),
|
||
barBorderRadius: [30, 30, 30, 30],
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '未完工',
|
||
type: 'bar',
|
||
data: reviewed,
|
||
barWidth: '15px',
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#AAAD80' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#BBBAAA' // 100% 处的颜色
|
||
}], false),
|
||
barBorderRadius: [30, 30, 30, 30],
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '已完工',
|
||
type: 'bar',
|
||
data: finished,
|
||
barWidth: '15px',
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#4CEA80' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#D6FECA' // 100% 处的颜色
|
||
}], false),
|
||
barBorderRadius: [30, 30, 30, 30],
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
var startNum = 0;
|
||
var endNum = 40;
|
||
window.setInterval(function() {
|
||
if (endNum > 100) {
|
||
option.dataZoom[0].start = 0;
|
||
option.dataZoom[0].end = 40;
|
||
startNum = 0;
|
||
endNum = 40;
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
//防止重复触发点击事件
|
||
if (myChart._$handlers.click) {
|
||
myChart._$handlers.click.length = 0;
|
||
}
|
||
myChart.on('click', function(params) {
|
||
var name = params.name; // 分公司的名称
|
||
// var type = params.seriesName;
|
||
console.log(params);
|
||
showZyp(name);
|
||
});
|
||
} else {
|
||
option.dataZoom[0].start = startNum;
|
||
option.dataZoom[0].end = endNum;
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
//防止重复触发点击事件
|
||
if (myChart._$handlers.click) {
|
||
myChart._$handlers.click.length = 0;
|
||
}
|
||
myChart.on('click', function(params) {
|
||
var name = params.name; // 分公司的名称
|
||
console.log(params);
|
||
showZyp(name);
|
||
});
|
||
}
|
||
startNum += 20;
|
||
endNum += 20;
|
||
}, intervalTime);
|
||
// 为echarts对象加载数据
|
||
myChart.setOption(option);
|
||
myChart.on('click', function(params) {
|
||
var name = params.name; // 分公司的名称
|
||
console.log(params);
|
||
showZyp(name);
|
||
});
|
||
}
|
||
|
||
function loading() {
|
||
$(document).on('click', '#progWitnes', function(e) {
|
||
//关闭遮罩层的代码或者需要在点击指定区域之外区域才执行的代码
|
||
openSafetyCheck(); // 安全检查
|
||
});
|
||
$(document).on('click', '#leftPhotoBtn', function(e) {
|
||
e.stopPropagation(); //阻止冒泡
|
||
//需要执行的代码
|
||
});
|
||
$(document).on('click', '#rightPhotoBtn', function(e) {
|
||
e.stopPropagation(); //阻止冒泡
|
||
//需要执行的代码
|
||
});
|
||
}
|
||
|
||
function openSafetyCheck() {
|
||
localStorage.setItem("titleName", "安全检查");
|
||
var index = top.layer.open({
|
||
title: false,
|
||
type: 2,
|
||
content: '../../page/security/securityCount.html',
|
||
area: ['90%', '90%'],
|
||
maxmin: false
|
||
});
|
||
}
|