|
@@ -62,8 +62,9 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
- <div style="width:100%; height: 81px;background: #FFFFFF;">
|
|
|
+ <div style="width:100%; height: 360px;margin: 0px 30px;background: #FFFFFF;">
|
|
|
<span style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">销售情况</span>
|
|
|
+ <div ref="myChart" style="width:100%; height: 350px;" ></div>
|
|
|
</div>
|
|
|
<div style="width:100%; height: 181px;">
|
|
|
<span style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">详情:</span>
|
|
@@ -115,11 +116,15 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { listSum,listOilType,listDayReport,getDetails } from "@/api/dataSource/saleReport";
|
|
|
+import echarts from 'echarts'
|
|
|
+require('echarts/theme/macarons') // echarts theme
|
|
|
+import { listSum,listOilType,listDayReport,getDetails,listXdata,listQydata92,listQydata95,listQydata97 } from "@/api/dataSource/saleReport";
|
|
|
+
|
|
|
export default {
|
|
|
name: "source",
|
|
|
data() {
|
|
|
return {
|
|
|
+ charts: null,
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
// 选中数组
|
|
@@ -136,6 +141,14 @@ export default {
|
|
|
couponList: [],
|
|
|
dayReportDetailsList: [],
|
|
|
dateRangeCreatedDate:[],
|
|
|
+ //x轴数据
|
|
|
+ xdata:[],
|
|
|
+ //92#汽油数据
|
|
|
+ qydata92:[],
|
|
|
+ //95#汽油数据
|
|
|
+ qydata95:[],
|
|
|
+ //97#汽油数据
|
|
|
+ qydata97:[],
|
|
|
// 弹出层标题
|
|
|
title: "",
|
|
|
// 是否显示弹出层
|
|
@@ -163,10 +176,144 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initChart();
|
|
|
+ });
|
|
|
+ },
|
|
|
created() {
|
|
|
- this.getList();
|
|
|
+ //获取折线图的数据
|
|
|
+ this.reset();
|
|
|
+ this.queryParams.beginTime = this.getMonthDate();
|
|
|
+ this.queryParams.endTime = this.getEndFormatDate(new Date());
|
|
|
+ this.getDatas();
|
|
|
+ this.dayDataSource();
|
|
|
+ //不加等待时间的话,初始化了echarts,,getDatas的数据没有获取到。等待后数据获取到,重新加载就可以了。
|
|
|
+ setTimeout(() =>{
|
|
|
+ this.initChart();
|
|
|
+ },1000);
|
|
|
},
|
|
|
methods: {
|
|
|
+ initChart(){
|
|
|
+ // 初始化echarts
|
|
|
+ this.charts = echarts.init(this.$refs.myChart, 'macarons');
|
|
|
+ console.log("xdata",this.xdata);
|
|
|
+ this.charts.setOption({
|
|
|
+ xAxis: {
|
|
|
+ data: this.xdata,
|
|
|
+ boundaryGap: false,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross'
|
|
|
+ },
|
|
|
+ padding: [5, 10]
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['92#', '95#','97#']
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '92#', itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#FF005A',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#FF005A',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ smooth: true,
|
|
|
+ type: 'line',
|
|
|
+ data: this.qydata92,
|
|
|
+ animationDuration: 2800,
|
|
|
+ animationEasing: 'cubicInOut'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '95#',
|
|
|
+ smooth: true,
|
|
|
+ type: 'line',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#3888fa',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3888fa',
|
|
|
+ width: 2
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: this.qydata95,
|
|
|
+ animationDuration: 2800,
|
|
|
+ animationEasing: 'quadraticOut'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '97#',
|
|
|
+ smooth: true,
|
|
|
+ type: 'line',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#ffff00',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ffff00',
|
|
|
+ width: 2
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: this.qydata97,
|
|
|
+ animationDuration: 2800,
|
|
|
+ animationEasing: 'quadraticOut'
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取折线图用到的数据
|
|
|
+ getDatas(){
|
|
|
+ listXdata(this.queryParams).then(response => {
|
|
|
+ this.xdata=[];
|
|
|
+ console.log("查询到的xdata",response.rows);
|
|
|
+ if (response.rows === "undefined") {
|
|
|
+ } else {
|
|
|
+ for (let i in response.rows){
|
|
|
+ this.xdata.push(response.rows[i].createdDate);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ listQydata92(this.queryParams).then(response => {
|
|
|
+ this.qydata92=[];
|
|
|
+ if (response.rows === "undefined") {
|
|
|
+ } else {
|
|
|
+ for (let i in response.rows){
|
|
|
+ this.qydata92.push(response.rows[i].amt);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ listQydata95(this.queryParams).then(response => {
|
|
|
+ this.qydata95=[];
|
|
|
+ if (response.rows === "undefined") {
|
|
|
+ } else {
|
|
|
+ for (let i in response.rows){
|
|
|
+ this.qydata95.push(response.rows[i].amt);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ listQydata97(this.queryParams).then(response => {
|
|
|
+ this.qydata97=[];
|
|
|
+ if (response.rows === "undefined") {
|
|
|
+ } else {
|
|
|
+ for (let i in response.rows){
|
|
|
+ this.qydata97.push(response.rows[i].amt);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
/** 查询优惠劵管理列表 */
|
|
|
getList() {
|
|
|
listSum(this.queryParams).then(response => {
|
|
@@ -213,7 +360,11 @@ export default {
|
|
|
this.reset();
|
|
|
this.queryParams.beginTime = this.getDates();
|
|
|
this.queryParams.endTime = this.getEndFormatDate(new Date());
|
|
|
+ this.getDatas();
|
|
|
this.getList();
|
|
|
+ setTimeout(() =>{
|
|
|
+ this.initChart();
|
|
|
+ },1000);
|
|
|
},
|
|
|
|
|
|
//本月数据
|
|
@@ -221,7 +372,9 @@ export default {
|
|
|
this.reset();
|
|
|
this.queryParams.beginTime = this.getMonthDate();
|
|
|
this.queryParams.endTime = this.getEndFormatDate(new Date());
|
|
|
+ this.getDatas();
|
|
|
this.getList();
|
|
|
+ this.initChart();
|
|
|
},
|
|
|
|
|
|
//按照指定日期
|
|
@@ -229,8 +382,11 @@ export default {
|
|
|
this.reset();
|
|
|
this.queryParams.beginTime = this.dateRangeCreatedDate[0];
|
|
|
this.queryParams.endTime = this.dateRangeCreatedDate[1];
|
|
|
-
|
|
|
+ this.getDatas();
|
|
|
this.getList();
|
|
|
+ setTimeout(() =>{
|
|
|
+ this.initChart();
|
|
|
+ },1000);
|
|
|
},
|
|
|
//今天
|
|
|
getNowFormatDate(date) {
|
|
@@ -243,15 +399,15 @@ export default {
|
|
|
if (strDate >= 0 && strDate <= 9) {
|
|
|
strDate = "0" + strDate;
|
|
|
}
|
|
|
- let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
|
|
|
- return currentdate;
|
|
|
+ let currentdate1 = date.getFullYear() + seperator1 + month + seperator1 + strDate;
|
|
|
+ return currentdate1;
|
|
|
},
|
|
|
//明天
|
|
|
getEndFormatDate(myDate) {
|
|
|
let date = myDate.getDate();
|
|
|
date = date + 1;
|
|
|
myDate.setDate(date);
|
|
|
- let seperator1 = "-";
|
|
|
+ let seperator2 = "-";
|
|
|
let month = myDate.getMonth() + 1;
|
|
|
let strDate = myDate.getDate();
|
|
|
if (month >= 1 && month <= 9) {
|
|
@@ -260,15 +416,15 @@ export default {
|
|
|
if (strDate >= 0 && strDate <= 9) {
|
|
|
strDate = "0" + strDate;
|
|
|
}
|
|
|
- let currentdate = myDate.getFullYear() + seperator1 + month + seperator1 + strDate;
|
|
|
- return currentdate;
|
|
|
+ let currentdate2 = myDate.getFullYear() + seperator2 + month + seperator2 + strDate;
|
|
|
+ return currentdate2;
|
|
|
},
|
|
|
//昨天
|
|
|
getFormatDate(myDate) {
|
|
|
let date = myDate.getDate();
|
|
|
date = date - 1;
|
|
|
myDate.setDate(date);
|
|
|
- let seperator1 = "-";
|
|
|
+ let seperator3 = "-";
|
|
|
let month = myDate.getMonth() + 1;
|
|
|
let strDate = myDate.getDate();
|
|
|
if (month >= 1 && month <= 9) {
|
|
@@ -277,8 +433,8 @@ export default {
|
|
|
if (strDate >= 0 && strDate <= 9) {
|
|
|
strDate = "0" + strDate;
|
|
|
}
|
|
|
- let currentdate = myDate.getFullYear() + seperator1 + month + seperator1 + strDate;
|
|
|
- return currentdate;
|
|
|
+ let currentdate3 = myDate.getFullYear() + seperator3 + month + seperator3 + strDate;
|
|
|
+ return currentdate3;
|
|
|
},
|
|
|
getDates() {
|
|
|
var new_Date = new Date()
|