前端
This commit is contained in:
xvv
parent
3328609a09
commit
b9a056cc68
644
fuintAdmin_zt/src/views/homeComponents/agent.vue
Normal file
644
fuintAdmin_zt/src/views/homeComponents/agent.vue
Normal file
@ -0,0 +1,644 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="bannser">
|
||||
<img src="../../assets/images/banner.png" alt="" >
|
||||
</div>
|
||||
<div class="b-bs">
|
||||
<div class="left-box">
|
||||
<div class="san-box">
|
||||
<div>
|
||||
<img src="../../assets/images/l-one.png" style="width: 80px;height: 80px">
|
||||
</div>
|
||||
<div>
|
||||
<div class="r-title">{{ storeTotal.allTotal || 0 }}</div>
|
||||
<div class="r-size">合作油站总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
|
||||
<div>
|
||||
<img src="../../assets/images/l-two.png" style="width: 80px;height: 80px">
|
||||
</div>
|
||||
<div>
|
||||
<div class="r-title">{{ storeTotal.weekTotal || 0 }}</div>
|
||||
<div class="r-size">7日活跃油站汇总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
|
||||
<div>
|
||||
<img src="../../assets/images/l-three.png" style="width: 80px;height: 80px">
|
||||
</div>
|
||||
<div>
|
||||
<div class="r-title">{{ storeTotal.monthTotal || 0 }}</div>
|
||||
<div class="r-size">本月新增油站数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="title_">
|
||||
<div>通知中心</div>
|
||||
<div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">更多 <i class="el-icon-arrow-right"></i> </div>
|
||||
</div>
|
||||
<div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-bs">
|
||||
<div class="left-box-t">
|
||||
<div class="d-s">
|
||||
<div class="h-tt" >数据看板</div>
|
||||
<div class="q-anniu">近一周</div>
|
||||
<div style="margin-right: 40px">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="getStoreAmount">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div style="margin-right: 40px">
|
||||
<el-select v-model="value" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.deptId"
|
||||
:label="item.deptName"
|
||||
:value="item.deptId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-s" style="margin-top: 15px">
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>活跃油站数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.storeTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>交易金额(万元)/交易笔数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.tradeAmount || 0 }}/{{ storeAmount.tradeTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>退款金额(元)/退款笔数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.refundAmount || 0 }}/{{ storeAmount.refundTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>笔均单价(元)</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.averagePrice || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>日均交易额(万元)/日均交易笔数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.dayTradeAmount || 0 }}/{{ storeAmount.dayTradeTotal || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hui-hang"></div>
|
||||
<div class="d-s" >
|
||||
<div>
|
||||
<div class="h-tt" >活跃油站</div>
|
||||
<div id="ccc" style="width: 300px;height: 200px; "></div>
|
||||
</div>
|
||||
<div class="h-r-ba"></div>
|
||||
<div>
|
||||
<div class="h-tt" >活跃油站</div>
|
||||
<div class="d-s" style="justify-content: space-between">
|
||||
<div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div>
|
||||
<div id="ccct" style="width: 300px;height: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box-t">
|
||||
<div class="h-tt" >硬件设备</div>
|
||||
<div class="d-s" style="margin: 30px 0px" v-for="(item,index) in 3" :key="index" >
|
||||
<div class="r-img">
|
||||
<img src="../../assets/images/pcin.png" style="width: 84px;height: 70px">
|
||||
</div>
|
||||
<div>容大(RT RONGTA)RP76II针式76mm小票打印机加油站二三联票据 RP76II/USB口</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_">
|
||||
<div class="h-tt" style="margin-bottom: 15px" >数据统计</div>
|
||||
<div class="d-s">
|
||||
<div class="anniu-h" :class="{ 'anniu-act': index == 0 }" v-for="(item,index) in timeList" :key="index">
|
||||
{{item}}
|
||||
</div>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div id="ctct" style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
import {storeAmountIndex, storeTotalIndex} from "@/api/indexBanner";
|
||||
import {selectChildByDeptId} from "@/api/system/Site/site";
|
||||
import {parseTime} from "@/utils/fuint";
|
||||
export default {
|
||||
|
||||
data(){
|
||||
return{
|
||||
form: {},
|
||||
timeList:[
|
||||
"今日",
|
||||
"近一周",
|
||||
"近一月",
|
||||
"近一年",
|
||||
],
|
||||
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value: '',
|
||||
value1: [],
|
||||
value2: [],
|
||||
imagePath: process.env.VUE_APP_SERVER_URL,
|
||||
queryParams:{},
|
||||
// 店铺数量
|
||||
storeTotal:{},
|
||||
// 店铺金额
|
||||
storeAmount:{},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let nowDate = new Date();
|
||||
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||||
this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
|
||||
this.getStoreTotal()
|
||||
this.selectChildByDeptIdApi()
|
||||
this.getStoreAmount()
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
methods:{
|
||||
// 查询
|
||||
selectChildByDeptIdApi() {
|
||||
selectChildByDeptId().then(res => {
|
||||
this.options = res.data
|
||||
})
|
||||
},
|
||||
getStoreTotal(){
|
||||
storeTotalIndex().then(res => {
|
||||
this.storeTotal = res.data
|
||||
})
|
||||
},
|
||||
getStoreAmount(){
|
||||
storeAmountIndex(this.addDateRange(this.queryParams,this.value1)).then(res => {
|
||||
this.storeAmount = res.data
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
const chart = echarts.init(document.getElementById('ccc'))
|
||||
const chart1 = echarts.init(document.getElementById('cccc'))
|
||||
const chart2= echarts.init(document.getElementById('ccct'))
|
||||
const chart3= echarts.init(document.getElementById('ctct'))
|
||||
|
||||
|
||||
const option = {
|
||||
color: [
|
||||
'#0DC291',
|
||||
'#FFB519',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option1 = {
|
||||
color: [
|
||||
'#3B6ADE',
|
||||
'#409eff',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option2 = {
|
||||
color: [
|
||||
'#0DC291',
|
||||
'#FFB519',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option3 = {
|
||||
color: ['#FF9655', '#0DC291', '#409EFF'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
data: ['交易金额', '交易笔数', '活跃油站数']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
'00:00',
|
||||
'02:00',
|
||||
'04:00',
|
||||
'06:00',
|
||||
'08:00',
|
||||
'10:00',
|
||||
'12:00',
|
||||
'14:00',
|
||||
'16:00',
|
||||
'18:00',
|
||||
'20:00',
|
||||
'22:00'
|
||||
],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额(元)',
|
||||
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value} '
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '笔数',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '活跃油站数',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' ml';
|
||||
}
|
||||
},
|
||||
barWidth: 13,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里设置柱形图圆角 5左上角，右上角，右下角，左下角]
|
||||
barBorderRadius: [50, 50, 0, 0]
|
||||
}
|
||||
},
|
||||
data: [
|
||||
30.0, 31.9, 71.0, 23.2, 41.6, 31.7, 21.6, 30.0, 31.9, 71.0, 23.2, 41.6
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: '交易金额',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' °C';
|
||||
}
|
||||
},
|
||||
data: [3.0, 3.9, 7.0, 2.2, 4.6, 3.7, 2.6, 3.0, 3.9, 7.0, 3.2, 4.6]
|
||||
},
|
||||
{
|
||||
name: '交易笔数',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' °C';
|
||||
}
|
||||
},
|
||||
data: [2.0, 3.9, 4.0, 5.2, 4.6, 6.7, 7.6, 6.0, 5.9, 4.0, 4.2, 2.6]
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
chart.setOption(option)
|
||||
chart1.setOption(option1)
|
||||
chart2.setOption(option2)
|
||||
chart3.setOption(option3)
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.app-container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* height: 100vh; */
|
||||
background: #f4f5f9;
|
||||
}
|
||||
.d-s{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.bannser{
|
||||
width: 100%;
|
||||
height: 230px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.b-bs{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.left-box{
|
||||
width: 73%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 192px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
.left-box-t{
|
||||
width: 73%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 380px;
|
||||
|
||||
}
|
||||
.right-box{
|
||||
width: 25%;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 192px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
.right-box-t{
|
||||
width: 25%;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 380px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
.san-box{
|
||||
width: 360px;
|
||||
height: 150px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
|
||||
margin: 15px 0px;
|
||||
margin-right: 15px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.r-title{
|
||||
font-weight: bold;
|
||||
font-size: 42px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
.r-size{
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.title_{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.hang_{
|
||||
width: 100%;
|
||||
white-space: nowrap; //不换行
|
||||
overflow: hidden; //超出部分隐藏
|
||||
text-overflow: ellipsis; //文本溢出显示省略号
|
||||
font-size: 14px;
|
||||
color: #777777;
|
||||
margin: 14px auto;
|
||||
}
|
||||
.h-tt{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.q-anniu{
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
background: #FF9655;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.k-box{
|
||||
width: 215px;
|
||||
height: 68px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e1e0e0;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.num-size{
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #555555;
|
||||
}
|
||||
.sian{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #2BBCFF;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.hui-hang{
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: #F4F5F9;
|
||||
margin: 15px auto;
|
||||
}
|
||||
.h-r-ba{
|
||||
height: 170px;
|
||||
margin: 0px 50px;
|
||||
width: 5px;
|
||||
background: #f4f5f9;
|
||||
}
|
||||
.r-img{
|
||||
width: 84px;
|
||||
height: 70px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.bottom_{
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.anniu-h{
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
background: #FAFAFA;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #DDDDDD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #777777;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.anniu-act{
|
||||
background: #FF9655 !important;
|
||||
border: 1px solid #FF9655 !important;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
</style>
|
||||
644
fuintAdmin_zt/src/views/homeComponents/manage.vue
Normal file
644
fuintAdmin_zt/src/views/homeComponents/manage.vue
Normal file
@ -0,0 +1,644 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="bannser">
|
||||
<img src="../../assets/images/banner.png" alt="" >
|
||||
</div>
|
||||
<div class="b-bs">
|
||||
<div class="left-box">
|
||||
<div class="san-box">
|
||||
<div>
|
||||
<img src="../../assets/images/l-one.png" style="width: 80px;height: 80px">
|
||||
</div>
|
||||
<div>
|
||||
<div class="r-title">{{ storeTotal.allTotal || 0 }}</div>
|
||||
<div class="r-size">合作油站总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
|
||||
<div>
|
||||
<img src="../../assets/images/l-two.png" style="width: 80px;height: 80px">
|
||||
</div>
|
||||
<div>
|
||||
<div class="r-title">{{ storeTotal.weekTotal || 0 }}</div>
|
||||
<div class="r-size">7日活跃油站汇总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
|
||||
<div>
|
||||
<img src="../../assets/images/l-three.png" style="width: 80px;height: 80px">
|
||||
</div>
|
||||
<div>
|
||||
<div class="r-title">{{ storeTotal.monthTotal || 0 }}</div>
|
||||
<div class="r-size">本月新增油站数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="title_">
|
||||
<div>通知中心</div>
|
||||
<div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">更多 <i class="el-icon-arrow-right"></i> </div>
|
||||
</div>
|
||||
<div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-bs">
|
||||
<div class="left-box-t">
|
||||
<div class="d-s">
|
||||
<div class="h-tt" >数据看板</div>
|
||||
<div class="q-anniu">近一周</div>
|
||||
<div style="margin-right: 40px">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="getStoreAmount">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div style="margin-right: 40px">
|
||||
<el-select v-model="value" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.deptId"
|
||||
:label="item.deptName"
|
||||
:value="item.deptId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-s" style="margin-top: 15px">
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>活跃油站数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.storeTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>交易金额(万元)/交易笔数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.tradeAmount || 0 }}/{{ storeAmount.tradeTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>退款金额(元)/退款笔数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.refundAmount || 0 }}/{{ storeAmount.refundTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>笔均单价(元)</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.averagePrice || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>日均交易额(万元)/日均交易笔数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.dayTradeAmount || 0 }}/{{ storeAmount.dayTradeTotal || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hui-hang"></div>
|
||||
<div class="d-s" >
|
||||
<div>
|
||||
<div class="h-tt" >活跃油站</div>
|
||||
<div id="ccc" style="width: 300px;height: 200px; "></div>
|
||||
</div>
|
||||
<div class="h-r-ba"></div>
|
||||
<div>
|
||||
<div class="h-tt" >活跃油站</div>
|
||||
<div class="d-s" style="justify-content: space-between">
|
||||
<div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div>
|
||||
<div id="ccct" style="width: 300px;height: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box-t">
|
||||
<div class="h-tt" >硬件设备</div>
|
||||
<div class="d-s" style="margin: 30px 0px" v-for="(item,index) in 3" :key="index" >
|
||||
<div class="r-img">
|
||||
<img src="../../assets/images/pcin.png" style="width: 84px;height: 70px">
|
||||
</div>
|
||||
<div>容大(RT RONGTA)RP76II针式76mm小票打印机加油站二三联票据 RP76II/USB口</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_">
|
||||
<div class="h-tt" style="margin-bottom: 15px" >数据统计</div>
|
||||
<div class="d-s">
|
||||
<div class="anniu-h" :class="{ 'anniu-act': index == 0 }" v-for="(item,index) in timeList" :key="index">
|
||||
{{item}}
|
||||
</div>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div id="ctct" style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
import {storeAmountIndex, storeTotalIndex} from "@/api/indexBanner";
|
||||
import {selectChildByDeptId} from "@/api/system/Site/site";
|
||||
import {parseTime} from "@/utils/fuint";
|
||||
export default {
|
||||
|
||||
data(){
|
||||
return{
|
||||
form: {},
|
||||
timeList:[
|
||||
"今日",
|
||||
"近一周",
|
||||
"近一月",
|
||||
"近一年",
|
||||
],
|
||||
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value: '',
|
||||
value1: [],
|
||||
value2: [],
|
||||
imagePath: process.env.VUE_APP_SERVER_URL,
|
||||
queryParams:{},
|
||||
// 店铺数量
|
||||
storeTotal:{},
|
||||
// 店铺金额
|
||||
storeAmount:{},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let nowDate = new Date();
|
||||
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||||
this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
|
||||
this.getStoreTotal()
|
||||
this.selectChildByDeptIdApi()
|
||||
this.getStoreAmount()
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
methods:{
|
||||
// 查询
|
||||
selectChildByDeptIdApi() {
|
||||
selectChildByDeptId().then(res => {
|
||||
this.options = res.data
|
||||
})
|
||||
},
|
||||
getStoreTotal(){
|
||||
storeTotalIndex().then(res => {
|
||||
this.storeTotal = res.data
|
||||
})
|
||||
},
|
||||
getStoreAmount(){
|
||||
storeAmountIndex(this.addDateRange(this.queryParams,this.value1)).then(res => {
|
||||
this.storeAmount = res.data
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
const chart = echarts.init(document.getElementById('ccc'))
|
||||
const chart1 = echarts.init(document.getElementById('cccc'))
|
||||
const chart2= echarts.init(document.getElementById('ccct'))
|
||||
const chart3= echarts.init(document.getElementById('ctct'))
|
||||
|
||||
|
||||
const option = {
|
||||
color: [
|
||||
'#0DC291',
|
||||
'#FFB519',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option1 = {
|
||||
color: [
|
||||
'#3B6ADE',
|
||||
'#409eff',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option2 = {
|
||||
color: [
|
||||
'#0DC291',
|
||||
'#FFB519',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option3 = {
|
||||
color: ['#FF9655', '#0DC291', '#409EFF'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
data: ['交易金额', '交易笔数', '活跃油站数']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
'00:00',
|
||||
'02:00',
|
||||
'04:00',
|
||||
'06:00',
|
||||
'08:00',
|
||||
'10:00',
|
||||
'12:00',
|
||||
'14:00',
|
||||
'16:00',
|
||||
'18:00',
|
||||
'20:00',
|
||||
'22:00'
|
||||
],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额(元)',
|
||||
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value} '
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '笔数',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '活跃油站数',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' ml';
|
||||
}
|
||||
},
|
||||
barWidth: 13,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里设置柱形图圆角 5左上角，右上角，右下角，左下角]
|
||||
barBorderRadius: [50, 50, 0, 0]
|
||||
}
|
||||
},
|
||||
data: [
|
||||
30.0, 31.9, 71.0, 23.2, 41.6, 31.7, 21.6, 30.0, 31.9, 71.0, 23.2, 41.6
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: '交易金额',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' °C';
|
||||
}
|
||||
},
|
||||
data: [3.0, 3.9, 7.0, 2.2, 4.6, 3.7, 2.6, 3.0, 3.9, 7.0, 3.2, 4.6]
|
||||
},
|
||||
{
|
||||
name: '交易笔数',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' °C';
|
||||
}
|
||||
},
|
||||
data: [2.0, 3.9, 4.0, 5.2, 4.6, 6.7, 7.6, 6.0, 5.9, 4.0, 4.2, 2.6]
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
chart.setOption(option)
|
||||
chart1.setOption(option1)
|
||||
chart2.setOption(option2)
|
||||
chart3.setOption(option3)
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.app-container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* height: 100vh; */
|
||||
background: #f4f5f9;
|
||||
}
|
||||
.d-s{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.bannser{
|
||||
width: 100%;
|
||||
height: 230px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.b-bs{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.left-box{
|
||||
width: 73%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 192px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
.left-box-t{
|
||||
width: 73%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 380px;
|
||||
|
||||
}
|
||||
.right-box{
|
||||
width: 25%;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 192px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
.right-box-t{
|
||||
width: 25%;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 380px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
.san-box{
|
||||
width: 360px;
|
||||
height: 150px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
|
||||
margin: 15px 0px;
|
||||
margin-right: 15px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.r-title{
|
||||
font-weight: bold;
|
||||
font-size: 42px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
.r-size{
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.title_{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.hang_{
|
||||
width: 100%;
|
||||
white-space: nowrap; //不换行
|
||||
overflow: hidden; //超出部分隐藏
|
||||
text-overflow: ellipsis; //文本溢出显示省略号
|
||||
font-size: 14px;
|
||||
color: #777777;
|
||||
margin: 14px auto;
|
||||
}
|
||||
.h-tt{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.q-anniu{
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
background: #FF9655;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.k-box{
|
||||
width: 215px;
|
||||
height: 68px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e1e0e0;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.num-size{
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #555555;
|
||||
}
|
||||
.sian{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #2BBCFF;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.hui-hang{
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: #F4F5F9;
|
||||
margin: 15px auto;
|
||||
}
|
||||
.h-r-ba{
|
||||
height: 170px;
|
||||
margin: 0px 50px;
|
||||
width: 5px;
|
||||
background: #f4f5f9;
|
||||
}
|
||||
.r-img{
|
||||
width: 84px;
|
||||
height: 70px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.bottom_{
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.anniu-h{
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
background: #FAFAFA;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #DDDDDD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #777777;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.anniu-act{
|
||||
background: #FF9655 !important;
|
||||
border: 1px solid #FF9655 !important;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
</style>
|
||||
644
fuintAdmin_zt/src/views/homeComponents/shopowner.vue
Normal file
644
fuintAdmin_zt/src/views/homeComponents/shopowner.vue
Normal file
@ -0,0 +1,644 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="bannser">
|
||||
<img src="../../assets/images/banner.png" alt="" >
|
||||
</div>
|
||||
<div class="b-bs">
|
||||
<div class="left-box">
|
||||
<div class="san-box">
|
||||
<div>
|
||||
<img src="../../assets/images/l-one.png" style="width: 80px;height: 80px">
|
||||
</div>
|
||||
<div>
|
||||
<div class="r-title">{{ storeTotal.allTotal || 0 }}</div>
|
||||
<div class="r-size">合作油站总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
|
||||
<div>
|
||||
<img src="../../assets/images/l-two.png" style="width: 80px;height: 80px">
|
||||
</div>
|
||||
<div>
|
||||
<div class="r-title">{{ storeTotal.weekTotal || 0 }}</div>
|
||||
<div class="r-size">7日活跃油站汇总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
|
||||
<div>
|
||||
<img src="../../assets/images/l-three.png" style="width: 80px;height: 80px">
|
||||
</div>
|
||||
<div>
|
||||
<div class="r-title">{{ storeTotal.monthTotal || 0 }}</div>
|
||||
<div class="r-size">本月新增油站数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="title_">
|
||||
<div>通知中心</div>
|
||||
<div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">更多 <i class="el-icon-arrow-right"></i> </div>
|
||||
</div>
|
||||
<div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-bs">
|
||||
<div class="left-box-t">
|
||||
<div class="d-s">
|
||||
<div class="h-tt" >数据看板</div>
|
||||
<div class="q-anniu">近一周</div>
|
||||
<div style="margin-right: 40px">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="getStoreAmount">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div style="margin-right: 40px">
|
||||
<el-select v-model="value" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.deptId"
|
||||
:label="item.deptName"
|
||||
:value="item.deptId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-s" style="margin-top: 15px">
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>活跃油站数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.storeTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>交易金额(万元)/交易笔数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.tradeAmount || 0 }}/{{ storeAmount.tradeTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>退款金额(元)/退款笔数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.refundAmount || 0 }}/{{ storeAmount.refundTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>笔均单价(元)</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.averagePrice || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>日均交易额(万元)/日均交易笔数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.dayTradeAmount || 0 }}/{{ storeAmount.dayTradeTotal || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hui-hang"></div>
|
||||
<div class="d-s" >
|
||||
<div>
|
||||
<div class="h-tt" >活跃油站</div>
|
||||
<div id="ccc" style="width: 300px;height: 200px; "></div>
|
||||
</div>
|
||||
<div class="h-r-ba"></div>
|
||||
<div>
|
||||
<div class="h-tt" >活跃油站</div>
|
||||
<div class="d-s" style="justify-content: space-between">
|
||||
<div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div>
|
||||
<div id="ccct" style="width: 300px;height: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box-t">
|
||||
<div class="h-tt" >硬件设备</div>
|
||||
<div class="d-s" style="margin: 30px 0px" v-for="(item,index) in 3" :key="index" >
|
||||
<div class="r-img">
|
||||
<img src="../../assets/images/pcin.png" style="width: 84px;height: 70px">
|
||||
</div>
|
||||
<div>容大(RT RONGTA)RP76II针式76mm小票打印机加油站二三联票据 RP76II/USB口</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_">
|
||||
<div class="h-tt" style="margin-bottom: 15px" >数据统计</div>
|
||||
<div class="d-s">
|
||||
<div class="anniu-h" :class="{ 'anniu-act': index == 0 }" v-for="(item,index) in timeList" :key="index">
|
||||
{{item}}
|
||||
</div>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div id="ctct" style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
import {storeAmountIndex, storeTotalIndex} from "@/api/indexBanner";
|
||||
import {selectChildByDeptId} from "@/api/system/Site/site";
|
||||
import {parseTime} from "@/utils/fuint";
|
||||
export default {
|
||||
|
||||
data(){
|
||||
return{
|
||||
form: {},
|
||||
timeList:[
|
||||
"今日",
|
||||
"近一周",
|
||||
"近一月",
|
||||
"近一年",
|
||||
],
|
||||
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value: '',
|
||||
value1: [],
|
||||
value2: [],
|
||||
imagePath: process.env.VUE_APP_SERVER_URL,
|
||||
queryParams:{},
|
||||
// 店铺数量
|
||||
storeTotal:{},
|
||||
// 店铺金额
|
||||
storeAmount:{},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let nowDate = new Date();
|
||||
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||||
this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
|
||||
this.getStoreTotal()
|
||||
this.selectChildByDeptIdApi()
|
||||
this.getStoreAmount()
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
methods:{
|
||||
// 查询
|
||||
selectChildByDeptIdApi() {
|
||||
selectChildByDeptId().then(res => {
|
||||
this.options = res.data
|
||||
})
|
||||
},
|
||||
getStoreTotal(){
|
||||
storeTotalIndex().then(res => {
|
||||
this.storeTotal = res.data
|
||||
})
|
||||
},
|
||||
getStoreAmount(){
|
||||
storeAmountIndex(this.addDateRange(this.queryParams,this.value1)).then(res => {
|
||||
this.storeAmount = res.data
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
const chart = echarts.init(document.getElementById('ccc'))
|
||||
const chart1 = echarts.init(document.getElementById('cccc'))
|
||||
const chart2= echarts.init(document.getElementById('ccct'))
|
||||
const chart3= echarts.init(document.getElementById('ctct'))
|
||||
|
||||
|
||||
const option = {
|
||||
color: [
|
||||
'#0DC291',
|
||||
'#FFB519',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option1 = {
|
||||
color: [
|
||||
'#3B6ADE',
|
||||
'#409eff',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option2 = {
|
||||
color: [
|
||||
'#0DC291',
|
||||
'#FFB519',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option3 = {
|
||||
color: ['#FF9655', '#0DC291', '#409EFF'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
data: ['交易金额', '交易笔数', '活跃油站数']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
'00:00',
|
||||
'02:00',
|
||||
'04:00',
|
||||
'06:00',
|
||||
'08:00',
|
||||
'10:00',
|
||||
'12:00',
|
||||
'14:00',
|
||||
'16:00',
|
||||
'18:00',
|
||||
'20:00',
|
||||
'22:00'
|
||||
],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额(元)',
|
||||
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value} '
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '笔数',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '活跃油站数',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' ml';
|
||||
}
|
||||
},
|
||||
barWidth: 13,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里设置柱形图圆角 5左上角，右上角，右下角，左下角]
|
||||
barBorderRadius: [50, 50, 0, 0]
|
||||
}
|
||||
},
|
||||
data: [
|
||||
30.0, 31.9, 71.0, 23.2, 41.6, 31.7, 21.6, 30.0, 31.9, 71.0, 23.2, 41.6
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: '交易金额',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' °C';
|
||||
}
|
||||
},
|
||||
data: [3.0, 3.9, 7.0, 2.2, 4.6, 3.7, 2.6, 3.0, 3.9, 7.0, 3.2, 4.6]
|
||||
},
|
||||
{
|
||||
name: '交易笔数',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' °C';
|
||||
}
|
||||
},
|
||||
data: [2.0, 3.9, 4.0, 5.2, 4.6, 6.7, 7.6, 6.0, 5.9, 4.0, 4.2, 2.6]
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
chart.setOption(option)
|
||||
chart1.setOption(option1)
|
||||
chart2.setOption(option2)
|
||||
chart3.setOption(option3)
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.app-container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* height: 100vh; */
|
||||
background: #f4f5f9;
|
||||
}
|
||||
.d-s{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.bannser{
|
||||
width: 100%;
|
||||
height: 230px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.b-bs{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.left-box{
|
||||
width: 73%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 192px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
.left-box-t{
|
||||
width: 73%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 380px;
|
||||
|
||||
}
|
||||
.right-box{
|
||||
width: 25%;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 192px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
.right-box-t{
|
||||
width: 25%;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 380px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
.san-box{
|
||||
width: 360px;
|
||||
height: 150px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
|
||||
margin: 15px 0px;
|
||||
margin-right: 15px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.r-title{
|
||||
font-weight: bold;
|
||||
font-size: 42px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
.r-size{
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.title_{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.hang_{
|
||||
width: 100%;
|
||||
white-space: nowrap; //不换行
|
||||
overflow: hidden; //超出部分隐藏
|
||||
text-overflow: ellipsis; //文本溢出显示省略号
|
||||
font-size: 14px;
|
||||
color: #777777;
|
||||
margin: 14px auto;
|
||||
}
|
||||
.h-tt{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.q-anniu{
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
background: #FF9655;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.k-box{
|
||||
width: 215px;
|
||||
height: 68px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e1e0e0;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.num-size{
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #555555;
|
||||
}
|
||||
.sian{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #2BBCFF;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.hui-hang{
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: #F4F5F9;
|
||||
margin: 15px auto;
|
||||
}
|
||||
.h-r-ba{
|
||||
height: 170px;
|
||||
margin: 0px 50px;
|
||||
width: 5px;
|
||||
background: #f4f5f9;
|
||||
}
|
||||
.r-img{
|
||||
width: 84px;
|
||||
height: 70px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.bottom_{
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.anniu-h{
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
background: #FAFAFA;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #DDDDDD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #777777;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.anniu-act{
|
||||
background: #FF9655 !important;
|
||||
border: 1px solid #FF9655 !important;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,445 +1,29 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="bannser">
|
||||
<img src="./../assets/images/banner.png" alt="" >
|
||||
</div>
|
||||
<div class="b-bs">
|
||||
<div class="left-box">
|
||||
<div class="san-box">
|
||||
<div>
|
||||
<img src="./../assets/images/l-one.png" style="width: 80px;height: 80px">
|
||||
</div>
|
||||
<div>
|
||||
<div class="r-title">{{ storeTotal.allTotal || 0 }}</div>
|
||||
<div class="r-size">合作油站总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
|
||||
<div>
|
||||
<img src="./../assets/images/l-two.png" style="width: 80px;height: 80px">
|
||||
</div>
|
||||
<div>
|
||||
<div class="r-title">{{ storeTotal.weekTotal || 0 }}</div>
|
||||
<div class="r-size">7日活跃油站汇总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
|
||||
<div>
|
||||
<img src="./../assets/images/l-three.png" style="width: 80px;height: 80px">
|
||||
</div>
|
||||
<div>
|
||||
<div class="r-title">{{ storeTotal.monthTotal || 0 }}</div>
|
||||
<div class="r-size">本月新增油站数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="title_">
|
||||
<div>通知中心</div>
|
||||
<div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">更多 <i class="el-icon-arrow-right"></i> </div>
|
||||
</div>
|
||||
<div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-bs">
|
||||
<div class="left-box-t">
|
||||
<div class="d-s">
|
||||
<div class="h-tt" >数据看板</div>
|
||||
<div class="q-anniu">近一周</div>
|
||||
<div style="margin-right: 40px">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="getStoreAmount">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div style="margin-right: 40px">
|
||||
<el-select v-model="value" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.deptId"
|
||||
:label="item.deptName"
|
||||
:value="item.deptId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-s" style="margin-top: 15px">
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>活跃油站数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.storeTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>交易金额(万元)/交易笔数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.tradeAmount || 0 }}/{{ storeAmount.tradeTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>退款金额(元)/退款笔数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.refundAmount || 0 }}/{{ storeAmount.refundTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>笔均单价(元)</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.averagePrice || 0 }}</div>
|
||||
</div>
|
||||
<div class="k-box">
|
||||
<div class="d-s" style="font-size: 12px;color: #999999;">
|
||||
<div class="sian"></div>
|
||||
<div>日均交易额(万元)/日均交易笔数</div>
|
||||
</div>
|
||||
<div class="num-size">{{ storeAmount.dayTradeAmount || 0 }}/{{ storeAmount.dayTradeTotal || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hui-hang"></div>
|
||||
<div class="d-s" >
|
||||
<div>
|
||||
<div class="h-tt" >活跃油站</div>
|
||||
<div id="ccc" style="width: 300px;height: 200px; "></div>
|
||||
</div>
|
||||
<div class="h-r-ba"></div>
|
||||
<div>
|
||||
<div class="h-tt" >活跃油站</div>
|
||||
<div class="d-s" style="justify-content: space-between">
|
||||
<div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div>
|
||||
<div id="ccct" style="width: 300px;height: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box-t">
|
||||
<div class="h-tt" >硬件设备</div>
|
||||
<div class="d-s" style="margin: 30px 0px" v-for="(item,index) in 3" :key="index" >
|
||||
<div class="r-img">
|
||||
<img src="./../assets/images/pcin.png" style="width: 84px;height: 70px">
|
||||
</div>
|
||||
<div>容大(RT RONGTA)RP76II针式76mm小票打印机加油站二三联票据 RP76II/USB口</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_">
|
||||
<div class="h-tt" style="margin-bottom: 15px" >数据统计</div>
|
||||
<div class="d-s">
|
||||
<div class="anniu-h" :class="{ 'anniu-act': index == 0 }" v-for="(item,index) in timeList" :key="index">
|
||||
{{item}}
|
||||
</div>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div id="ctct" style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<agent v-if="power == 1"></agent>
|
||||
<manage v-if="power == 2"></manage>
|
||||
<shopowner v-if="power == 3"></shopowner>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
import {storeAmountIndex, storeTotalIndex} from "@/api/indexBanner";
|
||||
import {selectChildByDeptId} from "@/api/system/Site/site";
|
||||
import {parseTime} from "@/utils/fuint";
|
||||
import agent from "@/views/homeComponents/agent.vue";
|
||||
import manage from "@/views/homeComponents/manage.vue"
|
||||
import shopowner from "@/views/homeComponents/shopowner.vue"
|
||||
export default {
|
||||
|
||||
data(){
|
||||
return{
|
||||
form: {},
|
||||
timeList:[
|
||||
"今日",
|
||||
"近一周",
|
||||
"近一月",
|
||||
"近一年",
|
||||
],
|
||||
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value: '',
|
||||
value1: [],
|
||||
value2: [],
|
||||
imagePath: process.env.VUE_APP_SERVER_URL,
|
||||
queryParams:{},
|
||||
// 店铺数量
|
||||
storeTotal:{},
|
||||
// 店铺金额
|
||||
storeAmount:{},
|
||||
power:1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let nowDate = new Date();
|
||||
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||||
this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
|
||||
this.getStoreTotal()
|
||||
this.selectChildByDeptIdApi()
|
||||
this.getStoreAmount()
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
components:{
|
||||
agent,manage,shopowner
|
||||
},
|
||||
methods:{
|
||||
// 查询
|
||||
selectChildByDeptIdApi() {
|
||||
selectChildByDeptId().then(res => {
|
||||
this.options = res.data
|
||||
})
|
||||
},
|
||||
getStoreTotal(){
|
||||
storeTotalIndex().then(res => {
|
||||
this.storeTotal = res.data
|
||||
})
|
||||
},
|
||||
getStoreAmount(){
|
||||
storeAmountIndex(this.addDateRange(this.queryParams,this.value1)).then(res => {
|
||||
this.storeAmount = res.data
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
const chart = echarts.init(document.getElementById('ccc'))
|
||||
const chart1 = echarts.init(document.getElementById('cccc'))
|
||||
const chart2= echarts.init(document.getElementById('ccct'))
|
||||
const chart3= echarts.init(document.getElementById('ctct'))
|
||||
|
||||
|
||||
const option = {
|
||||
color: [
|
||||
'#0DC291',
|
||||
'#FFB519',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option1 = {
|
||||
color: [
|
||||
'#3B6ADE',
|
||||
'#409eff',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option2 = {
|
||||
color: [
|
||||
'#0DC291',
|
||||
'#FFB519',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option3 = {
|
||||
color: ['#FF9655', '#0DC291', '#409EFF'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
data: ['交易金额', '交易笔数', '活跃油站数']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
'00:00',
|
||||
'02:00',
|
||||
'04:00',
|
||||
'06:00',
|
||||
'08:00',
|
||||
'10:00',
|
||||
'12:00',
|
||||
'14:00',
|
||||
'16:00',
|
||||
'18:00',
|
||||
'20:00',
|
||||
'22:00'
|
||||
],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额(元)',
|
||||
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value} '
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '笔数',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '活跃油站数',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' ml';
|
||||
}
|
||||
},
|
||||
barWidth: 13,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里设置柱形图圆角 5左上角，右上角，右下角，左下角]
|
||||
barBorderRadius: [50, 50, 0, 0]
|
||||
}
|
||||
},
|
||||
data: [
|
||||
30.0, 31.9, 71.0, 23.2, 41.6, 31.7, 21.6, 30.0, 31.9, 71.0, 23.2, 41.6
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: '交易金额',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' °C';
|
||||
}
|
||||
},
|
||||
data: [3.0, 3.9, 7.0, 2.2, 4.6, 3.7, 2.6, 3.0, 3.9, 7.0, 3.2, 4.6]
|
||||
},
|
||||
{
|
||||
name: '交易笔数',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' °C';
|
||||
}
|
||||
},
|
||||
data: [2.0, 3.9, 4.0, 5.2, 4.6, 6.7, 7.6, 6.0, 5.9, 4.0, 4.2, 2.6]
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
chart.setOption(option)
|
||||
chart1.setOption(option1)
|
||||
chart2.setOption(option2)
|
||||
chart3.setOption(option3)
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -450,195 +34,7 @@ export default {
|
||||
.app-container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* height: 100vh; */
|
||||
background: #f4f5f9;
|
||||
}
|
||||
.d-s{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.bannser{
|
||||
width: 100%;
|
||||
height: 230px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.b-bs{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.left-box{
|
||||
width: 73%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 192px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
.left-box-t{
|
||||
width: 73%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 380px;
|
||||
|
||||
}
|
||||
.right-box{
|
||||
width: 25%;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 192px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
.right-box-t{
|
||||
width: 25%;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #FFFFFF;
|
||||
height: 380px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
.san-box{
|
||||
width: 360px;
|
||||
height: 150px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
|
||||
margin: 15px 0px;
|
||||
margin-right: 15px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.r-title{
|
||||
font-weight: bold;
|
||||
font-size: 42px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
.r-size{
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.title_{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.hang_{
|
||||
width: 100%;
|
||||
white-space: nowrap; //不换行
|
||||
overflow: hidden; //超出部分隐藏
|
||||
text-overflow: ellipsis; //文本溢出显示省略号
|
||||
font-size: 14px;
|
||||
color: #777777;
|
||||
margin: 14px auto;
|
||||
}
|
||||
.h-tt{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.q-anniu{
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
background: #FF9655;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.k-box{
|
||||
width: 215px;
|
||||
height: 68px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e1e0e0;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.num-size{
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #555555;
|
||||
}
|
||||
.sian{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #2BBCFF;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.hui-hang{
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: #F4F5F9;
|
||||
margin: 15px auto;
|
||||
}
|
||||
.h-r-ba{
|
||||
height: 170px;
|
||||
margin: 0px 50px;
|
||||
width: 5px;
|
||||
background: #f4f5f9;
|
||||
}
|
||||
.r-img{
|
||||
width: 84px;
|
||||
height: 70px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.bottom_{
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.anniu-h{
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
background: #FAFAFA;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #DDDDDD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #777777;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.anniu-act{
|
||||
background: #FF9655 !important;
|
||||
border: 1px solid #FF9655 !important;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user