sync

src/views/home/components/Message.vue

@@ -0,0 +1,145 @@
+<template>
+  <el-card>
+    <div slot="header" class="clearfix">
+      <span>消息提醒</span>
+      <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
+    </div>
+    <el-tabs class="message-content" value="todo">
+      <el-tab-pane :label="'待办（'+ todo + '）'" name="todo">
+        <div class="message-filter_box">
+          <span>筛选条件：</span>
+          <el-radio-group v-model="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="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">不再提醒</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane :label="'已办（'+ done + '）'" name="done">
+        <div class="message-filter_box">
+          <span>筛选条件：</span>
+          <el-radio-group v-model="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="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>
+</template>
+
+<script>
+export default {
+  name: '',
+  data() {
+    return {
+      todo: 10,
+      done: 45,
+      filter: '0',
+      todoData: [
+        { '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' }
+      ],
+      doneData: []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.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;
+}
+</style>

src/views/home/components/Search.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-row type="flex" justify="center" class="searh-row">
+    <el-col :span="10"><el-input placeholder="请输入搜索内容" /></el-col>
+    <el-col :span="2"><el-button type="primary" icon="el-icon-search">智搜</el-button></el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.searh-row {
+  height: 100%;
+  align-items: center;
+  background-color: #ffffff;
+}
+</style>

src/views/home/components/System.vue

@@ -0,0 +1,84 @@
+<template>
+  <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="(page,index) in carouselData2" :key="index">
+        <h3 v-for="item in page" :key="item.id" class="small">{{ item.name }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </el-card>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      rawData: [
+        { id: '1', code: '1', name: 'System1', link: 'http://www.1.com', icon: 'icon-1' },
+        { id: '2', code: '2', name: 'System2', link: 'http://www.2.com', icon: 'icon-2' },
+        { id: '3', code: '3', name: 'System3', link: 'http://www.3.com', icon: 'icon-3' },
+        { id: '4', code: '4', name: 'System4', link: 'http://www.4.com', icon: 'icon-4' },
+        { id: '5', code: '5', name: 'System5', link: 'http://www.5.com', icon: 'icon-5' },
+        { id: '6', code: '6', name: 'System6', link: 'http://www.6.com', icon: 'icon-6' },
+        { id: '7', code: '7', name: 'System7', link: 'http://www.7.com', icon: 'icon-7' },
+        { id: '8', code: '8', name: 'System8', link: 'http://www.8.com', icon: 'icon-8' },
+        { id: '9', code: '9', name: 'System9', link: 'http://www.9.com', icon: 'icon-9' },
+        { id: '10', code: '10', name: 'System10', link: 'http://www.10.com', icon: 'icon-10' },
+        { id: '11', code: '11', name: 'System11', link: 'http://www.11.com', icon: 'icon-11' },
+        { id: '12', code: '12', name: 'System12', link: 'http://www.12.com', icon: 'icon-12' },
+        { id: '13', code: '13', name: 'System13', link: 'http://www.13.com', icon: 'icon-13' }
+      ],
+      pageSize: 10,
+      carouselData: []
+    }
+  },
+  computed: {
+    carouselData2() {
+      const result = []
+      if (this.rawData && this.rawData.length > 0) {
+        const len = this.rawData.length
+        const page = Math.ceil(len / this.pageSize)
+        for (var i = 0; i < page; i++) {
+          result.push(this.rawData.slice(i * this.pageSize, (i + 1) * this.pageSize))
+        }
+      }
+      return result
+    }
+  },
+  created() {
+    this.formatData()
+  },
+  methods: {
+    formatData() {
+      this.carouselData = []
+      if (this.rawData && this.rawData.length > 0) {
+        const len = this.rawData.length
+        const page = Math.ceil(len / this.pageSize)
+        for (var i = 0; i < page; i++) {
+          this.carouselData.push(this.rawData.slice(i * this.pageSize, (i + 1) * this.pageSize))
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.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;
+    }
+  }
+}
+</style>

src/views/home/components/Test.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>Test</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  }
+}
+</script>

src/views/home/index.vue

@@ -11,84 +11,16 @@
       :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">
+      <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
+        <component :is="components[item.i]" class="card-box" />
+      </grid-item>
+      <!-- <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">
           <el-col :span="10"><el-input placeholder="请输入搜索内容" /></el-col>
           <el-col :span="2"><el-button type="primary" icon="el-icon-search">智搜</el-button></el-col>
         </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="card-box">
-          <div slot="header" class="clearfix">
-            <span>消息提醒</span>
-            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
-          </div>
-          <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[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">
         <el-card class="card-box">
           <div slot="header" class="clearfix">
@@ -142,7 +74,7 @@
             {{ '列表内容 ' + o }}
           </div>
         </el-card>
-      </grid-item>
+      </grid-item> -->
     </grid-layout>
   </div>
 </template>
@@ -150,6 +82,10 @@
 <script>
 import { mapGetters } from 'vuex'
 import VueGridLayout from 'vue-grid-layout'
+import Search from './components/Search'
+import Message from './components/Message'
+import System from './components/System'
+import Test from './components/Test'
 
 let sseClient
 
@@ -157,7 +93,11 @@ export default {
   name: 'Home',
   components: {
     GridLayout: VueGridLayout.GridLayout,
-    GridItem: VueGridLayout.GridItem
+    GridItem: VueGridLayout.GridItem,
+    Search,
+    Message,
+    System,
+    Test
   },
   data() {
     return {
@@ -170,24 +110,7 @@ export default {
         { '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 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: []
-      }
-
+      components: ['Test', 'Test', 'Test', 'System', 'Test', 'Test', 'Test']
     }
   },
   computed: {
@@ -239,15 +162,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$gridBgColor: #ffffff;
 $msgCardHeaderHeight: 43px;
 
-.searh-row {
-  height: 100%;
-  align-items: center;
-  background-color: $gridBgColor;
-}
-
 .card-box {
   height: 100%;
 
@@ -270,53 +186,6 @@ $msgCardHeaderHeight: 43px;
   }
 }
 
-.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;
-}
-
 .vue-grid-item:not(.vue-grid-placeholder) {
     background: #e0dede;
 }