消息页

src/components/dashboard/more/space/DataSituation.vue

@@ -150,7 +150,7 @@ export default {
 .dataSituation {
   display: inline-block;
   margin: 5px 10px;
-  width: 100%;
+  width: 80%;
   padding: 0 2%;
   //min-width: 70px;
   height: auto;
@@ -164,7 +164,7 @@ export default {
     color: #B2B2B2;
   }
   .dataSituation-canvas-border {
-    width: 75%;
+    width: 60%;
     margin: 5% auto;
     position: relative;
     .dataSituation-canvas {

src/components/home/HomeHeader.vue

@@ -18,13 +18,15 @@ export default {
   data() {
     return {
       logoPng,
-      hasMsg: false,
+      hasMsg: true,
     }
   },
   mounted() {
   },
   methods: {
-
+    toNotice() {
+      this.$router.push({path: '/notice'})
+    }
   },
 }
 </script>
@@ -61,8 +63,8 @@ export default {
       <a-icon type="mobile" class="icon" />
       <span v-show="isLogin">
         <a-icon type="question-circle" class="icon" />
-        <a-icon v-if="!hasMsg" type="bell" class="icon" />
-        <a-badge v-if="hasMsg" dot :offset="[-15, 15]">
+        <a-icon v-if="!hasMsg" type="bell" class="icon" @click="toNotice" />
+        <a-badge v-if="hasMsg" dot :offset="[-15, 15]" @click="toNotice">
           <a-icon type="bell" class="icon" />
         </a-badge>
       </span>

src/components/notice/notice.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="ioc-notice">
+
+    <a-layout style="height: 100%">
+      <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
+        <div class="logo" />
+        <a-menu :default-selected-keys="['unReadNotice']" theme="dark" mode="inline" style="height: 100%" @click="handleClick">
+          <a-menu-item-group key="message">
+            <template slot="title">
+              <span style="color: #f0f2f5">通知</span>
+            </template>
+            <a-menu-item key="unReadNotice">
+              未读通知
+            </a-menu-item>
+            <a-menu-item key="readNotice">
+              已读通知
+            </a-menu-item>
+            <a-menu-item key="allNotice">
+              全部通知
+            </a-menu-item>
+          </a-menu-item-group>
+          <a-menu-item-group key="feedback">
+            <template slot="title">
+              <span style="color: #f0f2f5">用户反馈</span>
+            </template>
+            <a-menu-item key="unReadFeedback">
+              未读反馈
+            </a-menu-item>
+            <a-menu-item key="readFeedback">
+              已读反馈
+            </a-menu-item>
+            <a-menu-item key="allFeedback">
+              全部反馈
+            </a-menu-item>
+          </a-menu-item-group>
+
+        </a-menu>
+      </a-layout-sider>
+      <a-layout>
+        <a-layout-content
+            :style="{ margin: '12px', padding: '15px', background: '#fff', minHeight: '280px' }"
+        >
+          <NoticeList :type="type"></NoticeList>
+        </a-layout-content>
+      </a-layout>
+    </a-layout>
+
+  </div>
+</template>
+
+<script>
+import NoticeList from "@/components/notice/noticeList.vue";
+export default {
+  data() {
+    return {
+      collapsed: false,
+      type: 'unReadNotice'
+    }
+  },
+  components: {
+    NoticeList
+  },
+  mounted() {
+  },
+  methods: {
+    handleClick(e) {
+      this.type = e.key
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@menu-dark-bg: #266a99;
+@menu-dark-submenu-bg: #266a99;
+@menu-dark-color: #fff;
+@menu-dark-arrow-color: #fff;
+@menu-dark-highlight-color: #fff;
+.ioc-notice {
+  width: 100%;
+  height: 100%;
+  .ioc-notice-left {
+
+  }
+  .ioc-notice-right {
+
+  }
+}
+</style>

src/components/notice/noticeList.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="ioc-notice-list">
+    <div class="ioc-notice-list-header">
+      <span v-if="type==='unReadNotice'">未读通知</span>
+      <span v-else-if="type==='readNotice'">已读通知</span>
+      <span v-else-if="type==='allNotice'">全部通知</span>
+      <span v-else-if="type==='unReadFeedback'">未读反馈</span>
+      <span v-else-if="type==='readFeedback'">已读反馈</span>
+      <span v-else-if="type==='allFeedback'">全部反馈</span>
+      <span v-else></span>
+    </div>
+    <div class="ioc-notice-list-query">
+      <div style="display: inline-block;vertical-align: middle">
+        <a-button >设为已读</a-button>
+        <a-button >删除</a-button>
+      </div>
+
+      <div style="display: inline-block;vertical-align: middle;float: right;">
+        <a-form layout="inline" :form="formData">
+          <a-form-item>
+            <a-select style="width: 120px" placeholder="告警类别">
+              <a-select-option value="system">系统通知</a-select-option>
+              <a-select-option value="device">设备通知</a-select-option>
+              <a-select-option value="alarm">设备告警</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item>
+            <TimeRange></TimeRange>
+          </a-form-item>
+          <a-form-item>
+            <a-button size="small">重置</a-button>
+            <a-button size="small">查询</a-button>
+          </a-form-item>
+        </a-form>
+      </div>
+    </div>
+    <div class="ioc-notice-list-content">
+      <a-table :rowKey="(record, index) => index"
+               style="height: 100%"
+               :columns="columns"
+               :data-source="tableData"
+               :pagination="false"
+               :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+      >
+        <template #operation="text">
+          <a-button type="link">删除</a-button>
+          <a-button type="link" >查看</a-button>
+        </template>
+      </a-table>
+      <a-pagination
+          show-size-changer
+          :default-current="3"
+          :total="500"
+          style="float: right"
+      />
+      <br />
+    </div>
+  </div>
+</template>
+
+<script>
+import TimeRange from "@/components/common/timeRange.vue";
+
+export default {
+  components: {TimeRange},
+  watch: {
+    type: function (val) {
+      this.refresh();
+    }
+  },
+  data() {
+    return {
+      formData: {},
+      selectedRowKeys: [],
+      columns: [
+        {
+          title: '告警类别',
+          dataIndex: 'type',
+          align: 'center',
+          width: 150,
+          key: 'type'
+        },
+        {
+          title: '事件内容',
+          dataIndex: 'content',
+          align: 'center',
+          key: 'content'
+        },
+        {
+          title: '告警地点',
+          dataIndex: 'area',
+          align: 'center',
+          minWidth: 240,
+          key: 'area'
+        },
+        {
+          title: '告警时间',
+          dataIndex: 'time',
+          align: 'center',
+          width: 240,
+          key: 'time'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          key: 'operation',
+          width: 200,
+          align: 'center',
+          scopedSlots: { customRender: 'operation' },
+        }
+      ],
+      tableData: [
+        {
+          type: '设备告警',
+          content: '位于1层301的水浸设备出现告警，请尽快派人处理',
+          area: '1层301',
+          time: '2022年7月11日 12:01:00',
+        }
+      ],
+    }
+  },
+  props: {
+    type: String,
+  },
+  mounted() {
+  },
+  methods: {
+    refresh() {
+      this.formData = {};
+      this.selectedRowKeys = [];
+    },
+    onSelectChange(selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys;
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ioc-notice-list {
+  width: 100%;
+  height: 100%;
+
+  .ioc-notice-list-header {
+    font-size: 16px;
+  }
+
+  .ioc-notice-list-query {
+    margin: 12px 0;
+  }
+  .ioc-notice-list-content {
+    height: 600px;
+  }
+}
+</style>

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import LoginView from '@/views/LoginView.vue'
-import NavigationPage from '@/components/home/NavigationPage.vue'
+import Notice from '@/components/notice/notice.vue'
 import Empty from '@/components/Empty.vue'
 import Dashboard from "@/components/dashboard/Dashboard.vue";
 
@@ -25,10 +25,10 @@ const router = new VueRouter({
           component: Empty,
         },
         {
-          path: '/nav',
-          name: 'nav',
-          meta: {breadcrumb: '导航页'},
-          component: NavigationPage,
+          path: '/notice',
+          name: 'notice',
+          meta: {breadcrumb: '消息通知'},
+          component: Notice,
         },
         {
           path: '/dashboard',

src/views/HomeView.vue

@@ -22,7 +22,7 @@
           :width="asideWidth"
           style="background: #fff"
           :collapsible="true"
-          :collapsed-width="60"
+          :collapsed-width="collapsedWidth"
         >
           <HomeAside :collapse.sync="collapse" />
         </a-layout-sider>
@@ -53,14 +53,18 @@ export default {
       collapse: true, // 侧边栏是否收起
       leftVisible: false,
       asideWidth: 160,
+      collapsedWidth: 60,
       contentWidth: "84%",
       contentHeight: 450,
     };
   },
   watch: {
+    $route() {
+      this.judgeHideAside();
+    }
   },
   mounted() {
-    //this.judgeHideAside();
+    this.judgeHideAside();
     if (this.$route.matched.length===1) {
       this.$router.push({path: '/dashboard'})
     }
@@ -71,8 +75,10 @@ export default {
     },
     judgeHideAside() {
       let name = this.$route.name
-      if (['dashboard'].indexOf(name)>-1) {
+      //if (['dashboard','notice'].indexOf(name)>-1) {
+      if (['notice'].indexOf(name)>-1) {
         this.asideWidth = 0;
+        this.collapsedWidth=0;
       }
     },
   },