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 + " 骞�" + " " + monthNames[month] + ' ' + day + " 鏃� " + ' ' + 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 + " 骞�" + " " + monthNames[month] + ' ' + day + " 鏃� " + ' ' + 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 + " 骞�" + " " + monthNames[month] + ' ' + day + " 鏃� " + ' ' + 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