Skip to content

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

chart

parent da63f31a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 963 additions and 31 deletions
src/components/search.vue
View file @ e6b1eeaf
......@@ -15,20 +15,21 @@
<div class="Content">
<div class="Title">时间纬度</div>
<div class="padding-left-15 btns">
<button @click="changeDate(index)" v-for="(item,index) in btns" :key="index" :class="index == active ? 'active' : ''">
{{item}}
<button @click="changeDate(v)" v-for="(v,i) in btns" :key="i" :class="{active:v == selectDate}">
{{v}}
</button>
</div>
</div>
<div class="Content" >
<div class="Title">日期范围</div>
<div style="flex:1;display:flex;">
<div class="padding-left-15 dateTime" style="flex:1;justify-content:flex-end;align-items:center;display:flex;">
<datetime v-model="search.dBeginDate" format="YYYY-MM-DD" @on-change="searchData($event,1)"></datetime>
<div style="flex:1;display:flex;" class="DATE">
<div class="padding-left-15 dateTime">
<datetime v-model="search.dBeginDate" format="YYYY-MM-DD" @on-confirm="searchData($event,1)"></datetime>
<!-- <i class='iconfont icon-right'></i> -->
</div>
<div class="padding-right-15 dateTime" style="flex:1;justify-content:flex-end;align-items:center;display:flex;">
<datetime :start-date="search.dBeginDate" v-model="search.dEndDate" format="YYYY-MM-DD" @on-change="searchData($event,2)"></datetime>
<span class="line"/>
<div class="padding-right-15 dateTime">
<datetime :start-date="search.dBeginDate" v-model="search.dEndDate" format="YYYY-MM-DD" @on-confirm="searchData($event,2)"></datetime>
<!-- <i class='iconfont icon-right'></i> -->
</div>
</div>
......@@ -47,7 +48,7 @@ export default {
data () {
return {
btns:['本日','本周','本月','本年'],
active:2,
selectDate:"本月",
inputValue:'',
selectValue:'全部'
}
......@@ -104,10 +105,11 @@ export default {
}
this.global.$emit('searchData');
},
changeDate(index){
this.active = index;
this.search.dEndDate = Util.dateFormat(new Date(),'yyyy-MM-dd');
this.search.dBeginDate = Util.getDate(this.btns[index]);
changeDate(name){
this.selectDate = name;
this.search.dEndDate = Util.dateFormat(new Date(),'yyyy-MM-dd');
this.search.dBeginDate = Util.getDate(name);
this.global.$emit('searchData');
},
changeSelect(e){
this.selectValue = this.status[e.target.selectedIndex].sStatus;
......@@ -125,7 +127,7 @@ export default {
}
},
mounted(){
window.d = this;
window.DATA = this;
},
components: {
Search,
......@@ -151,6 +153,17 @@ export default {
.Title{
width:50px;text-align:center;font-size:12px;
}
>.DATE{
justify-content: space-around;
>.line{
width: 20px;
margin:0 -50px;
background: #03f315;
height: 4px;
align-self: center;
border-radius: 50px;
}
}
}
.gradient{
background: linear-gradient(90deg,#8470FF, #2d8cf0, #00B2EE)
......
src/libs/apiMap.js
View file @ e6b1eeaf
......@@ -65,7 +65,10 @@ const methodMap = {
/**
* tiip 小程序
*/
getTtipTotalamount:{url:apiURL('default')+'/bianalysis/totalamount/',method:'get'},
getTtipTotalamount:{url:'/bianalysis/totalamount/',method:'get',host:"default"},
getTtipSellinfo:{url:'/bianalysis/sellinfo/',method:'get',host:"default"},
getTiipSalesinfo:{url:'/bianalysis/salesinfo/',method:'get',host:"default"},
getTiipPayinfo:{url:"/bianalysis/payinfo/",method:"get",host:"default"},
};
export default methodMap;
src/libs/axios.js
View file @ e6b1eeaf
......@@ -41,7 +41,7 @@ AsInst.interceptors.response.use(response => {
// }
return response;
}, (error) => {
if(error.response.data.hasOwnProperty('error_data')){
if(error.response.data&&error.response.data.hasOwnProperty('error_data')){
vm.$vux.confirm.show({
title:"提示",
content:error.response.data.error_title,
......
src/libs/http.js
View file @ e6b1eeaf
......@@ -69,16 +69,16 @@ Http.install = function (Vue) {
}).catch((error) => {
if (error.status === 200) {
if (!error.data) {
console.log('Customize Notice', error);
console.log('Customize Notice post_1', error);
} else if (error.data && error.data.code == '0') {
resolve(error.data)
console.log('Customize Notice', error);
console.log('Customize Notice post_2', error);
}
} else if (error.status === 500) {
resolve(response.data);
console.log('Customize Notice', error);
console.log('Customize Notice post_3', error);
} else {
console.log('Customize Notice', error);
console.log('Customize Notice post_4', error);
}
closeLoading();
reject(error);
......@@ -109,13 +109,13 @@ Http.install = function (Vue) {
}).catch((error) => {
if (error.status === 200) {
if (!error.data) {
console.log('Customize Notice', error);
console.log('Customize Notice get_1', error);
}
} else if (error.status === 500) {
resolve(response.data);
console.log('Customize Notice', error);
console.log('Customize Notice get_2', error);
} else {
console.log('Customize Notice', error);
console.log('Customize Notice get_3', error);
}
closeLoading();
reject(error);
......
src/router/index.js
View file @ e6b1eeaf
......@@ -284,7 +284,7 @@ let tipRoutes = [
path:"/main",
children:[
{
path:"/tiip/IntReportForms/:iProjectId/:userId",
path:"/tiip/IntReportForms/:userId",
name:"IntReportForms",
component:()=>import("@/view/tiip/IntReportForms/index.vue"),
meta:{
......
src/view/shopVersion/form/empAna/index.vue
View file @ e6b1eeaf
......@@ -101,7 +101,6 @@ export default {
})
},
async mounted(){
window.d = this;
this.$store.dispatch('saveUserId',this.$route.params.userId);
window.addEventListener("resize",()=>{
setTimeout(async ()=>{
......
src/view/tiip/IntReportForms/Repayment.vue 0 → 100644
View file @ e6b1eeaf
<style lang="less">
</style>
<template>
<div id="repayment">
</div>
</template>
<script>
export default {
name:"repayment",
data(){
return{
}
},
}
</script>
src/view/tiip/IntReportForms/cost.vue 0 → 100644
View file @ e6b1eeaf
<style lang="less">
</style>
<template>
<div id="cost">
</div>
</template>
<script>
export default {
name:"cost",
data(){
return{
}
},
}
</script>
src/view/tiip/IntReportForms/empAna.vue 0 → 100644
View file @ e6b1eeaf
<style lang="less">
@import url("../../../styles/common.less");
#empAna{
background:#dce9fe;
>.CONTENT{
.iCard{
height:260px;
>p{
margin:0;
height:30px;
line-height: 30px;
background: linear-gradient(90deg,#708bf6, #2d8cf0, #00B2EE);
color: #fff;
text-align: center;
}
&:last-child{
margin-bottom:8px;
}
}
}
.noData{
height:calc(100% - 30px);
width:100%;
img{
width:100%;
}
}
}
</style>
<template>
<div id="empAna">
<div class="HEADER">
<searchComponent :search="search" />
</div>
<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>
<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>
<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>
<div class="noData" v-if="chartData3.length <= 0">
<img src="@/assets/noData.jpg" class="_img" alt="">
</div>
</div>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
import searchComponent from "@/components/search"
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 {
name:"empAna",
components:{searchComponent},
mixins: [employees,receivable,orderAmount],
data(){
return{
search:{
dBeginDate:Util.dateFormat(new Date(),"yyyy-MM-01"),
dEndDate:Util.dateFormat(new Date(),"yyyy-MM-dd"),
},
typeList:{time:true},
direction:'vertical',
tempChartData2:[],
tempChartData3:[],
title:"",
}
},
async mounted(){
window.addEventListener("resize",()=>{
setTimeout(async ()=>{
this.renderResize();
if(this.chartData1.length>0){
this.chart1.changeSize(this.$refs['chart1'].offsetWidth);
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();
}
})
})
this.$nextTick(async ()=>{
this.renderResize();
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()
}
})
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:{
renderResize(){
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
if(width > height) {
this.direction = 'cross';
}else{
this.direction = 'vertical';
}
},
async getData(){
var res=await this.request("getTiipSalesinfo",{
data:{
dStartDate:this.search.dBeginDate,
dEndDate:this.search.dEndDate,
sSalesName:"环思软件",
}
},"加载中",{})
this.title=res.set1&&res.set1[0]&&res.set1[0].sSalesName
this.chartData1=res.set1&&res.set1.map(v=>{
return{
sSalesName:v.sSalesName,
nAmount:v.nAmount,
iSalesId:v.sSalesName,
}
})||[]
this.tempChartData2 = res.set2&&res.set2.map(v=>{
return{
nPaydAmount:v.nPaydAmount,
sMonth:v.sMonth,
iSalesId:v.sSalesName,
}
})||[];
this.tempChartData3 = res.set3&&res.set3.map(v=>{
return{
iSalesId:v.sSalesName,
sMonth:v.sMonth,
nAmount:v.nAmount,
}
})||[];
this.chartData2=res.set2&&res.set2.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId)||[]
this.chartData3=res.set3&&res.set3.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId)||[]
},
},
}
</script>
src/view/tiip/IntReportForms/index.vue
View file @ e6b1eeaf
......@@ -5,7 +5,12 @@
height:100%;
display:flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100%;
.HEADER{
flex-shrink: 0;
padding:10px 10px 0 10px;
.items{
display: flex;
......@@ -53,6 +58,47 @@
}
}
}
.TAB{
padding:10px;
flex-shrink: 0;
.buttonTab {
> a{
color:#708bf6;
}
> a.vux-button-tab-item-first{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
> a.vux-button-tab-item-last{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
> a.vux-button-tab-item-first:after{
border:1px solid #708bf6;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
color:#708bf6;
}
> a.vux-button-tab-item-middle:after{
border:1px solid #708bf6;
color:#708bf6;
}
> a.vux-button-tab-item-last:after{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border:1px solid #708bf6;
}
> a.vux-button-group-current{
background: #708bf6;
color:white;
}
}
}
.content{
flex-grow:1;
overflow: auto;
}
}
</style>
<template>
......@@ -79,28 +125,42 @@
</swiper-item>
</swiper>
</div>
<div class="TAB">
<button-tab class="buttonTab" :value="activeBtn" >
<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='revenue'">收支分析</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>
</div>
<div class="content">
<component :is="situation" />
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js';
import {mapState} from 'vuex';
import {Swiper,SwiperItem,ButtonTab, ButtonTabItem } from 'vux';
import salesStatistics from "./salesStatistics"
import empAna from "./empAna"
import revenue from "./revenue"
export default {
name:"IntReportForms",
components:{Swiper,SwiperItem,ButtonTab, ButtonTabItem},
components:{Swiper,SwiperItem,ButtonTab, ButtonTabItem,salesStatistics,empAna,revenue},
data(){
return{
list:[],
activeBtn:0,
situation:"salesStatistics",
}
},
created(){
this.$store.dispatch('saveUserId',this.$route.params.userId);
this.$store.dispatch('setIproject',this.$route.params.iProjectId);
},
computed:{
...mapState({
iProjectId:state => state.app.iProjectId,
})
},
mounted(){
this.$nextTick(()=>{
......@@ -109,8 +169,65 @@ export default {
},
methods:{
async init(){
var value=await this.request("getTtipTotalamount",{},"加载中",{iProjectId:this.iProjectId});
console.log(value)
var res=await this.request("getTtipTotalamount",{},"加载中",{})
this.list=[
{
child:[
{
title:'本日销售额',
rate:(res.set1[0].nTodaySellAmountRate||0).toLocaleString(),
price:(res.set1[0].nTodaySellAmount||0).toLocaleString()
},
{
title:'本日实收',
rate:(res.set1[0].nTodaySellProfitRate||0).toLocaleString(),
price:(res.set1[0].nTodaySellProfit||0).toLocaleString()
}
]
},
{
child:[
{
title:'本周销售额',
rate:(res.set1[0].nWeekSellAmountRate||0).toLocaleString(),
price:(res.set1[0].nWeekSellAmount||0).toLocaleString()
},
{
title:'本周实收',
rate:(res.set1[0].nWeekSellProfitRate||0).toLocaleString(),
price:(res.set1[0].nWeekSellProfit||0).toLocaleString()
}
]
},
{
child:[
{
title:'本月销售额',
rate:(res.set1[0].nMonthSellAmountRate||0).toLocaleString(),
price:(res.set1[0].nMonthSellAmount||0).toLocaleString()
},
{
title:'本月实收',
rate:(res.set1[0].nMonthSellProfitRate||0).toLocaleString(),
price:(res.set1[0].nMonthSellProfit||0).toLocaleString()
}
]
},
{
child:[
{
title:'本年销售额',
rate:(res.set1[0].nYearSellAmountRate||0).toLocaleString(),
price:(res.set1[0].nYearSellAmount||0).toLocaleString()
},
{
title:'本年实收',
rate:(res.set1[0].nYearSellProfitRate||0).toLocaleString(),
price:(res.set1[0].nYearSellProfit||0).toLocaleString()
}
]
}
]
},
}
}
......
src/view/tiip/IntReportForms/revenue.vue 0 → 100644
View file @ e6b1eeaf
<style lang="less">
@import url("../../../styles/common.less");
</style>
<template>
<div id="revenue">
<searchComponent :search='search' />
<div class="iCard">
<div ref='chart' style="width:100%;height:150px;"/>
<table>
<tr>
<td><div> <span>支</span> </div></td>
<td><div> <span>总支出</span> </div></td>
<td><div></div></td>
<td><div> <span>{{allPay}}</span> </div></td>
</tr>
</table>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
import { Confirm } from 'vux'
import searchComponent from '@/components/search'
import echarts from 'echarts';
export default {
name:"revenue",
components:{searchComponent},
data(){
return{
search:{
dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
},
chart:null,
list:[],
allPay:0,
}
},
mounted(){
this.$nextTick(()=>{
this.chart=this.$echarts.init(this.$refs.chart)
this.searchData()
})
this.global.$off('searchData');
this.global.$on('searchData',()=>{
this.searchData()
})
},
methods:{
async searchData(){
this.list=await this.request("getTiipPayinfo",{
data:{
dStartDate:this.search.dBeginDate,
dEndDate:this.search.dEndDate
}
},"加载中",{})
this.allPay=0
// this.list.forEach(v=>{
// this.allPay+=v.nAmount
// })
},
},
}
</script>
src/view/tiip/IntReportForms/salesStatistics.vue 0 → 100644
View file @ e6b1eeaf
This diff is collapsed.
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