| | |
| | | <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> |
| | | <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.SuperSlide.2.1.3.js"></script> |
| | | <script src='js/template.js'></script> |
| | | <script src="js/jquery.qrcode.min.js"></script> |
| | | <style> |
| | | <script src="js/webConfig.js"></script> |
| | | <style> |
| | | .clock { |
| | | font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; |
| | | font-size: 20px; |
| | |
| | | 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; |
| | | } |
| | | |
| | | |
| | | .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; |
| | |
| | | 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{ |
| | | |
| | | .left { |
| | | /* border: 1px solid #00c6ff; */ |
| | | height: 900px; |
| | | } |
| | | .right{ |
| | | |
| | | .right { |
| | | /* border: 1px solid #00c6ff; */ |
| | | height: 300px; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | .col-sm-12, |
| | | .col-sm-2, |
| | | .col-sm-3, |
| | |
| | | padding-right: 0px; |
| | | padding-left: 0px; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | #mychart1, |
| | | #mychart2, |
| | | #mychart3{ |
| | | #mychart3 { |
| | | width: 100%; |
| | | border: none; |
| | | height: 300px; |
| | | } |
| | | |
| | | |
| | | #cList { |
| | | margin: 0% auto; |
| | | color: #00c6ff; |
| | | } |
| | | |
| | | #cList li { |
| | | margin: 20px 0px; |
| | | text-align:left; |
| | | font-size: 18px; |
| | | margin-left: 25%; |
| | | } |
| | | |
| | | |
| | | #cList li { |
| | | margin: 20px 0px; |
| | | text-align: left; |
| | | font-size: 18px; |
| | | margin-left: 25%; |
| | | } |
| | | |
| | | #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;*/ |
| | | } |
| | | |
| | | |
| | | #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; |
| | |
| | | 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 { |
| | | |
| | | .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; |
| | |
| | | /* 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 { |
| | | |
| | | .pull-right, .fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination { |
| | | display: none; |
| | | } |
| | | </style> |
| | | <script type="text/javascript"> |
| | | //参数配置 |
| | | var HouseCode='509'; //仓库编码 |
| | | |
| | | |
| | | var HouseCode = '509'; //仓库编码 |
| | | |
| | | |
| | | var interval;//计时器 |
| | | var interval1;//计时器 |
| | | var num = 0; |
| | | var LackMastProgress=[]; //缺料率数据数组 |
| | | var BadProgress=[]; //来料不良率数据数组 |
| | | var ToDayDt=[]; //今日不良对比时间数组 |
| | | var GoodQty=[]; //今日不良对比合格数数组 |
| | | var BadQty=[]; //今日不良对比不良数数组 |
| | | var LackMastProgress = []; //缺料率数据数组 |
| | | var BadProgress = []; //来料不良率数据数组 |
| | | var ToDayDt = []; //今日不良对比时间数组 |
| | | var GoodQty = []; //今日不良对比合格数数组 |
| | | var BadQty = []; //今日不良对比不良数数组 |
| | | $(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')); |
| | | var mychart3 = echarts.init(document.getElementById('mychart3')); |
| | | |
| | | Chart(mychart1,mychart2,mychart3); |
| | | |
| | | Chart(mychart1, mychart2, mychart3); |
| | | DataTable(); |
| | | // 定时器 |
| | | interval = setInterval(function () { |
| | | num = 0; |
| | | LackMastProgress=[]; //缺料率数据数组 |
| | | BadProgress=[]; //来料不良率数据数组 |
| | | ToDayDt=[]; //今日不良对比时间数组 |
| | | GoodQty=[]; //今日不良对比合格数数组 |
| | | BadQty=[]; //今日不良对比不良数数组 |
| | | LackMastProgress = []; //缺料率数据数组 |
| | | BadProgress = []; //来料不良率数据数组 |
| | | ToDayDt = []; //今日不良对比时间数组 |
| | | GoodQty = []; //今日不良对比合格数数组 |
| | | BadQty = []; //今日不良对比不良数数组 |
| | | Chart(mychart1, mychart2, mychart3, mychart4, mychart5); |
| | | }, 20000); |
| | | interval1=setInterval(function () { |
| | | interval1 = setInterval(function () { |
| | | $("#tb_order").bootstrapTable('refresh'); |
| | | }, 10000); |
| | | //根据窗口的大小变动图表 --- 重点 |
| | | window.onresize = function () { |
| | | myChart1.resize(); |
| | | myChart2.resize(); |
| | | myChart3.resize(); |
| | | //根据浏览器大小改变大小 |
| | | window.onresize = () => { |
| | | mychart1.resize(); |
| | | mychart2.resize(); |
| | | mychart3.resize(); |
| | | } |
| | | }) |
| | | |
| | | function Chart(mychart1,mychart2,mychart3){ |
| | | |
| | | function Chart(mychart1, mychart2, mychart3) { |
| | | $.ajax({ |
| | | url: "http://localhost:53860/api/loaddata/LackMatsData", |
| | | url: GetWEBURL() + "/loaddata/LackMatsData", |
| | | dataType: "JSON", |
| | | async: false,//使用同步的方式,true为异步方式 |
| | | type: "Get", |
| | | data:{"HouseCode":HouseCode}, |
| | | success: function (data) { |
| | | data: { "HouseCode": HouseCode }, |
| | | success: function (data) { |
| | | //订单信息 |
| | | switch (data.data[0][0].Statu) { |
| | | case '1': |
| | | $("#Stus").html("计划"); |
| | | break; |
| | | $("#Stus").html("计划"); |
| | | break; |
| | | case '2': |
| | | $("#Stus").html("计划确认"); |
| | | break; |
| | | $("#Stus").html("计划确认"); |
| | | break; |
| | | case '3': |
| | | $("#Stus").html("下达"); |
| | | break; |
| | | $("#Stus").html("下达"); |
| | | break; |
| | | case '4': |
| | | $("#Stus").html("开工"); |
| | | break; |
| | | $("#Stus").html("开工"); |
| | | break; |
| | | case '5': |
| | | $("#Stus").html("完工"); |
| | | break; |
| | | $("#Stus").html("完工"); |
| | | break; |
| | | case '6': |
| | | $("#Stus").html("结案"); |
| | | break; |
| | | $("#Stus").html("结案"); |
| | | break; |
| | | case '7': |
| | | $("#Stus").html("结算"); |
| | | default: |
| | | $("#Stus").html("结算"); |
| | | default: |
| | | } |
| | | $("#OrderQty").html(parseFloat(data.data[0][0].ZQty).toFixed(0)); |
| | | $("#NetQty").html(parseFloat(data.data[0][0].EmptQty).toFixed(0)); |
| | |
| | | $("#MatsQty").html(parseFloat(data.data[0][0].LackMastQty).toFixed(0)); |
| | | $("#WayQty").html(parseFloat(data.data[0][0].PuchQty).toFixed(0)); |
| | | $("#NoOrderQty").html(parseFloat(data.data[0][0].NoOrderQty).toFixed(0)); |
| | | |
| | | |
| | | //缺料率 |
| | | LackMastProgress.push(data.data[1][0].LackMastProgress); |
| | | //来料不良率 |
| | |
| | | $.each(data.data[3], function (index, val) { |
| | | ToDayDt.push(val.hour.substring(5)); |
| | | GoodQty.push(parseFloat(val.GoodQty).toFixed(0)); |
| | | BadQty.push(parseFloat(val.BadQty).toFixed(0)); |
| | | BadQty.push(parseFloat(val.BadQty).toFixed(0)); |
| | | }); |
| | | }, |
| | | error: function (data) { |
| | | |
| | | |
| | | } |
| | | }) |
| | | |
| | | |
| | | const colorList = ['#47A2FF', '#ff9900'] |
| | | option1 = { |
| | | title: [ |
| | | { |
| | | text: '', |
| | | subtext: LackMastProgress+'%', |
| | | textStyle: { |
| | | fontSize: 16, |
| | | color: '#999', |
| | | lineHeight: 20 |
| | | { |
| | | text: '', |
| | | subtext: LackMastProgress + '%', |
| | | textStyle: { |
| | | fontSize: 16, |
| | | color: '#999', |
| | | lineHeight: 20 |
| | | }, |
| | | subtextStyle: { |
| | | fontSize: 28, |
| | | color: '#00c6ff' |
| | | }, |
| | | textAlign: 'center', |
| | | left: '50%', |
| | | top: '50%' |
| | | }, |
| | | 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%' |
| | | } |
| | | { |
| | | 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%'], |
| | | center: ['50%', '60%'], |
| | | avoidLabelOverlap: false, |
| | | label: { |
| | | show: false |
| | | }, |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 3, |
| | | borderColor: '#000000' |
| | | }, |
| | | data: [ |
| | | { name: '', value: LackMastProgress }, |
| | | { name: '', value: 100-LackMastProgress } |
| | | ], |
| | | } |
| | | { |
| | | 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: LackMastProgress }, |
| | | { name: '', value: 100 - LackMastProgress } |
| | | ], |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | |
| | | option2 = { |
| | | title: [ |
| | | { |
| | | text: '', |
| | | subtext: BadProgress+'%', |
| | | textStyle: { |
| | | fontSize: 16, |
| | | color: '#999', |
| | | lineHeight: 20 |
| | | { |
| | | text: '', |
| | | subtext: BadProgress + '%', |
| | | textStyle: { |
| | | fontSize: 16, |
| | | color: '#999', |
| | | lineHeight: 20 |
| | | }, |
| | | subtextStyle: { |
| | | fontSize: 28, |
| | | color: '#00c6ff' |
| | | }, |
| | | textAlign: 'center', |
| | | left: '50%', |
| | | top: '50%' |
| | | }, |
| | | 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%' |
| | | } |
| | | { |
| | | 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%'], |
| | | center: ['50%', '60%'], |
| | | avoidLabelOverlap: false, |
| | | label: { |
| | | show: false |
| | | }, |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 3, |
| | | borderColor: '#000000' |
| | | }, |
| | | data: [ |
| | | { name: '', value: BadProgress }, |
| | | { name: '', value: 100-BadProgress } |
| | | ], |
| | | } |
| | | { |
| | | 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: BadProgress }, |
| | | { name: '', value: 100 - BadProgress } |
| | | ], |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | |
| | | option3 = { |
| | | title: { |
| | | text: '近日不良对比', |
| | |
| | | }, |
| | | color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'], |
| | | tooltip: { |
| | | |
| | | |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | |
| | | fontSize: 16, |
| | | fontFamily: "微软雅黑" |
| | | } |
| | | |
| | | |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | data:ToDayDt, |
| | | 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: ToDayDt, |
| | | 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', |
| | | |
| | | { |
| | | type: 'value', |
| | | axisLine: { |
| | | show: false, |
| | | |
| | | }, |
| | | show: true //隐藏或显示 |
| | | }, |
| | | axisLabel: { |
| | | textStyle: { |
| | | color: '#00c6ff', //坐标值得具体的颜色 |
| | | fontSize: '16' |
| | | splitLine: { //网格线 |
| | | lineStyle: { |
| | | color: '#00c6ff', |
| | | |
| | | }, |
| | | show: true //隐藏或显示 |
| | | }, |
| | | axisLabel: { |
| | | textStyle: { |
| | | color: '#00c6ff', //坐标值得具体的颜色 |
| | | fontSize: '16' |
| | | } |
| | | } |
| | | } |
| | | } |
| | | ], |
| | | series: [ |
| | | { |
| | | name: '合格数', |
| | | type: 'bar', |
| | | barWidth: 15, |
| | | data: GoodQty |
| | | }, |
| | | { |
| | | name: '不良数', |
| | | type: 'bar', |
| | | barWidth: 15, |
| | | data: BadQty |
| | | } |
| | | { |
| | | name: '合格数', |
| | | type: 'bar', |
| | | barWidth: 15, |
| | | data: GoodQty |
| | | }, |
| | | { |
| | | name: '不良数', |
| | | type: 'bar', |
| | | barWidth: 15, |
| | | data: BadQty |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | |
| | | |
| | | |
| | | mychart1.setOption(option1); |
| | | mychart2.setOption(option2); |
| | | mychart3.setOption(option3); |
| | | } |
| | | |
| | | |
| | | function DataTable() { |
| | | |
| | | |
| | | $('#tb_order').bootstrapTable({ |
| | | url: 'http://localhost:53860/api/loaddata/LackMatsTableData', |
| | | url: GetWEBURL() + '/loaddata/LackMatsTableData', |
| | | //data: dataJson, |
| | | method: 'get', //请求方式(*) |
| | | dataType: "json", |
| | | queryParams :queryParams, |
| | | queryParams: queryParams, |
| | | striped: false, //是否显示行间隔色 |
| | | cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) |
| | | pagination: 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: '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: 'LackMastQty', title: '缺料数量', align: "left", formatter: function (value, row, index) { |
| | | return parseFloat(value).toFixed(2); |
| | | } |
| | | }, |
| | | { |
| | | field: 'KQty', title: '库存数量', align: "left", formatter: function (value, row, index) { |
| | | return parseFloat(value).toFixed(2); |
| | | } |
| | | }, |
| | | { |
| | | field: 'EmpQty', title: '占用数量', align: "left", formatter: function (value, row, index) { |
| | | return parseFloat(value).toFixed(2); |
| | | } |
| | | }, |
| | | { |
| | | field: 'AVAILQTY', title: '剩余可用数量', align: "left", formatter: function (value, row, index) { |
| | | var res = row.KQty - row.EmpQty; |
| | | return parseFloat(res).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: 'SupQty', title: '需求量', align: "left", formatter: function (value, row, index) { |
| | | return parseFloat(value).toFixed(2); |
| | | } |
| | | }, |
| | | { |
| | | field: 'ToDaySupQty', title: '本日求量', align: "left", formatter: function (value, row, index) { |
| | | return parseFloat(value).toFixed(2); |
| | | } |
| | | } |
| | | }}, |
| | | { 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: 'LackMastQty', title: '缺料数量', align: "left" , formatter: function (value, row, index) { |
| | | return parseFloat(value).toFixed(2); |
| | | }}, |
| | | { field: 'KQty', title: '库存数量', align: "left", formatter: function (value, row, index) { |
| | | return parseFloat(value).toFixed(2); |
| | | } }, |
| | | { field: 'EmpQty', title: '占用数量', align: "left", formatter: function (value, row, index) { |
| | | return parseFloat(value).toFixed(2); |
| | | } }, |
| | | { field: 'AVAILQTY', title: '剩余可用数量', align: "left" , formatter: function (value, row, index) { |
| | | var res = row.KQty -row.EmpQty; |
| | | return parseFloat(res).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: 'SupQty', title: '需求量', align: "left" , formatter: function (value, row, index) { |
| | | return parseFloat(value).toFixed(2); |
| | | }}, |
| | | { field: 'ToDaySupQty', 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)/ 20 |
| | | var num_total = (row.total) / 20 |
| | | if (num >= num_total) { |
| | | num = 0 |
| | | } |
| | | //var a = $('#tb_order').bootstrapTable('getSelections'); |
| | | } |
| | | |
| | | |
| | | }) |
| | | } |
| | | //得到查询的参数 |
| | | function queryParams(params) { |
| | | num += 1; |
| | | var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 |
| | | HouseCode:HouseCode, |
| | | HouseCode: HouseCode, |
| | | limit: params.limit, //页面大小 |
| | | offset: num, //页码 |
| | | }; |
| | |
| | | </head> |
| | | |
| | | <body> |
| | | <div class='title'>韩电缺料看板</div> |
| | | <div class='title'>缺料看板</div> |
| | | <div class="clock"> |
| | | <ul> |
| | | <li id="Date"></li> |
| | |
| | | <div class="col-sm-4 right"> |
| | | <div class="col-sm-6 right"> |
| | | <ul id="cList"> |
| | | <li>状态:<span id="Stus"></span></li> |
| | | <li style="font-size:24px;color: #3bff72;">状态</li> |
| | | <li>总订单:<span id="OrderQty">0</span></li> |
| | | <li>净需求:<span id="NetQty">0</span></li> |
| | | <li>总库存:<span id="SumQty">0</span></li> |