445 lines
13 KiB
JavaScript
445 lines
13 KiB
JavaScript
let table, layer, form;
|
||
layui.use(['layer', 'table', 'form'], function () {
|
||
layer = layui.layer;
|
||
table = layui.table;
|
||
form = layui.form;
|
||
// 响应成功后的拦截器
|
||
$.ajaxSetup({
|
||
beforeSend: function (xhr, options) {
|
||
var originalSuccess = options.success
|
||
options.success = function (data, textStatus, jqXhr) {
|
||
data = modifyResponseData(data);
|
||
// success(data,textStatus, jqXhr);
|
||
originalSuccess.apply(this, arguments)
|
||
}
|
||
}
|
||
})
|
||
initTable(1, parent.$('#bidPro').val());
|
||
});
|
||
let myChart = echarts.init(document.getElementById("one-echarts"));
|
||
|
||
function initData() {
|
||
const bidCode = parent.$('#bidPro').val();
|
||
const paramData = 'bidCode=' + bidCode + '&type=' + '1';
|
||
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
|
||
loadDataAnalysis(montageParam, 1);
|
||
}
|
||
|
||
/* 切换数据 */
|
||
function changeData(that, type) {
|
||
const bidCode = parent.$('#bidPro').val();
|
||
$(".ul-box li").each(function () {
|
||
if ($(this).hasClass("check")) {
|
||
$(this).removeClass("check").addClass("nocheck");
|
||
}
|
||
});
|
||
var tableElem = $('#demo2').parents('.layui-table-view');
|
||
tableElem.remove();
|
||
$(that).removeClass("nocheck").addClass("check");
|
||
if (type === 1 || type === 2 || type === 3 || type === 6 || type === 12) {
|
||
initTable(type, bidCode);
|
||
$('#right-table-box').removeAttr('style');
|
||
$('#no-data-box').css({ 'display': 'none' });
|
||
$('#right-box').css({ 'display': 'none' });
|
||
} else if (type === 4 || type === 5 || type === 8 || type === 9 || type === 11) {
|
||
$('#no-data-box').removeAttr('style');
|
||
$('#right-table-box').css({ 'display': 'none' });
|
||
$('#right-box').css({ 'display': 'none' });
|
||
} else if (type === 7) { // 环境检测分析echarts
|
||
$('#right-box').removeAttr('style');
|
||
$('#right-table-box').css({ 'display': 'none' });
|
||
$('#no-data-box').css({ 'display': 'none' });
|
||
$('#report-box').css({'display':'none'});
|
||
$('#echarts-box').css({'width':'100%'});
|
||
myChart.dispose();
|
||
myChart = echarts.init(document.getElementById("one-echarts"));
|
||
const paramData = 'bidCode=' + bidCode + '&type=' + 7;
|
||
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
|
||
loadDataAnalysis2(montageParam, 1);
|
||
} else if (type === 10) {
|
||
$('#right-box').removeAttr('style');
|
||
$('#right-table-box').css({ 'display': 'none' });
|
||
$('#no-data-box').css({ 'display': 'none' });
|
||
$('#report-box').removeAttr('style');
|
||
$('#echarts-box').css({'width':'58%'});
|
||
myChart.dispose();
|
||
myChart = echarts.init(document.getElementById("one-echarts"));
|
||
const paramData = 'bidCode=' + bidCode + '&type=' + type + '';
|
||
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
|
||
loadDataAnalysis(montageParam, type);
|
||
}
|
||
|
||
}
|
||
|
||
/* 加载数据分析应用 */
|
||
function loadDataAnalysis(montageParam, type) {
|
||
const url = commonUrl + 'screen/largeScreen/dataAnalysis/getDataAnalysisByType?params=' + montageParam;
|
||
ajaxRequestGet(url, "GET", true, function () {
|
||
}, function (result) {
|
||
if (result.code === 200) {
|
||
setData(result.data);
|
||
} else if (result.code === 500) {
|
||
console.error('数据分析应用' + result.msg);
|
||
} else if (result.code === 401) {
|
||
loginout(1);
|
||
}
|
||
}, function (xhr, status, error) {
|
||
errorFn(xhr, status, error)
|
||
}, aqEnnable);
|
||
|
||
/* 项目风险赋值 */
|
||
function setData(list) {
|
||
let nameList = [], valueList = [];
|
||
if (list && list.length > 0) {
|
||
$.each(list, function (index, item) {
|
||
nameList.push(item.name);
|
||
valueList.push({ value: item.num, name: item.name });
|
||
})
|
||
}
|
||
initEcharts(nameList, valueList);
|
||
if (type === 10) {
|
||
setReportTable(list);
|
||
}
|
||
}
|
||
// 数据分析报告
|
||
function setReportTable(list) {
|
||
let html = '';
|
||
$.each(list, function (index, item) {
|
||
html += '<tr>';
|
||
html += '<td>' + item.name + '</td>';
|
||
html += '<td>' + item.num + '</td>';
|
||
html += '</tr>';
|
||
})
|
||
$('#report-box table tbody').empty().append(html);
|
||
}
|
||
}
|
||
|
||
/* 加载数据分析应用 */
|
||
function loadDataAnalysis2(montageParam, type) {
|
||
const url = commonUrl + 'screen/largeScreen/dataAnalysis/getListByType2?params=' + montageParam;
|
||
ajaxRequestGet(url, "GET", true, function () {
|
||
}, function (result) {
|
||
if (result.code === 200) {
|
||
console.error(result);
|
||
|
||
initEchartsOne(result.data);
|
||
} else if (result.code === 500) {
|
||
console.error('数据分析应用' + result.msg);
|
||
} else if (result.code === 401) {
|
||
loginout(1);
|
||
}
|
||
}, function (xhr, status, error) {
|
||
errorFn(xhr, status, error)
|
||
}, aqEnnable);
|
||
}
|
||
|
||
/* 初始化echarts */
|
||
function initEcharts(nameList, valueList) {
|
||
let option = {
|
||
grid: {
|
||
top: 0,
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
},
|
||
title: {
|
||
text: "",
|
||
x: "center",
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||
},
|
||
legend: {
|
||
show: false,
|
||
data: nameList,
|
||
},
|
||
series: [
|
||
{
|
||
name: "数据应用分析",
|
||
type: "pie",
|
||
radius: "65%",
|
||
center: ["50%", "50%"],
|
||
label: {
|
||
show: true,
|
||
formatter: "{b} {d}%",
|
||
},
|
||
data: valueList,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option, true);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
|
||
|
||
function initTable(type, bidCode) {
|
||
const url = commonUrl + "screen/largeScreen/dataAnalysis/getListByType";
|
||
table.render({
|
||
elem: '#demo2',
|
||
url: url,
|
||
skin: 'line',
|
||
page: true,
|
||
height: 'full-100',
|
||
headers: {
|
||
"decrypt": "decrypt",
|
||
"Authorization": token
|
||
},
|
||
where: {
|
||
bidCode: bidCode,
|
||
type: type
|
||
},
|
||
cols: [setCols(type)],
|
||
initComplete: function () {
|
||
// 在表格渲染完成后，重新渲染序号列
|
||
var that = this.elem.next();
|
||
var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
|
||
tool.find("tr").each(function (index, item) {
|
||
$(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
|
||
});
|
||
},
|
||
done: function (res, curr, count, origin) {
|
||
// console.log(res);
|
||
}
|
||
})
|
||
|
||
function setCols(type) {
|
||
if (type === 1) { // 工程质量分析
|
||
return [
|
||
{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
|
||
{ field: 'proName', title: '工程名称', align: 'center', width: '40%' },
|
||
{ field: 'xmManager', title: '项目经理', align: 'center', width: '25%' },
|
||
{ field: 'qualityLevel', title: '工程质量等级', align: 'center', width: '25%' },
|
||
];
|
||
} else if (type === 2) {
|
||
return [
|
||
{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
|
||
{ field: 'proName', title: '工程名称', align: 'center', width: '20%' },
|
||
{ field: 'riskLevel', title: '风险等级', align: 'center', width: '10%' },
|
||
{ field: 'workTeam', title: '班组名称', align: 'center', width: '20%' },
|
||
{ field: 'teamLeader', title: '班组长', align: 'center', width: '10%' },
|
||
{ field: 'concat', title: '工作内容', align: 'center', width: '30%' }
|
||
];
|
||
} else if (type === 3) {
|
||
return [
|
||
{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
|
||
{ field: 'proName', title: '工程名称', align: 'center', width: '30%' },
|
||
{ field: 'planStartTime', title: '计划开始时间', align: 'center', width: '20%' },
|
||
{ field: 'planEndTime', title: '计划结束时间', align: 'center', width: '20%' },
|
||
{ field: 'gcProcess', title: '工程进度', align: 'center', width: '20%' },
|
||
];
|
||
}else if (type === 6) {
|
||
return [
|
||
{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
|
||
{ field: 'proName', title: '工程名称', align: 'center', width: '30%' },
|
||
{ field: 'workTeam', title: '班组名称', align: 'center', width: '20%' },
|
||
{ field: 'concat', title: '工作内容', align: 'center', width: '20%' },
|
||
{ field: 'sgNum', title: '今日施工人数', align: 'center', width: '10%' },
|
||
{ field: 'hisNum', title: '昨日施工人数', align: 'center', width: '10%' },
|
||
];
|
||
}else if (type === 12) {
|
||
return [
|
||
{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
|
||
{ field: 'proName', title: '工程名称', align: 'center', width: '50%' },
|
||
{ field: 'yqResaon', title: '延期原因分析', align: 'center', width: '40%' },
|
||
];
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 变化趋势 */
|
||
function initEchartsOne(list) {
|
||
let xLabel = [], dataValue = [], title = '';
|
||
$.each(list, function (index, item) {
|
||
if (index === 0) {
|
||
title = item.jcName
|
||
}
|
||
xLabel.push(item.jcTime);
|
||
dataValue.push(item.jcValue);
|
||
})
|
||
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||
const tooltip = {
|
||
show: true,
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontFamily: fontFamily
|
||
},
|
||
borderColor: "rgba(255,255,255, .5)",
|
||
};
|
||
let option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip,
|
||
legend: {
|
||
show: false,
|
||
},
|
||
grid: {
|
||
top: '25%',
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '15%',
|
||
},
|
||
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: false,
|
||
},
|
||
data: xLabel,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: title + 'Ƽg/m3',
|
||
nameTextStyle: {
|
||
color: fontColor,
|
||
fontSize: fontSize,
|
||
padding: [0, 60, 0, 0],
|
||
fontFamily: fontFamily
|
||
},
|
||
// minInterval: 1,
|
||
type: 'value',
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#25393B',
|
||
type: 'dashed'
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#25393B',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontSize: fontSize,
|
||
fontFamily: fontFamily
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: title,
|
||
type: 'line',
|
||
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||
smooth: true,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 3,
|
||
// color: '#1ED6FF', // 线条颜色
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: '#0DF0FD',
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: '#00F1D4',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#0EEEFC',
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#1ED6FF',//拐点颜色
|
||
// borderColor: '#fff600',//拐点边框颜色
|
||
// borderWidth: 13//拐点边框大小
|
||
label: {
|
||
show: true, //开启显示
|
||
color: fontColor,
|
||
fontFamily: fontFamily,
|
||
position: 'top', //在上方显示
|
||
formatter: function (res) {
|
||
if (res.value) {
|
||
return res.value
|
||
} else {
|
||
return 0
|
||
}
|
||
},
|
||
},
|
||
},
|
||
|
||
},
|
||
symbolSize: 8, //设定实心点的大小
|
||
areaStyle: {
|
||
normal: {
|
||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: '#01DDE9',
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: '#086A79',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#0D3134',
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
data: dataValue,
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option, true);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
} |