1358 lines
40 KiB
JavaScript
1358 lines
40 KiB
JavaScript
let table, layer, form, laydate;
|
|
let fontSize = "14",
|
|
fontFamily = "Alibaba PuHuiTi R",
|
|
fontColor = "#fff";
|
|
|
|
layui.use(["layer", "table", "form", "laydate"], function () {
|
|
layer = layui.layer;
|
|
table = layui.table;
|
|
form = layui.form;
|
|
|
|
laydate = layui.laydate;
|
|
laydate.render({
|
|
elem: "#ID-laydate-rangeLinked",
|
|
range: ["#ID-laydate-start-date-1", "#ID-laydate-end-date-1"],
|
|
rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
|
|
});
|
|
|
|
$("#ID-laydate-start-date-1").val(getOneMonthAgo())
|
|
$("#ID-laydate-end-date-1").val(getNowTime())
|
|
|
|
let startTime = "";
|
|
let endTime = "";
|
|
if ($("#ID-laydate-start-date-1").val() != "") {
|
|
startTime = $("#ID-laydate-start-date-1").val();
|
|
endTime = $("#ID-laydate-end-date-1").val();
|
|
} else {
|
|
startTime = "";
|
|
endTime = "";
|
|
}
|
|
|
|
initData(startTime , endTime);
|
|
|
|
//echarts图
|
|
getProProgress(startTime, endTime);
|
|
});
|
|
|
|
function getProProgress(startTime, endTime){
|
|
const url =
|
|
commonUrl +
|
|
"screen/proProgress/selectProProgress?startTime=" + startTime + "&endTime=" + endTime;
|
|
ajaxRequestGet(
|
|
url,
|
|
"GET",
|
|
true,
|
|
function () {
|
|
},
|
|
function (result) {
|
|
if (result.code === 200) {
|
|
setData(result);
|
|
} else if (result.code === 500) {
|
|
setData(result);
|
|
} else if (result.code === 401) {
|
|
loginout(1);
|
|
}
|
|
},
|
|
function (xhr, status, error) {
|
|
errorFn(xhr, status, error);
|
|
setData(null);
|
|
},
|
|
aqEnnable
|
|
);
|
|
|
|
function setData(data) {
|
|
if(data.code === 200){
|
|
var list = data.data
|
|
initCivilEngineering(list);
|
|
initElectrical(list);
|
|
|
|
}else{
|
|
layer.msg(data.msg || "暂无数据");
|
|
initCivilEngineering("")
|
|
initElectrical("")
|
|
}
|
|
}
|
|
}
|
|
|
|
function query() {
|
|
let startTime = "";
|
|
let endTime = "";
|
|
if ($("#ID-laydate-start-date-1").val() != "") {
|
|
startTime = $("#ID-laydate-start-date-1").val();
|
|
endTime = $("#ID-laydate-end-date-1").val();
|
|
} else {
|
|
startTime = "";
|
|
endTime = "";
|
|
}
|
|
initData(startTime, endTime);
|
|
getProProgress(startTime, endTime);
|
|
}
|
|
|
|
// 获取数据
|
|
|
|
function initData(startTime, endTime) {
|
|
const url = commonUrl + "screen/projectData/selectProjectData";
|
|
ajaxRequest(
|
|
url,
|
|
"get",
|
|
{
|
|
startTime: startTime,
|
|
endTime: endTime,
|
|
},
|
|
true,
|
|
function () {},
|
|
function (result) {
|
|
console.log(result, "数据");
|
|
|
|
const data = result.data;
|
|
|
|
let projectProgress = "";
|
|
let projectCost = "";
|
|
let projectRisk = [];
|
|
let projectDetail = {};
|
|
let electrical = [];
|
|
let civilEngineering = [];
|
|
let projectCostList = [];
|
|
let todayRisk = "";
|
|
|
|
for (const key in data) {
|
|
switch (key) {
|
|
case "当前工程进度":
|
|
projectProgress = data[key];
|
|
break;
|
|
case "当前成本投入":
|
|
projectCost = data[key];
|
|
break;
|
|
case "今日风险":
|
|
todayRisk = data[key];
|
|
break;
|
|
case "项目风险":
|
|
projectRisk = data[key];
|
|
break;
|
|
case "项目情况详情":
|
|
projectDetail = data[key];
|
|
break;
|
|
case "项目成本":
|
|
projectCostList = data[key];
|
|
break;
|
|
case "已销号风险":
|
|
$("#accountTerminatedRisk").text(data[key]);
|
|
break;
|
|
case "剩余风险":
|
|
$("#remainingRisk").text(data[key]);
|
|
break;
|
|
case "剩余二级及以上风险":
|
|
$("#remainingSecondaryRisk").text(data[key]);
|
|
break;
|
|
}
|
|
}
|
|
|
|
for (const key in projectDetail) {
|
|
switch (key) {
|
|
case "变电电气专业":
|
|
electrical = projectDetail[key];
|
|
break;
|
|
case "变电土建专业":
|
|
civilEngineering = projectDetail[key];
|
|
break;
|
|
}
|
|
}
|
|
|
|
initProjectProgress(projectProgress);
|
|
initProjectCost(projectCost);
|
|
initProjectRisk(todayRisk);
|
|
|
|
|
|
initItemCost(projectCostList);
|
|
initTotalRisk(projectRisk);
|
|
},
|
|
function (xhr) {
|
|
// error(xhr);
|
|
}
|
|
);
|
|
}
|
|
|
|
|
|
|
|
function initProjectProgress(projectProgress) {
|
|
const a = projectProgress.split("%")[0] * 1;
|
|
const b = 100 - a;
|
|
const myChart = echarts.init(document.getElementById("projectProgress"));
|
|
const option = {
|
|
title: {
|
|
text: "当前工程进度",
|
|
left: "48%",
|
|
top: "30%",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 15,
|
|
fontWeight: "normal",
|
|
},
|
|
},
|
|
graphic: {
|
|
type: "text",
|
|
left: "50%",
|
|
top: "50%",
|
|
style: {
|
|
text: projectProgress,
|
|
textAlign: "center",
|
|
fill: "#79FFFF",
|
|
fontSize: 24,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["25%", "50%"],
|
|
center: ["30%", "50%"],
|
|
startAngle: 90,
|
|
hoverAnimation: false,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: a,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#3BE6E6",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#FFFFFF",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
{
|
|
value: b,
|
|
itemStyle: {
|
|
color: "rgba(8, 220, 224, 0.1)",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function getProjectCost() {
|
|
initProjectCost();
|
|
}
|
|
|
|
function initProjectCost(projectCost) {
|
|
const b = 100 - projectCost;
|
|
const myChart = echarts.init(document.getElementById("projectCost"));
|
|
const option = {
|
|
title: {
|
|
text: "当前成本投入",
|
|
left: "48%",
|
|
top: "30%",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 15,
|
|
fontWeight: "normal",
|
|
},
|
|
},
|
|
graphic: {
|
|
type: "text",
|
|
left: "50%",
|
|
top: "50%",
|
|
style: {
|
|
text: projectCost + "%",
|
|
textAlign: "center",
|
|
fill: "#79FFFF",
|
|
fontSize: 24,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["25%", "50%"],
|
|
center: ["30%", "50%"],
|
|
startAngle: 90,
|
|
hoverAnimation: false,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: projectCost,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#3BE6E6",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#FFFFFF",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
{
|
|
value: b,
|
|
itemStyle: {
|
|
color: "rgba(8, 220, 224, 0.1)",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function getProjectRisk() {
|
|
initProjectRisk();
|
|
}
|
|
|
|
// 随机生成一个颜色
|
|
function getRandomColor() {
|
|
return "#" + Math.floor(Math.random() * 16777215).toString(16);
|
|
}
|
|
|
|
function initProjectRisk(projectRisk) {
|
|
$(".big-number").text(
|
|
projectRisk.filter((item) => item.riskLevel == 0)[0].num
|
|
);
|
|
const level = {
|
|
1: "一级风险",
|
|
2: "二级风险",
|
|
3: "三级风险",
|
|
4: "四级风险",
|
|
5: "五级风险",
|
|
};
|
|
const data_1 = projectRisk
|
|
.filter((item) => item.riskLevel != 0)
|
|
.map((item) => {
|
|
return {
|
|
value: item.num,
|
|
name: level[item.riskLevel],
|
|
itemStyle: {
|
|
color: getRandomColor(),
|
|
},
|
|
};
|
|
});
|
|
|
|
console.log(data_1, "data_1");
|
|
const myChart = echarts.init(document.getElementById("projectRisk"));
|
|
const option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b}: {c}个 ({d}%)",
|
|
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
|
borderColor: "#08DCE0",
|
|
borderWidth: 1,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
right: "10%",
|
|
itemGap: 12,
|
|
itemWidth: 20,
|
|
itemHeight: 8,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
rich: {
|
|
name: {
|
|
width: 80,
|
|
color: "#fff",
|
|
},
|
|
value: {
|
|
width: 60,
|
|
align: "right",
|
|
color: "#79FFFF",
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
},
|
|
formatter: (name) => {
|
|
const data = option.series[0].data;
|
|
const item = data.find((d) => d.name === name);
|
|
const percent = item ? item.value : 0;
|
|
return `{name|${name}} {value|${percent}}`;
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "用电统计",
|
|
type: "pie",
|
|
roseType: "radius",
|
|
radius: [0, "70%"],
|
|
center: ["25%", "45%"],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 5,
|
|
borderColor: "rgba(0, 0, 0, 0.3)",
|
|
borderWidth: 2,
|
|
shadowBlur: 10,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
shadowBlur: 20,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(8, 220, 224, 0.8)",
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: data_1,
|
|
// data: [
|
|
// // {
|
|
// // value: 60,
|
|
// // name: "二级风险",
|
|
// // itemStyle: {
|
|
// // color: "#75F7EC",
|
|
// // },
|
|
// // },
|
|
// // {
|
|
// // value: 60,
|
|
// // name: "三级风险",
|
|
// // itemStyle: {
|
|
// // color: "#75F791",
|
|
// // },
|
|
// // },
|
|
// // {
|
|
// // value: 26,
|
|
// // name: "四级风险",
|
|
// // itemStyle: {
|
|
// // color: "#00C3F2",
|
|
// // },
|
|
// // },
|
|
// // {
|
|
// // value: 14,
|
|
// // name: "五级风险",
|
|
// // itemStyle: {
|
|
// // color: "#EB846A",
|
|
// // },
|
|
// // },
|
|
// ],
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function initCivilEngineering(date) {
|
|
const xLabel = date.day;
|
|
const expenditureData = date.tjplanNum;
|
|
const incomeData = date.tjexeNum;
|
|
const leftChart = echarts.init(document.getElementById("civilEngineering"));
|
|
|
|
const option = {
|
|
title: {
|
|
text: "土建专业",
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: fontSize,
|
|
fontFamily: fontFamily,
|
|
},
|
|
left: 5,
|
|
top: 5,
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
borderColor: "rgba(255,255,255,.3)",
|
|
backgroundColor: "rgba(19,51,55,.6)",
|
|
textStyle: {
|
|
color: "white", //设置文字颜色
|
|
},
|
|
borderWidth: 1,
|
|
padding: 10,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
top: "5%",
|
|
right: "4%",
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
grid: {
|
|
top: "25%",
|
|
left: "6%",
|
|
right: "4%",
|
|
bottom: "20%",
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#5A6E71",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: fontColor,
|
|
fontSize: fontSize,
|
|
fontFamily: fontFamily,
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#233653",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
},
|
|
data: xLabel,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
min: 0,
|
|
splitNumber: 10,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.6)",
|
|
type: "dashed",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.8)",
|
|
padding: 16,
|
|
},
|
|
formatter: function (value) {
|
|
if (value === 0) {
|
|
return value;
|
|
}
|
|
return value;
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
"dataZoom": [{
|
|
"show": true,
|
|
"height": 12,
|
|
"xAxisIndex": [
|
|
0
|
|
],
|
|
bottom:'8%',
|
|
"start": 10,
|
|
"end": 90,
|
|
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
|
handleSize: '110%',
|
|
handleStyle:{
|
|
color:"#d3dee5",
|
|
|
|
},
|
|
textStyle:{
|
|
color:"#fff"},
|
|
borderColor:"#90979c"
|
|
}, {
|
|
"type": "inside",
|
|
"show": true,
|
|
"height": 15,
|
|
"start": 1,
|
|
"end": 35
|
|
}],
|
|
series: [
|
|
{
|
|
name: "计划",
|
|
type: "line",
|
|
symbol: "circle",
|
|
showAllSymbol: true,
|
|
symbolSize: 0,
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 2,
|
|
color: "#00FEFC",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: "#00FEFC",
|
|
borderWidth: 2,
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(18,86,100,0.6)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(16,72,81, 0.7)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
shadowColor: "rgba(15,55,63, 0.8)",
|
|
shadowBlur: 20,
|
|
},
|
|
},
|
|
data: expenditureData,
|
|
},
|
|
{
|
|
name: "实现",
|
|
type: "line",
|
|
symbol: "circle",
|
|
showAllSymbol: true,
|
|
symbolSize: 0,
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 2,
|
|
color: "rgba(25,196,134, 1)",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: "rgba(25,196,134, 1)",
|
|
borderWidth: 2,
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(17,95,82, 0.6)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(16,72,67, 0.7)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
shadowColor: "rgba(15,55,54, 0.8)",
|
|
shadowBlur: 20,
|
|
},
|
|
},
|
|
data: incomeData,
|
|
},
|
|
],
|
|
};
|
|
|
|
leftChart.setOption(option);
|
|
// 响应式调整
|
|
window.addEventListener("resize", function () {
|
|
leftChart.resize();
|
|
});
|
|
}
|
|
|
|
function initElectrical(data) {
|
|
const xLabel = data.day;
|
|
const expenditureData = data.dqplanNum;
|
|
const incomeData = data.dqexeNum;
|
|
const leftChart = echarts.init(document.getElementById("electrical"));
|
|
const option = {
|
|
title: {
|
|
text: "电气专业",
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: fontSize,
|
|
fontFamily: fontFamily,
|
|
},
|
|
left: 5,
|
|
top: 5,
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
borderColor: "rgba(255,255,255,.3)",
|
|
backgroundColor: "rgba(19,51,55,.6)",
|
|
textStyle: {
|
|
color: "white", //设置文字颜色
|
|
},
|
|
borderWidth: 1,
|
|
padding: 10,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
top: "5%",
|
|
right: "4%",
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
grid: {
|
|
top: "25%",
|
|
left: "6%",
|
|
right: "4%",
|
|
bottom: "20%",
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#5A6E71",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: fontColor,
|
|
fontSize: fontSize,
|
|
fontFamily: fontFamily,
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#233653",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
},
|
|
data: xLabel,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
min: 0,
|
|
splitNumber: 10,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.6)",
|
|
type: "dashed",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.8)",
|
|
padding: 16,
|
|
},
|
|
formatter: function (value) {
|
|
if (value === 0) {
|
|
return value;
|
|
}
|
|
return value;
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
"dataZoom": [{
|
|
"show": true,
|
|
"height": 12,
|
|
"xAxisIndex": [
|
|
0
|
|
],
|
|
bottom:'8%',
|
|
"start": 10,
|
|
"end": 90,
|
|
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
|
handleSize: '110%',
|
|
handleStyle:{
|
|
color:"#d3dee5",
|
|
|
|
},
|
|
textStyle:{
|
|
color:"#fff"},
|
|
borderColor:"#90979c"
|
|
}, {
|
|
"type": "inside",
|
|
"show": true,
|
|
"height": 15,
|
|
"start": 1,
|
|
"end": 35
|
|
}],
|
|
series: [
|
|
{
|
|
name: "计划",
|
|
type: "line",
|
|
symbol: "circle",
|
|
showAllSymbol: true,
|
|
symbolSize: 0,
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 2,
|
|
color: "#00FEFC",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: "#00FEFC",
|
|
borderWidth: 2,
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(18,86,100,0.6)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(16,72,81, 0.7)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
shadowColor: "rgba(15,55,63, 0.8)",
|
|
shadowBlur: 20,
|
|
},
|
|
},
|
|
data: expenditureData,
|
|
},
|
|
{
|
|
name: "实现",
|
|
type: "line",
|
|
symbol: "circle",
|
|
showAllSymbol: true,
|
|
symbolSize: 0,
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 2,
|
|
color: "rgba(25,196,134, 1)",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: "rgba(25,196,134, 1)",
|
|
borderWidth: 2,
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(17,95,82, 0.6)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(16,72,67, 0.7)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
shadowColor: "rgba(15,55,54, 0.8)",
|
|
shadowBlur: 20,
|
|
},
|
|
},
|
|
data: incomeData,
|
|
},
|
|
],
|
|
};
|
|
|
|
leftChart.setOption(option);
|
|
// 响应式调整
|
|
window.addEventListener("resize", function () {
|
|
leftChart.resize();
|
|
});
|
|
}
|
|
|
|
function getItemCost() {
|
|
let xLabel = [
|
|
"xxxx-xx-01",
|
|
"xxxx-xx-02",
|
|
"xxxx-xx-03",
|
|
"xxxx-xx-04",
|
|
"xxxx-xx-05",
|
|
"xxxx-xx-06",
|
|
"xxxx-xx-07",
|
|
"xxxx-xx-08",
|
|
"xxxx-xx-09",
|
|
"xxxx-xx-10",
|
|
"xxxx-xx-11",
|
|
"xxxx-xx-12",
|
|
];
|
|
let expenditureData = [
|
|
"12",
|
|
"15",
|
|
"4",
|
|
"8",
|
|
"13",
|
|
"6",
|
|
"10",
|
|
"11",
|
|
"5",
|
|
"12",
|
|
"10",
|
|
"15",
|
|
];
|
|
let incomeData = [
|
|
"4",
|
|
"5",
|
|
"5",
|
|
"5",
|
|
"5",
|
|
"4",
|
|
"3",
|
|
"5",
|
|
"3",
|
|
"16",
|
|
"5",
|
|
"18",
|
|
];
|
|
initItemCost(xLabel, expenditureData, incomeData);
|
|
}
|
|
|
|
function initItemCost(data) {
|
|
console.log(data, "data---**---");
|
|
const xLabel = data.map((item) => item.dateTime);
|
|
const expenditureData = data.map((item) => item.dataMoney);
|
|
// const incomeData = data.map((item) => item.actualCount);
|
|
const leftChart = echarts.init(document.getElementById("itemCost"));
|
|
const option = {
|
|
tooltip: {
|
|
show: true,
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
borderColor: "rgba(255,255,255,.3)",
|
|
backgroundColor: "rgba(19,51,55,.6)",
|
|
textStyle: {
|
|
color: "white", //设置文字颜色
|
|
},
|
|
borderWidth: 1,
|
|
padding: 10,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
top: "15%",
|
|
right: "4%",
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
grid: {
|
|
top: "30%",
|
|
left: "5%",
|
|
right: "4%",
|
|
bottom: "20%",
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#5A6E71",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: fontColor,
|
|
fontSize: fontSize,
|
|
fontFamily: fontFamily,
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#233653",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
},
|
|
data: xLabel,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
min: 0,
|
|
splitNumber: 10,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.6)",
|
|
type: "dashed",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.8)",
|
|
padding: 16,
|
|
},
|
|
formatter: function (value) {
|
|
if (value === 0) {
|
|
return value;
|
|
}
|
|
return value;
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
"dataZoom": [{
|
|
"show": true,
|
|
"height": 12,
|
|
"xAxisIndex": [
|
|
0
|
|
],
|
|
bottom:'8%',
|
|
"start": 10,
|
|
"end": 90,
|
|
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
|
handleSize: '110%',
|
|
handleStyle:{
|
|
color:"#d3dee5",
|
|
|
|
},
|
|
textStyle:{
|
|
color:"#fff"},
|
|
borderColor:"#90979c"
|
|
}, {
|
|
"type": "inside",
|
|
"show": true,
|
|
"height": 15,
|
|
"start": 1,
|
|
"end": 35
|
|
}],
|
|
series: [
|
|
{
|
|
name: "项目成本",
|
|
type: "line",
|
|
symbol: "circle",
|
|
showAllSymbol: true,
|
|
symbolSize: 0,
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 2,
|
|
color: "#00FEFC",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: "#00FEFC",
|
|
borderWidth: 2,
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(18,86,100,0.6)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(16,72,81, 0.7)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
shadowColor: "rgba(15,55,63, 0.8)",
|
|
shadowBlur: 20,
|
|
},
|
|
},
|
|
data: expenditureData,
|
|
},
|
|
// {
|
|
// name: "实现",
|
|
// type: "line",
|
|
// symbol: "circle",
|
|
// showAllSymbol: true,
|
|
// symbolSize: 0,
|
|
// smooth: true,
|
|
// lineStyle: {
|
|
// normal: {
|
|
// width: 2,
|
|
// color: "rgba(25,196,134, 1)",
|
|
// },
|
|
// },
|
|
// itemStyle: {
|
|
// color: "rgba(25,196,134, 1)",
|
|
// borderWidth: 2,
|
|
// },
|
|
// tooltip: {
|
|
// show: true,
|
|
// },
|
|
// areaStyle: {
|
|
// normal: {
|
|
// color: new echarts.graphic.LinearGradient(
|
|
// 0,
|
|
// 0,
|
|
// 0,
|
|
// 1,
|
|
// [
|
|
// {
|
|
// offset: 0,
|
|
// color: "rgba(17,95,82, 0.6)",
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: "rgba(16,72,67, 0.7)",
|
|
// },
|
|
// ],
|
|
// false
|
|
// ),
|
|
// shadowColor: "rgba(15,55,54, 0.8)",
|
|
// shadowBlur: 20,
|
|
// },
|
|
// },
|
|
// data: incomeData,
|
|
// },
|
|
],
|
|
};
|
|
|
|
leftChart.setOption(option);
|
|
// 响应式调整
|
|
window.addEventListener("resize", function () {
|
|
leftChart.resize();
|
|
});
|
|
}
|
|
|
|
function getTotalRisk() {
|
|
initTotalRisk();
|
|
}
|
|
|
|
function initTotalRisk(projectRisk) {
|
|
$(".big-number").text(
|
|
projectRisk.filter((item) => item.riskLevel == 0)[0].num
|
|
);
|
|
const level = {
|
|
1: "一级风险",
|
|
2: "二级风险",
|
|
3: "三级风险",
|
|
4: "四级风险",
|
|
5: "五级风险",
|
|
};
|
|
const data_1 = projectRisk
|
|
.filter((item) => item.riskLevel != 0)
|
|
.map((item) => {
|
|
return {
|
|
value: item.num,
|
|
name: level[item.riskLevel],
|
|
itemStyle: {
|
|
color: getRandomColor(),
|
|
},
|
|
};
|
|
});
|
|
const myChart = echarts.init(document.getElementById("totalRisk"));
|
|
const option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b}: {c}个 ({d}%)",
|
|
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
|
borderColor: "#08DCE0",
|
|
borderWidth: 1,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
right: "5%",
|
|
top: "15%",
|
|
itemGap: 22,
|
|
itemWidth: 20,
|
|
itemHeight: 8,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
rich: {
|
|
name: {
|
|
width: 60,
|
|
color: "#fff",
|
|
},
|
|
value: {
|
|
width: 60,
|
|
align: "right",
|
|
color: "#79FFFF",
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
},
|
|
formatter: (name) => {
|
|
const data = option.series[0].data;
|
|
const item = data.find((d) => d.name === name);
|
|
const percent = item ? item.value : 0;
|
|
return `{name|${name}} {value|${percent}}`;
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "用电统计",
|
|
type: "pie",
|
|
roseType: "radius",
|
|
radius: [0, "70%"],
|
|
center: ["15%", "45%"],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 5,
|
|
borderColor: "rgba(0, 0, 0, 0.3)",
|
|
borderWidth: 2,
|
|
shadowBlur: 10,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
shadowBlur: 20,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(8, 220, 224, 0.8)",
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: data_1,
|
|
// data: [
|
|
// {
|
|
// value: 60,
|
|
// name: "二级风险",
|
|
// itemStyle: {
|
|
// color: "#75F7EC",
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 60,
|
|
// name: "三级风险",
|
|
// itemStyle: {
|
|
// color: "#75F791",
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 26,
|
|
// name: "四级风险",
|
|
// itemStyle: {
|
|
// color: "#00C3F2",
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 14,
|
|
// name: "五级风险",
|
|
// itemStyle: {
|
|
// color: "#EB846A",
|
|
// },
|
|
// },
|
|
// ],
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|