[完善]增加评分规则

src/app/tabbar/tabbar.component.html

@@ -1,7 +1,78 @@
 <mat-toolbar [color]="theme?'primary':'accent'">
     <!-- <mat-toolbar> -->
     <h1 *ngIf="companyName">{{companyName}}</h1>
-                
+    
+    <div class="scoringRule">
+      <span class="name"  (click)="scoringRule()">
+          计分规则
+      </span> 
+      <div class="scoringRuleImg" *ngIf="scoringRuleImg">
+          <div class="topbox">
+              <span style="font-size: 18px;margin-left: 20px;font-weight: 600;">计分规则 &nbsp;</span>
+              <span style="font-size: 12px;">单位基本信息部分共计100分</span>
+              <span class="imgbox">
+                  <img src="../../assets/images/ruletopimg.png" alt="">
+              </span>
+              <span class="close" (click)="closebtn()">
+                  <mat-icon>clear</mat-icon>
+              </span>
+          </div>
+          <div class="tablebox">
+              <table>
+                  <tr>
+                      <td>名称</td>
+                      <td>分值</td>
+                      <td>规则说明</td>
+                  </tr>
+                  <tr>
+                      <td>单位名称</td>
+                      <td class="bulecolor">5</td>
+                      <td>按填录入内容评判</td>
+                  </tr>
+                  <tr>
+                      <td>建筑信息</td>
+                      <td class="bulecolor">10</td>
+                      <td>根据创建的建筑个数平分该分值，每个建筑根据实际填写的完整度再进行评判</td>
+                  </tr>
+                  <tr>
+                      <td>四周毗邻</td>
+                      <td class="bulecolor">10</td>
+                      <td>按<span class="bulecolor">4</span>个方向均分，每个方向的属性信息要填写完整才能得分</td>
+                  </tr>
+                  <tr>
+                      <td>消防设施</td>
+                      <td class="bulecolor">25</td>
+                      <td>消防水源占<span class="bulecolor">30%</span>  &nbsp;&nbsp;&nbsp;   安全疏散占<span class="bulecolor">30%</span> <br> 消防水系统占<span class="bulecolor">30%</span>   &nbsp;&nbsp;&nbsp;   内部消防力量占<span class="bulecolor">10%</span></td>
+                  </tr>
+                  <tr>
+                      <td>重点部位</td>
+                      <td class="bulecolor">10</td>
+                      <td><span>根据耐火等级做区分</span>:一级:添加<span class="bulecolor">3</span>个重点部位（1个50%，2个80%，3个满分）<span class="bulecolor">二级</span>:添加<span class="bulecolor">2</span>个重点部位（一个占50%）<span class="bulecolor">三级</span>   添加<span class="bulecolor">1</span>个重点部位 其它:填写重点提示自动满分</td>
+                  </tr>
+                  <tr>
+                      <td>功能分区</td>
+                      <td class="bulecolor">10</td>
+                      <td>创建<span class="bulecolor">2</span>条并填写完整得满分</td>
+                  </tr>
+                  <tr>
+                      <td>实景图</td>
+                      <td class="bulecolor">10</td>
+                      <td>外观，保证有<span class="bulecolor">2</span>张照片（占<span class="bulecolor">30%</span>）; 室内，保证有<span class="bulecolor">2</span>张照片（占<span class="bulecolor">30%</span>）;安全出口，保证有<span class="bulecolor">2</span>张照片（占<span class="bulecolor">40%</span>）</td>
+                  </tr>
+                  <tr>
+                      <td>CAD上传</td>
+                      <td class="bulecolor">10</td>
+                      <td>上传<span class="bulecolor">2</span>个cad文件</td>
+                  </tr>
+                  <tr>
+                      <td>平面图</td>
+                      <td class="bulecolor">10</td>
+                      <td>总平面图<span class="bulecolor">1</span>张，建筑平面图<span class="bulecolor">1</span>张</td>
+                  </tr>
+              </table>
+          </div>
+      </div>
+    </div>
     <!-- 全屏  -->
     <!-- <button mat-button (click)="!isfullscreen?fullscreenToggle():closefullscreen()" class="fullscreen">
     <ng-container *ngIf="!isfullscreen; else elseTemplate">

src/app/tabbar/tabbar.component.scss

@@ -42,4 +42,80 @@ mat-icon{
 
 .boxed{
     width: 1200px;
+}
+//计分规则按钮
+.scoringRule{
+    user-select: none;
+    position: absolute;
+    left: 400px;
+    cursor: pointer;
+    .name{
+        background-color: #fff;
+        border-radius: 6px;
+        color: #2196F3;
+        display: inline-block;
+        width: 100px;
+        height:36px;
+        text-align: center;
+        line-height: 36px;
+        font-size: 14px;
+        margin: 0;
+        padding: 0;
+    }
+    .scoringRuleImg{
+        z-index: 999;
+        position: absolute;
+        left: 0;
+        top: 38px;
+        border: 1px solid #2196F3;
+        background-color: #fff;
+        .topbox{
+
+            position: relative;
+            background-color: #2196F3;
+            height: 40px;
+            line-height: 40px;
+            font-size: 16px;
+            .imgbox{
+                position: absolute;
+                right: 48px;
+                // top: 10px;
+            }
+            .close{
+                position: absolute;
+                right: 8px;
+                top: 10px;
+            }
+        }
+        .tablebox{
+            width: 610px;
+            color: #333333;
+            table{
+                display: block;
+                width: 100%;
+                font-size: 14px;
+                tr{ 
+                    display: block;
+                    width: 600px;
+                    td{
+                        white-space:normal;
+                        display: inline-block;
+                        width: 15%;
+                        text-align: center;
+                    }
+                    td:last-child{
+                        width: 70%;
+                        line-height: 28px;
+                    }
+                }
+                tr:nth-child(even){
+                    background: #f6faff; 
+                }
+            }
+            .bulecolor{
+                color: #2196f3;
+            }
+        }
+        
+    }
 }

src/app/tabbar/tabbar.component.ts

@@ -37,6 +37,14 @@ export class TabbarComponent implements OnInit {
     this.getUserInfo()
   }
 
+   //计分规则
+   scoringRuleImg:boolean = false
+   scoringRule(){
+     this.scoringRuleImg = !this.scoringRuleImg
+   }
+   closebtn(){
+     this.scoringRuleImg = false
+   }
   boxed(css){
     const Element = document.body;
     Element.style.width = '1200px'