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

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

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