新增毛高比重功能

css/main.css

@@ -20,6 +20,44 @@
     td{
         border-bottom: 1px solid #7DA2CD;
     }
+        /* ---- Chrome ----*/
+        ::-webkit-scrollbar {
+            width: 8px; /*滚动条粗细*/
+            height: 12px
+        }
+
+        ::-webkit-scrollbar-track {
+            -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
+            background: #f2f6f3; /*滑道颜色*/
+            border-radius: 5px; /*滑道的圆滑度*/
+        }
+
+        .scroll::-webkit-scrollbar-thumb {
+            background: #94b0eb; /*滑块颜色*/
+            border-radius: 5px /*滑块圆滑度*/
+        }
+
+        .scroll::-webkit-scrollbar-thumb:hover {
+            background: #a8a8a8; /*滑块上浮*/
+        }
+
+        /*--- FirFox ---*/
+        .scroll {
+            scrollbar-width: thin;
+            scrollbar-color: #94b0eb #f2f6f3;
+        }
+        /* --- IE ---*/
+        body {
+            scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/
+            scrollbar-face-color: #333; /*立体滚动条的颜色*/
+            scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/
+            scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/
+            scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/
+            scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/
+            scrollbar-track-color: #666; /*立体滚动条背景颜色*/
+            scrollbar-base-color: #f8f8f8; /*滚动条的基本颜色*/
+            Cursor: url(mouse.cur); /*自定义个性鼠标*/
+        }
     #loading{
         position: absolute;
         top: 50%;

global.js

@@ -1,6 +1,6 @@
 var AutoPlayer = false; //开启自动漫游
-var SERVER_URL = "http://192.168.188.8/demo"; //服务接口地址
-var PLAYER3D_URL = "ws://192.168.188.8:8082"; //
+var SERVER_URL = "http://192.168.66.133:8080/api"; //服务接口地址
+var PLAYER3D_URL = "ws://192.168.66.133:8082"; //
 var DEV_ALAR_COLOR = "ff6c00"; //全局设备告警颜色
 var DEV_HINT_COLOR = "d69d85"; //设备盘头剩余20-50之间的提示颜色
 var DEV_OFFLINE_COLOR = "666666"; //设备未接入的颜色

main.html

@@ -10,6 +10,7 @@
 		<div id="loading_a1"></div>
 		<div id="loading">正在加载模型中...</div>
 		<div id="top" class="top">
+            <div id="maogao_btn" title="" style="cursor: pointer;position: absolute;right: 176px;top: 25px;height: 38px;width: 38px;"><IMG  src="image/menu1.png"></div>
 			<div id="autoplayer_btn" title="切换自动漫游" style="cursor: pointer;position: absolute;right: 120px;top: 25px;height: 38px;width: 38px;"><IMG  src="image/auto3d_stop.png"></div>
 			<div id="imp_btn" title="导出数据" style="cursor: pointer;position: absolute;right: 65px;top: 25px;height: 38px;width: 38px;"><IMG src="image/imp_icon.png"></div>
 			<div title="返回主视图" style="cursor: pointer;position: absolute;right: 10px;top: 25px;height: 38px;width: 38px;text-align: center;" onclick="backMasterView()"><img src="image/view.png"></div>
@@ -1197,7 +1198,99 @@
                 </div>
             </div>
         </div>
+        <!--毛高占比窗口-->
+        <div id="maogaoWin" class="showinfo">
+            <div class="title">
+                <img src="image/title_icon.png" style="margin: 7px;float: left;">
+                <span class="text">毛高占比</span>
+                <img src="image/Close.png" style="margin: 7px;float: right;cursor: pointer;" onclick="$('#maogaoWin').hide()">
+            </div>
+            <div class="content">
+                <div style="height: 50px;width: 100%;">
+                    <table style="width: 100%;text-align: center;" cellspacing="0" cellpadding="0">
+                        <thead>
+                            <tr style="height: 50px;">
+                                <td width="33%">毛高</td>
+                                <td width="1px" style="color: #817e7e">|</td>
+                                <td width="33%">设备数量</td>
+                                <td width="1px" style="color: #817e7e">|</td>
+                                <td width="33%">占比</td>
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div style="height: 340px;overflow: auto;width: 100%;">
+                    <table style="width: 100%;text-align: center;" cellspacing="0" cellpadding="0">
+                        <tbody>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <!--毛高占比详情窗口-->
+        <div id="maogaoDetailWin" class="newwin">
+            <div class="title">
+                <img src="image/title_icon.png" style="margin: 7px;float: left;">
+                <span class="text">毛高占比详情</span>
+                <img src="image/Close.png" style="margin: 7px;float: right;cursor: pointer;" onclick="$('#maogaoDetailWin').hide()">
+            </div>
+            <div class="content">
+                <div style="position: relative;height: 50px">
+                    <div id="imp_btn_maogaodetail" title="导出数据" style="cursor: pointer;position: absolute;right: 5px;top: 5px;height: 38px;width: 38px;"><IMG src="image/imp_icon.png"></div>
+                </div>
+                <div style="height: 64px;">
+                    <table style="width: 100%;text-align: center;" cellspacing="0" cellpadding="0">
+                        <thead>
+                            <tr style="height: 32px;">
+                                <td rowspan="2" width="60" style="border-right: 1px solid #76549b !important;">设备名称</td>
+                                <td rowspan="2" width="60" style="border-right: 1px solid #76549b !important;">机台号</td>
+                                <td rowspan="2" width="60" style="border-right: 1px solid #76549b !important;">毛高</td>
+                                <td rowspan="2" width="60" style="border-right: 1px solid #76549b !important;">配方号</td>
+                                <td rowspan="2" width="60" style="border-right: 1px solid #76549b !important;">米克重</td>
+                                <td colspan="5" width="300" style="border-right: 1px solid #76549b !important;border-bottom: 1px solid #76549b !important;">送经量</td>
+                                <td colspan="3" width="180" style="border-bottom: 1px solid #76549b !important;">线纱规格D</td>
+                            </tr>
+                            <tr style="height: 32px;">
+                                <td width="60" style="border-right: 1px solid #76549b !important;">GB1</td>
+                                <td width="60" style="border-right: 1px solid #76549b !important;">GB2</td>
+                                <td width="60" style="border-right: 1px solid #76549b !important;">GB3</td>
+                                <td width="60" style="border-right: 1px solid #76549b !important;">GB4</td>
+                                <td width="60" style="border-right: 1px solid #76549b !important;">GB5</td>
+                                <td width="60" style="border-right: 1px solid #76549b !important;">L1、L5</td>
+                                <td width="60" style="border-right: 1px solid #76549b !important;">L2、L4</td>
+                                <td width="60">L3</td>
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div style="height: 420px;overflow: auto;">
+                    <table style="width: 100%;text-align: center;" cellspacing="0" cellpadding="0">
+                        <tbody>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>        
     </body>
+    <script type="text/html" id="maogodetail_tpl">
+        {{each data}}
+        <tr>
+            <td width="60">{{$value.device}}</td>
+            <td width="60">{{$value.formula_data_2}}</td>
+            <td width="60">{{$value.formula_data_15}}</td>
+            <td width="60">{{$value.formula_data_1}}</td>
+            <td width="60">{{$value.formula_data_3}}</td>
+            <td width="60">{{$value.formula_data_19}}</td>
+            <td width="60">{{$value.formula_data_20}}</td>
+            <td width="60">{{$value.formula_data_21}}</td>
+            <td width="60">{{$value.formula_data_22}}</td>
+            <td width="60">{{$value.formula_data_23}}</td>
+            <td width="60">{{$value.formula_data_4}}</td>
+            <td width="60">{{$value.formula_data_5}}</td>
+            <td width="60">{{$value.formula_data_6}}</td>
+        </tr>  
+        {{/each}}      
+    </script>
 </html>
 		<!-- 引入qwebchannel.js、Player.js、PlayerUtils.js -->
 		<script type="text/javascript" src="jquery-3.4.1.js"></script>
@@ -1210,6 +1303,7 @@
 		<script src="lottie.min.js"></script>
 		<script src="Loading.json.js"></script>
 		<script src="animation.js"></script>
+        <script type="text/javascript" src="template.js"></script>
 		<!--本地模拟测试数据，正式部署时需删除该2个js
 		<script src="test-data.js"></script>
 		<script src="device-data.js"></script>
@@ -2062,26 +2156,26 @@
 			        numberOfMonths: 1,
 			        rangeSelect: true
 		});
-			    $("#date_select,#ui-datepicker-div").on("click",function(e){
+		$("#date_select,#ui-datepicker-div").on("click",function(e){
 			    	e.stopPropagation();
-			    })
-				$("#dev_stop").css("top",($("#dev_alarm").offset().top*1+$("#dev_alarm").height()+15)+"px");
-				$("#search input:eq(0)").off().on('keypress',function(e){
+		})
+		$("#dev_stop").css("top",($("#dev_alarm").offset().top*1+$("#dev_alarm").height()+15)+"px");
+		$("#search input:eq(0)").off().on('keypress',function(e){
 					if(e.keyCode==13){
 						search()
 					}
-				});
-				$("#imp_btn").on('click',function(e){
+		});
+		$("#imp_btn").on('click',function(e){
 					e.stopPropagation();
 					$('#imp_item').show();
 					$('#search_result').hide()
-				})
-				$("#search .search_btn").on('click',function(e){
+		})
+		$("#search .search_btn").on('click',function(e){
 					e.stopPropagation();
 					search();
-				})
-				//导出数据项选择
-				$("#imp_item>div").on('click',function(e){
+		})
+		//导出数据项选择
+		$("#imp_item>div").on('click',function(e){
 					//导出数据
 					var code = $(this).attr("itemcode")
 					if(code=="2")
@@ -2094,9 +2188,9 @@
 							"left":$(this).offset().left+$("#imp_item").width()-$("#date_select").width()-5+"px"
 						})
 					}else window.open(SERVER_URL+"/export")
-				})
-				//自定义导出日期确定
-				$("#date_select .dateSelected_ok").on('click',function(){
+		})
+		//自定义导出日期确定
+		$("#date_select .dateSelected_ok").on('click',function(){
 					var s1=$("#datepicker1").val()
 					var s2=$("#datepicker2").val()
 					if(s1=="" || s2=="") return;
@@ -2104,8 +2198,8 @@
 					//s2 = Date.parse(s2)
 					window.open(SERVER_URL+"/export?start="+s1+"&end="+s2)
 					$("body").trigger('click')
-				});
-				$("#autoplayer_btn").off().on('click',function(){
+		});
+		$("#autoplayer_btn").off().on('click',function(){
 					var img=$(this).find("img");
 					AutoPlayer=!AutoPlayer
 					if(AutoPlayer){
@@ -2122,7 +2216,43 @@
 							player.Native.CameraAnimation.stop();
 						}catch(e){}
 					}
-				})
+		})
+        $("#imp_btn_maogaodetail").off().on('click',function(){
+            var v = $("#maogaoDetailWin").attr("maogao")
+            window.open(SERVER_URL+"/formula/export/"+v)
+        })
+        //毛高比重
+        $("#maogao_btn").on('click',function(){
+            $.getJSON(SERVER_URL+"/formula/total",{},function(data){
+                if(data.code!=0){
+                    alert(data.msg)
+                    return;
+                }
+                var data = data.data;
+                var tbody = $("#maogaoWin table:last>tbody");
+                tbody.find("tr:gt(0)").remove();
+                var ls = [];
+                var tpl='<tr maogao="{height}" style="color: #FFFFFF;font-size: 20px;cursor: pointer;" title="点击可查看详情"><td width="33%">{height}</td><td width="1px" style="color: transparent">|</td><td width="33%">{num}</td><td width="1px" style="color: transparent">|</td><td width="33%">{percent}</td></tr>';
+                for (var i = 0; i < data.length; i++) {
+                    var item = data[i];
+                    ls.push(tpl.replace(/(\{height\})/gi,item.height).replace(/(\{num\})/gi,item.num).replace(/(\{percent\})/gi,item.percent))
+                }
+                tbody.append(ls.join(''));
+                $("#maogaoWin").show();
+                $("#maogaoWin table:last>tbody>tr").off().on('click',function(){
+                    var v = $(this).attr('maogao')
+                    //毛高详情
+                    $.getJSON(SERVER_URL+"/formula/detail/"+v,{},function(r){
+                        if(r.code==0){
+                            var tplHtml = template("maogodetail_tpl",r)
+                            $("#maogaoDetailWin table:last>tbody").html(tplHtml);
+                            $("#maogaoDetailWin").attr("maogao",v).show();
+                        }
+                    })
+                    
+                })
+            })
+        })
 
         function GetData() {
             $.getJSON(SERVER_URL + "/index", {}, function (res) {