feat：project页面 上面html结构完成

nezha-fronted/src/components/common/project/projectFacade.vue

@@ -15,8 +15,67 @@
     </div>
     <div class="project-facade">
       <div class="facade-top">
-        <div>123</div>
-        <div>456</div>
+        <div class="facade-top-left" v-loading="projectInfo.loading">
+          <div class="facade-top-title">
+            {{projectInfo.title}}
+          </div>
+          <div>
+            <span><span class="label">Id :</span>{{projectInfo.id}}</span>
+            <span><span class="label special">Name :</span>{{projectInfo.name}}</span>
+          </div>
+          <div>
+            <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
+          </div>
+          <div>
+            <span>
+              <span class="label">Alert state :</span>
+              <div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}
+              <div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}
+              <div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}
+            </span>
+          </div>
+          <div>
+            <span><span class="label">Module Mum :</span>{{projectInfo.moduleMum}}</span>
+          </div>
+        </div>
+        <div class="facade-top-right" v-loading="alertData.loading">
+          <div class="facade-top-title">
+            <span class="label">{{alertData.title}}:</span>
+            {{alertData.sssObj.total}}
+          </div>
+          <div class="facade-top-right-content">
+            <div>
+              <el-progress
+                type="circle"
+                :percentage="(alertData.sssObj.pending/alertData.sssObj.total)*100"
+                :show-text="false"
+                :width="40"
+                color="#F5A390"
+              ></el-progress>
+              <div class="align--center">{{alertData.sssObj.pending}}</div>
+            </div>
+            <div>
+              <el-progress
+                type="circle"
+                :percentage="(alertData.sssObj.stop/alertData.sssObj.total)*100"
+                :show-text="false"
+                :width="40"
+                color="#F6B977"
+              ></el-progress>
+              <div class="align--center">{{alertData.sssObj.stop}}</div>
+            </div>
+            <div>
+              <el-progress
+                type="circle"
+                :percentage="(alertData.sssObj.other/alertData.sssObj.total)*100"
+                :show-text="false"
+                :width="40"
+                color="#EBD066"
+              ></el-progress>
+              <div class="align--center">{{alertData.sssObj.other}}</div>
+            </div>
+          </div>
+        </div>
       </div>
       <div  class="facade-content">
         <vis-network
@@ -44,6 +103,18 @@
       'pick-time':pickTime,
       'time-picker':timePicker,
     },
+    props:{
+		  obj:{}
+    },
+    watch:{
+		  obj:{
+        // immediate: true,
+        deep: true,
+        handler(n){
+          this.getProjectData(n);
+        },
+      }
+    },
     data(){
 		  return {
 		    item:{ // 拓扑图
@@ -86,9 +157,46 @@
           new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
           new Date(bus.computeTimezone(new Date().getTime()))
         ],
+        projectInfo:{
+		      title:'Project information',
+          id:'1',
+          remark:'系统内置project，展示系统基础信息',
+          alertStat:[1,2,3],
+          moduleMum:6,
+          loading:true,
+        },
+        alertData:{
+          loading:true,
+          title:'Alert : ',
+          sssObj:{
+            total:60,
+            stop:10,
+            pending:40,
+            other:10,
+          }
+        }
       }
     },
+    mounted(){
+		  console.log(this.obj);
+    },
     methods:{
+		  getProjectData(n){
+		    //获取projectInfo
+        this.projectInfo.loading=true;
+        this.$get('project/info', {id:n.id}).then(response => {
+          if (response.code === 200) {
+            this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length}
+            this.projectInfo.loading=false;
+          }
+        });
+
+        //获取所有asset
+        this.alertData.loading=true;
+        setTimeout(()=>{
+          this.alertData.loading=false;
+        },300)
+      },
       focusInput() {
         let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
         classVal=classVal.replace('query-input-inactive','query-input-active');
@@ -125,21 +233,54 @@
     height: 100%;
   }
   .facade-top{
-    min-height: 178px;
+    min-height: 138px;
     display: flex;
     margin: 12px 0;
-    height: 16%;
+    height: calc(16% - 40px);
+    font-size: 12px;
   }
   .facade-top > div{
-    height: 100%;
+    height: calc(100% - 40px);
     width: 18%;
     min-width: 280px;
     background: #FFFFFF;
     margin-right: 9px;
+    padding: 20px;
+  }
+  .facade-top-title{
+    font-size: 16px;
+    color: #333333;
+    font-weight: bold;
+    padding: 5px 0;
+  }
+  .facade-top-left{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
   }
   .facade-content{
     flex: 1;
     min-height: 800px;
     width: 80%;
   }
+  .label{
+    padding: 0 15px;
+  }
+  .special.label{
+    margin-left: 30px;
+  }
+  .facade-top .facade-top-right{
+    width: 12%;
+    min-width: 280px;
+  }
+  .facade-top-right-content{
+    display: flex;
+    justify-content: space-around;
+    justify-items: center;
+    height: calc(100% - 30px);
+    align-items:center;
+  }
+  .align--center{
+    text-align: center;
+  }
 </style>