9 changed files with 1862 additions and 408 deletions
@ -0,0 +1,50 @@
|
||||
import request from '@/router/axios'; |
||||
//运营商卡数量
|
||||
export const getOperatorCardNum = () => { |
||||
return request({ |
||||
url: '/api/iot-sim/home/getOperatorCardNum', |
||||
method: 'get', |
||||
}) |
||||
} |
||||
//卡状态
|
||||
export const cardStatus = () => { |
||||
return request({ |
||||
url: '/api/iot-sim/home/getSimStatus', |
||||
method: 'get', |
||||
}) |
||||
} |
||||
// ----- 流量池监控start
|
||||
export const getFlowPool = () => { |
||||
return request({ |
||||
url: '/api/iot-sim/home/getPoolMonitoring', |
||||
method: 'get', |
||||
}) |
||||
} |
||||
// -----:echars使用量 start
|
||||
export const getTotalUsage = () => { |
||||
return request({ |
||||
url: '/api/iot-sim/home/getTotalUsage', |
||||
method: 'get', |
||||
|
||||
}) |
||||
} |
||||
// -----日使用排名、月使用排名start
|
||||
export const getUsage = (type) => { |
||||
return request({ |
||||
url: '/api/iot-sim/home/getUsage', |
||||
method: 'get', |
||||
params: { |
||||
type |
||||
} |
||||
}) |
||||
} |
||||
// ----- 日使用排名、月使用排名end
|
||||
//剩余量
|
||||
|
||||
export const getCardSurplus = () => { |
||||
return request({ |
||||
url: '/api/iot-sim/home/getCardSurplus', |
||||
method: 'get', |
||||
|
||||
}) |
||||
} |
||||
@ -1,27 +1,699 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="dashboard-container"> |
||||
<div class="dashboard-text">欢迎访问物联网平台！</div> |
||||
<div> |
||||
<img src="@/assets/shouye.png" alt class="dashboard-img" /> |
||||
<basic-container> |
||||
<div class="app-container"> |
||||
<div class="cardTotal"> |
||||
<el-card class="box-card"> |
||||
<div slot="header" class="clearfix"> |
||||
<el-select |
||||
v-model="cardtype" |
||||
placeholder="请选择" |
||||
size="small" |
||||
@change="handleCardType" |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in cardType" |
||||
:key="index" |
||||
:label="item" |
||||
:value="item" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</div> |
||||
<div id="cardTotalmain" style="width: 100%; height: 165px"></div> |
||||
</el-card> |
||||
|
||||
<el-card class="box-card"> |
||||
<div slot="header" class="clearfix"> |
||||
<span>元流量池监控</span> |
||||
</div> |
||||
<div |
||||
class="foolbox" |
||||
v-for="(item, index) in foolmonitoring" |
||||
:key="index" |
||||
> |
||||
<div class="top"> |
||||
<div class="name">{{ item.name }}</div> |
||||
<div class="G">{{ item.totalM }}M</div> |
||||
</div> |
||||
<div class="progress"> |
||||
<el-progress |
||||
:text-inside="true" |
||||
:stroke-width="18" |
||||
:percentage="item.ratio" |
||||
:status="Number(item.ratio) > 80 ? 'warning' : ''" |
||||
></el-progress> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
<el-card class="box-card"> </el-card> |
||||
</div> |
||||
<div class="statistics"> |
||||
<el-card class="box-card"> |
||||
<div slot="header" class="clearfix"> |
||||
<span>设备接入总数</span> |
||||
</div> |
||||
<div class="device">{{ getDeviceNumsObj }}</div> |
||||
</el-card> |
||||
<el-card class="box-card"> |
||||
<div slot="header" class="clearfix"> |
||||
<span>会员总数</span> |
||||
</div> |
||||
<div class="water"> |
||||
<div> |
||||
<div class="number">0</div> |
||||
<div class="water-name">企业</div> |
||||
</div> |
||||
<div> |
||||
<div class="number">0</div> |
||||
<div class="water-name">个人</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
<el-card class="box-card"> |
||||
<div slot="header" class="clearfix"> |
||||
<span>销售情况</span> |
||||
</div> |
||||
<div class="water"> |
||||
<div> |
||||
<div class="number">0</div> |
||||
<div class="water-name">累计销售</div> |
||||
</div> |
||||
<div> |
||||
<div class="number">0</div> |
||||
<div class="water-name">本年销售</div> |
||||
</div> |
||||
<div> |
||||
<div class="number">0</div> |
||||
<div class="water-name">本月销售</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
<el-card class="box-card"> |
||||
<div slot="header" class="clearfix"> |
||||
<span>佣金总计</span> |
||||
</div> |
||||
<div class="water"> |
||||
<div> |
||||
<div class="number">0</div> |
||||
<div class="water-name">已支付</div> |
||||
</div> |
||||
<div> |
||||
<div class="number">0</div> |
||||
<div class="water-name">未支付</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
|
||||
<div class="tabs"> |
||||
<el-card class="box-card"> |
||||
<div class="tabs-box"> |
||||
<div class="useTypeBox"> |
||||
<div |
||||
v-for="(item, index) in useType" |
||||
:key="index" |
||||
:class="useIndex == index ? 'useType color' : 'useType nocolor'" |
||||
@click="handleTabs(index)" |
||||
> |
||||
{{ item.name }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 总使用量 --> |
||||
<div class="totaluse" v-show="useIndex == 0"> |
||||
<div class="left"> |
||||
<div id="useEchars" style="width: 100%; height: 300px"></div> |
||||
</div> |
||||
<div class="right"> |
||||
<div |
||||
class="show-box" |
||||
v-for="(item, index) in totaluseoptions" |
||||
:key="index" |
||||
> |
||||
<div class="show"> |
||||
<div> |
||||
<div class="title">{{ item.name }}</div> |
||||
<div class="content">{{ item.money }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 销售排行 --> |
||||
<div class="rank" v-show="useIndex != 0"> |
||||
<div class="rank-box"> |
||||
<div |
||||
class="rankList" |
||||
v-for="(item, index) in rankListArr" |
||||
:key="index" |
||||
> |
||||
<div class="left"> |
||||
<div class="index">{{ index + 1 }}</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="phone">{{ item.iccid }}</div> |
||||
<div class="num">{{ item.usage }}(M)</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { |
||||
cardTotal, |
||||
operatorCard, |
||||
cardStatus, |
||||
getFlowPool, |
||||
getDeviceNum, |
||||
getUsage, |
||||
getMoney, |
||||
getWithdrawal, |
||||
getMonthUsage, |
||||
getOrderNum, |
||||
} from "@/api/wel/administrator"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
cardtype: "卡总数", |
||||
cardType: ["卡总数", "运营商卡数量", "出库卡状态"], |
||||
cardData: [], |
||||
month: [], |
||||
usage: [], |
||||
useIndex: 0, |
||||
useType: [ |
||||
{ |
||||
name: "总使用量", |
||||
}, |
||||
{ |
||||
name: "销售排名", |
||||
}, |
||||
{ |
||||
name: "月使用排名", |
||||
}, |
||||
{ |
||||
name: "日使用排名", |
||||
}, |
||||
], |
||||
//元流量池监控 |
||||
foolmonitoring: [], |
||||
//设备接入总数 |
||||
getDeviceNumsObj: 0, |
||||
//echars右侧统计 |
||||
totaluseoptions: [ |
||||
{ |
||||
name: "本日收款", |
||||
money: "0", |
||||
}, |
||||
{ |
||||
name: "本月收款", |
||||
money: "0", |
||||
}, |
||||
{ |
||||
name: "本日订单数量", |
||||
money: "0", |
||||
}, |
||||
{ |
||||
name: "本月订单数量", |
||||
money: "0", |
||||
}, |
||||
{ |
||||
name: "佣金提现申请", |
||||
money: "0", |
||||
}, |
||||
{ |
||||
name: "结算佣金数", |
||||
money: "0", |
||||
}, |
||||
], |
||||
//日使用排名、月使用排名 |
||||
rankListArr: [], |
||||
}; |
||||
}, |
||||
created() { |
||||
this.cardTotals(); |
||||
this.getFlowPools(); //元流量池监控 |
||||
this.getDeviceNums(); //设备接入总数 |
||||
this.getMoneys(); |
||||
this.getMoneyss(); |
||||
this.getWithdrawals(); |
||||
this.getWithdrawalss(); |
||||
this.getMonthUsages(); |
||||
this.getOrderNums(); |
||||
this.getOrderNumss(); |
||||
}, |
||||
mounted() {}, |
||||
methods: { |
||||
//切换环形数据 |
||||
handleCardType(e) { |
||||
if (e == "卡总数") { |
||||
this.cardTotals(); |
||||
} else if (e == "运营商卡数量") { |
||||
this.operatorCards(); |
||||
} else if (e == "出库卡状态") { |
||||
this.cardStatuss(); |
||||
} |
||||
}, |
||||
//卡总数 |
||||
cardTotals() { |
||||
cardTotal().then((res) => { |
||||
if (res.data.code == 200) { |
||||
(this.cardData = [ |
||||
{ |
||||
name: "出库数量", |
||||
value: res.data.data.deliver, |
||||
}, |
||||
{ |
||||
name: "未出库数量", |
||||
value: res.data.data.notDeliver, |
||||
}, |
||||
]), |
||||
this.cardTotal(); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
<style scoped> |
||||
.dashboard-container { |
||||
width: 100%; |
||||
text-align: center; |
||||
//运营商卡数量 |
||||
operatorCards() { |
||||
operatorCard().then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.cardData = [ |
||||
{ |
||||
name: "山东省移动", |
||||
value: res.data.data.shanDongShengYiDong, |
||||
}, |
||||
{ |
||||
name: "山东省电信", |
||||
value: res.data.data.shanDongShengDianXin, |
||||
}, |
||||
{ |
||||
name: "华为电信", |
||||
value: res.data.data.huaWeiDianXin, |
||||
}, |
||||
{ |
||||
name: "济南历城移动", |
||||
value: res.data.data.jiNanLiChengYiDong, |
||||
}, |
||||
{ |
||||
name: "北京移动", |
||||
value: res.data.data.beiJingYiDong, |
||||
}, |
||||
{ |
||||
name: "济南天桥移动", |
||||
value: res.data.data.jiNanTianQiaoYiDong, |
||||
}, |
||||
]; |
||||
this.cardTotal(); |
||||
} |
||||
}); |
||||
}, |
||||
//出库卡状态 |
||||
cardStatuss() { |
||||
cardStatus().then((res) => { |
||||
console.log(res, 3); |
||||
if (res.data.code == 200) { |
||||
this.cardData = [ |
||||
{ |
||||
name: "已激活", |
||||
value: res.data.data.inUse, |
||||
}, |
||||
{ |
||||
name: "未激活", |
||||
value: res.data.data.unused, |
||||
}, |
||||
{ |
||||
name: "停机", |
||||
value: res.data.data.shutdown, |
||||
}, |
||||
{ |
||||
name: "其他", |
||||
value: res.data.data.other, |
||||
}, |
||||
]; |
||||
this.cardTotal(); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
//卡环形图 |
||||
cardTotal() { |
||||
let chartDom = document.getElementById("cardTotalmain"); |
||||
let myChart = echarts.init(chartDom); |
||||
let option; |
||||
option = { |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
legend: { |
||||
type: "scroll", |
||||
orient: "vertical", |
||||
right: 0, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["60%", "90%"], |
||||
center: ["40%", "50%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "left", |
||||
}, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
data: this.cardData, |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
option && myChart.setOption(option); |
||||
}, |
||||
//元流量池监控 |
||||
getFlowPools() { |
||||
getFlowPool().then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.foolmonitoring = res.data.data; |
||||
} |
||||
}); |
||||
}, |
||||
//设备接入总数 |
||||
getDeviceNums() { |
||||
getDeviceNum().then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.getDeviceNumsObj = res.data.data; |
||||
} |
||||
}); |
||||
}, |
||||
//总使用量echars |
||||
useEchars() { |
||||
let chartDoms = document.getElementById("useEchars"); |
||||
let myCharts = echarts.init(chartDoms); |
||||
let options; |
||||
options = { |
||||
xAxis: { |
||||
name: "月", |
||||
type: "category", |
||||
boundaryGap: false, |
||||
data: this.month, |
||||
}, |
||||
yAxis: { |
||||
type: "value", |
||||
name: "M", |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: this.usage, |
||||
type: "line", |
||||
areaStyle: {}, |
||||
}, |
||||
], |
||||
tooltip: { |
||||
trigger: "axis", |
||||
axisPointer: { |
||||
type: "cross", |
||||
label: { |
||||
backgroundColor: "#6a7985", |
||||
}, |
||||
}, |
||||
}, |
||||
}; |
||||
options && myCharts.setOption(options); |
||||
}, |
||||
//切换选项卡 |
||||
handleTabs(index) { |
||||
this.useIndex = index; |
||||
if (index == 2) { |
||||
this.getUsages(2); |
||||
} else if (index == 3) { |
||||
this.getUsages(1); |
||||
} |
||||
}, |
||||
//日使用排名、月使用排名 type 2:月；1：日 |
||||
getUsages(type) { |
||||
getUsage(type).then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.rankListArr = res.data.data; |
||||
} |
||||
}); |
||||
}, |
||||
//日收款、月收款 type 2:月；1：日 |
||||
getMoneys() { |
||||
getMoney(1).then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.totaluseoptions[0].money = res.data.data; |
||||
} |
||||
}); |
||||
}, |
||||
getMoneyss() { |
||||
getMoney(2).then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.totaluseoptions[1].money = res.data.data; |
||||
} |
||||
}); |
||||
}, |
||||
//本日订单 本月订单 |
||||
getOrderNums() { |
||||
getOrderNum(1).then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.totaluseoptions[2].money = res.data.data.total; |
||||
} |
||||
}); |
||||
}, |
||||
getOrderNumss() { |
||||
getOrderNum(5).then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.totaluseoptions[3].money = res.data.data.total; |
||||
} |
||||
}); |
||||
}, |
||||
//佣金提取 结算佣金 |
||||
getWithdrawals() { |
||||
getWithdrawal(1).then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.totaluseoptions[4].money = res.data.data; |
||||
} |
||||
}); |
||||
}, |
||||
getWithdrawalss() { |
||||
getWithdrawal(2).then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.totaluseoptions[5].money = res.data.data; |
||||
} |
||||
}); |
||||
}, |
||||
//总使用量 |
||||
getMonthUsages() { |
||||
getMonthUsage().then((res) => { |
||||
let month = []; |
||||
let usage = []; |
||||
if (res.data.code == 200) { |
||||
res.data.data.forEach((element) => { |
||||
month.push(element.month); |
||||
usage.push(element.usage); |
||||
}); |
||||
this.month = month; |
||||
this.usage = usage; |
||||
this.useEchars(); |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.cardTotal { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.box-card { |
||||
width: 32%; |
||||
height: 250px; |
||||
overflow: auto; |
||||
.foolbox { |
||||
margin-top: 2px; |
||||
.top { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.name { |
||||
font-size: 13px; |
||||
color: #666; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
.roundtop { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
} |
||||
.round { |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
.progress { |
||||
margin-top: 1px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.dashboard-text { |
||||
color: #333; |
||||
font-size: 25px; |
||||
margin-top: 15%; |
||||
.clearfix { |
||||
font-size: 17px; |
||||
font-weight: bold; |
||||
color: #666; |
||||
} |
||||
.dashboard-img { |
||||
margin-top: 40px; |
||||
width: 25%; |
||||
height: 25%; |
||||
//统计 |
||||
.statistics { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-top: 12px; |
||||
|
||||
.box-card { |
||||
width: 24%; |
||||
|
||||
.device { |
||||
font-size: 34px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 90px; |
||||
font-weight: bold; |
||||
color: rgb(66, 125, 169); |
||||
} |
||||
.water { |
||||
height: 90px; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
text-align: center; |
||||
.number { |
||||
font-size: 19px; |
||||
font-weight: bold; |
||||
color: rgb(66, 125, 169); |
||||
} |
||||
.water-name { |
||||
margin-top: 9px; |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
color: rgb(66, 125, 169); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//选项卡 |
||||
.tabs { |
||||
margin-top: 10px; |
||||
width: 100%; |
||||
|
||||
.tabs-box { |
||||
.useTypeBox { |
||||
width: 50%; |
||||
margin: 0 auto; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
.useType { |
||||
cursor: pointer; |
||||
padding-bottom: 13px; |
||||
} |
||||
.color { |
||||
border-bottom: 2px solid blueviolet; |
||||
color: "blueviolet"; |
||||
} |
||||
.nocolor { |
||||
border-bottom: 2px solid white; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.totaluse { |
||||
display: flex; |
||||
.left { |
||||
flex: 4; |
||||
} |
||||
.right { |
||||
flex: 2; |
||||
margin-top: 20px; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
flex-wrap: wrap; |
||||
.show-box { |
||||
width: 46%; |
||||
height: 80px; |
||||
background: #427da9; |
||||
border-radius: 14px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.show { |
||||
width: 92%; |
||||
height: 70px; |
||||
background: #427da9; |
||||
border-radius: 14px; |
||||
border: 1px solid white; |
||||
color: white; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.title { |
||||
font-size: 14px; |
||||
} |
||||
.content { |
||||
font-size: 18px; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.rank { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin: 0 auto; |
||||
.rank-box { |
||||
width: 90%; |
||||
margin: 0 auto; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
.rankList { |
||||
display: flex; |
||||
width: 50%; |
||||
margin-top: 15px; |
||||
.left { |
||||
width: 13%; |
||||
height: 40px; |
||||
|
||||
background: #427da9; |
||||
.index { |
||||
color: white; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
.right { |
||||
width: 80%; |
||||
|
||||
height: 40px; |
||||
|
||||
background: #f2f2f2; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
color: #427da9; |
||||
font-weight: 700; |
||||
.phone { |
||||
width: 60%; |
||||
} |
||||
.num { |
||||
width: 20%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,524 @@
|
||||
<template> |
||||
<basic-container> |
||||
<div class="app-container"> |
||||
<div class="cardTotal"> |
||||
<el-card class="box-card"> |
||||
<div slot="header" class="clearfix"> |
||||
<el-select |
||||
v-model="cardtype" |
||||
placeholder="请选择" |
||||
size="small" |
||||
@change="handleCardType" |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in cardType" |
||||
:key="index" |
||||
:label="item" |
||||
:value="item" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</div> |
||||
<div id="cardTotalmain" style="width: 100%; height: 165px"></div> |
||||
</el-card> |
||||
|
||||
<el-card class="box-card"> |
||||
<div slot="header" class="clearfix"> |
||||
<span>流量池监控</span> |
||||
</div> |
||||
<div |
||||
class="foolbox" |
||||
v-for="(item, index) in foolmonitoring" |
||||
:key="index" |
||||
> |
||||
<div class="top"> |
||||
<div class="name">{{ item.name }}</div> |
||||
<div class="G">{{ item.totalM }}M</div> |
||||
</div> |
||||
<div class="progress"> |
||||
<el-progress |
||||
:text-inside="true" |
||||
:stroke-width="18" |
||||
:percentage="item.ratio" |
||||
:status="Number(item.ratio) > 80 ? 'warning' : ''" |
||||
></el-progress> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
<el-card class="box-card"> |
||||
<div slot="header" class="clearfix"> |
||||
<span>流量剩余量</span> |
||||
</div> |
||||
<div class="foolbox"> |
||||
<div class="top"> |
||||
<el-table :data="residueListArr" style="width: 100%"> |
||||
<el-table-column prop="iccid" label="ICCID"> </el-table-column> |
||||
<el-table-column prop="surplus" label="剩余量(M)" align="right"> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
|
||||
<div class="tabs"> |
||||
<el-card class="box-card"> |
||||
<div class="tabs-box"> |
||||
<div class="useTypeBox"> |
||||
<div |
||||
v-for="(item, index) in useType" |
||||
:key="index" |
||||
:class="useIndex == index ? 'useType color' : 'useType nocolor'" |
||||
@click="handleTabs(index)" |
||||
> |
||||
{{ item.name }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 总使用量 --> |
||||
<div class="totaluse" v-show="useIndex == 0"> |
||||
<div class="left"> |
||||
<div id="useEchars" style="width: 100%; height: 300px"></div> |
||||
</div> |
||||
</div> |
||||
<!-- 销售排行 --> |
||||
<div class="rank" v-show="useIndex != 0"> |
||||
<div class="rank-box"> |
||||
<div |
||||
class="rankList" |
||||
v-for="(item, index) in rankListArr" |
||||
:key="index" |
||||
> |
||||
<div class="left"> |
||||
<div class="index">{{ index + 1 }}</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="phone">{{ item.iccid }}</div> |
||||
<div class="num">{{ item.usage }}(M)</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { |
||||
getOperatorCardNum, |
||||
cardStatus, |
||||
getFlowPool, |
||||
getTotalUsage, |
||||
getUsage, |
||||
getCardSurplus, |
||||
} from "@/api/wel/buser"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
cardtype: "运营商卡数量", |
||||
cardType: ["运营商卡数量", "出库卡状态"], |
||||
cardData: [], |
||||
month: [], |
||||
usage: [], |
||||
useIndex: 0, |
||||
useType: [ |
||||
{ |
||||
name: "总使用量", |
||||
}, |
||||
|
||||
{ |
||||
name: "月使用排名", |
||||
}, |
||||
{ |
||||
name: "日使用排名", |
||||
}, |
||||
], |
||||
//流量池监控 |
||||
foolmonitoring: [], |
||||
//剩余流量 |
||||
residueListArr: [], |
||||
//设备接入总数 |
||||
|
||||
//日使用排名、月使用排名 |
||||
rankListArr: [], |
||||
}; |
||||
}, |
||||
created() { |
||||
this.operatorCards(); |
||||
this.getFlowPools(); //流量池监控 |
||||
this.getTotalUsages(); //总使用量 |
||||
this.getCardSurpluss(); //剩余流量 |
||||
}, |
||||
mounted() {}, |
||||
methods: { |
||||
//切换环形数据 |
||||
handleCardType(e) { |
||||
if (e == "运营商卡数量") { |
||||
this.operatorCards(); |
||||
} else if (e == "出库卡状态") { |
||||
this.cardStatuss(); |
||||
} |
||||
}, |
||||
//运营商卡数量 |
||||
operatorCards() { |
||||
getOperatorCardNum().then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.cardData = [ |
||||
{ |
||||
name: "中国移动", |
||||
value: res.data.data.mobile, |
||||
}, |
||||
{ |
||||
name: "中国联通", |
||||
value: res.data.data.unicom, |
||||
}, |
||||
{ |
||||
name: "中国电信", |
||||
value: res.data.data.telecom, |
||||
}, |
||||
]; |
||||
this.cardTotal(); |
||||
} |
||||
}); |
||||
}, |
||||
//出库卡状态 |
||||
cardStatuss() { |
||||
cardStatus().then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.cardData = [ |
||||
{ |
||||
name: "已激活", |
||||
value: res.data.data.inUse, |
||||
}, |
||||
{ |
||||
name: "未激活", |
||||
value: res.data.data.unused, |
||||
}, |
||||
{ |
||||
name: "停机", |
||||
value: res.data.data.shutdown, |
||||
}, |
||||
{ |
||||
name: "其他", |
||||
value: res.data.data.other, |
||||
}, |
||||
]; |
||||
this.cardTotal(); |
||||
} |
||||
}); |
||||
}, |
||||
//卡环形图 |
||||
cardTotal() { |
||||
let chartDom = document.getElementById("cardTotalmain"); |
||||
let myChart = echarts.init(chartDom); |
||||
let option; |
||||
option = { |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
legend: { |
||||
type: "scroll", |
||||
orient: "vertical", |
||||
right: 0, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["60%", "90%"], |
||||
center: ["40%", "50%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "left", |
||||
}, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
data: this.cardData, |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
option && myChart.setOption(option); |
||||
}, |
||||
//元流量池监控 |
||||
getFlowPools() { |
||||
getFlowPool().then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.foolmonitoring = res.data.data; |
||||
} |
||||
}); |
||||
}, |
||||
//剩余流量 |
||||
getCardSurpluss() { |
||||
getCardSurplus().then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.residueListArr = res.data.data; |
||||
} |
||||
}); |
||||
}, |
||||
//总使用量echars |
||||
useEchars() { |
||||
let chartDoms = document.getElementById("useEchars"); |
||||
let myCharts = echarts.init(chartDoms); |
||||
let options; |
||||
options = { |
||||
xAxis: { |
||||
name: "月", |
||||
type: "category", |
||||
boundaryGap: false, |
||||
data: this.month, |
||||
}, |
||||
yAxis: { |
||||
type: "value", |
||||
name: "M", |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: this.usage, |
||||
type: "line", |
||||
areaStyle: {}, |
||||
}, |
||||
], |
||||
tooltip: { |
||||
trigger: "axis", |
||||
axisPointer: { |
||||
type: "cross", |
||||
label: { |
||||
backgroundColor: "#6a7985", |
||||
}, |
||||
}, |
||||
}, |
||||
}; |
||||
options && myCharts.setOption(options); |
||||
}, |
||||
|
||||
//切换选项卡 |
||||
handleTabs(index) { |
||||
this.useIndex = index; |
||||
if (index == 1) { |
||||
this.getUsages(2); |
||||
} else if (index == 2) { |
||||
this.getUsages(1); |
||||
} |
||||
}, |
||||
//日使用排名、月使用排名 type 2:月；1：日 |
||||
getUsages(type) { |
||||
getUsage(type).then((res) => { |
||||
if (res.data.code == 200) { |
||||
this.rankListArr = res.data.data; |
||||
} |
||||
}); |
||||
}, |
||||
//总使用量 |
||||
getTotalUsages() { |
||||
getTotalUsage().then((res) => { |
||||
let month = []; |
||||
let usage = []; |
||||
if (res.data.code == 200) { |
||||
res.data.data.forEach((element) => { |
||||
month.push(element.month); |
||||
usage.push(element.usage); |
||||
}); |
||||
this.month = month; |
||||
this.usage = usage; |
||||
this.useEchars(); |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.cardTotal { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.box-card { |
||||
width: 32%; |
||||
height: 250px; |
||||
overflow: auto; |
||||
.foolbox { |
||||
.top { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.name { |
||||
font-size: 13px; |
||||
color: #666; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
.roundtop { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
} |
||||
.round { |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
.progress { |
||||
margin-top: 1px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.clearfix { |
||||
font-size: 17px; |
||||
font-weight: bold; |
||||
color: #666; |
||||
} |
||||
//统计 |
||||
.statistics { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-top: 12px; |
||||
|
||||
.box-card { |
||||
width: 24%; |
||||
|
||||
.device { |
||||
font-size: 34px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 90px; |
||||
font-weight: bold; |
||||
color: rgb(66, 125, 169); |
||||
} |
||||
.water { |
||||
height: 90px; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
text-align: center; |
||||
.number { |
||||
font-size: 19px; |
||||
font-weight: bold; |
||||
color: rgb(66, 125, 169); |
||||
} |
||||
.water-name { |
||||
margin-top: 9px; |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
color: rgb(66, 125, 169); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//选项卡 |
||||
.tabs { |
||||
margin-top: 10px; |
||||
width: 100%; |
||||
|
||||
.tabs-box { |
||||
.useTypeBox { |
||||
width: 50%; |
||||
margin: 0 auto; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
.useType { |
||||
cursor: pointer; |
||||
padding-bottom: 13px; |
||||
} |
||||
.color { |
||||
border-bottom: 2px solid blueviolet; |
||||
color: "blueviolet"; |
||||
} |
||||
.nocolor { |
||||
border-bottom: 2px solid white; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.totaluse { |
||||
display: flex; |
||||
.left { |
||||
flex: 4; |
||||
} |
||||
.right { |
||||
flex: 2; |
||||
margin-top: 20px; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
flex-wrap: wrap; |
||||
.show-box { |
||||
width: 46%; |
||||
height: 80px; |
||||
background: #427da9; |
||||
border-radius: 14px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.show { |
||||
width: 92%; |
||||
height: 70px; |
||||
background: #427da9; |
||||
border-radius: 14px; |
||||
border: 1px solid white; |
||||
color: white; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.title { |
||||
font-size: 14px; |
||||
} |
||||
.content { |
||||
font-size: 18px; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.rank { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin: 0 auto; |
||||
.rank-box { |
||||
width: 90%; |
||||
margin: 0 auto; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
.rankList { |
||||
display: flex; |
||||
width: 50%; |
||||
margin-top: 15px; |
||||
.left { |
||||
width: 13%; |
||||
height: 40px; |
||||
|
||||
background: #427da9; |
||||
.index { |
||||
color: white; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
.right { |
||||
width: 80%; |
||||
|
||||
height: 40px; |
||||
|
||||
background: #f2f2f2; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
color: #427da9; |
||||
font-weight: 700; |
||||
.phone { |
||||
width: 60%; |
||||
} |
||||
.num { |
||||
width: 20%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue