commit

src/view/chart/custom/detail.vue

@@ -2,17 +2,20 @@
     #chartCustomDetail{
         font-size:12px;
         height:100%;
+        display:flex;
+        flex-direction: column;
+        .Table{
+            flex-grow: 1;
+            height:1px;
+            overflow: auto;
+        }
         h2{
             text-align: center;
             height:40px;
             line-height: 40px;
             background: #19be6b;
             color:white;
-            position: fixed;
-            top:0;
-            left:0;
             width:100%;
-            z-index:999;
         }
         .center{
             text-align: center;
@@ -52,7 +55,7 @@
 <template>
   <div id="chartCustomDetail" :style="value.length <= 0 ? 'background:white;' : ''">
     <h2>{{title}}</h2>
-    <div class="vux_table" v-if="value.length > 0">
+    <!-- <div class="vux_table" v-if="value.length > 0">
         <x-table :cell-bordered="true" style="background-color:#fff;">
             <thead>
                 <tr style="background-color: #F7F7F7">
@@ -70,24 +73,50 @@
     </div>
     <div class="noData" v-else>
         <img src="@/assets/noData.jpg" class="_img" alt="">
-    </div>
+    </div> -->
     <!-- <div ref='chart' :style="{width: '100vw', height: '100vh',display:value.length> 0 ? 'block' : 'none'}"></div>
     <img v-if="value.length<= 0" src="@/assets/noData.jpg" class="_img" alt=""> -->
-
+    <div class="Table">
+        <customerTable :columns="columns" :list="value" :tableStyle="tableStyle"></customerTable>  
+    </div>
   </div>
 </template>
 
 <script>
 import Util from '@/libs/util.js'
 import { mapState } from 'vuex';
-import { XTable } from 'vux'
+import customerTable from '@/components/Table'
 
 export default {
     name: 'chartCustomDetail',
     data () {
         return {
             value:[],
-            title:''
+            title:'',
+            columns:[
+                {
+                    width:'50%',
+                    name:'日期',
+                    align:'center',
+                    field:'sYearMonth'
+                },
+                {
+                    width:'50%',
+                    name:'金额',
+                    align:'center',
+                    field:'nAmount',
+                }
+            ],
+            tableStyle:{
+                theadBgColor:'rgba(223,238,253,1)',
+                complexTrBgColor:'white',
+                singleTrBgColor:'#eef4fe',
+                theadTdBorder:false,
+                tbodyTdBorder:false,
+                tbodyHeight:'calc(100vh)',
+                tbodyTrBorderBottom:'1px solid #dbe9f8',
+                width:'100%'
+            },
         }
     },
     async activated(){
@@ -207,7 +236,7 @@ export default {
         }
     },
     components: {
-        XTable
+        customerTable
     }
 }
 </script>

src/view/chart/sales/detail.vue

@@ -2,18 +2,20 @@
     #chartMmcolorsale{
         font-size:12px;
         height:100%;
-
+        display:flex;
+        flex-direction: column;
+        .Table{
+            flex-grow: 1;
+            height:1px;
+            overflow: auto;
+        }
         h2{
             text-align: center;
             height:40px;
             line-height: 40px;
             background: #19be6b;
             color:white;
-            position: fixed;
-            top:0;
-            left:0;
             width:100%;
-            z-index:999;
         }
         .center{
             text-align: center;
@@ -53,7 +55,7 @@
 <template>
   <div id="chartMmcolorsale"  :style="value.length <= 0 ? 'background:white;' : ''">
     <h2>{{title}}</h2>
-    <div class="vux_table" v-if="value.length > 0">
+    <!-- <div class="vux_table" v-if="value.length > 0">
         <x-table :cell-bordered="true" style="background-color:#fff;">
             <thead>
                 <tr style="background-color: #F7F7F7">
@@ -73,7 +75,11 @@
     </div>
     <div class="noData" v-else>
         <img src="@/assets/noData.jpg" class="_img" alt="">
+    </div> -->
+     <div class="Table">
+        <customerTable :columns="columns" :list="value" :tableStyle="tableStyle"></customerTable>  
     </div>
+
     <!-- <div ref='chart' :style="{width: '100vw', height: '100vh',display:value.length > 0 ? 'block' : 'none'}"></div>
     <img v-if="value.lenght<= 0" src="@/assets/noData.jpg" class="_img" alt=""> -->
   </div>
@@ -82,7 +88,7 @@
 <script>
 import Util from '@/libs/util.js';
 import { mapState } from 'vuex';
-import { XTable } from 'vux'
+import customerTable from '@/components/Table'
 
 export default {
     name: 'chartMmcolorsaleDetail',
@@ -93,11 +99,41 @@ export default {
 
             value:[],
             title:'',
+            columns:[
+                {
+                    width:'40%',
+                    name:'日期',
+                    align:'center',
+                    field:'sYearMonth'
+                },
+                {
+                    width:'30%',
+                    name:'金额',
+                    align:'center',
+                    field:'nAmount',
+                },
+                {
+                    width:'30%',
+                    name:'数量',
+                    align:'center',
+                    field:'nQty',
+                }
+            ],
+            tableStyle:{
+                theadBgColor:'rgba(223,238,253,1)',
+                complexTrBgColor:'white',
+                singleTrBgColor:'#eef4fe',
+                theadTdBorder:false,
+                tbodyTdBorder:false,
+                tbodyHeight:'calc(100vh)',
+                tbodyTrBorderBottom:'1px solid #dbe9f8',
+                width:'100%'
+            },
             myChart:null
         }
     },
     components: {
-        XTable
+        customerTable
     },
     async activated(){
         if(this.chartHearData.type == 'mmsaletop'){

src/view/shopVersion/form/empAna/index.vue

@@ -48,21 +48,21 @@
         <div class="CONTENT">
             <div class="iCard" ref="chart1">
                 <p>前十名员工（联动）</p>
-                <canvas id="chart1" v-show="chartData1.length > 0" width="400" height="260" style="width:100%;height:240px; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas>
+                <canvas id="chart1" v-if="chartData1.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas>
                 <div class="noData" v-if="chartData1.length <= 0">
                     <img src="../../../../assets/noData.jpg" class="_img" alt="">
                 </div>
             </div>
             <div class="iCard" ref="chart2">
                 <p>{{title}}每月回款率</p>
-                <canvas id="chart2" v-show="chartData2.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas>
+                <canvas id="chart2" v-if="chartData2.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas>
                 <div class="noData" v-if="chartData2.length <= 0">
                     <img src="../../../../assets/noData.jpg" class="_img" alt="">
                 </div>
             </div>
             <div class="iCard" ref="chart3">
                 <p>{{title}}按月统计订单金额</p>
-                <canvas id="chart3" v-show="chartData3.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas>
+                <canvas id="chart3" v-if="chartData3.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas>
                 <div class="noData" v-if="chartData3.length <= 0">
                     <img src="../../../../assets/noData.jpg" class="_img" alt="">
                 </div>

src/view/shopVersion/form/empAna/mixins/employees.js

@@ -72,7 +72,6 @@ export const employees = {
                     padding: [ 3, 5 ]
                 },
                 onShow: function onShow(ev) {
-                    console.log(ev)
                     const items = ev.items;
                     items[0].name = '';
                     items[0].value = items[0].value + ' 元';
@@ -101,18 +100,24 @@ export const employees = {
                         that.title = data[0]._origin.sSalesName;
                         that.chartData2 = that.tempChartData2.filter(x=>x.iSalesId == data[0]._origin.iSalesId);
                         that.chartData3 = that.tempChartData3.filter(x=>x.iSalesId == data[0]._origin.iSalesId);
-                        if(that.chartData2.length >= 0){
-                            that.chart2.destroy();
-                        }
-                        if(that.chartData3.length >= 0){
-                            that.chart3.destroy();
-                        }
-                        if(that.chartData2.length >= 0){
-                            that.renderChart2();
-                        }
-                        if(that.chartData3.length >= 0){
-                            that.renderChart3();
-                        }
+                        that.$set(that,'chartData2',that.chartData2);
+                        that.$set(that,'chartData3',that.chartData3);
+                        
+                        setTimeout(()=>{
+                            if(that.chartData2.length > 0){
+                                that.chart2.destroy();
+                            }
+                            if(that.chartData3.length > 0){
+                                that.chart3.destroy();
+                            }
+                            if(that.chartData2.length > 0){
+                                that.renderChart2();
+                            }
+                            if(that.chartData3.length > 0){
+                                that.renderChart3();
+                            }
+                        },600)
+                        
                     }
                 },
                 hammerOptions: {},