1099 lines
32 KiB
Plaintext
1099 lines
32 KiB
Plaintext
![]() |
@{
|
|||
|
ViewBag.Title = "Index";
|
|||
|
Layout = "~/Views/Shared/_Index.cshtml";
|
|||
|
}
|
|||
|
<style>
|
|||
|
|
|||
|
.layui-table-tool > .layui-table-tool-temp {
|
|||
|
padding-right: 0px;
|
|||
|
}
|
|||
|
|
|||
|
.panel-title {
|
|||
|
font-size: 12px;
|
|||
|
font-weight: bold;
|
|||
|
color: #ffffff;
|
|||
|
height: 16px;
|
|||
|
line-height: 16px;
|
|||
|
}
|
|||
|
|
|||
|
.panel-header {
|
|||
|
border-color: #001655;
|
|||
|
}
|
|||
|
|
|||
|
.panel-header {
|
|||
|
background: #001655;
|
|||
|
}
|
|||
|
|
|||
|
|
|||
|
.datagrid-htable, .datagrid-btable, .datagrid-ftable {
|
|||
|
color: #ffffff;
|
|||
|
border-collapse: separate;
|
|||
|
}
|
|||
|
|
|||
|
.datagrid-body .datagrid-cell {
|
|||
|
background: #001655;
|
|||
|
}
|
|||
|
|
|||
|
.layui-form-select dl dd {
|
|||
|
cursor: pointer;
|
|||
|
background: #001655;
|
|||
|
}
|
|||
|
|
|||
|
.layui-form-select dl dd.layui-this {
|
|||
|
background-color: #3490ab;
|
|||
|
color: #fff;
|
|||
|
}
|
|||
|
</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 t = null;
|
|||
|
var SelectTagNamelist = new Array();
|
|||
|
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();
|
|||
|
var tablesArr = [];
|
|||
|
SelectTagNamelist.splice(0, SelectTagNamelist.length)
|
|||
|
for (var si = 0; si < StaticSelectTagList.length; si++) {
|
|||
|
SelectTagNamelist.push(StaticSelectTagList[si].TagName);
|
|||
|
debugger;
|
|||
|
tablesArr.push(StaticSelectTagList[si].Table);
|
|||
|
}
|
|||
|
|
|||
|
|
|||
|
|
|||
|
myajax = await $.ajax({
|
|||
|
url: "/PenMeiChartsManage/PenMeiRtTechCharts/GetChartsTagValueInit",
|
|||
|
type: "Post",
|
|||
|
dataType: "json",
|
|||
|
traditional: true,//这里设置为true
|
|||
|
data: { charts_TagNames: SelectTagNamelist, Tables: tablesArr },
|
|||
|
success: function (redata) { }
|
|||
|
});
|
|||
|
debugger;
|
|||
|
$.when(myajax).done(function (redata) {
|
|||
|
chardatalist = redata;
|
|||
|
});
|
|||
|
|
|||
|
return chardatalist;
|
|||
|
}
|
|||
|
|
|||
|
clearchart = async function () {
|
|||
|
var myChart = echarts.init(document.getElementById('result'), 'custom2');
|
|||
|
//$("#result").empty();
|
|||
|
clearTimeout(t); //清除定时器
|
|||
|
t = null;
|
|||
|
}
|
|||
|
|
|||
|
|
|||
|
showchart = async function () {
|
|||
|
//(document.getElementById('echarts-records'), 'walden');
|
|||
|
var myChart = echarts.init(document.getElementById('result'), 'custom2');
|
|||
|
|
|||
|
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();
|
|||
|
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 (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',
|
|||
|
type: 'value',
|
|||
|
//position:'left',
|
|||
|
//坐标轴两边留白策略,设置max、min后失效
|
|||
|
boundaryGap: ['5%', '2%'],
|
|||
|
// max: 700,
|
|||
|
// min: 0,
|
|||
|
// 让表格的刻度向靠里侧显示
|
|||
|
axisTick: {
|
|||
|
show: true,
|
|||
|
inside: true
|
|||
|
},
|
|||
|
// minorTick: {
|
|||
|
// show: true,
|
|||
|
// length: 7,
|
|||
|
// },
|
|||
|
// minorSplitLine: {
|
|||
|
// show: true,
|
|||
|
// },
|
|||
|
axisLabel: {
|
|||
|
inside: true,
|
|||
|
align: 'left',
|
|||
|
verticalAlign: 'bottom',
|
|||
|
},
|
|||
|
// 设置刻度线的颜色等样式
|
|||
|
axisLine: {
|
|||
|
show: true,
|
|||
|
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',
|
|||
|
// max: 800,
|
|||
|
// min: 0,
|
|||
|
type: 'value',
|
|||
|
position: 'left',
|
|||
|
//坐标轴两边留白策略,设置max、min后失效
|
|||
|
boundaryGap: ['5%', '2%'],
|
|||
|
//alignTicks:true,
|
|||
|
axisTick: {
|
|||
|
show: true,
|
|||
|
inside: true
|
|||
|
},
|
|||
|
// minorTick: {
|
|||
|
// show: true,
|
|||
|
// length: 7,
|
|||
|
// },
|
|||
|
// minorSplitLine: {
|
|||
|
// show: true,
|
|||
|
// },
|
|||
|
axisLabel: {
|
|||
|
inside: true,
|
|||
|
align: 'left',
|
|||
|
verticalAlign: 'bottom',
|
|||
|
},
|
|||
|
axisLine: {
|
|||
|
show: true,
|
|||
|
onZero: false,
|
|||
|
lineStyle: {
|
|||
|
//color: color[ci],
|
|||
|
// color: unitcolor[ci],
|
|||
|
width: 3
|
|||
|
}
|
|||
|
},
|
|||
|
splitLine: {
|
|||
|
// show: false //想要不显示网格线,改为false
|
|||
|
show: true, //想要不显示网格线,改为false
|
|||
|
lineStyle: {
|
|||
|
// 设置网格为虚线
|
|||
|
type: 'dashed'
|
|||
|
}
|
|||
|
},
|
|||
|
// 设置坐标轴偏移位置
|
|||
|
offset: (ci) * 40
|
|||
|
//offset: (ci) * 100
|
|||
|
}
|
|||
|
yAxis.push(yAxisdata);
|
|||
|
}
|
|||
|
}
|
|||
|
/*
|
|||
|
*一
|
|||
|
1、复用制粉趋势界面源码建立喷煤趋势界面。
|
|||
|
2、改进趋势图的曲线颜色设定,按照单位分类,相同单位变量绑定同一色系。
|
|||
|
3、曲线对应Y轴数量合并,根据单词选择变量中单位类型数量,生成对应单位的轴。
|
|||
|
4、修改补充冀南钢铁喷煤制粉技术方案。
|
|||
|
*二
|
|||
|
1、增加顶部趋势图列显示,对应变量和曲线颜色,点击可显示和隐藏曲线。
|
|||
|
2、增加趋势鼠标滚轮放大功能,在趋势上滚动滚轮对应缩短和增加时间跨度。
|
|||
|
3、增加拖拽功能,在缩小时间跨度后,左键拖拽左右平移时间轴。
|
|||
|
4、喷煤趋势后台控制器和数据服务重新构建,按照多系统方式,可查配置变量模板和多系统部署时不同数据。
|
|||
|
5、协助水分仪上位机微波趋势显示修改,加大Y轴水分值量程,增加X轴时间跨度。
|
|||
|
*三
|
|||
|
1、根据曲工的喷煤趋势模板表,自动生成历史趋势界面变量选择项,拆分速率相关变量和重要参数变量。
|
|||
|
2、调用曲工查询过程,构建选择变量列表依次查询数据,绑定至对应曲线和对应坐标轴。
|
|||
|
3、构建趋势chart的容器、X轴、Y轴、变量曲线实例、图例、颜色数组、鼠标提示框,组合生成趋势。
|
|||
|
*四
|
|||
|
1、套用实时趋势的界面、前端JS、后端控制器、服务等实现代码,复用至喷煤实时趋势并制作该界面。
|
|||
|
2、接入采集服务的实时数据库,设置实时趋势初始化时记录三秒钟实时数据来进行实时趋势初始化。
|
|||
|
*五
|
|||
|
1、生成喷煤趋势变量随机数通过采集服务Api写入300cpu中,用来模拟实时趋势。
|
|||
|
2、添加趋势刷新方法,按周期刷新趋势数据。
|
|||
|
3、构建实时趋势,设置曲线数据从采集服务中的实时数据中每秒增加数据,最大数据量50个。
|
|||
|
*/
|
|||
|
|
|||
|
|
|||
|
/*
|
|||
|
*一
|
|||
|
1、调整报警记录统计界面样式,将报警明细汇总表格和图表显示集中在同一界面。
|
|||
|
2、修改报警图表数据查询函数为新的存储过程,调用曲工新的仿真数据。
|
|||
|
*二
|
|||
|
1、柱状图JS绘制方法加载新的返回数据格式,绘制为按照报警次数显示。
|
|||
|
2、L2管理平台ppt制作。
|
|||
|
*三
|
|||
|
L2管理平台ppt制作。
|
|||
|
*四
|
|||
|
1、部署modbus驱动测试程序,测试读取效率。
|
|||
|
2、实时趋势开启后台异步加载,初始化后异步加载12小时的历史数据。
|
|||
|
*五
|
|||
|
实时趋势添加缩放区域拖拽条,在鼠标滚动的基础上可自由拖动显示的时间跨度。
|
|||
|
*/
|
|||
|
|
|||
|
//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 = {
|
|||
|
symbol: "none",
|
|||
|
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 = [
|
|||
|
// {
|
|||
|
// textStyle: {
|
|||
|
// color: '#8392A5'
|
|||
|
// },
|
|||
|
// handleIcon:
|
|||
|
// 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
|||
|
// dataBackground: {
|
|||
|
// areaStyle: {
|
|||
|
// color: '#8392A5'
|
|||
|
// },
|
|||
|
// lineStyle: {
|
|||
|
// opacity: 0.8,
|
|||
|
// color: '#8392A5'
|
|||
|
// }
|
|||
|
// },
|
|||
|
// brushSelect: true
|
|||
|
// },
|
|||
|
{
|
|||
|
type: 'inside',
|
|||
|
start: 80,
|
|||
|
},
|
|||
|
{
|
|||
|
type:'slider'
|
|||
|
}
|
|||
|
]
|
|||
|
|
|||
|
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'), 'custom2');
|
|||
|
myChart.hideLoading();
|
|||
|
myChart.setOption(JSON.parse(JSON.stringify(option)));
|
|||
|
|
|||
|
//myChart = echarts.init(document.getElementById('result'));
|
|||
|
|
|||
|
t = setTimeout(time, 1 * 1000); //开始运行
|
|||
|
}
|
|||
|
}
|
|||
|
function time() {
|
|||
|
clearTimeout(t); //清除定时器
|
|||
|
UpdataChart()
|
|||
|
t = setTimeout(time, 1 * 1000); //设定定时器,循环运行
|
|||
|
|
|||
|
}
|
|||
|
async function UpdataChart() {
|
|||
|
var myChart = echarts.init(document.getElementById('result'));
|
|||
|
var option = myChart.getOption();
|
|||
|
var RtData = new Array();
|
|||
|
|
|||
|
myajax = await $.ajax({
|
|||
|
url: "/PenMeiChartsManage/PenMeiRtTechCharts/GetChartsTagValue",
|
|||
|
type: "Post",
|
|||
|
dataType: "json",
|
|||
|
traditional: true,//这里设置为true
|
|||
|
data: { charts_TagNames: SelectTagNamelist },
|
|||
|
success: function (redata) { }
|
|||
|
});
|
|||
|
$.when(myajax).done(function (redata) {
|
|||
|
RtData = redata;
|
|||
|
});
|
|||
|
|
|||
|
let axisData = RtData[0][0].name;
|
|||
|
for (var stl = 0; stl < StaticSelectTagList.length; stl++) {
|
|||
|
// if (option.series[stl].data.length > 49) {
|
|||
|
// option.series[stl].data.shift();
|
|||
|
// }
|
|||
|
option.series[stl].data.push(RtData[stl][0].value);
|
|||
|
}
|
|||
|
|
|||
|
// if (option.xAxis[0].data.length > 49) {
|
|||
|
// option.xAxis[0].data.shift();
|
|||
|
|
|||
|
// }
|
|||
|
option.xAxis[0].data.push(axisData);
|
|||
|
|
|||
|
myChart.setOption(option);
|
|||
|
}
|
|||
|
|
|||
|
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})`;
|
|||
|
}
|
|||
|
|
|||
|
});
|
|||
|
|
|||
|
|
|||
|
</script>
|
|||
|
<html style="height:100%">
|
|||
|
<body style="height:100%" style="height:100%;margin-top: 0px;margin-left: 0px;margin-right: 0px;margin-bottom: 0px;">
|
|||
|
|
|||
|
<script type="text/javascript" src="~/lib/echarts-5.3.0/dist/echarts.js"></script>
|
|||
|
<script type="text/javascript" src="~/lib/theme/custom2.js"></script>
|
|||
|
<div class="layui-fluid layui-bg-custom-7" 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:0px;">
|
|||
|
<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%">
|
|||
|
|
|||
|
<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-md1 widget-col-list column0" data-index="0" 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: 0px;">
|
|||
|
<button id="btn_search" type="button" class="layui-btn custom-zc layui-bg-custom-2" ; onclick="showchart()">
|
|||
|
<i class="layui-icon ">
|
|||
|
</i>
|
|||
|
确定
|
|||
|
</button>
|
|||
|
</div>
|
|||
|
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<div class="layui-col-md1 widget-col-list column1" data-index="1" data-parentindex="0">
|
|||
|
<div id="bottom_6" class="layui-form-item active" data-id="bottom_6" data-tag="bottom"
|
|||
|
data-index="0">
|
|||
|
<div class="layui-input-block" style="margin-left: 10px;">
|
|||
|
<button id="btn_clear" type="button" class="layui-btn custom-zc layui-bg-custom-2" ; onclick="clearchart()">
|
|||
|
<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>
|