sync

src/views/home/index.vue

@@ -3,11 +3,11 @@
     <grid-layout
       :layout.sync="layout"
       :col-num="14"
-      :row-height="40"
+      :row-height="30"
       :is-draggable="true"
       :is-resizable="true"
       :is-mirrored="false"
-      :vertical-compact="false"
+      :vertical-compact="true"
       :margin="[10, 10]"
       :use-css-transforms="true"
     >
@@ -18,64 +18,90 @@
         </el-row>
       </grid-item>
       <grid-item :key="layout[1].i" :x="layout[1].x" :y="layout[1].y" :w="layout[1].w" :h="layout[1].h" :i="layout[1].i">
-        <el-card class="box-card">
+        <el-card class="card-box">
           <div slot="header" class="clearfix">
             <span>消息提醒</span>
-            <el-button style="float: right; padding: 3px 0" type="text">更多<i class="el-icon-arrow-right" /></el-button>
+            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
           </div>
-
-          <el-scrollbar style="height: 100%" :native="false">
-            <el-tabs class="card-tab-box" value="todo">
-              <el-tab-pane :label="'待办（'+ message.todo + '）'" name="todo">
-                <div class="filter-box">
-                  <span>筛选条件：</span>
-                  <el-radio-group v-model="message.filter" size="mini">
-                    <el-radio-button label="0">全部</el-radio-button>
-                    <el-radio-button label="1">任务类</el-radio-button>
-                    <el-radio-button label="2">通知类</el-radio-button>
-                    <el-radio-button label="3">超期提醒类</el-radio-button>
-                  </el-radio-group>
-                </div>
-                <el-table :data="message.todoData" :show-header="false" size="mini">
-                  <el-table-column width="40">
-                    <template>
-                      <el-avatar shape="square" size="small"><svg-icon icon-class="yujing" /></el-avatar>
-                    </template>
-                  </el-table-column>
-                  <el-table-column show-overflow-tooltip>
-                    <template slot-scope="scope">
-                      <div>{{ scope.row.title }} <span :class="'priority-box priority-level'+ scope.row.priority">{{ scope.row.priorityName }}</span> </div>
-                      <div>{{ scope.row.appName }}</div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="createDate" width="140" />
-                  <el-table-column prop="createUser" width="70" show-overflow-tooltip />
-                  <el-table-column width="80">
-                    <template>
-                      <el-button size="mini">不再提醒</el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane :label="'已办（'+ message.done + '）'" name="done">已办</el-tab-pane>
-            </el-tabs>
-          </el-scrollbar>
+          <el-tabs class="message-content" value="todo">
+            <el-tab-pane :label="'待办（'+ message.todo + '）'" name="todo">
+              <div class="message-filter_box">
+                <span>筛选条件：</span>
+                <el-radio-group v-model="message.filter" size="mini">
+                  <el-radio-button label="0">全部</el-radio-button>
+                  <el-radio-button label="1">任务类</el-radio-button>
+                  <el-radio-button label="2">通知类</el-radio-button>
+                  <el-radio-button label="3">超期提醒类</el-radio-button>
+                </el-radio-group>
+              </div>
+              <el-table :data="message.todoData" :show-header="false" size="mini" height="calc(100% - 30px)">
+                <el-table-column width="40">
+                  <template>
+                    <el-avatar shape="square" size="small"><svg-icon icon-class="yujing" /></el-avatar>
+                  </template>
+                </el-table-column>
+                <el-table-column show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <div>{{ scope.row.title }} <span :class="'priority-box priority-level'+ scope.row.priority">{{ scope.row.priorityName }}</span> </div>
+                    <div>{{ scope.row.appName }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="createDate" width="140" />
+                <el-table-column prop="createUser" width="70" show-overflow-tooltip />
+                <el-table-column width="105">
+                  <template>
+                    <el-button size="mini">Mark Read</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane :label="'已办（'+ message.done + '）'" name="done">
+              <div class="message-filter_box">
+                <span>筛选条件：</span>
+                <el-radio-group v-model="message.filter" size="mini">
+                  <el-radio-button label="0">全部</el-radio-button>
+                  <el-radio-button label="1">任务类</el-radio-button>
+                  <el-radio-button label="2">通知类</el-radio-button>
+                  <el-radio-button label="3">超期提醒类</el-radio-button>
+                </el-radio-group>
+              </div>
+              <el-table :data="message.doneData" :show-header="false" size="mini" height="calc(100% - 30px)">
+                <el-table-column width="40">
+                  <template>
+                    <el-avatar shape="square" size="small"><svg-icon icon-class="yujing" /></el-avatar>
+                  </template>
+                </el-table-column>
+                <el-table-column show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <div>{{ scope.row.title }} <span :class="'priority-box priority-level'+ scope.row.priority">{{ scope.row.priorityName }}</span> </div>
+                    <div>{{ scope.row.appName }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="createDate" width="140" />
+                <el-table-column prop="createUser" width="70" show-overflow-tooltip />
+                <el-table-column width="105">
+                  <template>
+                    <el-button size="mini">不再提醒</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
         </el-card>
-
       </grid-item>
       <grid-item :key="layout[2].i" :x="layout[2].x" :y="layout[2].y" :w="layout[2].w" :h="layout[2].h" :i="layout[2].i">
-        <el-card class="box-card">
+        <el-card class="card-box">
           <div slot="header" class="clearfix">
             <span>我的业务</span>
-            <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
+            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
           </div>
         </el-card>
       </grid-item>
       <grid-item :key="layout[3].i" :x="layout[3].x" :y="layout[3].y" :w="layout[3].w" :h="layout[3].h" :i="layout[3].i">
-        <el-card class="box-card">
+        <el-card class="card-box">
           <div slot="header" class="clearfix">
             <span>我的应用</span>
-            <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
+            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
           </div>
           <el-carousel height="150px">
             <el-carousel-item v-for="item in 4" :key="item">
@@ -85,10 +111,10 @@
         </el-card>
       </grid-item>
       <grid-item :key="layout[4].i" :x="layout[4].x" :y="layout[4].y" :w="layout[4].w" :h="layout[4].h" :i="layout[4].i">
-        <el-card class="box-card">
+        <el-card class="card-box">
           <div slot="header" class="clearfix">
             <span>专项工具</span>
-            <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
+            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
           </div>
           <div v-for="o in 4" :key="o" class="item">
             {{ '列表内容 ' + o }}
@@ -96,10 +122,10 @@
         </el-card>
       </grid-item>
       <grid-item :key="layout[5].i" :x="layout[5].x" :y="layout[5].y" :w="layout[5].w" :h="layout[5].h" :i="layout[5].i">
-        <el-card class="box-card">
+        <el-card class="card-box">
           <div slot="header" class="clearfix">
             <span>标准规范</span>
-            <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
+            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
           </div>
           <div v-for="o in 4" :key="o" class="item">
             {{ '列表内容 ' + o }}
@@ -107,10 +133,10 @@
         </el-card>
       </grid-item>
       <grid-item :key="layout[6].i" :x="layout[6].x" :y="layout[6].y" :w="layout[6].w" :h="layout[6].h" :i="layout[6].i">
-        <el-card class="box-card">
+        <el-card class="card-box">
           <div slot="header" class="clearfix">
             <span>外部应用导航</span>
-            <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
+            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
           </div>
           <div v-for="o in 4" :key="o" class="item">
             {{ '列表内容 ' + o }}
@@ -137,27 +163,29 @@ export default {
     return {
       layout: [
         { 'x': 0, 'y': 0, 'w': 14, 'h': 2, 'i': '0' },
-        { 'x': 0, 'y': 2, 'w': 6, 'h': 8, 'i': '1' },
-        { 'x': 0, 'y': 10, 'w': 6, 'h': 6, 'i': '2' },
-        { 'x': 6, 'y': 2, 'w': 8, 'h': 6, 'i': '3' },
-        { 'x': 6, 'y': 8, 'w': 8, 'h': 4, 'i': '4' },
-        { 'x': 6, 'y': 12, 'w': 8, 'h': 4, 'i': '5' },
-        { 'x': 0, 'y': 16, 'w': 14, 'h': 2, 'i': '6' }
+        { 'x': 0, 'y': 2, 'w': 6, 'h': 12, 'i': '1' },
+        { 'x': 0, 'y': 14, 'w': 6, 'h': 8, 'i': '2' },
+        { 'x': 6, 'y': 2, 'w': 8, 'h': 8, 'i': '3' },
+        { 'x': 6, 'y': 10, 'w': 8, 'h': 6, 'i': '4' },
+        { 'x': 6, 'y': 16, 'w': 8, 'h': 6, 'i': '5' },
+        { 'x': 0, 'y': 22, 'w': 14, 'h': 4, 'i': '6' }
       ],
       message: {
         todo: 10,
         done: 45,
         filter: '0',
         todoData: [
-          { 'id': 1, 'type': '1', 'app': 'zfbapt', 'appName': 'XXXX平台', 'priority': '1', 'priorityName': '紧急', 'title': '消息测试1', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
-          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX平台平台', 'priority': '2', 'priorityName': '一般', 'title': '消息测试2消息测试2', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
-          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX平台台', 'priority': '2', 'priorityName': '一般', 'title': '我是一条消息3', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
-          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX平台台', 'priority': '2', 'priorityName': '一般', 'title': '我是一条消息3', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
-          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX平台台', 'priority': '2', 'priorityName': '一般', 'title': '我是一条消息3', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
-          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX平台台', 'priority': '2', 'priorityName': '一般', 'title': '我是一条消息3', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
-          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX平台台', 'priority': '2', 'priorityName': '一般', 'title': '我是一条消息3', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
-          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXXXXXXXXXX平台', 'priority': '2', 'priorityName': '一般', 'title': '我也是一条消息4', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' }
-        ]
+          { 'id': 1, 'type': '1', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '1', 'priorityName': 'Emergency', 'title': 'message test 1', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System System', 'priority': '2', 'priorityName': 'Normal', 'title': 'message test 2message test 2', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXXXXXXXXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message too 4', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' }
+        ],
+        todoData2: [],
+        doneData: []
       }
 
     }
@@ -212,6 +240,7 @@ export default {
 
 <style lang="scss" scoped>
 $gridBgColor: #ffffff;
+$msgCardHeaderHeight: 43px;
 
 .searh-row {
   height: 100%;
@@ -219,37 +248,57 @@ $gridBgColor: #ffffff;
   background-color: $gridBgColor;
 }
 
-.box-card {
+.card-box {
   height: 100%;
 
-  ::v-deep .el-card__header{
-    padding: 10px 10px !important;
-    span{
-      font-weight: bold;
+  ::v-deep {
+    .el-card__header {
+      padding: 10px 10px !important;
+      height: $msgCardHeaderHeight;
+      span{
+        font-weight: bold;
+      }
     }
-  }
 
-  ::v-deep .el-card__body {
+    .el-card__body {
+      height: calc(100% - #{$msgCardHeaderHeight});
       padding: 0 10px 10px 10px;
+      &>* {
+        height: 100%;
+      }
+    }
   }
 }
 
-.card-tab-box  {
+.message-content  {
+  .message-filter_box {
+    height: 30px;
+    &>span {
+      display: inline-block;
+      font-size: 14px;
+    }
+  }
+
   ::v-deep {
+    .el-tabs__header {
+      height: 40px;
+    }
     .el-tabs__item {
       font-size: 18px !important;
     }
+    .el-tabs__content {
+      height: calc(100% - 55px);
+
+      .el-tab-pane{
+        height: 100%;
+      }
+    }
     .el-table .cell {
       padding-left: 0 !important;
     }
   }
 }
 
-.filter-box>span {
-  display: inline-block;
-  font-size: 14px;
-}
-
 .priority-box{
   display: inline-block;
   padding: 0 5px;

src/views/home/index2.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="home-container">
+    <grid-layout
+      :layout.sync="layout"
+      :col-num="14"
+      :row-height="30"
+      :is-draggable="true"
+      :is-resizable="true"
+      :is-mirrored="false"
+      :vertical-compact="true"
+      :margin="[10, 10]"
+      :use-css-transforms="true"
+    >
+      <grid-item :key="layout[0].i" :x="layout[0].x" :y="layout[0].y" :w="layout[0].w" :h="layout[0].h" :i="layout[0].i">
+        <el-row type="flex" justify="center" class="searh-row" />
+      </grid-item>
+      <grid-item :key="layout[1].i" :x="layout[1].x" :y="layout[1].y" :w="layout[1].w" :h="layout[1].h" :i="layout[1].i" />
+      <grid-item :key="layout[2].i" :x="layout[2].x" :y="layout[2].y" :w="layout[2].w" :h="layout[2].h" :i="layout[2].i" />
+      <grid-item :key="layout[3].i" :x="layout[3].x" :y="layout[3].y" :w="layout[3].w" :h="layout[3].h" :i="layout[3].i">
+        <el-card class="card-box">
+          <div slot="header" class="clearfix">
+            <span>Test</span>
+            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
+          </div>
+          <el-carousel class="system-content" :autoplay="false" arrow="never" trigger="clicl">
+            <el-carousel-item v-for="item in 4" :key="item">
+              <h3 class="small">{{ item }}</h3>
+            </el-carousel-item>
+          </el-carousel>
+        </el-card>
+      </grid-item>
+      <grid-item :key="layout[4].i" :x="layout[4].x" :y="layout[4].y" :w="layout[4].w" :h="layout[4].h" :i="layout[4].i" />
+      <grid-item :key="layout[5].i" :x="layout[5].x" :y="layout[5].y" :w="layout[5].w" :h="layout[5].h" :i="layout[5].i" />
+      <grid-item :key="layout[6].i" :x="layout[6].x" :y="layout[6].y" :w="layout[6].w" :h="layout[6].h" :i="layout[6].i" />
+    </grid-layout>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import VueGridLayout from 'vue-grid-layout'
+
+let sseClient
+
+export default {
+  name: 'Home',
+  components: {
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem
+  },
+  data() {
+    return {
+      layout: [
+        { 'x': 0, 'y': 0, 'w': 14, 'h': 2, 'i': '0' },
+        { 'x': 0, 'y': 2, 'w': 6, 'h': 12, 'i': '1' },
+        { 'x': 0, 'y': 14, 'w': 6, 'h': 8, 'i': '2' },
+        { 'x': 0, 'y': 2, 'w': 8, 'h': 8, 'i': '3' },
+        { 'x': 6, 'y': 10, 'w': 8, 'h': 6, 'i': '4' },
+        { 'x': 6, 'y': 16, 'w': 8, 'h': 6, 'i': '5' },
+        { 'x': 0, 'y': 22, 'w': 14, 'h': 4, 'i': '6' }
+      ],
+      message: {
+        todo: 10,
+        done: 45,
+        filter: '0',
+        todoData: [],
+        todoData2: [],
+        doneData: []
+      }
+
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name'
+    ])
+  },
+  mounted() {
+    this.connect()
+  },
+  beforeDestroy() {
+    if (sseClient) {
+      sseClient.disconnect()
+    }
+  },
+  methods: {
+    connect() {
+      sseClient = this.$sse.create({
+        url: process.env.VUE_APP_BASE_API + '/subscribe/test1',
+        format: 'json',
+        withCredentials: true,
+        polyfill: true
+      })
+      sseClient.on('error', (e) => {
+        console.error('lost connection or failed to parse!', e)
+
+      // If this error is due to an unexpected disconnection, EventSource will
+      // automatically attempt to reconnect indefinitely. You will _not_ need to
+      // re-add your handlers.
+      })
+
+      sseClient.on('message', this.handleMessage)
+
+      sseClient.connect()
+        .then(sse => {
+          console.log('We\'re connected!')
+        })
+        .catch((err) => {
+        // When this error is caught, it means the initial connection to the
+        // events server failed.  No automatic attempts to reconnect will be made.
+          console.error('Failed to connect to server', err)
+        })
+    },
+    handleMessage(message) {
+      console.log(message)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$gridBgColor: #ffffff;
+$msgCardHeaderHeight: 43px;
+
+.searh-row {
+  height: 100%;
+  align-items: center;
+  background-color: $gridBgColor;
+}
+
+.card-box {
+  height: 100%;
+
+  ::v-deep {
+    .el-card__header {
+      padding: 10px 10px !important;
+      height: $msgCardHeaderHeight;
+      span{
+        font-weight: bold;
+      }
+    }
+
+    .el-card__body {
+      height: calc(100% - #{$msgCardHeaderHeight});
+      padding: 0 10px 10px 10px;
+      &>* {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.message-content  {
+  .message-filter_box {
+    height: 30px;
+    &>span {
+      display: inline-block;
+      font-size: 14px;
+    }
+  }
+
+  ::v-deep {
+    .el-tabs__header {
+      height: 40px;
+    }
+    .el-tabs__item {
+      font-size: 18px !important;
+    }
+    .el-tabs__content {
+      height: calc(100% - 55px);
+
+      .el-tab-pane{
+        height: 100%;
+      }
+    }
+    .el-table .cell {
+      padding-left: 0 !important;
+    }
+  }
+
+  .priority-box{
+    display: inline-block;
+    padding: 0 5px;
+    color: #ffffff;
+  }
+  .priority-level1{
+    background: #F85252;
+  }
+  .priority-level2{
+    background: orange;
+  }
+  .priority-level3{
+    background: yellow;
+  }
+  .priority-level4{
+    background: blue;
+  }
+}
+
+.system-content {
+  ::v-deep {
+    .el-carousel__container {
+      height: 100%;
+    }
+    .el-carousel__button {
+      background-color: #cccccc;
+      opacity: 1;
+    }
+    .el-carousel__indicator.is-active .el-carousel__button {
+      background-color: #0056dd;
+    }
+  }
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+    background: #e0dede;
+}
+
+.vue-grid-item .resizing {
+    opacity: 0.9;
+}
+
+.vue-grid-item .static {
+    background: rgb(128, 128, 237);
+}
+
+.vue-grid-item .text {
+    font-size: 24px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    height: 100%;
+    width: 100%;
+}
+
+.vue-grid-item .no-drag {
+    height: 100%;
+    width: 100%;
+}
+
+.vue-grid-item .minMax {
+    font-size: 12px;
+}
+
+.vue-grid-item .add {
+    cursor: pointer;
+}
+
+.vue-draggable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 0;
+    left: 0;
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
+    background-position: bottom right;
+    padding: 0 8px 8px 0;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+</style>