OMAY_WMS/KanBan/NFine.Web/Areas/SRM/Views/WatchPanel/PanelWIP.cshtml

@{
    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: 9px;
        /*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;
        }

    /*悬浮颜色*/
    .table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tbody > tr > td.active,
    .table > tbody > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th,
    .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td,
    .table > thead > tr.active > th, .table > thead > tr > td.active, .table > thead > tr > th.active {
        background-color: var(--CustSelect);
        color: var(--Custcolor);
    }

    /*选中颜色*/
    .table > tbody > tr.success > td, .table > tbody > tr.success > th, .table > tbody > tr > td.success,
    .table > tbody > tr > th.success, .table > tfoot > tr.success > td, .table > tfoot > tr.success > th,
    .table > tfoot > tr > td.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td,
    .table > thead > tr.success > th, .table > thead > tr > td.success, .table > thead > tr > th.success {
        background-color: var(--CustSelect);
        color: var(--Custcolor);
    }
    /*偶行颜色*/
    div > div > div > table > tbody > tr:nth-child(2n) {
        background-color: var(--CustRow1);
        color: white;
        border: none;
    }
    /*奇行颜色*/
    div > div > div > table > tbody > tr:nth-child(2n+1) {
        background-color: var(--CustRow2);
        color: white;
        border: none;
    }

    form > div > table > tbody > tr > td {
        padding-bottom: 5px;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--CustTitlecolor);
    }

    #tdXX1 > div > div > canvas {
        height: 100% !important;
    }

    #tdXX1 > div > div {
        height: 100% !important;
    }

    /*.ui-jqgrid .ui-jqgrid-htable thead th {
        padding:4px 2px 4px 2px;
    }*/
    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td,
    .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
        padding: 4px 2px 4px 2px;
    }
</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>

<script>
    var HeightToDel = 100;
    var timer;//刷新数据时间

    var TBBackColor = "#031c7bc2";
    var TBTitleFontColor = "#0bd4d4";
    var GunDongRate = 2 * 1000;//单位毫秒 //表格滚动间隔时间
    var DataF = 300;//单位秒 //刷新数据时间
    var IsFirstShow = false;
    var GunDongRow = 1;
    $(function () {

        //显示时间
        getTime();

        gridList();
        $(window).resize(function () {

         //   gridList1();
            GunDongRow = 0;
        });
       // scrollBody();
        //刷新数据
        timer = setInterval(function () {
            gridList();
        }, DataF * 1000);


    });




    function gridList() {
        SetPanel1();
        SetPanel5();
        SetPanel2();
     
        SetPanel4();
        SetPanel3();
      //  gridList1();
    }


    function getTime() {
        var days = new Array("日", "一", "二", "三", "四", "五", "六");
        var currentDT = new Date();
        var y, m, date, day, hs, ms, ss, theDateStr;
        y = currentDT.getFullYear(); //四位整数表示的年份
        m = currentDT.getMonth() < 10 ? '0' + (currentDT.getMonth() + 1) : (currentDT.getMonth() + 1); //月
        date = currentDT.getDate() < 10 ? '0' + currentDT.getDate() : currentDT.getDate(); //日
        day = currentDT.getDay(); //星期
        hs = currentDT.getHours() < 10 ? '0' + currentDT.getHours() : currentDT.getHours(); //时
        ms = currentDT.getMinutes() < 10 ? '0' + currentDT.getMinutes() : currentDT.getMinutes(); //分
        ss = currentDT.getSeconds() < 10 ? '0' + currentDT.getSeconds() : currentDT.getSeconds(); //秒
        theDateStr = y + "-" + m + "-" + date + " " + hs + ":" + ms + ":" + ss;
        //填充到组件中
        $("#timeStr").text(theDateStr);
        // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
        window.setTimeout(getTime, 1000);
    }

    //生产进度看板-层析柱(Qty)
    function SetPanel1()
    {
        var myChart = echarts.init(document.getElementById('panel1'));

        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

        var colors = ['#91cc75','#5470c6', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];

        //var Y_Show = ['电装', '机械装配', '总装', '仪表配置', '调试测试', 'FAT', 'FQC'];
        var Y_Show = [  '机械装配', '总装',   '调试测试', 'FAT', 'FQC'];
        var X_Show = ['完成', '在制','总数'];
        var DataList = new Array();//[[38, 0, 2, 0, 4, 37, 138], [12, 4, 18, 11, 98, 10, 0] ];
        var DataPercent = new Array();//[50, 4, 20,11,102, 47,138];



        $.ajax({
            url: "/SRM/WatchPanel/GetWIPQty1?" + Math.random(),
            data: { XX: "XX" },
            dataType: "json",
            async: false,
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result && result != null && result.length > 0) {
                    var Qry1 = new Array();
                    var Qry2 = new Array();
                    Y_Show = new Array();
                    DataPercent = new Array();
                    for (var i = 0; i < result.length; i++) {
                       Y_Show.push(result[i].PROJECTSTR); 
                        Qry2.push(result[i].COMQTY);//完成 
                        Qry1.push(result[i].WIPQTY);//在制 
                        DataPercent.push(result[i].ZQTY);//总数量 

                    }
                    DataList.push(Qry2);
                    DataList.push(Qry1);
                  

                    var seriesData = new Array();
                    for (var i = 0; i < 2; i++) {
                        var obj = {

                            name: X_Show[i],
                            type: 'bar',
                            stack: 'total',
                            color: colors[i],
                            barMaxWidth: 32,
                            label: {
                                normal: {
                                    show: true,
                                    distance: -1,
                                    position: 'insideRight',
                                    formatter: function (param) {
                                        if (param.seriesName == "完成")
                                        { return '{a|' + param.value + '}{b|}'; }
                                        else {
                                            return '{c|' + param.value + '}{b|   ' + DataPercent[param.dataIndex] + '}';
                                        }
                                    },
                                    rich: {
                                        a: {
                                            color: 'black',
                                        },
                                        b: {
                                            color: colors[2],
                                            width: 2,
                                            fontWeight: 700,
                                        },
                                        c: {
                                           color: 'white',

                                        },
                                    }
                                }
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: DataList[i]
                        };
                        seriesData.push(obj);
                    }

                    var objp = {
                        name: X_Show[2],
                        type: 'line',
                        show: false,
                        color: colors[2],
                        // stack: 'total',

                        label: {
                            normal: {
                                show: false,
                            }
                        },

                        emphasis: {
                            focus: 'series'
                        },
                        data: DataList[2]
                    };
                    seriesData.push(objp);

                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        title: {
                            show: true,
                            text: '生产进度看板-层析柱(Qty)',
                            textStyle: {
                                fontSize: 18,
                                color: TBTitleFontColor,
                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                            }
                        },

                        backgroundColor: TBBackColor,

                        legend: {
                            data: X_Show, icon: "rect",
                            top: 30,
                            textStyle: { color: colors, }, fontWeight: 700,
                        },
                        grid: {
                            show: false,

                            left: 70,
                            right: 30,
                            top: 60,
                            bottom: 30,

                        },
                        xAxis: {
                            axisLine: {
                                
                                lineStyle: {
                                    color: "white"
                                }
                            },
                            splitLine: { show: false, },
                            type: 'value'
                        },
                        yAxis: {
                            axisLine: {
                                
                                lineStyle: {
                                    color: "white"
                                }
                            },
                            splitLine: { show: false, },
                            type: 'category',
                            data: Y_Show
                        },
                        series: seriesData
                    });
                }
                else {
                    myChart.hideLoading();//隐藏加载动画
                    alert("生产进度看板-层析柱(Qty)没有抓取到相关数据");
                }
            },
            error: function (errorMsg) {
                alert("生产进度看板-层析柱(Qty)请求数据失败!", "error");
                myChart.hideLoading();
            }
        });
    }

    //生产进度-设备(Qty)
    function SetPanel5()
    {
        var myChart = echarts.init(document.getElementById('panel5'));

        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

        var colors = ['#91cc75', '#5470c6', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];

        var Y_Show = ['电装', '机械装配', '总装', '仪表配置', '调试测试', 'FAT', 'FQC'];
        var X_Show = ['完成', '在制', '总数'];
        var DataList = new Array();//[[38, 0, 2, 0, 4, 37, 138], [12, 4, 18, 11, 98, 10, 0] ];
        var DataPercent = new Array();//[50, 4, 20,11,102, 47,138];



        $.ajax({
            url: "/SRM/WatchPanel/GetWIPQty5?" + Math.random(),
            data: { XX: "XX" },
            dataType: "json",
            async: false,
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result && result != null && result.length > 0) {
                    var Qry1 = new Array();
                    var Qry2 = new Array();
                    Y_Show = new Array();
                    DataPercent = new Array();
                    for (var i = 0; i < result.length; i++) {
                        Y_Show.push(result[i].PROJECTSTR);
                        Qry2.push(result[i].COMQTY);//完成 
                        Qry1.push(result[i].WIPQTY);//在制 
                        DataPercent.push(result[i].ZQTY);//总数量 
                    }
                    DataList.push(Qry2);
                    DataList.push(Qry1);

                    var seriesData = new Array();
                    for (var i = 0; i < 2; i++) {
                        var obj = {

                            name: X_Show[i],
                            type: 'bar',
                            stack: 'total',
                            color: colors[i],
                            barMaxWidth: 32,
                            label: {
                                normal: {
                                    show: true,
                                    distance: -1,
                                    position: 'insideRight',
                                    formatter: function (param) {
                                        if (param.seriesName == "完成")
                                        { return '{a|' + param.value + '}{b|}'; }
                                        else {
                                            return '{c|' + param.value + '}{b|   ' + DataPercent[param.dataIndex] + '}';
                                        }
                                    },
                                    rich: {
                                        a: {
                                            color: 'black',
                                        },
                                        b: {
                                            color: colors[2],
                                            width: 2,
                                            fontWeight: 700,
                                        },
                                        c: {
                                            color: 'white',

                                        },
                                    }
                                }
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: DataList[i]
                        };
                        seriesData.push(obj);
                    }

                    var objp = {
                        name: X_Show[2],
                        type: 'line',
                        show: false,
                        color: colors[2],
                        // stack: 'total',

                        label: {
                            normal: {
                                show: false,
                            }
                        },

                        emphasis: {
                            focus: 'series'
                        },
                        data: DataList[2]
                    };
                    seriesData.push(objp);

                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        title: {
                            show: true,
                            text: '生产进度-设备(Qty)',
                            textStyle: {
                                fontSize: 18,
                                color: TBTitleFontColor,
                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                            }
                        },

                        backgroundColor: TBBackColor,

                        legend: {
                            data: X_Show, icon: "rect",
                            top: 30,
                            textStyle: { color: colors, }, fontWeight: 700,
                        },
                        grid: {
                            show: false,

                            left: 70,
                            right: 30,
                            top: 60,
                            bottom: 30,

                        },
                        xAxis: {
                            axisLine: {
                                 
                                lineStyle: {
                                    color: "white"
                                }
                            }, 
                            splitLine:{ show:false,},
                            type: 'value'
                        },
                        yAxis: {
                            axisLine: {
                                
                                lineStyle: {
                                    color: "white"
                                }
                            },
                            splitLine: { show: false, },
                            type: 'category',
                            data: Y_Show
                        },
                        series: seriesData
                    });
                }
                else {
                    myChart.hideLoading();//隐藏加载动画
                    alert("生产进度-设备(Qty)没有抓取到相关数据");
                }
            },
            error: function (errorMsg) {
                alert("生产进度-设备(Qty)请求数据失败!", "error");
                myChart.hideLoading();
            }
        });
    }

    //生产进度 柱状图 （在制数 完成数 ）
    function SetPanel2()
    {
        var myChart = echarts.init(document.getElementById('panel2'));

        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

       // var colors = ['#2DB1EF', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];
        var colors = ['#5470c6', '#91cc75', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
        var X_Show = ['待开工', '已开工'];
        var DataList = new Array(); 
         
        //var DataList =  [200,372];
        //var DataPercent =  ['35%', '65%'];



        $.ajax({
            url: "/SRM/WatchPanel/GetWIPQty2?" + Math.random(),
            data: { XX: "XX" },
            dataType: "json",
            async: false,
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result && result != null && result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                           DataList.push(result[i].DKGQTY);
                        DataList.push(result[i].YKGQTY);
                         
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        color:colors,
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b},{c},{d}%'

                        },
                        legend: {
                            show:true,
                           // top: '5%',
                            left: '0',
                            orient: "vertical",
                            textStyle: { color: colors,fontWeight:700, },
                        },
                        backgroundColor: TBBackColor,
                        series: [
                          {

                              type: 'pie',
                             // radius: DataPercent,
                              avoidLabelOverlap: false,
                              radius: [60, 130],
                              label: { 
                                  show: true,
                                  position: 'inside',
                                  formatter: '{c}', 
                              },
                              labelLine: {
                                  show: false
                              },
                              data: [
                                { value: DataList[0], name: X_Show[0] },
                                   { value: DataList[1], name: X_Show[1] },
                              ]
                          }
                        ]
                    });

                }
                else {
                    myChart.hideLoading();//隐藏加载动画
                    alert("待开工没有抓取到相关数据");
                }
            },
            error: function (errorMsg) {
                alert("待开工请求数据失败!", "error");
                myChart.hideLoading();
            }
        });
    }

    //设备类型在制数
    function SetPanel3old()
    {
        var myChart = echarts.init(document.getElementById('panel3'));

        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

        var colors = ['#4F81BD', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];

        var Y_Show = ['ECA柱', '过滤系统', '双柱', '仪表配置', '设备1',
            '设备3', '其他', 'OAS柱', '双柱4', '仪表',
          '设备4', '其他3', 'OAS柱5', '单柱', '配置',
        '无设备'];
        var DataPercent = [2, 2,11,1,3,1,11,1,1,33,15,4,15,26,15,1];
        var seriesData = new Array();

        //$.ajax({
        //    url: "/SRM/WatchPanel/GetWIPQty3?" + Math.random(),
        //    data: { XX: "XX" },
        //    dataType: "json",
        //    async: false,
        //    success: function (result) {
        //        //请求成功时执行该函数内容，result即为服务器返回的json对象
        //        if (result && result != null && result.length > 0) {
        //            for (var i = 0; i < result.length; i++) {
        //                 Y_Show.push(result[i].EQPTYPENAME);
        //                DataPercent.push(result[i].QTY);
        //            }

        for (var i = 0; i < Y_Show.length; i++) {
            var obj = {
                  name: Y_Show[i],
                  value: DataPercent[i],
                  label: {
                      show: true,
                      position: "inside",
                      formatter: function (point, params, dom, rect, size) {
                          return point.name + ':' + point.value;
                      }
                  },

            };
            seriesData.push(obj);
        }

        myChart.hideLoading();    //隐藏加载动画
        myChart.setOption({        //加载数据图表
            title: {
                show: true,
                text: '设备类型在制数',
                textStyle: {
                    fontSize: 18,
                    color: TBTitleFontColor,
                },
            },
            tooltip: {
                formatter: function (point, params, dom, rect, size) {
                    return point.name + ':' + point.value;
                }
            },
            backgroundColor: TBBackColor,
            series: [{
                type: 'treemap',
                data: seriesData,
                }],
        });

       
        //        }
        //        else {
        //            myChart.hideLoading();//隐藏加载动画
        //            alert("设备类型在制数没有抓取到相关数据");
        //        }
        //    },
        //    error: function (errorMsg) {
        //        alert("设备类型在制数请求数据失败!", "error");
        //        myChart.hideLoading();
        //    }
        //});
    }

    //设备类型在制数
    function SetPanel3() {
        var myChart = echarts.init(document.getElementById('panel3'));

        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

      //  var colors = ['#4F81BD', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];
        var colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
            '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
            '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
           '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
        //new Array();//
        var Y_Show = new Array();//  ['ECA柱', '过滤系统', '双柱', '仪表配置', '设备1',     '设备3', '其他', 'OAS柱', '双柱4', '仪表',   '设备4', '其他3', 'OAS柱5', '单柱', '配置',  '无设备'];
        var DataPercent = new Array();// [2, 2, 11, 1, 3, 1, 11, 1, 1, 33, 15, 4, 15, 26, 15, 1];
        var seriesData = new Array();

        $.ajax({
            url: "/SRM/WatchPanel/GetWIPQty3?" + Math.random(),
            data: { XX: "XX" },
            dataType: "json",
            async: false,
            success: function (result) { 
                if (result && result != null && result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        Y_Show.push(result[i].EQPTYPENAME);
                        DataPercent.push(result[i].QTY);
                    }

                    for (var i = 0; i < Y_Show.length; i++) {
                        var obj = {
                            name: Y_Show[i],
                            value: DataPercent[i],
                            label: {
                                show: true, 
                                formatter: function (point, params, dom, rect, size) {
                                    return point.name + ':' + point.value;
                                },
                                color: colors[i],
                                fontSize:14,
                            },
                        };
                        seriesData.push(obj);
                    }

                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        title: {
                            show: true,
                            text: '设备类型在制数',
                            textStyle: {
                                fontSize: 18,
                                color: TBTitleFontColor,
                            },
                        },
                        tooltip: {
                            formatter: function (point, params, dom, rect, size) {
                                return point.name + ':' + point.value;
                            }
                        },
                        backgroundColor: TBBackColor,
                        
                        color: colors,
                        series: [
                          {
                              top: 20,
                              //name: 'Nightingale Chart',
                              type: 'pie',
                              radius: [60, 130],
                           
                              //center: ['50%', '50%'],
                              //roseType: 'area',
                              itemStyle: {
                                  borderRadius: 5
                              },
                              data: seriesData
                          }
                        ]
                    });


                }
                else {
                    myChart.hideLoading();//隐藏加载动画
                    alert("设备类型在制数没有抓取到相关数据");
                }
            },
            error: function (errorMsg) {
                alert("设备类型在制数请求数据失败!", "error");
                myChart.hideLoading();
            }
        });
    }

    function SetPanel4()//待开工项目（Qty）
    {
        var myChart = echarts.init(document.getElementById('panel4'));

        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

        var colors = ['#4F81BD', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];

        var QtyList = new Array();//  [22, 36, 42, 52, 44, 3, 2];

        var MonthList = new Array();// ['6月', '7月', '8月', '9月', '10月', '11月', '12月', ];


        $.ajax({
            url: "/SRM/WatchPanel/GetWIPQty4?" + Math.random(),
            data: { XX: "XX" },
            dataType: "json",
            async: false,
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result && result != null && result.length > 0) {
                    var Qry1 = new Array();
                    for (var i = 0; i < result.length; i++) {
                        QtyList.push(result[i].QTY);
                        MonthList.push(result[i].MONTHSTR);
                    }

                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        title: {
                            show: true,
                            text: '待开工项目（Qty）',
                            textStyle: {
                                fontSize: 18,
                                color: TBTitleFontColor,
                            },
                        },
                        tooltip: {
                            formatter: function (point, params, dom, rect, size) {
                                return point.value[0] + ':' + point.value[1];
                            }
                        },
                        backgroundColor: TBBackColor,
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                var showHtm = "";
                                showHtm = params[0].name + ":" + params[0].data;
                                return showHtm;
                            }
                        },

                        xAxis: {
                            offset: 12,
                            data: MonthList, type: 'category',
                            axisPointer: { type: 'shadow' },
                            axisLine: {
                                lineStyle: {
                                    color: "white"
                                },
                            }
                        },
                        yAxis: [{

                            type: 'value', position: 'left',
                            axisLabel: {
                                formatter: '{value}'
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: "white"
                                },
                            },
                            splitLine: {
                                show: false
                            }
                        }
                        ],
                        series: [{
                            name: '数量',
                            type: 'pictorialBar',
                            symbolSize: [30, 14],
                            symbolOffset: [0, -7],
                            symbolPosition: 'end',
                            z: 24,
                            //color: "#2DB1EF",
                            color: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.5,
                                colorStops: [{
                                    offset: 0, color: '#376db0'//'#4F81BD' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#2DB1EF' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            },
                            data: QtyList,
                            barMaxWidth: 30,
                            yAxisIndex: 0,
                            label: {
                                normal: {
                                    show: false,

                                }

                            }
                        },
                        {
                            name: '数量',
                            type: 'pictorialBar',
                            symbolSize: [30, 14],
                            symbolOffset: [0, 7],
                            z: 12,

                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: '#376db0' // 0% 处的颜色
                                },
                                {
                                    offset: 0, color: '#2DB1EF' // 50% 处的颜色
                                },
                                {
                                    offset: 1, color: '#376db0' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            },
                            data: QtyList,
                            barMaxWidth: 30,
                            yAxisIndex: 0,
                            label: {
                                normal: {
                                    show: false,

                                }

                            }
                        },


                        {
                            name: '数量',
                            type: 'bar',
                            data: QtyList,
                            barMaxWidth: 30,
                            yAxisIndex: 0,

                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: '#376db0' // 0% 处的颜色
                                },
                                {
                                    offset: 0, color: '#2DB1EF' // 50% 处的颜色
                                },
                                {
                                    offset: 1, color: '#376db0' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            },
                            z: 15,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    color: 'white',
                                    offset: [0, -20],
                                }

                            }
                        }

                        ]
                    });

                }
                else {
                    myChart.hideLoading();//隐藏加载动画
                    alert("待开工项目（Qty）没有抓取到相关数据");
                }
            },
            error: function (errorMsg) {
                alert("待开工项目（Qty）请求数据失败!", "error");
                myChart.hideLoading();
            }

        });
    }

    //自动滚动
    //function scrollBody() { 
    //    timer = setInterval(function () {
    //        var ob3 = $('#gridList1').getGridParam("records");
    //        var div = $('#gridList1').closest('.ui-jqgrid-bdiv')[0];
    //        var offsetHeight = div.offsetHeight;
    //        var scrollHeight = div.scrollHeight - offsetHeight;
    //        if (GunDongRow == 0) {
    //            var hh = offsetHeight;
    //            //GunDongRow = Math.floor(hh / 30.3);//一页一页的滚动
    //            GunDongRow = 1;//一行一行的滚动
    //        } 
    //        // div.scrollTop = div.scrollTop + 1;
    //        if (div.scrollTop >= scrollHeight) {//循环滚动
    //            scrollHeight = div.scrollHeight - offsetHeight;//如果在滚动过程中添加过数据，需要重新结算scrollHeight
    //            if (div.scrollTop >= scrollHeight) {
    //                div.scrollTop = 0; //循环滚动，重置滚动头即可
    //                IsFirstShow = true;
    //            }
    //            if (div.scrollTop >= ob3 * 30.4) {
    //                div.scrollTop = 0; //循环滚动，重置滚动头即可
    //                IsFirstShow = true;
    //            }
    //        }
    //        if (!IsFirstShow) {
    //            div.scrollTop = div.scrollTop + (GunDongRow * 30.3);
    //        }
    //        else { IsFirstShow = false; } 
    //    }, GunDongRate); 
    //}


    function GetAllCols1() {
        var _cols = new Array();
        //项目号	客户名称	设备类型	产品名称	产品型号	序列号	计划开工日期	计划完工日期	数量	设备编号	生产工单号
        //项目进度条	项目阶段	状态	生产确认表	电装开始	电装完成	 机械装配开始 机械装配完成 总装开始	总装完成 仪表配置开始
        //仪表配置完成 调试测试开始 调试测试完成 FAT开始	FAT完成	FQC	OQC	产品类型
        _cols.push({ label: 'ID', name: 'ID', width: 80, align: 'left', hidden: true, });
        _cols.push({ label: '项目号', name: '项目号', width: 100, align: 'left', });
        _cols.push({ label: '设备类型', name: '设备类型', width: 100, align: 'left', });
        _cols.push({ label: '产品型号', name: '产品型号', width: 190, align: 'left', });
        _cols.push({ label: '设备编号', name: '设备编号', width: 150, align: 'left', });
        _cols.push({ label: '计划开工日期', name: '计划开工日期', width: 120, align: 'left', }); 
        _cols.push({ label: '生产工单号', name: '生产工单号', width: 120, align: 'left', });
        _cols.push({ label: '项目阶段', name: '项目阶段', width: 150, align: 'left', }); 
        _cols.push({
            label: '状态', name: '状态', width: 110, align: 'left',
            cellattr: function addCellAttr(rowId, val, rawObject, cm, rdata) {
                if (val=="延期") {
                    return "style='color:red'";
                }
            }
        });
        _cols.push({ label: '计划完工日期', name: '计划完工日期', width: 120, align: 'left', });
        _cols.push({
            label: '项目进度条', name: '项目进度条', width: 200, align: 'left',
            formatter: function (cellvalue, options, rowObject) {
                var str_retrun = '<div id="JDText_' + rowObject.ID + '" style="width: 99%;height:98%;"></div>';
                return cellvalue = str_retrun;

            }
        });

        _cols.push({ label: '项目进度条值', name: '项目进度条值', width: 50, align: 'left', hidden: true, });
        _cols.push({ label: '', name: '', width: 10, align: 'left', sortable: false });
        // _cols.push({ label: '客户名称', name: '客户名称', width: 90, align: 'left', });
        // _cols.push({ label: '产品名称', name: '产品名称', width: 125, align: 'left', });
        // _cols.push({ label: '序列号', name: '序列号', width: 60, align: 'left', });
        //_cols.push({ label: '数量', name: '数量', width: 40, align: 'left', });//hidden: true,
        //_cols.push({ label: '待装配', name: '生产确认表', width: 60, align: 'left', });
        //_cols.push({ label: '电装开始', name: '电装开始', width: 60, align: 'left', });
        //_cols.push({ label: '电装完成', name: '电装完成', width: 60, align: 'left', });
        //_cols.push({ label: '机械装配开始', name: '机械装配开始', width: 60, align: 'left', });
        //_cols.push({ label: '机械装配完成', name: '机械装配完成', width: 60, align: 'left', });
        //_cols.push({ label: '总装开始', name: '总装开始', width: 60, align: 'left', });

        //_cols.push({ label: '总装完成', name: '总装完成', width: 60, align: 'left', });
        //_cols.push({ label: '仪表配置开始', name: '仪表配置开始', width: 60, align: 'left', });

        //_cols.push({ label: '仪表配置完成', name: '仪表配置完成', width: 60, align: 'left', });
        //_cols.push({ label: '调试测试开始', name: '调试测试开始', width: 60, align: 'left', });
        //_cols.push({ label: '调试测试完成', name: '调试测试完成', width: 60, align: 'left', });
        //_cols.push({ label: 'FAT开始', name: 'FAT开始', width: 60, align: 'left', });
        //_cols.push({ label: 'FAT完成', name: 'FAT完成', width: 60, align: 'left', });
        //_cols.push({ label: 'FQC', name: 'FQC', width: 60, align: 'left', });
        //_cols.push({ label: 'OQC', name: 'OQC', width: 60, align: 'left', });
        //_cols.push({ label: '产品类型', name: '产品类型', width: 60, align: 'left', });

        return _cols;
    }

    //function gridList1() {
    //    document.getElementById("gridPanel1").innerHTML = ' <table id="gridList1"></table>    ';//重置grid
    //    var _cols = GetAllCols1();
    //    var $gridList = $("#gridList1");

    //    var queryJson = {
    //    }
    //    $gridList.dataGrid({
    //        url: "/SRM/WatchPanel/GetGridJson_WIPJinDu?" + Math.random(),
    //        postData: { queryJson: JSON.stringify(queryJson) },
    //        height: $("#form1").height()*0.5 - HeightToDel,
    //        colModel: _cols,
    //        // caption: '生产进度汇总表',
    //        // sortname: "   ",
    //        rowNum: 5000,
    //        viewrecords: true,
    //        rownumbers: true,
    //        multiselect: false,
    //        gridComplete: function () {
    //            $("#gridList1").jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center', 'vertical-align': 'middle' }, '');
    //            var strIds = $("#gridList1").jqGrid("getDataIDs");

    //            for (var i = 0; i < strIds.length; i++) {
    //                var ID = $("#gridList1").jqGrid("getCell", strIds[i], "ID");
    //                var QTY = $("#gridList1").jqGrid("getCell", strIds[i], "项目进度条值");
    //                JDPictureSet("JDText_" + ID, QTY);
    //            }

    //        }
    //    });
    //}

    function JDPictureSet(JDDivID, JDQty) {
        var myChart = echarts.init(document.getElementById(JDDivID));

        myChart.setOption({        //加载数据图表

            title: {
                show: false,
            },
            tooltip: {
                show: false,
            },
            legend: { show: false, },
            grid: { show: false, },
            xAxis: {
                type: 'value',
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                splitLine: { show: false },
                max: 100,
                min: 0,
            },
            yAxis: {
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                splitLine: { show: false },
                type: 'category',
            },
            series: [
              {
                  type: 'bar',
                  data: [JDQty],
                  label: {
                      show: true,
                      formatter: '{c}%',
                      color: "white"
                  },
                  itemStyle: {
                      color: "#91cc75"
                  }
              }
            ]
        });

    }


   

</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/Panellogo.png" border="0" class="logoclass" />
                    </label>
                </td>
                <td style="width:18%">
                    <div class="TopNamelogo" id="TopNamelogo">利穗科技</div>
                </td>
                <td style="width:28%">
                    <div class="TopName" id="TopName">生产进度看板</div>
                </td>
                <td style="width:8%">
                    <a href="PanelWIPDetail_SX" style="float:right;color:antiquewhite;font-size:18px"   >(明细)</a>
                </td>
                <td style="width:28%">
                    <div class="time" id="timeStr"></div>
                </td>
            </tr>

            <tr style="height:100%;">
                <td colspan="2" id="tdXX1">
                    @*<div id="panel1" style="width: 100%;height:100%;"></div>*@

                    <table class="form">
                        <tr style="width: 100%;height:50%;">
                            <td><div id="panel1" style="width: 100%;height:100%;"></div></td>
                        </tr>
                        <tr style="width: 100%;height:50%;">
                            <td><div id="panel5" style="width: 100%;height:100%;"></div></td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table class="form">
                        <tr style="width: 100%;height:50%;">
                            <td><div id="panel2" style="width: 100%;height:100%;"></div></td>
                        </tr>
                        <tr style="width: 100%;height:50%;">
                            <td><div id="panel3" style="width: 100%;height:100%;"></div></td>
                        </tr>
                    </table>

                </td>
                <td colspan="2">
                    <div id="panel4" style="width: 100%;height:100%;"></div>
                </td>
            </tr>
            @*<tr style="width:100%;height:50%;">
                <td colspan="5">
                    <div class="gridPanel" id="gridPanel1">
                        <table id="gridList1"></table>

                    </div>
                </td>

            </tr>*@

        </table>

    </div>

</form>