Merge branch 'dev' of http://git.izouma.com/xiongzhu/raex_back into dev

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

@@ -28,7 +28,7 @@
                     </grid-item>
                 </grid-layout>
             </el-tab-pane>
-            <el-tab-pane label="业绩统计">
+            <el-tab-pane label="业绩统计" lazy>
                 <grid-layout
                     style="margin: 0 -10px;"
                     :layout="layout"
@@ -137,7 +137,7 @@ export default {
                 this.layout2 = [
                     { x: 6, y: 0, w: 12, h: 12, i: '10', name: 'OtherStatistic' },
                     { x: 6, y: 12, w: 12, h: 12, i: '11', name: 'Detail' }
-                    ];
+                ];
             } else {
                 this.layout = [
                     { x: 0, y: 0, w: 6, h: 4, i: '2', name: 'PriceWidget' },

src/main/vue/src/widgets/Detail.vue

@@ -1,25 +1,32 @@
 <template>
-    <widget-card :bodyStyle="bodyStyle">
+    <widget-card :bodyStyle="bodyStyle" ref="container">
         <template #header>
-            <div class="header">
+            <div class="header" ref="top">
                 <span>流水明细</span>
-<!--                <el-select-->
-<!--                    style="width: 120px;"-->
-<!--                    size="mini"-->
-<!--                    v-model="value"-->
-<!--                    @change="changeSelect"-->
-<!--                    placeholder="请选择"-->
-<!--                >-->
-<!--                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">-->
-<!--                    </el-option>-->
-<!--                </el-select>-->
+                <!--                <el-select-->
+                <!--                    style="width: 120px;"-->
+                <!--                    size="mini"-->
+                <!--                    v-model="value"-->
+                <!--                    @change="changeSelect"-->
+                <!--                    placeholder="请选择"-->
+                <!--                >-->
+                <!--                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">-->
+                <!--                    </el-option>-->
+                <!--                </el-select>-->
             </div>
         </template>
-        <div class="box-content">
+        <!-- <div class="box-content">
             <div class="box">
                 <div class="text1">手续费/充值/saas/版权/星图/提现/域名</div>
-                <div class="text2">{{ order.serviceCharge }}元/{{ order.recharge }}元/{{ order.saas }}元/{{ order.royalties }}元/{{ order.photoAsset }}元/{{ order.withdraw }}元/{{ order.domainOrder }}元</div>
+                <div class="text2">
+                    {{ order.serviceCharge }}元/{{ order.recharge }}元/{{ order.saas }}元/{{ order.royalties }}元/{{
+                        order.photoAsset
+                    }}元/{{ order.withdraw }}元/{{ order.domainOrder }}元
+                </div>
             </div>
+        </div> -->
+        <div class="chart-box">
+            <canvas ref="chart" class="chart"></canvas>
         </div>
     </widget-card>
 </template>
@@ -28,22 +35,18 @@ import WidgetCard from './WidgetCard';
 import acc from '../mixins/acc';
 
 export default {
-    created() {
-        this.getPriceInfo();
-        // this.value = 'today';
-        // this.changeSelect();
-    },
     data() {
         return {
+            myChart: null,
             bodyStyle: {
                 overflow: 'auto'
             },
             value: '',
             priceInfo: {},
             options: [
-                {label: 'today', value: 'today'},
-                {label: 'last', value: 'last'},
-                {label: 'yesterday', value: 'yesterday'},
+                { label: 'today', value: 'today' },
+                { label: 'last', value: 'last' },
+                { label: 'yesterday', value: 'yesterday' }
             ],
             order: {}
         };
@@ -53,16 +56,49 @@ export default {
         WidgetCard
     },
     mounted() {
+        setTimeout(() => {
+            this.$nextTick(() => {
+                this.$refs.chart.width = this.$refs.container.$el.offsetWidth - 20;
+                this.$refs.chart.height = this.$refs.container.$el.offsetHeight - this.$refs.top.offsetHeight - 100;
+                this.init();
+            });
+        }, 500);
         // this.changeSelect();
     },
     methods: {
-        getPriceInfo() {
-            this.$http
-                .get('/statistic/statisticDetail')
-                .then(res => {
-                    this.order = res.today;
+        init() {
+            this.$http.get('/statistic/statisticDetail').then(res => {
+                this.order = res.today;
+                this.myChart = new Chart(this.$refs.chart.getContext('2d'), {
+                    type: 'bar',
+                    data: {
+                        labels: ['手续费', '充值', 'saas', '版权', '星图', '提现', '域名'],
+                        datasets: [
+                            {
+                                label: '流水(元)',
+                                borderColor: '#409EFF',
+                                backgroundColor: '#409EFF',
+                                data: [
+                                    this.order.serviceCharge,
+                                    this.order.recharge,
+                                    this.order.saas,
+                                    this.order.royalties,
+                                    this.order.photoAsset,
+                                    this.order.withdraw,
+                                    this.order.domainOrder
+                                ]
+                            }
+                        ]
+                    },
+                    options: {
+                        title: { text: '今日流水明细', display: true },
+                        legend: { display: false },
+                        responsive: true,
+                        maintainAspectRatio: false
+                    }
                 });
-        },
+            });
+        }
         // changeSelect() {
         //     this.order = this.priceInfo.today;
         // }