perf: asset create、edit页面样式

1.asset弹框页（仅样式）

nezha-fronted/package-lock.json

@@ -3450,6 +3450,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.6.0.tgz",
+      "integrity": "sha512-xKkcr6v9UVOSF+PMuj7Ngt3bnzLwN1sSXWCvpvX+jYb3mePYsZnABq7wGkPac/m0nV653uGHXoHK8DCKCprdNg==",
+      "requires": {
+        "zrender": "4.2.0"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -12516,6 +12524,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.2.0.tgz",
+      "integrity": "sha512-YJ9hxt5uFincYYU3KK31+Ce+B6PJmYYK0Q9fQ6jOUAoC/VHbe4kCKAPkxKeT7jGTxrK5wYu18R0TLGqj2zbEOA=="
     }
   }
 }

nezha-fronted/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "echarts": "^4.6.0",
     "element-ui": "^2.13.0",
     "node-sass": "^4.13.0",
     "vue": "^2.5.2",

nezha-fronted/src/assets/css/main.css

@@ -58,6 +58,9 @@ html {
 .width-50 {
   width: 50% !important;
 }
+.width-70 {
+  width: 70% !important;
+}
 .width-100 {
   width: 100% !important;
 }
@@ -256,13 +259,29 @@ html {
 /* end--分页*/
 
 /* begin--右弹框滑入滑出动画*/
+@keyframes slide-in-from-right-580 {
+  from {right: -615px}
+  to {right: 15px}
+}
+@keyframes slide-out-to-right-580 {
+  from {right: 15px}
+  to {right: -615px}
+}
+@keyframes slide-in-from-right-840 {
+  from {right: -855px}
+  to {right: 15px}
+}
+@keyframes slide-out-to-right-840 {
+  from {right: 15px}
+  to {right: -855px}
+}
 @keyframes slide-in-from-right {
-  from {right: -800px}
+  from {right: -535px}
-  to {right: 0}
+  to {right: 15px}
 }
 @keyframes slide-out-to-right {
-  from {right: 0}
+  from {right: 15px}
-  to {right: -800px}
+  to {right: -535px}
 }
 .right-box-enter-active {
   animation: slide-in-from-right 0.4s;
@@ -270,6 +289,18 @@ html {
 .right-box-leave-active {
   animation: slide-out-to-right 0.4s;
 }
+.right-box-580-enter-active {
+  animation: slide-in-from-right-580 0.4s;
+}
+.right-box-580-leave-active {
+  animation: slide-out-to-right-580 0.4s;
+}
+.right-box-840-enter-active {
+  animation: slide-in-from-right-840 0.4s;
+}
+.right-box-840-leave-active {
+  animation: slide-out-to-right-840 0.4s;
+}
 /* end--右弹框滑入滑出动画*/
 
 /* begin--右子弹框动画*/
@@ -300,16 +331,18 @@ html {
   box-shadow: 0 0 15px #ccc;
   background-color: white;
   padding: 0 0 0 20px;
+  height: calc(100% - 100px);
 }
 
 /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
 .right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint, .right-box-panel {
   width: 520px;
-  height: calc(100% - 100px);
+}
+.right-box-add-asset {
+  width: 580px;
 }
 .right-box-add-endpoint {
   width: 840px;
-  height: calc(100% - 100px);
 }
 /* begin--右侧弹框--顶部按钮*/
 .right-box-top-btns {
@@ -318,6 +351,10 @@ html {
   padding-right: 10px;
   padding-top: 8px;
 }
+.pop-top-btns {
+  text-align: center;
+  float: right;
+}
 /* end--右侧弹框--顶部按钮*/
 
 /* begin--右侧弹框--内容*/
@@ -328,6 +365,41 @@ html {
   display: inline-block;
   font-weight: bold;
 }
+.pop-title {
+  line-height: 25px;
+  text-align: left;
+  display: inline-block;
+  font-weight: bold;
+}
+.pop-item, .pop-item-wider {
+  padding-top: 15px;
+}
+.pop-item-wider .el-form-item__label {
+  width: 80px !important;
+}
+.pop-item-wider .el-form-item__content {
+  margin-left: 80px !important;
+}
+.pop-label {
+  padding-bottom: 5px;
+}
+.pop-item .el-input {
+  width: 200px;
+}
+.pop-item .nz-btn {
+  width: 50px;
+}
+.pop-box {
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  padding: 2px 0 2px 5px;
+}
+.pop-box-asset {
+  height: 160px;
+}
+.pop-box-active {
+  background-color: #d8d8d8;
+}
 .right-box-form-box {
   height: calc(100% - 63px);
   width: 100%;
@@ -335,6 +407,9 @@ html {
 .right-box-form-box .el-scrollbar__wrap {
   overflow-x: hidden !important;
 }
+.pop-box .el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}
 .right-box-form {
   width: calc(100% - 20px);
 }
@@ -352,12 +427,21 @@ html {
   font-size: 16px;
   color: black;
 }
+.right-box-form-left.right-box-form .el-form-item .el-form-item__label {
+  padding: 0 20px 0 0;
+  font-size: 14px;
+  color: black;
+  line-height: 34px;
+}
 .right-box-form .el-form-item__content {
   line-height: 32px;
 }
 .right-box-form-box .el-scrollbar__view {
   height: 100%;
 }
+.pop-box .el-scrollbar__view {
+  padding-right: 10px;
+}
 .right-box-form-row {
   margin-top: 22px;
 }
@@ -430,12 +514,14 @@ html {
   width: 100%;
 }
 .right-box-form-content .right-box-row-with-btn {
-  width: calc(100% - 38px);
+  width: calc(100% - 37px);
-  vertical-align: top;
+}
+.right-box-form-content .right-box-row-with-btn.el-select--mini, .right-box-form-content .right-box-row-with-btn.el-cascader--mini {
+  width: calc(100% - 33px);
 }
 .right-box-row-btn {
-  width: 33px;
+  width: 32px;
-  height: 33px;
+  height: 32px;
   display: inline-block;
   text-align: center;
   border-radius: 5px;
@@ -444,6 +530,12 @@ html {
   color: #C7C9CE;
   transition: border-color .2s cubic-bezier(.645,.045,.355,1);
   cursor: pointer;
+  vertical-align: middle;
+}
+.right-box-row-btn.right-box-row-btn-small {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
 }
 .right-box-row-btn-active {
   color: white;
@@ -505,6 +597,9 @@ html {
 .config-dropdown { /* 若宽度不合适，自行增加新类覆盖宽度 */
   width: 500px;
 }
+.asset-dropdown {
+  width: 440px;
+}
 .config-dropdown-btn {
   display: inline-block;
   margin-left: 7px;
@@ -529,7 +624,9 @@ html {
   color: #F98D9A;
 }
 /* end--自定义可编辑的el-select下拉框样式*/
+
 .right-box-add-chart {
   width: 520px;
   height: calc(100% - 100px);
 }
+

nezha-fronted/src/components/common/language/en.js

@@ -64,6 +64,7 @@ const en = {
       label:"MetricLabel",
       addMetric:"Create Metric",
       expertTip:"Please enter an expression"
+
     },
     metricPreview:{
       title:'MetricPreview',
@@ -72,6 +73,7 @@ const en = {
     edit:'edit',
     delete:'delete',
     screen:'fullScreen'
+
   },
   validate: { //校验规则
     required: 'Required',
@@ -106,55 +108,57 @@ const en = {
     createAssetTab:{
       title:'Create Asset',
       sn:'SN',
-      host:'host',
+      host:'Host',
-      state:'state',
+      state:'State',
       selectTip:'please select',
-      assetInfo:'资产信息',
+      inStock: 'In Stock',
-      assetType:'资产类型',
+      notInStock: 'Not In Stock',
+      assetInfo:'Asset Info',
+      assetType:'Asset Type',
       assetTypeTab:{
-        assetType:'资产类型',
+        assetType:'Asset Type',
-        addAssetType:'新增资产类型',
+        addAssetType:'Add Asset Type',
-        existAssetType:'已有资产类型'
+        existAssetType:'Exist Asset Type'
       },
-      vendor:'厂商/型号',
+      vendor:'Vendor/Model',
       vendorTab:{
-        vendor:'厂商/型号',
+        vendor:'Vendor/Model',
-        vendorName:'新厂商名称',
+        vendorName:'New Vendor',
-        existVendor:'已有厂商',
+        existVendor:'Exist Vendor',
-        modelName:'新型号名称',
+        modelName:'New Model',
-        existModel:'已有型号'
+        existModel:'Exist Model'
       },
-      purchaseDate:'购买日期',
+      purchaseDate:'Purchase Date',
       dataSelectTip:'please select data',
       dc:'DC',
       dcName:'DC Name',
       AddIdcTab:{
-        title:'+Add IDC',
+        title:'Add DC',
         dcName:'DC Name',
         location:'Location',
-        principal:'负责人',
+        principal:'Principal',
         tel:'Tel'
       },
       editIdcTab:{
         title:'Edit IDC',
         dcName:'DC Name',
         location:'Location',
-        principal:'负责人',
+        principal:'Principal',
         tel:'Tel'
       },
       location:'Location',
-      principal:'负责人',
+      principal:'Principal',
       tel:'Tel',
-      cabinet: '机柜',
+      cabinet: 'Cabinet',
       AddCabinetTab:{
-        title:'+Add机柜',
+        title:'Add Cabinet',
         name:'Name',
         uSize:'U Size',
         remark:'Desc',
         DC:'DC',
       },
       editCabinetTab:{
-        title:'Edit 机柜',
+        title:'Edit Cabinet',
         name:'Name',
         uSize:'U Size',
         remark:'Desc',
@@ -163,13 +167,13 @@ const en = {
       uSize:'U Size',
       remark:'Desc',
       cli:'CLI Account',
-      loginType:'登录方式',
+      loginType:'Login Type',
-      password:'password',
+      password:'Password',
-      ssh:'SSH私钥',
+      ssh:'SSH-Key',
       account:'Account',
       port:'Port',
       upload:'Upload',
-      clickToUpload:'点击上传'
+      clickToUpload:'Upload'
     },
     editAssetTab:{
       title:'Create Asset',
@@ -177,17 +181,10 @@ const en = {
       host:'host',
       state:'state',
       selectTip:'please select',
-      inStore:'在库',
-      outStore:'出库',
       modelId:'ModelId',
       alert:'Alert',
       assetInfo:'资产信息',
       assetType:'资产类型',
-      assetTypeTab:{
-        assetType:'资产类型',
-        addAssetType:'新增资产类型',
-        existAssetType:'已有资产类型'
-      },
       vendor:'厂商/型号',
       vendorTab:{
         vendor:'厂商/型号',
@@ -226,7 +223,7 @@ const en = {
         DC:'DC',
       },
       editCabinetTab:{
-        title:'Edit 机柜',
+        title:'Edit Cabinet',
         name:'Name',
         uSize:'U Size',
         remark:'Desc',
@@ -298,8 +295,8 @@ const en = {
   },
   alert: {
     alert: "Alert",
-    alertList: "Alert List",
+    alertList: "Alert Message",
-    alertConfig: "Alert Config",
+    alertConfig: "Alert Rule",
     alertName: "Alert Name",
     severity: "Severity",
     description: "Desc",
@@ -327,9 +324,9 @@ const en = {
       for: "For (s)",
       link: 'Link',
       option: "Option",
-      alertConfig: "Alert Config",
+      alertConfig: "Alert Rule",
-      createAlertConfig: "Create Alert Config",
+      createAlertConfig: "Create Alert Rule",
-      editAlertConfig: "Edit Alert Config",
+      editAlertConfig: "Edit Alert Rule",
       medium: "Medium",
       high: "High",
       low: "Low",

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="right-box">
+  <transition name="right-box-840">
     <div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">

nezha-fronted/src/components/page/asset/asset.vue

@@ -73,6 +73,7 @@
         </el-checkbox-group>
       </div>
     </div>
+
     <div class="content-right">
       <div class="top-tools">
         <button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
@@ -80,6 +81,7 @@
         </button>
         <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
       </div>
+
       <el-table
         height="calc(100% - 65px)"
         style="width: 100%;"
@@ -96,78 +98,46 @@
           {{item}}
           <template slot-scope="scope" :column="item">
             <div v-if="item.prop=='ID'">
-              <p>
+              <span>{{scope.row.id}}</span>
-                <span>{{scope.row.id}}</span>
-              </p>
             </div>
             <div v-if="item.prop=='资产类型'">
-              <p>
+              <span>{{scope.row.model.type.value}}</span>
-                <span>{{scope.row.model.type.value}}</span>
-              </p>
             </div>
             <div v-if="item.prop=='SN'">
-              <p>
+              <span>{{scope.row.sn}}</span>
-                <span>{{scope.row.sn}}</span>
-              </p>
             </div>
             <div v-if="item.prop=='HOST'">
-              <p>
+              <span>{{scope.row.host}}</span>
-                <span>{{scope.row.host}}</span>
-              </p>
             </div>
             <div v-if="item.prop=='资产状态'">
-              <p>
+              <span>{{scope.row.state==1?'在库':'出库'}}</span>
-                <span>{{scope.row.state==1?'在库':'出库'}}</span>
-              </p>
             </div>
             <div v-if="item.prop=='Module'">
-              <p>
+              <div class="tab-input-square">{{scope.row.moduleNum}}</div>
-                                 <span>
-                                    <div class="tab-input-square">{{scope.row.moduleNum}}</div>
-                                 </span>
-              </p>
             </div>
             <div v-if="item.prop=='Alert'">
-              <p>
+              <div class="tab-input-square">{{scope.row.alertNum}}</div>
-                                 <span>
-                                   <div class="tab-input-square">{{scope.row.alertNum}}</div>
-                                 </span>
-              </p>
             </div>
             <div v-if="item.prop=='数据中心'">
-              <p>
+              <span>{{scope.row.idc.name}}</span>
-                <span>{{scope.row.idc.name}}</span>
-              </p>
             </div>
             <div v-if="item.prop=='机柜'">
-              <p>
+              <span>{{returnData(scope.row.cabinet)}}</span>
-                <span>{{returnData(scope.row.cabinet)}}</span>
-              </p>
             </div>
             <div v-if="item.prop=='型号'">
-              <p>
+              <span>{{scope.row.model.name}}</span>
-                <span>{{scope.row.model.name}}</span>
-              </p>
             </div>
             <div v-if="item.prop=='厂商'">
-              <p>
+              <span>{{scope.row.model.vendor.value}}</span>
-                <span>{{scope.row.model.vendor.value}}</span>
-              </p>
             </div>
             <div v-if="item.prop=='购买日期'">
-              <p>
+              <span>{{scope.row.purchaseDate}}</span>
-                <span>{{scope.row.purchaseDate}}</span>
-              </p>
             </div>
             <div v-if="item.prop=='责任人'">
-              <p>
+              <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
-                <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
-              </p>
             </div>
             <div v-if="item.prop=='责任人电话'">
-              <p>
+              <span>{{scope.row.idc.tel}}</span>
-                <span>{{scope.row.idc.tel}}</span>
-              </p>
             </div>
             <div v-if="item.prop == 'option'">
                               <span @click="ssss(scope.row.id ,scope.row.host)" class="account-list-option"><i
@@ -196,6 +166,29 @@
     name: "asset",
     data() {
       return {
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [{
+            id: 1,
+            name: 'ID',
+            type: 'input',
+            label: 'id',
+            disabled: false
+          },{
+            id: 20,
+            name: 'SN',
+            type: 'input',
+            label: 'sn',
+            disabled: false
+          },{
+            id: 21,
+            name: 'Host',
+            type: 'input',
+            label: 'host',
+            disabled: false
+          }],
+        },
+        searchLabel: {}, //搜索参数
         checkList: [],
         tableTitle: [
           {
@@ -542,6 +535,9 @@
         this.getAssetData();
         this.getIDCOptionData();
       },
+      search() {
+
+      }
     },
     mounted() {
       this.getUserData();
@@ -555,6 +551,9 @@
 </script>
 
 <style scoped>
+  .asset {
+    height: 100%;
+  }
   .sidebar-pop-input {
     position: absolute;
     right: 50px;

nezha-fronted/src/components/page/project/project.vue

@@ -53,10 +53,10 @@
     <div class="content-right" v-show="tableShow == 1">
       <div class="top-tools">
         <div class="nz-btn-group float-left">
-          <button @click="" class="nz-btn nz-btn-size-small nz-btn-disabled nz-btn-style-normal float-left">
+          <button @click="" type="button" class="nz-btn nz-btn-size-small nz-btn-disabled nz-btn-style-normal float-left">
             <span>{{$t('project.endpoint.endpoint')}}</span>
           </button>
-          <button @click="tableShow = 2" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
+          <button type="button" @click="tableShow = 2" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
             <span>{{$t('project.metrics.metrics')}}</span>
           </button>
         </div>