278 lines
8.6 KiB
JavaScript
278 lines
8.6 KiB
JavaScript
// 获取时间
|
|
// 单位数字补零
|
|
function figureAdd0(e) {
|
|
e = e + "";
|
|
if (e.length == 1) return "0" + e;
|
|
return e;
|
|
}
|
|
|
|
// 实时更新时间
|
|
setInterval(function () {
|
|
let vWeek, nowDate, year, month, day, hours, minutes, seconds, nowTime;
|
|
vWeek = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Aug", "Jul", "Sep", "Oct", "Nov", "Dec"];
|
|
let date = new Date();
|
|
year = date.getFullYear(); //得到年份
|
|
month = figureAdd0(date.getMonth() + 1); //得到月份
|
|
day = figureAdd0(date.getDate()); //得到日期
|
|
hours = figureAdd0(date.getHours()); //得到小时数
|
|
minutes = figureAdd0(date.getMinutes()); //得到分钟数
|
|
seconds = figureAdd0(date.getSeconds()); //得到秒数
|
|
vWeek = vWeek[date.getMonth()];
|
|
nowDate = year + "." + month + "." + day;
|
|
nowTime = hours + ":" + minutes + ":" + seconds;
|
|
$(".top-right-timeBox .time").text(nowTime)
|
|
$(".top-right-timeBox .month").text(vWeek)
|
|
$(".top-right-timeBox .date").text(nowDate)
|
|
}, 1000);
|
|
|
|
var date = new Date();
|
|
var hours = date.getHours(); //得到小时数
|
|
var nowHoursList = []
|
|
for (let i = 0; i < 7; i++) {
|
|
let nowHours = figureAdd0(indexMinus(hours, i * 2, 24)) + ":00"
|
|
// console.log(nowHours);
|
|
nowHoursList.unshift(nowHours)
|
|
}
|
|
|
|
// 渲染进度条点
|
|
for (let i = 1; i <= 47; i++) {
|
|
if (i <= 32) {
|
|
$(".bar-right").append(`<div class="dot select"></div>`)
|
|
} else {
|
|
$(".bar-right").append(`<div class="dot"></div>`)
|
|
}
|
|
}
|
|
|
|
// trend 稼动率趋势 初始化
|
|
var trend = document.getElementById('trend');
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
color: '#ddd'
|
|
},
|
|
axisTick: {
|
|
show: false // 不显示坐标轴刻度线
|
|
},
|
|
data: nowHoursList
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
max: 100,
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',//虚线
|
|
color: "rgba(1,130,255,.2)"
|
|
},
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
data: [70, 64, 52, 42, 35, 68, 56],
|
|
type: 'line',
|
|
color: '#0171E3',
|
|
// 鼠标移上显示折点
|
|
showSymbol: false,
|
|
areaStyle: {
|
|
normal: {
|
|
color: "rgba(1,130,255,.3)"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// trend 渲染
|
|
var trend = echarts.init(trend);
|
|
trend.setOption(option);
|
|
|
|
// electricityTrend 用电量趋势 初始化
|
|
var electricityTrend = document.getElementById('electricityTrend');
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['当日', '昨日'],
|
|
left: 20,
|
|
top: 25,
|
|
itemHeight: 10, //图标大小
|
|
itemWidth: 10,
|
|
icon: 'rect',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
color: '#ddd'
|
|
},
|
|
axisTick: {
|
|
show: false // 不显示坐标轴刻度线
|
|
},
|
|
data: nowHoursList
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
max: 100,
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',//虚线
|
|
color: "rgba(1,130,255,.2)"
|
|
},
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '当日',
|
|
data: [70, 64, 52, 42, 35, 68, 56],
|
|
type: 'line',
|
|
smooth: true,
|
|
color: '#0171E3',
|
|
showSymbol: false,
|
|
},
|
|
{
|
|
name: '昨日',
|
|
data: [48, 51, 45, 69, 77, 68, 32],
|
|
type: 'line',
|
|
smooth: true,
|
|
color: '#00E9ED',
|
|
// 鼠标移上显示折点
|
|
showSymbol: false,
|
|
}
|
|
]
|
|
};
|
|
// trend 渲染
|
|
var electricityTrend = echarts.init(electricityTrend);
|
|
electricityTrend.setOption(option);
|
|
|
|
// count-circle 数据统计 初始化
|
|
var electricityTrend = document.getElementById('count-circle');
|
|
option = {
|
|
title: {
|
|
text: '',
|
|
left: 'center',
|
|
top: 'center',
|
|
textStyle: {
|
|
// 主标题样式
|
|
fontSize: 35
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
color: ['rgb(247,205,112)', 'rgb(235,87,7)', 'rgb(170,170,170)', 'rgb(0,128,255)',],
|
|
itemStyle: {
|
|
// borderRadius: 20,
|
|
borderColor: 'rgba(0,11,47,1)',
|
|
borderWidth: 10,
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center',
|
|
emphasis: {
|
|
// show: true
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '40',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
data: [{ value: 35 }, { value: 30 }, { value: 90 }, { value: 78 }]
|
|
}
|
|
]
|
|
};
|
|
// count-circle 渲染
|
|
var electricityTrend = echarts.init(electricityTrend);
|
|
electricityTrend.setOption(option);
|
|
|
|
//定制数据看板的切换
|
|
let isShowAppointFront = true;
|
|
var appointItemRollId = 0;
|
|
function createBoardImgList(dataList) {
|
|
$(`.appointBox .appoint-img`).css({ "background": `url(./sc/${dataList[0].img}.png) no-repeat`, "background-size": "100% 100%" })
|
|
$(`.appointBox .appoint-img`).click(function () {
|
|
window.open(dataList[0].url, "_blank");
|
|
})
|
|
$(`.appoint-data .title`).text(dataList[0].title)
|
|
$(`.appoint-data .text`).text(dataList[0].text)
|
|
|
|
|
|
if (dataList.length <= 1) {
|
|
$(`.appoint-data-board .appoint-point`).html(`<div class="point select"></div>`)
|
|
} else {
|
|
$(`.appoint-data-board .appoint-point`).html(`<div class="point select"></div><div class="point"></div>`)
|
|
|
|
function appointCutData() {
|
|
$(`.appointBox`).animate({ 'opacity': 0 }, 300, function () {
|
|
if (isShowAppointFront) {
|
|
//去除绑定的跳转方法
|
|
$(`.appointBox .appoint-img`).unbind("click");
|
|
$(`.appointBox .appoint-img`).css({ "background": `url(./sc/${dataList[1].img}.png) no-repeat`, "background-size": "100% 100%" })
|
|
$(`.appointBox .appoint-img`).click(function () {
|
|
window.open(dataList[1].url, "_blank");
|
|
})
|
|
$(`.appoint-data .title`).text(dataList[1].title)
|
|
$(`.appoint-data .text`).text(dataList[1].text)
|
|
$(`.appoint-data-board .appoint-point`).html(`</div><div class="point"></div><div class="point select">`)
|
|
} else {
|
|
//去除绑定的跳转方法
|
|
$(`.appointBox .appoint-img`).unbind("click");
|
|
$(`.appointBox .appoint-img`).css({ "background": `url(./sc/${dataList[0].img}.png) no-repeat`, "background-size": "100% 100%" })
|
|
$(`.appointBox .appoint-img`).click(function () {
|
|
window.open(dataList[0].url, "_blank");
|
|
})
|
|
$(`.appoint-data .title`).text(dataList[0].title)
|
|
$(`.appoint-data .text`).text(dataList[0].text)
|
|
$(`.appoint-data-board .appoint-point`).html(`<div class="point select"></div><div class="point"></div>`)
|
|
}
|
|
isShowAppointFront = !isShowAppointFront;
|
|
$(`.appointBox , .appoint-point`).animate({ 'opacity': 1 }, 300);
|
|
});
|
|
}
|
|
|
|
appointItemRollId = setInterval(function () {
|
|
appointCutData();
|
|
}, 5000)
|
|
}
|
|
|
|
}
|
|
let appointDataList = [{
|
|
img: "八环看板2",
|
|
title: "八环集中供水数字化看板",
|
|
text: "对八环全厂的水电气全面进行数字化改造，实现水电气的数据实时采集和上发。通过看板全面直观了解整体能源使用状况。",
|
|
url: "https://www.taizhouyunzao.com/lantingNewB//admin/views/boardManagement/bhBoard1.html?61977339C173AA06DACC56F4BFF8A1FA"
|
|
}, {
|
|
img: "八环看板",
|
|
title: "八环企业专题看板",
|
|
text: "为八环打造的专题宣传看板。",
|
|
url: "http://36.134.182.98:8081/board/er/index.html"
|
|
}];
|
|
createBoardImgList(appointDataList);
|
|
|
|
// 减计算方法
|
|
function indexMinus(nowIndex, size, max) {
|
|
let num = nowIndex - size;
|
|
if (num <= -1) {
|
|
if (max == null) {
|
|
num = citys.length + (nowIndex - size);
|
|
} else {
|
|
num = max + (nowIndex - size);
|
|
}
|
|
}
|
|
return num;
|
|
}
|