صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
licailing
/
uwip
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

首页

panhui 5 سال پیش
والد
bb7dde44ec
کامیت
d2757ee91e
9فایلهای تغییر یافته به همراه241 افزوده شده و 45 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. BIN
      src/main/vue/public/fonts/OSP-DIN.ttf
  2. 25 15
      src/main/vue/public/index.html
  3. 1 1
      src/main/vue/src/styles/app.less
  4. 13 9
      src/main/vue/src/views/Dashboard.vue
  5. 39 0
      src/main/vue/src/widgets/DoingWidget.vue
  6. 27 20
      src/main/vue/src/widgets/LineChartWidget.vue
  7. 86 0
      src/main/vue/src/widgets/MenusWidget.vue
  8. 39 0
      src/main/vue/src/widgets/WaitWidget.vue
  9. 11 0
      src/main/vue/src/widgets/WidgetCard.vue

BIN
src/main/vue/public/fonts/OSP-DIN.ttf
مشاهده فایل


+ 25 - 15
src/main/vue/public/index.html
مشاهده فایل 

@@ -1,18 +1,28 @@
 
 <!DOCTYPE html>
 
 <html lang="zh-Hans">
 
-  <head>
 
-    <meta charset="utf-8">
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-    <script src="<%= BASE_URL %>fontawesome-v5.13.0.js"></script>
 
-    <title>管理后台</title>
 
-  </head>
 
-  <body>
 
-    <noscript>
 
-      <strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
-    </noscript>
 
-    <div id="app"></div>
 
-    <!-- built files will be auto injected -->
 
-  </body>
 
+    <head>
 
+        <meta charset="utf-8" />
 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 
+        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 
+        <script src="<%= BASE_URL %>fontawesome-v5.13.0.js"></script>
 
+        <link rel="stylesheet" href="https://at.alicdn.com/t/font_2428217_x5heb96sw9.css" />
 
+        <title>管理后台</title>
 
+        <style>
 
+            @font-face {
 
+                font-family: 'OSP';
 
+                src: url('<%= BASE_URL %>fonts/OSP-DIN.ttf');
 
+            }
 
+        </style>
 
+    </head>
 
+    <body>
 
+        <noscript>
 
+            <strong
 
+                >We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to
 
+                continue.</strong
 
+            >
 
+        </noscript>
 
+        <div id="app"></div>
 
+        <!-- built files will be auto injected -->
 
+    </body>
 
 </html>

+ 1 - 1
src/main/vue/src/styles/app.less
مشاهده فایل 

@@ -50,7 +50,7 @@ li {
 
 
 .el-menu-item.is-active {
 
     background: @menu-bg-active !important;
 
-    border-left: 2px solid @menu-text-color-active;
 
+    // border-left: 2px solid @menu-text-color-active;
 
 }
 
 .el-menu--collapse {
 
     .el-submenu.is-active {

+ 13 - 9
src/main/vue/src/views/Dashboard.vue
مشاهده فایل 

@@ -25,8 +25,8 @@
 
                 <component :is="item.name"></component>
 
             </grid-item>
 
         </grid-layout>
 
-        <el-button v-if="editable" @click="save">保存</el-button>
 
-        <el-button v-else @click="editable = true">编辑</el-button>
 
+        <!-- <el-button v-if="editable" @click="save">保存</el-button>
 
+        <el-button v-else @click="editable = true">编辑</el-button> -->
 
     </div>
 
 </template>
 
 
@@ -36,17 +36,19 @@ import UserWidget from '../widgets/UserWidget';
 
 import LineChartWidget from '../widgets/LineChartWidget';
 
 import BarChartWidget from '../widgets/BarChartWidget';
 
 import PieChartWidget from '../widgets/PieChartWidget';
 
+import MenusWidget from '../widgets/MenusWidget';
 
+import WaitWidget from '../widgets/WaitWidget';
 
+import DoingWidget from '../widgets/DoingWidget';
 
 
 export default {
 
     created() {},
 
     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: 'UserWidget' },
 
-                { 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: 12, h: 4, i: '0', name: 'MenusWidget' },
 
+                { x: 0, y: 4, w: 6, h: 10, i: '1', name: 'WaitWidget' },
 
+                { x: 0, y: 10, w: 6, h: 10, i: '2', name: 'LineChartWidget' },
 
+                { x: 6, y: 4, w: 6, h: 20, i: '3', name: 'DoingWidget' }
 
             ],
 
             editable: false
 
         };
 
@@ -60,10 +62,12 @@ export default {
 
     components: {
 
         GridLayout,
 
         GridItem,
 
-        UserWidget,
 
+        MenusWidget,
 
         LineChartWidget,
 
         BarChartWidget,
 
-        PieChartWidget
 
+        PieChartWidget,
 
+        WaitWidget,
 
+        DoingWidget
 
     }
 
 };
 
 </script>

+ 39 - 0
src/main/vue/src/widgets/DoingWidget.vue
مشاهده فایل 

@@ -0,0 +1,39 @@
 
+<template>
 
+    <widget-card :bodyStyle="bodyStyle">
 
+        <template #header>
 
+            进行中案件
 
+        </template>
 
+    </widget-card>
 
+</template>
 
+<script>
 
+import WidgetCard from './WidgetCard';
 
+
 
+export default {
 
+    data() {
 
+        return {
 
+            bodyStyle: {
 
+                display: 'flex',
 
+                alignItems: 'center'
 
+            }
 
+        };
 
+    },
 
+    components: {
 
+        WidgetCard
 
+    }
 
+};
 
+</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;
 
+    }
 
+}
 
+</style>

+ 27 - 20
src/main/vue/src/widgets/LineChartWidget.vue
مشاهده فایل 

@@ -1,5 +1,8 @@
 
 <template>
 
     <widget-card :bodyStyle="bodyStyle" ref="container">
 
+        <template #header>
 
+            数据统计
 
+        </template>
 
         <canvas ref="chart" class="chart"></canvas>
 
     </widget-card>
 
 </template>
 
@@ -18,27 +21,31 @@ export default {
 
         };
 
     },
 
     mounted() {
 
-        this.$refs.chart.width = this.$refs.container.$el.offsetWidth - 20;
 
-        this.$refs.chart.height = this.$refs.container.$el.offsetHeight - 20;
 
-        var gradient = this.$refs.chart.getContext('2d').createLinearGradient(0, 0, 0, 200);
 
+        this.$nextTick(() => {
 
+            this.$refs.chart.width = this.$refs.container.$el.offsetWidth - 20;
 
+            this.$refs.chart.height = this.$refs.container.$el.offsetHeight - 90;
 
+            var gradient = this.$refs.chart
 
+                .getContext('2d')
 
+                .createLinearGradient(0, 0, 0, this.$refs.container.$el.offsetHeight - 100);
 
 
-        gradient.addColorStop(0, 'rgba(32,160,255,0.7)');
 
-        gradient.addColorStop(1, 'rgba(32,160,255,0)');
 
-        this.myChart = new Chart(this.$refs.chart.getContext('2d'), {
 
-            type: 'line',
 
-            data: {
 
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
-                datasets: [
 
-                    {
 
-                        label: 'Data One',
 
-                        backgroundColor: gradient,
 
-                        borderColor: '#20a0ff',
 
-                        borderWidth: '1px',
 
-                        data: [40, 39, 10, 40, 39, 80, 40]
 
-                    }
 
-                ]
 
-            },
 
-            options: { responsive: true, maintainAspectRatio: false }
 
+            gradient.addColorStop(0, 'rgba(32,160,255,0.7)');
 
+            gradient.addColorStop(1, 'rgba(32,160,255,0)');
 
+            this.myChart = new Chart(this.$refs.chart.getContext('2d'), {
 
+                type: 'line',
 
+                data: {
 
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+                    datasets: [
 
+                        {
 
+                            label: 'Data One',
 
+                            backgroundColor: gradient,
 
+                            borderColor: '#20a0ff',
 
+                            borderWidth: '1px',
 
+                            data: [40, 39, 10, 40, 39, 80, 40]
 
+                        }
 
+                    ]
 
+                },
 
+                options: { responsive: true, maintainAspectRatio: false }
 
+            });
 
         });
 
     },
 
     components: {

+ 86 - 0
src/main/vue/src/widgets/MenusWidget.vue
مشاهده فایل 

@@ -0,0 +1,86 @@
 
+<template>
 
+    <widget-card :bodyStyle="bodyStyle">
 
+        <el-row :gutter="20">
 
+            <el-col :span="6" :offset="0">
 
+                <el-avatar icon="el-icon-picture-outline" shape="square" size="large"></el-avatar>
 
+                <div class="info">
 
+                    <div class="num">4,258</div>
 
+                    <div class="text">案件数量</div>
 
+                </div>
 
+            </el-col>
 
+            <el-col :span="6" :offset="0">
 
+                <el-avatar icon="el-icon-picture-outline" shape="square" size="large"></el-avatar>
 
+                <div class="info">
 
+                    <div class="num">4,258</div>
 
+                    <div class="text">案件数量</div>
 
+                </div>
 
+            </el-col>
 
+            <el-col :span="6" :offset="0">
 
+                <el-avatar icon="el-icon-picture-outline" shape="square" size="large"></el-avatar>
 
+                <div class="info">
 
+                    <div class="num">4,258</div>
 
+                    <div class="text">案件数量</div>
 
+                </div>
 
+            </el-col>
 
+            <el-col :span="6" :offset="0">
 
+                <el-avatar icon="el-icon-picture-outline" shape="square" size="large"></el-avatar>
 
+
 
+                <div class="info">
 
+                    <div class="num">4,258</div>
 
+                    <div class="text">案件数量</div>
 
+                </div>
 
+            </el-col>
 
+        </el-row>
 
+    </widget-card>
 
+</template>
 
+<script>
 
+import WidgetCard from './WidgetCard';
 
+
 
+export default {
 
+    data() {
 
+        return {
 
+            bodyStyle: {
 
+                display: 'flex',
 
+                alignItems: 'center'
 
+            }
 
+        };
 
+    },
 
+    components: {
 
+        WidgetCard
 
+    }
 
+};
 
+</script>
 
+<style lang="less" scoped>
 
+.el-row {
 
+    flex-grow: 1;
 
+}
 
+.el-col {
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+
 
+    .el-avatar {
 
+        width: 62px;
 
+        height: 62px;
 
+        font-size: 50px;
 
+        line-height: 62px;
 
+    }
 
+}
 
+.info {
 
+    text-align: left;
 
+    margin-left: 12px;
 
+    .text {
 
+        font-size: 12px;
 
+        color: #000000;
 
+        line-height: 17px;
 
+        margin-top: 5px;
 
+    }
 
+    .num {
 
+        font-size: 48px;
 
+        font-family: OSP-DIN, OSP;
 
+        font-weight: normal;
 
+        color: #000000;
 
+        line-height: 55px;
 
+    }
 
+}
 
+</style>

+ 39 - 0
src/main/vue/src/widgets/WaitWidget.vue
مشاهده فایل 

@@ -0,0 +1,39 @@
 
+<template>
 
+    <widget-card :bodyStyle="bodyStyle">
 
+        <template #header>
 
+            待办案件
 
+        </template>
 
+    </widget-card>
 
+</template>
 
+<script>
 
+import WidgetCard from './WidgetCard';
 
+
 
+export default {
 
+    data() {
 
+        return {
 
+            bodyStyle: {
 
+                display: 'flex',
 
+                alignItems: 'center'
 
+            }
 
+        };
 
+    },
 
+    components: {
 
+        WidgetCard
 
+    }
 
+};
 
+</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;
 
+    }
 
+}
 
+</style>

+ 11 - 0
src/main/vue/src/widgets/WidgetCard.vue
مشاهده فایل 

@@ -26,3 +26,14 @@ export default {
 
     flex-direction: column;
 
 }
 
 </style>
 
+
 
+<style lang="less">
 
+.vue-grid-item {
 
+    .el-card__header {
 
+        font-size: 14px;
 
+        font-weight: bold;
 
+        color: #000000;
 
+        line-height: 24px;
 
+    }
 
+}
 
+</style>