通知栏弹窗，表格样式修改

src/assets/scss/smp.scss

@@ -280,7 +280,7 @@ ul,li{
       position:relative;
       .cell{
         border-right:1px solid $smp--color-gray_dd;
-        
+        font-weight:normal;
       }
       &:last-child .cell{
         border-right:none;
@@ -288,6 +288,9 @@ ul,li{
     }
     .el-table__body td{
       border-right:none;
+      .cell{
+        color:#777;
+      }
     }
   }
   .smp-tabs{
@@ -301,6 +304,7 @@ ul,li{
       // border-bottom: 1px solid $smp--color-white;
       height:auto;
       border-bottom:none;
+      line-height:32px;
       &.is-active{
         background-color: $smp--color-gray_ef;
         // border-bottom: 1px solid $smp--color-gray_ef;
@@ -458,7 +462,9 @@ ul,li{
     font-size:normal;
   }
 }
-
+.smpt-btn{
+  padding:0;
+}
 
 /* smp icon 32
 ------------------------------ */
@@ -797,14 +803,20 @@ html,body{
   width:80px;
   flex-shrink: 0;
   display: flex;
+  align-items: center;
   .nn-item{
     display: flex;
     align-items: center;
     justify-content: center;
-    width:40px;
+    width:24px;
+    height:24px;
+    margin:0 8px;
+    position:relative;
     i{
-      position:relative;
       cursor: pointer;
+      &.shansuo{
+        animation: twinkling 0.6s infinite ease-in-out;
+      }
     }
     span{
       position:absolute;
@@ -951,10 +963,26 @@ html,body{
       align-items: center;
       justify-content: center;
       transition: $--all-transition;
+      cursor: pointer;
       &.on{
         transform:rotate(90deg);
       }
     }
+    .smpsh-change{
+      height:20px;
+      width:20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: $--all-transition;
+      font-size:16px;
+      color:$smp--color-blue;
+      font-weight: bold;
+      cursor: pointer;
+      &.on{
+        display: none;
+      }
+    }
     
   }
   .smps-bd{
@@ -1693,21 +1721,36 @@ html,body{
   display: flex;
   flex-direction: column;
   .bc-top-search{
-    width:743px;
-    margin:0 auto;
-    @include normal-shadow-1();
+    position:relative;
     flex-shrink: 0;
+    .bc-top-change{
+      position:absolute;
+      top:0;
+      left:0;
+      width:36px;
+      height:36px;
+      font-size:20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color:$smp--color-blue;
+      font-weight:bold;
+      cursor:pointer;
+    }
     .smp-normal-input{
-      width:100%;
+      width:743px;
+      margin:0 auto;
+      @include normal-shadow-1();
+      display: block;
     }
   }
   .bc-bd{
-    padding:20px 0;
+    padding:15px 0 20px;
     flex:1;
     height:0;
   }
   .bc-wraper{
-    padding:0 47px;
+    padding:5px 47px 0;
     height:100%;
   }
   // .bc-wraper{
@@ -1730,6 +1773,7 @@ html,body{
 .water-fall{
   position: relative;
   width:100%;
+  padding:0;
   .wf-item{
     position:absolute;
     top:0;
@@ -1769,7 +1813,7 @@ html,body{
     }
   }
   .co-bd{
-    min-height:295px;
+    min-height:95px;
   }
   
 }
@@ -1832,4 +1876,37 @@ html,body{
     font-size:30px;
     padding:0 5px 0 8px;
   }
+}
+
+// 通知列表
+.notice-pop{
+  .el-dialog__body{
+    padding:10px 20px 20px;
+  }
+  .notice-pop-list{
+    
+  }
+  .npl-box{
+    margin:0 0 20px;
+    li{
+      display: flex;
+      height:36px;
+      align-items: center;
+    }
+    .nplb-l{
+      flex:1;
+      padding:0 20px 0 0;
+    }
+    .nplb-r{
+      width:130px;
+    }
+  }
+}
+@-webkit-keyframes twinkling{
+  0%{
+    opacity:1;
+  }
+  100%{
+    opacity:0.5;
+  }
 }

src/views/main/main-navbar-news.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="navbar-news">
     <!-- 权限写法 -->
-    <div class="nn-item" v-if="$hasPermission2('sys_test_add')" >
-    <!-- <div class="nn-item"> -->
-      <i class="smp-nav-icon smp-ni-news">
-        <span>5</span>
+    <!-- <div class="nn-item" v-if="$hasPermission2('sys_test_add')" > -->
+    <div class="nn-item" @click="showTask">
+      <i class="smp-nav-icon smp-ni-news shansuo">
       </i>
+      <span>5</span>
     </div>
-    <div class="nn-item">
+    <div class="nn-item" @click="showNotice">
       <i class="smp-nav-icon smp-ni-notice">
-        <span>7</span>
       </i>
+      <span>7</span>
     </div>
   </div>
 </template>
@@ -29,7 +29,13 @@ export default {
   //   }
   // },
   methods: {
-
+    showNews () {},
+    showNotice () {
+      this.$parent.$parent.showNotice()
+    },
+    showTask () {
+      this.$parent.$parent.showTask()
+    }
   }
 }
 </script>

src/views/main/main-sidebar.vue

@@ -2,6 +2,9 @@
   <aside class="smp-sidebar" :class="{'smps-close':menuClose}">
     <div class="smps-hd" :class="{'smps-hdclose':menuClose}">
       <div class="smpsh-title">{{currentMenuName}}</div>
+      <div class="smpsh-change" :class="{'on':menuClose}" @click="changeMenuType">
+        <i class="el-icon-refresh"></i>
+      </div>
       <div class="smpsh-switch" :class="{'on':menuClose}" @click="switchMenu">
         <i class="smp-nav-icon-16 smp-ni16-slidebar-switch"></i>
       </div>
@@ -190,6 +193,17 @@ export default {
     // this.$store.state.sidebarMenuList = window.SITE_CONFIG['currentMenuItem'].children
   },
   methods: {
+    remedyMenuNoChange () {
+      console.log('remedyMenuNoChange')
+      // this.currentMenuItem = this.$store.state.sidebarMenuItem
+      let currentMenuItem = this.$store.state.sidebarMenuItem
+      this.currentMenuList = currentMenuItem.children || []
+      this.currentMenuName = currentMenuItem.name
+      this.initMenu()
+    },
+    changeMenuType () {
+      this.$parent.gotoWaterfallSidebar()
+    },
     initMenu () {
       this.menuDataAll = window.SITE_CONFIG['menuList']
       this.initSliderMenu()
@@ -201,6 +215,7 @@ export default {
       if (currentMenuList) {
         this.slideMenu = this.addMenu(currentMenuList, lv)
       }
+      console.log(this.slideMenu)
     },
     setActiveOne () {
       this.activeIndex = this.$route.meta.UUID

src/views/main/main.vue

@@ -4,16 +4,23 @@
       <div class="smp_main-t">
         <main-navbar ref="mainNavbar" v-if="navbarFlag"/>
       </div>
-      <div class="smp_main-b">
+      <div class="smp_main-b" v-if="isNormalSidebar">
         <div class="smp_main-l" v-show="isMainMenuHaveChild">
-          <main-sidebar v-if="sidebarFlag"/>
+          <main-sidebar v-if="sidebarFlag" ref="sidebar"/>
         </div>
         <div class="smp_main-r" :class="{'onClose':$store.state.sidebarFold,'main-no-left':!isMainMenuHaveChild}">
           <content-crumb v-if="isMainMenuHaveChild"></content-crumb>
           <main-content />
         </div>
       </div>
+      <div class="smp_main-b" v-else>
+        <div class="smp_main-r" :class="{'onClose':$store.state.sidebarFold,'main-no-left':true}">
+          <basicCom :isSidebar="true"></basicCom>
+        </div>
+      </div>
     </template>
+    <noticePop ref="noticePop"></noticePop>
+    <taskPop ref="taskPop"></taskPop>
   </div>
 </template>
 
@@ -23,6 +30,9 @@ import MainSidebar from './main-sidebar'
 import MainContent from './main-content'
 import debounce from 'lodash/debounce'
 import ContentCrumb from './main-content-crumb'
+import noticePop from './notice-pop'
+import taskPop from './task-pop'
+import basicCom from '@/views/modules/demo/basicComponent/basic-com'
 export default {
   provide () {
     return {
@@ -38,6 +48,7 @@ export default {
   data () {
     return {
       loading: true,
+      isNormalSidebar: true,
       navbarFlag: false,
       sidebarFlag: false,
       mainContent: 'aui-content__wrapper',
@@ -49,7 +60,10 @@ export default {
     MainNavbar,
     MainSidebar,
     MainContent,
-    ContentCrumb
+    ContentCrumb,
+    basicCom,
+    noticePop,
+    taskPop
   },
   watch: {
     $route: 'routeHandle'
@@ -81,8 +95,27 @@ export default {
     //     this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
     //   }, 150))
     // },
+    // 显示通知弹窗
+    showNotice () {
+      this.$refs.noticePop.showPop()
+    },
+    // 显示通知弹窗
+    showTask () {
+      this.$refs.taskPop.showPop()
+    },
+    // 切换导航
+    gotoNormalSidebar () {
+      this.isNormalSidebar = true
+      this.$nextTick(() => {
+        this.$refs.sidebar.remedyMenuNoChange()
+      })
+    },
+    gotoWaterfallSidebar () {
+      this.isNormalSidebar = false
+    },
     // 路由, 监听
     routeHandle (route) {
+      !this.isNormalSidebar && this.gotoNormalSidebar()
       if (!route.meta.isTab) {
         return false
       }

src/views/main/notice-pop-list.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="notice-pop-list">
+    <ul class="npl-box">
+      <li v-for="(item, index) in listData" :key="index">
+        <div class="nplb-l">
+          {{ item.title }}
+        </div>
+        <div class="nplb-r">
+          {{ item.time }}
+        </div>
+      </li>
+    </ul>
+    <el-pagination
+      background
+      class="smp-pagination"
+      layout="prev, pager, next"
+      :pager-count="5"
+      :page-size="pagingConfig.perPageNum"
+      :total="pagingConfig.totalNum"
+      @current-change="pagingChange"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    getList: ''
+  },
+  data () {
+    return {
+      listData: [],
+      pagingConfig: {
+        perPageNum: 5,
+        totalNum: 1,
+        currentPage: 1
+      }
+    }
+  },
+  mounted () {
+    // this.getData()
+  },
+  methods: {
+    getData () {
+      this.getList(this.pagingConfig, this.setData.bind(this))
+    },
+    pagingChange (num) {
+      this.pagingConfig.currentPage += 1
+      this.getData()
+    },
+    setData (d) {
+      this.listData = d
+      // this.listData
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.smp-list-time {
+  // padding: 0!important;
+}
+</style>

src/views/main/notice-pop.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-dialog
+    :title="'通知列表'"
+    :visible.sync="dialogVisible"
+    class="notice-pop"
+    @opened="popOpen"
+    width="50%">
+    <div class="np-bd">
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane label="已查阅" name="0">
+          <noticePoplist ref="noticeDid" :getList="getListDid"></noticePoplist>
+        </el-tab-pane>
+        <el-tab-pane label="未查阅" name="1">
+          <noticePoplist ref="noticeUndid" :getList="getListDid"></noticePoplist>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import noticePoplist from './notice-pop-list'
+export default {
+  components: {
+    noticePoplist
+  },
+  props: {
+
+  },
+  watch: {
+
+  },
+  data () {
+    return {
+      firstPop: true,
+      dialogVisible: false,
+      activeName: '',
+      tabsFirst: [false, false]
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    getListData () {
+      let noGet = this.tabsFirst[this.activeName]
+      if (!noGet) {
+        this.tabsFirst[this.activeName] = true
+        if (this.activeName === '0') {
+          this.$refs.noticeDid.getData()
+        } else {
+          this.$refs.noticeUndid.getData()
+        }
+      }
+    },
+    handleClick () {
+      this.getListData()
+    },
+    popOpen () {
+      if (this.firstPop) {
+        this.firstPop = false
+        this.activeName = '0'
+        this.getListData()
+      }
+    },
+    showPop () {
+      this.dialogVisible = true
+    },
+    closePop () {
+      this.dialogVisible = false
+    },
+    getListDid (pageConfig, cb) {
+      let config = {
+        isDid: true
+      }
+      this.getList(config, pageConfig, cb)
+    },
+    ceshi (pageConfig, cb) {
+      pageConfig.totalNum = 14
+      let d = [{
+        title: '常常的标题补平常',
+        time: '2020-09-09 08:09:09'
+      }]
+      d = d.concat(d)
+      d = d.concat(d)
+      d = d.concat(d)
+      cb(d)
+    },
+    getList (config, pageConfig, cb) {
+      this.ceshi(pageConfig, cb)
+      return
+      this.$http.get('/monitor/selectBkSearchInfo', { params: { queryParam: config } }).then(({ data: res }) => {
+        if (res.code !== '0') {
+          return this.$message.error(res.msg)
+        }
+        let data = res.list
+        pageConfig.totalNum = res.total
+        cb(data)
+      }).catch(() => {
+
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/views/main/task-pop.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-dialog
+    :title="'任务列表'"
+    :visible.sync="dialogVisible"
+    class="notice-pop"
+    @opened="popOpen"
+    width="50%">
+    <div class="np-bd">
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane label="已处理" name="0">
+          <noticePoplist ref="noticeDid" :getList="getListDid"></noticePoplist>
+        </el-tab-pane>
+        <el-tab-pane label="未处理" name="1">
+          <noticePoplist ref="noticeUndid" :getList="getListDid"></noticePoplist>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import noticePoplist from './notice-pop-list'
+export default {
+  components: {
+    noticePoplist
+  },
+  props: {
+
+  },
+  watch: {
+
+  },
+  data () {
+    return {
+      firstPop: true,
+      dialogVisible: false,
+      activeName: '',
+      tabsFirst: [false, false]
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    getListData () {
+      let noGet = this.tabsFirst[this.activeName]
+      if (!noGet) {
+        this.tabsFirst[this.activeName] = true
+        if (this.activeName === '0') {
+          this.$refs.noticeDid.getData()
+        } else {
+          this.$refs.noticeUndid.getData()
+        }
+      }
+    },
+    handleClick () {
+      this.getListData()
+    },
+    popOpen () {
+      if (this.firstPop) {
+        this.firstPop = false
+        this.activeName = '0'
+        this.getListData()
+      }
+    },
+    showPop () {
+      this.dialogVisible = true
+    },
+    closePop () {
+      this.dialogVisible = false
+    },
+    getListDid (pageConfig, cb) {
+      let config = {
+        isDid: true
+      }
+      this.getList(config, pageConfig, cb)
+    },
+    ceshi (pageConfig, cb) {
+      pageConfig.totalNum = 14
+      let d = [{
+        title: '常常的标题补平常',
+        time: '2020-09-09 08:09:09'
+      }]
+      d = d.concat(d)
+      d = d.concat(d)
+      d = d.concat(d)
+      cb(d)
+    },
+    getList (config, pageConfig, cb) {
+      this.ceshi(pageConfig, cb)
+      return
+      this.$http.get('/monitor/selectBkSearchInfo', { params: { queryParam: config } }).then(({ data: res }) => {
+        if (res.code !== '0') {
+          return this.$message.error(res.msg)
+        }
+        let data = res.list
+        pageConfig.totalNum = res.total
+        cb(data)
+      }).catch(() => {
+
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/views/modules/demo/basicComponent/basic-com.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="basic-com">
     <div class="bc-top-search">
+      <div class="bc-top-change" v-if="isSidebar" title="切换正常导航" @click="changeSidebar">
+        <i class="el-icon-refresh"></i>
+      </div>
       <el-autocomplete value-key="name" :trigger-on-focus="false" placeholder="请输入关键字" @select="gotoMenuTop" :fetch-suggestions="FindMenu" v-model="keyValue" class="smp-normal-input">
         <el-button slot="append" icon="el-icon-search"></el-button>
       </el-autocomplete>
@@ -14,12 +17,16 @@
 </template>
 
 <script>
-import cloneDeep from 'lodash/cloneDeep'
+// import cloneDeep from 'lodash/cloneDeep'
 import pubuliu from './pubuliu'
 export default {
   components: {
     pubuliu
   },
+  props: {
+    menuData: '',
+    isSidebar: false
+  },
   data () {
     return {
       keyValue: '',
@@ -102,14 +109,25 @@ export default {
         }
       ],
       treeArr: [],
-      treeObj: {}
+      treeObj: {},
+      iconArr: {
+        leftbar_jcyj: 'smp-ni-leftbar_jcyj',
+        leftbar_xsgzdd: 'smp-ni-leftbar_xsgzdd',
+        leftbar_xshcl: 'smp-ni-leftbar_xshcl',
+        leftbar_xshj: 'smp-ni-leftbar_xshj',
+        leftbar_xskcgj: 'smp-ni-leftbar_xskcgj',
+        leftbar_xslb: 'smp-ni-leftbar_xslb',
+        leftbar_xsyp: 'smp-ni-leftbar_xsyp',
+        leftbar_zhtsfx: 'smp-ni-leftbar_zhtsfx'
+      }
     }
   },
   watch: {
 
   },
   mounted () {
-    this.ceshi()
+    console.log('basiccom')
+    this.chooseEnter()
     this.setTreeToArr()
   },
   methods: {
@@ -122,6 +140,64 @@ export default {
         })
       }
     },
+    changeSidebar () {
+      this.$parent.gotoNormalSidebar()
+    },
+    chooseEnter () {
+      if (this.isSidebar) {
+        this.sidebarMenuItem = this.$store.state.sidebarMenuItem
+        this.formatSidebarToList()
+        console.log(this.list)
+      } else {
+        this.getBasicComList()
+      }
+    },
+    getBasicComList () {},
+    formatSidebarToList () {
+      let currentMenuList = this.sidebarMenuItem.children
+      let lv = 0
+      if (currentMenuList) {
+        this.list = this.addMenu(currentMenuList, lv)
+      }
+    },
+    addMenu (arr, lv) {
+      // {
+      //     name: '二级导航名',
+      //     id: 1,
+      //     style: {},
+      //     children: [
+      //       {
+      //         name: '三级导航名2',
+      //         id: 2,
+      //         pid: 1,
+      //         lv: 1,
+      //         icon: 'iconName'
+      //       },
+      let list = []
+      let iconIndex = 0
+      let iconArr = Object.values(this.iconArr)
+      arr.forEach((e) => {
+        if (!e.noMenu) {
+          let obj = {
+            ...e,
+            lv: lv,
+            id: e.UUID,
+            pid: e.parentUUID,
+            url: e.path ? ('/' + e.path) : '',
+            style: {},
+            icon: iconArr[iconIndex++]
+          }
+          if (iconIndex === iconArr.length) {
+            iconIndex = 0
+          }
+          if (e.children && e.children.length) {
+            obj.children = this.addMenu(e.children, (lv + 1))
+          }
+          list.push(obj)
+        }
+      })
+      return list
+    },
     FindMenu (str, cb) {
       let itemArr = this.treeArr.filter((e) => {
         return e.name.indexOf(str) > -1

src/views/modules/demo/listDemo/list-demo-table.vue

@@ -9,14 +9,14 @@
       label="序号"
       width="50">
     </el-table-column>
-    <el-table-column prop="title" label="线索标题" header-align="center" align="center"></el-table-column>
-    <el-table-column prop="status" label="线索状态" header-align="center" align="center"></el-table-column>
-    <el-table-column prop="type" label="线索类型" header-align="center" align="center"></el-table-column>
-    <el-table-column prop="inTime" label="接入时间" header-align="center" align="center"></el-table-column>
-    <el-table-column prop="from" label="线索来源" header-align="center" align="center"></el-table-column>
-    <el-table-column prop="sValue" label="线索价值" header-align="center" align="center"></el-table-column>
-    <el-table-column prop="target" label="涉及对象" header-align="center" align="center"></el-table-column>
-    <el-table-column prop="tool" label="工具" header-align="center" align="center"></el-table-column>
+    <el-table-column prop="title" label="线索标题"></el-table-column>
+    <el-table-column prop="status" label="线索状态"></el-table-column>
+    <el-table-column prop="type" label="线索类型"></el-table-column>
+    <el-table-column prop="inTime" label="接入时间"></el-table-column>
+    <el-table-column prop="from" label="线索来源"></el-table-column>
+    <el-table-column prop="sValue" label="线索价值"></el-table-column>
+    <el-table-column prop="target" label="涉及对象"></el-table-column>
+    <el-table-column prop="tool" label="工具"></el-table-column>
     <el-table-column
       :label="$t('handle')"
       fixed="right"
@@ -28,6 +28,7 @@
         <el-button
           type="text"
           size="small"
+          class="smpt-btn"
         >上传</el-button>
       </template>
     </el-table-column>