276 lines
9.7 KiB
HTML
276 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>在建工程形象进度</title>
|
|
<link rel="stylesheet" type="text/css" media="screen" href="../../js/layui-v2.8.18/layui/css/layui.css">
|
|
<link rel="stylesheet" href="../../css/mainList.css">
|
|
<div class="head centers clickable-text">
|
|
线路承载力看板
|
|
</div>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="figure">
|
|
<div class="figures">
|
|
<div style="padding-top: 5%;">
|
|
<img src="../../img/home/name.png" style="margin-left: 20%; margin-top: -2%;">
|
|
<span style="font-size: 18px;color: #ffffff;" id="returnPage">形象进度</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="time" id="nowTime"></div>
|
|
|
|
<div class="tou">
|
|
<div class="" id="one_div" style="width: 100%;height: 40%;border: 0px solid red;margin-top: 3%" >
|
|
<div style="width: 100%;height: 100%;" id="pro_one">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="" id="two_div" style="width: 100%;height: 40%;border: 0px solid blue;" >
|
|
<div style="width: 100%;height: 100%;" id="pro_two">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<script type="text/javascript" src="../../js/publicJs.js"></script>
|
|
<script type="text/javascript" src="../../js/libs/jquery.min.js"></script>
|
|
<script type="text/javascript" src="../../js/jq.js"></script>
|
|
<script type="text/javascript" src="../../js/my/permission.js"></script>
|
|
<script type="text/javascript" src="../../js/layui-v2.8.18/layui/layui.js"></script>
|
|
<script type="text/javascript" src="../../js/dict.js"></script>
|
|
<script type="text/javascript" src="../../js/echarts.js"></script>
|
|
<script type="text/javascript" src="../../js/select.js"></script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
setInterval(function () {
|
|
$("#nowTime").text(getNowTime())
|
|
},1000);
|
|
getProjectProgress();
|
|
});
|
|
function getProjectProgress() {
|
|
$.ajax({
|
|
type: 'POST',
|
|
async: true, // 默认异步true,false表示同步
|
|
url: ctxPath + "/dataHome/getProjectProgress",// 请求地址
|
|
dataType: 'json', // 服务器返回数据类型
|
|
data: {}, //获取提交的表单字段
|
|
success: function (data) {
|
|
// alert(JSON.stringify(data))
|
|
let obj= JSON.parse(data.data);
|
|
let proName = obj.proName;
|
|
let proId = obj.proId;
|
|
let data0 = obj.data0;
|
|
let data1 = obj.data1;
|
|
let data2 = obj.data2;
|
|
// alert(proName.length);
|
|
if(proName.length<=10){
|
|
$("#two_div").css("display","none");
|
|
$("#one_div").css("height","80%");
|
|
$("#pro_one").css("height","100%");
|
|
getProject(proName,proId,data0,data1,data2,"pro_one");
|
|
}else{
|
|
let length = proName.length;
|
|
let middleIndex = Math.floor(length / 2);
|
|
let leftProName =proName.slice(0, middleIndex);
|
|
let rightProName =proName.slice( middleIndex);
|
|
|
|
let leftProId =proId.slice(0, middleIndex);
|
|
let rightProId =proId.slice( middleIndex);
|
|
|
|
let leftData0 =data0.slice(0, middleIndex);
|
|
let rightData0 =data0.slice( middleIndex);
|
|
|
|
let leftData1 =data1.slice(0, middleIndex);
|
|
let rightData1 =data1.slice( middleIndex);
|
|
|
|
let leftData2 =data2.slice(0, middleIndex);
|
|
let rightData2 =data2.slice( middleIndex);
|
|
getProject(leftProName,leftProId,leftData0,leftData1,leftData2,"pro_one");
|
|
getProject(rightProName,rightProId,rightData0,rightData1,rightData2,"pro_two");
|
|
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function getProject(proName,proId,data0,data1,data2,echartId) {
|
|
var chartDom = document.getElementById(echartId);
|
|
var myChart = echarts.init(chartDom);
|
|
var threaten_data = data0;
|
|
var threaten_data2 = data1;
|
|
var threaten_data3 = data2;
|
|
var xAxis_data = proName;
|
|
var xAxis_id = proId;
|
|
// var threaten_data = [760,450,820,450,240,605,1301,1101];
|
|
// var threaten_data2 = [860,650,890,750,540,685,1401,1201];
|
|
// var threaten_data3 = [860,650,890,750,540,685,1401,1201];
|
|
// var xAxis_data = ['周一','周二','周三','周四','周五','周六','周日'];
|
|
var option;
|
|
option = {
|
|
grid: {
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
icon:'circle',
|
|
right: '5%',
|
|
top:10,
|
|
data: ['基础','组塔','架线'],
|
|
textStyle: {
|
|
color: '#5b97d5'
|
|
}
|
|
},
|
|
xAxis:{
|
|
type : 'category',
|
|
data : xAxis_data,
|
|
axisLabel:{
|
|
rotate: 20, // 旋转角度,
|
|
textStyle:{
|
|
color: '#D9DBE0',
|
|
}
|
|
},
|
|
axisLine:{
|
|
show: false,
|
|
lineStyle:{
|
|
color:'#1f3a56',
|
|
}
|
|
},
|
|
splitLine:{
|
|
show: false,
|
|
},
|
|
axisTick:{
|
|
show:false,
|
|
},
|
|
},
|
|
yAxis :{
|
|
min: 0, max: 100,
|
|
type : 'value',
|
|
axisLabel:{
|
|
textStyle:{
|
|
color: '#C9CBD4'
|
|
},
|
|
formatter:'{value}%'
|
|
},
|
|
axisLine:{
|
|
lineStyle:{
|
|
color:'#1f3a56',
|
|
|
|
}
|
|
},
|
|
splitLine:{
|
|
show: true,
|
|
lineStyle:{
|
|
color:'#1f3a56',
|
|
type:"dashed"
|
|
}
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
formatter: function (params) {
|
|
console.log("params="+JSON.stringify(params));
|
|
let values = "0";
|
|
if(!isNaN(params.value)){
|
|
values = params.value;
|
|
}
|
|
return params.seriesName + ':' + values +"%";
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name:'基础',
|
|
type:'bar',
|
|
barWidth : '15%', //柱子宽度
|
|
itemStyle:{ //柱子颜色
|
|
normal:{
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#59A5FF'
|
|
}, {
|
|
offset: 1,
|
|
color: '#0E3A57'
|
|
}]),
|
|
}
|
|
},
|
|
barMinHeight:3,
|
|
data : threaten_data,
|
|
},
|
|
{
|
|
name:'组塔',
|
|
type:'bar',
|
|
barWidth : '15%', //柱子宽度
|
|
itemStyle:{ //柱子颜色
|
|
normal:{
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#FBF899'
|
|
}, {
|
|
offset: 1,
|
|
color: '#344E61'
|
|
}]),
|
|
}
|
|
},
|
|
barMinHeight:3,
|
|
data : threaten_data2
|
|
},
|
|
{
|
|
name:'架线',
|
|
type:'bar',
|
|
barWidth : '15%', //柱子宽度
|
|
itemStyle:{ //柱子颜色
|
|
normal:{
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#9BDDB4'
|
|
}, {
|
|
offset: 1,
|
|
color: '#165363'
|
|
}]),
|
|
}
|
|
},
|
|
barMinHeight:3,
|
|
data : threaten_data3
|
|
}
|
|
]
|
|
};
|
|
option && myChart.setOption(option);
|
|
myChart.on('click', function (params) {
|
|
// 这里可以编写处理点击事件的逻辑
|
|
var proId = xAxis_id[params.dataIndex];
|
|
console.log(xAxis_id[params.dataIndex]);
|
|
console.log(params.dataIndex); // params.event中包含了点击位置的信息
|
|
// 在这里可以根据点击的位置信息进行相应的操作
|
|
localStorage.setItem("proId",proId);
|
|
window.location.href="./schedule.html";
|
|
// var index = layer.open({
|
|
// type: 2,
|
|
// title: '形象进度',
|
|
// content: './schedule.html',
|
|
// area: ['90%', '95%'],
|
|
// maxmin: false,
|
|
// closeBtn: true
|
|
// });
|
|
|
|
});
|
|
|
|
};
|
|
$(document).ready(function() {
|
|
$(".clickable-text").on("click", function() {
|
|
window.location.href = "./home.html";
|
|
});
|
|
});
|
|
|
|
$("#returnPage").click(function () {
|
|
window.history.go(-1);
|
|
});
|
|
|
|
|
|
</script> |