Skip to content

W
WX_h5
Commit f3afc4ab authored by godwithdh's avatar godwithdh
Browse files
Options

chart

parent 205b0d1b
Hide whitespace changes
Inline Side-by-side
Showing with 314 additions and 9 deletions
src/libs/apiMap.js
View file @ f3afc4ab
...@@ -69,6 +69,8 @@ const methodMap = { ...@@ -69,6 +69,8 @@ const methodMap = {
getTtipSellinfo:{url:'/bianalysis/sellinfo/',method:'get',host:"default"}, getTtipSellinfo:{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"},
getTiipReceive:{url:"/bianalysis/receivemoney/",method:"get",host:"default"},
getTiipCost:{url:"/bianalysis/costanalysis/",method:"get",host:"default"},
}; };
export default methodMap; export default methodMap;
src/view/shopVersion/form/empAna/mixins/employees.js
View file @ f3afc4ab
...@@ -105,10 +105,10 @@ export const employees = { ...@@ -105,10 +105,10 @@ export const employees = {
setTimeout(()=>{ setTimeout(()=>{
if(that.chartData2.length > 0){ if(that.chartData2.length > 0){
that.chart2.destroy(); that.chart2&&that.chart2.destroy();
} }
if(that.chartData3.length > 0){ if(that.chartData3.length > 0){
that.chart3.destroy(); that.chart3&&that.chart3.destroy();
} }
if(that.chartData2.length > 0){ if(that.chartData2.length > 0){
that.renderChart2(); that.renderChart2();
......
src/view/tiip/IntReportForms/Repayment.vue
View file @ f3afc4ab
<style lang="less"> <style lang="less">
@import url("../../../styles/common.less");
#repayment{
.head{
display:flex;
>div{
flex-grow:1;
display: flex;
flex-direction: column;
align-items:center;
color:#fff;
>span{
margin-top:6px;
}
}
}
.noData{
position:absolute;
top:0;
height: calc(100% - 30px);
width:100%;
img{
width: 100%;
height: 100%;
}
}
.DATA{
width:100%;
>tr:first-child{
font-weight: bold;
text-align: center;
background:#f2f2f2;
}
>tr{
>td{
padding:5px 2px;
}
>td:not(:first-child){
border-left:1px solid #ddd;
}
&:not(:last-child)>td{
border-bottom:1px solid #ddd;
}
}
>tr:nth-child(2n)>td{ background:#00C4FF;color:#fff; }
}
}
</style> </style>
<template> <template>
<div id="repayment"> <div id="repayment">
<searchComponent :search='search' />
<div class="iCard">
<div class="head">
<div style="background:#3BA5EF">
<span>年度回款目标</span>
<span>{{number(value1["年度回款目标"])}}元</span>
</div>
<div style="background:#6480ED">
<span>年度回款金额</span>
<span>{{number(value1["年度回款金额"])}}元</span>
</div>
<div style="background:#3BA5EF">
<span>年度完成比</span>
<span>{{parent}}%</span>
</div>
</div>
<div class="content" style="position:relative;">
<div ref="chart" :style='{width:"100%",height:"240px",overflow:"hidden"}' />
<div class="noData" v-if="value2.length <= 0">
<img src="@/assets/noData.jpg" alt="">
</div>
</div>
</div>
<div class="iCard" style="margin-bottom:8px;">
<div style="color: #fff;background: #009BDE;padding: 10px;display: flex;justify-content: space-between;">
<span>{{new Date().getFullYear()}}年各客户回款达成率</span>
<span>单位:(万元)</span>
</div>
<table class="DATA">
<tr>
<td>#</td>
<td>回款目标</td>
<td>回款金额</td>
<td>客户</td>
</tr>
<tr v-for="(v,k) in value3" :key="k">
<td>{{v.iIden}}</td>
<td>{{v['回款目标']}}</td>
<td>{{v["回款金额"]}}</td>
<td>{{v["客户"]}}</td>
</tr>
</table>
</div>
</div> </div>
</template> </template>
<script> <script>
import Util from '@/libs/util.js'
import { Confirm } from 'vux'
import searchComponent from '@/components/search'
import { setTimeout } from 'timers';
export default { export default {
name:"repayment", name:"repayment",
components:{searchComponent},
data(){ data(){
return{ return{
search:{
dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
},
value1:{},
value2:[],
option:{
dataZoom: {
type: 'inside',
xAxisIndex: 0,
filterMode: 'empty'
},
tooltip:{
trigger: 'axis'
},
legend: {
data:['回款金额','回款目标'],
right:0,
},
grid:{
top:"13%",
left:"10",
bottom:"10",
right:10,
containLabel: true,
},
calculable : true,
},
chart:null,
value3:[],
} }
}, },
mounted(){
window.req=this
window.addEventListener("resize",()=>{
setTimeout(async ()=>{
if(this.value2.length>0){
this.chart.resize()
}
})
})
this.$nextTick(async ()=>{
this.chart=this.$echarts.init(this.$refs.chart)
await this.searchData()
})
this.global.$off('searchData');
this.global.$on('searchData',async ()=>{
this.value2=[]
this.value3=[]
await this.searchData()
})
},
methods:{
renderChart(){
},
number(val){
return (Math.round((val||0)*100)/100).toLocaleString()
},
async searchData(){
var value=await this.request("getTiipReceive",{
data:{
dStartDate:this.search.dBeginDate,
dEndDate:this.search.dEndDate
}
},"加载中",{})
value.set1[0]&&(this.value1=value.set1[0])
this.value2=value.set2||[]
this.value3=value.set3||[]
var isOver=false
this.value2.forEach(v=>{
if(v["回款金额"]>10000||v["回款目标"]>10000||v["回款金额"]<-10000||v["回款目标"]<-10000){
isOver=true
}
})
this.chart.setOption(Object.assign({
xAxis:{
type:'category',
data:this.value2.map((v,i)=>v["销售员"]),
axisLabel:{
interval:0,
rotate:-15,
},
},
yAxis :{
type : 'value',
boundaryGap: [0, 0.01],
name:isOver?'(万元)':'',
axisLabel:{
formatter(v){
return isOver?Math.round(v/100)/100:v;
}
},
},
series:[ {
name:'回款金额',
type:'bar',
data:this.value2.map(v=>v["回款金额"]),
},
{
name:'回款目标',
type:'bar',
data:this.value2.map(v=>v["回款目标"]),
} ]
},this.option))
},
},
computed:{
parent(){
return Math.round(this.value1["年度完成比"]*100)/100
},
},
} }
</script> </script>
src/view/tiip/IntReportForms/cost.vue
View file @ f3afc4ab
<style lang="less"> <style lang="less">
@import url("../../../styles/common.less");
#cost{
.head{
padding:7px 0;
background:#0099FF;
color:#fff;
text-align: center;
}
}
</style> </style>
<template> <template>
<div id="cost"> <div id="cost">
<searchComponent :search="search" />
<div class="iCard">
<div class="head">当月总费用进度情况(万)</div>
<div ref="chart1" :style="{height:'240px',opacity:value1.length>0?1:0}"/>
<div class="noData" v-if="value1.length <= 0">
<img src="@/assets/noData.jpg">
</div>
</div>
<div class="iCard">
<div class="head">当月费用明细分析(万)</div>
<div ref="chart2" :style="{height:'240px',opacity:value2.length>0?1:0}"/>
<div class="noData" v-if="value2.length <= 0">
<img src="@/assets/noData.jpg">
</div>
</div>
<div class="iCard">
<div class="head">个人费用分析(万)</div>
<div ref="chart3" :style="{height:'240px',opacity:value3.length>0?1:0}"/>
<div class="noData" v-if="value3.length <= 0">
<img src="@/assets/noData.jpg">
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import Util from '@/libs/util.js'
import searchComponent from '@/components/search'
export default { export default {
name:"cost", name:"cost",
components:{searchComponent},
data(){ data(){
return{ return{
search:{
dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
},
value1:[],
chart1:null,
value2:[],
chart2:null,
value3:[],
chart3:null,
} }
}, },
mounted(){
this.$nextTick(()=>{
this.chart1=this.$echarts.init(this.$refs.chart1)
this.chart2=this.$echarts.init(this.$refs.chart2)
this.chart3=this.$echarts.init(this.$refs.chart3)
this.searchData()
})
this.global.$off('searchData');
this.global.$on('searchData',async ()=>{
this.value2=[]
this.value3=[]
await this.searchData()
})
},
methods:{
async searchData(){
var value=await this.request("getTiipCost",{
data:{
dStartDate:this.search.dBeginDate,
dEndDate:this.search.dEndDate,
}
},"加载中",{})
this.value1=value.set1||[]
this.value2=value.set2||[]
this.value3=value.set3||[]
this.drawBar(this.chart1,this.value1.map(v=>{
return{
name:v.sChargeTypeName,
value:v.nAmount
}
}))
this.drawLing(this.chart2,this.value2.map(v=>{
// return{
// name:v.
// }
}))
this.drawLing()
},
drawLing(chart,data){
},
drawBar(chart,data){
},
},
} }
</script> </script>
src/view/tiip/IntReportForms/empAna.vue
View file @ f3afc4ab
...@@ -82,6 +82,7 @@ export default { ...@@ -82,6 +82,7 @@ export default {
} }
}, },
async mounted(){ async mounted(){
window.em=this
window.addEventListener("resize",()=>{ window.addEventListener("resize",()=>{
setTimeout(async ()=>{ setTimeout(async ()=>{
this.renderResize(); this.renderResize();
......
src/view/tiip/IntReportForms/index.vue
View file @ f3afc4ab
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
<button-tab-item @on-item-click="situation='salesStatistics'">销售统计</button-tab-item> <button-tab-item @on-item-click="situation='salesStatistics'">销售统计</button-tab-item>
<button-tab-item @on-item-click="situation='empAna'">员工排行</button-tab-item> <button-tab-item @on-item-click="situation='empAna'">员工排行</button-tab-item>
<button-tab-item @on-item-click="situation='revenue'">收支分析</button-tab-item> <button-tab-item @on-item-click="situation='revenue'">收支分析</button-tab-item>
<button-tab-item @on-item-click="situation='Repayment'">回款额</button-tab-item> <button-tab-item @on-item-click="situation='repayment'">回款额</button-tab-item>
<button-tab-item @on-item-click="situation='cost'">费用分析</button-tab-item> <button-tab-item @on-item-click="situation='cost'">费用分析</button-tab-item>
</button-tab> </button-tab>
</div> </div>
...@@ -146,9 +146,11 @@ import {Swiper,SwiperItem,ButtonTab, ButtonTabItem } from 'vux'; ...@@ -146,9 +146,11 @@ import {Swiper,SwiperItem,ButtonTab, ButtonTabItem } from 'vux';
import salesStatistics from "./salesStatistics" import salesStatistics from "./salesStatistics"
import empAna from "./empAna" import empAna from "./empAna"
import revenue from "./revenue" import revenue from "./revenue"
import repayment from "./repayment"
import cost from "./cost"
export default { export default {
name:"IntReportForms", name:"IntReportForms",
components:{Swiper,SwiperItem,ButtonTab, ButtonTabItem,salesStatistics,empAna,revenue}, components:{Swiper,SwiperItem,ButtonTab, ButtonTabItem,salesStatistics,empAna,revenue,repayment,cost},
data(){ data(){
return{ return{
list:[], list:[],
......
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