Commit f6b9f17c authored by 张锡奇's avatar 张锡奇

commit

parent 6d169d73
......@@ -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>
......
......@@ -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'){
......
......@@ -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>
......
......@@ -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: {},
......
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