From 3b2bc48576c9954f977d4fcff35c7c2f1aa1adda Mon Sep 17 00:00:00 2001
From: YL <YL@LAPTOP-SE03PLUR>
Date: 星期一, 17 五月 2021 08:41:33 +0800
Subject: [PATCH] 生产计划看板页面

---
 HDPrctPlan.html |  926 ++++++++++++++++++++
 HDLackMats.html |  906 +++++++++++++++++++
 HDHouse.html    |    2 
 HDCall.html     |  720 ++++++---------
 HDMap.html      |  193 ++--
 5 files changed, 2,225 insertions(+), 522 deletions(-)

diff --git a/HDCall.html b/HDCall.html
index d7b4719..9871ed1 100644
--- a/HDCall.html
+++ b/HDCall.html
@@ -27,16 +27,16 @@
             margin-top: -75px;
             margin-right: 5px;
             color: #09d1ea;
-
+            
         }
-
+        
         .clock #Date {
             text-align: center;
             text-shadow: 0 0 0px #00c6ff;
-
-
+            
+            
         }
-
+        
         .clock ul {
             width: 450px;
             margin: 0 auto;
@@ -46,7 +46,7 @@
             margin-left: 15px;
             position: relative;
         }
-
+        
         .clock ul li {
             display: inline;
             font-size: 24px;
@@ -54,14 +54,14 @@
             font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
             text-shadow: 0 0 0px #00c6ff;
         }
-
+        
         body {
             padding-left: 50px;
             padding-right: 50px;
         }
-
+        
         .title {
-
+            
             font-size: 44px;
             font-family: PingFangSC;
             font-weight: 500;
@@ -70,14 +70,14 @@
             background: url(img/img_little_new.png) center no-repeat;
             margin-bottom: 30px;
         }
-
+        
         .col-sm-12 {
             position: relative;
             min-height: 1px;
             padding-right: 0px;
             padding-left: 0px;
         }
-
+        
         .col-sm-8,
         .col-sm-6,
         .col-sm-4,
@@ -86,7 +86,7 @@
             /* border: 1px solid #00c6ff; */
             height: 450px;
         }
-
+        
         #cTitle {
             width: 50px;
             height: 450px;
@@ -95,7 +95,7 @@
             color: #00c6ff;
             border: 1px solid #333
         }
-
+        
         .col-sm-12,
         .col-sm-2,
         .col-sm-3,
@@ -107,15 +107,15 @@
             padding-right: 0px;
             padding-left: 0px;
         }
-
+        
         #mychart1,
         #mychart2 {
             width: 100%;
             border: none;
             height: 450px;
         }
-
-
+        
+        
         table tr td {
             text-align: center;
             vertical-align: middle !important;
@@ -127,7 +127,7 @@
             font-family: Arial;
             border: none;
         }
-
+        
         .table>caption+thead>tr:first-child>td,
         .table>caption+thead>tr:first-child>th,
         .table>colgroup+thead>tr:first-child>td,
@@ -136,16 +136,16 @@
         .table>thead:first-child>tr:first-child>th {
             background-color: #000;
             color: #3bff72;
-
+            
         }
-
+        
         .fixed-table-container tbody td .th-inner,
         .fixed-table-container thead th .th-inner {
             font-size: 15px;
             color: #09d1ea;
             padding: 20px 0 15px 0;
         }
-
+        
         #tb_order,
         #tb_order1 tr td {
             text-align: center;
@@ -158,7 +158,7 @@
             /* border: 1px solid #464646; */
             border: none;
         }
-
+        
         #tb_order,
         #tb_order1 tr td {
             text-align: center;
@@ -171,53 +171,53 @@
             /* border: 1px solid #464646; */
             border: none;
         }
-
+        
         .bootstrap-table .table {
             border-radius: none
         }
-
+        
         th {
             background-color: transparent !important;
         }
-
+        
         td {
             background-color: transparent;
         }
-
+        
         tr {
             background-color: transparent
         }
-
+        
         #tb_order,
         #tb_order1 tr:nth-child(even) {
             background: #080c1c;
         }
-
+        
         .fixed-table-container tbody td .th-inner,
         .fixed-table-container thead th .th-inner {
             text-align: left;
         }
-
+        
         .progress {
             background-color: darkblue;
         }
-
+        
         #tb_order,
         #tb_order1 tr:nth-child(even) {
             background: #000000;
         }
-
-
-
-
-
-
+        
+        
+        
+        
+        
+        
         #tb_order1 tr th {
             /*border: 1px solid #464646;*/
             border: none;
             font-size: 22px;
         }
-
+        
         #tb_order1 tr td {
             text-align: center;
             height: 32px;
@@ -228,12 +228,24 @@
             /*border:1px solid #464646;*/
             border: none;
         }
-
+        
         #tb_order1 tr:hover {
             background: #000000;
         }
+        .pull-right,.fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination {
+            display: none;
+        }
     </style>
     <script type="text/javascript">
+        var interval;//璁℃椂鍣�
+        var interval1;//璁℃椂鍣�
+        var interval2;//璁℃椂鍣�
+        var num = 0;
+        var num1 = 0;
+        var TLProgress=0;  //閫�鏂欑巼
+        var CallData = [];  //杩戞棩閰嶉�佹椂闂存暟缁�
+        var CallPSQty = [];  //杩戞棩閰嶉�佹�绘暟鏁扮粍
+        var CAllQty = [];  //浠婃棩鍙枡鎬绘暟鏁扮粍
         $(document).ready(function () {
             // 鍒涘缓涓や釜鍙橀噺锛屼竴涓暟缁勪腑鐨勬湀鍜屾棩鐨勫悕绉�
             var monthNames = ["1 鏈�", "2 鏈�", "3 鏈�", "4 鏈�", "5 鏈�", "6 鏈�", "7 鏈�", "8 鏈�", "9 鏈�", "10 鏈�", "11 鏈�", "12 鏈�"];
@@ -247,59 +259,94 @@
                 var ss = date1.getSeconds();
                 var dayNames = new Array("鏄熸湡鏃�", "鏄熸湡涓�", "鏄熸湡浜�", "鏄熸湡涓�", "鏄熸湡鍥�", "鏄熸湡浜�", "鏄熸湡鍏�");
                 var Stamp = new Date();
-
-
+                
+                
                 $('#Date').html(year + "&nbsp;骞�" + " " + monthNames[month] + ' ' + day + "&nbsp;鏃�&nbsp;&nbsp;" + ' ' + dayNames[Stamp.getDay()]);
                 $("#hours").html((hh < 10 ? ("0" + hh) : hh));
                 $("#min").html((mm < 10 ? ("0" + mm) : mm));
                 $("#sec").html((ss < 10 ? ("0" + ss) : ss));
-
+                
             }, 1000);
-
+            
         });
         $(function () {
             var mychart1 = echarts.init(document.getElementById('mychart1'));
             var mychart2 = echarts.init(document.getElementById('mychart2'));
+            TopData();
+            BottomData();
             Chart(mychart1, mychart2);
-
+            
+            // 瀹氭椂鍣�
+            interval = setInterval(function () {
+                $("#tb_order").bootstrapTable('refresh');
+            }, 10000);
+            interval1=setInterval(function () {
+                $("#tb_order1").bootstrapTable('refresh');
+            }, 10000);
+            interval2=setInterval(function () {
+                TLProgress = 0;
+                CallData = [];
+                CallPSQty = [];  
+                CAllQty = [];  
+                Chart(mychart1, mychart2);
+            }, 20000);
             //鏍规嵁绐楀彛鐨勫ぇ灏忓彉鍔ㄥ浘琛� --- 閲嶇偣
             window.onresize = function () {
                 myChart1.resize();
                 myChart2.resize();
             }
         })
-
+        
         function Chart(mychart1, mychart2) {
+            $.ajax({
+                url: "http://localhost:12298/api/loaddata/CallData",
+                dataType: "JSON",
+                async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
+                type: "Get",
+                success: function (data) {
+                    TLProgress=parseFloat((data.data[2][1].qty / data.data[2][0].qty) * 100).toFixed(2);
+                    //浠婃棩閰嶉�佺巼
+                    $.each(data.data[0], function (index, val) {
+                        CallData.push(val.FNAME);
+                        CallPSQty.push(parseFloat(val.HSendQTY).toFixed(2));
+                        CAllQty.push(parseFloat(val.HQty).toFixed(2));
+                    });
+                },
+                error: function (data) {
+                    
+                }
+            })
+            
             const colorList = ['#47A2FF ', '#FBD444']
             option1 = {
                 title: [
-                    {
-                        text: '',
-                        subtext: '10%',
-                        textStyle: {
-                            fontSize: 16,
-                            color: '#999',
-                            lineHeight: 20
-                        },
-                        subtextStyle: {
-                            fontSize: 28,
-                            color: '#00c6ff'
-                        },
-                        textAlign: 'center',
-                        left: '50%',
-                        top: '45%'
+                {
+                    text: '',
+                    subtext: TLProgress+'%',
+                    textStyle: {
+                        fontSize: 16,
+                        color: '#999',
+                        lineHeight: 20
                     },
-                    {
-                        show: true,
-                        text: '閫�鏂欑巼',
-                        textStyle: {
-                            color: '#00c6ff',
-                            fontSize: '16',
-                        },
-                        textAlign: 'center',
-                        left: '50%',
-                        top: '5%'
-                    }
+                    subtextStyle: {
+                        fontSize: 28,
+                        color: '#00c6ff'
+                    },
+                    textAlign: 'center',
+                    left: '50%',
+                    top: '45%'
+                },
+                {
+                    show: true,
+                    text: '閫�鏂欑巼',
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: '16',
+                    },
+                    textAlign: 'center',
+                    left: '50%',
+                    top: '5%'
+                }
                 ],
                 tooltip: {
                     trigger: 'item',
@@ -311,29 +358,29 @@
                 },
                 color: colorList,
                 series: [
-                    {
-                        name: '鍗犳瘮',
-                        type: 'pie',
-                        radius: [50, 80],
-                        center: ['50%', '50%'],
-                        label: {
-                            show: false
-                        },
-                        labelLine: {
-                            show: true
-                        },
-                        itemStyle: {
-                            borderWidth: 3,
-                            borderColor: '#000000'
-                        },
-                        data: [
-                            { name: '杈炬垚鐜�', value: 90 },
-                            { name: '鏈揪鎴愮巼', value: 10 }
-                        ],
-                    }
+                {
+                    name: '鍗犳瘮',
+                    type: 'pie',
+                    radius: [50, 80],
+                    center: ['50%', '50%'],
+                    label: {
+                        show: false
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    itemStyle: {
+                        borderWidth: 3,
+                        borderColor: '#000000'
+                    },
+                    data: [
+                    { name: '杈炬垚鐜�', value: TLProgress },
+                    { name: '鏈揪鎴愮巼', value: 100-TLProgress }
+                    ],
+                }
                 ]
             };
-
+            
             option2 = {
                 title: {
                     text: '杩戞棩閰嶉�佺巼',
@@ -347,7 +394,7 @@
                 },
                 color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                 tooltip: {
-
+                    
                 },
                 grid: {
                     left: '3%',
@@ -357,283 +404,87 @@
                 },
                 legend: {
                     left: 'right',
-                    data: ['浠诲姟鏁�', '閰嶉�佹暟'],
+                    data: ['鍙枡鏁�', '閰嶉�佹暟'],
                     textStyle: {
                         color: '#00c6ff',
                         fontSize: 16,
                         fontFamily: "寰蒋闆呴粦"
                     }
-
+                    
                 },
                 xAxis: [
-                    {
-                        type: 'category',
-                        data: ['05-03', '05-04', '05-05', '05-06', '05-07'],
-                        axisTick: {
-                            alignWithLabel: true
-                        },
-
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#00c6ff',
-                                type: 'solid', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾�   solid:瀹炵嚎
-                                width: 1, //闅愯棌y杞�
-                            }
-                        },
-                        axisLabel: {
-                            show: true,
-                            textStyle: {
-                                color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
-                                fontSize: '16'
-                            }
+                {
+                    type: 'category',
+                    data: CallData,
+                    axisTick: {
+                        alignWithLabel: true
+                    },
+                    
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#00c6ff',
+                            type: 'solid', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾�   solid:瀹炵嚎
+                            width: 1, //闅愯棌y杞�
+                        }
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
                         }
                     }
+                }
                 ],
                 yAxis: [
-                    {
-                        type: 'value',
-                        axisLine: {
-                            show: false,
-
+                {
+                    type: 'value',
+                    axisLine: {
+                        show: false,
+                        
+                    },
+                    splitLine: { //缃戞牸绾�
+                        lineStyle: {
+                            color: '#00c6ff',
+                            
                         },
-                        splitLine: { //缃戞牸绾�
-                            lineStyle: {
-                                color: '#00c6ff',
-
-                            },
-                            show: true //闅愯棌鎴栨樉绀�
-                        },
-                        axisLabel: {
-                            textStyle: {
-                                color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
-                                fontSize: '16'
-                            }
+                        show: true //闅愯棌鎴栨樉绀�
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
                         }
                     }
+                }
                 ],
                 series: [
-                    {
-                        name: '浠诲姟鏁�',
-                        type: 'bar',
-                        data: [10, 52, 200, 334, 390]
-                    },
-                    {
-                        name: '閰嶉�佹暟',
-                        type: 'bar',
-                        data: [10, 52, 200, 334, 390]
-                    }
+                {
+                    name: '鍙枡鏁�',
+                    type: 'bar',
+                    data: CAllQty
+                },
+                {
+                    name: '閰嶉�佹暟',
+                    type: 'bar',
+                    data: CallPSQty
+                }
                 ]
             };
-
+            
             mychart1.setOption(option1);
             mychart2.setOption(option2);
-
-
-            Data = [
-                {
-                    ShipListWorkCode: "FH202105050001",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListQty: "1000",
-                    ShipListFQty: "250",
-                    ShipListKuqty: "10000",
-                    Stus: "鏈畬鎴�",
-                    Progress: "30"
-                },
-                {
-                    ShipListWorkCode: "FH202105050001",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListQty: "1000",
-                    ShipListFQty: "250",
-                    ShipListKuqty: "10000",
-                    Stus: "鏈畬鎴�",
-                    Progress: "30"
-                },
-                {
-                    ShipListWorkCode: "FH202105050001",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListQty: "1000",
-                    ShipListFQty: "250",
-                    ShipListKuqty: "10000",
-                    Stus: "鏈畬鎴�",
-                    Progress: "30"
-                },
-                {
-                    ShipListWorkCode: "FH202105050001",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListQty: "1000",
-                    ShipListFQty: "250",
-                    ShipListKuqty: "10000",
-                    Stus: "鏈畬鎴�",
-                    Progress: "30"
-                },
-                {
-                    ShipListWorkCode: "FH202105050001",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListQty: "1000",
-                    ShipListFQty: "250",
-                    ShipListKuqty: "10000",
-                    Stus: "鏈畬鎴�",
-                    Progress: "30"
-                },
-                {
-                    ShipListWorkCode: "FH202105050001",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListQty: "1000",
-                    ShipListFQty: "250",
-                    ShipListKuqty: "10000",
-                    Stus: "鏈畬鎴�",
-                    Progress: "30"
-                },
-                {
-                    ShipListWorkCode: "FH202105050001",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListQty: "1000",
-                    ShipListFQty: "250",
-                    ShipListKuqty: "10000",
-                    Stus: "鏈畬鎴�",
-                    Progress: "30"
-                },
-                {
-                    ShipListWorkCode: "FH202105050001",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListQty: "1000",
-                    ShipListFQty: "250",
-                    ShipListKuqty: "10000",
-                    Stus: "鏈畬鎴�",
-                    Progress: "30"
-                }
-            ];
-            Data1 = [
-                {
-                    Stus: "鏈畬鎴�",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListKuqty: "1000",
-                    ShipListZYQty: "250",
-                    ShipListSYQty: "750",
-                    ShipListCGQty: "100",
-                    ShipListAQqty: "500",
-                    ShipListXQty: "250",
-                    ShipListDayqty: "30"
-                },
-                {
-                    Stus: "鏈畬鎴�",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListKuqty: "1000",
-                    ShipListZYQty: "250",
-                    ShipListSYQty: "750",
-                    ShipListCGQty: "100",
-                    ShipListAQqty: "500",
-                    ShipListXQty: "250",
-                    ShipListDayqty: "30"
-                },
-                {
-                    Stus: "鏈畬鎴�",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListKuqty: "1000",
-                    ShipListZYQty: "250",
-                    ShipListSYQty: "750",
-                    ShipListCGQty: "100",
-                    ShipListAQqty: "500",
-                    ShipListXQty: "250",
-                    ShipListDayqty: "30"
-                },
-                {
-                    Stus: "鏈畬鎴�",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListKuqty: "1000",
-                    ShipListZYQty: "250",
-                    ShipListSYQty: "750",
-                    ShipListCGQty: "100",
-                    ShipListAQqty: "500",
-                    ShipListXQty: "250",
-                    ShipListDayqty: "30"
-                },
-                {
-                    Stus: "鏈畬鎴�",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListKuqty: "1000",
-                    ShipListZYQty: "250",
-                    ShipListSYQty: "750",
-                    ShipListCGQty: "100",
-                    ShipListAQqty: "500",
-                    ShipListXQty: "250",
-                    ShipListDayqty: "30"
-                },
-                {
-                    Stus: "鏈畬鎴�",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListKuqty: "1000",
-                    ShipListZYQty: "250",
-                    ShipListSYQty: "750",
-                    ShipListCGQty: "100",
-                    ShipListAQqty: "500",
-                    ShipListXQty: "250",
-                    ShipListDayqty: "30"
-                },
-                {
-                    Stus: "鏈畬鎴�",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListKuqty: "1000",
-                    ShipListZYQty: "250",
-                    ShipListSYQty: "750",
-                    ShipListCGQty: "100",
-                    ShipListAQqty: "500",
-                    ShipListXQty: "250",
-                    ShipListDayqty: "30"
-                },
-                {
-                    Stus: "鏈畬鎴�",
-                    ShipListPartNumber: "20210505001",
-                    ShipListPartName: "#0505閾滄",
-                    ShipListPartSpec: "#0505閾滄",
-                    ShipListKuqty: "1000",
-                    ShipListZYQty: "250",
-                    ShipListSYQty: "750",
-                    ShipListCGQty: "100",
-                    ShipListAQqty: "500",
-                    ShipListXQty: "250",
-                    ShipListDayqty: "30"
-                }
-
-            ]
+            
+        }
+        
+        function TopData(){
             $('#tb_order').bootstrapTable({
-                //url: 'http://192.168.109.2:97/GongJiao/Product_Data',
-                //url: "http://172.16.72.3:86/DaLian/Product_Data",
-                data: Data,
+                url: 'http://localhost:12298/api/loaddata/CallTableTopData',
+                //data: dataJson,
                 method: 'get',                      //璇锋眰鏂瑰紡锛�*锛�
                 dataType: "json",
-                //queryParams: queryParams,//浼犻�掑弬鏁帮紙*锛�
+                queryParams :queryParams,
                 striped: false,                      //鏄惁鏄剧ず琛岄棿闅旇壊
                 cache: false,                       //鏄惁浣跨敤缂撳瓨锛岄粯璁や负true锛屾墍浠ヤ竴鑸儏鍐典笅闇�瑕佽缃竴涓嬭繖涓睘鎬э紙*锛�
                 pagination: true,                   //鏄惁鏄剧ず鍒嗛〉锛�*锛�
@@ -642,102 +493,127 @@
                 search: false,   //鏄惁鍚敤鎼滅储妗�
                 sidePagination: "server",           //鍒嗛〉鏂瑰紡锛歝lient瀹㈡埛绔垎椤碉紝server鏈嶅姟绔垎椤碉紙*锛�
                 pageNumber: 1,                       //鍒濆鍖栧姞杞界涓�椤碉紝榛樿绗竴椤�
-                pageSize: 13,                       //姣忛〉鐨勮褰曡鏁帮紙*锛�
-                pageList: [13],        //鍙緵閫夋嫨鐨勬瘡椤电殑琛屾暟锛�*锛�
-                strictSearch: false,                 //璁剧疆涓� true鍚敤 鍏ㄥ尮閰嶆悳绱紝鍚﹀垯涓烘ā绯婃悳绱�
+                pageSize: 8,                       //姣忛〉鐨勮褰曡鏁帮紙*锛�
+                pageList: [8],                     //鍙緵閫夋嫨鐨勬瘡椤电殑琛屾暟锛�*锛�
+                strictSearch: false,                //璁剧疆涓� true鍚敤 鍏ㄥ尮閰嶆悳绱紝鍚﹀垯涓烘ā绯婃悳绱�
                 clickToSelect: true,                //鏄惁鍚敤鐐瑰嚮閫変腑琛�
                 singleSelect: true,                  //璁剧疆True 灏嗙姝㈠閫�
                 uniqueId: "ID",                     //姣忎竴琛岀殑鍞竴鏍囪瘑锛屼竴鑸负涓婚敭鍒�
                 cardView: false,                    //鏄惁鏄剧ず璇︾粏瑙嗗浘
                 detailView: false,                   //鏄惁鏄剧ず鐖跺瓙琛�
-                height: 450,
+                
                 columns: [
-                    { field: 'ShipListWorkCode', title: '鏈厤閫佹竻鍗�', align: "left" },
-                    { field: 'ShipListPartNumber', title: '鐗╂枡缂栫爜', align: "left" },
-                    { field: 'ShipListPartName', title: '鐗╂枡鍚嶇О', align: "left" },
-                    { field: 'ShipListPartSpec', title: '瑙勬牸鍨嬪彿', align: "left" },
-                    { field: 'ShipListQty', title: '浠诲姟鏁伴噺', align: "left" },
-                    { field: 'ShipListFQty', title: '瀹屾垚閰嶉�佹暟閲�', align: "left" },
-                    { field: 'ShipListKuqty', title: '褰撳墠搴撳瓨', align: "left" },
-                    { field: 'Stus', title: '鐘舵��', align: "left" },
-                    {
-                        field: 'Progress', title: '杩涘害', align: "left", formatter: function (value, row, index) {
-                            var res = 100 * row.ShipListFQty / row.ShipListQty;
-                            //return ["<div class='progress'> <div class='progress-bar' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%'>" + res.toFixed(2) + "</div> </div>"];
-                            return "<div class='w40 div_co pw'><div class='PA' style='text-align:right;color:#4b2dba;float:right;height:20px;line-height:25px'>" + res.toFixed(2) + "%</div><div class='progress' style='margin-top:4px;'><div class='progress-bar progress-diy-info' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%';text-align:center;'></div></div></div>";
-                        }
+                { field: 'HICMOBillNO', title: '鐢熶骇璁㈠崟', align: "left" },
+                { field: 'HNUMBER', title: '鐗╂枡缂栫爜', align: "left" },
+                { field: 'HNAME', title: '鐗╂枡鍚嶇О', align: "left" },
+                { field: 'HMODEL', title: '瑙勬牸鍨嬪彿', align: "left" },
+                { field: 'HQTY', title: '鍙枡鏁伴噺', align: "left" },
+                { field: 'HLEFT', title: '宸查厤閫佹暟閲�', align: "left" },
+                // { field: 'ShipListKuqty', title: '褰撳墠搴撳瓨', align: "left" },
+                { field: 'HSTATUS', title: '鐘舵��', align: "left",formatter: function (value, row, index) {                   
+                    return "鏈畬鎴�";
+                } },
+                {
+                    field: 'Progress', title: '杩涘害', align: "left", formatter: function (value, row, index) {
+                        var res = 100 * row.HLEFT / row.HQTY;
+                        //return ["<div class='progress'> <div class='progress-bar' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%'>" + res.toFixed(2) + "</div> </div>"];
+                        return "<div class='w40 div_co pw'><div class='PA' style='text-align:right;color:#4b2dba;float:right;height:20px;line-height:25px'>" + res.toFixed(2) + "%</div><div class='progress' style='margin-top:4px;'><div class='progress-bar progress-diy-info' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%';text-align:center;'></div></div></div>";
                     }
+                }
                 ],
                 onClickRow: function (row, $element) {
-
+                    
                 },
                 onCheck: function (row, $element) {
-
+                    
                 },
                 onLoadSuccess: function (row) {
-                    var a = $('#tb_order').bootstrapTable('getSelections');
+                    var num_total = (row.total)/ 8
+                    if (num >= num_total) {
+                        num = 0
+                    }
                 }
-
-            })
-
-            $('#tb_order1').bootstrapTable({
-                //url: 'http://192.168.109.2:97/GongJiao/Product_Data',
-                //url: "http://172.16.72.3:86/DaLian/Product_Data",
-                data: Data1,
-                method: 'get',                      //璇锋眰鏂瑰紡锛�*锛�
-                dataType: "json",
-                //queryParams: queryParams,//浼犻�掑弬鏁帮紙*锛�
-                striped: false,                      //鏄惁鏄剧ず琛岄棿闅旇壊
-                cache: false,                       //鏄惁浣跨敤缂撳瓨锛岄粯璁や负true锛屾墍浠ヤ竴鑸儏鍐典笅闇�瑕佽缃竴涓嬭繖涓睘鎬э紙*锛�
-                pagination: true,                   //鏄惁鏄剧ず鍒嗛〉锛�*锛�
-                sortable: false,                     //鏄惁鍚敤鎺掑簭
-                sortable: false, //鏄惁鍚敤鎺掑簭
-                search: false,   //鏄惁鍚敤鎼滅储妗�
-                sidePagination: "server",           //鍒嗛〉鏂瑰紡锛歝lient瀹㈡埛绔垎椤碉紝server鏈嶅姟绔垎椤碉紙*锛�
-                pageNumber: 1,                       //鍒濆鍖栧姞杞界涓�椤碉紝榛樿绗竴椤�
-                pageSize: 13,                       //姣忛〉鐨勮褰曡鏁帮紙*锛�
-                pageList: [13],        //鍙緵閫夋嫨鐨勬瘡椤电殑琛屾暟锛�*锛�
-                strictSearch: false,                 //璁剧疆涓� true鍚敤 鍏ㄥ尮閰嶆悳绱紝鍚﹀垯涓烘ā绯婃悳绱�
-                clickToSelect: true,                //鏄惁鍚敤鐐瑰嚮閫変腑琛�
-                singleSelect: true,                  //璁剧疆True 灏嗙姝㈠閫�
-                uniqueId: "ID",                     //姣忎竴琛岀殑鍞竴鏍囪瘑锛屼竴鑸负涓婚敭鍒�
-                cardView: false,                    //鏄惁鏄剧ず璇︾粏瑙嗗浘
-                detailView: false,                   //鏄惁鏄剧ず鐖跺瓙琛�
-                height: 450,
-                columns: [
-                    { field: 'Stus', title: '搴撳瓨鐘舵��', align: "left" },
-                    { field: 'ShipListPartNumber', title: '鐗╂枡缂栫爜', align: "left" },
-                    { field: 'ShipListPartName', title: '鐗╂枡鍚嶇О', align: "left" },
-                    { field: 'ShipListPartName', title: '鐗╂枡瑙勬牸', align: "left" },
-                    { field: 'ShipListKuqty', title: '搴撳瓨鏁伴噺', align: "left" },
-                    { field: 'ShipListZYQty', title: '鍗犵敤鏁伴噺', align: "left" },
-                    { field: 'ShipListSYQty', title: '鍓╀綑鍙敤鏁伴噺', align: "left" },
-                    { field: 'ShipListCGQty', title: '閲囪喘鍦ㄩ�旀暟閲�', align: "left" },
-                    { field: 'ShipListAQqty', title: '瀹夊叏搴撳瓨', align: "left" },
-                    { field: 'ShipListXQty', title: '闇�姹傞噺', align: "left" },
-                    { field: 'ShipListDayqty', title: '鏈棩闇�姹�', align: "left" }
-
-                ],
-                onClickRow: function (row, $element) {
-
-                },
-                onCheck: function (row, $element) {
-
-                },
-                onLoadSuccess: function (row) {
-                    var a = $('#tb_order').bootstrapTable('getSelections');
-                }
-
+                
             })
         }
-
-
+        //寰楀埌鏌ヨ鐨勫弬鏁�
+        function queryParams(params) {
+            num += 1;
+            var temp = {   //杩欓噷鐨勯敭鐨勫悕瀛楀拰鎺у埗鍣ㄧ殑鍙橀噺鍚嶅繀椤讳竴鐩达紝杩欒竟鏀瑰姩锛屾帶鍒跺櫒涔熼渶瑕佹敼鎴愪竴鏍风殑
+                limit: params.limit,   //椤甸潰澶у皬
+                offset: num,  //椤电爜
+            };
+            return temp;
+        }
+        
+        
+        function BottomData(){
+            $('#tb_order1').bootstrapTable({
+                url: 'http://localhost:12298/api/loaddata/CallTableBottomData',
+                //data: dataJson,
+                method: 'get',                      //璇锋眰鏂瑰紡锛�*锛�
+                dataType: "json",
+                queryParams :queryParams,
+                striped: false,                      //鏄惁鏄剧ず琛岄棿闅旇壊
+                cache: false,                       //鏄惁浣跨敤缂撳瓨锛岄粯璁や负true锛屾墍浠ヤ竴鑸儏鍐典笅闇�瑕佽缃竴涓嬭繖涓睘鎬э紙*锛�
+                pagination: true,                   //鏄惁鏄剧ず鍒嗛〉锛�*锛�
+                sortable: false,                     //鏄惁鍚敤鎺掑簭
+                sortable: false, //鏄惁鍚敤鎺掑簭
+                search: false,   //鏄惁鍚敤鎼滅储妗�
+                sidePagination: "server",           //鍒嗛〉鏂瑰紡锛歝lient瀹㈡埛绔垎椤碉紝server鏈嶅姟绔垎椤碉紙*锛�
+                pageNumber: 1,                       //鍒濆鍖栧姞杞界涓�椤碉紝榛樿绗竴椤�
+                pageSize: 8,                       //姣忛〉鐨勮褰曡鏁帮紙*锛�
+                pageList: [8],                     //鍙緵閫夋嫨鐨勬瘡椤电殑琛屾暟锛�*锛�
+                strictSearch: false,                //璁剧疆涓� true鍚敤 鍏ㄥ尮閰嶆悳绱紝鍚﹀垯涓烘ā绯婃悳绱�
+                clickToSelect: true,                //鏄惁鍚敤鐐瑰嚮閫変腑琛�
+                singleSelect: true,                  //璁剧疆True 灏嗙姝㈠閫�
+                uniqueId: "ID",                     //姣忎竴琛岀殑鍞竴鏍囪瘑锛屼竴鑸负涓婚敭鍒�
+                cardView: false,                    //鏄惁鏄剧ず璇︾粏瑙嗗浘
+                detailView: false,                   //鏄惁鏄剧ず鐖跺瓙琛�
+                
+                columns: [
+                { field: 'KSTATUS', title: '搴撳瓨鐘舵��', align: "left" },
+                { field: 'KNUMBER', title: '鐗╂枡缂栫爜', align: "left" },
+                { field: 'KNAME', title: '鐗╂枡鍚嶇О', align: "left" },
+                { field: 'KMODEL', title: '鐗╂枡瑙勬牸', align: "left" },
+                { field: 'KQTY', title: '搴撳瓨鏁伴噺', align: "left" },
+                { field: 'KZYQTY', title: '鍗犵敤鏁伴噺', align: "left" },
+                { field: 'KKYQTY', title: '鍓╀綑鍙敤鏁伴噺', align: "left" },
+                { field: 'KZTQTY', title: '閲囪喘鍦ㄩ�旀暟閲�', align: "left" },
+                { field: 'KGQTY', title: '瀹夊叏搴撳瓨', align: "left" },
+                { field: 'KXQTY', title: '闇�姹傞噺', align: "left" },
+                { field: 'KDQTY', title: '鏈棩闇�姹�', align: "left" }
+                ],
+                onClickRow: function (row, $element) {
+                    
+                },
+                onCheck: function (row, $element) {
+                    
+                },
+                onLoadSuccess: function (row) {
+                    var num_total = (row.total)/ 8
+                    if (num >= num_total) {
+                        num = 0
+                    }
+                }               
+            })
+        }
+        
+        //寰楀埌鏌ヨ鐨勫弬鏁�
+        function queryParams1(params) {
+            num1 += 1;
+            var temp = {   //杩欓噷鐨勯敭鐨勫悕瀛楀拰鎺у埗鍣ㄧ殑鍙橀噺鍚嶅繀椤讳竴鐩达紝杩欒竟鏀瑰姩锛屾帶鍒跺櫒涔熼渶瑕佹敼鎴愪竴鏍风殑
+                limit: params.limit,   //椤甸潰澶у皬
+                offset: num1,  //椤电爜
+            };
+            return temp;
+        }
     </script>
 </head>
 
 <body>
     <div class='title'>闊╃數鍙枡閰嶉�佺湅鏉�</div>
-
+    
     <div class="clock">
         <ul>
             <li id="Date"></li>
@@ -747,13 +623,13 @@
             <li id="point">:</li>
             <li id="sec"> </li>
         </ul>
-
+        
     </div>
     <div class="col-sm-8">
         <div class="col-sm-12">
             <table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
         </div>
-
+        
     </div>
     <div class="col-sm-4">
         <div id="mychart1"></div>
diff --git a/HDHouse.html b/HDHouse.html
index 72c69ca..fb8aee7 100644
--- a/HDHouse.html
+++ b/HDHouse.html
@@ -344,7 +344,7 @@
                                             StepHtml += "</div>";
                                             StepHtml += "<div class='content_style w58'>";
                                                 StepHtml += "<div class='content_mod content_mod_bg_true'>";
-                                                    StepHtml += "<p class='mt12'>鍥哄畾搴撲綅</p>";
+                                                    StepHtml += "<p class='mt12'>A01</p>";
                                                     StepHtml += "<p class='mb9'>" + result[j][m].FQTY + "</p>";
                                                     StepHtml += "</div>";
                                                     
diff --git a/HDLackMats.html b/HDLackMats.html
new file mode 100644
index 0000000..a71c31a
--- /dev/null
+++ b/HDLackMats.html
@@ -0,0 +1,906 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>闊╃數缂烘枡鐪嬫澘</title>
+    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
+    <link rel="stylesheet" type="text/css" href="css/index.css">
+    <script src="js/jquery.min.js"></script>
+    <script src='js/echarts.min.js'></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src='js/bootstrap-table.min.js'></script>
+    <script src='js/bootstrap-table-zh-CN.min.js'></script>
+    <script src="js/jquery.SuperSlide.2.1.3.js"></script>
+    <script src='js/template.js'></script>
+    <script src="js/jquery.qrcode.min.js"></script>
+    <style>      
+        .clock {
+            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+            font-size: 20px;
+            width: 450px;
+            float: right;
+            color: #fff;
+            margin-top: -75px;
+            margin-right: 5px;
+            color: #09d1ea;
+            
+        }
+        
+        .clock #Date {
+            text-align: center;
+            text-shadow: 0 0 0px #00c6ff;
+            
+            
+        }
+        
+        .clock ul {
+            width: 450px;
+            margin: 0 auto;
+            padding: 0px;
+            list-style: none;
+            text-align: right;
+            margin-left: 15px;
+            position: relative;
+        }
+        
+        .clock ul li {
+            display: inline;
+            font-size: 24px;
+            text-align: left;
+            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+            text-shadow: 0 0 0px #00c6ff;
+        }
+        
+        body {
+            padding-left: 50px;
+            padding-right: 50px;
+        }
+        
+        .title {
+            
+            font-size: 44px;
+            font-family: PingFangSC;
+            font-weight: 500;
+            color: rgba(9, 209, 234, 1);
+            text-align: center;
+            background: url(img/img_little_new.png) center no-repeat;
+            margin-bottom: 30px;
+        }
+        
+        .col-sm-12 {
+            position: relative;
+            min-height: 1px;
+            padding-right: 0px;
+            padding-left: 0px;
+        }
+        
+        .left{
+            /* border: 1px solid #00c6ff; */
+            height: 900px;
+        }
+        .right{
+            /* border: 1px solid #00c6ff; */
+            height: 300px;
+        }
+        
+        
+        
+        .col-sm-12,
+        .col-sm-2,
+        .col-sm-3,
+        .col-sm-4,
+        .col-sm-6,
+        .col-sm-8 {
+            position: relative;
+            min-height: 1px;
+            padding-right: 0px;
+            padding-left: 0px;
+        }
+        
+        
+        #mychart1,
+        #mychart2,
+        #mychart3{
+            width: 100%;
+            border: none;
+            height: 300px;
+        }
+        
+        #cList {
+            margin: 0% auto;
+            color: #00c6ff;
+        }
+        
+        #cList li {
+            margin: 20px 0px;
+            text-align:center;
+            font-size: 14px;
+        }
+        #cList1 {
+            float: left;
+        }
+        
+        #cList1 li {
+            float: left;
+            height: 450px;
+            color: #00c6ff;
+            font-size: 20px;
+            /*鏂囧瓧灞呬腑*/
+            text-align: center;
+            /*display: flex;*/
+        }
+        
+        #cList1 li span {
+            /*鏂囧瓧灞呬腑*/
+            display: inline-block;
+            height: 100%;
+            /*鏂囧瓧灞呬腑*/
+            
+            /*鏂囧瓧绔栨帓*/
+            writing-mode: vertical-lr;
+            /*浠庡乏鍚戝彸 浠庡彸鍚戝乏鏄� writing-mode: vertical-rl;*/
+            writing-mode: tb-lr;
+            /*IE娴忚鍣ㄧ殑浠庡乏鍚戝彸 浠庡彸鍚戝乏鏄� writing-mode: tb-rl锛�*/
+        }
+        
+        table tr td {
+            text-align: center;
+            vertical-align: middle !important;
+            /*border: 1px solid #464646;*/
+            border-right: 0px;
+            height: 40px;
+            font-size: 16px;
+            font-family: '榛戜綋';
+            font-family: Arial;
+            border: none;
+        }
+        
+        .table>caption+thead>tr:first-child>td,
+        .table>caption+thead>tr:first-child>th,
+        .table>colgroup+thead>tr:first-child>td,
+        .table>colgroup+thead>tr:first-child>th,
+        .table>thead:first-child>tr:first-child>td,
+        .table>thead:first-child>tr:first-child>th {
+            background-color: #000;
+            color: #3bff72;
+            
+        }
+        
+        .fixed-table-container tbody td .th-inner,
+        .fixed-table-container thead th .th-inner {
+            font-size: 15px;
+            color: #09d1ea;
+            padding: 20px 0 15px 0;
+        }
+        
+        #tb_order tr td {
+            text-align: center;
+            height: 32px;
+            line-height: 32px;
+            font-size: 14px;
+            /* font-family: '榛戜綋'; */
+            color: #a6a8ae;
+            font-family: Arial;
+            /* border: 1px solid #464646; */
+            border: none;
+        }
+        
+        .bootstrap-table .table {
+            border-radius: none
+        }
+        
+        th {
+            background-color: transparent !important;
+        }
+        
+        td {
+            background-color: transparent;
+        }
+        
+        tr {
+            background-color: transparent
+        }
+        
+        #tb_order tr:nth-child(even) {
+            background: #080c1c;
+        }
+        
+        .fixed-table-container tbody td .th-inner,
+        .fixed-table-container thead th .th-inner {
+            text-align: left;
+        }
+        
+        .progress {
+            background-color: darkblue;
+        }
+        
+        #tb_order tr:nth-child(even) {
+            background: #000000;
+        }
+        
+        .pull-right,.fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination {
+            display: none;
+        }
+    </style>
+    <script type="text/javascript">
+        
+        $(document).ready(function () {
+            // 鍒涘缓涓や釜鍙橀噺锛屼竴涓暟缁勪腑鐨勬湀鍜屾棩鐨勫悕绉�
+            var monthNames = ["1 鏈�", "2 鏈�", "3 鏈�", "4 鏈�", "5 鏈�", "6 鏈�", "7 鏈�", "8 鏈�", "9 鏈�", "10 鏈�", "11 鏈�", "12 鏈�"];
+            setInterval(function () {
+                var date1 = new Date;
+                var year = date1.getFullYear();
+                var month = date1.getMonth();
+                var day = date1.getDate();
+                var hh = date1.getHours();
+                var mm = date1.getMinutes();
+                var ss = date1.getSeconds();
+                var dayNames = new Array("鏄熸湡鏃�", "鏄熸湡涓�", "鏄熸湡浜�", "鏄熸湡涓�", "鏄熸湡鍥�", "鏄熸湡浜�", "鏄熸湡鍏�");
+                var Stamp = new Date();
+                
+                
+                $('#Date').html(year + "&nbsp;骞�" + " " + monthNames[month] + ' ' + day + "&nbsp;鏃�&nbsp;&nbsp;" + ' ' + dayNames[Stamp.getDay()]);
+                $("#hours").html((hh < 10 ? ("0" + hh) : hh));
+                $("#min").html((mm < 10 ? ("0" + mm) : mm));
+                $("#sec").html((ss < 10 ? ("0" + ss) : ss));
+                
+            }, 1000);
+            
+        });
+        $(function () {
+            var mychart1 = echarts.init(document.getElementById('mychart1'));
+            var mychart2 = echarts.init(document.getElementById('mychart2'));
+            var mychart3 = echarts.init(document.getElementById('mychart3'));
+            
+            Chart(mychart1,mychart2,mychart3);
+            DataTable();
+            //鏍规嵁绐楀彛鐨勫ぇ灏忓彉鍔ㄥ浘琛� --- 閲嶇偣
+            window.onresize = function () {
+                myChart1.resize();
+                myChart2.resize();
+                myChart3.resize();
+            }
+        })
+        
+        function Chart(mychart1,mychart2,mychart3){
+            const colorList = ['#47A2FF', '#ff9900']
+            option1 = {
+                title: [
+                {
+                    text: '',
+                    subtext: '60%',
+                    textStyle: {
+                        fontSize: 16,
+                        color: '#999',
+                        lineHeight: 20
+                    },
+                    subtextStyle: {
+                        fontSize: 28,
+                        color: '#00c6ff'
+                    },
+                    textAlign: 'center',
+                    left: '50%',
+                    top: '50%'
+                },
+                {
+                    show: true,
+                    text: '缂烘枡鐜�',
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: '16',
+                    },
+                    textAlign: 'center',
+                    left: '50%',
+                    top: '5%'
+                }
+                ],
+                tooltip: {
+                    trigger: 'item',
+                },
+                legend: {
+                    type: 'scroll',
+                    icon: 'pin',
+                    show: false
+                },
+                color: colorList,
+                series: [
+                {
+                    name: '鍗犳瘮',
+                    type: 'pie',
+                    radius: [50, 80],
+                    center: ['50%', '50%'],
+                    center: ['50%', '60%'], 
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: false
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    itemStyle: {
+                        borderWidth: 3,
+                        borderColor: '#000000'
+                    },
+                    data: [
+                    { name: '', value: 60 },
+                    { name: '', value: 40 }
+                    ],
+                }
+                ]
+            };
+            
+            option2 = {
+                title: [
+                {
+                    text: '',
+                    subtext: '60%',
+                    textStyle: {
+                        fontSize: 16,
+                        color: '#999',
+                        lineHeight: 20
+                    },
+                    subtextStyle: {
+                        fontSize: 28,
+                        color: '#00c6ff'
+                    },
+                    textAlign: 'center',
+                    left: '50%',
+                    top: '50%'
+                },
+                {
+                    show: true,
+                    text: '鏉ユ枡涓嶈壇鐜�',
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: '16',
+                    },
+                    textAlign: 'center',
+                    left: '50%',
+                    top: '5%'
+                }
+                ],
+                tooltip: {
+                    trigger: 'item',
+                },
+                legend: {
+                    type: 'scroll',
+                    icon: 'pin',
+                    show: false
+                },
+                color: colorList,
+                series: [
+                {
+                    name: '鍗犳瘮',
+                    type: 'pie',
+                    radius: [50, 80],
+                    center: ['50%', '50%'],
+                    center: ['50%', '60%'], 
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: false
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    itemStyle: {
+                        borderWidth: 3,
+                        borderColor: '#000000'
+                    },
+                    data: [
+                    { name: '', value: 60 },
+                    { name: '', value: 40 }
+                    ],
+                }
+                ]
+            };
+            
+            option3 = {
+                title: {
+                    text: '杩戞棩涓嶈壇瀵规瘮',
+                    left: '0',
+                    top: 2,
+                    textStyle: {
+                        fontSize: 20,
+                        color: '#00c6ff',
+                        fontFamily: "寰蒋闆呴粦"
+                    },
+                },
+                color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
+                tooltip: {
+                    
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '10%',
+                    containLabel: true
+                },
+                legend: {
+                    left: 'right',
+                    data: ['鍚堟牸鏁�', '涓嶈壇鏁�'],
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: 16,
+                        fontFamily: "寰蒋闆呴粦"
+                    }
+                    
+                },
+                xAxis: [
+                {
+                    type: 'category',
+                    data:['05-11','05-12','05-13','205-14','05-15','05-16'],
+                    axisTick: {
+                        alignWithLabel: true
+                    },
+                    
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#00c6ff',
+                            type: 'solid', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾�   solid:瀹炵嚎
+                            width: 1, //闅愯棌y杞�
+                        }
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
+                        }
+                    }
+                }
+                ],
+                yAxis: [
+                {
+                    type: 'value',
+                    axisLine: {
+                        show: false,
+                        
+                    },
+                    splitLine: { //缃戞牸绾�
+                        lineStyle: {
+                            color: '#00c6ff',
+                            
+                        },
+                        show: true //闅愯棌鎴栨樉绀�
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
+                        }
+                    }
+                }
+                ],
+                series: [
+                {
+                    name: '鍚堟牸鏁�',
+                    type: 'bar',
+                    barWidth: 15,
+                    data: [100,100,100,100,100,100]
+                },
+                {
+                    name: '涓嶈壇鏁�',
+                    type: 'bar',
+                    barWidth: 15,
+                    data: [50,50,50,50,50,50]
+                }
+                ]
+            };
+            
+            
+            mychart1.setOption(option1);
+            mychart2.setOption(option2);
+            mychart3.setOption(option3);
+        }
+        
+        function DataTable() {
+            var dataJson=[
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            },
+            {
+                "PARTNUMBER": "2110800001",
+                "PARTNAME": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "PARTSPEC": "Q5-JZ/ZIGBEE鏉�/鎴愬搧鏉縖V1.0.1]",
+                "MATSQTY": "0.0000000000",
+                "HOUSEQTY": "0.0000000000",
+                "OCCUPQTY": "0.0000000000",
+                "AVAILQTY": "0.0000000000",
+                "PUCHQTY": "0.0000000000",
+                "SAFEQTY": "0.0000000000",
+                "NEEDQTY": "0.0000000000",
+                "DAYQTY": "0.0000000000"
+            }        
+            ]
+            
+            $('#tb_order').bootstrapTable({
+                //url: 'http://localhost:12298/api/loaddata/LineTableData',
+                data: dataJson,
+                method: 'get',                      //璇锋眰鏂瑰紡锛�*锛�
+                dataType: "json",
+                queryParams :queryParams,
+                striped: false,                      //鏄惁鏄剧ず琛岄棿闅旇壊
+                cache: false,                       //鏄惁浣跨敤缂撳瓨锛岄粯璁や负true锛屾墍浠ヤ竴鑸儏鍐典笅闇�瑕佽缃竴涓嬭繖涓睘鎬э紙*锛�
+                pagination: true,                   //鏄惁鏄剧ず鍒嗛〉锛�*锛�
+                sortable: false,                     //鏄惁鍚敤鎺掑簭
+                sortable: false, //鏄惁鍚敤鎺掑簭
+                search: false,   //鏄惁鍚敤鎼滅储妗�
+                sidePagination: "server",           //鍒嗛〉鏂瑰紡锛歝lient瀹㈡埛绔垎椤碉紝server鏈嶅姟绔垎椤碉紙*锛�
+                pageNumber: 1,                       //鍒濆鍖栧姞杞界涓�椤碉紝榛樿绗竴椤�
+                pageSize: 10,                       //姣忛〉鐨勮褰曡鏁帮紙*锛�
+                pageList: [10],                     //鍙緵閫夋嫨鐨勬瘡椤电殑琛屾暟锛�*锛�
+                strictSearch: false,                //璁剧疆涓� true鍚敤 鍏ㄥ尮閰嶆悳绱紝鍚﹀垯涓烘ā绯婃悳绱�
+                clickToSelect: true,                //鏄惁鍚敤鐐瑰嚮閫変腑琛�
+                singleSelect: true,                  //璁剧疆True 灏嗙姝㈠閫�
+                uniqueId: "ID",                     //姣忎竴琛岀殑鍞竴鏍囪瘑锛屼竴鑸负涓婚敭鍒�
+                cardView: false,                    //鏄惁鏄剧ず璇︾粏瑙嗗浘
+                detailView: false,                   //鏄惁鏄剧ず鐖跺瓙琛�
+                
+                columns: [
+                { field: 'PARTNUMBER', title: '鐗╂枡缂栫爜', align: "left" },
+                { field: 'PARTNAME', title: '鐗╂枡鍚嶇О', align: "left", cellStyle: function (value, row, index) {
+                    return {
+                        css: {
+                            "min-width": "100px",
+                            "white-space": "nowrap",
+                            "text-overflow": "ellipsis",
+                            "overflow": "hidden",
+                            "max-width": "120px"
+                        }
+                    }
+                }},
+                { field: 'PARTSPEC', title: '瑙勬牸鍨嬪彿', align: "left", cellStyle: function (value, row, index) {
+                    return {
+                        css: {
+                            "min-width": "100px",
+                            "white-space": "nowrap",
+                            "text-overflow": "ellipsis",
+                            "overflow": "hidden",
+                            "max-width": "120px"
+                        }
+                    }
+                }},
+                { field: 'MATSQTY', title: '缂烘枡鏁伴噺', align: "left" , formatter: function (value, row, index) {
+                    return parseFloat(value).toFixed(2);
+                }},
+                { field: 'HOUSEQTY', title: '搴撳瓨鏁伴噺', align: "left", formatter: function (value, row, index) {
+                    return parseFloat(value).toFixed(2);
+                } },
+                { field: 'OCCUPQTY', title: '鍗犵敤鏁伴噺', align: "left", formatter: function (value, row, index) {
+                    return parseFloat(value).toFixed(2);
+                } },
+                { field: 'AVAILQTY', title: '鍓╀綑鍙敤鏁伴噺', align: "left" , formatter: function (value, row, index) {
+                    return parseFloat(value).toFixed(2);
+                }},
+                { field: 'PUCHQTY', title: '閲囪喘鍦ㄩ�旀暟閲�', align: "left" , formatter: function (value, row, index) {
+                    return parseFloat(value).toFixed(2);
+                }},
+                { field: 'SAFEQTY', title: '瀹夊叏搴撳瓨', align: "left", formatter: function (value, row, index) {
+                    return parseFloat(value).toFixed(2);
+                } },
+                { field: 'NEEDQTY', title: '闇�姹傞噺', align: "left" , formatter: function (value, row, index) {
+                    return parseFloat(value).toFixed(2);
+                }},
+                { field: 'DAYQTY', title: '鏈棩姹傞噺', align: "left" , formatter: function (value, row, index) {
+                    return parseFloat(value).toFixed(2);
+                }}
+                ],
+                onClickRow: function (row, $element) {
+                    
+                },
+                onCheck: function (row, $element) {
+                    
+                },
+                onLoadSuccess: function (row) {
+                    var num_total = (row.total)/ 10
+                    if (num >= num_total) {
+                        num = 0
+                    }
+                    //var a = $('#tb_order').bootstrapTable('getSelections');
+                }
+                
+            })
+        }
+        //寰楀埌鏌ヨ鐨勫弬鏁�
+        function queryParams(params) {
+            num += 1;
+            var temp = {   //杩欓噷鐨勯敭鐨勫悕瀛楀拰鎺у埗鍣ㄧ殑鍙橀噺鍚嶅繀椤讳竴鐩达紝杩欒竟鏀瑰姩锛屾帶鍒跺櫒涔熼渶瑕佹敼鎴愪竴鏍风殑
+                limit: params.limit,   //椤甸潰澶у皬
+                offset: num,  //椤电爜
+            };
+            return temp;
+        }
+    </script>
+</head>
+
+<body>
+    <div class='title'>闊╃數缂烘枡鐪嬫澘</div>
+    <div class="clock">
+        <ul>
+            <li id="Date"></li>
+            <li id="hours"> </li>
+            <li id="point">:</li>
+            <li id="min"> </li>
+            <li id="point">:</li>
+            <li id="sec"> </li>
+        </ul>
+        
+    </div>
+    <div  class="col-sm-8 left">
+        <table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
+    </div>
+    <div class="col-sm-4 right">
+        <div class="col-sm-6 right">
+            <ul id="cList">
+                <li>鐘舵�侊細<span id="Stus">鎵ц涓�</span></li>
+                <li>鎬昏鍗曪細<span id="OrderQty">1000</span></li>
+                <li>鍑�闇�姹傦細<span id="NetQty">500</span></li>
+                <li>鎬诲簱瀛橈細<span id="SumQty">1200</span></li>
+                <li>缂烘枡閲忥細<span id="MatsQty">0</span></li>
+                <li>鍦ㄩ�旓細<span id="WayQty">100</span></li>
+                <li>鏈笅鍗曪細<span id="NoOrderQty">200</span></li>
+            </ul>
+        </div>
+        <div class="col-sm-6 right">
+            <div id="mychart1"></div>
+        </div>
+    </div>
+    <div class="col-sm-4 right">
+        <div id="mychart2"></div>
+    </div>
+    <div class="col-sm-4 right">
+        <div id="mychart3"></div>
+    </div>
+    
+</body>
+
+</html>
\ No newline at end of file
diff --git a/HDMap.html b/HDMap.html
index a7851a6..93725fe 100644
--- a/HDMap.html
+++ b/HDMap.html
@@ -13,12 +13,12 @@
         body {
             background: #001123;
         }
-
+        
         .left .shuju_box .shuju {
             width: 121px;
             height: 100px
         }
-
+        
         .left,
         .right {
             top: 320px
@@ -27,7 +27,7 @@
 </head>
 
 <body>
-
+    
     <div style="text-align: center;">
         <div class="shuju_box clearfix">
             <div class="shuju shuju1">
@@ -88,18 +88,18 @@
             </div>
         </div>
     </div>
-
+    
     <div class="map2" id="map_1" style="width: 100%;">
-
+        
     </div>
-
+    
     <div id="zzt" class="left" style="width:355px;height: 355px;">
-
+        
         <h2>鏌辩姸鍥惧瓨鏀惧湴鏂�</h2>
-
+        
     </div>
-
-
+    
+    
 </body>
 
 </html>
@@ -107,44 +107,39 @@
 <script src="js/jquery.min.js"></script>
 <script src='js/echarts.min.js'></script>
 <script>
+    var  ss=[];
+    var  aa=[];
+    var  bb=[];
     $("#map_1").height($(window).height() - 0);
     window.onload = function () {
         //$(".shuju_box").width($(".shuju").outerWidth(true)*$(".shuju").length)
-
+        
     }
     var countdata;
-    function MapTabledata() {
-        $.ajax({
-            url: "http://localhost:12298/api/loaddata/MapTableData",
-            dataType: "JSON",
-            async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
-            type: "Get",
-            success: function (data) {
-
-                console.log("鍦板浘琛ㄥご鏁版嵁" + data.data[0][0]["HValue"]);
-                $("#dq").html(data.data[0][0]["HValue"] + "+");
-                $("#AllCount").html(data.data[0][1]["HValue"]);
-                $("#CurrentMonthReg").html(data.data[0][2]["HValue"]);
-                $("#CurMonthOrder").html(data.data[0][3]["HValue"]);
-                $("#CurMonthMoney").html(data.data[0][4]["HValue"] + "+");
-                $("#CurMonthFileCount").html(data.data[0][5]["HValue"]);
-                $("#CurMonthArea").html(data.data[0][6]["HValue"]);
-
-                countdata = JSON.stringify(data.data[1]);//鍦板浘鏁版嵁
-                console.log("鍦板浘鏁版嵁" + countdata);
-            },
-            error: function (e) {
-
-            }
-        })
-
+    
+    
+    var data=[{"name":"涓浗","value":200000},{"name":"鍗板害","value":10000},{"name":"宸磋タ","value":10000},{"name":"缇庡浗","value":10000},{"name":"寰峰浗","value":10000},{"name":"鑻卞浗","value":10000},{"name":"娉曞浗","value":10000},{"name":"瑗跨彮鐗�","value":10000},{"name":"鎰忓ぇ鍒�","value":10000},{"name":"钁¤悇鐗�","value":10000}];
+    
+    countdata = data;//鍦板浘鏁版嵁
+    console.log("鍦板浘鏁版嵁" + countdata);
+    for (var j = 0; j < 3; j++) {
+        $.each(countdata, function (index, val) {
+            aa.push(val.name);     
+        });
+        
+        ss.push(aa);
+        aa=[];
     }
+    console.log(ss);
+    
+    
+    
     var WorldMapData = {
         Init: function () {
             console.log("INIT" + countdata);
             var data = countdata;
-
-
+            
+            
             var option = {
                 backgroundColor: 'transparent',
                 tooltip: {
@@ -388,9 +383,9 @@
                 }
                 ]
             };
-
-
-
+            
+            
+            
             $.getJSON('./json/world.json', function (globalJson) {
                 echarts.registerMap('world', globalJson);
                 // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
@@ -405,40 +400,40 @@
                 });
                 chart.setOption(option, true);
             });
-
+            
         }
     }
-
+    
     WorldMapData.Init();
-
-
+    
+    
     $(function () {
-
-
+        
+        
         var mychart1 = echarts.init(document.getElementById('zzt'));
         aa(mychart1);
         //鏍规嵁绐楀彛鐨勫ぇ灏忓彉鍔ㄥ浘琛� --- 閲嶇偣
         window.onresize = function () {
             myChart1.resize();
         }
-        MapTabledata();
+        
     })
     function aa(mychart1) {
-
+        
         var years = ['2019', '2020', '2021'];
         var jdData = [
-            ['涓�  鍥�', '缇�  鍥�', '鍔犳嬁澶�', '淇勭綏鏂�', '涓�  楹�', '钂�  鍙�', '鍗板害灏艰タ浜�', '椹潵瑗夸簹', '鑿插緥瀹�', '鏂板姞鍧�', '娉�  鍥�', '鍗�  搴�', '瓒�  鍗�', '缂�  鐢�', '鏈�  椴�', '宸村熀鏂潶', '淇勭綏鏂�'],
-            ['涓�  鍥�', '缇�  鍥�', '鍔犳嬁澶�', '淇勭綏鏂�', '涓�  楹�', '钂�  鍙�', '鍗板害灏艰タ浜�', '椹潵瑗夸簹', '鑿插緥瀹�', '鏂板姞鍧�', '娉�  鍥�', '鍗�  搴�', '瓒�  鍗�', '缂�  鐢�', '鏈�  椴�', '宸村熀鏂潶', '淇勭綏鏂�'],
-            ['涓�  鍥�', '缇�  鍥�', '鍔犳嬁澶�', '淇勭綏鏂�', '涓�  楹�', '钂�  鍙�', '鍗板害灏艰タ浜�', '椹潵瑗夸簹', '鑿插緥瀹�', '鏂板姞鍧�', '娉�  鍥�', '鍗�  搴�', '瓒�  鍗�', '缂�  鐢�', '鏈�  椴�', '宸村熀鏂潶', '淇勭綏鏂�']
+        ['涓�  鍥�', '缇�  鍥�', '鍔犳嬁澶�', '淇勭綏鏂�', '涓�  楹�', '钂�  鍙�', '鍗板害灏艰タ浜�', '椹潵瑗夸簹', '鑿插緥瀹�', '鏂板姞鍧�', '娉�  鍥�', '鍗�  搴�', '瓒�  鍗�', '缂�  鐢�', '鏈�  椴�', '宸村熀鏂潶', '淇勭綏鏂�'],
+        ['涓�  鍥�', '缇�  鍥�', '鍔犳嬁澶�', '淇勭綏鏂�', '涓�  楹�', '钂�  鍙�', '鍗板害灏艰タ浜�', '椹潵瑗夸簹', '鑿插緥瀹�', '鏂板姞鍧�', '娉�  鍥�', '鍗�  搴�', '瓒�  鍗�', '缂�  鐢�', '鏈�  椴�', '宸村熀鏂潶', '淇勭綏鏂�'],
+        ['涓�  鍥�', '缇�  鍥�', '鍔犳嬁澶�', '淇勭綏鏂�', '涓�  楹�', '钂�  鍙�', '鍗板害灏艰タ浜�', '椹潵瑗夸簹', '鑿插緥瀹�', '鏂板姞鍧�', '娉�  鍥�', '鍗�  搴�', '瓒�  鍗�', '缂�  鐢�', '鏈�  椴�', '宸村熀鏂潶', '淇勭綏鏂�']
         ]
         var data = [
-            [66666, 555, 333, 233, 123, 111, 4779, 456, 567, 90, 567, 89, 123, 234, 345, 534, 567],
-            [666, 555, 333, 72, 23, 111, 2133, 456, 627, 567, 123, 234, 567, 1567, 678, 757, 890],
-            [6666, 777, 333, 221, 45, 1111, 35, 567, 768, 1273, 345, 567, 8920, 890, 3245, 975, 345,],
+        [66666, 555, 333, 233, 123, 111, 4779, 456, 567, 90, 567, 89, 123, 234, 345, 534, 567],
+        [666, 555, 333, 72, 23, 111, 2133, 456, 627, 567, 123, 234, 567, 1567, 678, 757, 890],
+        [6666, 777, 333, 221, 45, 1111, 35, 567, 768, 1273, 345, 567, 8920, 890, 3245, 975, 345,],
         ];
-
+        
         option = {
-
+            
             baseOption: {
                 backgroundColor: '', //鑳屾櫙棰滆壊
                 timeline: {
@@ -446,7 +441,7 @@
                     axisType: 'category',
                     autoPlay: true,
                     playInterval: 1500, //鎾斁閫熷害
-
+                    
                     left: '5%',
                     right: '5%',
                     bottom: '0%',
@@ -455,7 +450,7 @@
                     label: {
                         normal: {
                             textStyle: {
-
+                                
                                 color: '#00E4FF',
                             }
                         },
@@ -485,7 +480,7 @@
                             borderColor: 'red'
                         }
                     },
-
+                    
                 },
                 title: {
                     text: '',
@@ -515,7 +510,7 @@
                     }
                 },
                 yAxis: [{
-
+                    
                     nameGap: 50,
                     offset: '37',
                     'type': 'category',
@@ -525,34 +520,34 @@
                     nameTextStyle: {
                         color: 'red'
                     },
-
-
+                    
+                    
                     axisLabel: {
                         //rotate:45,
                         show: false,
                         textStyle: {
                             fontSize: 32,
-
+                            
                             color: function (params, Index) { // 鏍囩鍥藉瀛椾綋棰滆壊
-
+                                
                                 //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//闅忔満鐢熸垚棰滆壊
-
+                                
                                 var colorarrays = ['', '', '', '', '', '',
-                                    '', '', '', '', '', '',
-                                    '', '', '', '', '', '', ''
+                                '', '', '', '', '', '',
+                                '', '', '', '', '', '', ''
                                 ];
-
+                                
                                 //console.log("111", Index, colorarrays[Index],params); //鎵撳嵃搴忓垪
-
+                                
                                 return colorarrays[jdData[0].indexOf(params)];
                             },
-
-
+                            
+                            
                         }, //rotate:45,
                         interval: 50
                     },
                     axisLine: {
-
+                        
                         lineStyle: {
                             color: '' //Y杞撮鑹�
                         },
@@ -563,12 +558,12 @@
                             color: ''
                         }
                     },
-
+                    
                 }],
                 xAxis: [{
                     'type': 'value',
                     'name': '',
-
+                    
                     splitNumber: 8, //杞寸嚎涓暟
                     nameTextStyle: {
                         color: 'balck'
@@ -617,32 +612,32 @@
                                 // build a color map as your need.
                                 //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//闅忔満鐢熸垚棰滆壊         
                                 var colorList = ['', '', '', '', '', '',
-                                    '', '', '', '', '', '',
-                                    '', '', '', '', '', '', ''
+                                '', '', '', '', '', '',
+                                '', '', '', '', '', '', ''
                                 ];
                                 // return colorList[params.dataIndex]
-
+                                
                                 //console.log("111", params.name); //鎵撳嵃搴忓垪
                                 return colorList[jdData[0].indexOf(params.name)];
                             },
-
+                            
                         }
                     },
                 },
-
+                
                 {
                     'name': '',
                     'type': 'bar',
                     markLine: {
-
-
+                        
+                        
                         label: {
                             normal: {
                                 show: false
                             }
                         },
                         lineStyle: {
-
+                            
                             normal: {
                                 color: 'red',
                                 width: 3
@@ -663,34 +658,34 @@
                     },
                     itemStyle: {
                         normal: {
-
-
+                            
+                            
                             color: function (params) {
                                 // build a color map as your need.
                                 //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//闅忔満鐢熸垚棰滆壊         
                                 var colorList = ['#84e4dd', '#7fec9d', '#ffe4b5', '#ffe4b5', '#00E4FF', '#749f83',
-                                    '#ffe4b5', '#ffe4b5', '#84e4dd', '#ffe4b5', '#ffe4b5', '#ffe4b5',
-                                    '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5'
+                                '#ffe4b5', '#ffe4b5', '#84e4dd', '#ffe4b5', '#ffe4b5', '#ffe4b5',
+                                '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5'
                                 ];
                                 // return colorList[params.dataIndex]
-
+                                
                                 // console.log("111", params.name); //鎵撳嵃搴忓垪
                                 return colorList[jdData[0].indexOf(params.name)];
                             },
-
+                            
                         }
                     },
                 }
                 ],
-
+                
                 animationEasingUpdate: 'quinticInOut',
                 animationDurationUpdate: 1500, //鍔ㄧ敾鏁堟灉
             },
-
+            
             options: []
         };
         for (var n = 0; n < years.length; n++) {
-
+            
             var res = [];
             //alert(jdData.length);
             for (j = 0; j < data[n].length; j++) {
@@ -698,18 +693,18 @@
                     name: jdData[n][j],
                     value: data[n][j]
                 });
-
+                
             }
-
+            
             res.sort(function (a, b) {
                 return b.value - a.value;
             }).slice(0, 6);
-
+            
             res.sort(function (a, b) {
                 return a.value - b.value;
             });
-
-
+            
+            
             var res1 = [];
             var res2 = [];
             //console.log(res);
@@ -733,6 +728,6 @@
         }
         mychart1.setOption(option);
     }
-
-
+    
+    
 </script>
\ No newline at end of file
diff --git a/HDPrctPlan.html b/HDPrctPlan.html
new file mode 100644
index 0000000..ceb6571
--- /dev/null
+++ b/HDPrctPlan.html
@@ -0,0 +1,926 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>闊╃數鐢熶骇璁″垝鐪嬫澘</title>
+    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
+    <link rel="stylesheet" type="text/css" href="css/index.css">
+    <script src="js/jquery.min.js"></script>
+    <script src='js/echarts.min.js'></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src='js/bootstrap-table.min.js'></script>
+    <script src='js/bootstrap-table-zh-CN.min.js'></script>
+    <script src="js/jquery.SuperSlide.2.1.3.js"></script>
+    <script src='js/template.js'></script>
+    <script src="js/jquery.qrcode.min.js"></script>
+    <style>      
+        .clock {
+            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+            font-size: 20px;
+            width: 450px;
+            float: right;
+            color: #fff;
+            margin-top: -75px;
+            margin-right: 5px;
+            color: #09d1ea;
+            
+        }
+        
+        .clock #Date {
+            text-align: center;
+            text-shadow: 0 0 0px #00c6ff;
+            
+            
+        }
+        
+        .clock ul {
+            width: 450px;
+            margin: 0 auto;
+            padding: 0px;
+            list-style: none;
+            text-align: right;
+            margin-left: 15px;
+            position: relative;
+        }
+        
+        .clock ul li {
+            display: inline;
+            font-size: 24px;
+            text-align: left;
+            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+            text-shadow: 0 0 0px #00c6ff;
+        }
+        
+        body {
+            padding-left: 50px;
+            padding-right: 50px;
+        }
+        
+        .title {
+            
+            font-size: 44px;
+            font-family: PingFangSC;
+            font-weight: 500;
+            color: rgba(9, 209, 234, 1);
+            text-align: center;
+            background: url(img/img_little_new.png) center no-repeat;
+            margin-bottom: 30px;
+        }
+        
+        .col-sm-12 {
+            position: relative;
+            min-height: 1px;
+            padding-right: 0px;
+            padding-left: 0px;
+        }
+        
+        .top{
+            /* border: 1px solid #00c6ff; */
+            height: 300px;
+        }
+        .bottom{
+            /* border: 1px solid #00c6ff; */
+            height: 600px;
+        }
+        .bottom_left{
+            /* border: 1px solid #00c6ff; */
+            height: 300px;
+        }
+        
+        
+        
+        .col-sm-12,
+        .col-sm-2,
+        .col-sm-3,
+        .col-sm-4,
+        .col-sm-6,
+        .col-sm-8 {
+            position: relative;
+            min-height: 1px;
+            padding-right: 0px;
+            padding-left: 0px;
+        }
+        
+        
+        #mychart1,
+        #mychart2,
+        #mychart3{
+            width: 100%;
+            border: none;
+            height: 300px;
+        }
+        #mychart4,
+        #mychart5{
+            width: 100%;
+            border: none;
+            height: 300px;
+        }
+        #mychart6,
+        #mychart7{
+            width: 100%;
+            border: none;
+            height: 600px;
+        }
+        #cList {
+            margin: 20% auto;
+            color: #00c6ff;
+        }
+        
+        #cList li {
+            margin: 26px auto;
+            text-align:center;
+        }
+        #cList1 {
+            float: left;
+        }
+        
+        #cList1 li {
+            float: left;
+            height: 450px;
+            color: #00c6ff;
+            font-size: 20px;
+            /*鏂囧瓧灞呬腑*/
+            text-align: center;
+            /*display: flex;*/
+        }
+        
+        #cList1 li span {
+            /*鏂囧瓧灞呬腑*/
+            display: inline-block;
+            height: 100%;
+            /*鏂囧瓧灞呬腑*/
+            
+            /*鏂囧瓧绔栨帓*/
+            writing-mode: vertical-lr;
+            /*浠庡乏鍚戝彸 浠庡彸鍚戝乏鏄� writing-mode: vertical-rl;*/
+            writing-mode: tb-lr;
+            /*IE娴忚鍣ㄧ殑浠庡乏鍚戝彸 浠庡彸鍚戝乏鏄� writing-mode: tb-rl锛�*/
+        }
+    </style>
+    <script type="text/javascript">
+        
+        $(document).ready(function () {
+            // 鍒涘缓涓や釜鍙橀噺锛屼竴涓暟缁勪腑鐨勬湀鍜屾棩鐨勫悕绉�
+            var monthNames = ["1 鏈�", "2 鏈�", "3 鏈�", "4 鏈�", "5 鏈�", "6 鏈�", "7 鏈�", "8 鏈�", "9 鏈�", "10 鏈�", "11 鏈�", "12 鏈�"];
+            setInterval(function () {
+                var date1 = new Date;
+                var year = date1.getFullYear();
+                var month = date1.getMonth();
+                var day = date1.getDate();
+                var hh = date1.getHours();
+                var mm = date1.getMinutes();
+                var ss = date1.getSeconds();
+                var dayNames = new Array("鏄熸湡鏃�", "鏄熸湡涓�", "鏄熸湡浜�", "鏄熸湡涓�", "鏄熸湡鍥�", "鏄熸湡浜�", "鏄熸湡鍏�");
+                var Stamp = new Date();
+                
+                
+                $('#Date').html(year + "&nbsp;骞�" + " " + monthNames[month] + ' ' + day + "&nbsp;鏃�&nbsp;&nbsp;" + ' ' + dayNames[Stamp.getDay()]);
+                $("#hours").html((hh < 10 ? ("0" + hh) : hh));
+                $("#min").html((mm < 10 ? ("0" + mm) : mm));
+                $("#sec").html((ss < 10 ? ("0" + ss) : ss));
+                
+            }, 1000);
+            
+        });
+        $(function () {
+            var mychart1 = echarts.init(document.getElementById('mychart1'));
+            var mychart2 = echarts.init(document.getElementById('mychart2'));
+            var mychart3 = echarts.init(document.getElementById('mychart3'));
+            var mychart4 = echarts.init(document.getElementById('mychart4'));
+            var mychart5 = echarts.init(document.getElementById('mychart5'));
+            var mychart6 = echarts.init(document.getElementById('mychart6'));
+            var mychart7 = echarts.init(document.getElementById('mychart7'));
+            Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7);
+            //鏍规嵁绐楀彛鐨勫ぇ灏忓彉鍔ㄥ浘琛� --- 閲嶇偣
+            window.onresize = function () {
+                myChart1.resize();
+                myChart2.resize();
+                myChart3.resize();
+                myChart4.resize();
+                myChart5.resize();
+            }
+        })
+        
+        function Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7){
+            const colorList = ['#47A2FF', '#ff9900']
+            option1 = {
+                title: [
+                {
+                    text: '',
+                    subtext: '60%',
+                    textStyle: {
+                        fontSize: 16,
+                        color: '#999',
+                        lineHeight: 20
+                    },
+                    subtextStyle: {
+                        fontSize: 28,
+                        color: '#00c6ff'
+                    },
+                    textAlign: 'center',
+                    left: '50%',
+                    top: '50%'
+                },
+                {
+                    show: true,
+                    text: '杩斿伐鐜囷紙鍏ㄩ儴浜х嚎锛�',
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: '16',
+                    },
+                    textAlign: 'left',
+                    
+                }
+                ],
+                tooltip: {
+                    trigger: 'item',
+                },
+                legend: {
+                    type: 'scroll',
+                    icon: 'pin',
+                    show: false
+                },
+                color: colorList,
+                series: [
+                {
+                    name: '鍗犳瘮',
+                    type: 'pie',
+                    radius: [50, 80],
+                    center: ['50%', '50%'],
+                    center: ['50%', '60%'], 
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: false
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    itemStyle: {
+                        borderWidth: 3,
+                        borderColor: '#000000'
+                    },
+                    data: [
+                    { name: '', value: 60 },
+                    { name: '', value: 40 }
+                    ],
+                }
+                ]
+            };
+            
+            option2 = {
+                title: [
+                {
+                    text: '',
+                    subtext: '30%',
+                    textStyle: {
+                        fontSize: 16,
+                        color: '#999',
+                        lineHeight: 20
+                    },
+                    subtextStyle: {
+                        fontSize: 28,
+                        color: '#00c6ff'
+                    },
+                    textAlign: 'center',
+                    left: '50%',
+                    top: '50%'
+                },
+                {
+                    show: true,
+                    text: '鎬诲畬宸ョ巼',
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: '16',
+                    },
+                    textAlign: 'center',
+                    left: '50%',
+                    top: '5%'
+                }
+                ],
+                tooltip: {
+                    trigger: 'item',
+                },
+                legend: {
+                    type: 'scroll',
+                    icon: 'pin',
+                    show: false
+                },
+                color: colorList,
+                series: [
+                {
+                    name: '鍗犳瘮',
+                    type: 'pie',
+                    radius: [50, 80],
+                    center: ['50%', '50%'],
+                    center: ['50%', '60%'], 
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: false
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    itemStyle: {
+                        borderWidth: 3,
+                        borderColor: '#000000'
+                    },
+                    data: [
+                    { name: '', value: 30 },
+                    { name: '', value: 100-30 }
+                    ],
+                }
+                ]
+            };
+            
+            option3 = {
+                tooltip : {
+                    trigger: 'axis',
+                    axisPointer : {            // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+                        type : 'shadow'        // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+                    }
+                },
+                legend: {
+                    data: ['浠诲姟鏁�', '瀹屾垚鏁�'],
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: 16,
+                        fontFamily: "寰蒋闆呴粦"
+                    }
+                },
+                grid: {
+                    top:'10%',
+                    left: '3%',
+                    right: '4%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis:  {
+                    type: 'value',
+                    max: 1000,
+                    axisTick: {
+                        alignWithLabel: true
+                    },
+                    splitLine:{
+                        show:false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#00c6ff',
+                            type: 'solid', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾�   solid:瀹炵嚎
+                            width: 1, //闅愯棌y杞�
+                        }
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
+                        }
+                    }
+                },
+                yAxis: {
+                    type: 'category',
+                    data: ['杞﹂棿1','杞﹂棿2','杞﹂棿3','杞﹂棿4','杞﹂棿5','杞﹂棿6','杞﹂棿7'],
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#00c6ff',
+                            type: 'solid', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾�   solid:瀹炵嚎
+                            width: 1, //闅愯棌y杞�
+                        }
+                    },
+                    splitLine:{
+                        show:false
+                    },
+                    splitLine: { //缃戞牸绾�
+                        lineStyle: {
+                            color: '#00c6ff',
+                            
+                        },
+                        show: false //闅愯棌鎴栨樉绀�
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
+                        }
+                    }
+                },
+                series: [
+                {
+                    name: '浠诲姟鏁�',
+                    type: 'bar',
+                    stack: '鎬婚噺',
+                    barWidth: 10,
+                    itemStyle:{
+                        normal: {
+                            color: '#47A2FF',
+                            barBorderRadius: [20, 20, 20, 20],
+                        }
+                    },
+                    label: {
+                        normal: {
+                            show: true,
+                            position: 'insideRight'
+                        }
+                    },
+                    z:  10,
+                    data: [320, 302, 301, 334, 390, 330, 320]
+                },
+                {
+                    name: '瀹屾垚鏁�',
+                    type: 'bar',
+                    stack: '鎬婚噺',
+                    barWidth: 10,
+                    itemStyle:{
+                        normal: {
+                            color: '#ff9900',
+                            shadowBlur: [0, 0, 0, 10],
+                            shadowColor: '#ff9900',
+                            barBorderRadius: [20, 20, 20, 20],
+                            shadowOffsetX: 0,
+                        }
+                    },
+                    label: {
+                        normal: {
+                            show: true,
+                            position: 'insideRight',
+                            textStyle: { //鏂囧瓧鏍峰紡
+                                //fontSize:12
+                            }
+                        }
+                    },
+                    z: 5,
+                    data: [120, 132, 101, 134, 90, 230, 210]
+                }
+                ]
+            };
+            
+            option4 = {
+                tooltip: {
+                    trigger: 'item',
+                    formatter: "{a} <br/>{b}鏈� : {c}涓�"
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['8鐐�','9鐐�','10鐐�','11鐐�','12鐐�','13鐐�','14鐐�','15鐐�','16鐐�','17鐐�','18鐐�'],   //鏃堕棿鐐规暟鎹�
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#00c6ff',
+                        },
+                    },
+                    axisTick: {
+                        show: true,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
+                        }
+                    }
+                },
+                yAxis: [{
+                    type: 'value',
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#00c6ff',
+                            width: 0, //闅愯棌y杞�
+                        }
+                    },
+                    splitLine: { //缃戞牸绾�
+                        lineStyle: {
+                            type: 'dotted', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾�   solid:瀹炵嚎
+                        },
+                        show: false //闅愯棌鎴栨樉绀�
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
+                        }
+                    },
+                    splitNumber: 5
+                }],
+                title: {
+                    show: true,
+                    text: '杩斿伐鐜囪秼鍔垮浘锛堝綋鏃ュ叏閮ㄤ骇绾挎眹鎬伙級',
+                    x: 'left',
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: 18,
+                        fotweight: 'normal',
+                        fontFamily: "寰蒋闆呴粦"
+                    }
+                },
+                legend: {
+                    icon: 'line',
+                    data: ['灏忔椂浜ц兘'],
+                    x:'right',      //鍙瀹氬浘渚嬪湪宸︺�佸彸銆佸眳涓�
+                    y:'top',     //鍙瀹氬浘渚嬪湪涓娿�佷笅銆佸眳涓�
+                    //padding:[0,0,0,0],   //鍙瀹氬浘渚媅璺濅笂鏂硅窛绂伙紝璺濆彸鏂硅窛绂伙紝璺濅笅鏂硅窛绂伙紝璺濆乏鏂硅窛绂籡
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: 20,
+                        fontFamily: "寰蒋闆呴粦"
+                    }
+                },
+                series: [
+                {
+                    name: '灏忔椂浜ц兘',
+                    data: [50,80,90,110,130,115,120,109,105,135,125],  //鏃堕棿鐐瑰��
+                    type: 'line',
+                    smooth: true,
+                    itemStyle: {
+                        normal: {
+                            color: 'orange',
+                            lineStyle: {
+                                width: 4, //璁剧疆绾挎潯绮楃粏
+                                shadowColor: 'rgba(255, 94, 91,.1)',
+                                shadowOffsetX: 3,
+                                shadowOffsetY: 5,
+                            }
+                        },
+                    },
+                    textStyle: {
+                        fontFamily: "寰蒋闆呴粦"
+                    }
+                },
+                ]
+            }
+            
+            option5 = {
+                title: {
+                    text: '鎴愬搧浠撳簱鍚炲悙閲忥紙鎸夊ぉ鏌ヨ锛�',
+                    left: '0',
+                    top: 2,
+                    textStyle: {
+                        fontSize: 20,
+                        color: '#00c6ff',
+                        fontFamily: "寰蒋闆呴粦"
+                    },
+                },
+                color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
+                tooltip: {
+                    
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '10%',
+                    containLabel: true
+                },
+                legend: {
+                    left: 'right',
+                    data: ['璁㈠崟鏁�', '鍏ュ簱鏁�'],
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: 16,
+                        fontFamily: "寰蒋闆呴粦"
+                    }
+                    
+                },
+                xAxis: [
+                {
+                    type: 'category',
+                    data:['05-11','05-12','05-13','205-14','05-15','05-16'],
+                    axisTick: {
+                        alignWithLabel: true
+                    },
+                    
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#00c6ff',
+                            type: 'solid', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾�   solid:瀹炵嚎
+                            width: 1, //闅愯棌y杞�
+                        }
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
+                        }
+                    }
+                }
+                ],
+                yAxis: [
+                {
+                    type: 'value',
+                    axisLine: {
+                        show: false,
+                        
+                    },
+                    splitLine: { //缃戞牸绾�
+                        lineStyle: {
+                            color: '#00c6ff',
+                            
+                        },
+                        show: true //闅愯棌鎴栨樉绀�
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
+                        }
+                    }
+                }
+                ],
+                series: [
+                {
+                    name: '璁㈠崟鏁�',
+                    type: 'bar',
+                    barWidth: 15,
+                    data: [100,100,100,100,100,100]
+                },
+                {
+                    name: '鍏ュ簱鏁�',
+                    type: 'bar',
+                    barWidth: 15,
+                    data: [50,50,50,50,50,50]
+                }
+                ]
+            };
+            
+            option6 = {
+                title: {
+                    text: '浜ч攢姣斿垎鏋愶紙鎸夊ぉ鏌ヨ锛�',
+                    left: '30',
+                    top: 2,
+                    textStyle: {
+                        fontSize: 20,
+                        color: '#00c6ff',
+                        fontFamily: "寰蒋闆呴粦"
+                    },
+                },
+                color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
+                tooltip: {
+                    
+                },
+                grid: {
+                    left: '5%',
+                    right: '2%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                legend: {
+                    left: 'right',
+                    data: ['閿�鍞鍗曟暟', '鍏ュ簱鏁�'],
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: 16,
+                        fontFamily: "寰蒋闆呴粦"
+                    }
+                    
+                },
+                xAxis: [
+                {
+                    type: 'category',
+                    data:['05-11','05-12','05-13','205-14','05-15','05-16'],
+                    axisTick: {
+                        alignWithLabel: true
+                    },
+                    
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#00c6ff',
+                            type: 'solid', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾�   solid:瀹炵嚎
+                            width: 1, //闅愯棌y杞�
+                        }
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
+                        }
+                    }
+                }
+                ],
+                yAxis: [
+                {
+                    type: 'value',
+                    axisLine: {
+                        show: false,
+                        
+                    },
+                    splitLine: { //缃戞牸绾�
+                        lineStyle: {
+                            color: '#00c6ff',
+                            
+                        },
+                        show: true //闅愯棌鎴栨樉绀�
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
+                        }
+                    }
+                }
+                ],
+                series: [
+                {
+                    name: '閿�鍞鍗曟暟',
+                    type: 'bar',
+                    barWidth: 15,
+                    data: [100,100,100,100,100,100]
+                },
+                {
+                    name: '鍏ュ簱鏁�',
+                    type: 'bar',
+                    barWidth: 15,
+                    data: [50,50,50,50,50,50]
+                }
+                ]
+            };
+            
+            option7 = {
+                tooltip: {
+                    trigger: 'item',
+                    formatter: "{a} <br/>{b}鏈� : {c}涓�"
+                },
+                grid: {
+                    left: '25',
+                    right: '4%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['8鐐�','9鐐�','10鐐�','11鐐�','12鐐�','13鐐�','14鐐�','15鐐�','16鐐�','17鐐�','18鐐�'],   //鏃堕棿鐐规暟鎹�
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#00c6ff',
+                        },
+                    },
+                    axisTick: {
+                        show: true,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
+                        }
+                    }
+                },
+                yAxis: [{
+                    type: 'value',
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#00c6ff',
+                            width: 0, //闅愯棌y杞�
+                        }
+                    },
+                    splitLine: { //缃戞牸绾�
+                        lineStyle: {
+                            type: 'dotted', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾�   solid:瀹炵嚎
+                        },
+                        show: false //闅愯棌鎴栨樉绀�
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                            fontSize: '16'
+                        }
+                    },
+                    splitNumber: 5
+                }],
+                title: {
+                    show: true,
+                    text: '鐢熶骇鎬绘晥鐜囪秼鍔垮浘锛堝綋鏃ュ叏閮ㄤ骇绾挎眹鎬伙級',
+                    x: 'left',
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: 18,
+                        fotweight: 'normal',
+                        fontFamily: "寰蒋闆呴粦"
+                    },
+                    textAlign: 'left',
+                    left: '20',
+                    top: '0%'
+                },
+                legend: {
+                    icon: 'line',
+                    data: ['灏忔椂浜ц兘'],
+                    x:'right',      //鍙瀹氬浘渚嬪湪宸︺�佸彸銆佸眳涓�
+                    y:'top',     //鍙瀹氬浘渚嬪湪涓娿�佷笅銆佸眳涓�
+                    //padding:[0,0,0,0],   //鍙瀹氬浘渚媅璺濅笂鏂硅窛绂伙紝璺濆彸鏂硅窛绂伙紝璺濅笅鏂硅窛绂伙紝璺濆乏鏂硅窛绂籡
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: 20,
+                        fontFamily: "寰蒋闆呴粦"
+                    }
+                },
+                series: [
+                {
+                    name: '灏忔椂浜ц兘',
+                    data: [50,80,90,110,130,115,120,109,105,135,125],  //鏃堕棿鐐瑰��
+                    type: 'line',
+                    smooth: true,
+                    itemStyle: {
+                        normal: {
+                            color: 'orange',
+                            lineStyle: {
+                                width: 4, //璁剧疆绾挎潯绮楃粏
+                                shadowColor: 'rgba(255, 94, 91,.1)',
+                                shadowOffsetX: 3,
+                                shadowOffsetY: 5,
+                            }
+                        },
+                    },
+                    textStyle: {
+                        fontFamily: "寰蒋闆呴粦"
+                    }
+                },
+                ]
+            }
+            
+            mychart1.setOption(option1);
+            mychart2.setOption(option2);
+            mychart3.setOption(option3);
+            mychart4.setOption(option4);
+            mychart5.setOption(option5);
+            mychart6.setOption(option6);
+            mychart7.setOption(option7);
+        }
+        
+    </script>
+</head>
+
+<body>
+    <div class='title'>闊╃數鐢熶骇璁″垝鐪嬫澘</div>
+    <div class="clock">
+        <ul>
+            <li id="Date"></li>
+            <li id="hours"> </li>
+            <li id="point">:</li>
+            <li id="min"> </li>
+            <li id="point">:</li>
+            <li id="sec"> </li>
+        </ul>
+        
+    </div>
+    <div  class="col-sm-8 top">
+        <div class="col-sm-6 top">
+            <div id="mychart1"></div>
+        </div>
+        <div class="col-sm-3 top">
+            <ul id="cList">
+                <li style="font-size:24px;">璁㈠崟閲�</li>
+                <li style="font-size:24px;"><span id="OrderQty">10000</span></li>
+                <li style="font-size:24px;">浜ч噺</li>
+                <li style="font-size:24px;"><span id="ProductQty">8000</span></li>
+            </ul>
+        </div>
+        <div class="col-sm-3 top">
+            <div id="mychart2"></div>
+        </div>
+    </div>
+    <div class="col-sm-4 top">
+        <div id="mychart3"></div>
+    </div>
+    
+    <div class="col-sm-8 bottom">
+        <div class="col-sm-6 bottom_left">
+            <div class="col-sm-12 bottom_left">
+                <div id="mychart4"></div>
+            </div>
+            <div class="col-sm-12 bottom_left">
+                <div id="mychart5"></div>
+            </div>
+        </div>
+        <div class="col-sm-6 bottom">
+            <div id="mychart6"></div>
+        </div>
+    </div>
+    <div class="col-sm-4 bottom">
+        <div id="mychart7"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

--
Gitblit v1.9.1