From c3d9d42bc7330ed3d64fbb384cc58908d92845c5 Mon Sep 17 00:00:00 2001
From: z_yu <1534695664@qq.com>
Date: Tue, 19 Jul 2022 16:03:52 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BB=A5=E5=8F=8Abug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/storeManage/deviceManage/device.js    |  46 ++++---
 .../deviceManage/module/bindParams.vue        |  34 +++--
 .../deviceManage/module/deviceDetail.vue      | 117 +++++-------------
 3 files changed, 87 insertions(+), 110 deletions(-)

diff --git a/src/api/storeManage/deviceManage/device.js b/src/api/storeManage/deviceManage/device.js
index 4e6cef1..c164d71 100644
--- a/src/api/storeManage/deviceManage/device.js
+++ b/src/api/storeManage/deviceManage/device.js
@@ -8,18 +8,7 @@ export function getSupplier() {
 }
 
 export function add(data) {
-  let url = 'api/desecabinet/create'
-  if (data.deviceTypeId.name === '密集架') {
-    url = 'api/desecabinet/create'
-  } else if (data.deviceTypeId.name === '回转柜') {
-    url = 'api/desecabinet/create'
-  } else if (data.deviceTypeId.name === '摄像头') {
-    url = 'api/camera/create'
-  } else if (data.deviceTypeId.name === '空调' || data.deviceTypeId.name === '桌面式RFID读写器' || data.deviceTypeId.name === '盘点机' || data.deviceTypeId.name === '恒湿机' || data.deviceTypeId.name === '漏水传感器' || data.deviceTypeId.name === '温湿度感应器' || data.deviceTypeId.name === '空气质监测' || data.deviceTypeId.name === '漏水传感器') {
-    url = 'api/insidedevices/create'
-  } else if (data.deviceTypeId.name === '通道门' || data.deviceTypeId.name === '手持式RFID读写器') {
-    url = 'api/outsidedevices/create'
-  }
+  const url = getUrl(data, 'add')
   return request({
     url: url,
     method: 'post',
@@ -39,11 +28,40 @@ export function del(ids) {
 }
 
 export function edit(data) {
+  const url = getUrl(data, 'edit')
   return request({
-    url: 'api/desecabinet/edit',
+    url: url,
     method: 'put',
     data
   })
 }
 
-export default { add, edit, del, getSupplier }
+export function getDeviceType() {
+  return request({
+    url: 'api/device/type',
+    method: 'get'
+  })
+}
+
+function getUrl(data, optTYpe) {
+  let url = 'api/desecabinet/'
+  if (data.deviceTypeId.name === '密集架') {
+    url = 'api/desecabinet/'
+  } else if (data.deviceTypeId.name === '回转柜') {
+    url = 'api/rotarycabinet/'
+  } else if (data.deviceTypeId.name === '摄像头') {
+    url = 'api/camera/'
+  } else if (data.deviceTypeId.name === '空调' || data.deviceTypeId.name === '桌面式RFID读写器' || data.deviceTypeId.name === '盘点机' || data.deviceTypeId.name === '恒湿机' || data.deviceTypeId.name === '漏水传感器' || data.deviceTypeId.name === '温湿度感应器' || data.deviceTypeId.name === '空气质量检测设备' || data.deviceTypeId.name === '漏水传感器') {
+    url = 'api/insidedevices/'
+  } else if (data.deviceTypeId.name === '通道门' || data.deviceTypeId.name === '手持式RFID读写器') {
+    url = 'api/outsidedevices/'
+  }
+  if (optTYpe === 'add') {
+    url += 'create'
+  } else if (optTYpe === 'edit') {
+    url += 'update'
+  }
+  return url
+}
+
+export default { add, edit, del, getSupplier, getDeviceType }
diff --git a/src/views/storeManage/deviceManage/module/bindParams.vue b/src/views/storeManage/deviceManage/module/bindParams.vue
index 2dee754..d5060df 100644
--- a/src/views/storeManage/deviceManage/module/bindParams.vue
+++ b/src/views/storeManage/deviceManage/module/bindParams.vue
@@ -8,19 +8,19 @@
       <div class="head-container">
         <el-form ref="form" :model="form" inline :rules="rules" size="small" label-width="80px">
           <el-form-item label="参数ID" prop="paramId">
-            <el-input v-model="form.paramId" style="width: 120px;" />
+            <el-input v-model="form.paramId" style="width: 150px;" />
           </el-form-item>
           <el-form-item label="参数名称" prop="paramName">
-            <el-input v-model="form.paramName" style="width: 120px;" />
+            <el-input v-model="form.paramName" style="width: 150px;" />
           </el-form-item>
           <el-form-item label="单位值" prop="unit">
-            <el-input v-model="form.unit" style="width: 120px;" />
+            <el-input v-model="form.unit" style="width: 150px;" />
           </el-form-item>
-          <el-button type="primary" @click="add">添加</el-button>
+          <el-button class="filter-item" size="mini" type="primary" @click="add">添加</el-button>
         </el-form>
       </div>
-      <el-table ref="table" :loading="loading" :data="params">
-        <el-table-column type="index" label="序号" width="55" align="center" />
+      <el-table ref="table" :loading="loading" :data="params" height="calc(100vh - 582px)">
+        <el-table-column type="index" label="序号" width="80" align="center" />
         <el-table-column prop="paramId" label="参数ID" align="center" />
         <el-table-column prop="paramName" label="参数名称" align="center" />
         <el-table-column prop="unit" label="单位值" align="center" />
@@ -96,18 +96,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.tree-scroll {
-  height: calc(100vh - 275px);
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
 .binding-params-dialog {
   ::v-deep .el-dialog{
     width: 950px !important;
   }
+  ::v-deep .el-dialog__body{
+    padding: 0;
+  }
+  ::v-deep form{
+    display: flex;
+    justify-content: space-around;
+  }
+  ::v-deep .el-form-item--small.el-form-item {
+    margin-bottom: 0;
+  }
 }
 .delete-btn{
   background-color: #F65163;
   border-color: #F65163;
 }
+.head-container .filter-item {
+  width: 76px;
+  height: 32px;
+  display: inline-block;
+  vertical-align: middle;
+  background-color: #3a99fd;
+}
 </style>
diff --git a/src/views/storeManage/deviceManage/module/deviceDetail.vue b/src/views/storeManage/deviceManage/module/deviceDetail.vue
index e61d595..aef2bba 100644
--- a/src/views/storeManage/deviceManage/module/deviceDetail.vue
+++ b/src/views/storeManage/deviceManage/module/deviceDetail.vue
@@ -11,7 +11,7 @@
           <el-select v-model="deviceType" class="filter-item" style="margin-left:10px" placeholder="全部" @change="crud.toQuery">
             <el-option :key="0" label="全部" value="" />
             <el-option v-for="item in deviceTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
-          </el-select> <!-- -->
+          </el-select>
         </template>
         <template v-slot:rightButtonGroup>
           <div class="archives-handler-btn">
@@ -122,7 +122,7 @@
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form size="small" label-width="80px">
           <el-form-item label="设备类型">
             <el-select v-model="selectedDeviceType" style="width: 370px;">
               <el-option v-for="item in deviceTypeOptions" :key="item.id" :label="item.name" :value="item.name" />
@@ -140,23 +140,7 @@
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="140px">
-          <el-form-item label="当前电脑Mac地址">
-            <el-input v-model="currentMac" style="width: 370px;" :disabled="true" />
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="dobindingMac()">
-            确定绑定
-          </el-button>
-        </div>
-      </div>
-    </el-dialog>
-    <el-dialog :close-on-click-modal="false" :visible.sync="bindingMacVisible" title="绑定设备">
-      <span class="dialog-right-top" />
-      <span class="dialog-left-bottom" />
-      <div class="setting-dialog">
-        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="140px">
+        <el-form size="small" label-width="140px">
           <el-form-item label="当前电脑Mac地址">
             <el-input v-model="currentMac" style="width: 370px;" :disabled="true" />
           </el-form-item>
@@ -173,17 +157,17 @@
       <span class="right-top-line" />
       <span class="left-bottom-line" />
       <!--表格渲染-->
-      <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
-        <el-table-column align="center" type="selection" width="55" />
+      <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" height="calc(100vh - 295px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
+        <el-table-column align="center" type="selection" width="50" />
         <el-table-column align="center" type="index" label="序号" width="55" />
-        <el-table-column align="center" prop="storeroomId.name" label="所属区域" />
-        <el-table-column align="center" label="设备状态">
+        <el-table-column align="center" prop="storeroomId.name" label="所属区域" width="100" />
+        <el-table-column align="center" label="设备状态" width="100">
           <template slot-scope="scope">
             <span :class="{ 'spk-a': scope.row.deviceState === 1 }" />
           </template>
         </el-table-column>
         <el-table-column align="center" prop="deviceTypeId.name" label="设备类型" />
-        <el-table-column align="center" prop="supplierId.name" label="设备厂商" />
+        <el-table-column align="center" prop="supplierId.name" label="设备厂商" width="100" />
         <el-table-column align="center" prop="deviceName" label="设备名称" />
         <el-table-column align="center" label="设备ID">
           <template slot-scope="scope">
@@ -191,19 +175,19 @@
             <span v-else>——</span>
           </template>
         </el-table-column>
-        <el-table-column align="center" label="接口IP">
+        <el-table-column align="center" label="接口IP" width="120">
           <template slot-scope="scope">
             <span v-if="scope.row.deviceIp"> {{ scope.row.deviceIp }} </span>
             <span v-else>——</span>
           </template>
         </el-table-column>
-        <el-table-column align="center" label="端口">
+        <el-table-column align="center" label="端口" width="90">
           <template slot-scope="scope">
             <span v-if="scope.row.devicePort"> {{ scope.row.devicePort }} </span>
             <span v-else>——</span>
           </template>
         </el-table-column>
-        <el-table-column align="center" prop="dicExplain" label="绑定设备" />
+        <el-table-column align="center" prop="dicExplain" label="绑定设备" width="100" />
         <el-table-column align="center" prop="dicExplain" label="绑定参数" />
       </el-table>
       <!--分页组件-->
@@ -265,52 +249,7 @@ export default {
       selectDeviceTypeVisible: false,
       bindingMacVisible: false,
       currentMac: '',
-      deviceTypeOptions: [
-        {
-          id: '89284777EFADA87FA342A7',
-          name: '空调'
-        },
-        {
-          id: 'DD656054BE3D1DF1E2F1FC',
-          name: '密集架'
-        },
-        {
-          id: '5643ED11723BBA5A4C1856',
-          name: '回转柜'
-        },
-        {
-          id: '65D1886B0F864291766421',
-          name: '通道门'
-        },
-        {
-          id: '7305DE3D273B0CAC079538',
-          name: '摄像头'
-        },
-        {
-          id: 'C09A1946216E496BB3FA88',
-          name: '恒湿机'
-        },
-        {
-          id: '250AE644EC43E4EC954A81',
-          name: '漏水传感器'
-        },
-        {
-          id: '7882487E0C15304A3758AF',
-          name: '温湿度感应器'
-        },
-        {
-          id: 'E58C8D7C896BCB9A408A78',
-          name: '空气质量检测设备'
-        },
-        {
-          id: 'E2767FEACA9CE0E3B16B89',
-          name: '桌面式RFID读写器'
-        },
-        {
-          id: '3B85FA21FDAFBB618B5D40',
-          name: '手持式RFID读写器'
-        }
-      ],
+      deviceTypeOptions: [],
       selectedDeviceType: '密集架', // 选择添加的设备种类
       supplierOptions: [] // 厂商
     }
@@ -325,7 +264,7 @@ export default {
       }
     },
     isInsidedevices() {
-      if (this.selectedDeviceType === '空调' || this.selectedDeviceType === '桌面式RFID读写器' || this.selectedDeviceType === '盘点机' || this.selectedDeviceType === '恒湿机' || this.selectedDeviceType === '漏水传感器' || this.selectedDeviceType === '温湿度感应器' || this.selectedDeviceType === '空气质监测' || this.selectedDeviceType === '漏水传感器') {
+      if (this.selectedDeviceType === '空调' || this.selectedDeviceType === '桌面式RFID读写器' || this.selectedDeviceType === '盘点机' || this.selectedDeviceType === '恒湿机' || this.selectedDeviceType === '漏水传感器' || this.selectedDeviceType === '温湿度感应器' || this.selectedDeviceType === '空气质量检测设备' || this.selectedDeviceType === '漏水传感器') {
         return true
       } else {
         return false
@@ -424,19 +363,27 @@ export default {
     }
   },
   created() {
-    // this.crud.data = [
-    //   { id: 'DF333EF5B14634550D6898' },
-    //   { id: 'AEBC0ABC616E66544B82AC' },
-    //   { id: '9027E25364729064673FCC' }
-    // ]
+    crudDevice.getDeviceType().then((data) => {
+      this.deviceTypeOptions.splice(0, 0, ...data)
+    })
   },
   methods: {
     // [CRUD.HOOK.afterSubmit]() {
     //   this.needRefreshTree = true
     // },
-    // [CRUD.HOOK.afterDelete]() {
-    //   this.needRefreshTree = true
-    // },
+    // 设备是密集架或回转柜时，需要先处理 联动操作，回调操作 数据是null的情况
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      // if (form.deviceTypeId.name === '密集架' || form.deviceTypeId.name === '回转柜') {
+      if (form.isLinkage === null) {
+        form.isLinkage = { stateType: 1, lend: false, borrow: false, inBound: false, outBound: false }
+      }
+      if (form.isCallback === null) {
+        form.isCallback = { stateType: 2, lend: false, borrow: false, inBound: false, outBound: false }
+      }
+      // }
+      form.supplier = form.supplierId.id
+      this.selectedDeviceType = form.deviceTypeId.name
+    },
     [CRUD.HOOK.beforeSubmit]() {
       this.crud.form.storeroomId = this.storeroomId
       this.crud.form.supplierId = this.supplierOptions.find(item => item.id === this.crud.form.supplier)
@@ -518,9 +465,9 @@ export default {
 <style rel="stylesheet/scss" lang="scss" scoped>
 .archives-handler-btn {
   .el-button {
-    padding: 0 13px 0 3px;
+    padding: 0 13px 0 13px;
     ::v-deep span {
-      margin-left: 5px;
+      margin-left: 10px;
     }
     &.binding-mac-btn {
       border-color: #fd8042;
@@ -543,7 +490,7 @@ export default {
     // }
   }
   .iconfont {
-    line-height: 30px;
+    line-height: 28px;
   }
   margin-left: auto;
 }

From 59a3f6c2bcc7a39b8d95a5db357ae9643619fc26 Mon Sep 17 00:00:00 2001
From: z_yu <1534695664@qq.com>
Date: Tue, 19 Jul 2022 16:13:22 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BB=A5=E5=8F=8Abug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/storeManage/deviceManage/module/bindParams.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/storeManage/deviceManage/module/bindParams.vue b/src/views/storeManage/deviceManage/module/bindParams.vue
index d5060df..ad91a52 100644
--- a/src/views/storeManage/deviceManage/module/bindParams.vue
+++ b/src/views/storeManage/deviceManage/module/bindParams.vue
@@ -85,6 +85,7 @@ export default {
     },
     handleClose() {
       this.resetForm()
+      this.$refs.form.clearValidate()
     },
     resetForm() {
       this.form.paramId = ''

From f09d060f1f5d13760a395a44691f8ca7d22fc69d Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Tue, 19 Jul 2022 16:56:00 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E5=8F=B3=E4=B8=8A=E8=A7=92=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/pop-message.png        | Bin 0 -> 1121 bytes
 src/assets/styles/yxk-admin.scss         |  81 ++++++++++++++++++++++-
 src/layout/components/Navbar.vue         |  76 ++++++++++++++++-----
 src/views/system/messageCenter/index.vue |  25 +++++++
 4 files changed, 165 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/images/pop-message.png
 create mode 100644 src/views/system/messageCenter/index.vue

diff --git a/src/assets/images/pop-message.png b/src/assets/images/pop-message.png
new file mode 100644
index 0000000000000000000000000000000000000000..48afdecfc692cbe2ba71dbdac4778ce78eafe574
GIT binary patch
literal 1121
zcmV-n1fKheP)<h;3K|Lk000e1NJLTq003D4000yS1^@s6=FO2E00004b3#c}2nYxW
zd<bNS000CSNkl<ZSVz^DJ7^R^9EWFi_a5<r=0ySuK@yAzLDGnYcAlL!QBqh)6hwqz
z6igQ+79!e20$NERmRi`T0a3e<LR&3V5PU$85OW&h-Q{lA|6^u%_U<HLZZCUF_GYqs
zyF2&IH@}&cq6xQj_HJ+f<&`hZ(sbD@4dr%DSv_Y5=Q2ILX9}x7-h5wpn-%Y;*5dvf
zng(*__?@Bly@Su39j&`P*A>F^M5(a;bM4!Q)4BPpuj355DIj-^Je*FqcaKRa9M3Ha
zh74G-^-{Qn+{*0oqt6$?bT|>eE!L3JM{o7D_Ych5$(8}PydebaUKt>JY%&s-mL;TZ
zgVp&@zrKDvmS4CLyR42a<j&#Q$<(fnNg$c>Hj2V66#;MwEUp3BvH^5L2urNzSC_|g
z&&MCc$>-QX&K$nk)7szn!cMmw^ok6Z0GBqP1e0}KsJtMPEk{_6BczjnGAYW1{QUCL
zyHjFu`cE8S#|m=WiTmeLyE<nqOSZboUMevr5O63iIFqI1xImLFfJ|i~C0y5CD&|&(
zf4`bo+-}hEfIKwS*45wp*hy!y2r_Ihnv9SkDljg*@We+ZON6XV2FL_DDLgw-Di_vg
zR-cYt1JD@a+p@_$qfa7!INzQ={SOa@J^TX`7_Jm30uUhVF2Zy<8W^sQ2|SO0%Y2<$
zTtHU9A3|o(1Q?CR=zzLkVkgjdV25i2bq+62ct~)KxB9v#yGQ0ChHS`VLdMkr0!Cm8
zo)20Br<g$K%HlG@1<2SzdLvkspb@AB%u#~5O@P(+Ye9}mbJ=n7Ui6Ryjd|$>qUaY2
zf~;*Om}s>!+lR{$K~X`=HyjmsA6UYXhzc^6I02H`STa}(N<n~4$apOnO+!MP8`8OM
z%;nDP?dT!vz|gQ2BnXYbW(84bt0_VZxby<T=7-XixTxVzD-DhVwib5;taF>Kr%vHn
zQze5@)(vfNBbhmJy>XCr++iFWMtXv6=8RSon~oCyIKO~+WH8=9MW=^G0whbBNmesd
zVdF8jmu*M5SZBbT$<gGn*;g`sXre)o^~8s8h%&#lskb+_8jopXgNf0Hi{Igk3^u{!
zRRx=1GF*a+_CjZ{$totGlOmYwLgPUuhb}h`vVODzMFj^e8;VslSi{uj8gTiV@Ww)_
z;g2YlslKfU)sF@MPJA`o`mQ9ZTL;f_1}`-hvQH@(@&uSbVo?zZp$^fVqWZ??!<7(h
z1->$SgNQKThGL@@rmY>5_JIoxgsdJ_@x)Nh((lo+pwhuVrbf2G$L}+3vkzNW)TE|j
zA(X=*iK8=GTKms85OSpvCiI{gK_mp{H<K+4Tg8V7oLx8GGopi99cTMSw-NF`pc|>M
n8QfX}xf*x?eQN{%|E~TEI1NpM4A^5i00000NkvXXu0mjf9I5@V

literal 0
HcmV?d00001

diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index 988df85..39e6147 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -1001,9 +1001,10 @@ input[type='number'] {
   margin-bottom: -15px;
 }
 
-.el-select-dropdown{
+.el-select-dropdown,
+.el-dropdown-menu{
   box-shadow: rgb(51 156 255) 0px 0px 10px 1px inset;
-  background: rgb(2, 37, 95);
+  background: #02255F;
   border: none;
 }
 .el-select-dropdown__item{
@@ -1034,6 +1035,20 @@ input[type='number'] {
   content: '';
   border: none;
 }
+.el-dropdown-menu .el-dropdown-menu__item{
+  color: #fff;
+}
+.el-dropdown-menu .el-dropdown-menu__item:hover{
+  background-color: #13439E;
+  color: #fff;
+}
+.el-dropdown-menu__item--divided{
+  border-top-color: #13439E;
+  margin-top: 0 !important;
+}
+.el-dropdown-menu .el-dropdown-menu__item--divided:before{
+  background-color: transparent !important;
+}
 
 //vue-treeselect
 .vue-treeselect__multi-value-item{
@@ -1049,3 +1064,65 @@ input[type='number'] {
 .vue-treeselect__value-remove > svg{
   color: #fff;
 }
+
+// 消息中心 pop
+.message-icon{
+  position: relative;
+  .icon-xiaoxi{
+    font-size: 26px;
+    color: #339CFF;
+  }
+  .message-num{
+    position: absolute;
+    top: 0;
+    right: -8px;
+    display: block;
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 50%;
+    background-color: #F91832;
+    color: #fff;
+  }
+}
+.el-dropdown-menu--small .el-dropdown-menu__item.message-list-item{
+  padding: 0;
+}
+.message-list-item a{
+  display: flex; 
+  justify-content: space-between; 
+  padding: 0 20px; 
+  height: 40px; 
+  font-size: 14px; 
+  border-bottom: 1px solid #113D72;
+  p, span, i{
+    line-height: 40px; 
+  }
+  p{
+    width: 230px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+  span{
+    display: block;
+  }
+  i.el-icon-arrow-right:before{
+    font-size: 16px;
+    color: #339CFF;
+  }
+}
+.message-dropdown.el-popper[x-placement^=bottom]{
+  .popper__arrow{
+    width: 89px;
+    height: 20px;
+    top: -8px;
+    background:  url('~@/assets/images/pop-message.png') no-repeat !important;
+    border: none;
+    transform: rotate(0);
+  }
+}
\ No newline at end of file
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 1549064..e1c30d9 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -21,6 +21,33 @@
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
       </template> -->
+      <!-- <div class="message-center">
+        <span class="iconfont icon-xiaoxi" />
+      </div> -->
+
+      <!-- 消息中心 -->
+      <el-dropdown class="message-center right-menu-item hover-effect" trigger="click">
+        <div class="message-icon">
+          <span class="iconfont icon-xiaoxi" />
+          <i class="message-num">6</i>
+        </div>
+        <el-dropdown-menu slot="dropdown" class="message-dropdown" style="width: 420px;">
+          <div style="display: flex; justify-content: flex-end; padding: 0 20px; height: 40px; line-height: 40px; color: #339CFF; font-size: 14px; border-bottom: 1px solid #339CFF;">
+            <span style="cursor: pointer;">全部标记为已读</span>
+            <!-- 消息中心router -->
+            <router-link to="/system/messageCenter" style="color:#fff; margin-left: 10px;">去查看</router-link>
+          </div>
+          <div style="max-height: 450px; overflow: hidden; overflow-y: scroll;">
+            <el-dropdown-item v-for="(item,index) in 12" :key="index" class="message-list-item">
+              <router-link to="/system/messageCenter">
+                <p>这是一条系统通知系统通知这是一条系统通知系统通知</p>
+                <span>2022-5-23 13:30</span>
+                <i class="el-icon-arrow-right" />
+              </router-link>
+            </el-dropdown-item>
+          </div>
+        </el-dropdown-menu>
+      </el-dropdown>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
@@ -40,7 +67,7 @@
               个人中心
             </el-dropdown-item>
           </router-link>
-          <span style="display:block;" @click="open">
+          <span style="display:block;" @click="logoutVisible=true">
             <el-dropdown-item divided>
               退出登录
             </el-dropdown-item>
@@ -48,6 +75,21 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+
+    <!-- 退出登录 -->
+    <el-dialog title="退出登录" :modal-append-to-body="false" :close-on-click-modal="false" :visible.sync="logoutVisible" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="dialog-delt">
+          <p><span>确定注销并退出系统吗？</span></p>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="logoutVisible = false">取消</el-button>
+          <el-button type="primary" @click="logout">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -76,7 +118,7 @@ export default {
     return {
       Avatar: Avatar,
       defaultImg: 'this.src="' + require('@/assets/images/avatar.png') + '"',
-      dialogVisible: false
+      logoutVisible: false
     }
   },
   computed: {
@@ -108,24 +150,26 @@ export default {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
-    open() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.logout()
-      })
-    },
+    // open() {
+    //   this.$confirm('确定注销并退出系统吗？', '提示', {
+    //     confirmButtonText: '确定',
+    //     cancelButtonText: '取消',
+    //     type: 'warning'
+    //   }).then(() => {
+    //     this.logout()
+    //   })
+    // },
     logout() {
       this.$store.dispatch('LogOut').then(() => {
         location.reload()
       })
+    },
+    handleClose(done) {
+      done()
     }
   }
 }
 </script>
-
 <style lang="scss" scoped>
 .navbar {
   display: flex;
@@ -158,6 +202,7 @@ export default {
 
   .right-menu {
     // height: 100%;
+    display: flex;
     padding-top: 25px;
     line-height: 50px;
 
@@ -182,10 +227,12 @@ export default {
         }
       }
     }
-
+    .message-center{
+      margin-right: 26px;
+      margin-top: 4px;
+    }
     .avatar-container {
       margin-right: 60px;
-
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;
@@ -199,7 +246,6 @@ export default {
           height: 40px;
           border-radius: 10px;
         }
-
         .el-icon-caret-bottom {
           cursor: pointer;
           position: absolute;
diff --git a/src/views/system/messageCenter/index.vue b/src/views/system/messageCenter/index.vue
new file mode 100644
index 0000000..983d4e8
--- /dev/null
+++ b/src/views/system/messageCenter/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    消息中心页面
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MessageCenter',
+  data() {
+    return {
+
+    }
+  },
+  created() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+</style>