123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>集控室管理</title>
- <meta name="renderer" content="webkit">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="Cache" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache, must-revalidate">
- <meta http-equiv="expires" content="0">
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <link rel="stylesheet" href="../../css/element.css">
- <link rel="stylesheet" href="../../css/style.css">
- <link rel="stylesheet" id="linkSource" href="../../css/base.css">
- <script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="../../js/yz/init.js" type="text/javascript" charset="utf-8"></script>
- <script src="../../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="../../js/pako.js"></script>
- <script type="text/javascript">
- document.write('<script src="../../js/yz/shipLi.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- document.write('<script src="../../js/yz/defailt.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- document.write('<script src="../../js/yz/ajax.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- checkLogin();
- </script>
- </head>
- <style type="text/css">
- *{
- margin: 0;
- padding: 0;
- }
- body {
- color: #fff;
- height: 100%;
- background-color: #103151;
- }
- div,td {
- box-sizing: border-box;
- }
- .infoLi{
- width: 50%;
- line-height:19px;
- font-size: 13px;
- padding-left:18px;
- color: rgba(255,255,255,0.7);
- border-right: 1px solid #797979;
- border-bottom: 1px solid #797979;
- }
- .infoLi:nth-child(even){
- border-right:none;
- }
- .infoLi>div{
- display: flex;
- }
- .infoLi>div>div:first-child{
- width: 50px;
- text-align: right;
- padding-right: 15px;
- }
- .title{
- color: #0081ff;
- font-size: 16px;
- font-weight: 600;
- justify-content: center;
- padding: 9px 0;
- }
- .beng_box{
- box-sizing: border-box;
- width: 100%;
- padding:6px;
- font-size: 13px;
- margin-bottom: 10px;
- background-color: rgba(82,152,159,0.6);
- }
- .beng_box>div:last-child{
- text-align: center;
- margin-top: 4px;
- font-size: 14px;
- }
- .beng_box span{
- letter-spacing:4px;
- font-size: 24px;
- font-weight: bold;
- color: #fbbd08;
- margin-right: 6px;
- }
- .numbox{
- font-size: 16px;
- font-weight: bold;
- color: #fbbd08;
- margin-right: 5px;
- }
- .numbox+span{
- font-size: 12px;
- }
- .bg-theme-son{
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 5px 10px;
- color: rgba(255,255,255,0.8);
- }
- .bg-theme-son .iconfont.act{
- transform:rotate(90deg);
- transition:transform 0.3s linear;
- }
- .check_+span{
- font-size: 13px;
- }
- </style>
- <body>
- <div class="topParen">
- <div class="topBox">
- <div>货控室管理</div>
- <i class="iconfont icon-left text-white" onclick="javascript:history.back(-1);"></i>
- </div>
- <div class="tabli">
- <div class="yz_this" name="oneEng">货舱</div>
- <div name="twoEng">泵舱</div>
- </div>
- <div class="hk_inf oneEng">
- <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
- <div class="bg-theme-son">
- <span>货舱压力、液位、温度</span>
- </div>
- <div class="flex flex-wrap" id="_View">
-
- </div>
- </div>
- </div>
- <div class="hk_inf twoEng" style="display: none;">
- <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
- <div class="bg-theme-son">
- <span>泵进出口压力</span>
- <span class="iconfont icon-right act"></span>
- </div>
- <div>
- <div class="flex padding-sm byli">
- <div class="flex text-grey" onclick="yaliSta(0)">
- <div class="check_"></div><span style="line-height: 14px;">进口压力</span>
- </div>
- <div class="flex text-grey margin-lr-lg" onclick="yaliSta(1)">
- <div class="check_"></div><span style="line-height: 14px;">出口压力</span>
- </div>
- </div>
- <div class="flex justify-around">
- <div style="width: 46%;">
- <div class="beng_box">
- <div>1#货油泵</div>
- <div><span id="beng_1">0</span>MPa</div>
- </div>
- <div class="beng_box">
- <div>2#货油泵</div>
- <div><span id="beng_2">0</span>MPa</div>
- </div>
- <div class="beng_box">
- <div>洗舱泵</div>
- <div><span id="beng_3">0</span>MPa</div>
- </div>
- </div>
- <div style="width: 46%;">
- <div class="beng_box">
- <div>1#压载泵</div>
- <div><span id="beng_4">0</span>MPa</div>
- </div>
- <div class="beng_box">
- <div>2#压载泵</div>
- <div><span id="beng_5">0</span>MPa</div>
- </div>
- <div class="beng_box">
- <div>扫舱泵</div>
- <div><span id="beng_6">0</span>MPa</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
- <div class="bg-theme-son">
- <span>可燃气体</span>
- <span class="iconfont icon-right act"></span>
- </div>
- <div class="padding-sm text-grey">
- <div class="flex align-center">
- <div style="width:94px;">泵舱底左</div>
- <div class="_Num" id="qt_cdz">0</div>%LEL
- </div>
- <div class="flex align-center margin-tb-xs">
- <div style="width:94px;">泵舱底右</div>
- <div class="_Num" id="qt_cdy">0</div>%LEL
- </div>
- <div class="flex align-center">
- <div style="width:94px;">泵舱上甲板</div>
- <div class="_Num" id="qt_cjb">0</div>%LEL
- </div>
- <div class="flex align-center margin-tb-xs">
- <div style="width:94px;">空调通风口</div>
- <div class="_Num" id="qt_tfk">0</div>%LEL
- </div>
- <div class="flex align-center margin-tb-xs">
- <div style="width:94px;">尾楼甲板左</div>
- <div class="_Num" id="qt_wjbz">0</div>%LEL
- </div>
- <div class="flex align-center">
- <div style="width:94px;">尾楼甲板右</div>
- <div class="_Num" id="qt_wjby">0</div>%LEL
- </div>
- </div>
- </div>
- <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
- <div class="bg-theme-son">
- <span>总管压力</span>
- <span class="iconfont icon-right"></span>
- </div>
- <div style="display: none;">
- <div class="flex padding-sm zgyl">
- <div class="flex text-grey" onclick="chanSta(0)">
- <div class="check_"></div><span style="line-height: 14px;">液货</span>
- </div>
- <div class="flex text-grey margin-lr" onclick="chanSta(1)">
- <div class="check_"></div><span style="line-height: 14px;">蒸气回收</span>
- </div>
- </div>
- <div class="flex text-center">
- <div class="flex-sub">
- <div id="myChart2" style="height: 160px;"></div>
- <div>1#</div>
- </div>
- <div class="flex-sub">
- <div id="myChart3" style="height: 160px;"></div>
- <div>2#</div>
- </div>
- </div>
- </div>
- </div>
- <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
- <div class="bg-theme-son">
- <span>货油泵温度(℃)</span>
- <span class="iconfont icon-right"></span>
- </div>
- <div style="display: none;">
- <div class="flex padding-sm hywd">
- <div class="flex text-grey" onclick="changeSta(0)">
- <div class="check_"></div><span style="line-height: 14px;">前轴承</span>
- </div>
- <div class="flex text-grey margin-lr" onclick="changeSta(1)">
- <div class="check_"></div><span style="line-height: 14px;">前轴承</span>
- </div>
- <div class="flex text-grey margin-right" onclick="changeSta(2)">
- <div class="check_"></div><span style="line-height: 14px;">泵壳</span>
- </div>
- <div class="flex text-grey" onclick="changeSta(3)">
- <div class="check_"></div><span style="line-height: 14px;">舱壁轴填料函</span>
- </div>
- </div>
- <div id="myChart1" style="height: 220px;"></div>
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- let nowSn = localStorage.getItem("shipSn");
- var awData = {};
- var zgYl = [["z1Z1","z1a"],["z1b","z1Y1"]];
- var yhbWd = [["z0y","z12","z16","z1A1","z1E1","z1I1"],//前轴承
- ["z0z","z13","z17","z1B1","z1F1","z1J1"],//后轴承
- ["z11","z15","z19","z1D1","z1H1","z1L1"],//泵壳
- ["z10","z14","z18","z1C1","z1G1","z1K1"]];//舱壁轴填料函
- var huoCang = [{"name":"左-1#","data":["z01","z0D1","z0R1","z0T1","z0S1",["Q28-0","Q28-1","Q24-3","Q24-2"]]},
- {"name":"右-1#","data":["z00","z0C1","z0O1","z0Q1","z0P1",["Q28-2","Q28-3","Q24-6","Q24-5"]]},
- {"name":"左-2#","data":["z03","z0F1","z0X1","z0Z1","z0Y1",["Q29-4","Q29-5","Q25-6","Q25-4"]]},
- {"name":"右-2#","data":["z02","z0E1","z0U1","z0W1","z0V1",["Q29-6","Q29-7","Q24-0","Q25-7"]]},
- {"name":"左-3#","data":["z05","z0H1","z0d","z0f","z0e",["Q29-0","Q29-1","Q26-7","Q26-6"]]},
- {"name":"右-3#","data":["z04","z0G1","z0a","z0c","z0b",["Q29-2","Q29-3","Q25-2","Q25-1"]]},
- {"name":"左-4#","data":["z07","z0J1","z0j","z0l","z0k",["Q2a-4","Q2a-5","Q26-1","Q26-0"]]},
- {"name":"右-4#","data":["z06","z0I1","z0g","z0i","z0h",["Q2a-6","Q2a-7","Q26-4","Q26-3"]]},
- {"name":"左-5#","data":["z09","z0L1","z0p","z0r","z0q",["Q2a-0","Q2a-1","Q27-3","Q27-2"]]},
- {"name":"右-5#","data":["z08","z0K1","z0m","z0o","z0n",["Q2a-2","Q2a-3","Q27-6","Q27-5"]]},
- {"name":"左污液舱","data":["z0B","z0N1","z0v","z0x","z0w",["Q2b-4","Q2b-6","Q28-6","Q28-4"]]},
- {"name":"右污液舱","data":["z0A","z0M1","z0s","z0t","z0u",["Q2b-6","Q2b-7","Q27-0","Q28-7"]]}];
- var myChart1 = echarts.init(document.getElementById('myChart1'));
- var myChart2 = echarts.init(document.getElementById('myChart2'));
- var myChart3 = echarts.init(document.getElementById('myChart3'));
- function setoption1(dataList){
- option = {
- color: ['#3398DB'],
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- crossStyle: {
- color: '#999'
- }
- }
- },
- grid: {
- top: '10%',
- left: '2%',
- right: '2%',
- bottom: '4%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: ['1号','2号', '3号', '4号', '5号', '污液舱'],
- axisTick: {
- alignWithLabel: true
- },
- axisLine: {
- lineStyle: {
- color: '#fff',
- }
- },
- axisLabel: {
- textStyle: {
- fontSize:12,
- }
- }
- }
- ],
- yAxis: [{
- type: 'value',
- axisLine: {
- show: false
- },
- splitLine: {
- lineStyle: {
- color: ['rgba(132, 132, 132, 0.5)']
- }
- },
- axisLabel:{
- formatter: function(){
- return "";
- }
- }
- }
- ],
- series: [{
- name: '实时数据',
- type: 'bar',
- barWidth: '20',
- itemStyle:{
- normal: {
- label:{
- color:'#8799a3'
- },
- color: new echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- {offset: 0, color:'#fe9a1a'},
- {offset: 1, color:'#fe421b'}
- ]
- )
- }
- },
-
- label: {
- normal: {
- show: true,
- position: 'top',
- color:'#8799a3',
- formatter: function (params) {
- var index = params.dataIndex;
- return dataList[index]
- }
- }
- },
- data:dataList
- }
- ]
- };
- return option;
- }
- function setoption2(data){
- option = {
- graphic: [{
- type: 'text',
- left: 'center',
- top: 'center',
- z: 10,
- style: {
- fill: '#fbbd08',
- text: data + "MPa",
- font: '16px Microsoft YaHei'
- }
- }],
- series: [{
- name: '实时数据',
- type: 'pie',
- center:["50%", "50%"],
- radius: ['60%', '80%'],
- avoidLabelOverlap: false,
- hoverAnimation: false,
- label: {
- normal: {
- show: false,
- position: 'center',
- textStyle: {
- fontSize: 20,
- color: '#d9d9d9'
- }
- }
- },
- data: [{
- value: data,
- name: data + "MPa"
- },{
- value: 3 - parseFloat(data),
- name: ''
- }]
- }],
- color: ['#FFF076','#52989F']
- };
- return option;
- }
- $(document).ready(function(){
- firstData();
- // setInterval(()=>{firstData();},60*1000);
- })
- function firstData(){
- awData = {};
- deviceList(function(_obj){
- awData = _obj;
- setVal();
- changeSta(0);
- chanSta(0);
- yaliSta(0);
- })
- }
- function changeSta(num){
- myChart1.setOption(setoption1([awData[yhbWd[num][0]],awData[yhbWd[num][1]],awData[yhbWd[num][2]],awData[yhbWd[num][3]],awData[yhbWd[num][4]],awData[yhbWd[num][5]]]));
- $(".hywd .check_").removeClass("check_act");
- $(".hywd .check_").eq(num).addClass("check_act");
- }
- function chanSta(num){
- myChart2.setOption(setoption2(awData[zgYl[num][0]] || 0));
- myChart3.setOption(setoption2(awData[zgYl[num][1]] || 0));
- $(".zgyl .check_").removeClass("check_act");
- $(".zgyl .check_").eq(num).addClass("check_act");
- }
- function yaliSta(num){
- let _data = [];
- if(num==0){
- _data =[awData["z1M1"],awData["z1O1"],awData["z1R1"],awData["z1T1"],awData["z1V1"],awData["z1X1"]];
- }else if(num==1){
- _data =[awData["z1N1"],awData["z1P1"],awData["z1Q1"],awData["z1S1"],awData["z1U1"],awData["z1W1"]];
- }
- $("#beng_1").text(_data[0] == undefined ? 0 : _data[0]);
- $("#beng_2").text(_data[1] == undefined ? 0 : _data[1]);
- $("#beng_3").text(_data[2] == undefined ? 0 : _data[2]);
- $("#beng_4").text(_data[3] == undefined ? 0 : _data[3]);
- $("#beng_5").text(_data[4] == undefined ? 0 : _data[4]);
- $("#beng_6").text(_data[5] == undefined ? 0 : _data[5]);
- $(".byli .check_").removeClass("check_act");
- $(".byli .check_").eq(num).addClass("check_act");
- }
- function setVal(){
- $("#qt_cdz").text(awData["z1d"] == undefined || awData["z1d"] == "00000000"? 0 : awData["z1d"]);
- $("#qt_cdy").text(awData["z1e"] == undefined || awData["z1e"] == "00000000"? 0 : awData["z1e"]);
- $("#qt_cjb").text(awData["z1f"] == undefined || awData["z1f"] == "00000000"? 0 : awData["z1f"]);
- $("#qt_tfk").text(awData["z1g"] == undefined || awData["z1g"] == "00000000"? 0 : awData["z1g"]);
- $("#qt_wjbz").text(awData["z1h"] == undefined || awData["z1h"] == "00000000"? 0 : awData["z1h"]);
- $("#qt_wjby").text(awData["z1i"] == undefined || awData["z1i"] == "00000000"? 0 : awData["z1i"]);
- let _str = "";
- for(var i=0;i<huoCang.length;i++){
- let _ab = huoCang[i].data;
- _str += `<div class="infoLi">
- <div class="title">${huoCang[i].name}</div>
- <div>
- <div>液位:</div>
- <div><span class="numbox">${awData[_ab[0]] || 0}</span><span>m</span></div>
- </div>
- <div>
- <div>压力:</div>
- <div><span class="numbox">${awData[_ab[1]] || 0}</span><span>kPa</span></div>
- </div>
- <div>
- <div>上温:</div>
- <div><span class="numbox">${awData[_ab[2]] || 0}</span><span>℃</span></div>
- </div>
- <div>
- <div>中温:</div>
- <div><span class="numbox">${awData[_ab[3]] || 0}</span><span>℃</span></div>
- </div>
- <div>
- <div>底温:</div>
- <div><span class="numbox">${awData[_ab[4]] || 0}</span><span>℃</span></div>
- </div>
- <div>
- <div>报警:</div>
- <div class="text-red">${getYWarm(_ab[5])}</div>
- </div>
-
- </div>`
- }
- $("#_View").html(_str);
- }
- function getYWarm(_key){
- let _txt = ["高高位","高位","高报警","低报警"];
- let _ij = "无";
- for(var i=0;i<_key.length;i++){
- let _ab = _key[i].split("-");
- let _df = awData[_ab[0]] == undefined?0:awData[_ab[0]].charAt(parseInt(_ab[1]));
- if(_df == 1){
- _ij = _txt[i];
- break;
- }
- }
- return _ij
- }
- $(".tabli>div").on("click","",function(){
- $(".hk_inf").css("display","none");
- $("."+$(this).attr("name")).css("display","block");
- $(this).addClass("yz_this").siblings().removeClass("yz_this");
- myChart1.resize();
- myChart2.resize();
- myChart3.resize();
- })
- $(".bg-theme-son").on("click","",function(){
- if($(this).next().is(":hidden")){
- $(this).next().css("display","block");
- $(this).find(".iconfont").addClass("act");
- }else{
- $(this).next().css("display","none");
- $(this).find(".iconfont").removeClass("act");
- }
- myChart1.resize();
- myChart2.resize();
- myChart3.resize();
- })
- </script>
- </body>
- </html>
|