236 lines
7.3 KiB
JavaScript
236 lines
7.3 KiB
JavaScript
|
let form, layer, laydate;
|
|||
|
|
let user = getUser();
|
|||
|
|
let myChart12 = echarts.init(document.getElementById('echarts-one'));
|
|||
|
|
|
|||
|
|
layui.use(['form', 'layer', 'laydate'], function () {
|
|||
|
|
layer = layui.layer;
|
|||
|
|
form = layui.form;
|
|||
|
|
laydate = layui.laydate;
|
|||
|
|
// 渲染
|
|||
|
|
/* laydate.render({
|
|||
|
|
elem: '#currentDay',
|
|||
|
|
btns: ['confirm']
|
|||
|
|
}); */
|
|||
|
|
laydate.render({
|
|||
|
|
elem: '#currentDay', //指定元素 元素选择器
|
|||
|
|
type: 'date', //选择时间类型 可选值:year(年) month(年月) date(年月日) time(时分秒) datetime(年月日时分秒)
|
|||
|
|
trigger: 'click',
|
|||
|
|
range: true,
|
|||
|
|
format: 'yyyy-MM-dd', //时间格式 常用时间格式:yyyy-MM-dd HH:mm:ss
|
|||
|
|
max: Date.parse(new Date()),
|
|||
|
|
btns: ['now', 'confirm'], //选择框右下角显示的按钮 清除-现在-确定
|
|||
|
|
});
|
|||
|
|
// $('#currentDay').val(getNowTime());
|
|||
|
|
const currentDate = new Date();
|
|||
|
|
const thirtyDaysAgo = new Date();
|
|||
|
|
thirtyDaysAgo.setDate(currentDate.getDate() - 30);
|
|||
|
|
|
|||
|
|
console.log('当前日期:', formatDate(currentDate));
|
|||
|
|
console.log('30天前日期:', formatDate(thirtyDaysAgo));
|
|||
|
|
$('#currentDay').val(formatDate(thirtyDaysAgo) + " - " + formatDate(currentDate));
|
|||
|
|
form.render();
|
|||
|
|
statisticalChart();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 查询
|
|||
|
|
function query() {
|
|||
|
|
const startTime = $("#currentDay").val().split(' - ')[0],
|
|||
|
|
endTime = $("#currentDay").val().split(' - ')[1];
|
|||
|
|
let flag = isOver31Days(startTime, endTime);
|
|||
|
|
if (flag) {
|
|||
|
|
return layer.msg('查询的时间间隔不能超过30天', {icon: 2, time: 2000});
|
|||
|
|
}
|
|||
|
|
myChart12.dispose();
|
|||
|
|
myChart12 = echarts.init(document.getElementById('echarts-one'));
|
|||
|
|
statisticalChart();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isOver31Days(dateStr1, dateStr2) {
|
|||
|
|
// 将字符串日期转换为Date对象
|
|||
|
|
const date1 = new Date(dateStr1);
|
|||
|
|
const date2 = new Date(dateStr2);
|
|||
|
|
|
|||
|
|
// 计算两个日期的时间差（毫秒）
|
|||
|
|
const timeDiff = Math.abs(date2.getTime() - date1.getTime());
|
|||
|
|
|
|||
|
|
// 将毫秒转换为天数（1天 = 24 * 60 * 60 * 1000毫秒）
|
|||
|
|
const dayDiff = timeDiff / (1000 * 60 * 60 * 24);
|
|||
|
|
|
|||
|
|
// 判断是否超过31天
|
|||
|
|
return dayDiff > 30;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 领导动态
|
|||
|
|
function statisticalChart() {
|
|||
|
|
let param = {
|
|||
|
|
currentDay:$('#currentDay').val(),
|
|||
|
|
};
|
|||
|
|
$.ajax({
|
|||
|
|
headers: {
|
|||
|
|
"encrypt": sm3(JSON.stringify(param))
|
|||
|
|
},
|
|||
|
|
url: dataUrl + 'proteam/pot/cityDailyDutyReport/getLeaderDynamicByEcharts?token=' + token,
|
|||
|
|
data: param,
|
|||
|
|
type: 'POST',
|
|||
|
|
async: true,
|
|||
|
|
success: function (result) {
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
initEchartsOne(result.data);
|
|||
|
|
} else if (result.code === 401) {
|
|||
|
|
logout(1)
|
|||
|
|
}
|
|||
|
|
}, error: function () {
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*按违章等级统计-echarts*/
|
|||
|
|
function initEchartsOne(data) {
|
|||
|
|
console.error(data);
|
|||
|
|
let nameList = data.nameList,valueList = data.valueList;
|
|||
|
|
let fontSize = '12', fontFamily = 'Alibaba PuHuiTi R',fontColor = '#000';
|
|||
|
|
let option = {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
tooltip: {
|
|||
|
|
show: true,
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
// backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
// borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
icon: 'circle',
|
|||
|
|
data: ['领导动态数量'],
|
|||
|
|
right: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
itemWidth: 15,
|
|||
|
|
itemHeight: 15,
|
|||
|
|
itemGap: 35
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '0%',
|
|||
|
|
right: '0%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
data: nameList,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#063374",
|
|||
|
|
width: 1,
|
|||
|
|
type: "solid"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
interval: 0, // 强制显示所有标签
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize: fontSize
|
|||
|
|
},
|
|||
|
|
// 核心换行配置
|
|||
|
|
formatter: function(params) {
|
|||
|
|
// 自定义换行逻辑：超过5个字符换行（可根据需求调整）
|
|||
|
|
const maxLength = 8;
|
|||
|
|
if (params.length > maxLength) {
|
|||
|
|
return params.substring(0, maxLength) + '\n' + params.substring(maxLength);
|
|||
|
|
}
|
|||
|
|
return params;
|
|||
|
|
},
|
|||
|
|
// 文本样式与宽度相关设置
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
// 允许文本换行
|
|||
|
|
whiteSpace: 'normal',
|
|||
|
|
// 文本容器宽度（控制每行显示长度）
|
|||
|
|
width: 100
|
|||
|
|
},
|
|||
|
|
// 标签间距与对齐方式
|
|||
|
|
margin: 15, // 标签与轴的间距
|
|||
|
|
align: 'center'
|
|||
|
|
},
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
width: 1,
|
|||
|
|
type: "solid",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#063374',
|
|||
|
|
type: 'dashed'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
series: [{
|
|||
|
|
name: '领导动态数量',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: valueList,
|
|||
|
|
barWidth: 10, //柱子宽度
|
|||
|
|
barGap: 0.5, //柱子之间间距
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#FF5D5D'
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#FF5D5D'
|
|||
|
|
}]),
|
|||
|
|
opacity: 1,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
formatter: '{c}',
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: '14px',
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
myChart12.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart12.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatDate(date) {
|
|||
|
|
const year = date.getFullYear();
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|||
|
|
return `${year}-${month}-${day}`;
|
|||
|
|
}
|