| @@ -29,7 +29,7 @@ | |||||
| } | } | ||||
| .rotation3D__item .scale{ position: absolute; top: 0; width: 100%; height: 100%; } | .rotation3D__item .scale{ position: absolute; top: 0; width: 100%; height: 100%; } | ||||
| .rotation3D__item .cont{ position: relative; z-index: 2; } | .rotation3D__item .cont{ position: relative; z-index: 2; } | ||||
| .rotation3D__item .cont .iconfont { font-size: 28px; margin-top: 30px; margin-bottom: 96px; display: block; } | |||||
| .rotation3D__item .cont .iconfont { font-size: 28px; margin-top: 30px; margin-bottom: 96px; display: block; height: 35px;} | |||||
| .rotation3D__item .cont p{ color: #101010; } | .rotation3D__item .cont p{ color: #101010; } | ||||
| .itemList .rotation3D__item .cont p::after{ | .itemList .rotation3D__item .cont p::after{ | ||||
| font-size: 12px; | font-size: 12px; | ||||
| @@ -40,6 +40,7 @@ | |||||
| margin-top: 60px; | margin-top: 60px; | ||||
| color: #101010; | color: #101010; | ||||
| } | } | ||||
| /* | |||||
| .itemList .rotation3D__item:nth-child(1) .cont p::after{ | .itemList .rotation3D__item:nth-child(1) .cont p::after{ | ||||
| content: "鹏城云脑一号"; | content: "鹏城云脑一号"; | ||||
| } | } | ||||
| @@ -73,7 +74,7 @@ | |||||
| .itemList .rotation3D__item:nth-child(11) .cont p::after{ | .itemList .rotation3D__item:nth-child(11) .cont p::after{ | ||||
| content: "国家超级计算济南中心"; | content: "国家超级计算济南中心"; | ||||
| } | } | ||||
| */ | |||||
| .rotation3D__item.blue{ color: #01e9fc; } | .rotation3D__item.blue{ color: #01e9fc; } | ||||
| .rotation3D__item.green{ color: #b4b3ca; } | .rotation3D__item.green{ color: #b4b3ca; } | ||||
| .rotation3D__item.yellow{ color: #ffd200; } | .rotation3D__item.yellow{ color: #ffd200; } | ||||
| @@ -139,6 +140,7 @@ | |||||
| position: absolute; | position: absolute; | ||||
| font-size: 12px; | font-size: 12px; | ||||
| color: #888; | color: #888; | ||||
| white-space: nowrap; | |||||
| transform: rotate(180deg)scale(0.80); | transform: rotate(180deg)scale(0.80); | ||||
| } | } | ||||
| @@ -119,7 +119,7 @@ document.onreadystatechange = function () { | |||||
| continue; | continue; | ||||
| } | } | ||||
| } | } | ||||
| refresh3DInfo(record); | |||||
| //refresh3DInfo(record); | |||||
| var recordPrefix = getMsg(record); | var recordPrefix = getMsg(record); | ||||
| if(record.OpType == "6" || record.OpType == "10" || record.OpType == "12" || record.OpType == "13"){ | if(record.OpType == "6" || record.OpType == "10" || record.OpType == "12" || record.OpType == "13"){ | ||||
| html += recordPrefix + actionName; | html += recordPrefix + actionName; | ||||
| @@ -211,16 +211,18 @@ function getTaskLink(record){ | |||||
| function refresh3DInfo(record){ | function refresh3DInfo(record){ | ||||
| if(record.OpType == "25" || record.OpType == "29" || record.OpType == "31"){ | if(record.OpType == "25" || record.OpType == "29" || record.OpType == "31"){ | ||||
| //cloudbrain one | //cloudbrain one | ||||
| var lines = $('.rotation3D__line'); | |||||
| //var lines = $('.rotation3D__line'); | |||||
| var span = $('.rotation3D__line').find("span")[0]; | var span = $('.rotation3D__line').find("span")[0]; | ||||
| //console.log(span); | //console.log(span); | ||||
| span.innerText =record.RefName; | |||||
| if(span != null){ | |||||
| span.innerText =record.RefName; | |||||
| } | |||||
| //$('.rotation3D__line').find("span").eq(0).text(record.RefName) | //$('.rotation3D__line').find("span").eq(0).text(record.RefName) | ||||
| //console.log("cloudbrain one line length=" + lines.length); | //console.log("cloudbrain one line length=" + lines.length); | ||||
| //lines[0].find("span").text(record.RefName); | //lines[0].find("span").text(record.RefName); | ||||
| }else if(record.OpType == "26" || record.OpType == "27" || record.OpType == "28"){ | }else if(record.OpType == "26" || record.OpType == "27" || record.OpType == "28"){ | ||||
| //cloudbrain two | //cloudbrain two | ||||
| var lines = $('.rotation3D__line'); | |||||
| //var lines = $('.rotation3D__line'); | |||||
| //console.log("cloudbrain two line length=" + lines.length); | //console.log("cloudbrain two line length=" + lines.length); | ||||
| var span = $('.rotation3D__line').find("span")[1]; | var span = $('.rotation3D__line').find("span")[1]; | ||||
| //console.log(span); | //console.log(span); | ||||
| @@ -51,10 +51,65 @@ | |||||
| <script src="/rotation3D/vue-2.6.10.min.js"></script> | <script src="/rotation3D/vue-2.6.10.min.js"></script> | ||||
| <script src="/rotation3D/rotation3D.js?v={{MD5 AppVer}}"></script> | <script src="/rotation3D/rotation3D.js?v={{MD5 AppVer}}"></script> | ||||
| <script> | <script> | ||||
| var jobTask={}; | |||||
| function queryAiCenterInfo(){ | |||||
| $.ajax({ | |||||
| type:"GET", | |||||
| url:"/api/v1/cloudbrain/get_newest_job", | |||||
| headers: { | |||||
| authorization:token, | |||||
| }, | |||||
| dataType:"json", | |||||
| async:false, | |||||
| success:function(json){ | |||||
| console.log("cloudbrain task info=" + json); | |||||
| for(var i=0;i < json.length;i++){ | |||||
| jobTask[json[i].ai_center_id] =json[i].job_name; | |||||
| } | |||||
| }, | |||||
| error:function(response) { | |||||
| console.log("query task info error."); | |||||
| } | |||||
| }); | |||||
| $.ajax({ | |||||
| type:"GET", | |||||
| url:"/api/v1/cloudbrain/get_center_info", | |||||
| headers: { | |||||
| authorization:token, | |||||
| }, | |||||
| dataType:"json", | |||||
| async:false, | |||||
| success:function(json){ | |||||
| displayAiCenterInfo(json); | |||||
| }, | |||||
| error:function(response) { | |||||
| } | |||||
| }); | |||||
| } | |||||
| function displayAiCenterInfo(json){ | |||||
| for(var i=0;i<json.length;i++){ | |||||
| var tmp ={}; | |||||
| tmp["name"]=json[i].name; | |||||
| if(jobTask[json[i].id] != null){ | |||||
| tmp["type"]="blue"; | |||||
| }else{ | |||||
| tmp["type"]="green"; | |||||
| } | |||||
| tmp["icon"]=""; | |||||
| tmp["content"]=json[i].content; | |||||
| serverItemList.push(tmp); | |||||
| } | |||||
| } | |||||
| var serverItemList=[]; | |||||
| queryAiCenterInfo(); | |||||
| var app = new Vue({ | var app = new Vue({ | ||||
| el: "#app", | el: "#app", | ||||
| //数据 blue, green, yellow | //数据 blue, green, yellow | ||||
| data: { | data: { | ||||
| itemList:serverItemList, | |||||
| /* | |||||
| itemList: [ | itemList: [ | ||||
| { name:'鹏城云脑一号', type:'blue', icon:'', }, | { name:'鹏城云脑一号', type:'blue', icon:'', }, | ||||
| { name:'鹏城云脑二号', type:'blue', icon:'', }, | { name:'鹏城云脑二号', type:'blue', icon:'', }, | ||||
| @@ -68,6 +123,7 @@ | |||||
| { name:'横琴先进智能计算中心', type:'green', icon:'', }, | { name:'横琴先进智能计算中心', type:'green', icon:'', }, | ||||
| { name:'国家超级计算济南中心', type:'green', icon:'', }, | { name:'国家超级计算济南中心', type:'green', icon:'', }, | ||||
| ], | ], | ||||
| */ | |||||
| }, | }, | ||||
| mounted: function () { | mounted: function () { | ||||
| new Rotation3D({ | new Rotation3D({ | ||||
| @@ -84,6 +140,24 @@ | |||||
| }, | }, | ||||
| methods: {}, | methods: {}, | ||||
| }); | }); | ||||
| $(document).ready(function(){ | |||||
| var pArrays=$('.itemList').find("p"); | |||||
| console.log("center length=" + pArrays.length); | |||||
| for(var i=0;i<pArrays.length;i++){ | |||||
| var p = pArrays[i]; | |||||
| p.innerText=serverItemList[i].content; | |||||
| } | |||||
| var lines=$('.lineList').find("span"); | |||||
| console.log("lines length=" + lines.length); | |||||
| for(var i=0; i< lines.length;i++){ | |||||
| if(jobTask[i+1] != null){ | |||||
| lines[i].innerText = jobTask[i+1]; | |||||
| } | |||||
| } | |||||
| }); | |||||
| </script> | </script> | ||||
| {{end}} | {{end}} | ||||
| @@ -94,12 +94,6 @@ | |||||
| </div> | </div> | ||||
| <div id="app" v-cloak> | <div id="app" v-cloak> | ||||
| <!--数据 | |||||
| <div class="aiData"> | |||||
| <p>完成AI任务<br><strong id="completed_task">1716</strong></p> | |||||
| <p>运行AI任务<br><strong id="running_task">120</strong></p> | |||||
| <p>等待AI任务<br><strong id="wait_task">80</strong></p> | |||||
| </div>--> | |||||
| <!--底座--> | <!--底座--> | ||||
| <div class="rotation3D-baseMap"></div> | <div class="rotation3D-baseMap"></div> | ||||
| <!--旋转3D--> | <!--旋转3D--> | ||||