perf: asset create、edit页面样式

1.asset弹框页（仅样式）
2020-01-03 18:10:26 +08:00
parent 14aa37534d
commit 18dcbbaa8e
9 changed files with 3000 additions and 3348 deletions
--- a/nezha-fronted/package-lock.json
+++ b/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=="
    }
  }
 }
--- a/nezha-fronted/package.json
+++ b/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",
--- a/nezha-fronted/src/assets/css/main.css
+++ b/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}
-  to {right: 0}
+  from {right: -535px}
+  to {right: 15px}
 }
@keyframes slide-out-to-right {
-  from {right: 0}
-  to {right: -800px}
+  from {right: 15px}
+  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);
-  vertical-align: top;
+  width: calc(100% - 37px);
+}
+.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;
-  height: 33px;
+  width: 32px;
+  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);
 }
+
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/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',
-      state:'state',
+      host:'Host',
+      state:'State',
      selectTip:'please select',
-      assetInfo:'资产信息',
-      assetType:'资产类型',
+      inStock: 'In Stock',
+      notInStock: 'Not In Stock',
+      assetInfo:'Asset Info',
+      assetType:'Asset Type',
      assetTypeTab:{
-        assetType:'资产类型',
-        addAssetType:'新增资产类型',
-        existAssetType:'已有资产类型'
+        assetType:'Asset Type',
+        addAssetType:'Add Asset Type',
+        existAssetType:'Exist Asset Type'
      },
-      vendor:'厂商/型号',
+      vendor:'Vendor/Model',
      vendorTab:{
-        vendor:'厂商/型号',
-        vendorName:'新厂商名称',
-        existVendor:'已有厂商',
-        modelName:'新型号名称',
-        existModel:'已有型号'
+        vendor:'Vendor/Model',
+        vendorName:'New Vendor',
+        existVendor:'Exist Vendor',
+        modelName:'New Model',
+        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:'登录方式',
-      password:'password',
-      ssh:'SSH私钥',
+      loginType:'Login Type',
+      password:'Password',
+      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",
-    alertConfig: "Alert Config",
+    alertList: "Alert Message",
+    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",
-      createAlertConfig: "Create Alert Config",
-      editAlertConfig: "Edit Alert Config",
+      alertConfig: "Alert Rule",
+      createAlertConfig: "Create Alert Rule",
+      editAlertConfig: "Edit Alert Rule",
      medium: "Medium",
      high: "High",
      low: "Low",
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/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">
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/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>
-              </p>
+              <span>{{scope.row.id}}</span>
            </div>
            <div v-if="item.prop=='资产类型'">
-              <p>
-                <span>{{scope.row.model.type.value}}</span>
-              </p>
+              <span>{{scope.row.model.type.value}}</span>
            </div>
            <div v-if="item.prop=='SN'">
-              <p>
-                <span>{{scope.row.sn}}</span>
-              </p>
+              <span>{{scope.row.sn}}</span>
            </div>
            <div v-if="item.prop=='HOST'">
-              <p>
-                <span>{{scope.row.host}}</span>
-              </p>
+              <span>{{scope.row.host}}</span>
            </div>
            <div v-if="item.prop=='资产状态'">
-              <p>
-                <span>{{scope.row.state==1?'在库':'出库'}}</span>
-              </p>
+              <span>{{scope.row.state==1?'在库':'出库'}}</span>
            </div>
            <div v-if="item.prop=='Module'">
-              <p>
-                                 <span>
-                                    <div class="tab-input-square">{{scope.row.moduleNum}}</div>
-                                 </span>
-              </p>
+              <div class="tab-input-square">{{scope.row.moduleNum}}</div>
            </div>
            <div v-if="item.prop=='Alert'">
-              <p>
-                                 <span>
-                                   <div class="tab-input-square">{{scope.row.alertNum}}</div>
-                                 </span>
-              </p>
+              <div class="tab-input-square">{{scope.row.alertNum}}</div>
            </div>
            <div v-if="item.prop=='数据中心'">
-              <p>
-                <span>{{scope.row.idc.name}}</span>
-              </p>
+              <span>{{scope.row.idc.name}}</span>
            </div>
            <div v-if="item.prop=='机柜'">
-              <p>
-                <span>{{returnData(scope.row.cabinet)}}</span>
-              </p>
+              <span>{{returnData(scope.row.cabinet)}}</span>
            </div>
            <div v-if="item.prop=='型号'">
-              <p>
-                <span>{{scope.row.model.name}}</span>
-              </p>
+              <span>{{scope.row.model.name}}</span>
            </div>
            <div v-if="item.prop=='厂商'">
-              <p>
-                <span>{{scope.row.model.vendor.value}}</span>
-              </p>
+              <span>{{scope.row.model.vendor.value}}</span>
            </div>
            <div v-if="item.prop=='购买日期'">
-              <p>
-                <span>{{scope.row.purchaseDate}}</span>
-              </p>
+              <span>{{scope.row.purchaseDate}}</span>
            </div>
            <div v-if="item.prop=='责任人'">
-              <p>
-                <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
-              </p>
+              <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
            </div>
            <div v-if="item.prop=='责任人电话'">
-              <p>
-                <span>{{scope.row.idc.tel}}</span>
-              </p>
+              <span>{{scope.row.idc.tel}}</span>
            </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;
--- a/nezha-fronted/src/components/page/asset/assetAddUnit.vue
+++ b/nezha-fronted/src/components/page/asset/assetAddUnit.vue
--- a/nezha-fronted/src/components/page/asset/assetEditUnit.vue
+++ b/nezha-fronted/src/components/page/asset/assetEditUnit.vue
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/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>