Skip to content

M
Muse
Commit 3ee15d67 authored by zhengke's avatar zhengke
Browse files
Options

增加统计

parent 66d70c51
Show whitespace changes
Inline Side-by-side
Showing with 985 additions and 0 deletions
src/components/viitto/saleGuestTable.vue 0 → 100644
View file @ 3ee15d67
<style>
.salesGuest{
height: 100%;
width: 100%;
background-color: #1D243D;
}
.salesGuest .nav{
padding: 25px 45px;
background-color: #252D48;
}
.salesGuest .nav .name {
font-size: 30px;
font-weight: 700;
color: #fff;
text-align: right;
font-family: 'pingfangR';
}
.salesGuest .content{
height: 88%;
/* height: calc(100vh - 122px); */
padding: 30px 40px;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
}
.salesGuest .content .el-row,.salesGuest .content .el-row .el-col{
height: 100%;
}
.salesSkMap {
width: 180px;
height: 34px;
background: -webkit-gradient(linear,left top, right top,from(rgba(147, 69, 248, 1)),to(rgba(63, 210, 243, 1)));
background: linear-gradient(90deg,rgba(147, 69, 248, 1),rgba(63, 210, 243, 1));
border-radius: 6px;
color: white;
text-align: center;
line-height: 34px;
display: inline-block;
margin-right: -17px;
position: relative;
}
.SalesNoCked {
width: 180px;
height: 34px;
background-color: #1B2239;
color:#4D546A;
border-radius: 6px;
text-align: center;
line-height: 34px;
display: inline-block;
font-family: PINGFANG REGULAR;
cursor: pointer;
margin-top:5px;
}
.salesTable{
width:100%;
height:100%;
border-radius:4px;
padding:0 10px;
background-color: #212744;
}
.salesTable td,.salesTable th{
text-align: left;
}
.salesTable tr{
height:40px;
}
.salesTable th,.salesTable td{
height:40px;
font-size:12px;
}
.salescomSpan{
display:inline-block;
padding:5px 20px;
border-radius: 18px;
color:#fff;
font-size:15px;
background-color: #2B314E;
}
.salesTable tr:nth-child(even){
background-color: #252B48;
}
.salesTable tr:hover{
background-color: #2B314E;
}
.saleSecondTh th{
color:#8089B4;
width:70px;
}
.totalMoney{
color:#EF4957;
font-size:12px;
}
.guestNum{
font-size:12px;
color:#4BD7AA;
}
</style>
<template>
<div class="salesGuest">
<div class="nav">
<el-row :gutter="70">
<el-col :span="18">
<el-row :gutter="70">
<el-col :span="8">
<div class="salesSkMap">销售收客表格</div>
<div class="SalesNoCked" @click="goSalesMap()">销售收客视图</div>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="name">
印象之旅线路看板
</el-col>
</el-row>
</div>
<div class="content" >
<table class="salesTable" style="border-collapse:collapse; border-spacing:0;">
<tr class="saleFirstth">
<th width="80"><span class="salescomSpan" style="padding:5px 15px;">日期</span></th>
<th colspan="2" v-for="item in companyList"><span class="salescomSpan">{{item.OutBranchName}}</span></th>
</tr>
<tr class="saleSecondTh">
<th></th>
<th>销售额</th>
<th>收客人数</th>
<th>销售额</th>
<th>收客人数</th>
<th>销售额</th>
<th>收客人数</th>
<th>销售额</th>
<th>收客人数</th>
<th>销售额</th>
<th>收客人数</th>
<th>销售额</th>
<th>收客人数</th>
<th>销售额</th>
<th>收客人数</th>
<th>销售额</th>
<th>收客人数</th>
<th>销售额</th>
<th>收客人数</th>
<th>销售额</th>
<th>收客人数</th>
<th>销售额</th>
<th>收客人数</th>
<th>销售额</th>
<th>收客人数</th>
<th>销售额</th>
<th>收客人数</th>
</th>
</tr>
<tr v-for="item in dataList">
<td><span style="color:#fff;padding-left:15px;">{{item.month}}月</span></td>
<template v-for="subItem in item.List">
<td><span class="totalMoney">{{subItem.PreferPrice}}</span></td>
<td><span class="guestNum">{{subItem.GuestNum}}</span></td>
</template>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
data(){
return {
loading:false,
dataList:[],
msg:{
yearstr:0,
monthstr:0,
outbranchid:-1
},
companyList:[],
}
},
watch: {
},created(){
},mounted() {
this.msg.yearstr=this.$route.query.year;
this.msg.monthstr=this.$route.query.month;
this.getList();
},methods:{
getList(){
let url='http://47.96.23.199:5001/api/order/get_sale_numandpreferprice_statistics'
this.apiRequest(url,{msg:this.msg},r=>{
if(r.data.resultCode==1){
let data = r.data.data;
this.getCompany(data);
let tempArr = [];
for (let i = 0; i < data.length; i++) {
if (tempArr.indexOf(data[i].MonthStr) === -1) {
this.dataList.push({
month: data[i].MonthStr,
List: [data[i]]
});
tempArr.push(data[i].MonthStr);
} else {
for (let j = 0; j < this.dataList.length; j++) {
if (this.dataList[j].month == data[i].MonthStr) {
this.dataList[j].List.push(data[i]);
break;
}
}
}
}
//数量不够push空
this.dataList.forEach(x=>{
if(x.List.length<this.companyList.length){
for(var i=0;i<this.companyList.length-x.List.length;i++){
x.List.push({
GuestNum:'',
MonthStr:'',
OutBranchName:'',
PreferPrice:'',
RB_Branch_Id:'',
YearStr:''
})
}
}
})
}
})
},
//去重获取公司
getCompany(dataList){
this.companyList = [];
var obj = {};
for(var i =0; i<dataList.length; i++){
if(!obj[dataList[i].OutBranchName]){
this.companyList.push(dataList[i]);
obj[dataList[i].OutBranchName] = true;
}
}
},
//点击跳转
goSalesMap(){
window.location="http://192.168.0.116:8080/#/salesGuestList"
}
}
}
</script>
\ No newline at end of file
src/components/viitto/salesGuestList.vue 0 → 100644
View file @ 3ee15d67
<style>
.salesGuest{
height: 100%;
width: 100%;
background-color: #1D243D;
}
.salesGuest .nav{
padding: 25px 45px;
background-color: #252D48;
}
.salesGuest .nav .name {
font-size: 30px;
font-weight: 700;
color: #fff;
text-align: right;
font-family: 'pingfangR';
}
.salesGuest .content{
height: 88%;
/* height: calc(100vh - 122px); */
padding: 30px 40px;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
}
.salesGuest .content .el-row,.salesGuest .content .el-row .el-col{
height: 100%;
}
.company-class{
background-color: rgb(29, 36, 61) !important;
border-color: rgb(29, 36, 61) !important;
}
.el-popper .popper__arrow{
display:none!important;
}
.salesSkMap {
width: 180px;
height: 34px;
background: -webkit-gradient(linear,left top, right top,from(rgba(147, 69, 248, 1)),to(rgba(63, 210, 243, 1)));
background: linear-gradient(90deg,rgba(147, 69, 248, 1),rgba(63, 210, 243, 1));
border-radius: 6px;
color: white;
text-align: center;
line-height: 34px;
display: inline-block;
margin-right: -17px;
position: relative;
}
.SalesNoCked {
width: 180px;
height: 34px;
background-color: #1B2239;
color:#4D546A;
border-radius: 6px;
text-align: center;
line-height: 34px;
display: inline-block;
font-family: PINGFANG REGULAR;
cursor: pointer;
margin-top:5px;
}
.w180{
width:180px;
}
.salesDate{
display: flex;
align-items: center;
}
.salesDate>div:first-child {
width: 30%;
background: rgba(106,116,146,.35);
border-radius: 20px 0 0 20px;
padding: 10px 20px 9px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fefeff;
text-align: center;
}
.salesDate>div:nth-child(2) {
width: 50%;
background: rgba(22,28,49,.55);
border-radius: 0 20px 20px 0;
overflow: hidden;
}
.salesDate>div:nth-child(2) .el-input--suffix .el-input__inner {
border-radius: 0;
}
.salesDate>div:nth-child(2) input {
background: rgba(22,28,49,.5);
border: none!important;
font-size:20px;
font-weight: bold;
color:#fff;
}
.cityList{
margin:0 0 10px 65px;
}
.cityList ul li{
list-style-type: none;
display: inline-block;
margin-right:50px;
color:#CCCED3;
font-size: 20px;
color:#CCCED3;
}
.ComSpan{
display:inline-block;
width:14px;
height:14px;
border-radius:50%;
margin-right:5px;
}
.cdSpan{
background-color: #F42C54;
}
.kmSpan{
background-color:#FA219C
}
.xaSpan{
background-color:#774FB5
}
.whSpan{
background-color:#6C7AE0
}
.nlSpan{
background-color:#256AFB
}
.gySpan{
background-color:#00D8FF
}
.ncSpan{
background-color:#84F3D3
}
.hfSpan{
background-color:#009D62
}
.csSpan{
background-color:#66E62C
}
.xmSpan{
background-color:#EFFF42
}
.njSpan{
background-color:#FACA57
}
.cqSpan{
background-color:#FF7437
}
.rjSpan{
background-color:#E70000
}
</style>
<template>
<div class="salesGuest">
<div class="nav">
<el-row :gutter="70">
<el-col :span="18">
<el-row :gutter="70">
<el-col :span="8">
<div class="SalesNoCked" @click="goSalesTable()">销售收客表格</div>
<div class="salesSkMap">销售收客视图</div>
</el-col>
<el-col :span="7" style="padding-right:0;">
<div class="salesDate">
<div>年度</div>
<div>
<el-select v-model="msg.yearstr" placeholder="请选择" @change="getList" popper-class="company-class">
<el-option label="不限" :value="-1"></el-option>
<el-option v-for="item in yearList" :label="item" :value="item"></el-option>
</el-select>
</div>
</div>
</el-col>
<el-col :span="7" style="padding-right:0;">
<div class="salesDate">
<div>月份</div>
<div>
<el-select v-model="msg.monthstr" placeholder="请选择" @change="getList" popper-class="company-class">
<el-option label="不限" :value="0"></el-option>
<el-option label="1月" :value="1"></el-option>
<el-option label="2月" :value="2"></el-option>
<el-option label="3月" :value="3"></el-option>
<el-option label="4月" :value="4"></el-option>
<el-option label="5月" :value="5"></el-option>
<el-option label="6月" :value="6"></el-option>
<el-option label="7月" :value="7"></el-option>
<el-option label="8月" :value="8"></el-option>
<el-option label="9月" :value="9"></el-option>
<el-option label="10月" :value="10"></el-option>
<el-option label="11月" :value="11"></el-option>
<el-option label="12月" :value="12"></el-option>
</el-select>
</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="name">
印象之旅线路看板
</el-col>
</el-row>
</div>
<div class="content" >
<div class="cityList">
<ul>
<li v-for="item in companyList">
<span class="ComSpan" :class="{'cdSpan':item.RB_Branch_Id==0,'kmSpan':item.RB_Branch_Id==1,'xaSpan':item.RB_Branch_Id==32
,'whSpan':item.RB_Branch_Id==33,'nlSpan':item.RB_Branch_Id==36,'gySpan':item.RB_Branch_Id==37,'ncSpan':item.RB_Branch_Id==40,
'hfSpan':item.RB_Branch_Id==46,'csSpan':item.RB_Branch_Id==47,'xmSpan':item.RB_Branch_Id==103,'njSpan':item.RB_Branch_Id==109,
'cqSpan':item.RB_Branch_Id==1214,'rjSpan':item.RB_Branch_Id==1216}"></span>
{{getName(item.OutBranchName)}}
</li>
</ul>
</div>
<div class="myecharts" ref="myecharts" >
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
loading:false,
companyList:[],
msg:{
yearstr:2019,
monthstr:0,
outbranchid:-1
},
dataList:[],
//成都印象1-12数据
cdList:[],
cdGuest:[],
//昆明印象1-12数据
kmList:[],
kmGuest:[],
//西安印象1-12数据
xaList:[],
xaGuest:[],
//武汉印象1-12数据
whList:[],
whGuest:[],
//南宁印象1-12数据
nnList:[],
nnGuest:[],
//贵阳印象1-12数据
gyList:[],
gyGuest:[],
//南昌印象1-12数据
ncList:[],
ncGuest:[],
//合肥印象1-12数据
hfList:[],
hfGuest:[],
//长沙印象1-12数据
csList:[],
csGuest:[],
//厦门印象1-12数据
xmList:[],
xmGuest:[],
//南京印象1-12数据
njList:[],
njGuest:[],
//重庆印象1-12数据
cqList:[],
cqGuest:[],
//入境印象1-12数据
rjList:[],
rjGuest:[],
//年份列表
yearList:[],
}
},
watch: {
},created(){
},mounted() {
this.getYear();
this.getList();
},methods:{
getList(){
this.clearArr();
let url='http://47.96.23.199:5001/api/order/get_sale_numandpreferprice_statistics'
this.apiRequest(url,{msg:this.msg},r=>{
console.log(r,'rrrrr');
if(r.data.resultCode==1){
this.dataList = r.data.data;
if(this.dataList&&this.dataList.length>0){
this.getCompany(this.dataList);
this.dataList.forEach(x=>{
if(x.OutBranchName=='成都印象'&&x.MonthStr<=12){
this.cdList.push(x.PreferPrice);
this.cdGuest.push(x.GuestNum);
}
if(x.OutBranchName=='昆明印象'&&x.MonthStr<=12){
this.kmList.push(x.PreferPrice);
this.kmGuest.push(x.GuestNum);
}
if(x.OutBranchName=='西安印象'&&x.MonthStr<=12){
this.xaList.push(x.PreferPrice);
this.xaGuest.push(x.GuestNum);
}
if(x.OutBranchName=='武汉印象'&&x.MonthStr<=12){
this.whList.push(x.PreferPrice);
this.whGuest.push(x.GuestNum);
}
if(x.OutBranchName=='西宁印象'&&x.MonthStr<=12){
this.nnList.push(x.PreferPrice);
this.xnGuest.push(x.GuestNum);
}
if(x.OutBranchName=='贵阳印象'&&x.MonthStr<=12){
this.gyList.push(x.PreferPrice);
this.gyGuest.push(x.GuestNum);
}
if(x.OutBranchName=='南昌印象'&&x.MonthStr<=12){
this.ncList.push(x.PreferPrice);
this.ncGuest.push(x.GuestNum);
}
if(x.OutBranchName=='合肥印象'&&x.MonthStr<=12){
this.hfList.push(x.PreferPrice);
this.hfGuest.push(x.GuestNum);
}
if(x.OutBranchName=='长沙印象'&&x.MonthStr<=12){
this.csList.push(x.PreferPrice);
this.csGuest.push(x.GuestNum);
}
if(x.OutBranchName=='厦门印象'&&x.MonthStr<=12){
this.xmList.push(x.PreferPrice);
this.xmGuest.push(x.GuestNum);
}
if(x.OutBranchName=='南京印象'&&x.MonthStr<=12){
this.njList.push(x.PreferPrice);
this.njGuest.push(x.GuestNum);
}
if(x.OutBranchName=='重庆印象'&&x.MonthStr<=12){
this.cqList.push(x.PreferPrice);
this.cqGuest.push(x.GuestNum);
}
if(x.OutBranchName=='入境印象'&&x.MonthStr<=12){
this.rjList.push(x.PreferPrice);
this.rjGuest.push(x.GuestNum);
}
})
}
this.init();
console.log(this.cdList,'cdllist');
console.log(this.whGuest,'this.whGuestwhGuestwhGuest');
}
})
},
clearArr(){
this.companyList=[];
this.cdList=[],
this.cdGuest=[],
this.kmList=[],
this.kmGuest=[],
this.xaList=[],
this.xaGuest=[],
this.whList=[],
this.whGuest=[],
this.nnList=[],
this.nnGuest=[],
this.gyList=[],
this.gyGuest=[],
this.ncList=[],
this.ncGuest=[],
this.hfList=[],
this.hfGuest=[],
this.csList=[],
this.csGuest=[],
this.xmList=[],
this.xmGuest=[],
this.njList=[],
this.njGuest=[],
this.cqList=[],
this.cqGuest=[],
this.rjList=[],
this.rjGuest=[]
},
//去重获取公司
getCompany(dataList){
this.companyList = [];
var obj = {};
if(dataList&&dataList.length>0){
for(var i =0; i<dataList.length; i++){
if(!obj[dataList[i].OutBranchName]){
this.companyList.push(dataList[i]);
obj[dataList[i].OutBranchName] = true;
}
}
}
},
getName(item){
return item.replace('印象','');
},
//获取年份
getYear(){
var myDate = new Date();
var tYear = myDate.getFullYear();
let year=0,year1=0;
for(var i=0;i<3;i++){
year=tYear+i;
this.yearList.push(year);
}
for(var i=1;i<3;i++){
year1=tYear-i;
this.yearList.push(year1);
}
this.yearList.sort();
},
//点击跳转
goSalesTable(){
this.$router.push({
name: 'saleGuestTable',
query: {
year: this.msg.yearstr,
month: this.msg.monthstr,
}
});
},
init(){
var that = this;
var myChart = this.$echarts.init(this.$refs.myecharts);
var option={
textStyle: {
fontFamily: 'PINGFANG REGULAR',
},
title: {
color:"#2C3343"
},
grid: {
        left: '4%',   //距离左边的距离
        right: '6%', //距离右边的距离
        top: '12%', //距离上边的距离
bottom:'5%',
       },
// 提示框
tooltip: {
type: 'hideTip'
},
// #30374E
xAxis: {
type: 'category',
boundaryGap: true,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: '#FFFFFF',
}
},
axisLabel:{
textStyle:{
color: '#DADADA',
},
},
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
},
yAxis: [
{
type: 'value',
name: '销售额',
min: 0,
// max: 1000000,
// interval: 100000,
// max: 1000000,
// interval: 100000,
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#DADADA',
}
},
axisLabel:{
// formatter: '{value}k',
textStyle:{
color: '#4A5271',
},
padding:[10, 0, 10, 0],
},
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#30374E',
}
}
},
{
type: 'value',
name: '收客数',
min: 0,
// max: 100,
// interval: 10,
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#DADADA',
}
},
axisLabel:{
textStyle:{
color: '#4A5271',
},
padding:[0, 0, 10, 0],
},
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#30374E',
}
}
}
],
series: [
{
name:'成都',
type:'bar',
data:that.cdList,
itemStyle: {
normal: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 1, color: "#256AFB" },
// { offset: 0, color: "#FE7691" }
// ]),
}
},
},
{
name:'昆明',
type:'bar',
data:that.kmList
},
{
name:'西安',
type:'bar',
data:that.xaList
},
{
name:'武汉',
type:'bar',
data:that.whList
},
{
name:'南宁',
type:'bar',
data:that.nnList
},
{
name:'贵阳',
type:'bar',
data:that.gyList
},
{
name:'南昌',
type:'bar',
data:that.ncList
},
{
name:'合肥',
type:'bar',
data:that.hfList
},
{
name:'长沙',
type:'bar',
data:that.csList
},
{
name:'厦门',
type:'bar',
data:that.xmList
},
{
name:'南京',
type:'bar',
data:that.njList
},
{
name:'重庆',
type:'bar',
data:that.cqList
},
{
name:'入境',
type:'bar',
data:that.rjList
},
{
type:'line',
symbolSize: 2,
hoverAnimation: true,
yAxisIndex:1,
smooth: true,
showSymbol: false,
data:that.cdGuest
//data:[50,60, 100, 150, 200, 250,300, 350, 355, 356, 400, 401]
},
{
type:'line',
symbolSize: 2,
yAxisIndex:1,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data:that.kmGuest
},{
type:'line',
symbolSize: 2,
yAxisIndex:1,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data:that.xaGuest
},{
type:'line',
symbolSize: 2,
yAxisIndex:1,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data:that.whGuest
},{
yAxisIndex:1,
type:'line',
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data:that.nnGuest
},{
yAxisIndex:1,
type:'line',
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data:that.gyGuest
},{
type:'line',
symbolSize: 2,
yAxisIndex:1,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data:that.ncGuest
},
{
type:'line',
symbolSize: 2,
yAxisIndex:1,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data:that.hfGuest
},
{
yAxisIndex:1,
type:'line',
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data:that.csGuest
},
{
yAxisIndex:1,
type:'line',
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data:that.xmGuest
},
{
yAxisIndex:1,
type:'line',
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data:that.njGuest
},
{
yAxisIndex:1,
type:'line',
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data:that.cqGuest
},
{
yAxisIndex:1,
type:'line',
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data:that.rjGuest
}
],
color: ['#FE7691', '#FA219C','#774FB5','#6C7AE0','#256AFB','#00D8FF','#84F3D3','#009D62','#66E62C','#FACA57','#FACA57','#FF7437','#E70000']
};
// myChart.setOption(option);
myChart.setOption(option,true);
},
}
}
</script>
\ No newline at end of file
src/router.js
View file @ 3ee15d67
......@@ -8,6 +8,8 @@ import dataLook from './components/viitto/dataLook'
import saleDataLook from './components/viitto/saleDataLook'
import PerCompetition from './components/viitto/PerCompetition'
import ActivityBoard from './components/viitto/ActivityBoard'
import salesGuestList from './components/viitto/salesGuestList'
import saleGuestTable from './components/viitto/saleGuestTable'
Vue.use(Router)
......@@ -62,5 +64,15 @@ export default new Router({
name: 'ActivityBoard',
component: ActivityBoard,
},
{
path: '/salesGuestList',
name: 'salesGuestList',
component: salesGuestList,
},
{
path: '/saleGuestTable',
name: 'saleGuestTable',
component: saleGuestTable
}
]
})
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