| | |
| | | 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; |
| | |
| | | margin-left: 15px; |
| | | position: relative; |
| | | } |
| | | |
| | | |
| | | .clock ul li { |
| | | display: inline; |
| | | font-size: 24px; |
| | |
| | | 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; |
| | |
| | | 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, |
| | |
| | | /* border: 1px solid #00c6ff; */ |
| | | height: 450px; |
| | | } |
| | | |
| | | |
| | | #cTitle { |
| | | width: 50px; |
| | | height: 450px; |
| | |
| | | color: #00c6ff; |
| | | border: 1px solid #333 |
| | | } |
| | | |
| | | |
| | | .col-sm-12, |
| | | .col-sm-2, |
| | | .col-sm-3, |
| | |
| | | padding-right: 0px; |
| | | padding-left: 0px; |
| | | } |
| | | |
| | | |
| | | #mychart1, |
| | | #mychart2 { |
| | | width: 100%; |
| | | border: none; |
| | | height: 450px; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | table tr td { |
| | | text-align: center; |
| | | vertical-align: middle !important; |
| | |
| | | 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>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; |
| | |
| | | /* border: 1px solid #464646; */ |
| | | border: none; |
| | | } |
| | | |
| | | |
| | | #tb_order, |
| | | #tb_order1 tr td { |
| | | text-align: center; |
| | |
| | | /* 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; |
| | |
| | | /*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 月"]; |
| | |
| | | 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', |
| | |
| | | }, |
| | | 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: '近日配送率', |
| | |
| | | }, |
| | | color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'], |
| | | tooltip: { |
| | | |
| | | |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | |
| | | }, |
| | | 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, //是否显示分页(*) |
| | |
| | | search: false, //是否启用搜索框 |
| | | sidePagination: "server", //分页方式:client客户端分页,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", //分页方式:client客户端分页,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", //分页方式:client客户端分页,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> |
| | |
| | | <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> |