Skip to content

M
Muse
Commit 2af55f37 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 4b2014a1
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 71 deletions
src/components/viitto/saleGuestTable.vue
View file @ 2af55f37
......@@ -3,6 +3,7 @@
height: 100%;
width: 100%;
background-color: #1D243D;
font-family: 'MicrosoftYaHei'
}
.salesGuest .nav{
padding: 25px 45px;
......@@ -68,20 +69,24 @@
.salesTable th,.salesTable td{
height:40px;
font-size:12px;
padding:0 6px;
}
.salescomSpan{
display:inline-block;
padding:5px 20px;
padding:5px 0;
border-radius: 18px;
color:#fff;
width:100%;
text-align: center;
font-size:15px;
background-color: #2B314E;
}
.salesTable tr:nth-child(even){
background-color: #252B48;
}
.salesTable tr:hover{
background-color: #2B314E;
.salesTable tbody tr:hover{
background-color: #2B314E!important;
box-shadow: 0px 0px 10px rgba(81,84,99,0.8)!important;/*设置阴影,可以自定义参数*/
}
.saleSecondTh th{
color:#8089B4;
......@@ -95,6 +100,9 @@
font-size:12px;
color:#4BD7AA;
}
.saleFirstth{
height:60px!important;
}
</style>
<template>
<div class="salesGuest">
......@@ -115,47 +123,51 @@
</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>
<thead>
<tr class="saleFirstth">
<th width="80"><span class="salescomSpan" style="padding:5px 10px;">日期</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>
</thead>
<tbody>
<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>
</tbody>
</table>
</div>
</div>
......@@ -221,6 +233,7 @@ export default {
}
}
})
console.log(this.dataList,'datalistt');
}
})
},
......@@ -237,7 +250,7 @@ export default {
},
//点击跳转
goSalesMap(){
window.location="http://192.168.0.116:8080/#/salesGuestList"
window.location="http://192.168.0.117:8080/#/salesGuestList"
}
}
}
......
src/components/viitto/salesGuestList.vue
View file @ 2af55f37
......@@ -113,6 +113,7 @@
.MapIcon {
/* float:right; */
color: #fff;
text-align: right;
/* margin-top:10px; */
}
.MapIcon span {
......@@ -120,6 +121,9 @@
margin-right: 10px;
cursor: pointer;
}
.checkedSpan{
color:#459BC7;
}
</style>
<template>
<div class="salesGuest" v-loading="loading">
......@@ -172,10 +176,11 @@
</el-row>
</div>
<div class="content" >
<!-- <div class="MapIcon">
<span @click="LineMap()">折线图</span>
<span @click="BarMap()">柱状图</span>
</div> -->
<div class="MapIcon">
<span @click="getAll()" :class="{'checkedSpan':checkIndex==1}">不限</span>
<span @click="LineMap()" :class="{'checkedSpan':checkIndex==2}">折线图</span>
<span @click="BarMap()" :class="{'checkedSpan':checkIndex==3}">柱状图</span>
</div>
<div class="myecharts" ref="myecharts" >
</div>
......@@ -198,7 +203,8 @@ export default {
yearList: [],
Mydatalist: [],
//所有月份
monthList: []
monthList: [],
checkIndex:1,
};
},
watch: {},
......@@ -209,7 +215,6 @@ export default {
},
methods: {
getList() {
this.dataList = [];
let url =
"http://47.96.23.199:5001/api/order/get_sale_numandpreferprice_statistics";
this.loading = true;
......@@ -223,12 +228,16 @@ export default {
x.OutBranchName = x.OutBranchName.replace("印象", "");
});
this.getCompany(this.dataList);
}else{
this.dataList = [];
this.getCompany(this.dataList);
}
}
});
},
//去重获取公司
getCompany(dataList) {
this.Mydatalist=[];
this.companyList = [];
this.monthList = [];
var obj = {};
......@@ -281,14 +290,14 @@ export default {
companyArr1.push(obj2);
var tempArray = [];
let obj = {
name: item.OutBranchName,
name: item.name,
type: "bar",
data: item.preferPriceList
};
let objline = {
type: "line",
symbolSize: 2,
name: item.OutBranchName,
name: item.name,
yAxisIndex: 1,
hoverAnimation: true,
smooth: true,
......@@ -298,7 +307,7 @@ export default {
this.Mydatalist.push(obj);
this.Mydatalist.push(objline);
});
this.init(companyArr1);
this.init(companyArr1,this.Mydatalist);
},
getOtherMonth(branchId, monthStr) {
......@@ -313,7 +322,7 @@ export default {
//点击切换为折现图
LineMap() {
// let newArr=this.Mydatalist;
this.checkIndex=2;
let newArr = JSON.parse(JSON.stringify(this.Mydatalist));
let myArr = [];
newArr.forEach(x => {
......@@ -321,7 +330,6 @@ export default {
myArr.push(x);
}
});
this.Mydatalist = myArr;
let companyArr1 = [];
this.companyList.forEach((item, index) => {
let obj2 = {
......@@ -337,10 +345,11 @@ export default {
};
companyArr1.push(obj2);
});
this.init(companyArr1);
this.init(companyArr1,myArr);
},
//点击切换为柱状图
BarMap() {
this.checkIndex=3;
let newArr = this.Mydatalist;
let myArr = [];
newArr.forEach(x => {
......@@ -348,7 +357,6 @@ export default {
myArr.push(x);
}
});
this.Mydatalist = myArr;
let companyArr1 = [];
this.companyList.forEach((item, index) => {
let obj2 = {
......@@ -364,9 +372,27 @@ export default {
};
companyArr1.push(obj2);
});
this.init(companyArr1);
this.init(companyArr1,myArr);
},
getAll(){
this.checkIndex=1;
let companyArr1 = [];
this.companyList.forEach((item, index) => {
let obj2 = {
data: [item.OutBranchName],
icon: "circle",
x: index * 5 + 3.5 + "%",
orient: "horizontal",
textStyle: {
//图例文字的样式
color: "#fff",
fontSize: 16
}
};
companyArr1.push(obj2);
});
this.init(companyArr1,this.Mydatalist);
},
//获取年份
getYear() {
var myDate = new Date();
......@@ -393,8 +419,7 @@ export default {
}
});
},
init(companyArr1) {
console.log("companyArr1",companyArr1);
init(companyArr1,Mydatalist) {
var that = this;
var myChart = this.$echarts.init(this.$refs.myecharts);
var option = {
......@@ -421,14 +446,6 @@ export default {
}
}
},
// toolbox: {
// feature: {
// dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['line', 'bar']},
// restore: {show: true},
// saveAsImage: {show: true}
// }
// },
xAxis: {
type: "category",
boundaryGap: true,
......@@ -513,7 +530,7 @@ export default {
}
}
],
series: this.Mydatalist,
series: Mydatalist,
color: [
"#FE7691",
"#FA219C",
......@@ -530,6 +547,7 @@ export default {
"#E70000"
]
};
myChart.clear();
myChart.setOption(option, true);
}
}
......
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