HTCloud/HT.Cloud.Web/Areas/ChartsManage/Views/HistoryCharts/Index.cshtml

@{
    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: true
						},
						axisLabel: {
							inside: true,
							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>