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

前端

Browse Source
This commit is contained in:
xvv 2024-07-27 14:32:17 +08:00
parent c54811e52a
commit e498bcec62
3 changed files with 115 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
fuintAdmin_zt/.env.development
View File

@ -11,9 +11,8 @@ VUE_APP_BASE_API = '/dev-api'
VUE_APP_PUBLIC_PATH = '/' VUE_APP_PUBLIC_PATH = '/'
# 后端接口地址 # 后端接口地址
#VUE_APP_SERVER_URL = 'http://192.168.31.96:8080/'
#VUE_APP_SERVER_URL = 'http://192.168.31.178:8081' VUE_APP_SERVER_URL = 'http://192.168.31.72:8099/'
VUE_APP_SERVER_URL = 'http://localhost:8080/'
# cp端地址 # cp端地址
# VUE_PC_SERVER_URL = 'http://47.95.206.185:85/' # VUE_PC_SERVER_URL = 'http://47.95.206.185:85/'

20
fuintAdmin_zt/src/layout/components/Navbar.vue
View File

@ -46,25 +46,7 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-form-item label="密码" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="prsswrod()">确 定</el-button>
</span>
</el-dialog>
</div> </div>

186
fuintAdmin_zt/src/views/homeComponents/agent.vue
View File

@ -114,15 +114,13 @@
</div> </div>
</div> </div>
<div class="hui-hang"></div> <div class="hui-hang"></div>
<div class="d-s" > <div class="h-tt" >活跃油站</div>
<div> <div class="d-s" style="justify-content: space-around" >
<div class="h-tt" >活跃油站</div> <div id="ccc" style="width: 750px;height: 600px;"></div>
<div id="ccc" style="width: 300px;height: 200px; "></div> <div>
</div> <div id="cttt" style="width: 350px;height: 300px;"></div>
<div id="cccc" style="width: 300px;height: 200px;"></div> <div id="ccct" style="width: 350px;height: 300px;"></div>
<div id="ccct" style="width: 300px;height: 200px;"></div> </div>
<div id="cttt" style="width: 340px;height: 200px;"></div>
</div> </div>
</div> </div>
<div class="right-box-t"> <div class="right-box-t">
@ -155,6 +153,7 @@
</el-date-picker> </el-date-picker>
</div> </div>
<div id="ctct" style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div> <div id="ctct" style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
<div id="cccc" style="width: 300px;height: 200px;"></div>
</div> </div>
@ -328,7 +327,6 @@ export default {
const chart2= echarts.init(document.getElementById('ccct')) const chart2= echarts.init(document.getElementById('ccct'))
const chart4= echarts.init(document.getElementById('cttt')) const chart4= echarts.init(document.getElementById('cttt'))
const chart3= echarts.init(document.getElementById('ctct')) const chart3= echarts.init(document.getElementById('ctct'))
let hourList = [] let hourList = []
let storeNumList = [] let storeNumList = []
let tradeAmountList = [] let tradeAmountList = []
@ -359,37 +357,71 @@ export default {
tradeNumList = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] tradeNumList = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
} }
const option = { const option = {
color: [ color: [
'#3B6ADE',
'#409eff',
'#179726', '#179726',
'#FFB519', '#FFB519',
], ],
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
top: '0%',
left: 'center'
}, },
series: [ series: [
{ {
name: 'Access From', name: '',
type: 'pie', type: 'pie',
radius: '80%', selectedMode: 'single',
radius: [0, '35%'],
label: {
position: 'inner',
fontSize: 14,
formatter: '{d}%'
},
labelLine: {
show: false
},
data: [ data: [
// { value: 28, name: '28%' }, { value: 1548, name: '非七日活跃' },
// { value: 72, name: '72%' }, { value: 775, name: '七日活跃' }
// { value: this.countPercentage(Number(this.storeAmount.noStoreTotal),Number(this.storeAmount.noStoreTotal) + Number(this.storeAmount.storeTotal)), name: '非7日活跃油站' }, ]
// { value: this.countPercentage(Number(this.storeAmount.storeTotal),Number(this.storeAmount.noStoreTotal) + Number(this.storeAmount.storeTotal)), name: '7日活跃油站' }, },
{
{ value: Number(this.storeAmount.noStoreTotal), name: '非7日活跃油站' }, name: '',
{ value: Number(this.storeAmount.storeTotal), name: '7日活跃油站' }, type: 'pie',
radius: ['45%', '68%'],
], labelLine: {
emphasis: { length: 30
itemStyle: { },
shadowBlur: 10, label: {
shadowOffsetX: 0, formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
shadowColor: 'rgba(0, 0, 0, 0.5)' rich: {
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 14
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
} }
} },
data: [
{ value: 1048, name: '本月新增' },
{ value: 335, name: '非本月新增' }
]
} }
] ]
}; };
@ -428,35 +460,39 @@ export default {
] ]
}; };
const option2 = { const option2 = {
color: [ color: ['#fe7e01', '#48c837'],
'#0DC291',
'#FFB519',
],
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
formatter: '{d}%'
},
legend: {
bottom: '0%',
left: 'center'
}, },
series: [ series: [
{ {
name: 'Access From', name: '',
type: 'pie', type: 'pie',
radius: '80%', radius: ['40%', '80%'],
data: [ avoidLabelOverlap: false,
// { value: 28, name: '28%' }, itemStyle: {
// { value: 72, name: '72%' }, borderRadius: 10,
// { value: this.countPercentage(Number(this.storeAmount.weekStoreTotal),Number(this.storeAmount.weekStoreTotal) + Number(this.storeAmount.noWeekStoreTotal)), name: '本月新增7日活跃油站' }, borderColor: '#fff',
// { value: this.countPercentage(Number(this.storeAmount.noWeekStoreTotal),Number(this.storeAmount.weekStoreTotal) + Number(this.storeAmount.noWeekStoreTotal)), name: '本月新增非7日活跃油站' }, borderWidth: 10
{ value: Number(this.storeAmount.weekStoreTotal), name: '本月新增7日活跃油站' }, },
{ value: Number(this.storeAmount.noWeekStoreTotal), name: '本月新增非7日活跃油站' },
data: [
{ value: 50, name: '富友交易金额占比 ' },
{ value: 50, name: '拉卡拉交易金额占比' }
// { value: this.countPercentage(Number(this.storeAmount.fuYouAmount),Number(this.storeAmount.fuYouAmount) + Number(this.storeAmount.laKaLaAmount)), name: '富友占比' },
// { value: this.countPercentage(Number(this.storeAmount.laKaLaAmount),Number(this.storeAmount.fuYouAmount) + Number(this.storeAmount.laKaLaAmount)), name: '拉卡拉占比' }
], ],
emphasis: { label: {
itemStyle: { show: true,
shadowBlur: 10, position: "inside",
shadowOffsetX: 0, color:'#fff',
shadowColor: 'rgba(0, 0, 0, 0.5)' formatter: `{d}%`,
} },
}
} }
] ]
}; };
@ -564,16 +600,20 @@ export default {
}; };
const option4 ={ const option4 ={
color: ['#f82f2f', '#179627'], color: ['#fe7e01', '#48c837'],
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
formatter: '{d}%'
},
legend: {
bottom: '0%',
left: 'center'
}, },
series: [ series: [
{ {
name: 'Access From', name: '',
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '80%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
@ -581,20 +621,18 @@ export default {
borderWidth: 10 borderWidth: 10
}, },
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
data: [ data: [
// { value: 225, name: '富友占比' }, { value: 50, name: '富友交易金额占比 ' },
// { value: 735, name: '拉卡拉占比' } { value: 50, name: '拉卡拉交易金额占比' }
{ value: this.countPercentage(Number(this.storeAmount.fuYouAmount),Number(this.storeAmount.fuYouAmount) + Number(this.storeAmount.laKaLaAmount)), name: '富友占比' }, // { value: this.countPercentage(Number(this.storeAmount.fuYouAmount),Number(this.storeAmount.fuYouAmount) + Number(this.storeAmount.laKaLaAmount)), name: '富友占比' },
{ value: this.countPercentage(Number(this.storeAmount.laKaLaAmount),Number(this.storeAmount.fuYouAmount) + Number(this.storeAmount.laKaLaAmount)), name: '拉卡拉占比' } // { value: this.countPercentage(Number(this.storeAmount.laKaLaAmount),Number(this.storeAmount.fuYouAmount) + Number(this.storeAmount.laKaLaAmount)), name: '拉卡拉占比' }
] ],
label: {
show: true,
position: "inside",
color:'#fff',
formatter: `{d}%`,
},
} }
] ]
}; };
@ -639,7 +677,7 @@ export default {
.b-bs{ .b-bs{
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 20px; margin-top: 20px;
} }
@ -662,11 +700,11 @@ export default {
border-radius: 8px; border-radius: 8px;
background: #fff; background: #fff;
border: 1px solid #FFFFFF; border: 1px solid #FFFFFF;
height: 380px;
} }
.right-box{ .right-box{
width: 25%; width: 26%;
border-radius: 8px; border-radius: 8px;
background: #fff; background: #fff;
border: 1px solid #FFFFFF; border: 1px solid #FFFFFF;
@ -675,11 +713,11 @@ export default {
padding: 15px; padding: 15px;
} }
.right-box-t{ .right-box-t{
width: 25%; width: 26%;
border-radius: 8px; border-radius: 8px;
background: #fff; background: #fff;
border: 1px solid #FFFFFF; border: 1px solid #FFFFFF;
height: 380px; height: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 15px; padding: 15px;
} }