Skip to content

W
WX_h5
Commit a01fb0c5 authored by 张锡奇's avatar 张锡奇
Browse files
Options

upload

parent 23293631
Hide whitespace changes
Inline Side-by-side
Showing with 177 additions and 110 deletions
src/view/tiip/IntReportForms/empAna.vue
View file @ a01fb0c5
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
// background:#dce9fe; // background:#dce9fe;
>.CONTENT{ >.CONTENT{
.iCard{ .iCard{
height:260px; min-height:260px;
>p{ >p{
margin:0; margin:0;
height:30px; height:30px;
...@@ -35,21 +35,21 @@ ...@@ -35,21 +35,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-if="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> <div ref="myChart1" :style="{width: '100vw', height: '300%',display:chartData1.length > 0 ? 'block' : 'none'}"></div>
<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-if="chartData2.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas> <div ref="myChart2" :style="{width: '100vw', height: '300%',display:chartData2.length > 0 ? 'block' : 'none'}"></div>
<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-if="chartData3.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas> <div ref="myChart3" :style="{width: '100vw', height: '300%',display:chartData3.length > 0 ? 'block' : 'none'}"></div>
<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>
...@@ -60,14 +60,9 @@ ...@@ -60,14 +60,9 @@
<script> <script>
import Util from '@/libs/util.js' import Util from '@/libs/util.js'
import dateMonth from '@/components/dateMonth' import dateMonth from '@/components/dateMonth'
import { employees } from '@/view/shopVersion/form/empAna/mixins/employees'
import { receivable } from '@/view/shopVersion/form/empAna/mixins/receivable'
import { orderAmount } from '@/view/shopVersion/form/empAna/mixins/orderAmount'
import { setTimeout } from 'timers';
export default { export default {
name:"empAna", name:"empAna",
components:{dateMonth}, components:{dateMonth},
mixins: [employees,receivable,orderAmount],
data(){ data(){
return{ return{
searchValue:{ searchValue:{
...@@ -75,124 +70,71 @@ export default { ...@@ -75,124 +70,71 @@ export default {
dEndDate:null, dEndDate:null,
}, },
typeList:{time:true}, typeList:{time:true},
direction:'vertical',
tempChartData2:[],
tempChartData3:[],
title:"", title:"",
myChart1:null,
myChart2:null,
myChart3:null,
chartData1:[],
chartData2:[],
chartData3:[],
tempChartData2:[],
tempChartData3:[]
} }
}, },
async mounted(){ async mounted(){
window.em=this window.em=this
this.createChart('myChart1')
this.createChart('myChart2')
this.createChart('myChart3')
window.addEventListener("resize",()=>{ window.addEventListener("resize",()=>{
setTimeout(async ()=>{ setTimeout(async ()=>{
this.renderResize(); this.resize(this.myChart1)
if(this.chartData1.length>0){ this.resize(this.myChart2)
this.chart1.changeSize(this.$refs['chart1'].offsetWidth); this.resize(this.myChart3)
this.chart1.destroy();
}
if(this.chartData2.length > 0){
this.chart2.changeSize(this.$refs['chart2'].offsetWidth); // 清除
this.chart2.destroy();
}
if(this.chartData3.length > 0){
this.chart3.changeSize(this.$refs['chart3'].offsetWidth); // 清除
this.chart3.destroy();
}
if(this.chartData1.length > 0){
await this.renderChart1();
}
if(this.chartData2.length > 0){
await this.renderChart2();
}
if(this.chartData3.length > 0){
await this.renderChart3();
}
}) })
}) })
await this.searchData();
this.$nextTick(async ()=>{ },
this.renderResize(); activated(){
// await this.getData(); setTimeout(()=>{
// if(this.chartData1.length>0){ this.resize(this.myChart1)
// await this.renderChart1() this.resize(this.myChart2)
// } this.resize(this.myChart3)
// if(this.chartData2.length>0){ })
// await this.renderChart2()
// }
// if(this.chartData3.length>0){
// await this.renderChart3()
// }
})
// this.global.$off("searchData");
// this.global.$on("searchData",async ()=>{
// this.chartData1=[]
// this.chartData2=[]
// this.chartData3=[]
// if(this.chartData1.length > 0){
// await this.chart1.destroy();
// }
// if(this.chartData2.length > 0){
// await this.chart2.destroy();
// }
// if(this.chartData3.length > 0){
// await this.chart3.destroy();
// }
// await this.getData();
// if(this.chartData1.length > 0){
// await this.renderChart1();
// }
// if(this.chartData2.length > 0){
// await this.renderChart2();
// }
// if(this.chartData3.length > 0){
// await this.renderChart3();
// }
// });
}, },
methods:{ methods:{
createChart(name){
var charts=this.$echarts.init(this.$refs[name]);
if(name == 'myChart1'){
charts.getZr().on('mousedown', param=> {
const pointInPixel = [param.offsetX, param.offsetY]
if (charts.containPixel('grid', pointInPixel)) {
let index = charts.convertFromPixel({ seriesIndex: 0 }, [param.offsetX, param.offsetY])[0]
this.title = this.chartData1[index].sSalesName;
this.chartData2 = this.tempChartData2.filter(x=>x.iSalesId == this.chartData1[index].iSalesId);
this.chartData3 = this.tempChartData3.filter(x=>x.iSalesId == this.chartData1[index].iSalesId);
this.setChart1(this.myChart2,this.chartData2,0)
this.setChart1(this.myChart3,this.chartData3,1)
}
});
}
this[name]=charts
},
resize(chart){
var option=chart.getOption()
if(!option)return;
option.dataZoom[0].end=option.dataZoom[0].start+(window.innerWidth*0.9)/option.xAxis[0].data.length
chart.setOption(option)
chart.resize()
},
searchData(start,end){ searchData(start,end){
this.searchValue.dBeginDate=start this.searchValue.dBeginDate=start
this.searchValue.dEndDate=end this.searchValue.dEndDate=end
this.$nextTick(async ()=>{ this.$nextTick(async ()=>{
this.chartData1=[]
this.chartData2=[]
this.chartData3=[]
if(this.chartData1.length > 0){
await this.chart1.destroy();
}
if(this.chartData2.length > 0){
await this.chart2.destroy();
}
if(this.chartData3.length > 0){
await this.chart3.destroy();
}
await this.getData(); await this.getData();
if(this.chartData1.length > 0){
await this.renderChart1();
}
if(this.chartData2.length > 0){
await this.renderChart2();
}
if(this.chartData3.length > 0){
await this.renderChart3();
}
}) })
}, },
renderResize(){
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
if(width > height) {
this.direction = 'cross';
}else{
this.direction = 'vertical';
}
},
async getData(){ async getData(){
var res=await this.request("getTiipSalesinfo",{ var res=await this.request("getTiipSalesinfo",{
data:{ data:{
...@@ -209,6 +151,7 @@ export default { ...@@ -209,6 +151,7 @@ export default {
iSalesId:v.sSalesName, iSalesId:v.sSalesName,
} }
}) })
this.setChart(this.myChart1,this.chartData1)
} }
if(res.set2.length>0){ if(res.set2.length>0){
this.tempChartData2 = res.set2.map(v=>{ this.tempChartData2 = res.set2.map(v=>{
...@@ -218,7 +161,8 @@ export default { ...@@ -218,7 +161,8 @@ export default {
iSalesId:v.sSalesName, iSalesId:v.sSalesName,
} }
}) })
this.chartData2=this.tempChartData2.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId) this.chartData2=this.tempChartData2.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId);
this.setChart1(this.myChart2,this.chartData2,0)
} }
if(res.set3.length>0){ if(res.set3.length>0){
this.tempChartData3 = res.set3.map(v=>{ this.tempChartData3 = res.set3.map(v=>{
...@@ -229,8 +173,128 @@ export default { ...@@ -229,8 +173,128 @@ export default {
} }
}) })
this.chartData3=this.tempChartData3.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId) this.chartData3=this.tempChartData3.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId)
this.setChart1(this.myChart3,this.chartData3,1)
} }
}, },
setChart(myChart,value){
let options = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
left: '2%', // 与容器左侧的距离
right: '2%', // 与容器右侧的距离
containLabel: true
},
xAxis: [
{
type: 'category',
data: value.map(x => x.sSalesName) ,
axisPointer: {
type: 'shadow'
},
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval:0
}
},
],
yAxis: [
{
type: 'value',
name: '金额',
axisLabel: {
formatter: '{value}'
},
scale:true
}
],
series: [
{
name:'金额',
type:'bar',
data: value.map(x => `${x.nAmount}`) ,
barMaxWidth:40,
label:{
show:true,
position:"top",
color:'#6B9BF7',
formatter:val=>{
return `${val.data}`
}
},
itemStyle:{
normal:{
color:'#708bf6'
}
}
}
],
dataZoom: [{
type: 'inside',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
start: 0,//滚动条的起始位置
end: (window.innerWidth*0.9)/value.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}] 
};
myChart.setOption(options);
},
setChart1(myChart,value,id){
let options = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
type: 'category',
data: id == 0 ? this.chartData2.map(x=>x.sMonth) : this.chartData3.map(x=>x.sMonth)
},
yAxis: {
type: 'value',
axisLabel: {
margin: 2,
formatter: function (value, index) {
if(value >= 1000 && value < 10000){
value = value / 1000 + "千";
}else if (value >= 10000 && value < 10000000) {
value = value / 10000 + "万";
} else if (value >= 10000000) {
value = value / 10000000 + "千万";
}
return value;
}
},
},
series: [{
data: id == 0 ? this.chartData2.map(x=>x.nPaydAmount) : this.chartData3.map(x=>x.nAmount),
type: 'line'
}],
dataZoom: [{
type: 'inside',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
start: 0,//滚动条的起始位置
end: (window.innerWidth*0.9)/value.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}] 
};
myChart.setOption(options);
}
}, },
} }
</script> </script>
src/view/tiip/IntReportForms/liabilities_detail.vue
View file @ a01fb0c5
...@@ -61,6 +61,9 @@ export default { ...@@ -61,6 +61,9 @@ export default {
sCustomerType:this.$route.params.sCustomerType, sCustomerType:this.$route.params.sCustomerType,
} }
},"加载中",{}) },"加载中",{})
this.list.map(x=>{
x['应收'] = (Math.round(x['应收']*100)/100).toLocaleString()
})
} }
}, },
} }
......
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