通知通告

src/main/vue/src/views/Dashboard.vue

@@ -33,6 +33,7 @@
 <script>
 import { GridLayout, GridItem } from 'vue-grid-layout';
 import UserWidget from '../widgets/UserWidget';
+import BoardWidget from '../widgets/BoardWidget.vue';
 import UserWidget2 from '../widgets/UserWidget2';
 import LineChartWidget from '../widgets/LineChartWidget';
 import BarChartWidget from '../widgets/BarChartWidget';
@@ -43,11 +44,12 @@ export default {
     data() {
         return {
             layout: [
-                { x: 0, y: 0, w: 6, h: 4, i: '0', name: 'UserWidget' },
-                { x: 6, y: 0, w: 6, h: 4, i: '1', name: 'UserWidget2' },
-                { x: 0, y: 4, w: 6, h: 6, i: '2', name: 'BarChartWidget' },
-                { x: 0, y: 10, w: 6, h: 6, i: '3', name: 'LineChartWidget' },
-                { x: 6, y: 4, w: 6, h: 12, i: '4', name: 'PieChartWidget' }
+                { x: 0, y: 0, w: 6, h: 8, i: '0', name: 'BoardWidget' },
+                { x: 6, y: 0, w: 6, h: 4, i: '1', name: 'UserWidget' },
+                { x: 6, y: 4, w: 6, h: 4, i: '2', name: 'UserWidget2' },
+                { x: 0, y: 8, w: 6, h: 6, i: '3', name: 'BarChartWidget' },
+                { x: 0, y: 10, w: 6, h: 6, i: '4', name: 'LineChartWidget' },
+                { x: 6, y: 8, w: 6, h: 12, i: '5', name: 'PieChartWidget' }
             ],
             editable: false
         };
@@ -62,6 +64,7 @@ export default {
         GridLayout,
         GridItem,
         UserWidget,
+        BoardWidget,
         UserWidget2,
         LineChartWidget,
         BarChartWidget,

src/main/vue/src/widgets/BoardWidget.vue

@@ -0,0 +1,126 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle" ref="container">
+        <template slot="header">
+            通知通告
+        </template>
+        <div class="boardList" :style="{ height: height + 'px' }">
+            <el-link
+                :underline="false"
+                :to="{ path: '/' }"
+                class="board-item"
+                v-for="(item, index) in tableData"
+                :key="index"
+            >
+                <span>{{ item.title }}</span>
+                <span>{{ item.date }}</span>
+            </el-link>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from './WidgetCard';
+
+export default {
+    data() {
+        return {
+            bodyStyle: {},
+            tableData: [
+                {
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    title: '上海市普陀区金沙江路 1518 弄'
+                },
+                {
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    title: '上海市普陀区金沙江路 1517 弄'
+                },
+                {
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    title: '上海市普陀区金沙江路 1519 弄'
+                },
+                {
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    title: '上海市普陀区金沙江路 1516 弄'
+                },
+                {
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    title: '上海市普陀区金沙江路 1516 弄'
+                },
+                {
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    title: '上海市普陀区金沙江路 1516 弄'
+                },
+                {
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    title: '上海市普陀区金沙江路 1516 弄'
+                },
+                {
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    title: '上海市普陀区金沙江路 1516 弄'
+                },
+                {
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    title: '上海市普陀区金沙江路 1516 弄'
+                }
+            ],
+            height: 200
+        };
+    },
+    components: {
+        WidgetCard
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.height = this.$refs.container.$el.offsetHeight - 100;
+        });
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+.boardList {
+    .board-item + .board-item {
+        margin-top: 20px;
+    }
+    .board-item {
+        font-size: 14px;
+        margin-right: 15px;
+        line-height: 20px;
+        display: block;
+        /deep/.el-link--inner {
+            display: flex;
+            justify-content: space-between;
+        }
+        span {
+            &:first-child {
+                color: #000;
+                font-weight: bold;
+            }
+            &:last-child {
+                color: #999;
+            }
+        }
+    }
+    overflow: auto;
+}
+</style>