dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新10.15

Browse Source
This commit is contained in:
许允枞 2024-10-15 11:43:45 +08:00
parent 80aa9d4914
commit 8e24852c64
1 changed files with 207 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

332
fuintAdmin/src/views/shopowner.vue
View File

@ -148,15 +148,13 @@
<div class="left-box-t">
<div class="d-s" style="margin-bottom: 10px">
<div class="h-tt" style="margin-right: 15px">油品交易分析</div>
<el-dropdown placement="bottom-start">
<el-dropdown placement="bottom-start" @command="editColor">
<div class="h-anniu" :class="{'q-anniu' : timeShow == false}" @click="timeShow = false ">近一周 <i
class="el-icon-arrow-down el-icon--right"></i></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>今日</el-dropdown-item>
<el-dropdown-item>昨日</el-dropdown-item>
<el-dropdown-item>近一周</el-dropdown-item>
<el-dropdown-item>近一月</el-dropdown-item>
<el-dropdown-item>近一周</el-dropdown-item>
<el-dropdown-item command="近一周" index="2">近一周</el-dropdown-item>
<el-dropdown-item command="近一月" index="2">近一月</el-dropdown-item>
<el-dropdown-item command="近一年" index="2">近一年</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="h-anniu" :class="{'q-anniu' : timeShow == true}" @click="timeShow = true"><img
@ -173,22 +171,19 @@
@blur="getDataShow">
</el-date-picker>
</div>
</div>
<div id="cccf"
style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
</div>
<div class="right-box-t">
<div style="font-size: 16px;font-weight: bold"><span style="margin-right: 15px">员工排行</span>
<el-dropdown placement="bottom-start">
<el-dropdown placement="bottom-start" @command="editColor">
<div class="h-anniu" :class="{'q-anniu' : timeShow == false}" @click="timeShow = false ">近一周 <i
class="el-icon-arrow-down el-icon--right"></i></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>今日</el-dropdown-item>
<el-dropdown-item>昨日</el-dropdown-item>
<el-dropdown-item>近一周</el-dropdown-item>
<el-dropdown-item>近一月</el-dropdown-item>
<el-dropdown-item>近一周</el-dropdown-item>
<el-dropdown-item command="近一周" index="3">近一周</el-dropdown-item>
<el-dropdown-item command="近一月" index="3">近一月</el-dropdown-item>
<el-dropdown-item command="近一年" index="3">近一年</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
@ -226,15 +221,13 @@
<div class="bottom_">
<div class="d-s">
<div class="h-tt" style="margin-right: 15px">数据统计</div>
<el-dropdown placement="bottom-start">
<el-dropdown placement="bottom-start" @command="editColor">
<div class="h-anniu" :class="{'q-anniu' : timeShow == false}" @click="timeShow = false ">近一周 <i
class="el-icon-arrow-down el-icon--right"></i></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>今日</el-dropdown-item>
<el-dropdown-item>昨日</el-dropdown-item>
<el-dropdown-item>近一周</el-dropdown-item>
<el-dropdown-item>近一月</el-dropdown-item>
<el-dropdown-item>近一周</el-dropdown-item>
<el-dropdown-item command="近一周" index="1">近一周</el-dropdown-item>
<el-dropdown-item command="近一月" index="1">近一月</el-dropdown-item>
<el-dropdown-item command="近一年" index="1">近一年</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="h-anniu" :class="{'q-anniu' : timeShow == true}" @click="timeShow = true"><img
@ -323,6 +316,8 @@ export default {
dataAnalysisIfOilList: [],
//数据统计
dataCount: {},
//数据展示
dataShows: {},
}
},
created() {
@ -357,6 +352,42 @@ export default {
goList() {
this.$router.push('/notificationList/index')
},
editColor(command,index){
// console.log("command",command)
// console.log("index",index.$attrs.index)
index = index.$attrs.index
// this.timeIndex = command
this.disabled = true
if (command=='今日'){
let start = new Date();
start.setHours(0)
start.setMinutes(0)
start.setSeconds(0)
start.setMilliseconds(0)
this.value1 = [start,new Date()];
} else if (command=='近一周'){
let nowDate = new Date();
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
} else if (command=='近一月'){
let nowDate = new Date();
let oneWeekAgo = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000)
this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
} else if (command=='近一年'){
let nowDate = new Date();
let oneWeekAgo = new Date(nowDate.getFullYear() - 1, nowDate.getMonth(), nowDate.getDate())
this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
}else if (command=='自定义'){
this.disabled = false
}
if (index == "1") {
this.getDataCount()
}else if (index == "2") {
this.getDataShow()
}else if (index == "3") {
this.getStoreList()
}
},
// 获取员工排行信息
getEmployeList() {
this.employeLoading = true
@ -388,7 +419,7 @@ export default {
// console.log('dataAnalysisOilNumberList', this.dataAnalysisOilNumberList)
// console.log('dataAnalysisIfOilList', this.dataAnalysisIfOilList)
// console.log('dataAnalysisAllList', this.dataAnalysisAllList)
// this.initChart()
this.initChart()
}
})
},
@ -399,7 +430,9 @@ export default {
"endTime": this.value1[1].split(' ')[0]
}
getDataShow(data).then(res => {
// console.log('首页数据展示', res)
// console.log('首页数据展示', res.data)
this.dataShows = res.data
this.initChart()
})
},
//油站首页数据统计
@ -409,7 +442,7 @@ export default {
"endTime": this.value1[1].split(' ')[0]
}
getDataCount(data).then(res => {
console.log('首页数据统计', res.data)
// console.log('首页数据统计', res.data)
if (res.code == 200) {
this.dataCount = res.data
this.initChart()
@ -434,7 +467,7 @@ export default {
getStoreList() {
selectStoreAmount(this.addDateRange({}, this.value2)).then(res => {
this.storeList = res.data
// this.initChart()
this.initChart()
})
},
// 选择机构信息
@ -517,13 +550,15 @@ export default {
userBalanceList.push(item.userBalance)
})
}
const color = ['#FF9655', '#55F3FF', '#0DC291', '#fe8c4a', '#D55F5F'];
// 首页数据统计
const times = this.dataCount.oilData.map(item => item.time);
const count = [];
for (let i = 0; i < this.dataCount.oilNames.length; i++) {
let a = {
name: this.dataCount.oilNames[i],
color: '#FF9655',
color: color[i],
type: 'bar',
tooltip: {
valueFormatter: function (value) {
@ -538,11 +573,36 @@ export default {
},
barGap: '60%',
data: this.dataCount.oilData.map(item => item.money[i])
// data: oilAmountList
}
count.push(a)
}
console.log('count', count)
// 首页数据展示
const showTimes = this.dataShows.oilData.map(item => item.day);
// console.log('showTimes', showTimes)
const showCount = [];
for (let i = 0; i < this.dataShows.oilNames.length; i++) {
let a = {
name: this.dataShows.oilNames[i],
color: color[i],
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 13,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0]
}
},
barGap: '60%',
data: this.dataShows.oilData.map(item => item.oilPrices[i])
// data: oilAmountList
}
showCount.push(a)
}
const option = {
color: [
@ -678,8 +738,7 @@ export default {
}
},
legend: {
data: this.dataCount.oilNames,
left:'right'
data: this.dataCount.oilNames
},
xAxis: [
{
@ -724,14 +783,13 @@ export default {
}
},
legend: {
data: ['Evaporation', '油品交易额', '非油品交易额', '会员充值金额', '会员消费金额', '会员余额'],
left:'right'
data: this.dataShows.oilNames
},
xAxis: [
{
type: 'category',
// data: ['中建锦绣广场1站', '中建锦绣广场2站', '中建锦绣广场3站', '中建锦绣广场4站', '中建锦绣广场5站', '中建锦绣广场6站', '中建锦绣广场7站'],
data: storeNameList,
data: showTimes,
axisPointer: {
type: 'shadow'
}
@ -741,105 +799,128 @@ export default {
{
type: 'value',
name: '金额(元)',
// min: 0,
// max: 10000,
// interval: 2000,
axisLabel: {
formatter: '{value}'
}
}
// {
// type: 'value',
// name: '',
// min: 0,
// max: 25,
// interval: 5,
// axisLabel: {
// formatter: '{value} '
// }
// }
],
series: [
{
name: '油品交易额',
color: '#FF9655',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 13,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0]
}
},
barGap: '60%',
data: oilAmountList
},
{
name: '非油品交易额',
color: '#55F3FF',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 13,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0]
}
},
data: noOilAmountList
},
{
name: '会员充值金额',
color: '#0DC291',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 13,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0]
}
},
data: rechargeBalanceList
},
{
name: '会员消费金额',
color: '#fe8c4a',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 13,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0]
}
},
// data: [
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// ]
data: consumeBalanceList
},
{
name: '会员余额',
color: '#D55F5F',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 13,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0]
}
},
// data: [
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
// ]
data: userBalanceList
}
],
// series: [
// {
// name: '油品交易额',
// color: '#FF9655',
// type: 'bar',
// tooltip: {
// valueFormatter: function (value) {
// return value;
// }
// },
// barWidth: 13,
// itemStyle: {
// normal: {
// barBorderRadius: [50, 50, 0, 0]
// }
// },
// barGap: '60%',
// // data: [
// // 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// // ]
// data: oilAmountList
// },
// {
// name: '非油品交易额',
// color: '#55F3FF',
// type: 'bar',
// tooltip: {
// valueFormatter: function (value) {
// return value;
// }
// },
// barWidth: 13,
// itemStyle: {
// normal: {
// barBorderRadius: [50, 50, 0, 0]
// }
// },
// // data: [
// // 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// // ]
// data: noOilAmountList
// },
// {
// name: '会员充值金额',
// color: '#0DC291',
// type: 'bar',
// tooltip: {
// valueFormatter: function (value) {
// return value;
// }
// },
// barWidth: 13,
// itemStyle: {
// normal: {
// barBorderRadius: [50, 50, 0, 0]
// }
// },
// // data: [
// // 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// // ]
// data: rechargeBalanceList
// },
// {
// name: '会员消费金额',
// color: '#fe8c4a',
// type: 'bar',
// tooltip: {
// valueFormatter: function (value) {
// return value;
// }
// },
// barWidth: 13,
// itemStyle: {
// normal: {
// barBorderRadius: [50, 50, 0, 0]
// }
// },
// // data: [
// // 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// // ]
// data: consumeBalanceList
// },
// {
// name: '会员余额',
// color: '#D55F5F',
// type: 'bar',
// tooltip: {
// valueFormatter: function (value) {
// return value;
// }
// },
// barWidth: 13,
// itemStyle: {
// normal: {
// barBorderRadius: [50, 50, 0, 0]
// }
// },
// // data: [
// // 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
// // ]
// data: userBalanceList
// }
// ],
series: showCount,
grid: {
left: '3%',
right: '3%',
@ -848,7 +929,6 @@ export default {
}
};
chart.setOption(option)
// console.log('chart',chart)
chart1.setOption(option1)
chart2.setOption(option2)
chart3.setOption(option3)