Skip to content

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

Merge branch 'master' of ssh://47.110.145.204:2222/godwithdh/wx_h5

parents 5da6d8f9 24810931
Hide whitespace changes
Inline Side-by-side
Showing with 507 additions and 108 deletions
src/components/search.vue
View file @ 6854e9e3
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<div class="Title">日期范围</div> <div class="Title">日期范围</div>
<div style="flex:1;display:flex;" class="DATE"> <div style="flex:1;display:flex;" class="DATE">
<div class="padding-left-15 dateTime"> <div class="padding-left-15 dateTime">
<datetime v-model="search.dBeginDate" format="YYYY-MM-DD" @on-confirm="searchData($event,1)"></datetime> <datetime :end-date="search.dEndDate" v-model="search.dBeginDate" format="YYYY-MM-DD" @on-confirm="searchData($event,1)"></datetime>
<!-- <i class='iconfont icon-right'></i> --> <!-- <i class='iconfont icon-right'></i> -->
</div> </div>
<span class="line"/> <span class="line"/>
......
src/libs/apiMap.js
View file @ 6854e9e3
...@@ -65,10 +65,11 @@ const methodMap = { ...@@ -65,10 +65,11 @@ const methodMap = {
/** /**
* tiip 小程序 * tiip 小程序
*/ */
getTtipTotalamount:{url:'/bianalysis/totalamount/',method:'get',host:"default"}, getTiipTotalamount:{url:'/bianalysis/totalamount/',method:'get',host:"default"},
getTtipSellinfo:{url:'/bianalysis/sellinfo/',method:'get',host:"default"}, getTiipSellinfo:{url:'/bianalysis/sellinfo/',method:'get',host:"default"},
getTiipSalesinfo:{url:'/bianalysis/salesinfo/',method:'get',host:"default"}, getTiipSalesinfo:{url:'/bianalysis/salesinfo/',method:'get',host:"default"},
getTiipPayinfo:{url:"/bianalysis/payinfo/",method:"get",host:"default"}, getTiipPayinfo:{url:"/bianalysis/payinfo/",method:"get",host:"default"},
getTiipReceiveinfo:{url:"/bianalysis/receiveinfo/",method:"get",host:"default"},
getTiipReceive:{url:"/bianalysis/receivemoney/",method:"get",host:"default"}, getTiipReceive:{url:"/bianalysis/receivemoney/",method:"get",host:"default"},
getTiipCost:{url:"/bianalysis/costanalysis/",method:"get",host:"default"}, getTiipCost:{url:"/bianalysis/costanalysis/",method:"get",host:"default"},
......
src/libs/util.js
View file @ 6854e9e3
...@@ -383,6 +383,112 @@ util.getDate = (type) => { ...@@ -383,6 +383,112 @@ util.getDate = (type) => {
break; break;
} }
} }
//自动生成颜色
util.Colors=function(hslLength){
this.hslLength = hslLength?hslLength:1;
this.cArray = [ "0","1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
this.hslArray = [];
};
//返回颜色数组
util.Colors.prototype.rgbArray=function() {
var self = this;
this.hslArray = this.getHslArray();
if(!self.hslArray.length) return [];
var rgbArray = self.hslArray.map(function(item) {
return self.hslToRgb.apply(this, item);
});
return rgbArray.map(function(item) {
return {
//三原色值
value: item,
//16进制的颜色
hex: self.rgbToHexadecimal(item),
//rgb颜色
rgb: item.toString(),
}
});
};
/**
* RGB颜色转为16进制
* @param {Object} item rgb颜色数组
*/
util.Colors.prototype.rgbToHexadecimal = function(item) {
if(item && item.length == 3){
var a = item[0], b = item[1], c = item[2], d="#", cArray = this.cArray;
d += cArray[Math.floor(a/16)] + "" + cArray[a%16] + "";
d += cArray[Math.floor(b/16)] + "" + cArray[b%16] + "";
d += cArray[Math.floor(c/16)] + "" + cArray[c%16] + "";
return d;
}
};
/**
* HSL颜色值转换为RGB
* H，S，L 设定在 [0, 1] 之间
* R，G，B 返回在 [0, 255] 之间
*
* @param H 色相
* @param S 饱和度
* @param L 亮度
* @returns Array RGB色值
*/
util.Colors.prototype.hslToRgb = function(H, S, L) {
var R, G, B;
if(+S === 0) {
R = G = B = L; // 饱和度为0 为灰色
} else {
var hue2Rgb = function(p, q, t) {
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1 / 6) return p + (q - p) * 6 * t;
if(t < 1 / 2) return q;
if(t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
var Q = L < 0.5 ? L * (1 + S) : L + S - L * S;
var P = 2 * L - Q;
R = hue2Rgb(P, Q, H + 1 / 3);
G = hue2Rgb(P, Q, H);
B = hue2Rgb(P, Q, H - 1 / 3);
}
return [Math.round(R * 255), Math.round(G * 255), Math.round(B * 255)];
};
// 获取随机HSL
util.Colors.prototype.randomHsl = function() {
var H = Math.random();
var S = Math.random();
var L = Math.random();
return [H, S, L];
},
// 获取HSL数组
util.Colors.prototype.getHslArray= function() {
var HSL = [];
var hslLength = this.hslLength ? this.hslLength : 1;
for(var i = 0; i < hslLength; i++) {
var ret = this.randomHsl();
// 颜色相邻颜色差异须大于 0.25
if(i > 0 && Math.abs(ret[0] - HSL[i - 1][0]) < 0.25) {
i--;
continue; // 重新获取随机色
}
ret[1] = 0.7 + (ret[1] * 0.2); // [0.7 - 0.9] 排除过灰颜色
ret[2] = 0.4 + (ret[2] * 0.3); // [0.4 - 0.8] 排除过亮过暗色
// 数据转化到小数点后两位
ret = ret.map(function(item) {
return parseFloat(item.toFixed(2));
});
HSL.push(ret);
}
return HSL;
};
// util.pageReturn = function(){ // util.pageReturn = function(){
// /*微信自带返回按钮，不刷新，刷新页面start*/ // /*微信自带返回按钮，不刷新，刷新页面start*/
// if (util.isIos()) { // if (util.isIos()) {
......
src/view/tiip/IntReportForms/Repayment.vue
View file @ 6854e9e3
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
} }
>tr{ >tr{
>td{ >td{
padding:5px 2px; padding:5px 3px;
} }
>td:not(:first-child){ >td:not(:first-child){
border-left:1px solid #ddd; border-left:1px solid #ddd;
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
border-bottom:1px solid #ddd; border-bottom:1px solid #ddd;
} }
} }
>tr:nth-child(2n)>td{ background:#00C4FF;color:#fff; } // >tr:nth-child(2n)>td{ background:#00C4FF;color:#fff; }
} }
} }
</style> </style>
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
</div> </div>
<table class="DATA"> <table class="DATA">
<tr> <tr>
<td>#</td> <td>序号</td>
<td>回款目标</td> <td>回款目标</td>
<td>回款金额</td> <td>回款金额</td>
<td>客户</td> <td>客户</td>
...@@ -161,9 +161,6 @@ export default { ...@@ -161,9 +161,6 @@ export default {
}) })
}, },
methods:{ methods:{
renderChart(){
},
number(val){ number(val){
return (Math.round((val||0)*100)/100).toLocaleString() return (Math.round((val||0)*100)/100).toLocaleString()
}, },
...@@ -177,10 +174,16 @@ export default { ...@@ -177,10 +174,16 @@ export default {
value.set1[0]&&(this.value1=value.set1[0]) value.set1[0]&&(this.value1=value.set1[0])
this.value2=value.set2||[] this.value2=value.set2||[]
this.value3=value.set3||[] this.value3=value.set3||[]
var isOver=false var isOver=0
this.value2.forEach(v=>{ this.value2.forEach(v=>{
if(v["回款金额"]>10000||v["回款目标"]>10000||v["回款金额"]<-10000||v["回款目标"]<-10000){ if(Math.abs(v["回款金额"])>10000||Math.abs(v["回款目标"])>10000){
isOver=true isOver=isOver<=1?1:isOver
}
if(Math.abs(v["回款金额"])>100000||Math.abs(v["回款目标"])>100000){
isOver=isOver<=2?2:isOver
}
if(Math.abs(v["回款金额"])>1000000||Math.abs(v["回款目标"])>1000000){
isOver=3
} }
}) })
...@@ -196,10 +199,10 @@ export default { ...@@ -196,10 +199,10 @@ export default {
yAxis :{ yAxis :{
type : 'value', type : 'value',
boundaryGap: [0, 0.01], boundaryGap: [0, 0.01],
name:isOver?'(万元)':'', name:isOver?`(${String(isOver).replace('2','十').replace('3','百')}万元)`:'',
axisLabel:{ axisLabel:{
formatter(v){ formatter(v){
return isOver?Math.round(v/100)/100:v; return isOver?Math.round(v/(isOver==1?100:(isOver==2?1000:10000)))/100:v;
} }
}, },
}, },
...@@ -207,11 +210,17 @@ export default { ...@@ -207,11 +210,17 @@ export default {
name:'回款金额', name:'回款金额',
type:'bar', type:'bar',
data:this.value2.map(v=>v["回款金额"]), data:this.value2.map(v=>v["回款金额"]),
itemStyle:{
color:"#1F12F7"
}
}, },
{ {
name:'回款目标', name:'回款目标',
type:'bar', type:'bar',
data:this.value2.map(v=>v["回款目标"]), data:this.value2.map(v=>v["回款目标"]),
itemStyle:{
color:"#3BA5EF"
}
} ] } ]
},this.option)) },this.option))
}, },
......
src/view/tiip/IntReportForms/cost.vue
View file @ 6854e9e3
...@@ -7,6 +7,16 @@ ...@@ -7,6 +7,16 @@
color:#fff; color:#fff;
text-align: center; text-align: center;
} }
.iCard{
position:relative;
}
.noData{
position:absolute;
top:40px;
>img{
width:100%;
}
}
} }
</style> </style>
<template> <template>
...@@ -14,7 +24,7 @@ ...@@ -14,7 +24,7 @@
<searchComponent :search="search" /> <searchComponent :search="search" />
<div class="iCard"> <div class="iCard">
<div class="head">当月总费用进度情况(万)</div> <div class="head">当月总费用进度情况(万)</div>
<div ref="chart1" :style="{height:'240px',opacity:value1.length>0?1:0}"/> <div ref="chart1" :style="{height:'220px',opacity:value1.length>0?1:0}"/>
<div class="noData" v-if="value1.length <= 0"> <div class="noData" v-if="value1.length <= 0">
<img src="@/assets/noData.jpg"> <img src="@/assets/noData.jpg">
</div> </div>
...@@ -86,24 +96,130 @@ export default { ...@@ -86,24 +96,130 @@ export default {
this.value2=value.set2||[] this.value2=value.set2||[]
this.value3=value.set3||[] this.value3=value.set3||[]
this.drawBar(this.chart1,this.value1.map(v=>{ this.value1.length>0&&this.drawBar(this.chart1,this.value1.map(v=>{
return{ return{
name:v.sChargeTypeName, name:v.sChargeTypeName,
value:v.nAmount value:v.nAmount
} }
})) }))
this.drawLing(this.chart2,this.value2.map(v=>{ this.value2.length>0&&this.drawLing(this.chart2,this.value2,Object.keys(this.value2[0]).filter(v=>v!="nMonth"))
// return{ this.value3.length>0&&this.drawLing(this.chart3,this.value3,Object.keys(this.value3[0]).filter(v=>v!="nMonth"))
// name:v.
// }
}))
this.drawLing()
}, },
drawLing(chart,data){ drawLing(chart,data,title){
chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#111'
}
}
},
legend: {
data:title,
x: 'left'
},
grid:{
left: '2%', // 与容器左侧的距离
right: '2%', // 与容器右侧的距离
top:30,
height:200,
containLabel: true
},
xAxis:[{
type:"category",
data:data.map(v=>v.nMonth),
axisPointer: {
type: 'shadow'
},
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval:0
},
}],
yAxis:{
type:"value"
},
series:title.map(v1=>{
return{
name:v1,
type:"line",
data:data.map(v2=>v2[v1])
}
}),
dataZoom: [{
type: 'inside',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
start: 0,//滚动条的起始位置
end: (window.innerWidth*1.35)/data.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}],
})
}, },
drawBar(chart,data){ drawBar(chart,data){
chart.setOption({
tooltip:{
trigger:"axis",
axisPointer:{
type:"cross",
crossStyle:{
color:"#111"
}
}
},
grid: {
left: '2%', // 与容器左侧的距离
right: '2%', // 与容器右侧的距离
top:10,
height:200,
containLabel: true
},
xAxis: {
type: 'category',
data: data.map(v=>v.name),
axisPointer: {
type: 'shadow'
},
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval:0
},
},
yAxis:{
type:"value",
axisLine:{
lineStyle:{
color:'#5CADFF',
}
}
},
series:{
type:"bar",
data:data.map(v=>v.value),
barWidth:32,
color:new this.$echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [{
offset: 0,
color: '#708bf6'
}, {
offset: 1,
color: '#00B2EE'
}])
},
dataZoom: [{
type: 'inside',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
start: 0,//滚动条的起始位置
end: (window.innerWidth*1.35)/data.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}],
})
}, },
}, },
......
src/view/tiip/IntReportForms/empAna.vue
View file @ 6854e9e3
...@@ -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-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; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></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>
...@@ -164,38 +164,42 @@ export default { ...@@ -164,38 +164,42 @@ export default {
} }
}, },
async getData(){ async getData(){
var res=await this.request("getTipSalesinfo",{ var res=await this.request("getTiipSalesinfo",{
data:{ data:{
dStartDate:this.search.dBeginDate, dStartDate:this.search.dBeginDate,
dEndDate:this.search.dEndDate, dEndDate:this.search.dEndDate,
sSalesName:"环思软件",
} }
},"加载中",{}) },"加载中",{})
this.title=res.set1&&res.set1[0]&&res.set1[0].sSalesName if(res.set1.length>0){
this.chartData1=res.set1&&res.set1.map(v=>{ this.title=res.set1[0].sSalesName
return{ this.chartData1=res.set1.map(v=>{
sSalesName:v.sSalesName, return{
nAmount:v.nAmount, sSalesName:v.sSalesName,
iSalesId:v.sSalesName, nAmount:v.nAmount,
} iSalesId:v.sSalesName,
})||[] }
})
this.tempChartData2 = res.set2&&res.set2.map(v=>{ }
return{ if(res.set2.length>0){
nPaydAmount:v.nPaydAmount, this.tempChartData2 = res.set2.map(v=>{
sMonth:v.sMonth, return{
iSalesId:v.sSalesName, nPaydAmount:v.nPaydAmount,
} sMonth:v.sMonth,
})||[]; iSalesId:v.sSalesName,
this.tempChartData3 = res.set3&&res.set3.map(v=>{ }
return{ })
iSalesId:v.sSalesName, this.chartData2=this.tempChartData2.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId)
sMonth:v.sMonth, }
nAmount:v.nAmount, if(res.set3.length>0){
} this.tempChartData3 = res.set3.map(v=>{
})||[]; return{
this.chartData2=res.set2&&res.set2.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId)||[] iSalesId:v.sSalesName,
this.chartData3=res.set3&&res.set3.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId)||[] sMonth:v.sMonth,
nAmount:v.nAmount,
}
})
this.chartData3=this.tempChartData3.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId)
}
}, },
}, },
} }
......
src/view/tiip/IntReportForms/index.vue
View file @ 6854e9e3
...@@ -171,7 +171,7 @@ export default { ...@@ -171,7 +171,7 @@ export default {
}, },
methods:{ methods:{
async init(){ async init(){
var res=await this.request("getTipTotalamount",{},"加载中",{}) var res=await this.request("getTiipTotalamount",{},"加载中",{})
this.list=[ this.list=[
{ {
child:[ child:[
......
src/view/tiip/IntReportForms/revenue.vue
View file @ 6854e9e3
<style lang="less"> <style lang="less">
@import url("../../../styles/common.less"); @import url("../../../styles/common.less");
#revenue{
.DATA{
width:100%;
>tr{
>td{
padding:8px 4px;
&:first-child{
width:50px;
&>div>span{
background: rgb(146, 190, 7);
box-shadow: 2px 2px 3px rgba(146, 190, 7,0.3);
color: #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0 5px;
font-size: 17px;
}
}
&:last-child{
text-align: right;
}
}
&:not(:first-child)>td{
border-bottom:1px solid #ddd;
&:first-child>div>span{
width:20px;
height:20px;
font-size:10px;
background:rgb(var(--color,'245, 104, 96'));
box-shadow: 2px 2px 3px rgba(var(--color,'245, 104, 96'),0.3);
}
&:nth-child(n+3){
color:#777;
}
}
&.active{
background:#f2f2f2;
}
}
}
}
</style> </style>
<template> <template>
<div id="revenue"> <div id="revenue">
<tab active-color="#708BF6">
<tab-item :selected="tabIndex=='getTiipReceiveinfo'" @on-item-click="tabIndex='getTiipReceiveinfo'">收入</tab-item>
<tab-item :selected="tabIndex=='getTiipPayinfo'" @on-item-click="tabIndex='getTiipPayinfo'">支出</tab-item>
</tab>
<searchComponent :search='search' /> <searchComponent :search='search' />
<div class="iCard"> <div class="iCard" style="margin-bottom:8px;">
<div ref='chart' style="width:100%;height:150px;"/> <div ref='chart' style="width:100%;height:150px;"/>
<table> <table class="DATA">
<tr> <tr>
<td><div> <span>支</span> </div></td> <td><div> <span>支</span> </div></td>
<td><div> <span>总支出</span> </div></td> <td><div> <span>总支出</span> </div></td>
<td><div></div></td> <td><div></div></td>
<td><div> <span>{{allPay}}</span> </div></td> <td><div> <span>{{allPay.toLocaleString()}}</span> </div></td>
</tr>
<tr v-for="(v,k) in list" :key="k" @click="select(k)" :class="{active:selectIndex==k}">
<td><div> <span :style="{'--color':colorList[k].rgb}">{{v.name.slice(0,1)}}</span> </div></td>
<td><div> <span>{{v.name}}</span> </div></td>
<td><div> <span>{{v.percent}}%</span> </div></td>
<td><div> <span>{{v.value.toLocaleString()}}</span> </div></td>
</tr> </tr>
</table> </table>
</div> </div>
...@@ -22,13 +77,14 @@ ...@@ -22,13 +77,14 @@
import Util from '@/libs/util.js' import Util from '@/libs/util.js'
import { Confirm } from 'vux' import { Confirm } from 'vux'
import searchComponent from '@/components/search' import searchComponent from '@/components/search'
import echarts from 'echarts'; import { Tab, TabItem } from 'vux'
export default { export default {
name:"revenue", name:"revenue",
components:{searchComponent}, components:{searchComponent,Tab,TabItem},
data(){ data(){
return{ return{
tabIndex:"getTiipReceiveinfo",
search:{ search:{
dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'), dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'), dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
...@@ -36,12 +92,14 @@ export default { ...@@ -36,12 +92,14 @@ export default {
chart:null, chart:null,
list:[], list:[],
colorList:[],
allPay:0, allPay:0,
selectIndex:-1,
} }
}, },
mounted(){ mounted(){
this.$nextTick(()=>{ this.$nextTick(()=>{
this.chart=this.$echarts.init(this.$refs.chart) this.init()
this.searchData() this.searchData()
}) })
...@@ -51,17 +109,109 @@ export default { ...@@ -51,17 +109,109 @@ export default {
}) })
}, },
methods:{ methods:{
init(){
this.chart=this.$echarts.init(this.$refs.chart)
this.chart.getZr().on("click",v=>{
if(v.target){
this.select(v.target.dataIndex)
}else{
this.select(-1)
}
})
},
async searchData(){ async searchData(){
this.list=await this.request("getTipPayinfo",{ var value=await this.request(this.tabIndex,{
data:{ data:{
dStartDate:this.search.dBeginDate, dStartDate:this.search.dBeginDate,
dEndDate:this.search.dEndDate dEndDate:this.search.dEndDate
} }
},"加载中",{}) },"加载中",{})
if(this.tabIndex=="getTiipReceiveinfo"){
this.list=value.set1.filter(v=>v.nAmount!=0&&v.sReceivableType).map(v=>{
return{
name:v.sReceivableType,
value:v.nAmount,
}
})
}else{
this.list=value.set1.filter(v=>v.nAmount!=0&&v.sPayableType).map(v=>{
return{
name:v.sPayableType,
value:v.nAmount,
}
})
}
this.colorList=new Util.Colors(this.list.length).rgbArray()
this.allPay=0 this.allPay=0
// this.list.forEach(v=>{ this.list.forEach(v=> this.allPay+=v.value )
// this.allPay+=v.nAmount this.allPay=Math.round(this.allPay*100)/100
// }) this.list.forEach(v=>{
v.percent=Math.round(v.value/this.allPay*10000)/100
})
this.chart.setOption({
tooltip:{
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)",
position:[10,10],
},
color:this.colorList.map(v=>v.hex),
series:[
{
name:'访问来源',
type:'pie',
radius: ['60%', '80%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center',
formatter(v){
return v.name+"\n"+v.value+"\n("+v.percent+"%)";
},
},
emphasis: {
show: true,
textStyle: {
fontSize: '10',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
}
},
data: this.list.map(v=>{
return{
name:v.name,
value:v.value
}
}),
}
],
})
},
select(index){
this.selectIndex=index
this.list.forEach((v,i)=>{
this.chart.dispatchAction({
type:"downplay",
seriesIndex:i
})
})
if(index>=0){
this.chart.dispatchAction({
type:"highlight",
dataIndex:index
})
}
},
},
watch:{
tabIndex(){
this.searchData()
}, },
}, },
} }
......
src/view/tiip/IntReportForms/salesStatistics.vue
View file @ 6854e9e3
...@@ -167,8 +167,9 @@ export default { ...@@ -167,8 +167,9 @@ export default {
this.resize(this.chart6,1.35) this.resize(this.chart6,1.35)
}) })
}) })
this.$nextTick(()=>{
this.searchData(); this.searchData();
})
this.global.$off('searchData'); this.global.$off('searchData');
this.global.$on('searchData',()=>{ this.global.$on('searchData',()=>{
...@@ -229,12 +230,12 @@ export default { ...@@ -229,12 +230,12 @@ export default {
this.showValue() this.showValue()
}, },
async getChartData(){ async getChartData(){
var value =await this.request('getTipSellinfo',{ var value =await this.request('getTiipSellinfo',{
params:{ params:{
dStartDate:this.search.dBeginDate, dStartDate:this.search.dBeginDate,
dEndDate:this.search.dEndDate dEndDate:this.search.dEndDate
} }
},true,{iProjectId:this.iProjectId}) },"加载中",{iProjectId:this.iProjectId})
Object.assign(this.chartData,{ Object.assign(this.chartData,{
nOrderSameRatio:Math.round((value.set1&&value.set1[0]&&value.set1[0].nOrderSameRatio||0)*100)/100, nOrderSameRatio:Math.round((value.set1&&value.set1[0]&&value.set1[0].nOrderSameRatio||0)*100)/100,
nOrderRingRatio:Math.round((value.set2&&value.set2[0]&&value.set2[0].nOrderRingRatio||0)*100)/100, nOrderRingRatio:Math.round((value.set2&&value.set2[0]&&value.set2[0].nOrderRingRatio||0)*100)/100,
...@@ -246,8 +247,18 @@ export default { ...@@ -246,8 +247,18 @@ export default {
iSellCount:value.set4&&value.set4[0]&&value.set4[0].iSellCount||0, iSellCount:value.set4&&value.set4[0]&&value.set4[0].iSellCount||0,
nSellAmount:(Math.round((value.set4&&value.set4[0]&&value.set4[0].nSellAmount||0)/100)/100).toLocaleString(), nSellAmount:(Math.round((value.set4&&value.set4[0]&&value.set4[0].nSellAmount||0)/100)/100).toLocaleString(),
}, },
set5:typeof value.set5=='object'&&value.set5.length>0&&value.set5||[], set5:typeof value.set5=='object'&&value.set5.length>0&&value.set5.map(v=>{
set6:typeof value.set6=='object'&&value.set6.length>0&&value.set6||[], return{
name:v.sCustomerName,
value:v.nAmount
}
})||[],
set6:typeof value.set6=='object'&&value.set6.length>0&&value.set6.map(v=>{
return{
name:v.sSampleMaterialNo,
value:v.nAmount
}
})||[],
}) })
}, },
...@@ -399,27 +410,28 @@ export default { ...@@ -399,27 +410,28 @@ export default {
} }
} }
}, },
toolbox: { // toolbox: {
feature: { // feature: {
// dataView: {show: true, readOnly: false}, // // dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['line', 'bar']}, // // magicType: {show: true, type: ['line', 'bar']},
restore: {show: true}, // restore: {show: true},
// saveAsImage: {show: true} // // saveAsImage: {show: true}
}, // },
}, // },
grid: { grid: {
left: '2%', // 与容器左侧的距离 left: '2%', // 与容器左侧的距离
right: '2%', // 与容器右侧的距离 right: '2%', // 与容器右侧的距离
height:160, top:"40",
height:180,
containLabel: true containLabel: true
}, },
legend: { // legend: {
data:['金额','数量'], // data:['金额','数量'],
x: 'left' // x: 'left'
}, // },
xAxis: [{ xAxis: [{
type: 'category', type: 'category',
data: data.value.map(v=>v.sCustomerName), data: data.value.map(v=>v.name),
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
}, },
...@@ -427,7 +439,8 @@ export default { ...@@ -427,7 +439,8 @@ export default {
alignWithLabel: true alignWithLabel: true
}, },
axisLabel: { axisLabel: {
interval:0 interval:0,
rotate:-15,
}, },
}], }],
yAxis: [ yAxis: [
...@@ -444,20 +457,20 @@ export default { ...@@ -444,20 +457,20 @@ export default {
} }
} }
}, },
{ // {
type: 'value', // type: 'value',
name: '数量', // name: '数量',
scale:true, // scale:true,
axisLabel: { // axisLabel: {
formatter: '{value}' // formatter: '{value}'
} // }
} // }
], ],
series: [ series: [
{ {
name:'金额', name:'金额',
type:'bar', type:'bar',
data:data.value.map(v=>v.nAmount), data:data.value.map(v=>v.value),
barWidth:32, barWidth:32,
color:new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [{ color:new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [{
offset: 0, offset: 0,
...@@ -467,17 +480,17 @@ export default { ...@@ -467,17 +480,17 @@ export default {
color: '#00B2EE' color: '#00B2EE'
}]) }])
}, },
{ // {
name:'数量', // name:'数量',
type:'line', // type:'line',
yAxisIndex: 1, // yAxisIndex: 1,
data:data.value.map(v=>v.nQty), // data:data.value.map(v=>v.nQty),
itemStyle:{ // itemStyle:{
normal:{ // normal:{
color:'#708bf6' // color:'#708bf6'
} // }
} // }
} // }
], ],
dataZoom: [{ dataZoom: [{
type: 'inside', type: 'inside',
......
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