1110 lines
32 KiB
Plaintext
1110 lines
32 KiB
Plaintext
@{
|
||
ViewBag.Title = "Index";
|
||
Layout = "~/Views/Shared/_Index.cshtml";
|
||
}
|
||
<style>
|
||
|
||
.layui-table-tool > .layui-table-tool-temp {
|
||
padding-right: 0px;
|
||
}
|
||
</style>
|
||
<script>
|
||
|
||
layui.use(['jquery', 'form', 'table', 'common', 'dtree', 'commonTable', 'optimizeSelectOption'], function () {
|
||
var $ = layui.jquery,
|
||
form = layui.form,
|
||
commonTable = layui.commonTable,
|
||
table = layui.table,
|
||
dtree = layui.dtree,
|
||
//echarts = layui.echarts,
|
||
common = layui.common;
|
||
//加载数据
|
||
wcLoading.close();
|
||
//权限控制(js是值传递)
|
||
//toolbarDemo.innerHTML = common.authorizeButtonNew(toolbarDemo.innerHTML);
|
||
|
||
form.on('select(quickTime)', function (data) {
|
||
var selectValue = data.value;
|
||
|
||
function getFormatDate(date) {
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
let hour = date.getHours();
|
||
let minutes = date.getMinutes();
|
||
let seconds = date.getSeconds();
|
||
month = (month < 10) ? '0' + month : month;
|
||
day = (day < 10) ? '0' + day : day;
|
||
hour = (hour < 10) ? '0' + hour : hour;
|
||
minutes = (minutes < 10) ? '0' + minutes : minutes;
|
||
seconds = (seconds < 10) ? '0' + seconds : seconds;
|
||
let currentDate = year + "-" + month + "-" + day
|
||
+ " " + hour + ":" + minutes + ":" + seconds;
|
||
return currentDate;
|
||
}
|
||
/**
|
||
* 获取今日零点时间戳
|
||
* returns {number}
|
||
*/
|
||
function todayStartTimestamp() {
|
||
const timestamp = Math.floor(new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000)
|
||
return timestamp
|
||
}
|
||
/**
|
||
* 获取昨日开始、结束时间戳
|
||
* param num
|
||
* returns {number[昨日开始时间戳, 昨日结束时间戳]}
|
||
*/
|
||
function yesterdayTimestamp(num = 1) {
|
||
const MillisecondsADay = 24 * 60 * 60 * num
|
||
// 今日零点时间戳
|
||
const timestamp = Math.floor(new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000)
|
||
// 昨日开始时间戳
|
||
const yesterdayStartTime = timestamp - MillisecondsADay
|
||
// 昨日结束时间戳
|
||
const yesterdayEndTime = timestamp - 1
|
||
return [yesterdayStartTime, yesterdayEndTime]
|
||
}
|
||
/**
|
||
* 本周开始时间戳
|
||
* returns {number}
|
||
*/
|
||
function weekStartTimestamp() {
|
||
// 一天的秒数
|
||
const MillisecondsADay = 24 * 60 * 60
|
||
// 今日零点时间戳
|
||
const timestamp = Math.floor(new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000)
|
||
const weekDay = new Date().getDay() === 0 ? (7 - 1) : (new Date().getDay() - 1)
|
||
const weekTimeStamp = timestamp - MillisecondsADay * weekDay
|
||
return weekTimeStamp
|
||
}
|
||
/**
|
||
* 上周开始、结束时间戳
|
||
* returns {number[上周开始时间戳, 上周结束时间戳]}
|
||
*/
|
||
function lastWeekTimetamp() {
|
||
// 一天的秒数
|
||
const MillisecondsADay = 24 * 60 * 60
|
||
// 今日零点时间戳
|
||
const timestamp = Math.floor(new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000)
|
||
const weekDay = new Date().getDay() === 0 ? (7 - 1) : (new Date().getDay() - 1)
|
||
// 本周开始时间戳
|
||
const weekTimeStamp = timestamp - MillisecondsADay * weekDay
|
||
// 上周开始时间戳
|
||
const lastWeekStart = weekTimeStamp - MillisecondsADay * 7
|
||
// 上周结束时间戳
|
||
const lastWeekEnd = weekTimeStamp - 1
|
||
return [lastWeekStart, lastWeekEnd]
|
||
}
|
||
|
||
/**
|
||
* 当月开始时间戳
|
||
* returns {number}
|
||
*/
|
||
function monthStartTimestamp() {
|
||
const date = new Date()
|
||
date.setDate(1)
|
||
date.setHours(0, 0, 0, 0)
|
||
const timeStamp = date.getTime() / 1000
|
||
return timeStamp
|
||
}
|
||
/**
|
||
* 获取上月开始、结束时间戳
|
||
* returns {number[上月开始时间戳，上月结束时间戳]}
|
||
*/
|
||
function lastMonthTimetamp() {
|
||
// 一天的秒数
|
||
const MillisecondsADay = 24 * 60 * 60
|
||
|
||
const date = new Date()
|
||
date.setDate(1)
|
||
date.setHours(0, 0, 0, 0)
|
||
// 当月开始时间戳
|
||
const timeStamp = date.getTime() / 1000
|
||
// 上个月的天数
|
||
const days = lastMonthDats()
|
||
// 上月开始时间戳
|
||
const lastMonthStart = timeStamp - (MillisecondsADay * days)
|
||
// 上月结束时间戳
|
||
const lastMonthEnd = timeStamp - 1
|
||
return [lastMonthStart, lastMonthEnd]
|
||
}
|
||
/**
|
||
* 上月天数
|
||
* returns {number}
|
||
*/
|
||
function lastMonthDats() {
|
||
const date = new Date()
|
||
const year = date.getFullYear()
|
||
// 上个月月份
|
||
let month = (date.getMonth() + 1) - 1 // 0-11 表示 1月-12月
|
||
// 0 表示12月
|
||
month = month || 12
|
||
// 30天的月份
|
||
const arr30 = [4, 6, 9, 11]
|
||
// 31天的月份
|
||
const arr31 = [1, 3, 5, 7, 8, 10, 12]
|
||
if (arr30.indexOf(month) !== -1) {
|
||
// 上个月是 30 天
|
||
return 30
|
||
} else if (arr31.indexOf(month) !== -1) {
|
||
// 上个月是 31 天
|
||
return 31
|
||
} else {
|
||
// 2月
|
||
if (isRunYear(year)) {
|
||
return 29
|
||
} else {
|
||
return 28
|
||
}
|
||
}
|
||
}
|
||
/**
|
||
* 是否为闰年
|
||
* param year
|
||
* returns {boolean}
|
||
*/
|
||
function isRunYear(year) {
|
||
// 条件:能被4整除并且不能被100整除，或者被400整除的
|
||
let flag = false
|
||
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
|
||
flag = true
|
||
}
|
||
return flag
|
||
}
|
||
|
||
var laydate = layui.laydate;
|
||
if (selectValue == "toDay") {
|
||
var toDayStartDate = todayStartTimestamp();
|
||
var timef1 = getFormatDate(new Date(toDayStartDate * 1000));
|
||
lay('#dateReStartTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: timef1,
|
||
});
|
||
});
|
||
var timef2 = getFormatDate(new Date(Date.now()));
|
||
lay('#dateReEndTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: timef2,
|
||
});
|
||
});
|
||
} else if (selectValue == "yesterDay") {
|
||
var yesterDayDate = yesterdayTimestamp(1);
|
||
var timef1 = getFormatDate(new Date(yesterDayDate[0] * 1000));
|
||
lay('#dateReStartTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: timef1,
|
||
});
|
||
});
|
||
var timef2 = getFormatDate(new Date(yesterDayDate[1] * 1000));
|
||
lay('#dateReEndTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: timef2,
|
||
});
|
||
});
|
||
} else if (selectValue == "thisWeek") {
|
||
var weekStartDate = weekStartTimestamp();
|
||
var timef1 = getFormatDate(new Date(weekStartDate * 1000));
|
||
lay('#dateReStartTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: timef1,
|
||
});
|
||
});
|
||
var timef2 = getFormatDate(new Date(Date.now()));
|
||
lay('#dateReEndTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: timef2,
|
||
});
|
||
});
|
||
|
||
} else if (selectValue == "lastWeek") {
|
||
var lastWeekDate = lastWeekTimetamp();
|
||
var timef1 = getFormatDate(new Date(lastWeekDate[0] * 1000));
|
||
lay('#dateReStartTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: timef1,
|
||
});
|
||
});
|
||
var timef2 = getFormatDate(new Date(lastWeekDate[1] * 1000));
|
||
lay('#dateReEndTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: timef2,
|
||
});
|
||
});
|
||
} else if (selectValue == "thisMonth") {
|
||
var monthStartDate = monthStartTimestamp();
|
||
var timef = getFormatDate(new Date(monthStartDate * 1000));
|
||
lay('#dateReStartTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: timef,
|
||
});
|
||
});
|
||
var timef2 = getFormatDate(new Date(Date.now()));
|
||
lay('#dateReEndTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: timef2,
|
||
});
|
||
});
|
||
|
||
} else if (selectValue == "lastMonth") {
|
||
//lastMonthTimetamp()
|
||
var lastMonthDate = lastMonthTimetamp();
|
||
var timef1 = getFormatDate(new Date(lastMonthDate[0] * 1000));
|
||
lay('#dateReStartTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: timef1,
|
||
});
|
||
});
|
||
var timef2 = getFormatDate(new Date(lastMonthDate[1] * 1000));
|
||
lay('#dateReEndTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: timef2,
|
||
});
|
||
});
|
||
} else { }
|
||
});
|
||
|
||
GetAllTagList();
|
||
|
||
|
||
|
||
var starttime = new Date(new Date().setHours(0, 0, 0, 0));
|
||
var starttimeString = starttime.getFullYear() + "-" + parseInt(starttime.getMonth() + 1) + "-" + starttime.getDate() + " " + (starttime.getHours()) + ":" + starttime.getMinutes() + ":" + starttime.getSeconds();
|
||
var endtime = new Date();
|
||
endtime.setDate(endtime.getDate())
|
||
var endtimeString = endtime.getFullYear() + "-" + parseInt(endtime.getMonth() + 1) + "-" + endtime.getDate() + " " + (endtime.getHours()) + ":" + endtime.getMinutes() + ":" + endtime.getSeconds();
|
||
function getFormatDateone(date) {
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
let hour = date.getHours();
|
||
let minutes = date.getMinutes();
|
||
let seconds = date.getSeconds();
|
||
month = (month < 10) ? '0' + month : month;
|
||
day = (day < 10) ? '0' + day : day;
|
||
hour = (hour < 10) ? '0' + hour : hour;
|
||
minutes = (minutes < 10) ? '0' + minutes : minutes;
|
||
seconds = (seconds < 10) ? '0' + seconds : seconds;
|
||
let currentDate = year + "-" + month + "-" + day
|
||
+ " " + hour + ":" + minutes + ":" + seconds;
|
||
return currentDate;
|
||
}
|
||
layui.use('laydate', function () {
|
||
var laydate = layui.laydate;
|
||
lay('#dateReStartTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: getFormatDateone(starttime),
|
||
});
|
||
});
|
||
lay('#dateReEndTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: getFormatDateone(endtime),
|
||
});
|
||
});
|
||
});
|
||
function getFormatDate(date) {
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
let hour = date.getHours();
|
||
let minutes = date.getMinutes();
|
||
let seconds = date.getSeconds();
|
||
month = (month < 10) ? '0' + month : month;
|
||
day = (day < 10) ? '0' + day : day;
|
||
hour = (hour < 10) ? '0' + hour : hour;
|
||
minutes = (minutes < 10) ? '0' + minutes : minutes;
|
||
seconds = (seconds < 10) ? '0' + seconds : seconds;
|
||
let currentDate = year + "-" + month + "-" + day
|
||
+ " " + hour + ":" + minutes + ":" + seconds;
|
||
return currentDate;
|
||
}
|
||
|
||
function json_array(data) {
|
||
var len = eval(data).length;
|
||
var arr = [];
|
||
for (var i = 0; i < len; i++) {
|
||
arr[i] = []; //js中二维数组必须进行重复的声明，否则会undefind
|
||
arr[i]['url'] = data[i].url;
|
||
arr[i]['oldname'] = data[i].oldname;
|
||
}
|
||
return arr;
|
||
}
|
||
|
||
var StaticSelectTagList = new Array();
|
||
|
||
var StaticAllTagList = new Array();
|
||
//获取所有变量组
|
||
function GetAllTagList(){
|
||
debugger;
|
||
$.ajax({
|
||
url: "/PenMeiChartsManage/PenMeiHistoryTechCharts/GetAllTagList",
|
||
type: "Post",
|
||
data: {ChartTagTypeName:"Rate"},
|
||
success: function (redata) {
|
||
debugger;
|
||
|
||
var TypeTagLsit = JSON.parse(redata);
|
||
debugger;
|
||
for (var i = 0; i < TypeTagLsit.length; i++) {
|
||
StaticAllTagList.push(TypeTagLsit[i]);
|
||
}
|
||
debugger;
|
||
$('#rateTagList').datalist({
|
||
|
||
data: TypeTagLsit,
|
||
valueField: 'ChartID',
|
||
textField: 'Description',
|
||
idField: 'ChartID',
|
||
|
||
});
|
||
}
|
||
});
|
||
$.ajax({
|
||
url: "/PenMeiChartsManage/PenMeiHistoryTechCharts/GetAllTagList",
|
||
type: "Post",
|
||
data: { ChartTagTypeName: "Process" },
|
||
success: function (redata) {
|
||
debugger;
|
||
|
||
var TypeTagLsit = JSON.parse(redata);
|
||
debugger;
|
||
for (var i = 0; i < TypeTagLsit.length; i++) {
|
||
StaticAllTagList.push(TypeTagLsit[i]);
|
||
}
|
||
debugger;
|
||
$('#processTagList').datalist({
|
||
|
||
data: TypeTagLsit,
|
||
valueField: 'ChartID',
|
||
textField: 'Description',
|
||
idField: 'ChartID',
|
||
|
||
});
|
||
}
|
||
});
|
||
}
|
||
var StaticGroupDescription = "";
|
||
|
||
|
||
|
||
//获取选中子系统tag
|
||
|
||
checkTagAdd = function (rowIndex, rowData) {
|
||
debugger;
|
||
checkAddTaglist(rowData);
|
||
}
|
||
|
||
function checkAddTaglist(rowData) {
|
||
debugger;
|
||
if (StaticSelectTagList.indexOf(rowData) == -1) {
|
||
debugger;
|
||
StaticSelectTagList.push(rowData);
|
||
}
|
||
}
|
||
|
||
checkTagDec = function (rowIndex, rowData) {
|
||
debugger;
|
||
checkDecTaglist(rowData);
|
||
|
||
}
|
||
|
||
function checkDecTaglist(rowData) {
|
||
if (StaticSelectTagList.indexOf(rowData) != -1) {
|
||
debugger;
|
||
StaticSelectTagList.splice(StaticSelectTagList.indexOf(rowData), 1);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
//获取tagvalue
|
||
async function GetChartsTagValue() {
|
||
var chardatalist = new Array();
|
||
for (var si = 0; si < StaticSelectTagList.length; si++) {
|
||
let datetimestart = $('#dateReStartTime')[0].value;
|
||
let datetimeend = $('#dateReEndTime')[0].value;
|
||
let timeInterval = 0;
|
||
switch ($('[name="selectint"]')[0].value) {
|
||
case "tensec":
|
||
timeInterval = 10
|
||
break
|
||
case "twentysec":
|
||
timeInterval = 20
|
||
break
|
||
case "thirtysec":
|
||
timeInterval = 30
|
||
break
|
||
case "onemin":
|
||
timeInterval = 60
|
||
break
|
||
case "fivemin":
|
||
timeInterval = 300
|
||
break
|
||
case "tenmin":
|
||
timeInterval = 600
|
||
break
|
||
case "thirtymin":
|
||
timeInterval = 1800
|
||
break
|
||
case "onehour":
|
||
timeInterval = 3600
|
||
break
|
||
default:
|
||
timeInterval = 3600
|
||
};
|
||
let datapa = { "Table": StaticSelectTagList[si].Table, "TagName": StaticSelectTagList[si].TagName, "StartTime": Date.parse(new Date(datetimestart)), "EndTime": Date.parse(new Date(datetimeend)), "Interval": timeInterval };
|
||
let result;
|
||
myajax = await $.ajax({
|
||
url: "/PenMeiChartsManage/PenMeiHistoryTechCharts/GetChartsTagValue",
|
||
type: "Post",
|
||
//dataType: "json",
|
||
data: datapa,
|
||
success: function (redata) { }
|
||
});
|
||
//debugger;
|
||
$.when(myajax).done(function (redata){
|
||
debugger;
|
||
result = JSON.parse(redata);
|
||
});
|
||
debugger;
|
||
//let result = await Call(api.DataHistoryCharts.GetChartsTagValue, datapa);
|
||
chardatalist.push(result)
|
||
}
|
||
//var myChart = echarts.init(document.getElementById('chart'));
|
||
//myChart = echarts.init(document.getElementById('chart'));
|
||
return chardatalist;
|
||
}
|
||
|
||
//true
|
||
//false
|
||
//第一条Y轴是否显示轴线
|
||
const oneAxisLineShow = true;
|
||
//其他Y轴是否显示轴线
|
||
const otherAxisLineShow = false;
|
||
|
||
showchart = async function () {
|
||
//(document.getElementById('echarts-records'), 'walden');
|
||
var myChart = echarts.init(document.getElementById('result'),'walden');
|
||
|
||
myChart.hideLoading();
|
||
myChart.showLoading();
|
||
|
||
var chardatalist = await GetChartsTagValue();
|
||
|
||
var unitsrc = new Array();
|
||
var unitnames = new Array();
|
||
var unitcolor = new Array();
|
||
for(var ddi = 0;ddi<StaticSelectTagList.length;ddi++){
|
||
var unit_now = StaticSelectTagList[ddi].Units;
|
||
if (unitsrc.indexOf(unit_now) == -1) {
|
||
debugger;
|
||
unitsrc.push(unit_now);
|
||
unitnames.push(StaticSelectTagList[ddi].UnitType + "(" + StaticSelectTagList[ddi].Units + ")");
|
||
unitcolor.push(StaticSelectTagList[ddi].HTRGB);
|
||
}
|
||
}
|
||
|
||
|
||
debugger;
|
||
myChart.dispose();
|
||
|
||
var xDataArr = new Array();
|
||
var yDataArr = new Array();
|
||
var maxArr = new Array();
|
||
var minArr = new Array();
|
||
var intervalArr = new Array();
|
||
for (var listindex = 0; listindex < chardatalist.length; listindex++) {
|
||
let ydata = chardatalist[listindex].map(x => { return x.value });
|
||
let xdata = chardatalist[listindex].map(x => { return x.name });
|
||
debugger;
|
||
let maxSrc = Math.max.apply(null, ydata);
|
||
let newMax = Math.ceil(maxSrc / 5) * 5;
|
||
maxArr.push(newMax);
|
||
let minSrc = Math.min.apply(null, ydata);
|
||
let newMin = Math.floor(minSrc / 5) * 5
|
||
minArr.push(newMin);
|
||
let interval = (newMax - newMin) / 5
|
||
intervalArr.push(interval);
|
||
xDataArr.push(xdata);
|
||
yDataArr.push(ydata);
|
||
}
|
||
var lightwhite = 0;
|
||
if (unitsrc.length > 0) {
|
||
lightwhite = (unitsrc.length ) * 40;
|
||
}
|
||
|
||
//var lightwhite = (chardatalist.length) * 100;
|
||
var color = new Array();
|
||
for (var colori = 0; colori < StaticSelectTagList.length; colori++) {
|
||
//color.push(roundrgb())
|
||
color.push(StaticSelectTagList[colori].HTRGB);
|
||
//color.push("#000000");
|
||
}
|
||
|
||
|
||
var yAxis = new Array();
|
||
debugger;
|
||
var maxYs = unitsrc.length;
|
||
for (var ci = 0; ci < unitsrc.length; ci++) {
|
||
if (ci == 0)
|
||
{
|
||
let yAxisdata = {
|
||
name: JSON.parse(JSON.stringify(unitnames[ci])),
|
||
nameLocation: 'center',
|
||
nameGap:5,
|
||
nameRotate:270,
|
||
max: maxArr[ci],
|
||
min: minArr[ci],
|
||
interval: intervalArr[ci],
|
||
//splitNumber:21,
|
||
type: 'value',
|
||
//position:'left',
|
||
//坐标轴两边留白策略，设置max、min后失效
|
||
boundaryGap: ['5%', '2%'],
|
||
// 让表格的刻度向靠里侧显示
|
||
axisTick: {
|
||
show: true,
|
||
inside: false,
|
||
length: 9,
|
||
},
|
||
minorTick:{
|
||
show:true,
|
||
length: 5,
|
||
},
|
||
minorSplitLine: {
|
||
show: true,
|
||
},
|
||
axisLabel: {
|
||
inside: false,
|
||
align: 'right',
|
||
verticalAlign: 'bottom',
|
||
},
|
||
// 设置刻度线的颜色等样式
|
||
axisLine: {
|
||
show: oneAxisLineShow,
|
||
onZero: true,
|
||
onZeroAxisIndex:0,
|
||
lineStyle: {
|
||
//color: color[ci],
|
||
|
||
color: unitcolor[ci],
|
||
width: 3
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true, //想要不显示网格线，改为false
|
||
lineStyle: {
|
||
// 设置网格为虚线
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
//offset: (ci - 1) * 100
|
||
}
|
||
yAxis.push(yAxisdata);
|
||
}
|
||
else {
|
||
let yAxisdata = {
|
||
name: JSON.parse(JSON.stringify(unitnames[ci])),
|
||
nameLocation: 'center',
|
||
nameGap: 5,
|
||
nameRotate: 270,
|
||
max: maxArr[ci],
|
||
min: minArr[ci],
|
||
interval: intervalArr[ci],
|
||
//splitNumber: 21,
|
||
type: 'value',
|
||
position: 'left',
|
||
//坐标轴两边留白策略，设置max、min后失效
|
||
boundaryGap: ['5%', '2%'],
|
||
//alignTicks:true,
|
||
axisTick: {
|
||
show:true,
|
||
inside: false,
|
||
length: 9,
|
||
},
|
||
//minorTick: {
|
||
// show: true,
|
||
// length: 5,
|
||
//},
|
||
minorSplitLine:{
|
||
show:true,
|
||
},
|
||
axisLabel: {
|
||
inside: false,
|
||
align: 'right',
|
||
verticalAlign: 'bottom',
|
||
},
|
||
axisLine: {
|
||
show: otherAxisLineShow,
|
||
onZero: false,
|
||
lineStyle: {
|
||
//color: color[ci],
|
||
color: unitcolor[ci],
|
||
width: 3
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true //想要不显示网格线，改为false
|
||
},
|
||
// 设置坐标轴偏移位置
|
||
offset: (ci) * 40
|
||
//offset: (ci) * 100
|
||
}
|
||
yAxis.push(yAxisdata);
|
||
}
|
||
}
|
||
|
||
|
||
//for (var ci = 0; ci < StaticSelectTagList.length; ci++) {
|
||
// if (ci == 0) {
|
||
// let yAxisdata = {
|
||
// name: JSON.parse(JSON.stringify(StaticSelectTagList[ci].Description)),
|
||
// nameLocation: 'center',
|
||
// type: 'value',
|
||
// //坐标轴两边留白策略，设置max、min后失效
|
||
// boundaryGap: ['5%', '2%'],
|
||
// // max: 700,
|
||
// // min: 0,
|
||
// // 让表格的刻度向靠里侧显示
|
||
// axisTick: {
|
||
// inside: true
|
||
// },
|
||
// axisLabel: {
|
||
// inside: true,
|
||
// align: 'left',
|
||
// verticalAlign: 'bottom',
|
||
// },
|
||
// // 设置刻度线的颜色等样式
|
||
// axisLine: {
|
||
// show: true,
|
||
// lineStyle: {
|
||
// //color: color[ci],
|
||
// color: StaticSelectTagList[ci].HTRGB,
|
||
// width: 3
|
||
// }
|
||
// },
|
||
// splitLine: {
|
||
// show: true, //想要不显示网格线，改为false
|
||
// lineStyle: {
|
||
// // 设置网格为虚线
|
||
// type: 'dashed'
|
||
// }
|
||
// }
|
||
// }
|
||
// yAxis.push(yAxisdata);
|
||
// }
|
||
// else {
|
||
// let yAxisdata = {
|
||
// name: JSON.parse(JSON.stringify(StaticSelectTagList[ci].Description)),
|
||
// nameLocation: 'center',
|
||
// // max: 800,
|
||
// // min: 0,
|
||
// type: 'value',
|
||
// //坐标轴两边留白策略，设置max、min后失效
|
||
// boundaryGap: ['5%', '2%'],
|
||
// axisLabel: {
|
||
// inside: true,
|
||
// align: 'right',
|
||
// verticalAlign: 'bottom',
|
||
// },
|
||
// axisLine: {
|
||
// show: true,
|
||
// lineStyle: {
|
||
// //color: color[ci],
|
||
// color: StaticSelectTagList[ci].HTRGB,
|
||
// width: 3
|
||
// }
|
||
// },
|
||
// splitLine: {
|
||
// show: false //想要不显示网格线，改为false
|
||
// },
|
||
// // 设置坐标轴偏移位置
|
||
// offset: (ci - 1) * 100
|
||
// //offset: (ci) * 100
|
||
// }
|
||
// yAxis.push(yAxisdata);
|
||
// }
|
||
//}
|
||
|
||
var series = new Array();
|
||
for (var si = 0; si < StaticSelectTagList.length; si++) {
|
||
var unitIndex = 0;
|
||
var unitss = StaticSelectTagList[si].Units;
|
||
for(var ui = 0;ui<unitsrc.length;ui++){
|
||
if (unitsrc[ui] == unitss){
|
||
unitIndex = ui;
|
||
break;
|
||
}
|
||
}
|
||
debugger;
|
||
//bool变量取消平滑采取折线
|
||
let issmooth = !(StaticSelectTagList[si].Units ==='Y/N')
|
||
let seriesdata = {
|
||
data: yDataArr[si],
|
||
// 曲线名
|
||
name: JSON.parse(JSON.stringify(StaticSelectTagList[si].Description)),
|
||
// 设置参数对应的y坐标轴的索引
|
||
yAxisIndex: unitIndex,
|
||
type: 'line',
|
||
// 曲线平滑设置
|
||
smooth: issmooth
|
||
}
|
||
series.push(seriesdata);
|
||
}
|
||
|
||
// 设置鼠标hover时的提示信息
|
||
var tooltip = {
|
||
trigger: 'axis', // 有3个属性值 axis item none
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985' //配置展示方块的背景颜色
|
||
}
|
||
}
|
||
}
|
||
// 调整表格两边的空白的区
|
||
var grid = {
|
||
//left:'20px'
|
||
// 左侧
|
||
//x: '150px',
|
||
x: lightwhite+'px',
|
||
// 上部
|
||
y: 25,
|
||
// 右侧
|
||
//x2: lightwhite + 'px',
|
||
x2:10,
|
||
// 下部
|
||
// y2: 35
|
||
}
|
||
var letest = ['tg', 'fe', 'wdf'];
|
||
// 调整图样的名称 // 定义图样和每条曲线的颜色
|
||
var legend = new Array();
|
||
for (var li = 0; li < StaticSelectTagList.length; li++) {
|
||
debugger;
|
||
let legenddata = StaticSelectTagList[li].Description;
|
||
legend.push(JSON.parse(JSON.stringify(legenddata)));
|
||
}
|
||
var dataZoom = {
|
||
//type: 'slider'
|
||
type: 'inside'
|
||
}
|
||
|
||
var option = {
|
||
xAxis: {
|
||
name: '时间',
|
||
type: 'category',
|
||
position: 'bottom',
|
||
data: xDataArr[0],
|
||
// boundaryGap: false, //x下标在刻度处显示
|
||
splitLine: {
|
||
show: true, //想要不显示网格线，改为false
|
||
lineStyle: {
|
||
// 设置网格为虚线
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
axisTick:{
|
||
show:true,
|
||
inside:true,
|
||
//alignWithLabel:true,
|
||
//interval:'1'
|
||
},
|
||
minorTick: {
|
||
show: true,
|
||
length: 7,
|
||
},
|
||
// splitArea: { show: true }, //保留网格区域
|
||
// 设置刻度线的颜色等样式
|
||
axisLine: {
|
||
onZero: false,
|
||
lineStyle: {
|
||
color: 'black',
|
||
width: 3
|
||
}
|
||
}
|
||
},
|
||
yAxis: yAxis,
|
||
series: series,
|
||
tooltip: tooltip,
|
||
grid: grid,
|
||
legend: {
|
||
data: legend,
|
||
top: 'top',
|
||
bottom: 'auto',
|
||
left: 'center',
|
||
right: 'auto'
|
||
},
|
||
dataZoom: dataZoom,
|
||
color: color
|
||
};
|
||
setTimeout(bulidchart(option), 500);
|
||
|
||
|
||
}
|
||
|
||
function bulidchart(option) {
|
||
if (option) {
|
||
|
||
var myChart = echarts.init(document.getElementById('result'));
|
||
myChart.hideLoading();
|
||
myChart.setOption(JSON.parse(JSON.stringify(option)));
|
||
|
||
//myChart = echarts.init(document.getElementById('result'));
|
||
}
|
||
}
|
||
|
||
|
||
|
||
function roundrgb() {//rgb颜色随机
|
||
const r = Math.floor(Math.random() * 256);
|
||
const g = Math.floor(Math.random() * 256);
|
||
const b = Math.floor(Math.random() * 256);
|
||
return `rgb(${r},${g},${b})`;
|
||
}
|
||
//$(function () {
|
||
//赋值combox所有subsystem
|
||
//GetAllSubsystemTag();
|
||
|
||
|
||
|
||
//$('#btn_sbshowchart').click(function () {
|
||
// showchart();
|
||
// return false;
|
||
//});
|
||
//$('#subsystemTagList').datalist('resize', {
|
||
// height: ($('#aright').height() - 75)
|
||
//});
|
||
//window.onresize = function () {
|
||
// $('#subsystemTagList').datalist('resize', {
|
||
// height: ($('#aright').height() - 75)
|
||
// });
|
||
//};
|
||
//});
|
||
|
||
});
|
||
|
||
|
||
</script>
|
||
<html style="height:100%">
|
||
<body style="height:100%">
|
||
|
||
<script type="text/javascript" src="~/lib/echarts-5.3.0/dist/echarts.js"></script>
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this" lay-id="TechCharts">重要数据趋势</li>
|
||
<li lay-id="MoreCharts">其他数据趋势</li>
|
||
</ul>
|
||
<div class="layui-tab-content" style="height:90%">
|
||
<div class="layui-tab-item layui-show" style="height:100%"></div>
|
||
<div class="layui-tab-item" style="height:100%"></div>
|
||
</div>
|
||
<div class="layui-fluid" style="padding:0 0px;height:100%">
|
||
<div class="layui-row layui-col-space5" style="height:100%">
|
||
<div class="layui-col-md2 layui-col-xs3" style="height:100%;padding-right:12px;">
|
||
<div class="layui-card" style="text-align:left;overflow: auto;height:100%" id="toolbarDiv">
|
||
@*<ul id="dataTree" class="dtree" data-id="0"></ul>*@
|
||
<div id="aleft" style="float:left;width:100%;height:100%">
|
||
@*<div class="easyui-panel" title="选择设备信息" style="width:100%;height:auto">*@
|
||
|
||
|
||
<div class="easyui-datalist" id="rateTagList" title="喷吹速率趋势" style="position: relative;width:100%;height:auto;overflow:auto;" data-options="
|
||
checkbox: true,
|
||
selectOnCheck: false,
|
||
sigleselect:false,
|
||
onCheck:function(rowIndex,rowData){checkTagAdd(rowIndex,rowData)},
|
||
onUncheck:function(rowIndex,rowData){checkTagDec(rowIndex,rowData)}
|
||
">
|
||
</div>
|
||
<div class="easyui-datalist" id="processTagList" title="重点数据趋势" style="position: relative;width:100%;height:auto;overflow:auto;" data-options="
|
||
checkbox: true,
|
||
selectOnCheck: false,
|
||
sigleselect:false,
|
||
onCheck:function(rowIndex,rowData){checkTagAdd(rowIndex,rowData)},
|
||
onUncheck:function(rowIndex,rowData){checkTagDec(rowIndex,rowData)}
|
||
">
|
||
</div>
|
||
@*</div>*@
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md10 layui-col-xs9" style="height:100%">
|
||
@*<div class="layui-card" style="padding: 5px;">
|
||
<div id="echartdiv" style="width:100%;height: 100%;margin-bottom: 10px;">
|
||
<div id="result" class="echart" style="width: 100%; height: 100% "></div>
|
||
</div>
|
||
</div>*@
|
||
|
||
<form class="layui-form" style="height:auto;" id="formPreviewForm">
|
||
<div id="grid_2" class="layui-form-item layui-row grid active" data-id="grid_2"
|
||
data-tag="grid" data-index="0">
|
||
<div class="layui-col-md3 widget-col-list column0" data-index="0" data-parentindex="0">
|
||
<div id="ReStartTime" class="layui-form-item active" data-id="ReStartTime"
|
||
data-tag="date" data-index="0">
|
||
<label class="layui-form-label layui-form-required" style="width: 80px;">
|
||
开始时间:
|
||
</label>
|
||
<div class="layui-input-block" style="width:calc(100% - 110px);margin-left: 110px;">
|
||
<input id="dateReStartTime" name="ndateReStartTime" lay-verify="required"
|
||
class="layui-input icon-date widget-date " style="line-height: 40px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3 widget-col-list column1" data-index="1" data-parentindex="0">
|
||
<div id="ReEndTime" class="layui-form-item active" data-id="ReEndTime"
|
||
data-tag="date" data-index="0">
|
||
<label class="layui-form-label layui-form-required" style="width: 80px;">
|
||
结束世间:
|
||
</label>
|
||
<div class="layui-input-block" style="width:calc(100% - 110px);margin-left: 110px;">
|
||
<input id="dateReEndTime" name="ndateReEndTime" lay-verify="required" class="layui-input icon-date widget-date "
|
||
style="line-height: 40px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3 widget-col-list column2" data-index="2" data-parentindex="0">
|
||
<div id="select_10" class="layui-form-item active" data-id="select_4" data-tag="select"
|
||
data-index="0">
|
||
<label class="layui-form-label layui-form-required" style="width: 110px;">
|
||
快捷节点:
|
||
</label>
|
||
<div class="layui-input-block layui-form" lay-filter="select_4" style="margin-left: 140px;width:160px">
|
||
|
||
<select name="selectquick" lay-filter="quickTime" lay-verify="required" id="selectQuick" style="width:150px">
|
||
<option value="def" selected="">
|
||
快速选择周期
|
||
</option>
|
||
<option value="toDay">
|
||
今日
|
||
</option>
|
||
<option value="yesterDay">
|
||
昨日
|
||
</option>
|
||
<option value="thisWeek">
|
||
本周
|
||
</option>
|
||
<option value="lastWeek">
|
||
上周
|
||
</option>
|
||
<option value="thisMonth">
|
||
本月
|
||
</option>
|
||
<option value="lastMonth">
|
||
上月
|
||
</option>
|
||
</select>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md2 widget-col-list column2" data-index="3" data-parentindex="0">
|
||
<div id="select_4" class="layui-form-item active" data-id="select_4" data-tag="select"
|
||
data-index="0">
|
||
<label class="layui-form-label layui-form-required" style="width: 80px;">
|
||
时间间隔:
|
||
</label>
|
||
<div class="layui-input-block layui-form" lay-filter="select_4" style="margin-left: 110px">
|
||
<select name="selectint" lay-verify="required" id="selectIntervalt">
|
||
<option value="onemin" selected="">
|
||
1分钟
|
||
</option>
|
||
<option value="fivemin">
|
||
5分钟
|
||
</option>
|
||
<option value="tenmin">
|
||
10分钟
|
||
</option>
|
||
<option value="thirtymin">
|
||
30分钟
|
||
</option>
|
||
<option value="onehour">
|
||
1小时
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md1 widget-col-list column3" data-index="4" data-parentindex="0">
|
||
<div id="bottom_5" class="layui-form-item active" data-id="bottom_5" data-tag="bottom"
|
||
data-index="0">
|
||
<div class="layui-input-block" style="margin-left: 30px;">
|
||
<button id="btn_search" type="button" class="layui-btn custom-zc" ; onclick="showchart()">
|
||
<i class="layui-icon ">
|
||
</i>
|
||
确定
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</form>
|
||
<form class="layui-form" style="height:calc(100vh - 55px);width:100%" id="tablepanel">
|
||
<div class="layui-panel" id="gridpanel" style="width:100%;height: 100%;margin-bottom: 10px; ">
|
||
<div id="result" class="echart" style="width: 100%; height: 100% "></div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|