Skip to content

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

chart

parent da63f31a
Show whitespace changes
Inline Side-by-side
Showing with 963 additions and 31 deletions
src/components/search.vue
View file @ e6b1eeaf
...@@ -15,20 +15,21 @@ ...@@ -15,20 +15,21 @@
<div class="Content"> <div class="Content">
<div class="Title">时间纬度</div> <div class="Title">时间纬度</div>
<div class="padding-left-15 btns"> <div class="padding-left-15 btns">
<button @click="changeDate(index)" v-for="(item,index) in btns" :key="index" :class="index == active ? 'active' : ''"> <button @click="changeDate(v)" v-for="(v,i) in btns" :key="i" :class="{active:v == selectDate}">
{{item}} {{v}}
</button> </button>
</div> </div>
</div> </div>
<div class="Content" > <div class="Content" >
<div class="Title">日期范围</div> <div class="Title">日期范围</div>
<div style="flex:1;display:flex;"> <div style="flex:1;display:flex;" class="DATE">
<div class="padding-left-15 dateTime" style="flex:1;justify-content:flex-end;align-items:center;display:flex;"> <div class="padding-left-15 dateTime">
<datetime v-model="search.dBeginDate" format="YYYY-MM-DD" @on-change="searchData($event,1)"></datetime> <datetime 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>
<div class="padding-right-15 dateTime" style="flex:1;justify-content:flex-end;align-items:center;display:flex;"> <span class="line"/>
<datetime :start-date="search.dBeginDate" v-model="search.dEndDate" format="YYYY-MM-DD" @on-change="searchData($event,2)"></datetime> <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> --> <!-- <i class='iconfont icon-right'></i> -->
</div> </div>
</div> </div>
...@@ -47,7 +48,7 @@ export default { ...@@ -47,7 +48,7 @@ export default {
data () { data () {
return { return {
btns:['本日','本周','本月','本年'], btns:['本日','本周','本月','本年'],
active:2, selectDate:"本月",
inputValue:'', inputValue:'',
selectValue:'全部' selectValue:'全部'
} }
...@@ -104,10 +105,11 @@ export default { ...@@ -104,10 +105,11 @@ export default {
} }
this.global.$emit('searchData'); this.global.$emit('searchData');
}, },
changeDate(index){ changeDate(name){
this.active = index; this.selectDate = name;
this.search.dEndDate = Util.dateFormat(new Date(),'yyyy-MM-dd'); this.search.dEndDate = Util.dateFormat(new Date(),'yyyy-MM-dd');
this.search.dBeginDate = Util.getDate(this.btns[index]); this.search.dBeginDate = Util.getDate(name);
this.global.$emit('searchData');
}, },
changeSelect(e){ changeSelect(e){
this.selectValue = this.status[e.target.selectedIndex].sStatus; this.selectValue = this.status[e.target.selectedIndex].sStatus;
...@@ -125,7 +127,7 @@ export default { ...@@ -125,7 +127,7 @@ export default {
} }
}, },
mounted(){ mounted(){
window.d = this; window.DATA = this;
}, },
components: { components: {
Search, Search,
...@@ -151,6 +153,17 @@ export default { ...@@ -151,6 +153,17 @@ export default {
.Title{ .Title{
width:50px;text-align:center;font-size:12px; 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{ .gradient{
background: linear-gradient(90deg,#8470FF, #2d8cf0, #00B2EE) background: linear-gradient(90deg,#8470FF, #2d8cf0, #00B2EE)
......
src/libs/apiMap.js
View file @ e6b1eeaf
...@@ -65,7 +65,10 @@ const methodMap = { ...@@ -65,7 +65,10 @@ const methodMap = {
/** /**
* tiip 小程序 * 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; export default methodMap;
src/libs/axios.js
View file @ e6b1eeaf
...@@ -41,7 +41,7 @@ AsInst.interceptors.response.use(response => { ...@@ -41,7 +41,7 @@ AsInst.interceptors.response.use(response => {
// } // }
return response; return response;
}, (error) => { }, (error) => {
if(error.response.data.hasOwnProperty('error_data')){ if(error.response.data&&error.response.data.hasOwnProperty('error_data')){
vm.$vux.confirm.show({ vm.$vux.confirm.show({
title:"提示", title:"提示",
content:error.response.data.error_title, content:error.response.data.error_title,
......
src/libs/http.js
View file @ e6b1eeaf
...@@ -69,16 +69,16 @@ Http.install = function (Vue) { ...@@ -69,16 +69,16 @@ Http.install = function (Vue) {
}).catch((error) => { }).catch((error) => {
if (error.status === 200) { if (error.status === 200) {
if (!error.data) { if (!error.data) {
console.log('Customize Notice', error); console.log('Customize Notice post_1', error);
} else if (error.data && error.data.code == '0') { } else if (error.data && error.data.code == '0') {
resolve(error.data) resolve(error.data)
console.log('Customize Notice', error); console.log('Customize Notice post_2', error);
} }
} else if (error.status === 500) { } else if (error.status === 500) {
resolve(response.data); resolve(response.data);
console.log('Customize Notice', error); console.log('Customize Notice post_3', error);
} else { } else {
console.log('Customize Notice', error); console.log('Customize Notice post_4', error);
} }
closeLoading(); closeLoading();
reject(error); reject(error);
...@@ -109,13 +109,13 @@ Http.install = function (Vue) { ...@@ -109,13 +109,13 @@ Http.install = function (Vue) {
}).catch((error) => { }).catch((error) => {
if (error.status === 200) { if (error.status === 200) {
if (!error.data) { if (!error.data) {
console.log('Customize Notice', error); console.log('Customize Notice get_1', error);
} }
} else if (error.status === 500) { } else if (error.status === 500) {
resolve(response.data); resolve(response.data);
console.log('Customize Notice', error); console.log('Customize Notice get_2', error);
} else { } else {
console.log('Customize Notice', error); console.log('Customize Notice get_3', error);
} }
closeLoading(); closeLoading();
reject(error); reject(error);
......
src/router/index.js
View file @ e6b1eeaf
...@@ -284,7 +284,7 @@ let tipRoutes = [ ...@@ -284,7 +284,7 @@ let tipRoutes = [
path:"/main", path:"/main",
children:[ children:[
{ {
path:"/tiip/IntReportForms/:iProjectId/:userId", path:"/tiip/IntReportForms/:userId",
name:"IntReportForms", name:"IntReportForms",
component:()=>import("@/view/tiip/IntReportForms/index.vue"), component:()=>import("@/view/tiip/IntReportForms/index.vue"),
meta:{ meta:{
......
src/view/shopVersion/form/empAna/index.vue
View file @ e6b1eeaf
...@@ -101,7 +101,6 @@ export default { ...@@ -101,7 +101,6 @@ export default {
}) })
}, },
async mounted(){ async mounted(){
window.d = this;
this.$store.dispatch('saveUserId',this.$route.params.userId); this.$store.dispatch('saveUserId',this.$route.params.userId);
window.addEventListener("resize",()=>{ window.addEventListener("resize",()=>{
setTimeout(async ()=>{ 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 @@ ...@@ -5,7 +5,12 @@
height:100%; height:100%;
display:flex; display:flex;
flex-direction: column; flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100%;
.HEADER{ .HEADER{
flex-shrink: 0;
padding:10px 10px 0 10px; padding:10px 10px 0 10px;
.items{ .items{
display: flex; display: flex;
...@@ -53,6 +58,47 @@ ...@@ -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> </style>
<template> <template>
...@@ -79,28 +125,42 @@ ...@@ -79,28 +125,42 @@
</swiper-item> </swiper-item>
</swiper> </swiper>
</div> </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> </div>
</template> </template>
<script> <script>
import Util from '@/libs/util.js'; import Util from '@/libs/util.js';
import {mapState} from 'vuex'; import {mapState} from 'vuex';
import {Swiper,SwiperItem,ButtonTab, ButtonTabItem } from 'vux'; import {Swiper,SwiperItem,ButtonTab, ButtonTabItem } from 'vux';
import salesStatistics from "./salesStatistics"
import empAna from "./empAna"
import revenue from "./revenue"
export default { export default {
name:"IntReportForms", name:"IntReportForms",
components:{Swiper,SwiperItem,ButtonTab, ButtonTabItem}, components:{Swiper,SwiperItem,ButtonTab, ButtonTabItem,salesStatistics,empAna,revenue},
data(){ data(){
return{ return{
list:[], list:[],
activeBtn:0,
situation:"salesStatistics",
} }
}, },
created(){ created(){
this.$store.dispatch('saveUserId',this.$route.params.userId); this.$store.dispatch('saveUserId',this.$route.params.userId);
this.$store.dispatch('setIproject',this.$route.params.iProjectId);
}, },
computed:{ computed:{
...mapState({
iProjectId:state => state.app.iProjectId,
})
}, },
mounted(){ mounted(){
this.$nextTick(()=>{ this.$nextTick(()=>{
...@@ -109,8 +169,65 @@ export default { ...@@ -109,8 +169,65 @@ export default {
}, },
methods:{ methods:{
async init(){ async init(){
var value=await this.request("getTtipTotalamount",{},"加载中",{iProjectId:this.iProjectId}); var res=await this.request("getTtipTotalamount",{},"加载中",{})
console.log(value) 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
<style lang="less" scoped>
#statistics{
background:#f2f2f2;
height:100%;
display: flex;
flex-direction: column;
.Content{
height:100%;
// height:1px;
// flex-grow: 1;
// overflow: auto;
// -webkit-overflow-scrolling: touch;
}
.Content>.double{
display:flex;
>.card{
flex-grow:1;
width:50%;
}
}
.card{
border-radius: 6px;
background:#fff;
box-shadow: 1px 1px 10px -1px #888;
overflow: hidden;
margin:6px;
position:relative;
.imgBC{
position:absolute;
top:32px;
}
img{
max-height: 80%;
left: 50%;
transform: translate(-50%,0);
}
>.head{
background: linear-gradient(90deg,#708bf6, #2d8cf0, #00B2EE);
padding:5px 0;
color:#fff;
text-align: center;
}
>.foot{
display:flex;
font-size:10px;
>div{
flex-grow:1;
width:50%;
margin:4px 0;
text-align: center;
>p{
margin:2px 0;
&:last-child{
color:#009BDE;
}
}
}
}
}
}
</style>
<template>
<div id="statistics">
<searchComponent :search='search' />
<div class="Content">
<div class='double'>
<div class="card">
<div class="head">月总订单金额同比率</div>
<div ref='chart1' style="width:100%;height:150px;"/>
</div>
<div class="card">
<div class="head">月总订单金额环比率</div>
<div ref='chart2' style="width:100%;height:150px;"/>
</div>
</div>
<div class="card">
<div class="head">销售排行</div>
<div ref='chart3' :style="{width:'100%',height:'180px',opacity:chartData.set3.length>0?'1':'0'}" />
<img v-if="chartData.set3.length==0" src="@/assets/noData.jpg" class="imgBC" />
<div class="foot">
<div style="border-right:1px solid #009BDE;">
<p>销售笔数</p>
<p >{{chartData.set4.iSellCount}}</p>
</div>
<div>
<p>销售额</p>
<p>￥{{chartData.set4.nSellAmount}}万</p>
</div>
</div>
</div>
<div class="card">
<div class="head">产品颜色销售排行</div>
<div ref='chart5' :style="{width:'100%',height:'230px',opacity:chartData.set5.length>0?'1':'0'}" />
<img v-if="chartData.set5.length==0" src="@/assets/noData.jpg" class="imgBC" />
</div>
<div class="card">
<div class="head">产品销售排行</div>
<div ref='chart6' :style="{width:'100%',height:'230px',opacity:chartData.set6.length>0?'1':'0'}" />
<img v-if="chartData.set6.length==0" src="@/assets/noData.jpg" class="imgBC" />
</div>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
import searchComponent from '@/components/search'
import { Confirm } from 'vux'
import { clearTimeout, setTimeout } from 'timers';
import { toUnicode } from 'punycode';
import echarts from 'echarts';
export default {
name:"salesStatistics",
components:{searchComponent},
data(){
return{
search:{
dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
},
chartData:{
nOrderSameRatio:0,
nOrderRingRatio:0,
set3:[],
set4:{
iSellCount:0,
nSellAmount:0,
},
set5:[],
set6:[],
},
chart1:null,
chart2:null,
chart3:null,
chart5:null,
chart6:null,
}
},
created(){
window.s=this
},
activated(){
setTimeout(()=>{
this.chart1.resize()
this.chart2.resize()
this.resize(this.chart3,1.15)
this.resize(this.chart5,1.35)
this.resize(this.chart6,1.35)
})
},
mounted(){
window.h=this
this.createChart('chart1')
this.createChart('chart2')
this.createChart('chart3')
this.createChart('chart5','set5',true)
this.createChart('chart6','set6',true)
window.addEventListener('resize',()=>{
setTimeout(()=>{
this.chart1.resize()
this.chart2.resize()
this.resize(this.chart3,1.15)
this.resize(this.chart5,1.35)
this.resize(this.chart6,1.35)
})
})
this.searchData();
this.global.$off('searchData');
this.global.$on('searchData',()=>{
this.searchData()
})
},
methods:{
createChart(name,kield,isLinstener){
var myChart=this.$echarts.init(this.$refs[name])
if(isLinstener){
let time=0
myChart.getZr().on('mousedown',param=>{
const pointInPixel = [param.offsetX, param.offsetY]
if (myChart.containPixel('grid', pointInPixel)) {
let index = myChart.convertFromPixel({ seriesIndex: 0 }, [param.offsetX, param.offsetY])[0]
time=setTimeout(()=>{
var data=this.chartData[kield]
var options=myChart.getOption()
options.tooltip[0].show=false
myChart.setOption(options)
this.$vux.confirm.show({
title:"提示",
content:"是否查看详情",
onConfirm:()=>{
this.$store.dispatch('setChartHearData',data[index]).then(()=>{
this.$router.push({name:"chartMmcolorsaleDetail"});
})
options.tooltip[0].show=true
myChart.setOption(options)
},
onCancel(){
options.tooltip[0].show=true
myChart.setOption(options)
}
})
},500)
}
})
myChart.getZr().on('mousemove',()=>{
clearTimeout(time)
})
myChart.getZr().on('mouseup',()=>{
clearTimeout(time)
})
};
this[name]=myChart
},
resize(chart,rate){
var options=chart.getOption()
if(!options)return;
options.dataZoom[0].end=options.dataZoom[0].start+(window.innerWidth*rate)/options.xAxis[0].data.length
chart.setOption(options)
chart.resize()
},
async searchData(){//搜索数据
await this.getChartData()
this.showValue()
},
async getChartData(){
var value =await this.request('getTtipSellinfo',{
params:{
dStartDate:this.search.dBeginDate,
dEndDate:this.search.dEndDate
}
},true,{iProjectId:this.iProjectId})
Object.assign(this.chartData,{
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,
set3:typeof value.set3=='object'&&value.set3.length>0&&value.set3.map(v=>{
v.value=Math.round(v.nAmount/100)/100
return v
})||[],
set4:{
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(),
},
set5:typeof value.set5=='object'&&value.set5.length>0&&value.set5||[],
set6:typeof value.set6=='object'&&value.set6.length>0&&value.set6||[],
})
},
showValue(){
this.drawRing({
e:this.chart1,
value:this.chartData.nOrderSameRatio
})
this.drawRing({
e:this.chart2,
value:this.chartData.nOrderRingRatio
})
this.drawLing({
e:this.chart3,
value:this.chartData.set3
})
this.drawLing2({
e:this.chart5,
value:this.chartData.set5
})
this.drawLing2({
e:this.chart6,
value:this.chartData.set6
})
},
drawRing(data){//仪表盘
data.e.setOption({
tooltip : {
show:false,
},
series: [
{
type: 'gauge',
data: [{value: data.value, name: '比例'}],
radius:"90%",
min:-100,
max:100,
title:{
fontSize:10
},
detail:{
fontSize:11,
formatter:'{value}%',
padding:[50,0,0,0],
},
axisLine:{
show:false,
lineStyle:{
color:[[0.5,'red'],[0.75,'#1CB712'],[0.90,'#156F8E'],[1,'#152989']],
width:15
}
},
splitLine:{
length:15
},
axisLabel:{
fontSize:9,
distance:1,
},
itemStyle:{
opacity:0.3,
},
}
]
})
},
drawLing(data){//折线
data.e.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#111'
}
},
formatter:val=>{
return data.value[val[0].dataIndex].nAmount
}
},
toolbox: {
feature: {
restore: {show: true},
},
},
grid: {
top:30,
height:130,
right:10,
},
xAxis: {
type:"category",
data:data.value.map(v=>v.sYearMonth),
axisPointer:{
type:"shadow"
},
axisTick:{
alignWithLabel: true
},
axisLabel: {
interval:0
},
minInterval:10,
},
yAxis: {
type: 'value',
name:"金额(万)",
offset:-10,
},
dataZoom: [{
type: 'inside',
xAxisIndex: 0,
show: false, //flase直接隐藏图形
filterMode: 'empty',
start: 0,//滚动条的起始位置
end: (window.innerWidth*1.15)/data.value.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}],
series: [
{
id: 'a',
type: 'line',
smooth: true,
symbolSize: 10,
data: data.value.map(v=>v.value),
label:{
show:true,
formatter:val=>{
return `${val.data}万`
}
},
itemStyle:{
normal:{
color:'#708bf6'
}
}
}
]
})
},
drawLing2(data){
data.e.setOption({
color:['#5cadff','#1c2438'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#111'
}
}
},
toolbox: {
feature: {
// dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
// saveAsImage: {show: true}
},
},
grid: {
left: '2%', // 与容器左侧的距离
right: '2%', // 与容器右侧的距离
height:160,
containLabel: true
},
legend: {
data:['金额','数量'],
x: 'left'
},
xAxis: [{
type: 'category',
data: data.value.map(v=>v.sCustomerName),
axisPointer: {
type: 'shadow'
},
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval:0
},
}],
yAxis: [
{
type: 'value',
name: '金额',
axisLabel: {
formatter: '{value}'
},
scale:true,
axisLine:{
lineStyle:{
color:'#5CADFF',
}
}
},
{
type: 'value',
name: '数量',
scale:true,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name:'金额',
type:'bar',
data:data.value.map(v=>v.nAmount),
barWidth:32,
color:new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [{
offset: 0,
color: '#708bf6'
}, {
offset: 1,
color: '#00B2EE'
}])
},
{
name:'数量',
type:'line',
yAxisIndex: 1,
data:data.value.map(v=>v.nQty),
itemStyle:{
normal:{
color:'#708bf6'
}
}
}
],
dataZoom: [{
type: 'inside',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
start: 0,//滚动条的起始位置
end: (window.innerWidth*1.35)/data.value.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}],
})
}
},
}
</script>
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