fix: asset界面优化

统一侧滑样式 调整国家化参数

nezha-fronted/src/components/common/header.vue

@@ -147,7 +147,7 @@ export default {
     height: 60px;
     font-size: 22px;
     background-color: #ffffff;
-    z-index: 500;
+    z-index: 510;
     box-shadow: 0px 20px 13px -19px #5E5E5E;
 }
 

nezha-fronted/src/components/common/home.vue

@@ -10,7 +10,6 @@
 
 <script>
 import Header from "./header";
-import sideBar from "./sideBar";
 export default {
   name: "home",
   components: {Header}

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

@@ -1,10 +1,10 @@
 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包
 const cn = {
-  overall:{
+  overall: {
-    dashboard:'仪表盘',
+    dashboard: '仪表盘',
-    project:'工程',
+    project: '工程',
-    asset:'资产',
+    asset: '资产',
-    config:'设置',
+    config: '设置',
     create: '新增',
     edit: '修改',
     delete: '删除',
@@ -29,6 +29,7 @@ const cn = {
       procurementDate: '采购日期',
       warrantyDate: '保修截止期',
       deviceDuty: '设备责任人',
+      option: '操作',
     },
     tagTableTitle: {
       projectName: '项目名称',

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

@@ -16,19 +16,20 @@ const en = {
   asset:{
     tableTitle: {
       id: 'ID',
-      assetType: 'assetType',
+      assetType: '资产类型',
       device: 'Device SN',
       ip: 'IP',
-      assetState: 'assetState',
+      assetState: '资产状态',
       module: 'Module',
       alarm: 'Alarm',
-      dataCenter: 'dataCenter',
+      dataCenter: '数据中心',
-      cabinet: 'cabinet',
+      cabinet: '机柜',
-      model: 'model',
+      model: '型号',
-      manufacturer: 'manufacturer',
+      manufacturer: '厂商',
       procurementDate: '采购日期',
       warrantyDate: '保修截止期',
       deviceDuty: '设备责任人',
+      option: "Option"
     },
     tagTableTitle: {
       projectName: '项目名称',

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

@@ -5,7 +5,7 @@
                 <div>Project</div>
                 <div class="sidebar-info">
                     <div class="sidebar-info-header">ALL</div>
-                    <div class="sidebar-info-footer" v-if="sidebarState">
+                    <div class="sidebar-info-footer">
                         <el-checkbox-group v-model="checkList" size="small">
                             <el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>{{item.name}}
                                 <div class="checkbox-edit" @click.prevent="edit(item.id)">编辑</div>
@@ -16,6 +16,12 @@
             </div>
         </div>
         <div class="content-right">
+            <el-input
+                    class="account-list-search"
+                    type="text"
+                    :placeholder="$t('overall.search')"
+                    size="small"
+            ></el-input>
             <div>
                 <el-table
                         :height="tableHeight"
@@ -40,25 +46,21 @@
                                     <span>{{scope.row['host']}}</span>
                                 </p>
                             </div>
-                        </template>
+                            <div v-if="item.prop == 'option'" class="account-list-options">
-                    </el-table-column>
+                                <span @click.stop="tagShow('showDel')" class="account-list-option"><i class="el-icon-delete"></i></span>
-                    <el-table-column
+                                <span @click.stop="tagShow('showEdit')" class="account-list-option"><i class="el-icon-view"></i></span>
-                            fixed="right"
+                                <span @click.stop="tagShow('showView')" class="account-list-option"><i class="el-icon-edit-outline"></i></span>
-                            label="操作"
+                            </div>
-                            width="100">
-                        <template slot-scope="scope">
-                            <el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看</el-button>
-                            <el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
                 <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-                <transition name="el-zoom-in-center" @click.stop>
+                <transition name="right-box" @click.stop>
                     <div class="right-menu" v-if="tabShow" v-clickoutside:tagHide="tagShow">
                         <div v-if="this.tagType=='add'">
                             <el-form ref="form" :model="form" label-width="120px">
                                 <div class="right-box__top-btns">
-                                    <div class="right-box__top-btn right-box__top-btn_full">
+                                    <div class="right-box__top-btn right-box__top-btn_full" @click="tagShow()">
                                         <div class="right-box__btn-icon">
                                             <i class="el-icon-close"></i>
                                         </div>
@@ -109,9 +111,9 @@
                             </el-form>
                         </div>
                         <div v-if="this.tagType=='edit'">
-                            <el-form ref="form" :model="form" label-width="120px" size="small">
+                            <el-form ref="form" :model="form" label-width="120px" size="small" >
                                 <div class="right-box__top-btns">
-                                    <div class="right-box__top-btn right-box__top-btn_full">
+                                    <div class="right-box__top-btn right-box__top-btn_full" @click="tagShow()">
                                         <div class="right-box__btn-icon">
                                             <i class="el-icon-close"></i>
                                         </div>
@@ -193,6 +195,7 @@
                                                     <div class="tableSquare">{{11}}/{{111}}</div>
                                                 </div>
                                             </template>
+
                                         </el-table-column>
                                         <el-table-column
                                                 fixed="right"
@@ -249,7 +252,7 @@ export default {
   name: "asset",
   data() {
     return {
-      checkList: [0],
+      checkList: [],
       checkListData: [],
       sidebarState:'',
       tableTitle: [
@@ -262,11 +265,11 @@ export default {
           prop: '资产类型',
           show: true,
         }, {
-          label: this.$t("asset.tableTitle.Device"),
+          label: this.$t("asset.tableTitle.device"),
           prop: 'Device SN',
           show: true,
         }, {
-          label: this.$t("asset.tableTitle.IP"),
+          label: this.$t("asset.tableTitle.ip"),
           prop: 'IP',
           show: true,
         }, {
@@ -274,11 +277,11 @@ export default {
           prop: '资产状态',
           show: true,
         }, {
-          label: this.$t("asset.tableTitle.Module"),
+          label: this.$t("asset.tableTitle.module"),
           prop: 'Module',
           show: true,
         }, {
-          label: this.$t("asset.tableTitle.Alarm"),
+          label: this.$t("asset.tableTitle.alarm"),
           prop: 'Alarm',
           show: true,
         }, {
@@ -309,6 +312,10 @@ export default {
           label: this.$t("asset.tableTitle.deviceDuty"),
           prop: '设备责任人',
           show: true,
+        }, {
+          label: this.$t('config.account.option'),
+          prop: 'option',
+          show: true,
         }],
       tagTableTitle: [
         {
@@ -359,7 +366,7 @@ export default {
         pageSize: 20,
         total: 0,
       },
-      tableHeight:document.documentElement.clientHeight-150,
+      tableHeight:document.documentElement.clientHeight-200,
       tabShow: false,
       tagType: 'add',
       form: {
@@ -383,15 +390,21 @@ export default {
           this.sidebarState=true
         }else{
           this.sidebarState=false
-          this.getAssetData()
+          this.getAssetData();
           this.checkListData=[0]
         }
       },
       deep: true,
     },
-
   },
   methods: {
+    getAssetData() {
+      this.$get('idc', this.pageObj).then(response => {
+        if (response.code == 200) {
+          this.checkListData = response.data.list
+        }
+      })
+    },
     getListData() {
       this.$get('asset', this.pageObj).then(response => {
         if (response.code === 200) {
@@ -400,13 +413,6 @@ export default {
         }
       })
     },
-    getAssetData() {
-      this.$get('idc', this.pageObj).then(response => {
-        if (response.code == 200) {
-          this.checkListData = response.data.list
-        }
-      })
-    },
     tagShow(t) {
       this.tabShow = false;
       if (t === 'showAdd') {
@@ -429,11 +435,10 @@ export default {
   },
 
   mounted() {
-    this.getListData()
+    this.getListData();
-    this.getAssetData()
+    this.getAssetData();
     window.onresize = () => {
-      this.tableHeight = document.documentElement.clientHeight-150;
+      this.tableHeight = document.documentElement.clientHeight-200;
-      console.log(this.tableHeight)
     }
   }
 }
@@ -507,11 +512,8 @@ export default {
     position: absolute;
     top: 8px;
     left: 230px;
-
 }
 
-
-
 .right-box__top-btn {
     border-radius: 0 0 9px 9px;
     float: right;
@@ -535,6 +537,19 @@ export default {
 .el-form-style {
     padding-top: 40px;
 }
+.right-menu {
+    position: fixed;
+    top: 60px;
+    right: 0;
+    z-index: 500;
+    border-radius: 8px;
+    box-shadow: 0 0 15px #ccc;
+    background-color: white;
+    padding: 0 20px;
+    width: 580px;
+    height: calc(90% - 60px);
+    overflow-y:auto
+}
 
 .tableSquare {
     border: 1px solid #000;
@@ -543,4 +558,25 @@ export default {
     border-radius: 8px;
     text-align: center;
 }
+
+.account-list-search {
+    float: right;
+    width: 220px;
+    margin: 15px 0;
+}
+
+@keyframes slide-in-from-right {
+    from {right: -800px}
+    to {right: 0}
+}
+@keyframes slide-out-to-right {
+    from {right: 0}
+    to {right: -800px}
+}
+.right-box-enter-active {
+    animation: slide-in-from-right 0.4s;
+}
+.right-box-leave-active {
+    animation: slide-out-to-right 0.4s;
+}
 </style>