style：project alert卡片修改完成

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

@@ -28,8 +28,10 @@
             <el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">
               <el-select v-model="form.width" placeholder="" :popper-append-to-body="false"  size="small">
                 <div slot="prefix">
+                  <div class="width-option">
                     <div :style="{height:0,width:'80%',borderTop:form.width+'px'+' solid' +' #899FB7'}"></div>
                   </div>
+                </div>
                 <el-option v-for="(item,index) in widthOption" :label="item+'px'" :value="item" :key="index">
                   <div class="width-option">
                     <span style="marginRight:5px">{{item}}px</span><div class="width-option-line" :style="{height:0,width:'80%',borderTop:item+'px solid #899FB7'}"></div>
@@ -37,13 +39,43 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item :label="$t('project.topology.dashes')" prop="width" class="line-width">
+            <el-form-item :label="$t('project.topology.dashes')" prop="dashes" class="line-width">
               <el-select v-model="form.dashes" placeholder="" :popper-append-to-body="false"  size="small">
                 <div slot="prefix">
-                  {{form.dashes}}
+                  <div class="width-option">
+                    <div class="width-option-line" v-if="!form.dashes" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}"></div>
+                    <div class="dashes-box" v-if="form.dashes">
+                      <div class="width-option-line"
+                           v-for="count in dashesCount(form.dashes)"
+                           :key="count"
+                           :style="{
+                           height:0,
+                           width:dashesWidth(form.dashes)+'px',
+                           borderTop:'1px solid #899FB7',
+                           display:'inline-block'
+                         }">
+
+                      </div>
+                    </div>
+                  </div>
                 </div>
                 <el-option v-for="(item,index) in dashesOption" :label="item+'px'" :value="item" :key="index">
+                  <div class="width-option">
+                    <div class="width-option-line" v-if="!item" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}"></div>
+                    <div class="dashes-box" v-if="item">
+                      <div class="width-option-line"
+                           v-for="count in dashesCount(item)"
+                           :key="count"
+                           :style="{
+                           height:0,
+                           width:dashesWidth(item)+'px',
+                           borderTop:'1px solid #899FB7',
+                           display:'inline-block'
+                         }">
 
+                      </div>
+                    </div>
+                  </div>
                 </el-option>
               </el-select>
             </el-form-item>
@@ -374,6 +406,17 @@
       },
       colorOut(){
         this.showPicker=false;
+      },
+      //返回dashes的第一項
+      dashesWidth(item){
+        return JSON.parse(item)[0]
+      },
+      // 返回應該遍历的次数
+      dashesCount(item){
+        if(!item){
+          return 0;
+        }
+        return Math.floor(190/this.dashesWidth(item)/2);
       }
 
     },
@@ -406,7 +449,7 @@
     border-radius: 5px;
     display: flex;
     align-items: center;
-    width: calc(100% - 60px);
+    width: calc(100% - 32px);
     height: 30px;
   }
   .color-show-left{
@@ -455,7 +498,7 @@
     width: 100%;
   }
   /deep/ .el-select{
-    width: 262px;
+    width: 100%;
   }
   .line-option{
     display: flex;
@@ -495,7 +538,7 @@
   .color-arrows{
     color: #C0C4CC;
     position: absolute;
-    right: 70px;
+    right: 42px;
   }
   .color-arrows .nz-icon{
     font-size: 12px;
@@ -525,11 +568,20 @@
     line-height: 22px;
   }
   .width-option{
-    width: 195px;
+    width: 217px;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
+    overflow: hidden;
+  }
+  .dashes-box{
+    height:100%;
+    width:80%;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
   .el-row {
     margin-bottom: 20px;

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

@@ -289,7 +289,6 @@
                 "legend": this.legends[index],
               })
             });
-            console.log(this.form.name,this.unit,model);
             this.$emit('addModel',model);
           }
         });

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

@@ -1000,7 +1000,7 @@
   .nz-icon-shuidi{
     position: absolute;
     font-size: 48px;
-    color: rgba(132,213,194,0.5);
+    color: rgba(190,233,222,0.45);
     border-radius: 50%;
     height: 60px;
     width: 38px;
@@ -1008,7 +1008,7 @@
   .nz-icon-model{
     color: #23BF9A;
     position: absolute;
-    top: 14px;
+    top: 17px;
     left: 15px;
     font-size: 18px;
   }

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

@@ -59,39 +59,33 @@
             </div>
             <div class="facade-top-right" v-loading="projectInfo.loading">
               <div class="facade-top-title">
-                <span class="label">Alert :</span>
+                <span class="label" style="padding-left: 0;">Alert :</span>
                 {{total}}
               </div>
               <div class="facade-top-right-content">
                 <div>
-                  <el-progress
+                  <div class="content-high-title">
-                    type="circle"
+                    {{returnSeverityLabel('high')}}
-                    :percentage="projectInfo.alertStat[0]?(projectInfo.alertStat[0]/total)*100:0"
-                    :show-text="false"
-                    :width="40"
-                    color="#F5A390"
-                  ></el-progress>
-                  <div class="align--center">{{projectInfo.alertStat[0] || 0}}</div>
                   </div>
                   <div>
-                  <el-progress
+                    {{projectInfo.alertStat[0] || 0}}
-                    type="circle"
+                  </div>
-                    :percentage="projectInfo.alertStat[1]?(projectInfo.alertStat[1]/total)*100:0"
-                    :show-text="false"
-                    :width="40"
-                    color="#F6B977"
-                  ></el-progress>
-                  <div class="align--center">{{projectInfo.alertStat[1] || 0}}</div>
                 </div>
                 <div>
-                  <el-progress
+                  <div class="content-medium-title">
-                    type="circle"
+                    {{returnSeverityLabel('medium')}}
-                    :percentage="projectInfo.alertStat[2]?(projectInfo.alertStat[2]/total)*100:0"
+                  </div>
-                    :show-text="false"
+                  <div>
-                    :width="40"
+                    {{projectInfo.alertStat[1] || 0}}
-                    color="#EBD066"
+                  </div>
-                  ></el-progress>
+                </div>
-                  <div class="align--center">{{projectInfo.alertStat[2] || 0}}</div>
+                <div>
+                  <div class="content-low-title">
+                    {{returnSeverityLabel('low')}}
+                  </div>
+                  <div>
+                    {{projectInfo.alertStat[2] || 0}}
+                  </div>
                 </div>
               </div>
             </div>
@@ -290,6 +284,10 @@
           })
         }
       },
+      // Severity Label
+      returnSeverityLabel(key){
+        return this.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == key}).label
+      },
       editVisNetworkChange(flag){
         this.editVisNetwork=flag;
         if(flag){
@@ -374,15 +372,70 @@
     margin-left: 30px;
   }
   .facade-top .facade-top-right{
-    width: 12%;
+    width: 5%;
-    min-width: 280px;
+    min-width: 120px;
   }
   .facade-top-right-content{
     display: flex;
     justify-content: space-around;
     justify-items: center;
+    flex-direction: column;
     height: calc(100% - 30px);
-    align-items:center;
+    align-items:flex-start;
+  }
+  .facade-top-right-content > div{
+    width: 80px;
+    height: 22px;
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    text-align: center;
+  }
+  .facade-top-right-content > div > div:last-child{
+    text-align: center;
+    border-radius: 0 4px 4px 0;
+    flex: 1;
+    height: calc(100% - 2px);
+  }
+  .content-high-title{
+    background: #F2866E;
+    border-radius: 4px 0 0 4px;
+    width: 44px;
+    height: 100%;
+  }
+  .content-high-title + div{
+    border: 1px solid #F4907A;
+    font-size: 12px;
+    color: #F4907A;
+  }
+
+  .content-medium-title{
+    background: #F89984;
+    border-radius: 4px 0 0 4px;
+    width: 54px;
+    height: 100%;
+  }
+  .content-medium-title + div{
+    border: 1px solid #F9A28F;
+    font-size: 12px;
+    color: #F9A28F;
+  }
+
+  .content-low-title{
+    background: #F7BA78;
+    border-radius: 4px 0 0 4px;
+    width: 44px;
+    height: 100%;
+  }
+  .content-low-title + div{
+    border: 1px solid #F7BA78;
+    font-size: 12px;
+    color: #F7BA78;
+  }
+
+
+  .right-content-high{
+    border: 1px solid ;
   }
   .align--center{
     text-align: center;