Commit 205b0d1b authored by godwithdh's avatar godwithdh
parents e6b1eeaf e674ebd7
...@@ -2,17 +2,20 @@ ...@@ -2,17 +2,20 @@
#chartCustomDetail{ #chartCustomDetail{
font-size:12px; font-size:12px;
height:100%; height:100%;
display:flex;
flex-direction: column;
.Table{
flex-grow: 1;
height:1px;
overflow: auto;
}
h2{ h2{
text-align: center; text-align: center;
height:40px; height:40px;
line-height: 40px; line-height: 40px;
background: #19be6b; background: #19be6b;
color:white; color:white;
position: fixed;
top:0;
left:0;
width:100%; width:100%;
z-index:999;
} }
.center{ .center{
text-align: center; text-align: center;
...@@ -52,7 +55,7 @@ ...@@ -52,7 +55,7 @@
<template> <template>
<div id="chartCustomDetail" :style="value.length <= 0 ? 'background:white;' : ''"> <div id="chartCustomDetail" :style="value.length <= 0 ? 'background:white;' : ''">
<h2>{{title}}</h2> <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;"> <x-table :cell-bordered="true" style="background-color:#fff;">
<thead> <thead>
<tr style="background-color: #F7F7F7"> <tr style="background-color: #F7F7F7">
...@@ -70,24 +73,50 @@ ...@@ -70,24 +73,50 @@
</div> </div>
<div class="noData" v-else> <div class="noData" v-else>
<img src="@/assets/noData.jpg" class="_img" alt=""> <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> <!-- <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=""> --> <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> </div>
</template> </template>
<script> <script>
import Util from '@/libs/util.js' import Util from '@/libs/util.js'
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import { XTable } from 'vux' import customerTable from '@/components/Table'
export default { export default {
name: 'chartCustomDetail', name: 'chartCustomDetail',
data () { data () {
return { return {
value:[], 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(){ async activated(){
...@@ -207,7 +236,7 @@ export default { ...@@ -207,7 +236,7 @@ export default {
} }
}, },
components: { components: {
XTable customerTable
} }
} }
</script> </script>
......
...@@ -2,18 +2,20 @@ ...@@ -2,18 +2,20 @@
#chartMmcolorsale{ #chartMmcolorsale{
font-size:12px; font-size:12px;
height:100%; height:100%;
display:flex;
flex-direction: column;
.Table{
flex-grow: 1;
height:1px;
overflow: auto;
}
h2{ h2{
text-align: center; text-align: center;
height:40px; height:40px;
line-height: 40px; line-height: 40px;
background: #19be6b; background: #19be6b;
color:white; color:white;
position: fixed;
top:0;
left:0;
width:100%; width:100%;
z-index:999;
} }
.center{ .center{
text-align: center; text-align: center;
...@@ -53,7 +55,7 @@ ...@@ -53,7 +55,7 @@
<template> <template>
<div id="chartMmcolorsale" :style="value.length <= 0 ? 'background:white;' : ''"> <div id="chartMmcolorsale" :style="value.length <= 0 ? 'background:white;' : ''">
<h2>{{title}}</h2> <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;"> <x-table :cell-bordered="true" style="background-color:#fff;">
<thead> <thead>
<tr style="background-color: #F7F7F7"> <tr style="background-color: #F7F7F7">
...@@ -73,7 +75,11 @@ ...@@ -73,7 +75,11 @@
</div> </div>
<div class="noData" v-else> <div class="noData" v-else>
<img src="@/assets/noData.jpg" class="_img" alt=""> <img src="@/assets/noData.jpg" class="_img" alt="">
</div> -->
<div class="Table">
<customerTable :columns="columns" :list="value" :tableStyle="tableStyle"></customerTable>
</div> </div>
<!-- <div ref='chart' :style="{width: '100vw', height: '100vh',display:value.length > 0 ? 'block' : 'none'}"></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=""> --> <img v-if="value.lenght<= 0" src="@/assets/noData.jpg" class="_img" alt=""> -->
</div> </div>
...@@ -82,7 +88,7 @@ ...@@ -82,7 +88,7 @@
<script> <script>
import Util from '@/libs/util.js'; import Util from '@/libs/util.js';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import { XTable } from 'vux' import customerTable from '@/components/Table'
export default { export default {
name: 'chartMmcolorsaleDetail', name: 'chartMmcolorsaleDetail',
...@@ -93,11 +99,41 @@ export default { ...@@ -93,11 +99,41 @@ export default {
value:[], value:[],
title:'', 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 myChart:null
} }
}, },
components: { components: {
XTable customerTable
}, },
async activated(){ async activated(){
if(this.chartHearData.type == 'mmsaletop'){ if(this.chartHearData.type == 'mmsaletop'){
......
...@@ -48,21 +48,21 @@ ...@@ -48,21 +48,21 @@
<div class="CONTENT"> <div class="CONTENT">
<div class="iCard" ref="chart1"> <div class="iCard" ref="chart1">
<p>前十名员工(联动)</p> <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"> <div class="noData" v-if="chartData1.length <= 0">
<img src="../../../../assets/noData.jpg" class="_img" alt=""> <img src="../../../../assets/noData.jpg" class="_img" alt="">
</div> </div>
</div> </div>
<div class="iCard" ref="chart2"> <div class="iCard" ref="chart2">
<p>{{title}}每月回款率</p> <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"> <div class="noData" v-if="chartData2.length <= 0">
<img src="../../../../assets/noData.jpg" class="_img" alt=""> <img src="../../../../assets/noData.jpg" class="_img" alt="">
</div> </div>
</div> </div>
<div class="iCard" ref="chart3"> <div class="iCard" ref="chart3">
<p>{{title}}按月统计订单金额</p> <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"> <div class="noData" v-if="chartData3.length <= 0">
<img src="../../../../assets/noData.jpg" class="_img" alt=""> <img src="../../../../assets/noData.jpg" class="_img" alt="">
</div> </div>
......
...@@ -72,7 +72,6 @@ export const employees = { ...@@ -72,7 +72,6 @@ export const employees = {
padding: [ 3, 5 ] padding: [ 3, 5 ]
}, },
onShow: function onShow(ev) { onShow: function onShow(ev) {
console.log(ev)
const items = ev.items; const items = ev.items;
items[0].name = ''; items[0].name = '';
items[0].value = items[0].value + ' 元'; items[0].value = items[0].value + ' 元';
...@@ -101,18 +100,24 @@ export const employees = { ...@@ -101,18 +100,24 @@ export const employees = {
that.title = data[0]._origin.sSalesName; that.title = data[0]._origin.sSalesName;
that.chartData2 = that.tempChartData2.filter(x=>x.iSalesId == data[0]._origin.iSalesId); that.chartData2 = that.tempChartData2.filter(x=>x.iSalesId == data[0]._origin.iSalesId);
that.chartData3 = that.tempChartData3.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.$set(that,'chartData2',that.chartData2);
that.chart2.destroy(); that.$set(that,'chartData3',that.chartData3);
}
if(that.chartData3.length >= 0){ setTimeout(()=>{
that.chart3.destroy(); if(that.chartData2.length > 0){
} that.chart2.destroy();
if(that.chartData2.length >= 0){ }
that.renderChart2(); if(that.chartData3.length > 0){
} that.chart3.destroy();
if(that.chartData3.length >= 0){ }
that.renderChart3(); if(that.chartData2.length > 0){
} that.renderChart2();
}
if(that.chartData3.length > 0){
that.renderChart3();
}
},600)
} }
}, },
hammerOptions: {}, hammerOptions: {},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment