@{
    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>