884 lines
25 KiB
Vue
884 lines
25 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-carousel height="230px">
|
||
<el-carousel-item v-for="(item,index) in bannerList" :key="index">
|
||
<div class="bannser">
|
||
|
||
<!-- <img src="../../assets/images/banner.png" alt="" >-->
|
||
<img :src="imagePath+item.productImage" alt="" >
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<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" @click="goRoute">更多 <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 class="hang_" v-for="(item,index) in noticeList" :key="index" >【{{ item.notificationType }}】{{ item.templateContent }}</div>
|
||
<div class="hang_" v-if="this.noticeList.length==0">暂无通知</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="daterange"
|
||
value-format="yyyy-MM-dd"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
@change="getStoreAmount">
|
||
</el-date-picker>
|
||
</div>
|
||
<div style="margin-right: 40px">
|
||
<el-select v-model="value" clearable placeholder="请选择" @change="chooseDept()">
|
||
<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 style="color: #000;margin-bottom: 6px;"> 活跃油站数</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 style="color: #000;margin-bottom: 6px;">交易金额(万元)/交易笔数</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 style="color: #000;margin-bottom: 6px;">退款金额(元)/退款笔数</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 style="color: #000;margin-bottom: 6px;">笔均单价(元)</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 style="color: #000;margin-bottom: 6px;">日均交易额(万元)/日均交易笔数</div>
|
||
</div>
|
||
<div class="num-size">{{ storeAmount.dayTradeAmount || 0 }} / {{ storeAmount.dayTradeTotal || 0 }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="hui-hang"></div>
|
||
<div class="h-tt" >活跃油站</div>
|
||
<div class="d-s" style="justify-content: space-around" >
|
||
<div id="ccc" style="width: 400px;height: 350px;"></div>
|
||
<div id="cttt" style="width: 350px;height: 300px;"></div>
|
||
<div id="ccct" style="width: 350px;height: 300px;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right-box-t">
|
||
<!-- <div class="h-tt" >硬件设备</div>-->
|
||
<div class="title_" style="margin-top: -10px;">
|
||
<div>硬件设备</div>
|
||
<div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">
|
||
<el-popover
|
||
placement="bottom"
|
||
width="200"
|
||
trigger="click">
|
||
<div>
|
||
联系人：张总<br>
|
||
联系电话：15666665287
|
||
</div>
|
||
<el-button slot="reference" style="border: 0px" type="text"><img src="@/assets/images/phone.png"></el-button>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
<div style="height: 90%;overflow:auto;">
|
||
<div class="d-s" style="margin: 30px 0px" v-for="(item,index) in hardwareList" :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 class="r-img">
|
||
<img :src="imagePath + item.image" style="width: 84px;height: 70px">
|
||
</div>
|
||
<div style="font-size: 14px;">{{ item.name }}</div>
|
||
</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 == timeIndex }" v-for="(item,index) in timeList" :key="index" @click="editColor(index)">
|
||
{{item}}
|
||
</div>
|
||
<el-date-picker
|
||
v-model="value2"
|
||
type="daterange"
|
||
range-separator="至"
|
||
value-format="yyyy-MM-dd"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
:disabled="disabled"
|
||
@change="getStoreList()">
|
||
</el-date-picker>
|
||
</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>
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from "echarts";
|
||
import {getStoreAmountByTime, storeAmountIndex1, storeTotalIndex} from "@/api/indexBanner";
|
||
import {selectChildByDeptId} from "@/api/system/Site/site";
|
||
import {parseTime,formatDate} from "@/utils/fuint";
|
||
import {getBannerListApi} from "@/api/sys/banner";
|
||
import {getListApi} from "@/api/setting/hardware";
|
||
import {getNotificationlogList} from "@/api/sys/sysNotificationlog";
|
||
export default {
|
||
|
||
props:["accountId",'deptId'],
|
||
data(){
|
||
return{
|
||
form: {},
|
||
timeList:[
|
||
"今日",
|
||
"近一周",
|
||
"近一月",
|
||
"近一年",
|
||
"自定义",
|
||
],
|
||
timeIndex:0,
|
||
disabled:true,
|
||
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:{},
|
||
// banner图列表
|
||
bannerList:{},
|
||
storeList:[],
|
||
hardwareList:[],
|
||
noticeList:[]
|
||
}
|
||
},
|
||
created() {
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||
this.value1 = [formatDate(oneWeekAgo),formatDate(nowDate)]
|
||
this.getStoreTotal()
|
||
this.selectChildByDeptIdApi()
|
||
// this.getStoreAmount()
|
||
// this.value = this.deptId
|
||
// this.chooseDept()
|
||
this.selectBannerList()
|
||
let start = new Date();
|
||
start.setHours(0)
|
||
start.setMinutes(0)
|
||
start.setSeconds(0)
|
||
start.setMilliseconds(0)
|
||
this.value2 = [parseTime(start),parseTime(new Date())];
|
||
this.getStoreList()
|
||
this.getHardwareList()
|
||
this.getNoticeList()
|
||
},
|
||
mounted() {
|
||
// this.initChart()
|
||
},
|
||
methods:{
|
||
goRoute(){
|
||
this.$router.push("/notify")
|
||
},
|
||
getNoticeList(){
|
||
getNotificationlogList({pageNo: 1, pageSize: 4,sentTo:this.accountId}).then(res => {
|
||
this.noticeList = res.data.records
|
||
})
|
||
},
|
||
getHardwareList(){
|
||
getListApi({page: 1, pageSize: 3,status:'1'}).then(res=>{
|
||
this.hardwareList = res.data.records;
|
||
this.hardwareList.forEach(item => {
|
||
if (item.image.includes(",")){
|
||
item.image = item.image.split(",")[0]
|
||
}
|
||
})
|
||
})
|
||
},
|
||
editColor(index){
|
||
this.timeIndex = index
|
||
this.disabled = true
|
||
if (this.timeList[index]=='今日'){
|
||
let start = new Date();
|
||
start.setHours(0)
|
||
start.setMinutes(0)
|
||
start.setSeconds(0)
|
||
start.setMilliseconds(0)
|
||
this.value2 = [parseTime(start),parseTime(new Date())];
|
||
} else if (this.timeList[index]=='近一周'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||
this.value2 = [parseTime(oneWeekAgo),parseTime(nowDate)]
|
||
} else if (this.timeList[index]=='近一月'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000)
|
||
this.value2 = [parseTime(oneWeekAgo),parseTime(nowDate)]
|
||
} else if (this.timeList[index]=='近一年'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getFullYear() - 1, nowDate.getMonth(), nowDate.getDate())
|
||
this.value2 = [parseTime(oneWeekAgo),parseTime(nowDate)]
|
||
}else if (this.timeList[index]=='自定义'){
|
||
this.disabled = false
|
||
}
|
||
this.getStoreList()
|
||
},
|
||
getStoreList(){
|
||
getStoreAmountByTime(this.addDateRange({},this.value2)).then(res => {
|
||
this.storeList = res.data
|
||
this.initChart()
|
||
})
|
||
},
|
||
selectBannerList(){
|
||
let queryParams = {
|
||
pageNo:1,
|
||
pageSize:10,
|
||
systemPosition:"系统首页",
|
||
bannerStatus:true
|
||
}
|
||
getBannerListApi(queryParams).then(res=>{
|
||
this.bannerList = res.data.records
|
||
})
|
||
},
|
||
// 查询
|
||
selectChildByDeptIdApi() {
|
||
selectChildByDeptId().then(res => {
|
||
this.options = res.data
|
||
|
||
this.value = this.deptId
|
||
this.chooseDept()
|
||
})
|
||
},
|
||
getStoreTotal(){
|
||
storeTotalIndex().then(res => {
|
||
this.storeTotal = res.data
|
||
})
|
||
},
|
||
// 选择机构信息
|
||
chooseDept(){
|
||
this.options.forEach(item => {
|
||
if (item.deptId == this.value){
|
||
this.queryParams.ancestors = item.ancestors
|
||
}
|
||
})
|
||
this.getStoreAmount()
|
||
},
|
||
getStoreAmount(){
|
||
storeAmountIndex1(this.addDateRange(this.queryParams,this.value1)).then(res => {
|
||
this.storeAmount = res.data
|
||
this.initChart()
|
||
})
|
||
},
|
||
countPercentage(upNum,downNum){
|
||
let percentage = 0;
|
||
percentage = (upNum / downNum)*100
|
||
return percentage.toFixed(2)
|
||
},
|
||
initChart() {
|
||
const chart = echarts.init(document.getElementById('ccc'))
|
||
// const chart1 = echarts.init(document.getElementById('cccc'))
|
||
const chart2= echarts.init(document.getElementById('ccct'))
|
||
const chart4= echarts.init(document.getElementById('cttt'))
|
||
const chart3= echarts.init(document.getElementById('ctct'))
|
||
let hourList = []
|
||
let storeNumList = []
|
||
let tradeAmountList = []
|
||
let tradeNumList = []
|
||
if (this.storeList.length>0) {
|
||
// for (let i = 0; i < 24; i++) {
|
||
// let flag = false;
|
||
// let hour = i.toString().padStart(2, '0') + ":00"; // 转换为两位数格式
|
||
this.storeList.forEach(item => {
|
||
// if (item.tradeTime == hour){
|
||
// flag = true
|
||
hourList.push(item.tradeTime);
|
||
storeNumList.push(item.storeNum)
|
||
tradeAmountList.push(item.tradeAmount)
|
||
tradeNumList.push(item.tradeNum)
|
||
// }
|
||
})
|
||
// hourList.push(hour);
|
||
// if (!flag) {
|
||
// storeNumList.push(0)
|
||
// tradeAmountList.push(0)
|
||
// tradeNumList.push(0)
|
||
// }
|
||
// }
|
||
}else {
|
||
hourList = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
|
||
storeNumList = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
|
||
tradeAmountList = [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 = {
|
||
color: [
|
||
'#3B6ADE',
|
||
'#fe8c4a',
|
||
'#179726',
|
||
'#FFB519',
|
||
],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '0%',
|
||
left: 'center'
|
||
},
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'pie',
|
||
selectedMode: 'single',
|
||
radius: [0, '35%'],
|
||
label: {
|
||
position: 'inner',
|
||
fontSize: 14,
|
||
formatter: '{d}%'
|
||
},
|
||
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: Number(this.storeAmount.noWeekStoreTotal), name: '非7日活跃油站' },
|
||
{ value: Number(this.storeAmount.weekStoreTotal), name: '7日活跃油站' }
|
||
]
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'pie',
|
||
radius: ['30%', '60%'],
|
||
labelLine: {
|
||
length: 30
|
||
},
|
||
label: {
|
||
// show: false,
|
||
position: 'inner',
|
||
formatter: ' {d}% ',
|
||
rich: {
|
||
b: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
|
||
fontWeight: 'bold',
|
||
lineHeight: 14
|
||
},
|
||
per: {
|
||
color: '#fff',
|
||
|
||
padding: [3, 4],
|
||
borderRadius: 4
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
{ value: Number(this.storeAmount.noAddStoreTotal), name: '非本月新增' },
|
||
{ value: Number(this.storeAmount.addStoreTotal), name: '本月新增' },
|
||
]
|
||
}
|
||
]
|
||
};
|
||
const option1 = {
|
||
color: [
|
||
'#3B6ADE',
|
||
'#fe8c4a',
|
||
],
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: '80%',
|
||
data: [
|
||
{ value: Number(this.storeAmount.addStoreTotal), name: '本月新增油站' },
|
||
{ value: Number(this.storeAmount.noAddStoreTotal), name: '非本月新增油站' },
|
||
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
const option2 = {
|
||
color: ['#fe7e01', '#48c837'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{d}%'
|
||
},
|
||
legend: {
|
||
bottom: '0%',
|
||
left: 'center'
|
||
},
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'pie',
|
||
radius: ['30%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
|
||
borderColor: '#fff',
|
||
|
||
},
|
||
|
||
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: '拉卡拉交易金额占比' }
|
||
],
|
||
label: {
|
||
show: true,
|
||
position: "inside",
|
||
color:'#fff',
|
||
formatter: `{d}%`,
|
||
},
|
||
}
|
||
]
|
||
};
|
||
const option3 = {
|
||
color: ['#FF9655', '#0DC291', '#fe8c4a'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
|
||
|
||
legend: {
|
||
data: ['交易金额', '交易笔数', '活跃油站数'],
|
||
left: 'right'
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
// data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
|
||
data: hourList,
|
||
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,0,1,4,5,7,2
|
||
// ]
|
||
data: storeNumList
|
||
},
|
||
|
||
{
|
||
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,0,4,5,7,5]
|
||
data: tradeAmountList
|
||
},
|
||
{
|
||
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]
|
||
data: tradeNumList
|
||
}
|
||
],
|
||
grid: {
|
||
left: '1%',
|
||
right: '1%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
}
|
||
|
||
};
|
||
const option4 ={
|
||
color: ['#fe7e01', '#48c837'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{d}%'
|
||
},
|
||
legend: {
|
||
bottom: '0%',
|
||
left: 'center'
|
||
},
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'pie',
|
||
radius: ['30%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 10
|
||
},
|
||
|
||
data: [
|
||
// { value: 50, name: '7日活跃油站 ' },
|
||
// { value: 50, name: '非7日活跃油站' }
|
||
{ value: this.countPercentage(Number(this.storeAmount.storeTotal),Number(this.storeAmount.storeTotal) + Number(this.storeAmount.noStoreTotal)), name: '7日活跃油站' },
|
||
{ value: this.countPercentage(Number(this.storeAmount.noStoreTotal),Number(this.storeAmount.storeTotal) + Number(this.storeAmount.noStoreTotal)), name: '非7日活跃油站' }
|
||
],
|
||
label: {
|
||
show: true,
|
||
position: "inside",
|
||
color:'#fff',
|
||
formatter: `{d}%`,
|
||
},
|
||
}
|
||
]
|
||
};
|
||
chart.setOption(option)
|
||
// chart1.setOption(option1)
|
||
chart2.setOption(option2)
|
||
chart3.setOption(option3)
|
||
chart4.setOption(option4)
|
||
|
||
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
</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;
|
||
|
||
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;
|
||
|
||
|
||
}
|
||
.right-box{
|
||
width: 26%;
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
border: 1px solid #FFFFFF;
|
||
height: 192px;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
}
|
||
.right-box-t{
|
||
width: 26%;
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
border: 1px solid #FFFFFF;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
height: 558px;
|
||
overflow: auto;
|
||
}
|
||
.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: 48px;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
}
|
||
.r-size{
|
||
font-size: 18px;
|
||
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>
|