|
|
@{ ViewBag.Title = "Form"; Layout = "~/Views/Shared/_Form.cshtml";}<script src="~/Content/js/echarts/echarts5.3.3.min.js"></script><script src="~/Content/js/echarts/echarts-gl.min.js"></script><style> .ui-jqgrid tr.jqgrow td { overflow: hidden; }
.ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td { overflow: hidden !important; }
.btn-primary { margin-right: 2px; }
html { height: 100%; }
.topRow { height: 54px; background-color: #031c7bc2; padding-bottom: 5px; }
body { height: 100%; FONT-SIZE: 15px; /*FONT-SIZE: 18px;*/ background-color: black; --CustTitlecolor: #0bd4d4; /*表标题颜色*/ /*#4D5457 #000000bf*/ --Custbackgroundcolor: #031c7bc2; /*#031c7b;*/ /*表整体颜色*/ --CustSelect: #103764; /*选中颜色*/ /*悬浮颜色*/ --Custcolor: white; /*字体颜色*/ --CustBorderColor: #031c7bc2; /*边框颜色*/ --CustRow1: #0e59a5d4; /*偶行颜色*/ --CustRow2: #031c7bc2; /*奇行颜色*/ }
/*大标题*/ .TopName { vertical-align: middle; text-align: center; font-size: 24px; font-weight: 700; /*color:var(--CustTitlecolor);*/ color: white; }
/*logo标题*/ .TopNamelogo { vertical-align: middle; text-align: left; font-size: 24px; font-weight: 700; color: white; }
.logoclass { height: 24px; }
#logolabel { /*width:80%;*/ }
.time { vertical-align: middle; text-align: center; font-size: 20px; color: white; }
.formdiv { height: 100% !important; margin-bottom: 2px; margin-top: 5px; margin-left: 10px; margin-right: 10px; }
.thclass { width: 100px; font-weight: 500; text-align: right; }
table { height: 100%; }
html, body { height: 100% !important; }
form { height: 98% !important; background-color: black; }
.bootstrap-select .dropdown-toggle .filter-option-inner-inner { height: 24px !important; }
/*表列表头颜色*/ .table > thead:first-child > tr:first-child > th { background-color: var(--Custbackgroundcolor); color: var(--CustTitlecolor); } /*表整体颜色*/ .ui-jqgrid { background-color: var(--Custbackgroundcolor); color: var(--Custcolor); /*border: 1px solid var(--CustBorderColor);*/ border: none; }
.ui-jqgrid .table-bordered td { /*border: 0.5px solid var(--CustBorderColor);*/ border: none; border-left: none; border-right: none; }
</style><link href="~/Content/css/CommonReport/CommonReport.css" rel="stylesheet" /><script src="~/Content/js/CommonReport/CommonReport.js"></script><script src="~/Content/js/datepicker/WdatePicker.js"></script><link href="~/Content/css/bootstrap/bootstrap-select.css" rel="stylesheet" /><script src="~/Content/js/bootstrap/bootstrap-select.min.js"></script>
<form id="form1"> <div class="formdiv">
<table class="form"> <tr class="topRow"> <td style="text-align:right;width:18%"> <label class="radio-inline" id="logolabel"> <img src="~/Content/img/ninghong.jpg" border="0" class="logoclass" /> </label> </td> <td style="width:22%"> <div class="TopNamelogo" id="TopNamelogo">宁虹科技</div> </td> <td style="width:20%"> <div class="TopName" id="TopName">线体周产能看板</div> </td> <td style="width:16%"> <div class="time" id="timeStr"></div> </td> </tr>
</table>
</div>
<div class="table_height" style="width: 100%;" id="chartmain_zhe"></div> <script type="text/javascript"> window.onload = function (){ //指定图表的配置项和数据
var WeekMES = GetWeekMES(); var windowheight = window.innerHeight-50;
$(".table_height").height(windowheight);
option = {
tooltip: { trigger: 'axis' }, legend: { textStyle: { color: "#000000", fontSize: 12 }, left: '5%', data: ['产量'] }, grid: { x: 40, y: 40, x2: 30, y2: 20 }, toolbox: { feature: { //saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, axisLabel: { /*inside: true,*/ interval: 0, textStyle: { color: "#000000", fontSize: 12 } }, axisTick: { show: false }, axisLine: { show: true, symbol: ['none', 'arrow'], symbolOffset: 12, lineStyle: { color: "#000000" } }, data: [ WeekMES[0].day, WeekMES[1].day, WeekMES[2].day, WeekMES[3].day, WeekMES[4].day, WeekMES[5].day, WeekMES[6].day ] }, yAxis: { type: 'value',
axisLine: { show: true, symbol: ['none', 'arrow'], symbolOffset: 12, lineStyle: { color: "#000000" } }, axisTick: { show: false }, axisLabel: { textStyle: { color: "#000000", fontSize: 12 } } }, series: [ { name: '产量', type: 'line', stack: '总量', data: [1,2,3,4,5] // itemStyle: { // normal: { // color: '#0efdff', //折线点的颜色 // lineStyle: { // color: '#0efdff', //折线的颜色 // width: 2 // } // } // } //}, //{ // name: '折线二', // type: 'line', // stack: '总量', // data: [100, 132, 131, 234, 290, 330, 110] } ] } //获取dom容器 var myChart = echarts.init( document.getElementById('chartmain_zhe') ) // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option)
};
function GetWeekMES() { var date = new Date(); var year = date.getYear(); var month = date.getMonth(); var week = date.getDay(); var month = month + 1; var day = date.getDate();
// week：周几，day：几号 var weekArr = [{ week: '', day: '' }, { week: '', day: '' }, { week: '', day: '' }, { week: '', day: '' }, { week: '', day: '' }, { week: '', day: '' }, { week: '', day: '' }]; // 本周内今天的前几天的数量 var leftNum = week - 1; // 本周内今天的后几天的数量 var rightNum = 7 - week; // 本周内今天的前几天 for (var i = 0; i < leftNum; i++) { weekArr[i].week = week - (week - i) + 1; if (i == 0) { weekArr[i].day =(1900+year)+'-'+month+'-'+(day - week); } else { weekArr[i].day = (1900+year)+ '-' + month+ '-' + (day - (week - i) + 1); }
} // 本周内今天的后几天 for (var i = 0; i < rightNum; i++) { var weeks = week + i + 1; if (weeks == 2) { weekArr[i + week].week = '二'; } else if (weeks == 3) { weekArr[i + week].week = '三'; } else if (weeks == 4) { weekArr[i + week].week = '四'; } else if (weeks == 5) { weekArr[i + week].week = '五'; } else if (weeks == 6) { weekArr[i + week].week = '六'; } else if (weeks == 7) { weekArr[i + week].week = '日'; } weekArr[i + week].day = (1900 + year) + '-' + month + '-' + (day + i + 1); } // 今天 if (week == 1) { weekArr[week - 1].week = '一'; } weekArr[week - 1].day = (1900 + year) + '-' + month + '-' + day;
return weekArr;
}
</script>
</form>
|
