639 lines
20 KiB
Plaintext
639 lines
20 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" %>
|
||
<%@ include file="/webpage/include/taglib.jsp" %>
|
||
|
||
<body style="background-color: #fff" id="zyb-yg-list">
|
||
|
||
<script src="${ctxStatic}/layui-v2.5.4/layui/layui.all.js"></script>
|
||
<link rel="stylesheet" href="${ctxStatic}/layui-v2.5.4/layui/css/layui.css" media="all">
|
||
<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
|
||
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="/dzzyb/static/echarts/echarts.min.js" type="text/javascript" charset="utf-8"></script>
|
||
<style>
|
||
/*.layui-table-cell {*/
|
||
/* font-size: 14px;*/
|
||
/* padding: 0 5px;*/
|
||
/* height: auto;*/
|
||
/* overflow: visible;*/
|
||
/* text-overflow: inherit;*/
|
||
/* white-space: normal;*/
|
||
/* word-break: break-all;*/
|
||
/*}*/
|
||
/*.gray-bg {*/
|
||
/* background-color: #f3f3f4 !important;*/
|
||
/*}*/
|
||
/*a.uploadcss{*/
|
||
/* color: #0000ff;*/
|
||
/*}*/
|
||
.index {
|
||
height: 100px;
|
||
width: 1200px;
|
||
margin: 0px auto;
|
||
display: flex; /*重要*/
|
||
justify-content: center;
|
||
text-align: justify;
|
||
margin: 25px auto;
|
||
margin-bottom: 70px;
|
||
}
|
||
|
||
.orders {
|
||
background-color: #7ABFD5;
|
||
width: 600px;
|
||
height: 100px;
|
||
border-radius: 10px;
|
||
margin: auto;
|
||
/*vertical-align:middle;*/
|
||
|
||
}
|
||
|
||
.overdue {
|
||
background-color: #B879A6;
|
||
width: 600px;
|
||
height: 100px;
|
||
border-radius: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
.overdue1 {
|
||
background-color: #DFC02D;
|
||
width: 600px;
|
||
height: 100px;
|
||
border-radius: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.Number {
|
||
background-color: #ABCC5B;
|
||
width: 600px;
|
||
height: 100px;
|
||
border-radius: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.overdues {
|
||
background-color: #7AD094;
|
||
width: 600px;
|
||
height: 100px;
|
||
border-radius: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.count {
|
||
display: block;
|
||
font-size: 30px;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.count1 {
|
||
/*display: block;*/
|
||
font-size: 45px;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
|
||
display: inline-block;
|
||
margin-left: 30px;
|
||
height: 100px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.orderscount {
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
display: block;
|
||
text-align: center;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.ordercount2 {
|
||
height: 83px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.ordercount3 {
|
||
height: 90px;
|
||
margin-top: 0px;
|
||
}
|
||
|
||
span {
|
||
/*background-color: red;*/
|
||
padding-top: 5px;
|
||
}
|
||
|
||
.countinfo {
|
||
position: relative;
|
||
height: 350px;
|
||
width: 1200px;
|
||
margin: 20px auto;
|
||
/*background-color: red;*/
|
||
}
|
||
|
||
.down {
|
||
position: absolute;
|
||
left: 90px;
|
||
z-index: 10;
|
||
|
||
}
|
||
#chart-panel {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
</style>
|
||
<%-- <div class="chartArea" id="data7" style="height:350px;width: 1200px;margin: 0 auto;"></div>--%>
|
||
<%--<div class="index">--%>
|
||
<div class="index">
|
||
<div class="orders">
|
||
<div style="text-align: center; margin-top:30px;">
|
||
<div class="orderscount ordercount2">总资料数</div>
|
||
<div class="count1" id="sum1">${sum}</div>
|
||
</div>
|
||
</div>
|
||
<div class="overdue1">
|
||
<div style="text-align: center; margin-top:30px;">
|
||
<div class="orderscount ordercount2">已上报资料数</div>
|
||
<div class="count1" id="dataSum">${dataSum}</div>
|
||
</div>
|
||
</div>
|
||
<div class="overdues">
|
||
<div style="text-align: center; margin-top:30px;">
|
||
<div class="orderscount ordercount2">本年度上传资料数</div>
|
||
<div class="count1" id="dataByYear">${dataByYear}</div>
|
||
</div>
|
||
</div>
|
||
<div class="overdue">
|
||
<div style="text-align: center; margin-top:30px;">
|
||
<div class="orderscount ordercount2">本月上传资料数</div>
|
||
<div class="count1" id="dataByMonth">${dataByMonth}</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<%--按区县统计资料完成情况--%>
|
||
<shiro:hasAnyRoles name="admin,dzswszfzd">
|
||
<div class="layui-input-block down">
|
||
</div>
|
||
<div class="chart" id="main" style="height:350px;width: 1200px;margin: 0px auto; z-index: 1"></div>
|
||
</shiro:hasAnyRoles>
|
||
<%--按分类统计资料完成情况--%>
|
||
<div class="countinfo">
|
||
<div class="layui-input-block down" style="color: #7C7C7C;padding-left:10px;padding-top: 2px;">
|
||
<span id="sum">${sum}</span>
|
||
</div>
|
||
<div class="chartArea" id="complaintClassValidTrue" style="height:350px;width: 1200px;margin: 20px auto;"></div>
|
||
</div>
|
||
<%--每日新增资料统计--%>
|
||
<div class="chartArea" id="complaintClassValidTrue3" style="height:350px;width: 1200px;margin: 20px auto;"></div>
|
||
<div id="chart-panel" style="margin-top:30px"></div>
|
||
|
||
<script src="${ctxStatic}/common/yuan.js"></script>
|
||
|
||
<script>
|
||
sum = null
|
||
// 颜色
|
||
var colorList = [
|
||
'#ff2600',
|
||
'#ffc000',
|
||
'#00ad4e',
|
||
'#0073c2',
|
||
'#165868',
|
||
'#e76f00',
|
||
'#316194',
|
||
'#723761',
|
||
'#00b2f1',
|
||
'#4d6022',
|
||
'#4b83bf',
|
||
'#f9c813',
|
||
'#0176c0',
|
||
'#D7504B', '#C6E579', '#F4E001'
|
||
];
|
||
var colors = ['#C23531', '#2F4554', '#675bba'];
|
||
// 基于准备好的dom，初始化echarts实例
|
||
// 按分类统计资料完成情况
|
||
var myChart = echarts.init(document.getElementById('complaintClassValidTrue'));
|
||
// 按区县统计资料完成情况
|
||
<shiro:hasAnyRoles name="admin,dzswszfzd">
|
||
var myChart2 = echarts.init(document.getElementById('main'))
|
||
</shiro:hasAnyRoles>
|
||
// 每日新增资料统计
|
||
var myChart3 = echarts.init(document.getElementById('complaintClassValidTrue3'))
|
||
// 指定图表的配置项和数据
|
||
$.get('${ctx}/zyb/app/worktask/dataCountByType', function (data) {
|
||
let return_data = JSON.parse(data).data.data;
|
||
console.log(return_data, 'ddd')
|
||
let DocTypeIdData = [];
|
||
var numData = [];
|
||
for (const d of return_data) {
|
||
DocTypeIdData.push(d.DocTypeId);
|
||
numData.push(d.num);
|
||
}
|
||
let sum = JSON.parse(data).data.sum
|
||
let maxNum = JSON.parse(data).data.maxNum
|
||
document.getElementById("sum").innerText = `应提交总数:` + sum;
|
||
console.log('8888', sum)
|
||
let interval = parseInt(maxNum / 6);
|
||
option = {
|
||
title: {
|
||
text: '按分类统计资料完成情况',
|
||
// subtext: `应提交总数:`+ JSON.parse(data).data.sum,
|
||
left: 'left',
|
||
subtextStyle: {
|
||
align: 'right',
|
||
//文字颜色
|
||
color: '#535151',
|
||
//字体风格,'normal','italic','oblique'
|
||
fontStyle: 'normal',
|
||
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
|
||
fontWeight: 'bold',
|
||
//字体系列
|
||
fontFamily: 'sans-serif',
|
||
//字体大小
|
||
fontSize: 13
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
height: '85%',
|
||
width: '95%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '-2%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
axisLine: {
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#666', //左边线的颜色
|
||
width: '1' //坐标线的宽度
|
||
}
|
||
},
|
||
axisLabel: {
|
||
// interval: 0,
|
||
rotate: 40,
|
||
show: true,
|
||
splitNumber: 15,
|
||
color: "#666",
|
||
textStyle: {
|
||
//fontFamily: "微软雅黑",
|
||
fontSize: 12,
|
||
},
|
||
|
||
},
|
||
|
||
data: DocTypeIdData,
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
// name: '应提交总数',
|
||
interval: interval, // 强制设置坐标轴分割间隔。
|
||
max: JSON.parse(data).data.maxNum,//最大值
|
||
// min: 0,//
|
||
// interval: 400,//间隔
|
||
name: '',
|
||
splitLine: {
|
||
//分割线
|
||
show: true,
|
||
// color:"#fff",
|
||
lineStyle: {
|
||
color: '#C0C0C2'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 0,
|
||
show: true,
|
||
splitNumber: 30,
|
||
color: "#666",
|
||
textStyle: {
|
||
//fontFamily: "微软雅黑",
|
||
fontSize: 12,
|
||
}
|
||
},
|
||
}],
|
||
series: [
|
||
{
|
||
name: '已完成数',
|
||
type: 'bar',
|
||
barWidth: 15,
|
||
itemStyle: {
|
||
normal: {
|
||
color: function (params) {
|
||
// build a color map as your need.
|
||
var colorList = [
|
||
'#ff2600',
|
||
'#ffc000',
|
||
'#00ad4e',
|
||
'#0073c2',
|
||
'#165868',
|
||
'#e76f00',
|
||
'#316194',
|
||
'#723761',
|
||
'#00b2f1',
|
||
'#4d6022',
|
||
'#4b83bf',
|
||
'#f9c813',
|
||
'#0176c0',
|
||
'#D7504B', '#C6E579', '#F4E001'
|
||
];
|
||
return colorList[params.dataIndex]
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}'
|
||
}
|
||
}
|
||
},
|
||
data: numData
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
myChart.setOption(option);
|
||
});
|
||
<shiro:hasAnyRoles name="admin,dzswszfzd">
|
||
$.get('${ctx}/zyb/app/worktask/dataCountByQuXian', function (data) {
|
||
console.log('8888', data);
|
||
let return_data3 = JSON.parse(data).data;
|
||
let finshNumlist = [];
|
||
let sumList = [];
|
||
let finshRateList = [];
|
||
let quxian = [];
|
||
for (const r of return_data3) {
|
||
quxian.push(r.quxian)
|
||
finshNumlist.push(r.finshNum);
|
||
sumList.push(r.sum);
|
||
var a = r.finshRate.lastIndexOf('%')
|
||
r.finshRate = r.finshRate.substring(0, a)
|
||
r.finshRate = Number(r.finshRate)
|
||
r.finshRate = r.finshRate.toFixed(2)
|
||
// finshRateList.push(r.finshRate.replace('%', ''))
|
||
finshRateList.push(r.finshRate);
|
||
console.log('11111', finshRateList);
|
||
}
|
||
|
||
// console.log(quxian,finshNumlist,sumList,finshRateList)
|
||
var option2 = {
|
||
title: {
|
||
text: '按区县统计资料完成情况',
|
||
// subtext: '2023年'
|
||
},
|
||
color: colors,
|
||
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
data: ['已完成数', '应完成总数']
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
data: quxian
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
// max: 100,//最大值
|
||
// min: 0,//最小值
|
||
// interval:20,//间隔
|
||
position: 'left',
|
||
|
||
},
|
||
{},
|
||
// {
|
||
// type: 'value',
|
||
// name: '完成率',
|
||
// position: 'right',
|
||
// axisLine: {
|
||
// lineStyle: {
|
||
// color: colors[2]
|
||
// }
|
||
// }
|
||
// }
|
||
],
|
||
series: [{
|
||
name: '已完成数',
|
||
barWidth: 30,
|
||
type: 'bar',
|
||
data: finshNumlist
|
||
},
|
||
{
|
||
name: '应完成总数',
|
||
type: 'bar',
|
||
barWidth: 30,
|
||
data: sumList
|
||
},
|
||
{
|
||
name: '完成率(%)',
|
||
type: 'line',
|
||
symbol: "none",
|
||
lineStyle: {
|
||
color: 'transparent', //改变折线颜色
|
||
},
|
||
// yAxisIndex: 1,
|
||
// label: {
|
||
// normal: {
|
||
// show: true,
|
||
// position: 'insideRight',
|
||
// formatter: '{c}%'
|
||
// }
|
||
// },
|
||
tooltip: {
|
||
// valueFormatter: function (value) {
|
||
// return value + ' %';
|
||
// }
|
||
},
|
||
data: finshRateList,
|
||
animationDelay: function (idx) {
|
||
// 越往后的数据延迟越大
|
||
return new Date().getTime();
|
||
},
|
||
}
|
||
]
|
||
};
|
||
myChart2.setOption(option2);
|
||
});
|
||
</shiro:hasAnyRoles>
|
||
$.get('${ctx}/zyb/app/worktask/dataCountByDate', function (data) {
|
||
let return_data2 = JSON.parse(data).data;
|
||
// console.log(JSON.parse(data).data, 'ccc222')
|
||
|
||
console.log('return_data2.dateTime',return_data2)
|
||
let dateTime = [];//x轴原数组
|
||
var finshNumData = [];
|
||
for (const r of return_data2) {
|
||
if(r.dateTime){
|
||
dateTime.push(r.dateTime);//push到这个数组里面
|
||
finshNumData.push(r.finshNum);
|
||
}
|
||
}
|
||
option3 = {
|
||
title: {
|
||
text: '每日新增资料统计',
|
||
left: 'left'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
axisLine: {
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#666', //左边线的颜色
|
||
width: '1' //坐标线的宽度
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 40,
|
||
show: true,
|
||
splitNumber: 15,
|
||
color: "#666",
|
||
textStyle: {
|
||
//fontFamily: "微软雅黑",
|
||
fontSize: 12,
|
||
},
|
||
|
||
},
|
||
|
||
data: dateTime,
|
||
// data:['2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15',
|
||
// '2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15',
|
||
// '2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15','2022-12-15'],
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
}
|
||
}],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '',
|
||
splitLine: {
|
||
//分割线
|
||
show: true,
|
||
// color:"#fff",
|
||
lineStyle: {
|
||
color: '#C0C0C2'
|
||
}
|
||
},
|
||
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 0,
|
||
show: true,
|
||
splitNumber: 30,
|
||
color: "#666",
|
||
textStyle: {
|
||
//fontFamily: "微软雅黑",
|
||
fontSize: 12,
|
||
}
|
||
},
|
||
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '资料数量',
|
||
position: 'left',
|
||
alignTicks: true,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#858585'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value} °C'
|
||
}
|
||
}],
|
||
series: [{
|
||
name: '资料数量',
|
||
type: 'bar',
|
||
barWidth: 15,
|
||
//柱图宽度
|
||
|
||
data: finshNumData,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#4b83bf',
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}'
|
||
}
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
|
||
|
||
myChart3.setOption(option3);
|
||
});
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
|
||
$(function () {
|
||
$.ajax({
|
||
//提交数据的类型 POST GET
|
||
type: "GET",
|
||
//提交的网址
|
||
url: "${ctx}/zyb/app/worktask/dataCount",
|
||
//提交的数据
|
||
//返回数据的格式
|
||
datatype: "json",//“xml”, “html”, “script”, “json”, “jsonp”, “text”.
|
||
//成功返回之后调用的函数
|
||
success: function (data) {
|
||
var res = JSON.parse(data).data
|
||
console.log(data)
|
||
// console.log(JSON.parse(data.taskSum),'aaaaaaaaaaaaaaaa')
|
||
console.log(JSON.parse(data).data, 'bbbb ')
|
||
// document.getElementById("taskSum").innerText = res.taskSum;
|
||
document.getElementById("sum1").innerText = res.sum;
|
||
document.getElementById("dataSum").innerText = res.dataSum;
|
||
document.getElementById("dataByYear").innerText = res.dataByYear;
|
||
document.getElementById("dataByMonth").innerText = res.dataByMonth;
|
||
},
|
||
error: function () {
|
||
|
||
}
|
||
})
|
||
})
|
||
|
||
</script>
|
||
|
||
</body>
|