You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
354 lines
11 KiB
354 lines
11 KiB
@{
|
|
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>
|