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> |
<template> |
||||||
<div class="app-container"> |
<basic-container> |
||||||
<div class="dashboard-container"> |
<div class="app-container"> |
||||||
<div class="dashboard-text">欢迎访问物联网平台！</div> |
<div class="cardTotal"> |
||||||
<div> |
<el-card class="box-card"> |
||||||
<img src="@/assets/shouye.png" alt class="dashboard-img" /> |
<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> |
</div> |
||||||
</div> |
</basic-container> |
||||||
</template> |
</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 { |
operatorCards() { |
||||||
width: 100%; |
operatorCard().then((res) => { |
||||||
text-align: center; |
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 { |
.clearfix { |
||||||
color: #333; |
font-size: 17px; |
||||||
font-size: 25px; |
font-weight: bold; |
||||||
margin-top: 15%; |
color: #666; |
||||||
} |
} |
||||||
.dashboard-img { |
//统计 |
||||||
margin-top: 40px; |
.statistics { |
||||||
width: 25%; |
display: flex; |
||||||
height: 25%; |
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> |
</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