通知公告完成

ebts-ui/src/api/system/notice.js

@@ -8,6 +8,35 @@ export function listNotice(query) {
     params: query
   })
 }
+// 查询公告列表
+export function getFiche() {
+  return request({
+    url: '/system/notice/fiche',
+    method: 'get',
+  })
+}
+// 查询公告列表
+export function getInform() {
+  return request({
+    url: '/system/notice/inform',
+    method: 'get',
+  })
+}
+
+// 查询公告列表
+export function read(noticeId) {
+  return request({
+    url: '/system/notice/read/'+noticeId,
+    method: 'post',
+  })
+}
+// 查询公告列表
+export function userDel(noticeId) {
+  return request({
+    url: '/system/notice/del/'+noticeId,
+    method: 'delete',
+  })
+}
 
 // 查询公告详细
 export function getNotice(noticeId) {

ebts-ui/src/layout/components/Navbar.vue

@@ -1,49 +1,80 @@
 <template>
-  <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
-<!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />-->
-    <div id="notice" style="position: absolute; top: 20px; left: 300px; width: 700px;">
-<!--      <span></span>-->
-      111122222222222222222222222222222222222222
+  <div>
+    <!--通告弹出框-->
+    <el-dialog :title="notice.noticeTitle" :visible.sync="open" width="780px" append-to-body>
+      <span v-html="notice.noticeContent"></span>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="danger" @click="userDelNotice(notice.noticeId,notice.noticeType)">删 除</el-button>
+      </div>
+    </el-dialog>
+    <div id="bell_block" @mouseleave="closeBellBlock">
+      <ul>
+        <li v-for="(item,index) in informList" :key="index">
+          <span @click="noticeClick(item.noticeId,item.noticeType)">{{item.noticeTitle}}
+            <i v-if="item.status == '1'" class="dots"></i>
+          </span>
+          <el-button @click="userDelNotice(notice.noticeId,notice.noticeType)" type="danger" size="mini" icon="el-icon-delete"  circle></el-button>
+        </li>
+      </ul>
     </div>
-    <breadcrumb
-      id="breadcrumb-container"
-      class="breadcrumb-container"
-      v-if="!topNav"
-    />
 
-<!--    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />-->
+    <div class="navbar">
 
-    <div class="right-menu">
-      <template v-if="device!=='mobile'">
-        <search id="header-search" class="right-menu-item" />
+      <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
+                 @toggleClick="toggleSideBar"
+      />
 
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+      <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />-->
+      <!--    position: absolute; top: 20px; left: 300px; width: 700px;-->
+      <div id="notice">
+        <span id="notice_text" @click="noticeClick(fiche.noticeId)">{{ fiche.noticeTitle }}</span>
+      </div>
+      <breadcrumb
+        id="breadcrumb-container"
+        class="breadcrumb-container"
+        v-if="!topNav"
+      />
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+      <!--    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />-->
 
-      </template>
 
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
-        <div class="avatar-wrapper">
-          <img :src="avatar" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
+      <div class="right-menu">
+
+        <div id="bell">
+          <div class="el-icon-bell bell" @mouseenter="handleClickBellBlock">
+            <i v-if="noticeState" class="dots"></i>
+          </div>
         </div>
-        <el-dropdown-menu slot="dropdown">
-          <router-link to="/user/profile">
-            <el-dropdown-item>个人中心</el-dropdown-item>
-          </router-link>
-          <el-dropdown-item @click.native="setting = true">
-            <span>布局设置</span>
-          </el-dropdown-item>
-          <el-dropdown-item divided @click.native="logout">
-            <span>退出登录</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
+
+        <template v-if="device!=='mobile'">
+          <search id="header-search" class="right-menu-item"/>
+
+          <screenfull id="screenfull" class="right-menu-item hover-effect"/>
+
+          <el-tooltip content="布局大小" effect="dark" placement="bottom">
+            <size-select id="size-select" class="right-menu-item hover-effect"/>
+          </el-tooltip>
+
+        </template>
+
+        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+          <div class="avatar-wrapper">
+            <img :src="avatar" class="user-avatar">
+            <i class="el-icon-caret-bottom"/>
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <router-link to="/user/profile">
+              <el-dropdown-item>个人中心</el-dropdown-item>
+            </router-link>
+            <el-dropdown-item @click.native="setting = true">
+              <span>布局设置</span>
+            </el-dropdown-item>
+            <el-dropdown-item divided @click.native="logout">
+              <span>退出登录</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
     </div>
   </div>
 </template>
@@ -55,6 +86,7 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
+import { getFiche, getInform, getNotice, read, userDel } from '@/api/system/notice'
 
 export default {
   components: {
@@ -62,7 +94,7 @@ export default {
     Hamburger,
     Screenfull,
     SizeSelect,
-    Search,
+    Search
   },
   computed: {
     ...mapGetters([
@@ -83,11 +115,91 @@ export default {
     },
     topNav: {
       get() {
-        return this.$store.state.settings.topNav;
-      },
-    },
+        return this.$store.state.settings.topNav
+      }
+    }
+  },
+  data() {
+    return {
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      noticeState: false,
+      fiche: {},
+      notice: {},
+      informList: []
+    }
+  },
+  mounted() {
+
+    let notice_text = document.getElementById('notice_text')
+    notice_text.addEventListener('webkitAnimationEnd', function() {
+      this.style.marginLeft = 0
+    }, false)
+    this.initFiche()
+    this.initInform()
   },
   methods: {
+    userDelNotice(id,type) {
+      userDel(id)
+      setTimeout(()=>{
+        if (type != '1'){
+          this.initFiche()
+        }else {
+          this.initInform()
+        }
+      },300)
+      this.open = false
+    },
+    initInform(){
+      this.noticeState = false
+      this.informList = []
+      getInform().then(res=>{
+        let data = res.data
+        for (let datum of data) {
+         if (datum.status == "1"){
+           this.noticeState = true;
+         }
+        }
+        this.informList = data
+      })
+    },
+    initFiche() {
+      getFiche().then(res => {
+        let data = res.data
+        if (data){
+          this.fiche = data
+        }else {
+          this.fiche.noticeTitle = ""
+        }
+      })
+    },
+    noticeClick(noticeId,type) {
+      getNotice(noticeId).then(res => {
+        this.notice = res.data
+      })
+      this.open = true
+      read(noticeId)
+      setTimeout(()=>{
+        if (type != '1'){
+          this.initFiche()
+        }else {
+          this.initInform()
+        }
+      },300)
+    },
+    handleClickBellBlock() {
+      let bell_block = document.getElementById('bell_block')
+      bell_block.style.display = 'block'
+    },
+    closeBellBlock() {
+      let bell_block = document.getElementById('bell_block')
+      bell_block.style.display = 'none'
+      // bell_block.onblur = function(){
+      //   bell_block.style.display='none';
+      // }
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
@@ -100,41 +212,153 @@ export default {
         // this.$store.dispatch('LogOut').then(() => {
         //   location.href = '/index';
         // }
-        this.$store.dispatch("LogOut").then(() => {
+        this.$store.dispatch('LogOut').then(() => {
           if (!settings.casEnable) {
-            location.href = this.$router.options.base + "/index";
+            location.href = this.$router.options.base + '/index'
           }
-        });
+        })
       })
     }
   }
 }
 </script>
-
 <style lang="scss" scoped>
 @keyframes slidein {
-  from {
-    margin-left: 56%;
-    width: 300%;
+
+  0% {
+    margin-left: 100%;
+    width: 100%;
   }
 
-  to {
-    margin-left: 0%;
+  100% {
+    margin-left: 0;
     width: 100%;
   }
 }
-#notice{
-  //animation-duration: 3s;
-  //animation-name: slidein;
-  //animation-iteration-count: infinite;
-  animation: 3s linear 1s slidein;
+
+@media (max-width: 1660px) {
+  #notice {
+    width: 58% !important;
+  }
 }
+
+@media (max-width: 1500px) {
+  #notice {
+    width: 53% !important;
+  }
+}
+
+@media (max-width: 1350px) {
+  #notice {
+    width: 48% !important;
+  }
+}
+
+@media (max-width: 1100px) {
+  #notice {
+    width: 43% !important;
+  }
+}
+
+@media (max-width: 990px) {
+  #notice {
+    width: 38% !important;
+  }
+}
+
+/deep/ .el-dialog__body {
+  height: 600px !important;
+}
+
+/deep/ .el-dialog__header {
+  padding: 20px 30px 10px 20px;
+}
+
+/deep/ .el-dialog__headerbtn {
+  display: none;
+}
+
+/deep/ .el-button--mini.is-circle {
+  padding: 6px;
+}
+
+#bell_block::-webkit-scrollbar {
+  width: 6px;
+  background-color: #f8f8f8;
+}
+
+#bell_block::-webkit-scrollbar-thumb {
+  width: 6px;
+  background-color: #adacac;
+  border-radius: 4px;
+}
+
+#bell_block {
+  //display: inline-block;
+  width: 250px;
+  height: 400px;
+  position: absolute;
+  right: 80px;
+  top: 51px;
+  background-color: #FFFFFF;
+  box-shadow: 4px 4px 15px #d7d3d3;
+  word-wrap: break-word;
+  overflow: hidden;
+  padding: 0 10px 0 10px;
+  z-index: 99999;
+  display: none;
+  overflow-y: auto;
+
+  ul {
+    padding: 0 !important;
+
+    li {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 10px;
+
+      span {
+        list-style-type: none;
+        color: #000;
+        font-size: 16px;
+        letter-spacing: 0.2px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        line-height: 26px;
+        position: relative;
+        cursor: pointer;
+
+        .dots {
+          display: block;
+          background: #f00;
+          border-radius: 50%;
+          width: 0.3em;
+          height: 0.3em;
+          top: 3px;
+          right: 9px;
+          position: absolute;
+        }
+      }
+
+      button {
+        width: 26px;
+        height: 26px;
+        font-size: 12px;
+        margin-top: -3px;
+        //line-height: 26px;
+        //margin-left: 3px;
+      }
+    }
+  }
+}
+
 .navbar {
   height: 50px;
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 
   .hamburger-container {
     line-height: 46px;
@@ -142,14 +366,26 @@ export default {
     float: left;
     cursor: pointer;
     transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
       background: rgba(0, 0, 0, .025)
     }
   }
 
+  #notice {
+    position: absolute;
+    top: 20px;
+    left: 300px;
+    //width: 950px;
+    width: 63%;
+    overflow: hidden;
 
+    #notice_text {
+      margin-left: 100%;
+      animation: 3s linear 0.1s slidein;
+    }
+  }
 
   .breadcrumb-container {
     float: left;
@@ -160,11 +396,38 @@ export default {
     vertical-align: top;
   }
 
+
   .right-menu {
     float: right;
     height: 100%;
     line-height: 50px;
 
+    #bell {
+      position: absolute;
+      right: 192px;
+      padding-top: 3px;
+      //margin-top: 4px;
+      .bell {
+        padding: 3px 7px 0 7px;
+        display: inline-block;
+        font-size: 21px;
+        color: #000000;
+        font-weight: bold;
+        position: relative;
+      }
+
+      .dots {
+        display: block;
+        background: #f00;
+        border-radius: 50%;
+        width: 0.3em;
+        height: 0.3em;
+        top: 0;
+        right: 6px;
+        position: absolute;
+      }
+    }
+
     &:focus {
       outline: none;
     }

ebts-ui/src/views/system/notice/index.vue

@@ -341,3 +341,8 @@ export default {
   }
 };
 </script>
+<style scoped>
+/deep/.w-e-text{
+  min-height: 242px;
+}
+</style>