init: 工业互联网数据看板项目首次入库
This commit is contained in:
XingCheng3
277
right.js
Normal file
277
right.js
Normal file
@@ -0,0 +1,277 @@
|
||||
// 获取时间
|
||||
// 单位数字补零
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user