拆分多库模式

This commit is contained in:
dell
2023-08-24 09:28:09 +08:00
parent a83653655b
commit 8b307e203b
69 changed files with 1267 additions and 184 deletions

View File

@ -312,9 +312,9 @@
} else { }
});
GetDriverGroupList();
//GetDriverGroupList();
//GetAllSubsystemTag();
GetAllSubsystemTag();
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();
@ -388,60 +388,60 @@
var StaticSelectTagList = new Array();
//获取所有变量组
async function GetDriverGroupList() {
debugger;
$.ajax({
url: "/ChartsManage/HistoryCharts/GetDriverGroupList",
type: "Get",
success: function (redata) {
debugger;
var listsubsysname = JSON.parse(redata);
$('#groupselect').combobox({
data: listsubsysname,
valueField: 'Lable',
textField: 'Value',
value :'请选择系统',
checkOnSelect: true,
selectOnCheck: true
});
$('#subsystemselect').combobox({
//async function GetDriverGroupList() {
// debugger;
// $.ajax({
// url: "/ChartsManage/HistoryCharts/GetDriverGroupList",
// type: "Get",
// success: function (redata) {
// debugger;
// var listsubsysname = JSON.parse(redata);
// $('#groupselect').combobox({
// data: listsubsysname,
// valueField: 'Lable',
// textField: 'Value',
// value :'请选择系统',
// checkOnSelect: true,
// selectOnCheck: true
// });
// $('#subsystemselect').combobox({
value: '请先选择系统',
});
}
});
}
var StaticGroupDescription = "";
updateGroupSelect = async function (data) {
StaticGroupDescription = data.Value;
var para = { "GroupDescription": data.Value }
//var subsystemAllTag = await Call(api.DataHistoryCharts.GetSubsystemAllTag, para);
debugger;
$.ajax({
url: "/ChartsManage/HistoryCharts/GetGroupSubsystemTag",
type: "Post",
//dataType: "json",
data: para,
success: function (redata) {
var listsubsysname = JSON.parse(redata);
$('#subsystemselect').combobox({
data: listsubsysname,
valueField: 'Lable',
textField: 'Value',
value: '请选择子系统',
checkOnSelect: true,
selectOnCheck: true
});
}
});
// value: '请先选择系统',
// });
// }
// });
//}
//var StaticGroupDescription = "";
//updateGroupSelect = async function (data) {
// StaticGroupDescription = data.Value;
// var para = { "GroupDescription": data.Value }
// //var subsystemAllTag = await Call(api.DataHistoryCharts.GetSubsystemAllTag, para);
// debugger;
// $.ajax({
// url: "/ChartsManage/HistoryCharts/GetGroupSubsystemTag",
// type: "Post",
// //dataType: "json",
// data: para,
// success: function (redata) {
// var listsubsysname = JSON.parse(redata);
// $('#subsystemselect').combobox({
// data: listsubsysname,
// valueField: 'Lable',
// textField: 'Value',
// value: '请选择子系统',
// checkOnSelect: true,
// selectOnCheck: true
// });
// }
// });
}
//}
//获取所有子系统列表ok 废弃
async function GetAllSubsystemTag() {
debugger;
$.ajax({
url: "/ChartsManage/HistoryCharts/GetAllSubsystemTag",
url: "/PenMeiChartsManage/PenMeiHistoryCharts/GetAllSubsystemTag",
type: "Get",
//dataType: "json",
//async: false,
@ -463,11 +463,11 @@
//获取选中子系统tag
updateSelect = async function (data) {
//var groupDescription = ('#groupselect').combobox().getValue();
var para = { "GroupDescription": StaticGroupDescription, "SubsysytemName": data.Value }
var para = { /*"GroupDescription": StaticGroupDescription,*/ "SubsysytemName": data.Value }
//var subsystemAllTag = await Call(api.DataHistoryCharts.GetSubsystemAllTag, para);
debugger;
myajax = $.ajax({
url: "/ChartsManage/HistoryCharts/GetSubsystemAllTag",
url: "/PenMeiChartsManage/PenMeiHistoryCharts/GetSubsystemAllTag",
type: "Post",
//dataType: "json",
data: para,
@ -559,7 +559,7 @@
let datapa = { "TagID": StaticSelectTagList[si].TagID, "StartTime": Date.parse(new Date(datetimestart)), "EndTime": Date.parse(new Date(datetimeend)), "Interval": timeInterval };
let result;
myajax = await $.ajax({
url: "/ChartsManage/HistoryCharts/GetChartsTagValue",
url: "/PenMeiChartsManage/PenMeiHistoryCharts/GetChartsTagValue",
type: "Post",
//dataType: "json",
data: datapa,
@ -625,10 +625,10 @@
// min: 0,
// 让表格的刻度向靠里侧显示
axisTick: {
inside: false
inside: true
},
axisLabel: {
inside: false,
inside: true,
align: 'left',
verticalAlign: 'bottom',
},
@ -825,8 +825,8 @@
@*<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:100%">
<div class="easyui-combobox" id="groupselect" name="group" data-options="onSelect:function(rec){updateGroupSelect(rec)}" style="width:100%;height:40px">
</div>
@*<div class="easyui-combobox" id="groupselect" name="group" data-options="onSelect:function(rec){updateGroupSelect(rec)}" style="width:100%;height:40px">
</div>*@
<div class="easyui-combobox" id="subsystemselect" name="state" data-options="onSelect:function(rec){updateSelect(rec)}" style="width:100%;height:40px">
</div>
<div class="easyui-datalist" id="subsystemTagList" title="变量列表" style="position: relative;width:100%;height:auto;overflow:auto;" data-options="

View File

@ -0,0 +1,968 @@
@{
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 { }
});
GetDriverGroupList();
//GetAllSubsystemTag();
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();
//获取所有变量组
async function GetDriverGroupList() {
debugger;
$.ajax({
url: "/ChartsManage/HistoryCharts/GetDriverGroupList",
type: "Get",
success: function (redata) {
debugger;
var listsubsysname = JSON.parse(redata);
$('#groupselect').combobox({
data: listsubsysname,
valueField: 'Lable',
textField: 'Value',
value :'请选择系统',
checkOnSelect: true,
selectOnCheck: true
});
$('#subsystemselect').combobox({
value: '请先选择系统',
});
}
});
}
var StaticGroupDescription = "";
updateGroupSelect = async function (data) {
StaticGroupDescription = data.Value;
var para = { "GroupDescription": data.Value }
//var subsystemAllTag = await Call(api.DataHistoryCharts.GetSubsystemAllTag, para);
debugger;
$.ajax({
url: "/ChartsManage/HistoryCharts/GetGroupSubsystemTag",
type: "Post",
//dataType: "json",
data: para,
success: function (redata) {
var listsubsysname = JSON.parse(redata);
$('#subsystemselect').combobox({
data: listsubsysname,
valueField: 'Lable',
textField: 'Value',
value: '请选择子系统',
checkOnSelect: true,
selectOnCheck: true
});
}
});
}
//获取所有子系统列表ok 废弃
async function GetAllSubsystemTag() {
debugger;
$.ajax({
url: "/ChartsManage/HistoryCharts/GetAllSubsystemTag",
type: "Get",
//dataType: "json",
//async: false,
//data: datapa,
success: function (redata) {
debugger;
var listsubsysname = JSON.parse(redata);
$('#subsystemselect').combobox({
data: listsubsysname,
valueField: 'Lable',
textField: 'Value',
checkOnSelect: true,
selectOnCheck: true
});
}
});
}
//获取选中子系统tag
updateSelect = async function (data) {
//var groupDescription = ('#groupselect').combobox().getValue();
var para = { "GroupDescription": StaticGroupDescription, "SubsysytemName": data.Value }
//var subsystemAllTag = await Call(api.DataHistoryCharts.GetSubsystemAllTag, para);
debugger;
myajax = $.ajax({
url: "/ChartsManage/HistoryCharts/GetSubsystemAllTag",
type: "Post",
//dataType: "json",
data: para,
success: function (redata){}
});
debugger;
$.when(myajax).done(function (redata){
var subsystemAllTag = JSON.parse(redata);
$('#subsystemTagList').datalist({
data: subsystemAllTag,
valueField: 'TagID',
textField: 'Description',
idField: 'TagID',
});
var datalistArr = $('#subsystemTagList').datalist("getData").rows;
if (datalistArr.length > 0 && StaticSelectTagList.length > 0) {
for (var ni = 0; ni < datalistArr.length; ni++) {
if (StaticSelectTagList.indexOf(datalistArr[i]) != -1) {
$('#subsystemTagList').datalist("selectRecord", datalistArr[i].TagID);
}
}
}
$('#subsystemTagList').datalist('resize', {
height: ($('#aright').height() - 75)
});
});
}
checkTagAdd = function (rowIndex, rowData) {
checkAddTaglist(rowData);
}
function checkAddTaglist(rowData) {
if (StaticSelectTagList.indexOf(rowData) == -1) {
StaticSelectTagList.push(rowData);
}
}
checkTagDec = function (rowIndex, rowData) {
checkDecTaglist(rowData);
}
function checkDecTaglist(rowData) {
if (StaticSelectTagList.indexOf(rowData) != -1) {
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 = { "TagID": StaticSelectTagList[si].TagID, "StartTime": Date.parse(new Date(datetimestart)), "EndTime": Date.parse(new Date(datetimeend)), "Interval": timeInterval };
let result;
myajax = await $.ajax({
url: "/ChartsManage/HistoryCharts/GetChartsTagValue",
type: "Post",
//dataType: "json",
data: datapa,
success: function (redata) { }
});
debugger;
$.when(myajax).done(function (redata){
result = JSON.parse(redata);
});
//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;
}
showchart = async function () {
//(document.getElementById('echarts-records'), 'walden');
var myChart = echarts.init(document.getElementById('result'),'walden');
myChart.hideLoading();
myChart.showLoading();
var chardatalist = await GetChartsTagValue();
debugger;
myChart.dispose();
var xDataArr = new Array();
var yDataArr = 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 });
xDataArr.push(xdata);
yDataArr.push(ydata);
}
var lightwhite = 0;
if (chardatalist.length > 1) {
lightwhite = (chardatalist.length - 1) * 100;
}
//var lightwhite = (chardatalist.length) * 100;
var color = new Array();
for (var colori = 0; colori < StaticSelectTagList.length; colori++) {
color.push(roundrgb())
}
var yAxis = new Array();
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: false
},
axisLabel: {
inside: false,
align: 'left',
verticalAlign: 'bottom',
},
// 设置刻度线的颜色等样式
axisLine: {
show: true,
lineStyle: {
color: color[ci],
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],
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++) {
debugger;
//bool变量取消平滑采取折线
let issmooth = !(StaticSelectTagList[si].Units ==='Y/N')
let seriesdata = {
data: yDataArr[si],
// 曲线名
name: JSON.parse(JSON.stringify(StaticSelectTagList[si].Description)),
// 设置参数对应的y坐标轴的索引
yAxisIndex: si,
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: '50px',
// 上部
// y: 25,
// 右侧
x2: lightwhite + 'px',
// 下部
// y2: 35
}
var letest = ['tg', 'fe', 'wdf'];
// 调整图样的名称 // 定义图样和每条曲线的颜色
var legend = new Array();
for (var li = 0; li < StaticSelectTagList.length; li++) {
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'
}
},
// splitArea: { show: true }, //保留网格区域
// 设置刻度线的颜色等样式
axisLine: {
onZero: false,
lineStyle: {
color: 'black',
width: 3
}
}
},
yAxis: yAxis,
series: series,
tooltip: tooltip,
grid: grid,
//legend: legend,
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>
<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:100%">
<div class="easyui-combobox" id="groupselect" name="group" data-options="onSelect:function(rec){updateGroupSelect(rec)}" style="width:100%;height:40px">
</div>
<div class="easyui-combobox" id="subsystemselect" name="state" data-options="onSelect:function(rec){updateSelect(rec)}" style="width:100%;height:40px">
</div>
<div class="easyui-datalist" id="subsystemTagList" 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>

View File

@ -946,7 +946,14 @@
<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;">