| | |
| | | <script src="js/jquery.SuperSlide.2.1.3.js"></script> |
| | | <script src='js/template.js'></script> |
| | | <script src="js/jquery.qrcode.min.js"></script> |
| | | <script src="js/webConfig.js"></script> |
| | | <style> |
| | | .clock { |
| | | font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; |
| | |
| | | margin-top: -75px; |
| | | margin-right: 5px; |
| | | color: #09d1ea; |
| | | |
| | | } |
| | | |
| | | .clock #Date { |
| | | text-align: center; |
| | | 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 { |
| | | 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 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; |
| | |
| | | } |
| | | |
| | | .title { |
| | | |
| | | font-size: 44px; |
| | | font-family: PingFangSC; |
| | | font-weight: 500; |
| | |
| | | float: left; |
| | | } |
| | | |
| | | #cList1 li { |
| | | float: left; |
| | | height: 450px; |
| | | color: #00c6ff; |
| | | font-size: 20px; |
| | | /*文字居中*/ |
| | | text-align: center; |
| | | /*display: flex;*/ |
| | | } |
| | | #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 span { |
| | | /*文字居中*/ |
| | | display: inline-block; |
| | | height: 100%; |
| | | /*文字居中*/ |
| | | /*文字竖排*/ |
| | | writing-mode: vertical-lr; |
| | | /*从左向右 从右向左是 writing-mode: vertical-rl;*/ |
| | | writing-mode: tb-lr; |
| | | /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/ |
| | | } |
| | | |
| | | #cList2 { |
| | | height: 450px; |
| | |
| | | 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, |
| | |
| | | var num1 = 0; |
| | | var TLProgress = 0; //退料率 |
| | | var CallData = []; //饼图结果数组 |
| | | |
| | | var CAllDataX = []; //柱状图x轴 |
| | | var CAllDataXval = []; //柱状图y轴 |
| | | $(document).ready(function () { |
| | |
| | | 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); |
| | | interval2 = setInterval(function () { |
| | | CallData = []; |
| | | CAllDataX = []; |
| | | CAllDataXval = []; |
| | | Chart(mychart1, mychart2); |
| | | }, 20000); |
| | | //根据窗口的大小变动图表 --- 重点 |
| | | // window.onresize = function () { |
| | | // myChart1.resize(); |
| | | // myChart2.resize(); |
| | | // } |
| | | window.onresize = function () { |
| | | mychart1.resize(); |
| | | mychart2.resize(); |
| | | } |
| | | }) |
| | | |
| | | |
| | | function Chart(mychart1, mychart2) { |
| | | $.ajax({ |
| | | url: "http://localhost:12298/api/loaddata/SearchGetWorkStepBillPie", |
| | | dataType: "JSON", |
| | | async: false,//使用同步的方式,true为异步方式 |
| | | type: "Get", |
| | | data: { "CallHouseCode": CallHouseCode }, |
| | | success: function (data) { |
| | | //饼图 |
| | | CallData.push(data.Table[0]["column3"]); |
| | | CallData.push(data.Table[0]["column4"]); |
| | | CallData.push(data.Table[0]["column5"]); |
| | | CallData.push(data.Table[0]["column6"]); |
| | | CallData.push(data.Table[0]["column7"]); |
| | | //柱状图 |
| | | $.each(data.Table1 ,function (index, val) { |
| | | CAllDataX.push(val.countDay); |
| | | CAllDataXval.push(val.HName); |
| | | }); |
| | | }, |
| | | error: function (data) { |
| | | $.ajax({ |
| | | url: GetWEBURL() + "/loaddata/SearchGetWorkStepBillPie", |
| | | dataType: "JSON", |
| | | async: false,//使用同步的方式,true为异步方式 |
| | | type: "Get", |
| | | data: { "CallHouseCode": CallHouseCode }, |
| | | success: function (data) { |
| | | //饼图 |
| | | CallData.push(data.Table[0]["column3"]); |
| | | CallData.push(data.Table[0]["column4"]); |
| | | CallData.push(data.Table[0]["column5"]); |
| | | CallData.push(data.Table[0]["column6"]); |
| | | CallData.push(data.Table[0]["column7"]); |
| | | //柱状图 |
| | | $.each(data.Table1, function (index, val) { |
| | | CAllDataX.push(val.countDay); |
| | | CAllDataXval.push(val.HName); |
| | | }); |
| | | }, |
| | | error: function (data) { |
| | | |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | |
| | | const colorList = ['#91CC75 ', '#5470C6', '#73C0DE', '#EE6666', '#FAC858'] |
| | | option1 = { |
| | |
| | | borderColor: '#000000' |
| | | }, |
| | | data: [ |
| | | { value: CallData[0], name: '运行' }, |
| | | { value: CallData[1], name: '停机' }, |
| | | { value: CallData[2], name: '未开机' }, |
| | | { value: CallData[3], name: '维修中' }, |
| | | { value: CallData[4], name: '保养中' } |
| | | { value: CallData[0], name: '工作' }, |
| | | { value: CallData[1], name: '待机' }, |
| | | { value: CallData[2], name: '离线' }, |
| | | { value: CallData[3], name: '报警' }, |
| | | { value: CallData[4], name: '维修' } |
| | | ], |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | |
| | | option2 = { |
| | | title: { |
| | | text: '总产值', |
| | |
| | | |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '10%', |
| | | containLabel: true |
| | | left: "20%",//grid 组件离容器左侧的距离。 |
| | | right: "30px", |
| | | bottom: "20%" // |
| | | }, |
| | | legend: { |
| | | left: 'right', |
| | |
| | | axisTick: { |
| | | alignWithLabel: true |
| | | }, |
| | | |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | |
| | | }, |
| | | axisLabel: { |
| | | show: true, |
| | | interval: 0, //控制X轴刻度全部显示 |
| | | rotate: 45, //倾斜角度 |
| | | textStyle: { |
| | | color: '#00c6ff', //坐标值得具体的颜色 |
| | | fontSize: '16' |
| | |
| | | } |
| | | function TopData() { |
| | | $('#tb_order').bootstrapTable({ |
| | | url: 'http://localhost:12298/api/loaddata/EquipMentData', |
| | | url: GetWEBURL() + '/loaddata/EquipMentData', |
| | | //data: dataJson, |
| | | method: 'get', //请求方式(*) |
| | | dataType: "json", |
| | |
| | | columns: [ |
| | | { field: 'column1', title: '设备数量', align: "left" }, |
| | | { field: 'column2', title: '开机率', align: "left" }, |
| | | { field: 'column3', title: '运行', align: "left" }, |
| | | { field: 'column4', title: '停机', align: "left" }, |
| | | { field: 'column5', title: '未开机', align: "left" }, |
| | | { field: 'column6', title: '维修中', align: "left" }, |
| | | { field: 'column7', title: '保养中', align: "left" } |
| | | { field: 'column3', title: '工作', align: "left" }, |
| | | { field: 'column4', title: '待机', align: "left" }, |
| | | { field: 'column5', title: '离线', align: "left" }, |
| | | { field: 'column6', title: '报警', align: "left" }, |
| | | { field: 'column7', title: '维修', align: "left" } |
| | | //{ field: 'column7', title: '保养', align: "left" } |
| | | ], |
| | | onClickRow: function (row, $element) { |
| | | |
| | |
| | | }) |
| | | } |
| | | function BottomData() { |
| | | $.ajax({ |
| | | url: "http://localhost:12298/api/loaddata/SearchGetWorkStepBillList", |
| | | dataType: "JSON", |
| | | async: false,//使用同步的方式,true为异步方式 |
| | | type: "Get", |
| | | data: { "CallHouseCode": CallHouseCode }, |
| | | success: function (data) { |
| | | for (var i = 0; i < data.Table.length; i++) { |
| | | var html1 = ''; |
| | | html1 += '<div class="col-sm-12 col-md-2" >'; |
| | | if (i == 2 || i == 4 || i == 6) |
| | | html1 += '<div class="cns" id="bs' + (i + 1) + '" style="background:#91CC75" >'; |
| | | else if (i % 2 == 0) |
| | | html1 += '<div class="cns" id="bs' + (i + 1) + '" style="">'; |
| | | else |
| | | html1 += '<div class="cns" id="bs' + (i + 1) + '" style="background:#EE6666; color:#FFF">'; |
| | | $.ajax({ |
| | | url: GetWEBURL() + "/loaddata/SearchGetWorkStepBillList", |
| | | dataType: "JSON", |
| | | async: false,//使用同步的方式,true为异步方式 |
| | | type: "Get", |
| | | data: { "CallHouseCode": CallHouseCode }, |
| | | success: function (data) { |
| | | for (var i = 0; i < data.Table.length; i++) { |
| | | var html1 = ''; |
| | | |
| | | html1 += '<dl>'; |
| | | //html1 += '<img src="img/device.png">' |
| | | html1 += '<dd class="tcenter">'; |
| | | html1 += '<h1><span>设备名称:</span><span id="ptn' + (i + 1) + '">' + data.Table[i]["设备名称"] + '</span></h1>'; |
| | | html1 += '<h1><span>工单:' + data.Table[i]["工单"] + '</span></h1>'; |
| | | html1 += '<h1><span>产品名称:' + data.Table[i]["产品名称"] + '</span><span id="pts' + (i + 1) + '">' + '' + '</span></h1>'; |
| | | html1 += '<h1><span>产品规格型号:' + data.Table[i]["产品规格型号"] + '</span><span id="pts' + (i + 1) + '">' + '' + '</span></h1>'; |
| | | html1 += '<h1><span>计划数量:</span><span>' + data.Table[i]["计划数量"] + '</span><span style="margin-left:20px;">汇报总数:</span><span>' + data.Table[i]["汇报总数"] + '</span></h1>'; |
| | | html1 += '<h1><span>当前状态:</span><span class="gj_icon color_border1"></span>'; |
| | | html1 += '</div > '; |
| | | html1 += '</div>'; |
| | | html1 += '</dd>'; |
| | | html1 += '</dl>'; |
| | | html1 += '</div>'; |
| | | html1 += '</div>'; |
| | | $("#btomleft").append(html1); |
| | | } |
| | | }, |
| | | error: function (data) { |
| | | html1 += '<div class="col-sm-12 col-md-2" >'; |
| | | if (data.Table[i]["设备状态"] == '离线') |
| | | html1 += '<div class="cns" id="bs' + (i + 1) + '" style="background:#9A9999">'; |
| | | else if (data.Table[i]["设备状态"] == '工作') |
| | | html1 += '<div class="cns" id="bs' + (i + 1) + '" style="background:#259D27">'; |
| | | else if (data.Table[i]["设备状态"] == '待机') |
| | | html1 += '<div class="cns" id="bs' + (i + 1) + '" style="background:#199687">'; |
| | | else if (data.Table[i]["设备状态"] == '报警') |
| | | html1 += '<div class="cns" id="bs' + (i + 1) + '" style="background:#FC522A">'; |
| | | |
| | | } |
| | | }) |
| | | html1 += '<dl>'; |
| | | //html1 += '<img src="img/device.png">' |
| | | html1 += '<dd class="tcenter">'; |
| | | html1 += '<h1><span></span><span id="ptn' + (i + 1) + '">' + data.Table[i]["设备名称"] + '</span></h1>'; |
| | | html1 += '<h1><span>工单:' + data.Table[i]["工单"] + '</span></h1>'; |
| | | html1 += '<h1><span>' + data.Table[i]["产品编码"] + '</span><span id="pts' + (i + 1) + '">' + '' + '</span></h1>'; |
| | | html1 += '<h1><span>' + data.Table[i]["产品名称"] + '</span><span id="pts' + (i + 1) + '">' + '' + '</span></h1>'; |
| | | html1 += '<h1><span>计划数量:</span><span>' + data.Table[i]["计划数量"] + '</span><span style="margin-left:20px;">汇报总数:</span><span>' + data.Table[i]["汇报总数"] + '</span></h1>'; |
| | | html1 += '<h1><span>设备状态:' + data.Table[i]["设备状态"] + '</span><span id="pts' + (i + 1) + '">' + '' + '</span></h1>'; |
| | | html1 += '</div > '; |
| | | html1 += '</div>'; |
| | | html1 += '</dd>'; |
| | | html1 += '</dl>'; |
| | | html1 += '</div>'; |
| | | html1 += '</div>'; |
| | | $("#btomleft").append(html1); |
| | | } |
| | | }, |
| | | error: function (data) { |
| | | |
| | | } |
| | | }) |
| | | |
| | | //for (var i = 0; i < 20; i++) { |
| | | // var html1 = ''; |