From ecac31d327f56dd305b9d418256f3f23bc237afe Mon Sep 17 00:00:00 2001
From: wanghaoyu <825151728@qq.com>
Date: Fri, 6 Dec 2019 16:43:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20asset=E7=95=8C=E9=9D=A2=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20=E7=BB=9F=E4=B8=80=E4=BE=A7=E6=BB=91=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=20=E8=B0=83=E6=95=B4=E5=9B=BD=E5=AE=B6=E5=8C=96?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/header.vue          |   2 +-
 nezha-fronted/src/components/common/home.vue  |   1 -
 .../src/components/common/language/cn.js      |  11 +-
 .../src/components/common/language/en.js      |  13 ++-
 .../src/components/page/asset/asset.vue       | 108 ++++++++++++------
 5 files changed, 86 insertions(+), 49 deletions(-)

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 9c39d2cc3..ce3d18d6b 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/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;
 }
 
diff --git a/nezha-fronted/src/components/common/home.vue b/nezha-fronted/src/components/common/home.vue
index f4dcf0a75..102d8a6c8 100644
--- a/nezha-fronted/src/components/common/home.vue
+++ b/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}
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index c28057c6b..8627cac8a 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/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:{
-    dashboard:'仪表盘',
-    project:'工程',
-    asset:'资产',
-    config:'设置',
+  overall: {
+    dashboard: '仪表盘',
+    project: '工程',
+    asset: '资产',
+    config: '设置',
     create: '新增',
     edit: '修改',
     delete: '删除',
@@ -29,6 +29,7 @@ const cn = {
       procurementDate: '采购日期',
       warrantyDate: '保修截止期',
       deviceDuty: '设备责任人',
+      option: '操作',
     },
     tagTableTitle: {
       projectName: '项目名称',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 716ed716b..b3dcd30f1 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/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',
-      cabinet: 'cabinet',
-      model: 'model',
-      manufacturer: 'manufacturer',
+      dataCenter: '数据中心',
+      cabinet: '机柜',
+      model: '型号',
+      manufacturer: '厂商',
       procurementDate: '采购日期',
       warrantyDate: '保修截止期',
       deviceDuty: '设备责任人',
+      option: "Option"
     },
     tagTableTitle: {
       projectName: '项目名称',
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 631bc65bd..c40ad5ba9 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/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>
-                    </el-table-column>
-                    <el-table-column
-                            fixed="right"
-                            label="操作"
-                            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>
+                            <div v-if="item.prop == 'option'" class="account-list-options">
+                                <span @click.stop="tagShow('showDel')" class="account-list-option"><i class="el-icon-delete"></i></span>
+                                <span @click.stop="tagShow('showEdit')" class="account-list-option"><i class="el-icon-view"></i></span>
+                                <span @click.stop="tagShow('showView')" class="account-list-option"><i class="el-icon-edit-outline"></i></span>
+                            </div>
                         </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.getAssetData()
+    this.getListData();
+    this.getAssetData();
     window.onresize = () => {
-      this.tableHeight = document.documentElement.clientHeight-150;
-      console.log(this.tableHeight)
+      this.tableHeight = document.documentElement.clientHeight-200;
     }
   }
 }
@@ -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>
\ No newline at end of file